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_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);

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 *
*********************/
@ -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; }
}
/*****************

View File

@ -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; }

View File

@ -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; }