From 84de918ce067974642025e1c9c2cc45f492107b5 Mon Sep 17 00:00:00 2001 From: Daniel Boles Date: Mon, 11 Sep 2017 21:51:57 +0100 Subject: [PATCH] HighContrast: Fix titlebar containing >1 headerbar by migrating the relevant code from Adwaita, to dodge unwanted doubling up of the bottom border and such. https://bugzilla.gnome.org/show_bug.cgi?id=769877 --- gtk/theme/HighContrast/_common.scss | 17 ++++++- .../HighContrast/gtk-contained-inverse.css | 44 ++++++++++--------- gtk/theme/HighContrast/gtk-contained.css | 44 ++++++++++--------- 3 files changed, 62 insertions(+), 43 deletions(-) diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index abc820c7b5..fb5769d8d5 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -1179,7 +1179,7 @@ searchbar { * Header bars * ***************/ -.titlebar, +%titlebar, headerbar { min-height: 46px; border-width: 0 0 1px; @@ -1265,6 +1265,21 @@ headerbar { } } +.titlebar:not(headerbar) { + window.csd > & { + // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases + padding: 0; + background-color: transparent; + background-image: none; + border-style: none; + border-color: transparent; + box-shadow: none; + } + + @extend %titlebar; +} + + /************ * Pathbars * ************/ diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css index fd3fc86e0d..610d79c9f6 100644 --- a/gtk/theme/HighContrast/gtk-contained-inverse.css +++ b/gtk/theme/HighContrast/gtk-contained-inverse.css @@ -482,47 +482,49 @@ toolbar.inline-toolbar, searchbar.inline-toolbar { border-style: solid; border-c toolbar.inline-toolbar:backdrop, searchbar.inline-toolbar:backdrop { border-color: #737373; background-color: #282828; box-shadow: none; } /*************** Header bars * */ -.titlebar, headerbar { min-height: 46px; border-width: 0 0 1px; border-style: solid; border-color: gray; border-radius: 7px 7px 0 0; background-color: transparent; background-image: linear-gradient(to bottom, #0a0a0a, #000); box-shadow: inset 0 -1px #262626, inset 0 1px #000; padding: 6px; } +.titlebar:not(headerbar), headerbar { min-height: 46px; border-width: 0 0 1px; border-style: solid; border-color: gray; border-radius: 7px 7px 0 0; background-color: transparent; background-image: linear-gradient(to bottom, #0a0a0a, #000); box-shadow: inset 0 -1px #262626, inset 0 1px #000; padding: 6px; } -.titlebar:backdrop, headerbar:backdrop { border-color: #737373; background-color: #000; background-image: none; box-shadow: none; } +.titlebar:backdrop:not(headerbar), headerbar:backdrop { border-color: #737373; background-color: #000; background-image: none; box-shadow: none; } -.titlebar .title, headerbar .title { font-weight: bold; padding: 0px 12px; } +.titlebar:not(headerbar) .title, headerbar .title { font-weight: bold; padding: 0px 12px; } -.titlebar .subtitle, headerbar .subtitle { font-size: 80%; padding: 0 12px; } +.titlebar:not(headerbar) .subtitle, headerbar .subtitle { font-size: 80%; padding: 0 12px; } -.titlebar.selection-mode, headerbar.selection-mode { color: #b7b7b7; text-shadow: 0 1px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #eaeaea, #e2e2e2); box-shadow: inset 0 -1px #262626, inset 0 1px #6f6f6f; } +.selection-mode.titlebar:not(headerbar), headerbar.selection-mode { color: #b7b7b7; text-shadow: 0 1px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #eaeaea, #e2e2e2); box-shadow: inset 0 -1px #262626, inset 0 1px #6f6f6f; } -.titlebar.selection-mode button, headerbar.selection-mode button { border-width: 2px; border-style: solid; color: #000; background-image: none; background-color: #ddd; border-color: #9d9d9d; } +.selection-mode.titlebar:not(headerbar) button, headerbar.selection-mode button { border-width: 2px; border-style: solid; color: #000; background-image: none; background-color: #ddd; border-color: #9d9d9d; } -.titlebar.selection-mode button:hover, headerbar.selection-mode button:hover { border-width: 2px; border-style: solid; color: #000; background-color: #ddd; border-color: #9d9d9d; background-image: none; } +.selection-mode.titlebar:not(headerbar) button:hover, headerbar.selection-mode button:hover { border-width: 2px; border-style: solid; color: #000; background-color: #ddd; border-color: #9d9d9d; background-image: none; } -.titlebar.selection-mode button:active, headerbar.selection-mode button:active { border-width: 2px; border-style: solid; background-image: none; color: white; background-color: #222222; border-color: #9d9d9d; } +.selection-mode.titlebar:not(headerbar) button:active, headerbar.selection-mode button:active { border-width: 2px; border-style: solid; background-image: none; color: white; background-color: #222222; border-color: #9d9d9d; } -.titlebar.selection-mode button:disabled, headerbar.selection-mode button:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; } +.selection-mode.titlebar:not(headerbar) button:disabled, headerbar.selection-mode button:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; } -.titlebar.selection-mode button:backdrop, headerbar.selection-mode button:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #ddd; border-color: #ddd; background-image: none; border-color: #b7b7b7; } +.selection-mode.titlebar:not(headerbar) button:backdrop, headerbar.selection-mode button:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #ddd; border-color: #ddd; background-image: none; border-color: #b7b7b7; } -.titlebar.selection-mode button:backdrop:disabled, headerbar.selection-mode button:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; } +.selection-mode.titlebar:not(headerbar) button:backdrop:disabled, headerbar.selection-mode button:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; } -.titlebar.selection-mode button.suggested-action, headerbar.selection-mode button.suggested-action { border-width: 2px; border-style: solid; color: #fff; background-image: none; background-color: #000; border-color: gray; } +.selection-mode.titlebar:not(headerbar) button.suggested-action, headerbar.selection-mode button.suggested-action { border-width: 2px; border-style: solid; color: #fff; background-image: none; background-color: #000; border-color: gray; } -.titlebar.selection-mode button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: gray; background-image: none; } +.selection-mode.titlebar:not(headerbar) button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: gray; background-image: none; } -.titlebar.selection-mode button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { border-width: 2px; border-style: solid; background-image: none; color: black; background-color: white; border-color: gray; } +.selection-mode.titlebar:not(headerbar) button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { border-width: 2px; border-style: solid; background-image: none; color: black; background-color: white; border-color: gray; } -.titlebar.selection-mode button.suggested-action:disabled, headerbar.selection-mode button.suggested-action:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; } +.selection-mode.titlebar:not(headerbar) button.suggested-action:disabled, headerbar.selection-mode button.suggested-action:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; } -.titlebar.selection-mode button.suggested-action:backdrop, headerbar.selection-mode button.suggested-action:backdrop { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: #737373; background-image: none; } +.selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop, headerbar.selection-mode button.suggested-action:backdrop { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: #737373; background-image: none; } -.titlebar.selection-mode button.suggested-action:backdrop:disabled, headerbar.selection-mode button.suggested-action:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; } +.selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop:disabled, headerbar.selection-mode button.suggested-action:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: #070707; border-color: #494949; background-image: none; } -.titlebar.selection-mode .selection-menu, headerbar.selection-mode .selection-menu { border-width: 0; background-image: none; box-shadow: none; } +.selection-mode.titlebar:not(headerbar) .selection-menu, headerbar.selection-mode .selection-menu { border-width: 0; background-image: none; box-shadow: none; } -.tiled .titlebar, .maximized .titlebar, .fullscreen .titlebar, .tiled headerbar, .maximized headerbar, .fullscreen headerbar { border-radius: 0; } +.tiled .titlebar:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar, .maximized headerbar, .fullscreen headerbar { border-radius: 0; } -.titlebar.default-decoration, headerbar.default-decoration { min-height: 28px; padding: 4px; } +.default-decoration.titlebar:not(headerbar), headerbar.default-decoration { min-height: 28px; padding: 4px; } -.titlebar.default-decoration button.titlebutton, headerbar.default-decoration button.titlebutton { min-height: 26px; min-width: 26px; margin: 0; padding: 0; } +.default-decoration.titlebar:not(headerbar) button.titlebutton, headerbar.default-decoration button.titlebutton { min-height: 26px; min-width: 26px; margin: 0; padding: 0; } + +window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } /************ Pathbars * */ .path-bar button { padding: 5px 6px 6px; } diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css index 7b06e46035..533bc25d0a 100644 --- a/gtk/theme/HighContrast/gtk-contained.css +++ b/gtk/theme/HighContrast/gtk-contained.css @@ -486,47 +486,49 @@ toolbar.inline-toolbar, searchbar.inline-toolbar { border-style: solid; border-c toolbar.inline-toolbar:backdrop, searchbar.inline-toolbar:backdrop { border-color: #8d8d8d; background-color: #d7d7d7; box-shadow: none; } /*************** Header bars * */ -.titlebar, headerbar { min-height: 46px; border-width: 0 0 1px; border-style: solid; border-color: gray; border-radius: 7px 7px 0 0; background-color: transparent; background-image: linear-gradient(to bottom, white, #fff); box-shadow: inset 0 -1px #d9d9d9, inset 0 1px #fff; padding: 6px; } +.titlebar:not(headerbar), headerbar { min-height: 46px; border-width: 0 0 1px; border-style: solid; border-color: gray; border-radius: 7px 7px 0 0; background-color: transparent; background-image: linear-gradient(to bottom, white, #fff); box-shadow: inset 0 -1px #d9d9d9, inset 0 1px #fff; padding: 6px; } -.titlebar:backdrop, headerbar:backdrop { border-color: #8d8d8d; background-color: #fff; background-image: none; box-shadow: none; } +.titlebar:backdrop:not(headerbar), headerbar:backdrop { border-color: #8d8d8d; background-color: #fff; background-image: none; box-shadow: none; } -.titlebar .title, headerbar .title { font-weight: bold; padding: 0px 12px; } +.titlebar:not(headerbar) .title, headerbar .title { font-weight: bold; padding: 0px 12px; } -.titlebar .subtitle, headerbar .subtitle { font-size: 80%; padding: 0 12px; } +.titlebar:not(headerbar) .subtitle, headerbar .subtitle { font-size: 80%; padding: 0 12px; } -.titlebar.selection-mode, headerbar.selection-mode { color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #0d0d0d, #050505); box-shadow: inset 0 -1px #d9d9d9, inset 0 1px gray; } +.selection-mode.titlebar:not(headerbar), headerbar.selection-mode { color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.5); background-image: linear-gradient(to bottom, #0d0d0d, #050505); box-shadow: inset 0 -1px #d9d9d9, inset 0 1px gray; } -.titlebar.selection-mode button, headerbar.selection-mode button { border-width: 2px; border-style: solid; color: #fff; background-image: none; background-color: #000; border-color: black; } +.selection-mode.titlebar:not(headerbar) button, headerbar.selection-mode button { border-width: 2px; border-style: solid; color: #fff; background-image: none; background-color: #000; border-color: black; } -.titlebar.selection-mode button:hover, headerbar.selection-mode button:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: black; background-image: none; } +.selection-mode.titlebar:not(headerbar) button:hover, headerbar.selection-mode button:hover { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: black; background-image: none; } -.titlebar.selection-mode button:active, headerbar.selection-mode button:active { border-width: 2px; border-style: solid; background-image: none; color: black; background-color: white; border-color: black; } +.selection-mode.titlebar:not(headerbar) button:active, headerbar.selection-mode button:active { border-width: 2px; border-style: solid; background-image: none; color: black; background-color: white; border-color: black; } -.titlebar.selection-mode button:disabled, headerbar.selection-mode button:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; } +.selection-mode.titlebar:not(headerbar) button:disabled, headerbar.selection-mode button:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; } -.titlebar.selection-mode button:backdrop, headerbar.selection-mode button:backdrop { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: #000; background-image: none; border-color: black; } +.selection-mode.titlebar:not(headerbar) button:backdrop, headerbar.selection-mode button:backdrop { border-width: 2px; border-style: solid; color: #fff; background-color: #000; border-color: #000; background-image: none; border-color: black; } -.titlebar.selection-mode button:backdrop:disabled, headerbar.selection-mode button:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; } +.selection-mode.titlebar:not(headerbar) button:backdrop:disabled, headerbar.selection-mode button:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; } -.titlebar.selection-mode button.suggested-action, headerbar.selection-mode button.suggested-action { border-width: 2px; border-style: solid; color: #000; background-image: none; background-color: #fff; border-color: gray; } +.selection-mode.titlebar:not(headerbar) button.suggested-action, headerbar.selection-mode button.suggested-action { border-width: 2px; border-style: solid; color: #000; background-image: none; background-color: #fff; border-color: gray; } -.titlebar.selection-mode button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: gray; background-image: none; } +.selection-mode.titlebar:not(headerbar) button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: gray; background-image: none; } -.titlebar.selection-mode button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { border-width: 2px; border-style: solid; background-image: none; color: white; background-color: black; border-color: gray; } +.selection-mode.titlebar:not(headerbar) button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { border-width: 2px; border-style: solid; background-image: none; color: white; background-color: black; border-color: gray; } -.titlebar.selection-mode button.suggested-action:disabled, headerbar.selection-mode button.suggested-action:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; } +.selection-mode.titlebar:not(headerbar) button.suggested-action:disabled, headerbar.selection-mode button.suggested-action:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; } -.titlebar.selection-mode button.suggested-action:backdrop, headerbar.selection-mode button.suggested-action:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: #8d8d8d; background-image: none; } +.selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop, headerbar.selection-mode button.suggested-action:backdrop { border-width: 2px; border-style: solid; color: #000; background-color: #fff; border-color: #8d8d8d; background-image: none; } -.titlebar.selection-mode button.suggested-action:backdrop:disabled, headerbar.selection-mode button.suggested-action:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; } +.selection-mode.titlebar:not(headerbar) button.suggested-action:backdrop:disabled, headerbar.selection-mode button.suggested-action:backdrop:disabled { border-width: 2px; border-style: solid; color: gray; background-color: white; border-color: silver; background-image: none; } -.titlebar.selection-mode .selection-menu, headerbar.selection-mode .selection-menu { border-width: 0; background-image: none; box-shadow: none; } +.selection-mode.titlebar:not(headerbar) .selection-menu, headerbar.selection-mode .selection-menu { border-width: 0; background-image: none; box-shadow: none; } -.tiled .titlebar, .maximized .titlebar, .fullscreen .titlebar, .tiled headerbar, .maximized headerbar, .fullscreen headerbar { border-radius: 0; } +.tiled .titlebar:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar, .maximized headerbar, .fullscreen headerbar { border-radius: 0; } -.titlebar.default-decoration, headerbar.default-decoration { min-height: 28px; padding: 4px; } +.default-decoration.titlebar:not(headerbar), headerbar.default-decoration { min-height: 28px; padding: 4px; } -.titlebar.default-decoration button.titlebutton, headerbar.default-decoration button.titlebutton { min-height: 26px; min-width: 26px; margin: 0; padding: 0; } +.default-decoration.titlebar:not(headerbar) button.titlebutton, headerbar.default-decoration button.titlebutton { min-height: 26px; min-width: 26px; margin: 0; padding: 0; } + +window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } /************ Pathbars * */ .path-bar button { padding: 5px 6px 6px; }