From 286437000b67284c5260689c37d43b21fec0396b Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Wed, 16 Mar 2016 12:57:14 +0100 Subject: [PATCH] High Contrast: fix metrics for popover menus - ripped the appropriate bits from Adwaita. https://bugzilla.gnome.org/show_bug.cgi?id=763609 --- gtk/theme/HighContrast/_colors.scss | 2 + gtk/theme/HighContrast/_common.scss | 172 ++++++++---- .../HighContrast/gtk-contained-inverse.css | 240 +++++++++++------ gtk/theme/HighContrast/gtk-contained.css | 244 ++++++++++++------ 4 files changed, 454 insertions(+), 204 deletions(-) diff --git a/gtk/theme/HighContrast/_colors.scss b/gtk/theme/HighContrast/_colors.scss index d77e6d6a28..30716d1333 100644 --- a/gtk/theme/HighContrast/_colors.scss +++ b/gtk/theme/HighContrast/_colors.scss @@ -9,6 +9,8 @@ $fg_color: if($variant == 'light', #000, #fff); $selected_fg_color: #fff; $selected_bg_color: if($variant == 'light', #000, #aaa); //#4a90d9; $selected_borders_color: if($variant == 'light', #000, #aaa); +$popover_bg_color: $bg_color; +$popover_hover_color: lighten($bg_color, 5%); $borders_color: mix($bg_color,$fg_color,50%); $borders_edge: if($variant == 'light', #fff, #000); diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index 219f94d4c1..ade3a59d58 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -142,6 +142,21 @@ label { } } +%osd, .osd { + color: $osd_fg_color; + border: none; + background-color: $osd_bg_color; + background-clip: padding-box; + outline-color: transparentize($osd_fg_color, 0.7); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + + &:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; + } +} + /********************* * Spinner Animation * *********************/ @@ -415,6 +430,43 @@ button { } } + //overlay / OSD style + @at-root %osd_button, + .osd & { + @include button(osd); + + &:hover { @include button(osd-hover); } + + &:active, + &:checked { &:backdrop, & { @include button(osd-active); }} + + &:disabled { &:backdrop, & { @include button(osd-insensitive); }} + + &:backdrop { @include button(osd-backdrop); } + + &.flat { + @include button(undecorated); + + box-shadow: none; //FIXME respect no edge on the button mixin + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + + &:hover { @include button(osd-hover); } + + &:disabled { + @include button(osd-insensitive); + background-image: none; + border-color: transparent; + box-shadow: none; + } + + &:backdrop { @include button(undecorated); } + + &:active, + &:checked { @include button(osd-active); } + } + } + // buttons in header bars and action bars &.image-button { padding: 8px; } &.text-button { padding: 6px 8px 5px; } // due to font metrics @@ -561,19 +613,53 @@ toolbar.inline-toolbar toolbutton { // .inline-toolbar.toolbar here for /* menu buttons */ modelbutton.flat, .menuitem.button.flat { + min-height: 26px; + padding-left: 5px; + padding-right: 5px; + border-radius: 3px; + outline-offset: -2px; + @extend %undecorated_button; - outline-offset: -1px; - &:hover, &:selected { @extend %selected_items; } - &:backdrop { - color: $backdrop_fg_color; - @extend %undecorated_button; - &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } - } - &:disabled { color: $insensitive_fg_color; } + + &:hover { background-color: $popover_hover_color; } + + &:selected { @extend %selected_items; } + + &:backdrop, + &:backdrop:hover { @extend %undecorated_button; } + + // FIXME: remove the following when the checks/radios rewrite lands + check:last-child, + radio:last-child { margin-left: 8px; } + + check:first-child, + radio:first-child { margin-right: 8px; } } -button.color { padding: 4px; } // Uniform padding on the - // GtkColorButton.button +modelbutton.flat arrow { + background: none; + + &:hover { background: none; } + + &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + + &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } +} + +button.color { + padding: 4px; + + colorswatch:only-child { + &, overlay { border-radius: 0; } + + @if $variant == 'light' { + box-shadow: 0 1px _text_shadow_color(); + + &:disabled, + &:backdrop { box-shadow: none; } + } + } +} /********* * Links * @@ -1191,52 +1277,46 @@ menuitem { * Popovers * ***************/ -popover { - margin: 10px; +popover.background { padding: 2px; - border-color: $borders-color; - border-width: 1px; - border-style: solid; border-radius: 5px; - //background-clip: border-box; - background-color: $bg_color; + background-color: $popover_bg_color; + + &, .csd & { border: 1px solid $borders_color; } + + box-shadow: 0 1px 2px transparentize(black, 0.7); - box-shadow: 0 2px 3px transparentize(black, 0.5); &:backdrop { + background-color: $backdrop_bg_color; box-shadow: none; } - & > .list, - & > .view, - & > toolbar { + + > list, + > .view, + > toolbar { + border-style: none; background-color: transparent; } - separator { - color: $fg_color; - background-color: transparent; - border: 0; - } - button.flat, - button.flat:hover { - color: $fg_color; - text-shadow: none; - transition: none; - } - &.magnifier, - &.osd { // Also used for touch cutnpaste overlays - // FIXME Doesn't work - background-image: none; - background-color: $osd_bg_color; - border: 1px solid $borders_color; - color: $osd_fg_color; - button { - color: white; - text-shadow: none; - @include button(osd); - &:hover { @include button(osd-hover); }; - &:active { @include button(osd-active); }; - &:disabled { @include button(osd-insensitive); }; + + &, .csd & { + &.touch-selection, + &.magnifier { + @extend %osd; + + border: 1px solid transparentize(white, 0.9); + + button { @extend %osd_button }; } + + &.osd { @extend %osd; } } + + separator { margin: 3px; } + + list separator { margin: 0px; } + + checkbutton, + radiobutton { @extend modelbutton.flat; } } /***************** diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css index 6693a488d2..8de8d38b35 100644 --- a/gtk/theme/HighContrast/gtk-contained-inverse.css +++ b/gtk/theme/HighContrast/gtk-contained-inverse.css @@ -108,6 +108,18 @@ flowbox flowboxchild { label:disabled, label:backdrop:disabled { color: gray; } +popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.osd, .csd popover.background.osd, .osd { + color: #fff; + border: none; + background-color: rgba(0, 0, 0, 0.8); + background-clip: padding-box; + outline-color: rgba(255, 255, 255, 0.3); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; } + /********************* * Spinner Animation * *********************/ @@ -536,6 +548,67 @@ button { background-image: none; text-shadow: none; -gtk-icon-shadow: none; } + popover.background.touch-selection button, popover.background.magnifier button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, .osd button { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd button:backdrop { + border-width: 2px; + border-style: solid; } + popover.background.touch-selection button.flat, popover.background.touch-selection button.sidebar-button, popover.background.magnifier button.flat, popover.background.magnifier button.sidebar-button, .osd button.flat, .osd button.sidebar-button { + border-width: 2px; + border-style: solid; + box-shadow: none; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + popover.background.touch-selection button.flat:hover, popover.background.touch-selection button.sidebar-button:hover, popover.background.magnifier button.flat:hover, popover.background.magnifier button.sidebar-button:hover, .osd button.flat:hover, .osd button.sidebar-button:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + popover.background.touch-selection button.flat:disabled, popover.background.touch-selection button.sidebar-button:disabled, popover.background.magnifier button.flat:disabled, popover.background.magnifier button.sidebar-button:disabled, .osd button.flat:disabled, .osd button.sidebar-button:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; + background-image: none; + border-color: transparent; + box-shadow: none; } + popover.background.touch-selection button.flat:backdrop, popover.background.touch-selection button.sidebar-button:backdrop, popover.background.magnifier button.flat:backdrop, popover.background.magnifier button.sidebar-button:backdrop, .osd button.flat:backdrop, .osd button.sidebar-button:backdrop { + border-width: 2px; + border-style: solid; } + popover.background.touch-selection button.flat:active, popover.background.touch-selection button.sidebar-button:active, popover.background.magnifier button.flat:active, popover.background.magnifier button.sidebar-button:active, popover.background.touch-selection button.flat:checked, popover.background.touch-selection button.sidebar-button:checked, popover.background.magnifier button.flat:checked, popover.background.magnifier button.sidebar-button:checked, .osd button.flat:active, .osd button.sidebar-button:active, .osd button.flat:checked, .osd button.sidebar-button:checked { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } button.image-button { padding: 8px; } button.text-button { @@ -672,9 +745,13 @@ stacksidebar row.needs-attention > label { border-radius: 3px; border-style: solid; } -button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled:backdrop, button.sidebar-button:disabled:backdrop, modelbutton.flat, -.menuitem.button.flat, modelbutton.flat:backdrop, -.menuitem.button.flat:backdrop, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable, +button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled:backdrop, button.sidebar-button:disabled:backdrop, modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, +.menuitem.button.flat, modelbutton.flat:backdrop, popover.background checkbutton:backdrop, +popover.background radiobutton:backdrop, modelbutton.flat:backdrop:hover, popover.background checkbutton:backdrop:hover, +popover.background radiobutton:backdrop:hover, +.menuitem.button.flat:backdrop, +.menuitem.button.flat:backdrop:hover, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable, row.activatable:backdrop, row.activatable:backdrop:active, row.activatable:backdrop:checked, @@ -690,22 +767,52 @@ row.activatable:disabled:checked, calendar.button, calendar.button:hover, calend -gtk-icon-shadow: none; } /* menu buttons */ -modelbutton.flat, +modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, .menuitem.button.flat { - outline-offset: -1px; } - modelbutton.flat:backdrop, - .menuitem.button.flat:backdrop { - color: #fff; } - modelbutton.flat:backdrop:hover, - .menuitem.button.flat:backdrop:hover { - color: #fff; - background-color: #aaa; } - modelbutton.flat:disabled, - .menuitem.button.flat:disabled { - color: gray; } + min-height: 26px; + padding-left: 5px; + padding-right: 5px; + border-radius: 3px; + outline-offset: -2px; } + modelbutton.flat:hover, popover.background checkbutton:hover, + popover.background radiobutton:hover, + .menuitem.button.flat:hover { + background-color: #0d0d0d; } + modelbutton.flat check:last-child, popover.background checkbutton check:last-child, + popover.background radiobutton check:last-child, + modelbutton.flat radio:last-child, + popover.background checkbutton radio:last-child, + popover.background radiobutton radio:last-child, + .menuitem.button.flat check:last-child, + .menuitem.button.flat radio:last-child { + margin-left: 8px; } + modelbutton.flat check:first-child, popover.background checkbutton check:first-child, + popover.background radiobutton check:first-child, + modelbutton.flat radio:first-child, + popover.background checkbutton radio:first-child, + popover.background radiobutton radio:first-child, + .menuitem.button.flat check:first-child, + .menuitem.button.flat radio:first-child { + margin-right: 8px; } + +modelbutton.flat arrow, popover.background checkbutton arrow, +popover.background radiobutton arrow { + background: none; } + modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover, + popover.background radiobutton arrow:hover { + background: none; } + modelbutton.flat arrow.left, popover.background checkbutton arrow.left, + popover.background radiobutton arrow.left { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + modelbutton.flat arrow.right, popover.background checkbutton arrow.right, + popover.background radiobutton arrow.right { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } button.color { padding: 4px; } + button.color colorswatch:only-child, button.color colorswatch:only-child overlay { + border-radius: 0; } /********* * Links * @@ -1323,71 +1430,46 @@ menuitem check, menuitem radio { /*************** * Popovers * ***************/ -popover { - margin: 10px; +popover.background { padding: 2px; - border-color: gray; - border-width: 1px; - border-style: solid; border-radius: 5px; background-color: #000; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); } - popover:backdrop { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } + popover.background, .csd popover.background { + border: 1px solid gray; } + popover.background:backdrop { + background-color: #000; box-shadow: none; } - popover > .list, popover > .view, textview popover > text, popover > iconview, popover > toolbar, popover > searchbar { + popover.background > list, + popover.background > .view, + textview popover.background > text, + popover.background > iconview, + popover.background > toolbar, + popover.background > searchbar { + border-style: none; background-color: transparent; } - popover separator, popover placessidebar .view separator, placessidebar .view popover separator, popover placessidebar textview text separator, placessidebar textview text popover separator, popover textview placessidebar text separator, textview placessidebar text popover separator, popover placessidebar iconview separator, placessidebar iconview popover separator, - popover placessidebar .view separator:backdrop, - placessidebar .view popover separator:backdrop, - popover placessidebar textview text separator:backdrop, - placessidebar textview text popover separator:backdrop, - popover textview placessidebar text separator:backdrop, - textview placessidebar text popover separator:backdrop, - popover placessidebar iconview separator:backdrop, - placessidebar iconview popover separator:backdrop { - color: #fff; - background-color: transparent; - border: 0; } - popover button.flat, popover button.sidebar-button, - popover button.flat:hover, - popover button.sidebar-button:hover { - color: #fff; - text-shadow: none; - transition: none; } - popover.magnifier, popover.osd { - background-image: none; - background-color: rgba(0, 0, 0, 0.8); - border: 1px solid gray; - color: #fff; } - popover.magnifier button, popover.osd button { - color: white; - text-shadow: none; - border-width: 2px; - border-style: solid; - color: #fff; - background-image: none; - background-color: rgba(0, 0, 0, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:hover, popover.osd button:hover { - border-width: 2px; - border-style: solid; - color: #fff; - background-color: rgba(77, 77, 77, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:active, popover.osd button:active { - border-width: 2px; - border-style: solid; - color: rgba(0, 0, 0, 0.8); - background-color: #fff; - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:disabled, popover.osd button:disabled { - border-width: 2px; - border-style: solid; - border-color: rgba(255, 255, 255, 0.2); - color: gray; } + popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier { + border: 1px solid rgba(255, 255, 255, 0.1); } + popover.background separator, + popover.background placessidebar .view separator:backdrop, + placessidebar .view popover.background separator:backdrop, + popover.background placessidebar textview text separator:backdrop, + placessidebar textview text popover.background separator:backdrop, + popover.background textview placessidebar text separator:backdrop, + textview placessidebar text popover.background separator:backdrop, + popover.background placessidebar iconview separator:backdrop, + placessidebar iconview popover.background separator:backdrop { + margin: 3px; } + popover.background list separator, + popover.background list placessidebar .view separator:backdrop, + placessidebar .view popover.background list separator:backdrop, + popover.background list placessidebar textview text separator:backdrop, + placessidebar textview text popover.background list separator:backdrop, + popover.background list textview placessidebar text separator:backdrop, + textview placessidebar text popover.background list separator:backdrop, + popover.background list placessidebar iconview separator:backdrop, + placessidebar iconview popover.background list separator:backdrop { + margin: 0px; } /***************** * Notebooks and * @@ -2255,8 +2337,8 @@ textview text selection:hover, flowbox flowboxchild:selected, label selection, l entry selection:focus, spinbutton selection entry selection:focus, entry selection spinbutton selection:focus, spinbutton selection -spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected, -.menuitem.button.flat:hover, +spinbutton selection:focus, modelbutton.flat:selected, popover.background checkbutton:selected, +popover.background radiobutton:selected, .menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected, placessidebar .view:selected, placessidebar textview text:selected, textview placessidebar text:selected, placessidebar iconview:selected, placessidebar calendar:selected { background-color: #aaa; color: #fff; @@ -2265,8 +2347,8 @@ spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected, entry selection:backdrop:focus, spinbutton selection entry selection:backdrop:focus, entry selection spinbutton selection:backdrop:focus, spinbutton selection - spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:hover, modelbutton.flat:backdrop:selected, - .menuitem.button.flat:backdrop:hover, + spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected, + popover.background radiobutton:backdrop:selected, .menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected { background-color: gray; color: #fff; } diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css index 50af9251a9..0174b669a3 100644 --- a/gtk/theme/HighContrast/gtk-contained.css +++ b/gtk/theme/HighContrast/gtk-contained.css @@ -108,6 +108,18 @@ flowbox flowboxchild { label:disabled, label:backdrop:disabled { color: gray; } +popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier, popover.background.osd, .csd popover.background.osd, .osd { + color: #fff; + border: none; + background-color: rgba(0, 0, 0, 0.8); + background-clip: padding-box; + outline-color: rgba(255, 255, 255, 0.3); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; } + /********************* * Spinner Animation * *********************/ @@ -536,6 +548,67 @@ button { background-image: none; text-shadow: none; -gtk-icon-shadow: none; } + popover.background.touch-selection button, popover.background.magnifier button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, .osd button { + border-width: 2px; + border-style: solid; + color: #fff; + background-image: none; + background-color: rgba(0, 0, 0, 0.8); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; } + popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd button:backdrop { + border-width: 2px; + border-style: solid; } + popover.background.touch-selection button.flat, popover.background.touch-selection button.sidebar-button, popover.background.magnifier button.flat, popover.background.magnifier button.sidebar-button, .osd button.flat, .osd button.sidebar-button { + border-width: 2px; + border-style: solid; + box-shadow: none; + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; } + popover.background.touch-selection button.flat:hover, popover.background.touch-selection button.sidebar-button:hover, popover.background.magnifier button.flat:hover, popover.background.magnifier button.sidebar-button:hover, .osd button.flat:hover, .osd button.sidebar-button:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: rgba(77, 77, 77, 0.8); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } + popover.background.touch-selection button.flat:disabled, popover.background.touch-selection button.sidebar-button:disabled, popover.background.magnifier button.flat:disabled, popover.background.magnifier button.sidebar-button:disabled, .osd button.flat:disabled, .osd button.sidebar-button:disabled { + border-width: 2px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.2); + color: gray; + background-image: none; + border-color: transparent; + box-shadow: none; } + popover.background.touch-selection button.flat:backdrop, popover.background.touch-selection button.sidebar-button:backdrop, popover.background.magnifier button.flat:backdrop, popover.background.magnifier button.sidebar-button:backdrop, .osd button.flat:backdrop, .osd button.sidebar-button:backdrop { + border-width: 2px; + border-style: solid; } + popover.background.touch-selection button.flat:active, popover.background.touch-selection button.sidebar-button:active, popover.background.magnifier button.flat:active, popover.background.magnifier button.sidebar-button:active, popover.background.touch-selection button.flat:checked, popover.background.touch-selection button.sidebar-button:checked, popover.background.magnifier button.flat:checked, popover.background.magnifier button.sidebar-button:checked, .osd button.flat:active, .osd button.sidebar-button:active, .osd button.flat:checked, .osd button.sidebar-button:checked { + border-width: 2px; + border-style: solid; + color: rgba(0, 0, 0, 0.8); + background-color: #fff; + border-color: rgba(255, 255, 255, 0.2); + box-shadow: none; } button.image-button { padding: 8px; } button.text-button { @@ -672,9 +745,13 @@ stacksidebar row.needs-attention > label { border-radius: 3px; border-style: solid; } -button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled:backdrop, button.sidebar-button:disabled:backdrop, modelbutton.flat, -.menuitem.button.flat, modelbutton.flat:backdrop, -.menuitem.button.flat:backdrop, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable, +button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled:backdrop, button.sidebar-button:disabled:backdrop, modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, +.menuitem.button.flat, modelbutton.flat:backdrop, popover.background checkbutton:backdrop, +popover.background radiobutton:backdrop, modelbutton.flat:backdrop:hover, popover.background checkbutton:backdrop:hover, +popover.background radiobutton:backdrop:hover, +.menuitem.button.flat:backdrop, +.menuitem.button.flat:backdrop:hover, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable, row.activatable:backdrop, row.activatable:backdrop:active, row.activatable:backdrop:checked, @@ -690,22 +767,56 @@ row.activatable:disabled:checked, calendar.button, calendar.button:hover, calend -gtk-icon-shadow: none; } /* menu buttons */ -modelbutton.flat, +modelbutton.flat, popover.background checkbutton, +popover.background radiobutton, .menuitem.button.flat { - outline-offset: -1px; } - modelbutton.flat:backdrop, - .menuitem.button.flat:backdrop { - color: #000; } - modelbutton.flat:backdrop:hover, - .menuitem.button.flat:backdrop:hover { - color: #fff; - background-color: #000; } - modelbutton.flat:disabled, - .menuitem.button.flat:disabled { - color: gray; } + min-height: 26px; + padding-left: 5px; + padding-right: 5px; + border-radius: 3px; + outline-offset: -2px; } + modelbutton.flat:hover, popover.background checkbutton:hover, + popover.background radiobutton:hover, + .menuitem.button.flat:hover { + background-color: white; } + modelbutton.flat check:last-child, popover.background checkbutton check:last-child, + popover.background radiobutton check:last-child, + modelbutton.flat radio:last-child, + popover.background checkbutton radio:last-child, + popover.background radiobutton radio:last-child, + .menuitem.button.flat check:last-child, + .menuitem.button.flat radio:last-child { + margin-left: 8px; } + modelbutton.flat check:first-child, popover.background checkbutton check:first-child, + popover.background radiobutton check:first-child, + modelbutton.flat radio:first-child, + popover.background checkbutton radio:first-child, + popover.background radiobutton radio:first-child, + .menuitem.button.flat check:first-child, + .menuitem.button.flat radio:first-child { + margin-right: 8px; } + +modelbutton.flat arrow, popover.background checkbutton arrow, +popover.background radiobutton arrow { + background: none; } + modelbutton.flat arrow:hover, popover.background checkbutton arrow:hover, + popover.background radiobutton arrow:hover { + background: none; } + modelbutton.flat arrow.left, popover.background checkbutton arrow.left, + popover.background radiobutton arrow.left { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + modelbutton.flat arrow.right, popover.background checkbutton arrow.right, + popover.background radiobutton arrow.right { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } button.color { padding: 4px; } + button.color colorswatch:only-child { + box-shadow: 0 1px _text_shadow_color(); } + button.color colorswatch:only-child, button.color colorswatch:only-child overlay { + border-radius: 0; } + button.color colorswatch:only-child:disabled, button.color colorswatch:only-child:backdrop { + box-shadow: none; } /********* * Links * @@ -1323,71 +1434,46 @@ menuitem check, menuitem radio { /*************** * Popovers * ***************/ -popover { - margin: 10px; +popover.background { padding: 2px; - border-color: gray; - border-width: 1px; - border-style: solid; border-radius: 5px; background-color: #fff; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); } - popover:backdrop { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } + popover.background, .csd popover.background { + border: 1px solid gray; } + popover.background:backdrop { + background-color: #fff; box-shadow: none; } - popover > .list, popover > .view, textview popover > text, popover > iconview, popover > toolbar, popover > searchbar { + popover.background > list, + popover.background > .view, + textview popover.background > text, + popover.background > iconview, + popover.background > toolbar, + popover.background > searchbar { + border-style: none; background-color: transparent; } - popover separator, popover placessidebar .view separator, placessidebar .view popover separator, popover placessidebar textview text separator, placessidebar textview text popover separator, popover textview placessidebar text separator, textview placessidebar text popover separator, popover placessidebar iconview separator, placessidebar iconview popover separator, - popover placessidebar .view separator:backdrop, - placessidebar .view popover separator:backdrop, - popover placessidebar textview text separator:backdrop, - placessidebar textview text popover separator:backdrop, - popover textview placessidebar text separator:backdrop, - textview placessidebar text popover separator:backdrop, - popover placessidebar iconview separator:backdrop, - placessidebar iconview popover separator:backdrop { - color: #000; - background-color: transparent; - border: 0; } - popover button.flat, popover button.sidebar-button, - popover button.flat:hover, - popover button.sidebar-button:hover { - color: #000; - text-shadow: none; - transition: none; } - popover.magnifier, popover.osd { - background-image: none; - background-color: rgba(0, 0, 0, 0.8); - border: 1px solid gray; - color: #fff; } - popover.magnifier button, popover.osd button { - color: white; - text-shadow: none; - border-width: 2px; - border-style: solid; - color: #fff; - background-image: none; - background-color: rgba(0, 0, 0, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:hover, popover.osd button:hover { - border-width: 2px; - border-style: solid; - color: #fff; - background-color: rgba(77, 77, 77, 0.8); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:active, popover.osd button:active { - border-width: 2px; - border-style: solid; - color: rgba(0, 0, 0, 0.8); - background-color: #fff; - border-color: rgba(255, 255, 255, 0.2); - box-shadow: none; } - popover.magnifier button:disabled, popover.osd button:disabled { - border-width: 2px; - border-style: solid; - border-color: rgba(255, 255, 255, 0.2); - color: gray; } + popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier { + border: 1px solid rgba(255, 255, 255, 0.1); } + popover.background separator, + popover.background placessidebar .view separator:backdrop, + placessidebar .view popover.background separator:backdrop, + popover.background placessidebar textview text separator:backdrop, + placessidebar textview text popover.background separator:backdrop, + popover.background textview placessidebar text separator:backdrop, + textview placessidebar text popover.background separator:backdrop, + popover.background placessidebar iconview separator:backdrop, + placessidebar iconview popover.background separator:backdrop { + margin: 3px; } + popover.background list separator, + popover.background list placessidebar .view separator:backdrop, + placessidebar .view popover.background list separator:backdrop, + popover.background list placessidebar textview text separator:backdrop, + placessidebar textview text popover.background list separator:backdrop, + popover.background list textview placessidebar text separator:backdrop, + textview placessidebar text popover.background list separator:backdrop, + popover.background list placessidebar iconview separator:backdrop, + placessidebar iconview popover.background list separator:backdrop { + margin: 0px; } /***************** * Notebooks and * @@ -2258,8 +2344,8 @@ textview text selection:hover, flowbox flowboxchild:selected, label selection, l entry selection:focus, spinbutton selection entry selection:focus, entry selection spinbutton selection:focus, spinbutton selection -spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected, -.menuitem.button.flat:hover, +spinbutton selection:focus, modelbutton.flat:selected, popover.background checkbutton:selected, +popover.background radiobutton:selected, .menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected, placessidebar .view:selected, placessidebar textview text:selected, textview placessidebar text:selected, placessidebar iconview:selected, placessidebar calendar:selected { background-color: #000; color: #fff; @@ -2268,8 +2354,8 @@ spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected, entry selection:backdrop:focus, spinbutton selection entry selection:backdrop:focus, entry selection spinbutton selection:backdrop:focus, spinbutton selection - spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:hover, modelbutton.flat:backdrop:selected, - .menuitem.button.flat:backdrop:hover, + spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected, + popover.background radiobutton:backdrop:selected, .menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected { background-color: gray; color: #fff; }