eudaimon/UltraSkeuo
2
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Entries, over & undershoots

Browse source
This commit is contained in:
Eudaimon 2023-06-20 16:31:34 +02:00
parent 6505b17673
commit 328d431576
15 changed files with 265 additions and 258 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -2,7 +2,7 @@
![small preview](previews/logo.png)
This is an extremely skeuomorphicv theme that tries to have maximum readability. To this end, different effects are used to indicate different statuses for the items (such as hover, selected, etc.).
This is an extremely skeuomorphic theme that tries to have maximum readability. To this end, different effects are used to indicate different statuses for the items (such as hover, selected, etc.).
This theme is based on Adwaita GTK3 and GTK4 (source sasscs!) and built from there. Sources are also available. I've also made adaptations so it works well as libadwaita css (still a WIP).

3
TODO.md
View file

@ -1,6 +1,5 @@
# TODO
- Entries
- Skeuomorphic separators everywhere
- proper xfwm4 theme
- Adapt README.md

84
gtk-3.0/gtk.css
View file

@ -109,7 +109,7 @@ spinner:checked:disabled { opacity: 0.5; color: #7c675a; }
.caption { font-weight: 400; font-size: 9pt; }
/**************** Text Entries * */
spinbutton:not(.vertical), entry { min-height: 28px; padding-left: 1px; padding-right: 1px; border: 1px solid; border-radius: 0px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 0 transparent; }
spinbutton:not(.vertical), entry { min-height: 28px; padding-left: 1px; padding-right: 1px; border: 0px none; border-radius: 0px; transition: none; color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px rgba(117, 255, 37, 0); }
spinbutton:not(.vertical) image.left, entry image.left { margin-right: 6px; }
@ -117,19 +117,19 @@ spinbutton:not(.vertical) image.right, entry image.right { margin-left: 6px; }
spinbutton.flat:not(.vertical), entry.flat:focus, entry.flat:backdrop, entry.flat:disabled, entry.flat { min-height: 0; padding: 2px; padding-left: 1px; padding-right: 1px; background-color: transparent; border-color: transparent; border-radius: 0; }
spinbutton:focus:not(.vertical), entry:focus { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #75ff25; }
spinbutton:focus:not(.vertical), entry:focus { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #75ff25; }
spinbutton:disabled:not(.vertical), entry:disabled { color: #7c675a; border-color: #635349; background-color: #493e37; }
spinbutton.error:not(.vertical), entry.error { color: #CC0000; border-color: #CC0000; }
spinbutton.error:focus:not(.vertical), entry.error:focus { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #CC0000; }
spinbutton.error:focus:not(.vertical), entry.error:focus { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #CC0000; }
spinbutton.error:not(.vertical) selection, entry.error selection { background-color: #CC0000; }
spinbutton.warning:not(.vertical), entry.warning { color: #f57900; border-color: #f57900; }
spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #f57900; }
spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #f57900; }
spinbutton.warning:not(.vertical) selection, entry.warning selection { background-color: #f57900; }
@ -139,15 +139,11 @@ spinbutton:not(.vertical) image:hover, entry image:hover { color: #EDF0F5; }
spinbutton:not(.vertical) image:active, entry image:active { color: #75ff25; }
spinbutton:not(.vertical) image:backdrop, entry image:backdrop { color: #838386; }
spinbutton:drop(active):not(.vertical), entry:drop(active):focus, entry:drop(active) { border-color: #33d17a; box-shadow: inset 0 0 0 1px #33d17a; }
.osd spinbutton:not(.vertical), .osd entry { border-color: rgba(54, 106, 157, 0.76); color: #66cbec; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; -gtk-icon-shadow: 0 1px black; }
.osd spinbutton:focus:not(.vertical), .osd entry:focus { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 3px 2px #66cbec; }
.osd spinbutton:backdrop:not(.vertical), .osd entry:backdrop { color: #66cbec; border-color: #66cbec; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; }
.osd spinbutton:focus:not(.vertical), .osd entry:focus { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #75ff25; }
.osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: #4384b3; border-color: rgba(86, 171, 210, 0.75); background-color: rgba(39, 75, 133, 0.5); background-clip: padding-box; }
@ -157,16 +153,8 @@ spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { backgroun
.linked:not(.vertical) > spinbutton:dir(rtl):not(.vertical), .linked:not(.vertical) > spinbutton:dir(ltr):not(.vertical), .linked:not(.vertical) > entry:dir(rtl), .linked:not(.vertical) > entry:dir(ltr), .linked:not(.vertical) > entry:first-child:dir(rtl), .linked:not(.vertical) > entry:first-child:dir(ltr), .linked:not(.vertical) > entry:last-child:dir(rtl), .linked:not(.vertical) > entry:last-child:dir(ltr), .linked:not(.vertical) > entry:only-child:dir(rtl), .linked:not(.vertical) > entry:only-child:dir(ltr) { border-radius: 0px; }
.linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + entry { border-left-color: #75ff25; }
.linked:not(.vertical) > spinbutton:focus.error:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus.error:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus.error:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus.error:not(.vertical) + entry, .linked:not(.vertical) > entry:focus.error + button, .linked:not(.vertical) > entry:focus.error + combobox > box > button.combo, .linked:not(.vertical) > entry:focus.error + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus.error + entry { border-left-color: #CC0000; }
.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + entry { border-left-color: #33d17a; }
.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #3e3d3d; }
.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) { border-top-color: #3e3d3d; }
.linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > entry:disabled + entry:disabled { border-top-color: #3e3d3d; }
.linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > entry + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > entry + entry:focus:not(:only-child) { border-top-color: #75ff25; }
@ -175,12 +163,6 @@ spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { backgroun
.linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > entry + entry:drop(active):not(:only-child) { border-top-color: #33d17a; }
.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > entry:focus:not(:only-child) + button, .linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo { border-top-color: #75ff25; }
.linked.vertical > spinbutton:focus.error:not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus.error:not(:only-child):not(.vertical) + entry, .linked.vertical > spinbutton:focus.error:not(:only-child):not(.vertical) + button, .linked.vertical > spinbutton:focus.error:not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > entry:focus.error:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:focus.error:not(:only-child) + entry, .linked.vertical > entry:focus.error:not(:only-child) + button, .linked.vertical > entry:focus.error:not(:only-child) + combobox > box > button.combo { border-top-color: #CC0000; }
.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #33d17a; }
spinbutton.error:not(.vertical), entry.error { color: #CC0000; }
treeview entry:focus:dir(rtl), treeview entry:focus:dir(ltr) { background-color: #323232; transition-property: color, background; }
@ -197,8 +179,6 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #75ff25; }
.entry-tag:hover { background-color: #aaabad; }
:backdrop .entry-tag { color: #353535; background-color: #656667; }
.entry-tag.button { background-color: transparent; color: rgba(50, 50, 50, 0.7); }
:not(:backdrop) .entry-tag.button:hover { border: 1px solid #909194; color: #323232; }
@ -209,7 +189,7 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #75ff25; }
@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#f57900), to(transparent)); }
to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#f57900), to(transparent)); } }
button.sidebar-button, expander title > arrow, notebook > header tabs > tab, notebook > header > tabs > arrow, treeview.view header button, modelbutton.flat arrow, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 3px; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); margin: 1px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
button.sidebar-button, expander title > arrow, notebook > header tabs > tab, notebook > header > tabs > arrow, treeview.view header button, modelbutton.flat arrow, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 3px; transition: none; margin: 1px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
expander title > arrow:hover, notebook > header tabs > tab:hover, notebook > header > tabs > arrow:hover, treeview.view header button:hover, modelbutton.flat arrow:hover, expander title > arrow:focus, notebook > header tabs > tab:focus, notebook > header > tabs > arrow:focus, treeview.view header button:focus, modelbutton.flat arrow:focus, button:hover, button:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-effect: highlight; }
@ -490,7 +470,7 @@ stacksidebar row.needs-attention > label:dir(rtl), expander title.stack-switcher
.linked.vertical > combobox:only-child > box > button.combo, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, expander title.linked.vertical > arrow:only-child, notebook > header tabs.linked.vertical > tab:only-child, notebook > header > tabs.linked.vertical > arrow:only-child, treeview.view header .linked.vertical > button:only-child, modelbutton.flat .linked.vertical > arrow:only-child, .linked.vertical > button:only-child { border-radius: 3px; -gtk-outline-radius: 3px; }
/* menu buttons */
modelbutton, .menuitem.button { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 3px; outline-offset: -2px; border: 1px solid; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
modelbutton, .menuitem.button { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 3px; outline-offset: -2px; border: 1px solid; transition: none; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
modelbutton:hover, modelbutton:focus, .menuitem.button:hover, .menuitem.button:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-effect: highlight; }
@ -598,12 +578,12 @@ searchbar > revealer > box { margin: -6px; padding: 6px; }
.inline-toolbar, searchbar > revealer > box, .location-bar { border-style: solid; border-color: #595757; background-color: #474646; }
.inline-toolbar:backdrop, searchbar > revealer > box:backdrop, .location-bar:backdrop { border-color: #545252; background-color: #464545; box-shadow: none; transition: 200ms ease-out; }
.inline-toolbar:backdrop, searchbar > revealer > box:backdrop, .location-bar:backdrop { border-color: #545252; background-color: #464545; box-shadow: none; transition: none; }
/*************** Header bars * */
.titlebar:not(headerbar), headerbar { padding: 0 6px; min-height: 40px; border-width: 0 0 1px; border-style: solid; border-color: #6d6c6c; border-radius: 0; color: #EDF0F5; background: #3f3e3e linear-gradient(to top, black, #3a3939 7%, #424141 93%, #8c8a8a 100%); /* Darken switchbuttons for headerbars. issue #1588 */ }
.titlebar:backdrop:not(headerbar), headerbar:backdrop { border-color: #545252; background: #3f3e3e linear-gradient(to top, black, #3a3939 7%, #424141 93%, #8c8a8a 100%); color: #EDF0F5; transition: 200ms ease-out; }
.titlebar:backdrop:not(headerbar), headerbar:backdrop { border-color: #545252; background: #3f3e3e linear-gradient(to top, black, #3a3939 7%, #424141 93%, #8c8a8a 100%); color: #EDF0F5; transition: none; }
.titlebar:not(headerbar) .title, headerbar .title { padding-left: 12px; padding-right: 12px; font-weight: bold; }
@ -776,7 +756,7 @@ treeview.view acceleditor > label { background-color: #75ff25; }
/********* Menus * */
menubar, .menubar { -GtkWidget-window-dragging: true; padding: 0px; }
menubar > menuitem, .menubar > menuitem { min-height: 16px; padding: 4px 8px; border: 1px solid transparent; border-radius: 3px; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
menubar > menuitem, .menubar > menuitem { min-height: 16px; padding: 4px 8px; border: 1px solid transparent; border-radius: 3px; transition: none; }
menubar > menuitem menu:dir(rtl), menubar > menuitem menu:dir(ltr), .menubar > menuitem menu:dir(rtl), .menubar > menuitem menu:dir(ltr) { border-radius: 0; padding: 0; }
@ -788,11 +768,11 @@ menubar .csd.popup decoration, .menubar .csd.popup decoration { border-radius: 0
.background.popup { background-color: transparent; }
menu, .menu, .context-menu { margin: 4px; padding: 4px 0px; background-color: #353434; border: 1px solid #595757; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
menu, .menu, .context-menu { margin: 4px; padding: 4px 0px; background-color: #353434; border: 1px solid #595757; transition: none; }
.csd menu, .csd .menu, .csd .context-menu { border: none; border-radius: 5px; }
menu menuitem, .menu menuitem, .context-menu menuitem { min-height: 16px; min-width: 40px; padding: 4px 6px; text-shadow: none; border: 1px solid transparent; border-radius: 3px; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
menu menuitem, .menu menuitem, .context-menu menuitem { min-height: 16px; min-width: 40px; padding: 4px 6px; text-shadow: none; border: 1px solid transparent; border-radius: 3px; transition: none; }
menu menuitem:hover, menu menuitem:active, .menu menuitem:hover, .menu menuitem:active, .context-menu menuitem:hover, .context-menu menuitem:active { background-color: #75ff25; color: #2a4606; }
@ -946,7 +926,7 @@ switch:checked { color: #2a4606; background-color: #75ff25; }
switch:disabled { color: #7c675a; border-color: #595757; background-color: #493e37; text-shadow: none; }
switch slider { margin: 1px; min-width: 24px; min-height: 24px; border: 1px solid transparent; border-radius: 50%; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-outline-radius: 20px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5), inset 0 4px 3px 0px rgba(255, 255, 255, 0.3), inset 0 -4px 3px 0px rgba(0, 0, 0, 0.5), 0 4px 4px -2px rgba(0, 0, 0, 0.5); border: none; background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; }
switch slider { margin: 1px; min-width: 24px; min-height: 24px; border: 1px solid transparent; border-radius: 50%; transition: none; -gtk-outline-radius: 20px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5), inset 0 4px 3px 0px rgba(255, 255, 255, 0.3), inset 0 -4px 3px 0px rgba(0, 0, 0, 0.5), 0 4px 4px -2px rgba(0, 0, 0, 0.5); border: none; background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; }
switch slider:hover, switch slider:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-effect: highlight; }
@ -1117,7 +1097,7 @@ progressbar.horizontal progress { margin: 0 -1px; }
progressbar.vertical progress { margin: -1px 0; }
progressbar:backdrop { box-shadow: none; transition: 200ms ease-out; }
progressbar:backdrop { box-shadow: none; transition: none; }
progressbar progress { border-radius: 1.5px; }
@ -1197,27 +1177,19 @@ actionbar > revealer > box:backdrop { border-color: #545252; }
scrolledwindow viewport.frame { border-style: none; }
scrolledwindow overshoot.top { background-image: radial-gradient(farthest-side at top, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at top, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.top { background-image: radial-gradient(ellipse farthest-side at top, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 100% 10%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.top:backdrop { background-image: radial-gradient(farthest-side at top, #75ff25 85%, rgba(117, 255, 37, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.bottom { background-image: radial-gradient(ellipse farthest-side at bottom, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 100% 10%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at bottom, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.left { background-image: radial-gradient(ellipse farthest-side at left, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 10% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.bottom:backdrop { background-image: radial-gradient(farthest-side at bottom, #75ff25 85%, rgba(117, 255, 37, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.left { background-image: radial-gradient(farthest-side at left, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at left, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.left:backdrop { background-image: radial-gradient(farthest-side at left, #75ff25 85%, rgba(117, 255, 37, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.right { background-image: radial-gradient(farthest-side at right, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at right, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.right:backdrop { background-image: radial-gradient(farthest-side at right, #75ff25 85%, rgba(117, 255, 37, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.right { background-image: radial-gradient(ellipse farthest-side at right, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 10% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #595757 1px, transparent 1px) 0 0 0 1/0 1px stretch; background-color: #393838; }
scrolledwindow junction:dir(rtl) { border-image-slice: 0 1 0 0; }
scrolledwindow junction:backdrop { border-image-source: linear-gradient(to bottom, #545252 1px, transparent 1px); background-color: #373636; transition: 200ms ease-out; }
scrolledwindow junction:backdrop { border-image-source: linear-gradient(to bottom, #545252 1px, transparent 1px); background-color: #373636; transition: none; }
separator { background-color: rgba(255, 255, 255, 0.1); min-width: 1px; min-height: 1px; }
@ -1228,7 +1200,7 @@ list:backdrop { color: #c8cbcf; background-color: #353535; border-color: #545252
list row { padding: 2px; }
row { transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid transparent; }
row { transition: none; border: 1px solid transparent; }
row.activatable:hover, row.activatable:active, row.activatable:selected, row.activatable.has-open-popup { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
@ -1271,7 +1243,7 @@ row.activatable:disabled:disabled, row.activatable:disabled:disabled:checked, ro
/********************* App Notifications * */
.app-notification, .app-notification.frame { padding: 10px; border-radius: 0 0 5px 5px; background-color: rgba(32, 61, 121, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-clip: padding-box; }
.app-notification:backdrop, .app-notification.frame:backdrop { background-image: none; transition: 200ms ease-out; }
.app-notification:backdrop, .app-notification.frame:backdrop { background-image: none; transition: none; }
.app-notification border, .app-notification.frame border { border: none; }
@ -1333,7 +1305,7 @@ stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar
stacksidebar.sidebar:dir(rtl) list, stacksidebar.sidebar.right list, .sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { border-left: 1px solid #595757; border-right-style: none; }
.sidebar:backdrop { background-color: #3a3939; border-color: #545252; transition: 200ms ease-out; }
.sidebar:backdrop { background-color: #3a3939; border-color: #545252; transition: none; }
.sidebar list { background-color: transparent; }
@ -1482,6 +1454,8 @@ colorswatch overlay:hover:checked:hover, colorswatch overlay:hover:checked:hover
colorswatch overlay:hover:disabled, colorswatch overlay:hover:disabled:checked, colorswatch overlay:hover:disabled:selected, colorswatch overlay:hover:disabled.has-open-popup { color: #7c675a; background-color: #493e37; }
colorswatch overlay:hover, colorswatch overlay:hover:selected { background-color: transparent; }
colorswatch#add-color-button { border-radius: 5px 5px 0 0; }
colorswatch#add-color-button:only-child { border-radius: 5px; }
@ -1504,6 +1478,8 @@ colorswatch#add-color-button overlay:checked:hover, colorswatch#add-color-button
colorswatch#add-color-button overlay:disabled, colorswatch#add-color-button overlay:disabled:checked, colorswatch#add-color-button overlay:disabled:selected, colorswatch#add-color-button overlay:disabled.has-open-popup { color: #7c675a; background-color: #493e37; }
colorswatch#add-color-button overlay, colorswatch#add-color-button overlay:selected { background-color: transparent; }
colorswatch:disabled { opacity: 0.5; }
colorswatch:disabled overlay { border-color: #493e37; box-shadow: none; }
@ -1526,7 +1502,7 @@ colorchooser .popover.osd { border-radius: 5px; }
/********************** Window Decorations * */
decoration { border-radius: 6px 6px 0 0; border-width: 0px; box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.7), 0 0 5px 1px #75ff25, 0 3px 6px 2px rgba(0, 0, 0, 0); margin: 10px; }
decoration:backdrop { box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.5), 0 3px 6px 2px rgba(0, 0, 0, 0.7); transition: 200ms ease-out; }
decoration:backdrop { box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.5), 0 3px 6px 2px rgba(0, 0, 0, 0.7); transition: none; }
.maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
@ -1580,7 +1556,7 @@ button.titlebutton.close:not(:backdrop):disabled, button.titlebutton.close:not(:
/********************** Touch Copy & Paste * */
/********************** Touch Copy & Paste * */
cursor-handle { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); border: 1px solid #666464; border-radius: 100%; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); border: 1px solid #666464; border-radius: 100%; transition: none; transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle:hover, cursor-handle:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-effect: highlight; }
@ -1624,7 +1600,7 @@ cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) { border-radius: 5px 1
.keycap { min-width: 20px; min-height: 25px; margin-top: 2px; padding-bottom: 3px; padding-left: 6px; padding-right: 6px; color: #EDF0F5; background-color: #323232; border: 1px solid; border-color: #595757; border-radius: 5px; box-shadow: inset 0 -3px #494848; font-size: smaller; }
.keycap:backdrop { background-color: #353535; color: #96979a; transition: 200ms ease-out; }
.keycap:backdrop { background-color: #353535; color: #96979a; transition: none; }
:not(decoration):not(window):drop(active):focus, :not(decoration):not(window):drop(active) { border-color: #33d17a; box-shadow: inset 0 0 0 1px #33d17a; caret-color: #33d17a; }
@ -1668,7 +1644,7 @@ popover.emoji-completion contents row box { padding: 2px 10px; }
popover.emoji-completion .emoji:hover { background: #4c4b4b; }
undershoot { background-repeat: no-repeat; background-clip: border-box; background-image: image(alpha(#4384b3,0.3)); }
undershoot { background-repeat: no-repeat; background-clip: border-box; background-image: image(alpha(#75ff25,0.3)); }
undershoot.top { background-size: 100% 0.5em; background-position: top; }

70
gtk-4.0/gtk.css
View file

@ -137,7 +137,7 @@ spinner:checked:disabled { opacity: 0.5; color: #7c675a; }
.caption { font-weight: 400; font-size: 9pt; }
/**************** Text Entries * */
spinbutton.vertical > text, spinbutton:not(.vertical), entry, .entry { min-height: 32px; padding-left: 1px; padding-right: 1px; border: 1px solid; border-radius: 0px; border-spacing: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 0 transparent; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
spinbutton.vertical > text, spinbutton:not(.vertical), entry, .entry { min-height: 30px; padding-left: 1px; padding-right: 1px; border: 0px none; border-radius: 0px; border-spacing: 6px; transition: none; color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px rgba(117, 255, 37, 0); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
spinbutton.vertical > text, spinbutton:not(.vertical), entry, .entry { outline: 0 solid transparent; outline-offset: 4px; }
@ -151,7 +151,7 @@ spinbutton.vertical > text > text > block-cursor, spinbutton:not(.vertical) > te
spinbutton.vertical > text.flat, spinbutton.flat:not(.vertical), entry.flat:focus-within, entry.flat:backdrop, entry.flat:disabled, entry.flat, .entry.flat:focus-within, .entry.flat:backdrop, .entry.flat:disabled, .entry.flat { min-height: 0; padding-top: 2px; padding-bottom: 2px; background-color: transparent; border-color: transparent; border-radius: 0; }
spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within, .entry:focus-within { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #75ff25; }
spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within, .entry:focus-within { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #75ff25; }
spinbutton.vertical > text:focus-within > placeholder, spinbutton:focus-within:not(.vertical) > placeholder, entry:focus-within > placeholder, .entry:focus-within > placeholder { opacity: 0; /* We hide placeholders on focus */ }
@ -167,7 +167,7 @@ spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error,
spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not(.vertical), entry.error:focus-within, .entry.error:focus-within { outline-color: rgba(204, 0, 0, 0.5); outline-width: 2px; outline-offset: -2px; }
spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not(.vertical), entry.error:focus-within, .entry.error:focus-within { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #CC0000; }
spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not(.vertical), entry.error:focus-within, .entry.error:focus-within { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #CC0000; }
spinbutton.vertical > text.error > selection, spinbutton.error:not(.vertical) > selection, entry.error > selection, .entry.error > selection { background-color: #CC0000; }
@ -177,7 +177,7 @@ spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.war
spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within, .entry.warning:focus-within { outline-color: rgba(245, 121, 0, 0.5); outline-width: 2px; outline-offset: -2px; }
spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within, .entry.warning:focus-within { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #f57900; }
spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within, .entry.warning:focus-within { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #f57900; }
spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection, .entry.warning > selection { background-color: #f57900; }
@ -191,9 +191,9 @@ spinbutton.vertical > text.password image.caps-lock-indicator, spinbutton.passwo
spinbutton.vertical > text:drop(active), spinbutton:drop(active):not(.vertical), entry:drop(active):focus-within, entry:drop(active), .entry:drop(active):focus-within, .entry:drop(active) { border-color: #33d17a; box-shadow: inset 0 0 0 1px #33d17a; }
.osd spinbutton.vertical > text, .osd spinbutton:not(.vertical), .osd entry, .osd .entry { color: #66cbec; border-color: #66cbec; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px _button_hilight_color(#3f3e3e); -gtk-icon-shadow: 0 1px black; }
.osd spinbutton.vertical > text, .osd spinbutton:not(.vertical), .osd entry, .osd .entry { color: #66cbec; border-color: #66cbec; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px rgba(117, 255, 37, 0); -gtk-icon-shadow: 0 1px black; }
.osd spinbutton.vertical > text:focus-within, .osd spinbutton:focus-within:not(.vertical), .osd entry:focus-within, .osd .entry:focus-within { color: #66cbec; border-color: #75ff25; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px _button_hilight_color(#3f3e3e); }
.osd spinbutton.vertical > text:focus-within, .osd spinbutton:focus-within:not(.vertical), .osd entry:focus-within, .osd .entry:focus-within { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #75ff25; color: #66cbec; border-color: #75ff25; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; }
.osd spinbutton.vertical > text:disabled, .osd spinbutton:disabled:not(.vertical), .osd entry:disabled, .osd .entry:disabled { color: #4384b3; border-color: #66cbec; background-color: rgba(39, 75, 133, 0.5); background-clip: padding-box; }
@ -201,16 +201,12 @@ spinbutton.vertical > text > progress, spinbutton:not(.vertical) > progress, ent
spinbutton.vertical > text progress > trough > progress, spinbutton:not(.vertical) progress > trough > progress, entry progress > trough > progress, .entry progress > trough > progress { background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #75ff25; border-style: solid; box-shadow: none; }
spinbutton.vertical.linked:not(.vertical) > text:drop(active) + text, spinbutton.vertical.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + text, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + menubutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + menubutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + dropdown > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + dropdown > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + colorbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + colorbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + fontbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + fontbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + filechooserbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + menubutton > button, .linked:not(.vertical) > entry:drop(active) + dropdown > button, .linked:not(.vertical) > entry:drop(active) + colorbutton > button, .linked:not(.vertical) > entry:drop(active) + fontbutton > button, .linked:not(.vertical) > entry:drop(active) + filechooserbutton > button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + .entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + .entry, .linked:not(.vertical) > .entry:drop(active) + button, .linked:not(.vertical) > .entry:drop(active) + menubutton > button, .linked:not(.vertical) > .entry:drop(active) + dropdown > button, .linked:not(.vertical) > .entry:drop(active) + colorbutton > button, .linked:not(.vertical) > .entry:drop(active) + fontbutton > button, .linked:not(.vertical) > .entry:drop(active) + filechooserbutton > button, .linked:not(.vertical) > .entry:drop(active) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > entry:drop(active) + text, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > entry:drop(active) + .entry, spinbutton.vertical.linked:not(.vertical) > .entry:drop(active) + text, .linked:not(.vertical) > .entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > .entry:drop(active) + entry, .linked:not(.vertical) > .entry:drop(active) + .entry { border-left-color: #33d17a; }
spinbutton.vertical.linked > text:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + text:not(:disabled), spinbutton.vertical.linked > spinbutton:not(:disabled):not(.vertical) + text:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), spinbutton.vertical.linked > entry:not(:disabled) + text:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > .entry:not(:disabled) + entry:not(:disabled), spinbutton.vertical.linked > .entry:not(:disabled) + text:not(:disabled), .linked.vertical > .entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #3e3d3d; }
spinbutton.vertical.linked > text:disabled + text:disabled, spinbutton.vertical.linked > spinbutton:disabled:not(.vertical) + text:disabled, spinbutton.vertical.linked > text:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > text:disabled + entry:disabled, .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, spinbutton.vertical.linked > entry:disabled + text:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > entry:disabled + entry:disabled, spinbutton.vertical.linked > .entry:disabled + text:disabled, .linked.vertical > .entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > .entry:disabled + entry:disabled { border-top-color: #3e3d3d; }
spinbutton.vertical.linked > text + text:drop(active):not(:only-child), spinbutton.vertical.linked > spinbutton:not(.vertical) + text:drop(active):not(:only-child), spinbutton.vertical.linked > text + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > text + entry:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), spinbutton.vertical.linked > entry + text:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > entry + entry:drop(active):not(:only-child), spinbutton.vertical.linked > .entry + text:drop(active):not(:only-child), .linked.vertical > .entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > .entry + entry:drop(active):not(:only-child) { border-top-color: #33d17a; }
spinbutton.vertical.linked > text:drop(active):not(:only-child) + text, spinbutton.vertical.linked > spinbutton:drop(active):not(:only-child):not(.vertical) + text, spinbutton.vertical.linked > text:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked > text:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, spinbutton.vertical.linked > text:drop(active):not(:only-child) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + menubutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + menubutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + dropdown > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + dropdown > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + colorbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + fontbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + combobox > box > button.combo, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked > entry:drop(active):not(:only-child) + text, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + menubutton > button, .linked.vertical > entry:drop(active):not(:only-child) + dropdown > button, .linked.vertical > entry:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo, spinbutton.vertical.linked > .entry:drop(active):not(:only-child) + text, .linked.vertical > .entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > .entry:drop(active):not(:only-child) + entry, .linked.vertical > .entry:drop(active):not(:only-child) + button, .linked.vertical > .entry:drop(active):not(:only-child) + menubutton > button, .linked.vertical > .entry:drop(active):not(:only-child) + dropdown > button, .linked.vertical > .entry:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > .entry:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > .entry:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > .entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #33d17a; }
spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error, .entry.error { color: #CC0000; }
treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { background-color: #323232; transition-property: color, background; }
@ -220,13 +216,13 @@ treeview entry.flat, treeview entry { border-radius: 0; background-image: none;
treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #75ff25; }
/******************* Editable Labels * */
editablelabel > stack > text { color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 0 transparent; }
editablelabel > stack > text { color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px rgba(117, 255, 37, 0); }
/****************************************************** Buttons * */
@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #f57900 0%, rgba(245, 121, 0, 0) 0%); }
to { background-image: radial-gradient(farthest-side, #f57900 95%, rgba(245, 121, 0, 0)); } }
button.sidebar-button, dnd tab, tabbar tab, notebook > header tabs > tab, notebook > header tabbar tabbox > tabboxchild, tabbar notebook > header tabbox > tabboxchild, notebook > header > tabs > arrow, columnview.view > header > button, treeview.view > header > button, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 3px; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); margin: 1px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
button.sidebar-button, dnd tab, tabbar tab, notebook > header tabs > tab, notebook > header tabbar tabbox > tabboxchild, tabbar notebook > header tabbox > tabboxchild, notebook > header > tabs > arrow, columnview.view > header > button, treeview.view > header > button, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 3px; transition: none; margin: 1px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
dnd tab:hover, tabbar tab:hover, notebook > header tabs > tab:hover, notebook > header tabbar tabbox > tabboxchild:hover, tabbar notebook > header tabbox > tabboxchild:hover, notebook > header > tabs > arrow:hover, columnview.view > header > button:hover, treeview.view > header > button:hover, dnd tab:focus, tabbar tab:focus, notebook > header tabs > tab:focus, notebook > header tabbar tabbox > tabboxchild:focus, tabbar notebook > header tabbox > tabboxchild:focus, notebook > header > tabs > arrow:focus, columnview.view > header > button:focus, treeview.view > header > button:focus, button:hover, button:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-filter: brightness(1.2); }
@ -540,7 +536,7 @@ searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0
searchbar > revealer > box { border-style: solid; border-color: #595757; background-color: #474646; }
searchbar > revealer > box:backdrop { border-color: #545252; background-color: #464545; box-shadow: none; transition: 200ms ease-out; }
searchbar > revealer > box:backdrop { border-color: #545252; background-color: #464545; box-shadow: none; transition: none; }
/************** GtkInfoBar * */
infobar > revealer > box { padding: 8px; border-spacing: 12px; }
@ -599,7 +595,7 @@ windowcontrols button > image { background-color: unset; }
/*************** Header bars * */
.titlebar:not(headerbar), headerbar, windowhandle { padding: 0 0px; min-height: 46px; border-width: 0 0 1px; border-style: solid; border-color: #6d6c6c; border-radius: 0; background: #3f3e3e linear-gradient(to top, black, #3a3939 7%, #424141 93%, #8c8a8a 100%); color: #EDF0F5; /* Darken switchbuttons for headerbars. issue #1588 */ }
.titlebar:backdrop:not(headerbar), headerbar:backdrop, windowhandle:backdrop { border-color: #545252; background-color: #3f3e3e; color: #EDF0F5; background-image: none; transition: 200ms ease-out; }
.titlebar:backdrop:not(headerbar), headerbar:backdrop, windowhandle:backdrop { border-color: #545252; background-color: #3f3e3e; color: #EDF0F5; background-image: none; transition: none; }
.titlebar:not(headerbar) .title, headerbar .title, windowhandle .title { padding-left: 12px; padding-right: 12px; font-weight: bold; }
@ -892,9 +888,9 @@ notebook > header tabs > tab button.flat:first-child, notebook > header dnd tab
tabbar .box { background-color: #373636; color: #EDF0F5; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.36); padding: 1px; padding-top: 0; }
tabbar .box:backdrop { background-color: #3f3e3e; transition: background-color 200ms ease-out; }
tabbar .box:backdrop { background-color: #3f3e3e; transition: background-color none; }
tabbar .box:backdrop > scrolledwindow, tabbar .box:backdrop > .start-action, tabbar .box:backdrop > .end-action { transition: filter 200ms ease-out; }
tabbar .box:backdrop > scrolledwindow, tabbar .box:backdrop > .start-action, tabbar .box:backdrop > .end-action { transition: filter none; }
tabbar tabbox { padding: 2px; }
@ -1022,7 +1018,7 @@ switch:checked { color: #2a4606; background-color: #61a538; }
switch:disabled { color: #7c675a; border-color: #595757; background-color: #493e37; text-shadow: none; }
switch > slider { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); margin: 1px; min-width: 24px; min-height: 24px; border: 1px solid transparent; border-radius: 50%; }
switch > slider { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; transition: none; margin: 1px; min-width: 24px; min-height: 24px; border: 1px solid transparent; border-radius: 50%; }
switch > slider:hover, switch > slider:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-filter: brightness(1.2); }
@ -1295,13 +1291,13 @@ scrolledwindow > .view:dir(ltr), scrolledwindow > iconview:dir(ltr) { padding-ri
scrolledwindow > .view:dir(rtl), scrolledwindow > iconview:dir(rtl) { padding-left: 1em; }
scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at top, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.top { background-image: radial-gradient(ellipse farthest-side at top, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 100% 10%; 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, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at bottom, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.bottom { background-image: radial-gradient(ellipse farthest-side at bottom, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 100% 10%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.left { background-image: radial-gradient(farthest-side at left, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at left, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.left { background-image: radial-gradient(ellipse farthest-side at left, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 10% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.right { background-image: radial-gradient(farthest-side at right, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at right, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.right { background-image: radial-gradient(ellipse farthest-side at right, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 10% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > junction { background: #595757, linear-gradient(to bottom, transparent 1px, #393838 1px), linear-gradient(to right, transparent 1px, #393838 1px); }
@ -1322,7 +1318,7 @@ 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: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid transparent; }
row { transition: none; border: 1px solid transparent; }
row.activatable:hover, row.activatable:active, row.activatable:selected, row.activatable.has-open-popup { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
@ -1600,6 +1596,8 @@ colorswatch.activatable:hover > overlay:checked:hover, colorswatch.activatable:h
colorswatch.activatable:hover > overlay:disabled, colorswatch.activatable:hover > overlay:disabled:checked, colorswatch.activatable:hover > overlay:disabled:selected, colorswatch.activatable:hover > overlay:disabled.has-open-popup { color: #7c675a; background-color: #493e37; }
colorswatch.activatable:hover > overlay, colorswatch.activatable:hover > overlay:selected { background-color: transparent; }
colorswatch#add-color-button { border-radius: 5px 0 0 5px; }
colorswatch#add-color-button:only-child { border-radius: 5px; }
@ -1622,6 +1620,28 @@ colorswatch#add-color-button > overlay:checked:hover, colorswatch#add-color-butt
colorswatch#add-color-button > overlay:disabled, colorswatch#add-color-button > overlay:disabled:checked, colorswatch#add-color-button > overlay:disabled:selected, colorswatch#add-color-button > overlay:disabled.has-open-popup { color: #7c675a; background-color: #493e37; }
colorswatch#add-color-button > overlay, colorswatch#add-color-button > overlay:selected { background-color: transparent; }
colorswatch#add-color-button.activatable:hover > overlay { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
colorswatch#add-color-button.activatable:hover > overlay:hover, colorswatch#add-color-button.activatable:hover > overlay:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-filter: brightness(1.2); }
colorswatch#add-color-button.activatable:hover > overlay:hover, colorswatch#add-color-button.activatable:hover > overlay:hover image, colorswatch#add-color-button.activatable:hover > overlay:hover arrow, colorswatch#add-color-button.activatable:hover > overlay:focus, colorswatch#add-color-button.activatable:hover > overlay:focus image, colorswatch#add-color-button.activatable:hover > overlay:focus arrow { -gtk-icon-shadow: 0 0 5px currentColor; }
colorswatch#add-color-button.activatable:hover > overlay:active, colorswatch#add-color-button.activatable:hover > overlay.keyboard-activating { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5); }
colorswatch#add-color-button.activatable:hover > overlay:checked, colorswatch#add-color-button.activatable:hover > overlay:selected, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup { background-color: #434343; color: #75ff25; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), 0 10px 3px -9px alpha(currentColor,0.3); text-shadow: 0 0 3px currentColor; }
colorswatch#add-color-button.activatable:hover > overlay:checked, colorswatch#add-color-button.activatable:hover > overlay:checked image, colorswatch#add-color-button.activatable:hover > overlay:checked arrow, colorswatch#add-color-button.activatable:hover > overlay:selected, colorswatch#add-color-button.activatable:hover > overlay:selected image, colorswatch#add-color-button.activatable:hover > overlay:selected arrow, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup image, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup arrow { -gtk-icon-shadow: 0 0 3px currentColor; }
colorswatch#add-color-button.activatable:hover > overlay:checked:hover, colorswatch#add-color-button.activatable:hover > overlay:checked:focus, colorswatch#add-color-button.activatable:hover > overlay:selected:hover, colorswatch#add-color-button.activatable:hover > overlay:selected:focus, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:hover, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:focus { text-shadow: 0 0 3px currentColor, 0 0 5px currentColor; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), 0 10px 3px -9px alpha(currentColor,0.5); }
colorswatch#add-color-button.activatable:hover > overlay:checked:hover, colorswatch#add-color-button.activatable:hover > overlay:checked:hover image, colorswatch#add-color-button.activatable:hover > overlay:checked:hover arrow, colorswatch#add-color-button.activatable:hover > overlay:checked:focus, colorswatch#add-color-button.activatable:hover > overlay:checked:focus image, colorswatch#add-color-button.activatable:hover > overlay:checked:focus arrow, colorswatch#add-color-button.activatable:hover > overlay:selected:hover, colorswatch#add-color-button.activatable:hover > overlay:selected:hover image, colorswatch#add-color-button.activatable:hover > overlay:selected:hover arrow, colorswatch#add-color-button.activatable:hover > overlay:selected:focus, colorswatch#add-color-button.activatable:hover > overlay:selected:focus image, colorswatch#add-color-button.activatable:hover > overlay:selected:focus arrow, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:hover, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:hover image, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:hover arrow, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:focus, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:focus image, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:focus arrow { -gtk-icon-shadow: 0 0 3px currentColor, 0 0 5px currentColor; }
colorswatch#add-color-button.activatable:hover > overlay:disabled, colorswatch#add-color-button.activatable:hover > overlay:disabled:checked, colorswatch#add-color-button.activatable:hover > overlay:disabled:selected, colorswatch#add-color-button.activatable:hover > overlay:disabled.has-open-popup { color: #7c675a; background-color: #493e37; }
colorswatch#add-color-button.activatable:hover > overlay, colorswatch#add-color-button.activatable:hover > overlay:selected { background-color: transparent; }
colorswatch:disabled { opacity: 0.5; background-color: #493e37; color: #7c675a; }
row:selected colorswatch { box-shadow: 0 0 0 2px #2a4606; }
@ -1654,7 +1674,7 @@ window { border-width: 0px; }
window.csd { box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.7), 0 0 5px 1px #75ff25, 0 3px 6px 2px rgba(0, 0, 0, 0); margin: 0px; border-radius: 6px 6px 0 0; }
window.csd:backdrop { box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.5), 0 3px 6px 2px rgba(0, 0, 0, 0.7); transition: 200ms ease-out; }
window.csd:backdrop { box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.5), 0 3px 6px 2px rgba(0, 0, 0, 0.7); transition: none; }
window.csd.popup { border-radius: 5px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(117, 255, 37, 0.9); }
@ -1680,7 +1700,7 @@ tooltip.csd { border-radius: 5px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.7); }
/********************** Touch Copy & Paste * */
/********************** Touch Copy & Paste * */
cursor-handle { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); border: 1px solid #666464; border-radius: 100%; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); border: 1px solid #666464; border-radius: 100%; transition: none; transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle:hover, cursor-handle:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-filter: brightness(1.2); }
@ -1784,7 +1804,7 @@ menubutton arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
menubutton arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
undershoot { background-repeat: no-repeat; background-clip: border-box; background-image: image(alpha(#4384b3,0.3)); }
undershoot { background-repeat: no-repeat; background-clip: border-box; background-image: image(alpha(#75ff25,0.3)); }
undershoot.top { background-size: 100% 0.5em; background-position: top; }

1
source/common/common_colors.scss
View file

@ -49,6 +49,7 @@ $sidebar_bg_color: mix($bg_color, $base_color, 50%);
$tooltip_borders_color: $hint_fg;
$undershoot_color: $selected_bg_color;
$drop_target_color: $success_color;

5
source/common/common_common.scss
View file

@ -30,9 +30,9 @@ $_switch_margin: if($_sizevariant=='default', 10px, 7px);
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$asset_suffix: if($variant=='dark', '-dark', '');
$backdrop_transition: 200ms ease-out;
$backdrop_transition: none; //200ms ease-out;
$button_transition: all 20ms $ease-out-quad;
$button_transition: none; //all 20ms $ease-out-quad;
// radii
@ -60,6 +60,7 @@ $text_shadow_lighted: 0 0 5px currentColor;
// -------------------- Functions and mixins

21
source/common/overshoot.scss
View file

@ -1,4 +1,4 @@
@mixin overshoot($p, $t:normal, $c:$selected_bg_color) {
@mixin overshoot($p, $t:normal, $c:$warning_color) {
//
// overshoot
//
@ -13,7 +13,7 @@
// normal, backdrop
//
$_small_gradient_length: 3%;
$_small_gradient_length: 10%;
$_big_gradient_length: 50%;
$_small_gradient_size: 100% $_small_gradient_length;
@ -27,24 +27,19 @@
$_small_gradient_color: $c;
$_big_gradient_color: transparentize($c, 0.93);
@if $c==$fg_color {
$_small_gradient_color: darken($borders_color, 10%);
$_big_gradient_color: transparentize($fg_color, 0.93);
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
}
$_small_gradient: radial-gradient(farthest-side at $p,
$_small_gradient_color 85%,
$_small_gradient: radial-gradient( ellipse farthest-side at $p,
$_small_gradient_color 35%,
transparentize($_small_gradient_color, 1));
$_big_gradient: radial-gradient(farthest-side at $p,
$_big_gradient: radial-gradient(ellipse at $p, //closest-side at $p,
$_big_gradient_color,
transparentize($_big_gradient_color, 1));
@if $t==normal {
background-image: $_small_gradient, $_big_gradient;
background-size: $_small_gradient_size, $_big_gradient_size;
background-image: $_small_gradient;//, $_big_gradient;
background-size: $_small_gradient_size;//, $_big_gradient_size;
}
@else if $t==backdrop {

2
source/common/row.scss
View file

@ -1,5 +1,5 @@
row {
transition: all 500ms $ease-out-quad;
transition: $button_transition;// all 500ms $ease-out-quad;
border: 1px solid transparent;
//&:hover { transition: none; }

2
source/common/undershoot.scss
View file

@ -1,6 +1,6 @@
undershoot {
$undershoot_color: mix($hint_bg, $hint_fg, 50%);
background-repeat: no-repeat;
background-clip: border-box;
background-image: image(gtkalpha($undershoot_color, 0.3));

85
source/gtk3/_common.scss
View file

@ -309,9 +309,9 @@ entry {
min-height: $_entry_height;
padding-left: 1px;
padding-right: 1px;
border: 1px solid;
border: 0px none;
border-radius: $entry_radius;
transition: all 200ms $ease-out-quad;
transition: none; //all 200ms $ease-out-quad;
@include entry(normal);
@ -371,7 +371,7 @@ entry {
&:active { color: $selected_bg_color; }
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
//&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
}
&:drop(active) {
@ -386,7 +386,7 @@ entry {
&:focus { @include entry(osd-focus); }
&:backdrop { @include entry(osd-backdrop); }
//&:backdrop { @include entry(osd-backdrop); }
&:disabled { @include entry(osd-insensitive); }
}
@ -412,17 +412,17 @@ entry {
&:dir(rtl), &:dir(ltr) {border-radius:$entry_radius;} //breaking roundness if present, added for square theme. All this to get equal specificity!
}
}
.linked:not(.vertical) > &:focus + &,
.linked:not(.vertical) > &:focus + button,
.linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); }
// .linked:not(.vertical) > &:focus + &,
// .linked:not(.vertical) > &:focus + button,
// .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); }
.linked:not(.vertical) > &:focus.error + &,
.linked:not(.vertical) > &:focus.error + button,
.linked:not(.vertical) > &:focus.error + combobox > box > button.combo { border-left-color: entry_focus_border($error_color); }
// .linked:not(.vertical) > &:focus.error + &,
// .linked:not(.vertical) > &:focus.error + button,
// .linked:not(.vertical) > &:focus.error + combobox > box > button.combo { border-left-color: entry_focus_border($error_color); }
.linked:not(.vertical) > &:drop(active) + &,
.linked:not(.vertical) > &:drop(active) + button,
.linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
// .linked:not(.vertical) > &:drop(active) + &,
// .linked:not(.vertical) > &:drop(active) + button,
// .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
// Vertically linked entries
// FIXME: take care of "colored" entries
@ -434,7 +434,7 @@ entry {
&:not(:disabled) + %entry:not(:disabled) {
border-top-color: mix($borders_color, $base_color, 30%);
&:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); }
//&:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); }
}
// brighter border between linked insensitive entries
@ -454,26 +454,26 @@ entry {
// this takes care of coloring the top border of the focused entry subsequent widget.
// :not(:only-child) is a specificity bump hack.
&:focus:not(:only-child) {
+ %entry,
+ entry,
+ button,
+ combobox > box > button.combo { border-top-color: entry_focus_border(); }
}
// &:focus:not(:only-child) {
// + %entry,
// + entry,
// + button,
// + combobox > box > button.combo { border-top-color: entry_focus_border(); }
// }
&:focus.error:not(:only-child) {
+ %entry,
+ entry,
+ button,
+ combobox > box > button.combo { border-top-color: entry_focus_border($error_color); }
}
// &:focus.error:not(:only-child) {
// + %entry,
// + entry,
// + button,
// + combobox > box > button.combo { border-top-color: entry_focus_border($error_color); }
// }
&:drop(active):not(:only-child) {
+ %entry,
+ entry,
+ button,
+ combobox > box > button.combo { border-top-color: $drop_target_color; }
}
// &:drop(active):not(:only-child) {
// + %entry,
// + entry,
// + button,
// + combobox > box > button.combo { border-top-color: $drop_target_color; }
// }
}
&.error { color: $error_color; }
@ -526,11 +526,11 @@ treeview entry {
background-color: lighten($_entry_tag_bg, 10%);
}
:backdrop & {
color: $backdrop_base_color;
background-color: if($variant=='light', $selected_bg_color,
mix($backdrop_fg_color, $backdrop_base_color, 50%));
}
// :backdrop & {
// color: $backdrop_base_color;
// background-color: if($variant=='light', $selected_bg_color,
// mix($backdrop_fg_color, $backdrop_base_color, 50%));
// }
&.button {
background-color: transparent;
@ -2279,25 +2279,25 @@ scrolledwindow {
&.top {
@include overshoot(top);
&:backdrop { @include overshoot(top, backdrop); }
//&:backdrop { @include overshoot(top, backdrop); }
}
&.bottom {
@include overshoot(bottom);
&:backdrop { @include overshoot(bottom, backdrop); }
//&:backdrop { @include overshoot(bottom, backdrop); }
}
&.left {
@include overshoot(left);
&:backdrop { @include overshoot(left, backdrop); }
//&:backdrop { @include overshoot(left, backdrop); }
}
&.right {
@include overshoot(right);
&:backdrop { @include overshoot(right, backdrop); }
//&:backdrop { @include overshoot(right, backdrop); }
}
}
@ -2913,6 +2913,7 @@ colorswatch {
//box-shadow: inset 0 1px transparentize(white, 0.6),
// inset 0 -1px transparentize(black, 0.8);
@include button();
&, &:selected {background-color: transparent;}
}
}
@ -2923,7 +2924,7 @@ colorswatch {
overlay {
@include button();
&, &:selected {background-color: transparent;}
}
}

20
source/gtk3/_drawing.scss
View file

@ -46,6 +46,11 @@ $gtk: 3;
// possible $t values:
// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop;
//
$entry_focus_inner_bs: inset 0 -8px 4px -6px $fc;
$entry_hover_inner_bs: inset 0 -8px 4px -6px transparentize($fc, 0.5);
$entry_normal_inner_bs: inset 0 -8px 4px -6px transparentize($fc, 1);
$_entry_shadow: 0 1px 2px transparentize($shadow_hard_color, 0.6);
$_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1));
$_entry_edge: if($edge == none, none, _widget_edge($edge));
@ -55,14 +60,15 @@ $gtk: 3;
color: $text_color;
border-color: mix($text_color,$base_color, 20%);//$borders_color;
background-color: $base_color;
@include _shadows(inset shadow(normal), inset shadow(transparent));
@include _shadows($button_shadow_pressed, $entry_normal_inner_bs);
// for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
}
@if t==hover { //gtk apparently does not create :hover on entries!?!
border-color: gtkalpha($fc, 0.5);
@include _shadows($button_shadow_pressed, $entry_hover_inner_bs);
}
@if $t==focus {
@include _shadows(inset shadow(normal), inset shadow(glow-small, $fc));
@if $t==focus or $t==osd-focus {
@include _shadows($button_shadow_pressed, $entry_focus_inner_bs);
//border-color: entry_focus_border($fc);
}
@if $t==insensitive {
@ -78,9 +84,9 @@ $gtk: 3;
background-clip: padding-box;
-gtk-icon-shadow: 0 1px black;
}
@if $t==osd-focus {
@include _shadows(inset shadow(normal), inset shadow(glow, $osd_text_color));
}
// @if $t==osd-focus {
// @include _shadows(inset shadow(normal), inset shadow(glow, $osd_text_color));
// }
@if $t==osd-insensitive {
color: $osd_insensitive_fg_color;
border-color: mix($osd_borders_color, $osd_insensitive_bg_color);
@ -92,7 +98,7 @@ $gtk: 3;
border-color: $osd_borders_color;
background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
background-clip: padding-box;
box-shadow: none;
//box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none;
}

84
source/gtk3/gtk-new.css
View file

@ -109,7 +109,7 @@ spinner:checked:disabled { opacity: 0.5; color: #7c675a; }
.caption { font-weight: 400; font-size: 9pt; }
/**************** Text Entries * */
spinbutton:not(.vertical), entry { min-height: 28px; padding-left: 1px; padding-right: 1px; border: 1px solid; border-radius: 0px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 0 transparent; }
spinbutton:not(.vertical), entry { min-height: 28px; padding-left: 1px; padding-right: 1px; border: 0px none; border-radius: 0px; transition: none; color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px rgba(117, 255, 37, 0); }
spinbutton:not(.vertical) image.left, entry image.left { margin-right: 6px; }
@ -117,19 +117,19 @@ spinbutton:not(.vertical) image.right, entry image.right { margin-left: 6px; }
spinbutton.flat:not(.vertical), entry.flat:focus, entry.flat:backdrop, entry.flat:disabled, entry.flat { min-height: 0; padding: 2px; padding-left: 1px; padding-right: 1px; background-color: transparent; border-color: transparent; border-radius: 0; }
spinbutton:focus:not(.vertical), entry:focus { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #75ff25; }
spinbutton:focus:not(.vertical), entry:focus { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #75ff25; }
spinbutton:disabled:not(.vertical), entry:disabled { color: #7c675a; border-color: #635349; background-color: #493e37; }
spinbutton.error:not(.vertical), entry.error { color: #CC0000; border-color: #CC0000; }
spinbutton.error:focus:not(.vertical), entry.error:focus { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #CC0000; }
spinbutton.error:focus:not(.vertical), entry.error:focus { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #CC0000; }
spinbutton.error:not(.vertical) selection, entry.error selection { background-color: #CC0000; }
spinbutton.warning:not(.vertical), entry.warning { color: #f57900; border-color: #f57900; }
spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #f57900; }
spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #f57900; }
spinbutton.warning:not(.vertical) selection, entry.warning selection { background-color: #f57900; }
@ -139,15 +139,11 @@ spinbutton:not(.vertical) image:hover, entry image:hover { color: #EDF0F5; }
spinbutton:not(.vertical) image:active, entry image:active { color: #75ff25; }
spinbutton:not(.vertical) image:backdrop, entry image:backdrop { color: #838386; }
spinbutton:drop(active):not(.vertical), entry:drop(active):focus, entry:drop(active) { border-color: #33d17a; box-shadow: inset 0 0 0 1px #33d17a; }
.osd spinbutton:not(.vertical), .osd entry { border-color: rgba(54, 106, 157, 0.76); color: #66cbec; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; -gtk-icon-shadow: 0 1px black; }
.osd spinbutton:focus:not(.vertical), .osd entry:focus { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 3px 2px #66cbec; }
.osd spinbutton:backdrop:not(.vertical), .osd entry:backdrop { color: #66cbec; border-color: #66cbec; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; }
.osd spinbutton:focus:not(.vertical), .osd entry:focus { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #75ff25; }
.osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: #4384b3; border-color: rgba(86, 171, 210, 0.75); background-color: rgba(39, 75, 133, 0.5); background-clip: padding-box; }
@ -157,16 +153,8 @@ spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { backgroun
.linked:not(.vertical) > spinbutton:dir(rtl):not(.vertical), .linked:not(.vertical) > spinbutton:dir(ltr):not(.vertical), .linked:not(.vertical) > entry:dir(rtl), .linked:not(.vertical) > entry:dir(ltr), .linked:not(.vertical) > entry:first-child:dir(rtl), .linked:not(.vertical) > entry:first-child:dir(ltr), .linked:not(.vertical) > entry:last-child:dir(rtl), .linked:not(.vertical) > entry:last-child:dir(ltr), .linked:not(.vertical) > entry:only-child:dir(rtl), .linked:not(.vertical) > entry:only-child:dir(ltr) { border-radius: 0px; }
.linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + entry { border-left-color: #75ff25; }
.linked:not(.vertical) > spinbutton:focus.error:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus.error:not(.vertical) + button, .linked:not(.vertical) > spinbutton:focus.error:not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus.error:not(.vertical) + entry, .linked:not(.vertical) > entry:focus.error + button, .linked:not(.vertical) > entry:focus.error + combobox > box > button.combo, .linked:not(.vertical) > entry:focus.error + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus.error + entry { border-left-color: #CC0000; }
.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + entry { border-left-color: #33d17a; }
.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #3e3d3d; }
.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) { border-top-color: #3e3d3d; }
.linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > entry:disabled + entry:disabled { border-top-color: #3e3d3d; }
.linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > entry + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > entry + entry:focus:not(:only-child) { border-top-color: #75ff25; }
@ -175,12 +163,6 @@ spinbutton:not(.vertical) progress:backdrop, entry progress:backdrop { backgroun
.linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > entry + entry:drop(active):not(:only-child) { border-top-color: #33d17a; }
.linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > entry:focus:not(:only-child) + button, .linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo { border-top-color: #75ff25; }
.linked.vertical > spinbutton:focus.error:not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus.error:not(:only-child):not(.vertical) + entry, .linked.vertical > spinbutton:focus.error:not(:only-child):not(.vertical) + button, .linked.vertical > spinbutton:focus.error:not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > entry:focus.error:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:focus.error:not(:only-child) + entry, .linked.vertical > entry:focus.error:not(:only-child) + button, .linked.vertical > entry:focus.error:not(:only-child) + combobox > box > button.combo { border-top-color: #CC0000; }
.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #33d17a; }
spinbutton.error:not(.vertical), entry.error { color: #CC0000; }
treeview entry:focus:dir(rtl), treeview entry:focus:dir(ltr) { background-color: #323232; transition-property: color, background; }
@ -197,8 +179,6 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #75ff25; }
.entry-tag:hover { background-color: #aaabad; }
:backdrop .entry-tag { color: #353535; background-color: #656667; }
.entry-tag.button { background-color: transparent; color: rgba(50, 50, 50, 0.7); }
:not(:backdrop) .entry-tag.button:hover { border: 1px solid #909194; color: #323232; }
@ -209,7 +189,7 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #75ff25; }
@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#f57900), to(transparent)); }
to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#f57900), to(transparent)); } }
button.sidebar-button, expander title > arrow, notebook > header tabs > tab, notebook > header > tabs > arrow, treeview.view header button, modelbutton.flat arrow, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 3px; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); margin: 1px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
button.sidebar-button, expander title > arrow, notebook > header tabs > tab, notebook > header > tabs > arrow, treeview.view header button, modelbutton.flat arrow, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 3px; transition: none; margin: 1px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
expander title > arrow:hover, notebook > header tabs > tab:hover, notebook > header > tabs > arrow:hover, treeview.view header button:hover, modelbutton.flat arrow:hover, expander title > arrow:focus, notebook > header tabs > tab:focus, notebook > header > tabs > arrow:focus, treeview.view header button:focus, modelbutton.flat arrow:focus, button:hover, button:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-effect: highlight; }
@ -490,7 +470,7 @@ stacksidebar row.needs-attention > label:dir(rtl), expander title.stack-switcher
.linked.vertical > combobox:only-child > box > button.combo, .linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical > entry:only-child, expander title.linked.vertical > arrow:only-child, notebook > header tabs.linked.vertical > tab:only-child, notebook > header > tabs.linked.vertical > arrow:only-child, treeview.view header .linked.vertical > button:only-child, modelbutton.flat .linked.vertical > arrow:only-child, .linked.vertical > button:only-child { border-radius: 3px; -gtk-outline-radius: 3px; }
/* menu buttons */
modelbutton, .menuitem.button { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 3px; outline-offset: -2px; border: 1px solid; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
modelbutton, .menuitem.button { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 3px; outline-offset: -2px; border: 1px solid; transition: none; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
modelbutton:hover, modelbutton:focus, .menuitem.button:hover, .menuitem.button:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-effect: highlight; }
@ -598,12 +578,12 @@ searchbar > revealer > box { margin: -6px; padding: 6px; }
.inline-toolbar, searchbar > revealer > box, .location-bar { border-style: solid; border-color: #595757; background-color: #474646; }
.inline-toolbar:backdrop, searchbar > revealer > box:backdrop, .location-bar:backdrop { border-color: #545252; background-color: #464545; box-shadow: none; transition: 200ms ease-out; }
.inline-toolbar:backdrop, searchbar > revealer > box:backdrop, .location-bar:backdrop { border-color: #545252; background-color: #464545; box-shadow: none; transition: none; }
/*************** Header bars * */
.titlebar:not(headerbar), headerbar { padding: 0 6px; min-height: 40px; border-width: 0 0 1px; border-style: solid; border-color: #6d6c6c; border-radius: 0; color: #EDF0F5; background: #3f3e3e linear-gradient(to top, black, #3a3939 7%, #424141 93%, #8c8a8a 100%); /* Darken switchbuttons for headerbars. issue #1588 */ }
.titlebar:backdrop:not(headerbar), headerbar:backdrop { border-color: #545252; background: #3f3e3e linear-gradient(to top, black, #3a3939 7%, #424141 93%, #8c8a8a 100%); color: #EDF0F5; transition: 200ms ease-out; }
.titlebar:backdrop:not(headerbar), headerbar:backdrop { border-color: #545252; background: #3f3e3e linear-gradient(to top, black, #3a3939 7%, #424141 93%, #8c8a8a 100%); color: #EDF0F5; transition: none; }
.titlebar:not(headerbar) .title, headerbar .title { padding-left: 12px; padding-right: 12px; font-weight: bold; }
@ -776,7 +756,7 @@ treeview.view acceleditor > label { background-color: #75ff25; }
/********* Menus * */
menubar, .menubar { -GtkWidget-window-dragging: true; padding: 0px; }
menubar > menuitem, .menubar > menuitem { min-height: 16px; padding: 4px 8px; border: 1px solid transparent; border-radius: 3px; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
menubar > menuitem, .menubar > menuitem { min-height: 16px; padding: 4px 8px; border: 1px solid transparent; border-radius: 3px; transition: none; }
menubar > menuitem menu:dir(rtl), menubar > menuitem menu:dir(ltr), .menubar > menuitem menu:dir(rtl), .menubar > menuitem menu:dir(ltr) { border-radius: 0; padding: 0; }
@ -788,11 +768,11 @@ menubar .csd.popup decoration, .menubar .csd.popup decoration { border-radius: 0
.background.popup { background-color: transparent; }
menu, .menu, .context-menu { margin: 4px; padding: 4px 0px; background-color: #353434; border: 1px solid #595757; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
menu, .menu, .context-menu { margin: 4px; padding: 4px 0px; background-color: #353434; border: 1px solid #595757; transition: none; }
.csd menu, .csd .menu, .csd .context-menu { border: none; border-radius: 5px; }
menu menuitem, .menu menuitem, .context-menu menuitem { min-height: 16px; min-width: 40px; padding: 4px 6px; text-shadow: none; border: 1px solid transparent; border-radius: 3px; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
menu menuitem, .menu menuitem, .context-menu menuitem { min-height: 16px; min-width: 40px; padding: 4px 6px; text-shadow: none; border: 1px solid transparent; border-radius: 3px; transition: none; }
menu menuitem:hover, menu menuitem:active, .menu menuitem:hover, .menu menuitem:active, .context-menu menuitem:hover, .context-menu menuitem:active { background-color: #75ff25; color: #2a4606; }
@ -946,7 +926,7 @@ switch:checked { color: #2a4606; background-color: #75ff25; }
switch:disabled { color: #7c675a; border-color: #595757; background-color: #493e37; text-shadow: none; }
switch slider { margin: 1px; min-width: 24px; min-height: 24px; border: 1px solid transparent; border-radius: 50%; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-outline-radius: 20px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5), inset 0 4px 3px 0px rgba(255, 255, 255, 0.3), inset 0 -4px 3px 0px rgba(0, 0, 0, 0.5), 0 4px 4px -2px rgba(0, 0, 0, 0.5); border: none; background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; }
switch slider { margin: 1px; min-width: 24px; min-height: 24px; border: 1px solid transparent; border-radius: 50%; transition: none; -gtk-outline-radius: 20px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5), inset 0 4px 3px 0px rgba(255, 255, 255, 0.3), inset 0 -4px 3px 0px rgba(0, 0, 0, 0.5), 0 4px 4px -2px rgba(0, 0, 0, 0.5); border: none; background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; }
switch slider:hover, switch slider:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-effect: highlight; }
@ -1117,7 +1097,7 @@ progressbar.horizontal progress { margin: 0 -1px; }
progressbar.vertical progress { margin: -1px 0; }
progressbar:backdrop { box-shadow: none; transition: 200ms ease-out; }
progressbar:backdrop { box-shadow: none; transition: none; }
progressbar progress { border-radius: 1.5px; }
@ -1197,27 +1177,19 @@ actionbar > revealer > box:backdrop { border-color: #545252; }
scrolledwindow viewport.frame { border-style: none; }
scrolledwindow overshoot.top { background-image: radial-gradient(farthest-side at top, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at top, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.top { background-image: radial-gradient(ellipse farthest-side at top, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 100% 10%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.top:backdrop { background-image: radial-gradient(farthest-side at top, #75ff25 85%, rgba(117, 255, 37, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.bottom { background-image: radial-gradient(ellipse farthest-side at bottom, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 100% 10%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at bottom, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.left { background-image: radial-gradient(ellipse farthest-side at left, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 10% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.bottom:backdrop { background-image: radial-gradient(farthest-side at bottom, #75ff25 85%, rgba(117, 255, 37, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.left { background-image: radial-gradient(farthest-side at left, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at left, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.left:backdrop { background-image: radial-gradient(farthest-side at left, #75ff25 85%, rgba(117, 255, 37, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.right { background-image: radial-gradient(farthest-side at right, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at right, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.right:backdrop { background-image: radial-gradient(farthest-side at right, #75ff25 85%, rgba(117, 255, 37, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow overshoot.right { background-image: radial-gradient(ellipse farthest-side at right, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 10% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #595757 1px, transparent 1px) 0 0 0 1/0 1px stretch; background-color: #393838; }
scrolledwindow junction:dir(rtl) { border-image-slice: 0 1 0 0; }
scrolledwindow junction:backdrop { border-image-source: linear-gradient(to bottom, #545252 1px, transparent 1px); background-color: #373636; transition: 200ms ease-out; }
scrolledwindow junction:backdrop { border-image-source: linear-gradient(to bottom, #545252 1px, transparent 1px); background-color: #373636; transition: none; }
separator { background-color: rgba(255, 255, 255, 0.1); min-width: 1px; min-height: 1px; }
@ -1228,7 +1200,7 @@ list:backdrop { color: #c8cbcf; background-color: #353535; border-color: #545252
list row { padding: 2px; }
row { transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid transparent; }
row { transition: none; border: 1px solid transparent; }
row.activatable:hover, row.activatable:active, row.activatable:selected, row.activatable.has-open-popup { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
@ -1271,7 +1243,7 @@ row.activatable:disabled:disabled, row.activatable:disabled:disabled:checked, ro
/********************* App Notifications * */
.app-notification, .app-notification.frame { padding: 10px; border-radius: 0 0 5px 5px; background-color: rgba(32, 61, 121, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-clip: padding-box; }
.app-notification:backdrop, .app-notification.frame:backdrop { background-image: none; transition: 200ms ease-out; }
.app-notification:backdrop, .app-notification.frame:backdrop { background-image: none; transition: none; }
.app-notification border, .app-notification.frame border { border: none; }
@ -1333,7 +1305,7 @@ stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar
stacksidebar.sidebar:dir(rtl) list, stacksidebar.sidebar.right list, .sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { border-left: 1px solid #595757; border-right-style: none; }
.sidebar:backdrop { background-color: #3a3939; border-color: #545252; transition: 200ms ease-out; }
.sidebar:backdrop { background-color: #3a3939; border-color: #545252; transition: none; }
.sidebar list { background-color: transparent; }
@ -1482,6 +1454,8 @@ colorswatch overlay:hover:checked:hover, colorswatch overlay:hover:checked:hover
colorswatch overlay:hover:disabled, colorswatch overlay:hover:disabled:checked, colorswatch overlay:hover:disabled:selected, colorswatch overlay:hover:disabled.has-open-popup { color: #7c675a; background-color: #493e37; }
colorswatch overlay:hover, colorswatch overlay:hover:selected { background-color: transparent; }
colorswatch#add-color-button { border-radius: 5px 5px 0 0; }
colorswatch#add-color-button:only-child { border-radius: 5px; }
@ -1504,6 +1478,8 @@ colorswatch#add-color-button overlay:checked:hover, colorswatch#add-color-button
colorswatch#add-color-button overlay:disabled, colorswatch#add-color-button overlay:disabled:checked, colorswatch#add-color-button overlay:disabled:selected, colorswatch#add-color-button overlay:disabled.has-open-popup { color: #7c675a; background-color: #493e37; }
colorswatch#add-color-button overlay, colorswatch#add-color-button overlay:selected { background-color: transparent; }
colorswatch:disabled { opacity: 0.5; }
colorswatch:disabled overlay { border-color: #493e37; box-shadow: none; }
@ -1526,7 +1502,7 @@ colorchooser .popover.osd { border-radius: 5px; }
/********************** Window Decorations * */
decoration { border-radius: 6px 6px 0 0; border-width: 0px; box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.7), 0 0 5px 1px #75ff25, 0 3px 6px 2px rgba(0, 0, 0, 0); margin: 10px; }
decoration:backdrop { box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.5), 0 3px 6px 2px rgba(0, 0, 0, 0.7); transition: 200ms ease-out; }
decoration:backdrop { box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.5), 0 3px 6px 2px rgba(0, 0, 0, 0.7); transition: none; }
.maximized decoration, .fullscreen decoration { border-radius: 0; box-shadow: none; }
@ -1580,7 +1556,7 @@ button.titlebutton.close:not(:backdrop):disabled, button.titlebutton.close:not(:
/********************** Touch Copy & Paste * */
/********************** Touch Copy & Paste * */
cursor-handle { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); border: 1px solid #666464; border-radius: 100%; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); border: 1px solid #666464; border-radius: 100%; transition: none; transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle:hover, cursor-handle:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-effect: highlight; }
@ -1624,7 +1600,7 @@ cursor-handle.bottom:dir(ltr), cursor-handle.top:dir(rtl) { border-radius: 5px 1
.keycap { min-width: 20px; min-height: 25px; margin-top: 2px; padding-bottom: 3px; padding-left: 6px; padding-right: 6px; color: #EDF0F5; background-color: #323232; border: 1px solid; border-color: #595757; border-radius: 5px; box-shadow: inset 0 -3px #494848; font-size: smaller; }
.keycap:backdrop { background-color: #353535; color: #96979a; transition: 200ms ease-out; }
.keycap:backdrop { background-color: #353535; color: #96979a; transition: none; }
:not(decoration):not(window):drop(active):focus, :not(decoration):not(window):drop(active) { border-color: #33d17a; box-shadow: inset 0 0 0 1px #33d17a; caret-color: #33d17a; }
@ -1668,7 +1644,7 @@ popover.emoji-completion contents row box { padding: 2px 10px; }
popover.emoji-completion .emoji:hover { background: #4c4b4b; }
undershoot { background-repeat: no-repeat; background-clip: border-box; background-image: image(alpha(#4384b3,0.3)); }
undershoot { background-repeat: no-repeat; background-clip: border-box; background-image: image(alpha(#75ff25,0.3)); }
undershoot.top { background-size: 100% 0.5em; background-position: top; }

57
source/gtk4/_common.scss
View file

@ -283,13 +283,13 @@ spinner {
entry,
.entry {
%entry_basic, & {
min-height: 32px;
min-height: 30px;
padding-left: 1px;
padding-right: 1px;
border: 1px solid;
border: 0px none; //1px solid;
border-radius: $entry_radius;
border-spacing: 6px;
transition: all 200ms $ease-out-quad;
transition: none; //all 200ms $ease-out-quad;
@include entry(normal);
@ -398,16 +398,16 @@ entry,
// linked entries
.linked:not(.vertical) > & { @extend %linked; }
.linked:not(.vertical) > &:drop(active) + &,
.linked:not(.vertical) > &:drop(active) + button,
.linked:not(.vertical) > &:drop(active) + menubutton > button,
.linked:not(.vertical) > &:drop(active) + dropdown > button,
.linked:not(.vertical) > &:drop(active) + colorbutton > button,
.linked:not(.vertical) > &:drop(active) + fontbutton > button,
.linked:not(.vertical) > &:drop(active) + filechooserbutton > button,
.linked:not(.vertical) > &:drop(active) + filechooserbutton > combobox > box > button.combo,
.linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
.linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
// .linked:not(.vertical) > &:drop(active) + &,
// .linked:not(.vertical) > &:drop(active) + button,
// .linked:not(.vertical) > &:drop(active) + menubutton > button,
// .linked:not(.vertical) > &:drop(active) + dropdown > button,
// .linked:not(.vertical) > &:drop(active) + colorbutton > button,
// .linked:not(.vertical) > &:drop(active) + fontbutton > button,
// .linked:not(.vertical) > &:drop(active) + filechooserbutton > button,
// .linked:not(.vertical) > &:drop(active) + filechooserbutton > combobox > box > button.combo,
// .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
// .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
// Vertically linked entries
// FIXME: take care of "colored" entries
@ -427,19 +427,19 @@ entry,
+ %entry:drop(active):not(:only-child),
+ entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
&:drop(active):not(:only-child) {
+ %entry,
+ entry,
+ button,
+ menubutton > button,
+ dropdown > button,
+ colorbutton > button,
+ fontbutton > button,
+ filechooserbutton > button,
+ filechooserbutton > combobox > box > button.combo,
+ appchooserbutton > combobox > box > button.combo,
+ combobox > box > button.combo { border-top-color: $drop_target_color; }
}
// &:drop(active):not(:only-child) {
// + %entry,
// + entry,
// + button,
// + menubutton > button,
// + dropdown > button,
// + colorbutton > button,
// + fontbutton > button,
// + filechooserbutton > button,
// + filechooserbutton > combobox > box > button.combo,
// + appchooserbutton > combobox > box > button.combo,
// + combobox > box > button.combo { border-top-color: $drop_target_color; }
// }
}
&.error { color: $error_color; }
@ -2929,6 +2929,8 @@ colorswatch {
//box-shadow: inset 0 1px transparentize(white, 0.6),
// inset 0 -1px transparentize(black, 0.8);
@include button();
&, &:selected {background-color: transparent;}
}
&#add-color-button {
@ -2938,10 +2940,13 @@ colorswatch {
> overlay {
@include button();
&, &:selected {background-color: transparent;}
}
&.activatable:hover > overlay {
//overlay may not look "hovered"
@include button();
&, &:selected {background-color: transparent;}
}
}

17
source/gtk4/_drawing.scss
View file

@ -55,6 +55,12 @@ $gtk: 4;
// possible $t values:
// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop, block_cursor;
//
$entry_focus_inner_bs: inset 0 -8px 4px -6px $fc;
$entry_hover_inner_bs: inset 0 -8px 4px -6px transparentize($fc, 0.5);
$entry_normal_inner_bs: inset 0 -8px 4px -6px transparentize($fc, 1);
$_entry_shadow: 0 1px 2px transparentize($shadow_hard_color, 0.6);
$_hilight_color: _button_hilight_color($bg_color);
@ -62,16 +68,17 @@ $gtk: 4;
color: $text_color;
border-color: mix($text_color,$base_color, 20%);//$borders_color;
background-color: $base_color;
@include _shadows(inset shadow(normal), inset shadow(transparent));
@include _shadows($button_shadow_pressed, $entry_normal_inner_bs);
// for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
}
@if t==hover { //gtk apparently does not create :hover on entries!?!
border-color: gtkalpha($fc, 0.5);
@include _shadows($button_shadow_pressed, $entry_hover_inner_bs);
}
@if $t==focus {
@include _shadows(inset shadow(normal), inset shadow(glow-small, $fc));
@if $t==focus or $t==osd-focus {
@include _shadows($button_shadow_pressed, $entry_focus_inner_bs);
//border-color: entry_focus_border($fc);
}
@ -95,7 +102,7 @@ $gtk: 4;
border-color: $osd_borders_color;
background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
background-clip: padding-box;
@include _shadows(inset $_entry_shadow, 0 1px $_hilight_color);
@include _shadows($button_shadow_pressed, $entry_normal_inner_bs);
-gtk-icon-shadow: 0 1px black;
}
@if $t==osd-focus {
@ -103,7 +110,7 @@ $gtk: 4;
border-color: $selected_bg_color;
background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
background-clip: padding-box;
@include _shadows(inset $_entry_shadow, 0 1px $_hilight_color);
//@include _shadows(inset $_entry_shadow, 0 1px $_hilight_color);
}
@if $t==osd-insensitive {
color: $osd_insensitive_fg_color;

70
source/gtk4/gtk-new.css
View file

@ -137,7 +137,7 @@ spinner:checked:disabled { opacity: 0.5; color: #7c675a; }
.caption { font-weight: 400; font-size: 9pt; }
/**************** Text Entries * */
spinbutton.vertical > text, spinbutton:not(.vertical), entry, .entry { min-height: 32px; padding-left: 1px; padding-right: 1px; border: 1px solid; border-radius: 0px; border-spacing: 6px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 0 transparent; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
spinbutton.vertical > text, spinbutton:not(.vertical), entry, .entry { min-height: 30px; padding-left: 1px; padding-right: 1px; border: 0px none; border-radius: 0px; border-spacing: 6px; transition: none; color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px rgba(117, 255, 37, 0); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
spinbutton.vertical > text, spinbutton:not(.vertical), entry, .entry { outline: 0 solid transparent; outline-offset: 4px; }
@ -151,7 +151,7 @@ spinbutton.vertical > text > text > block-cursor, spinbutton:not(.vertical) > te
spinbutton.vertical > text.flat, spinbutton.flat:not(.vertical), entry.flat:focus-within, entry.flat:backdrop, entry.flat:disabled, entry.flat, .entry.flat:focus-within, .entry.flat:backdrop, .entry.flat:disabled, .entry.flat { min-height: 0; padding-top: 2px; padding-bottom: 2px; background-color: transparent; border-color: transparent; border-radius: 0; }
spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within, .entry:focus-within { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #75ff25; }
spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within, .entry:focus-within { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #75ff25; }
spinbutton.vertical > text:focus-within > placeholder, spinbutton:focus-within:not(.vertical) > placeholder, entry:focus-within > placeholder, .entry:focus-within > placeholder { opacity: 0; /* We hide placeholders on focus */ }
@ -167,7 +167,7 @@ spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error,
spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not(.vertical), entry.error:focus-within, .entry.error:focus-within { outline-color: rgba(204, 0, 0, 0.5); outline-width: 2px; outline-offset: -2px; }
spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not(.vertical), entry.error:focus-within, .entry.error:focus-within { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #CC0000; }
spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not(.vertical), entry.error:focus-within, .entry.error:focus-within { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #CC0000; }
spinbutton.vertical > text.error > selection, spinbutton.error:not(.vertical) > selection, entry.error > selection, .entry.error > selection { background-color: #CC0000; }
@ -177,7 +177,7 @@ spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.war
spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within, .entry.warning:focus-within { outline-color: rgba(245, 121, 0, 0.5); outline-width: 2px; outline-offset: -2px; }
spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within, .entry.warning:focus-within { box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 1px 1px #f57900; }
spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within, .entry.warning:focus-within { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #f57900; }
spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection, .entry.warning > selection { background-color: #f57900; }
@ -191,9 +191,9 @@ spinbutton.vertical > text.password image.caps-lock-indicator, spinbutton.passwo
spinbutton.vertical > text:drop(active), spinbutton:drop(active):not(.vertical), entry:drop(active):focus-within, entry:drop(active), .entry:drop(active):focus-within, .entry:drop(active) { border-color: #33d17a; box-shadow: inset 0 0 0 1px #33d17a; }
.osd spinbutton.vertical > text, .osd spinbutton:not(.vertical), .osd entry, .osd .entry { color: #66cbec; border-color: #66cbec; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px _button_hilight_color(#3f3e3e); -gtk-icon-shadow: 0 1px black; }
.osd spinbutton.vertical > text, .osd spinbutton:not(.vertical), .osd entry, .osd .entry { color: #66cbec; border-color: #66cbec; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px rgba(117, 255, 37, 0); -gtk-icon-shadow: 0 1px black; }
.osd spinbutton.vertical > text:focus-within, .osd spinbutton:focus-within:not(.vertical), .osd entry:focus-within, .osd .entry:focus-within { color: #66cbec; border-color: #75ff25; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px _button_hilight_color(#3f3e3e); }
.osd spinbutton.vertical > text:focus-within, .osd spinbutton:focus-within:not(.vertical), .osd entry:focus-within, .osd .entry:focus-within { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px #75ff25; color: #66cbec; border-color: #75ff25; background-color: rgba(102, 203, 236, 0.5); background-clip: padding-box; }
.osd spinbutton.vertical > text:disabled, .osd spinbutton:disabled:not(.vertical), .osd entry:disabled, .osd .entry:disabled { color: #4384b3; border-color: #66cbec; background-color: rgba(39, 75, 133, 0.5); background-clip: padding-box; }
@ -201,16 +201,12 @@ spinbutton.vertical > text > progress, spinbutton:not(.vertical) > progress, ent
spinbutton.vertical > text progress > trough > progress, spinbutton:not(.vertical) progress > trough > progress, entry progress > trough > progress, .entry progress > trough > progress { background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #75ff25; border-style: solid; box-shadow: none; }
spinbutton.vertical.linked:not(.vertical) > text:drop(active) + text, spinbutton.vertical.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + text, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + menubutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + menubutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + dropdown > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + dropdown > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + colorbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + colorbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + fontbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + fontbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + filechooserbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + menubutton > button, .linked:not(.vertical) > entry:drop(active) + dropdown > button, .linked:not(.vertical) > entry:drop(active) + colorbutton > button, .linked:not(.vertical) > entry:drop(active) + fontbutton > button, .linked:not(.vertical) > entry:drop(active) + filechooserbutton > button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + .entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + .entry, .linked:not(.vertical) > .entry:drop(active) + button, .linked:not(.vertical) > .entry:drop(active) + menubutton > button, .linked:not(.vertical) > .entry:drop(active) + dropdown > button, .linked:not(.vertical) > .entry:drop(active) + colorbutton > button, .linked:not(.vertical) > .entry:drop(active) + fontbutton > button, .linked:not(.vertical) > .entry:drop(active) + filechooserbutton > button, .linked:not(.vertical) > .entry:drop(active) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > entry:drop(active) + text, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > entry:drop(active) + .entry, spinbutton.vertical.linked:not(.vertical) > .entry:drop(active) + text, .linked:not(.vertical) > .entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > .entry:drop(active) + entry, .linked:not(.vertical) > .entry:drop(active) + .entry { border-left-color: #33d17a; }
spinbutton.vertical.linked > text:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + text:not(:disabled), spinbutton.vertical.linked > spinbutton:not(:disabled):not(.vertical) + text:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), spinbutton.vertical.linked > entry:not(:disabled) + text:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > .entry:not(:disabled) + entry:not(:disabled), spinbutton.vertical.linked > .entry:not(:disabled) + text:not(:disabled), .linked.vertical > .entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #3e3d3d; }
spinbutton.vertical.linked > text:disabled + text:disabled, spinbutton.vertical.linked > spinbutton:disabled:not(.vertical) + text:disabled, spinbutton.vertical.linked > text:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > text:disabled + entry:disabled, .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, spinbutton.vertical.linked > entry:disabled + text:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > entry:disabled + entry:disabled, spinbutton.vertical.linked > .entry:disabled + text:disabled, .linked.vertical > .entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > .entry:disabled + entry:disabled { border-top-color: #3e3d3d; }
spinbutton.vertical.linked > text + text:drop(active):not(:only-child), spinbutton.vertical.linked > spinbutton:not(.vertical) + text:drop(active):not(:only-child), spinbutton.vertical.linked > text + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > text + entry:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), spinbutton.vertical.linked > entry + text:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > entry + entry:drop(active):not(:only-child), spinbutton.vertical.linked > .entry + text:drop(active):not(:only-child), .linked.vertical > .entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > .entry + entry:drop(active):not(:only-child) { border-top-color: #33d17a; }
spinbutton.vertical.linked > text:drop(active):not(:only-child) + text, spinbutton.vertical.linked > spinbutton:drop(active):not(:only-child):not(.vertical) + text, spinbutton.vertical.linked > text:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked > text:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, spinbutton.vertical.linked > text:drop(active):not(:only-child) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + menubutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + menubutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + dropdown > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + dropdown > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + colorbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + fontbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + combobox > box > button.combo, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked > entry:drop(active):not(:only-child) + text, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + menubutton > button, .linked.vertical > entry:drop(active):not(:only-child) + dropdown > button, .linked.vertical > entry:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo, spinbutton.vertical.linked > .entry:drop(active):not(:only-child) + text, .linked.vertical > .entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > .entry:drop(active):not(:only-child) + entry, .linked.vertical > .entry:drop(active):not(:only-child) + button, .linked.vertical > .entry:drop(active):not(:only-child) + menubutton > button, .linked.vertical > .entry:drop(active):not(:only-child) + dropdown > button, .linked.vertical > .entry:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > .entry:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > .entry:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > .entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #33d17a; }
spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error, .entry.error { color: #CC0000; }
treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { background-color: #323232; transition-property: color, background; }
@ -220,13 +216,13 @@ treeview entry.flat, treeview entry { border-radius: 0; background-image: none;
treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #75ff25; }
/******************* Editable Labels * */
editablelabel > stack > text { color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 0 transparent; }
editablelabel > stack > text { color: #EDF0F5; border-color: #575859; background-color: #323232; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 -8px 4px -6px rgba(117, 255, 37, 0); }
/****************************************************** Buttons * */
@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #f57900 0%, rgba(245, 121, 0, 0) 0%); }
to { background-image: radial-gradient(farthest-side, #f57900 95%, rgba(245, 121, 0, 0)); } }
button.sidebar-button, dnd tab, tabbar tab, notebook > header tabs > tab, notebook > header tabbar tabbox > tabboxchild, tabbar notebook > header tabbox > tabboxchild, notebook > header > tabs > arrow, columnview.view > header > button, treeview.view > header > button, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 3px; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); margin: 1px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
button.sidebar-button, dnd tab, tabbar tab, notebook > header tabs > tab, notebook > header tabbar tabbox > tabboxchild, tabbar notebook > header tabbox > tabboxchild, notebook > header > tabs > arrow, columnview.view > header > button, treeview.view > header > button, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 3px; transition: none; margin: 1px; color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; }
dnd tab:hover, tabbar tab:hover, notebook > header tabs > tab:hover, notebook > header tabbar tabbox > tabboxchild:hover, tabbar notebook > header tabbox > tabboxchild:hover, notebook > header > tabs > arrow:hover, columnview.view > header > button:hover, treeview.view > header > button:hover, dnd tab:focus, tabbar tab:focus, notebook > header tabs > tab:focus, notebook > header tabbar tabbox > tabboxchild:focus, tabbar notebook > header tabbox > tabboxchild:focus, notebook > header > tabs > arrow:focus, columnview.view > header > button:focus, treeview.view > header > button:focus, button:hover, button:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-filter: brightness(1.2); }
@ -540,7 +536,7 @@ searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0
searchbar > revealer > box { border-style: solid; border-color: #595757; background-color: #474646; }
searchbar > revealer > box:backdrop { border-color: #545252; background-color: #464545; box-shadow: none; transition: 200ms ease-out; }
searchbar > revealer > box:backdrop { border-color: #545252; background-color: #464545; box-shadow: none; transition: none; }
/************** GtkInfoBar * */
infobar > revealer > box { padding: 8px; border-spacing: 12px; }
@ -599,7 +595,7 @@ windowcontrols button > image { background-color: unset; }
/*************** Header bars * */
.titlebar:not(headerbar), headerbar, windowhandle { padding: 0 0px; min-height: 46px; border-width: 0 0 1px; border-style: solid; border-color: #6d6c6c; border-radius: 0; background: #3f3e3e linear-gradient(to top, black, #3a3939 7%, #424141 93%, #8c8a8a 100%); color: #EDF0F5; /* Darken switchbuttons for headerbars. issue #1588 */ }
.titlebar:backdrop:not(headerbar), headerbar:backdrop, windowhandle:backdrop { border-color: #545252; background-color: #3f3e3e; color: #EDF0F5; background-image: none; transition: 200ms ease-out; }
.titlebar:backdrop:not(headerbar), headerbar:backdrop, windowhandle:backdrop { border-color: #545252; background-color: #3f3e3e; color: #EDF0F5; background-image: none; transition: none; }
.titlebar:not(headerbar) .title, headerbar .title, windowhandle .title { padding-left: 12px; padding-right: 12px; font-weight: bold; }
@ -892,9 +888,9 @@ notebook > header tabs > tab button.flat:first-child, notebook > header dnd tab
tabbar .box { background-color: #373636; color: #EDF0F5; box-shadow: inset 0 -1px rgba(0, 0, 0, 0.36); padding: 1px; padding-top: 0; }
tabbar .box:backdrop { background-color: #3f3e3e; transition: background-color 200ms ease-out; }
tabbar .box:backdrop { background-color: #3f3e3e; transition: background-color none; }
tabbar .box:backdrop > scrolledwindow, tabbar .box:backdrop > .start-action, tabbar .box:backdrop > .end-action { transition: filter 200ms ease-out; }
tabbar .box:backdrop > scrolledwindow, tabbar .box:backdrop > .start-action, tabbar .box:backdrop > .end-action { transition: filter none; }
tabbar tabbox { padding: 2px; }
@ -1022,7 +1018,7 @@ switch:checked { color: #2a4606; background-color: #61a538; }
switch:disabled { color: #7c675a; border-color: #595757; background-color: #493e37; text-shadow: none; }
switch > slider { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); margin: 1px; min-width: 24px; min-height: 24px; border: 1px solid transparent; border-radius: 50%; }
switch > slider { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); background-image: url("assets/draggable-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.7rem; transition: none; margin: 1px; min-width: 24px; min-height: 24px; border: 1px solid transparent; border-radius: 50%; }
switch > slider:hover, switch > slider:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-filter: brightness(1.2); }
@ -1295,13 +1291,13 @@ scrolledwindow > .view:dir(ltr), scrolledwindow > iconview:dir(ltr) { padding-ri
scrolledwindow > .view:dir(rtl), scrolledwindow > iconview:dir(rtl) { padding-left: 1em; }
scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at top, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.top { background-image: radial-gradient(ellipse farthest-side at top, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 100% 10%; 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, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at bottom, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.bottom { background-image: radial-gradient(ellipse farthest-side at bottom, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 100% 10%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.left { background-image: radial-gradient(farthest-side at left, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at left, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.left { background-image: radial-gradient(ellipse farthest-side at left, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 10% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.right { background-image: radial-gradient(farthest-side at right, #75ff25 85%, rgba(117, 255, 37, 0)), radial-gradient(farthest-side at right, rgba(117, 255, 37, 0.07), rgba(117, 255, 37, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > overshoot.right { background-image: radial-gradient(ellipse farthest-side at right, #f57900 35%, rgba(245, 121, 0, 0)); background-size: 10% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
scrolledwindow > junction { background: #595757, linear-gradient(to bottom, transparent 1px, #393838 1px), linear-gradient(to right, transparent 1px, #393838 1px); }
@ -1322,7 +1318,7 @@ 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: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 1px solid transparent; }
row { transition: none; border: 1px solid transparent; }
row.activatable:hover, row.activatable:active, row.activatable:selected, row.activatable.has-open-popup { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
@ -1600,6 +1596,8 @@ colorswatch.activatable:hover > overlay:checked:hover, colorswatch.activatable:h
colorswatch.activatable:hover > overlay:disabled, colorswatch.activatable:hover > overlay:disabled:checked, colorswatch.activatable:hover > overlay:disabled:selected, colorswatch.activatable:hover > overlay:disabled.has-open-popup { color: #7c675a; background-color: #493e37; }
colorswatch.activatable:hover > overlay, colorswatch.activatable:hover > overlay:selected { background-color: transparent; }
colorswatch#add-color-button { border-radius: 5px 0 0 5px; }
colorswatch#add-color-button:only-child { border-radius: 5px; }
@ -1622,6 +1620,28 @@ colorswatch#add-color-button > overlay:checked:hover, colorswatch#add-color-butt
colorswatch#add-color-button > overlay:disabled, colorswatch#add-color-button > overlay:disabled:checked, colorswatch#add-color-button > overlay:disabled:selected, colorswatch#add-color-button > overlay:disabled.has-open-popup { color: #7c675a; background-color: #493e37; }
colorswatch#add-color-button > overlay, colorswatch#add-color-button > overlay:selected { background-color: transparent; }
colorswatch#add-color-button.activatable:hover > overlay { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); }
colorswatch#add-color-button.activatable:hover > overlay:hover, colorswatch#add-color-button.activatable:hover > overlay:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-filter: brightness(1.2); }
colorswatch#add-color-button.activatable:hover > overlay:hover, colorswatch#add-color-button.activatable:hover > overlay:hover image, colorswatch#add-color-button.activatable:hover > overlay:hover arrow, colorswatch#add-color-button.activatable:hover > overlay:focus, colorswatch#add-color-button.activatable:hover > overlay:focus image, colorswatch#add-color-button.activatable:hover > overlay:focus arrow { -gtk-icon-shadow: 0 0 5px currentColor; }
colorswatch#add-color-button.activatable:hover > overlay:active, colorswatch#add-color-button.activatable:hover > overlay.keyboard-activating { box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5); }
colorswatch#add-color-button.activatable:hover > overlay:checked, colorswatch#add-color-button.activatable:hover > overlay:selected, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup { background-color: #434343; color: #75ff25; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), 0 10px 3px -9px alpha(currentColor,0.3); text-shadow: 0 0 3px currentColor; }
colorswatch#add-color-button.activatable:hover > overlay:checked, colorswatch#add-color-button.activatable:hover > overlay:checked image, colorswatch#add-color-button.activatable:hover > overlay:checked arrow, colorswatch#add-color-button.activatable:hover > overlay:selected, colorswatch#add-color-button.activatable:hover > overlay:selected image, colorswatch#add-color-button.activatable:hover > overlay:selected arrow, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup image, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup arrow { -gtk-icon-shadow: 0 0 3px currentColor; }
colorswatch#add-color-button.activatable:hover > overlay:checked:hover, colorswatch#add-color-button.activatable:hover > overlay:checked:focus, colorswatch#add-color-button.activatable:hover > overlay:selected:hover, colorswatch#add-color-button.activatable:hover > overlay:selected:focus, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:hover, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:focus { text-shadow: 0 0 3px currentColor, 0 0 5px currentColor; box-shadow: 0 3px 1px -2px alpha(rgba(255, 255, 255, 0.3),0.4), inset 0 2px 2px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), 0 10px 3px -9px alpha(currentColor,0.5); }
colorswatch#add-color-button.activatable:hover > overlay:checked:hover, colorswatch#add-color-button.activatable:hover > overlay:checked:hover image, colorswatch#add-color-button.activatable:hover > overlay:checked:hover arrow, colorswatch#add-color-button.activatable:hover > overlay:checked:focus, colorswatch#add-color-button.activatable:hover > overlay:checked:focus image, colorswatch#add-color-button.activatable:hover > overlay:checked:focus arrow, colorswatch#add-color-button.activatable:hover > overlay:selected:hover, colorswatch#add-color-button.activatable:hover > overlay:selected:hover image, colorswatch#add-color-button.activatable:hover > overlay:selected:hover arrow, colorswatch#add-color-button.activatable:hover > overlay:selected:focus, colorswatch#add-color-button.activatable:hover > overlay:selected:focus image, colorswatch#add-color-button.activatable:hover > overlay:selected:focus arrow, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:hover, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:hover image, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:hover arrow, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:focus, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:focus image, colorswatch#add-color-button.activatable:hover > overlay.has-open-popup:focus arrow { -gtk-icon-shadow: 0 0 3px currentColor, 0 0 5px currentColor; }
colorswatch#add-color-button.activatable:hover > overlay:disabled, colorswatch#add-color-button.activatable:hover > overlay:disabled:checked, colorswatch#add-color-button.activatable:hover > overlay:disabled:selected, colorswatch#add-color-button.activatable:hover > overlay:disabled.has-open-popup { color: #7c675a; background-color: #493e37; }
colorswatch#add-color-button.activatable:hover > overlay, colorswatch#add-color-button.activatable:hover > overlay:selected { background-color: transparent; }
colorswatch:disabled { opacity: 0.5; background-color: #493e37; color: #7c675a; }
row:selected colorswatch { box-shadow: 0 0 0 2px #2a4606; }
@ -1654,7 +1674,7 @@ window { border-width: 0px; }
window.csd { box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.7), 0 0 5px 1px #75ff25, 0 3px 6px 2px rgba(0, 0, 0, 0); margin: 0px; border-radius: 6px 6px 0 0; }
window.csd:backdrop { box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.5), 0 3px 6px 2px rgba(0, 0, 0, 0.7); transition: 200ms ease-out; }
window.csd:backdrop { box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.5), 0 3px 6px 2px rgba(0, 0, 0, 0.7); transition: none; }
window.csd.popup { border-radius: 5px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(117, 255, 37, 0.9); }
@ -1680,7 +1700,7 @@ tooltip.csd { border-radius: 5px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.7); }
/********************** Touch Copy & Paste * */
/********************** Touch Copy & Paste * */
cursor-handle { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); border: 1px solid #666464; border-radius: 100%; transition: all 20ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle { color: #EDF0F5; background-color: #4f4f4f; border-color: black; outline-color: #75ff25; background-image: linear-gradient(to bottom, alpha(rgba(255, 255, 255, 0.3),0.15), alpha(rgba(255, 255, 255, 0.3),0) 50%, alpha(rgba(0, 0, 0, 0.5),0) 50%, alpha(rgba(0, 0, 0, 0.5),0.25)); box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.5), inset 0 2px 1px -1px rgba(255, 255, 255, 0.3), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.5); border: 1px solid #666464; border-radius: 100%; transition: none; transition-property: background, border, box-shadow; min-height: 18px; min-width: 10px; }
cursor-handle:hover, cursor-handle:focus { color: white; text-shadow: 0 0 5px currentColor; -gtk-icon-filter: brightness(1.2); }
@ -1784,7 +1804,7 @@ menubutton arrow.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
menubutton arrow.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
undershoot { background-repeat: no-repeat; background-clip: border-box; background-image: image(alpha(#4384b3,0.3)); }
undershoot { background-repeat: no-repeat; background-clip: border-box; background-image: image(alpha(#75ff25,0.3)); }
undershoot.top { background-size: 100% 0.5em; background-position: top; }