High Contrast: fix metrics for popover menus

- ripped the appropriate bits from Adwaita.

https://bugzilla.gnome.org/show_bug.cgi?id=763609
This commit is contained in:
Jakub Steiner 2016-03-16 12:57:14 +01:00
parent e5e8ffa3f7
commit 286437000b
4 changed files with 454 additions and 204 deletions

View File

@ -9,6 +9,8 @@ $fg_color: if($variant == 'light', #000, #fff);
$selected_fg_color: #fff; $selected_fg_color: #fff;
$selected_bg_color: if($variant == 'light', #000, #aaa); //#4a90d9; $selected_bg_color: if($variant == 'light', #000, #aaa); //#4a90d9;
$selected_borders_color: if($variant == 'light', #000, #aaa); $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_color: mix($bg_color,$fg_color,50%);
$borders_edge: if($variant == 'light', #fff, #000); $borders_edge: if($variant == 'light', #fff, #000);

View File

@ -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 * * 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 // buttons in header bars and action bars
&.image-button { padding: 8px; } &.image-button { padding: 8px; }
&.text-button { padding: 6px 8px 5px; } // due to font metrics &.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 */ /* menu buttons */
modelbutton.flat, modelbutton.flat,
.menuitem.button.flat { .menuitem.button.flat {
min-height: 26px;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
outline-offset: -2px;
@extend %undecorated_button; @extend %undecorated_button;
outline-offset: -1px;
&:hover, &:selected { @extend %selected_items; } &:hover { background-color: $popover_hover_color; }
&:backdrop {
color: $backdrop_fg_color; &:selected { @extend %selected_items; }
@extend %undecorated_button;
&:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:backdrop,
} &:backdrop:hover { @extend %undecorated_button; }
&:disabled { color: $insensitive_fg_color; }
// 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 modelbutton.flat arrow {
// GtkColorButton.button 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 * * Links *
@ -1191,52 +1277,46 @@ menuitem {
* Popovers * * Popovers *
***************/ ***************/
popover { popover.background {
margin: 10px;
padding: 2px; padding: 2px;
border-color: $borders-color;
border-width: 1px;
border-style: solid;
border-radius: 5px; border-radius: 5px;
//background-clip: border-box; background-color: $popover_bg_color;
background-color: $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 { &:backdrop {
background-color: $backdrop_bg_color;
box-shadow: none; box-shadow: none;
} }
& > .list,
& > .view, > list,
& > toolbar { > .view,
> toolbar {
border-style: none;
background-color: transparent; background-color: transparent;
} }
separator {
color: $fg_color; &, .csd & {
background-color: transparent; &.touch-selection,
border: 0; &.magnifier {
} @extend %osd;
button.flat,
button.flat:hover { border: 1px solid transparentize(white, 0.9);
color: $fg_color;
text-shadow: none; button { @extend %osd_button };
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); };
} }
&.osd { @extend %osd; }
} }
separator { margin: 3px; }
list separator { margin: 0px; }
checkbutton,
radiobutton { @extend modelbutton.flat; }
} }
/***************** /*****************

View File

@ -108,6 +108,18 @@ flowbox flowboxchild {
label:disabled, label:backdrop:disabled { label:disabled, label:backdrop:disabled {
color: gray; } 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 * * Spinner Animation *
*********************/ *********************/
@ -536,6 +548,67 @@ button {
background-image: none; background-image: none;
text-shadow: none; text-shadow: none;
-gtk-icon-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 { button.image-button {
padding: 8px; } padding: 8px; }
button.text-button { button.text-button {
@ -672,9 +745,13 @@ stacksidebar row.needs-attention > label {
border-radius: 3px; border-radius: 3px;
border-style: solid; } 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, 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,
.menuitem.button.flat, modelbutton.flat:backdrop, popover.background radiobutton,
.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, .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,
row.activatable:backdrop:active, row.activatable:backdrop:active,
row.activatable:backdrop:checked, row.activatable:backdrop:checked,
@ -690,22 +767,52 @@ row.activatable:disabled:checked, calendar.button, calendar.button:hover, calend
-gtk-icon-shadow: none; } -gtk-icon-shadow: none; }
/* menu buttons */ /* menu buttons */
modelbutton.flat, modelbutton.flat, popover.background checkbutton,
popover.background radiobutton,
.menuitem.button.flat { .menuitem.button.flat {
outline-offset: -1px; } min-height: 26px;
modelbutton.flat:backdrop, padding-left: 5px;
.menuitem.button.flat:backdrop { padding-right: 5px;
color: #fff; } border-radius: 3px;
modelbutton.flat:backdrop:hover, outline-offset: -2px; }
.menuitem.button.flat:backdrop:hover { modelbutton.flat:hover, popover.background checkbutton:hover,
color: #fff; popover.background radiobutton:hover,
background-color: #aaa; } .menuitem.button.flat:hover {
modelbutton.flat:disabled, background-color: #0d0d0d; }
.menuitem.button.flat:disabled { modelbutton.flat check:last-child, popover.background checkbutton check:last-child,
color: gray; } 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 { button.color {
padding: 4px; } padding: 4px; }
button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
border-radius: 0; }
/********* /*********
* Links * * Links *
@ -1323,71 +1430,46 @@ menuitem check, menuitem radio {
/*************** /***************
* Popovers * * Popovers *
***************/ ***************/
popover { popover.background {
margin: 10px;
padding: 2px; padding: 2px;
border-color: gray;
border-width: 1px;
border-style: solid;
border-radius: 5px; border-radius: 5px;
background-color: #000; background-color: #000;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); } box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
popover:backdrop { popover.background, .csd popover.background {
border: 1px solid gray; }
popover.background:backdrop {
background-color: #000;
box-shadow: none; } 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; } 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.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection, .csd popover.background.magnifier {
popover placessidebar .view separator:backdrop, border: 1px solid rgba(255, 255, 255, 0.1); }
placessidebar .view popover separator:backdrop, popover.background separator,
popover placessidebar textview text separator:backdrop, popover.background placessidebar .view separator:backdrop,
placessidebar textview text popover separator:backdrop, placessidebar .view popover.background separator:backdrop,
popover textview placessidebar text separator:backdrop, popover.background placessidebar textview text separator:backdrop,
textview placessidebar text popover separator:backdrop, placessidebar textview text popover.background separator:backdrop,
popover placessidebar iconview separator:backdrop, popover.background textview placessidebar text separator:backdrop,
placessidebar iconview popover separator:backdrop { textview placessidebar text popover.background separator:backdrop,
color: #fff; popover.background placessidebar iconview separator:backdrop,
background-color: transparent; placessidebar iconview popover.background separator:backdrop {
border: 0; } margin: 3px; }
popover button.flat, popover button.sidebar-button, popover.background list separator,
popover button.flat:hover, popover.background list placessidebar .view separator:backdrop,
popover button.sidebar-button:hover { placessidebar .view popover.background list separator:backdrop,
color: #fff; popover.background list placessidebar textview text separator:backdrop,
text-shadow: none; placessidebar textview text popover.background list separator:backdrop,
transition: none; } popover.background list textview placessidebar text separator:backdrop,
popover.magnifier, popover.osd { textview placessidebar text popover.background list separator:backdrop,
background-image: none; popover.background list placessidebar iconview separator:backdrop,
background-color: rgba(0, 0, 0, 0.8); placessidebar iconview popover.background list separator:backdrop {
border: 1px solid gray; margin: 0px; }
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; }
/***************** /*****************
* Notebooks and * * Notebooks and *
@ -2255,8 +2337,8 @@ textview text selection:hover, flowbox flowboxchild:selected, label selection, l
entry selection:focus, spinbutton selection entry selection:focus, spinbutton selection
entry selection:focus, entry selection entry selection:focus, entry selection
spinbutton selection:focus, spinbutton selection spinbutton selection:focus, spinbutton selection
spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected, spinbutton selection:focus, modelbutton.flat:selected, popover.background checkbutton:selected,
.menuitem.button.flat:hover, 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 { .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; background-color: #aaa;
color: #fff; 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, spinbutton selection
entry selection:backdrop:focus, entry selection entry selection:backdrop:focus, entry selection
spinbutton selection:backdrop:focus, spinbutton selection spinbutton selection:backdrop:focus, spinbutton selection
spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:hover, modelbutton.flat:backdrop:selected, spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected,
.menuitem.button.flat:backdrop:hover, popover.background radiobutton:backdrop:selected,
.menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected { .menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected {
background-color: gray; background-color: gray;
color: #fff; } color: #fff; }

View File

@ -108,6 +108,18 @@ flowbox flowboxchild {
label:disabled, label:backdrop:disabled { label:disabled, label:backdrop:disabled {
color: gray; } 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 * * Spinner Animation *
*********************/ *********************/
@ -536,6 +548,67 @@ button {
background-image: none; background-image: none;
text-shadow: none; text-shadow: none;
-gtk-icon-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 { button.image-button {
padding: 8px; } padding: 8px; }
button.text-button { button.text-button {
@ -672,9 +745,13 @@ stacksidebar row.needs-attention > label {
border-radius: 3px; border-radius: 3px;
border-style: solid; } 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, 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,
.menuitem.button.flat, modelbutton.flat:backdrop, popover.background radiobutton,
.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, .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,
row.activatable:backdrop:active, row.activatable:backdrop:active,
row.activatable:backdrop:checked, row.activatable:backdrop:checked,
@ -690,22 +767,56 @@ row.activatable:disabled:checked, calendar.button, calendar.button:hover, calend
-gtk-icon-shadow: none; } -gtk-icon-shadow: none; }
/* menu buttons */ /* menu buttons */
modelbutton.flat, modelbutton.flat, popover.background checkbutton,
popover.background radiobutton,
.menuitem.button.flat { .menuitem.button.flat {
outline-offset: -1px; } min-height: 26px;
modelbutton.flat:backdrop, padding-left: 5px;
.menuitem.button.flat:backdrop { padding-right: 5px;
color: #000; } border-radius: 3px;
modelbutton.flat:backdrop:hover, outline-offset: -2px; }
.menuitem.button.flat:backdrop:hover { modelbutton.flat:hover, popover.background checkbutton:hover,
color: #fff; popover.background radiobutton:hover,
background-color: #000; } .menuitem.button.flat:hover {
modelbutton.flat:disabled, background-color: white; }
.menuitem.button.flat:disabled { modelbutton.flat check:last-child, popover.background checkbutton check:last-child,
color: gray; } 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 { button.color {
padding: 4px; } 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 * * Links *
@ -1323,71 +1434,46 @@ menuitem check, menuitem radio {
/*************** /***************
* Popovers * * Popovers *
***************/ ***************/
popover { popover.background {
margin: 10px;
padding: 2px; padding: 2px;
border-color: gray;
border-width: 1px;
border-style: solid;
border-radius: 5px; border-radius: 5px;
background-color: #fff; background-color: #fff;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); } box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
popover:backdrop { popover.background, .csd popover.background {
box-shadow: none; } border: 1px solid gray; }
popover > .list, popover > .view, textview popover > text, popover > iconview, popover > toolbar, popover > searchbar { popover.background:backdrop {
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; background-color: #fff;
border-color: rgba(255, 255, 255, 0.2);
box-shadow: none; } box-shadow: none; }
popover.magnifier button:disabled, popover.osd button:disabled { popover.background > list,
border-width: 2px; popover.background > .view,
border-style: solid; textview popover.background > text,
border-color: rgba(255, 255, 255, 0.2); popover.background > iconview,
color: gray; } popover.background > toolbar,
popover.background > searchbar {
border-style: none;
background-color: transparent; }
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 * * Notebooks and *
@ -2258,8 +2344,8 @@ textview text selection:hover, flowbox flowboxchild:selected, label selection, l
entry selection:focus, spinbutton selection entry selection:focus, spinbutton selection
entry selection:focus, entry selection entry selection:focus, entry selection
spinbutton selection:focus, spinbutton selection spinbutton selection:focus, spinbutton selection
spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected, spinbutton selection:focus, modelbutton.flat:selected, popover.background checkbutton:selected,
.menuitem.button.flat:hover, 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 { .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; background-color: #000;
color: #fff; 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, spinbutton selection
entry selection:backdrop:focus, entry selection entry selection:backdrop:focus, entry selection
spinbutton selection:backdrop:focus, spinbutton selection spinbutton selection:backdrop:focus, spinbutton selection
spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:hover, modelbutton.flat:backdrop:selected, spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected,
.menuitem.button.flat:backdrop:hover, popover.background radiobutton:backdrop:selected,
.menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected { .menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected {
background-color: gray; background-color: gray;
color: #fff; } color: #fff; }