From fc6475fae48ab00b0d64b2cdbe4538fb9d5d854e Mon Sep 17 00:00:00 2001 From: raveit65 Date: Wed, 15 Apr 2015 15:56:28 +0200 Subject: Menta themes GTK3: adjust notebook styling - fix left.right and bottom notebooks - adjust notebook tabs in caja and pluma --- desktop-themes/Menta/gtk-3.0/gtk-widgets.css | 313 +++++++++++---------- desktop-themes/Menta/gtk-3.0/mate-applications.css | 20 ++ 2 files changed, 191 insertions(+), 142 deletions(-) (limited to 'desktop-themes/Menta/gtk-3.0') diff --git a/desktop-themes/Menta/gtk-3.0/gtk-widgets.css b/desktop-themes/Menta/gtk-3.0/gtk-widgets.css index 48e4cd6d..c1c1911e 100644 --- a/desktop-themes/Menta/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/Menta/gtk-3.0/gtk-widgets.css @@ -1574,241 +1574,262 @@ GtkCalendar.header .stack-switcher > .titlebutton.button { * tabs * *****************/ .notebook { - padding: 0; - border-style: solid; - border-color: @borders; - border-top: 0px; - - background-color: shade (@theme_bg_color, 1.1); - -GtkNotebook-initial-gap: 0; - -GtkNotebook-arrow-spacing: 5; - -GtkNotebook-tab-curvature: 0; - -GtkNotebook-tab-overlap: 0; - -GtkNotebook-has-tab-gap: false; - -GtkWidget-focus-padding: 0; - -GtkWidget-focus-line-width: 0; + padding: 0; + background-clip: border-box; + border-style: solid; + border-color: @borders; + border-width: 0px; + background-color: shade (@theme_bg_color, 1.1); + -GtkNotebook-initial-gap: 0; + -GtkNotebook-arrow-spacing: 5; + -GtkNotebook-tab-curvature: 0; + -GtkNotebook-tab-overlap: 0; + -GtkNotebook-has-tab-gap: false; + -GtkWidget-focus-padding: 0; + -GtkWidget-focus-line-width: 0; } -/* fix view in mate-appearence-properties -.notebook GtkScrolledWindow { - background-color: @theme_base_color; +.notebook :hover { + -gtk-image-effect: highlight; + color: @theme_fg_color; } -*/ -.notebook.frame { - border-width: 1px; +.notebook.frame.top { + border-width: 0px 1px 1px 1px; } -.notebook.header { - background-image: linear-gradient(to bottom, - shade(@theme_bg_color, 0.96), - shade(@theme_bg_color, 1.0)); - border-width: 0px; - box-shadow: inset 0 1px 0 0 alpha(@borders, 0.4), inset 0 -1px 0 0 alpha(@borders, 1.0); +.notebook.frame.bottom { + border-width: 1px 1px 0px 1px; } -.notebook.header.frame.top { - border-top: 1px solid @borders; - border-left: 1px solid @borders; - border-right: 1px solid @borders; +.notebook.frame.left { + border-width: 1px 1px 1px 0px; } -.notebook.header.frame.bottom { - border-bottom: 1px solid @borders; - border-left: 1px solid @borders; - border-right: 1px solid @borders; +.notebook.frame.right { + border-width: 1px 0px 1px 1px; } -.notebook.header.frame.left { - border-top: 1px solid @borders; - border-bottom: 1px solid @borders; - border-left: 1px solid @borders; +.notebook.header { + background-image: linear-gradient(to bottom, + shade(@theme_bg_color, 0.96), + shade(@theme_bg_color, 1.0)); + border-width: 0px; + box-shadow: inset 0 1px 0 0 alpha(@borders, 0.4), inset 0 -1px 0 0 alpha(@borders, 1.0); } -.notebook.header.frame.right { - border-top: 1px solid @borders; - border-bottom: 1px solid @borders; - border-right: 1px solid @borders; +.notebook.header.top { + border-width: 1px; + border-radius: 4px 4px 0px 0px; } -.notebook GtkViewport { - background-color: @theme_base_color; - border-width: 0px; +.notebook.header.bottom { + border-width: 1px; + border-radius: 0px 0px 4px 4px; } -/* looks ugly with GTK3-3.16 */ -/* -.notebook:hover { - -gtk-image-effect: highlight; - background-color: shade(@theme_bg_color, 1.07); - color: @theme_fg_color; +.notebook.header.left { + border-width: 1px; + border-radius: 4px 0px 0px 4px; +} + +.notebook.header.right { + border-width: 1px; + border-radius: 0px 4px 4px 0px; +} + +.notebook GtkViewport { + background-color: @theme_base_color; + border-width: 0px; } -*/ .notebook tab { - border-color: transparent; - border-width: 0px; - background-image: none; - background-color: transparent; + border-color: transparent; + border-width: 0px; + background-image: none; + background-color: transparent; } .notebook tab GtkLabel { - color: mix (@theme_fg_color, @theme_bg_color, 0.40); - font-weight: normal; + color: mix (@theme_fg_color, @theme_bg_color, 0.40); + font-weight: normal; } .notebook .prelight-page, .notebook .prelight-page GtkLabel { - color: mix (@theme_fg_color, @theme_bg_color, 0.15); + color: mix (@theme_fg_color, @theme_bg_color, 0.15); } .notebook .active-page, .notebook tab .active-page GtkLabel { - color: @theme_fg_color; + color: @theme_fg_color; } /* horizontal tabs */ .notebook tab.top, +/* wtf, why this doesn't work? */ .notebook tab.bottom { - padding: 6px 20px 4px; + padding: 6px 21px 4px; +} + +/* workaround for wtf */ +.notebook tab.bottom:active { + padding: 3px 21px 7px 21px; } .notebook tab.top:active, .notebook tab.top:active:hover { - background-image: linear-gradient(to bottom, - shade(@theme_bg_color, 1.18), - shade(@theme_bg_color, 1.1)); - border-radius: 4px 4px 0 0; - border-width: 1px 1px 0 1px; - border-style: solid; - border-color: @borders; - box-shadow: none; + background-image: linear-gradient(to bottom, + shade(@theme_bg_color, 1.18), + shade(@theme_bg_color, 1.1)); + border-radius: 4px 4px 0px 0px; + border-width: 1px 1px 0px 1px; + border-style: solid; + border-color: @borders; + box-shadow: none; } .notebook tab.top:hover { - background-image: linear-gradient(to bottom, - alpha(@theme_base_color, 0.0), - alpha(@theme_base_color, 0.3)); - border-radius: 0; - box-shadow: inset 1px 0 alpha(@borders, 0.6), inset -1px 0 alpha(@borders, 0.6); - border-style: none; -} - -.notebook tab.top:active { - border-bottom-color: @notebook_active_tab_border; + background-image: linear-gradient(to bottom, + alpha(@theme_base_color, 0.0), + alpha(@theme_base_color, 0.3)); + border-radius: 0px; + border-width: 0px 1px 0px 1px; + border-style: solid; + border-color: @borders; } .notebook tab.bottom:active, .notebook tab.bottom:active:hover { - background-image: linear-gradient(to top, - shade(@theme_bg_color, 1.18), - shade(@theme_bg_color, 1.1)); - border-radius: 0; - border-style: solid; - border-width: 0px 1px 1px 1px; - box-shadow: none; + background-image: linear-gradient(to top, + shade(@theme_bg_color, 1.18), + shade(@theme_bg_color, 1.1)); + border-radius: 0 0 4px 4px; + border-style: solid; + border-width: 0px 1px 1px 1px; + border-color: @borders; + box-shadow: none; } .notebook tab.bottom:hover { - background-image: linear-gradient(to top, - alpha(@theme_base_color, 0.0), - alpha(@theme_base_color, 0.3)); - border-radius: 0; - box-shadow: inset 1px 0 alpha(@borders, 0.6), inset -1px 0 alpha(@borders, 0.6); - border-style: none; -} - -.notebook tab.bottom:active { - border-top-color: @notebook_active_tab_border; + background-image: linear-gradient(to top, + alpha(@theme_base_color, 0.0), + alpha(@theme_base_color, 0.3)); + border-radius: 0px; + border-width: 0px 1px 0px 1px; + border-style: solid; + border-color: @borders; } /* vertical tabs */ .notebook tab.left, .notebook tab.right { - padding: 5px 20px; + padding: 5px 20px; } -.notebook tab.left:hover, -.notebook tab.left:active { - border-right-width: 2px; +.notebook tab.left:active, +.notebook tab.left:active:hover { + background-image: linear-gradient(to right, + shade(@theme_bg_color, 1.18), + shade(@theme_bg_color, 1.1)); + border-radius: 4px 0px 0px 4px; + border-width: 1px 0px 1px 1px; + border-color: @borders; } -.notebook tab.left:active { - border-right-color: @notebook_active_tab_border; +.notebook tab.left:hover { + background-image: linear-gradient(to right, + alpha(@theme_base_color, 0.0), + alpha(@theme_base_color, 0.3)); + border-width: 1px 0px 1px 0px; + border-style: solid; + border-color: @borders; } -.notebook tab.right:hover, -.notebook tab.right:active { - border-left-width: 2px; +.notebook tab.right:active, +.notebook tab.right:active:hover { + background-image: linear-gradient(to left, + shade(@theme_bg_color, 1.18), + shade(@theme_bg_color, 1.1)); + border-radius: 0px 4px 4px 0px; + border-width: 1px 1px 1px 0px; + border-color: @borders; } -.notebook tab.right:active { - border-left-color: @notebook_active_tab_border; +.notebook tab.right:hover { + background-image: linear-gradient(to left, + alpha(@theme_base_color, 0.0), + alpha(@theme_base_color, 0.3)); + border-width: 1px 0px 1px 0px; + border-style: solid; + border-color: @borders; } .notebook tab.reorderable-page:hover { - background-image: linear-gradient(to bottom, - alpha(@theme_base_color, 0.0), - alpha(@theme_base_color, 0.3)); - border-radius: 0; - box-shadow: inset 1px 0 alpha(@borders, 0.6), inset -1px 0 alpha(@borders, 0.6); - border-style: none; + background-image: linear-gradient(to bottom, + alpha(@theme_base_color, 0.0), + alpha(@theme_base_color, 0.3)); + border-radius: 0; + box-shadow: inset 1px 0 alpha(@borders, 0.6), inset -1px 0 alpha(@borders, 0.6); + border-style: none; } .notebook tab.reorderable-page:active { - background-image: linear-gradient(to bottom, - shade(@theme_bg_color, 1.18), - shade(@theme_bg_color, 1.1)); - border-radius: 4px 4px 0 0; - box-shadow: none; - border-style: solid; + background-image: linear-gradient(to bottom, + shade(@theme_bg_color, 1.18), + shade(@theme_bg_color, 1.1)); + border-radius: 4px 4px 0 0; + box-shadow: none; + border-style: solid; } /* close button styling */ .notebook tab .button { - color: mix (@theme_fg_color, @theme_bg_color, 0.85); - border-image: none; - background-image: none; - background-color: transparent; - border-radius: 3px; - border-style: solid; - border-color: transparent; - border-width: 1px; - padding: 1px; - icon-shadow: none; + color: mix (@theme_fg_color, @theme_bg_color, 0.85); + border-image: none; + background-image: none; + background-color: transparent; + border-radius: 3px; + border-style: solid; + border-color: transparent; + border-width: 1px; + padding: 1px; + icon-shadow: none; } .notebook .prelight-page .button, .notebook tab.prelight-page .button, .notebook .active-page .button, .notebook tab.active-page .button { - color: mix(@theme_fg_color, @theme_base_color, 0.6); - icon-shadow: 0 1px @button_text_shadow; + color: mix(@theme_fg_color, @theme_base_color, 0.6); + icon-shadow: 0 1px @button_text_shadow; } .notebook tab .button:hover { - color: @theme_fg_color; - border-color: alpha(black, 0.1); + color: @theme_fg_color; + border-color: transparent; + border-image: none; + background-image: none; + background-color: transparent; } .notebook tab .button:active, .notebook tab .button:active:hover { - color: @button_active_text; - background-color: alpha(black, 0.08); - box-shadow: inset 0 1px alpha(black, 0.05); - icon-shadow: 0 1px @button_active_text_shadow; - - border-color: alpha(black, 0.27) - alpha(black, 0.13) - alpha(black, 0.13) - alpha(black, 0.13); + color: @button_active_text; + background-color: alpha(black, 0.08); + box-shadow: inset 0 1px alpha(black, 0.05); + icon-shadow: 0 1px @button_active_text_shadow; + border-color: alpha(black, 0.27) + alpha(black, 0.13) + alpha(black, 0.13) + alpha(black, 0.13); } .notebook.arrow { /* FIXME, why this doesn't work? */ - -GtkNotebook-arrow-scaling: 0.5; + -GtkNotebook-arrow-scaling: 0.5; color: shade(@theme_fg_color, 2.6); } @@ -1824,6 +1845,14 @@ GtkCalendar.header .stack-switcher > .titlebutton.button { color: rgba(141, 144, 145, 0.3); } +.notebook.arrow:backdrop { + color: rgba(84, 89, 90, 0.4); +} + +.notebook.arrow:backdrop:insensitive { + color: #c7c7c7; +} + /************** * ComboBoxes * **************/ diff --git a/desktop-themes/Menta/gtk-3.0/mate-applications.css b/desktop-themes/Menta/gtk-3.0/mate-applications.css index 5590a142..07b18fc9 100644 --- a/desktop-themes/Menta/gtk-3.0/mate-applications.css +++ b/desktop-themes/Menta/gtk-3.0/mate-applications.css @@ -270,6 +270,22 @@ CajaNotebook .frame { border-width: 1px 0 0 0; } +/* close button styling */ +/* surpress styling of close button */ +CajaWindow .notebook tab .button.flat, +CajaWindow .notebook tab .button.flat:hover { + border-color: transparent; + background-color: transparent; + background-image: none; + text-shadow: none; + icon-shadow: none; + border-image: none; +} + +CajaWindow .notebook tab.top { + padding: 6px 3px 6px 0px; +} + .caja-cluebar-label { font: normal; text-shadow: 0 1px shade (@cluebar_color, 1.06); @@ -637,6 +653,10 @@ PlumaWindow .notebook tab .button.flat:hover { border-image: none; } +PlumaWindow .notebook tab.top { + padding: 6px 0px 6px 6px; +} + /*********************** * Mate-Control-Center * ***********************/ -- cgit v1.2.1