refining high-hanging fruit...

This commit is contained in:
eudaimon 2023-04-04 10:12:07 +02:00
parent f5c40b9bfb
commit 37bfde324f
11 changed files with 383 additions and 555 deletions

View File

@ -93,8 +93,8 @@ menubarstyle = 2
toolbarstyle = 1
animation = FALSE
radius = 3.0
style = GLOSSY
#style can also be GLOSSY
style = GUMMY
# Set a hint to disable backward compatibility fallbacks.
hint = "use-hints"
}

File diff suppressed because one or more lines are too long

View File

@ -8,11 +8,11 @@ $selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%));*/
/*Usually an automatic fg color on these backgrounds should check this value!*/
/*************************** Check and Radio buttons * */
/*************************** Check and Radio buttons * */
calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { background-color: #669900; }
calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { background-color: #669900; }
label:selected, calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { color: #d1ff96; }
label:selected, calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { color: #d1ff96; }
label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #7c675a; }
label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #7c675a; }
/*************** Base States * */
.background { color: #EDF0F5; background-color: #3f3e3e; }
@ -367,18 +367,20 @@ stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-
.linked.vertical > filechooserbutton > combobox:not(:last-child) > box > button.combo, .linked.vertical > appchooserbutton > combobox:not(:last-child) > box > button.combo, .linked.vertical > combobox:not(:last-child) > box > button.combo, .linked.vertical > menubutton:not(:last-child) > button, .linked.vertical > dropdown:not(:last-child) > button, .linked.vertical > colorbutton:not(:last-child) > button, .linked.vertical > fontbutton:not(:last-child) > button, .linked.vertical > filechooserbutton:not(:last-child) > button, spinbutton.vertical.linked > text:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical), .linked.vertical > entry:not(:last-child), notebook > header tabs.linked.vertical > tab:not(:last-child), notebook > header > tabs.linked.vertical > arrow:not(:last-child), .linked.vertical > button:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0px; }
button.link, button.link:hover, button.link:active, button.link:checked, modelbutton.flat:not(:hover):not(:active):not(:checked):not(:disabled) { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
button.link, button.link:hover, button.link:active, button.link:checked, modelbutton.flat arrow:not(:hover):not(:active):not(:checked):not(:disabled), modelbutton.flat:not(:hover):not(:active):not(:checked):not(:disabled) { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
/* menu buttons */
modelbutton.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 3px; }
modelbutton.flat { min-height: 20px; padding-left: 5px; padding-right: 5px; border-radius: 3px; border: 1px solid transparent; }
modelbutton.flat:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { border-color: alpha(#d1ff96,1); }
modelbutton.flat:hover { border-color: alpha(#d1ff96,1); }
modelbutton.flat:disabled { color: #7c675a; border-color: transparent; background-color: #493e37; background-image: none; text-shadow: none; -gtk-icon-shadow: none; }
modelbutton.flat arrow { background: none; min-width: 16px; min-height: 16px; opacity: 1; }
modelbutton.flat:selected { color: #d1ff96; background-color: #669900; border-color: transparent; box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.4); }
modelbutton.flat arrow:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { border-color: alpha(#d1ff96,1); }
modelbutton.flat arrow { background: none; min-width: 16px; min-height: 16px; border: 1px solid transparent; opacity: 1; }
modelbutton.flat arrow:hover { border-color: alpha(#d1ff96,1); }
modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
@ -393,6 +395,12 @@ button.color > colorswatch:only-child, button.color > colorswatch:only-child > o
/* list buttons */
/* tone down as per new designs, see issue #1473 */
popover.menu box.circular-buttons button.circular.image-button.model:hover, list > row button.image-button:not(.flat):hover { border-color: alpha(#d1ff96,1); }
popover.menu box.circular-buttons button.circular.image-button.model:active, list > row button.image-button:not(.flat):active { box-shadow: 0 0 3px 2px #669900; transition: 50ms; }
popover.menu box.circular-buttons button.circular.image-button.model:checked, list > row button.image-button:not(.flat):checked { color: #d1ff96; background-color: #669900; border-color: transparent; box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.4); }
/********* Links * */
button.link, link { color: #99c1f1; text-decoration: underline; }
@ -694,15 +702,17 @@ popover.menu { padding: 0; }
popover.menu box.inline-buttons { padding: 0 12px; }
popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; }
popover.menu box.inline-buttons button.image-button.model { min-height: 30px; min-width: 30px; padding: 0; outline: none; }
popover.menu box.inline-buttons button.image-button.model:selected { background: image(#669900); }
popover.menu box.inline-buttons button.image-button.model:not(:hover):not(:selected):not(:active) { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
popover.menu box.inline-buttons button.image-button.model:selected { color: #d1ff96; background-color: #669900; border-color: transparent; box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.4); }
popover.menu box.circular-buttons { padding: 12px 12px 6px; }
popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; }
popover.menu box.circular-buttons button.circular.image-button.model:focus { background-color: #669900; border-color: #669900; }
popover.menu box.circular-buttons button.circular.image-button.model:focus { border-color: alpha(#d1ff96,1); }
popover.menu > arrow, popover.menu.background > contents { background-color: #353434; padding: 5px; }
@ -724,21 +734,23 @@ popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { marg
popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 6px; margin-right: -2px; }
popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 12px; border-radius: 5px; }
popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 12px; border-radius: 5px; border: 1px solid transparent; transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
popover.menu modelbutton:selected { color: #EDF0F5; background-color: #669900; }
popover.menu modelbutton:hover { border-color: alpha(#d1ff96,1); }
popover.menu modelbutton:selected:active { background-color: #1b1b1b; }
popover.menu modelbutton:selected { color: #d1ff96; background-color: #669900; border-color: transparent; box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.4); }
popover.menu modelbutton:active { box-shadow: 0 0 3px 2px #669900; transition: 50ms; }
popover.menu label.title { font-weight: bold; padding: 4px 32px; }
menubar { padding: 0px; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); }
menubar { padding: 0px; }
menubar > item { min-height: 16px; padding: 4px 8px; }
menubar > item { min-height: 16px; padding: 4px 8px; border: 1px solid transparent; }
menubar > item:selected { box-shadow: inset 0 -3px #669900; color: #99c1f1; }
menubar > item:selected { border-color: alpha(#d1ff96,1); }
menubar > item:disabled { color: #7c675a; box-shadow: none; }
menubar > item:disabled { color: #7c675a; border-color: transparent; background-color: #493e37; background-image: none; text-shadow: none; -gtk-icon-shadow: none; }
menubar > item popover.menu.background > contents { padding: 5px; }
@ -911,7 +923,7 @@ progressbar > trough, scale > trough > fill, scale > trough { border: 1px solid
headerbar progressbar > trough, headerbar scale > trough > fill, headerbar scale > trough { background-color: #373737; }
progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:disabled { background-color: #493e37; border-color: #6a5f59; }
progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:disabled { background-color: #493e37; border-color: #53463e; }
row:selected progressbar > trough, row:selected scale > trough > fill, row:selected scale > trough { outline-color: rgba(255, 255, 255, 0.3); border-color: black; }
@ -1108,6 +1120,10 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #595757; }
actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
scrolledwindow > .view:dir(ltr), scrolledwindow > iconview:dir(ltr) { padding-right: 1em; }
scrolledwindow > .view:dir(rtl), scrolledwindow > iconview:dir(rtl) { padding-left: 1em; }
scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, #669900 85%, rgba(102, 153, 0, 0)), radial-gradient(farthest-side at top, rgba(102, 153, 0, 0.07), rgba(102, 153, 0, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #669900 85%, rgba(102, 153, 0, 0)), radial-gradient(farthest-side at bottom, rgba(102, 153, 0, 0.07), rgba(102, 153, 0, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
@ -1137,21 +1153,15 @@ listview.horizontal row.separator, listview.separators.horizontal > row:not(.sep
listview:not(.horizontal) row.separator, listview.separators:not(.horizontal) > row:not(.separator), list:not(.horizontal) row.separator, list.separators:not(.horizontal) > row:not(.separator) { border-bottom: 1px solid #575859; }
row { transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
row { transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid transparent; }
row { outline: 0 solid transparent; outline-offset: 4px; }
row.activatable:hover { border-color: alpha(#d1ff96,1); }
row:focus:focus-visible { outline-color: rgba(102, 153, 0, 0.7); outline-width: 2px; outline-offset: -2px; }
row.activatable:active, row.activatable:selected:active { box-shadow: 0 0 3px 2px #669900; transition: 50ms; }
row.activatable.has-open-popup, row.activatable:hover { background-color: rgba(237, 240, 245, 0.05); }
row.activatable:selected, row.activatable.has-open-popup { color: #d1ff96; background-color: #669900; border-color: transparent; box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.4); }
row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
row.activatable:selected.has-open-popup, row.activatable:selected:hover { background-color: #74a219; }
row:selected { outline-color: rgba(255, 255, 255, 0.3); }
row.activatable:disabled { color: #7c675a; border-color: transparent; background-color: #493e37; background-image: none; text-shadow: none; -gtk-icon-shadow: none; }
columnview > listview > row { padding: 0; }
@ -1264,22 +1274,12 @@ paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .
stacksidebar list.separators:not(.horizontal) > row:not(.separator) { border-bottom: none; }
stacksidebar row { padding: 10px 4px; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
stacksidebar row { outline: 0 solid transparent; outline-offset: 4px; }
stacksidebar row:focus:focus-visible { outline-color: rgba(102, 153, 0, 0.7); outline-width: 2px; outline-offset: -2px; }
stacksidebar row { padding: 10px 4px; }
stacksidebar row > label { padding-left: 6px; padding-right: 6px; }
stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; }
stacksidebar row:selected { background-color: #669900; border-radius: 5px; color: #EDF0F5; }
stacksidebar row:selected:hover:dir(ltr), stacksidebar row:selected:hover:dir(rtl) { background-color: #558000; }
stacksidebar row.activatable:active, stacksidebar row.activatable:selected:active { box-shadow: none; }
separator.sidebar { background-color: #595757; }
/********************** Navigation Sidebar * */
@ -1287,19 +1287,7 @@ separator.sidebar { background-color: #595757; }
.navigation-sidebar > separator { margin: 5px; }
.navigation-sidebar > row { min-height: 36px; padding: 0 8px; border-radius: 5px; margin: 0 5px 2px; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
.navigation-sidebar > row { outline: 0 solid transparent; outline-offset: 4px; }
.navigation-sidebar > row:focus-visible:focus-within { outline-color: rgba(102, 153, 0, 0.7); outline-width: 2px; outline-offset: -2px; }
.navigation-sidebar > row:hover { background-color: #4c6619; }
.navigation-sidebar > row:selected { background-color: #669900; color: inherit; }
.navigation-sidebar > row:selected:hover { background-color: #373c2d; }
.navigation-sidebar > row:disabled { color: #7c675a; }
.navigation-sidebar > row { min-height: 36px; padding: 0 8px; border-radius: 5px; margin: 0 5px 2px; }
/**************** File chooser * */
row image.sidebar-icon { opacity: 1; }

View File

@ -129,7 +129,7 @@ $_default_button_c: $button_bg;
}
@else if $t==insensitive or $t==osd-insensitive {
@else if $t==insensitive or $t==osd-insensitive or $t==disabled {
//
// insensitive button
//

24
source/common/row.scss Normal file
View File

@ -0,0 +1,24 @@
row {
transition: all 500ms $ease-out-quad;
border: 1px solid transparent;
//&:hover { transition: none; }
//&:backdrop { transition: $backdrop_transition; }
&.activatable {
// this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&:hover { @include button(hover); }
&:active, &:selected:active { @include button(active); }
//&:backdrop:hover { background-color: transparent; }
&:selected, &.has-open-popup {
@include button(checked);
}
&:disabled {@include button(disabled);}
}
&:selected { @extend %selected_items; }
}

View File

@ -1155,21 +1155,19 @@ modelbutton.flat,
padding-right: 5px;
border-radius: $button_radius;
outline-offset: -2px;
border: 1px solid transparent;
&:not(:hover):not(:active):not(:checked):not(:disabled) {@extend %undecorated_button;}
&:hover { background-color: $popover_hover_color; }
&:hover { @include button(hover); }
&:selected { @extend %selected_items; }
&:backdrop,
&:backdrop:hover { @extend %undecorated_button; }
}
modelbutton.flat arrow {
background: none;
@extend %button;
&:hover { background: none; }
//&:hover { @include button(hover); }
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
@ -2159,13 +2157,16 @@ menubar,
.menubar {
-GtkWidget-window-dragging: true;
padding: 0px;
box-shadow: inset 0 -1px transparentize(black, 0.9);
//box-shadow: inset 0 -1px transparentize(black, 0.9);
&:backdrop { background-color: $backdrop_bg_color; }
//&:backdrop { background-color: $backdrop_bg_color; }
> menuitem {
min-height: 16px;
padding: 4px 8px;
border: 1px solid transparent;
transition: $button_transition;
// remove padding and rounding from menubar submenus
menu {
@ -2175,15 +2176,10 @@ menubar,
}
}
&:hover { //Seems like it :hover even with keyboard focus
box-shadow: inset 0 -3px $selected_bg_color;
color: $link_color;
}
&:hover { @include button(hover); }
&:disabled { @include button(insensitive); }
&:active {@include button(active);}
&:disabled {
color: $insensitive_fg_color;
box-shadow: none;
}
}
// remove padding and rounding from menubar submenu decoration
@ -2201,35 +2197,26 @@ menu,
padding: 4px 0px;
background-color: $menu_color;
border: 1px solid $borders_color; // adds borders in a non composited env
transition: $button_transition;
.csd & {
border: none; // axes borders in a composited env
border-radius: $menu_radius;
}
&:backdrop { background-color: $backdrop_menu_color; }
//&:backdrop { background-color: $backdrop_menu_color; }
menuitem {
min-height: 16px;
min-width: 40px;
padding: 4px 6px;
text-shadow: none;
border: 1px solid transparent;
transition: $button_transition;
&:hover {
color: $selected_fg_color;
background-color: $selected_bg_color;
}
&:disabled {
color: $insensitive_fg_color;
&:backdrop { color: $backdrop_insensitive_color; }
}
&:backdrop,
&:backdrop:hover {
color: $backdrop_fg_color;
background-color: transparent;
}
&:hover { @include button(hover); }
&:disabled { @include button(insensitive); }
&:active {@include button(active);}
// submenu indicators
arrow {
@ -2254,7 +2241,6 @@ menu,
// overflow arrows
> arrow {
@include button(undecorated);
min-height: 16px;
min-width: 16px;
@ -2278,16 +2264,6 @@ menu,
border-bottom-left-radius: $menu_radius;
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}
&:hover { background-color: mix($fg_color, $base_color, 10%); }
&:backdrop { background-color: $backdrop_menu_color; }
&:disabled {
color: transparent;
background-color: transparent;
border-color: transparent ;
}
}
}
@ -2326,11 +2302,7 @@ popover.background {
box-shadow: 0 1px 2px transparentize(black, 0.7);
&:backdrop {
background-color: $backdrop_bg_color;
box-shadow: none;
}
> list,
> .view,
> toolbar {
@ -3277,34 +3249,8 @@ list {
row { padding: 2px; }
}
row {
transition: all 150ms $ease-out-quad;
@import '../common/row.scss';
&:hover { transition: none; }
&:backdrop { transition: $backdrop_transition; }
&.activatable {
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
&:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
&:backdrop:hover { background-color: transparent; }
&:selected {
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
&.has-open-popup,
&:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
&:backdrop { background-color: $selected_bg_color; }
}
}
&:selected { @extend %selected_items; }
}
/*********************
@ -3337,15 +3283,14 @@ row {
*************/
expander {
title > arrow {
@extend %button;
min-width: 16px;
min-height: 16px;
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
&:disabled { color: $insensitive_fg_color; }
&:disabled:backdrop { color: $backdrop_insensitive_color; }
//&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
//&:disabled { color: $insensitive_fg_color; }
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
}
}

File diff suppressed because one or more lines are too long

View File

@ -508,25 +508,7 @@ button {
}
// &:backdrop {
// &.flat, & {
// @include button(backdrop);
// transition: $backdrop_transition;
// &:not(:disabled) { -gtk-icon-filter: none; }
// &:active,
// &:checked { @include button(backdrop-active); }
// &:disabled {
// @include button(backdrop-insensitive);
// &:active,
// &:checked { @include button(backdrop-insensitive-active); }
// }
// }
// }
&:disabled {
@include button(insensitive);
@ -907,15 +889,15 @@ button {
/* menu buttons */
modelbutton.flat {
min-height: 26px;
min-height: 20px;
padding-left: 5px;
padding-right: 5px;
border-radius: $button_radius;
border: 1px solid transparent;
&:not(:hover):not(:active):not(:checked):not(:disabled) {@extend %undecorated_button;}
//&:hover { background-color: $menu_selected_color; }
&:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) {
&:hover {
@include button(hover);//, $backimage: $_border_bg);
}
@ -923,18 +905,20 @@ modelbutton.flat {
@include button(insensitive);//color: $insensitive_fg_color;
}
&:selected { @extend %selected_items; }
&:selected { @include button(checked); }
}
modelbutton.flat arrow {
&:not(:hover):not(:active):not(:checked):not(:disabled) {@extend %undecorated_button;}
background: none;
min-width: 16px;
min-height: 16px;
border: 1px solid transparent;
opacity: 1; //we don't dim icon
//&:hover { background: none; }
&:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) {
@include button(hover);//, $backimage: $_border_bg);
&:hover {
@include button(hover);//, $backimage: $_border_bg);
}
&.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
@ -986,9 +970,9 @@ button.color {
list > row button.image-button:not(.flat) {
//@extend %undecorated_button;
//border: 1px solid transparentize($borders_color, .5);
//&:hover { @include button(hover); }
//&:active,
//&:checked { @include button(active); }
&:hover { @include button(hover); }
&:active{ @include button(active); }
&:checked { @include button(checked); }
//@each $b_type, $b_color in (suggested-action, $selected_bg_color),
// (destructive-action, $destructive_color) {
@ -1967,16 +1951,16 @@ popover.menu {
padding: 0 $_menu-padding;
button.image-button.model {
@include button(undecorated);
&:not(:hover):not(:selected):not(:active) {@include button(undecorated);}
min-height: 30px;
min-width: 30px;
padding: 0;
border: none;
//border: none;
outline: none;
transition: none;
//transition: none;
&:selected { background: image($menu_selected_color); }
&:selected { @include button(checked); }
}
}
@ -1988,8 +1972,9 @@ popover.menu {
padding: 11px;
&:focus {
background-color: $menu_selected_color;
border-color: $menu_selected_color;
//background-color: $menu_selected_color;
//border-color: $menu_selected_color;
@include button(hover);
}
}
}
@ -2043,15 +2028,15 @@ popover.menu {
min-width: 40px;
padding: 0 $_menu-padding;
border-radius: $menu-margin;
border: 1px solid transparent;
transition: $button_transition;
&:hover {@include button(hover);}
&:selected {
color: $text-color;
background-color: $menu_selected_color;
@include button(checked);
}
&:selected:active {
//@extend %selected_items;
//color: $selected_fg_color;
background-color: darken($bg_color,14%); // matching buttons
&:active {
@include button(active);
}
}
@ -2064,20 +2049,19 @@ popover.menu {
// initial styling for popover menu and bar
menubar {
padding: 0px;
box-shadow: inset 0 -1px transparentize(black, 0.9);
//box-shadow: inset 0 -1px transparentize(black, 0.9);
> item {
min-height: 16px;
padding: 4px 8px;
border: 1px solid transparent;
&:selected { //Seems like it :hover even with keyboard focus
box-shadow: inset 0 -3px $selected_bg_color;
color: $link_color;
@include button(hover);
}
&:disabled {
color: $insensitive_fg_color;
box-shadow: none;
@include button(insensitive);
}
}
@ -2404,7 +2388,7 @@ treeview.view radio:selected { &:selected, &:focus, & { @extend %radio; }} // Th
&:disabled {
background-color: $insensitive_bg_color;
border-color: $insensitive_borders_color;
border-color: mix($insensitive_bg_color, $insensitive_fg_color, 80%);
}
// ...on selected list rows
@ -2838,6 +2822,13 @@ actionbar > revealer > box {
scrolledwindow {
// This is used when content is touch-dragged past boundaries.
// draws a box on top of the content, the size changes programmatically.
//The damned overlay scrollbars shall not appear over content!
&>.view {
&:dir(ltr) {padding-right: 1em;}
&:dir(rtl) {padding-left: 1em;}
}
> overshoot {
&.top {
@include overshoot(top);
@ -2909,30 +2900,7 @@ list {
}
}
row {
@include focus-ring();
&.activatable {
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
&:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
&:selected {
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
&.has-open-popup,
&:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
}
}
&:selected {
outline-color: $alt_focus_border_color;
@extend %selected_items;
}
}
@import '../common/row.scss';
columnview {
// move padding to child cells
@ -3227,7 +3195,7 @@ stacksidebar {
}
row {
padding: 10px 4px;
@include focus-ring();
//@include focus-ring();
> label {
padding-left: 6px;
@ -3238,17 +3206,7 @@ stacksidebar {
@extend %needs_attention;
background-size: 6px 6px, 0 0;
}
&:selected {
background-color: $menu_selected_color;
border-radius: $menu_radius;
color: $fg_color;
}
&:selected:hover:dir(ltr), &:selected:hover:dir(rtl) {
background-color: darken($menu_selected_color,5%);
}
&.activatable:active, &.activatable:selected:active {
box-shadow: none; // #3413
}
}
}
@ -3273,22 +3231,7 @@ separator.sidebar {
padding: 0 8px;
border-radius: $menu-margin;
margin: 0 $menu-margin 2px;
@include focus-ring($focus-state: 'focus-visible:focus-within');
&:hover {
background-color: mix($menu_selected_color, $base_color, 50%);
}
&:selected {
background-color: $menu_selected_color;
color: inherit;
&:hover {
background-color: mix($menu_selected_color, $base_color, 10%);
}
}
&:disabled { color: $insensitive_fg_color; }
}
}

View File

@ -8,11 +8,11 @@ $selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%));*/
/*Usually an automatic fg color on these backgrounds should check this value!*/
/*************************** Check and Radio buttons * */
/*************************** Check and Radio buttons * */
calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { background-color: #669900; }
calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { background-color: #669900; }
label:selected, calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, modelbutton.flat:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { color: #d1ff96; }
label:selected, calendar > grid > label.day-number:selected, row:selected, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, gridview > child:selected, flowbox > flowboxchild:selected, .view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { color: #d1ff96; }
label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, modelbutton.flat:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #7c675a; }
label:disabled > selection, label:disabled:selected, calendar > grid > label.day-number:disabled:selected, row:disabled:selected, columnview.view:disabled:selected, treeview.view:disabled:selected, gridview > child:disabled:selected, flowbox > flowboxchild:disabled:selected, .view:disabled:selected, iconview:disabled:selected, textview > text:disabled:selected { color: #7c675a; }
/*************** Base States * */
.background { color: #EDF0F5; background-color: #3f3e3e; }
@ -367,18 +367,20 @@ stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-
.linked.vertical > filechooserbutton > combobox:not(:last-child) > box > button.combo, .linked.vertical > appchooserbutton > combobox:not(:last-child) > box > button.combo, .linked.vertical > combobox:not(:last-child) > box > button.combo, .linked.vertical > menubutton:not(:last-child) > button, .linked.vertical > dropdown:not(:last-child) > button, .linked.vertical > colorbutton:not(:last-child) > button, .linked.vertical > fontbutton:not(:last-child) > button, .linked.vertical > filechooserbutton:not(:last-child) > button, spinbutton.vertical.linked > text:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical), .linked.vertical > entry:not(:last-child), notebook > header tabs.linked.vertical > tab:not(:last-child), notebook > header > tabs.linked.vertical > arrow:not(:last-child), .linked.vertical > button:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0px; }
button.link, button.link:hover, button.link:active, button.link:checked, modelbutton.flat:not(:hover):not(:active):not(:checked):not(:disabled) { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
button.link, button.link:hover, button.link:active, button.link:checked, modelbutton.flat arrow:not(:hover):not(:active):not(:checked):not(:disabled), modelbutton.flat:not(:hover):not(:active):not(:checked):not(:disabled) { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
/* menu buttons */
modelbutton.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 3px; }
modelbutton.flat { min-height: 20px; padding-left: 5px; padding-right: 5px; border-radius: 3px; border: 1px solid transparent; }
modelbutton.flat:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { border-color: alpha(#d1ff96,1); }
modelbutton.flat:hover { border-color: alpha(#d1ff96,1); }
modelbutton.flat:disabled { color: #7c675a; border-color: transparent; background-color: #493e37; background-image: none; text-shadow: none; -gtk-icon-shadow: none; }
modelbutton.flat arrow { background: none; min-width: 16px; min-height: 16px; opacity: 1; }
modelbutton.flat:selected { color: #d1ff96; background-color: #669900; border-color: transparent; box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.4); }
modelbutton.flat arrow:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { border-color: alpha(#d1ff96,1); }
modelbutton.flat arrow { background: none; min-width: 16px; min-height: 16px; border: 1px solid transparent; opacity: 1; }
modelbutton.flat arrow:hover { border-color: alpha(#d1ff96,1); }
modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
@ -393,6 +395,12 @@ button.color > colorswatch:only-child, button.color > colorswatch:only-child > o
/* list buttons */
/* tone down as per new designs, see issue #1473 */
popover.menu box.circular-buttons button.circular.image-button.model:hover, list > row button.image-button:not(.flat):hover { border-color: alpha(#d1ff96,1); }
popover.menu box.circular-buttons button.circular.image-button.model:active, list > row button.image-button:not(.flat):active { box-shadow: 0 0 3px 2px #669900; transition: 50ms; }
popover.menu box.circular-buttons button.circular.image-button.model:checked, list > row button.image-button:not(.flat):checked { color: #d1ff96; background-color: #669900; border-color: transparent; box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.4); }
/********* Links * */
button.link, link { color: #99c1f1; text-decoration: underline; }
@ -694,15 +702,17 @@ popover.menu { padding: 0; }
popover.menu box.inline-buttons { padding: 0 12px; }
popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; }
popover.menu box.inline-buttons button.image-button.model { min-height: 30px; min-width: 30px; padding: 0; outline: none; }
popover.menu box.inline-buttons button.image-button.model:selected { background: image(#669900); }
popover.menu box.inline-buttons button.image-button.model:not(:hover):not(:selected):not(:active) { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
popover.menu box.inline-buttons button.image-button.model:selected { color: #d1ff96; background-color: #669900; border-color: transparent; box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.4); }
popover.menu box.circular-buttons { padding: 12px 12px 6px; }
popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; }
popover.menu box.circular-buttons button.circular.image-button.model:focus { background-color: #669900; border-color: #669900; }
popover.menu box.circular-buttons button.circular.image-button.model:focus { border-color: alpha(#d1ff96,1); }
popover.menu > arrow, popover.menu.background > contents { background-color: #353434; padding: 5px; }
@ -724,21 +734,23 @@ popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { marg
popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 6px; margin-right: -2px; }
popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 12px; border-radius: 5px; }
popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 12px; border-radius: 5px; border: 1px solid transparent; transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
popover.menu modelbutton:selected { color: #EDF0F5; background-color: #669900; }
popover.menu modelbutton:hover { border-color: alpha(#d1ff96,1); }
popover.menu modelbutton:selected:active { background-color: #1b1b1b; }
popover.menu modelbutton:selected { color: #d1ff96; background-color: #669900; border-color: transparent; box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.4); }
popover.menu modelbutton:active { box-shadow: 0 0 3px 2px #669900; transition: 50ms; }
popover.menu label.title { font-weight: bold; padding: 4px 32px; }
menubar { padding: 0px; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); }
menubar { padding: 0px; }
menubar > item { min-height: 16px; padding: 4px 8px; }
menubar > item { min-height: 16px; padding: 4px 8px; border: 1px solid transparent; }
menubar > item:selected { box-shadow: inset 0 -3px #669900; color: #99c1f1; }
menubar > item:selected { border-color: alpha(#d1ff96,1); }
menubar > item:disabled { color: #7c675a; box-shadow: none; }
menubar > item:disabled { color: #7c675a; border-color: transparent; background-color: #493e37; background-image: none; text-shadow: none; -gtk-icon-shadow: none; }
menubar > item popover.menu.background > contents { padding: 5px; }
@ -911,7 +923,7 @@ progressbar > trough, scale > trough > fill, scale > trough { border: 1px solid
headerbar progressbar > trough, headerbar scale > trough > fill, headerbar scale > trough { background-color: #373737; }
progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:disabled { background-color: #493e37; border-color: #6a5f59; }
progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:disabled { background-color: #493e37; border-color: #53463e; }
row:selected progressbar > trough, row:selected scale > trough > fill, row:selected scale > trough { outline-color: rgba(255, 255, 255, 0.3); border-color: black; }
@ -1108,6 +1120,10 @@ actionbar > revealer > box { padding: 6px; border-top: 1px solid #595757; }
actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { border-spacing: 6px; }
scrolledwindow > .view:dir(ltr), scrolledwindow > iconview:dir(ltr) { padding-right: 1em; }
scrolledwindow > .view:dir(rtl), scrolledwindow > iconview:dir(rtl) { padding-left: 1em; }
scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, #669900 85%, rgba(102, 153, 0, 0)), radial-gradient(farthest-side at top, rgba(102, 153, 0, 0.07), rgba(102, 153, 0, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #669900 85%, rgba(102, 153, 0, 0)), radial-gradient(farthest-side at bottom, rgba(102, 153, 0, 0.07), rgba(102, 153, 0, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
@ -1137,21 +1153,15 @@ listview.horizontal row.separator, listview.separators.horizontal > row:not(.sep
listview:not(.horizontal) row.separator, listview.separators:not(.horizontal) > row:not(.separator), list:not(.horizontal) row.separator, list.separators:not(.horizontal) > row:not(.separator) { border-bottom: 1px solid #575859; }
row { transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
row { transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid transparent; }
row { outline: 0 solid transparent; outline-offset: 4px; }
row.activatable:hover { border-color: alpha(#d1ff96,1); }
row:focus:focus-visible { outline-color: rgba(102, 153, 0, 0.7); outline-width: 2px; outline-offset: -2px; }
row.activatable:active, row.activatable:selected:active { box-shadow: 0 0 3px 2px #669900; transition: 50ms; }
row.activatable.has-open-popup, row.activatable:hover { background-color: rgba(237, 240, 245, 0.05); }
row.activatable:selected, row.activatable.has-open-popup { color: #d1ff96; background-color: #669900; border-color: transparent; box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.4); }
row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
row.activatable:selected.has-open-popup, row.activatable:selected:hover { background-color: #74a219; }
row:selected { outline-color: rgba(255, 255, 255, 0.3); }
row.activatable:disabled { color: #7c675a; border-color: transparent; background-color: #493e37; background-image: none; text-shadow: none; -gtk-icon-shadow: none; }
columnview > listview > row { padding: 0; }
@ -1264,22 +1274,12 @@ paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .
stacksidebar list.separators:not(.horizontal) > row:not(.separator) { border-bottom: none; }
stacksidebar row { padding: 10px 4px; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
stacksidebar row { outline: 0 solid transparent; outline-offset: 4px; }
stacksidebar row:focus:focus-visible { outline-color: rgba(102, 153, 0, 0.7); outline-width: 2px; outline-offset: -2px; }
stacksidebar row { padding: 10px 4px; }
stacksidebar row > label { padding-left: 6px; padding-right: 6px; }
stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; }
stacksidebar row:selected { background-color: #669900; border-radius: 5px; color: #EDF0F5; }
stacksidebar row:selected:hover:dir(ltr), stacksidebar row:selected:hover:dir(rtl) { background-color: #558000; }
stacksidebar row.activatable:active, stacksidebar row.activatable:selected:active { box-shadow: none; }
separator.sidebar { background-color: #595757; }
/********************** Navigation Sidebar * */
@ -1287,19 +1287,7 @@ separator.sidebar { background-color: #595757; }
.navigation-sidebar > separator { margin: 5px; }
.navigation-sidebar > row { min-height: 36px; padding: 0 8px; border-radius: 5px; margin: 0 5px 2px; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
.navigation-sidebar > row { outline: 0 solid transparent; outline-offset: 4px; }
.navigation-sidebar > row:focus-visible:focus-within { outline-color: rgba(102, 153, 0, 0.7); outline-width: 2px; outline-offset: -2px; }
.navigation-sidebar > row:hover { background-color: #4c6619; }
.navigation-sidebar > row:selected { background-color: #669900; color: inherit; }
.navigation-sidebar > row:selected:hover { background-color: #373c2d; }
.navigation-sidebar > row:disabled { color: #7c675a; }
.navigation-sidebar > row { min-height: 36px; padding: 0 8px; border-radius: 5px; margin: 0 5px 2px; }
/**************** File chooser * */
row image.sidebar-icon { opacity: 1; }

View File

@ -93,8 +93,8 @@ style "default" {
toolbarstyle = 1
animation = FALSE
radius = 3.0
style = GLOSSY
#style can also be GLOSSY
style = GUMMY
# Set a hint to disable backward compatibility fallbacks.
hint = "use-hints"
}

View File

@ -93,8 +93,8 @@ menubarstyle = 2
toolbarstyle = 1
animation = FALSE
radius = 3.0
style = GLOSSY
#style can also be GLOSSY
style = GUMMY
# Set a hint to disable backward compatibility fallbacks.
hint = "use-hints"
}