From cfb77058ae01325babfcd2700daa499536877da1 Mon Sep 17 00:00:00 2001 From: raveit65 Date: Sun, 26 Apr 2015 19:43:09 +0200 Subject: ContrastHighInverse GTK3: adjust notebook style --- .../ContrastHighInverse/gtk-3.0/gtk-widgets.css | 279 +++++++++++++++++++-- 1 file changed, 252 insertions(+), 27 deletions(-) diff --git a/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css b/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css index c47a1c36..c726536d 100644 --- a/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/ContrastHighInverse/gtk-3.0/gtk-widgets.css @@ -1126,56 +1126,281 @@ GtkSwitch.trough:active:insensitive { * Notebook * ************/ .notebook { - border-width: 1px; - border-color: @theme_notebook_border; - border-style: solid; + padding: 0; background-clip: border-box; - background-color: @theme_notebook_bg; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; + border-style: solid; + border-color: @theme_border_color; + 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; } .notebook :hover { - -gtk-image-effect: highlight; - background-color: shade(@theme_notebook_bg, 1.03); - color: @theme_fg_color; + -gtk-image-effect: highlight; } -.notebook tab { - padding: 3px; +.notebook.frame.top { + border-width: 0px 1px 1px 1px; +} + +.notebook.frame.bottom { + border-width: 1px 1px 0px 1px; +} + +.notebook.frame.left { + border-width: 1px 1px 1px 0px; +} + +.notebook.frame.right { + border-width: 1px 0px 1px 1px; +} + +.notebook.header { + background-image: linear-gradient(to bottom, + shade(@theme_bg_color, 0.76), + shade(@theme_bg_color, 0.8)); + border-width: 0px; + } + +.notebook.header.top { + border-width: 1px; + border-radius: 4px 4px 0px 0px; +} + +.notebook.header.bottom { + border-width: 1px; + border-radius: 0px 0px 4px 4px; +} + +.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:active { - background-color: @theme_notebook_bg; +.notebook tab { + 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; +} + +.notebook .prelight-page, +.notebook .prelight-page GtkLabel { + color: mix (@theme_fg_color, @theme_bg_color, 0.15); +} + +.notebook .active-page, +.notebook tab .active-page GtkLabel { color: @theme_fg_color; } -.notebook tab.top { - border-image: linear-gradient(to bottom, - alpha(@theme_notebook_border, 0.00), - @theme_notebook_border) 1 / 0 1px; +/* horizontal tabs */ + +.notebook tab.top, +/* wtf, why this doesn't work? */ +.notebook tab.bottom { + 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 0px 0px; + border-width: 1px 1px 0px 1px; + border-style: solid; + border-color: @borders; + box-shadow: none; } -.notebook tab.top:active { - border-width: 1px 1px 0 1px; +.notebook tab.top:hover { + background-image: linear-gradient(to bottom, + alpha(@theme_selected_bg_color, 0.2), + alpha(@theme_selected_bg_color, 0.5)); + 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 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_selected_bg_color, 0.0), + alpha(@theme_selected_bg_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; +} + +.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:hover { + background-image: linear-gradient(to right, + alpha(@theme_selected_bg_color, 0.0), + alpha(@theme_selected_bg_color, 0.3)); + border-width: 1px 0px 1px 0px; + border-style: solid; + border-color: @borders; +} + +.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:hover { + background-image: linear-gradient(to left, + alpha(@theme_selected_bg_color, 0.0), + alpha(@theme_selected_bg_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_selected_bg_color, 0.0), + alpha(@theme_selected_bg_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; +} +/* 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; } -.notebook tab.bottom { - border-width: 0 1px 1px 1px; +.notebook .prelight-page .button, +.notebook tab.prelight-page .button, +.notebook .active-page .button, +.notebook tab.active-page .button { + color: mix(@theme_fg_color, @theme_selected_bg_color, 0.6); + icon-shadow: 0 1px @button_text_shadow; +} + +.notebook tab .button:hover { + color: @theme_selected_fg_color; + border-color: transparent; + border-image: none; + background-image: none; + background-color: transparent; } -.notebook tab.left { - border-width: 1px 0 1px 1px; +.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); } -.notebook tab.right { - border-width: 1px 1px 1px 0; +.notebook.arrow { + /* FIXME, why this doesn't work? */ + -GtkNotebook-arrow-scaling: 0.5; + color: shade(@theme_fg_color, 2.6); +} + +.notebook.arrow:hover { + color: @theme_selected_bg_color; +} + +.notebook.arrow:active { + color: @theme_fg_color; +} + +.notebook.arrow:insensitive { + color: rgba(141, 144, 145, 0.3); +} + +.notebook.arrow:backdrop { + color: rgba(84, 89, 90, 0.4); +} + +.notebook.arrow:backdrop:insensitive { + color: #c7c7c7; } /******************************* -- cgit v1.2.1