achadwick
/
GlossyApertures
forked from eudaimon/GlossyApertures
1
0
Fork 0
Code Pull Requests Activity

Improved button hover background color

This commit is contained in:
eudaimon 2023-03-01 11:31:26 +01:00
parent 0216d448e9
commit 78ceb6dd6e
5 changed files with 85 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
gtk-3.0/gtk.css
View File

@ -228,7 +228,7 @@ button.titlebutton, scrollbar slider, notebook > header > tabs > arrow, button {
button.sidebar-button, scrollbar slider.flat:not(:hover):not(:active):not(:checked):not(:disabled), notebook > header > tabs > arrow.flat:not(:hover):not(:active):not(:checked):not(:disabled), button.flat:not(:hover):not(:active):not(:checked):not(:disabled) { 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; transition: none; }
scrollbar slider:hover, notebook > header > tabs > arrow:hover, button:hover { background-color: shade(#d3d3d3, 1.1); -gtk-icon-effect: highlight; }
scrollbar slider:hover, notebook > header > tabs > arrow:hover, button:hover { background-color: #e9e9e9; -gtk-icon-effect: highlight; }
scrollbar slider:active, notebook > header > tabs > arrow:active, button:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); transition-duration: 50ms; }
@ -276,7 +276,7 @@ notebook > header > tabs > arrow.osd:backdrop, button.osd:backdrop { border: non
.app-notification button, .app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, .osd notebook > header > tabs > arrow, .osd button { color: #504300; background-color: rgba(255, 255, 164, 0.7); border-color: rgba(141, 133, 57, 0.85); outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd notebook > header > tabs > arrow:hover, .osd button:hover { background-color: shade(rgba(255, 255, 164, 0.7), 1.1); }
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd notebook > header > tabs > arrow:hover, .osd button:hover { background-color: rgba(255, 255, 223, 0.85); }
.app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd notebook > header > tabs > arrow:active, .osd notebook > header > tabs > arrow:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -288,7 +288,7 @@ notebook > header > tabs > arrow.osd:backdrop, button.osd:backdrop { border: non
.app-notification button.flat:not(:hover):not(:active):not(:checked):not(:disabled), popover.background.touch-selection button.flat:not(:hover):not(:active):not(:checked):not(:disabled), popover.background.magnifier button.flat:not(:hover):not(:active):not(:checked):not(:disabled), .osd notebook > header > tabs > arrow.flat:not(:hover):not(:active):not(:checked):not(:disabled), .osd button.flat:not(:hover):not(:active):not(:checked):not(:disabled) { 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; }
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd notebook > header > tabs > arrow.flat:hover, .osd button.flat:hover { background-color: shade(rgba(255, 255, 164, 0.7), 1.1); }
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd notebook > header > tabs > arrow.flat:hover, .osd button.flat:hover { background-color: rgba(255, 255, 223, 0.85); }
.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd notebook > header > tabs > arrow.flat:disabled, .osd button.flat:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; background-color: #c7bebe; background-image: none; border-color: transparent; box-shadow: none; }
@ -300,7 +300,7 @@ notebook > header > tabs > arrow.suggested-action, button.suggested-action { col
notebook > header > tabs > arrow.suggested-action.flat, button.suggested-action.flat { 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; color: #73d216; }
notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: shade(#73d216, 1.1); }
notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: #8fdb45; }
notebook > header > tabs > arrow.suggested-action:active, notebook > header > tabs > arrow.suggested-action:checked, button.suggested-action:active, button.suggested-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -316,7 +316,7 @@ notebook > header > tabs > arrow.destructive-action, button.destructive-action {
notebook > header > tabs > arrow.destructive-action.flat, button.destructive-action.flat { 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; color: #df0000; }
notebook > header > tabs > arrow.destructive-action:hover, button.destructive-action:hover { background-color: shade(#df0000, 1.1); }
notebook > header > tabs > arrow.destructive-action:hover, button.destructive-action:hover { background-color: #e53333; }
notebook > header > tabs > arrow.destructive-action:active, notebook > header > tabs > arrow.destructive-action:checked, button.destructive-action:active, button.destructive-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -350,7 +350,7 @@ notebook > header > tabs > arrow.circular label, button.circular label { padding
notebook > header > tabs > arrow.circular:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop), button.circular:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
notebook > header > tabs > arrow.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop), button.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); }
notebook > header > tabs > arrow.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop), button.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: #e9e9e9; }
stacksidebar row.needs-attention > label, notebook > header > tabs.stack-switcher > arrow.needs-attention > label, notebook > header > tabs.stack-switcher > arrow.needs-attention > image, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#e17800), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; }
@ -360,7 +360,7 @@ stacksidebar row.needs-attention > label:dir(rtl), notebook > header > tabs.stac
.inline-toolbar toolbutton > button { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
.inline-toolbar toolbutton > button:hover { background-color: shade(#d3d3d3, 1.1); }
.inline-toolbar toolbutton > button:hover { background-color: #e9e9e9; }
.inline-toolbar toolbutton > button:active, .inline-toolbar toolbutton > button:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -415,7 +415,7 @@ button.color colorswatch:only-child, button.color colorswatch:only-child overlay
/* tone down as per new designs, see issue #1473, #1748 */
list row button.image-button:not(.flat) { border: 1px solid rgba(155, 155, 155, 0.5); }
list row button.image-button:not(.flat):hover { background-color: shade(#d3d3d3, 1.1); }
list row button.image-button:not(.flat):hover { background-color: #e9e9e9; }
list row button.image-button:not(.flat):active, list row button.image-button:not(.flat):checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -540,7 +540,7 @@ searchbar > revealer > box { margin: -6px; padding: 6px; }
.selection-mode button.titlebutton, .selection-mode .titlebar:not(headerbar) button.flat, .selection-mode.titlebar:not(headerbar) button.flat, .selection-mode headerbar button.flat, headerbar.selection-mode button.flat { 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; }
.selection-mode .titlebar:not(headerbar) button:hover, .selection-mode.titlebar:not(headerbar) button:hover, .selection-mode headerbar button:hover, headerbar.selection-mode button:hover { background-color: shade(#73d216, 1.1); }
.selection-mode .titlebar:not(headerbar) button:hover, .selection-mode.titlebar:not(headerbar) button:hover, .selection-mode headerbar button:hover, headerbar.selection-mode button:hover { background-color: #8fdb45; }
.selection-mode .titlebar:not(headerbar) button:active, .selection-mode .titlebar:not(headerbar) button:checked, .selection-mode.titlebar:not(headerbar) button:active, .selection-mode.titlebar:not(headerbar) button:checked, .selection-mode headerbar button:active, .selection-mode headerbar button:checked, .selection-mode headerbar button.toggle:checked, .selection-mode headerbar button.toggle:active, headerbar.selection-mode button:active, headerbar.selection-mode button:checked, headerbar.selection-mode button.toggle:checked, headerbar.selection-mode button.toggle:active { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -560,7 +560,7 @@ searchbar > revealer > box { margin: -6px; padding: 6px; }
.selection-mode .titlebar:not(headerbar) button.suggested-action, .selection-mode.titlebar:not(headerbar) button.suggested-action, .selection-mode headerbar button.suggested-action, headerbar.selection-mode button.suggested-action { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #40760c; }
.selection-mode .titlebar:not(headerbar) button.suggested-action:hover, .selection-mode.titlebar:not(headerbar) button.suggested-action:hover, .selection-mode headerbar button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { background-color: shade(#d3d3d3, 1.1); border-color: #40760c; }
.selection-mode .titlebar:not(headerbar) button.suggested-action:hover, .selection-mode.titlebar:not(headerbar) button.suggested-action:hover, .selection-mode headerbar button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { background-color: #e9e9e9; border-color: #40760c; }
.selection-mode .titlebar:not(headerbar) button.suggested-action:active, .selection-mode.titlebar:not(headerbar) button.suggested-action:active, .selection-mode headerbar button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #40760c; }
@ -855,7 +855,7 @@ notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow
notebook > header > tabs > arrow { min-height: 16px; min-width: 16px; border-radius: 0; }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-color: #e9e9e9; }
notebook > header > tabs > arrow:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -973,7 +973,7 @@ switch slider { margin: -1px; min-width: 24px; min-height: 24px; border: 1px sol
switch image { color: transparent; }
switch:hover slider { background-color: shade(#d3d3d3, 1.1); }
switch:hover slider { background-color: #e9e9e9; }
switch:checked > slider { border: 1px solid #000000; }
@ -1137,7 +1137,7 @@ scale fill:disabled:backdrop, scale fill:disabled { border-color: transparent; b
scale slider { min-height: 18px; min-width: 18px; margin: -9px; color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); border-width: 1px; border-style: solid; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; }
scale slider:hover { background-color: shade(#d3d3d3, 1.1); }
scale slider:hover { background-color: #e9e9e9; }
scale slider:active { border-color: #9dccff; }
@ -1517,7 +1517,7 @@ infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, info
infobar.info button, infobar.question button, infobar.warning button, infobar.error button { color: #1d1d1d; background-color: #c9c9c9; border-color: #737373; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); }
infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error button:hover { background-color: shade(#c9c9c9, 1.1); }
infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error button:hover { background-color: #e4e4e4; }
infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, infobar.error button:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -1595,7 +1595,7 @@ colorswatch#add-color-button:only-child { border-radius: 5px; }
colorswatch#add-color-button overlay { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
colorswatch#add-color-button overlay:hover { background-color: shade(#d3d3d3, 1.1); }
colorswatch#add-color-button overlay:hover { background-color: #e9e9e9; }
colorswatch#add-color-button overlay:backdrop { background-image: none; }
@ -1647,13 +1647,13 @@ messagedialog.csd decoration { border-radius: 8px; box-shadow: 0 1px 5px rgba(0,
button.titlebutton:not(.appmenu) { padding: 5px; margin: 0 2px; min-width: 0; min-height: 0; color: white; background-color: #9dccff; border-color: #cee6ff; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.353725); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.353725); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); text-shadow: 0 0 2px #303030; -gtk-icon-shadow: 0 0 2px #303030; }
button.titlebutton:not(.appmenu):hover { background-color: shade(#9dccff, 1.1); }
button.titlebutton:not(.appmenu):hover { background-color: #cee6ff; }
button.titlebutton:not(.appmenu):active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
button.titlebutton:not(.appmenu):backdrop { color: white; background-color: #c9c9c9; border-color: #e4e4e4; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.369412); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.369412); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); background-image: none; text-shadow: 0 0 2px #303030; -gtk-icon-shadow: 0 0 2px #303030; }
button.titlebutton:not(.appmenu):backdrop:hover { background-color: shade(#9dccff, 1.1); }
button.titlebutton:not(.appmenu):backdrop:hover { background-color: #cee6ff; }
button.titlebutton:not(.appmenu):backdrop:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -1661,7 +1661,7 @@ button.titlebutton.close { padding-right: 12px; padding-left: 12px; }
button.titlebutton.close:not(:backdrop) { color: white; background-color: #880b0b; border-color: #c38585; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15)), radial-gradient(circle at bottom, rgba(255, 255, 0, 0.5), rgba(255, 255, 0, 0)); text-shadow: 0 -1px rgba(0, 0, 0, 0.770196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.770196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); }
button.titlebutton.close:not(:backdrop):hover { background-color: shade(#880b0b, 1.1); }
button.titlebutton.close:not(:backdrop):hover { background-color: #9f3c3c; }
button.titlebutton.close:not(:backdrop):active { box-shadow: 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -1677,7 +1677,7 @@ button.titlebutton:backdrop { -gtk-icon-shadow: none; }
/********************** Touch Copy & Paste * */
cursor-handle { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); border: 1px solid #848484; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle:hover { background-color: shade(#d3d3d3, 1.1); }
cursor-handle:hover { background-color: #e9e9e9; }
cursor-handle:active { border-color: #1e5e00; }

32
gtk-4.0/gtk.css
View File

@ -230,7 +230,7 @@ scrollbar > range > trough > slider, windowcontrols button, notebook > header >
scrollbar > range > trough > slider:focus:focus-visible, notebook > header > tabs > arrow:focus:focus-visible, button:focus:focus-visible { outline-color: rgba(157, 204, 255, 0.5); outline-width: 2px; outline-offset: -2px; }
scrollbar > range > trough > slider:hover, notebook > header > tabs > arrow:hover, button:hover { background-color: shade(#d3d3d3, 1.1); -gtk-icon-filter: brightness(1.2); }
scrollbar > range > trough > slider:hover, notebook > header > tabs > arrow:hover, button:hover { background-color: #e9e9e9; -gtk-icon-filter: brightness(1.2); }
scrollbar > range > trough > slider.keyboard-activating, scrollbar > range > trough > slider:active, notebook > header > tabs > arrow.keyboard-activating, notebook > header > tabs > arrow:active, button.keyboard-activating, button:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); transition-duration: 50ms; }
@ -280,7 +280,7 @@ notebook > header > tabs > arrow.osd:active, notebook > header > tabs > arrow.os
.app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd notebook > header > tabs > arrow, .osd button { color: #504300; background-color: rgba(255, 255, 164, 0.7); border-color: rgba(141, 133, 57, 0.85); outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd notebook > header > tabs > arrow:hover, .osd button:hover { background-color: shade(rgba(255, 255, 164, 0.7), 1.1); }
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd notebook > header > tabs > arrow:hover, .osd button:hover { background-color: rgba(255, 255, 223, 0.85); }
.app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd notebook > header > tabs > arrow:active, .osd notebook > header > tabs > arrow:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -290,7 +290,7 @@ notebook > header > tabs > arrow.osd:active, notebook > header > tabs > arrow.os
.app-notification button.flat:not(:hover):not(:active):not(:checked):not(:disabled), popover.background.touch-selection button.flat:not(:hover):not(:active):not(:checked):not(:disabled), popover.background.magnifier button.flat:not(:hover):not(:active):not(:checked):not(:disabled), .osd notebook > header > tabs > arrow.flat:not(:hover):not(:active):not(:checked):not(:disabled), .osd button.flat:not(:hover):not(:active):not(:checked):not(:disabled) { 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; }
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd notebook > header > tabs > arrow.flat:hover, .osd button.flat:hover { background-color: shade(rgba(255, 255, 164, 0.7), 1.1); }
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd notebook > header > tabs > arrow.flat:hover, .osd button.flat:hover { background-color: rgba(255, 255, 223, 0.85); }
.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd notebook > header > tabs > arrow.flat:disabled, .osd button.flat:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; }
@ -304,7 +304,7 @@ notebook > header > tabs > arrow.suggested-action:focus:focus-visible, button.su
notebook > header > tabs > arrow.suggested-action.flat, button.suggested-action.flat { 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; color: #73d216; }
notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: shade(#73d216, 1.1); }
notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: #8fdb45; }
notebook > header > tabs > arrow.suggested-action:active, notebook > header > tabs > arrow.suggested-action:checked, button.suggested-action:active, button.suggested-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -322,7 +322,7 @@ notebook > header > tabs > arrow.destructive-action:focus:focus-visible, button.
notebook > header > tabs > arrow.destructive-action.flat, button.destructive-action.flat { 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; color: #df0000; }
notebook > header > tabs > arrow.destructive-action:hover, button.destructive-action:hover { background-color: shade(#df0000, 1.1); }
notebook > header > tabs > arrow.destructive-action:hover, button.destructive-action:hover { background-color: #e53333; }
notebook > header > tabs > arrow.destructive-action:active, notebook > header > tabs > arrow.destructive-action:checked, button.destructive-action:active, button.destructive-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -363,13 +363,13 @@ button.link, button.link:hover, button.link:active, button.link:checked, modelbu
/* menu buttons */
modelbutton.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 5px; }
modelbutton.flat:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); }
modelbutton.flat:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: #e9e9e9; }
modelbutton.flat:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; 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 arrow:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); }
modelbutton.flat arrow:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: #e9e9e9; }
modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
@ -513,7 +513,7 @@ infobar.info > revealer > box, infobar.question > revealer > box, infobar.warnin
infobar .close, searchbar .close { 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-width: 16px; min-height: 16px; padding: 4px; border-radius: 50%; }
infobar .close:hover, searchbar .close:hover { background-color: shade(#d3d3d3, 1.1); }
infobar .close:hover, searchbar .close:hover { background-color: #e9e9e9; }
/***************** Title buttons * */
windowcontrols { border-spacing: 6px; }
@ -524,13 +524,13 @@ windowcontrols:not(.empty).start:dir(rtl), windowcontrols:not(.empty).end:dir(lt
windowcontrols button { padding: 6px; margin: 0 2px; min-width: 0; min-height: 0; color: white; background-color: #9dccff; border-color: #cee6ff; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.353725); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.353725); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); text-shadow: 0 0 2px #303030; -gtk-icon-shadow: 0 0 2px #303030; }
windowcontrols button:hover { background-color: shade(#9dccff, 1.1); }
windowcontrols button:hover { background-color: #cee6ff; }
windowcontrols button:active, windowcontrols button:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
windowcontrols button:backdrop { color: white; background-color: #c9c9c9; border-color: #e4e4e4; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.369412); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.369412); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); background-image: none; text-shadow: 0 0 2px #303030; -gtk-icon-shadow: 0 0 2px #303030; }
windowcontrols button:backdrop:hover { background-color: shade(#c9c9c9, 1.1); }
windowcontrols button:backdrop:hover { background-color: #e4e4e4; }
windowcontrols button:backdrop:active { box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -538,7 +538,7 @@ windowcontrols button.close { padding-right: 12px; padding-left: 12px; text-shad
windowcontrols button.close:not(:backdrop) { color: white; background-color: #880b0b; border-color: #c38585; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15)), radial-gradient(circle at bottom, rgba(255, 255, 0, 0.5), rgba(255, 255, 0, 0)); text-shadow: 0 -1px rgba(0, 0, 0, 0.770196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.770196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); text-shadow: 0 0 2px #303030; -gtk-icon-shadow: 0 0 2px #303030; }
windowcontrols button.close:not(:backdrop):hover { background-color: shade(#880b0b, 1.1); }
windowcontrols button.close:not(:backdrop):hover { background-color: #9f3c3c; }
windowcontrols button.close:not(:backdrop):active { box-shadow: 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -814,7 +814,7 @@ notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow
notebook > header > tabs > arrow { min-height: 16px; min-width: 16px; border-radius: 0; }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-color: #e9e9e9; }
notebook > header > tabs > arrow:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -916,7 +916,7 @@ switch > slider { color: #1d1d1d; background-color: #d3d3d3; border-color: #7878
switch > image { color: transparent; }
switch:hover > slider { background-color: shade(#d3d3d3, 1.1); }
switch:hover > slider { background-color: #e9e9e9; }
switch:checked > slider { border: 1px solid #51a4ff; }
@ -1038,7 +1038,7 @@ scale > trough > fill:disabled { border-color: transparent; background-color: tr
scale > trough > slider { min-height: 18px; min-width: 18px; margin: -9px; color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); border-width: 1px; border-style: solid; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; }
scale > trough > slider:hover { background-color: shade(#d3d3d3, 1.1); }
scale > trough > slider:hover { background-color: #e9e9e9; }
scale > trough > slider:active { border-color: #9dccff; }
@ -1510,7 +1510,7 @@ colorswatch#add-color-button:only-child { border-radius: 5px; }
colorswatch#add-color-button > overlay { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
colorswatch#add-color-button.activatable:hover > overlay { background-color: shade(#d3d3d3, 1.1); }
colorswatch#add-color-button.activatable:hover > overlay { background-color: #e9e9e9; }
colorswatch:disabled { opacity: 0.5; }
@ -1574,7 +1574,7 @@ tooltip.csd { border-radius: 5px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.7); }
/********************** Touch Copy & Paste * */
cursor-handle { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); border: 1px solid #848484; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle:hover { background-color: shade(#d3d3d3, 1.1); }
cursor-handle:hover { background-color: #e9e9e9; }
cursor-handle:active { border-color: #1e5e00; }

16
source/common/buttons.scss
View File

@ -84,7 +84,21 @@ $_default_button_c: $button_bg;
//
// hovered button
//
background-color: shade($c, 1.1)
$mix_color: if(lightness($c) > 90%, black, white);
$mix_value: 10%; //declaring outside @if directive so its scope includes below attributes.
@if lightness($c) > 90% {
$mix_value: 10%;
} @else if lightness($c) > 50% {
$mix_value: 50%;
} @else if lightness($c) > 25% {
$mix_value: 20%;
} @else {
$mix_value: 10%;
}
background-color: mix($mix_color, $c, $mix_value);// shade($c, 1.1)
}

38
source/gtk3/gtk-new.css
View File

@ -228,7 +228,7 @@ button.titlebutton, scrollbar slider, notebook > header > tabs > arrow, button {
button.sidebar-button, scrollbar slider.flat:not(:hover):not(:active):not(:checked):not(:disabled), notebook > header > tabs > arrow.flat:not(:hover):not(:active):not(:checked):not(:disabled), button.flat:not(:hover):not(:active):not(:checked):not(:disabled) { 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; transition: none; }
scrollbar slider:hover, notebook > header > tabs > arrow:hover, button:hover { background-color: shade(#d3d3d3, 1.1); -gtk-icon-effect: highlight; }
scrollbar slider:hover, notebook > header > tabs > arrow:hover, button:hover { background-color: #e9e9e9; -gtk-icon-effect: highlight; }
scrollbar slider:active, notebook > header > tabs > arrow:active, button:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); transition-duration: 50ms; }
@ -276,7 +276,7 @@ notebook > header > tabs > arrow.osd:backdrop, button.osd:backdrop { border: non
.app-notification button, .app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, .osd notebook > header > tabs > arrow, .osd button { color: #504300; background-color: rgba(255, 255, 164, 0.7); border-color: rgba(141, 133, 57, 0.85); outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd notebook > header > tabs > arrow:hover, .osd button:hover { background-color: shade(rgba(255, 255, 164, 0.7), 1.1); }
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd notebook > header > tabs > arrow:hover, .osd button:hover { background-color: rgba(255, 255, 223, 0.85); }
.app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd notebook > header > tabs > arrow:active, .osd notebook > header > tabs > arrow:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -288,7 +288,7 @@ notebook > header > tabs > arrow.osd:backdrop, button.osd:backdrop { border: non
.app-notification button.flat:not(:hover):not(:active):not(:checked):not(:disabled), popover.background.touch-selection button.flat:not(:hover):not(:active):not(:checked):not(:disabled), popover.background.magnifier button.flat:not(:hover):not(:active):not(:checked):not(:disabled), .osd notebook > header > tabs > arrow.flat:not(:hover):not(:active):not(:checked):not(:disabled), .osd button.flat:not(:hover):not(:active):not(:checked):not(:disabled) { 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; }
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd notebook > header > tabs > arrow.flat:hover, .osd button.flat:hover { background-color: shade(rgba(255, 255, 164, 0.7), 1.1); }
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd notebook > header > tabs > arrow.flat:hover, .osd button.flat:hover { background-color: rgba(255, 255, 223, 0.85); }
.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd notebook > header > tabs > arrow.flat:disabled, .osd button.flat:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; background-color: #c7bebe; background-image: none; border-color: transparent; box-shadow: none; }
@ -300,7 +300,7 @@ notebook > header > tabs > arrow.suggested-action, button.suggested-action { col
notebook > header > tabs > arrow.suggested-action.flat, button.suggested-action.flat { 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; color: #73d216; }
notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: shade(#73d216, 1.1); }
notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: #8fdb45; }
notebook > header > tabs > arrow.suggested-action:active, notebook > header > tabs > arrow.suggested-action:checked, button.suggested-action:active, button.suggested-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -316,7 +316,7 @@ notebook > header > tabs > arrow.destructive-action, button.destructive-action {
notebook > header > tabs > arrow.destructive-action.flat, button.destructive-action.flat { 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; color: #df0000; }
notebook > header > tabs > arrow.destructive-action:hover, button.destructive-action:hover { background-color: shade(#df0000, 1.1); }
notebook > header > tabs > arrow.destructive-action:hover, button.destructive-action:hover { background-color: #e53333; }
notebook > header > tabs > arrow.destructive-action:active, notebook > header > tabs > arrow.destructive-action:checked, button.destructive-action:active, button.destructive-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -350,7 +350,7 @@ notebook > header > tabs > arrow.circular label, button.circular label { padding
notebook > header > tabs > arrow.circular:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop), button.circular:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
notebook > header > tabs > arrow.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop), button.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); }
notebook > header > tabs > arrow.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop), button.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: #e9e9e9; }
stacksidebar row.needs-attention > label, notebook > header > tabs.stack-switcher > arrow.needs-attention > label, notebook > header > tabs.stack-switcher > arrow.needs-attention > image, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#e17800), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; }
@ -360,7 +360,7 @@ stacksidebar row.needs-attention > label:dir(rtl), notebook > header > tabs.stac
.inline-toolbar toolbutton > button { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
.inline-toolbar toolbutton > button:hover { background-color: shade(#d3d3d3, 1.1); }
.inline-toolbar toolbutton > button:hover { background-color: #e9e9e9; }
.inline-toolbar toolbutton > button:active, .inline-toolbar toolbutton > button:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -415,7 +415,7 @@ button.color colorswatch:only-child, button.color colorswatch:only-child overlay
/* tone down as per new designs, see issue #1473, #1748 */
list row button.image-button:not(.flat) { border: 1px solid rgba(155, 155, 155, 0.5); }
list row button.image-button:not(.flat):hover { background-color: shade(#d3d3d3, 1.1); }
list row button.image-button:not(.flat):hover { background-color: #e9e9e9; }
list row button.image-button:not(.flat):active, list row button.image-button:not(.flat):checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -540,7 +540,7 @@ searchbar > revealer > box { margin: -6px; padding: 6px; }
.selection-mode button.titlebutton, .selection-mode .titlebar:not(headerbar) button.flat, .selection-mode.titlebar:not(headerbar) button.flat, .selection-mode headerbar button.flat, headerbar.selection-mode button.flat { 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; }
.selection-mode .titlebar:not(headerbar) button:hover, .selection-mode.titlebar:not(headerbar) button:hover, .selection-mode headerbar button:hover, headerbar.selection-mode button:hover { background-color: shade(#73d216, 1.1); }
.selection-mode .titlebar:not(headerbar) button:hover, .selection-mode.titlebar:not(headerbar) button:hover, .selection-mode headerbar button:hover, headerbar.selection-mode button:hover { background-color: #8fdb45; }
.selection-mode .titlebar:not(headerbar) button:active, .selection-mode .titlebar:not(headerbar) button:checked, .selection-mode.titlebar:not(headerbar) button:active, .selection-mode.titlebar:not(headerbar) button:checked, .selection-mode headerbar button:active, .selection-mode headerbar button:checked, .selection-mode headerbar button.toggle:checked, .selection-mode headerbar button.toggle:active, headerbar.selection-mode button:active, headerbar.selection-mode button:checked, headerbar.selection-mode button.toggle:checked, headerbar.selection-mode button.toggle:active { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -560,7 +560,7 @@ searchbar > revealer > box { margin: -6px; padding: 6px; }
.selection-mode .titlebar:not(headerbar) button.suggested-action, .selection-mode.titlebar:not(headerbar) button.suggested-action, .selection-mode headerbar button.suggested-action, headerbar.selection-mode button.suggested-action { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #40760c; }
.selection-mode .titlebar:not(headerbar) button.suggested-action:hover, .selection-mode.titlebar:not(headerbar) button.suggested-action:hover, .selection-mode headerbar button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { background-color: shade(#d3d3d3, 1.1); border-color: #40760c; }
.selection-mode .titlebar:not(headerbar) button.suggested-action:hover, .selection-mode.titlebar:not(headerbar) button.suggested-action:hover, .selection-mode headerbar button.suggested-action:hover, headerbar.selection-mode button.suggested-action:hover { background-color: #e9e9e9; border-color: #40760c; }
.selection-mode .titlebar:not(headerbar) button.suggested-action:active, .selection-mode.titlebar:not(headerbar) button.suggested-action:active, .selection-mode headerbar button.suggested-action:active, headerbar.selection-mode button.suggested-action:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); border-color: #40760c; }
@ -855,7 +855,7 @@ notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow
notebook > header > tabs > arrow { min-height: 16px; min-width: 16px; border-radius: 0; }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-color: #e9e9e9; }
notebook > header > tabs > arrow:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -973,7 +973,7 @@ switch slider { margin: -1px; min-width: 24px; min-height: 24px; border: 1px sol
switch image { color: transparent; }
switch:hover slider { background-color: shade(#d3d3d3, 1.1); }
switch:hover slider { background-color: #e9e9e9; }
switch:checked > slider { border: 1px solid #000000; }
@ -1137,7 +1137,7 @@ scale fill:disabled:backdrop, scale fill:disabled { border-color: transparent; b
scale slider { min-height: 18px; min-width: 18px; margin: -9px; color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); border-width: 1px; border-style: solid; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; }
scale slider:hover { background-color: shade(#d3d3d3, 1.1); }
scale slider:hover { background-color: #e9e9e9; }
scale slider:active { border-color: #9dccff; }
@ -1517,7 +1517,7 @@ infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, info
infobar.info button, infobar.question button, infobar.warning button, infobar.error button { color: #1d1d1d; background-color: #c9c9c9; border-color: #737373; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); }
infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error button:hover { background-color: shade(#c9c9c9, 1.1); }
infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error button:hover { background-color: #e4e4e4; }
infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, infobar.error button:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -1595,7 +1595,7 @@ colorswatch#add-color-button:only-child { border-radius: 5px; }
colorswatch#add-color-button overlay { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
colorswatch#add-color-button overlay:hover { background-color: shade(#d3d3d3, 1.1); }
colorswatch#add-color-button overlay:hover { background-color: #e9e9e9; }
colorswatch#add-color-button overlay:backdrop { background-image: none; }
@ -1647,13 +1647,13 @@ messagedialog.csd decoration { border-radius: 8px; box-shadow: 0 1px 5px rgba(0,
button.titlebutton:not(.appmenu) { padding: 5px; margin: 0 2px; min-width: 0; min-height: 0; color: white; background-color: #9dccff; border-color: #cee6ff; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.353725); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.353725); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); text-shadow: 0 0 2px #303030; -gtk-icon-shadow: 0 0 2px #303030; }
button.titlebutton:not(.appmenu):hover { background-color: shade(#9dccff, 1.1); }
button.titlebutton:not(.appmenu):hover { background-color: #cee6ff; }
button.titlebutton:not(.appmenu):active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
button.titlebutton:not(.appmenu):backdrop { color: white; background-color: #c9c9c9; border-color: #e4e4e4; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.369412); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.369412); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); background-image: none; text-shadow: 0 0 2px #303030; -gtk-icon-shadow: 0 0 2px #303030; }
button.titlebutton:not(.appmenu):backdrop:hover { background-color: shade(#9dccff, 1.1); }
button.titlebutton:not(.appmenu):backdrop:hover { background-color: #cee6ff; }
button.titlebutton:not(.appmenu):backdrop:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -1661,7 +1661,7 @@ button.titlebutton.close { padding-right: 12px; padding-left: 12px; }
button.titlebutton.close:not(:backdrop) { color: white; background-color: #880b0b; border-color: #c38585; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15)), radial-gradient(circle at bottom, rgba(255, 255, 0, 0.5), rgba(255, 255, 0, 0)); text-shadow: 0 -1px rgba(0, 0, 0, 0.770196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.770196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); }
button.titlebutton.close:not(:backdrop):hover { background-color: shade(#880b0b, 1.1); }
button.titlebutton.close:not(:backdrop):hover { background-color: #9f3c3c; }
button.titlebutton.close:not(:backdrop):active { box-shadow: 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -1677,7 +1677,7 @@ button.titlebutton:backdrop { -gtk-icon-shadow: none; }
/********************** Touch Copy & Paste * */
cursor-handle { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); border: 1px solid #848484; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle:hover { background-color: shade(#d3d3d3, 1.1); }
cursor-handle:hover { background-color: #e9e9e9; }
cursor-handle:active { border-color: #1e5e00; }

32
source/gtk4/gtk-new.css
View File

@ -230,7 +230,7 @@ scrollbar > range > trough > slider, windowcontrols button, notebook > header >
scrollbar > range > trough > slider:focus:focus-visible, notebook > header > tabs > arrow:focus:focus-visible, button:focus:focus-visible { outline-color: rgba(157, 204, 255, 0.5); outline-width: 2px; outline-offset: -2px; }
scrollbar > range > trough > slider:hover, notebook > header > tabs > arrow:hover, button:hover { background-color: shade(#d3d3d3, 1.1); -gtk-icon-filter: brightness(1.2); }
scrollbar > range > trough > slider:hover, notebook > header > tabs > arrow:hover, button:hover { background-color: #e9e9e9; -gtk-icon-filter: brightness(1.2); }
scrollbar > range > trough > slider.keyboard-activating, scrollbar > range > trough > slider:active, notebook > header > tabs > arrow.keyboard-activating, notebook > header > tabs > arrow:active, button.keyboard-activating, button:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); transition-duration: 50ms; }
@ -280,7 +280,7 @@ notebook > header > tabs > arrow.osd:active, notebook > header > tabs > arrow.os
.app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd notebook > header > tabs > arrow, .osd button { color: #504300; background-color: rgba(255, 255, 164, 0.7); border-color: rgba(141, 133, 57, 0.85); outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd notebook > header > tabs > arrow:hover, .osd button:hover { background-color: shade(rgba(255, 255, 164, 0.7), 1.1); }
.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd notebook > header > tabs > arrow:hover, .osd button:hover { background-color: rgba(255, 255, 223, 0.85); }
.app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd notebook > header > tabs > arrow:active, .osd notebook > header > tabs > arrow:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -290,7 +290,7 @@ notebook > header > tabs > arrow.osd:active, notebook > header > tabs > arrow.os
.app-notification button.flat:not(:hover):not(:active):not(:checked):not(:disabled), popover.background.touch-selection button.flat:not(:hover):not(:active):not(:checked):not(:disabled), popover.background.magnifier button.flat:not(:hover):not(:active):not(:checked):not(:disabled), .osd notebook > header > tabs > arrow.flat:not(:hover):not(:active):not(:checked):not(:disabled), .osd button.flat:not(:hover):not(:active):not(:checked):not(:disabled) { 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; }
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd notebook > header > tabs > arrow.flat:hover, .osd button.flat:hover { background-color: shade(rgba(255, 255, 164, 0.7), 1.1); }
.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd notebook > header > tabs > arrow.flat:hover, .osd button.flat:hover { background-color: rgba(255, 255, 223, 0.85); }
.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd notebook > header > tabs > arrow.flat:disabled, .osd button.flat:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; background-image: none; text-shadow: none; -gtk-icon-shadow: none; }
@ -304,7 +304,7 @@ notebook > header > tabs > arrow.suggested-action:focus:focus-visible, button.su
notebook > header > tabs > arrow.suggested-action.flat, button.suggested-action.flat { 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; color: #73d216; }
notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: shade(#73d216, 1.1); }
notebook > header > tabs > arrow.suggested-action:hover, button.suggested-action:hover { background-color: #8fdb45; }
notebook > header > tabs > arrow.suggested-action:active, notebook > header > tabs > arrow.suggested-action:checked, button.suggested-action:active, button.suggested-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -322,7 +322,7 @@ notebook > header > tabs > arrow.destructive-action:focus:focus-visible, button.
notebook > header > tabs > arrow.destructive-action.flat, button.destructive-action.flat { 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; color: #df0000; }
notebook > header > tabs > arrow.destructive-action:hover, button.destructive-action:hover { background-color: shade(#df0000, 1.1); }
notebook > header > tabs > arrow.destructive-action:hover, button.destructive-action:hover { background-color: #e53333; }
notebook > header > tabs > arrow.destructive-action:active, notebook > header > tabs > arrow.destructive-action:checked, button.destructive-action:active, button.destructive-action:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -363,13 +363,13 @@ button.link, button.link:hover, button.link:active, button.link:checked, modelbu
/* menu buttons */
modelbutton.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 5px; }
modelbutton.flat:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); }
modelbutton.flat:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: #e9e9e9; }
modelbutton.flat:disabled { color: #552222; border-color: #8e7070; background-color: #c7bebe; 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 arrow:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); }
modelbutton.flat arrow:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: #e9e9e9; }
modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
@ -513,7 +513,7 @@ infobar.info > revealer > box, infobar.question > revealer > box, infobar.warnin
infobar .close, searchbar .close { 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-width: 16px; min-height: 16px; padding: 4px; border-radius: 50%; }
infobar .close:hover, searchbar .close:hover { background-color: shade(#d3d3d3, 1.1); }
infobar .close:hover, searchbar .close:hover { background-color: #e9e9e9; }
/***************** Title buttons * */
windowcontrols { border-spacing: 6px; }
@ -524,13 +524,13 @@ windowcontrols:not(.empty).start:dir(rtl), windowcontrols:not(.empty).end:dir(lt
windowcontrols button { padding: 6px; margin: 0 2px; min-width: 0; min-height: 0; color: white; background-color: #9dccff; border-color: #cee6ff; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.353725); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.353725); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); text-shadow: 0 0 2px #303030; -gtk-icon-shadow: 0 0 2px #303030; }
windowcontrols button:hover { background-color: shade(#9dccff, 1.1); }
windowcontrols button:hover { background-color: #cee6ff; }
windowcontrols button:active, windowcontrols button:checked { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
windowcontrols button:backdrop { color: white; background-color: #c9c9c9; border-color: #e4e4e4; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 -1px rgba(0, 0, 0, 0.369412); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.369412); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); background-image: none; text-shadow: 0 0 2px #303030; -gtk-icon-shadow: 0 0 2px #303030; }
windowcontrols button:backdrop:hover { background-color: shade(#c9c9c9, 1.1); }
windowcontrols button:backdrop:hover { background-color: #e4e4e4; }
windowcontrols button:backdrop:active { box-shadow: 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -538,7 +538,7 @@ windowcontrols button.close { padding-right: 12px; padding-left: 12px; text-shad
windowcontrols button.close:not(:backdrop) { color: white; background-color: #880b0b; border-color: #c38585; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15)), radial-gradient(circle at bottom, rgba(255, 255, 0, 0.5), rgba(255, 255, 0, 0)); text-shadow: 0 -1px rgba(0, 0, 0, 0.770196); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.770196); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); text-shadow: 0 0 2px #303030; -gtk-icon-shadow: 0 0 2px #303030; }
windowcontrols button.close:not(:backdrop):hover { background-color: shade(#880b0b, 1.1); }
windowcontrols button.close:not(:backdrop):hover { background-color: #9f3c3c; }
windowcontrols button.close:not(:backdrop):active { box-shadow: 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -814,7 +814,7 @@ notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow
notebook > header > tabs > arrow { min-height: 16px; min-width: 16px; border-radius: 0; }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-color: shade(#d3d3d3, 1.1); }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-color: #e9e9e9; }
notebook > header > tabs > arrow:active { box-shadow: 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.4); }
@ -916,7 +916,7 @@ switch > slider { color: #1d1d1d; background-color: #d3d3d3; border-color: #7878
switch > image { color: transparent; }
switch:hover > slider { background-color: shade(#d3d3d3, 1.1); }
switch:hover > slider { background-color: #e9e9e9; }
switch:checked > slider { border: 1px solid #51a4ff; }
@ -1038,7 +1038,7 @@ scale > trough > fill:disabled { border-color: transparent; background-color: tr
scale > trough > slider { min-height: 18px; min-width: 18px; margin: -9px; color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); border-width: 1px; border-style: solid; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; }
scale > trough > slider:hover { background-color: shade(#d3d3d3, 1.1); }
scale > trough > slider:hover { background-color: #e9e9e9; }
scale > trough > slider:active { border-color: #9dccff; }
@ -1510,7 +1510,7 @@ colorswatch#add-color-button:only-child { border-radius: 5px; }
colorswatch#add-color-button > overlay { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); }
colorswatch#add-color-button.activatable:hover > overlay { background-color: shade(#d3d3d3, 1.1); }
colorswatch#add-color-button.activatable:hover > overlay { background-color: #e9e9e9; }
colorswatch:disabled { opacity: 0.5; }
@ -1574,7 +1574,7 @@ tooltip.csd { border-radius: 5px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.7); }
/********************** Touch Copy & Paste * */
cursor-handle { color: #1d1d1d; background-color: #d3d3d3; border-color: #787878; outline-color: rgba(157, 204, 255, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4); border: 1px solid #848484; border-radius: 100%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle:hover { background-color: shade(#d3d3d3, 1.1); }
cursor-handle:hover { background-color: #e9e9e9; }
cursor-handle:active { border-color: #1e5e00; }