diff --git a/build.sh b/build.sh index cddcb5b8..6c7f79a6 100755 --- a/build.sh +++ b/build.sh @@ -35,6 +35,8 @@ for color in "${_COLOR_VARIANTS[@]}"; do echo "==> Generating the 3.0 gtk${color}.css..." sassc $SASSC_OPT src/main/gtk-4.0/gtk${color}.{scss,css} echo "==> Generating the 4.0 gtk${color}.css..." + sassc $SASSC_OPT src/main/libadwaita/libadwaita${color}.{scss,css} + echo "==> Generating the libadwaita libadwaita${color}.css..." sassc $SASSC_OPT src/main/gnome-shell/gnome-shell${color}.{scss,css} echo "==> Generating the gnome-shell${color}.css..." sassc $SASSC_OPT src/main/cinnamon/cinnamon${color}.{scss,css} diff --git a/src/main/gtk-4.0/gtk-Dark.scss b/src/main/gtk-4.0/gtk-Dark.scss index af2248a6..348fbaef 100644 --- a/src/main/gtk-4.0/gtk-Dark.scss +++ b/src/main/gtk-4.0/gtk-Dark.scss @@ -1,10 +1,12 @@ $variant: 'dark'; $topbar: 'dark'; -@import '../../sass/variables'; @import '../../sass/colors'; -@import '../../sass/gtk/drawing-4.0'; -@import '../../sass/gtk/common-4.0'; -@import '../../sass/gtk/apps-4.0'; -@import '../../sass/gtk/colors-public'; -@import '../../sass/gtk/colors-libadwaita'; +@import '../../sass/libadwaita/palette'; +@import '../../sass/libadwaita/functions'; +@import '../../sass/libadwaita/variables'; +@import '../../sass/libadwaita/colors'; +@import '../../sass/libadwaita/drawing'; +@import '../../sass/libadwaita/common'; +@import '../../sass/gtk/defaults'; +@import '../../sass/libadwaita/compat-colors'; diff --git a/src/main/gtk-4.0/gtk-Light.scss b/src/main/gtk-4.0/gtk-Light.scss index cbddd720..5f388764 100644 --- a/src/main/gtk-4.0/gtk-Light.scss +++ b/src/main/gtk-4.0/gtk-Light.scss @@ -1,10 +1,12 @@ $variant: 'light'; $topbar: 'light'; -@import '../../sass/variables'; @import '../../sass/colors'; -@import '../../sass/gtk/drawing-4.0'; -@import '../../sass/gtk/common-4.0'; -@import '../../sass/gtk/apps-4.0'; -@import '../../sass/gtk/colors-public'; -@import '../../sass/gtk/colors-libadwaita'; +@import '../../sass/libadwaita/palette'; +@import '../../sass/libadwaita/functions'; +@import '../../sass/libadwaita/variables'; +@import '../../sass/libadwaita/colors'; +@import '../../sass/libadwaita/drawing'; +@import '../../sass/libadwaita/common'; +@import '../../sass/gtk/defaults'; +@import '../../sass/libadwaita/compat-colors'; diff --git a/src/main/gtk-4.0/gtk.scss b/src/main/gtk-4.0/gtk.scss index 81d6a454..2de0f0a7 100644 --- a/src/main/gtk-4.0/gtk.scss +++ b/src/main/gtk-4.0/gtk.scss @@ -1,10 +1,12 @@ $variant: 'light'; $topbar: 'dark'; -@import '../../sass/variables'; @import '../../sass/colors'; -@import '../../sass/gtk/drawing-4.0'; -@import '../../sass/gtk/common-4.0'; -@import '../../sass/gtk/apps-4.0'; -@import '../../sass/gtk/colors-public'; -@import '../../sass/gtk/colors-libadwaita'; +@import '../../sass/libadwaita/palette'; +@import '../../sass/libadwaita/functions'; +@import '../../sass/libadwaita/variables'; +@import '../../sass/libadwaita/colors'; +@import '../../sass/libadwaita/drawing'; +@import '../../sass/libadwaita/common'; +@import '../../sass/gtk/defaults'; +@import '../../sass/libadwaita/compat-colors'; diff --git a/src/main/libadwaita/libadwaita-Dark.css b/src/main/libadwaita/libadwaita-Dark.css new file mode 100644 index 00000000..772ed0e3 --- /dev/null +++ b/src/main/libadwaita/libadwaita-Dark.css @@ -0,0 +1,7450 @@ +@define-color blue_1 #99c1f1; +@define-color blue_2 #62a0ea; +@define-color blue_3 #3584e4; +@define-color blue_4 #1c71d8; +@define-color blue_5 #1a5fb4; +@define-color green_1 #8ff0a4; +@define-color green_2 #57e389; +@define-color green_3 #33d17a; +@define-color green_4 #2ec27e; +@define-color green_5 #26a269; +@define-color yellow_1 #f9f06b; +@define-color yellow_2 #f8e45c; +@define-color yellow_3 #f6d32d; +@define-color yellow_4 #f5c211; +@define-color yellow_5 #e5a50a; +@define-color orange_1 #ffbe6f; +@define-color orange_2 #ffa348; +@define-color orange_3 #ff7800; +@define-color orange_4 #e66100; +@define-color orange_5 #c64600; +@define-color red_1 #f66151; +@define-color red_2 #ed333b; +@define-color red_3 #e01b24; +@define-color red_4 #c01c28; +@define-color red_5 #a51d2d; +@define-color purple_1 #dc8add; +@define-color purple_2 #c061cb; +@define-color purple_3 #9141ac; +@define-color purple_4 #813d9c; +@define-color purple_5 #613583; +@define-color brown_1 #cdab8f; +@define-color brown_2 #b5835a; +@define-color brown_3 #986a44; +@define-color brown_4 #865e3c; +@define-color brown_5 #63452c; +@define-color light_1 #ffffff; +@define-color light_2 #f6f5f4; +@define-color light_3 #deddda; +@define-color light_4 #c0bfbc; +@define-color light_5 #9a9996; +@define-color dark_1 #77767b; +@define-color dark_2 #5e5c64; +@define-color dark_3 #3d3846; +@define-color dark_4 #241f31; +@define-color dark_5 #000000; +:root { + --accent-color: @accent_color; + --accent-bg-color: @accent_bg_color; + --accent-fg-color: @accent_fg_color; + --destructive-color: @destructive_color; + --destructive-bg-color: @destructive_bg_color; + --destructive-fg-color: @destructive_fg_color; + --success-color: @success_color; + --success-bg-color: @success_bg_color; + --success-fg-color: @success_fg_color; + --warning-color: @warning_color; + --warning-bg-color: @warning_bg_color; + --warning-fg-color: @warning_fg_color; + --error-color: @error_color; + --error-bg-color: @error_bg_color; + --error-fg-color: @error_fg_color; + --window-bg-color: @window_bg_color; + --window-fg-color: @window_fg_color; + --view-bg-color: @view_bg_color; + --view-fg-color: @view_fg_color; + --headerbar-bg-color: @headerbar_bg_color; + --headerbar-fg-color: @headerbar_fg_color; + --headerbar-border-color: @headerbar_border_color; + --headerbar-backdrop-color: @headerbar_backdrop_color; + --headerbar-shade-color: @headerbar_shade_color; + --headerbar-darker-shade-color: @headerbar_darker_shade_color; + --sidebar-bg-color: @sidebar_bg_color; + --sidebar-fg-color: @sidebar_fg_color; + --sidebar-backdrop-color: @sidebar_backdrop_color; + --sidebar-border-color: @sidebar_border_color; + --sidebar-shade-color: @sidebar_shade_color; + --secondary-sidebar-bg-color: @secondary_sidebar_bg_color; + --secondary-sidebar-fg-color: @secondary_sidebar_fg_color; + --secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color; + --secondary-sidebar-border-color: @secondary_sidebar_border_color; + --secondary-sidebar-shade-color: @secondary_sidebar_shade_color; + --card-bg-color: @card_bg_color; + --card-fg-color: @card_fg_color; + --card-shade-color: @card_shade_color; + --dialog-bg-color: @dialog_bg_color; + --dialog-fg-color: @dialog_fg_color; + --popover-bg-color: @popover_bg_color; + --popover-fg-color: @popover_fg_color; + --popover-shade-color: @popover_shade_color; + --thumbnail-bg-color: @thumbnail_bg_color; + --thumbnail-fg-color: @thumbnail_fg_color; + --shade-color: @shade_color; + --scrollbar-outline-color: @scrollbar_outline_color; +} + +:root { + --border-color: alpha(currentColor,0.12); + --border-opacity: 0.12; + --dim-opacity: 0.55; + --disabled-opacity: 0.45; +} + +@keyframes ripple { + to { + background-size: 1000% 1000%; + } +} + +@keyframes ripple-on-slider { + to { + background-size: auto, 1000% 1000%; + } +} + +@keyframes ripple-on-headerbar { + from { + background-image: radial-gradient(circle, @accent_color 0%, transparent 0%); + } + to { + background-image: radial-gradient(circle, @accent_color 100%, transparent 100%); + } +} + +:root { + --window-radius: 12px; +} + +.background { + color: @window_fg_color; + background-color: @window_bg_color; +} + +dnd { + color: @window_fg_color; +} + +.normal-icons { + -gtk-icon-size: 16px; +} + +.large-icons { + -gtk-icon-size: 32px; +} + +.osd popover > arrow, +.osd popover > contents, popover.touch-selection > arrow, +popover.touch-selection > contents, popover.magnifier > arrow, +popover.magnifier > contents, toast, .app-notification, dialog-host > dialog.osd sheet, +.osd { + color: rgba(255, 255, 255, 0.9); + border: none; + background-color: rgba(0, 0, 0, 0.7); + background-clip: padding-box; +} + +/* Text selection */ +selection { + background-color: alpha(@view_fg_color,0.1); + color: transparent; +} + +selection:focus-within { + background-color: alpha(@accent_bg_color,0.3); +} + +:not(window):drop(active):focus, +:not(window):drop(active) { + border-color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; + caret-color: @accent_bg_color; +} + +.navigation-sidebar :not(window):drop(active):focus, +.navigation-sidebar :not(window):drop(active), +placessidebar :not(window):drop(active):focus, +placessidebar :not(window):drop(active), +stackswitcher :not(window):drop(active):focus, +stackswitcher :not(window):drop(active), +expander-widget :not(window):drop(active):focus, +expander-widget :not(window):drop(active) { + box-shadow: none; +} + +/* Outline for low res icons */ +.lowres-icon { + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); +} + +/* Drop shadow for large icons */ +.icon-dropshadow { + -gtk-icon-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); +} + +@keyframes needs_attention { + from { + background-image: radial-gradient(farthest-side, @accent_color 0%, transparent 0%); + } + to { + background-image: radial-gradient(farthest-side, @accent_color 95%, transparent); + } +} + +stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, +stackswitcher > button.needs-attention > image { + animation: needs_attention 150ms ease-in; + background-image: radial-gradient(farthest-side, @accent_color 96%, transparent); + background-size: 6px 6px; + background-repeat: no-repeat; + background-position: right 3px; +} + +stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl), +stackswitcher > button.needs-attention > image:dir(rtl) { + background-position: left 3px; +} + +avatar { + border-radius: 9999px; + font-weight: bold; +} + +avatar.color1 { + background-image: linear-gradient(#83b6ec, #337fdc); + color: #cfe1f5; +} + +avatar.color2 { + background-image: linear-gradient(#7ad9f1, #0f9ac8); + color: #caeaf2; +} + +avatar.color3 { + background-image: linear-gradient(#8de6b1, #29ae74); + color: #cef8d8; +} + +avatar.color4 { + background-image: linear-gradient(#b5e98a, #6ab85b); + color: #e6f9d7; +} + +avatar.color5 { + background-image: linear-gradient(#f8e359, #d29d09); + color: #f9f4e1; +} + +avatar.color6 { + background-image: linear-gradient(#ffcb62, #d68400); + color: #ffead1; +} + +avatar.color7 { + background-image: linear-gradient(#ffa95a, #ed5b00); + color: #ffe5c5; +} + +avatar.color8 { + background-image: linear-gradient(#f78773, #e62d42); + color: #f8d2ce; +} + +avatar.color9 { + background-image: linear-gradient(#e973ab, #e33b6a); + color: #fac7de; +} + +avatar.color10 { + background-image: linear-gradient(#cb78d4, #9945b5); + color: #e7c2e8; +} + +avatar.color11 { + background-image: linear-gradient(#9e91e8, #7a59ca); + color: #d5d2f5; +} + +avatar.color12 { + background-image: linear-gradient(#e3cf9c, #b08952); + color: #f2eade; +} + +avatar.color13 { + background-image: linear-gradient(#be916d, #785336); + color: #e5d6ca; +} + +avatar.color14 { + background-image: linear-gradient(#c0bfbc, #6e6d71); + color: #d8d7d3; +} + +avatar.contrasted { + color: white; +} + +avatar.image { + background: none; +} + +bottom-sheet > dimming { + background-color: alpha(@shade_color,2); +} + +bottom-sheet > sheet { + border-top-left-radius: 12px; + border-top-right-radius: 12px; + box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.07), 0 3px 20px 10px rgba(0, 0, 0, 0.05), 0 6px 32px 16px rgba(0, 0, 0, 0.02), 0 0 0 1px @shade_color; +} + +bottom-sheet > sheet > drag-handle { + background-color: alpha(currentColor,0.25); + min-width: 60px; + min-height: 4px; + margin: 6px; + border-radius: 9999px; +} + +bottom-sheet > sheet > outline { + border-top-left-radius: 12px; + border-top-right-radius: 12px; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +bottom-sheet > sheet > outline.flush-left { + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +bottom-sheet > sheet > outline.flush-right { + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +bottom-sheet > sheet > outline.flush-left.flush-right { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); +} + +notebook > header > tabs > arrow, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay, +button { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), outline 300ms cubic-bezier(0, 0, 0.2, 1); + background-color: alpha(currentColor,0.05); + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; + outline: 0 solid transparent; + outline-offset: 2px; + color: currentColor; +} + +notebook > header > tabs > arrow:focus, row.spin spinbutton > button.image-button.up:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:focus, +button:focus { + outline: 2px solid alpha(@accent_color,0.35); + outline-offset: 0; +} + +notebook > header > tabs > arrow:hover, row.spin spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:hover, +button:hover { + background-color: alpha(currentColor,0.12); + color: currentColor; + outline: 0 solid transparent; + -gtk-icon-filter: brightness(1.2); +} + +notebook > header > tabs > arrow.keyboard-activating, row.spin spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay.keyboard-activating, +button.keyboard-activating, notebook > header > tabs > arrow:active, row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:active, +button:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.12) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.12); + color: currentColor; + outline: 0 solid transparent; +} + +notebook > header > tabs > arrow:disabled, row.spin spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:disabled, +button:disabled { + background-color: alpha(currentColor,0.05); + color: alpha(currentColor,0.45); + outline-color: transparent; +} + +notebook > header > tabs > arrow:checked, row.spin spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked, +button:checked { + background-color: @accent_color; + color: @accent_fg_color; +} + +notebook > header > tabs > arrow:checked:hover, row.spin spinbutton > button.image-button.up:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +row.spin spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked:hover, +button:checked:hover { + outline-color: transparent; + background-color: mix(@accent_fg_color,@accent_color,0.95); + color: @accent_fg_color; +} + +notebook > header > tabs > arrow:checked:active, row.spin spinbutton > button.image-button.up:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +row.spin spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked:active, +button:checked:active { + animation: none; + outline-color: transparent; + background-color: mix(@accent_fg_color,@accent_color,0.88); + background-image: none; + color: @accent_fg_color; +} + +notebook > header > tabs > arrow:checked:disabled, row.spin spinbutton > button.image-button.up:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +row.spin spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked:disabled, +button:checked:disabled { + outline-color: transparent; + background-color: alpha(@accent_color,0.35); + color: alpha(@accent_fg_color,0.35); +} + +panelstatusbar > menubutton > button, +panelstatusbar > paneltogglebutton button, #NautilusPathButton, searchbar > revealer > box .close, actionbar > revealer > box menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, actionbar > revealer > box button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow, window.dialog.message.csd .dialog-action-area > button, popover.menu box.circular-buttons button.circular.image-button.model, popover.menu box.inline-buttons button.image-button.model, filechooser #pathbarbox > stack > box > button, +filechooser #pathbarbox > stack > box > box > button, +filechooser #pathbarbox > stack > box > menubutton > button, button.sidebar-button, button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close, calendar > header > button, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, splitbutton.flat > button, +splitbutton.flat > menubutton > button, menubutton.flat > button, +button.flat { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), outline 300ms cubic-bezier(0, 0, 0.2, 1); + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; + background-color: transparent; + outline: 0 solid transparent; + outline-offset: 2px; + color: alpha(currentColor,0.75); +} + +panelstatusbar > menubutton > button:focus:not(:hover):not(:active), +panelstatusbar > paneltogglebutton button:focus:not(:hover):not(:active), #NautilusPathButton:focus:not(:hover):not(:active), searchbar > revealer > box .close:focus:not(:hover):not(:active), actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), actionbar > revealer > box button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:focus:not(:hover):not(:active):not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:focus:not(:hover):not(:active):not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:focus:not(:hover):not(:active), window.dialog.message.csd .dialog-action-area > button:focus:not(:hover):not(:active), popover.menu box.circular-buttons button.circular.image-button.model:focus:not(:hover):not(:active), popover.menu box.inline-buttons button.image-button.model:focus:not(:hover):not(:active), filechooser #pathbarbox > stack > box > button:focus:not(:hover):not(:active), +filechooser #pathbarbox > stack > box > box > button:focus:not(:hover):not(:active), +filechooser #pathbarbox > stack > box > menubutton > button:focus:not(:hover):not(:active), button.sidebar-button:focus:not(:hover):not(:active), button.emoji-section.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:focus:not(:hover):not(:active), calendar > header > button:focus:not(:hover):not(:active), actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), splitbutton.flat > button:focus:not(:hover):not(:active), +splitbutton.flat > menubutton > button:focus:not(:hover):not(:active), menubutton.flat > button:focus:not(:hover):not(:active), +button.flat:focus:not(:hover):not(:active) { + color: currentColor; + outline: 2px solid alpha(currentColor,0.05); + outline-offset: -2px; +} + +panelstatusbar > menubutton > button:hover, +panelstatusbar > paneltogglebutton button:hover, #NautilusPathButton:hover, searchbar > revealer > box .close:hover, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, actionbar > revealer > box button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:hover, window.dialog.message.csd .dialog-action-area > button:hover, popover.menu box.circular-buttons button.circular.image-button.model:hover, popover.menu box.inline-buttons button.image-button.model:hover, filechooser #pathbarbox > stack > box > button:hover, +filechooser #pathbarbox > stack > box > box > button:hover, +filechooser #pathbarbox > stack > box > menubutton > button:hover, button.sidebar-button:hover, button.emoji-section.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:hover, calendar > header > button:hover, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, splitbutton.flat > button:hover, +splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, +button.flat:hover { + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +panelstatusbar > menubutton > button.keyboard-activating, +panelstatusbar > paneltogglebutton button.keyboard-activating, .keyboard-activating#NautilusPathButton, searchbar > revealer > box .keyboard-activating.close, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, actionbar > revealer > box button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow.keyboard-activating, window.dialog.message.csd .dialog-action-area > button.keyboard-activating, popover.menu box.circular-buttons button.keyboard-activating.circular.image-button.model, popover.menu box.inline-buttons button.keyboard-activating.image-button.model, filechooser #pathbarbox > stack > box > button.keyboard-activating, +filechooser #pathbarbox > stack > box > box > button.keyboard-activating, +filechooser #pathbarbox > stack > box > menubutton > button.keyboard-activating, button.keyboard-activating.sidebar-button, button.keyboard-activating.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .keyboard-activating.close, calendar > header > button.keyboard-activating, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, splitbutton.flat > button.keyboard-activating, +splitbutton.flat > menubutton > button.keyboard-activating, menubutton.flat > button.keyboard-activating, +button.keyboard-activating.flat, +window.shortcuts headerbar.keyboard-activating.titlebar, +window.appchooser headerbar.keyboard-activating.titlebar, +window.colorchooser headerbar.keyboard-activating.titlebar, +window.aboutdialog headerbar.keyboard-activating.titlebar, +window.pagesetup headerbar.keyboard-activating.titlebar, +window.print headerbar.keyboard-activating.titlebar, panelstatusbar > menubutton > button:active, +panelstatusbar > paneltogglebutton button:active, #NautilusPathButton:active, searchbar > revealer > box .close:active, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, actionbar > revealer > box button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:active, window.dialog.message.csd .dialog-action-area > button:active, popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.inline-buttons button.image-button.model:active, filechooser #pathbarbox > stack > box > button:active, +filechooser #pathbarbox > stack > box > box > button:active, +filechooser #pathbarbox > stack > box > menubutton > button:active, button.sidebar-button:active, button.emoji-section.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:active, calendar > header > button:active, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, splitbutton.flat > button:active, +splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, +button.flat:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.12) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +panelstatusbar > menubutton > button:disabled, +panelstatusbar > paneltogglebutton button:disabled, #NautilusPathButton:disabled, searchbar > revealer > box .close:disabled, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, actionbar > revealer > box button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, popover.menu box.circular-buttons button.circular.image-button.model:disabled, popover.menu box.inline-buttons button.image-button.model:disabled, filechooser #pathbarbox > stack > box > button:disabled, +filechooser #pathbarbox > stack > box > box > button:disabled, +filechooser #pathbarbox > stack > box > menubutton > button:disabled, button.sidebar-button:disabled, button.emoji-section.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:disabled, calendar > header > button:disabled, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, splitbutton.flat > button:disabled, +splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, +button.flat:disabled { + color: alpha(currentColor,0.35); + background-color: transparent; +} + +panelstatusbar > menubutton > button:checked, +panelstatusbar > paneltogglebutton button:checked, #NautilusPathButton:checked, searchbar > revealer > box .close:checked, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, actionbar > revealer > box button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked, window.dialog.message.csd .dialog-action-area > button:checked, popover.menu box.circular-buttons button.circular.image-button.model:checked, popover.menu box.inline-buttons button.image-button.model:checked, filechooser #pathbarbox > stack > box > button:checked, +filechooser #pathbarbox > stack > box > box > button:checked, +filechooser #pathbarbox > stack > box > menubutton > button:checked, button.sidebar-button:checked, button.emoji-section.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked, calendar > header > button:checked, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, splitbutton.flat > button:checked, +splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, +button.flat:checked { + background-color: alpha(currentColor,0.1); + color: currentColor; +} + +panelstatusbar > menubutton > button:checked:hover, +panelstatusbar > paneltogglebutton button:checked:hover, #NautilusPathButton:checked:hover, searchbar > revealer > box .close:checked:hover, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, actionbar > revealer > box button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked:hover, window.dialog.message.csd .dialog-action-area > button:checked:hover, popover.menu box.circular-buttons button.circular.image-button.model:checked:hover, popover.menu box.inline-buttons button.image-button.model:checked:hover, filechooser #pathbarbox > stack > box > button:checked:hover, +filechooser #pathbarbox > stack > box > box > button:checked:hover, +filechooser #pathbarbox > stack > box > menubutton > button:checked:hover, button.sidebar-button:checked:hover, button.emoji-section.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked:hover, calendar > header > button:checked:hover, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, splitbutton.flat > button:checked:hover, +splitbutton.flat > menubutton > button:checked:hover, menubutton.flat > button:checked:hover, +button.flat:checked:hover { + background-color: alpha(currentColor,0.15); + color: currentColor; +} + +panelstatusbar > menubutton > button:checked:active, +panelstatusbar > paneltogglebutton button:checked:active, #NautilusPathButton:checked:active, searchbar > revealer > box .close:checked:active, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, actionbar > revealer > box button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked:active, window.dialog.message.csd .dialog-action-area > button:checked:active, popover.menu box.circular-buttons button.circular.image-button.model:checked:active, popover.menu box.inline-buttons button.image-button.model:checked:active, filechooser #pathbarbox > stack > box > button:checked:active, +filechooser #pathbarbox > stack > box > box > button:checked:active, +filechooser #pathbarbox > stack > box > menubutton > button:checked:active, button.sidebar-button:checked:active, button.emoji-section.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked:active, calendar > header > button:checked:active, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, splitbutton.flat > button:checked:active, +splitbutton.flat > menubutton > button:checked:active, menubutton.flat > button:checked:active, +button.flat:checked:active { + animation: none; + outline-color: transparent; + background-color: alpha(currentColor,0.2); + background-image: none; + color: currentColor; +} + +panelstatusbar > menubutton > button:checked:disabled, +panelstatusbar > paneltogglebutton button:checked:disabled, #NautilusPathButton:checked:disabled, searchbar > revealer > box .close:checked:disabled, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, actionbar > revealer > box button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, popover.menu box.circular-buttons button.circular.image-button.model:checked:disabled, popover.menu box.inline-buttons button.image-button.model:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, +filechooser #pathbarbox > stack > box > box > button:checked:disabled, +filechooser #pathbarbox > stack > box > menubutton > button:checked:disabled, button.sidebar-button:checked:disabled, button.emoji-section.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked:disabled, calendar > header > button:checked:disabled, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, splitbutton.flat > button:checked:disabled, +splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, +button.flat:checked:disabled { + background-color: alpha(currentColor,0.1); + color: alpha(currentColor,0.45); +} + +actionbar > revealer > box popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, actionbar > revealer > box popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.05); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, actionbar > revealer > box popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.12); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, actionbar > revealer > box popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, actionbar > revealer > box popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.2); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, actionbar > revealer > box popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.1); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, actionbar > revealer > box popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.15); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, actionbar > revealer > box popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, actionbar > revealer > box popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.2); +} + +actionbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button, splitbutton.suggested-action > menubutton > button, splitbutton.destructive-action > button, splitbutton.destructive-action > menubutton > button, splitbutton.opaque > button, splitbutton.opaque > menubutton > button, menubutton.suggested-action > button, menubutton.destructive-action > button, menubutton.opaque > button, +button.suggested-action, +button.destructive-action, +button.opaque { + box-shadow: none; +} + +actionbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button, splitbutton.suggested-action > menubutton > button, splitbutton.destructive-action > button, splitbutton.destructive-action > menubutton > button, splitbutton.opaque > button, splitbutton.opaque > menubutton > button, menubutton.suggested-action > button, menubutton.destructive-action > button, menubutton.opaque > button, +button.suggested-action, +button.destructive-action, +button.opaque { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +actionbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:focus:focus-visible, splitbutton.suggested-action > menubutton > button:focus:focus-visible, splitbutton.destructive-action > button:focus:focus-visible, splitbutton.destructive-action > menubutton > button:focus:focus-visible, splitbutton.opaque > button:focus:focus-visible, splitbutton.opaque > menubutton > button:focus:focus-visible, menubutton.suggested-action > button:focus:focus-visible, menubutton.destructive-action > button:focus:focus-visible, menubutton.opaque > button:focus:focus-visible, +button.suggested-action:focus:focus-visible, +button.destructive-action:focus:focus-visible, +button.opaque:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 1px; +} + +.osd actionbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd searchbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd .toolbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd headerbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd actionbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd searchbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd .toolbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd headerbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd actionbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd searchbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd .toolbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd headerbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd splitbutton.suggested-action > button:focus:focus-visible, .osd splitbutton.suggested-action > menubutton > button:focus:focus-visible, .osd splitbutton.destructive-action > button:focus:focus-visible, .osd splitbutton.destructive-action > menubutton > button:focus:focus-visible, .osd splitbutton.opaque > button:focus:focus-visible, .osd splitbutton.opaque > menubutton > button:focus:focus-visible, .osd menubutton.suggested-action > button:focus:focus-visible, .osd menubutton.destructive-action > button:focus:focus-visible, .osd menubutton.opaque > button:focus:focus-visible, +.osd button.suggested-action:focus:focus-visible, +.osd button.destructive-action:focus:focus-visible, +.osd button.opaque:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +actionbar > revealer > box menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:hover, splitbutton.suggested-action > menubutton > button:hover, splitbutton.destructive-action > button:hover, splitbutton.destructive-action > menubutton > button:hover, splitbutton.opaque > button:hover, splitbutton.opaque > menubutton > button:hover, menubutton.suggested-action > button:hover, menubutton.destructive-action > button:hover, menubutton.opaque > button:hover, +button.suggested-action:hover, +button.destructive-action:hover, +button.opaque:hover { + background-image: image(alpha(currentColor,0.1)); +} + +actionbar > revealer > box menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button.keyboard-activating, splitbutton.suggested-action > menubutton > button.keyboard-activating, splitbutton.destructive-action > button.keyboard-activating, splitbutton.destructive-action > menubutton > button.keyboard-activating, splitbutton.opaque > button.keyboard-activating, splitbutton.opaque > menubutton > button.keyboard-activating, menubutton.suggested-action > button.keyboard-activating, menubutton.destructive-action > button.keyboard-activating, menubutton.opaque > button.keyboard-activating, +button.keyboard-activating.suggested-action, +button.keyboard-activating.destructive-action, +button.keyboard-activating.opaque, actionbar > revealer > box menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:active, splitbutton.suggested-action > menubutton > button:active, splitbutton.destructive-action > button:active, splitbutton.destructive-action > menubutton > button:active, splitbutton.opaque > button:active, splitbutton.opaque > menubutton > button:active, menubutton.suggested-action > button:active, menubutton.destructive-action > button:active, menubutton.opaque > button:active, +button.suggested-action:active, +button.destructive-action:active, +button.opaque:active { + background-image: image(rgba(0, 0, 0, 0.2)); +} + +actionbar > revealer > box menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button:checked, menubutton.suggested-action > button:checked, menubutton.destructive-action > button:checked, menubutton.opaque > button:checked, +button.suggested-action:checked, +button.destructive-action:checked, +button.opaque:checked { + background-image: image(rgba(0, 0, 0, 0.15)); +} + +actionbar > revealer > box menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked:hover, splitbutton.suggested-action > menubutton > button:checked:hover, splitbutton.destructive-action > button:checked:hover, splitbutton.destructive-action > menubutton > button:checked:hover, splitbutton.opaque > button:checked:hover, splitbutton.opaque > menubutton > button:checked:hover, menubutton.suggested-action > button:checked:hover, menubutton.destructive-action > button:checked:hover, menubutton.opaque > button:checked:hover, +button.suggested-action:checked:hover, +button.destructive-action:checked:hover, +button.opaque:checked:hover { + background-image: image(rgba(0, 0, 0, 0.05)); +} + +actionbar > revealer > box menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked.keyboard-activating, splitbutton.suggested-action > menubutton > button:checked.keyboard-activating, splitbutton.destructive-action > button:checked.keyboard-activating, splitbutton.destructive-action > menubutton > button:checked.keyboard-activating, splitbutton.opaque > button:checked.keyboard-activating, splitbutton.opaque > menubutton > button:checked.keyboard-activating, menubutton.suggested-action > button:checked.keyboard-activating, menubutton.destructive-action > button:checked.keyboard-activating, menubutton.opaque > button:checked.keyboard-activating, +button.suggested-action:checked.keyboard-activating, +button.destructive-action:checked.keyboard-activating, +button.opaque:checked.keyboard-activating, actionbar > revealer > box menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked:active, splitbutton.suggested-action > menubutton > button:checked:active, splitbutton.destructive-action > button:checked:active, splitbutton.destructive-action > menubutton > button:checked:active, splitbutton.opaque > button:checked:active, splitbutton.opaque > menubutton > button:checked:active, menubutton.suggested-action > button:checked:active, menubutton.destructive-action > button:checked:active, menubutton.opaque > button:checked:active, +button.suggested-action:checked:active, +button.destructive-action:checked:active, +button.opaque:checked:active { + background-image: image(rgba(0, 0, 0, 0.3)); +} + +.nautilus-window .floating-bar button { + min-height: 24px; + min-width: 24px; + padding: 0; + border-radius: 9999px; +} + + +button { + min-height: 24px; + min-width: 16px; + padding: 6px 10px; + border-radius: 6px; + font-weight: bold; +} + +.osd button:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + + +button:disabled { + filter: opacity(0.45); +} + + +button:disabled label { + filter: none; +} + + +button.image-button { + min-width: 24px; + padding-left: 6px; + padding-right: 6px; +} + + +button.image-button.close-button { + padding: 0; + border-radius: 9999px; +} + + +button.text-button { + padding-left: 16px; + padding-right: 16px; +} + + +button.text-button.image-button, +button.image-text-button { + padding-left: 9px; + padding-right: 9px; +} + + +button.text-button.image-button > box, +button.text-button.image-button > box > box, +button.image-text-button > box, +button.image-text-button > box > box { + border-spacing: 4px; +} + + +button.text-button.image-button > box > label, +button.text-button.image-button > box > box > label, +button.image-text-button > box > label, +button.image-text-button > box > box > label { + padding-left: 2px; + padding-right: 2px; +} + + +button.arrow-button { + padding-left: 9px; + padding-right: 9px; +} + + +button.arrow-button > box { + border-spacing: 4px; +} + + +button.arrow-button.text-button > box { + border-spacing: 4px; +} + +dropdown:drop(active) button.combo, combobox:drop(active) button.combo, +button.flat:drop(active), menubutton.osd > button:drop(active), +button.osd:drop(active), +button:drop(active) { + color: @accent_bg_color; + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +menubutton.osd > button, +button.osd { + min-width: 32px; + min-height: 32px; + color: rgba(255, 255, 255, 0.9); + background-color: rgba(0, 0, 0, 0.65); +} + +menubutton.osd > button, +button.osd { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +menubutton.osd > button:focus:focus-visible, +button.osd:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 1px; +} + +menubutton.osd > button:hover, +button.osd:hover { + color: white; + background-color: alpha(mix(black,currentColor,0.15),0.65); +} + +menubutton.osd > button.keyboard-activating, menubutton.osd > button:active, +button.osd.keyboard-activating, +button.osd:active { + color: white; + background-color: alpha(mix(black,currentColor,0.25),0.65); +} + +menubutton.osd > button:checked, +button.osd:checked { + background-color: alpha(mix(black,currentColor,0.2),0.65); +} + +menubutton.osd > button:checked:hover, +button.osd:checked:hover { + background-color: alpha(mix(black,currentColor,0.25),0.65); +} + +menubutton.osd > button:checked.keyboard-activating, menubutton.osd > button:checked:active, +button.osd:checked.keyboard-activating, +button.osd:checked:active { + background-color: alpha(mix(black,currentColor,0.35),0.65); +} + +menubutton.osd > button:focus:focus-visible, .osd button.osd:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + + +button.opaque { + background-color: mix(@window_bg_color,@window_fg_color,0.15); + color: @window_fg_color; +} + + +button.destructive-action { + color: @destructive_fg_color; +} + + +button.destructive-action, +button.destructive-action:checked { + background-color: @destructive_bg_color; +} + + +button.suggested-action { + color: @accent_fg_color; +} + + +button.suggested-action, +button.suggested-action:checked { + background-color: @accent_bg_color; +} + +.osd button.flat:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +stackswitcher > button > label { + padding: 0 6px; + margin: 0 -6px; +} + +stackswitcher > button > image { + padding: 3px 6px; + margin: -3px -6px; +} + +stackswitcher > button.text-button { + min-width: 100px; +} + + +button.font separator { + background-color: transparent; +} + + +button.font > box { + border-spacing: 6px; +} + + +button.font > box > box > label { + font-weight: bold; +} + +row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), menubutton.circular > button, +button.circular { + min-width: 34px; + min-height: 34px; + padding: 0; + border-radius: 9999px; +} + +row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child label, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child label, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child label, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) label, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child label, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child label, button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) label, menubutton.circular > button label, +button.circular label { + padding: 0; +} + +menubutton.pill > button, +button.pill { + padding: 10px 32px; + border-radius: 9999px; +} + + +button.card { + background-color: @card_bg_color; + background-clip: padding-box; + font-weight: inherit; + padding: 0; +} + + +button.card { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + + +button.card:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + + +button.card:hover { + background-image: image(alpha(currentColor,0.04)); +} + + +button.card.keyboard-activating, +button.card:active { + background-image: image(alpha(currentColor,0.08)); +} + + +button.card:checked { + background-color: @card_bg_color; + background-image: image(alpha(@accent_bg_color,0.25)); +} + + +button.card:checked:hover { + background-image: image(alpha(@accent_bg_color,0.32)); +} + + +button.card:checked.keyboard-activating, +button.card:checked:active { + background-image: image(alpha(@accent_bg_color,0.39)); +} + + +button.card:checked.has-open-popup { + background-image: image(alpha(@accent_bg_color,0.32)); +} + +.osd button.card:checked { + background-color: alpha(currentColor,0.1); +} + + +button.card:drop(active) { + color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; +} + +button.link, button.link:hover, button.link:active, button.link:checked, columnview > header > button, treeview.view > header > button, window.print treeview.dialog-action-box > header > button { + background-color: transparent; +} + +button.color { + padding: 5px; +} + +button.color > colorswatch:only-child { + border-radius: 2.5px; +} + +button.color > colorswatch:only-child > overlay { + border-radius: 2px; +} + +button.color > colorswatch:only-child:disabled { + filter: none; +} + +button.color > colorswatch:only-child.light > overlay { + border-color: alpha(@view_fg_color,0.1); +} + +menubutton.osd { + background: none; + color: inherit; +} + +menubutton.suggested-action { + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +menubutton.destructive-action { + background-color: @destructive_bg_color; + color: @destructive_fg_color; +} + +menubutton.opaque { + background-color: mix(@window_bg_color,@window_fg_color,0.15); + color: @window_fg_color; +} + +menubutton.suggested-action, menubutton.destructive-action, menubutton.opaque { + border-radius: 6px; +} + +menubutton.suggested-action.circular, menubutton.suggested-action.pill, menubutton.destructive-action.circular, menubutton.destructive-action.pill, menubutton.opaque.circular, menubutton.opaque.pill { + border-radius: 9999px; +} + +menubutton.suggested-action > button, menubutton.suggested-action > button:checked, menubutton.destructive-action > button, menubutton.destructive-action > button:checked, menubutton.opaque > button, menubutton.opaque > button:checked { + background-color: transparent; + color: inherit; +} + +menubutton.image-button > button { + min-width: 24px; + padding-left: 5px; + padding-right: 5px; +} + +menubutton.card > button { + border-radius: 12px; +} + +menubutton arrow { + min-height: 16px; + min-width: 16px; +} + +menubutton arrow.none { + -gtk-icon-source: -gtk-icontheme("open-menu-symbolic"); +} + +menubutton arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +menubutton arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); +} + +menubutton arrow.left { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); +} + +menubutton arrow.right { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + +splitbutton { + border-radius: 6px; +} + +splitbutton, splitbutton > separator { + transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background; +} + +splitbutton > separator { + margin-top: 6px; + margin-bottom: 6px; + background: none; +} + +splitbutton > menubutton > button { + padding-left: 4px; + padding-right: 4px; +} + +splitbutton.image-button > button { + min-width: 24px; + padding-left: 5px; + padding-right: 5px; +} + +splitbutton.text-button.image-button > button, splitbutton.image-text-button > button { + padding-left: 9px; + padding-right: 9px; +} + +splitbutton.text-button.image-button > button > box, splitbutton.image-text-button > button > box { + border-spacing: 6px; +} + +splitbutton:disabled { + filter: opacity(0.45); +} + +splitbutton:disabled > button, splitbutton:disabled > menubutton > button { + filter: none; +} + +splitbutton > button:dir(ltr), +splitbutton > menubutton > button:dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: -1px; +} + +splitbutton > button:dir(rtl), +splitbutton > menubutton > button:dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, splitbutton.flat > separator { + background: alpha(currentColor,0.12); +} + +actionbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.flat:hover, splitbutton.flat:active, splitbutton.flat:checked { + background: alpha(currentColor,0.07); +} + +actionbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, actionbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, actionbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, splitbutton.flat:hover > separator, splitbutton.flat:active > separator, splitbutton.flat:checked > separator { + background: none; +} + +actionbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.flat:disabled { + filter: opacity(0.3); +} + +actionbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, searchbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, .toolbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, headerbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, actionbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, searchbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, .toolbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, headerbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, splitbutton.flat:disabled > button:disabled, splitbutton.flat:disabled > menubutton > button:disabled { + filter: none; +} + +actionbar > revealer > box splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, splitbutton.flat:focus-within:focus-visible > separator { + background: none; +} + +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, splitbutton.flat > button, +splitbutton.flat > menubutton > button { + border-radius: 6px; +} + +splitbutton.suggested-action { + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +splitbutton.destructive-action { + background-color: @destructive_bg_color; + color: @destructive_fg_color; +} + +splitbutton.opaque { + background-color: mix(@window_bg_color,@window_fg_color,0.15); + color: @window_fg_color; +} + +splitbutton.suggested-action > button, splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button, splitbutton.opaque > menubutton > button:checked { + color: inherit; + background-color: transparent; +} + +splitbutton.suggested-action > menubutton > button:dir(ltr), splitbutton.destructive-action > menubutton > button:dir(ltr), splitbutton.opaque > menubutton > button:dir(ltr) { + box-shadow: inset 1px 0 alpha(currentColor,0.3); +} + +splitbutton.suggested-action > menubutton > button:dir(rtl), splitbutton.destructive-action > menubutton > button:dir(rtl), splitbutton.opaque > menubutton > button:dir(rtl) { + box-shadow: inset -1px 0 alpha(currentColor,0.3); +} + +splitbutton > menubutton > button > arrow.none { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +buttoncontent > box { + border-spacing: 6px; +} + +buttoncontent > box > label { + font-weight: bold; +} + +buttoncontent > box > label:dir(ltr) { + padding-right: 2px; +} + +buttoncontent > box > label:dir(rtl) { + padding-left: 2px; +} + +.arrow-button > box > buttoncontent > box > label:dir(ltr), splitbutton > button > buttoncontent > box > label:dir(ltr) { + padding-right: 0; +} + +.arrow-button > box > buttoncontent > box > label:dir(rtl), splitbutton > button > buttoncontent > box > label:dir(rtl) { + padding-left: 0; +} + +tabbutton label { + font-weight: 800; + font-size: 8pt; +} + +tabbutton label.small { + font-size: 6pt; +} + +tabbutton indicatorbin > indicator, +tabbutton indicatorbin > mask { + transform: translate(-1px, 1px); +} + +calendar { + color: @view_fg_color; + background-clip: padding-box; + border: 1px solid alpha(currentColor,0.12); + font-feature-settings: "tnum"; +} + +calendar > header { + border-bottom: 1px solid alpha(currentColor,0.12); +} + +calendar > header > button { + border-radius: 0; +} + +calendar > grid { + padding-left: 3px; + padding-bottom: 3px; +} + +calendar > grid > label.today { + box-shadow: inset 0px -2px alpha(currentColor,0.12); +} + +calendar > grid > label.today:selected { + box-shadow: none; +} + +calendar > grid > label { + margin-top: 3px; + margin-right: 3px; +} + +calendar > grid > label { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +calendar > grid > label:focus { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +calendar > grid > label.day-number { + padding: 3px; +} + +calendar > grid > label.day-number:checked { + border-radius: 6px; + background-color: alpha(@accent_bg_color,0.3); +} + +calendar > grid > label.day-number:selected { + border-radius: 6px; + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +calendar > grid > label.day-number.other-month { + color: alpha(currentColor,0.3); +} + +checkbutton { + border-spacing: 4px; + border-radius: 9px; + padding: 3px; +} + +checkbutton { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +checkbutton:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd checkbutton:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +checkbutton.text-button { + padding: 4px; +} + +check, +radio { + min-height: 20px; + min-width: 20px; + -gtk-icon-size: 20px; + padding: 0; + box-shadow: 0 0 0 0 transparent; + background-color: alpha(currentColor,0.12); + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1); +} + +check:not(:checked):not(:indeterminate):hover, +radio:not(:checked):not(:indeterminate):hover { + box-shadow: 0 0 0 6px alpha(currentColor,0.05); + background-color: alpha(currentColor,0.15); +} + +check:not(:checked):not(:indeterminate):active, +radio:not(:checked):not(:indeterminate):active { + box-shadow: 0 0 0 6px alpha(currentColor,0.12); + background-color: alpha(currentColor,0.2); +} + +check:checked, check:indeterminate, +radio:checked, +radio:indeterminate { + background-color: @accent_bg_color; + color: @accent_fg_color; + box-shadow: none; +} + +check:checked:hover, check:indeterminate:hover, +radio:checked:hover, +radio:indeterminate:hover { + background-image: image(alpha(currentColor,0.1)); + box-shadow: 0 0 0 6px alpha(@accent_bg_color,0.05); +} + +check:checked:active, check:indeterminate:active, +radio:checked:active, +radio:indeterminate:active { + background-image: image(alpha(currentColor,0.2)); + box-shadow: 0 0 0 6px alpha(@accent_bg_color,0.12); +} + +check:disabled, +radio:disabled { + filter: opacity(0.45); +} + +.osd check:checked, .osd check:indeterminate, .osd radio:checked, .osd radio:indeterminate { + background-color: rgba(255, 255, 255, 0.75); + color: rgba(0, 0, 0, 0.75); +} + +check { + border-radius: 100%; +} + +check:checked { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/checkbox-checked-symbolic@2.svg"))); +} + +check:indeterminate { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-mixed-symbolic.svg")), -gtk-recolor(url("assets/checkbox-mixed-symbolic@2.svg"))); +} + +radio { + border-radius: 100%; +} + +radio:checked { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic@2.svg"))); +} + +radio:indeterminate { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/radio-mixed-symbolic.svg")), -gtk-recolor(url("assets/radio-mixed-symbolic@2.svg"))); +} + +checkbutton.selection-mode { + border-radius: 9999px; +} + +checkbutton.selection-mode check, checkbutton.selection-mode radio { + padding: 3px; + border-radius: 9999px; +} + +checkbutton.selection-mode label:dir(ltr) { + margin-right: 6px; +} + +checkbutton.selection-mode label:dir(rtl) { + margin-left: 6px; +} + +check:not(:checked):active { + -gtk-icon-transform: rotate(90deg); +} + +colorswatch { + outline: 0 solid transparent; + outline-offset: 6px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +colorswatch:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 4px; + outline-offset: -2px; +} + +colorswatch.top { + border-top-left-radius: 6.5px; + border-top-right-radius: 6.5px; +} + +colorswatch.top > overlay { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +colorswatch.bottom { + border-bottom-left-radius: 6.5px; + border-bottom-right-radius: 6.5px; +} + +colorswatch.bottom > overlay { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} + +colorswatch.left, colorswatch:first-child:not(.top) { + border-top-left-radius: 6.5px; + border-bottom-left-radius: 6.5px; +} + +colorswatch.left > overlay, colorswatch:first-child:not(.top) > overlay { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +colorswatch.right, colorswatch:last-child:not(.bottom) { + border-top-right-radius: 6.5px; + border-bottom-right-radius: 6.5px; +} + +colorswatch.right > overlay, colorswatch:last-child:not(.bottom) > overlay { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +colorswatch.dark > overlay { + color: white; +} + +colorswatch.light > overlay { + color: rgba(0, 0, 0, 0.75); + box-shadow: inset 0 0 0 1px alpha(@view_fg_color,0.1); +} + +colorswatch:drop(active).light > overlay { + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +colorswatch:drop(active).dark > overlay { + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +colorswatch#add-color-button > overlay { + border-radius: 6px 0 0 6px; +} + +colorswatch#add-color-button:only-child > overlay { + border-radius: 6px; +} + +colorswatch:disabled { + filter: opacity(0.45); +} + +colorswatch#editor-color-sample { + border-radius: 6px; +} + +colorswatch#editor-color-sample > overlay { + border-radius: 6.5px; +} + +plane { + outline: 0 solid transparent; + outline-offset: 6px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +plane:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 2px; +} + +colorchooser .popover.osd { + border-radius: 12px; +} + +columnview, treeview.view, window.print treeview.dialog-action-box { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +columnview:focus:focus-visible, treeview.view:focus:focus-visible, window.print treeview.dialog-action-box:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +columnview:drop(active), treeview.view:drop(active), window.print treeview.dialog-action-box:drop(active) { + box-shadow: none; +} + +columnview > header > button, treeview.view > header > button, window.print treeview.dialog-action-box > header > button { + padding: 3px 9px; + border-radius: 0; + box-shadow: none; + line-height: 100%; + border-left: 1px solid alpha(currentColor,0.12); + border-bottom: 1px solid alpha(currentColor,0.12); +} + +columnview > header > button:first-child, treeview.view > header > button:first-child, window.print treeview.dialog-action-box > header > button:first-child { + border-left-width: 0; +} + +columnview > header > button > box, treeview.view > header > button > box, window.print treeview.dialog-action-box > header > button > box { + color: alpha(currentColor,0.4); + font-weight: 700; + font-size: 9pt; + border-spacing: 6px; +} + +columnview > header > button:hover > box, treeview.view > header > button:hover > box, window.print treeview.dialog-action-box > header > button:hover > box { + color: alpha(currentColor,0.7); + box-shadow: none; +} + +columnview > header > button:active > box, treeview.view > header > button:active > box, window.print treeview.dialog-action-box > header > button:active > box { + color: currentColor; +} + +columnview > header > button sort-indicator, treeview.view > header > button sort-indicator, window.print treeview.dialog-action-box > header > button sort-indicator { + min-height: 16px; + min-width: 16px; +} + +columnview > header > button sort-indicator.ascending, treeview.view > header > button sort-indicator.ascending, window.print treeview.dialog-action-box > header > button sort-indicator.ascending { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); +} + +columnview > header > button sort-indicator.descending, treeview.view > header > button sort-indicator.descending, window.print treeview.dialog-action-box > header > button sort-indicator.descending { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +columnview button.dnd:active, columnview button.dnd:selected, columnview button.dnd:hover, columnview button.dnd, treeview.view button.dnd, window.print treeview.dialog-action-box button.dnd, +columnview header.button.dnd:active, +columnview header.button.dnd:selected, +columnview header.button.dnd:hover, +columnview header.button.dnd, +treeview.view header.button.dnd, +window.print treeview.dialog-action-box header.button.dnd { + color: @accent_fg_color; + background-color: @accent_bg_color; + transition: none; +} + +columnview.view > listview.view, treeview.view > listview.view, window.print columnview.dialog-action-box > listview.view, window.print treeview.dialog-action-box > listview.view, window.print columnview.view > listview.dialog-action-box, window.print treeview.view > listview.dialog-action-box, window.print columnview.dialog-action-box > listview.dialog-action-box, window.print treeview.dialog-action-box > listview.dialog-action-box { + background: none; + color: inherit; +} + +columnview > listview > row, treeview.view > listview > row, window.print treeview.dialog-action-box > listview > row { + padding: 0; +} + +columnview > listview > row > cell, treeview.view > listview > row > cell, window.print treeview.dialog-action-box > listview > row > cell { + padding: 8px 6px; +} + +columnview > listview > row > cell:not(:first-child), treeview.view > listview > row > cell:not(:first-child), window.print treeview.dialog-action-box > listview > row > cell:not(:first-child) { + border-left: 1px solid transparent; +} + +columnview.column-separators > listview > row > cell, treeview.column-separators.view > listview > row > cell, window.print treeview.column-separators.dialog-action-box > listview > row > cell, +columnview.column-separators > header > button, +treeview.column-separators.view > header > button, +window.print treeview.column-separators.dialog-action-box > header > button { + border-left-color: alpha(currentColor,0.12); +} + +columnview > listview:not(.horizontal).separators > row:not(.separator), treeview.view > listview:not(.horizontal).separators > row:not(.separator), window.print treeview.dialog-action-box > listview:not(.horizontal).separators > row:not(.separator) { + border-top: 1px solid alpha(currentColor,0.12); + border-bottom: none; +} + +columnview.data-table > listview > row > cell, treeview.data-table.view > listview > row > cell, window.print treeview.data-table.dialog-action-box > listview > row > cell { + padding-top: 3px; + padding-bottom: 3px; +} + +columnview ~ undershoot.top, treeview.view ~ undershoot.top, window.print treeview.dialog-action-box ~ undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +columnview row:not(:selected) cell editablelabel:not(.editing):focus-within, treeview.view row:not(:selected) cell editablelabel:not(.editing):focus-within, window.print treeview.dialog-action-box row:not(:selected) cell editablelabel:not(.editing):focus-within { + outline: 2px solid alpha(@accent_color,0.45); +} + +columnview row:not(:selected) cell editablelabel.editing:focus-within, treeview.view row:not(:selected) cell editablelabel.editing:focus-within, window.print treeview.dialog-action-box row:not(:selected) cell editablelabel.editing:focus-within { + outline: 2px solid @accent_color; +} + +treeexpander { + border-spacing: 4px; +} + +.dialog-action-area { + margin: 6px; + border-spacing: 6px; +} + +/**************** + * Print dialog * +*****************/ +window.print drawing { + color: @window_fg_color; + background: none; + border: none; + padding: 0; +} + +window.print drawing paper { + background-color: white; + color: rgba(0, 0, 0, 0.8); + background-clip: padding-box; + border: 1px solid alpha(currentColor,0.12); +} + +/******************** + * Page setup dalog * + ********************/ +/****************** + * GtkAboutDialog * + ******************/ +window.aboutdialog image.large-icons { + -gtk-icon-size: 128px; +} + +/************************* + * GtkColorChooserDialog * + *************************/ +/************* + * AdwDialog * + *************/ +floating-sheet > dimming { + background-color: alpha(@shade_color,2); +} + +floating-sheet > sheet { + border-radius: 12px; + box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.07), 0 3px 20px 10px rgba(0, 0, 0, 0.05), 0 6px 32px 16px rgba(0, 0, 0, 0.02), 0 0 0 1px @shade_color; + outline: 1px solid rgba(255, 255, 255, 0.08); + outline-offset: -1px; +} + +dialog.bottom-sheet.landscape sheet { + margin-left: 30px; + margin-right: 30px; +} + +dialog.bottom-sheet.landscape sheet > outline.flush-left, dialog.bottom-sheet.landscape sheet > outline.flush-right, dialog.bottom-sheet.landscape sheet > outline.flush-left.flush-right { + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +dialog-host > dialog.background { + background: none; +} + +dialog-host > dialog.background sheet { + background-color: @window_bg_color; + color: @window_fg_color; +} + +dialog-host > dialog.view, window.print dialog-host > dialog.dialog-action-box { + background: none; +} + +dialog-host > dialog.osd { + background: none; +} + +/*********************** + * GtkAppChooserDialog * + ***********************/ +window.appchooser headerbar.titlebar > windowhandle { + padding-top: 3px; +} + +window.appchooser headerbar.titlebar box.start + box { + margin-top: -6px; + margin-bottom: -6px; + min-height: 12px; +} + +window.appchooser searchbar { + background: none; +} + +window.appchooser .dialog-vbox > box > box:not(.dialog-action-area) { + margin: 6px; +} + +window.appchooser .dialog-action-area { + margin-top: 0; +} + +/**************** + * GtkAssistant * + ****************/ +window.assistant .sidebar { + padding: 6px; + background-color: @sidebar_bg_color; + color: @sidebar_fg_color; +} + +window.assistant .sidebar:not(separator):dir(ltr) { + border-right: none; + box-shadow: inset -1px 0 alpha(currentColor,0.12); +} + +window.assistant .sidebar:not(separator):dir(rtl) { + box-shadow: inset 1px 0 alpha(currentColor,0.12); +} + +window.assistant .sidebar:backdrop { + background-color: @sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +window.assistant .sidebar > label { + padding: 6px 12px; + border-radius: 6px; +} + +window.assistant .sidebar > label.highlight { + background-color: alpha(currentColor,0.1); +} + +/*************** + * GtkComboBox * + ***************/ +combobox button { + padding-top: 2px; + padding-bottom: 2px; + min-height: 30px; +} + +/*************** + * GtkIconView * + ***************/ +iconview { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +iconview:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +iconview:drop(active) { + box-shadow: none; +} + +iconview > dndtarget:drop(active) { + border-style: solid; + border-width: 1px; + border-color: @accent_bg_color; +} + +/************** + * GtkInfoBar * + **************/ +infobar > revealer > box { + padding: 6px; + padding-bottom: 7px; + border-spacing: 6px; + box-shadow: inset 0 -1px alpha(currentColor,0.12); +} + +infobar > revealer > box > box { + border-spacing: 6px; +} + +infobar.action:hover > revealer > box { + background-image: image(alpha(currentColor,0.05)); +} + +infobar.action:active > revealer > box { + background-image: image(alpha(currentColor,0.1)); +} + +infobar.info > revealer > box { + background-color: mix(@accent_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar.question > revealer > box { + background-color: mix(@accent_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar.warning > revealer > box { + background-color: mix(@warning_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar.error > revealer > box { + background-color: mix(@error_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar .close { + min-width: 18px; + min-height: 18px; + padding: 4px; + border-radius: 50%; +} + +/**************** + * GtkStatusBar * + ****************/ +statusbar { + padding: 6px 10px 6px 10px; +} + +/*************** + * GtkTreeView * + ***************/ +treeview.view, window.print treeview.dialog-action-box { + border-left-color: mix(currentColor,@view_bg_color,0.8); + border-top-color: mix(currentColor,@view_bg_color,0.8); +} + +treeview.view:selected:focus, treeview.view:selected, window.print treeview.dialog-action-box:selected { + border-radius: 0; +} + +treeview.view.separator, window.print treeview.separator.dialog-action-box { + min-height: 2px; + color: alpha(currentColor,0.12); +} + +treeview.view.expander, window.print treeview.expander.dialog-action-box { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); + color: alpha(currentColor,0.7); +} + +treeview.view.expander:dir(rtl), window.print treeview.expander.dialog-action-box:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); +} + +treeview.view.expander:hover, window.print treeview.expander.dialog-action-box:hover, treeview.view.expander:active, window.print treeview.expander.dialog-action-box:active { + color: currentColor; +} + +treeview.view.expander:checked, window.print treeview.expander.dialog-action-box:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +treeview.view.expander:disabled, window.print treeview.expander.dialog-action-box:disabled { + color: alpha(currentColor,0.45); +} + +treeview.view > dndtarget:drop(active), window.print treeview.dialog-action-box > dndtarget:drop(active) { + border-style: solid none; + border-width: 1px; + border-color: @accent_bg_color; +} + +treeview.view > dndtarget:drop(active).after, window.print treeview.dialog-action-box > dndtarget:drop(active).after { + border-top-style: none; +} + +treeview.view > dndtarget:drop(active).before, window.print treeview.dialog-action-box > dndtarget:drop(active).before { + border-bottom-style: none; +} + +treeview.view > header > button, window.print treeview.dialog-action-box > header > button { + padding-left: 6px; + padding-right: 6px; +} + +treeview.view.progressbar, window.print treeview.progressbar.dialog-action-box { + box-shadow: none; +} + +treeview.view.progressbar, window.print treeview.progressbar.dialog-action-box, treeview.view.progressbar:selected { + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +treeview.view.trough, window.print treeview.trough.dialog-action-box { + background-color: alpha(currentColor,0.1); +} + +treeview.view ~ undershoot.top, window.print treeview.dialog-action-box ~ undershoot.top { + box-shadow: none; + background: none; +} + +treeview.view acceleditor > label, window.print treeview.dialog-action-box acceleditor > label { + background-color: mix(currentColor,@view_bg_color,0.9); +} + +treeview.navigation-sidebar { + padding: 0; +} + +treeview.navigation-sidebar:selected:focus, treeview.navigation-sidebar:selected { + background-color: alpha(currentColor,0.1); +} + +treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { + background-color: @view_bg_color; + transition-property: color, background; +} + +treeview entry.flat, treeview entry { + border-radius: 0; + background-image: none; + background-color: @view_bg_color; +} + +treeview entry.flat:focus-within, treeview entry:focus-within { + border-color: @accent_color; +} + +treeview spinbutton:not(.vertical) { + min-height: 0; + border-style: none; + border-radius: 0; +} + +treeview spinbutton:not(.vertical) > text { + min-height: 0; + padding: 1px 2px; +} + +.sidebar:not(separator):dir(ltr), .sidebar:not(separator).left, .sidebar:not(separator).left:dir(rtl) { + border-right: 1px solid alpha(currentColor,0.12); + border-left-style: none; +} + +.sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { + border-left: 1px solid alpha(currentColor,0.12); + border-right-style: none; +} + +.sidebar listview.view, .sidebar window.print listview.dialog-action-box, window.print .sidebar listview.dialog-action-box, +.sidebar list { + background-color: transparent; + color: inherit; +} + +paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar, .sidebar-pane .sidebar.left, .sidebar-pane .sidebar.right, .sidebar-pane .sidebar.left:dir(rtl), .sidebar-pane .sidebar:dir(rtl), .sidebar-pane .sidebar:dir(ltr), .sidebar-pane .sidebar { + border-style: none; +} + +.large-title { + font-weight: 300; + font-size: 24pt; +} + +dropdown > button > box, combobox > button > box { + border-spacing: 6px; +} + +dropdown > button > box > stack > row.activatable:hover, combobox > button > box > stack > row.activatable:hover, dropdown > button > box > stack > row.activatable:active, combobox > button > box > stack > row.activatable:active { + background: none; +} + +dropdown arrow, combobox arrow { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + min-height: 16px; + min-width: 16px; +} + +dropdown:drop(active), combobox:drop(active) { + box-shadow: none; +} + +dropdown popover.menu, combobox popover.menu { + padding-top: 6px; +} + +dropdown popover.menu listview > row, combobox popover.menu listview > row { + min-width: 0; +} + +dropdown popover.menu .dropdown-searchbar, combobox popover.menu .dropdown-searchbar { + padding: 6px; +} + +dropdown popover.menu .dropdown-searchbar + scrolledwindow > undershoot.top, combobox popover.menu .dropdown-searchbar + scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover.emoji-picker > contents { + padding: 0; +} + +.emoji-searchbar { + padding: 6px; +} + +.emoji-toolbar { + padding: 3px; +} + +button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + min-width: 32px; + min-height: 32px; +} + +popover.emoji-picker emoji { + font-size: x-large; + padding: 6px; + border-radius: 6px; +} + +popover.emoji-picker emoji:focus, popover.emoji-picker emoji:hover { + background: alpha(currentColor,0.07); +} + +popover.emoji-picker emoji:active { + background: alpha(currentColor,0.16); +} + +popover.emoji-picker scrolledwindow.view, popover.emoji-picker window.print scrolledwindow.dialog-action-box, window.print popover.emoji-picker scrolledwindow.dialog-action-box { + background: none; + color: inherit; +} + +popover.emoji-picker scrolledwindow.view > undershoot.top, popover.emoji-picker window.print scrolledwindow.dialog-action-box > undershoot.top, window.print popover.emoji-picker scrolledwindow.dialog-action-box > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover.emoji-picker scrolledwindow.view > undershoot.bottom, popover.emoji-picker window.print scrolledwindow.dialog-action-box > undershoot.bottom, window.print popover.emoji-picker scrolledwindow.dialog-action-box > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover.emoji-completion > contents { + padding: 6px; + padding-bottom: 4px; +} + +emoji-completion-row { + padding: 6px; + margin-bottom: 2px; + border-radius: 6px; +} + +emoji-completion-row:dir(ltr) { + padding-right: 12px; +} + +emoji-completion-row:dir(rtl) { + padding-left: 12px; +} + +emoji-completion-row > box { + border-spacing: 6px; +} + +emoji-completion-row:focus, emoji-completion-row:hover { + background-color: alpha(currentColor,0.1); + color: @popover_fg_color; +} + +emoji-completion-row:active { + background-color: alpha(currentColor,0.16); +} + +spinbutton, +entry { + min-height: 36px; + padding-left: 9px; + padding-right: 9px; + border-radius: 6px; + border-spacing: 6px; + background-color: alpha(currentColor,0.05); + background-clip: padding-box; + caret-color: currentColor; +} + +spinbutton, +entry { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton:focus-within, +entry:focus-within { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd spinbutton:focus-within, .osd entry:focus-within { + outline-color: rgba(255, 255, 255, 0.5); +} + +spinbutton > text > block-cursor, +entry > text > block-cursor { + color: @view_bg_color; + background-color: @view_fg_color; +} + +spinbutton.flat, +entry.flat:focus-within, +entry.flat:disabled, +entry.flat { + min-height: 0; + padding: 2px; + background-color: transparent; + box-shadow: none; + border-radius: 0; +} + +spinbutton:disabled, +entry:disabled { + filter: opacity(0.45); +} + +spinbutton.error, +entry.error { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton.error:focus-within, +entry.error:focus-within { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +spinbutton.error > text > selection:focus-within, +entry.error > text > selection:focus-within { + background-color: alpha(@error_color,0.2); +} + +spinbutton.error > text > cursor-handle > contents, +entry.error > text > cursor-handle > contents { + background-color: currentColor; +} + +spinbutton.error > progress > trough > progress, +entry.error > progress > trough > progress { + border-color: currentColor; +} + +spinbutton.warning, +entry.warning { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton.warning:focus-within, +entry.warning:focus-within { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +spinbutton.warning > text > selection:focus-within, +entry.warning > text > selection:focus-within { + background-color: alpha(@warning_color,0.2); +} + +spinbutton.warning > text > cursor-handle > contents, +entry.warning > text > cursor-handle > contents { + background-color: currentColor; +} + +spinbutton.warning > progress > trough > progress, +entry.warning > progress > trough > progress { + border-color: currentColor; +} + +spinbutton.success, +entry.success { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton.success:focus-within, +entry.success:focus-within { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +spinbutton.success > text > selection:focus-within, +entry.success > text > selection:focus-within { + background-color: alpha(@success_color,0.2); +} + +spinbutton.success > text > cursor-handle > contents, +entry.success > text > cursor-handle > contents { + background-color: currentColor; +} + +spinbutton.success > progress > trough > progress, +entry.success > progress > trough > progress { + border-color: currentColor; +} + +spinbutton > image, +entry > image { + opacity: .7; +} + +spinbutton > image:hover, +entry > image:hover { + opacity: 1; +} + +spinbutton > image:active, +entry > image:active { + opacity: .8; +} + +spinbutton > image.left, +entry > image.left { + margin-right: 6px; +} + +spinbutton > image.right, +entry > image.right { + margin-left: 6px; +} + +spinbutton.password image.caps-lock-indicator, +entry.password image.caps-lock-indicator { + opacity: 0.3; +} + +spinbutton:drop(active), +entry:drop(active):focus-within, +entry:drop(active) { + border-color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; +} + +spinbutton > progress, +entry > progress { + margin-bottom: 3px; +} + +spinbutton > progress > trough > progress, +entry > progress > trough > progress { + background-color: transparent; + background-image: none; + border-radius: 0; + border-width: 0 0 2px; + border-color: @accent_bg_color; + border-style: solid; + box-shadow: none; +} + +.osd spinbutton > progress > trough > progress, .osd entry > progress > trough > progress { + border-color: rgba(255, 255, 255, 0.75); +} + +expander { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + +expander:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); +} + +expander:disabled { + filter: opacity(0.45); +} + +expander:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +expander-widget > box > title { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +expander-widget:focus:focus-visible > box > title { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +expander-widget > box > title { + border-radius: 6px; +} + +expander-widget > box > title > expander { + opacity: .7; +} + +expander-widget > box > title:hover > expander, expander-widget > box > title:active > expander { + opacity: 1; +} + +placessidebar .navigation-sidebar > row { + padding: 0; +} + +placessidebar .navigation-sidebar > row > revealer { + padding: 0 14px; +} + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(ltr) { + padding-right: 8px; +} + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(rtl) { + padding-left: 8px; +} + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(ltr) { + padding-right: 2px; +} + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(rtl) { + padding-left: 2px; +} + +button.sidebar-button { + min-height: 26px; + min-width: 26px; + margin-top: 3px; + margin-bottom: 3px; + padding: 0; + border-radius: 100%; +} + +placessidebar .navigation-sidebar > row:selected:active { + box-shadow: none; +} + +placessidebar .navigation-sidebar > row.sidebar-placeholder-row { + padding: 0 8px; + min-height: 2px; + background-image: image(@accent_bg_color); + background-clip: content-box; +} + +placessidebar .navigation-sidebar > row.sidebar-new-bookmark-row { + color: @accent_color; +} + +placessidebar .navigation-sidebar > row:drop(active):not(:disabled) { + color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; +} + +row image.sidebar-icon { + opacity: 0.7; +} + +row .sidebar-button { + opacity: 0.7; +} + +row .sidebar-button:hover, row .sidebar-button:active, row .sidebar-button.keyboard-activating { + opacity: 1; +} + +placesview .server-list-button > image { + transition: -gtk-icon-transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + -gtk-icon-transform: rotate(0turn); +} + +placesview .server-list-button:checked > image { + -gtk-icon-transform: rotate(-0.5turn); +} + +placesview > actionbar > revealer > box > box { + border-spacing: 6px; +} + +filechooser { + box-shadow: 0 1px alpha(currentColor,0.12); +} + +filechooser #pathbarbox { + border-bottom: 1px solid alpha(currentColor,0.12); +} + +filechooser pathbar button:not(.image-button) { + padding-left: 9px; + padding-right: 9px; +} + +filechooser pathbar button > box { + border-spacing: 4px; +} + +filechooser pathbar button > box > label { + padding-left: 2px; + padding-right: 2px; +} + +filechooser columnview > listview > row > cell, filechooser treeview.view > listview > row > cell, filechooser window.print treeview.dialog-action-box > listview > row > cell, window.print filechooser treeview.dialog-action-box > listview > row > cell { + padding: 0; +} + +filechooser columnview > listview > row > cell > filelistcell, filechooser treeview.view > listview > row > cell > filelistcell, filechooser window.print treeview.dialog-action-box > listview > row > cell > filelistcell, window.print filechooser treeview.dialog-action-box > listview > row > cell > filelistcell { + padding: 8px 6px; +} + +filechooser gridview { + padding: 15px; +} + +filechooser gridview ~ undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +filechooser gridview > child { + border-radius: 12px; + padding: 0; + margin: 3px; +} + +filechooser gridview > child > filelistcell { + padding: 6px 12px; +} + +filechooser gridview > child filethumbnail image { + filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); +} + +filechooser gridview > child box { + border-spacing: 6px; +} + +filechooser > box > actionbar { + box-shadow: 0 -1px alpha(currentColor,0.12); +} + +filechooser > box > actionbar > revealer > box { + box-shadow: none; + padding-top: 6px; +} + +filechooser scrolledwindow + actionbar > revealer > box { + background-color: mix(@accent_bg_color,@view_bg_color,0.7); + color: @window_fg_color; + box-shadow: none; + padding-top: 6px; + font-weight: bold; +} + +filechooser scrolledwindow + actionbar > revealer > box:backdrop { + background-color: mix(@accent_bg_color,@view_bg_color,0.85); +} + +filechooser placesview > stack > scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +filechooser placesview > actionbar > revealer > box { + background: @view_bg_color; + color: @view_fg_color; + box-shadow: none; + padding-top: 6px; +} + +filechooser placesview > actionbar > revealer > box:backdrop { + background: @view_bg_color; + transition: none; +} + +filechooser placessidebar { + background-color: @sidebar_bg_color; + color: @sidebar_fg_color; +} + +filechooser placessidebar:backdrop { + background-color: @sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +filechooser paned.horizontal > separator:dir(ltr) { + box-shadow: inset 1px 0 @sidebar_bg_color, inset 1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:dir(ltr):backdrop { + box-shadow: inset 1px 0 @sidebar_backdrop_color, inset 1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:dir(rtl) { + box-shadow: inset -1px 0 @sidebar_bg_color, inset -1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:dir(rtl):backdrop { + box-shadow: inset -1px 0 @sidebar_backdrop_color, inset -1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:backdrop { + transition: box-shadow 200ms ease-out; +} + +/* Fix header bar height in the file chooser */ +window.filechooser headerbar box.start + box.vertical { + margin-top: -6px; + margin-bottom: -6px; + min-height: 12px; +} + +headerbar { + min-height: 48px; + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; + margin: 0; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +headerbar > windowhandle > box { + padding: 6px; +} + +headerbar > windowhandle > box > box.start, +headerbar > windowhandle > box > box.end { + border-spacing: 6px; +} + +headerbar > windowhandle > box > box.start:dir(ltr), +headerbar > windowhandle > box > box.end:dir(rtl), headerbar > windowhandle > box > widget > box.start:dir(ltr), +headerbar > windowhandle > box > widget > box.end:dir(rtl) { + margin-right: 6px; +} + +headerbar > windowhandle > box > box.start:dir(rtl), +headerbar > windowhandle > box > box.end:dir(ltr), headerbar > windowhandle > box > widget > box.start:dir(rtl), +headerbar > windowhandle > box > widget > box.end:dir(ltr) { + margin-left: 6px; +} + +headerbar:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +headerbar:backdrop > windowhandle { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +headerbar.default-decoration { + padding: 0; + margin: 0; + border: none; + min-height: 36px; + background-color: @headerbar_bg_color; + box-shadow: none; +} + +headerbar.default-decoration:backdrop { + background-color: @headerbar_backdrop_color; +} + +headerbar.default-decoration > windowhandle > box { + padding: 3px; +} + +headerbar.default-decoration windowcontrols > button { + min-width: 16px; + min-height: 16px; + margin: 0 4px; + padding: 0; +} + +headerbar.default-decoration windowcontrols > .icon { + margin: 6px; +} + +.maximized headerbar, .fullscreen headerbar, .tiled headerbar, .tiled-top headerbar, .tiled-right headerbar, .tiled-bottom headerbar, .tiled-left headerbar, .solid-csd headerbar { + border-radius: 0; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +window > .titlebar:not(.flat) { + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +window > .titlebar headerbar:not(.flat) { + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +window > headerbar.titlebar, +window > .titlebar headerbar { + min-height: 48px; +} + +window > headerbar.titlebar > windowhandle > box, +window > .titlebar headerbar > windowhandle > box { + padding-bottom: 6px; +} + +window > headerbar.titlebar.default-decoration, +window > .titlebar headerbar.default-decoration { + min-height: 36px; + box-shadow: none; +} + +window > headerbar.titlebar.default-decoration > windowhandle > box, +window > .titlebar headerbar.default-decoration > windowhandle > box { + padding: 3px; +} + +leaflet:first-child > headerbar + separator { + background-color: @headerbar_backdrop_color; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +leaflet:first-child > headerbar + separator:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +toolbarview > .top-bar headerbar, +toolbarview > .bottom-bar headerbar, headerbar.flat, window.shortcuts headerbar.titlebar, window.print headerbar.titlebar, window.pagesetup headerbar.titlebar, window.aboutdialog headerbar.titlebar, window.colorchooser headerbar.titlebar, window.appchooser headerbar.titlebar { + background: none; + color: inherit; + min-height: 48px; + box-shadow: none; +} + +toolbarview > .top-bar headerbar > windowhandle > box, +toolbarview > .bottom-bar headerbar > windowhandle > box, headerbar.flat > windowhandle > box, window.shortcuts headerbar.titlebar > windowhandle > box, window.print headerbar.titlebar > windowhandle > box, window.pagesetup headerbar.titlebar > windowhandle > box, window.aboutdialog headerbar.titlebar > windowhandle > box, window.colorchooser headerbar.titlebar > windowhandle > box, window.appchooser headerbar.titlebar > windowhandle > box { + padding-bottom: 6px; +} + +toolbarview > .top-bar headerbar.default-decoration, +toolbarview > .bottom-bar headerbar.default-decoration, headerbar.default-decoration.flat, window.shortcuts headerbar.default-decoration.titlebar, window.print headerbar.default-decoration.titlebar, window.pagesetup headerbar.default-decoration.titlebar, window.aboutdialog headerbar.default-decoration.titlebar, window.colorchooser headerbar.default-decoration.titlebar, window.appchooser headerbar.default-decoration.titlebar { + min-height: 36px; +} + +toolbarview > .top-bar headerbar.default-decoration > windowhandle > box, +toolbarview > .bottom-bar headerbar.default-decoration > windowhandle > box, headerbar.default-decoration.flat > windowhandle > box, window.shortcuts headerbar.default-decoration.titlebar > windowhandle > box, window.print headerbar.default-decoration.titlebar > windowhandle > box, window.pagesetup headerbar.default-decoration.titlebar > windowhandle > box, window.aboutdialog headerbar.default-decoration.titlebar > windowhandle > box, window.colorchooser headerbar.default-decoration.titlebar > windowhandle > box, window.appchooser headerbar.default-decoration.titlebar > windowhandle > box { + padding: 3px; +} + +.maximized toolbarview > .top-bar headerbar, toolbarview > .top-bar .maximized headerbar, +.maximized toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .maximized headerbar, .maximized headerbar.flat, .maximized window.shortcuts headerbar.titlebar, window.shortcuts .maximized headerbar.titlebar, .maximized window.print headerbar.titlebar, window.print .maximized headerbar.titlebar, .maximized window.pagesetup headerbar.titlebar, window.pagesetup .maximized headerbar.titlebar, .maximized window.aboutdialog headerbar.titlebar, window.aboutdialog .maximized headerbar.titlebar, .maximized window.colorchooser headerbar.titlebar, window.colorchooser .maximized headerbar.titlebar, .maximized window.appchooser headerbar.titlebar, window.appchooser .maximized headerbar.titlebar, .fullscreen toolbarview > .top-bar headerbar, toolbarview > .top-bar .fullscreen headerbar, +.fullscreen toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .fullscreen headerbar, .fullscreen headerbar.flat, .fullscreen window.shortcuts headerbar.titlebar, window.shortcuts .fullscreen headerbar.titlebar, .fullscreen window.print headerbar.titlebar, window.print .fullscreen headerbar.titlebar, .fullscreen window.pagesetup headerbar.titlebar, window.pagesetup .fullscreen headerbar.titlebar, .fullscreen window.aboutdialog headerbar.titlebar, window.aboutdialog .fullscreen headerbar.titlebar, .fullscreen window.colorchooser headerbar.titlebar, window.colorchooser .fullscreen headerbar.titlebar, .fullscreen window.appchooser headerbar.titlebar, window.appchooser .fullscreen headerbar.titlebar, .tiled toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled headerbar, +.tiled toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled headerbar, .tiled headerbar.flat, .tiled window.shortcuts headerbar.titlebar, window.shortcuts .tiled headerbar.titlebar, .tiled window.print headerbar.titlebar, window.print .tiled headerbar.titlebar, .tiled window.pagesetup headerbar.titlebar, window.pagesetup .tiled headerbar.titlebar, .tiled window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled headerbar.titlebar, .tiled window.colorchooser headerbar.titlebar, window.colorchooser .tiled headerbar.titlebar, .tiled window.appchooser headerbar.titlebar, window.appchooser .tiled headerbar.titlebar, .tiled-top toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-top headerbar, +.tiled-top toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-top headerbar, .tiled-top headerbar.flat, .tiled-top window.shortcuts headerbar.titlebar, window.shortcuts .tiled-top headerbar.titlebar, .tiled-top window.print headerbar.titlebar, window.print .tiled-top headerbar.titlebar, .tiled-top window.pagesetup headerbar.titlebar, window.pagesetup .tiled-top headerbar.titlebar, .tiled-top window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-top headerbar.titlebar, .tiled-top window.colorchooser headerbar.titlebar, window.colorchooser .tiled-top headerbar.titlebar, .tiled-top window.appchooser headerbar.titlebar, window.appchooser .tiled-top headerbar.titlebar, .tiled-right toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-right headerbar, +.tiled-right toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-right headerbar, .tiled-right headerbar.flat, .tiled-right window.shortcuts headerbar.titlebar, window.shortcuts .tiled-right headerbar.titlebar, .tiled-right window.print headerbar.titlebar, window.print .tiled-right headerbar.titlebar, .tiled-right window.pagesetup headerbar.titlebar, window.pagesetup .tiled-right headerbar.titlebar, .tiled-right window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-right headerbar.titlebar, .tiled-right window.colorchooser headerbar.titlebar, window.colorchooser .tiled-right headerbar.titlebar, .tiled-right window.appchooser headerbar.titlebar, window.appchooser .tiled-right headerbar.titlebar, .tiled-bottom toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-bottom headerbar, +.tiled-bottom toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-bottom headerbar, .tiled-bottom headerbar.flat, .tiled-bottom window.shortcuts headerbar.titlebar, window.shortcuts .tiled-bottom headerbar.titlebar, .tiled-bottom window.print headerbar.titlebar, window.print .tiled-bottom headerbar.titlebar, .tiled-bottom window.pagesetup headerbar.titlebar, window.pagesetup .tiled-bottom headerbar.titlebar, .tiled-bottom window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-bottom headerbar.titlebar, .tiled-bottom window.colorchooser headerbar.titlebar, window.colorchooser .tiled-bottom headerbar.titlebar, .tiled-bottom window.appchooser headerbar.titlebar, window.appchooser .tiled-bottom headerbar.titlebar, .tiled-left toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-left headerbar, +.tiled-left toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-left headerbar, .tiled-left headerbar.flat, .tiled-left window.shortcuts headerbar.titlebar, window.shortcuts .tiled-left headerbar.titlebar, .tiled-left window.print headerbar.titlebar, window.print .tiled-left headerbar.titlebar, .tiled-left window.pagesetup headerbar.titlebar, window.pagesetup .tiled-left headerbar.titlebar, .tiled-left window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-left headerbar.titlebar, .tiled-left window.colorchooser headerbar.titlebar, window.colorchooser .tiled-left headerbar.titlebar, .tiled-left window.appchooser headerbar.titlebar, window.appchooser .tiled-left headerbar.titlebar, .solid-csd toolbarview > .top-bar headerbar, toolbarview > .top-bar .solid-csd headerbar, +.solid-csd toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .solid-csd headerbar, .solid-csd headerbar.flat, .solid-csd window.shortcuts headerbar.titlebar, window.shortcuts .solid-csd headerbar.titlebar, .solid-csd window.print headerbar.titlebar, window.print .solid-csd headerbar.titlebar, .solid-csd window.pagesetup headerbar.titlebar, window.pagesetup .solid-csd headerbar.titlebar, .solid-csd window.aboutdialog headerbar.titlebar, window.aboutdialog .solid-csd headerbar.titlebar, .solid-csd window.colorchooser headerbar.titlebar, window.colorchooser .solid-csd headerbar.titlebar, .solid-csd window.appchooser headerbar.titlebar, window.appchooser .solid-csd headerbar.titlebar { + box-shadow: none; +} + +toolbarview > .top-bar headerbar:backdrop, +toolbarview > .bottom-bar headerbar:backdrop { + transition: none; +} + +toolbarview > .top-bar headerbar:backdrop > windowhandle, +toolbarview > .bottom-bar headerbar:backdrop > windowhandle { + filter: none; + transition: none; +} + +window.devel toolbarview > .top-bar headerbar > windowhandle, toolbarview > .top-bar window.devel headerbar > windowhandle, +window.devel toolbarview > .bottom-bar headerbar > windowhandle, +toolbarview > .bottom-bar window.devel headerbar > windowhandle { + background-image: none; +} + +toolbarview > .top-bar .collapse-spacing headerbar, +toolbarview > .bottom-bar .collapse-spacing headerbar, window.shortcuts headerbar.titlebar, window.appchooser headerbar.titlebar { + min-height: 42px; +} + +toolbarview > .top-bar .collapse-spacing headerbar > windowhandle > box, +toolbarview > .bottom-bar .collapse-spacing headerbar > windowhandle > box, window.shortcuts headerbar.titlebar > windowhandle > box, window.appchooser headerbar.titlebar > windowhandle > box { + padding-top: 3px; + padding-bottom: 3px; +} + +toolbarview > .top-bar .collapse-spacing headerbar.default-decoration, +toolbarview > .bottom-bar .collapse-spacing headerbar.default-decoration, window.shortcuts headerbar.default-decoration.titlebar, window.appchooser headerbar.default-decoration.titlebar { + min-height: 36px; +} + +toolbarview > .top-bar .collapse-spacing headerbar.default-decoration > windowhandle > box, +toolbarview > .bottom-bar .collapse-spacing headerbar.default-decoration > windowhandle > box, window.shortcuts headerbar.default-decoration.titlebar > windowhandle > box, window.appchooser headerbar.default-decoration.titlebar > windowhandle > box { + padding-top: 0px; + padding-bottom: 0px; +} + +.titlebar:not(headerbar) separator { + background-color: alpha(@headerbar_border_color,0.12); +} + +/********************* + * GtkWindowControls * + *********************/ +windowcontrols > button { + min-height: 16px; + min-width: 16px; + padding: 10px 0; + margin-left: 4px; + margin-right: 4px; + box-shadow: none; +} + +windowcontrols > button.minimize, windowcontrols > button.maximize, windowcontrols > button.close { + color: transparent; + background: none; +} + +windowcontrols > button.minimize:hover, windowcontrols > button.minimize:active, windowcontrols > button.maximize:hover, windowcontrols > button.maximize:active, windowcontrols > button.close:hover, windowcontrols > button.close:active { + box-shadow: none; +} + +windowcontrols > button.minimize:active > image, windowcontrols > button.maximize:active > image, windowcontrols > button.close:active > image { + background-color: alpha(black,0.25); +} + +windowcontrols > button.minimize:hover, windowcontrols > button.minimize:active, windowcontrols > button.maximize:hover, windowcontrols > button.maximize:active, windowcontrols > button.close:hover, windowcontrols > button.close:active { + color: white; +} + +windowcontrols > button.minimize:backdrop > image, windowcontrols > button.maximize:backdrop > image, windowcontrols > button.close:backdrop > image { + background-color: alpha(@headerbar_fg_color,0.3); +} + +windowcontrols > button.minimize:backdrop:hover, windowcontrols > button.minimize:backdrop:active, windowcontrols > button.maximize:backdrop:hover, windowcontrols > button.maximize:backdrop:active, windowcontrols > button.close:backdrop:hover, windowcontrols > button.close:backdrop:active { + color: alpha(@headerbar_fg_color,0.45); +} + +windowcontrols > button.minimize > image { + background-color: #fdbe04; +} + +windowcontrols > button.minimize:active > image { + background-color: mix(@headerbar_fg_color,#fdbe04,0.75); +} + +windowcontrols > button.maximize > image { + background-color: #38c76a; +} + +windowcontrols > button.maximize:active > image { + background-color: mix(@headerbar_fg_color,#38c76a,0.75); +} + +windowcontrols > button.close > image { + background-color: #fd5f51; +} + +windowcontrols > button.close:active > image { + background-color: mix(@headerbar_fg_color,#fd5f51,0.75); +} + +windowcontrols { + border-spacing: 6px; +} + +windowcontrols:not(.empty).start:dir(ltr), windowcontrols:not(.empty).end:dir(rtl) { + margin-right: 6px; + margin-left: 6px; +} + +windowcontrols:not(.empty).start:dir(rtl), windowcontrols:not(.empty).end:dir(ltr) { + margin-left: 6px; + margin-right: 6px; +} + +windowcontrols > button > image { + padding: 0; + border-radius: 100%; + transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +windowcontrols > .icon { + margin: 9px; +} + +/****************** + * AdwWindowTitle * + ******************/ +headerbar .title, +windowtitle .title { + padding-left: 12px; + padding-right: 12px; + font-weight: bold; +} + +headerbar .subtitle, +windowtitle .subtitle { + font-size: smaller; + padding-left: 12px; + padding-right: 12px; +} + +windowtitle { + margin-top: -6px; + margin-bottom: -6px; + min-height: 12px; +} + +window.devel headerbar > windowhandle { + background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")), image(transparent)); + background-repeat: repeat-x; +} + +window.devel dialog headerbar > windowhandle { + background-image: unset; + background-repeat: unset; +} + +label { + caret-color: currentColor; +} + +label:disabled { + filter: opacity(0.45); +} + +.dim-label, scale > value, progressbar > text, row.expander image.expander-row-arrow, row.property > box.header > box.title > .title, row.expander.property box > list > row > box.header > box.title > .title, row label.subtitle, spinbutton > text > placeholder, +entry > text > placeholder, headerbar .subtitle, +windowtitle .subtitle, label.separator { + opacity: 0.55; +} + +.accent { + color: @accent_color; +} + +.success { + color: @success_color; +} + +.warning { + color: @warning_color; +} + +.error { + color: @error_color; +} + +/********************** + * General Typography * + **********************/ +.title-1 { + font-weight: 800; + font-size: 20pt; +} + +.title-2 { + font-weight: 800; + font-size: 15pt; +} + +.title-3 { + font-weight: 700; + font-size: 15pt; +} + +.title-4 { + font-weight: 700; + font-size: 13pt; +} + +.heading, row.button .title, listview > header { + font-weight: 700; + font-size: 11pt; +} + +.body { + font-weight: 400; + font-size: 11pt; +} + +.caption-heading { + font-weight: 700; + font-size: 9pt; +} + +.caption { + font-weight: 400; + font-size: 9pt; +} + +.monospace { + font-family: monospace; +} + +.numeric, spinbutton, scale > value, progressbar > text { + font-feature-settings: "tnum"; +} + +/******************* + * Editable Labels * + *******************/ +editablelabel > stack > text { + color: @view_fg_color; + background-color: @view_bg_color; +} + +levelbar:disabled { + filter: opacity(0.45); +} + +levelbar.horizontal trough > block { + min-height: 8px; + border-radius: 99px; +} + +levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { + border-radius: 99px; +} + +levelbar.horizontal.discrete > trough > block { + min-height: 8px; + margin-right: 2px; + min-width: 26px; + border-radius: 0; +} + +levelbar.horizontal.discrete > trough > block:first-child { + border-radius: 99px 0 0 99px; +} + +levelbar.horizontal.discrete > trough > block:last-child { + border-radius: 0 99px 99px 0; + margin-right: 0; +} + +levelbar.vertical trough > block { + min-width: 8px; + border-radius: 99px; +} + +levelbar.vertical trough > block.empty, levelbar.vertical trough > block.full { + border-radius: 99px; +} + +levelbar.vertical.discrete > trough > block { + min-width: 8px; + margin-bottom: 2px; + min-height: 26px; + border-radius: 0; +} + +levelbar.vertical.discrete > trough > block:first-child { + border-radius: 99px 99px 0 0; +} + +levelbar.vertical.discrete > trough > block:last-child { + border-radius: 0 0 99px 99px; + margin-bottom: 0; +} + +levelbar > trough { + padding: 0; +} + +levelbar > trough > block.low { + background-color: @warning_bg_color; +} + +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { + background-color: @accent_bg_color; +} + +levelbar > trough > block.full { + background-color: @success_bg_color; +} + +levelbar > trough > block.empty { + background-color: alpha(currentColor,0.15); +} + +.osd levelbar > trough > block.high, .osd levelbar > trough > block:not(.empty) { + background-color: rgba(255, 255, 255, 0.75); +} + +.linked:not(.vertical) > button:dir(ltr):not(:first-child), .linked:not(.vertical) > button:dir(rtl):not(:last-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > button:dir(ltr):not(:last-child), .linked:not(.vertical) > button:dir(rtl):not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical button:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical button:not(:last-child) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > menubutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > menubutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > menubutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > menubutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical menubutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical menubutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > dropdown:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > combobox:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > combobox:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > dropdown:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > combobox:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > combobox:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical dropdown:not(:first-child) > button, .linked.vertical combobox:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical dropdown:not(:last-child) > button, .linked.vertical combobox:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > colorbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > colorbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical colorbutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical colorbutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > fontbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > fontbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical fontbutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical fontbutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > tabbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > tabbutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > tabbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > tabbutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical tabbutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical tabbutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > spinbutton:dir(ltr):not(:first-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:last-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > spinbutton:dir(ltr):not(:last-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical spinbutton:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical spinbutton:not(:last-child) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > entry:dir(ltr):not(:first-child), .linked:not(.vertical) > entry:dir(rtl):not(:last-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > entry:dir(ltr):not(:last-child), .linked:not(.vertical) > entry:dir(rtl):not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical entry:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical entry:not(:last-child) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > combobox:dir(ltr):not(:first-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:last-child) > box > button.combo { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > combobox:dir(ltr):not(:last-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:first-child) > box > button.combo { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical combobox:not(:first-child) > box > button.combo { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical combobox:not(:last-child) > box > button.combo { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > appchooserbutton:dir(ltr):not(:first-child) > combobox > box > button.combo, .linked:not(.vertical) > appchooserbutton:dir(rtl):not(:last-child) > combobox > box > button.combo { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > appchooserbutton:dir(ltr):not(:last-child) > combobox > box > button.combo, .linked:not(.vertical) > appchooserbutton:dir(rtl):not(:first-child) > combobox > box > button.combo { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical appchooserbutton:not(:first-child) > combobox > box > button.combo { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical appchooserbutton:not(:last-child) > combobox > box > button.combo { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +link, +button.link { + color: @accent_color; + text-decoration: underline; + font-weight: inherit; +} + +link:visited, +button.link:visited { + color: mix(@accent_color,@view_fg_color,0.2); +} + +link:hover, +button.link:hover { + color: shade(@accent_color,1.1); +} + +link:active, +button.link:active { + color: @accent_color; +} + +link:disabled, +button.link:disabled { + color: alpha(currentColor,0.45); +} + +.osd link, .osd button.link { + color: mix(@accent_bg_color,white,0.5); +} + +.osd link:visited, .osd button.link:visited { + color: mix(@accent_bg_color,white,0.25); +} + +.osd link:active, .osd button.link:active { + color: mix(@accent_bg_color,white,0.5); +} + +link { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +link:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd link:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +button.link > label { + text-decoration: underline; +} + +listview, +list { + color: @view_fg_color; + background-color: @view_bg_color; + background-clip: padding-box; + border-color: alpha(currentColor,0.12); +} + +listview > row, +list > row { + padding: 2px; + background-clip: padding-box; +} + +listview > row.expander, +list > row.expander { + padding: 0px; +} + +listview > row.expander .row-header, +list > row.expander .row-header { + padding: 2px; +} + +listview.horizontal row.separator, listview.separators.horizontal > row:not(.separator), +list.horizontal row.separator, +list.separators.horizontal > row:not(.separator) { + border-left: 1px solid alpha(currentColor,0.12); +} + +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 alpha(currentColor,0.12); +} + +list.frame { + border-radius: 6px; +} + +listview > header { + padding: 2px; + padding-top: 18px; + padding-bottom: 6px; +} + +row { + background-clip: padding-box; +} + +row { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd row:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +.osd row.activatable:hover { + background-color: alpha(currentColor,0.07); +} + +.osd row.activatable:active { + background-color: alpha(currentColor,0.16); +} + +.osd row.activatable.has-open-popup { + background-color: alpha(currentColor,0.07); +} + +.osd row.activatable:selected:hover { + background-color: alpha(currentColor,0.13); +} + +.osd row.activatable:selected:active { + background-color: alpha(currentColor,0.19); +} + +.osd row.activatable:selected.has-open-popup { + background-color: alpha(currentColor,0.13); +} + +.osd row:selected { + background-color: alpha(currentColor,0.1); +} + +row.activatable { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), font-weight 0; + box-shadow: none; + background-color: transparent; + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; +} + +row.activatable:hover { + background-color: alpha(currentColor,0.04); +} + +row.activatable:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, font-weight 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.04) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.04); + box-shadow: none; +} + +row.activatable.has-open-popup { + background-color: alpha(currentColor,0.04); +} + +row.activatable:selected:hover { + background-color: alpha(@accent_bg_color,0.32); +} + +row.activatable:selected:active { + background-color: alpha(@accent_bg_color,0.39); +} + +row.activatable:selected.has-open-popup { + background-color: alpha(@accent_bg_color,0.32); +} + +row:selected { + background-color: alpha(@accent_bg_color,0.25); +} + +/******************************************************* + * Rich Lists * + * Large list usually containing lots of widgets * + * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * + *******************************************************/ +.rich-list { + /* rich lists usually containing other widgets than just labels/text */ +} + +.rich-list > row { + padding: 8px 12px; + min-height: 32px; + /* should be tall even when only containing a label */ +} + +.rich-list > row > box { + border-spacing: 12px; +} + +.rich-list > header { + padding-left: 12px; + padding-right: 12px; +} + +/**************** + * AdwActionRow * + ****************/ +row label.subtitle { + font-size: smaller; +} + +row > box.header { + margin-left: 12px; + margin-right: 12px; + border-spacing: 6px; + min-height: 50px; +} + +row > box.header > .icon:disabled { + filter: opacity(0.45); +} + +row > box.header > box.title { + margin-top: 6px; + margin-bottom: 6px; + border-spacing: 3px; + padding: 0; +} + +row > box.header > box.title, +row > box.header > box.title > .title, +row > box.header > box.title > .subtitle { + padding: 0; + font-weight: inherit; +} + +row > box.header > .prefixes, +row > box.header > .suffixes { + border-spacing: 6px; +} + +row > box.header > .icon:dir(ltr), +row > box.header > .prefixes:dir(ltr) { + margin-right: 6px; +} + +row > box.header > .icon:dir(rtl), +row > box.header > .prefixes:dir(rtl) { + margin-left: 6px; +} + +row.property > box.header > box.title > .title, row.expander.property box > list > row > box.header > box.title > .title { + font-size: smaller; +} + +row.property > box.header > box.title > .subtitle, row.expander.property box > list > row > box.header > box.title > .subtitle { + font-size: inherit; + opacity: 1; +} + +/****************************** + * AdwEntryRow and AdwSpinRow * + ******************************/ +row.entry:disabled text { + opacity: 0.45; +} + +row.entry:disabled .dim-label, row.entry:disabled scale > value, row.entry:disabled progressbar > text, row.entry:disabled row.expander image.expander-row-arrow, row.expander row.entry:disabled image.expander-row-arrow, row.entry:disabled spinbutton > text > placeholder, +row.entry:disabled entry > text > placeholder, row.entry:disabled label.separator, row.entry:disabled row.property > box.header > box.title > .title, row.entry:disabled row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry:disabled box > list > row > box.header > box.title > .title, row.entry:disabled .subtitle { + opacity: 1; +} + +row.entry .edit-icon, row.entry .indicator { + min-width: 22px; + min-height: 22px; + padding: 6px; +} + +row.entry .edit-icon:disabled { + opacity: 0.3; +} + +row.entry .indicator { + opacity: 0.3; +} + +row.entry.monospace { + font-family: inherit; +} + +row.entry.monospace text { + font-family: monospace; +} + +row.spin spinbutton { + background: none; + border-spacing: 6px; + box-shadow: none; +} + +row.spin spinbutton, row.spin spinbutton:focus { + outline: none; +} + +row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child { + min-width: 28px; + min-height: 28px; + margin: 10px 2px; + border: none; +} + +row.spin:disabled spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:disabled, row.spin:disabled spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child:disabled, row.spin:disabled spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child:disabled, +row.spin:disabled spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):disabled, +row.spin:disabled spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child:disabled, +row.spin:disabled spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child:disabled { + filter: none; +} + +row.entry, +row.spin { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.focused, +row.spin.focused { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry:not(:selected).activatable.focused:hover, row.entry:not(:selected).activatable.focused:active, +row.spin:not(:selected).activatable.focused:hover, +row.spin:not(:selected).activatable.focused:active { + background-color: transparent; +} + +row.entry.error, +row.spin.error { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.error.focused, +row.spin.error.focused { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry.error text > selection:focus-within, +row.spin.error text > selection:focus-within { + background-color: alpha(@error_color,0.2); +} + +row.entry.error text > cursor-handle > contents, +row.spin.error text > cursor-handle > contents { + background-color: currentColor; +} + +row.entry.error .dim-label, row.entry.error scale > value, row.entry.error progressbar > text, row.entry.error row.expander image.expander-row-arrow, row.expander row.entry.error image.expander-row-arrow, row.entry.error spinbutton > text > placeholder, +row.entry.error entry > text > placeholder, row.entry.error label.separator, row.entry.error row.property > box.header > box.title > .title, row.entry.error row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry.error box > list > row > box.header > box.title > .title, row.entry.error .subtitle, +row.spin.error .dim-label, +row.spin.error scale > value, +row.spin.error progressbar > text, +row.spin.error row.expander image.expander-row-arrow, +row.expander row.spin.error image.expander-row-arrow, +row.spin.error spinbutton > text > placeholder, +row.spin.error entry > text > placeholder, +row.spin.error label.separator, +row.spin.error row.property > box.header > box.title > .title, +row.spin.error row.expander.property box > list > row > box.header > box.title > .title, +row.expander.property row.spin.error box > list > row > box.header > box.title > .title, +row.spin.error .subtitle { + opacity: 1; +} + +row.entry.error .suggested-action, +row.spin.error .suggested-action { + background-color: @error_bg_color; + color: @error_fg_color; +} + +row.entry.warning, +row.spin.warning { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.warning.focused, +row.spin.warning.focused { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry.warning text > selection:focus-within, +row.spin.warning text > selection:focus-within { + background-color: alpha(@warning_color,0.2); +} + +row.entry.warning text > cursor-handle > contents, +row.spin.warning text > cursor-handle > contents { + background-color: currentColor; +} + +row.entry.warning .dim-label, row.entry.warning scale > value, row.entry.warning progressbar > text, row.entry.warning row.expander image.expander-row-arrow, row.expander row.entry.warning image.expander-row-arrow, row.entry.warning spinbutton > text > placeholder, +row.entry.warning entry > text > placeholder, row.entry.warning label.separator, row.entry.warning row.property > box.header > box.title > .title, row.entry.warning row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry.warning box > list > row > box.header > box.title > .title, row.entry.warning .subtitle, +row.spin.warning .dim-label, +row.spin.warning scale > value, +row.spin.warning progressbar > text, +row.spin.warning row.expander image.expander-row-arrow, +row.expander row.spin.warning image.expander-row-arrow, +row.spin.warning spinbutton > text > placeholder, +row.spin.warning entry > text > placeholder, +row.spin.warning label.separator, +row.spin.warning row.property > box.header > box.title > .title, +row.spin.warning row.expander.property box > list > row > box.header > box.title > .title, +row.expander.property row.spin.warning box > list > row > box.header > box.title > .title, +row.spin.warning .subtitle { + opacity: 1; +} + +row.entry.warning .suggested-action, +row.spin.warning .suggested-action { + background-color: @warning_bg_color; + color: @warning_fg_color; +} + +row.entry.success, +row.spin.success { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.success.focused, +row.spin.success.focused { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry.success text > selection:focus-within, +row.spin.success text > selection:focus-within { + background-color: alpha(@success_color,0.2); +} + +row.entry.success text > cursor-handle > contents, +row.spin.success text > cursor-handle > contents { + background-color: currentColor; +} + +row.entry.success .dim-label, row.entry.success scale > value, row.entry.success progressbar > text, row.entry.success row.expander image.expander-row-arrow, row.expander row.entry.success image.expander-row-arrow, row.entry.success spinbutton > text > placeholder, +row.entry.success entry > text > placeholder, row.entry.success label.separator, row.entry.success row.property > box.header > box.title > .title, row.entry.success row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry.success box > list > row > box.header > box.title > .title, row.entry.success .subtitle, +row.spin.success .dim-label, +row.spin.success scale > value, +row.spin.success progressbar > text, +row.spin.success row.expander image.expander-row-arrow, +row.expander row.spin.success image.expander-row-arrow, +row.spin.success spinbutton > text > placeholder, +row.spin.success entry > text > placeholder, +row.spin.success label.separator, +row.spin.success row.property > box.header > box.title > .title, +row.spin.success row.expander.property box > list > row > box.header > box.title > .title, +row.expander.property row.spin.success box > list > row > box.header > box.title > .title, +row.spin.success .subtitle { + opacity: 1; +} + +row.entry.success .suggested-action, +row.spin.success .suggested-action { + background-color: @success_bg_color; + color: @success_fg_color; +} + +/*************** + * AdwComboRow * + ***************/ +row.combo image.dropdown-arrow:disabled { + filter: opacity(0.45); +} + +row.combo listview.inline { + background: none; + border: none; + box-shadow: none; + color: inherit; +} + +row.combo listview.inline, row.combo listview.inline:disabled { + background: none; + color: inherit; +} + +row.combo popover > contents { + min-width: 120px; +} + +row.combo popover > contents .combo-searchbar { + margin: 6px; +} + +row.combo popover > contents .combo-searchbar + scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +/****************** + * AdwExpanderRow * + ******************/ +list.boxed-list-separate > row, list.boxed-list, list.content { + background-color: @card_bg_color; + color: @card_fg_color; + border-radius: 6px; + box-shadow: 0 0 0 1px alpha(currentColor,0.12); +} + +list.boxed-list-separate > row.expander row.header, list.boxed-list > row, list.content > row, list.boxed-list > row.expander row.header, list.content > row.expander row.header, row.expander list.nested > row { + border-bottom: 1px solid alpha(currentColor,0.08); +} + +list.boxed-list-separate > row.expander row.header, list.boxed-list > row, list.content > row, list.boxed-list > row.expander row.header, list.content > row.expander row.header, row.expander list.nested > row { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +list.boxed-list-separate > row.expander row.header:focus:focus-visible, list.boxed-list > row:focus:focus-visible, list.content > row:focus:focus-visible, list.boxed-list > row.expander row.header:focus:focus-visible, list.content > row.expander row.header:focus:focus-visible, row.expander list.nested > row:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +.osd list.boxed-list-separate > row.expander row.header:focus:focus-visible, list.boxed-list-separate > row.expander .osd row.header:focus:focus-visible, .osd list.boxed-list > row:focus:focus-visible, .osd list.content > row:focus:focus-visible, .osd list.boxed-list > row.expander row.header:focus:focus-visible, list.boxed-list > row.expander .osd row.header:focus:focus-visible, .osd list.content > row.expander row.header:focus:focus-visible, list.content > row.expander .osd row.header:focus:focus-visible, .osd row.expander list.nested > row:focus:focus-visible, row.expander .osd list.nested > row:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +list.boxed-list-separate > row.expander row.header:not(:selected).activatable:hover, list.boxed-list > row:not(:selected).activatable:hover, list.content > row:not(:selected).activatable:hover, list.boxed-list > row.expander row.header:not(:selected).activatable:hover, list.content > row.expander row.header:not(:selected).activatable:hover, row.expander list.nested > row:not(:selected).activatable:hover { + background-color: alpha(currentColor,0.03); +} + +list.boxed-list-separate > row.expander row.header:not(:selected).activatable:active, list.boxed-list > row:not(:selected).activatable:active, list.content > row:not(:selected).activatable:active, list.boxed-list > row.expander row.header:not(:selected).activatable:active, list.content > row.expander row.header:not(:selected).activatable:active, row.expander list.nested > row:not(:selected).activatable:active { + background-color: alpha(currentColor,0.08); +} + +list.boxed-list-separate > row.expander row.header:not(:selected).activatable.has-open-popup, list.boxed-list > row:not(:selected).activatable.has-open-popup, list.content > row:not(:selected).activatable.has-open-popup, list.boxed-list > row.expander row.header:not(:selected).activatable.has-open-popup, list.content > row.expander row.header:not(:selected).activatable.has-open-popup, row.expander list.nested > row:not(:selected).activatable.has-open-popup { + background-color: alpha(currentColor,0.03); +} + +row.expander { + background: none; + padding: 0px; +} + +row.expander > box > list { + background: none; + color: inherit; +} + +row.expander list.nested { + background-color: alpha(@card_shade_color,0.5); + color: inherit; +} + +row.expander image.expander-row-arrow { + transition: -gtk-icon-transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.expander image.expander-row-arrow:dir(ltr) { + margin-left: 3px; +} + +row.expander image.expander-row-arrow:dir(rtl) { + margin-right: 3px; +} + +row.expander image.expander-row-arrow:dir(ltr) { + -gtk-icon-transform: rotate(0.5turn); +} + +row.expander image.expander-row-arrow:dir(rtl) { + -gtk-icon-transform: rotate(-0.5turn); +} + +row.expander image.expander-row-arrow:disabled { + filter: opacity(0.45); +} + +row.expander:checked image.expander-row-arrow { + -gtk-icon-transform: rotate(0turn); + opacity: 1; +} + +row.expander:checked image.expander-row-arrow:not(:disabled) { + color: @accent_color; +} + +.osd row.expander:checked image.expander-row-arrow:not(:disabled) { + color: inherit; +} + +/*************** + * AdwButtonRow * + ***************/ +row.button > box { + margin-left: 12px; + margin-right: 12px; + border-spacing: 6px; + min-height: 50px; +} + +row.button.suggested-action { + color: @accent_color; +} + +row.button.destructive-action { + color: @destructive_color; +} + +/***************** + * Boxed Lists * + *****************/ +list.boxed-list > row.expander, list.content > row.expander { + border: none; +} + +list.boxed-list > row:first-child, list.content > row:first-child, list.boxed-list > row:first-child.expander row.header, list.content > row:first-child.expander row.header { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +list.boxed-list > row:last-child, list.content > row:last-child, list.boxed-list > row:last-child.expander:not(:checked), list.boxed-list > row:last-child.expander:not(:checked) row.header, list.content > row:last-child.expander:not(:checked) row.header, list.boxed-list > row:last-child.expander:checked list.nested, list.content > row:last-child.expander:checked list.nested, list.boxed-list > row:last-child.expander:checked list.nested > row:last-child, list.content > row:last-child.expander:checked list.nested > row:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + border-bottom-width: 0; +} + +list.boxed-list-separate { + background: none; + color: @card_fg_color; +} + +list.boxed-list-separate > row { + border: none; + margin-bottom: 12px; +} + +list.boxed-list-separate > row:last-child { + margin-bottom: 0; +} + +list.boxed-list-separate > row { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +list.boxed-list-separate > row:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +.osd list.boxed-list-separate > row:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +list.boxed-list-separate > row:not(.expander):not(:selected).activatable:hover { + background-color: @card_bg_color; + background-image: image(alpha(currentColor,0.03)); +} + +list.boxed-list-separate > row:not(.expander):not(:selected).activatable:active { + background-color: @card_bg_color; + background-image: image(alpha(currentColor,0.08)); +} + +list.boxed-list-separate > row:not(.expander):not(:selected).activatable.has-open-popup { + background-color: @card_bg_color; + background-image: image(alpha(currentColor,0.03)); +} + +list.boxed-list-separate > row.entry:not(:selected).activatable.focused:hover, list.boxed-list-separate > row.entry:not(:selected).activatable.focused:active, list.boxed-list-separate > row.spin:not(:selected).activatable.focused:hover, list.boxed-list-separate > row.spin:not(:selected).activatable.focused:active { + background-color: @card_bg_color; + background-image: none; +} + +list.boxed-list-separate > row.entry.error, list.boxed-list-separate > row.spin.error { + color: @error_color; +} + +list.boxed-list-separate > row.entry.warning, list.boxed-list-separate > row.spin.warning { + color: @warning_color; +} + +list.boxed-list-separate > row.entry.success, list.boxed-list-separate > row.spin.success { + color: @success_color; +} + +list.boxed-list-separate > row.expander row.header { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +list.boxed-list-separate > row.expander:not(:checked) row.header, list.boxed-list-separate > row.expander.expander:checked list.nested, list.boxed-list-separate > row.expander.expander:checked list.nested > row:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + border-bottom: none; +} + +popover.menu > contents { + min-width: 120px; +} + +popover.menu scrollbar.vertical > range > trough > slider { + min-height: 30px; +} + +popover.menu box.inline-buttons { + padding: 0 12px; +} + +popover.menu box.inline-buttons button.image-button.model { + min-height: 28px; + min-width: 28px; + padding: 2px; + border: none; + outline: none; + transition: none; +} + +popover.menu box.inline-buttons button.image-button.model:selected { + background-color: alpha(currentColor,0.1); +} + +popover.menu box.inline-buttons button.image-button.model:selected:active { + background-color: alpha(currentColor,0.19); +} + +popover.menu box.circular-buttons { + padding: 12px 12px 6px; +} + +popover.menu box.circular-buttons button.circular.image-button.model { + outline: none; + padding: 12px; + box-shadow: inset 0 0 0 1px alpha(currentColor,0.12); +} + +popover.menu box.circular-buttons button.circular.image-button.model:selected { + background-color: alpha(currentColor,0.13); +} + +popover.menu box.circular-buttons button.circular.image-button.model:selected:active { + background-color: alpha(currentColor,0.19); +} + +popover.menu > contents { + padding: 0; +} + +popover.menu > contents > stack > box, popover.menu > contents > scrolledwindow > viewport > stack > box { + padding: 6px; +} + +popover.menu separator { + margin: 6px 0; +} + +popover.menu list separator { + margin: 0; +} + +popover.menu accelerator { + color: alpha(currentColor,0.55); +} + +popover.menu accelerator:dir(ltr) { + margin-left: 12px; +} + +popover.menu accelerator:dir(rtl) { + margin-right: 12px; +} + +popover.menu check, +popover.menu radio { + min-width: 16px; + min-height: 16px; + -gtk-icon-size: 16px; + padding: 0; +} + +popover.menu check, popover.menu check:hover:checked, popover.menu check:hover:indeterminate, popover.menu check:hover:not(:checked):not(:indeterminate), popover.menu check:active:checked, popover.menu check:active:indeterminate, popover.menu check:active:not(:checked):not(:indeterminate), +popover.menu radio, +popover.menu radio:hover:checked, +popover.menu radio:hover:indeterminate, +popover.menu radio:hover:not(:checked):not(:indeterminate), +popover.menu radio:active:checked, +popover.menu radio:active:indeterminate, +popover.menu radio:active:not(:checked):not(:indeterminate) { + background: none; + box-shadow: none; + color: inherit; +} + +popover.menu radio:checked, popover.menu radio:indeterminate { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/menu-radio-symbolic.svg")), -gtk-recolor(url("assets/menu-radio-symbolic@2.svg"))); +} + +.osd popover.menu check, .osd popover.menu radio { + background: none; + color: inherit; +} + +popover.menu radio, popover.menu check { + padding: 0; + border: 1px solid alpha(currentColor,0.3); +} + +popover.menu check.left, +popover.menu radio.left, +popover.menu arrow.left { + margin-left: -2px; + margin-right: 6px; +} + +popover.menu check.right, +popover.menu radio.right, +popover.menu arrow.right { + margin-left: 6px; + margin-right: -2px; +} + +popover.menu modelbutton { + min-height: 28px; + min-width: 40px; + padding: 2px 12px; + border-radius: 6px; + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), outline 300ms cubic-bezier(0, 0, 0.2, 1); + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; + background-color: transparent; + outline: 0 solid transparent; + outline-offset: 2px; + color: alpha(currentColor,0.75); +} + +popover.menu modelbutton:focus:not(:hover):not(:active) { + outline: none; + background: none; + transition: none; +} + +popover.menu modelbutton:hover, popover.menu modelbutton:selected { + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +popover.menu modelbutton:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.12) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +popover.menu modelbutton arrow { + background: none; + min-width: 16px; + min-height: 16px; + opacity: 0.3; +} + +popover.menu modelbutton arrow:hover { + background: none; +} + +popover.menu modelbutton arrow:disabled { + filter: opacity(0.45); +} + +popover.menu modelbutton arrow.left { + -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); +} + +popover.menu modelbutton arrow.right { + -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); +} + +popover.menu label.title { + font-weight: bold; + padding: 4px 32px; +} + +popover.menu list, popover.menu listview { + background: none; + color: inherit; +} + +popover.menu list > row, popover.menu listview > row { + border-radius: 6px; + padding: 0 12px; + min-height: 28px; + min-width: 48px; +} + +popover.menu list > row:selected, popover.menu listview > row:selected { + background: none; +} + +popover.menu list > row:hover, popover.menu list > row:hover:selected.activatable, popover.menu listview > row:hover, popover.menu listview > row:hover:selected.activatable { + background-color: alpha(currentColor,0.1); +} + +popover.menu list > row:active, popover.menu list > row:active:selected.activatable, popover.menu listview > row:active, popover.menu listview > row:active:selected.activatable { + background-color: alpha(currentColor,0.19); +} + +popover.menu list > row.has-open-popup, popover.menu list > row.has-open-popup:selected.activatable, popover.menu listview > row.has-open-popup, popover.menu listview > row.has-open-popup:selected.activatable { + background-color: alpha(currentColor,0.1); +} + +popover.menu list > row > box, popover.menu listview > row > box { + border-spacing: 6px; +} + +popover.menu contents > list, +popover.menu contents > listview, +popover.menu scrolledwindow > viewport > list, +popover.menu scrolledwindow > listview { + padding: 6px 0; +} + +popover.menu contents > list > row, +popover.menu contents > listview > row, +popover.menu scrolledwindow > viewport > list > row, +popover.menu scrolledwindow > listview > row { + margin: 0 6px; + padding: 6px 12px; + min-height: 0; +} + +menubar { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + padding-bottom: 1px; +} + +menubar > item { + min-height: 16px; + padding: 4px 8px; + border-radius: 6px; +} + +menubar > item:selected { + background-color: alpha(currentColor,0.1); +} + +menubar > item popover.menu popover.menu { + padding: 0 0 4px 0; +} + +menubar > item popover.menu popover.menu > contents { + margin: 0; + border-radius: 12px; +} + +toolbarview > .top-bar menubar, +toolbarview > .bottom-bar menubar { + box-shadow: none; + padding-bottom: 0; +} + +/******************** + * GtkMessageDialog * + ********************/ +window.dialog.message .titlebar { + min-height: 20px; + background: none; + box-shadow: none; + border-style: none; + border-top-left-radius: 7px; + border-top-right-radius: 7px; +} + +window.dialog.message box.dialog-vbox.vertical { + margin-top: 6px; + border-spacing: 24px; +} + +window.dialog.message box.dialog-vbox.vertical > box > box > box > label.title { + font-weight: 800; + font-size: 15pt; +} + +window.dialog.message.csd { + border-bottom-left-radius: 13px; + border-bottom-right-radius: 13px; +} + +window.dialog.message.csd .dialog-action-area { + border-top: 1px solid alpha(currentColor,0.12); + margin: 0; + border-spacing: 0; +} + +window.dialog.message.csd .dialog-action-area > button { + padding: 10px 14px; + border-radius: 0; + border: none; + background-clip: padding-box; + border-left: 1px solid alpha(currentColor,0.12); +} + +window.dialog.message.csd .dialog-action-area > button:first-child { + border-bottom-left-radius: 13px; + border-left: none; +} + +window.dialog.message.csd .dialog-action-area > button:last-child { + border-bottom-right-radius: 13px; +} + +window.dialog.message.csd .dialog-action-area > button.suggested-action { + color: @accent_color; +} + +window.dialog.message.csd .dialog-action-area > button.destructive-action { + color: @destructive_color; +} + +/******************** + * AdwMessageDialog * + ********************/ +window.messagedialog, +dialog-host > dialog.alert sheet, +window.dialog-window.alert { + background-color: @dialog_bg_color; + color: @dialog_fg_color; +} + +dialog-host > dialog.alert.floating sheet, +window.dialog-window.alert { + border-radius: 13px; + outline: none; +} + +window.messagedialog .message-area, +dialog.alert .message-area { + padding: 24px 30px; + border-spacing: 24px; +} + +window.messagedialog .message-area.has-heading.has-body, +dialog.alert .message-area.has-heading.has-body { + border-spacing: 10px; +} + +window.messagedialog .response-area > button, +dialog.alert .response-area > button { + padding: 10px 14px; + border-radius: 0; +} + +window.messagedialog .response-area > button.suggested, +dialog.alert .response-area > button.suggested { + color: @accent_color; +} + +window.messagedialog .response-area > button.destructive, +dialog.alert .response-area > button.destructive { + color: @destructive_color; +} + +window.messagedialog .response-area:not(.compact) > button, +dialog.alert .response-area:not(.compact) > button { + margin-top: -1px; + margin-right: -1px; + margin-left: -1px; +} + +window.messagedialog .response-area:not(.compact) > button:first-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:last-child:dir(rtl), +dialog.alert .response-area:not(.compact) > button:first-child:dir(ltr), +dialog.alert .response-area:not(.compact) > button:last-child:dir(rtl) { + margin-left: 0; +} + +window.messagedialog .response-area:not(.compact) > button:last-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:first-child:dir(rtl), +dialog.alert .response-area:not(.compact) > button:last-child:dir(ltr), +dialog.alert .response-area:not(.compact) > button:first-child:dir(rtl) { + margin-right: 0; +} + +window.messagedialog .response-area.compact > button, +dialog.alert .response-area.compact > button { + margin-top: -1px; + margin-bottom: -1px; +} + +window.messagedialog .response-area.compact > button:first-child, +dialog.alert .response-area.compact > button:first-child { + margin-bottom: 0; +} + +window.messagedialog .response-area:not(.compact) > button:first-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:last-child:dir(rtl), +dialog.alert.floating .response-area:not(.compact) > button:first-child:dir(ltr), +dialog.alert.floating .response-area:not(.compact) > button:last-child:dir(rtl) { + border-bottom-left-radius: 13px; +} + +window.messagedialog .response-area:not(.compact) > button:last-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:first-child:dir(rtl), +dialog.alert.floating .response-area:not(.compact) > button:last-child:dir(ltr), +dialog.alert.floating .response-area:not(.compact) > button:first-child:dir(rtl) { + border-bottom-right-radius: 13px; +} + +window.messagedialog .response-area.compact > button:first-child, +dialog.alert.floating .response-area.compact > button:first-child { + border-bottom-left-radius: 13px; + border-bottom-right-radius: 13px; +} + +/********** + * Frames * + **********/ +frame, +.frame { + border: 1px solid alpha(currentColor,0.12); +} + +frame { + border-radius: 6px; +} + +frame > label { + margin: 4px; +} + +/************** + * Separators * + **************/ +separator { + background: alpha(currentColor,0.12); + min-width: 1px; + min-height: 1px; +} + +separator.spacer { + background: none; +} + +separator.spacer.horizontal { + min-width: 12px; +} + +separator.spacer.vertical { + min-height: 12px; +} + +/********************* + * App Notifications * + *********************/ +.app-notification { + padding: 10px; + border-spacing: 10px; + border-radius: 0 0 12px 12px; + background-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); + background-clip: padding-box; +} + +.app-notification border { + border: none; +} + +/********** + * Toasts * + **********/ +toast { + margin: 12px; + margin-bottom: 24px; + border-radius: 150px; + border-spacing: 6px; + padding: 6px; +} + +toast:dir(ltr) { + padding-left: 12px; +} + +toast:dir(rtl) { + padding-right: 12px; +} + +toast > widget { + margin: 0 6px; +} + +/************** + * GtkVideo * + **************/ +video image.osd { + min-width: 64px; + min-height: 64px; + border-radius: 32px; +} + +/****************** + * AdwAboutWindow * + ******************/ +window.about .main-page > viewport > clamp > box, +dialog.about .main-page > viewport > clamp > box { + margin: 12px; + border-spacing: 6px; +} + +window.about .main-page > viewport > clamp > box > box, +dialog.about .main-page > viewport > clamp > box > box { + margin-top: 18px; + border-spacing: 18px; + margin-bottom: 6px; +} + +window.about .main-page .app-version, +dialog.about .main-page .app-version { + padding: 3px 18px; + color: @accent_color; + border-radius: 9999px; + margin-top: 3px; +} + +window.about .subpage > viewport > clamp > box, +dialog.about .subpage > viewport > clamp > box { + margin: 18px 12px; + border-spacing: 18px; +} + +window.about .subpage > clamp > textview, +dialog.about .subpage > clamp > textview { + background: none; + color: inherit; +} + +/***************** + * AdwStatusPage * + *****************/ +statuspage > scrolledwindow > viewport > box { + margin: 36px 12px; + border-spacing: 36px; +} + +statuspage > scrolledwindow > viewport > box > clamp > box { + border-spacing: 12px; +} + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon { + -gtk-icon-size: 128px; + color: alpha(currentColor,0.55); +} + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon:disabled { + opacity: 0.45; +} + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { + margin-bottom: 24px; +} + +statuspage.compact > scrolledwindow > viewport > box { + margin: 24px 12px; + border-spacing: 24px; +} + +statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon { + -gtk-icon-size: 96px; +} + +statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { + margin-bottom: 12px; +} + +statuspage.compact > scrolledwindow > viewport > box > clamp > box > .title { + font-size: 18pt; +} + +/* Cards */ +shortcut > .keycap, .card { + background-color: @card_bg_color; + color: @card_fg_color; + border-radius: 12px; + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); +} + +.osd shortcut > .keycap, shortcut > .osd.keycap, .osd .card, .card.osd { + background-color: alpha(currentColor,0.1); + color: inherit; + box-shadow: none; +} + +.card { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.card:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +.osd .card:focus:focus-visible, .card.osd:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +.card.activatable { + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.card.activatable:hover { + background-image: image(alpha(currentColor,0.03)); +} + +.card.activatable:active { + background-image: image(alpha(currentColor,0.08)); +} + +/* Transition shadows */ +flap > dimming, +leaflet > dimming, +navigation-view > dimming, +overlay-split-view > dimming { + background: @shade_color; +} + +flap > shadow, +leaflet > shadow, +navigation-view > shadow, +overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +flap > shadow.left, +leaflet > shadow.left, +navigation-view > shadow.left, +overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to right, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +flap > shadow.right, +leaflet > shadow.right, +navigation-view > shadow.right, +overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to left, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +flap > shadow.up, +leaflet > shadow.up, +navigation-view > shadow.up, +overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to bottom, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +flap > shadow.down, +leaflet > shadow.down, +navigation-view > shadow.down, +overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to top, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +notebook > header > tabs > tab:checked { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +notebook:focus:focus-visible > header > tabs > tab:checked { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +notebook > header { + padding: 1px; + border-color: alpha(currentColor,0.12); + border-width: 1px; + background-clip: padding-box; +} + +notebook > header > tabs { + margin: -1px; +} + +notebook > header.top { + border-bottom-style: solid; +} + +notebook > header.top > tabs { + margin-bottom: -2px; +} + +notebook > header.top > tabs > tab:hover { + box-shadow: inset 0 -4px alpha(currentColor,0.12); +} + +notebook > header.top > tabs > tab:checked { + box-shadow: inset 0 -4px @accent_bg_color; +} + +notebook > header.bottom { + border-top-style: solid; +} + +notebook > header.bottom > tabs { + margin-top: -2px; +} + +notebook > header.bottom > tabs > tab:hover { + box-shadow: inset 0 4px alpha(currentColor,0.12); +} + +notebook > header.bottom > tabs > tab:checked { + box-shadow: inset 0 4px @accent_bg_color; +} + +notebook > header.left { + border-right-style: solid; +} + +notebook > header.left > tabs { + margin-right: -2px; +} + +notebook > header.left > tabs > tab:hover { + box-shadow: inset -4px 0 alpha(currentColor,0.12); +} + +notebook > header.left > tabs > tab:checked { + box-shadow: inset -4px 0 @accent_bg_color; +} + +notebook > header.right { + border-left-style: solid; +} + +notebook > header.right > tabs { + margin-left: -2px; +} + +notebook > header.right > tabs > tab:hover { + box-shadow: inset 4px 0 alpha(currentColor,0.12); +} + +notebook > header.right > tabs > tab:checked { + box-shadow: inset 4px 0 @accent_bg_color; +} + +notebook > header.top > tabs > arrow { + border-top-style: none; +} + +notebook > header.bottom > tabs > arrow { + border-bottom-style: none; +} + +notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { + margin-left: -5px; + margin-right: -5px; + padding-left: 4px; + padding-right: 4px; +} + +notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); +} + +notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + +notebook > header.left > tabs > arrow { + border-left-style: none; +} + +notebook > header.right > tabs > arrow { + border-right-style: none; +} + +notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { + margin-top: -5px; + margin-bottom: -5px; + padding-top: 4px; + padding-bottom: 4px; +} + +notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); +} + +notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +notebook > header > tabs > arrow { + min-height: 16px; + min-width: 16px; + border-radius: 0; +} + +notebook > header > tabs > arrow:hover:not(:active) { + box-shadow: none; +} + +notebook > header > tabs > tab { + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + min-height: 30px; + min-width: 30px; + padding: 3px 12px; + font-weight: normal; +} + +notebook > header > tabs > tab:hover, notebook > header > tabs > tab:active { + background-color: alpha(currentColor,0.07); +} + +notebook > header > tabs > tab:not(:checked) { + outline-color: transparent; +} + +notebook > header > tabs > tab:disabled { + filter: opacity(0.45); +} + +notebook > header > tabs > tab:disabled label, notebook > header > tabs > tab:disabled button { + filter: none; +} + +notebook > header > tabs > tab button.flat { + color: alpha(currentColor,0.3); + padding: 0; + margin-top: 4px; + margin-bottom: 4px; + min-width: 20px; + min-height: 20px; +} + +notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.flat:active { + color: currentColor; +} + +notebook > header > tabs > tab button.flat:last-child { + margin-left: 4px; + margin-right: -4px; +} + +notebook > header > tabs > tab button.flat:first-child { + margin-left: -4px; + margin-right: 4px; +} + +notebook > header.top > tabs, notebook > header.bottom > tabs { + padding-left: 4px; + padding-right: 4px; +} + +notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { + margin-left: 3px; + margin-right: 3px; +} + +notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { + margin-left: -1px; +} + +notebook > header.top > tabs:not(:only-child):last-child, notebook > header.bottom > tabs:not(:only-child):last-child { + margin-right: -1px; +} + +notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { + margin-left: 4px; + margin-right: 4px; +} + +notebook > header.left > tabs, notebook > header.right > tabs { + padding-top: 4px; + padding-bottom: 4px; +} + +notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { + margin-top: 3px; + margin-bottom: 3px; +} + +notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { + margin-top: -1px; +} + +notebook > header.left > tabs:not(:only-child):last-child, notebook > header.right > tabs:not(:only-child):last-child { + margin-bottom: -1px; +} + +notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { + margin-top: 4px; + margin-bottom: 4px; +} + +notebook > header.top > tabs > tab { + padding-bottom: 4px; +} + +notebook > header.bottom > tabs > tab { + padding-top: 4px; +} + +notebook > stack:not(:only-child) { + background-color: @view_bg_color; +} + +paned > separator { + min-width: 1px; + min-height: 1px; + background: none; + background-size: 1px 1px; +} + +paned > separator.wide { + min-width: 5px; + min-height: 5px; +} + +paned.horizontal > separator:dir(ltr) { + margin: 0 -8px 0 0; + padding: 0 8px 0 0; + box-shadow: inset 1px 0 alpha(currentColor,0.12); +} + +paned.horizontal > separator:dir(rtl) { + margin: 0 0 0 -8px; + padding: 0 0 0 8px; + box-shadow: inset -1px 0 alpha(currentColor,0.12); +} + +paned.horizontal > separator.wide { + margin: 0; + padding: 0; + box-shadow: inset 1px 0 alpha(currentColor,0.12), inset -1px 0 alpha(currentColor,0.12); +} + +paned.vertical > separator { + margin: 0 0 -8px 0; + padding: 0 0 8px 0; + box-shadow: inset 0 1px alpha(currentColor,0.12); +} + +paned.vertical > separator.wide { + margin: 0; + padding: 0; + box-shadow: inset 0 1px alpha(currentColor,0.12), inset 0 -1px alpha(currentColor,0.12); +} + +toolbarview.undershoot-top popover scrolledwindow undershoot.top, +toolbarview.undershoot-bottom popover scrolledwindow undershoot.bottom { + background: none; + box-shadow: none; +} + +popover.background { + background-color: transparent; + font: initial; +} + +popover > arrow, +popover > contents { + background-color: @popover_bg_color; + color: @popover_fg_color; + background-clip: border-box; + border: 1px solid mix(white,@popover_bg_color,0.92); + box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.09), 0 2px 14px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px @headerbar_darker_shade_color; +} + +popover > contents { + padding: 6px; + border-radius: 12px; +} + +popover > contents > list, +popover > contents > .view, +window.print popover > contents > .dialog-action-box, +popover > contents > toolbar { + border-style: none; + background-color: transparent; +} + +popover > contents separator { + background-color: alpha(currentColor,0.08); +} + +.osd popover, popover.touch-selection, popover.magnifier { + background-color: transparent; +} + +.osd popover > arrow, +.osd popover > contents, popover.touch-selection > arrow, +popover.touch-selection > contents, popover.magnifier > arrow, +popover.magnifier > contents { + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: none; +} + +popover toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-top > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover flap > dimming, +popover leaflet > dimming, +popover navigation-view > dimming, +popover overlay-split-view > dimming { + background: @popover_shade_color; +} + +popover flap > shadow, +popover leaflet > shadow, +popover navigation-view > shadow, +popover overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +popover flap > shadow.left, +popover leaflet > shadow.left, +popover navigation-view > shadow.left, +popover overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to right, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +popover flap > shadow.right, +popover leaflet > shadow.right, +popover navigation-view > shadow.right, +popover overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to left, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +popover flap > shadow.up, +popover leaflet > shadow.up, +popover navigation-view > shadow.up, +popover overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to bottom, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +popover flap > shadow.down, +popover leaflet > shadow.down, +popover navigation-view > shadow.down, +popover overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to top, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +preferencespage > scrolledwindow > viewport > clamp > box { + margin: 24px 12px; + border-spacing: 24px; +} + +preferencesgroup > box, preferencesgroup > box .labels { + border-spacing: 6px; +} + +preferencesgroup > box > box.header:not(.single-line) { + margin-bottom: 6px; +} + +preferencesgroup > box > box.single-line { + min-height: 34px; +} + +progressbar.horizontal > trough { + min-width: 150px; +} + +progressbar.horizontal > trough, progressbar.horizontal > trough > progress { + min-height: 8px; +} + +progressbar.vertical > trough { + min-height: 80px; +} + +progressbar.vertical > trough, progressbar.vertical > trough > progress { + min-width: 8px; +} + +progressbar > text { + font-size: smaller; +} + +progressbar:disabled { + filter: opacity(0.45); +} + +progressbar > trough > progress { + /* share most of scales' */ + border-radius: 99px; +} + +progressbar > trough > progress.left { + border-top-left-radius: 99px; + border-bottom-left-radius: 99px; +} + +progressbar > trough > progress.right { + border-top-right-radius: 99px; + border-bottom-right-radius: 99px; +} + +progressbar > trough > progress.top { + border-top-right-radius: 99px; + border-top-left-radius: 99px; +} + +progressbar > trough > progress.bottom { + border-bottom-right-radius: 99px; + border-bottom-left-radius: 99px; +} + +progressbar.osd { + min-width: 2px; + min-height: 2px; + background-color: transparent; + color: inherit; +} + +progressbar.osd > trough { + border-style: none; + border-radius: 0; + background-color: transparent; + box-shadow: none; +} + +progressbar.osd > trough > progress { + border-style: none; + border-radius: 0; +} + +progressbar.osd.horizontal > trough, progressbar.osd.horizontal > trough > progress { + min-height: 2px; +} + +progressbar.osd.vertical > trough, progressbar.osd.vertical > trough > progress { + min-width: 2px; +} + +progressbar > trough.empty > progress { + all: unset; +} + +.osd progressbar > trough > progress { + background-color: rgba(255, 255, 255, 0.75); +} + +scale > trough > fill, scale > trough, progressbar > trough { + border-radius: 9999px; + background-color: alpha(currentColor,0.15); +} + +scale > trough > highlight, progressbar > trough > progress { + border-radius: 9999px; + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +scale { + min-height: 10px; + min-width: 10px; + padding: 12px; +} + +scale > trough > slider { + outline: 0 solid transparent; + outline-offset: 6px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +scale:focus:focus-visible > trough > slider { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 0; +} + +scale > trough > slider { + background-color: @headerbar_bg_color; + box-shadow: 0 0 0 2px @accent_bg_color, 0 0 0 0 transparent; + border-radius: 100%; + transition: box-shadow 200ms ease-out; + min-width: 16px; + min-height: 16px; + margin: -7px; +} + +scale:hover > trough, scale:active > trough { + background-color: alpha(currentColor,0.2); +} + +scale:hover > trough > highlight, scale:active > trough > highlight { + background-image: image(alpha(currentColor,0.1)); +} + +scale:hover > trough > slider, scale:active > trough > slider { + background-color: @headerbar_backdrop_color; + box-shadow: 0 0 0 2px @accent_bg_color, 0 0 0 8px alpha(currentColor,0.12); +} + +.osd scale:focus:focus-visible > trough { + outline-color: rgba(255, 255, 255, 0.5); +} + +.osd scale > trough > highlight { + background-color: rgba(255, 255, 255, 0.75); + color: rgba(0, 0, 0, 0.75); +} + +scale:disabled { + filter: opacity(0.45); +} + +scale:disabled > trough > slider { + box-shadow: 0 0 0 2px mix(@accent_bg_color,@window_bg_color,0.5); + outline-color: rgba(0, 0, 0, 0.2); +} + +scale.fine-tune { + padding: 9px; +} + +scale.fine-tune.horizontal { + min-height: 16px; +} + +scale.fine-tune.vertical { + min-width: 16px; +} + +scale.fine-tune > trough > slider { + margin: -5px; +} + +scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.marks-before) > trough > slider { + transform: rotate(45deg); + box-shadow: 0 0 0 2px @accent_bg_color; +} + +scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled { + box-shadow: 0 0 0 2px mix(@accent_bg_color,@window_bg_color,0.5); +} + +scale.horizontal > marks { + color: alpha(currentColor,0.55); +} + +scale.horizontal > marks.top { + margin-bottom: 6px; +} + +scale.horizontal > marks.bottom { + margin-top: 6px; +} + +scale.horizontal > marks indicator { + background-color: currentColor; + min-height: 6px; + min-width: 1px; +} + +scale.horizontal > value.left { + margin-right: 9px; +} + +scale.horizontal > value.right { + margin-left: 9px; +} + +scale.horizontal.fine-tune > marks.top { + margin-top: 3px; +} + +scale.horizontal.fine-tune > marks.bottom { + margin-bottom: 3px; +} + +scale.horizontal.fine-tune > marks indicator { + min-height: 3px; +} + +scale.horizontal.marks-before { + padding-top: 0; +} + +scale.horizontal.marks-before > trough > slider { + border-top-left-radius: 0; +} + +scale.horizontal.marks-after { + padding-bottom: 0; +} + +scale.horizontal.marks-after > trough > slider { + border-bottom-right-radius: 0; +} + +scale.horizontal.marks-before.marks-after > trough > slider { + border-radius: 100%; +} + +scale.vertical > marks { + color: alpha(currentColor,0.55); +} + +scale.vertical > marks.top { + margin-right: 6px; +} + +scale.vertical > marks.bottom { + margin-left: 6px; +} + +scale.vertical > marks indicator { + background-color: currentColor; + min-height: 1px; + min-width: 6px; +} + +scale.vertical > value.top { + margin-bottom: 9px; +} + +scale.vertical > value.bottom { + margin-top: 9px; +} + +scale.vertical.fine-tune > marks.top { + margin-left: 3px; +} + +scale.vertical.fine-tune > marks.bottom { + margin-right: 3px; +} + +scale.vertical.fine-tune > marks indicator { + min-height: 3px; +} + +scale.vertical.marks-before { + padding-left: 0; +} + +scale.vertical.marks-before > trough > slider { + border-bottom-left-radius: 0; +} + +scale.vertical.marks-after { + padding-right: 0; +} + +scale.vertical.marks-after > trough > slider { + border-top-right-radius: 0; +} + +scale.color { + padding: 0; +} + +scale.color > trough { + border: none; + background: none; + border-radius: 10px; +} + +scale.color > trough > slider { + margin: 0; + background-color: rgba(255, 255, 255, 0.8); +} + +scale.color.fine-tune { + padding: 2px; +} + +scale.color.fine-tune > trough > slider { + margin: -2px; +} + +scrollbar > range > trough { + margin: 7px; + transition: all 200ms linear; + border-radius: 10px; +} + +scrollbar > range > trough > slider { + min-width: 8px; + min-height: 8px; + margin: -6px; + border: 6px solid transparent; + border-radius: 10px; + background-clip: padding-box; + transition: all 200ms linear; + background-color: alpha(currentColor,0.2); +} + +scrollbar > range > trough > slider:hover { + background-color: alpha(currentColor,0.4); +} + +scrollbar > range > trough > slider:active { + background-color: alpha(currentColor,0.6); +} + +scrollbar > range > trough > slider:disabled { + opacity: 0; +} + +scrollbar.horizontal > range > trough { + margin-top: 6px; + margin-bottom: 6px; +} + +scrollbar.vertical > range > trough { + margin-left: 6px; + margin-right: 6px; +} + +scrollbar.overlay-indicator { + background: none; + color: inherit; + box-shadow: none; + padding: 0; +} + +scrollbar.overlay-indicator > range > trough { + outline: 1px solid transparent; +} + +scrollbar.overlay-indicator > range > trough > slider { + outline: 1px solid alpha(@scrollbar_outline_color,0.6); + outline-offset: -6px; +} + +.osd scrollbar.overlay-indicator > range > trough > slider { + outline: 1px solid alpha(rgba(0, 0, 0, 0.5),0.6); +} + +scrollbar.overlay-indicator:not(.hovering) > range > trough > slider { + min-width: 3px; + min-height: 3px; + outline-color: alpha(@scrollbar_outline_color,0.35); +} + +.osd scrollbar.overlay-indicator:not(.hovering) > range > trough > slider { + outline-color: alpha(rgba(0, 0, 0, 0.5),0.35); +} + +scrollbar.overlay-indicator.hovering > range > trough { + background-color: alpha(currentColor,0.1); +} + +scrollbar.overlay-indicator.horizontal > range > trough > slider { + min-width: 40px; +} + +scrollbar.overlay-indicator.horizontal.hovering > range > trough > slider { + min-height: 8px; +} + +scrollbar.overlay-indicator.horizontal:not(.hovering) > range > trough { + margin-top: 3px; + margin-bottom: 3px; +} + +scrollbar.overlay-indicator.vertical > range > trough > slider { + min-height: 40px; +} + +scrollbar.overlay-indicator.vertical.hovering > range > trough > slider { + min-width: 8px; +} + +scrollbar.overlay-indicator.vertical:not(.hovering) > range > trough { + margin-left: 3px; + margin-right: 3px; +} + +scrollbar.horizontal > range > trough > slider { + min-width: 40px; +} + +scrollbar.vertical > range > trough > slider { + min-height: 40px; +} + +scrollbar > range.fine-tune > trough > slider, scrollbar > range.fine-tune > trough > slider:hover, scrollbar > range.fine-tune > trough > slider:active { + background-color: alpha(@accent_color,0.6); +} + +scrolledwindow > overshoot.top { + background-image: radial-gradient(farthest-side at top, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at top, alpha(currentColor,0.05), alpha(currentColor,0)); + background-size: 100% 3%, 100% 50%; + background-repeat: no-repeat; + background-position: top; + background-color: transparent; + border: none; + box-shadow: none; +} + +scrolledwindow > overshoot.bottom { + background-image: radial-gradient(farthest-side at bottom, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at bottom, alpha(currentColor,0.05), alpha(currentColor,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(farthest-side at left, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at left, alpha(currentColor,0.05), alpha(currentColor,0)); + background-size: 3% 100%, 50% 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, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at right, alpha(currentColor,0.05), alpha(currentColor,0)); + background-size: 3% 100%, 50% 100%; + background-repeat: no-repeat; + background-position: right; + background-color: transparent; + border: none; + box-shadow: none; +} + +scrolledwindow.undershoot-top > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@shade_color,0.75), transparent 6px); +} + +toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +.about toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: inset 0 1px alpha(currentColor,0.12); + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +.about toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +shortcuts-section { + margin: 20px; +} + +.shortcuts-search-results { + margin: 20px; + border-spacing: 24px; +} + +shortcut { + border-spacing: 6px; + border-radius: 6px; +} + +shortcut { + outline: 0 solid transparent; + outline-offset: 8px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +shortcut:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 4px; +} + +shortcut > .keycap { + min-width: 20px; + min-height: 25px; + padding: 2px 6px; + border-radius: 6px; + font-size: smaller; +} + +shortcuts-section stackswitcher.circular { + border-spacing: 12px; +} + +shortcuts-section stackswitcher.circular > button.circular, +shortcuts-section stackswitcher.circular > button.text-button.circular { + min-width: 32px; + min-height: 32px; + padding: 0; +} + +window.shortcuts headerbar.titlebar > windowhandle { + padding-top: 3px; +} + +window.shortcuts searchbar { + background: none; +} + +.sidebar-pane { + background-color: @sidebar_bg_color; + color: @sidebar_fg_color; +} + +.sidebar-pane:backdrop { + background-color: @sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +.sidebar-pane flap > dimming, +.sidebar-pane leaflet > dimming, +.sidebar-pane navigation-view > dimming, +.sidebar-pane overlay-split-view > dimming { + background: @sidebar_shade_color; +} + +.sidebar-pane flap > shadow, +.sidebar-pane leaflet > shadow, +.sidebar-pane navigation-view > shadow, +.sidebar-pane overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +.sidebar-pane flap > shadow.left, +.sidebar-pane leaflet > shadow.left, +.sidebar-pane navigation-view > shadow.left, +.sidebar-pane overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to right, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane flap > shadow.right, +.sidebar-pane leaflet > shadow.right, +.sidebar-pane navigation-view > shadow.right, +.sidebar-pane overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to left, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane flap > shadow.up, +.sidebar-pane leaflet > shadow.up, +.sidebar-pane navigation-view > shadow.up, +.sidebar-pane overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to bottom, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane flap > shadow.down, +.sidebar-pane leaflet > shadow.down, +.sidebar-pane navigation-view > shadow.down, +.sidebar-pane overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to top, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane banner > revealer > widget { + background-color: mix(@accent_bg_color,@sidebar_bg_color,0.7); + color: @sidebar_fg_color; +} + +.sidebar-pane banner > revealer > widget:backdrop { + background-color: mix(@accent_bg_color,@sidebar_backdrop_color,0.85); +} + +.sidebar-pane:dir(ltr), .sidebar-pane:dir(ltr) banner > revealer > widget, .sidebar-pane.end:dir(rtl), .sidebar-pane.end:dir(rtl) banner > revealer > widget { + box-shadow: inset -1px 0 alpha(currentColor,0.1); +} + +.sidebar-pane:dir(rtl), .sidebar-pane:dir(rtl) banner > revealer > widget, .sidebar-pane.end:dir(ltr), .sidebar-pane.end:dir(ltr) banner > revealer > widget { + box-shadow: inset 1px 0 alpha(currentColor,0.1); +} + +.sidebar-pane toolbarview.undershoot-top scrolledwindow > undershoot.top, .content-pane toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: inset 0 1px alpha(currentColor,0.12); + background: linear-gradient(to bottom, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom, .content-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + background: linear-gradient(to top, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-top > undershoot.top, .content-pane scrolledwindow.undershoot-top > undershoot.top { + box-shadow: inset 0 1px alpha(currentColor,0.12); + background: linear-gradient(to bottom, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-bottom > undershoot.bottom, .content-pane scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + background: linear-gradient(to top, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left, .content-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: inset 1px 0 alpha(currentColor,0.12); + background: linear-gradient(to right, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right, .content-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: inset -1px 0 alpha(currentColor,0.12); + background: linear-gradient(to left, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right, .content-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: inset -1px 0 alpha(currentColor,0.12); + background: linear-gradient(to left, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left, .content-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: inset 1px 0 alpha(currentColor,0.12); + background: linear-gradient(to right, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +/* Middle pane in three-pane setups */ +.content-pane .sidebar-pane, +.sidebar-pane .content-pane { + background-color: @secondary_sidebar_bg_color; + color: @secondary_sidebar_fg_color; +} + +.content-pane .sidebar-pane:backdrop, +.sidebar-pane .content-pane:backdrop { + background-color: @secondary_sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +.content-pane .sidebar-pane toolbarview.undershoot-top scrolledwindow > undershoot.top, +.sidebar-pane .content-pane toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom, +.sidebar-pane .content-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-top > undershoot.top, +.sidebar-pane .content-pane scrolledwindow.undershoot-top > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-bottom > undershoot.bottom, +.sidebar-pane .content-pane scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left, +.sidebar-pane .content-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right, +.sidebar-pane .content-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right, +.sidebar-pane .content-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left, +.sidebar-pane .content-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane flap > dimming, +.content-pane .sidebar-pane leaflet > dimming, +.content-pane .sidebar-pane navigation-view > dimming, +.content-pane .sidebar-pane overlay-split-view > dimming, +.sidebar-pane .content-pane flap > dimming, +.sidebar-pane .content-pane leaflet > dimming, +.sidebar-pane .content-pane navigation-view > dimming, +.sidebar-pane .content-pane overlay-split-view > dimming { + background: @secondary_sidebar_shade_color; +} + +.content-pane .sidebar-pane flap > shadow, +.content-pane .sidebar-pane leaflet > shadow, +.content-pane .sidebar-pane navigation-view > shadow, +.content-pane .sidebar-pane overlay-split-view > shadow, +.sidebar-pane .content-pane flap > shadow, +.sidebar-pane .content-pane leaflet > shadow, +.sidebar-pane .content-pane navigation-view > shadow, +.sidebar-pane .content-pane overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +.content-pane .sidebar-pane flap > shadow.left, +.content-pane .sidebar-pane leaflet > shadow.left, +.content-pane .sidebar-pane navigation-view > shadow.left, +.content-pane .sidebar-pane overlay-split-view > shadow.left, +.sidebar-pane .content-pane flap > shadow.left, +.sidebar-pane .content-pane leaflet > shadow.left, +.sidebar-pane .content-pane navigation-view > shadow.left, +.sidebar-pane .content-pane overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane flap > shadow.right, +.content-pane .sidebar-pane leaflet > shadow.right, +.content-pane .sidebar-pane navigation-view > shadow.right, +.content-pane .sidebar-pane overlay-split-view > shadow.right, +.sidebar-pane .content-pane flap > shadow.right, +.sidebar-pane .content-pane leaflet > shadow.right, +.sidebar-pane .content-pane navigation-view > shadow.right, +.sidebar-pane .content-pane overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane flap > shadow.up, +.content-pane .sidebar-pane leaflet > shadow.up, +.content-pane .sidebar-pane navigation-view > shadow.up, +.content-pane .sidebar-pane overlay-split-view > shadow.up, +.sidebar-pane .content-pane flap > shadow.up, +.sidebar-pane .content-pane leaflet > shadow.up, +.sidebar-pane .content-pane navigation-view > shadow.up, +.sidebar-pane .content-pane overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane flap > shadow.down, +.content-pane .sidebar-pane leaflet > shadow.down, +.content-pane .sidebar-pane navigation-view > shadow.down, +.content-pane .sidebar-pane overlay-split-view > shadow.down, +.sidebar-pane .content-pane flap > shadow.down, +.sidebar-pane .content-pane leaflet > shadow.down, +.sidebar-pane .content-pane navigation-view > shadow.down, +.sidebar-pane .content-pane overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane banner > revealer > widget, +.sidebar-pane .content-pane banner > revealer > widget { + background-color: mix(@accent_bg_color,@secondary_sidebar_bg_color,0.7); + color: @secondary_sidebar_fg_color; +} + +.content-pane .sidebar-pane banner > revealer > widget:backdrop, +.sidebar-pane .content-pane banner > revealer > widget:backdrop { + background-color: mix(@accent_bg_color,@secondary_sidebar_backdrop_color,0.85); +} + +.content-pane .sidebar-pane:dir(ltr), .content-pane .sidebar-pane:dir(ltr) banner > revealer > widget, .content-pane .sidebar-pane.end:dir(rtl), .content-pane .sidebar-pane.end:dir(rtl) banner > revealer > widget, +.sidebar-pane .content-pane:dir(ltr), +.sidebar-pane .content-pane:dir(ltr) banner > revealer > widget, +.sidebar-pane .content-pane.end:dir(rtl), +.sidebar-pane .content-pane.end:dir(rtl) banner > revealer > widget { + box-shadow: inset -1px 0 alpha(currentColor,0.1); +} + +.content-pane .sidebar-pane:dir(rtl), .content-pane .sidebar-pane:dir(rtl) banner > revealer > widget, .content-pane .sidebar-pane.end:dir(ltr), .content-pane .sidebar-pane.end:dir(ltr) banner > revealer > widget, +.sidebar-pane .content-pane:dir(rtl), +.sidebar-pane .content-pane:dir(rtl) banner > revealer > widget, +.sidebar-pane .content-pane.end:dir(ltr), +.sidebar-pane .content-pane.end:dir(ltr) banner > revealer > widget { + box-shadow: inset 1px 0 alpha(currentColor,0.1); +} + +.sidebar-pane .sidebar-pane { + background-color: transparent; + color: inherit; +} + +stacksidebar row { + padding: 10px 4px; +} + +stacksidebar row > label { + padding-left: 6px; + padding-right: 6px; +} + +stacksidebar row.needs-attention > label { + background-size: 6px 6px, 0 0; +} + +/********************** + * Navigation Sidebar * + **********************/ +.navigation-sidebar { + padding: 6px 0; +} + +.navigation-sidebar, .navigation-sidebar.view, window.print .navigation-sidebar.dialog-action-box, .navigation-sidebar.view:disabled { + background-color: transparent; + color: inherit; +} + +.navigation-sidebar.background, .navigation-sidebar.background:disabled { + background-color: @window_bg_color; + color: @window_fg_color; +} + +.navigation-sidebar row.activatable:hover { + background-color: alpha(currentColor,0.07); +} + +.navigation-sidebar row.activatable:active { + background-color: alpha(currentColor,0.16); +} + +.navigation-sidebar row.activatable.has-open-popup { + background-color: alpha(currentColor,0.07); +} + +.navigation-sidebar row.activatable:selected:hover { + background-color: alpha(currentColor,0.13); +} + +.navigation-sidebar row.activatable:selected:active { + background-color: alpha(currentColor,0.19); +} + +.navigation-sidebar row.activatable:selected.has-open-popup { + background-color: alpha(currentColor,0.13); +} + +.navigation-sidebar row:selected { + background-color: alpha(currentColor,0.1); +} + +.navigation-sidebar > separator { + margin: 6px; + background: none; +} + +.navigation-sidebar > row { + min-height: 36px; + padding: 0 8px; + border-radius: 6px; + margin: 0 6px 3px; +} + +@keyframes spin { + to { + transform: rotate(1turn); + } +} + +spinner { + background: none; + opacity: 0; + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); +} + +spinner:checked { + opacity: 1; + animation: spin 1s linear infinite; +} + +spinner:checked:disabled { + opacity: 0.45; +} + +spinbutton { + padding: 0; + border-spacing: 0; + /* :not here just to bump specificity above that of the list button styling */ +} + +spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + margin: 0; + border-radius: 0; + box-shadow: none; + border-style: solid; + border-color: alpha(currentColor,0.1); +} + +spinbutton:not(.vertical) { + /* :not here just to bump specificity above that of the list button styling */ +} + +spinbutton:not(.vertical) > text { + min-width: 28px; + padding: 6px; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + min-height: 16px; + min-width: 22px; + padding-bottom: 0; + padding-top: 0; + border-left-width: 1px; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl), +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl) { + border-left-width: 0; + border-right-width: 1px; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child { + border-radius: 0 6px 6px 0; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child { + border-radius: 6px 0 0 6px; +} + +spinbutton.vertical { + /* :not here just to bump specificity above that of the list button styling */ +} + +spinbutton.vertical > text { + min-height: 30px; + min-width: 30px; +} + +spinbutton.vertical > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +spinbutton.vertical > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child { + border-top-width: 1px; + border-radius: 0 0 6px 6px; +} + +spinbutton.vertical > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):first-child, +spinbutton.vertical > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):first-child { + border-bottom-width: 1px; + border-radius: 6px 6px 0 0; +} + +switch { + border-radius: 9999px; + padding: 3px; + background-color: alpha(currentColor,0.15); + transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); +} + +switch:hover { + background-color: alpha(currentColor,0.2); +} + +switch:active { + background-color: alpha(currentColor,0.25); +} + +switch { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +switch:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 1px; +} + +switch:disabled { + filter: opacity(0.45); +} + +switch > slider { + min-width: 18px; + min-height: 18px; + border-radius: 50%; + background-color: white; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15), 0 0 0 0 transparent; + transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-color 75ms cubic-bezier(0, 0, 0.2, 1); +} + +switch:hover > slider, switch:active > slider { + box-shadow: 0 2px 3px transparent, 0 0 0 6px alpha(currentColor,0.1); +} + +switch:checked { + color: @accent_fg_color; + background-color: @accent_bg_color; +} + +switch:checked:hover { + background-image: image(alpha(currentColor,0.1)); +} + +switch:checked:active { + background-image: image(rgba(0, 0, 0, 0.2)); +} + +switch:checked > slider { + color: @window_fg_color; + background-color: white; +} + +.osd switch:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +.osd switch:checked { + background-color: rgba(255, 255, 255, 0.6); + color: rgba(0, 0, 0, 0.75); +} + +tabbar .box { + background-color: @headerbar_bg_color; + color: @headerbar_fg_color; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); + padding: 1px; + padding-top: 0; +} + +tabbar .box:backdrop { + background-color: @headerbar_backdrop_color; + transition: background-color 200ms ease-out; +} + +tabbar .box:backdrop > scrolledwindow, +tabbar .box:backdrop > .start-action, +tabbar .box:backdrop > .end-action { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +tabbar tabbox { + padding-bottom: 6px; + padding-top: 6px; + min-height: 34px; +} + +tabbar tabbox > tabboxchild { + border-radius: 6px; +} + +tabbar tabbox > tabboxchild { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +tabbar tabbox > tabboxchild:focus-within:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +tabbar tabbox > separator { + margin-top: 5px; + margin-bottom: 5px; + transition: opacity 150ms ease-in-out; +} + +tabbar tabbox > separator.hidden { + opacity: 0; +} + +tabbar tabbox > revealer > indicator { + min-width: 2px; + border-radius: 2px; + margin: 3px 6px; + background: alpha(@accent_color,0.5); +} + +tabbar tab { + transition: background 150ms ease-in-out; +} + +tabbar tab:selected { + background-color: alpha(currentColor,0.1); +} + +tabbar tab:selected:hover { + background-color: alpha(currentColor,0.13); +} + +tabbar tab:selected:active { + background-color: alpha(currentColor,0.19); +} + +tabbar tab:hover { + background-color: alpha(currentColor,0.07); +} + +tabbar tab:active { + background-color: alpha(currentColor,0.16); +} + +tabbar tabbox.single-tab tab, tabbar tabbox.single-tab tab:hover, tabbar tabbox.single-tab tab:active { + background: none; +} + +tabbar .start-action, +tabbar .end-action { + padding: 6px; +} + +tabbar .start-action:dir(ltr), +tabbar .end-action:dir(rtl) { + padding-right: 0; +} + +tabbar .start-action:dir(rtl), +tabbar .end-action:dir(ltr) { + padding-left: 0; +} + +toolbarview > .top-bar tabbar .box, +toolbarview > .bottom-bar tabbar .box, tabbar.inline .box { + background-color: transparent; + color: inherit; + box-shadow: none; + padding-bottom: 0; +} + +toolbarview > .top-bar tabbar .box:backdrop, +toolbarview > .bottom-bar tabbar .box:backdrop, tabbar.inline .box:backdrop { + background-color: transparent; + transition: none; +} + +toolbarview > .top-bar tabbar .box:backdrop > scrolledwindow, +toolbarview > .bottom-bar tabbar .box:backdrop > scrolledwindow, tabbar.inline .box:backdrop > scrolledwindow, +toolbarview > .top-bar tabbar .box:backdrop > .start-action, +toolbarview > .bottom-bar tabbar .box:backdrop > .start-action, +tabbar.inline .box:backdrop > .start-action, +toolbarview > .top-bar tabbar .box:backdrop > .end-action, +toolbarview > .bottom-bar tabbar .box:backdrop > .end-action, +tabbar.inline .box:backdrop > .end-action { + filter: none; + transition: none; +} + +toolbarview > .top-bar .collapse-spacing tabbar tabbox, +toolbarview > .bottom-bar .collapse-spacing tabbar tabbox, +toolbarview > .top-bar .collapse-spacing tabbar .start-action, +toolbarview > .bottom-bar .collapse-spacing tabbar .start-action, +toolbarview > .top-bar .collapse-spacing tabbar .end-action, +toolbarview > .bottom-bar .collapse-spacing tabbar .end-action { + padding-top: 0; + padding-bottom: 6px; +} + +dnd tab { + background-color: @headerbar_bg_color; + background-image: image(alpha(currentColor,0.19)); + color: @headerbar_fg_color; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03); + margin: 25px; +} + +tabbar tab, +dnd tab { + min-height: 26px; + padding: 4px; + border-radius: 6px; +} + +tabbar tab button.image-button, +dnd tab button.image-button { + padding: 0; + margin: 0; + min-width: 24px; + min-height: 24px; + border-radius: 9999px; +} + +tabbar tab indicator, +dnd tab indicator { + min-height: 2px; + border-radius: 2px; + background: alpha(@accent_color,0.5); + transform: translateY(4px); +} + +tabgrid > tabgridchild .card { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +tabgrid > tabgridchild:focus:focus-visible .card { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 0; +} + +tabthumbnail { + border-radius: 16px; + transition: box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +tabthumbnail > box { + margin: 6px; +} + +tabthumbnail:drop(active) { + box-shadow: inset 0 0 0 2px alpha(@accent_bg_color,0.4); + background-color: alpha(@accent_bg_color,0.1); +} + +tabthumbnail .needs-attention:dir(ltr) { + transform: translate(8px, -8px); +} + +tabthumbnail .needs-attention:dir(rtl) { + transform: translate(-8px, -8px); +} + +tabthumbnail .needs-attention > widget { + background: @accent_color; + min-width: 12px; + min-height: 12px; + border-radius: 8px; + margin: 3px; + box-shadow: 0 1px 2px alpha(@accent_color,0.4); +} + +tabthumbnail .card { + background: none; + color: inherit; +} + +tabthumbnail .card picture { + outline: 1px solid rgba(255, 255, 255, 0.08); + outline-offset: -1px; + border-radius: 12px; +} + +tabthumbnail.pinned .card { + background-color: @thumbnail_bg_color; + color: @thumbnail_fg_color; +} + +tabthumbnail .icon-title-box { + border-spacing: 6px; +} + +tabthumbnail .tab-unpin-icon { + margin: 6px; + min-width: 24px; + min-height: 24px; +} + +tabthumbnail button.circular { + margin: 6px; + background-color: alpha(@thumbnail_bg_color,0.75); + min-width: 24px; + min-height: 24px; +} + +tabthumbnail button.circular:hover { + background-color: alpha(mix(@thumbnail_bg_color,currentColor,0.1),0.75); +} + +tabthumbnail button.circular:active { + background-color: alpha(mix(@thumbnail_bg_color,currentColor,0.2),0.75); +} + +taboverview > .overview .new-tab-button { + margin: 18px; +} + +tabview:drop(active), +tabbox:drop(active), +tabgrid:drop(active) { + box-shadow: none; +} + +cursor-handle { + all: unset; + padding: 24px 20px; +} + +cursor-handle > contents { + min-width: 20px; + min-height: 20px; + border-radius: 50%; + background-color: @accent_bg_color; +} + +cursor-handle.top > contents { + border-top-right-radius: 0; +} + +cursor-handle.bottom > contents { + border-top-left-radius: 0; + transform: translateX(1px); +} + +cursor-handle.insertion-cursor > contents { + border-top-left-radius: 0; + transform: translateX(1px) translateY(4px) rotate(45deg); +} + +magnifier { + background-color: @view_bg_color; +} + +actionbar > revealer > box.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible, searchbar > revealer > box.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible, .osd.toolbar button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible, headerbar.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +actionbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + color: inherit; + background-color: transparent; +} + +actionbar > revealer > box switch, searchbar > revealer > box switch, .toolbar switch, headerbar switch { + margin-top: 4px; + margin-bottom: 4px; +} + +.toolbar { + padding: 6px; + border-spacing: 6px; +} + +.toolbar.osd { + padding: 12px; + border-radius: 12px; +} + +toolbarview > .top-bar .collapse-spacing .toolbar, +toolbarview > .bottom-bar .collapse-spacing .toolbar { + padding-top: 6px; + padding-bottom: 6px; +} + +/**************** + * GtkSearchBar * + ****************/ +searchbar > revealer > box { + padding: 6px 6px 7px 6px; + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +searchbar > revealer > box:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +searchbar > revealer > box:backdrop > * { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +searchbar > revealer > box .close { + min-width: 18px; + min-height: 18px; + padding: 4px; + border-radius: 50%; +} + +searchbar > revealer > box .close:dir(ltr) { + margin-left: 10px; + margin-right: 4px; +} + +searchbar > revealer > box .close:dir(rtl) { + margin-left: 4px; + margin-right: 10px; +} + +toolbarview > .top-bar searchbar > revealer > box, +toolbarview > .bottom-bar searchbar > revealer > box, searchbar.inline > revealer > box, window.appchooser searchbar > revealer > box, window.shortcuts searchbar > revealer > box { + background-color: transparent; + color: inherit; + box-shadow: none; + padding-bottom: 6px; +} + +toolbarview > .top-bar searchbar > revealer > box:backdrop, +toolbarview > .bottom-bar searchbar > revealer > box:backdrop, searchbar.inline > revealer > box:backdrop { + background-color: transparent; + transition: none; +} + +toolbarview > .top-bar searchbar > revealer > box:backdrop > *, +toolbarview > .bottom-bar searchbar > revealer > box:backdrop > *, searchbar.inline > revealer > box:backdrop > * { + filter: none; + transition: none; +} + +toolbarview > .top-bar .collapse-spacing searchbar > revealer > box, +toolbarview > .bottom-bar .collapse-spacing searchbar > revealer > box, window.appchooser.csd searchbar > revealer > box, window.shortcuts searchbar > revealer > box { + padding-top: 6px; + padding-bottom: 6px; +} + +/**************** + * GtkActionBar * + ****************/ +actionbar > revealer > box { + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; + box-shadow: inset 0 1px alpha(@headerbar_border_color,0.12); + padding: 7px 6px 6px 6px; +} + +actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { + border-spacing: 6px; +} + +actionbar > revealer > box:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +actionbar > revealer > box:backdrop > * { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +toolbarview > .top-bar actionbar > revealer > box, +toolbarview > .bottom-bar actionbar > revealer > box { + background-color: transparent; + color: inherit; + box-shadow: none; + padding-top: 6px; +} + +toolbarview > .top-bar actionbar > revealer > box:backdrop, +toolbarview > .bottom-bar actionbar > revealer > box:backdrop { + background-color: transparent; + transition: none; +} + +toolbarview > .top-bar actionbar > revealer > box:backdrop > *, +toolbarview > .bottom-bar actionbar > revealer > box:backdrop > * { + filter: none; + transition: none; +} + +toolbarview > .top-bar .collapse-spacing actionbar > revealer > box, +toolbarview > .bottom-bar .collapse-spacing actionbar > revealer > box { + padding-top: 6px; + padding-bottom: 6px; +} + +/************* + * AdwBanner * + *************/ +banner > revealer > widget { + /* There are 2 more instances in _sidebars.css, keep in sync with that */ + background-color: mix(@accent_bg_color,@window_bg_color,0.7); + color: @window_fg_color; + padding: 6px; +} + +banner > revealer > widget:backdrop { + background-color: mix(@accent_bg_color,@window_bg_color,0.85); + transition: background-color 200ms ease-out; +} + +banner > revealer > widget:backdrop > label, banner > revealer > widget:backdrop > button { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +/****************** + * AdwToolbarView * + ******************/ +toolbarview > .top-bar .collapse-spacing, +toolbarview > .bottom-bar .collapse-spacing { + padding-top: 0; + padding-bottom: 0; +} + +toolbarview > .top-bar .collapse-spacing headerbar, +toolbarview > .bottom-bar .collapse-spacing headerbar { + padding-top: 3px; + padding-bottom: 3px; +} + +toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +window.devel toolbarview > .top-bar { + background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")), image(transparent)); + background-repeat: repeat-x; +} + +window.devel dialog toolbarview > .top-bar { + background-image: unset; + background-repeat: unset; +} + +toolbarview > .top-bar, +toolbarview > .bottom-bar { + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; +} + +toolbarview > .top-bar:backdrop, +toolbarview > .bottom-bar:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +toolbarview > .top-bar:backdrop > windowhandle, +toolbarview > .bottom-bar:backdrop > windowhandle { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +toolbarview > .top-bar { + box-shadow: 0 1px alpha(currentColor,0.12); +} + +toolbarview > .top-bar.border { + box-shadow: 0 1px alpha(currentColor,0.12); +} + +toolbarview > .bottom-bar { + box-shadow: 0 -1px alpha(currentColor,0.12); +} + +toolbarview > .bottom-bar.border { + box-shadow: 0 -1px alpha(currentColor,0.12); +} + +.sidebar-pane toolbarview > .top-bar, +.sidebar-pane toolbarview > .bottom-bar, .content-pane toolbarview > .top-bar, +.content-pane toolbarview > .bottom-bar, .about toolbarview > .top-bar, +.about toolbarview > .bottom-bar { + box-shadow: none; +} + +.sidebar-pane toolbarview > .top-bar, .sidebar-pane toolbarview > .top-bar:backdrop, +.sidebar-pane toolbarview > .bottom-bar, +.sidebar-pane toolbarview > .bottom-bar:backdrop, .content-pane toolbarview > .top-bar, .content-pane toolbarview > .top-bar:backdrop, +.content-pane toolbarview > .bottom-bar, +.content-pane toolbarview > .bottom-bar:backdrop, .about toolbarview > .top-bar, .about toolbarview > .top-bar:backdrop, +.about toolbarview > .bottom-bar, +.about toolbarview > .bottom-bar:backdrop { + background-color: transparent; +} + +tooltip { + padding: 6px 10px; + border-radius: 9px; + box-shadow: none; +} + +tooltip.background { + background-color: rgba(0, 0, 0, 0.8); + background-clip: padding-box; + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; +} + +tooltip > box { + border-spacing: 6px; +} + +.view, window.print .dialog-action-box, +textview > text, +dialog-host > dialog.view sheet, +window.print dialog-host > dialog.dialog-action-box sheet, +iconview { + color: @view_fg_color; + background-color: @view_bg_color; +} + +.view:disabled, window.print .dialog-action-box:disabled, +textview > text:disabled, +dialog-host > dialog.view sheet:disabled, +window.print dialog-host > dialog.dialog-action-box sheet:disabled, +iconview:disabled { + color: alpha(currentColor,0.5); + background-color: mix(@window_bg_color,@view_bg_color,0.4); +} + +.view:selected:focus, .view:selected, window.print .dialog-action-box:selected, +textview > text:selected, +dialog-host > dialog.view sheet:selected, +window.print dialog-host > dialog.dialog-action-box sheet:selected, +iconview:selected { + background-color: alpha(@accent_bg_color,0.25); + border-radius: 6px; +} + +textview { + caret-color: currentColor; +} + +textview > text { + background-color: transparent; +} + +textview > border { + background-color: mix(@window_bg_color,@view_bg_color,0.5); +} + +textview:drop(active) { + caret-color: @accent_bg_color; +} + +rubberband { + border: 1px solid @accent_color; + background-color: alpha(@accent_color,0.2); +} + +flowbox > flowboxchild, +gridview > child { + padding: 3px; + border-radius: 6px; +} + +flowbox > flowboxchild, +gridview > child { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +flowbox > flowboxchild:focus:focus-visible, +gridview > child:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +flowbox > flowboxchild:selected, +gridview > child:selected { + background-color: alpha(@accent_bg_color,0.25); +} + +gridview > child.activatable:hover { + background-color: alpha(currentColor,0.04); +} + +gridview > child.activatable:active { + background-color: alpha(currentColor,0.08); +} + +gridview > child.activatable:selected:hover { + background-color: alpha(@accent_bg_color,0.32); +} + +gridview > child.activatable:selected:active { + background-color: alpha(@accent_bg_color,0.39); +} + +viewswitcher { + border-spacing: 3px; +} + +viewswitcher.narrow { + margin-top: -3px; + margin-bottom: -3px; + min-height: 6px; +} + +viewswitcher button.toggle { + padding: 0; +} + +viewswitcher button.toggle > stack > box.narrow { + font-size: 0.75rem; + padding-top: 4px; +} + +viewswitcher button.toggle > stack > box.narrow > label { + min-height: 18px; + padding-left: 3px; + padding-right: 3px; + padding-bottom: 2px; +} + +viewswitcher button.toggle > stack > box.wide { + padding: 2px 12px; + border-spacing: 6px; +} + +/********************** + * AdwViewSwitcherBar * + **********************/ +viewswitcherbar actionbar > revealer > box { + padding-left: 0; + padding-right: 0; + padding-top: 7px; +} + +toolbarview > .top-bar .collapse-spacing viewswitcherbar actionbar > revealer > box, +toolbarview > .bottom-bar .collapse-spacing viewswitcherbar actionbar > revealer > box { + padding-top: 6px; +} + +/************************ + * AdwViewSwitcherTitle * + ************************/ +viewswitchertitle { + margin-top: -6px; + margin-bottom: -6px; +} + +viewswitchertitle viewswitcher { + margin-left: 12px; + margin-right: 12px; +} + +viewswitchertitle viewswitcher.narrow { + margin-top: 3px; + margin-bottom: 3px; +} + +viewswitchertitle viewswitcher.wide { + margin-top: 6px; + margin-bottom: 6px; +} + +viewswitchertitle windowtitle { + margin-top: 0; + margin-bottom: 0; +} + +/******************* + * AdwIndicatorBin * + *******************/ +indicatorbin > indicator, indicatorbin > mask { + min-width: 6px; + min-height: 6px; + border-radius: 100px; +} + +indicatorbin > indicator { + margin: 1px; + background: alpha(currentColor,0.4); +} + +indicatorbin > mask { + padding: 1px; + background: black; +} + +indicatorbin.needs-attention > indicator { + background: @accent_color; +} + +indicatorbin.badge > indicator, +indicatorbin.badge > mask { + min-height: 13px; +} + +indicatorbin.badge > indicator > label { + font-size: 0.6rem; + font-weight: bold; + padding-left: 4px; + padding-right: 4px; + color: white; +} + +indicatorbin.badge.needs-attention > indicator { + background: @accent_bg_color; +} + +indicatorbin.badge.needs-attention > indicator > label { + color: @accent_fg_color; +} + +window { + border: none; +} + +window.csd { + margin: 0; + border-radius: 12px; + outline-offset: -1px; + outline: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 15px 16px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 36px transparent, 0 0 0 1px @headerbar_darker_shade_color; +} + +window.csd:backdrop { + transition: box-shadow 200ms ease-out; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 3px 3px 0 rgba(0, 0, 0, 0.18), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 0 36px transparent, 0 0 0 1px @headerbar_darker_shade_color; +} + +window.csd.tiled, window.csd.tiled-top, window.csd.tiled-left, window.csd.tiled-right, window.csd.tiled-bottom { + border-radius: 0; + outline: none; +} + +window.csd.maximized, window.csd.fullscreen { + border-radius: 0; + outline: none; + box-shadow: none; + transition: none; +} + +window.solid-csd { + margin: 0; + padding: 2px; + border-radius: 0; + background-color: @headerbar_bg_color; + border: 1px solid @headerbar_darker_shade_color; +} + +window.ssd { + box-shadow: 0 0 0 1px @headerbar_darker_shade_color; +} + +.nautilus-window .floating-bar { + min-height: 32px; + padding: 0; + margin: 6px; + border-style: none; + border-radius: 6px; + background-color: @accent_color; + color: @accent_fg_color; + box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.05), 0 2px 3px -1px rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.05); +} + +.nautilus-window .floating-bar button { + margin: 4px; + color: @accent_fg_color; +} + +#NautilusQueryEditor > menubutton { + margin: 6px 0; +} + +#NautilusQueryEditor > menubutton > button.image-button { + min-width: 24px; + min-height: 24px; + padding: 0px; +} + +#NautilusPathBar { + background-color: alpha(currentColor,0.05); + border-radius: 6px; + padding: 0; +} + +#NautilusPathButton { + margin: 0; + border-radius: 6px; +} + +window.org-gnome-TextEditor popover.open-popover > contents { + padding: 0; +} + +popover.background.global-search > arrow, popover.background.global-search > contents { + padding: 0; +} + +popover.background.pages-popover listview > row { + padding: 6px; +} + +popover.background.pages-popover listview > row button { + margin: 0; +} + +popover.background.pages-popover listview > row check { + margin: 4px 2px; + -gtk-icon-size: 12px; +} + +panelresizer .top-bar { + box-shadow: inset 0 -1px alpha(currentColor,0.12); +} + +.frameheader.header { + min-height: 48px; + padding: 0; + border: none; + border-bottom: 1px solid alpha(currentColor,0.12); + background-color: @headerbar_backdrop_color; +} + +.frameheader.header:backdrop { + background-color: @headerbar_bg_color; +} + +.frameheader.header tabbar.inline tabbox > tabboxchild { + margin: 0; +} + +panelframeswitcher.frameheader.header { + padding: 0 6px; +} + +panelframeswitcher > button.toggle.image-button { + border: none; + margin: 6px 0; +} + +panelstatusbar { + box-shadow: inset 0 1px alpha(currentColor,0.12); +} + +panelstatusbar > menubutton > button, +panelstatusbar > paneltogglebutton button { + border-radius: 0; +} + +panelwidget entry.statusbar { + background-color: @window_bg_color; + border-radius: 0; + outline: none; + box-shadow: none; + border-top: 1px solid alpha(currentColor,0.12); +} + +panelwidget entry.statusbar:focus-within { + outline: none; +} + +.IdeTweaksWindow .boxed-list, .IdeTweaksWindow list.content, +.org-gnome-Builder .boxed-list, +.org-gnome-Builder list.content { + box-shadow: inset 0 0 0 1px alpha(currentColor,0.08); +} + +.style-variant { + padding: 0 12px; +} + +.style-variant button.toggle { + padding: 0; +} + +.style-variant button.toggle, .style-variant button.toggle:hover, .style-variant button.toggle:focus, .style-variant button.toggle:active, .style-variant button.toggle:checked { + background: none; + outline: none; + border: none; + box-shadow: none; +} + +.style-variant button.toggle > stylevariantpreview > .wallpaper { + border-radius: 6px; + outline-color: transparent; + outline-width: 3px; + outline-offset: 3px; + outline-style: solid; + box-shadow: none; +} + +.style-variant button.toggle:hover > stylevariantpreview > .wallpaper { + outline-color: alpha(currentColor,0.05); +} + +.style-variant button.toggle:active > stylevariantpreview > .wallpaper { + outline-color: alpha(currentColor,0.15); +} + +.style-variant button.toggle:checked > stylevariantpreview > .wallpaper { + outline-color: @accent_color; +} + +playlistview scrollbar.overlay-indicator.dragging, playlistview scrollbar.overlay-indicator.hovering { + background-color: transparent; +} + +playlistview queuerow picture.cover, +playlistview queuerow image.card { + border: none; +} + +themeselector, +panelthemeselector { + margin: 9px; +} + +themeselector checkbutton, +panelthemeselector checkbutton { + padding: 0; + min-height: 44px; + min-width: 44px; + padding: 1px; + background-clip: content-box; + border-radius: 9999px; + box-shadow: inset 0 0 0 1px alpha(currentColor,0.12); +} + +themeselector checkbutton.follow:checked, themeselector checkbutton.light:checked, themeselector checkbutton.dark:checked, +panelthemeselector checkbutton.follow:checked, +panelthemeselector checkbutton.light:checked, +panelthemeselector checkbutton.dark:checked { + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +themeselector checkbutton.follow, +panelthemeselector checkbutton.follow { + background-image: linear-gradient(to bottom right, #ffffff 50%, #202020 50%); +} + +themeselector checkbutton.light, +panelthemeselector checkbutton.light { + background-color: #ffffff; +} + +themeselector checkbutton.dark, +panelthemeselector checkbutton.dark { + background-color: #202020; +} + +themeselector checkbutton.theme-selector radio, +panelthemeselector checkbutton.theme-selector radio { + -gtk-icon-source: none; + border: none; + box-shadow: none; + min-height: 20px; + min-width: 20px; + padding: 0; +} + +themeselector checkbutton.theme-selector radio, themeselector checkbutton.theme-selector radio:hover, themeselector checkbutton.theme-selector radio:active, themeselector checkbutton.theme-selector radio:checked, +panelthemeselector checkbutton.theme-selector radio, +panelthemeselector checkbutton.theme-selector radio:hover, +panelthemeselector checkbutton.theme-selector radio:active, +panelthemeselector checkbutton.theme-selector radio:checked { + background-color: transparent; + background-image: none; +} + +themeselector checkbutton.theme-selector radio:checked, +panelthemeselector checkbutton.theme-selector radio:checked { + -gtk-icon-size: 20px; + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/checkbox-checked-symbolic@2.svg"))); +} + +themeselector checkbutton.theme-selector radio:checked, themeselector checkbutton.theme-selector radio:checked:hover, themeselector checkbutton.theme-selector radio:checked:active, +panelthemeselector checkbutton.theme-selector radio:checked, +panelthemeselector checkbutton.theme-selector radio:checked:hover, +panelthemeselector checkbutton.theme-selector radio:checked:active { + color: @accent_fg_color; + background-color: @accent_bg_color; + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.1); +} + +popover.menu themeswitcher { + padding: 6px; +} + +popover.menu themeswitcher .check { + min-height: 20px; + min-width: 20px; + background: none; + padding: 0; + margin: 0; + border-radius: 9999px; + color: @accent_fg_color; + background-color: @accent_bg_color; +} + +popover.menu themeswitcher .check, popover.menu themeswitcher .check:hover, popover.menu themeswitcher .check:active { + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.1); +} + +popover.menu themeswitcher checkbutton { + padding: 0; + min-height: 44px; + min-width: 44px; + padding: 1px; + border: none; + background-clip: content-box; + border-radius: 9999px; + box-shadow: inset 0 0 0 1px alpha(currentColor,0.12); +} + +popover.menu themeswitcher checkbutton:checked { + box-shadow: inset 0 0 0 2px @accent_color; +} + +popover.menu themeswitcher checkbutton radio { + padding: 0; + border: none; +} + +popover.menu themeswitcher checkbutton radio, popover.menu themeswitcher checkbutton radio:hover, popover.menu themeswitcher checkbutton radio:active, popover.menu themeswitcher checkbutton radio:checked, popover.menu themeswitcher checkbutton radio:indeterminate { + background-color: transparent; + background-image: none; + box-shadow: none; + color: transparent; +} + +popover.menu themeswitcher checkbutton radio:checked, popover.menu themeswitcher checkbutton radio:indeterminate { + -gtk-icon-source: none; + -gtk-icon-size: 0; +} + +popover.menu themeswitcher checkbutton.system { + background: linear-gradient(-45deg, #1e1e1e 50%, white 50%); +} + +popover.menu themeswitcher checkbutton.light { + color: alpha(black,0.8); + background-color: white; +} + +popover.menu themeswitcher checkbutton.dark { + color: white; + background-color: #1e1e1e; +} + +window#desktopwindow.background { + background: none; +} + +/* GTK NAMED COLORS + ---------------- + use responsibly! */ +@define-color destructive_bg_color #F44336; +@define-color destructive_fg_color #FFFFFF; +@define-color destructive_color #F44336; +@define-color success_bg_color #66BB6A; +@define-color success_fg_color #FFFFFF; +@define-color success_color #66BB6A; +@define-color warning_bg_color #FFD600; +@define-color warning_fg_color rgba(0, 0, 0, 0.87); +@define-color warning_color #FFD600; +@define-color error_bg_color #F44336; +@define-color error_fg_color #FFFFFF; +@define-color error_color #F44336; +/* Public colors from Default */ +@define-color theme_bg_color @window_bg_color; +@define-color theme_fg_color @window_fg_color; +@define-color theme_base_color @view_bg_color; +@define-color theme_text_color @view_fg_color; +@define-color theme_selected_bg_color @accent_bg_color; +@define-color theme_selected_fg_color @accent_fg_color; +@define-color insensitive_bg_color mix(@window_bg_color,@view_bg_color,0.4); +@define-color insensitive_fg_color alpha(@window_fg_color,0.5); +@define-color insensitive_base_color @view_bg_color; +@define-color borders alpha(currentColor,0.12); +@define-color theme_unfocused_bg_color @window_bg_color; +@define-color theme_unfocused_fg_color @window_fg_color; +@define-color theme_unfocused_base_color @view_bg_color; +@define-color theme_unfocused_text_color @view_fg_color; +@define-color theme_unfocused_selected_bg_color @accent_bg_color; +@define-color theme_unfocused_selected_fg_color @accent_fg_color; +@define-color unfocused_insensitive_color @insensitive_bg_color; +@define-color unfocused_borders alpha(currentColor,0.12); diff --git a/src/main/libadwaita/libadwaita-Light.css b/src/main/libadwaita/libadwaita-Light.css new file mode 100644 index 00000000..842f4c7e --- /dev/null +++ b/src/main/libadwaita/libadwaita-Light.css @@ -0,0 +1,7450 @@ +@define-color blue_1 #99c1f1; +@define-color blue_2 #62a0ea; +@define-color blue_3 #3584e4; +@define-color blue_4 #1c71d8; +@define-color blue_5 #1a5fb4; +@define-color green_1 #8ff0a4; +@define-color green_2 #57e389; +@define-color green_3 #33d17a; +@define-color green_4 #2ec27e; +@define-color green_5 #26a269; +@define-color yellow_1 #f9f06b; +@define-color yellow_2 #f8e45c; +@define-color yellow_3 #f6d32d; +@define-color yellow_4 #f5c211; +@define-color yellow_5 #e5a50a; +@define-color orange_1 #ffbe6f; +@define-color orange_2 #ffa348; +@define-color orange_3 #ff7800; +@define-color orange_4 #e66100; +@define-color orange_5 #c64600; +@define-color red_1 #f66151; +@define-color red_2 #ed333b; +@define-color red_3 #e01b24; +@define-color red_4 #c01c28; +@define-color red_5 #a51d2d; +@define-color purple_1 #dc8add; +@define-color purple_2 #c061cb; +@define-color purple_3 #9141ac; +@define-color purple_4 #813d9c; +@define-color purple_5 #613583; +@define-color brown_1 #cdab8f; +@define-color brown_2 #b5835a; +@define-color brown_3 #986a44; +@define-color brown_4 #865e3c; +@define-color brown_5 #63452c; +@define-color light_1 #ffffff; +@define-color light_2 #f6f5f4; +@define-color light_3 #deddda; +@define-color light_4 #c0bfbc; +@define-color light_5 #9a9996; +@define-color dark_1 #77767b; +@define-color dark_2 #5e5c64; +@define-color dark_3 #3d3846; +@define-color dark_4 #241f31; +@define-color dark_5 #000000; +:root { + --accent-color: @accent_color; + --accent-bg-color: @accent_bg_color; + --accent-fg-color: @accent_fg_color; + --destructive-color: @destructive_color; + --destructive-bg-color: @destructive_bg_color; + --destructive-fg-color: @destructive_fg_color; + --success-color: @success_color; + --success-bg-color: @success_bg_color; + --success-fg-color: @success_fg_color; + --warning-color: @warning_color; + --warning-bg-color: @warning_bg_color; + --warning-fg-color: @warning_fg_color; + --error-color: @error_color; + --error-bg-color: @error_bg_color; + --error-fg-color: @error_fg_color; + --window-bg-color: @window_bg_color; + --window-fg-color: @window_fg_color; + --view-bg-color: @view_bg_color; + --view-fg-color: @view_fg_color; + --headerbar-bg-color: @headerbar_bg_color; + --headerbar-fg-color: @headerbar_fg_color; + --headerbar-border-color: @headerbar_border_color; + --headerbar-backdrop-color: @headerbar_backdrop_color; + --headerbar-shade-color: @headerbar_shade_color; + --headerbar-darker-shade-color: @headerbar_darker_shade_color; + --sidebar-bg-color: @sidebar_bg_color; + --sidebar-fg-color: @sidebar_fg_color; + --sidebar-backdrop-color: @sidebar_backdrop_color; + --sidebar-border-color: @sidebar_border_color; + --sidebar-shade-color: @sidebar_shade_color; + --secondary-sidebar-bg-color: @secondary_sidebar_bg_color; + --secondary-sidebar-fg-color: @secondary_sidebar_fg_color; + --secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color; + --secondary-sidebar-border-color: @secondary_sidebar_border_color; + --secondary-sidebar-shade-color: @secondary_sidebar_shade_color; + --card-bg-color: @card_bg_color; + --card-fg-color: @card_fg_color; + --card-shade-color: @card_shade_color; + --dialog-bg-color: @dialog_bg_color; + --dialog-fg-color: @dialog_fg_color; + --popover-bg-color: @popover_bg_color; + --popover-fg-color: @popover_fg_color; + --popover-shade-color: @popover_shade_color; + --thumbnail-bg-color: @thumbnail_bg_color; + --thumbnail-fg-color: @thumbnail_fg_color; + --shade-color: @shade_color; + --scrollbar-outline-color: @scrollbar_outline_color; +} + +:root { + --border-color: alpha(currentColor,0.12); + --border-opacity: 0.12; + --dim-opacity: 0.55; + --disabled-opacity: 0.45; +} + +@keyframes ripple { + to { + background-size: 1000% 1000%; + } +} + +@keyframes ripple-on-slider { + to { + background-size: auto, 1000% 1000%; + } +} + +@keyframes ripple-on-headerbar { + from { + background-image: radial-gradient(circle, @accent_color 0%, transparent 0%); + } + to { + background-image: radial-gradient(circle, @accent_color 100%, transparent 100%); + } +} + +:root { + --window-radius: 12px; +} + +.background { + color: @window_fg_color; + background-color: @window_bg_color; +} + +dnd { + color: @window_fg_color; +} + +.normal-icons { + -gtk-icon-size: 16px; +} + +.large-icons { + -gtk-icon-size: 32px; +} + +.osd popover > arrow, +.osd popover > contents, popover.touch-selection > arrow, +popover.touch-selection > contents, popover.magnifier > arrow, +popover.magnifier > contents, toast, .app-notification, dialog-host > dialog.osd sheet, +.osd { + color: rgba(255, 255, 255, 0.9); + border: none; + background-color: rgba(0, 0, 0, 0.7); + background-clip: padding-box; +} + +/* Text selection */ +selection { + background-color: alpha(@view_fg_color,0.1); + color: transparent; +} + +selection:focus-within { + background-color: alpha(@accent_bg_color,0.3); +} + +:not(window):drop(active):focus, +:not(window):drop(active) { + border-color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; + caret-color: @accent_bg_color; +} + +.navigation-sidebar :not(window):drop(active):focus, +.navigation-sidebar :not(window):drop(active), +placessidebar :not(window):drop(active):focus, +placessidebar :not(window):drop(active), +stackswitcher :not(window):drop(active):focus, +stackswitcher :not(window):drop(active), +expander-widget :not(window):drop(active):focus, +expander-widget :not(window):drop(active) { + box-shadow: none; +} + +/* Outline for low res icons */ +.lowres-icon { + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); +} + +/* Drop shadow for large icons */ +.icon-dropshadow { + -gtk-icon-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); +} + +@keyframes needs_attention { + from { + background-image: radial-gradient(farthest-side, @accent_color 0%, transparent 0%); + } + to { + background-image: radial-gradient(farthest-side, @accent_color 95%, transparent); + } +} + +stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, +stackswitcher > button.needs-attention > image { + animation: needs_attention 150ms ease-in; + background-image: radial-gradient(farthest-side, @accent_color 96%, transparent); + background-size: 6px 6px; + background-repeat: no-repeat; + background-position: right 3px; +} + +stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl), +stackswitcher > button.needs-attention > image:dir(rtl) { + background-position: left 3px; +} + +avatar { + border-radius: 9999px; + font-weight: bold; +} + +avatar.color1 { + background-image: linear-gradient(#83b6ec, #337fdc); + color: #cfe1f5; +} + +avatar.color2 { + background-image: linear-gradient(#7ad9f1, #0f9ac8); + color: #caeaf2; +} + +avatar.color3 { + background-image: linear-gradient(#8de6b1, #29ae74); + color: #cef8d8; +} + +avatar.color4 { + background-image: linear-gradient(#b5e98a, #6ab85b); + color: #e6f9d7; +} + +avatar.color5 { + background-image: linear-gradient(#f8e359, #d29d09); + color: #f9f4e1; +} + +avatar.color6 { + background-image: linear-gradient(#ffcb62, #d68400); + color: #ffead1; +} + +avatar.color7 { + background-image: linear-gradient(#ffa95a, #ed5b00); + color: #ffe5c5; +} + +avatar.color8 { + background-image: linear-gradient(#f78773, #e62d42); + color: #f8d2ce; +} + +avatar.color9 { + background-image: linear-gradient(#e973ab, #e33b6a); + color: #fac7de; +} + +avatar.color10 { + background-image: linear-gradient(#cb78d4, #9945b5); + color: #e7c2e8; +} + +avatar.color11 { + background-image: linear-gradient(#9e91e8, #7a59ca); + color: #d5d2f5; +} + +avatar.color12 { + background-image: linear-gradient(#e3cf9c, #b08952); + color: #f2eade; +} + +avatar.color13 { + background-image: linear-gradient(#be916d, #785336); + color: #e5d6ca; +} + +avatar.color14 { + background-image: linear-gradient(#c0bfbc, #6e6d71); + color: #d8d7d3; +} + +avatar.contrasted { + color: white; +} + +avatar.image { + background: none; +} + +bottom-sheet > dimming { + background-color: alpha(@shade_color,2); +} + +bottom-sheet > sheet { + border-top-left-radius: 12px; + border-top-right-radius: 12px; + box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.07), 0 3px 20px 10px rgba(0, 0, 0, 0.05), 0 6px 32px 16px rgba(0, 0, 0, 0.02), 0 0 0 1px @shade_color; +} + +bottom-sheet > sheet > drag-handle { + background-color: alpha(currentColor,0.25); + min-width: 60px; + min-height: 4px; + margin: 6px; + border-radius: 9999px; +} + +bottom-sheet > sheet > outline { + border-top-left-radius: 12px; + border-top-right-radius: 12px; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +bottom-sheet > sheet > outline.flush-left { + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +bottom-sheet > sheet > outline.flush-right { + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +bottom-sheet > sheet > outline.flush-left.flush-right { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); +} + +notebook > header > tabs > arrow, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay, +button { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), outline 300ms cubic-bezier(0, 0, 0.2, 1); + background-color: alpha(currentColor,0.05); + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; + outline: 0 solid transparent; + outline-offset: 2px; + color: currentColor; +} + +notebook > header > tabs > arrow:focus, row.spin spinbutton > button.image-button.up:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:focus, +button:focus { + outline: 2px solid alpha(@accent_color,0.35); + outline-offset: 0; +} + +notebook > header > tabs > arrow:hover, row.spin spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:hover, +button:hover { + background-color: alpha(currentColor,0.12); + color: currentColor; + outline: 0 solid transparent; + -gtk-icon-filter: brightness(1.2); +} + +notebook > header > tabs > arrow.keyboard-activating, row.spin spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay.keyboard-activating, +button.keyboard-activating, notebook > header > tabs > arrow:active, row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:active, +button:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.12) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.12); + color: currentColor; + outline: 0 solid transparent; +} + +notebook > header > tabs > arrow:disabled, row.spin spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:disabled, +button:disabled { + background-color: alpha(currentColor,0.05); + color: alpha(currentColor,0.45); + outline-color: transparent; +} + +notebook > header > tabs > arrow:checked, row.spin spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked, +button:checked { + background-color: @accent_color; + color: @accent_fg_color; +} + +notebook > header > tabs > arrow:checked:hover, row.spin spinbutton > button.image-button.up:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +row.spin spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked:hover, +button:checked:hover { + outline-color: transparent; + background-color: mix(@accent_fg_color,@accent_color,0.95); + color: @accent_fg_color; +} + +notebook > header > tabs > arrow:checked:active, row.spin spinbutton > button.image-button.up:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +row.spin spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked:active, +button:checked:active { + animation: none; + outline-color: transparent; + background-color: mix(@accent_fg_color,@accent_color,0.88); + background-image: none; + color: @accent_fg_color; +} + +notebook > header > tabs > arrow:checked:disabled, row.spin spinbutton > button.image-button.up:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +row.spin spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked:disabled, +button:checked:disabled { + outline-color: transparent; + background-color: alpha(@accent_color,0.35); + color: alpha(@accent_fg_color,0.35); +} + +panelstatusbar > menubutton > button, +panelstatusbar > paneltogglebutton button, #NautilusPathButton, searchbar > revealer > box .close, actionbar > revealer > box menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, actionbar > revealer > box button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow, window.dialog.message.csd .dialog-action-area > button, popover.menu box.circular-buttons button.circular.image-button.model, popover.menu box.inline-buttons button.image-button.model, filechooser #pathbarbox > stack > box > button, +filechooser #pathbarbox > stack > box > box > button, +filechooser #pathbarbox > stack > box > menubutton > button, button.sidebar-button, button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close, calendar > header > button, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, splitbutton.flat > button, +splitbutton.flat > menubutton > button, menubutton.flat > button, +button.flat { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), outline 300ms cubic-bezier(0, 0, 0.2, 1); + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; + background-color: transparent; + outline: 0 solid transparent; + outline-offset: 2px; + color: alpha(currentColor,0.75); +} + +panelstatusbar > menubutton > button:focus:not(:hover):not(:active), +panelstatusbar > paneltogglebutton button:focus:not(:hover):not(:active), #NautilusPathButton:focus:not(:hover):not(:active), searchbar > revealer > box .close:focus:not(:hover):not(:active), actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), actionbar > revealer > box button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:focus:not(:hover):not(:active):not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:focus:not(:hover):not(:active):not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:focus:not(:hover):not(:active), window.dialog.message.csd .dialog-action-area > button:focus:not(:hover):not(:active), popover.menu box.circular-buttons button.circular.image-button.model:focus:not(:hover):not(:active), popover.menu box.inline-buttons button.image-button.model:focus:not(:hover):not(:active), filechooser #pathbarbox > stack > box > button:focus:not(:hover):not(:active), +filechooser #pathbarbox > stack > box > box > button:focus:not(:hover):not(:active), +filechooser #pathbarbox > stack > box > menubutton > button:focus:not(:hover):not(:active), button.sidebar-button:focus:not(:hover):not(:active), button.emoji-section.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:focus:not(:hover):not(:active), calendar > header > button:focus:not(:hover):not(:active), actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), splitbutton.flat > button:focus:not(:hover):not(:active), +splitbutton.flat > menubutton > button:focus:not(:hover):not(:active), menubutton.flat > button:focus:not(:hover):not(:active), +button.flat:focus:not(:hover):not(:active) { + color: currentColor; + outline: 2px solid alpha(currentColor,0.05); + outline-offset: -2px; +} + +panelstatusbar > menubutton > button:hover, +panelstatusbar > paneltogglebutton button:hover, #NautilusPathButton:hover, searchbar > revealer > box .close:hover, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, actionbar > revealer > box button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:hover, window.dialog.message.csd .dialog-action-area > button:hover, popover.menu box.circular-buttons button.circular.image-button.model:hover, popover.menu box.inline-buttons button.image-button.model:hover, filechooser #pathbarbox > stack > box > button:hover, +filechooser #pathbarbox > stack > box > box > button:hover, +filechooser #pathbarbox > stack > box > menubutton > button:hover, button.sidebar-button:hover, button.emoji-section.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:hover, calendar > header > button:hover, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, splitbutton.flat > button:hover, +splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, +button.flat:hover { + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +panelstatusbar > menubutton > button.keyboard-activating, +panelstatusbar > paneltogglebutton button.keyboard-activating, .keyboard-activating#NautilusPathButton, searchbar > revealer > box .keyboard-activating.close, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, actionbar > revealer > box button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow.keyboard-activating, window.dialog.message.csd .dialog-action-area > button.keyboard-activating, popover.menu box.circular-buttons button.keyboard-activating.circular.image-button.model, popover.menu box.inline-buttons button.keyboard-activating.image-button.model, filechooser #pathbarbox > stack > box > button.keyboard-activating, +filechooser #pathbarbox > stack > box > box > button.keyboard-activating, +filechooser #pathbarbox > stack > box > menubutton > button.keyboard-activating, button.keyboard-activating.sidebar-button, button.keyboard-activating.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .keyboard-activating.close, calendar > header > button.keyboard-activating, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, splitbutton.flat > button.keyboard-activating, +splitbutton.flat > menubutton > button.keyboard-activating, menubutton.flat > button.keyboard-activating, +button.keyboard-activating.flat, +window.shortcuts headerbar.keyboard-activating.titlebar, +window.appchooser headerbar.keyboard-activating.titlebar, +window.colorchooser headerbar.keyboard-activating.titlebar, +window.aboutdialog headerbar.keyboard-activating.titlebar, +window.pagesetup headerbar.keyboard-activating.titlebar, +window.print headerbar.keyboard-activating.titlebar, panelstatusbar > menubutton > button:active, +panelstatusbar > paneltogglebutton button:active, #NautilusPathButton:active, searchbar > revealer > box .close:active, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, actionbar > revealer > box button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:active, window.dialog.message.csd .dialog-action-area > button:active, popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.inline-buttons button.image-button.model:active, filechooser #pathbarbox > stack > box > button:active, +filechooser #pathbarbox > stack > box > box > button:active, +filechooser #pathbarbox > stack > box > menubutton > button:active, button.sidebar-button:active, button.emoji-section.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:active, calendar > header > button:active, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, splitbutton.flat > button:active, +splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, +button.flat:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.12) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +panelstatusbar > menubutton > button:disabled, +panelstatusbar > paneltogglebutton button:disabled, #NautilusPathButton:disabled, searchbar > revealer > box .close:disabled, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, actionbar > revealer > box button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, popover.menu box.circular-buttons button.circular.image-button.model:disabled, popover.menu box.inline-buttons button.image-button.model:disabled, filechooser #pathbarbox > stack > box > button:disabled, +filechooser #pathbarbox > stack > box > box > button:disabled, +filechooser #pathbarbox > stack > box > menubutton > button:disabled, button.sidebar-button:disabled, button.emoji-section.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:disabled, calendar > header > button:disabled, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, splitbutton.flat > button:disabled, +splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, +button.flat:disabled { + color: alpha(currentColor,0.35); + background-color: transparent; +} + +panelstatusbar > menubutton > button:checked, +panelstatusbar > paneltogglebutton button:checked, #NautilusPathButton:checked, searchbar > revealer > box .close:checked, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, actionbar > revealer > box button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked, window.dialog.message.csd .dialog-action-area > button:checked, popover.menu box.circular-buttons button.circular.image-button.model:checked, popover.menu box.inline-buttons button.image-button.model:checked, filechooser #pathbarbox > stack > box > button:checked, +filechooser #pathbarbox > stack > box > box > button:checked, +filechooser #pathbarbox > stack > box > menubutton > button:checked, button.sidebar-button:checked, button.emoji-section.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked, calendar > header > button:checked, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, splitbutton.flat > button:checked, +splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, +button.flat:checked { + background-color: alpha(currentColor,0.1); + color: currentColor; +} + +panelstatusbar > menubutton > button:checked:hover, +panelstatusbar > paneltogglebutton button:checked:hover, #NautilusPathButton:checked:hover, searchbar > revealer > box .close:checked:hover, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, actionbar > revealer > box button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked:hover, window.dialog.message.csd .dialog-action-area > button:checked:hover, popover.menu box.circular-buttons button.circular.image-button.model:checked:hover, popover.menu box.inline-buttons button.image-button.model:checked:hover, filechooser #pathbarbox > stack > box > button:checked:hover, +filechooser #pathbarbox > stack > box > box > button:checked:hover, +filechooser #pathbarbox > stack > box > menubutton > button:checked:hover, button.sidebar-button:checked:hover, button.emoji-section.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked:hover, calendar > header > button:checked:hover, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, splitbutton.flat > button:checked:hover, +splitbutton.flat > menubutton > button:checked:hover, menubutton.flat > button:checked:hover, +button.flat:checked:hover { + background-color: alpha(currentColor,0.15); + color: currentColor; +} + +panelstatusbar > menubutton > button:checked:active, +panelstatusbar > paneltogglebutton button:checked:active, #NautilusPathButton:checked:active, searchbar > revealer > box .close:checked:active, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, actionbar > revealer > box button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked:active, window.dialog.message.csd .dialog-action-area > button:checked:active, popover.menu box.circular-buttons button.circular.image-button.model:checked:active, popover.menu box.inline-buttons button.image-button.model:checked:active, filechooser #pathbarbox > stack > box > button:checked:active, +filechooser #pathbarbox > stack > box > box > button:checked:active, +filechooser #pathbarbox > stack > box > menubutton > button:checked:active, button.sidebar-button:checked:active, button.emoji-section.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked:active, calendar > header > button:checked:active, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, splitbutton.flat > button:checked:active, +splitbutton.flat > menubutton > button:checked:active, menubutton.flat > button:checked:active, +button.flat:checked:active { + animation: none; + outline-color: transparent; + background-color: alpha(currentColor,0.2); + background-image: none; + color: currentColor; +} + +panelstatusbar > menubutton > button:checked:disabled, +panelstatusbar > paneltogglebutton button:checked:disabled, #NautilusPathButton:checked:disabled, searchbar > revealer > box .close:checked:disabled, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, actionbar > revealer > box button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, popover.menu box.circular-buttons button.circular.image-button.model:checked:disabled, popover.menu box.inline-buttons button.image-button.model:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, +filechooser #pathbarbox > stack > box > box > button:checked:disabled, +filechooser #pathbarbox > stack > box > menubutton > button:checked:disabled, button.sidebar-button:checked:disabled, button.emoji-section.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked:disabled, calendar > header > button:checked:disabled, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, splitbutton.flat > button:checked:disabled, +splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, +button.flat:checked:disabled { + background-color: alpha(currentColor,0.1); + color: alpha(currentColor,0.45); +} + +actionbar > revealer > box popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, actionbar > revealer > box popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.05); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, actionbar > revealer > box popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.12); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, actionbar > revealer > box popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, actionbar > revealer > box popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.2); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, actionbar > revealer > box popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.1); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, actionbar > revealer > box popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.15); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, actionbar > revealer > box popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, actionbar > revealer > box popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.2); +} + +actionbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button, splitbutton.suggested-action > menubutton > button, splitbutton.destructive-action > button, splitbutton.destructive-action > menubutton > button, splitbutton.opaque > button, splitbutton.opaque > menubutton > button, menubutton.suggested-action > button, menubutton.destructive-action > button, menubutton.opaque > button, +button.suggested-action, +button.destructive-action, +button.opaque { + box-shadow: none; +} + +actionbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button, splitbutton.suggested-action > menubutton > button, splitbutton.destructive-action > button, splitbutton.destructive-action > menubutton > button, splitbutton.opaque > button, splitbutton.opaque > menubutton > button, menubutton.suggested-action > button, menubutton.destructive-action > button, menubutton.opaque > button, +button.suggested-action, +button.destructive-action, +button.opaque { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +actionbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:focus:focus-visible, splitbutton.suggested-action > menubutton > button:focus:focus-visible, splitbutton.destructive-action > button:focus:focus-visible, splitbutton.destructive-action > menubutton > button:focus:focus-visible, splitbutton.opaque > button:focus:focus-visible, splitbutton.opaque > menubutton > button:focus:focus-visible, menubutton.suggested-action > button:focus:focus-visible, menubutton.destructive-action > button:focus:focus-visible, menubutton.opaque > button:focus:focus-visible, +button.suggested-action:focus:focus-visible, +button.destructive-action:focus:focus-visible, +button.opaque:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 1px; +} + +.osd actionbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd searchbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd .toolbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd headerbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd actionbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd searchbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd .toolbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd headerbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd actionbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd searchbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd .toolbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd headerbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd splitbutton.suggested-action > button:focus:focus-visible, .osd splitbutton.suggested-action > menubutton > button:focus:focus-visible, .osd splitbutton.destructive-action > button:focus:focus-visible, .osd splitbutton.destructive-action > menubutton > button:focus:focus-visible, .osd splitbutton.opaque > button:focus:focus-visible, .osd splitbutton.opaque > menubutton > button:focus:focus-visible, .osd menubutton.suggested-action > button:focus:focus-visible, .osd menubutton.destructive-action > button:focus:focus-visible, .osd menubutton.opaque > button:focus:focus-visible, +.osd button.suggested-action:focus:focus-visible, +.osd button.destructive-action:focus:focus-visible, +.osd button.opaque:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +actionbar > revealer > box menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:hover, splitbutton.suggested-action > menubutton > button:hover, splitbutton.destructive-action > button:hover, splitbutton.destructive-action > menubutton > button:hover, splitbutton.opaque > button:hover, splitbutton.opaque > menubutton > button:hover, menubutton.suggested-action > button:hover, menubutton.destructive-action > button:hover, menubutton.opaque > button:hover, +button.suggested-action:hover, +button.destructive-action:hover, +button.opaque:hover { + background-image: image(alpha(currentColor,0.1)); +} + +actionbar > revealer > box menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button.keyboard-activating, splitbutton.suggested-action > menubutton > button.keyboard-activating, splitbutton.destructive-action > button.keyboard-activating, splitbutton.destructive-action > menubutton > button.keyboard-activating, splitbutton.opaque > button.keyboard-activating, splitbutton.opaque > menubutton > button.keyboard-activating, menubutton.suggested-action > button.keyboard-activating, menubutton.destructive-action > button.keyboard-activating, menubutton.opaque > button.keyboard-activating, +button.keyboard-activating.suggested-action, +button.keyboard-activating.destructive-action, +button.keyboard-activating.opaque, actionbar > revealer > box menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:active, splitbutton.suggested-action > menubutton > button:active, splitbutton.destructive-action > button:active, splitbutton.destructive-action > menubutton > button:active, splitbutton.opaque > button:active, splitbutton.opaque > menubutton > button:active, menubutton.suggested-action > button:active, menubutton.destructive-action > button:active, menubutton.opaque > button:active, +button.suggested-action:active, +button.destructive-action:active, +button.opaque:active { + background-image: image(rgba(0, 0, 0, 0.2)); +} + +actionbar > revealer > box menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button:checked, menubutton.suggested-action > button:checked, menubutton.destructive-action > button:checked, menubutton.opaque > button:checked, +button.suggested-action:checked, +button.destructive-action:checked, +button.opaque:checked { + background-image: image(rgba(0, 0, 0, 0.15)); +} + +actionbar > revealer > box menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked:hover, splitbutton.suggested-action > menubutton > button:checked:hover, splitbutton.destructive-action > button:checked:hover, splitbutton.destructive-action > menubutton > button:checked:hover, splitbutton.opaque > button:checked:hover, splitbutton.opaque > menubutton > button:checked:hover, menubutton.suggested-action > button:checked:hover, menubutton.destructive-action > button:checked:hover, menubutton.opaque > button:checked:hover, +button.suggested-action:checked:hover, +button.destructive-action:checked:hover, +button.opaque:checked:hover { + background-image: image(rgba(0, 0, 0, 0.05)); +} + +actionbar > revealer > box menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked.keyboard-activating, splitbutton.suggested-action > menubutton > button:checked.keyboard-activating, splitbutton.destructive-action > button:checked.keyboard-activating, splitbutton.destructive-action > menubutton > button:checked.keyboard-activating, splitbutton.opaque > button:checked.keyboard-activating, splitbutton.opaque > menubutton > button:checked.keyboard-activating, menubutton.suggested-action > button:checked.keyboard-activating, menubutton.destructive-action > button:checked.keyboard-activating, menubutton.opaque > button:checked.keyboard-activating, +button.suggested-action:checked.keyboard-activating, +button.destructive-action:checked.keyboard-activating, +button.opaque:checked.keyboard-activating, actionbar > revealer > box menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked:active, splitbutton.suggested-action > menubutton > button:checked:active, splitbutton.destructive-action > button:checked:active, splitbutton.destructive-action > menubutton > button:checked:active, splitbutton.opaque > button:checked:active, splitbutton.opaque > menubutton > button:checked:active, menubutton.suggested-action > button:checked:active, menubutton.destructive-action > button:checked:active, menubutton.opaque > button:checked:active, +button.suggested-action:checked:active, +button.destructive-action:checked:active, +button.opaque:checked:active { + background-image: image(rgba(0, 0, 0, 0.3)); +} + +.nautilus-window .floating-bar button { + min-height: 24px; + min-width: 24px; + padding: 0; + border-radius: 9999px; +} + + +button { + min-height: 24px; + min-width: 16px; + padding: 6px 10px; + border-radius: 6px; + font-weight: bold; +} + +.osd button:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + + +button:disabled { + filter: opacity(0.45); +} + + +button:disabled label { + filter: none; +} + + +button.image-button { + min-width: 24px; + padding-left: 6px; + padding-right: 6px; +} + + +button.image-button.close-button { + padding: 0; + border-radius: 9999px; +} + + +button.text-button { + padding-left: 16px; + padding-right: 16px; +} + + +button.text-button.image-button, +button.image-text-button { + padding-left: 9px; + padding-right: 9px; +} + + +button.text-button.image-button > box, +button.text-button.image-button > box > box, +button.image-text-button > box, +button.image-text-button > box > box { + border-spacing: 4px; +} + + +button.text-button.image-button > box > label, +button.text-button.image-button > box > box > label, +button.image-text-button > box > label, +button.image-text-button > box > box > label { + padding-left: 2px; + padding-right: 2px; +} + + +button.arrow-button { + padding-left: 9px; + padding-right: 9px; +} + + +button.arrow-button > box { + border-spacing: 4px; +} + + +button.arrow-button.text-button > box { + border-spacing: 4px; +} + +dropdown:drop(active) button.combo, combobox:drop(active) button.combo, +button.flat:drop(active), menubutton.osd > button:drop(active), +button.osd:drop(active), +button:drop(active) { + color: @accent_bg_color; + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +menubutton.osd > button, +button.osd { + min-width: 32px; + min-height: 32px; + color: rgba(255, 255, 255, 0.9); + background-color: rgba(0, 0, 0, 0.65); +} + +menubutton.osd > button, +button.osd { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +menubutton.osd > button:focus:focus-visible, +button.osd:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 1px; +} + +menubutton.osd > button:hover, +button.osd:hover { + color: white; + background-color: alpha(mix(black,currentColor,0.15),0.65); +} + +menubutton.osd > button.keyboard-activating, menubutton.osd > button:active, +button.osd.keyboard-activating, +button.osd:active { + color: white; + background-color: alpha(mix(black,currentColor,0.25),0.65); +} + +menubutton.osd > button:checked, +button.osd:checked { + background-color: alpha(mix(black,currentColor,0.2),0.65); +} + +menubutton.osd > button:checked:hover, +button.osd:checked:hover { + background-color: alpha(mix(black,currentColor,0.25),0.65); +} + +menubutton.osd > button:checked.keyboard-activating, menubutton.osd > button:checked:active, +button.osd:checked.keyboard-activating, +button.osd:checked:active { + background-color: alpha(mix(black,currentColor,0.35),0.65); +} + +menubutton.osd > button:focus:focus-visible, .osd button.osd:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + + +button.opaque { + background-color: mix(@window_bg_color,@window_fg_color,0.15); + color: @window_fg_color; +} + + +button.destructive-action { + color: @destructive_fg_color; +} + + +button.destructive-action, +button.destructive-action:checked { + background-color: @destructive_bg_color; +} + + +button.suggested-action { + color: @accent_fg_color; +} + + +button.suggested-action, +button.suggested-action:checked { + background-color: @accent_bg_color; +} + +.osd button.flat:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +stackswitcher > button > label { + padding: 0 6px; + margin: 0 -6px; +} + +stackswitcher > button > image { + padding: 3px 6px; + margin: -3px -6px; +} + +stackswitcher > button.text-button { + min-width: 100px; +} + + +button.font separator { + background-color: transparent; +} + + +button.font > box { + border-spacing: 6px; +} + + +button.font > box > box > label { + font-weight: bold; +} + +row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), menubutton.circular > button, +button.circular { + min-width: 34px; + min-height: 34px; + padding: 0; + border-radius: 9999px; +} + +row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child label, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child label, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child label, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) label, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child label, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child label, button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) label, menubutton.circular > button label, +button.circular label { + padding: 0; +} + +menubutton.pill > button, +button.pill { + padding: 10px 32px; + border-radius: 9999px; +} + + +button.card { + background-color: @card_bg_color; + background-clip: padding-box; + font-weight: inherit; + padding: 0; +} + + +button.card { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + + +button.card:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + + +button.card:hover { + background-image: image(alpha(currentColor,0.04)); +} + + +button.card.keyboard-activating, +button.card:active { + background-image: image(alpha(currentColor,0.08)); +} + + +button.card:checked { + background-color: @card_bg_color; + background-image: image(alpha(@accent_bg_color,0.25)); +} + + +button.card:checked:hover { + background-image: image(alpha(@accent_bg_color,0.32)); +} + + +button.card:checked.keyboard-activating, +button.card:checked:active { + background-image: image(alpha(@accent_bg_color,0.39)); +} + + +button.card:checked.has-open-popup { + background-image: image(alpha(@accent_bg_color,0.32)); +} + +.osd button.card:checked { + background-color: alpha(currentColor,0.1); +} + + +button.card:drop(active) { + color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; +} + +button.link, button.link:hover, button.link:active, button.link:checked, columnview > header > button, treeview.view > header > button, window.print treeview.dialog-action-box > header > button { + background-color: transparent; +} + +button.color { + padding: 5px; +} + +button.color > colorswatch:only-child { + border-radius: 2.5px; +} + +button.color > colorswatch:only-child > overlay { + border-radius: 2px; +} + +button.color > colorswatch:only-child:disabled { + filter: none; +} + +button.color > colorswatch:only-child.light > overlay { + border-color: alpha(@view_fg_color,0.1); +} + +menubutton.osd { + background: none; + color: inherit; +} + +menubutton.suggested-action { + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +menubutton.destructive-action { + background-color: @destructive_bg_color; + color: @destructive_fg_color; +} + +menubutton.opaque { + background-color: mix(@window_bg_color,@window_fg_color,0.15); + color: @window_fg_color; +} + +menubutton.suggested-action, menubutton.destructive-action, menubutton.opaque { + border-radius: 6px; +} + +menubutton.suggested-action.circular, menubutton.suggested-action.pill, menubutton.destructive-action.circular, menubutton.destructive-action.pill, menubutton.opaque.circular, menubutton.opaque.pill { + border-radius: 9999px; +} + +menubutton.suggested-action > button, menubutton.suggested-action > button:checked, menubutton.destructive-action > button, menubutton.destructive-action > button:checked, menubutton.opaque > button, menubutton.opaque > button:checked { + background-color: transparent; + color: inherit; +} + +menubutton.image-button > button { + min-width: 24px; + padding-left: 5px; + padding-right: 5px; +} + +menubutton.card > button { + border-radius: 12px; +} + +menubutton arrow { + min-height: 16px; + min-width: 16px; +} + +menubutton arrow.none { + -gtk-icon-source: -gtk-icontheme("open-menu-symbolic"); +} + +menubutton arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +menubutton arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); +} + +menubutton arrow.left { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); +} + +menubutton arrow.right { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + +splitbutton { + border-radius: 6px; +} + +splitbutton, splitbutton > separator { + transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background; +} + +splitbutton > separator { + margin-top: 6px; + margin-bottom: 6px; + background: none; +} + +splitbutton > menubutton > button { + padding-left: 4px; + padding-right: 4px; +} + +splitbutton.image-button > button { + min-width: 24px; + padding-left: 5px; + padding-right: 5px; +} + +splitbutton.text-button.image-button > button, splitbutton.image-text-button > button { + padding-left: 9px; + padding-right: 9px; +} + +splitbutton.text-button.image-button > button > box, splitbutton.image-text-button > button > box { + border-spacing: 6px; +} + +splitbutton:disabled { + filter: opacity(0.45); +} + +splitbutton:disabled > button, splitbutton:disabled > menubutton > button { + filter: none; +} + +splitbutton > button:dir(ltr), +splitbutton > menubutton > button:dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: -1px; +} + +splitbutton > button:dir(rtl), +splitbutton > menubutton > button:dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, splitbutton.flat > separator { + background: alpha(currentColor,0.12); +} + +actionbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.flat:hover, splitbutton.flat:active, splitbutton.flat:checked { + background: alpha(currentColor,0.07); +} + +actionbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, actionbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, actionbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, splitbutton.flat:hover > separator, splitbutton.flat:active > separator, splitbutton.flat:checked > separator { + background: none; +} + +actionbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.flat:disabled { + filter: opacity(0.3); +} + +actionbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, searchbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, .toolbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, headerbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, actionbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, searchbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, .toolbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, headerbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, splitbutton.flat:disabled > button:disabled, splitbutton.flat:disabled > menubutton > button:disabled { + filter: none; +} + +actionbar > revealer > box splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, splitbutton.flat:focus-within:focus-visible > separator { + background: none; +} + +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, splitbutton.flat > button, +splitbutton.flat > menubutton > button { + border-radius: 6px; +} + +splitbutton.suggested-action { + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +splitbutton.destructive-action { + background-color: @destructive_bg_color; + color: @destructive_fg_color; +} + +splitbutton.opaque { + background-color: mix(@window_bg_color,@window_fg_color,0.15); + color: @window_fg_color; +} + +splitbutton.suggested-action > button, splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button, splitbutton.opaque > menubutton > button:checked { + color: inherit; + background-color: transparent; +} + +splitbutton.suggested-action > menubutton > button:dir(ltr), splitbutton.destructive-action > menubutton > button:dir(ltr), splitbutton.opaque > menubutton > button:dir(ltr) { + box-shadow: inset 1px 0 alpha(currentColor,0.3); +} + +splitbutton.suggested-action > menubutton > button:dir(rtl), splitbutton.destructive-action > menubutton > button:dir(rtl), splitbutton.opaque > menubutton > button:dir(rtl) { + box-shadow: inset -1px 0 alpha(currentColor,0.3); +} + +splitbutton > menubutton > button > arrow.none { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +buttoncontent > box { + border-spacing: 6px; +} + +buttoncontent > box > label { + font-weight: bold; +} + +buttoncontent > box > label:dir(ltr) { + padding-right: 2px; +} + +buttoncontent > box > label:dir(rtl) { + padding-left: 2px; +} + +.arrow-button > box > buttoncontent > box > label:dir(ltr), splitbutton > button > buttoncontent > box > label:dir(ltr) { + padding-right: 0; +} + +.arrow-button > box > buttoncontent > box > label:dir(rtl), splitbutton > button > buttoncontent > box > label:dir(rtl) { + padding-left: 0; +} + +tabbutton label { + font-weight: 800; + font-size: 8pt; +} + +tabbutton label.small { + font-size: 6pt; +} + +tabbutton indicatorbin > indicator, +tabbutton indicatorbin > mask { + transform: translate(-1px, 1px); +} + +calendar { + color: @view_fg_color; + background-clip: padding-box; + border: 1px solid alpha(currentColor,0.12); + font-feature-settings: "tnum"; +} + +calendar > header { + border-bottom: 1px solid alpha(currentColor,0.12); +} + +calendar > header > button { + border-radius: 0; +} + +calendar > grid { + padding-left: 3px; + padding-bottom: 3px; +} + +calendar > grid > label.today { + box-shadow: inset 0px -2px alpha(currentColor,0.12); +} + +calendar > grid > label.today:selected { + box-shadow: none; +} + +calendar > grid > label { + margin-top: 3px; + margin-right: 3px; +} + +calendar > grid > label { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +calendar > grid > label:focus { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +calendar > grid > label.day-number { + padding: 3px; +} + +calendar > grid > label.day-number:checked { + border-radius: 6px; + background-color: alpha(@accent_bg_color,0.3); +} + +calendar > grid > label.day-number:selected { + border-radius: 6px; + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +calendar > grid > label.day-number.other-month { + color: alpha(currentColor,0.3); +} + +checkbutton { + border-spacing: 4px; + border-radius: 9px; + padding: 3px; +} + +checkbutton { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +checkbutton:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd checkbutton:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +checkbutton.text-button { + padding: 4px; +} + +check, +radio { + min-height: 20px; + min-width: 20px; + -gtk-icon-size: 20px; + padding: 0; + box-shadow: 0 0 0 0 transparent; + background-color: alpha(currentColor,0.12); + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1); +} + +check:not(:checked):not(:indeterminate):hover, +radio:not(:checked):not(:indeterminate):hover { + box-shadow: 0 0 0 6px alpha(currentColor,0.05); + background-color: alpha(currentColor,0.15); +} + +check:not(:checked):not(:indeterminate):active, +radio:not(:checked):not(:indeterminate):active { + box-shadow: 0 0 0 6px alpha(currentColor,0.12); + background-color: alpha(currentColor,0.2); +} + +check:checked, check:indeterminate, +radio:checked, +radio:indeterminate { + background-color: @accent_bg_color; + color: @accent_fg_color; + box-shadow: none; +} + +check:checked:hover, check:indeterminate:hover, +radio:checked:hover, +radio:indeterminate:hover { + background-image: image(alpha(currentColor,0.1)); + box-shadow: 0 0 0 6px alpha(@accent_bg_color,0.05); +} + +check:checked:active, check:indeterminate:active, +radio:checked:active, +radio:indeterminate:active { + background-image: image(alpha(currentColor,0.2)); + box-shadow: 0 0 0 6px alpha(@accent_bg_color,0.12); +} + +check:disabled, +radio:disabled { + filter: opacity(0.45); +} + +.osd check:checked, .osd check:indeterminate, .osd radio:checked, .osd radio:indeterminate { + background-color: rgba(255, 255, 255, 0.75); + color: rgba(0, 0, 0, 0.75); +} + +check { + border-radius: 100%; +} + +check:checked { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/checkbox-checked-symbolic@2.svg"))); +} + +check:indeterminate { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-mixed-symbolic.svg")), -gtk-recolor(url("assets/checkbox-mixed-symbolic@2.svg"))); +} + +radio { + border-radius: 100%; +} + +radio:checked { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic@2.svg"))); +} + +radio:indeterminate { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/radio-mixed-symbolic.svg")), -gtk-recolor(url("assets/radio-mixed-symbolic@2.svg"))); +} + +checkbutton.selection-mode { + border-radius: 9999px; +} + +checkbutton.selection-mode check, checkbutton.selection-mode radio { + padding: 3px; + border-radius: 9999px; +} + +checkbutton.selection-mode label:dir(ltr) { + margin-right: 6px; +} + +checkbutton.selection-mode label:dir(rtl) { + margin-left: 6px; +} + +check:not(:checked):active { + -gtk-icon-transform: rotate(90deg); +} + +colorswatch { + outline: 0 solid transparent; + outline-offset: 6px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +colorswatch:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 4px; + outline-offset: -2px; +} + +colorswatch.top { + border-top-left-radius: 6.5px; + border-top-right-radius: 6.5px; +} + +colorswatch.top > overlay { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +colorswatch.bottom { + border-bottom-left-radius: 6.5px; + border-bottom-right-radius: 6.5px; +} + +colorswatch.bottom > overlay { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} + +colorswatch.left, colorswatch:first-child:not(.top) { + border-top-left-radius: 6.5px; + border-bottom-left-radius: 6.5px; +} + +colorswatch.left > overlay, colorswatch:first-child:not(.top) > overlay { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +colorswatch.right, colorswatch:last-child:not(.bottom) { + border-top-right-radius: 6.5px; + border-bottom-right-radius: 6.5px; +} + +colorswatch.right > overlay, colorswatch:last-child:not(.bottom) > overlay { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +colorswatch.dark > overlay { + color: white; +} + +colorswatch.light > overlay { + color: rgba(0, 0, 0, 0.75); + box-shadow: inset 0 0 0 1px alpha(@view_fg_color,0.1); +} + +colorswatch:drop(active).light > overlay { + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +colorswatch:drop(active).dark > overlay { + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +colorswatch#add-color-button > overlay { + border-radius: 6px 0 0 6px; +} + +colorswatch#add-color-button:only-child > overlay { + border-radius: 6px; +} + +colorswatch:disabled { + filter: opacity(0.45); +} + +colorswatch#editor-color-sample { + border-radius: 6px; +} + +colorswatch#editor-color-sample > overlay { + border-radius: 6.5px; +} + +plane { + outline: 0 solid transparent; + outline-offset: 6px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +plane:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 2px; +} + +colorchooser .popover.osd { + border-radius: 12px; +} + +columnview, treeview.view, window.print treeview.dialog-action-box { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +columnview:focus:focus-visible, treeview.view:focus:focus-visible, window.print treeview.dialog-action-box:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +columnview:drop(active), treeview.view:drop(active), window.print treeview.dialog-action-box:drop(active) { + box-shadow: none; +} + +columnview > header > button, treeview.view > header > button, window.print treeview.dialog-action-box > header > button { + padding: 3px 9px; + border-radius: 0; + box-shadow: none; + line-height: 100%; + border-left: 1px solid alpha(currentColor,0.12); + border-bottom: 1px solid alpha(currentColor,0.12); +} + +columnview > header > button:first-child, treeview.view > header > button:first-child, window.print treeview.dialog-action-box > header > button:first-child { + border-left-width: 0; +} + +columnview > header > button > box, treeview.view > header > button > box, window.print treeview.dialog-action-box > header > button > box { + color: alpha(currentColor,0.4); + font-weight: 700; + font-size: 9pt; + border-spacing: 6px; +} + +columnview > header > button:hover > box, treeview.view > header > button:hover > box, window.print treeview.dialog-action-box > header > button:hover > box { + color: alpha(currentColor,0.7); + box-shadow: none; +} + +columnview > header > button:active > box, treeview.view > header > button:active > box, window.print treeview.dialog-action-box > header > button:active > box { + color: currentColor; +} + +columnview > header > button sort-indicator, treeview.view > header > button sort-indicator, window.print treeview.dialog-action-box > header > button sort-indicator { + min-height: 16px; + min-width: 16px; +} + +columnview > header > button sort-indicator.ascending, treeview.view > header > button sort-indicator.ascending, window.print treeview.dialog-action-box > header > button sort-indicator.ascending { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); +} + +columnview > header > button sort-indicator.descending, treeview.view > header > button sort-indicator.descending, window.print treeview.dialog-action-box > header > button sort-indicator.descending { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +columnview button.dnd:active, columnview button.dnd:selected, columnview button.dnd:hover, columnview button.dnd, treeview.view button.dnd, window.print treeview.dialog-action-box button.dnd, +columnview header.button.dnd:active, +columnview header.button.dnd:selected, +columnview header.button.dnd:hover, +columnview header.button.dnd, +treeview.view header.button.dnd, +window.print treeview.dialog-action-box header.button.dnd { + color: @accent_fg_color; + background-color: @accent_bg_color; + transition: none; +} + +columnview.view > listview.view, treeview.view > listview.view, window.print columnview.dialog-action-box > listview.view, window.print treeview.dialog-action-box > listview.view, window.print columnview.view > listview.dialog-action-box, window.print treeview.view > listview.dialog-action-box, window.print columnview.dialog-action-box > listview.dialog-action-box, window.print treeview.dialog-action-box > listview.dialog-action-box { + background: none; + color: inherit; +} + +columnview > listview > row, treeview.view > listview > row, window.print treeview.dialog-action-box > listview > row { + padding: 0; +} + +columnview > listview > row > cell, treeview.view > listview > row > cell, window.print treeview.dialog-action-box > listview > row > cell { + padding: 8px 6px; +} + +columnview > listview > row > cell:not(:first-child), treeview.view > listview > row > cell:not(:first-child), window.print treeview.dialog-action-box > listview > row > cell:not(:first-child) { + border-left: 1px solid transparent; +} + +columnview.column-separators > listview > row > cell, treeview.column-separators.view > listview > row > cell, window.print treeview.column-separators.dialog-action-box > listview > row > cell, +columnview.column-separators > header > button, +treeview.column-separators.view > header > button, +window.print treeview.column-separators.dialog-action-box > header > button { + border-left-color: alpha(currentColor,0.12); +} + +columnview > listview:not(.horizontal).separators > row:not(.separator), treeview.view > listview:not(.horizontal).separators > row:not(.separator), window.print treeview.dialog-action-box > listview:not(.horizontal).separators > row:not(.separator) { + border-top: 1px solid alpha(currentColor,0.12); + border-bottom: none; +} + +columnview.data-table > listview > row > cell, treeview.data-table.view > listview > row > cell, window.print treeview.data-table.dialog-action-box > listview > row > cell { + padding-top: 3px; + padding-bottom: 3px; +} + +columnview ~ undershoot.top, treeview.view ~ undershoot.top, window.print treeview.dialog-action-box ~ undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +columnview row:not(:selected) cell editablelabel:not(.editing):focus-within, treeview.view row:not(:selected) cell editablelabel:not(.editing):focus-within, window.print treeview.dialog-action-box row:not(:selected) cell editablelabel:not(.editing):focus-within { + outline: 2px solid alpha(@accent_color,0.45); +} + +columnview row:not(:selected) cell editablelabel.editing:focus-within, treeview.view row:not(:selected) cell editablelabel.editing:focus-within, window.print treeview.dialog-action-box row:not(:selected) cell editablelabel.editing:focus-within { + outline: 2px solid @accent_color; +} + +treeexpander { + border-spacing: 4px; +} + +.dialog-action-area { + margin: 6px; + border-spacing: 6px; +} + +/**************** + * Print dialog * +*****************/ +window.print drawing { + color: @window_fg_color; + background: none; + border: none; + padding: 0; +} + +window.print drawing paper { + background-color: white; + color: rgba(0, 0, 0, 0.8); + background-clip: padding-box; + border: 1px solid alpha(currentColor,0.12); +} + +/******************** + * Page setup dalog * + ********************/ +/****************** + * GtkAboutDialog * + ******************/ +window.aboutdialog image.large-icons { + -gtk-icon-size: 128px; +} + +/************************* + * GtkColorChooserDialog * + *************************/ +/************* + * AdwDialog * + *************/ +floating-sheet > dimming { + background-color: alpha(@shade_color,2); +} + +floating-sheet > sheet { + border-radius: 12px; + box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.07), 0 3px 20px 10px rgba(0, 0, 0, 0.05), 0 6px 32px 16px rgba(0, 0, 0, 0.02), 0 0 0 1px @shade_color; + outline: 1px solid rgba(255, 255, 255, 0.08); + outline-offset: -1px; +} + +dialog.bottom-sheet.landscape sheet { + margin-left: 30px; + margin-right: 30px; +} + +dialog.bottom-sheet.landscape sheet > outline.flush-left, dialog.bottom-sheet.landscape sheet > outline.flush-right, dialog.bottom-sheet.landscape sheet > outline.flush-left.flush-right { + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +dialog-host > dialog.background { + background: none; +} + +dialog-host > dialog.background sheet { + background-color: @window_bg_color; + color: @window_fg_color; +} + +dialog-host > dialog.view, window.print dialog-host > dialog.dialog-action-box { + background: none; +} + +dialog-host > dialog.osd { + background: none; +} + +/*********************** + * GtkAppChooserDialog * + ***********************/ +window.appchooser headerbar.titlebar > windowhandle { + padding-top: 3px; +} + +window.appchooser headerbar.titlebar box.start + box { + margin-top: -6px; + margin-bottom: -6px; + min-height: 12px; +} + +window.appchooser searchbar { + background: none; +} + +window.appchooser .dialog-vbox > box > box:not(.dialog-action-area) { + margin: 6px; +} + +window.appchooser .dialog-action-area { + margin-top: 0; +} + +/**************** + * GtkAssistant * + ****************/ +window.assistant .sidebar { + padding: 6px; + background-color: @sidebar_bg_color; + color: @sidebar_fg_color; +} + +window.assistant .sidebar:not(separator):dir(ltr) { + border-right: none; + box-shadow: inset -1px 0 alpha(currentColor,0.12); +} + +window.assistant .sidebar:not(separator):dir(rtl) { + box-shadow: inset 1px 0 alpha(currentColor,0.12); +} + +window.assistant .sidebar:backdrop { + background-color: @sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +window.assistant .sidebar > label { + padding: 6px 12px; + border-radius: 6px; +} + +window.assistant .sidebar > label.highlight { + background-color: alpha(currentColor,0.1); +} + +/*************** + * GtkComboBox * + ***************/ +combobox button { + padding-top: 2px; + padding-bottom: 2px; + min-height: 30px; +} + +/*************** + * GtkIconView * + ***************/ +iconview { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +iconview:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +iconview:drop(active) { + box-shadow: none; +} + +iconview > dndtarget:drop(active) { + border-style: solid; + border-width: 1px; + border-color: @accent_bg_color; +} + +/************** + * GtkInfoBar * + **************/ +infobar > revealer > box { + padding: 6px; + padding-bottom: 7px; + border-spacing: 6px; + box-shadow: inset 0 -1px alpha(currentColor,0.12); +} + +infobar > revealer > box > box { + border-spacing: 6px; +} + +infobar.action:hover > revealer > box { + background-image: image(alpha(currentColor,0.05)); +} + +infobar.action:active > revealer > box { + background-image: image(alpha(currentColor,0.1)); +} + +infobar.info > revealer > box { + background-color: mix(@accent_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar.question > revealer > box { + background-color: mix(@accent_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar.warning > revealer > box { + background-color: mix(@warning_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar.error > revealer > box { + background-color: mix(@error_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar .close { + min-width: 18px; + min-height: 18px; + padding: 4px; + border-radius: 50%; +} + +/**************** + * GtkStatusBar * + ****************/ +statusbar { + padding: 6px 10px 6px 10px; +} + +/*************** + * GtkTreeView * + ***************/ +treeview.view, window.print treeview.dialog-action-box { + border-left-color: mix(currentColor,@view_bg_color,0.8); + border-top-color: mix(currentColor,@view_bg_color,0.8); +} + +treeview.view:selected:focus, treeview.view:selected, window.print treeview.dialog-action-box:selected { + border-radius: 0; +} + +treeview.view.separator, window.print treeview.separator.dialog-action-box { + min-height: 2px; + color: alpha(currentColor,0.12); +} + +treeview.view.expander, window.print treeview.expander.dialog-action-box { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); + color: alpha(currentColor,0.7); +} + +treeview.view.expander:dir(rtl), window.print treeview.expander.dialog-action-box:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); +} + +treeview.view.expander:hover, window.print treeview.expander.dialog-action-box:hover, treeview.view.expander:active, window.print treeview.expander.dialog-action-box:active { + color: currentColor; +} + +treeview.view.expander:checked, window.print treeview.expander.dialog-action-box:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +treeview.view.expander:disabled, window.print treeview.expander.dialog-action-box:disabled { + color: alpha(currentColor,0.45); +} + +treeview.view > dndtarget:drop(active), window.print treeview.dialog-action-box > dndtarget:drop(active) { + border-style: solid none; + border-width: 1px; + border-color: @accent_bg_color; +} + +treeview.view > dndtarget:drop(active).after, window.print treeview.dialog-action-box > dndtarget:drop(active).after { + border-top-style: none; +} + +treeview.view > dndtarget:drop(active).before, window.print treeview.dialog-action-box > dndtarget:drop(active).before { + border-bottom-style: none; +} + +treeview.view > header > button, window.print treeview.dialog-action-box > header > button { + padding-left: 6px; + padding-right: 6px; +} + +treeview.view.progressbar, window.print treeview.progressbar.dialog-action-box { + box-shadow: none; +} + +treeview.view.progressbar, window.print treeview.progressbar.dialog-action-box, treeview.view.progressbar:selected { + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +treeview.view.trough, window.print treeview.trough.dialog-action-box { + background-color: alpha(currentColor,0.1); +} + +treeview.view ~ undershoot.top, window.print treeview.dialog-action-box ~ undershoot.top { + box-shadow: none; + background: none; +} + +treeview.view acceleditor > label, window.print treeview.dialog-action-box acceleditor > label { + background-color: mix(currentColor,@view_bg_color,0.9); +} + +treeview.navigation-sidebar { + padding: 0; +} + +treeview.navigation-sidebar:selected:focus, treeview.navigation-sidebar:selected { + background-color: alpha(currentColor,0.1); +} + +treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { + background-color: @view_bg_color; + transition-property: color, background; +} + +treeview entry.flat, treeview entry { + border-radius: 0; + background-image: none; + background-color: @view_bg_color; +} + +treeview entry.flat:focus-within, treeview entry:focus-within { + border-color: @accent_color; +} + +treeview spinbutton:not(.vertical) { + min-height: 0; + border-style: none; + border-radius: 0; +} + +treeview spinbutton:not(.vertical) > text { + min-height: 0; + padding: 1px 2px; +} + +.sidebar:not(separator):dir(ltr), .sidebar:not(separator).left, .sidebar:not(separator).left:dir(rtl) { + border-right: 1px solid alpha(currentColor,0.12); + border-left-style: none; +} + +.sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { + border-left: 1px solid alpha(currentColor,0.12); + border-right-style: none; +} + +.sidebar listview.view, .sidebar window.print listview.dialog-action-box, window.print .sidebar listview.dialog-action-box, +.sidebar list { + background-color: transparent; + color: inherit; +} + +paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar, .sidebar-pane .sidebar.left, .sidebar-pane .sidebar.right, .sidebar-pane .sidebar.left:dir(rtl), .sidebar-pane .sidebar:dir(rtl), .sidebar-pane .sidebar:dir(ltr), .sidebar-pane .sidebar { + border-style: none; +} + +.large-title { + font-weight: 300; + font-size: 24pt; +} + +dropdown > button > box, combobox > button > box { + border-spacing: 6px; +} + +dropdown > button > box > stack > row.activatable:hover, combobox > button > box > stack > row.activatable:hover, dropdown > button > box > stack > row.activatable:active, combobox > button > box > stack > row.activatable:active { + background: none; +} + +dropdown arrow, combobox arrow { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + min-height: 16px; + min-width: 16px; +} + +dropdown:drop(active), combobox:drop(active) { + box-shadow: none; +} + +dropdown popover.menu, combobox popover.menu { + padding-top: 6px; +} + +dropdown popover.menu listview > row, combobox popover.menu listview > row { + min-width: 0; +} + +dropdown popover.menu .dropdown-searchbar, combobox popover.menu .dropdown-searchbar { + padding: 6px; +} + +dropdown popover.menu .dropdown-searchbar + scrolledwindow > undershoot.top, combobox popover.menu .dropdown-searchbar + scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover.emoji-picker > contents { + padding: 0; +} + +.emoji-searchbar { + padding: 6px; +} + +.emoji-toolbar { + padding: 3px; +} + +button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + min-width: 32px; + min-height: 32px; +} + +popover.emoji-picker emoji { + font-size: x-large; + padding: 6px; + border-radius: 6px; +} + +popover.emoji-picker emoji:focus, popover.emoji-picker emoji:hover { + background: alpha(currentColor,0.07); +} + +popover.emoji-picker emoji:active { + background: alpha(currentColor,0.16); +} + +popover.emoji-picker scrolledwindow.view, popover.emoji-picker window.print scrolledwindow.dialog-action-box, window.print popover.emoji-picker scrolledwindow.dialog-action-box { + background: none; + color: inherit; +} + +popover.emoji-picker scrolledwindow.view > undershoot.top, popover.emoji-picker window.print scrolledwindow.dialog-action-box > undershoot.top, window.print popover.emoji-picker scrolledwindow.dialog-action-box > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover.emoji-picker scrolledwindow.view > undershoot.bottom, popover.emoji-picker window.print scrolledwindow.dialog-action-box > undershoot.bottom, window.print popover.emoji-picker scrolledwindow.dialog-action-box > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover.emoji-completion > contents { + padding: 6px; + padding-bottom: 4px; +} + +emoji-completion-row { + padding: 6px; + margin-bottom: 2px; + border-radius: 6px; +} + +emoji-completion-row:dir(ltr) { + padding-right: 12px; +} + +emoji-completion-row:dir(rtl) { + padding-left: 12px; +} + +emoji-completion-row > box { + border-spacing: 6px; +} + +emoji-completion-row:focus, emoji-completion-row:hover { + background-color: alpha(currentColor,0.1); + color: @popover_fg_color; +} + +emoji-completion-row:active { + background-color: alpha(currentColor,0.16); +} + +spinbutton, +entry { + min-height: 36px; + padding-left: 9px; + padding-right: 9px; + border-radius: 6px; + border-spacing: 6px; + background-color: alpha(currentColor,0.05); + background-clip: padding-box; + caret-color: currentColor; +} + +spinbutton, +entry { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton:focus-within, +entry:focus-within { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd spinbutton:focus-within, .osd entry:focus-within { + outline-color: rgba(255, 255, 255, 0.5); +} + +spinbutton > text > block-cursor, +entry > text > block-cursor { + color: @view_bg_color; + background-color: @view_fg_color; +} + +spinbutton.flat, +entry.flat:focus-within, +entry.flat:disabled, +entry.flat { + min-height: 0; + padding: 2px; + background-color: transparent; + box-shadow: none; + border-radius: 0; +} + +spinbutton:disabled, +entry:disabled { + filter: opacity(0.45); +} + +spinbutton.error, +entry.error { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton.error:focus-within, +entry.error:focus-within { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +spinbutton.error > text > selection:focus-within, +entry.error > text > selection:focus-within { + background-color: alpha(@error_color,0.2); +} + +spinbutton.error > text > cursor-handle > contents, +entry.error > text > cursor-handle > contents { + background-color: currentColor; +} + +spinbutton.error > progress > trough > progress, +entry.error > progress > trough > progress { + border-color: currentColor; +} + +spinbutton.warning, +entry.warning { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton.warning:focus-within, +entry.warning:focus-within { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +spinbutton.warning > text > selection:focus-within, +entry.warning > text > selection:focus-within { + background-color: alpha(@warning_color,0.2); +} + +spinbutton.warning > text > cursor-handle > contents, +entry.warning > text > cursor-handle > contents { + background-color: currentColor; +} + +spinbutton.warning > progress > trough > progress, +entry.warning > progress > trough > progress { + border-color: currentColor; +} + +spinbutton.success, +entry.success { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton.success:focus-within, +entry.success:focus-within { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +spinbutton.success > text > selection:focus-within, +entry.success > text > selection:focus-within { + background-color: alpha(@success_color,0.2); +} + +spinbutton.success > text > cursor-handle > contents, +entry.success > text > cursor-handle > contents { + background-color: currentColor; +} + +spinbutton.success > progress > trough > progress, +entry.success > progress > trough > progress { + border-color: currentColor; +} + +spinbutton > image, +entry > image { + opacity: .7; +} + +spinbutton > image:hover, +entry > image:hover { + opacity: 1; +} + +spinbutton > image:active, +entry > image:active { + opacity: .8; +} + +spinbutton > image.left, +entry > image.left { + margin-right: 6px; +} + +spinbutton > image.right, +entry > image.right { + margin-left: 6px; +} + +spinbutton.password image.caps-lock-indicator, +entry.password image.caps-lock-indicator { + opacity: 0.3; +} + +spinbutton:drop(active), +entry:drop(active):focus-within, +entry:drop(active) { + border-color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; +} + +spinbutton > progress, +entry > progress { + margin-bottom: 3px; +} + +spinbutton > progress > trough > progress, +entry > progress > trough > progress { + background-color: transparent; + background-image: none; + border-radius: 0; + border-width: 0 0 2px; + border-color: @accent_bg_color; + border-style: solid; + box-shadow: none; +} + +.osd spinbutton > progress > trough > progress, .osd entry > progress > trough > progress { + border-color: rgba(255, 255, 255, 0.75); +} + +expander { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + +expander:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); +} + +expander:disabled { + filter: opacity(0.45); +} + +expander:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +expander-widget > box > title { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +expander-widget:focus:focus-visible > box > title { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +expander-widget > box > title { + border-radius: 6px; +} + +expander-widget > box > title > expander { + opacity: .7; +} + +expander-widget > box > title:hover > expander, expander-widget > box > title:active > expander { + opacity: 1; +} + +placessidebar .navigation-sidebar > row { + padding: 0; +} + +placessidebar .navigation-sidebar > row > revealer { + padding: 0 14px; +} + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(ltr) { + padding-right: 8px; +} + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(rtl) { + padding-left: 8px; +} + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(ltr) { + padding-right: 2px; +} + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(rtl) { + padding-left: 2px; +} + +button.sidebar-button { + min-height: 26px; + min-width: 26px; + margin-top: 3px; + margin-bottom: 3px; + padding: 0; + border-radius: 100%; +} + +placessidebar .navigation-sidebar > row:selected:active { + box-shadow: none; +} + +placessidebar .navigation-sidebar > row.sidebar-placeholder-row { + padding: 0 8px; + min-height: 2px; + background-image: image(@accent_bg_color); + background-clip: content-box; +} + +placessidebar .navigation-sidebar > row.sidebar-new-bookmark-row { + color: @accent_color; +} + +placessidebar .navigation-sidebar > row:drop(active):not(:disabled) { + color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; +} + +row image.sidebar-icon { + opacity: 0.7; +} + +row .sidebar-button { + opacity: 0.7; +} + +row .sidebar-button:hover, row .sidebar-button:active, row .sidebar-button.keyboard-activating { + opacity: 1; +} + +placesview .server-list-button > image { + transition: -gtk-icon-transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + -gtk-icon-transform: rotate(0turn); +} + +placesview .server-list-button:checked > image { + -gtk-icon-transform: rotate(-0.5turn); +} + +placesview > actionbar > revealer > box > box { + border-spacing: 6px; +} + +filechooser { + box-shadow: 0 1px alpha(currentColor,0.12); +} + +filechooser #pathbarbox { + border-bottom: 1px solid alpha(currentColor,0.12); +} + +filechooser pathbar button:not(.image-button) { + padding-left: 9px; + padding-right: 9px; +} + +filechooser pathbar button > box { + border-spacing: 4px; +} + +filechooser pathbar button > box > label { + padding-left: 2px; + padding-right: 2px; +} + +filechooser columnview > listview > row > cell, filechooser treeview.view > listview > row > cell, filechooser window.print treeview.dialog-action-box > listview > row > cell, window.print filechooser treeview.dialog-action-box > listview > row > cell { + padding: 0; +} + +filechooser columnview > listview > row > cell > filelistcell, filechooser treeview.view > listview > row > cell > filelistcell, filechooser window.print treeview.dialog-action-box > listview > row > cell > filelistcell, window.print filechooser treeview.dialog-action-box > listview > row > cell > filelistcell { + padding: 8px 6px; +} + +filechooser gridview { + padding: 15px; +} + +filechooser gridview ~ undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +filechooser gridview > child { + border-radius: 12px; + padding: 0; + margin: 3px; +} + +filechooser gridview > child > filelistcell { + padding: 6px 12px; +} + +filechooser gridview > child filethumbnail image { + filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); +} + +filechooser gridview > child box { + border-spacing: 6px; +} + +filechooser > box > actionbar { + box-shadow: 0 -1px alpha(currentColor,0.12); +} + +filechooser > box > actionbar > revealer > box { + box-shadow: none; + padding-top: 6px; +} + +filechooser scrolledwindow + actionbar > revealer > box { + background-color: mix(@accent_bg_color,@view_bg_color,0.7); + color: @window_fg_color; + box-shadow: none; + padding-top: 6px; + font-weight: bold; +} + +filechooser scrolledwindow + actionbar > revealer > box:backdrop { + background-color: mix(@accent_bg_color,@view_bg_color,0.85); +} + +filechooser placesview > stack > scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +filechooser placesview > actionbar > revealer > box { + background: @view_bg_color; + color: @view_fg_color; + box-shadow: none; + padding-top: 6px; +} + +filechooser placesview > actionbar > revealer > box:backdrop { + background: @view_bg_color; + transition: none; +} + +filechooser placessidebar { + background-color: @sidebar_bg_color; + color: @sidebar_fg_color; +} + +filechooser placessidebar:backdrop { + background-color: @sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +filechooser paned.horizontal > separator:dir(ltr) { + box-shadow: inset 1px 0 @sidebar_bg_color, inset 1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:dir(ltr):backdrop { + box-shadow: inset 1px 0 @sidebar_backdrop_color, inset 1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:dir(rtl) { + box-shadow: inset -1px 0 @sidebar_bg_color, inset -1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:dir(rtl):backdrop { + box-shadow: inset -1px 0 @sidebar_backdrop_color, inset -1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:backdrop { + transition: box-shadow 200ms ease-out; +} + +/* Fix header bar height in the file chooser */ +window.filechooser headerbar box.start + box.vertical { + margin-top: -6px; + margin-bottom: -6px; + min-height: 12px; +} + +headerbar { + min-height: 48px; + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; + margin: 0; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +headerbar > windowhandle > box { + padding: 6px; +} + +headerbar > windowhandle > box > box.start, +headerbar > windowhandle > box > box.end { + border-spacing: 6px; +} + +headerbar > windowhandle > box > box.start:dir(ltr), +headerbar > windowhandle > box > box.end:dir(rtl), headerbar > windowhandle > box > widget > box.start:dir(ltr), +headerbar > windowhandle > box > widget > box.end:dir(rtl) { + margin-right: 6px; +} + +headerbar > windowhandle > box > box.start:dir(rtl), +headerbar > windowhandle > box > box.end:dir(ltr), headerbar > windowhandle > box > widget > box.start:dir(rtl), +headerbar > windowhandle > box > widget > box.end:dir(ltr) { + margin-left: 6px; +} + +headerbar:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +headerbar:backdrop > windowhandle { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +headerbar.default-decoration { + padding: 0; + margin: 0; + border: none; + min-height: 36px; + background-color: @headerbar_bg_color; + box-shadow: none; +} + +headerbar.default-decoration:backdrop { + background-color: @headerbar_backdrop_color; +} + +headerbar.default-decoration > windowhandle > box { + padding: 3px; +} + +headerbar.default-decoration windowcontrols > button { + min-width: 16px; + min-height: 16px; + margin: 0 4px; + padding: 0; +} + +headerbar.default-decoration windowcontrols > .icon { + margin: 6px; +} + +.maximized headerbar, .fullscreen headerbar, .tiled headerbar, .tiled-top headerbar, .tiled-right headerbar, .tiled-bottom headerbar, .tiled-left headerbar, .solid-csd headerbar { + border-radius: 0; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +window > .titlebar:not(.flat) { + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +window > .titlebar headerbar:not(.flat) { + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +window > headerbar.titlebar, +window > .titlebar headerbar { + min-height: 48px; +} + +window > headerbar.titlebar > windowhandle > box, +window > .titlebar headerbar > windowhandle > box { + padding-bottom: 6px; +} + +window > headerbar.titlebar.default-decoration, +window > .titlebar headerbar.default-decoration { + min-height: 36px; + box-shadow: none; +} + +window > headerbar.titlebar.default-decoration > windowhandle > box, +window > .titlebar headerbar.default-decoration > windowhandle > box { + padding: 3px; +} + +leaflet:first-child > headerbar + separator { + background-color: @headerbar_backdrop_color; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +leaflet:first-child > headerbar + separator:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +toolbarview > .top-bar headerbar, +toolbarview > .bottom-bar headerbar, headerbar.flat, window.shortcuts headerbar.titlebar, window.print headerbar.titlebar, window.pagesetup headerbar.titlebar, window.aboutdialog headerbar.titlebar, window.colorchooser headerbar.titlebar, window.appchooser headerbar.titlebar { + background: none; + color: inherit; + min-height: 48px; + box-shadow: none; +} + +toolbarview > .top-bar headerbar > windowhandle > box, +toolbarview > .bottom-bar headerbar > windowhandle > box, headerbar.flat > windowhandle > box, window.shortcuts headerbar.titlebar > windowhandle > box, window.print headerbar.titlebar > windowhandle > box, window.pagesetup headerbar.titlebar > windowhandle > box, window.aboutdialog headerbar.titlebar > windowhandle > box, window.colorchooser headerbar.titlebar > windowhandle > box, window.appchooser headerbar.titlebar > windowhandle > box { + padding-bottom: 6px; +} + +toolbarview > .top-bar headerbar.default-decoration, +toolbarview > .bottom-bar headerbar.default-decoration, headerbar.default-decoration.flat, window.shortcuts headerbar.default-decoration.titlebar, window.print headerbar.default-decoration.titlebar, window.pagesetup headerbar.default-decoration.titlebar, window.aboutdialog headerbar.default-decoration.titlebar, window.colorchooser headerbar.default-decoration.titlebar, window.appchooser headerbar.default-decoration.titlebar { + min-height: 36px; +} + +toolbarview > .top-bar headerbar.default-decoration > windowhandle > box, +toolbarview > .bottom-bar headerbar.default-decoration > windowhandle > box, headerbar.default-decoration.flat > windowhandle > box, window.shortcuts headerbar.default-decoration.titlebar > windowhandle > box, window.print headerbar.default-decoration.titlebar > windowhandle > box, window.pagesetup headerbar.default-decoration.titlebar > windowhandle > box, window.aboutdialog headerbar.default-decoration.titlebar > windowhandle > box, window.colorchooser headerbar.default-decoration.titlebar > windowhandle > box, window.appchooser headerbar.default-decoration.titlebar > windowhandle > box { + padding: 3px; +} + +.maximized toolbarview > .top-bar headerbar, toolbarview > .top-bar .maximized headerbar, +.maximized toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .maximized headerbar, .maximized headerbar.flat, .maximized window.shortcuts headerbar.titlebar, window.shortcuts .maximized headerbar.titlebar, .maximized window.print headerbar.titlebar, window.print .maximized headerbar.titlebar, .maximized window.pagesetup headerbar.titlebar, window.pagesetup .maximized headerbar.titlebar, .maximized window.aboutdialog headerbar.titlebar, window.aboutdialog .maximized headerbar.titlebar, .maximized window.colorchooser headerbar.titlebar, window.colorchooser .maximized headerbar.titlebar, .maximized window.appchooser headerbar.titlebar, window.appchooser .maximized headerbar.titlebar, .fullscreen toolbarview > .top-bar headerbar, toolbarview > .top-bar .fullscreen headerbar, +.fullscreen toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .fullscreen headerbar, .fullscreen headerbar.flat, .fullscreen window.shortcuts headerbar.titlebar, window.shortcuts .fullscreen headerbar.titlebar, .fullscreen window.print headerbar.titlebar, window.print .fullscreen headerbar.titlebar, .fullscreen window.pagesetup headerbar.titlebar, window.pagesetup .fullscreen headerbar.titlebar, .fullscreen window.aboutdialog headerbar.titlebar, window.aboutdialog .fullscreen headerbar.titlebar, .fullscreen window.colorchooser headerbar.titlebar, window.colorchooser .fullscreen headerbar.titlebar, .fullscreen window.appchooser headerbar.titlebar, window.appchooser .fullscreen headerbar.titlebar, .tiled toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled headerbar, +.tiled toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled headerbar, .tiled headerbar.flat, .tiled window.shortcuts headerbar.titlebar, window.shortcuts .tiled headerbar.titlebar, .tiled window.print headerbar.titlebar, window.print .tiled headerbar.titlebar, .tiled window.pagesetup headerbar.titlebar, window.pagesetup .tiled headerbar.titlebar, .tiled window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled headerbar.titlebar, .tiled window.colorchooser headerbar.titlebar, window.colorchooser .tiled headerbar.titlebar, .tiled window.appchooser headerbar.titlebar, window.appchooser .tiled headerbar.titlebar, .tiled-top toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-top headerbar, +.tiled-top toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-top headerbar, .tiled-top headerbar.flat, .tiled-top window.shortcuts headerbar.titlebar, window.shortcuts .tiled-top headerbar.titlebar, .tiled-top window.print headerbar.titlebar, window.print .tiled-top headerbar.titlebar, .tiled-top window.pagesetup headerbar.titlebar, window.pagesetup .tiled-top headerbar.titlebar, .tiled-top window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-top headerbar.titlebar, .tiled-top window.colorchooser headerbar.titlebar, window.colorchooser .tiled-top headerbar.titlebar, .tiled-top window.appchooser headerbar.titlebar, window.appchooser .tiled-top headerbar.titlebar, .tiled-right toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-right headerbar, +.tiled-right toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-right headerbar, .tiled-right headerbar.flat, .tiled-right window.shortcuts headerbar.titlebar, window.shortcuts .tiled-right headerbar.titlebar, .tiled-right window.print headerbar.titlebar, window.print .tiled-right headerbar.titlebar, .tiled-right window.pagesetup headerbar.titlebar, window.pagesetup .tiled-right headerbar.titlebar, .tiled-right window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-right headerbar.titlebar, .tiled-right window.colorchooser headerbar.titlebar, window.colorchooser .tiled-right headerbar.titlebar, .tiled-right window.appchooser headerbar.titlebar, window.appchooser .tiled-right headerbar.titlebar, .tiled-bottom toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-bottom headerbar, +.tiled-bottom toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-bottom headerbar, .tiled-bottom headerbar.flat, .tiled-bottom window.shortcuts headerbar.titlebar, window.shortcuts .tiled-bottom headerbar.titlebar, .tiled-bottom window.print headerbar.titlebar, window.print .tiled-bottom headerbar.titlebar, .tiled-bottom window.pagesetup headerbar.titlebar, window.pagesetup .tiled-bottom headerbar.titlebar, .tiled-bottom window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-bottom headerbar.titlebar, .tiled-bottom window.colorchooser headerbar.titlebar, window.colorchooser .tiled-bottom headerbar.titlebar, .tiled-bottom window.appchooser headerbar.titlebar, window.appchooser .tiled-bottom headerbar.titlebar, .tiled-left toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-left headerbar, +.tiled-left toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-left headerbar, .tiled-left headerbar.flat, .tiled-left window.shortcuts headerbar.titlebar, window.shortcuts .tiled-left headerbar.titlebar, .tiled-left window.print headerbar.titlebar, window.print .tiled-left headerbar.titlebar, .tiled-left window.pagesetup headerbar.titlebar, window.pagesetup .tiled-left headerbar.titlebar, .tiled-left window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-left headerbar.titlebar, .tiled-left window.colorchooser headerbar.titlebar, window.colorchooser .tiled-left headerbar.titlebar, .tiled-left window.appchooser headerbar.titlebar, window.appchooser .tiled-left headerbar.titlebar, .solid-csd toolbarview > .top-bar headerbar, toolbarview > .top-bar .solid-csd headerbar, +.solid-csd toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .solid-csd headerbar, .solid-csd headerbar.flat, .solid-csd window.shortcuts headerbar.titlebar, window.shortcuts .solid-csd headerbar.titlebar, .solid-csd window.print headerbar.titlebar, window.print .solid-csd headerbar.titlebar, .solid-csd window.pagesetup headerbar.titlebar, window.pagesetup .solid-csd headerbar.titlebar, .solid-csd window.aboutdialog headerbar.titlebar, window.aboutdialog .solid-csd headerbar.titlebar, .solid-csd window.colorchooser headerbar.titlebar, window.colorchooser .solid-csd headerbar.titlebar, .solid-csd window.appchooser headerbar.titlebar, window.appchooser .solid-csd headerbar.titlebar { + box-shadow: none; +} + +toolbarview > .top-bar headerbar:backdrop, +toolbarview > .bottom-bar headerbar:backdrop { + transition: none; +} + +toolbarview > .top-bar headerbar:backdrop > windowhandle, +toolbarview > .bottom-bar headerbar:backdrop > windowhandle { + filter: none; + transition: none; +} + +window.devel toolbarview > .top-bar headerbar > windowhandle, toolbarview > .top-bar window.devel headerbar > windowhandle, +window.devel toolbarview > .bottom-bar headerbar > windowhandle, +toolbarview > .bottom-bar window.devel headerbar > windowhandle { + background-image: none; +} + +toolbarview > .top-bar .collapse-spacing headerbar, +toolbarview > .bottom-bar .collapse-spacing headerbar, window.shortcuts headerbar.titlebar, window.appchooser headerbar.titlebar { + min-height: 42px; +} + +toolbarview > .top-bar .collapse-spacing headerbar > windowhandle > box, +toolbarview > .bottom-bar .collapse-spacing headerbar > windowhandle > box, window.shortcuts headerbar.titlebar > windowhandle > box, window.appchooser headerbar.titlebar > windowhandle > box { + padding-top: 3px; + padding-bottom: 3px; +} + +toolbarview > .top-bar .collapse-spacing headerbar.default-decoration, +toolbarview > .bottom-bar .collapse-spacing headerbar.default-decoration, window.shortcuts headerbar.default-decoration.titlebar, window.appchooser headerbar.default-decoration.titlebar { + min-height: 36px; +} + +toolbarview > .top-bar .collapse-spacing headerbar.default-decoration > windowhandle > box, +toolbarview > .bottom-bar .collapse-spacing headerbar.default-decoration > windowhandle > box, window.shortcuts headerbar.default-decoration.titlebar > windowhandle > box, window.appchooser headerbar.default-decoration.titlebar > windowhandle > box { + padding-top: 0px; + padding-bottom: 0px; +} + +.titlebar:not(headerbar) separator { + background-color: alpha(@headerbar_border_color,0.12); +} + +/********************* + * GtkWindowControls * + *********************/ +windowcontrols > button { + min-height: 16px; + min-width: 16px; + padding: 10px 0; + margin-left: 4px; + margin-right: 4px; + box-shadow: none; +} + +windowcontrols > button.minimize, windowcontrols > button.maximize, windowcontrols > button.close { + color: transparent; + background: none; +} + +windowcontrols > button.minimize:hover, windowcontrols > button.minimize:active, windowcontrols > button.maximize:hover, windowcontrols > button.maximize:active, windowcontrols > button.close:hover, windowcontrols > button.close:active { + box-shadow: none; +} + +windowcontrols > button.minimize:active > image, windowcontrols > button.maximize:active > image, windowcontrols > button.close:active > image { + background-color: alpha(black,0.12); +} + +windowcontrols > button.minimize:hover, windowcontrols > button.minimize:active, windowcontrols > button.maximize:hover, windowcontrols > button.maximize:active, windowcontrols > button.close:hover, windowcontrols > button.close:active { + color: white; +} + +windowcontrols > button.minimize:backdrop > image, windowcontrols > button.maximize:backdrop > image, windowcontrols > button.close:backdrop > image { + background-color: alpha(@headerbar_fg_color,0.3); +} + +windowcontrols > button.minimize:backdrop:hover, windowcontrols > button.minimize:backdrop:active, windowcontrols > button.maximize:backdrop:hover, windowcontrols > button.maximize:backdrop:active, windowcontrols > button.close:backdrop:hover, windowcontrols > button.close:backdrop:active { + color: alpha(@headerbar_fg_color,0.45); +} + +windowcontrols > button.minimize > image { + background-color: #fdbe04; +} + +windowcontrols > button.minimize:active > image { + background-color: mix(@headerbar_fg_color,#fdbe04,0.75); +} + +windowcontrols > button.maximize > image { + background-color: #38c76a; +} + +windowcontrols > button.maximize:active > image { + background-color: mix(@headerbar_fg_color,#38c76a,0.75); +} + +windowcontrols > button.close > image { + background-color: #fd5f51; +} + +windowcontrols > button.close:active > image { + background-color: mix(@headerbar_fg_color,#fd5f51,0.75); +} + +windowcontrols { + border-spacing: 6px; +} + +windowcontrols:not(.empty).start:dir(ltr), windowcontrols:not(.empty).end:dir(rtl) { + margin-right: 6px; + margin-left: 6px; +} + +windowcontrols:not(.empty).start:dir(rtl), windowcontrols:not(.empty).end:dir(ltr) { + margin-left: 6px; + margin-right: 6px; +} + +windowcontrols > button > image { + padding: 0; + border-radius: 100%; + transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +windowcontrols > .icon { + margin: 9px; +} + +/****************** + * AdwWindowTitle * + ******************/ +headerbar .title, +windowtitle .title { + padding-left: 12px; + padding-right: 12px; + font-weight: bold; +} + +headerbar .subtitle, +windowtitle .subtitle { + font-size: smaller; + padding-left: 12px; + padding-right: 12px; +} + +windowtitle { + margin-top: -6px; + margin-bottom: -6px; + min-height: 12px; +} + +window.devel headerbar > windowhandle { + background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")), image(transparent)); + background-repeat: repeat-x; +} + +window.devel dialog headerbar > windowhandle { + background-image: unset; + background-repeat: unset; +} + +label { + caret-color: currentColor; +} + +label:disabled { + filter: opacity(0.45); +} + +.dim-label, scale > value, progressbar > text, row.expander image.expander-row-arrow, row.property > box.header > box.title > .title, row.expander.property box > list > row > box.header > box.title > .title, row label.subtitle, spinbutton > text > placeholder, +entry > text > placeholder, headerbar .subtitle, +windowtitle .subtitle, label.separator { + opacity: 0.55; +} + +.accent { + color: @accent_color; +} + +.success { + color: @success_color; +} + +.warning { + color: @warning_color; +} + +.error { + color: @error_color; +} + +/********************** + * General Typography * + **********************/ +.title-1 { + font-weight: 800; + font-size: 20pt; +} + +.title-2 { + font-weight: 800; + font-size: 15pt; +} + +.title-3 { + font-weight: 700; + font-size: 15pt; +} + +.title-4 { + font-weight: 700; + font-size: 13pt; +} + +.heading, row.button .title, listview > header { + font-weight: 700; + font-size: 11pt; +} + +.body { + font-weight: 400; + font-size: 11pt; +} + +.caption-heading { + font-weight: 700; + font-size: 9pt; +} + +.caption { + font-weight: 400; + font-size: 9pt; +} + +.monospace { + font-family: monospace; +} + +.numeric, spinbutton, scale > value, progressbar > text { + font-feature-settings: "tnum"; +} + +/******************* + * Editable Labels * + *******************/ +editablelabel > stack > text { + color: @view_fg_color; + background-color: @view_bg_color; +} + +levelbar:disabled { + filter: opacity(0.45); +} + +levelbar.horizontal trough > block { + min-height: 8px; + border-radius: 99px; +} + +levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { + border-radius: 99px; +} + +levelbar.horizontal.discrete > trough > block { + min-height: 8px; + margin-right: 2px; + min-width: 26px; + border-radius: 0; +} + +levelbar.horizontal.discrete > trough > block:first-child { + border-radius: 99px 0 0 99px; +} + +levelbar.horizontal.discrete > trough > block:last-child { + border-radius: 0 99px 99px 0; + margin-right: 0; +} + +levelbar.vertical trough > block { + min-width: 8px; + border-radius: 99px; +} + +levelbar.vertical trough > block.empty, levelbar.vertical trough > block.full { + border-radius: 99px; +} + +levelbar.vertical.discrete > trough > block { + min-width: 8px; + margin-bottom: 2px; + min-height: 26px; + border-radius: 0; +} + +levelbar.vertical.discrete > trough > block:first-child { + border-radius: 99px 99px 0 0; +} + +levelbar.vertical.discrete > trough > block:last-child { + border-radius: 0 0 99px 99px; + margin-bottom: 0; +} + +levelbar > trough { + padding: 0; +} + +levelbar > trough > block.low { + background-color: @warning_bg_color; +} + +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { + background-color: @accent_bg_color; +} + +levelbar > trough > block.full { + background-color: @success_bg_color; +} + +levelbar > trough > block.empty { + background-color: alpha(currentColor,0.15); +} + +.osd levelbar > trough > block.high, .osd levelbar > trough > block:not(.empty) { + background-color: rgba(255, 255, 255, 0.75); +} + +.linked:not(.vertical) > button:dir(ltr):not(:first-child), .linked:not(.vertical) > button:dir(rtl):not(:last-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > button:dir(ltr):not(:last-child), .linked:not(.vertical) > button:dir(rtl):not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical button:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical button:not(:last-child) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > menubutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > menubutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > menubutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > menubutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical menubutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical menubutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > dropdown:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > combobox:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > combobox:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > dropdown:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > combobox:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > combobox:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical dropdown:not(:first-child) > button, .linked.vertical combobox:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical dropdown:not(:last-child) > button, .linked.vertical combobox:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > colorbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > colorbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical colorbutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical colorbutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > fontbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > fontbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical fontbutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical fontbutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > tabbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > tabbutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > tabbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > tabbutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical tabbutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical tabbutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > spinbutton:dir(ltr):not(:first-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:last-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > spinbutton:dir(ltr):not(:last-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical spinbutton:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical spinbutton:not(:last-child) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > entry:dir(ltr):not(:first-child), .linked:not(.vertical) > entry:dir(rtl):not(:last-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > entry:dir(ltr):not(:last-child), .linked:not(.vertical) > entry:dir(rtl):not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical entry:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical entry:not(:last-child) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > combobox:dir(ltr):not(:first-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:last-child) > box > button.combo { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > combobox:dir(ltr):not(:last-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:first-child) > box > button.combo { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical combobox:not(:first-child) > box > button.combo { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical combobox:not(:last-child) > box > button.combo { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > appchooserbutton:dir(ltr):not(:first-child) > combobox > box > button.combo, .linked:not(.vertical) > appchooserbutton:dir(rtl):not(:last-child) > combobox > box > button.combo { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > appchooserbutton:dir(ltr):not(:last-child) > combobox > box > button.combo, .linked:not(.vertical) > appchooserbutton:dir(rtl):not(:first-child) > combobox > box > button.combo { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical appchooserbutton:not(:first-child) > combobox > box > button.combo { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical appchooserbutton:not(:last-child) > combobox > box > button.combo { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +link, +button.link { + color: @accent_color; + text-decoration: underline; + font-weight: inherit; +} + +link:visited, +button.link:visited { + color: mix(@accent_color,@view_fg_color,0.2); +} + +link:hover, +button.link:hover { + color: shade(@accent_color,1.1); +} + +link:active, +button.link:active { + color: @accent_color; +} + +link:disabled, +button.link:disabled { + color: alpha(currentColor,0.45); +} + +.osd link, .osd button.link { + color: mix(@accent_bg_color,white,0.5); +} + +.osd link:visited, .osd button.link:visited { + color: mix(@accent_bg_color,white,0.25); +} + +.osd link:active, .osd button.link:active { + color: mix(@accent_bg_color,white,0.5); +} + +link { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +link:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd link:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +button.link > label { + text-decoration: underline; +} + +listview, +list { + color: @view_fg_color; + background-color: @view_bg_color; + background-clip: padding-box; + border-color: alpha(currentColor,0.12); +} + +listview > row, +list > row { + padding: 2px; + background-clip: padding-box; +} + +listview > row.expander, +list > row.expander { + padding: 0px; +} + +listview > row.expander .row-header, +list > row.expander .row-header { + padding: 2px; +} + +listview.horizontal row.separator, listview.separators.horizontal > row:not(.separator), +list.horizontal row.separator, +list.separators.horizontal > row:not(.separator) { + border-left: 1px solid alpha(currentColor,0.12); +} + +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 alpha(currentColor,0.12); +} + +list.frame { + border-radius: 6px; +} + +listview > header { + padding: 2px; + padding-top: 18px; + padding-bottom: 6px; +} + +row { + background-clip: padding-box; +} + +row { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd row:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +.osd row.activatable:hover { + background-color: alpha(currentColor,0.07); +} + +.osd row.activatable:active { + background-color: alpha(currentColor,0.16); +} + +.osd row.activatable.has-open-popup { + background-color: alpha(currentColor,0.07); +} + +.osd row.activatable:selected:hover { + background-color: alpha(currentColor,0.13); +} + +.osd row.activatable:selected:active { + background-color: alpha(currentColor,0.19); +} + +.osd row.activatable:selected.has-open-popup { + background-color: alpha(currentColor,0.13); +} + +.osd row:selected { + background-color: alpha(currentColor,0.1); +} + +row.activatable { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), font-weight 0; + box-shadow: none; + background-color: transparent; + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; +} + +row.activatable:hover { + background-color: alpha(currentColor,0.04); +} + +row.activatable:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, font-weight 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.04) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.04); + box-shadow: none; +} + +row.activatable.has-open-popup { + background-color: alpha(currentColor,0.04); +} + +row.activatable:selected:hover { + background-color: alpha(@accent_bg_color,0.32); +} + +row.activatable:selected:active { + background-color: alpha(@accent_bg_color,0.39); +} + +row.activatable:selected.has-open-popup { + background-color: alpha(@accent_bg_color,0.32); +} + +row:selected { + background-color: alpha(@accent_bg_color,0.25); +} + +/******************************************************* + * Rich Lists * + * Large list usually containing lots of widgets * + * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * + *******************************************************/ +.rich-list { + /* rich lists usually containing other widgets than just labels/text */ +} + +.rich-list > row { + padding: 8px 12px; + min-height: 32px; + /* should be tall even when only containing a label */ +} + +.rich-list > row > box { + border-spacing: 12px; +} + +.rich-list > header { + padding-left: 12px; + padding-right: 12px; +} + +/**************** + * AdwActionRow * + ****************/ +row label.subtitle { + font-size: smaller; +} + +row > box.header { + margin-left: 12px; + margin-right: 12px; + border-spacing: 6px; + min-height: 50px; +} + +row > box.header > .icon:disabled { + filter: opacity(0.45); +} + +row > box.header > box.title { + margin-top: 6px; + margin-bottom: 6px; + border-spacing: 3px; + padding: 0; +} + +row > box.header > box.title, +row > box.header > box.title > .title, +row > box.header > box.title > .subtitle { + padding: 0; + font-weight: inherit; +} + +row > box.header > .prefixes, +row > box.header > .suffixes { + border-spacing: 6px; +} + +row > box.header > .icon:dir(ltr), +row > box.header > .prefixes:dir(ltr) { + margin-right: 6px; +} + +row > box.header > .icon:dir(rtl), +row > box.header > .prefixes:dir(rtl) { + margin-left: 6px; +} + +row.property > box.header > box.title > .title, row.expander.property box > list > row > box.header > box.title > .title { + font-size: smaller; +} + +row.property > box.header > box.title > .subtitle, row.expander.property box > list > row > box.header > box.title > .subtitle { + font-size: inherit; + opacity: 1; +} + +/****************************** + * AdwEntryRow and AdwSpinRow * + ******************************/ +row.entry:disabled text { + opacity: 0.45; +} + +row.entry:disabled .dim-label, row.entry:disabled scale > value, row.entry:disabled progressbar > text, row.entry:disabled row.expander image.expander-row-arrow, row.expander row.entry:disabled image.expander-row-arrow, row.entry:disabled spinbutton > text > placeholder, +row.entry:disabled entry > text > placeholder, row.entry:disabled label.separator, row.entry:disabled row.property > box.header > box.title > .title, row.entry:disabled row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry:disabled box > list > row > box.header > box.title > .title, row.entry:disabled .subtitle { + opacity: 1; +} + +row.entry .edit-icon, row.entry .indicator { + min-width: 22px; + min-height: 22px; + padding: 6px; +} + +row.entry .edit-icon:disabled { + opacity: 0.3; +} + +row.entry .indicator { + opacity: 0.3; +} + +row.entry.monospace { + font-family: inherit; +} + +row.entry.monospace text { + font-family: monospace; +} + +row.spin spinbutton { + background: none; + border-spacing: 6px; + box-shadow: none; +} + +row.spin spinbutton, row.spin spinbutton:focus { + outline: none; +} + +row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child { + min-width: 28px; + min-height: 28px; + margin: 10px 2px; + border: none; +} + +row.spin:disabled spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:disabled, row.spin:disabled spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child:disabled, row.spin:disabled spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child:disabled, +row.spin:disabled spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):disabled, +row.spin:disabled spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child:disabled, +row.spin:disabled spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child:disabled { + filter: none; +} + +row.entry, +row.spin { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.focused, +row.spin.focused { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry:not(:selected).activatable.focused:hover, row.entry:not(:selected).activatable.focused:active, +row.spin:not(:selected).activatable.focused:hover, +row.spin:not(:selected).activatable.focused:active { + background-color: transparent; +} + +row.entry.error, +row.spin.error { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.error.focused, +row.spin.error.focused { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry.error text > selection:focus-within, +row.spin.error text > selection:focus-within { + background-color: alpha(@error_color,0.2); +} + +row.entry.error text > cursor-handle > contents, +row.spin.error text > cursor-handle > contents { + background-color: currentColor; +} + +row.entry.error .dim-label, row.entry.error scale > value, row.entry.error progressbar > text, row.entry.error row.expander image.expander-row-arrow, row.expander row.entry.error image.expander-row-arrow, row.entry.error spinbutton > text > placeholder, +row.entry.error entry > text > placeholder, row.entry.error label.separator, row.entry.error row.property > box.header > box.title > .title, row.entry.error row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry.error box > list > row > box.header > box.title > .title, row.entry.error .subtitle, +row.spin.error .dim-label, +row.spin.error scale > value, +row.spin.error progressbar > text, +row.spin.error row.expander image.expander-row-arrow, +row.expander row.spin.error image.expander-row-arrow, +row.spin.error spinbutton > text > placeholder, +row.spin.error entry > text > placeholder, +row.spin.error label.separator, +row.spin.error row.property > box.header > box.title > .title, +row.spin.error row.expander.property box > list > row > box.header > box.title > .title, +row.expander.property row.spin.error box > list > row > box.header > box.title > .title, +row.spin.error .subtitle { + opacity: 1; +} + +row.entry.error .suggested-action, +row.spin.error .suggested-action { + background-color: @error_bg_color; + color: @error_fg_color; +} + +row.entry.warning, +row.spin.warning { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.warning.focused, +row.spin.warning.focused { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry.warning text > selection:focus-within, +row.spin.warning text > selection:focus-within { + background-color: alpha(@warning_color,0.2); +} + +row.entry.warning text > cursor-handle > contents, +row.spin.warning text > cursor-handle > contents { + background-color: currentColor; +} + +row.entry.warning .dim-label, row.entry.warning scale > value, row.entry.warning progressbar > text, row.entry.warning row.expander image.expander-row-arrow, row.expander row.entry.warning image.expander-row-arrow, row.entry.warning spinbutton > text > placeholder, +row.entry.warning entry > text > placeholder, row.entry.warning label.separator, row.entry.warning row.property > box.header > box.title > .title, row.entry.warning row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry.warning box > list > row > box.header > box.title > .title, row.entry.warning .subtitle, +row.spin.warning .dim-label, +row.spin.warning scale > value, +row.spin.warning progressbar > text, +row.spin.warning row.expander image.expander-row-arrow, +row.expander row.spin.warning image.expander-row-arrow, +row.spin.warning spinbutton > text > placeholder, +row.spin.warning entry > text > placeholder, +row.spin.warning label.separator, +row.spin.warning row.property > box.header > box.title > .title, +row.spin.warning row.expander.property box > list > row > box.header > box.title > .title, +row.expander.property row.spin.warning box > list > row > box.header > box.title > .title, +row.spin.warning .subtitle { + opacity: 1; +} + +row.entry.warning .suggested-action, +row.spin.warning .suggested-action { + background-color: @warning_bg_color; + color: @warning_fg_color; +} + +row.entry.success, +row.spin.success { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.success.focused, +row.spin.success.focused { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry.success text > selection:focus-within, +row.spin.success text > selection:focus-within { + background-color: alpha(@success_color,0.2); +} + +row.entry.success text > cursor-handle > contents, +row.spin.success text > cursor-handle > contents { + background-color: currentColor; +} + +row.entry.success .dim-label, row.entry.success scale > value, row.entry.success progressbar > text, row.entry.success row.expander image.expander-row-arrow, row.expander row.entry.success image.expander-row-arrow, row.entry.success spinbutton > text > placeholder, +row.entry.success entry > text > placeholder, row.entry.success label.separator, row.entry.success row.property > box.header > box.title > .title, row.entry.success row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry.success box > list > row > box.header > box.title > .title, row.entry.success .subtitle, +row.spin.success .dim-label, +row.spin.success scale > value, +row.spin.success progressbar > text, +row.spin.success row.expander image.expander-row-arrow, +row.expander row.spin.success image.expander-row-arrow, +row.spin.success spinbutton > text > placeholder, +row.spin.success entry > text > placeholder, +row.spin.success label.separator, +row.spin.success row.property > box.header > box.title > .title, +row.spin.success row.expander.property box > list > row > box.header > box.title > .title, +row.expander.property row.spin.success box > list > row > box.header > box.title > .title, +row.spin.success .subtitle { + opacity: 1; +} + +row.entry.success .suggested-action, +row.spin.success .suggested-action { + background-color: @success_bg_color; + color: @success_fg_color; +} + +/*************** + * AdwComboRow * + ***************/ +row.combo image.dropdown-arrow:disabled { + filter: opacity(0.45); +} + +row.combo listview.inline { + background: none; + border: none; + box-shadow: none; + color: inherit; +} + +row.combo listview.inline, row.combo listview.inline:disabled { + background: none; + color: inherit; +} + +row.combo popover > contents { + min-width: 120px; +} + +row.combo popover > contents .combo-searchbar { + margin: 6px; +} + +row.combo popover > contents .combo-searchbar + scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +/****************** + * AdwExpanderRow * + ******************/ +list.boxed-list-separate > row, list.boxed-list, list.content { + background-color: @card_bg_color; + color: @card_fg_color; + border-radius: 6px; + box-shadow: 0 0 0 1px alpha(currentColor,0.12); +} + +list.boxed-list-separate > row.expander row.header, list.boxed-list > row, list.content > row, list.boxed-list > row.expander row.header, list.content > row.expander row.header, row.expander list.nested > row { + border-bottom: 1px solid alpha(currentColor,0.08); +} + +list.boxed-list-separate > row.expander row.header, list.boxed-list > row, list.content > row, list.boxed-list > row.expander row.header, list.content > row.expander row.header, row.expander list.nested > row { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +list.boxed-list-separate > row.expander row.header:focus:focus-visible, list.boxed-list > row:focus:focus-visible, list.content > row:focus:focus-visible, list.boxed-list > row.expander row.header:focus:focus-visible, list.content > row.expander row.header:focus:focus-visible, row.expander list.nested > row:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +.osd list.boxed-list-separate > row.expander row.header:focus:focus-visible, list.boxed-list-separate > row.expander .osd row.header:focus:focus-visible, .osd list.boxed-list > row:focus:focus-visible, .osd list.content > row:focus:focus-visible, .osd list.boxed-list > row.expander row.header:focus:focus-visible, list.boxed-list > row.expander .osd row.header:focus:focus-visible, .osd list.content > row.expander row.header:focus:focus-visible, list.content > row.expander .osd row.header:focus:focus-visible, .osd row.expander list.nested > row:focus:focus-visible, row.expander .osd list.nested > row:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +list.boxed-list-separate > row.expander row.header:not(:selected).activatable:hover, list.boxed-list > row:not(:selected).activatable:hover, list.content > row:not(:selected).activatable:hover, list.boxed-list > row.expander row.header:not(:selected).activatable:hover, list.content > row.expander row.header:not(:selected).activatable:hover, row.expander list.nested > row:not(:selected).activatable:hover { + background-color: alpha(currentColor,0.03); +} + +list.boxed-list-separate > row.expander row.header:not(:selected).activatable:active, list.boxed-list > row:not(:selected).activatable:active, list.content > row:not(:selected).activatable:active, list.boxed-list > row.expander row.header:not(:selected).activatable:active, list.content > row.expander row.header:not(:selected).activatable:active, row.expander list.nested > row:not(:selected).activatable:active { + background-color: alpha(currentColor,0.08); +} + +list.boxed-list-separate > row.expander row.header:not(:selected).activatable.has-open-popup, list.boxed-list > row:not(:selected).activatable.has-open-popup, list.content > row:not(:selected).activatable.has-open-popup, list.boxed-list > row.expander row.header:not(:selected).activatable.has-open-popup, list.content > row.expander row.header:not(:selected).activatable.has-open-popup, row.expander list.nested > row:not(:selected).activatable.has-open-popup { + background-color: alpha(currentColor,0.03); +} + +row.expander { + background: none; + padding: 0px; +} + +row.expander > box > list { + background: none; + color: inherit; +} + +row.expander list.nested { + background-color: alpha(@card_shade_color,0.5); + color: inherit; +} + +row.expander image.expander-row-arrow { + transition: -gtk-icon-transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.expander image.expander-row-arrow:dir(ltr) { + margin-left: 3px; +} + +row.expander image.expander-row-arrow:dir(rtl) { + margin-right: 3px; +} + +row.expander image.expander-row-arrow:dir(ltr) { + -gtk-icon-transform: rotate(0.5turn); +} + +row.expander image.expander-row-arrow:dir(rtl) { + -gtk-icon-transform: rotate(-0.5turn); +} + +row.expander image.expander-row-arrow:disabled { + filter: opacity(0.45); +} + +row.expander:checked image.expander-row-arrow { + -gtk-icon-transform: rotate(0turn); + opacity: 1; +} + +row.expander:checked image.expander-row-arrow:not(:disabled) { + color: @accent_color; +} + +.osd row.expander:checked image.expander-row-arrow:not(:disabled) { + color: inherit; +} + +/*************** + * AdwButtonRow * + ***************/ +row.button > box { + margin-left: 12px; + margin-right: 12px; + border-spacing: 6px; + min-height: 50px; +} + +row.button.suggested-action { + color: @accent_color; +} + +row.button.destructive-action { + color: @destructive_color; +} + +/***************** + * Boxed Lists * + *****************/ +list.boxed-list > row.expander, list.content > row.expander { + border: none; +} + +list.boxed-list > row:first-child, list.content > row:first-child, list.boxed-list > row:first-child.expander row.header, list.content > row:first-child.expander row.header { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +list.boxed-list > row:last-child, list.content > row:last-child, list.boxed-list > row:last-child.expander:not(:checked), list.boxed-list > row:last-child.expander:not(:checked) row.header, list.content > row:last-child.expander:not(:checked) row.header, list.boxed-list > row:last-child.expander:checked list.nested, list.content > row:last-child.expander:checked list.nested, list.boxed-list > row:last-child.expander:checked list.nested > row:last-child, list.content > row:last-child.expander:checked list.nested > row:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + border-bottom-width: 0; +} + +list.boxed-list-separate { + background: none; + color: @card_fg_color; +} + +list.boxed-list-separate > row { + border: none; + margin-bottom: 12px; +} + +list.boxed-list-separate > row:last-child { + margin-bottom: 0; +} + +list.boxed-list-separate > row { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +list.boxed-list-separate > row:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +.osd list.boxed-list-separate > row:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +list.boxed-list-separate > row:not(.expander):not(:selected).activatable:hover { + background-color: @card_bg_color; + background-image: image(alpha(currentColor,0.03)); +} + +list.boxed-list-separate > row:not(.expander):not(:selected).activatable:active { + background-color: @card_bg_color; + background-image: image(alpha(currentColor,0.08)); +} + +list.boxed-list-separate > row:not(.expander):not(:selected).activatable.has-open-popup { + background-color: @card_bg_color; + background-image: image(alpha(currentColor,0.03)); +} + +list.boxed-list-separate > row.entry:not(:selected).activatable.focused:hover, list.boxed-list-separate > row.entry:not(:selected).activatable.focused:active, list.boxed-list-separate > row.spin:not(:selected).activatable.focused:hover, list.boxed-list-separate > row.spin:not(:selected).activatable.focused:active { + background-color: @card_bg_color; + background-image: none; +} + +list.boxed-list-separate > row.entry.error, list.boxed-list-separate > row.spin.error { + color: @error_color; +} + +list.boxed-list-separate > row.entry.warning, list.boxed-list-separate > row.spin.warning { + color: @warning_color; +} + +list.boxed-list-separate > row.entry.success, list.boxed-list-separate > row.spin.success { + color: @success_color; +} + +list.boxed-list-separate > row.expander row.header { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +list.boxed-list-separate > row.expander:not(:checked) row.header, list.boxed-list-separate > row.expander.expander:checked list.nested, list.boxed-list-separate > row.expander.expander:checked list.nested > row:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + border-bottom: none; +} + +popover.menu > contents { + min-width: 120px; +} + +popover.menu scrollbar.vertical > range > trough > slider { + min-height: 30px; +} + +popover.menu box.inline-buttons { + padding: 0 12px; +} + +popover.menu box.inline-buttons button.image-button.model { + min-height: 28px; + min-width: 28px; + padding: 2px; + border: none; + outline: none; + transition: none; +} + +popover.menu box.inline-buttons button.image-button.model:selected { + background-color: alpha(currentColor,0.1); +} + +popover.menu box.inline-buttons button.image-button.model:selected:active { + background-color: alpha(currentColor,0.19); +} + +popover.menu box.circular-buttons { + padding: 12px 12px 6px; +} + +popover.menu box.circular-buttons button.circular.image-button.model { + outline: none; + padding: 12px; + box-shadow: inset 0 0 0 1px alpha(currentColor,0.12); +} + +popover.menu box.circular-buttons button.circular.image-button.model:selected { + background-color: alpha(currentColor,0.13); +} + +popover.menu box.circular-buttons button.circular.image-button.model:selected:active { + background-color: alpha(currentColor,0.19); +} + +popover.menu > contents { + padding: 0; +} + +popover.menu > contents > stack > box, popover.menu > contents > scrolledwindow > viewport > stack > box { + padding: 6px; +} + +popover.menu separator { + margin: 6px 0; +} + +popover.menu list separator { + margin: 0; +} + +popover.menu accelerator { + color: alpha(currentColor,0.55); +} + +popover.menu accelerator:dir(ltr) { + margin-left: 12px; +} + +popover.menu accelerator:dir(rtl) { + margin-right: 12px; +} + +popover.menu check, +popover.menu radio { + min-width: 16px; + min-height: 16px; + -gtk-icon-size: 16px; + padding: 0; +} + +popover.menu check, popover.menu check:hover:checked, popover.menu check:hover:indeterminate, popover.menu check:hover:not(:checked):not(:indeterminate), popover.menu check:active:checked, popover.menu check:active:indeterminate, popover.menu check:active:not(:checked):not(:indeterminate), +popover.menu radio, +popover.menu radio:hover:checked, +popover.menu radio:hover:indeterminate, +popover.menu radio:hover:not(:checked):not(:indeterminate), +popover.menu radio:active:checked, +popover.menu radio:active:indeterminate, +popover.menu radio:active:not(:checked):not(:indeterminate) { + background: none; + box-shadow: none; + color: inherit; +} + +popover.menu radio:checked, popover.menu radio:indeterminate { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/menu-radio-symbolic.svg")), -gtk-recolor(url("assets/menu-radio-symbolic@2.svg"))); +} + +.osd popover.menu check, .osd popover.menu radio { + background: none; + color: inherit; +} + +popover.menu radio, popover.menu check { + padding: 0; + border: 1px solid alpha(currentColor,0.3); +} + +popover.menu check.left, +popover.menu radio.left, +popover.menu arrow.left { + margin-left: -2px; + margin-right: 6px; +} + +popover.menu check.right, +popover.menu radio.right, +popover.menu arrow.right { + margin-left: 6px; + margin-right: -2px; +} + +popover.menu modelbutton { + min-height: 28px; + min-width: 40px; + padding: 2px 12px; + border-radius: 6px; + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), outline 300ms cubic-bezier(0, 0, 0.2, 1); + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; + background-color: transparent; + outline: 0 solid transparent; + outline-offset: 2px; + color: alpha(currentColor,0.75); +} + +popover.menu modelbutton:focus:not(:hover):not(:active) { + outline: none; + background: none; + transition: none; +} + +popover.menu modelbutton:hover, popover.menu modelbutton:selected { + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +popover.menu modelbutton:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.12) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +popover.menu modelbutton arrow { + background: none; + min-width: 16px; + min-height: 16px; + opacity: 0.3; +} + +popover.menu modelbutton arrow:hover { + background: none; +} + +popover.menu modelbutton arrow:disabled { + filter: opacity(0.45); +} + +popover.menu modelbutton arrow.left { + -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); +} + +popover.menu modelbutton arrow.right { + -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); +} + +popover.menu label.title { + font-weight: bold; + padding: 4px 32px; +} + +popover.menu list, popover.menu listview { + background: none; + color: inherit; +} + +popover.menu list > row, popover.menu listview > row { + border-radius: 6px; + padding: 0 12px; + min-height: 28px; + min-width: 48px; +} + +popover.menu list > row:selected, popover.menu listview > row:selected { + background: none; +} + +popover.menu list > row:hover, popover.menu list > row:hover:selected.activatable, popover.menu listview > row:hover, popover.menu listview > row:hover:selected.activatable { + background-color: alpha(currentColor,0.1); +} + +popover.menu list > row:active, popover.menu list > row:active:selected.activatable, popover.menu listview > row:active, popover.menu listview > row:active:selected.activatable { + background-color: alpha(currentColor,0.19); +} + +popover.menu list > row.has-open-popup, popover.menu list > row.has-open-popup:selected.activatable, popover.menu listview > row.has-open-popup, popover.menu listview > row.has-open-popup:selected.activatable { + background-color: alpha(currentColor,0.1); +} + +popover.menu list > row > box, popover.menu listview > row > box { + border-spacing: 6px; +} + +popover.menu contents > list, +popover.menu contents > listview, +popover.menu scrolledwindow > viewport > list, +popover.menu scrolledwindow > listview { + padding: 6px 0; +} + +popover.menu contents > list > row, +popover.menu contents > listview > row, +popover.menu scrolledwindow > viewport > list > row, +popover.menu scrolledwindow > listview > row { + margin: 0 6px; + padding: 6px 12px; + min-height: 0; +} + +menubar { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + padding-bottom: 1px; +} + +menubar > item { + min-height: 16px; + padding: 4px 8px; + border-radius: 6px; +} + +menubar > item:selected { + background-color: alpha(currentColor,0.1); +} + +menubar > item popover.menu popover.menu { + padding: 0 0 4px 0; +} + +menubar > item popover.menu popover.menu > contents { + margin: 0; + border-radius: 12px; +} + +toolbarview > .top-bar menubar, +toolbarview > .bottom-bar menubar { + box-shadow: none; + padding-bottom: 0; +} + +/******************** + * GtkMessageDialog * + ********************/ +window.dialog.message .titlebar { + min-height: 20px; + background: none; + box-shadow: none; + border-style: none; + border-top-left-radius: 7px; + border-top-right-radius: 7px; +} + +window.dialog.message box.dialog-vbox.vertical { + margin-top: 6px; + border-spacing: 24px; +} + +window.dialog.message box.dialog-vbox.vertical > box > box > box > label.title { + font-weight: 800; + font-size: 15pt; +} + +window.dialog.message.csd { + border-bottom-left-radius: 13px; + border-bottom-right-radius: 13px; +} + +window.dialog.message.csd .dialog-action-area { + border-top: 1px solid alpha(currentColor,0.12); + margin: 0; + border-spacing: 0; +} + +window.dialog.message.csd .dialog-action-area > button { + padding: 10px 14px; + border-radius: 0; + border: none; + background-clip: padding-box; + border-left: 1px solid alpha(currentColor,0.12); +} + +window.dialog.message.csd .dialog-action-area > button:first-child { + border-bottom-left-radius: 13px; + border-left: none; +} + +window.dialog.message.csd .dialog-action-area > button:last-child { + border-bottom-right-radius: 13px; +} + +window.dialog.message.csd .dialog-action-area > button.suggested-action { + color: @accent_color; +} + +window.dialog.message.csd .dialog-action-area > button.destructive-action { + color: @destructive_color; +} + +/******************** + * AdwMessageDialog * + ********************/ +window.messagedialog, +dialog-host > dialog.alert sheet, +window.dialog-window.alert { + background-color: @dialog_bg_color; + color: @dialog_fg_color; +} + +dialog-host > dialog.alert.floating sheet, +window.dialog-window.alert { + border-radius: 13px; + outline: none; +} + +window.messagedialog .message-area, +dialog.alert .message-area { + padding: 24px 30px; + border-spacing: 24px; +} + +window.messagedialog .message-area.has-heading.has-body, +dialog.alert .message-area.has-heading.has-body { + border-spacing: 10px; +} + +window.messagedialog .response-area > button, +dialog.alert .response-area > button { + padding: 10px 14px; + border-radius: 0; +} + +window.messagedialog .response-area > button.suggested, +dialog.alert .response-area > button.suggested { + color: @accent_color; +} + +window.messagedialog .response-area > button.destructive, +dialog.alert .response-area > button.destructive { + color: @destructive_color; +} + +window.messagedialog .response-area:not(.compact) > button, +dialog.alert .response-area:not(.compact) > button { + margin-top: -1px; + margin-right: -1px; + margin-left: -1px; +} + +window.messagedialog .response-area:not(.compact) > button:first-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:last-child:dir(rtl), +dialog.alert .response-area:not(.compact) > button:first-child:dir(ltr), +dialog.alert .response-area:not(.compact) > button:last-child:dir(rtl) { + margin-left: 0; +} + +window.messagedialog .response-area:not(.compact) > button:last-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:first-child:dir(rtl), +dialog.alert .response-area:not(.compact) > button:last-child:dir(ltr), +dialog.alert .response-area:not(.compact) > button:first-child:dir(rtl) { + margin-right: 0; +} + +window.messagedialog .response-area.compact > button, +dialog.alert .response-area.compact > button { + margin-top: -1px; + margin-bottom: -1px; +} + +window.messagedialog .response-area.compact > button:first-child, +dialog.alert .response-area.compact > button:first-child { + margin-bottom: 0; +} + +window.messagedialog .response-area:not(.compact) > button:first-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:last-child:dir(rtl), +dialog.alert.floating .response-area:not(.compact) > button:first-child:dir(ltr), +dialog.alert.floating .response-area:not(.compact) > button:last-child:dir(rtl) { + border-bottom-left-radius: 13px; +} + +window.messagedialog .response-area:not(.compact) > button:last-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:first-child:dir(rtl), +dialog.alert.floating .response-area:not(.compact) > button:last-child:dir(ltr), +dialog.alert.floating .response-area:not(.compact) > button:first-child:dir(rtl) { + border-bottom-right-radius: 13px; +} + +window.messagedialog .response-area.compact > button:first-child, +dialog.alert.floating .response-area.compact > button:first-child { + border-bottom-left-radius: 13px; + border-bottom-right-radius: 13px; +} + +/********** + * Frames * + **********/ +frame, +.frame { + border: 1px solid alpha(currentColor,0.12); +} + +frame { + border-radius: 6px; +} + +frame > label { + margin: 4px; +} + +/************** + * Separators * + **************/ +separator { + background: alpha(currentColor,0.12); + min-width: 1px; + min-height: 1px; +} + +separator.spacer { + background: none; +} + +separator.spacer.horizontal { + min-width: 12px; +} + +separator.spacer.vertical { + min-height: 12px; +} + +/********************* + * App Notifications * + *********************/ +.app-notification { + padding: 10px; + border-spacing: 10px; + border-radius: 0 0 12px 12px; + background-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); + background-clip: padding-box; +} + +.app-notification border { + border: none; +} + +/********** + * Toasts * + **********/ +toast { + margin: 12px; + margin-bottom: 24px; + border-radius: 150px; + border-spacing: 6px; + padding: 6px; +} + +toast:dir(ltr) { + padding-left: 12px; +} + +toast:dir(rtl) { + padding-right: 12px; +} + +toast > widget { + margin: 0 6px; +} + +/************** + * GtkVideo * + **************/ +video image.osd { + min-width: 64px; + min-height: 64px; + border-radius: 32px; +} + +/****************** + * AdwAboutWindow * + ******************/ +window.about .main-page > viewport > clamp > box, +dialog.about .main-page > viewport > clamp > box { + margin: 12px; + border-spacing: 6px; +} + +window.about .main-page > viewport > clamp > box > box, +dialog.about .main-page > viewport > clamp > box > box { + margin-top: 18px; + border-spacing: 18px; + margin-bottom: 6px; +} + +window.about .main-page .app-version, +dialog.about .main-page .app-version { + padding: 3px 18px; + color: @accent_color; + border-radius: 9999px; + margin-top: 3px; +} + +window.about .subpage > viewport > clamp > box, +dialog.about .subpage > viewport > clamp > box { + margin: 18px 12px; + border-spacing: 18px; +} + +window.about .subpage > clamp > textview, +dialog.about .subpage > clamp > textview { + background: none; + color: inherit; +} + +/***************** + * AdwStatusPage * + *****************/ +statuspage > scrolledwindow > viewport > box { + margin: 36px 12px; + border-spacing: 36px; +} + +statuspage > scrolledwindow > viewport > box > clamp > box { + border-spacing: 12px; +} + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon { + -gtk-icon-size: 128px; + color: alpha(currentColor,0.55); +} + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon:disabled { + opacity: 0.45; +} + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { + margin-bottom: 24px; +} + +statuspage.compact > scrolledwindow > viewport > box { + margin: 24px 12px; + border-spacing: 24px; +} + +statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon { + -gtk-icon-size: 96px; +} + +statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { + margin-bottom: 12px; +} + +statuspage.compact > scrolledwindow > viewport > box > clamp > box > .title { + font-size: 18pt; +} + +/* Cards */ +shortcut > .keycap, .card { + background-color: @card_bg_color; + color: @card_fg_color; + border-radius: 12px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); +} + +.osd shortcut > .keycap, shortcut > .osd.keycap, .osd .card, .card.osd { + background-color: alpha(currentColor,0.1); + color: inherit; + box-shadow: none; +} + +.card { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.card:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +.osd .card:focus:focus-visible, .card.osd:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +.card.activatable { + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.card.activatable:hover { + background-image: image(alpha(currentColor,0.03)); +} + +.card.activatable:active { + background-image: image(alpha(currentColor,0.08)); +} + +/* Transition shadows */ +flap > dimming, +leaflet > dimming, +navigation-view > dimming, +overlay-split-view > dimming { + background: @shade_color; +} + +flap > shadow, +leaflet > shadow, +navigation-view > shadow, +overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +flap > shadow.left, +leaflet > shadow.left, +navigation-view > shadow.left, +overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to right, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +flap > shadow.right, +leaflet > shadow.right, +navigation-view > shadow.right, +overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to left, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +flap > shadow.up, +leaflet > shadow.up, +navigation-view > shadow.up, +overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to bottom, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +flap > shadow.down, +leaflet > shadow.down, +navigation-view > shadow.down, +overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to top, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +notebook > header > tabs > tab:checked { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +notebook:focus:focus-visible > header > tabs > tab:checked { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +notebook > header { + padding: 1px; + border-color: alpha(currentColor,0.12); + border-width: 1px; + background-clip: padding-box; +} + +notebook > header > tabs { + margin: -1px; +} + +notebook > header.top { + border-bottom-style: solid; +} + +notebook > header.top > tabs { + margin-bottom: -2px; +} + +notebook > header.top > tabs > tab:hover { + box-shadow: inset 0 -4px alpha(currentColor,0.12); +} + +notebook > header.top > tabs > tab:checked { + box-shadow: inset 0 -4px @accent_bg_color; +} + +notebook > header.bottom { + border-top-style: solid; +} + +notebook > header.bottom > tabs { + margin-top: -2px; +} + +notebook > header.bottom > tabs > tab:hover { + box-shadow: inset 0 4px alpha(currentColor,0.12); +} + +notebook > header.bottom > tabs > tab:checked { + box-shadow: inset 0 4px @accent_bg_color; +} + +notebook > header.left { + border-right-style: solid; +} + +notebook > header.left > tabs { + margin-right: -2px; +} + +notebook > header.left > tabs > tab:hover { + box-shadow: inset -4px 0 alpha(currentColor,0.12); +} + +notebook > header.left > tabs > tab:checked { + box-shadow: inset -4px 0 @accent_bg_color; +} + +notebook > header.right { + border-left-style: solid; +} + +notebook > header.right > tabs { + margin-left: -2px; +} + +notebook > header.right > tabs > tab:hover { + box-shadow: inset 4px 0 alpha(currentColor,0.12); +} + +notebook > header.right > tabs > tab:checked { + box-shadow: inset 4px 0 @accent_bg_color; +} + +notebook > header.top > tabs > arrow { + border-top-style: none; +} + +notebook > header.bottom > tabs > arrow { + border-bottom-style: none; +} + +notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { + margin-left: -5px; + margin-right: -5px; + padding-left: 4px; + padding-right: 4px; +} + +notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); +} + +notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + +notebook > header.left > tabs > arrow { + border-left-style: none; +} + +notebook > header.right > tabs > arrow { + border-right-style: none; +} + +notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { + margin-top: -5px; + margin-bottom: -5px; + padding-top: 4px; + padding-bottom: 4px; +} + +notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); +} + +notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +notebook > header > tabs > arrow { + min-height: 16px; + min-width: 16px; + border-radius: 0; +} + +notebook > header > tabs > arrow:hover:not(:active) { + box-shadow: none; +} + +notebook > header > tabs > tab { + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + min-height: 30px; + min-width: 30px; + padding: 3px 12px; + font-weight: normal; +} + +notebook > header > tabs > tab:hover, notebook > header > tabs > tab:active { + background-color: alpha(currentColor,0.07); +} + +notebook > header > tabs > tab:not(:checked) { + outline-color: transparent; +} + +notebook > header > tabs > tab:disabled { + filter: opacity(0.45); +} + +notebook > header > tabs > tab:disabled label, notebook > header > tabs > tab:disabled button { + filter: none; +} + +notebook > header > tabs > tab button.flat { + color: alpha(currentColor,0.3); + padding: 0; + margin-top: 4px; + margin-bottom: 4px; + min-width: 20px; + min-height: 20px; +} + +notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.flat:active { + color: currentColor; +} + +notebook > header > tabs > tab button.flat:last-child { + margin-left: 4px; + margin-right: -4px; +} + +notebook > header > tabs > tab button.flat:first-child { + margin-left: -4px; + margin-right: 4px; +} + +notebook > header.top > tabs, notebook > header.bottom > tabs { + padding-left: 4px; + padding-right: 4px; +} + +notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { + margin-left: 3px; + margin-right: 3px; +} + +notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { + margin-left: -1px; +} + +notebook > header.top > tabs:not(:only-child):last-child, notebook > header.bottom > tabs:not(:only-child):last-child { + margin-right: -1px; +} + +notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { + margin-left: 4px; + margin-right: 4px; +} + +notebook > header.left > tabs, notebook > header.right > tabs { + padding-top: 4px; + padding-bottom: 4px; +} + +notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { + margin-top: 3px; + margin-bottom: 3px; +} + +notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { + margin-top: -1px; +} + +notebook > header.left > tabs:not(:only-child):last-child, notebook > header.right > tabs:not(:only-child):last-child { + margin-bottom: -1px; +} + +notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { + margin-top: 4px; + margin-bottom: 4px; +} + +notebook > header.top > tabs > tab { + padding-bottom: 4px; +} + +notebook > header.bottom > tabs > tab { + padding-top: 4px; +} + +notebook > stack:not(:only-child) { + background-color: @view_bg_color; +} + +paned > separator { + min-width: 1px; + min-height: 1px; + background: none; + background-size: 1px 1px; +} + +paned > separator.wide { + min-width: 5px; + min-height: 5px; +} + +paned.horizontal > separator:dir(ltr) { + margin: 0 -8px 0 0; + padding: 0 8px 0 0; + box-shadow: inset 1px 0 alpha(currentColor,0.12); +} + +paned.horizontal > separator:dir(rtl) { + margin: 0 0 0 -8px; + padding: 0 0 0 8px; + box-shadow: inset -1px 0 alpha(currentColor,0.12); +} + +paned.horizontal > separator.wide { + margin: 0; + padding: 0; + box-shadow: inset 1px 0 alpha(currentColor,0.12), inset -1px 0 alpha(currentColor,0.12); +} + +paned.vertical > separator { + margin: 0 0 -8px 0; + padding: 0 0 8px 0; + box-shadow: inset 0 1px alpha(currentColor,0.12); +} + +paned.vertical > separator.wide { + margin: 0; + padding: 0; + box-shadow: inset 0 1px alpha(currentColor,0.12), inset 0 -1px alpha(currentColor,0.12); +} + +toolbarview.undershoot-top popover scrolledwindow undershoot.top, +toolbarview.undershoot-bottom popover scrolledwindow undershoot.bottom { + background: none; + box-shadow: none; +} + +popover.background { + background-color: transparent; + font: initial; +} + +popover > arrow, +popover > contents { + background-color: @popover_bg_color; + color: @popover_fg_color; + background-clip: border-box; + border: 1px solid mix(white,@popover_bg_color,0.92); + box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.09), 0 2px 14px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px @headerbar_darker_shade_color; +} + +popover > contents { + padding: 6px; + border-radius: 12px; +} + +popover > contents > list, +popover > contents > .view, +window.print popover > contents > .dialog-action-box, +popover > contents > toolbar { + border-style: none; + background-color: transparent; +} + +popover > contents separator { + background-color: alpha(currentColor,0.08); +} + +.osd popover, popover.touch-selection, popover.magnifier { + background-color: transparent; +} + +.osd popover > arrow, +.osd popover > contents, popover.touch-selection > arrow, +popover.touch-selection > contents, popover.magnifier > arrow, +popover.magnifier > contents { + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: none; +} + +popover toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-top > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover flap > dimming, +popover leaflet > dimming, +popover navigation-view > dimming, +popover overlay-split-view > dimming { + background: @popover_shade_color; +} + +popover flap > shadow, +popover leaflet > shadow, +popover navigation-view > shadow, +popover overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +popover flap > shadow.left, +popover leaflet > shadow.left, +popover navigation-view > shadow.left, +popover overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to right, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +popover flap > shadow.right, +popover leaflet > shadow.right, +popover navigation-view > shadow.right, +popover overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to left, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +popover flap > shadow.up, +popover leaflet > shadow.up, +popover navigation-view > shadow.up, +popover overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to bottom, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +popover flap > shadow.down, +popover leaflet > shadow.down, +popover navigation-view > shadow.down, +popover overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to top, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +preferencespage > scrolledwindow > viewport > clamp > box { + margin: 24px 12px; + border-spacing: 24px; +} + +preferencesgroup > box, preferencesgroup > box .labels { + border-spacing: 6px; +} + +preferencesgroup > box > box.header:not(.single-line) { + margin-bottom: 6px; +} + +preferencesgroup > box > box.single-line { + min-height: 34px; +} + +progressbar.horizontal > trough { + min-width: 150px; +} + +progressbar.horizontal > trough, progressbar.horizontal > trough > progress { + min-height: 8px; +} + +progressbar.vertical > trough { + min-height: 80px; +} + +progressbar.vertical > trough, progressbar.vertical > trough > progress { + min-width: 8px; +} + +progressbar > text { + font-size: smaller; +} + +progressbar:disabled { + filter: opacity(0.45); +} + +progressbar > trough > progress { + /* share most of scales' */ + border-radius: 99px; +} + +progressbar > trough > progress.left { + border-top-left-radius: 99px; + border-bottom-left-radius: 99px; +} + +progressbar > trough > progress.right { + border-top-right-radius: 99px; + border-bottom-right-radius: 99px; +} + +progressbar > trough > progress.top { + border-top-right-radius: 99px; + border-top-left-radius: 99px; +} + +progressbar > trough > progress.bottom { + border-bottom-right-radius: 99px; + border-bottom-left-radius: 99px; +} + +progressbar.osd { + min-width: 2px; + min-height: 2px; + background-color: transparent; + color: inherit; +} + +progressbar.osd > trough { + border-style: none; + border-radius: 0; + background-color: transparent; + box-shadow: none; +} + +progressbar.osd > trough > progress { + border-style: none; + border-radius: 0; +} + +progressbar.osd.horizontal > trough, progressbar.osd.horizontal > trough > progress { + min-height: 2px; +} + +progressbar.osd.vertical > trough, progressbar.osd.vertical > trough > progress { + min-width: 2px; +} + +progressbar > trough.empty > progress { + all: unset; +} + +.osd progressbar > trough > progress { + background-color: rgba(255, 255, 255, 0.75); +} + +scale > trough > fill, scale > trough, progressbar > trough { + border-radius: 9999px; + background-color: alpha(currentColor,0.15); +} + +scale > trough > highlight, progressbar > trough > progress { + border-radius: 9999px; + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +scale { + min-height: 10px; + min-width: 10px; + padding: 12px; +} + +scale > trough > slider { + outline: 0 solid transparent; + outline-offset: 6px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +scale:focus:focus-visible > trough > slider { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 0; +} + +scale > trough > slider { + background-color: @headerbar_bg_color; + box-shadow: 0 0 0 2px @accent_bg_color, 0 0 0 0 transparent; + border-radius: 100%; + transition: box-shadow 200ms ease-out; + min-width: 16px; + min-height: 16px; + margin: -7px; +} + +scale:hover > trough, scale:active > trough { + background-color: alpha(currentColor,0.2); +} + +scale:hover > trough > highlight, scale:active > trough > highlight { + background-image: image(alpha(currentColor,0.1)); +} + +scale:hover > trough > slider, scale:active > trough > slider { + background-color: @headerbar_backdrop_color; + box-shadow: 0 0 0 2px @accent_bg_color, 0 0 0 8px alpha(currentColor,0.12); +} + +.osd scale:focus:focus-visible > trough { + outline-color: rgba(255, 255, 255, 0.5); +} + +.osd scale > trough > highlight { + background-color: rgba(255, 255, 255, 0.75); + color: rgba(0, 0, 0, 0.75); +} + +scale:disabled { + filter: opacity(0.45); +} + +scale:disabled > trough > slider { + box-shadow: 0 0 0 2px mix(@accent_bg_color,@window_bg_color,0.5); + outline-color: rgba(0, 0, 0, 0.2); +} + +scale.fine-tune { + padding: 9px; +} + +scale.fine-tune.horizontal { + min-height: 16px; +} + +scale.fine-tune.vertical { + min-width: 16px; +} + +scale.fine-tune > trough > slider { + margin: -5px; +} + +scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.marks-before) > trough > slider { + transform: rotate(45deg); + box-shadow: 0 0 0 2px @accent_bg_color; +} + +scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled { + box-shadow: 0 0 0 2px mix(@accent_bg_color,@window_bg_color,0.5); +} + +scale.horizontal > marks { + color: alpha(currentColor,0.55); +} + +scale.horizontal > marks.top { + margin-bottom: 6px; +} + +scale.horizontal > marks.bottom { + margin-top: 6px; +} + +scale.horizontal > marks indicator { + background-color: currentColor; + min-height: 6px; + min-width: 1px; +} + +scale.horizontal > value.left { + margin-right: 9px; +} + +scale.horizontal > value.right { + margin-left: 9px; +} + +scale.horizontal.fine-tune > marks.top { + margin-top: 3px; +} + +scale.horizontal.fine-tune > marks.bottom { + margin-bottom: 3px; +} + +scale.horizontal.fine-tune > marks indicator { + min-height: 3px; +} + +scale.horizontal.marks-before { + padding-top: 0; +} + +scale.horizontal.marks-before > trough > slider { + border-top-left-radius: 0; +} + +scale.horizontal.marks-after { + padding-bottom: 0; +} + +scale.horizontal.marks-after > trough > slider { + border-bottom-right-radius: 0; +} + +scale.horizontal.marks-before.marks-after > trough > slider { + border-radius: 100%; +} + +scale.vertical > marks { + color: alpha(currentColor,0.55); +} + +scale.vertical > marks.top { + margin-right: 6px; +} + +scale.vertical > marks.bottom { + margin-left: 6px; +} + +scale.vertical > marks indicator { + background-color: currentColor; + min-height: 1px; + min-width: 6px; +} + +scale.vertical > value.top { + margin-bottom: 9px; +} + +scale.vertical > value.bottom { + margin-top: 9px; +} + +scale.vertical.fine-tune > marks.top { + margin-left: 3px; +} + +scale.vertical.fine-tune > marks.bottom { + margin-right: 3px; +} + +scale.vertical.fine-tune > marks indicator { + min-height: 3px; +} + +scale.vertical.marks-before { + padding-left: 0; +} + +scale.vertical.marks-before > trough > slider { + border-bottom-left-radius: 0; +} + +scale.vertical.marks-after { + padding-right: 0; +} + +scale.vertical.marks-after > trough > slider { + border-top-right-radius: 0; +} + +scale.color { + padding: 0; +} + +scale.color > trough { + border: none; + background: none; + border-radius: 10px; +} + +scale.color > trough > slider { + margin: 0; + background-color: rgba(255, 255, 255, 0.8); +} + +scale.color.fine-tune { + padding: 2px; +} + +scale.color.fine-tune > trough > slider { + margin: -2px; +} + +scrollbar > range > trough { + margin: 7px; + transition: all 200ms linear; + border-radius: 10px; +} + +scrollbar > range > trough > slider { + min-width: 8px; + min-height: 8px; + margin: -6px; + border: 6px solid transparent; + border-radius: 10px; + background-clip: padding-box; + transition: all 200ms linear; + background-color: alpha(currentColor,0.2); +} + +scrollbar > range > trough > slider:hover { + background-color: alpha(currentColor,0.4); +} + +scrollbar > range > trough > slider:active { + background-color: alpha(currentColor,0.6); +} + +scrollbar > range > trough > slider:disabled { + opacity: 0; +} + +scrollbar.horizontal > range > trough { + margin-top: 6px; + margin-bottom: 6px; +} + +scrollbar.vertical > range > trough { + margin-left: 6px; + margin-right: 6px; +} + +scrollbar.overlay-indicator { + background: none; + color: inherit; + box-shadow: none; + padding: 0; +} + +scrollbar.overlay-indicator > range > trough { + outline: 1px solid transparent; +} + +scrollbar.overlay-indicator > range > trough > slider { + outline: 1px solid alpha(@scrollbar_outline_color,0.6); + outline-offset: -6px; +} + +.osd scrollbar.overlay-indicator > range > trough > slider { + outline: 1px solid alpha(rgba(0, 0, 0, 0.5),0.6); +} + +scrollbar.overlay-indicator:not(.hovering) > range > trough > slider { + min-width: 3px; + min-height: 3px; + outline-color: alpha(@scrollbar_outline_color,0.35); +} + +.osd scrollbar.overlay-indicator:not(.hovering) > range > trough > slider { + outline-color: alpha(rgba(0, 0, 0, 0.5),0.35); +} + +scrollbar.overlay-indicator.hovering > range > trough { + background-color: alpha(currentColor,0.1); +} + +scrollbar.overlay-indicator.horizontal > range > trough > slider { + min-width: 40px; +} + +scrollbar.overlay-indicator.horizontal.hovering > range > trough > slider { + min-height: 8px; +} + +scrollbar.overlay-indicator.horizontal:not(.hovering) > range > trough { + margin-top: 3px; + margin-bottom: 3px; +} + +scrollbar.overlay-indicator.vertical > range > trough > slider { + min-height: 40px; +} + +scrollbar.overlay-indicator.vertical.hovering > range > trough > slider { + min-width: 8px; +} + +scrollbar.overlay-indicator.vertical:not(.hovering) > range > trough { + margin-left: 3px; + margin-right: 3px; +} + +scrollbar.horizontal > range > trough > slider { + min-width: 40px; +} + +scrollbar.vertical > range > trough > slider { + min-height: 40px; +} + +scrollbar > range.fine-tune > trough > slider, scrollbar > range.fine-tune > trough > slider:hover, scrollbar > range.fine-tune > trough > slider:active { + background-color: alpha(@accent_color,0.6); +} + +scrolledwindow > overshoot.top { + background-image: radial-gradient(farthest-side at top, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at top, alpha(currentColor,0.05), alpha(currentColor,0)); + background-size: 100% 3%, 100% 50%; + background-repeat: no-repeat; + background-position: top; + background-color: transparent; + border: none; + box-shadow: none; +} + +scrolledwindow > overshoot.bottom { + background-image: radial-gradient(farthest-side at bottom, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at bottom, alpha(currentColor,0.05), alpha(currentColor,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(farthest-side at left, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at left, alpha(currentColor,0.05), alpha(currentColor,0)); + background-size: 3% 100%, 50% 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, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at right, alpha(currentColor,0.05), alpha(currentColor,0)); + background-size: 3% 100%, 50% 100%; + background-repeat: no-repeat; + background-position: right; + background-color: transparent; + border: none; + box-shadow: none; +} + +scrolledwindow.undershoot-top > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@shade_color,0.75), transparent 6px); +} + +toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +.about toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: inset 0 1px alpha(currentColor,0.12); + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +.about toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +shortcuts-section { + margin: 20px; +} + +.shortcuts-search-results { + margin: 20px; + border-spacing: 24px; +} + +shortcut { + border-spacing: 6px; + border-radius: 6px; +} + +shortcut { + outline: 0 solid transparent; + outline-offset: 8px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +shortcut:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 4px; +} + +shortcut > .keycap { + min-width: 20px; + min-height: 25px; + padding: 2px 6px; + border-radius: 6px; + font-size: smaller; +} + +shortcuts-section stackswitcher.circular { + border-spacing: 12px; +} + +shortcuts-section stackswitcher.circular > button.circular, +shortcuts-section stackswitcher.circular > button.text-button.circular { + min-width: 32px; + min-height: 32px; + padding: 0; +} + +window.shortcuts headerbar.titlebar > windowhandle { + padding-top: 3px; +} + +window.shortcuts searchbar { + background: none; +} + +.sidebar-pane { + background-color: @sidebar_bg_color; + color: @sidebar_fg_color; +} + +.sidebar-pane:backdrop { + background-color: @sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +.sidebar-pane flap > dimming, +.sidebar-pane leaflet > dimming, +.sidebar-pane navigation-view > dimming, +.sidebar-pane overlay-split-view > dimming { + background: @sidebar_shade_color; +} + +.sidebar-pane flap > shadow, +.sidebar-pane leaflet > shadow, +.sidebar-pane navigation-view > shadow, +.sidebar-pane overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +.sidebar-pane flap > shadow.left, +.sidebar-pane leaflet > shadow.left, +.sidebar-pane navigation-view > shadow.left, +.sidebar-pane overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to right, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane flap > shadow.right, +.sidebar-pane leaflet > shadow.right, +.sidebar-pane navigation-view > shadow.right, +.sidebar-pane overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to left, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane flap > shadow.up, +.sidebar-pane leaflet > shadow.up, +.sidebar-pane navigation-view > shadow.up, +.sidebar-pane overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to bottom, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane flap > shadow.down, +.sidebar-pane leaflet > shadow.down, +.sidebar-pane navigation-view > shadow.down, +.sidebar-pane overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to top, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane banner > revealer > widget { + background-color: mix(@accent_bg_color,@sidebar_bg_color,0.7); + color: @sidebar_fg_color; +} + +.sidebar-pane banner > revealer > widget:backdrop { + background-color: mix(@accent_bg_color,@sidebar_backdrop_color,0.85); +} + +.sidebar-pane:dir(ltr), .sidebar-pane:dir(ltr) banner > revealer > widget, .sidebar-pane.end:dir(rtl), .sidebar-pane.end:dir(rtl) banner > revealer > widget { + box-shadow: inset -1px 0 alpha(currentColor,0.1); +} + +.sidebar-pane:dir(rtl), .sidebar-pane:dir(rtl) banner > revealer > widget, .sidebar-pane.end:dir(ltr), .sidebar-pane.end:dir(ltr) banner > revealer > widget { + box-shadow: inset 1px 0 alpha(currentColor,0.1); +} + +.sidebar-pane toolbarview.undershoot-top scrolledwindow > undershoot.top, .content-pane toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: inset 0 1px alpha(currentColor,0.12); + background: linear-gradient(to bottom, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom, .content-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + background: linear-gradient(to top, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-top > undershoot.top, .content-pane scrolledwindow.undershoot-top > undershoot.top { + box-shadow: inset 0 1px alpha(currentColor,0.12); + background: linear-gradient(to bottom, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-bottom > undershoot.bottom, .content-pane scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + background: linear-gradient(to top, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left, .content-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: inset 1px 0 alpha(currentColor,0.12); + background: linear-gradient(to right, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right, .content-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: inset -1px 0 alpha(currentColor,0.12); + background: linear-gradient(to left, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right, .content-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: inset -1px 0 alpha(currentColor,0.12); + background: linear-gradient(to left, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left, .content-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: inset 1px 0 alpha(currentColor,0.12); + background: linear-gradient(to right, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +/* Middle pane in three-pane setups */ +.content-pane .sidebar-pane, +.sidebar-pane .content-pane { + background-color: @secondary_sidebar_bg_color; + color: @secondary_sidebar_fg_color; +} + +.content-pane .sidebar-pane:backdrop, +.sidebar-pane .content-pane:backdrop { + background-color: @secondary_sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +.content-pane .sidebar-pane toolbarview.undershoot-top scrolledwindow > undershoot.top, +.sidebar-pane .content-pane toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom, +.sidebar-pane .content-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-top > undershoot.top, +.sidebar-pane .content-pane scrolledwindow.undershoot-top > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-bottom > undershoot.bottom, +.sidebar-pane .content-pane scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left, +.sidebar-pane .content-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right, +.sidebar-pane .content-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right, +.sidebar-pane .content-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left, +.sidebar-pane .content-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane flap > dimming, +.content-pane .sidebar-pane leaflet > dimming, +.content-pane .sidebar-pane navigation-view > dimming, +.content-pane .sidebar-pane overlay-split-view > dimming, +.sidebar-pane .content-pane flap > dimming, +.sidebar-pane .content-pane leaflet > dimming, +.sidebar-pane .content-pane navigation-view > dimming, +.sidebar-pane .content-pane overlay-split-view > dimming { + background: @secondary_sidebar_shade_color; +} + +.content-pane .sidebar-pane flap > shadow, +.content-pane .sidebar-pane leaflet > shadow, +.content-pane .sidebar-pane navigation-view > shadow, +.content-pane .sidebar-pane overlay-split-view > shadow, +.sidebar-pane .content-pane flap > shadow, +.sidebar-pane .content-pane leaflet > shadow, +.sidebar-pane .content-pane navigation-view > shadow, +.sidebar-pane .content-pane overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +.content-pane .sidebar-pane flap > shadow.left, +.content-pane .sidebar-pane leaflet > shadow.left, +.content-pane .sidebar-pane navigation-view > shadow.left, +.content-pane .sidebar-pane overlay-split-view > shadow.left, +.sidebar-pane .content-pane flap > shadow.left, +.sidebar-pane .content-pane leaflet > shadow.left, +.sidebar-pane .content-pane navigation-view > shadow.left, +.sidebar-pane .content-pane overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane flap > shadow.right, +.content-pane .sidebar-pane leaflet > shadow.right, +.content-pane .sidebar-pane navigation-view > shadow.right, +.content-pane .sidebar-pane overlay-split-view > shadow.right, +.sidebar-pane .content-pane flap > shadow.right, +.sidebar-pane .content-pane leaflet > shadow.right, +.sidebar-pane .content-pane navigation-view > shadow.right, +.sidebar-pane .content-pane overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane flap > shadow.up, +.content-pane .sidebar-pane leaflet > shadow.up, +.content-pane .sidebar-pane navigation-view > shadow.up, +.content-pane .sidebar-pane overlay-split-view > shadow.up, +.sidebar-pane .content-pane flap > shadow.up, +.sidebar-pane .content-pane leaflet > shadow.up, +.sidebar-pane .content-pane navigation-view > shadow.up, +.sidebar-pane .content-pane overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane flap > shadow.down, +.content-pane .sidebar-pane leaflet > shadow.down, +.content-pane .sidebar-pane navigation-view > shadow.down, +.content-pane .sidebar-pane overlay-split-view > shadow.down, +.sidebar-pane .content-pane flap > shadow.down, +.sidebar-pane .content-pane leaflet > shadow.down, +.sidebar-pane .content-pane navigation-view > shadow.down, +.sidebar-pane .content-pane overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane banner > revealer > widget, +.sidebar-pane .content-pane banner > revealer > widget { + background-color: mix(@accent_bg_color,@secondary_sidebar_bg_color,0.7); + color: @secondary_sidebar_fg_color; +} + +.content-pane .sidebar-pane banner > revealer > widget:backdrop, +.sidebar-pane .content-pane banner > revealer > widget:backdrop { + background-color: mix(@accent_bg_color,@secondary_sidebar_backdrop_color,0.85); +} + +.content-pane .sidebar-pane:dir(ltr), .content-pane .sidebar-pane:dir(ltr) banner > revealer > widget, .content-pane .sidebar-pane.end:dir(rtl), .content-pane .sidebar-pane.end:dir(rtl) banner > revealer > widget, +.sidebar-pane .content-pane:dir(ltr), +.sidebar-pane .content-pane:dir(ltr) banner > revealer > widget, +.sidebar-pane .content-pane.end:dir(rtl), +.sidebar-pane .content-pane.end:dir(rtl) banner > revealer > widget { + box-shadow: inset -1px 0 alpha(currentColor,0.1); +} + +.content-pane .sidebar-pane:dir(rtl), .content-pane .sidebar-pane:dir(rtl) banner > revealer > widget, .content-pane .sidebar-pane.end:dir(ltr), .content-pane .sidebar-pane.end:dir(ltr) banner > revealer > widget, +.sidebar-pane .content-pane:dir(rtl), +.sidebar-pane .content-pane:dir(rtl) banner > revealer > widget, +.sidebar-pane .content-pane.end:dir(ltr), +.sidebar-pane .content-pane.end:dir(ltr) banner > revealer > widget { + box-shadow: inset 1px 0 alpha(currentColor,0.1); +} + +.sidebar-pane .sidebar-pane { + background-color: transparent; + color: inherit; +} + +stacksidebar row { + padding: 10px 4px; +} + +stacksidebar row > label { + padding-left: 6px; + padding-right: 6px; +} + +stacksidebar row.needs-attention > label { + background-size: 6px 6px, 0 0; +} + +/********************** + * Navigation Sidebar * + **********************/ +.navigation-sidebar { + padding: 6px 0; +} + +.navigation-sidebar, .navigation-sidebar.view, window.print .navigation-sidebar.dialog-action-box, .navigation-sidebar.view:disabled { + background-color: transparent; + color: inherit; +} + +.navigation-sidebar.background, .navigation-sidebar.background:disabled { + background-color: @window_bg_color; + color: @window_fg_color; +} + +.navigation-sidebar row.activatable:hover { + background-color: alpha(currentColor,0.07); +} + +.navigation-sidebar row.activatable:active { + background-color: alpha(currentColor,0.16); +} + +.navigation-sidebar row.activatable.has-open-popup { + background-color: alpha(currentColor,0.07); +} + +.navigation-sidebar row.activatable:selected:hover { + background-color: alpha(currentColor,0.13); +} + +.navigation-sidebar row.activatable:selected:active { + background-color: alpha(currentColor,0.19); +} + +.navigation-sidebar row.activatable:selected.has-open-popup { + background-color: alpha(currentColor,0.13); +} + +.navigation-sidebar row:selected { + background-color: alpha(currentColor,0.1); +} + +.navigation-sidebar > separator { + margin: 6px; + background: none; +} + +.navigation-sidebar > row { + min-height: 36px; + padding: 0 8px; + border-radius: 6px; + margin: 0 6px 3px; +} + +@keyframes spin { + to { + transform: rotate(1turn); + } +} + +spinner { + background: none; + opacity: 0; + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); +} + +spinner:checked { + opacity: 1; + animation: spin 1s linear infinite; +} + +spinner:checked:disabled { + opacity: 0.45; +} + +spinbutton { + padding: 0; + border-spacing: 0; + /* :not here just to bump specificity above that of the list button styling */ +} + +spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + margin: 0; + border-radius: 0; + box-shadow: none; + border-style: solid; + border-color: alpha(currentColor,0.1); +} + +spinbutton:not(.vertical) { + /* :not here just to bump specificity above that of the list button styling */ +} + +spinbutton:not(.vertical) > text { + min-width: 28px; + padding: 6px; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + min-height: 16px; + min-width: 22px; + padding-bottom: 0; + padding-top: 0; + border-left-width: 1px; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl), +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl) { + border-left-width: 0; + border-right-width: 1px; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child { + border-radius: 0 6px 6px 0; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child { + border-radius: 6px 0 0 6px; +} + +spinbutton.vertical { + /* :not here just to bump specificity above that of the list button styling */ +} + +spinbutton.vertical > text { + min-height: 30px; + min-width: 30px; +} + +spinbutton.vertical > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +spinbutton.vertical > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child { + border-top-width: 1px; + border-radius: 0 0 6px 6px; +} + +spinbutton.vertical > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):first-child, +spinbutton.vertical > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):first-child { + border-bottom-width: 1px; + border-radius: 6px 6px 0 0; +} + +switch { + border-radius: 9999px; + padding: 3px; + background-color: alpha(currentColor,0.15); + transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); +} + +switch:hover { + background-color: alpha(currentColor,0.2); +} + +switch:active { + background-color: alpha(currentColor,0.25); +} + +switch { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +switch:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 1px; +} + +switch:disabled { + filter: opacity(0.45); +} + +switch > slider { + min-width: 18px; + min-height: 18px; + border-radius: 50%; + background-color: white; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15), 0 0 0 0 transparent; + transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-color 75ms cubic-bezier(0, 0, 0.2, 1); +} + +switch:hover > slider, switch:active > slider { + box-shadow: 0 2px 3px transparent, 0 0 0 6px alpha(currentColor,0.1); +} + +switch:checked { + color: @accent_fg_color; + background-color: @accent_bg_color; +} + +switch:checked:hover { + background-image: image(alpha(currentColor,0.1)); +} + +switch:checked:active { + background-image: image(rgba(0, 0, 0, 0.2)); +} + +switch:checked > slider { + color: @window_fg_color; + background-color: white; +} + +.osd switch:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +.osd switch:checked { + background-color: rgba(255, 255, 255, 0.6); + color: rgba(0, 0, 0, 0.75); +} + +tabbar .box { + background-color: @headerbar_bg_color; + color: @headerbar_fg_color; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); + padding: 1px; + padding-top: 0; +} + +tabbar .box:backdrop { + background-color: @headerbar_backdrop_color; + transition: background-color 200ms ease-out; +} + +tabbar .box:backdrop > scrolledwindow, +tabbar .box:backdrop > .start-action, +tabbar .box:backdrop > .end-action { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +tabbar tabbox { + padding-bottom: 6px; + padding-top: 6px; + min-height: 34px; +} + +tabbar tabbox > tabboxchild { + border-radius: 6px; +} + +tabbar tabbox > tabboxchild { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +tabbar tabbox > tabboxchild:focus-within:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +tabbar tabbox > separator { + margin-top: 5px; + margin-bottom: 5px; + transition: opacity 150ms ease-in-out; +} + +tabbar tabbox > separator.hidden { + opacity: 0; +} + +tabbar tabbox > revealer > indicator { + min-width: 2px; + border-radius: 2px; + margin: 3px 6px; + background: alpha(@accent_color,0.5); +} + +tabbar tab { + transition: background 150ms ease-in-out; +} + +tabbar tab:selected { + background-color: alpha(currentColor,0.1); +} + +tabbar tab:selected:hover { + background-color: alpha(currentColor,0.13); +} + +tabbar tab:selected:active { + background-color: alpha(currentColor,0.19); +} + +tabbar tab:hover { + background-color: alpha(currentColor,0.07); +} + +tabbar tab:active { + background-color: alpha(currentColor,0.16); +} + +tabbar tabbox.single-tab tab, tabbar tabbox.single-tab tab:hover, tabbar tabbox.single-tab tab:active { + background: none; +} + +tabbar .start-action, +tabbar .end-action { + padding: 6px; +} + +tabbar .start-action:dir(ltr), +tabbar .end-action:dir(rtl) { + padding-right: 0; +} + +tabbar .start-action:dir(rtl), +tabbar .end-action:dir(ltr) { + padding-left: 0; +} + +toolbarview > .top-bar tabbar .box, +toolbarview > .bottom-bar tabbar .box, tabbar.inline .box { + background-color: transparent; + color: inherit; + box-shadow: none; + padding-bottom: 0; +} + +toolbarview > .top-bar tabbar .box:backdrop, +toolbarview > .bottom-bar tabbar .box:backdrop, tabbar.inline .box:backdrop { + background-color: transparent; + transition: none; +} + +toolbarview > .top-bar tabbar .box:backdrop > scrolledwindow, +toolbarview > .bottom-bar tabbar .box:backdrop > scrolledwindow, tabbar.inline .box:backdrop > scrolledwindow, +toolbarview > .top-bar tabbar .box:backdrop > .start-action, +toolbarview > .bottom-bar tabbar .box:backdrop > .start-action, +tabbar.inline .box:backdrop > .start-action, +toolbarview > .top-bar tabbar .box:backdrop > .end-action, +toolbarview > .bottom-bar tabbar .box:backdrop > .end-action, +tabbar.inline .box:backdrop > .end-action { + filter: none; + transition: none; +} + +toolbarview > .top-bar .collapse-spacing tabbar tabbox, +toolbarview > .bottom-bar .collapse-spacing tabbar tabbox, +toolbarview > .top-bar .collapse-spacing tabbar .start-action, +toolbarview > .bottom-bar .collapse-spacing tabbar .start-action, +toolbarview > .top-bar .collapse-spacing tabbar .end-action, +toolbarview > .bottom-bar .collapse-spacing tabbar .end-action { + padding-top: 0; + padding-bottom: 6px; +} + +dnd tab { + background-color: @headerbar_bg_color; + background-image: image(alpha(currentColor,0.19)); + color: @headerbar_fg_color; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03); + margin: 25px; +} + +tabbar tab, +dnd tab { + min-height: 26px; + padding: 4px; + border-radius: 6px; +} + +tabbar tab button.image-button, +dnd tab button.image-button { + padding: 0; + margin: 0; + min-width: 24px; + min-height: 24px; + border-radius: 9999px; +} + +tabbar tab indicator, +dnd tab indicator { + min-height: 2px; + border-radius: 2px; + background: alpha(@accent_color,0.5); + transform: translateY(4px); +} + +tabgrid > tabgridchild .card { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +tabgrid > tabgridchild:focus:focus-visible .card { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 0; +} + +tabthumbnail { + border-radius: 16px; + transition: box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +tabthumbnail > box { + margin: 6px; +} + +tabthumbnail:drop(active) { + box-shadow: inset 0 0 0 2px alpha(@accent_bg_color,0.4); + background-color: alpha(@accent_bg_color,0.1); +} + +tabthumbnail .needs-attention:dir(ltr) { + transform: translate(8px, -8px); +} + +tabthumbnail .needs-attention:dir(rtl) { + transform: translate(-8px, -8px); +} + +tabthumbnail .needs-attention > widget { + background: @accent_color; + min-width: 12px; + min-height: 12px; + border-radius: 8px; + margin: 3px; + box-shadow: 0 1px 2px alpha(@accent_color,0.4); +} + +tabthumbnail .card { + background: none; + color: inherit; +} + +tabthumbnail .card picture { + outline: 1px solid rgba(255, 255, 255, 0.08); + outline-offset: -1px; + border-radius: 12px; +} + +tabthumbnail.pinned .card { + background-color: @thumbnail_bg_color; + color: @thumbnail_fg_color; +} + +tabthumbnail .icon-title-box { + border-spacing: 6px; +} + +tabthumbnail .tab-unpin-icon { + margin: 6px; + min-width: 24px; + min-height: 24px; +} + +tabthumbnail button.circular { + margin: 6px; + background-color: alpha(@thumbnail_bg_color,0.75); + min-width: 24px; + min-height: 24px; +} + +tabthumbnail button.circular:hover { + background-color: alpha(mix(@thumbnail_bg_color,currentColor,0.1),0.75); +} + +tabthumbnail button.circular:active { + background-color: alpha(mix(@thumbnail_bg_color,currentColor,0.2),0.75); +} + +taboverview > .overview .new-tab-button { + margin: 18px; +} + +tabview:drop(active), +tabbox:drop(active), +tabgrid:drop(active) { + box-shadow: none; +} + +cursor-handle { + all: unset; + padding: 24px 20px; +} + +cursor-handle > contents { + min-width: 20px; + min-height: 20px; + border-radius: 50%; + background-color: @accent_bg_color; +} + +cursor-handle.top > contents { + border-top-right-radius: 0; +} + +cursor-handle.bottom > contents { + border-top-left-radius: 0; + transform: translateX(1px); +} + +cursor-handle.insertion-cursor > contents { + border-top-left-radius: 0; + transform: translateX(1px) translateY(4px) rotate(45deg); +} + +magnifier { + background-color: @view_bg_color; +} + +actionbar > revealer > box.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible, searchbar > revealer > box.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible, .osd.toolbar button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible, headerbar.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +actionbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + color: inherit; + background-color: transparent; +} + +actionbar > revealer > box switch, searchbar > revealer > box switch, .toolbar switch, headerbar switch { + margin-top: 4px; + margin-bottom: 4px; +} + +.toolbar { + padding: 6px; + border-spacing: 6px; +} + +.toolbar.osd { + padding: 12px; + border-radius: 12px; +} + +toolbarview > .top-bar .collapse-spacing .toolbar, +toolbarview > .bottom-bar .collapse-spacing .toolbar { + padding-top: 6px; + padding-bottom: 6px; +} + +/**************** + * GtkSearchBar * + ****************/ +searchbar > revealer > box { + padding: 6px 6px 7px 6px; + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +searchbar > revealer > box:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +searchbar > revealer > box:backdrop > * { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +searchbar > revealer > box .close { + min-width: 18px; + min-height: 18px; + padding: 4px; + border-radius: 50%; +} + +searchbar > revealer > box .close:dir(ltr) { + margin-left: 10px; + margin-right: 4px; +} + +searchbar > revealer > box .close:dir(rtl) { + margin-left: 4px; + margin-right: 10px; +} + +toolbarview > .top-bar searchbar > revealer > box, +toolbarview > .bottom-bar searchbar > revealer > box, searchbar.inline > revealer > box, window.appchooser searchbar > revealer > box, window.shortcuts searchbar > revealer > box { + background-color: transparent; + color: inherit; + box-shadow: none; + padding-bottom: 6px; +} + +toolbarview > .top-bar searchbar > revealer > box:backdrop, +toolbarview > .bottom-bar searchbar > revealer > box:backdrop, searchbar.inline > revealer > box:backdrop { + background-color: transparent; + transition: none; +} + +toolbarview > .top-bar searchbar > revealer > box:backdrop > *, +toolbarview > .bottom-bar searchbar > revealer > box:backdrop > *, searchbar.inline > revealer > box:backdrop > * { + filter: none; + transition: none; +} + +toolbarview > .top-bar .collapse-spacing searchbar > revealer > box, +toolbarview > .bottom-bar .collapse-spacing searchbar > revealer > box, window.appchooser.csd searchbar > revealer > box, window.shortcuts searchbar > revealer > box { + padding-top: 6px; + padding-bottom: 6px; +} + +/**************** + * GtkActionBar * + ****************/ +actionbar > revealer > box { + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; + box-shadow: inset 0 1px alpha(@headerbar_border_color,0.12); + padding: 7px 6px 6px 6px; +} + +actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { + border-spacing: 6px; +} + +actionbar > revealer > box:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +actionbar > revealer > box:backdrop > * { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +toolbarview > .top-bar actionbar > revealer > box, +toolbarview > .bottom-bar actionbar > revealer > box { + background-color: transparent; + color: inherit; + box-shadow: none; + padding-top: 6px; +} + +toolbarview > .top-bar actionbar > revealer > box:backdrop, +toolbarview > .bottom-bar actionbar > revealer > box:backdrop { + background-color: transparent; + transition: none; +} + +toolbarview > .top-bar actionbar > revealer > box:backdrop > *, +toolbarview > .bottom-bar actionbar > revealer > box:backdrop > * { + filter: none; + transition: none; +} + +toolbarview > .top-bar .collapse-spacing actionbar > revealer > box, +toolbarview > .bottom-bar .collapse-spacing actionbar > revealer > box { + padding-top: 6px; + padding-bottom: 6px; +} + +/************* + * AdwBanner * + *************/ +banner > revealer > widget { + /* There are 2 more instances in _sidebars.css, keep in sync with that */ + background-color: mix(@accent_bg_color,@window_bg_color,0.7); + color: @window_fg_color; + padding: 6px; +} + +banner > revealer > widget:backdrop { + background-color: mix(@accent_bg_color,@window_bg_color,0.85); + transition: background-color 200ms ease-out; +} + +banner > revealer > widget:backdrop > label, banner > revealer > widget:backdrop > button { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +/****************** + * AdwToolbarView * + ******************/ +toolbarview > .top-bar .collapse-spacing, +toolbarview > .bottom-bar .collapse-spacing { + padding-top: 0; + padding-bottom: 0; +} + +toolbarview > .top-bar .collapse-spacing headerbar, +toolbarview > .bottom-bar .collapse-spacing headerbar { + padding-top: 3px; + padding-bottom: 3px; +} + +toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +window.devel toolbarview > .top-bar { + background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")), image(transparent)); + background-repeat: repeat-x; +} + +window.devel dialog toolbarview > .top-bar { + background-image: unset; + background-repeat: unset; +} + +toolbarview > .top-bar, +toolbarview > .bottom-bar { + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; +} + +toolbarview > .top-bar:backdrop, +toolbarview > .bottom-bar:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +toolbarview > .top-bar:backdrop > windowhandle, +toolbarview > .bottom-bar:backdrop > windowhandle { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +toolbarview > .top-bar { + box-shadow: 0 1px alpha(currentColor,0.12); +} + +toolbarview > .top-bar.border { + box-shadow: 0 1px alpha(currentColor,0.12); +} + +toolbarview > .bottom-bar { + box-shadow: 0 -1px alpha(currentColor,0.12); +} + +toolbarview > .bottom-bar.border { + box-shadow: 0 -1px alpha(currentColor,0.12); +} + +.sidebar-pane toolbarview > .top-bar, +.sidebar-pane toolbarview > .bottom-bar, .content-pane toolbarview > .top-bar, +.content-pane toolbarview > .bottom-bar, .about toolbarview > .top-bar, +.about toolbarview > .bottom-bar { + box-shadow: none; +} + +.sidebar-pane toolbarview > .top-bar, .sidebar-pane toolbarview > .top-bar:backdrop, +.sidebar-pane toolbarview > .bottom-bar, +.sidebar-pane toolbarview > .bottom-bar:backdrop, .content-pane toolbarview > .top-bar, .content-pane toolbarview > .top-bar:backdrop, +.content-pane toolbarview > .bottom-bar, +.content-pane toolbarview > .bottom-bar:backdrop, .about toolbarview > .top-bar, .about toolbarview > .top-bar:backdrop, +.about toolbarview > .bottom-bar, +.about toolbarview > .bottom-bar:backdrop { + background-color: transparent; +} + +tooltip { + padding: 6px 10px; + border-radius: 9px; + box-shadow: none; +} + +tooltip.background { + background-color: rgba(0, 0, 0, 0.8); + background-clip: padding-box; + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; +} + +tooltip > box { + border-spacing: 6px; +} + +.view, window.print .dialog-action-box, +textview > text, +dialog-host > dialog.view sheet, +window.print dialog-host > dialog.dialog-action-box sheet, +iconview { + color: @view_fg_color; + background-color: @view_bg_color; +} + +.view:disabled, window.print .dialog-action-box:disabled, +textview > text:disabled, +dialog-host > dialog.view sheet:disabled, +window.print dialog-host > dialog.dialog-action-box sheet:disabled, +iconview:disabled { + color: alpha(currentColor,0.5); + background-color: mix(@window_bg_color,@view_bg_color,0.4); +} + +.view:selected:focus, .view:selected, window.print .dialog-action-box:selected, +textview > text:selected, +dialog-host > dialog.view sheet:selected, +window.print dialog-host > dialog.dialog-action-box sheet:selected, +iconview:selected { + background-color: alpha(@accent_bg_color,0.25); + border-radius: 6px; +} + +textview { + caret-color: currentColor; +} + +textview > text { + background-color: transparent; +} + +textview > border { + background-color: mix(@window_bg_color,@view_bg_color,0.5); +} + +textview:drop(active) { + caret-color: @accent_bg_color; +} + +rubberband { + border: 1px solid @accent_color; + background-color: alpha(@accent_color,0.2); +} + +flowbox > flowboxchild, +gridview > child { + padding: 3px; + border-radius: 6px; +} + +flowbox > flowboxchild, +gridview > child { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +flowbox > flowboxchild:focus:focus-visible, +gridview > child:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +flowbox > flowboxchild:selected, +gridview > child:selected { + background-color: alpha(@accent_bg_color,0.25); +} + +gridview > child.activatable:hover { + background-color: alpha(currentColor,0.04); +} + +gridview > child.activatable:active { + background-color: alpha(currentColor,0.08); +} + +gridview > child.activatable:selected:hover { + background-color: alpha(@accent_bg_color,0.32); +} + +gridview > child.activatable:selected:active { + background-color: alpha(@accent_bg_color,0.39); +} + +viewswitcher { + border-spacing: 3px; +} + +viewswitcher.narrow { + margin-top: -3px; + margin-bottom: -3px; + min-height: 6px; +} + +viewswitcher button.toggle { + padding: 0; +} + +viewswitcher button.toggle > stack > box.narrow { + font-size: 0.75rem; + padding-top: 4px; +} + +viewswitcher button.toggle > stack > box.narrow > label { + min-height: 18px; + padding-left: 3px; + padding-right: 3px; + padding-bottom: 2px; +} + +viewswitcher button.toggle > stack > box.wide { + padding: 2px 12px; + border-spacing: 6px; +} + +/********************** + * AdwViewSwitcherBar * + **********************/ +viewswitcherbar actionbar > revealer > box { + padding-left: 0; + padding-right: 0; + padding-top: 7px; +} + +toolbarview > .top-bar .collapse-spacing viewswitcherbar actionbar > revealer > box, +toolbarview > .bottom-bar .collapse-spacing viewswitcherbar actionbar > revealer > box { + padding-top: 6px; +} + +/************************ + * AdwViewSwitcherTitle * + ************************/ +viewswitchertitle { + margin-top: -6px; + margin-bottom: -6px; +} + +viewswitchertitle viewswitcher { + margin-left: 12px; + margin-right: 12px; +} + +viewswitchertitle viewswitcher.narrow { + margin-top: 3px; + margin-bottom: 3px; +} + +viewswitchertitle viewswitcher.wide { + margin-top: 6px; + margin-bottom: 6px; +} + +viewswitchertitle windowtitle { + margin-top: 0; + margin-bottom: 0; +} + +/******************* + * AdwIndicatorBin * + *******************/ +indicatorbin > indicator, indicatorbin > mask { + min-width: 6px; + min-height: 6px; + border-radius: 100px; +} + +indicatorbin > indicator { + margin: 1px; + background: alpha(currentColor,0.4); +} + +indicatorbin > mask { + padding: 1px; + background: black; +} + +indicatorbin.needs-attention > indicator { + background: @accent_color; +} + +indicatorbin.badge > indicator, +indicatorbin.badge > mask { + min-height: 13px; +} + +indicatorbin.badge > indicator > label { + font-size: 0.6rem; + font-weight: bold; + padding-left: 4px; + padding-right: 4px; + color: white; +} + +indicatorbin.badge.needs-attention > indicator { + background: @accent_bg_color; +} + +indicatorbin.badge.needs-attention > indicator > label { + color: @accent_fg_color; +} + +window { + border: none; +} + +window.csd { + margin: 0; + border-radius: 12px; + outline-offset: -1px; + outline: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 15px 16px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 36px transparent, 0 0 0 1px @headerbar_darker_shade_color; +} + +window.csd:backdrop { + transition: box-shadow 200ms ease-out; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 3px 3px 0 rgba(0, 0, 0, 0.18), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 0 36px transparent, 0 0 0 1px @headerbar_darker_shade_color; +} + +window.csd.tiled, window.csd.tiled-top, window.csd.tiled-left, window.csd.tiled-right, window.csd.tiled-bottom { + border-radius: 0; + outline: none; +} + +window.csd.maximized, window.csd.fullscreen { + border-radius: 0; + outline: none; + box-shadow: none; + transition: none; +} + +window.solid-csd { + margin: 0; + padding: 2px; + border-radius: 0; + background-color: @headerbar_bg_color; + border: 1px solid @headerbar_darker_shade_color; +} + +window.ssd { + box-shadow: 0 0 0 1px @headerbar_darker_shade_color; +} + +.nautilus-window .floating-bar { + min-height: 32px; + padding: 0; + margin: 6px; + border-style: none; + border-radius: 6px; + background-color: @accent_color; + color: @accent_fg_color; + box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.05), 0 2px 3px -1px rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.05); +} + +.nautilus-window .floating-bar button { + margin: 4px; + color: @accent_fg_color; +} + +#NautilusQueryEditor > menubutton { + margin: 6px 0; +} + +#NautilusQueryEditor > menubutton > button.image-button { + min-width: 24px; + min-height: 24px; + padding: 0px; +} + +#NautilusPathBar { + background-color: alpha(currentColor,0.05); + border-radius: 6px; + padding: 0; +} + +#NautilusPathButton { + margin: 0; + border-radius: 6px; +} + +window.org-gnome-TextEditor popover.open-popover > contents { + padding: 0; +} + +popover.background.global-search > arrow, popover.background.global-search > contents { + padding: 0; +} + +popover.background.pages-popover listview > row { + padding: 6px; +} + +popover.background.pages-popover listview > row button { + margin: 0; +} + +popover.background.pages-popover listview > row check { + margin: 4px 2px; + -gtk-icon-size: 12px; +} + +panelresizer .top-bar { + box-shadow: inset 0 -1px alpha(currentColor,0.12); +} + +.frameheader.header { + min-height: 48px; + padding: 0; + border: none; + border-bottom: 1px solid alpha(currentColor,0.12); + background-color: @headerbar_backdrop_color; +} + +.frameheader.header:backdrop { + background-color: @headerbar_bg_color; +} + +.frameheader.header tabbar.inline tabbox > tabboxchild { + margin: 0; +} + +panelframeswitcher.frameheader.header { + padding: 0 6px; +} + +panelframeswitcher > button.toggle.image-button { + border: none; + margin: 6px 0; +} + +panelstatusbar { + box-shadow: inset 0 1px alpha(currentColor,0.12); +} + +panelstatusbar > menubutton > button, +panelstatusbar > paneltogglebutton button { + border-radius: 0; +} + +panelwidget entry.statusbar { + background-color: @window_bg_color; + border-radius: 0; + outline: none; + box-shadow: none; + border-top: 1px solid alpha(currentColor,0.12); +} + +panelwidget entry.statusbar:focus-within { + outline: none; +} + +.IdeTweaksWindow .boxed-list, .IdeTweaksWindow list.content, +.org-gnome-Builder .boxed-list, +.org-gnome-Builder list.content { + box-shadow: inset 0 0 0 1px alpha(currentColor,0.08); +} + +.style-variant { + padding: 0 12px; +} + +.style-variant button.toggle { + padding: 0; +} + +.style-variant button.toggle, .style-variant button.toggle:hover, .style-variant button.toggle:focus, .style-variant button.toggle:active, .style-variant button.toggle:checked { + background: none; + outline: none; + border: none; + box-shadow: none; +} + +.style-variant button.toggle > stylevariantpreview > .wallpaper { + border-radius: 6px; + outline-color: transparent; + outline-width: 3px; + outline-offset: 3px; + outline-style: solid; + box-shadow: none; +} + +.style-variant button.toggle:hover > stylevariantpreview > .wallpaper { + outline-color: alpha(currentColor,0.05); +} + +.style-variant button.toggle:active > stylevariantpreview > .wallpaper { + outline-color: alpha(currentColor,0.15); +} + +.style-variant button.toggle:checked > stylevariantpreview > .wallpaper { + outline-color: @accent_color; +} + +playlistview scrollbar.overlay-indicator.dragging, playlistview scrollbar.overlay-indicator.hovering { + background-color: transparent; +} + +playlistview queuerow picture.cover, +playlistview queuerow image.card { + border: none; +} + +themeselector, +panelthemeselector { + margin: 9px; +} + +themeselector checkbutton, +panelthemeselector checkbutton { + padding: 0; + min-height: 44px; + min-width: 44px; + padding: 1px; + background-clip: content-box; + border-radius: 9999px; + box-shadow: inset 0 0 0 1px alpha(currentColor,0.12); +} + +themeselector checkbutton.follow:checked, themeselector checkbutton.light:checked, themeselector checkbutton.dark:checked, +panelthemeselector checkbutton.follow:checked, +panelthemeselector checkbutton.light:checked, +panelthemeselector checkbutton.dark:checked { + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +themeselector checkbutton.follow, +panelthemeselector checkbutton.follow { + background-image: linear-gradient(to bottom right, #ffffff 50%, #202020 50%); +} + +themeselector checkbutton.light, +panelthemeselector checkbutton.light { + background-color: #ffffff; +} + +themeselector checkbutton.dark, +panelthemeselector checkbutton.dark { + background-color: #202020; +} + +themeselector checkbutton.theme-selector radio, +panelthemeselector checkbutton.theme-selector radio { + -gtk-icon-source: none; + border: none; + box-shadow: none; + min-height: 20px; + min-width: 20px; + padding: 0; +} + +themeselector checkbutton.theme-selector radio, themeselector checkbutton.theme-selector radio:hover, themeselector checkbutton.theme-selector radio:active, themeselector checkbutton.theme-selector radio:checked, +panelthemeselector checkbutton.theme-selector radio, +panelthemeselector checkbutton.theme-selector radio:hover, +panelthemeselector checkbutton.theme-selector radio:active, +panelthemeselector checkbutton.theme-selector radio:checked { + background-color: transparent; + background-image: none; +} + +themeselector checkbutton.theme-selector radio:checked, +panelthemeselector checkbutton.theme-selector radio:checked { + -gtk-icon-size: 20px; + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/checkbox-checked-symbolic@2.svg"))); +} + +themeselector checkbutton.theme-selector radio:checked, themeselector checkbutton.theme-selector radio:checked:hover, themeselector checkbutton.theme-selector radio:checked:active, +panelthemeselector checkbutton.theme-selector radio:checked, +panelthemeselector checkbutton.theme-selector radio:checked:hover, +panelthemeselector checkbutton.theme-selector radio:checked:active { + color: @accent_fg_color; + background-color: @accent_bg_color; + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.1); +} + +popover.menu themeswitcher { + padding: 6px; +} + +popover.menu themeswitcher .check { + min-height: 20px; + min-width: 20px; + background: none; + padding: 0; + margin: 0; + border-radius: 9999px; + color: @accent_fg_color; + background-color: @accent_bg_color; +} + +popover.menu themeswitcher .check, popover.menu themeswitcher .check:hover, popover.menu themeswitcher .check:active { + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.1); +} + +popover.menu themeswitcher checkbutton { + padding: 0; + min-height: 44px; + min-width: 44px; + padding: 1px; + border: none; + background-clip: content-box; + border-radius: 9999px; + box-shadow: inset 0 0 0 1px alpha(currentColor,0.12); +} + +popover.menu themeswitcher checkbutton:checked { + box-shadow: inset 0 0 0 2px @accent_color; +} + +popover.menu themeswitcher checkbutton radio { + padding: 0; + border: none; +} + +popover.menu themeswitcher checkbutton radio, popover.menu themeswitcher checkbutton radio:hover, popover.menu themeswitcher checkbutton radio:active, popover.menu themeswitcher checkbutton radio:checked, popover.menu themeswitcher checkbutton radio:indeterminate { + background-color: transparent; + background-image: none; + box-shadow: none; + color: transparent; +} + +popover.menu themeswitcher checkbutton radio:checked, popover.menu themeswitcher checkbutton radio:indeterminate { + -gtk-icon-source: none; + -gtk-icon-size: 0; +} + +popover.menu themeswitcher checkbutton.system { + background: linear-gradient(-45deg, #1e1e1e 50%, white 50%); +} + +popover.menu themeswitcher checkbutton.light { + color: alpha(black,0.8); + background-color: white; +} + +popover.menu themeswitcher checkbutton.dark { + color: white; + background-color: #1e1e1e; +} + +window#desktopwindow.background { + background: none; +} + +/* GTK NAMED COLORS + ---------------- + use responsibly! */ +@define-color destructive_bg_color #E53935; +@define-color destructive_fg_color #FFFFFF; +@define-color destructive_color #E53935; +@define-color success_bg_color #4CAF50; +@define-color success_fg_color #FFFFFF; +@define-color success_color #4CAF50; +@define-color warning_bg_color #FBC02D; +@define-color warning_fg_color rgba(0, 0, 0, 0.87); +@define-color warning_color #FBC02D; +@define-color error_bg_color #E53935; +@define-color error_fg_color #FFFFFF; +@define-color error_color #E53935; +/* Public colors from Default */ +@define-color theme_bg_color @window_bg_color; +@define-color theme_fg_color @window_fg_color; +@define-color theme_base_color @view_bg_color; +@define-color theme_text_color @view_fg_color; +@define-color theme_selected_bg_color @accent_bg_color; +@define-color theme_selected_fg_color @accent_fg_color; +@define-color insensitive_bg_color mix(@window_bg_color,@view_bg_color,0.4); +@define-color insensitive_fg_color alpha(@window_fg_color,0.5); +@define-color insensitive_base_color @view_bg_color; +@define-color borders alpha(currentColor,0.12); +@define-color theme_unfocused_bg_color @window_bg_color; +@define-color theme_unfocused_fg_color @window_fg_color; +@define-color theme_unfocused_base_color @view_bg_color; +@define-color theme_unfocused_text_color @view_fg_color; +@define-color theme_unfocused_selected_bg_color @accent_bg_color; +@define-color theme_unfocused_selected_fg_color @accent_fg_color; +@define-color unfocused_insensitive_color @insensitive_bg_color; +@define-color unfocused_borders alpha(currentColor,0.12); diff --git a/src/main/libadwaita/libadwaita.css b/src/main/libadwaita/libadwaita.css new file mode 100644 index 00000000..152397bd --- /dev/null +++ b/src/main/libadwaita/libadwaita.css @@ -0,0 +1,7450 @@ +@define-color blue_1 #99c1f1; +@define-color blue_2 #62a0ea; +@define-color blue_3 #3584e4; +@define-color blue_4 #1c71d8; +@define-color blue_5 #1a5fb4; +@define-color green_1 #8ff0a4; +@define-color green_2 #57e389; +@define-color green_3 #33d17a; +@define-color green_4 #2ec27e; +@define-color green_5 #26a269; +@define-color yellow_1 #f9f06b; +@define-color yellow_2 #f8e45c; +@define-color yellow_3 #f6d32d; +@define-color yellow_4 #f5c211; +@define-color yellow_5 #e5a50a; +@define-color orange_1 #ffbe6f; +@define-color orange_2 #ffa348; +@define-color orange_3 #ff7800; +@define-color orange_4 #e66100; +@define-color orange_5 #c64600; +@define-color red_1 #f66151; +@define-color red_2 #ed333b; +@define-color red_3 #e01b24; +@define-color red_4 #c01c28; +@define-color red_5 #a51d2d; +@define-color purple_1 #dc8add; +@define-color purple_2 #c061cb; +@define-color purple_3 #9141ac; +@define-color purple_4 #813d9c; +@define-color purple_5 #613583; +@define-color brown_1 #cdab8f; +@define-color brown_2 #b5835a; +@define-color brown_3 #986a44; +@define-color brown_4 #865e3c; +@define-color brown_5 #63452c; +@define-color light_1 #ffffff; +@define-color light_2 #f6f5f4; +@define-color light_3 #deddda; +@define-color light_4 #c0bfbc; +@define-color light_5 #9a9996; +@define-color dark_1 #77767b; +@define-color dark_2 #5e5c64; +@define-color dark_3 #3d3846; +@define-color dark_4 #241f31; +@define-color dark_5 #000000; +:root { + --accent-color: @accent_color; + --accent-bg-color: @accent_bg_color; + --accent-fg-color: @accent_fg_color; + --destructive-color: @destructive_color; + --destructive-bg-color: @destructive_bg_color; + --destructive-fg-color: @destructive_fg_color; + --success-color: @success_color; + --success-bg-color: @success_bg_color; + --success-fg-color: @success_fg_color; + --warning-color: @warning_color; + --warning-bg-color: @warning_bg_color; + --warning-fg-color: @warning_fg_color; + --error-color: @error_color; + --error-bg-color: @error_bg_color; + --error-fg-color: @error_fg_color; + --window-bg-color: @window_bg_color; + --window-fg-color: @window_fg_color; + --view-bg-color: @view_bg_color; + --view-fg-color: @view_fg_color; + --headerbar-bg-color: @headerbar_bg_color; + --headerbar-fg-color: @headerbar_fg_color; + --headerbar-border-color: @headerbar_border_color; + --headerbar-backdrop-color: @headerbar_backdrop_color; + --headerbar-shade-color: @headerbar_shade_color; + --headerbar-darker-shade-color: @headerbar_darker_shade_color; + --sidebar-bg-color: @sidebar_bg_color; + --sidebar-fg-color: @sidebar_fg_color; + --sidebar-backdrop-color: @sidebar_backdrop_color; + --sidebar-border-color: @sidebar_border_color; + --sidebar-shade-color: @sidebar_shade_color; + --secondary-sidebar-bg-color: @secondary_sidebar_bg_color; + --secondary-sidebar-fg-color: @secondary_sidebar_fg_color; + --secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color; + --secondary-sidebar-border-color: @secondary_sidebar_border_color; + --secondary-sidebar-shade-color: @secondary_sidebar_shade_color; + --card-bg-color: @card_bg_color; + --card-fg-color: @card_fg_color; + --card-shade-color: @card_shade_color; + --dialog-bg-color: @dialog_bg_color; + --dialog-fg-color: @dialog_fg_color; + --popover-bg-color: @popover_bg_color; + --popover-fg-color: @popover_fg_color; + --popover-shade-color: @popover_shade_color; + --thumbnail-bg-color: @thumbnail_bg_color; + --thumbnail-fg-color: @thumbnail_fg_color; + --shade-color: @shade_color; + --scrollbar-outline-color: @scrollbar_outline_color; +} + +:root { + --border-color: alpha(currentColor,0.12); + --border-opacity: 0.12; + --dim-opacity: 0.55; + --disabled-opacity: 0.45; +} + +@keyframes ripple { + to { + background-size: 1000% 1000%; + } +} + +@keyframes ripple-on-slider { + to { + background-size: auto, 1000% 1000%; + } +} + +@keyframes ripple-on-headerbar { + from { + background-image: radial-gradient(circle, @accent_color 0%, transparent 0%); + } + to { + background-image: radial-gradient(circle, @accent_color 100%, transparent 100%); + } +} + +:root { + --window-radius: 12px; +} + +.background { + color: @window_fg_color; + background-color: @window_bg_color; +} + +dnd { + color: @window_fg_color; +} + +.normal-icons { + -gtk-icon-size: 16px; +} + +.large-icons { + -gtk-icon-size: 32px; +} + +.osd popover > arrow, +.osd popover > contents, popover.touch-selection > arrow, +popover.touch-selection > contents, popover.magnifier > arrow, +popover.magnifier > contents, toast, .app-notification, dialog-host > dialog.osd sheet, +.osd { + color: rgba(255, 255, 255, 0.9); + border: none; + background-color: rgba(0, 0, 0, 0.7); + background-clip: padding-box; +} + +/* Text selection */ +selection { + background-color: alpha(@view_fg_color,0.1); + color: transparent; +} + +selection:focus-within { + background-color: alpha(@accent_bg_color,0.3); +} + +:not(window):drop(active):focus, +:not(window):drop(active) { + border-color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; + caret-color: @accent_bg_color; +} + +.navigation-sidebar :not(window):drop(active):focus, +.navigation-sidebar :not(window):drop(active), +placessidebar :not(window):drop(active):focus, +placessidebar :not(window):drop(active), +stackswitcher :not(window):drop(active):focus, +stackswitcher :not(window):drop(active), +expander-widget :not(window):drop(active):focus, +expander-widget :not(window):drop(active) { + box-shadow: none; +} + +/* Outline for low res icons */ +.lowres-icon { + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); +} + +/* Drop shadow for large icons */ +.icon-dropshadow { + -gtk-icon-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); +} + +@keyframes needs_attention { + from { + background-image: radial-gradient(farthest-side, @accent_color 0%, transparent 0%); + } + to { + background-image: radial-gradient(farthest-side, @accent_color 95%, transparent); + } +} + +stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, +stackswitcher > button.needs-attention > image { + animation: needs_attention 150ms ease-in; + background-image: radial-gradient(farthest-side, @accent_color 96%, transparent); + background-size: 6px 6px; + background-repeat: no-repeat; + background-position: right 3px; +} + +stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl), +stackswitcher > button.needs-attention > image:dir(rtl) { + background-position: left 3px; +} + +avatar { + border-radius: 9999px; + font-weight: bold; +} + +avatar.color1 { + background-image: linear-gradient(#83b6ec, #337fdc); + color: #cfe1f5; +} + +avatar.color2 { + background-image: linear-gradient(#7ad9f1, #0f9ac8); + color: #caeaf2; +} + +avatar.color3 { + background-image: linear-gradient(#8de6b1, #29ae74); + color: #cef8d8; +} + +avatar.color4 { + background-image: linear-gradient(#b5e98a, #6ab85b); + color: #e6f9d7; +} + +avatar.color5 { + background-image: linear-gradient(#f8e359, #d29d09); + color: #f9f4e1; +} + +avatar.color6 { + background-image: linear-gradient(#ffcb62, #d68400); + color: #ffead1; +} + +avatar.color7 { + background-image: linear-gradient(#ffa95a, #ed5b00); + color: #ffe5c5; +} + +avatar.color8 { + background-image: linear-gradient(#f78773, #e62d42); + color: #f8d2ce; +} + +avatar.color9 { + background-image: linear-gradient(#e973ab, #e33b6a); + color: #fac7de; +} + +avatar.color10 { + background-image: linear-gradient(#cb78d4, #9945b5); + color: #e7c2e8; +} + +avatar.color11 { + background-image: linear-gradient(#9e91e8, #7a59ca); + color: #d5d2f5; +} + +avatar.color12 { + background-image: linear-gradient(#e3cf9c, #b08952); + color: #f2eade; +} + +avatar.color13 { + background-image: linear-gradient(#be916d, #785336); + color: #e5d6ca; +} + +avatar.color14 { + background-image: linear-gradient(#c0bfbc, #6e6d71); + color: #d8d7d3; +} + +avatar.contrasted { + color: white; +} + +avatar.image { + background: none; +} + +bottom-sheet > dimming { + background-color: alpha(@shade_color,2); +} + +bottom-sheet > sheet { + border-top-left-radius: 12px; + border-top-right-radius: 12px; + box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.07), 0 3px 20px 10px rgba(0, 0, 0, 0.05), 0 6px 32px 16px rgba(0, 0, 0, 0.02), 0 0 0 1px @shade_color; +} + +bottom-sheet > sheet > drag-handle { + background-color: alpha(currentColor,0.25); + min-width: 60px; + min-height: 4px; + margin: 6px; + border-radius: 9999px; +} + +bottom-sheet > sheet > outline { + border-top-left-radius: 12px; + border-top-right-radius: 12px; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +bottom-sheet > sheet > outline.flush-left { + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +bottom-sheet > sheet > outline.flush-right { + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +bottom-sheet > sheet > outline.flush-left.flush-right { + box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); +} + +notebook > header > tabs > arrow, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay, +button { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), outline 300ms cubic-bezier(0, 0, 0.2, 1); + background-color: alpha(currentColor,0.05); + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; + outline: 0 solid transparent; + outline-offset: 2px; + color: currentColor; +} + +notebook > header > tabs > arrow:focus, row.spin spinbutton > button.image-button.up:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:focus:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:focus, +button:focus { + outline: 2px solid alpha(@accent_color,0.35); + outline-offset: 0; +} + +notebook > header > tabs > arrow:hover, row.spin spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:hover, +button:hover { + background-color: alpha(currentColor,0.12); + color: currentColor; + outline: 0 solid transparent; + -gtk-icon-filter: brightness(1.2); +} + +notebook > header > tabs > arrow.keyboard-activating, row.spin spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay.keyboard-activating, +button.keyboard-activating, notebook > header > tabs > arrow:active, row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:active, +button:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, border 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.12) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.12); + color: currentColor; + outline: 0 solid transparent; +} + +notebook > header > tabs > arrow:disabled, row.spin spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:disabled, +button:disabled { + background-color: alpha(currentColor,0.05); + color: alpha(currentColor,0.45); + outline-color: transparent; +} + +notebook > header > tabs > arrow:checked, row.spin spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr), row.spin spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked, +button:checked { + background-color: @accent_color; + color: @accent_fg_color; +} + +notebook > header > tabs > arrow:checked:hover, row.spin spinbutton > button.image-button.up:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +row.spin spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked:hover, +button:checked:hover { + outline-color: transparent; + background-color: mix(@accent_fg_color,@accent_color,0.95); + color: @accent_fg_color; +} + +notebook > header > tabs > arrow:checked:active, row.spin spinbutton > button.image-button.up:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +row.spin spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked:active, +button:checked:active { + animation: none; + outline-color: transparent; + background-color: mix(@accent_fg_color,@accent_color,0.88); + background-image: none; + color: @accent_fg_color; +} + +notebook > header > tabs > arrow:checked:disabled, row.spin spinbutton > button.image-button.up:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +row.spin spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, colorswatch#add-color-button > overlay:checked:disabled, +button:checked:disabled { + outline-color: transparent; + background-color: alpha(@accent_color,0.35); + color: alpha(@accent_fg_color,0.35); +} + +panelstatusbar > menubutton > button, +panelstatusbar > paneltogglebutton button, #NautilusPathButton, searchbar > revealer > box .close, actionbar > revealer > box menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar menubutton.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, actionbar > revealer > box button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow, window.dialog.message.csd .dialog-action-area > button, popover.menu box.circular-buttons button.circular.image-button.model, popover.menu box.inline-buttons button.image-button.model, filechooser #pathbarbox > stack > box > button, +filechooser #pathbarbox > stack > box > box > button, +filechooser #pathbarbox > stack > box > menubutton > button, button.sidebar-button, button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close, calendar > header > button, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, splitbutton.flat > button, +splitbutton.flat > menubutton > button, menubutton.flat > button, +button.flat { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), outline 300ms cubic-bezier(0, 0, 0.2, 1); + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; + background-color: transparent; + outline: 0 solid transparent; + outline-offset: 2px; + color: alpha(currentColor,0.75); +} + +panelstatusbar > menubutton > button:focus:not(:hover):not(:active), +panelstatusbar > paneltogglebutton button:focus:not(:hover):not(:active), #NautilusPathButton:focus:not(:hover):not(:active), searchbar > revealer > box .close:focus:not(:hover):not(:active), actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:focus:not(:hover):not(:active), actionbar > revealer > box button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:focus:not(:hover):not(:active):not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:focus:not(:hover):not(:active):not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:focus:not(:hover):not(:active), window.dialog.message.csd .dialog-action-area > button:focus:not(:hover):not(:active), popover.menu box.circular-buttons button.circular.image-button.model:focus:not(:hover):not(:active), popover.menu box.inline-buttons button.image-button.model:focus:not(:hover):not(:active), filechooser #pathbarbox > stack > box > button:focus:not(:hover):not(:active), +filechooser #pathbarbox > stack > box > box > button:focus:not(:hover):not(:active), +filechooser #pathbarbox > stack > box > menubutton > button:focus:not(:hover):not(:active), button.sidebar-button:focus:not(:hover):not(:active), button.emoji-section.image-button:focus:not(:hover):not(:active):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:focus:not(:hover):not(:active), calendar > header > button:focus:not(:hover):not(:active), actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:focus:not(:hover):not(:active), +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:focus:not(:hover):not(:active), splitbutton.flat > button:focus:not(:hover):not(:active), +splitbutton.flat > menubutton > button:focus:not(:hover):not(:active), menubutton.flat > button:focus:not(:hover):not(:active), +button.flat:focus:not(:hover):not(:active) { + color: currentColor; + outline: 2px solid alpha(currentColor,0.05); + outline-offset: -2px; +} + +panelstatusbar > menubutton > button:hover, +panelstatusbar > paneltogglebutton button:hover, #NautilusPathButton:hover, searchbar > revealer > box .close:hover, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, actionbar > revealer > box button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:hover, window.dialog.message.csd .dialog-action-area > button:hover, popover.menu box.circular-buttons button.circular.image-button.model:hover, popover.menu box.inline-buttons button.image-button.model:hover, filechooser #pathbarbox > stack > box > button:hover, +filechooser #pathbarbox > stack > box > box > button:hover, +filechooser #pathbarbox > stack > box > menubutton > button:hover, button.sidebar-button:hover, button.emoji-section.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:hover, calendar > header > button:hover, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:hover, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:hover, splitbutton.flat > button:hover, +splitbutton.flat > menubutton > button:hover, menubutton.flat > button:hover, +button.flat:hover { + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +panelstatusbar > menubutton > button.keyboard-activating, +panelstatusbar > paneltogglebutton button.keyboard-activating, .keyboard-activating#NautilusPathButton, searchbar > revealer > box .keyboard-activating.close, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, actionbar > revealer > box button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.keyboard-activating.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.keyboard-activating.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow.keyboard-activating, window.dialog.message.csd .dialog-action-area > button.keyboard-activating, popover.menu box.circular-buttons button.keyboard-activating.circular.image-button.model, popover.menu box.inline-buttons button.keyboard-activating.image-button.model, filechooser #pathbarbox > stack > box > button.keyboard-activating, +filechooser #pathbarbox > stack > box > box > button.keyboard-activating, +filechooser #pathbarbox > stack > box > menubutton > button.keyboard-activating, button.keyboard-activating.sidebar-button, button.keyboard-activating.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .keyboard-activating.close, calendar > header > button.keyboard-activating, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button.keyboard-activating, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button.keyboard-activating, splitbutton.flat > button.keyboard-activating, +splitbutton.flat > menubutton > button.keyboard-activating, menubutton.flat > button.keyboard-activating, +button.keyboard-activating.flat, +window.shortcuts headerbar.keyboard-activating.titlebar, +window.appchooser headerbar.keyboard-activating.titlebar, +window.colorchooser headerbar.keyboard-activating.titlebar, +window.aboutdialog headerbar.keyboard-activating.titlebar, +window.pagesetup headerbar.keyboard-activating.titlebar, +window.print headerbar.keyboard-activating.titlebar, panelstatusbar > menubutton > button:active, +panelstatusbar > paneltogglebutton button:active, #NautilusPathButton:active, searchbar > revealer > box .close:active, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, actionbar > revealer > box button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:active, window.dialog.message.csd .dialog-action-area > button:active, popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.inline-buttons button.image-button.model:active, filechooser #pathbarbox > stack > box > button:active, +filechooser #pathbarbox > stack > box > box > button:active, +filechooser #pathbarbox > stack > box > menubutton > button:active, button.sidebar-button:active, button.emoji-section.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:active, calendar > header > button:active, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:active, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:active, splitbutton.flat > button:active, +splitbutton.flat > menubutton > button:active, menubutton.flat > button:active, +button.flat:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.12) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +panelstatusbar > menubutton > button:disabled, +panelstatusbar > paneltogglebutton button:disabled, #NautilusPathButton:disabled, searchbar > revealer > box .close:disabled, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:disabled, actionbar > revealer > box button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:disabled, window.dialog.message.csd .dialog-action-area > button:disabled, popover.menu box.circular-buttons button.circular.image-button.model:disabled, popover.menu box.inline-buttons button.image-button.model:disabled, filechooser #pathbarbox > stack > box > button:disabled, +filechooser #pathbarbox > stack > box > box > button:disabled, +filechooser #pathbarbox > stack > box > menubutton > button:disabled, button.sidebar-button:disabled, button.emoji-section.image-button:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:disabled, calendar > header > button:disabled, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, splitbutton.flat > button:disabled, +splitbutton.flat > menubutton > button:disabled, menubutton.flat > button:disabled, +button.flat:disabled { + color: alpha(currentColor,0.35); + background-color: transparent; +} + +panelstatusbar > menubutton > button:checked, +panelstatusbar > paneltogglebutton button:checked, #NautilusPathButton:checked, searchbar > revealer > box .close:checked, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, actionbar > revealer > box button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked, window.dialog.message.csd .dialog-action-area > button:checked, popover.menu box.circular-buttons button.circular.image-button.model:checked, popover.menu box.inline-buttons button.image-button.model:checked, filechooser #pathbarbox > stack > box > button:checked, +filechooser #pathbarbox > stack > box > box > button:checked, +filechooser #pathbarbox > stack > box > menubutton > button:checked, button.sidebar-button:checked, button.emoji-section.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked, calendar > header > button:checked, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked, splitbutton.flat > button:checked, +splitbutton.flat > menubutton > button:checked, menubutton.flat > button:checked, +button.flat:checked { + background-color: alpha(currentColor,0.1); + color: currentColor; +} + +panelstatusbar > menubutton > button:checked:hover, +panelstatusbar > paneltogglebutton button:checked:hover, #NautilusPathButton:checked:hover, searchbar > revealer > box .close:checked:hover, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, actionbar > revealer > box button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked:hover, window.dialog.message.csd .dialog-action-area > button:checked:hover, popover.menu box.circular-buttons button.circular.image-button.model:checked:hover, popover.menu box.inline-buttons button.image-button.model:checked:hover, filechooser #pathbarbox > stack > box > button:checked:hover, +filechooser #pathbarbox > stack > box > box > button:checked:hover, +filechooser #pathbarbox > stack > box > menubutton > button:checked:hover, button.sidebar-button:checked:hover, button.emoji-section.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked:hover, calendar > header > button:checked:hover, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:hover, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:hover, splitbutton.flat > button:checked:hover, +splitbutton.flat > menubutton > button:checked:hover, menubutton.flat > button:checked:hover, +button.flat:checked:hover { + background-color: alpha(currentColor,0.15); + color: currentColor; +} + +panelstatusbar > menubutton > button:checked:active, +panelstatusbar > paneltogglebutton button:checked:active, #NautilusPathButton:checked:active, searchbar > revealer > box .close:checked:active, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, actionbar > revealer > box button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked:active, window.dialog.message.csd .dialog-action-area > button:checked:active, popover.menu box.circular-buttons button.circular.image-button.model:checked:active, popover.menu box.inline-buttons button.image-button.model:checked:active, filechooser #pathbarbox > stack > box > button:checked:active, +filechooser #pathbarbox > stack > box > box > button:checked:active, +filechooser #pathbarbox > stack > box > menubutton > button:checked:active, button.sidebar-button:checked:active, button.emoji-section.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked:active, calendar > header > button:checked:active, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:active, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:active, splitbutton.flat > button:checked:active, +splitbutton.flat > menubutton > button:checked:active, menubutton.flat > button:checked:active, +button.flat:checked:active { + animation: none; + outline-color: transparent; + background-color: alpha(currentColor,0.2); + background-image: none; + color: currentColor; +} + +panelstatusbar > menubutton > button:checked:disabled, +panelstatusbar > paneltogglebutton button:checked:disabled, #NautilusPathButton:checked:disabled, searchbar > revealer > box .close:checked:disabled, actionbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, searchbar > revealer > box menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, .toolbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, headerbar menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:disabled, actionbar > revealer > box button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.arrow-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar button.image-text-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), spinbutton > button.image-button.up:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:checked:disabled:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), notebook > header > tabs > arrow:checked:disabled, window.dialog.message.csd .dialog-action-area > button:checked:disabled, popover.menu box.circular-buttons button.circular.image-button.model:checked:disabled, popover.menu box.inline-buttons button.image-button.model:checked:disabled, filechooser #pathbarbox > stack > box > button:checked:disabled, +filechooser #pathbarbox > stack > box > box > button:checked:disabled, +filechooser #pathbarbox > stack > box > menubutton > button:checked:disabled, button.sidebar-button:checked:disabled, button.emoji-section.image-button:checked:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), infobar .close:checked:disabled, calendar > header > button:checked:disabled, actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:checked:disabled, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:checked:disabled, splitbutton.flat > button:checked:disabled, +splitbutton.flat > menubutton > button:checked:disabled, menubutton.flat > button:checked:disabled, +button.flat:checked:disabled { + background-color: alpha(currentColor,0.1); + color: alpha(currentColor,0.45); +} + +actionbar > revealer > box popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar popover menubutton.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, actionbar > revealer > box popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.05); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:hover, actionbar > revealer > box popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.12); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button.keyboard-activating, actionbar > revealer > box popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.keyboard-activating.arrow-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.keyboard-activating.image-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.keyboard-activating.image-text-button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.keyboard-activating.arrow-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.keyboard-activating.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.keyboard-activating.image-text-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:active, actionbar > revealer > box popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.2); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked, actionbar > revealer > box popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.1); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:hover, actionbar > revealer > box popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked:hover:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.15); +} + +actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked.keyboard-activating, actionbar > revealer > box popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked.keyboard-activating:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, searchbar > revealer > box popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, .toolbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, headerbar popover menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque).image-button > button:checked:active, actionbar > revealer > box popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.arrow-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar popover button.image-text-button:checked:active:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.raised > button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.arrow-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .linked button.image-text-button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + background-color: alpha(currentColor,0.2); +} + +actionbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button, splitbutton.suggested-action > menubutton > button, splitbutton.destructive-action > button, splitbutton.destructive-action > menubutton > button, splitbutton.opaque > button, splitbutton.opaque > menubutton > button, menubutton.suggested-action > button, menubutton.destructive-action > button, menubutton.opaque > button, +button.suggested-action, +button.destructive-action, +button.opaque { + box-shadow: none; +} + +actionbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button, splitbutton.suggested-action > menubutton > button, splitbutton.destructive-action > button, splitbutton.destructive-action > menubutton > button, splitbutton.opaque > button, splitbutton.opaque > menubutton > button, menubutton.suggested-action > button, menubutton.destructive-action > button, menubutton.opaque > button, +button.suggested-action, +button.destructive-action, +button.opaque { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +actionbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:focus:focus-visible, splitbutton.suggested-action > menubutton > button:focus:focus-visible, splitbutton.destructive-action > button:focus:focus-visible, splitbutton.destructive-action > menubutton > button:focus:focus-visible, splitbutton.opaque > button:focus:focus-visible, splitbutton.opaque > menubutton > button:focus:focus-visible, menubutton.suggested-action > button:focus:focus-visible, menubutton.destructive-action > button:focus:focus-visible, menubutton.opaque > button:focus:focus-visible, +button.suggested-action:focus:focus-visible, +button.destructive-action:focus:focus-visible, +button.opaque:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 1px; +} + +.osd actionbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd searchbar > revealer > box menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd .toolbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd headerbar menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar .osd menubutton.suggested-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd actionbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd searchbar > revealer > box menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd .toolbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd headerbar menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar .osd menubutton.destructive-action > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd actionbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd searchbar > revealer > box menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd .toolbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.osd headerbar menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar .osd menubutton.opaque > button:focus:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .osd splitbutton.suggested-action > button:focus:focus-visible, .osd splitbutton.suggested-action > menubutton > button:focus:focus-visible, .osd splitbutton.destructive-action > button:focus:focus-visible, .osd splitbutton.destructive-action > menubutton > button:focus:focus-visible, .osd splitbutton.opaque > button:focus:focus-visible, .osd splitbutton.opaque > menubutton > button:focus:focus-visible, .osd menubutton.suggested-action > button:focus:focus-visible, .osd menubutton.destructive-action > button:focus:focus-visible, .osd menubutton.opaque > button:focus:focus-visible, +.osd button.suggested-action:focus:focus-visible, +.osd button.destructive-action:focus:focus-visible, +.osd button.opaque:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +actionbar > revealer > box menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:hover, splitbutton.suggested-action > menubutton > button:hover, splitbutton.destructive-action > button:hover, splitbutton.destructive-action > menubutton > button:hover, splitbutton.opaque > button:hover, splitbutton.opaque > menubutton > button:hover, menubutton.suggested-action > button:hover, menubutton.destructive-action > button:hover, menubutton.opaque > button:hover, +button.suggested-action:hover, +button.destructive-action:hover, +button.opaque:hover { + background-image: image(alpha(currentColor,0.1)); +} + +actionbar > revealer > box menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button.keyboard-activating, splitbutton.suggested-action > menubutton > button.keyboard-activating, splitbutton.destructive-action > button.keyboard-activating, splitbutton.destructive-action > menubutton > button.keyboard-activating, splitbutton.opaque > button.keyboard-activating, splitbutton.opaque > menubutton > button.keyboard-activating, menubutton.suggested-action > button.keyboard-activating, menubutton.destructive-action > button.keyboard-activating, menubutton.opaque > button.keyboard-activating, +button.keyboard-activating.suggested-action, +button.keyboard-activating.destructive-action, +button.keyboard-activating.opaque, actionbar > revealer > box menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:active, splitbutton.suggested-action > menubutton > button:active, splitbutton.destructive-action > button:active, splitbutton.destructive-action > menubutton > button:active, splitbutton.opaque > button:active, splitbutton.opaque > menubutton > button:active, menubutton.suggested-action > button:active, menubutton.destructive-action > button:active, menubutton.opaque > button:active, +button.suggested-action:active, +button.destructive-action:active, +button.opaque:active { + background-image: image(rgba(0, 0, 0, 0.2)); +} + +actionbar > revealer > box menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button:checked, menubutton.suggested-action > button:checked, menubutton.destructive-action > button:checked, menubutton.opaque > button:checked, +button.suggested-action:checked, +button.destructive-action:checked, +button.opaque:checked { + background-image: image(rgba(0, 0, 0, 0.15)); +} + +actionbar > revealer > box menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked:hover, splitbutton.suggested-action > menubutton > button:checked:hover, splitbutton.destructive-action > button:checked:hover, splitbutton.destructive-action > menubutton > button:checked:hover, splitbutton.opaque > button:checked:hover, splitbutton.opaque > menubutton > button:checked:hover, menubutton.suggested-action > button:checked:hover, menubutton.destructive-action > button:checked:hover, menubutton.opaque > button:checked:hover, +button.suggested-action:checked:hover, +button.destructive-action:checked:hover, +button.opaque:checked:hover { + background-image: image(rgba(0, 0, 0, 0.05)); +} + +actionbar > revealer > box menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked.keyboard-activating:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked.keyboard-activating, splitbutton.suggested-action > menubutton > button:checked.keyboard-activating, splitbutton.destructive-action > button:checked.keyboard-activating, splitbutton.destructive-action > menubutton > button:checked.keyboard-activating, splitbutton.opaque > button:checked.keyboard-activating, splitbutton.opaque > menubutton > button:checked.keyboard-activating, menubutton.suggested-action > button:checked.keyboard-activating, menubutton.destructive-action > button:checked.keyboard-activating, menubutton.opaque > button:checked.keyboard-activating, +button.suggested-action:checked.keyboard-activating, +button.destructive-action:checked.keyboard-activating, +button.opaque:checked.keyboard-activating, actionbar > revealer > box menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:checked:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.suggested-action > button:checked:active, splitbutton.suggested-action > menubutton > button:checked:active, splitbutton.destructive-action > button:checked:active, splitbutton.destructive-action > menubutton > button:checked:active, splitbutton.opaque > button:checked:active, splitbutton.opaque > menubutton > button:checked:active, menubutton.suggested-action > button:checked:active, menubutton.destructive-action > button:checked:active, menubutton.opaque > button:checked:active, +button.suggested-action:checked:active, +button.destructive-action:checked:active, +button.opaque:checked:active { + background-image: image(rgba(0, 0, 0, 0.3)); +} + +.nautilus-window .floating-bar button { + min-height: 24px; + min-width: 24px; + padding: 0; + border-radius: 9999px; +} + + +button { + min-height: 24px; + min-width: 16px; + padding: 6px 10px; + border-radius: 6px; + font-weight: bold; +} + +.osd button:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + + +button:disabled { + filter: opacity(0.45); +} + + +button:disabled label { + filter: none; +} + + +button.image-button { + min-width: 24px; + padding-left: 6px; + padding-right: 6px; +} + + +button.image-button.close-button { + padding: 0; + border-radius: 9999px; +} + + +button.text-button { + padding-left: 16px; + padding-right: 16px; +} + + +button.text-button.image-button, +button.image-text-button { + padding-left: 9px; + padding-right: 9px; +} + + +button.text-button.image-button > box, +button.text-button.image-button > box > box, +button.image-text-button > box, +button.image-text-button > box > box { + border-spacing: 4px; +} + + +button.text-button.image-button > box > label, +button.text-button.image-button > box > box > label, +button.image-text-button > box > label, +button.image-text-button > box > box > label { + padding-left: 2px; + padding-right: 2px; +} + + +button.arrow-button { + padding-left: 9px; + padding-right: 9px; +} + + +button.arrow-button > box { + border-spacing: 4px; +} + + +button.arrow-button.text-button > box { + border-spacing: 4px; +} + +dropdown:drop(active) button.combo, combobox:drop(active) button.combo, +button.flat:drop(active), menubutton.osd > button:drop(active), +button.osd:drop(active), +button:drop(active) { + color: @accent_bg_color; + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +menubutton.osd > button, +button.osd { + min-width: 32px; + min-height: 32px; + color: rgba(255, 255, 255, 0.9); + background-color: rgba(0, 0, 0, 0.65); +} + +menubutton.osd > button, +button.osd { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +menubutton.osd > button:focus:focus-visible, +button.osd:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 1px; +} + +menubutton.osd > button:hover, +button.osd:hover { + color: white; + background-color: alpha(mix(black,currentColor,0.15),0.65); +} + +menubutton.osd > button.keyboard-activating, menubutton.osd > button:active, +button.osd.keyboard-activating, +button.osd:active { + color: white; + background-color: alpha(mix(black,currentColor,0.25),0.65); +} + +menubutton.osd > button:checked, +button.osd:checked { + background-color: alpha(mix(black,currentColor,0.2),0.65); +} + +menubutton.osd > button:checked:hover, +button.osd:checked:hover { + background-color: alpha(mix(black,currentColor,0.25),0.65); +} + +menubutton.osd > button:checked.keyboard-activating, menubutton.osd > button:checked:active, +button.osd:checked.keyboard-activating, +button.osd:checked:active { + background-color: alpha(mix(black,currentColor,0.35),0.65); +} + +menubutton.osd > button:focus:focus-visible, .osd button.osd:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + + +button.opaque { + background-color: mix(@window_bg_color,@window_fg_color,0.15); + color: @window_fg_color; +} + + +button.destructive-action { + color: @destructive_fg_color; +} + + +button.destructive-action, +button.destructive-action:checked { + background-color: @destructive_bg_color; +} + + +button.suggested-action { + color: @accent_fg_color; +} + + +button.suggested-action, +button.suggested-action:checked { + background-color: @accent_bg_color; +} + +.osd button.flat:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +stackswitcher > button > label { + padding: 0 6px; + margin: 0 -6px; +} + +stackswitcher > button > image { + padding: 3px 6px; + margin: -3px -6px; +} + +stackswitcher > button.text-button { + min-width: 100px; +} + + +button.font separator { + background-color: transparent; +} + + +button.font > box { + border-spacing: 6px; +} + + +button.font > box > box > label { + font-weight: bold; +} + +row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), menubutton.circular > button, +button.circular { + min-width: 34px; + min-height: 34px; + padding: 0; + border-radius: 9999px; +} + +row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child label, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child label, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child label, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) label, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child label, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child label, button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) label, menubutton.circular > button label, +button.circular label { + padding: 0; +} + +menubutton.pill > button, +button.pill { + padding: 10px 32px; + border-radius: 9999px; +} + + +button.card { + background-color: @card_bg_color; + background-clip: padding-box; + font-weight: inherit; + padding: 0; +} + + +button.card { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + + +button.card:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + + +button.card:hover { + background-image: image(alpha(currentColor,0.04)); +} + + +button.card.keyboard-activating, +button.card:active { + background-image: image(alpha(currentColor,0.08)); +} + + +button.card:checked { + background-color: @card_bg_color; + background-image: image(alpha(@accent_bg_color,0.25)); +} + + +button.card:checked:hover { + background-image: image(alpha(@accent_bg_color,0.32)); +} + + +button.card:checked.keyboard-activating, +button.card:checked:active { + background-image: image(alpha(@accent_bg_color,0.39)); +} + + +button.card:checked.has-open-popup { + background-image: image(alpha(@accent_bg_color,0.32)); +} + +.osd button.card:checked { + background-color: alpha(currentColor,0.1); +} + + +button.card:drop(active) { + color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; +} + +button.link, button.link:hover, button.link:active, button.link:checked, columnview > header > button, treeview.view > header > button, window.print treeview.dialog-action-box > header > button { + background-color: transparent; +} + +button.color { + padding: 5px; +} + +button.color > colorswatch:only-child { + border-radius: 2.5px; +} + +button.color > colorswatch:only-child > overlay { + border-radius: 2px; +} + +button.color > colorswatch:only-child:disabled { + filter: none; +} + +button.color > colorswatch:only-child.light > overlay { + border-color: alpha(@view_fg_color,0.1); +} + +menubutton.osd { + background: none; + color: inherit; +} + +menubutton.suggested-action { + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +menubutton.destructive-action { + background-color: @destructive_bg_color; + color: @destructive_fg_color; +} + +menubutton.opaque { + background-color: mix(@window_bg_color,@window_fg_color,0.15); + color: @window_fg_color; +} + +menubutton.suggested-action, menubutton.destructive-action, menubutton.opaque { + border-radius: 6px; +} + +menubutton.suggested-action.circular, menubutton.suggested-action.pill, menubutton.destructive-action.circular, menubutton.destructive-action.pill, menubutton.opaque.circular, menubutton.opaque.pill { + border-radius: 9999px; +} + +menubutton.suggested-action > button, menubutton.suggested-action > button:checked, menubutton.destructive-action > button, menubutton.destructive-action > button:checked, menubutton.opaque > button, menubutton.opaque > button:checked { + background-color: transparent; + color: inherit; +} + +menubutton.image-button > button { + min-width: 24px; + padding-left: 5px; + padding-right: 5px; +} + +menubutton.card > button { + border-radius: 12px; +} + +menubutton arrow { + min-height: 16px; + min-width: 16px; +} + +menubutton arrow.none { + -gtk-icon-source: -gtk-icontheme("open-menu-symbolic"); +} + +menubutton arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +menubutton arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); +} + +menubutton arrow.left { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); +} + +menubutton arrow.right { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + +splitbutton { + border-radius: 6px; +} + +splitbutton, splitbutton > separator { + transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition-property: background; +} + +splitbutton > separator { + margin-top: 6px; + margin-bottom: 6px; + background: none; +} + +splitbutton > menubutton > button { + padding-left: 4px; + padding-right: 4px; +} + +splitbutton.image-button > button { + min-width: 24px; + padding-left: 5px; + padding-right: 5px; +} + +splitbutton.text-button.image-button > button, splitbutton.image-text-button > button { + padding-left: 9px; + padding-right: 9px; +} + +splitbutton.text-button.image-button > button > box, splitbutton.image-text-button > button > box { + border-spacing: 6px; +} + +splitbutton:disabled { + filter: opacity(0.45); +} + +splitbutton:disabled > button, splitbutton:disabled > menubutton > button { + filter: none; +} + +splitbutton > button:dir(ltr), +splitbutton > menubutton > button:dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: -1px; +} + +splitbutton > button:dir(rtl), +splitbutton > menubutton > button:dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, splitbutton.flat > separator { + background: alpha(currentColor,0.12); +} + +actionbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), actionbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.flat:hover, splitbutton.flat:active, splitbutton.flat:checked { + background: alpha(currentColor,0.07); +} + +actionbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:hover:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, actionbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:active:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, actionbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:checked:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, splitbutton.flat:hover > separator, splitbutton.flat:active > separator, splitbutton.flat:checked > separator { + background: none; +} + +actionbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), splitbutton.flat:disabled { + filter: opacity(0.3); +} + +actionbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, searchbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, .toolbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, headerbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button:disabled, actionbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, searchbar > revealer > box splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, .toolbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, headerbar splitbutton:disabled:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button:disabled, splitbutton.flat:disabled > button:disabled, splitbutton.flat:disabled > menubutton > button:disabled { + filter: none; +} + +actionbar > revealer > box splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, searchbar > revealer > box splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, .toolbar splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, headerbar splitbutton:focus-within:focus-visible:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > separator, splitbutton.flat:focus-within:focus-visible > separator { + background: none; +} + +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, .toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > button, +actionbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +searchbar > revealer > box splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +.toolbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, +headerbar splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) > menubutton > button, splitbutton.flat > button, +splitbutton.flat > menubutton > button { + border-radius: 6px; +} + +splitbutton.suggested-action { + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +splitbutton.destructive-action { + background-color: @destructive_bg_color; + color: @destructive_fg_color; +} + +splitbutton.opaque { + background-color: mix(@window_bg_color,@window_fg_color,0.15); + color: @window_fg_color; +} + +splitbutton.suggested-action > button, splitbutton.suggested-action > button:checked, splitbutton.suggested-action > menubutton > button, splitbutton.suggested-action > menubutton > button:checked, splitbutton.destructive-action > button, splitbutton.destructive-action > button:checked, splitbutton.destructive-action > menubutton > button, splitbutton.destructive-action > menubutton > button:checked, splitbutton.opaque > button, splitbutton.opaque > button:checked, splitbutton.opaque > menubutton > button, splitbutton.opaque > menubutton > button:checked { + color: inherit; + background-color: transparent; +} + +splitbutton.suggested-action > menubutton > button:dir(ltr), splitbutton.destructive-action > menubutton > button:dir(ltr), splitbutton.opaque > menubutton > button:dir(ltr) { + box-shadow: inset 1px 0 alpha(currentColor,0.3); +} + +splitbutton.suggested-action > menubutton > button:dir(rtl), splitbutton.destructive-action > menubutton > button:dir(rtl), splitbutton.opaque > menubutton > button:dir(rtl) { + box-shadow: inset -1px 0 alpha(currentColor,0.3); +} + +splitbutton > menubutton > button > arrow.none { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +buttoncontent > box { + border-spacing: 6px; +} + +buttoncontent > box > label { + font-weight: bold; +} + +buttoncontent > box > label:dir(ltr) { + padding-right: 2px; +} + +buttoncontent > box > label:dir(rtl) { + padding-left: 2px; +} + +.arrow-button > box > buttoncontent > box > label:dir(ltr), splitbutton > button > buttoncontent > box > label:dir(ltr) { + padding-right: 0; +} + +.arrow-button > box > buttoncontent > box > label:dir(rtl), splitbutton > button > buttoncontent > box > label:dir(rtl) { + padding-left: 0; +} + +tabbutton label { + font-weight: 800; + font-size: 8pt; +} + +tabbutton label.small { + font-size: 6pt; +} + +tabbutton indicatorbin > indicator, +tabbutton indicatorbin > mask { + transform: translate(-1px, 1px); +} + +calendar { + color: @view_fg_color; + background-clip: padding-box; + border: 1px solid alpha(currentColor,0.12); + font-feature-settings: "tnum"; +} + +calendar > header { + border-bottom: 1px solid alpha(currentColor,0.12); +} + +calendar > header > button { + border-radius: 0; +} + +calendar > grid { + padding-left: 3px; + padding-bottom: 3px; +} + +calendar > grid > label.today { + box-shadow: inset 0px -2px alpha(currentColor,0.12); +} + +calendar > grid > label.today:selected { + box-shadow: none; +} + +calendar > grid > label { + margin-top: 3px; + margin-right: 3px; +} + +calendar > grid > label { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +calendar > grid > label:focus { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +calendar > grid > label.day-number { + padding: 3px; +} + +calendar > grid > label.day-number:checked { + border-radius: 6px; + background-color: alpha(@accent_bg_color,0.3); +} + +calendar > grid > label.day-number:selected { + border-radius: 6px; + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +calendar > grid > label.day-number.other-month { + color: alpha(currentColor,0.3); +} + +checkbutton { + border-spacing: 4px; + border-radius: 9px; + padding: 3px; +} + +checkbutton { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +checkbutton:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd checkbutton:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +checkbutton.text-button { + padding: 4px; +} + +check, +radio { + min-height: 20px; + min-width: 20px; + -gtk-icon-size: 20px; + padding: 0; + box-shadow: 0 0 0 0 transparent; + background-color: alpha(currentColor,0.12); + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1); +} + +check:not(:checked):not(:indeterminate):hover, +radio:not(:checked):not(:indeterminate):hover { + box-shadow: 0 0 0 6px alpha(currentColor,0.05); + background-color: alpha(currentColor,0.15); +} + +check:not(:checked):not(:indeterminate):active, +radio:not(:checked):not(:indeterminate):active { + box-shadow: 0 0 0 6px alpha(currentColor,0.12); + background-color: alpha(currentColor,0.2); +} + +check:checked, check:indeterminate, +radio:checked, +radio:indeterminate { + background-color: @accent_bg_color; + color: @accent_fg_color; + box-shadow: none; +} + +check:checked:hover, check:indeterminate:hover, +radio:checked:hover, +radio:indeterminate:hover { + background-image: image(alpha(currentColor,0.1)); + box-shadow: 0 0 0 6px alpha(@accent_bg_color,0.05); +} + +check:checked:active, check:indeterminate:active, +radio:checked:active, +radio:indeterminate:active { + background-image: image(alpha(currentColor,0.2)); + box-shadow: 0 0 0 6px alpha(@accent_bg_color,0.12); +} + +check:disabled, +radio:disabled { + filter: opacity(0.45); +} + +.osd check:checked, .osd check:indeterminate, .osd radio:checked, .osd radio:indeterminate { + background-color: rgba(255, 255, 255, 0.75); + color: rgba(0, 0, 0, 0.75); +} + +check { + border-radius: 100%; +} + +check:checked { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/checkbox-checked-symbolic@2.svg"))); +} + +check:indeterminate { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-mixed-symbolic.svg")), -gtk-recolor(url("assets/checkbox-mixed-symbolic@2.svg"))); +} + +radio { + border-radius: 100%; +} + +radio:checked { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic@2.svg"))); +} + +radio:indeterminate { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/radio-mixed-symbolic.svg")), -gtk-recolor(url("assets/radio-mixed-symbolic@2.svg"))); +} + +checkbutton.selection-mode { + border-radius: 9999px; +} + +checkbutton.selection-mode check, checkbutton.selection-mode radio { + padding: 3px; + border-radius: 9999px; +} + +checkbutton.selection-mode label:dir(ltr) { + margin-right: 6px; +} + +checkbutton.selection-mode label:dir(rtl) { + margin-left: 6px; +} + +check:not(:checked):active { + -gtk-icon-transform: rotate(90deg); +} + +colorswatch { + outline: 0 solid transparent; + outline-offset: 6px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +colorswatch:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 4px; + outline-offset: -2px; +} + +colorswatch.top { + border-top-left-radius: 6.5px; + border-top-right-radius: 6.5px; +} + +colorswatch.top > overlay { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +colorswatch.bottom { + border-bottom-left-radius: 6.5px; + border-bottom-right-radius: 6.5px; +} + +colorswatch.bottom > overlay { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} + +colorswatch.left, colorswatch:first-child:not(.top) { + border-top-left-radius: 6.5px; + border-bottom-left-radius: 6.5px; +} + +colorswatch.left > overlay, colorswatch:first-child:not(.top) > overlay { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +colorswatch.right, colorswatch:last-child:not(.bottom) { + border-top-right-radius: 6.5px; + border-bottom-right-radius: 6.5px; +} + +colorswatch.right > overlay, colorswatch:last-child:not(.bottom) > overlay { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +colorswatch.dark > overlay { + color: white; +} + +colorswatch.light > overlay { + color: rgba(0, 0, 0, 0.75); + box-shadow: inset 0 0 0 1px alpha(@view_fg_color,0.1); +} + +colorswatch:drop(active).light > overlay { + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +colorswatch:drop(active).dark > overlay { + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +colorswatch#add-color-button > overlay { + border-radius: 6px 0 0 6px; +} + +colorswatch#add-color-button:only-child > overlay { + border-radius: 6px; +} + +colorswatch:disabled { + filter: opacity(0.45); +} + +colorswatch#editor-color-sample { + border-radius: 6px; +} + +colorswatch#editor-color-sample > overlay { + border-radius: 6.5px; +} + +plane { + outline: 0 solid transparent; + outline-offset: 6px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +plane:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 2px; +} + +colorchooser .popover.osd { + border-radius: 12px; +} + +columnview, treeview.view, window.print treeview.dialog-action-box { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +columnview:focus:focus-visible, treeview.view:focus:focus-visible, window.print treeview.dialog-action-box:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +columnview:drop(active), treeview.view:drop(active), window.print treeview.dialog-action-box:drop(active) { + box-shadow: none; +} + +columnview > header > button, treeview.view > header > button, window.print treeview.dialog-action-box > header > button { + padding: 3px 9px; + border-radius: 0; + box-shadow: none; + line-height: 100%; + border-left: 1px solid alpha(currentColor,0.12); + border-bottom: 1px solid alpha(currentColor,0.12); +} + +columnview > header > button:first-child, treeview.view > header > button:first-child, window.print treeview.dialog-action-box > header > button:first-child { + border-left-width: 0; +} + +columnview > header > button > box, treeview.view > header > button > box, window.print treeview.dialog-action-box > header > button > box { + color: alpha(currentColor,0.4); + font-weight: 700; + font-size: 9pt; + border-spacing: 6px; +} + +columnview > header > button:hover > box, treeview.view > header > button:hover > box, window.print treeview.dialog-action-box > header > button:hover > box { + color: alpha(currentColor,0.7); + box-shadow: none; +} + +columnview > header > button:active > box, treeview.view > header > button:active > box, window.print treeview.dialog-action-box > header > button:active > box { + color: currentColor; +} + +columnview > header > button sort-indicator, treeview.view > header > button sort-indicator, window.print treeview.dialog-action-box > header > button sort-indicator { + min-height: 16px; + min-width: 16px; +} + +columnview > header > button sort-indicator.ascending, treeview.view > header > button sort-indicator.ascending, window.print treeview.dialog-action-box > header > button sort-indicator.ascending { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); +} + +columnview > header > button sort-indicator.descending, treeview.view > header > button sort-indicator.descending, window.print treeview.dialog-action-box > header > button sort-indicator.descending { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +columnview button.dnd:active, columnview button.dnd:selected, columnview button.dnd:hover, columnview button.dnd, treeview.view button.dnd, window.print treeview.dialog-action-box button.dnd, +columnview header.button.dnd:active, +columnview header.button.dnd:selected, +columnview header.button.dnd:hover, +columnview header.button.dnd, +treeview.view header.button.dnd, +window.print treeview.dialog-action-box header.button.dnd { + color: @accent_fg_color; + background-color: @accent_bg_color; + transition: none; +} + +columnview.view > listview.view, treeview.view > listview.view, window.print columnview.dialog-action-box > listview.view, window.print treeview.dialog-action-box > listview.view, window.print columnview.view > listview.dialog-action-box, window.print treeview.view > listview.dialog-action-box, window.print columnview.dialog-action-box > listview.dialog-action-box, window.print treeview.dialog-action-box > listview.dialog-action-box { + background: none; + color: inherit; +} + +columnview > listview > row, treeview.view > listview > row, window.print treeview.dialog-action-box > listview > row { + padding: 0; +} + +columnview > listview > row > cell, treeview.view > listview > row > cell, window.print treeview.dialog-action-box > listview > row > cell { + padding: 8px 6px; +} + +columnview > listview > row > cell:not(:first-child), treeview.view > listview > row > cell:not(:first-child), window.print treeview.dialog-action-box > listview > row > cell:not(:first-child) { + border-left: 1px solid transparent; +} + +columnview.column-separators > listview > row > cell, treeview.column-separators.view > listview > row > cell, window.print treeview.column-separators.dialog-action-box > listview > row > cell, +columnview.column-separators > header > button, +treeview.column-separators.view > header > button, +window.print treeview.column-separators.dialog-action-box > header > button { + border-left-color: alpha(currentColor,0.12); +} + +columnview > listview:not(.horizontal).separators > row:not(.separator), treeview.view > listview:not(.horizontal).separators > row:not(.separator), window.print treeview.dialog-action-box > listview:not(.horizontal).separators > row:not(.separator) { + border-top: 1px solid alpha(currentColor,0.12); + border-bottom: none; +} + +columnview.data-table > listview > row > cell, treeview.data-table.view > listview > row > cell, window.print treeview.data-table.dialog-action-box > listview > row > cell { + padding-top: 3px; + padding-bottom: 3px; +} + +columnview ~ undershoot.top, treeview.view ~ undershoot.top, window.print treeview.dialog-action-box ~ undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +columnview row:not(:selected) cell editablelabel:not(.editing):focus-within, treeview.view row:not(:selected) cell editablelabel:not(.editing):focus-within, window.print treeview.dialog-action-box row:not(:selected) cell editablelabel:not(.editing):focus-within { + outline: 2px solid alpha(@accent_color,0.45); +} + +columnview row:not(:selected) cell editablelabel.editing:focus-within, treeview.view row:not(:selected) cell editablelabel.editing:focus-within, window.print treeview.dialog-action-box row:not(:selected) cell editablelabel.editing:focus-within { + outline: 2px solid @accent_color; +} + +treeexpander { + border-spacing: 4px; +} + +.dialog-action-area { + margin: 6px; + border-spacing: 6px; +} + +/**************** + * Print dialog * +*****************/ +window.print drawing { + color: @window_fg_color; + background: none; + border: none; + padding: 0; +} + +window.print drawing paper { + background-color: white; + color: rgba(0, 0, 0, 0.8); + background-clip: padding-box; + border: 1px solid alpha(currentColor,0.12); +} + +/******************** + * Page setup dalog * + ********************/ +/****************** + * GtkAboutDialog * + ******************/ +window.aboutdialog image.large-icons { + -gtk-icon-size: 128px; +} + +/************************* + * GtkColorChooserDialog * + *************************/ +/************* + * AdwDialog * + *************/ +floating-sheet > dimming { + background-color: alpha(@shade_color,2); +} + +floating-sheet > sheet { + border-radius: 12px; + box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.07), 0 3px 20px 10px rgba(0, 0, 0, 0.05), 0 6px 32px 16px rgba(0, 0, 0, 0.02), 0 0 0 1px @shade_color; + outline: 1px solid rgba(255, 255, 255, 0.08); + outline-offset: -1px; +} + +dialog.bottom-sheet.landscape sheet { + margin-left: 30px; + margin-right: 30px; +} + +dialog.bottom-sheet.landscape sheet > outline.flush-left, dialog.bottom-sheet.landscape sheet > outline.flush-right, dialog.bottom-sheet.landscape sheet > outline.flush-left.flush-right { + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.08); +} + +dialog-host > dialog.background { + background: none; +} + +dialog-host > dialog.background sheet { + background-color: @window_bg_color; + color: @window_fg_color; +} + +dialog-host > dialog.view, window.print dialog-host > dialog.dialog-action-box { + background: none; +} + +dialog-host > dialog.osd { + background: none; +} + +/*********************** + * GtkAppChooserDialog * + ***********************/ +window.appchooser headerbar.titlebar > windowhandle { + padding-top: 3px; +} + +window.appchooser headerbar.titlebar box.start + box { + margin-top: -6px; + margin-bottom: -6px; + min-height: 12px; +} + +window.appchooser searchbar { + background: none; +} + +window.appchooser .dialog-vbox > box > box:not(.dialog-action-area) { + margin: 6px; +} + +window.appchooser .dialog-action-area { + margin-top: 0; +} + +/**************** + * GtkAssistant * + ****************/ +window.assistant .sidebar { + padding: 6px; + background-color: @sidebar_bg_color; + color: @sidebar_fg_color; +} + +window.assistant .sidebar:not(separator):dir(ltr) { + border-right: none; + box-shadow: inset -1px 0 alpha(currentColor,0.12); +} + +window.assistant .sidebar:not(separator):dir(rtl) { + box-shadow: inset 1px 0 alpha(currentColor,0.12); +} + +window.assistant .sidebar:backdrop { + background-color: @sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +window.assistant .sidebar > label { + padding: 6px 12px; + border-radius: 6px; +} + +window.assistant .sidebar > label.highlight { + background-color: alpha(currentColor,0.1); +} + +/*************** + * GtkComboBox * + ***************/ +combobox button { + padding-top: 2px; + padding-bottom: 2px; + min-height: 30px; +} + +/*************** + * GtkIconView * + ***************/ +iconview { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +iconview:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +iconview:drop(active) { + box-shadow: none; +} + +iconview > dndtarget:drop(active) { + border-style: solid; + border-width: 1px; + border-color: @accent_bg_color; +} + +/************** + * GtkInfoBar * + **************/ +infobar > revealer > box { + padding: 6px; + padding-bottom: 7px; + border-spacing: 6px; + box-shadow: inset 0 -1px alpha(currentColor,0.12); +} + +infobar > revealer > box > box { + border-spacing: 6px; +} + +infobar.action:hover > revealer > box { + background-image: image(alpha(currentColor,0.05)); +} + +infobar.action:active > revealer > box { + background-image: image(alpha(currentColor,0.1)); +} + +infobar.info > revealer > box { + background-color: mix(@accent_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar.question > revealer > box { + background-color: mix(@accent_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar.warning > revealer > box { + background-color: mix(@warning_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar.error > revealer > box { + background-color: mix(@error_bg_color,@window_bg_color,0.7); + color: @window_fg_color; +} + +infobar .close { + min-width: 18px; + min-height: 18px; + padding: 4px; + border-radius: 50%; +} + +/**************** + * GtkStatusBar * + ****************/ +statusbar { + padding: 6px 10px 6px 10px; +} + +/*************** + * GtkTreeView * + ***************/ +treeview.view, window.print treeview.dialog-action-box { + border-left-color: mix(currentColor,@view_bg_color,0.8); + border-top-color: mix(currentColor,@view_bg_color,0.8); +} + +treeview.view:selected:focus, treeview.view:selected, window.print treeview.dialog-action-box:selected { + border-radius: 0; +} + +treeview.view.separator, window.print treeview.separator.dialog-action-box { + min-height: 2px; + color: alpha(currentColor,0.12); +} + +treeview.view.expander, window.print treeview.expander.dialog-action-box { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); + color: alpha(currentColor,0.7); +} + +treeview.view.expander:dir(rtl), window.print treeview.expander.dialog-action-box:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); +} + +treeview.view.expander:hover, window.print treeview.expander.dialog-action-box:hover, treeview.view.expander:active, window.print treeview.expander.dialog-action-box:active { + color: currentColor; +} + +treeview.view.expander:checked, window.print treeview.expander.dialog-action-box:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +treeview.view.expander:disabled, window.print treeview.expander.dialog-action-box:disabled { + color: alpha(currentColor,0.45); +} + +treeview.view > dndtarget:drop(active), window.print treeview.dialog-action-box > dndtarget:drop(active) { + border-style: solid none; + border-width: 1px; + border-color: @accent_bg_color; +} + +treeview.view > dndtarget:drop(active).after, window.print treeview.dialog-action-box > dndtarget:drop(active).after { + border-top-style: none; +} + +treeview.view > dndtarget:drop(active).before, window.print treeview.dialog-action-box > dndtarget:drop(active).before { + border-bottom-style: none; +} + +treeview.view > header > button, window.print treeview.dialog-action-box > header > button { + padding-left: 6px; + padding-right: 6px; +} + +treeview.view.progressbar, window.print treeview.progressbar.dialog-action-box { + box-shadow: none; +} + +treeview.view.progressbar, window.print treeview.progressbar.dialog-action-box, treeview.view.progressbar:selected { + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +treeview.view.trough, window.print treeview.trough.dialog-action-box { + background-color: alpha(currentColor,0.1); +} + +treeview.view ~ undershoot.top, window.print treeview.dialog-action-box ~ undershoot.top { + box-shadow: none; + background: none; +} + +treeview.view acceleditor > label, window.print treeview.dialog-action-box acceleditor > label { + background-color: mix(currentColor,@view_bg_color,0.9); +} + +treeview.navigation-sidebar { + padding: 0; +} + +treeview.navigation-sidebar:selected:focus, treeview.navigation-sidebar:selected { + background-color: alpha(currentColor,0.1); +} + +treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { + background-color: @view_bg_color; + transition-property: color, background; +} + +treeview entry.flat, treeview entry { + border-radius: 0; + background-image: none; + background-color: @view_bg_color; +} + +treeview entry.flat:focus-within, treeview entry:focus-within { + border-color: @accent_color; +} + +treeview spinbutton:not(.vertical) { + min-height: 0; + border-style: none; + border-radius: 0; +} + +treeview spinbutton:not(.vertical) > text { + min-height: 0; + padding: 1px 2px; +} + +.sidebar:not(separator):dir(ltr), .sidebar:not(separator).left, .sidebar:not(separator).left:dir(rtl) { + border-right: 1px solid alpha(currentColor,0.12); + border-left-style: none; +} + +.sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { + border-left: 1px solid alpha(currentColor,0.12); + border-right-style: none; +} + +.sidebar listview.view, .sidebar window.print listview.dialog-action-box, window.print .sidebar listview.dialog-action-box, +.sidebar list { + background-color: transparent; + color: inherit; +} + +paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar, .sidebar-pane .sidebar.left, .sidebar-pane .sidebar.right, .sidebar-pane .sidebar.left:dir(rtl), .sidebar-pane .sidebar:dir(rtl), .sidebar-pane .sidebar:dir(ltr), .sidebar-pane .sidebar { + border-style: none; +} + +.large-title { + font-weight: 300; + font-size: 24pt; +} + +dropdown > button > box, combobox > button > box { + border-spacing: 6px; +} + +dropdown > button > box > stack > row.activatable:hover, combobox > button > box > stack > row.activatable:hover, dropdown > button > box > stack > row.activatable:active, combobox > button > box > stack > row.activatable:active { + background: none; +} + +dropdown arrow, combobox arrow { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); + min-height: 16px; + min-width: 16px; +} + +dropdown:drop(active), combobox:drop(active) { + box-shadow: none; +} + +dropdown popover.menu, combobox popover.menu { + padding-top: 6px; +} + +dropdown popover.menu listview > row, combobox popover.menu listview > row { + min-width: 0; +} + +dropdown popover.menu .dropdown-searchbar, combobox popover.menu .dropdown-searchbar { + padding: 6px; +} + +dropdown popover.menu .dropdown-searchbar + scrolledwindow > undershoot.top, combobox popover.menu .dropdown-searchbar + scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover.emoji-picker > contents { + padding: 0; +} + +.emoji-searchbar { + padding: 6px; +} + +.emoji-toolbar { + padding: 3px; +} + +button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + min-width: 32px; + min-height: 32px; +} + +popover.emoji-picker emoji { + font-size: x-large; + padding: 6px; + border-radius: 6px; +} + +popover.emoji-picker emoji:focus, popover.emoji-picker emoji:hover { + background: alpha(currentColor,0.07); +} + +popover.emoji-picker emoji:active { + background: alpha(currentColor,0.16); +} + +popover.emoji-picker scrolledwindow.view, popover.emoji-picker window.print scrolledwindow.dialog-action-box, window.print popover.emoji-picker scrolledwindow.dialog-action-box { + background: none; + color: inherit; +} + +popover.emoji-picker scrolledwindow.view > undershoot.top, popover.emoji-picker window.print scrolledwindow.dialog-action-box > undershoot.top, window.print popover.emoji-picker scrolledwindow.dialog-action-box > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover.emoji-picker scrolledwindow.view > undershoot.bottom, popover.emoji-picker window.print scrolledwindow.dialog-action-box > undershoot.bottom, window.print popover.emoji-picker scrolledwindow.dialog-action-box > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover.emoji-completion > contents { + padding: 6px; + padding-bottom: 4px; +} + +emoji-completion-row { + padding: 6px; + margin-bottom: 2px; + border-radius: 6px; +} + +emoji-completion-row:dir(ltr) { + padding-right: 12px; +} + +emoji-completion-row:dir(rtl) { + padding-left: 12px; +} + +emoji-completion-row > box { + border-spacing: 6px; +} + +emoji-completion-row:focus, emoji-completion-row:hover { + background-color: alpha(currentColor,0.1); + color: @popover_fg_color; +} + +emoji-completion-row:active { + background-color: alpha(currentColor,0.16); +} + +spinbutton, +entry { + min-height: 36px; + padding-left: 9px; + padding-right: 9px; + border-radius: 6px; + border-spacing: 6px; + background-color: alpha(currentColor,0.05); + background-clip: padding-box; + caret-color: currentColor; +} + +spinbutton, +entry { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton:focus-within, +entry:focus-within { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd spinbutton:focus-within, .osd entry:focus-within { + outline-color: rgba(255, 255, 255, 0.5); +} + +spinbutton > text > block-cursor, +entry > text > block-cursor { + color: @view_bg_color; + background-color: @view_fg_color; +} + +spinbutton.flat, +entry.flat:focus-within, +entry.flat:disabled, +entry.flat { + min-height: 0; + padding: 2px; + background-color: transparent; + box-shadow: none; + border-radius: 0; +} + +spinbutton:disabled, +entry:disabled { + filter: opacity(0.45); +} + +spinbutton.error, +entry.error { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton.error:focus-within, +entry.error:focus-within { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +spinbutton.error > text > selection:focus-within, +entry.error > text > selection:focus-within { + background-color: alpha(@error_color,0.2); +} + +spinbutton.error > text > cursor-handle > contents, +entry.error > text > cursor-handle > contents { + background-color: currentColor; +} + +spinbutton.error > progress > trough > progress, +entry.error > progress > trough > progress { + border-color: currentColor; +} + +spinbutton.warning, +entry.warning { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton.warning:focus-within, +entry.warning:focus-within { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +spinbutton.warning > text > selection:focus-within, +entry.warning > text > selection:focus-within { + background-color: alpha(@warning_color,0.2); +} + +spinbutton.warning > text > cursor-handle > contents, +entry.warning > text > cursor-handle > contents { + background-color: currentColor; +} + +spinbutton.warning > progress > trough > progress, +entry.warning > progress > trough > progress { + border-color: currentColor; +} + +spinbutton.success, +entry.success { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +spinbutton.success:focus-within, +entry.success:focus-within { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +spinbutton.success > text > selection:focus-within, +entry.success > text > selection:focus-within { + background-color: alpha(@success_color,0.2); +} + +spinbutton.success > text > cursor-handle > contents, +entry.success > text > cursor-handle > contents { + background-color: currentColor; +} + +spinbutton.success > progress > trough > progress, +entry.success > progress > trough > progress { + border-color: currentColor; +} + +spinbutton > image, +entry > image { + opacity: .7; +} + +spinbutton > image:hover, +entry > image:hover { + opacity: 1; +} + +spinbutton > image:active, +entry > image:active { + opacity: .8; +} + +spinbutton > image.left, +entry > image.left { + margin-right: 6px; +} + +spinbutton > image.right, +entry > image.right { + margin-left: 6px; +} + +spinbutton.password image.caps-lock-indicator, +entry.password image.caps-lock-indicator { + opacity: 0.3; +} + +spinbutton:drop(active), +entry:drop(active):focus-within, +entry:drop(active) { + border-color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; +} + +spinbutton > progress, +entry > progress { + margin-bottom: 3px; +} + +spinbutton > progress > trough > progress, +entry > progress > trough > progress { + background-color: transparent; + background-image: none; + border-radius: 0; + border-width: 0 0 2px; + border-color: @accent_bg_color; + border-style: solid; + box-shadow: none; +} + +.osd spinbutton > progress > trough > progress, .osd entry > progress > trough > progress { + border-color: rgba(255, 255, 255, 0.75); +} + +expander { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + +expander:dir(rtl) { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); +} + +expander:disabled { + filter: opacity(0.45); +} + +expander:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +expander-widget > box > title { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +expander-widget:focus:focus-visible > box > title { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +expander-widget > box > title { + border-radius: 6px; +} + +expander-widget > box > title > expander { + opacity: .7; +} + +expander-widget > box > title:hover > expander, expander-widget > box > title:active > expander { + opacity: 1; +} + +placessidebar .navigation-sidebar > row { + padding: 0; +} + +placessidebar .navigation-sidebar > row > revealer { + padding: 0 14px; +} + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(ltr) { + padding-right: 8px; +} + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(rtl) { + padding-left: 8px; +} + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(ltr) { + padding-right: 2px; +} + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(rtl) { + padding-left: 2px; +} + +button.sidebar-button { + min-height: 26px; + min-width: 26px; + margin-top: 3px; + margin-bottom: 3px; + padding: 0; + border-radius: 100%; +} + +placessidebar .navigation-sidebar > row:selected:active { + box-shadow: none; +} + +placessidebar .navigation-sidebar > row.sidebar-placeholder-row { + padding: 0 8px; + min-height: 2px; + background-image: image(@accent_bg_color); + background-clip: content-box; +} + +placessidebar .navigation-sidebar > row.sidebar-new-bookmark-row { + color: @accent_color; +} + +placessidebar .navigation-sidebar > row:drop(active):not(:disabled) { + color: @accent_bg_color; + box-shadow: inset 0 0 0 1px @accent_bg_color; +} + +row image.sidebar-icon { + opacity: 0.7; +} + +row .sidebar-button { + opacity: 0.7; +} + +row .sidebar-button:hover, row .sidebar-button:active, row .sidebar-button.keyboard-activating { + opacity: 1; +} + +placesview .server-list-button > image { + transition: -gtk-icon-transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + -gtk-icon-transform: rotate(0turn); +} + +placesview .server-list-button:checked > image { + -gtk-icon-transform: rotate(-0.5turn); +} + +placesview > actionbar > revealer > box > box { + border-spacing: 6px; +} + +filechooser { + box-shadow: 0 1px alpha(currentColor,0.12); +} + +filechooser #pathbarbox { + border-bottom: 1px solid alpha(currentColor,0.12); +} + +filechooser pathbar button:not(.image-button) { + padding-left: 9px; + padding-right: 9px; +} + +filechooser pathbar button > box { + border-spacing: 4px; +} + +filechooser pathbar button > box > label { + padding-left: 2px; + padding-right: 2px; +} + +filechooser columnview > listview > row > cell, filechooser treeview.view > listview > row > cell, filechooser window.print treeview.dialog-action-box > listview > row > cell, window.print filechooser treeview.dialog-action-box > listview > row > cell { + padding: 0; +} + +filechooser columnview > listview > row > cell > filelistcell, filechooser treeview.view > listview > row > cell > filelistcell, filechooser window.print treeview.dialog-action-box > listview > row > cell > filelistcell, window.print filechooser treeview.dialog-action-box > listview > row > cell > filelistcell { + padding: 8px 6px; +} + +filechooser gridview { + padding: 15px; +} + +filechooser gridview ~ undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +filechooser gridview > child { + border-radius: 12px; + padding: 0; + margin: 3px; +} + +filechooser gridview > child > filelistcell { + padding: 6px 12px; +} + +filechooser gridview > child filethumbnail image { + filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); +} + +filechooser gridview > child box { + border-spacing: 6px; +} + +filechooser > box > actionbar { + box-shadow: 0 -1px alpha(currentColor,0.12); +} + +filechooser > box > actionbar > revealer > box { + box-shadow: none; + padding-top: 6px; +} + +filechooser scrolledwindow + actionbar > revealer > box { + background-color: mix(@accent_bg_color,@view_bg_color,0.7); + color: @window_fg_color; + box-shadow: none; + padding-top: 6px; + font-weight: bold; +} + +filechooser scrolledwindow + actionbar > revealer > box:backdrop { + background-color: mix(@accent_bg_color,@view_bg_color,0.85); +} + +filechooser placesview > stack > scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +filechooser placesview > actionbar > revealer > box { + background: @view_bg_color; + color: @view_fg_color; + box-shadow: none; + padding-top: 6px; +} + +filechooser placesview > actionbar > revealer > box:backdrop { + background: @view_bg_color; + transition: none; +} + +filechooser placessidebar { + background-color: @sidebar_bg_color; + color: @sidebar_fg_color; +} + +filechooser placessidebar:backdrop { + background-color: @sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +filechooser paned.horizontal > separator:dir(ltr) { + box-shadow: inset 1px 0 @sidebar_bg_color, inset 1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:dir(ltr):backdrop { + box-shadow: inset 1px 0 @sidebar_backdrop_color, inset 1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:dir(rtl) { + box-shadow: inset -1px 0 @sidebar_bg_color, inset -1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:dir(rtl):backdrop { + box-shadow: inset -1px 0 @sidebar_backdrop_color, inset -1px 0 alpha(currentColor,0.12); +} + +filechooser paned.horizontal > separator:backdrop { + transition: box-shadow 200ms ease-out; +} + +/* Fix header bar height in the file chooser */ +window.filechooser headerbar box.start + box.vertical { + margin-top: -6px; + margin-bottom: -6px; + min-height: 12px; +} + +headerbar { + min-height: 48px; + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; + margin: 0; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +headerbar > windowhandle > box { + padding: 6px; +} + +headerbar > windowhandle > box > box.start, +headerbar > windowhandle > box > box.end { + border-spacing: 6px; +} + +headerbar > windowhandle > box > box.start:dir(ltr), +headerbar > windowhandle > box > box.end:dir(rtl), headerbar > windowhandle > box > widget > box.start:dir(ltr), +headerbar > windowhandle > box > widget > box.end:dir(rtl) { + margin-right: 6px; +} + +headerbar > windowhandle > box > box.start:dir(rtl), +headerbar > windowhandle > box > box.end:dir(ltr), headerbar > windowhandle > box > widget > box.start:dir(rtl), +headerbar > windowhandle > box > widget > box.end:dir(ltr) { + margin-left: 6px; +} + +headerbar:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +headerbar:backdrop > windowhandle { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +headerbar.default-decoration { + padding: 0; + margin: 0; + border: none; + min-height: 36px; + background-color: @headerbar_bg_color; + box-shadow: none; +} + +headerbar.default-decoration:backdrop { + background-color: @headerbar_backdrop_color; +} + +headerbar.default-decoration > windowhandle > box { + padding: 3px; +} + +headerbar.default-decoration windowcontrols > button { + min-width: 16px; + min-height: 16px; + margin: 0 4px; + padding: 0; +} + +headerbar.default-decoration windowcontrols > .icon { + margin: 6px; +} + +.maximized headerbar, .fullscreen headerbar, .tiled headerbar, .tiled-top headerbar, .tiled-right headerbar, .tiled-bottom headerbar, .tiled-left headerbar, .solid-csd headerbar { + border-radius: 0; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +window > .titlebar:not(.flat) { + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +window > .titlebar headerbar:not(.flat) { + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +window > headerbar.titlebar, +window > .titlebar headerbar { + min-height: 48px; +} + +window > headerbar.titlebar > windowhandle > box, +window > .titlebar headerbar > windowhandle > box { + padding-bottom: 6px; +} + +window > headerbar.titlebar.default-decoration, +window > .titlebar headerbar.default-decoration { + min-height: 36px; + box-shadow: none; +} + +window > headerbar.titlebar.default-decoration > windowhandle > box, +window > .titlebar headerbar.default-decoration > windowhandle > box { + padding: 3px; +} + +leaflet:first-child > headerbar + separator { + background-color: @headerbar_backdrop_color; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +leaflet:first-child > headerbar + separator:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +toolbarview > .top-bar headerbar, +toolbarview > .bottom-bar headerbar, headerbar.flat, window.shortcuts headerbar.titlebar, window.print headerbar.titlebar, window.pagesetup headerbar.titlebar, window.aboutdialog headerbar.titlebar, window.colorchooser headerbar.titlebar, window.appchooser headerbar.titlebar { + background: none; + color: inherit; + min-height: 48px; + box-shadow: none; +} + +toolbarview > .top-bar headerbar > windowhandle > box, +toolbarview > .bottom-bar headerbar > windowhandle > box, headerbar.flat > windowhandle > box, window.shortcuts headerbar.titlebar > windowhandle > box, window.print headerbar.titlebar > windowhandle > box, window.pagesetup headerbar.titlebar > windowhandle > box, window.aboutdialog headerbar.titlebar > windowhandle > box, window.colorchooser headerbar.titlebar > windowhandle > box, window.appchooser headerbar.titlebar > windowhandle > box { + padding-bottom: 6px; +} + +toolbarview > .top-bar headerbar.default-decoration, +toolbarview > .bottom-bar headerbar.default-decoration, headerbar.default-decoration.flat, window.shortcuts headerbar.default-decoration.titlebar, window.print headerbar.default-decoration.titlebar, window.pagesetup headerbar.default-decoration.titlebar, window.aboutdialog headerbar.default-decoration.titlebar, window.colorchooser headerbar.default-decoration.titlebar, window.appchooser headerbar.default-decoration.titlebar { + min-height: 36px; +} + +toolbarview > .top-bar headerbar.default-decoration > windowhandle > box, +toolbarview > .bottom-bar headerbar.default-decoration > windowhandle > box, headerbar.default-decoration.flat > windowhandle > box, window.shortcuts headerbar.default-decoration.titlebar > windowhandle > box, window.print headerbar.default-decoration.titlebar > windowhandle > box, window.pagesetup headerbar.default-decoration.titlebar > windowhandle > box, window.aboutdialog headerbar.default-decoration.titlebar > windowhandle > box, window.colorchooser headerbar.default-decoration.titlebar > windowhandle > box, window.appchooser headerbar.default-decoration.titlebar > windowhandle > box { + padding: 3px; +} + +.maximized toolbarview > .top-bar headerbar, toolbarview > .top-bar .maximized headerbar, +.maximized toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .maximized headerbar, .maximized headerbar.flat, .maximized window.shortcuts headerbar.titlebar, window.shortcuts .maximized headerbar.titlebar, .maximized window.print headerbar.titlebar, window.print .maximized headerbar.titlebar, .maximized window.pagesetup headerbar.titlebar, window.pagesetup .maximized headerbar.titlebar, .maximized window.aboutdialog headerbar.titlebar, window.aboutdialog .maximized headerbar.titlebar, .maximized window.colorchooser headerbar.titlebar, window.colorchooser .maximized headerbar.titlebar, .maximized window.appchooser headerbar.titlebar, window.appchooser .maximized headerbar.titlebar, .fullscreen toolbarview > .top-bar headerbar, toolbarview > .top-bar .fullscreen headerbar, +.fullscreen toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .fullscreen headerbar, .fullscreen headerbar.flat, .fullscreen window.shortcuts headerbar.titlebar, window.shortcuts .fullscreen headerbar.titlebar, .fullscreen window.print headerbar.titlebar, window.print .fullscreen headerbar.titlebar, .fullscreen window.pagesetup headerbar.titlebar, window.pagesetup .fullscreen headerbar.titlebar, .fullscreen window.aboutdialog headerbar.titlebar, window.aboutdialog .fullscreen headerbar.titlebar, .fullscreen window.colorchooser headerbar.titlebar, window.colorchooser .fullscreen headerbar.titlebar, .fullscreen window.appchooser headerbar.titlebar, window.appchooser .fullscreen headerbar.titlebar, .tiled toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled headerbar, +.tiled toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled headerbar, .tiled headerbar.flat, .tiled window.shortcuts headerbar.titlebar, window.shortcuts .tiled headerbar.titlebar, .tiled window.print headerbar.titlebar, window.print .tiled headerbar.titlebar, .tiled window.pagesetup headerbar.titlebar, window.pagesetup .tiled headerbar.titlebar, .tiled window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled headerbar.titlebar, .tiled window.colorchooser headerbar.titlebar, window.colorchooser .tiled headerbar.titlebar, .tiled window.appchooser headerbar.titlebar, window.appchooser .tiled headerbar.titlebar, .tiled-top toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-top headerbar, +.tiled-top toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-top headerbar, .tiled-top headerbar.flat, .tiled-top window.shortcuts headerbar.titlebar, window.shortcuts .tiled-top headerbar.titlebar, .tiled-top window.print headerbar.titlebar, window.print .tiled-top headerbar.titlebar, .tiled-top window.pagesetup headerbar.titlebar, window.pagesetup .tiled-top headerbar.titlebar, .tiled-top window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-top headerbar.titlebar, .tiled-top window.colorchooser headerbar.titlebar, window.colorchooser .tiled-top headerbar.titlebar, .tiled-top window.appchooser headerbar.titlebar, window.appchooser .tiled-top headerbar.titlebar, .tiled-right toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-right headerbar, +.tiled-right toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-right headerbar, .tiled-right headerbar.flat, .tiled-right window.shortcuts headerbar.titlebar, window.shortcuts .tiled-right headerbar.titlebar, .tiled-right window.print headerbar.titlebar, window.print .tiled-right headerbar.titlebar, .tiled-right window.pagesetup headerbar.titlebar, window.pagesetup .tiled-right headerbar.titlebar, .tiled-right window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-right headerbar.titlebar, .tiled-right window.colorchooser headerbar.titlebar, window.colorchooser .tiled-right headerbar.titlebar, .tiled-right window.appchooser headerbar.titlebar, window.appchooser .tiled-right headerbar.titlebar, .tiled-bottom toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-bottom headerbar, +.tiled-bottom toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-bottom headerbar, .tiled-bottom headerbar.flat, .tiled-bottom window.shortcuts headerbar.titlebar, window.shortcuts .tiled-bottom headerbar.titlebar, .tiled-bottom window.print headerbar.titlebar, window.print .tiled-bottom headerbar.titlebar, .tiled-bottom window.pagesetup headerbar.titlebar, window.pagesetup .tiled-bottom headerbar.titlebar, .tiled-bottom window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-bottom headerbar.titlebar, .tiled-bottom window.colorchooser headerbar.titlebar, window.colorchooser .tiled-bottom headerbar.titlebar, .tiled-bottom window.appchooser headerbar.titlebar, window.appchooser .tiled-bottom headerbar.titlebar, .tiled-left toolbarview > .top-bar headerbar, toolbarview > .top-bar .tiled-left headerbar, +.tiled-left toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .tiled-left headerbar, .tiled-left headerbar.flat, .tiled-left window.shortcuts headerbar.titlebar, window.shortcuts .tiled-left headerbar.titlebar, .tiled-left window.print headerbar.titlebar, window.print .tiled-left headerbar.titlebar, .tiled-left window.pagesetup headerbar.titlebar, window.pagesetup .tiled-left headerbar.titlebar, .tiled-left window.aboutdialog headerbar.titlebar, window.aboutdialog .tiled-left headerbar.titlebar, .tiled-left window.colorchooser headerbar.titlebar, window.colorchooser .tiled-left headerbar.titlebar, .tiled-left window.appchooser headerbar.titlebar, window.appchooser .tiled-left headerbar.titlebar, .solid-csd toolbarview > .top-bar headerbar, toolbarview > .top-bar .solid-csd headerbar, +.solid-csd toolbarview > .bottom-bar headerbar, +toolbarview > .bottom-bar .solid-csd headerbar, .solid-csd headerbar.flat, .solid-csd window.shortcuts headerbar.titlebar, window.shortcuts .solid-csd headerbar.titlebar, .solid-csd window.print headerbar.titlebar, window.print .solid-csd headerbar.titlebar, .solid-csd window.pagesetup headerbar.titlebar, window.pagesetup .solid-csd headerbar.titlebar, .solid-csd window.aboutdialog headerbar.titlebar, window.aboutdialog .solid-csd headerbar.titlebar, .solid-csd window.colorchooser headerbar.titlebar, window.colorchooser .solid-csd headerbar.titlebar, .solid-csd window.appchooser headerbar.titlebar, window.appchooser .solid-csd headerbar.titlebar { + box-shadow: none; +} + +toolbarview > .top-bar headerbar:backdrop, +toolbarview > .bottom-bar headerbar:backdrop { + transition: none; +} + +toolbarview > .top-bar headerbar:backdrop > windowhandle, +toolbarview > .bottom-bar headerbar:backdrop > windowhandle { + filter: none; + transition: none; +} + +window.devel toolbarview > .top-bar headerbar > windowhandle, toolbarview > .top-bar window.devel headerbar > windowhandle, +window.devel toolbarview > .bottom-bar headerbar > windowhandle, +toolbarview > .bottom-bar window.devel headerbar > windowhandle { + background-image: none; +} + +toolbarview > .top-bar .collapse-spacing headerbar, +toolbarview > .bottom-bar .collapse-spacing headerbar, window.shortcuts headerbar.titlebar, window.appchooser headerbar.titlebar { + min-height: 42px; +} + +toolbarview > .top-bar .collapse-spacing headerbar > windowhandle > box, +toolbarview > .bottom-bar .collapse-spacing headerbar > windowhandle > box, window.shortcuts headerbar.titlebar > windowhandle > box, window.appchooser headerbar.titlebar > windowhandle > box { + padding-top: 3px; + padding-bottom: 3px; +} + +toolbarview > .top-bar .collapse-spacing headerbar.default-decoration, +toolbarview > .bottom-bar .collapse-spacing headerbar.default-decoration, window.shortcuts headerbar.default-decoration.titlebar, window.appchooser headerbar.default-decoration.titlebar { + min-height: 36px; +} + +toolbarview > .top-bar .collapse-spacing headerbar.default-decoration > windowhandle > box, +toolbarview > .bottom-bar .collapse-spacing headerbar.default-decoration > windowhandle > box, window.shortcuts headerbar.default-decoration.titlebar > windowhandle > box, window.appchooser headerbar.default-decoration.titlebar > windowhandle > box { + padding-top: 0px; + padding-bottom: 0px; +} + +.titlebar:not(headerbar) separator { + background-color: alpha(@headerbar_border_color,0.12); +} + +/********************* + * GtkWindowControls * + *********************/ +windowcontrols > button { + min-height: 16px; + min-width: 16px; + padding: 10px 0; + margin-left: 4px; + margin-right: 4px; + box-shadow: none; +} + +windowcontrols > button.minimize, windowcontrols > button.maximize, windowcontrols > button.close { + color: transparent; + background: none; +} + +windowcontrols > button.minimize:hover, windowcontrols > button.minimize:active, windowcontrols > button.maximize:hover, windowcontrols > button.maximize:active, windowcontrols > button.close:hover, windowcontrols > button.close:active { + box-shadow: none; +} + +windowcontrols > button.minimize:active > image, windowcontrols > button.maximize:active > image, windowcontrols > button.close:active > image { + background-color: alpha(black,0.25); +} + +windowcontrols > button.minimize:hover, windowcontrols > button.minimize:active, windowcontrols > button.maximize:hover, windowcontrols > button.maximize:active, windowcontrols > button.close:hover, windowcontrols > button.close:active { + color: white; +} + +windowcontrols > button.minimize:backdrop > image, windowcontrols > button.maximize:backdrop > image, windowcontrols > button.close:backdrop > image { + background-color: alpha(@headerbar_fg_color,0.3); +} + +windowcontrols > button.minimize:backdrop:hover, windowcontrols > button.minimize:backdrop:active, windowcontrols > button.maximize:backdrop:hover, windowcontrols > button.maximize:backdrop:active, windowcontrols > button.close:backdrop:hover, windowcontrols > button.close:backdrop:active { + color: alpha(@headerbar_fg_color,0.45); +} + +windowcontrols > button.minimize > image { + background-color: #fdbe04; +} + +windowcontrols > button.minimize:active > image { + background-color: mix(@headerbar_fg_color,#fdbe04,0.75); +} + +windowcontrols > button.maximize > image { + background-color: #38c76a; +} + +windowcontrols > button.maximize:active > image { + background-color: mix(@headerbar_fg_color,#38c76a,0.75); +} + +windowcontrols > button.close > image { + background-color: #fd5f51; +} + +windowcontrols > button.close:active > image { + background-color: mix(@headerbar_fg_color,#fd5f51,0.75); +} + +windowcontrols { + border-spacing: 6px; +} + +windowcontrols:not(.empty).start:dir(ltr), windowcontrols:not(.empty).end:dir(rtl) { + margin-right: 6px; + margin-left: 6px; +} + +windowcontrols:not(.empty).start:dir(rtl), windowcontrols:not(.empty).end:dir(ltr) { + margin-left: 6px; + margin-right: 6px; +} + +windowcontrols > button > image { + padding: 0; + border-radius: 100%; + transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +windowcontrols > .icon { + margin: 9px; +} + +/****************** + * AdwWindowTitle * + ******************/ +headerbar .title, +windowtitle .title { + padding-left: 12px; + padding-right: 12px; + font-weight: bold; +} + +headerbar .subtitle, +windowtitle .subtitle { + font-size: smaller; + padding-left: 12px; + padding-right: 12px; +} + +windowtitle { + margin-top: -6px; + margin-bottom: -6px; + min-height: 12px; +} + +window.devel headerbar > windowhandle { + background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")), image(transparent)); + background-repeat: repeat-x; +} + +window.devel dialog headerbar > windowhandle { + background-image: unset; + background-repeat: unset; +} + +label { + caret-color: currentColor; +} + +label:disabled { + filter: opacity(0.45); +} + +.dim-label, scale > value, progressbar > text, row.expander image.expander-row-arrow, row.property > box.header > box.title > .title, row.expander.property box > list > row > box.header > box.title > .title, row label.subtitle, spinbutton > text > placeholder, +entry > text > placeholder, headerbar .subtitle, +windowtitle .subtitle, label.separator { + opacity: 0.55; +} + +.accent { + color: @accent_color; +} + +.success { + color: @success_color; +} + +.warning { + color: @warning_color; +} + +.error { + color: @error_color; +} + +/********************** + * General Typography * + **********************/ +.title-1 { + font-weight: 800; + font-size: 20pt; +} + +.title-2 { + font-weight: 800; + font-size: 15pt; +} + +.title-3 { + font-weight: 700; + font-size: 15pt; +} + +.title-4 { + font-weight: 700; + font-size: 13pt; +} + +.heading, row.button .title, listview > header { + font-weight: 700; + font-size: 11pt; +} + +.body { + font-weight: 400; + font-size: 11pt; +} + +.caption-heading { + font-weight: 700; + font-size: 9pt; +} + +.caption { + font-weight: 400; + font-size: 9pt; +} + +.monospace { + font-family: monospace; +} + +.numeric, spinbutton, scale > value, progressbar > text { + font-feature-settings: "tnum"; +} + +/******************* + * Editable Labels * + *******************/ +editablelabel > stack > text { + color: @view_fg_color; + background-color: @view_bg_color; +} + +levelbar:disabled { + filter: opacity(0.45); +} + +levelbar.horizontal trough > block { + min-height: 8px; + border-radius: 99px; +} + +levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { + border-radius: 99px; +} + +levelbar.horizontal.discrete > trough > block { + min-height: 8px; + margin-right: 2px; + min-width: 26px; + border-radius: 0; +} + +levelbar.horizontal.discrete > trough > block:first-child { + border-radius: 99px 0 0 99px; +} + +levelbar.horizontal.discrete > trough > block:last-child { + border-radius: 0 99px 99px 0; + margin-right: 0; +} + +levelbar.vertical trough > block { + min-width: 8px; + border-radius: 99px; +} + +levelbar.vertical trough > block.empty, levelbar.vertical trough > block.full { + border-radius: 99px; +} + +levelbar.vertical.discrete > trough > block { + min-width: 8px; + margin-bottom: 2px; + min-height: 26px; + border-radius: 0; +} + +levelbar.vertical.discrete > trough > block:first-child { + border-radius: 99px 99px 0 0; +} + +levelbar.vertical.discrete > trough > block:last-child { + border-radius: 0 0 99px 99px; + margin-bottom: 0; +} + +levelbar > trough { + padding: 0; +} + +levelbar > trough > block.low { + background-color: @warning_bg_color; +} + +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { + background-color: @accent_bg_color; +} + +levelbar > trough > block.full { + background-color: @success_bg_color; +} + +levelbar > trough > block.empty { + background-color: alpha(currentColor,0.15); +} + +.osd levelbar > trough > block.high, .osd levelbar > trough > block:not(.empty) { + background-color: rgba(255, 255, 255, 0.75); +} + +.linked:not(.vertical) > button:dir(ltr):not(:first-child), .linked:not(.vertical) > button:dir(rtl):not(:last-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > button:dir(ltr):not(:last-child), .linked:not(.vertical) > button:dir(rtl):not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical button:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical button:not(:last-child) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > menubutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > menubutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > menubutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > menubutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical menubutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical menubutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > dropdown:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > combobox:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > combobox:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > dropdown:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > combobox:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > combobox:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical dropdown:not(:first-child) > button, .linked.vertical combobox:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical dropdown:not(:last-child) > button, .linked.vertical combobox:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > colorbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > colorbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical colorbutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical colorbutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > fontbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > fontbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical fontbutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical fontbutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > tabbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > tabbutton:dir(rtl):not(:last-child) > button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > tabbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > tabbutton:dir(rtl):not(:first-child) > button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical tabbutton:not(:first-child) > button { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical tabbutton:not(:last-child) > button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > spinbutton:dir(ltr):not(:first-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:last-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > spinbutton:dir(ltr):not(:last-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical spinbutton:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical spinbutton:not(:last-child) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > entry:dir(ltr):not(:first-child), .linked:not(.vertical) > entry:dir(rtl):not(:last-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > entry:dir(ltr):not(:last-child), .linked:not(.vertical) > entry:dir(rtl):not(:first-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical entry:not(:first-child) { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical entry:not(:last-child) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > combobox:dir(ltr):not(:first-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:last-child) > box > button.combo { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > combobox:dir(ltr):not(:last-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:first-child) > box > button.combo { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical combobox:not(:first-child) > box > button.combo { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical combobox:not(:last-child) > box > button.combo { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.linked:not(.vertical) > appchooserbutton:dir(ltr):not(:first-child) > combobox > box > button.combo, .linked:not(.vertical) > appchooserbutton:dir(rtl):not(:last-child) > combobox > box > button.combo { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; +} + +.linked:not(.vertical) > appchooserbutton:dir(ltr):not(:last-child) > combobox > box > button.combo, .linked:not(.vertical) > appchooserbutton:dir(rtl):not(:first-child) > combobox > box > button.combo { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.linked.vertical appchooserbutton:not(:first-child) > combobox > box > button.combo { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; +} + +.linked.vertical appchooserbutton:not(:last-child) > combobox > box > button.combo { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +link, +button.link { + color: @accent_color; + text-decoration: underline; + font-weight: inherit; +} + +link:visited, +button.link:visited { + color: mix(@accent_color,@view_fg_color,0.2); +} + +link:hover, +button.link:hover { + color: shade(@accent_color,1.1); +} + +link:active, +button.link:active { + color: @accent_color; +} + +link:disabled, +button.link:disabled { + color: alpha(currentColor,0.45); +} + +.osd link, .osd button.link { + color: mix(@accent_bg_color,white,0.5); +} + +.osd link:visited, .osd button.link:visited { + color: mix(@accent_bg_color,white,0.25); +} + +.osd link:active, .osd button.link:active { + color: mix(@accent_bg_color,white,0.5); +} + +link { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +link:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd link:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +button.link > label { + text-decoration: underline; +} + +listview, +list { + color: @view_fg_color; + background-color: @view_bg_color; + background-clip: padding-box; + border-color: alpha(currentColor,0.12); +} + +listview > row, +list > row { + padding: 2px; + background-clip: padding-box; +} + +listview > row.expander, +list > row.expander { + padding: 0px; +} + +listview > row.expander .row-header, +list > row.expander .row-header { + padding: 2px; +} + +listview.horizontal row.separator, listview.separators.horizontal > row:not(.separator), +list.horizontal row.separator, +list.separators.horizontal > row:not(.separator) { + border-left: 1px solid alpha(currentColor,0.12); +} + +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 alpha(currentColor,0.12); +} + +list.frame { + border-radius: 6px; +} + +listview > header { + padding: 2px; + padding-top: 18px; + padding-bottom: 6px; +} + +row { + background-clip: padding-box; +} + +row { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +.osd row:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +.osd row.activatable:hover { + background-color: alpha(currentColor,0.07); +} + +.osd row.activatable:active { + background-color: alpha(currentColor,0.16); +} + +.osd row.activatable.has-open-popup { + background-color: alpha(currentColor,0.07); +} + +.osd row.activatable:selected:hover { + background-color: alpha(currentColor,0.13); +} + +.osd row.activatable:selected:active { + background-color: alpha(currentColor,0.19); +} + +.osd row.activatable:selected.has-open-popup { + background-color: alpha(currentColor,0.13); +} + +.osd row:selected { + background-color: alpha(currentColor,0.1); +} + +row.activatable { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), font-weight 0; + box-shadow: none; + background-color: transparent; + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; +} + +row.activatable:hover { + background-color: alpha(currentColor,0.04); +} + +row.activatable:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms, font-weight 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.04) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.04); + box-shadow: none; +} + +row.activatable.has-open-popup { + background-color: alpha(currentColor,0.04); +} + +row.activatable:selected:hover { + background-color: alpha(@accent_bg_color,0.32); +} + +row.activatable:selected:active { + background-color: alpha(@accent_bg_color,0.39); +} + +row.activatable:selected.has-open-popup { + background-color: alpha(@accent_bg_color,0.32); +} + +row:selected { + background-color: alpha(@accent_bg_color,0.25); +} + +/******************************************************* + * Rich Lists * + * Large list usually containing lots of widgets * + * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 * + *******************************************************/ +.rich-list { + /* rich lists usually containing other widgets than just labels/text */ +} + +.rich-list > row { + padding: 8px 12px; + min-height: 32px; + /* should be tall even when only containing a label */ +} + +.rich-list > row > box { + border-spacing: 12px; +} + +.rich-list > header { + padding-left: 12px; + padding-right: 12px; +} + +/**************** + * AdwActionRow * + ****************/ +row label.subtitle { + font-size: smaller; +} + +row > box.header { + margin-left: 12px; + margin-right: 12px; + border-spacing: 6px; + min-height: 50px; +} + +row > box.header > .icon:disabled { + filter: opacity(0.45); +} + +row > box.header > box.title { + margin-top: 6px; + margin-bottom: 6px; + border-spacing: 3px; + padding: 0; +} + +row > box.header > box.title, +row > box.header > box.title > .title, +row > box.header > box.title > .subtitle { + padding: 0; + font-weight: inherit; +} + +row > box.header > .prefixes, +row > box.header > .suffixes { + border-spacing: 6px; +} + +row > box.header > .icon:dir(ltr), +row > box.header > .prefixes:dir(ltr) { + margin-right: 6px; +} + +row > box.header > .icon:dir(rtl), +row > box.header > .prefixes:dir(rtl) { + margin-left: 6px; +} + +row.property > box.header > box.title > .title, row.expander.property box > list > row > box.header > box.title > .title { + font-size: smaller; +} + +row.property > box.header > box.title > .subtitle, row.expander.property box > list > row > box.header > box.title > .subtitle { + font-size: inherit; + opacity: 1; +} + +/****************************** + * AdwEntryRow and AdwSpinRow * + ******************************/ +row.entry:disabled text { + opacity: 0.45; +} + +row.entry:disabled .dim-label, row.entry:disabled scale > value, row.entry:disabled progressbar > text, row.entry:disabled row.expander image.expander-row-arrow, row.expander row.entry:disabled image.expander-row-arrow, row.entry:disabled spinbutton > text > placeholder, +row.entry:disabled entry > text > placeholder, row.entry:disabled label.separator, row.entry:disabled row.property > box.header > box.title > .title, row.entry:disabled row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry:disabled box > list > row > box.header > box.title > .title, row.entry:disabled .subtitle { + opacity: 1; +} + +row.entry .edit-icon, row.entry .indicator { + min-width: 22px; + min-height: 22px; + padding: 6px; +} + +row.entry .edit-icon:disabled { + opacity: 0.3; +} + +row.entry .indicator { + opacity: 0.3; +} + +row.entry.monospace { + font-family: inherit; +} + +row.entry.monospace text { + font-family: monospace; +} + +row.spin spinbutton { + background: none; + border-spacing: 6px; + box-shadow: none; +} + +row.spin spinbutton, row.spin spinbutton:focus { + outline: none; +} + +row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child, row.spin spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +row.spin spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child { + min-width: 28px; + min-height: 28px; + margin: 10px 2px; + border: none; +} + +row.spin:disabled spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:disabled, row.spin:disabled spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(ltr):last-child:disabled, row.spin:disabled spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child:dir(rtl):first-child:disabled, +row.spin:disabled spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):disabled, +row.spin:disabled spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child:disabled, +row.spin:disabled spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child:disabled { + filter: none; +} + +row.entry, +row.spin { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.focused, +row.spin.focused { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry:not(:selected).activatable.focused:hover, row.entry:not(:selected).activatable.focused:active, +row.spin:not(:selected).activatable.focused:hover, +row.spin:not(:selected).activatable.focused:active { + background-color: transparent; +} + +row.entry.error, +row.spin.error { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.error.focused, +row.spin.error.focused { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry.error text > selection:focus-within, +row.spin.error text > selection:focus-within { + background-color: alpha(@error_color,0.2); +} + +row.entry.error text > cursor-handle > contents, +row.spin.error text > cursor-handle > contents { + background-color: currentColor; +} + +row.entry.error .dim-label, row.entry.error scale > value, row.entry.error progressbar > text, row.entry.error row.expander image.expander-row-arrow, row.expander row.entry.error image.expander-row-arrow, row.entry.error spinbutton > text > placeholder, +row.entry.error entry > text > placeholder, row.entry.error label.separator, row.entry.error row.property > box.header > box.title > .title, row.entry.error row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry.error box > list > row > box.header > box.title > .title, row.entry.error .subtitle, +row.spin.error .dim-label, +row.spin.error scale > value, +row.spin.error progressbar > text, +row.spin.error row.expander image.expander-row-arrow, +row.expander row.spin.error image.expander-row-arrow, +row.spin.error spinbutton > text > placeholder, +row.spin.error entry > text > placeholder, +row.spin.error label.separator, +row.spin.error row.property > box.header > box.title > .title, +row.spin.error row.expander.property box > list > row > box.header > box.title > .title, +row.expander.property row.spin.error box > list > row > box.header > box.title > .title, +row.spin.error .subtitle { + opacity: 1; +} + +row.entry.error .suggested-action, +row.spin.error .suggested-action { + background-color: @error_bg_color; + color: @error_fg_color; +} + +row.entry.warning, +row.spin.warning { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.warning.focused, +row.spin.warning.focused { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry.warning text > selection:focus-within, +row.spin.warning text > selection:focus-within { + background-color: alpha(@warning_color,0.2); +} + +row.entry.warning text > cursor-handle > contents, +row.spin.warning text > cursor-handle > contents { + background-color: currentColor; +} + +row.entry.warning .dim-label, row.entry.warning scale > value, row.entry.warning progressbar > text, row.entry.warning row.expander image.expander-row-arrow, row.expander row.entry.warning image.expander-row-arrow, row.entry.warning spinbutton > text > placeholder, +row.entry.warning entry > text > placeholder, row.entry.warning label.separator, row.entry.warning row.property > box.header > box.title > .title, row.entry.warning row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry.warning box > list > row > box.header > box.title > .title, row.entry.warning .subtitle, +row.spin.warning .dim-label, +row.spin.warning scale > value, +row.spin.warning progressbar > text, +row.spin.warning row.expander image.expander-row-arrow, +row.expander row.spin.warning image.expander-row-arrow, +row.spin.warning spinbutton > text > placeholder, +row.spin.warning entry > text > placeholder, +row.spin.warning label.separator, +row.spin.warning row.property > box.header > box.title > .title, +row.spin.warning row.expander.property box > list > row > box.header > box.title > .title, +row.expander.property row.spin.warning box > list > row > box.header > box.title > .title, +row.spin.warning .subtitle { + opacity: 1; +} + +row.entry.warning .suggested-action, +row.spin.warning .suggested-action { + background-color: @warning_bg_color; + color: @warning_fg_color; +} + +row.entry.success, +row.spin.success { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.entry.success.focused, +row.spin.success.focused { + outline-color: alpha(currentColor,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +row.entry.success text > selection:focus-within, +row.spin.success text > selection:focus-within { + background-color: alpha(@success_color,0.2); +} + +row.entry.success text > cursor-handle > contents, +row.spin.success text > cursor-handle > contents { + background-color: currentColor; +} + +row.entry.success .dim-label, row.entry.success scale > value, row.entry.success progressbar > text, row.entry.success row.expander image.expander-row-arrow, row.expander row.entry.success image.expander-row-arrow, row.entry.success spinbutton > text > placeholder, +row.entry.success entry > text > placeholder, row.entry.success label.separator, row.entry.success row.property > box.header > box.title > .title, row.entry.success row.expander.property box > list > row > box.header > box.title > .title, row.expander.property row.entry.success box > list > row > box.header > box.title > .title, row.entry.success .subtitle, +row.spin.success .dim-label, +row.spin.success scale > value, +row.spin.success progressbar > text, +row.spin.success row.expander image.expander-row-arrow, +row.expander row.spin.success image.expander-row-arrow, +row.spin.success spinbutton > text > placeholder, +row.spin.success entry > text > placeholder, +row.spin.success label.separator, +row.spin.success row.property > box.header > box.title > .title, +row.spin.success row.expander.property box > list > row > box.header > box.title > .title, +row.expander.property row.spin.success box > list > row > box.header > box.title > .title, +row.spin.success .subtitle { + opacity: 1; +} + +row.entry.success .suggested-action, +row.spin.success .suggested-action { + background-color: @success_bg_color; + color: @success_fg_color; +} + +/*************** + * AdwComboRow * + ***************/ +row.combo image.dropdown-arrow:disabled { + filter: opacity(0.45); +} + +row.combo listview.inline { + background: none; + border: none; + box-shadow: none; + color: inherit; +} + +row.combo listview.inline, row.combo listview.inline:disabled { + background: none; + color: inherit; +} + +row.combo popover > contents { + min-width: 120px; +} + +row.combo popover > contents .combo-searchbar { + margin: 6px; +} + +row.combo popover > contents .combo-searchbar + scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +/****************** + * AdwExpanderRow * + ******************/ +list.boxed-list-separate > row, list.boxed-list, list.content { + background-color: @card_bg_color; + color: @card_fg_color; + border-radius: 6px; + box-shadow: 0 0 0 1px alpha(currentColor,0.12); +} + +list.boxed-list-separate > row.expander row.header, list.boxed-list > row, list.content > row, list.boxed-list > row.expander row.header, list.content > row.expander row.header, row.expander list.nested > row { + border-bottom: 1px solid alpha(currentColor,0.08); +} + +list.boxed-list-separate > row.expander row.header, list.boxed-list > row, list.content > row, list.boxed-list > row.expander row.header, list.content > row.expander row.header, row.expander list.nested > row { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +list.boxed-list-separate > row.expander row.header:focus:focus-visible, list.boxed-list > row:focus:focus-visible, list.content > row:focus:focus-visible, list.boxed-list > row.expander row.header:focus:focus-visible, list.content > row.expander row.header:focus:focus-visible, row.expander list.nested > row:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +.osd list.boxed-list-separate > row.expander row.header:focus:focus-visible, list.boxed-list-separate > row.expander .osd row.header:focus:focus-visible, .osd list.boxed-list > row:focus:focus-visible, .osd list.content > row:focus:focus-visible, .osd list.boxed-list > row.expander row.header:focus:focus-visible, list.boxed-list > row.expander .osd row.header:focus:focus-visible, .osd list.content > row.expander row.header:focus:focus-visible, list.content > row.expander .osd row.header:focus:focus-visible, .osd row.expander list.nested > row:focus:focus-visible, row.expander .osd list.nested > row:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +list.boxed-list-separate > row.expander row.header:not(:selected).activatable:hover, list.boxed-list > row:not(:selected).activatable:hover, list.content > row:not(:selected).activatable:hover, list.boxed-list > row.expander row.header:not(:selected).activatable:hover, list.content > row.expander row.header:not(:selected).activatable:hover, row.expander list.nested > row:not(:selected).activatable:hover { + background-color: alpha(currentColor,0.03); +} + +list.boxed-list-separate > row.expander row.header:not(:selected).activatable:active, list.boxed-list > row:not(:selected).activatable:active, list.content > row:not(:selected).activatable:active, list.boxed-list > row.expander row.header:not(:selected).activatable:active, list.content > row.expander row.header:not(:selected).activatable:active, row.expander list.nested > row:not(:selected).activatable:active { + background-color: alpha(currentColor,0.08); +} + +list.boxed-list-separate > row.expander row.header:not(:selected).activatable.has-open-popup, list.boxed-list > row:not(:selected).activatable.has-open-popup, list.content > row:not(:selected).activatable.has-open-popup, list.boxed-list > row.expander row.header:not(:selected).activatable.has-open-popup, list.content > row.expander row.header:not(:selected).activatable.has-open-popup, row.expander list.nested > row:not(:selected).activatable.has-open-popup { + background-color: alpha(currentColor,0.03); +} + +row.expander { + background: none; + padding: 0px; +} + +row.expander > box > list { + background: none; + color: inherit; +} + +row.expander list.nested { + background-color: alpha(@card_shade_color,0.5); + color: inherit; +} + +row.expander image.expander-row-arrow { + transition: -gtk-icon-transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +row.expander image.expander-row-arrow:dir(ltr) { + margin-left: 3px; +} + +row.expander image.expander-row-arrow:dir(rtl) { + margin-right: 3px; +} + +row.expander image.expander-row-arrow:dir(ltr) { + -gtk-icon-transform: rotate(0.5turn); +} + +row.expander image.expander-row-arrow:dir(rtl) { + -gtk-icon-transform: rotate(-0.5turn); +} + +row.expander image.expander-row-arrow:disabled { + filter: opacity(0.45); +} + +row.expander:checked image.expander-row-arrow { + -gtk-icon-transform: rotate(0turn); + opacity: 1; +} + +row.expander:checked image.expander-row-arrow:not(:disabled) { + color: @accent_color; +} + +.osd row.expander:checked image.expander-row-arrow:not(:disabled) { + color: inherit; +} + +/*************** + * AdwButtonRow * + ***************/ +row.button > box { + margin-left: 12px; + margin-right: 12px; + border-spacing: 6px; + min-height: 50px; +} + +row.button.suggested-action { + color: @accent_color; +} + +row.button.destructive-action { + color: @destructive_color; +} + +/***************** + * Boxed Lists * + *****************/ +list.boxed-list > row.expander, list.content > row.expander { + border: none; +} + +list.boxed-list > row:first-child, list.content > row:first-child, list.boxed-list > row:first-child.expander row.header, list.content > row:first-child.expander row.header { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +list.boxed-list > row:last-child, list.content > row:last-child, list.boxed-list > row:last-child.expander:not(:checked), list.boxed-list > row:last-child.expander:not(:checked) row.header, list.content > row:last-child.expander:not(:checked) row.header, list.boxed-list > row:last-child.expander:checked list.nested, list.content > row:last-child.expander:checked list.nested, list.boxed-list > row:last-child.expander:checked list.nested > row:last-child, list.content > row:last-child.expander:checked list.nested > row:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + border-bottom-width: 0; +} + +list.boxed-list-separate { + background: none; + color: @card_fg_color; +} + +list.boxed-list-separate > row { + border: none; + margin-bottom: 12px; +} + +list.boxed-list-separate > row:last-child { + margin-bottom: 0; +} + +list.boxed-list-separate > row { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +list.boxed-list-separate > row:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +.osd list.boxed-list-separate > row:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +list.boxed-list-separate > row:not(.expander):not(:selected).activatable:hover { + background-color: @card_bg_color; + background-image: image(alpha(currentColor,0.03)); +} + +list.boxed-list-separate > row:not(.expander):not(:selected).activatable:active { + background-color: @card_bg_color; + background-image: image(alpha(currentColor,0.08)); +} + +list.boxed-list-separate > row:not(.expander):not(:selected).activatable.has-open-popup { + background-color: @card_bg_color; + background-image: image(alpha(currentColor,0.03)); +} + +list.boxed-list-separate > row.entry:not(:selected).activatable.focused:hover, list.boxed-list-separate > row.entry:not(:selected).activatable.focused:active, list.boxed-list-separate > row.spin:not(:selected).activatable.focused:hover, list.boxed-list-separate > row.spin:not(:selected).activatable.focused:active { + background-color: @card_bg_color; + background-image: none; +} + +list.boxed-list-separate > row.entry.error, list.boxed-list-separate > row.spin.error { + color: @error_color; +} + +list.boxed-list-separate > row.entry.warning, list.boxed-list-separate > row.spin.warning { + color: @warning_color; +} + +list.boxed-list-separate > row.entry.success, list.boxed-list-separate > row.spin.success { + color: @success_color; +} + +list.boxed-list-separate > row.expander row.header { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +list.boxed-list-separate > row.expander:not(:checked) row.header, list.boxed-list-separate > row.expander.expander:checked list.nested, list.boxed-list-separate > row.expander.expander:checked list.nested > row:last-child { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + border-bottom: none; +} + +popover.menu > contents { + min-width: 120px; +} + +popover.menu scrollbar.vertical > range > trough > slider { + min-height: 30px; +} + +popover.menu box.inline-buttons { + padding: 0 12px; +} + +popover.menu box.inline-buttons button.image-button.model { + min-height: 28px; + min-width: 28px; + padding: 2px; + border: none; + outline: none; + transition: none; +} + +popover.menu box.inline-buttons button.image-button.model:selected { + background-color: alpha(currentColor,0.1); +} + +popover.menu box.inline-buttons button.image-button.model:selected:active { + background-color: alpha(currentColor,0.19); +} + +popover.menu box.circular-buttons { + padding: 12px 12px 6px; +} + +popover.menu box.circular-buttons button.circular.image-button.model { + outline: none; + padding: 12px; + box-shadow: inset 0 0 0 1px alpha(currentColor,0.12); +} + +popover.menu box.circular-buttons button.circular.image-button.model:selected { + background-color: alpha(currentColor,0.13); +} + +popover.menu box.circular-buttons button.circular.image-button.model:selected:active { + background-color: alpha(currentColor,0.19); +} + +popover.menu > contents { + padding: 0; +} + +popover.menu > contents > stack > box, popover.menu > contents > scrolledwindow > viewport > stack > box { + padding: 6px; +} + +popover.menu separator { + margin: 6px 0; +} + +popover.menu list separator { + margin: 0; +} + +popover.menu accelerator { + color: alpha(currentColor,0.55); +} + +popover.menu accelerator:dir(ltr) { + margin-left: 12px; +} + +popover.menu accelerator:dir(rtl) { + margin-right: 12px; +} + +popover.menu check, +popover.menu radio { + min-width: 16px; + min-height: 16px; + -gtk-icon-size: 16px; + padding: 0; +} + +popover.menu check, popover.menu check:hover:checked, popover.menu check:hover:indeterminate, popover.menu check:hover:not(:checked):not(:indeterminate), popover.menu check:active:checked, popover.menu check:active:indeterminate, popover.menu check:active:not(:checked):not(:indeterminate), +popover.menu radio, +popover.menu radio:hover:checked, +popover.menu radio:hover:indeterminate, +popover.menu radio:hover:not(:checked):not(:indeterminate), +popover.menu radio:active:checked, +popover.menu radio:active:indeterminate, +popover.menu radio:active:not(:checked):not(:indeterminate) { + background: none; + box-shadow: none; + color: inherit; +} + +popover.menu radio:checked, popover.menu radio:indeterminate { + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/menu-radio-symbolic.svg")), -gtk-recolor(url("assets/menu-radio-symbolic@2.svg"))); +} + +.osd popover.menu check, .osd popover.menu radio { + background: none; + color: inherit; +} + +popover.menu radio, popover.menu check { + padding: 0; + border: 1px solid alpha(currentColor,0.3); +} + +popover.menu check.left, +popover.menu radio.left, +popover.menu arrow.left { + margin-left: -2px; + margin-right: 6px; +} + +popover.menu check.right, +popover.menu radio.right, +popover.menu arrow.right { + margin-left: 6px; + margin-right: -2px; +} + +popover.menu modelbutton { + min-height: 28px; + min-width: 40px; + padding: 2px 12px; + border-radius: 6px; + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1), outline 300ms cubic-bezier(0, 0, 0.2, 1); + background-image: radial-gradient(circle, transparent 10%, transparent 0%); + background-repeat: no-repeat; + background-position: center; + background-size: 1000% 1000%; + background-color: transparent; + outline: 0 solid transparent; + outline-offset: 2px; + color: alpha(currentColor,0.75); +} + +popover.menu modelbutton:focus:not(:hover):not(:active) { + outline: none; + background: none; + transition: none; +} + +popover.menu modelbutton:hover, popover.menu modelbutton:selected { + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +popover.menu modelbutton:active { + transition: all 75ms cubic-bezier(0, 0, 0.2, 1), border-image 225ms cubic-bezier(0, 0, 0.2, 1), background-size 0ms, background-image 0ms; + animation: ripple 225ms cubic-bezier(0, 0, 0.2, 1) forwards; + background-image: radial-gradient(circle, alpha(currentColor,0.12) 10%, transparent 0%); + background-size: 0% 0%; + background-color: alpha(currentColor,0.12); + color: currentColor; +} + +popover.menu modelbutton arrow { + background: none; + min-width: 16px; + min-height: 16px; + opacity: 0.3; +} + +popover.menu modelbutton arrow:hover { + background: none; +} + +popover.menu modelbutton arrow:disabled { + filter: opacity(0.45); +} + +popover.menu modelbutton arrow.left { + -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); +} + +popover.menu modelbutton arrow.right { + -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); +} + +popover.menu label.title { + font-weight: bold; + padding: 4px 32px; +} + +popover.menu list, popover.menu listview { + background: none; + color: inherit; +} + +popover.menu list > row, popover.menu listview > row { + border-radius: 6px; + padding: 0 12px; + min-height: 28px; + min-width: 48px; +} + +popover.menu list > row:selected, popover.menu listview > row:selected { + background: none; +} + +popover.menu list > row:hover, popover.menu list > row:hover:selected.activatable, popover.menu listview > row:hover, popover.menu listview > row:hover:selected.activatable { + background-color: alpha(currentColor,0.1); +} + +popover.menu list > row:active, popover.menu list > row:active:selected.activatable, popover.menu listview > row:active, popover.menu listview > row:active:selected.activatable { + background-color: alpha(currentColor,0.19); +} + +popover.menu list > row.has-open-popup, popover.menu list > row.has-open-popup:selected.activatable, popover.menu listview > row.has-open-popup, popover.menu listview > row.has-open-popup:selected.activatable { + background-color: alpha(currentColor,0.1); +} + +popover.menu list > row > box, popover.menu listview > row > box { + border-spacing: 6px; +} + +popover.menu contents > list, +popover.menu contents > listview, +popover.menu scrolledwindow > viewport > list, +popover.menu scrolledwindow > listview { + padding: 6px 0; +} + +popover.menu contents > list > row, +popover.menu contents > listview > row, +popover.menu scrolledwindow > viewport > list > row, +popover.menu scrolledwindow > listview > row { + margin: 0 6px; + padding: 6px 12px; + min-height: 0; +} + +menubar { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + padding-bottom: 1px; +} + +menubar > item { + min-height: 16px; + padding: 4px 8px; + border-radius: 6px; +} + +menubar > item:selected { + background-color: alpha(currentColor,0.1); +} + +menubar > item popover.menu popover.menu { + padding: 0 0 4px 0; +} + +menubar > item popover.menu popover.menu > contents { + margin: 0; + border-radius: 12px; +} + +toolbarview > .top-bar menubar, +toolbarview > .bottom-bar menubar { + box-shadow: none; + padding-bottom: 0; +} + +/******************** + * GtkMessageDialog * + ********************/ +window.dialog.message .titlebar { + min-height: 20px; + background: none; + box-shadow: none; + border-style: none; + border-top-left-radius: 7px; + border-top-right-radius: 7px; +} + +window.dialog.message box.dialog-vbox.vertical { + margin-top: 6px; + border-spacing: 24px; +} + +window.dialog.message box.dialog-vbox.vertical > box > box > box > label.title { + font-weight: 800; + font-size: 15pt; +} + +window.dialog.message.csd { + border-bottom-left-radius: 13px; + border-bottom-right-radius: 13px; +} + +window.dialog.message.csd .dialog-action-area { + border-top: 1px solid alpha(currentColor,0.12); + margin: 0; + border-spacing: 0; +} + +window.dialog.message.csd .dialog-action-area > button { + padding: 10px 14px; + border-radius: 0; + border: none; + background-clip: padding-box; + border-left: 1px solid alpha(currentColor,0.12); +} + +window.dialog.message.csd .dialog-action-area > button:first-child { + border-bottom-left-radius: 13px; + border-left: none; +} + +window.dialog.message.csd .dialog-action-area > button:last-child { + border-bottom-right-radius: 13px; +} + +window.dialog.message.csd .dialog-action-area > button.suggested-action { + color: @accent_color; +} + +window.dialog.message.csd .dialog-action-area > button.destructive-action { + color: @destructive_color; +} + +/******************** + * AdwMessageDialog * + ********************/ +window.messagedialog, +dialog-host > dialog.alert sheet, +window.dialog-window.alert { + background-color: @dialog_bg_color; + color: @dialog_fg_color; +} + +dialog-host > dialog.alert.floating sheet, +window.dialog-window.alert { + border-radius: 13px; + outline: none; +} + +window.messagedialog .message-area, +dialog.alert .message-area { + padding: 24px 30px; + border-spacing: 24px; +} + +window.messagedialog .message-area.has-heading.has-body, +dialog.alert .message-area.has-heading.has-body { + border-spacing: 10px; +} + +window.messagedialog .response-area > button, +dialog.alert .response-area > button { + padding: 10px 14px; + border-radius: 0; +} + +window.messagedialog .response-area > button.suggested, +dialog.alert .response-area > button.suggested { + color: @accent_color; +} + +window.messagedialog .response-area > button.destructive, +dialog.alert .response-area > button.destructive { + color: @destructive_color; +} + +window.messagedialog .response-area:not(.compact) > button, +dialog.alert .response-area:not(.compact) > button { + margin-top: -1px; + margin-right: -1px; + margin-left: -1px; +} + +window.messagedialog .response-area:not(.compact) > button:first-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:last-child:dir(rtl), +dialog.alert .response-area:not(.compact) > button:first-child:dir(ltr), +dialog.alert .response-area:not(.compact) > button:last-child:dir(rtl) { + margin-left: 0; +} + +window.messagedialog .response-area:not(.compact) > button:last-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:first-child:dir(rtl), +dialog.alert .response-area:not(.compact) > button:last-child:dir(ltr), +dialog.alert .response-area:not(.compact) > button:first-child:dir(rtl) { + margin-right: 0; +} + +window.messagedialog .response-area.compact > button, +dialog.alert .response-area.compact > button { + margin-top: -1px; + margin-bottom: -1px; +} + +window.messagedialog .response-area.compact > button:first-child, +dialog.alert .response-area.compact > button:first-child { + margin-bottom: 0; +} + +window.messagedialog .response-area:not(.compact) > button:first-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:last-child:dir(rtl), +dialog.alert.floating .response-area:not(.compact) > button:first-child:dir(ltr), +dialog.alert.floating .response-area:not(.compact) > button:last-child:dir(rtl) { + border-bottom-left-radius: 13px; +} + +window.messagedialog .response-area:not(.compact) > button:last-child:dir(ltr), window.messagedialog .response-area:not(.compact) > button:first-child:dir(rtl), +dialog.alert.floating .response-area:not(.compact) > button:last-child:dir(ltr), +dialog.alert.floating .response-area:not(.compact) > button:first-child:dir(rtl) { + border-bottom-right-radius: 13px; +} + +window.messagedialog .response-area.compact > button:first-child, +dialog.alert.floating .response-area.compact > button:first-child { + border-bottom-left-radius: 13px; + border-bottom-right-radius: 13px; +} + +/********** + * Frames * + **********/ +frame, +.frame { + border: 1px solid alpha(currentColor,0.12); +} + +frame { + border-radius: 6px; +} + +frame > label { + margin: 4px; +} + +/************** + * Separators * + **************/ +separator { + background: alpha(currentColor,0.12); + min-width: 1px; + min-height: 1px; +} + +separator.spacer { + background: none; +} + +separator.spacer.horizontal { + min-width: 12px; +} + +separator.spacer.vertical { + min-height: 12px; +} + +/********************* + * App Notifications * + *********************/ +.app-notification { + padding: 10px; + border-spacing: 10px; + border-radius: 0 0 12px 12px; + background-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); + background-clip: padding-box; +} + +.app-notification border { + border: none; +} + +/********** + * Toasts * + **********/ +toast { + margin: 12px; + margin-bottom: 24px; + border-radius: 150px; + border-spacing: 6px; + padding: 6px; +} + +toast:dir(ltr) { + padding-left: 12px; +} + +toast:dir(rtl) { + padding-right: 12px; +} + +toast > widget { + margin: 0 6px; +} + +/************** + * GtkVideo * + **************/ +video image.osd { + min-width: 64px; + min-height: 64px; + border-radius: 32px; +} + +/****************** + * AdwAboutWindow * + ******************/ +window.about .main-page > viewport > clamp > box, +dialog.about .main-page > viewport > clamp > box { + margin: 12px; + border-spacing: 6px; +} + +window.about .main-page > viewport > clamp > box > box, +dialog.about .main-page > viewport > clamp > box > box { + margin-top: 18px; + border-spacing: 18px; + margin-bottom: 6px; +} + +window.about .main-page .app-version, +dialog.about .main-page .app-version { + padding: 3px 18px; + color: @accent_color; + border-radius: 9999px; + margin-top: 3px; +} + +window.about .subpage > viewport > clamp > box, +dialog.about .subpage > viewport > clamp > box { + margin: 18px 12px; + border-spacing: 18px; +} + +window.about .subpage > clamp > textview, +dialog.about .subpage > clamp > textview { + background: none; + color: inherit; +} + +/***************** + * AdwStatusPage * + *****************/ +statuspage > scrolledwindow > viewport > box { + margin: 36px 12px; + border-spacing: 36px; +} + +statuspage > scrolledwindow > viewport > box > clamp > box { + border-spacing: 12px; +} + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon { + -gtk-icon-size: 128px; + color: alpha(currentColor,0.55); +} + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon:disabled { + opacity: 0.45; +} + +statuspage > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { + margin-bottom: 24px; +} + +statuspage.compact > scrolledwindow > viewport > box { + margin: 24px 12px; + border-spacing: 24px; +} + +statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon { + -gtk-icon-size: 96px; +} + +statuspage.compact > scrolledwindow > viewport > box > clamp > box > .icon:not(:last-child) { + margin-bottom: 12px; +} + +statuspage.compact > scrolledwindow > viewport > box > clamp > box > .title { + font-size: 18pt; +} + +/* Cards */ +shortcut > .keycap, .card { + background-color: @card_bg_color; + color: @card_fg_color; + border-radius: 12px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); +} + +.osd shortcut > .keycap, shortcut > .osd.keycap, .osd .card, .card.osd { + background-color: alpha(currentColor,0.1); + color: inherit; + box-shadow: none; +} + +.card { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.card:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -1px; +} + +.osd .card:focus:focus-visible, .card.osd:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +.card.activatable { + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.card.activatable:hover { + background-image: image(alpha(currentColor,0.03)); +} + +.card.activatable:active { + background-image: image(alpha(currentColor,0.08)); +} + +/* Transition shadows */ +flap > dimming, +leaflet > dimming, +navigation-view > dimming, +overlay-split-view > dimming { + background: @shade_color; +} + +flap > shadow, +leaflet > shadow, +navigation-view > shadow, +overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +flap > shadow.left, +leaflet > shadow.left, +navigation-view > shadow.left, +overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to right, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +flap > shadow.right, +leaflet > shadow.right, +navigation-view > shadow.right, +overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to left, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +flap > shadow.up, +leaflet > shadow.up, +navigation-view > shadow.up, +overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to bottom, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +flap > shadow.down, +leaflet > shadow.down, +navigation-view > shadow.down, +overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@shade_color,0.7), alpha(@shade_color,0.14) 40px, alpha(@shade_color,0) 56px), linear-gradient(to top, alpha(@shade_color,0.4), alpha(@shade_color,0.14) 7px, alpha(@shade_color,0) 24px); +} + +notebook > header > tabs > tab:checked { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +notebook:focus:focus-visible > header > tabs > tab:checked { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +notebook > header { + padding: 1px; + border-color: alpha(currentColor,0.12); + border-width: 1px; + background-clip: padding-box; +} + +notebook > header > tabs { + margin: -1px; +} + +notebook > header.top { + border-bottom-style: solid; +} + +notebook > header.top > tabs { + margin-bottom: -2px; +} + +notebook > header.top > tabs > tab:hover { + box-shadow: inset 0 -4px alpha(currentColor,0.12); +} + +notebook > header.top > tabs > tab:checked { + box-shadow: inset 0 -4px @accent_bg_color; +} + +notebook > header.bottom { + border-top-style: solid; +} + +notebook > header.bottom > tabs { + margin-top: -2px; +} + +notebook > header.bottom > tabs > tab:hover { + box-shadow: inset 0 4px alpha(currentColor,0.12); +} + +notebook > header.bottom > tabs > tab:checked { + box-shadow: inset 0 4px @accent_bg_color; +} + +notebook > header.left { + border-right-style: solid; +} + +notebook > header.left > tabs { + margin-right: -2px; +} + +notebook > header.left > tabs > tab:hover { + box-shadow: inset -4px 0 alpha(currentColor,0.12); +} + +notebook > header.left > tabs > tab:checked { + box-shadow: inset -4px 0 @accent_bg_color; +} + +notebook > header.right { + border-left-style: solid; +} + +notebook > header.right > tabs { + margin-left: -2px; +} + +notebook > header.right > tabs > tab:hover { + box-shadow: inset 4px 0 alpha(currentColor,0.12); +} + +notebook > header.right > tabs > tab:checked { + box-shadow: inset 4px 0 @accent_bg_color; +} + +notebook > header.top > tabs > arrow { + border-top-style: none; +} + +notebook > header.bottom > tabs > arrow { + border-bottom-style: none; +} + +notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { + margin-left: -5px; + margin-right: -5px; + padding-left: 4px; + padding-right: 4px; +} + +notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); +} + +notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); +} + +notebook > header.left > tabs > arrow { + border-left-style: none; +} + +notebook > header.right > tabs > arrow { + border-right-style: none; +} + +notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { + margin-top: -5px; + margin-bottom: -5px; + padding-top: 4px; + padding-bottom: 4px; +} + +notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); +} + +notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +notebook > header > tabs > arrow { + min-height: 16px; + min-width: 16px; + border-radius: 0; +} + +notebook > header > tabs > arrow:hover:not(:active) { + box-shadow: none; +} + +notebook > header > tabs > tab { + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + min-height: 30px; + min-width: 30px; + padding: 3px 12px; + font-weight: normal; +} + +notebook > header > tabs > tab:hover, notebook > header > tabs > tab:active { + background-color: alpha(currentColor,0.07); +} + +notebook > header > tabs > tab:not(:checked) { + outline-color: transparent; +} + +notebook > header > tabs > tab:disabled { + filter: opacity(0.45); +} + +notebook > header > tabs > tab:disabled label, notebook > header > tabs > tab:disabled button { + filter: none; +} + +notebook > header > tabs > tab button.flat { + color: alpha(currentColor,0.3); + padding: 0; + margin-top: 4px; + margin-bottom: 4px; + min-width: 20px; + min-height: 20px; +} + +notebook > header > tabs > tab button.flat:hover, notebook > header > tabs > tab button.flat:active { + color: currentColor; +} + +notebook > header > tabs > tab button.flat:last-child { + margin-left: 4px; + margin-right: -4px; +} + +notebook > header > tabs > tab button.flat:first-child { + margin-left: -4px; + margin-right: 4px; +} + +notebook > header.top > tabs, notebook > header.bottom > tabs { + padding-left: 4px; + padding-right: 4px; +} + +notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { + margin-left: 3px; + margin-right: 3px; +} + +notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { + margin-left: -1px; +} + +notebook > header.top > tabs:not(:only-child):last-child, notebook > header.bottom > tabs:not(:only-child):last-child { + margin-right: -1px; +} + +notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { + margin-left: 4px; + margin-right: 4px; +} + +notebook > header.left > tabs, notebook > header.right > tabs { + padding-top: 4px; + padding-bottom: 4px; +} + +notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { + margin-top: 3px; + margin-bottom: 3px; +} + +notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { + margin-top: -1px; +} + +notebook > header.left > tabs:not(:only-child):last-child, notebook > header.right > tabs:not(:only-child):last-child { + margin-bottom: -1px; +} + +notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { + margin-top: 4px; + margin-bottom: 4px; +} + +notebook > header.top > tabs > tab { + padding-bottom: 4px; +} + +notebook > header.bottom > tabs > tab { + padding-top: 4px; +} + +notebook > stack:not(:only-child) { + background-color: @view_bg_color; +} + +paned > separator { + min-width: 1px; + min-height: 1px; + background: none; + background-size: 1px 1px; +} + +paned > separator.wide { + min-width: 5px; + min-height: 5px; +} + +paned.horizontal > separator:dir(ltr) { + margin: 0 -8px 0 0; + padding: 0 8px 0 0; + box-shadow: inset 1px 0 alpha(currentColor,0.12); +} + +paned.horizontal > separator:dir(rtl) { + margin: 0 0 0 -8px; + padding: 0 0 0 8px; + box-shadow: inset -1px 0 alpha(currentColor,0.12); +} + +paned.horizontal > separator.wide { + margin: 0; + padding: 0; + box-shadow: inset 1px 0 alpha(currentColor,0.12), inset -1px 0 alpha(currentColor,0.12); +} + +paned.vertical > separator { + margin: 0 0 -8px 0; + padding: 0 0 8px 0; + box-shadow: inset 0 1px alpha(currentColor,0.12); +} + +paned.vertical > separator.wide { + margin: 0; + padding: 0; + box-shadow: inset 0 1px alpha(currentColor,0.12), inset 0 -1px alpha(currentColor,0.12); +} + +toolbarview.undershoot-top popover scrolledwindow undershoot.top, +toolbarview.undershoot-bottom popover scrolledwindow undershoot.bottom { + background: none; + box-shadow: none; +} + +popover.background { + background-color: transparent; + font: initial; +} + +popover > arrow, +popover > contents { + background-color: @popover_bg_color; + color: @popover_fg_color; + background-clip: border-box; + border: 1px solid mix(white,@popover_bg_color,0.92); + box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.09), 0 2px 14px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px @headerbar_darker_shade_color; +} + +popover > contents { + padding: 6px; + border-radius: 12px; +} + +popover > contents > list, +popover > contents > .view, +window.print popover > contents > .dialog-action-box, +popover > contents > toolbar { + border-style: none; + background-color: transparent; +} + +popover > contents separator { + background-color: alpha(currentColor,0.08); +} + +.osd popover, popover.touch-selection, popover.magnifier { + background-color: transparent; +} + +.osd popover > arrow, +.osd popover > contents, popover.touch-selection > arrow, +popover.touch-selection > contents, popover.magnifier > arrow, +popover.magnifier > contents { + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: none; +} + +popover toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-top > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@popover_shade_color,0.75), transparent 6px); +} + +popover flap > dimming, +popover leaflet > dimming, +popover navigation-view > dimming, +popover overlay-split-view > dimming { + background: @popover_shade_color; +} + +popover flap > shadow, +popover leaflet > shadow, +popover navigation-view > shadow, +popover overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +popover flap > shadow.left, +popover leaflet > shadow.left, +popover navigation-view > shadow.left, +popover overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to right, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +popover flap > shadow.right, +popover leaflet > shadow.right, +popover navigation-view > shadow.right, +popover overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to left, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +popover flap > shadow.up, +popover leaflet > shadow.up, +popover navigation-view > shadow.up, +popover overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to bottom, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +popover flap > shadow.down, +popover leaflet > shadow.down, +popover navigation-view > shadow.down, +popover overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@popover_shade_color,0.7), alpha(@popover_shade_color,0.14) 40px, alpha(@popover_shade_color,0) 56px), linear-gradient(to top, alpha(@popover_shade_color,0.4), alpha(@popover_shade_color,0.14) 7px, alpha(@popover_shade_color,0) 24px); +} + +preferencespage > scrolledwindow > viewport > clamp > box { + margin: 24px 12px; + border-spacing: 24px; +} + +preferencesgroup > box, preferencesgroup > box .labels { + border-spacing: 6px; +} + +preferencesgroup > box > box.header:not(.single-line) { + margin-bottom: 6px; +} + +preferencesgroup > box > box.single-line { + min-height: 34px; +} + +progressbar.horizontal > trough { + min-width: 150px; +} + +progressbar.horizontal > trough, progressbar.horizontal > trough > progress { + min-height: 8px; +} + +progressbar.vertical > trough { + min-height: 80px; +} + +progressbar.vertical > trough, progressbar.vertical > trough > progress { + min-width: 8px; +} + +progressbar > text { + font-size: smaller; +} + +progressbar:disabled { + filter: opacity(0.45); +} + +progressbar > trough > progress { + /* share most of scales' */ + border-radius: 99px; +} + +progressbar > trough > progress.left { + border-top-left-radius: 99px; + border-bottom-left-radius: 99px; +} + +progressbar > trough > progress.right { + border-top-right-radius: 99px; + border-bottom-right-radius: 99px; +} + +progressbar > trough > progress.top { + border-top-right-radius: 99px; + border-top-left-radius: 99px; +} + +progressbar > trough > progress.bottom { + border-bottom-right-radius: 99px; + border-bottom-left-radius: 99px; +} + +progressbar.osd { + min-width: 2px; + min-height: 2px; + background-color: transparent; + color: inherit; +} + +progressbar.osd > trough { + border-style: none; + border-radius: 0; + background-color: transparent; + box-shadow: none; +} + +progressbar.osd > trough > progress { + border-style: none; + border-radius: 0; +} + +progressbar.osd.horizontal > trough, progressbar.osd.horizontal > trough > progress { + min-height: 2px; +} + +progressbar.osd.vertical > trough, progressbar.osd.vertical > trough > progress { + min-width: 2px; +} + +progressbar > trough.empty > progress { + all: unset; +} + +.osd progressbar > trough > progress { + background-color: rgba(255, 255, 255, 0.75); +} + +scale > trough > fill, scale > trough, progressbar > trough { + border-radius: 9999px; + background-color: alpha(currentColor,0.15); +} + +scale > trough > highlight, progressbar > trough > progress { + border-radius: 9999px; + background-color: @accent_bg_color; + color: @accent_fg_color; +} + +scale { + min-height: 10px; + min-width: 10px; + padding: 12px; +} + +scale > trough > slider { + outline: 0 solid transparent; + outline-offset: 6px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +scale:focus:focus-visible > trough > slider { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 0; +} + +scale > trough > slider { + background-color: @headerbar_bg_color; + box-shadow: 0 0 0 2px @accent_bg_color, 0 0 0 0 transparent; + border-radius: 100%; + transition: box-shadow 200ms ease-out; + min-width: 16px; + min-height: 16px; + margin: -7px; +} + +scale:hover > trough, scale:active > trough { + background-color: alpha(currentColor,0.2); +} + +scale:hover > trough > highlight, scale:active > trough > highlight { + background-image: image(alpha(currentColor,0.1)); +} + +scale:hover > trough > slider, scale:active > trough > slider { + background-color: @headerbar_backdrop_color; + box-shadow: 0 0 0 2px @accent_bg_color, 0 0 0 8px alpha(currentColor,0.12); +} + +.osd scale:focus:focus-visible > trough { + outline-color: rgba(255, 255, 255, 0.5); +} + +.osd scale > trough > highlight { + background-color: rgba(255, 255, 255, 0.75); + color: rgba(0, 0, 0, 0.75); +} + +scale:disabled { + filter: opacity(0.45); +} + +scale:disabled > trough > slider { + box-shadow: 0 0 0 2px mix(@accent_bg_color,@window_bg_color,0.5); + outline-color: rgba(0, 0, 0, 0.2); +} + +scale.fine-tune { + padding: 9px; +} + +scale.fine-tune.horizontal { + min-height: 16px; +} + +scale.fine-tune.vertical { + min-width: 16px; +} + +scale.fine-tune > trough > slider { + margin: -5px; +} + +scale.marks-before:not(.marks-after) > trough > slider, scale.marks-after:not(.marks-before) > trough > slider { + transform: rotate(45deg); + box-shadow: 0 0 0 2px @accent_bg_color; +} + +scale.marks-before:not(.marks-after) > trough > slider:disabled, scale.marks-after:not(.marks-before) > trough > slider:disabled { + box-shadow: 0 0 0 2px mix(@accent_bg_color,@window_bg_color,0.5); +} + +scale.horizontal > marks { + color: alpha(currentColor,0.55); +} + +scale.horizontal > marks.top { + margin-bottom: 6px; +} + +scale.horizontal > marks.bottom { + margin-top: 6px; +} + +scale.horizontal > marks indicator { + background-color: currentColor; + min-height: 6px; + min-width: 1px; +} + +scale.horizontal > value.left { + margin-right: 9px; +} + +scale.horizontal > value.right { + margin-left: 9px; +} + +scale.horizontal.fine-tune > marks.top { + margin-top: 3px; +} + +scale.horizontal.fine-tune > marks.bottom { + margin-bottom: 3px; +} + +scale.horizontal.fine-tune > marks indicator { + min-height: 3px; +} + +scale.horizontal.marks-before { + padding-top: 0; +} + +scale.horizontal.marks-before > trough > slider { + border-top-left-radius: 0; +} + +scale.horizontal.marks-after { + padding-bottom: 0; +} + +scale.horizontal.marks-after > trough > slider { + border-bottom-right-radius: 0; +} + +scale.horizontal.marks-before.marks-after > trough > slider { + border-radius: 100%; +} + +scale.vertical > marks { + color: alpha(currentColor,0.55); +} + +scale.vertical > marks.top { + margin-right: 6px; +} + +scale.vertical > marks.bottom { + margin-left: 6px; +} + +scale.vertical > marks indicator { + background-color: currentColor; + min-height: 1px; + min-width: 6px; +} + +scale.vertical > value.top { + margin-bottom: 9px; +} + +scale.vertical > value.bottom { + margin-top: 9px; +} + +scale.vertical.fine-tune > marks.top { + margin-left: 3px; +} + +scale.vertical.fine-tune > marks.bottom { + margin-right: 3px; +} + +scale.vertical.fine-tune > marks indicator { + min-height: 3px; +} + +scale.vertical.marks-before { + padding-left: 0; +} + +scale.vertical.marks-before > trough > slider { + border-bottom-left-radius: 0; +} + +scale.vertical.marks-after { + padding-right: 0; +} + +scale.vertical.marks-after > trough > slider { + border-top-right-radius: 0; +} + +scale.color { + padding: 0; +} + +scale.color > trough { + border: none; + background: none; + border-radius: 10px; +} + +scale.color > trough > slider { + margin: 0; + background-color: rgba(255, 255, 255, 0.8); +} + +scale.color.fine-tune { + padding: 2px; +} + +scale.color.fine-tune > trough > slider { + margin: -2px; +} + +scrollbar > range > trough { + margin: 7px; + transition: all 200ms linear; + border-radius: 10px; +} + +scrollbar > range > trough > slider { + min-width: 8px; + min-height: 8px; + margin: -6px; + border: 6px solid transparent; + border-radius: 10px; + background-clip: padding-box; + transition: all 200ms linear; + background-color: alpha(currentColor,0.2); +} + +scrollbar > range > trough > slider:hover { + background-color: alpha(currentColor,0.4); +} + +scrollbar > range > trough > slider:active { + background-color: alpha(currentColor,0.6); +} + +scrollbar > range > trough > slider:disabled { + opacity: 0; +} + +scrollbar.horizontal > range > trough { + margin-top: 6px; + margin-bottom: 6px; +} + +scrollbar.vertical > range > trough { + margin-left: 6px; + margin-right: 6px; +} + +scrollbar.overlay-indicator { + background: none; + color: inherit; + box-shadow: none; + padding: 0; +} + +scrollbar.overlay-indicator > range > trough { + outline: 1px solid transparent; +} + +scrollbar.overlay-indicator > range > trough > slider { + outline: 1px solid alpha(@scrollbar_outline_color,0.6); + outline-offset: -6px; +} + +.osd scrollbar.overlay-indicator > range > trough > slider { + outline: 1px solid alpha(rgba(0, 0, 0, 0.5),0.6); +} + +scrollbar.overlay-indicator:not(.hovering) > range > trough > slider { + min-width: 3px; + min-height: 3px; + outline-color: alpha(@scrollbar_outline_color,0.35); +} + +.osd scrollbar.overlay-indicator:not(.hovering) > range > trough > slider { + outline-color: alpha(rgba(0, 0, 0, 0.5),0.35); +} + +scrollbar.overlay-indicator.hovering > range > trough { + background-color: alpha(currentColor,0.1); +} + +scrollbar.overlay-indicator.horizontal > range > trough > slider { + min-width: 40px; +} + +scrollbar.overlay-indicator.horizontal.hovering > range > trough > slider { + min-height: 8px; +} + +scrollbar.overlay-indicator.horizontal:not(.hovering) > range > trough { + margin-top: 3px; + margin-bottom: 3px; +} + +scrollbar.overlay-indicator.vertical > range > trough > slider { + min-height: 40px; +} + +scrollbar.overlay-indicator.vertical.hovering > range > trough > slider { + min-width: 8px; +} + +scrollbar.overlay-indicator.vertical:not(.hovering) > range > trough { + margin-left: 3px; + margin-right: 3px; +} + +scrollbar.horizontal > range > trough > slider { + min-width: 40px; +} + +scrollbar.vertical > range > trough > slider { + min-height: 40px; +} + +scrollbar > range.fine-tune > trough > slider, scrollbar > range.fine-tune > trough > slider:hover, scrollbar > range.fine-tune > trough > slider:active { + background-color: alpha(@accent_color,0.6); +} + +scrolledwindow > overshoot.top { + background-image: radial-gradient(farthest-side at top, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at top, alpha(currentColor,0.05), alpha(currentColor,0)); + background-size: 100% 3%, 100% 50%; + background-repeat: no-repeat; + background-position: top; + background-color: transparent; + border: none; + box-shadow: none; +} + +scrolledwindow > overshoot.bottom { + background-image: radial-gradient(farthest-side at bottom, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at bottom, alpha(currentColor,0.05), alpha(currentColor,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(farthest-side at left, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at left, alpha(currentColor,0.05), alpha(currentColor,0)); + background-size: 3% 100%, 50% 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, alpha(currentColor,0.12) 85%, alpha(currentColor,0)), radial-gradient(farthest-side at right, alpha(currentColor,0.05), alpha(currentColor,0)); + background-size: 3% 100%, 50% 100%; + background-repeat: no-repeat; + background-position: right; + background-color: transparent; + border: none; + box-shadow: none; +} + +scrolledwindow.undershoot-top > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@shade_color,0.75), transparent 6px); +} + +scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@shade_color,0.75), transparent 6px); +} + +toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +.about toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: inset 0 1px alpha(currentColor,0.12); + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +.about toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +shortcuts-section { + margin: 20px; +} + +.shortcuts-search-results { + margin: 20px; + border-spacing: 24px; +} + +shortcut { + border-spacing: 6px; + border-radius: 6px; +} + +shortcut { + outline: 0 solid transparent; + outline-offset: 8px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +shortcut:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 4px; +} + +shortcut > .keycap { + min-width: 20px; + min-height: 25px; + padding: 2px 6px; + border-radius: 6px; + font-size: smaller; +} + +shortcuts-section stackswitcher.circular { + border-spacing: 12px; +} + +shortcuts-section stackswitcher.circular > button.circular, +shortcuts-section stackswitcher.circular > button.text-button.circular { + min-width: 32px; + min-height: 32px; + padding: 0; +} + +window.shortcuts headerbar.titlebar > windowhandle { + padding-top: 3px; +} + +window.shortcuts searchbar { + background: none; +} + +.sidebar-pane { + background-color: @sidebar_bg_color; + color: @sidebar_fg_color; +} + +.sidebar-pane:backdrop { + background-color: @sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +.sidebar-pane flap > dimming, +.sidebar-pane leaflet > dimming, +.sidebar-pane navigation-view > dimming, +.sidebar-pane overlay-split-view > dimming { + background: @sidebar_shade_color; +} + +.sidebar-pane flap > shadow, +.sidebar-pane leaflet > shadow, +.sidebar-pane navigation-view > shadow, +.sidebar-pane overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +.sidebar-pane flap > shadow.left, +.sidebar-pane leaflet > shadow.left, +.sidebar-pane navigation-view > shadow.left, +.sidebar-pane overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to right, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane flap > shadow.right, +.sidebar-pane leaflet > shadow.right, +.sidebar-pane navigation-view > shadow.right, +.sidebar-pane overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to left, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane flap > shadow.up, +.sidebar-pane leaflet > shadow.up, +.sidebar-pane navigation-view > shadow.up, +.sidebar-pane overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to bottom, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane flap > shadow.down, +.sidebar-pane leaflet > shadow.down, +.sidebar-pane navigation-view > shadow.down, +.sidebar-pane overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@sidebar_shade_color,0.7), alpha(@sidebar_shade_color,0.14) 40px, alpha(@sidebar_shade_color,0) 56px), linear-gradient(to top, alpha(@sidebar_shade_color,0.4), alpha(@sidebar_shade_color,0.14) 7px, alpha(@sidebar_shade_color,0) 24px); +} + +.sidebar-pane banner > revealer > widget { + background-color: mix(@accent_bg_color,@sidebar_bg_color,0.7); + color: @sidebar_fg_color; +} + +.sidebar-pane banner > revealer > widget:backdrop { + background-color: mix(@accent_bg_color,@sidebar_backdrop_color,0.85); +} + +.sidebar-pane:dir(ltr), .sidebar-pane:dir(ltr) banner > revealer > widget, .sidebar-pane.end:dir(rtl), .sidebar-pane.end:dir(rtl) banner > revealer > widget { + box-shadow: inset -1px 0 alpha(currentColor,0.1); +} + +.sidebar-pane:dir(rtl), .sidebar-pane:dir(rtl) banner > revealer > widget, .sidebar-pane.end:dir(ltr), .sidebar-pane.end:dir(ltr) banner > revealer > widget { + box-shadow: inset 1px 0 alpha(currentColor,0.1); +} + +.sidebar-pane toolbarview.undershoot-top scrolledwindow > undershoot.top, .content-pane toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: inset 0 1px alpha(currentColor,0.12); + background: linear-gradient(to bottom, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom, .content-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + background: linear-gradient(to top, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-top > undershoot.top, .content-pane scrolledwindow.undershoot-top > undershoot.top { + box-shadow: inset 0 1px alpha(currentColor,0.12); + background: linear-gradient(to bottom, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-bottom > undershoot.bottom, .content-pane scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: inset 0 -1px alpha(currentColor,0.12); + background: linear-gradient(to top, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left, .content-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: inset 1px 0 alpha(currentColor,0.12); + background: linear-gradient(to right, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right, .content-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: inset -1px 0 alpha(currentColor,0.12); + background: linear-gradient(to left, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right, .content-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: inset -1px 0 alpha(currentColor,0.12); + background: linear-gradient(to left, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +.sidebar-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left, .content-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: inset 1px 0 alpha(currentColor,0.12); + background: linear-gradient(to right, alpha(@sidebar_shade_color,0.75), transparent 6px); +} + +/* Middle pane in three-pane setups */ +.content-pane .sidebar-pane, +.sidebar-pane .content-pane { + background-color: @secondary_sidebar_bg_color; + color: @secondary_sidebar_fg_color; +} + +.content-pane .sidebar-pane:backdrop, +.sidebar-pane .content-pane:backdrop { + background-color: @secondary_sidebar_backdrop_color; + transition: background-color 200ms ease-out; +} + +.content-pane .sidebar-pane toolbarview.undershoot-top scrolledwindow > undershoot.top, +.sidebar-pane .content-pane toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom, +.sidebar-pane .content-pane toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-top > undershoot.top, +.sidebar-pane .content-pane scrolledwindow.undershoot-top > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-bottom > undershoot.bottom, +.sidebar-pane .content-pane scrolledwindow.undershoot-bottom > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left, +.sidebar-pane .content-pane scrolledwindow.undershoot-start:dir(ltr) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right, +.sidebar-pane .content-pane scrolledwindow.undershoot-start:dir(rtl) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right, +.sidebar-pane .content-pane scrolledwindow.undershoot-end:dir(ltr) > undershoot.right { + box-shadow: none; + background: linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left, +.sidebar-pane .content-pane scrolledwindow.undershoot-end:dir(rtl) > undershoot.left { + box-shadow: none; + background: linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.75), transparent 6px); +} + +.content-pane .sidebar-pane flap > dimming, +.content-pane .sidebar-pane leaflet > dimming, +.content-pane .sidebar-pane navigation-view > dimming, +.content-pane .sidebar-pane overlay-split-view > dimming, +.sidebar-pane .content-pane flap > dimming, +.sidebar-pane .content-pane leaflet > dimming, +.sidebar-pane .content-pane navigation-view > dimming, +.sidebar-pane .content-pane overlay-split-view > dimming { + background: @secondary_sidebar_shade_color; +} + +.content-pane .sidebar-pane flap > shadow, +.content-pane .sidebar-pane leaflet > shadow, +.content-pane .sidebar-pane navigation-view > shadow, +.content-pane .sidebar-pane overlay-split-view > shadow, +.sidebar-pane .content-pane flap > shadow, +.sidebar-pane .content-pane leaflet > shadow, +.sidebar-pane .content-pane navigation-view > shadow, +.sidebar-pane .content-pane overlay-split-view > shadow { + min-width: 56px; + min-height: 56px; +} + +.content-pane .sidebar-pane flap > shadow.left, +.content-pane .sidebar-pane leaflet > shadow.left, +.content-pane .sidebar-pane navigation-view > shadow.left, +.content-pane .sidebar-pane overlay-split-view > shadow.left, +.sidebar-pane .content-pane flap > shadow.left, +.sidebar-pane .content-pane leaflet > shadow.left, +.sidebar-pane .content-pane navigation-view > shadow.left, +.sidebar-pane .content-pane overlay-split-view > shadow.left { + background-image: linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to right, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane flap > shadow.right, +.content-pane .sidebar-pane leaflet > shadow.right, +.content-pane .sidebar-pane navigation-view > shadow.right, +.content-pane .sidebar-pane overlay-split-view > shadow.right, +.sidebar-pane .content-pane flap > shadow.right, +.sidebar-pane .content-pane leaflet > shadow.right, +.sidebar-pane .content-pane navigation-view > shadow.right, +.sidebar-pane .content-pane overlay-split-view > shadow.right { + background-image: linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to left, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane flap > shadow.up, +.content-pane .sidebar-pane leaflet > shadow.up, +.content-pane .sidebar-pane navigation-view > shadow.up, +.content-pane .sidebar-pane overlay-split-view > shadow.up, +.sidebar-pane .content-pane flap > shadow.up, +.sidebar-pane .content-pane leaflet > shadow.up, +.sidebar-pane .content-pane navigation-view > shadow.up, +.sidebar-pane .content-pane overlay-split-view > shadow.up { + background-image: linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to bottom, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane flap > shadow.down, +.content-pane .sidebar-pane leaflet > shadow.down, +.content-pane .sidebar-pane navigation-view > shadow.down, +.content-pane .sidebar-pane overlay-split-view > shadow.down, +.sidebar-pane .content-pane flap > shadow.down, +.sidebar-pane .content-pane leaflet > shadow.down, +.sidebar-pane .content-pane navigation-view > shadow.down, +.sidebar-pane .content-pane overlay-split-view > shadow.down { + background-image: linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.7), alpha(@secondary_sidebar_shade_color,0.14) 40px, alpha(@secondary_sidebar_shade_color,0) 56px), linear-gradient(to top, alpha(@secondary_sidebar_shade_color,0.4), alpha(@secondary_sidebar_shade_color,0.14) 7px, alpha(@secondary_sidebar_shade_color,0) 24px); +} + +.content-pane .sidebar-pane banner > revealer > widget, +.sidebar-pane .content-pane banner > revealer > widget { + background-color: mix(@accent_bg_color,@secondary_sidebar_bg_color,0.7); + color: @secondary_sidebar_fg_color; +} + +.content-pane .sidebar-pane banner > revealer > widget:backdrop, +.sidebar-pane .content-pane banner > revealer > widget:backdrop { + background-color: mix(@accent_bg_color,@secondary_sidebar_backdrop_color,0.85); +} + +.content-pane .sidebar-pane:dir(ltr), .content-pane .sidebar-pane:dir(ltr) banner > revealer > widget, .content-pane .sidebar-pane.end:dir(rtl), .content-pane .sidebar-pane.end:dir(rtl) banner > revealer > widget, +.sidebar-pane .content-pane:dir(ltr), +.sidebar-pane .content-pane:dir(ltr) banner > revealer > widget, +.sidebar-pane .content-pane.end:dir(rtl), +.sidebar-pane .content-pane.end:dir(rtl) banner > revealer > widget { + box-shadow: inset -1px 0 alpha(currentColor,0.1); +} + +.content-pane .sidebar-pane:dir(rtl), .content-pane .sidebar-pane:dir(rtl) banner > revealer > widget, .content-pane .sidebar-pane.end:dir(ltr), .content-pane .sidebar-pane.end:dir(ltr) banner > revealer > widget, +.sidebar-pane .content-pane:dir(rtl), +.sidebar-pane .content-pane:dir(rtl) banner > revealer > widget, +.sidebar-pane .content-pane.end:dir(ltr), +.sidebar-pane .content-pane.end:dir(ltr) banner > revealer > widget { + box-shadow: inset 1px 0 alpha(currentColor,0.1); +} + +.sidebar-pane .sidebar-pane { + background-color: transparent; + color: inherit; +} + +stacksidebar row { + padding: 10px 4px; +} + +stacksidebar row > label { + padding-left: 6px; + padding-right: 6px; +} + +stacksidebar row.needs-attention > label { + background-size: 6px 6px, 0 0; +} + +/********************** + * Navigation Sidebar * + **********************/ +.navigation-sidebar { + padding: 6px 0; +} + +.navigation-sidebar, .navigation-sidebar.view, window.print .navigation-sidebar.dialog-action-box, .navigation-sidebar.view:disabled { + background-color: transparent; + color: inherit; +} + +.navigation-sidebar.background, .navigation-sidebar.background:disabled { + background-color: @window_bg_color; + color: @window_fg_color; +} + +.navigation-sidebar row.activatable:hover { + background-color: alpha(currentColor,0.07); +} + +.navigation-sidebar row.activatable:active { + background-color: alpha(currentColor,0.16); +} + +.navigation-sidebar row.activatable.has-open-popup { + background-color: alpha(currentColor,0.07); +} + +.navigation-sidebar row.activatable:selected:hover { + background-color: alpha(currentColor,0.13); +} + +.navigation-sidebar row.activatable:selected:active { + background-color: alpha(currentColor,0.19); +} + +.navigation-sidebar row.activatable:selected.has-open-popup { + background-color: alpha(currentColor,0.13); +} + +.navigation-sidebar row:selected { + background-color: alpha(currentColor,0.1); +} + +.navigation-sidebar > separator { + margin: 6px; + background: none; +} + +.navigation-sidebar > row { + min-height: 36px; + padding: 0 8px; + border-radius: 6px; + margin: 0 6px 3px; +} + +@keyframes spin { + to { + transform: rotate(1turn); + } +} + +spinner { + background: none; + opacity: 0; + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); +} + +spinner:checked { + opacity: 1; + animation: spin 1s linear infinite; +} + +spinner:checked:disabled { + opacity: 0.45; +} + +spinbutton { + padding: 0; + border-spacing: 0; + /* :not here just to bump specificity above that of the list button styling */ +} + +spinbutton > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + margin: 0; + border-radius: 0; + box-shadow: none; + border-style: solid; + border-color: alpha(currentColor,0.1); +} + +spinbutton:not(.vertical) { + /* :not here just to bump specificity above that of the list button styling */ +} + +spinbutton:not(.vertical) > text { + min-width: 28px; + padding: 6px; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + min-height: 16px; + min-width: 22px; + padding-bottom: 0; + padding-top: 0; + border-left-width: 1px; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl), +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl) { + border-left-width: 0; + border-right-width: 1px; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child, +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(ltr):last-child { + border-radius: 0 6px 6px 0; +} + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child, +spinbutton:not(.vertical) > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):dir(rtl):first-child { + border-radius: 6px 0 0 6px; +} + +spinbutton.vertical { + /* :not here just to bump specificity above that of the list button styling */ +} + +spinbutton.vertical > text { + min-height: 30px; + min-width: 30px; +} + +spinbutton.vertical > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child, +spinbutton.vertical > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child { + border-top-width: 1px; + border-radius: 0 0 6px 6px; +} + +spinbutton.vertical > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):first-child, +spinbutton.vertical > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):first-child { + border-bottom-width: 1px; + border-radius: 6px 6px 0 0; +} + +switch { + border-radius: 9999px; + padding: 3px; + background-color: alpha(currentColor,0.15); + transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); +} + +switch:hover { + background-color: alpha(currentColor,0.2); +} + +switch:active { + background-color: alpha(currentColor,0.25); +} + +switch { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +switch:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 1px; +} + +switch:disabled { + filter: opacity(0.45); +} + +switch > slider { + min-width: 18px; + min-height: 18px; + border-radius: 50%; + background-color: white; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15), 0 0 0 0 transparent; + transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1), background-color 75ms cubic-bezier(0, 0, 0.2, 1); +} + +switch:hover > slider, switch:active > slider { + box-shadow: 0 2px 3px transparent, 0 0 0 6px alpha(currentColor,0.1); +} + +switch:checked { + color: @accent_fg_color; + background-color: @accent_bg_color; +} + +switch:checked:hover { + background-image: image(alpha(currentColor,0.1)); +} + +switch:checked:active { + background-image: image(rgba(0, 0, 0, 0.2)); +} + +switch:checked > slider { + color: @window_fg_color; + background-color: white; +} + +.osd switch:focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +.osd switch:checked { + background-color: rgba(255, 255, 255, 0.6); + color: rgba(0, 0, 0, 0.75); +} + +tabbar .box { + background-color: @headerbar_bg_color; + color: @headerbar_fg_color; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); + padding: 1px; + padding-top: 0; +} + +tabbar .box:backdrop { + background-color: @headerbar_backdrop_color; + transition: background-color 200ms ease-out; +} + +tabbar .box:backdrop > scrolledwindow, +tabbar .box:backdrop > .start-action, +tabbar .box:backdrop > .end-action { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +tabbar tabbox { + padding-bottom: 6px; + padding-top: 6px; + min-height: 34px; +} + +tabbar tabbox > tabboxchild { + border-radius: 6px; +} + +tabbar tabbox > tabboxchild { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +tabbar tabbox > tabboxchild:focus-within:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +tabbar tabbox > separator { + margin-top: 5px; + margin-bottom: 5px; + transition: opacity 150ms ease-in-out; +} + +tabbar tabbox > separator.hidden { + opacity: 0; +} + +tabbar tabbox > revealer > indicator { + min-width: 2px; + border-radius: 2px; + margin: 3px 6px; + background: alpha(@accent_color,0.5); +} + +tabbar tab { + transition: background 150ms ease-in-out; +} + +tabbar tab:selected { + background-color: alpha(currentColor,0.1); +} + +tabbar tab:selected:hover { + background-color: alpha(currentColor,0.13); +} + +tabbar tab:selected:active { + background-color: alpha(currentColor,0.19); +} + +tabbar tab:hover { + background-color: alpha(currentColor,0.07); +} + +tabbar tab:active { + background-color: alpha(currentColor,0.16); +} + +tabbar tabbox.single-tab tab, tabbar tabbox.single-tab tab:hover, tabbar tabbox.single-tab tab:active { + background: none; +} + +tabbar .start-action, +tabbar .end-action { + padding: 6px; +} + +tabbar .start-action:dir(ltr), +tabbar .end-action:dir(rtl) { + padding-right: 0; +} + +tabbar .start-action:dir(rtl), +tabbar .end-action:dir(ltr) { + padding-left: 0; +} + +toolbarview > .top-bar tabbar .box, +toolbarview > .bottom-bar tabbar .box, tabbar.inline .box { + background-color: transparent; + color: inherit; + box-shadow: none; + padding-bottom: 0; +} + +toolbarview > .top-bar tabbar .box:backdrop, +toolbarview > .bottom-bar tabbar .box:backdrop, tabbar.inline .box:backdrop { + background-color: transparent; + transition: none; +} + +toolbarview > .top-bar tabbar .box:backdrop > scrolledwindow, +toolbarview > .bottom-bar tabbar .box:backdrop > scrolledwindow, tabbar.inline .box:backdrop > scrolledwindow, +toolbarview > .top-bar tabbar .box:backdrop > .start-action, +toolbarview > .bottom-bar tabbar .box:backdrop > .start-action, +tabbar.inline .box:backdrop > .start-action, +toolbarview > .top-bar tabbar .box:backdrop > .end-action, +toolbarview > .bottom-bar tabbar .box:backdrop > .end-action, +tabbar.inline .box:backdrop > .end-action { + filter: none; + transition: none; +} + +toolbarview > .top-bar .collapse-spacing tabbar tabbox, +toolbarview > .bottom-bar .collapse-spacing tabbar tabbox, +toolbarview > .top-bar .collapse-spacing tabbar .start-action, +toolbarview > .bottom-bar .collapse-spacing tabbar .start-action, +toolbarview > .top-bar .collapse-spacing tabbar .end-action, +toolbarview > .bottom-bar .collapse-spacing tabbar .end-action { + padding-top: 0; + padding-bottom: 6px; +} + +dnd tab { + background-color: @headerbar_bg_color; + background-image: image(alpha(currentColor,0.19)); + color: @headerbar_fg_color; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03); + margin: 25px; +} + +tabbar tab, +dnd tab { + min-height: 26px; + padding: 4px; + border-radius: 6px; +} + +tabbar tab button.image-button, +dnd tab button.image-button { + padding: 0; + margin: 0; + min-width: 24px; + min-height: 24px; + border-radius: 9999px; +} + +tabbar tab indicator, +dnd tab indicator { + min-height: 2px; + border-radius: 2px; + background: alpha(@accent_color,0.5); + transform: translateY(4px); +} + +tabgrid > tabgridchild .card { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +tabgrid > tabgridchild:focus:focus-visible .card { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: 0; +} + +tabthumbnail { + border-radius: 16px; + transition: box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +tabthumbnail > box { + margin: 6px; +} + +tabthumbnail:drop(active) { + box-shadow: inset 0 0 0 2px alpha(@accent_bg_color,0.4); + background-color: alpha(@accent_bg_color,0.1); +} + +tabthumbnail .needs-attention:dir(ltr) { + transform: translate(8px, -8px); +} + +tabthumbnail .needs-attention:dir(rtl) { + transform: translate(-8px, -8px); +} + +tabthumbnail .needs-attention > widget { + background: @accent_color; + min-width: 12px; + min-height: 12px; + border-radius: 8px; + margin: 3px; + box-shadow: 0 1px 2px alpha(@accent_color,0.4); +} + +tabthumbnail .card { + background: none; + color: inherit; +} + +tabthumbnail .card picture { + outline: 1px solid rgba(255, 255, 255, 0.08); + outline-offset: -1px; + border-radius: 12px; +} + +tabthumbnail.pinned .card { + background-color: @thumbnail_bg_color; + color: @thumbnail_fg_color; +} + +tabthumbnail .icon-title-box { + border-spacing: 6px; +} + +tabthumbnail .tab-unpin-icon { + margin: 6px; + min-width: 24px; + min-height: 24px; +} + +tabthumbnail button.circular { + margin: 6px; + background-color: alpha(@thumbnail_bg_color,0.75); + min-width: 24px; + min-height: 24px; +} + +tabthumbnail button.circular:hover { + background-color: alpha(mix(@thumbnail_bg_color,currentColor,0.1),0.75); +} + +tabthumbnail button.circular:active { + background-color: alpha(mix(@thumbnail_bg_color,currentColor,0.2),0.75); +} + +taboverview > .overview .new-tab-button { + margin: 18px; +} + +tabview:drop(active), +tabbox:drop(active), +tabgrid:drop(active) { + box-shadow: none; +} + +cursor-handle { + all: unset; + padding: 24px 20px; +} + +cursor-handle > contents { + min-width: 20px; + min-height: 20px; + border-radius: 50%; + background-color: @accent_bg_color; +} + +cursor-handle.top > contents { + border-top-right-radius: 0; +} + +cursor-handle.bottom > contents { + border-top-left-radius: 0; + transform: translateX(1px); +} + +cursor-handle.insertion-cursor > contents { + border-top-left-radius: 0; + transform: translateX(1px) translateY(4px) rotate(45deg); +} + +magnifier { + background-color: @view_bg_color; +} + +actionbar > revealer > box.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible, searchbar > revealer > box.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible, .osd.toolbar button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible, headerbar.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):focus:focus-visible { + outline-color: rgba(255, 255, 255, 0.5); +} + +actionbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), searchbar > revealer > box menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), .toolbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), headerbar menubutton.suggested-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.destructive-action > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +actionbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +searchbar > revealer > box menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +.toolbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque), +headerbar menubutton.opaque > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) { + color: inherit; + background-color: transparent; +} + +actionbar > revealer > box switch, searchbar > revealer > box switch, .toolbar switch, headerbar switch { + margin-top: 4px; + margin-bottom: 4px; +} + +.toolbar { + padding: 6px; + border-spacing: 6px; +} + +.toolbar.osd { + padding: 12px; + border-radius: 12px; +} + +toolbarview > .top-bar .collapse-spacing .toolbar, +toolbarview > .bottom-bar .collapse-spacing .toolbar { + padding-top: 6px; + padding-bottom: 6px; +} + +/**************** + * GtkSearchBar * + ****************/ +searchbar > revealer > box { + padding: 6px 6px 7px 6px; + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; + box-shadow: inset 0 -1px alpha(@headerbar_border_color,0.12); +} + +searchbar > revealer > box:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +searchbar > revealer > box:backdrop > * { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +searchbar > revealer > box .close { + min-width: 18px; + min-height: 18px; + padding: 4px; + border-radius: 50%; +} + +searchbar > revealer > box .close:dir(ltr) { + margin-left: 10px; + margin-right: 4px; +} + +searchbar > revealer > box .close:dir(rtl) { + margin-left: 4px; + margin-right: 10px; +} + +toolbarview > .top-bar searchbar > revealer > box, +toolbarview > .bottom-bar searchbar > revealer > box, searchbar.inline > revealer > box, window.appchooser searchbar > revealer > box, window.shortcuts searchbar > revealer > box { + background-color: transparent; + color: inherit; + box-shadow: none; + padding-bottom: 6px; +} + +toolbarview > .top-bar searchbar > revealer > box:backdrop, +toolbarview > .bottom-bar searchbar > revealer > box:backdrop, searchbar.inline > revealer > box:backdrop { + background-color: transparent; + transition: none; +} + +toolbarview > .top-bar searchbar > revealer > box:backdrop > *, +toolbarview > .bottom-bar searchbar > revealer > box:backdrop > *, searchbar.inline > revealer > box:backdrop > * { + filter: none; + transition: none; +} + +toolbarview > .top-bar .collapse-spacing searchbar > revealer > box, +toolbarview > .bottom-bar .collapse-spacing searchbar > revealer > box, window.appchooser.csd searchbar > revealer > box, window.shortcuts searchbar > revealer > box { + padding-top: 6px; + padding-bottom: 6px; +} + +/**************** + * GtkActionBar * + ****************/ +actionbar > revealer > box { + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; + box-shadow: inset 0 1px alpha(@headerbar_border_color,0.12); + padding: 7px 6px 6px 6px; +} + +actionbar > revealer > box, actionbar > revealer > box > box.start, actionbar > revealer > box > box.end { + border-spacing: 6px; +} + +actionbar > revealer > box:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +actionbar > revealer > box:backdrop > * { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +toolbarview > .top-bar actionbar > revealer > box, +toolbarview > .bottom-bar actionbar > revealer > box { + background-color: transparent; + color: inherit; + box-shadow: none; + padding-top: 6px; +} + +toolbarview > .top-bar actionbar > revealer > box:backdrop, +toolbarview > .bottom-bar actionbar > revealer > box:backdrop { + background-color: transparent; + transition: none; +} + +toolbarview > .top-bar actionbar > revealer > box:backdrop > *, +toolbarview > .bottom-bar actionbar > revealer > box:backdrop > * { + filter: none; + transition: none; +} + +toolbarview > .top-bar .collapse-spacing actionbar > revealer > box, +toolbarview > .bottom-bar .collapse-spacing actionbar > revealer > box { + padding-top: 6px; + padding-bottom: 6px; +} + +/************* + * AdwBanner * + *************/ +banner > revealer > widget { + /* There are 2 more instances in _sidebars.css, keep in sync with that */ + background-color: mix(@accent_bg_color,@window_bg_color,0.7); + color: @window_fg_color; + padding: 6px; +} + +banner > revealer > widget:backdrop { + background-color: mix(@accent_bg_color,@window_bg_color,0.85); + transition: background-color 200ms ease-out; +} + +banner > revealer > widget:backdrop > label, banner > revealer > widget:backdrop > button { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +/****************** + * AdwToolbarView * + ******************/ +toolbarview > .top-bar .collapse-spacing, +toolbarview > .bottom-bar .collapse-spacing { + padding-top: 0; + padding-bottom: 0; +} + +toolbarview > .top-bar .collapse-spacing headerbar, +toolbarview > .bottom-bar .collapse-spacing headerbar { + padding-top: 3px; + padding-bottom: 3px; +} + +toolbarview.undershoot-top scrolledwindow > undershoot.top { + box-shadow: none; + background: linear-gradient(to bottom, alpha(@shade_color,0.75), transparent 6px); +} + +toolbarview.undershoot-bottom scrolledwindow > undershoot.bottom { + box-shadow: none; + background: linear-gradient(to top, alpha(@shade_color,0.75), transparent 6px); +} + +window.devel toolbarview > .top-bar { + background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")), image(transparent)); + background-repeat: repeat-x; +} + +window.devel dialog toolbarview > .top-bar { + background-image: unset; + background-repeat: unset; +} + +toolbarview > .top-bar, +toolbarview > .bottom-bar { + background-color: @headerbar_backdrop_color; + color: @headerbar_fg_color; +} + +toolbarview > .top-bar:backdrop, +toolbarview > .bottom-bar:backdrop { + background-color: @headerbar_bg_color; + transition: background-color 200ms ease-out; +} + +toolbarview > .top-bar:backdrop > windowhandle, +toolbarview > .bottom-bar:backdrop > windowhandle { + filter: opacity(0.5); + transition: filter 200ms ease-out; +} + +toolbarview > .top-bar { + box-shadow: 0 1px alpha(currentColor,0.12); +} + +toolbarview > .top-bar.border { + box-shadow: 0 1px alpha(currentColor,0.12); +} + +toolbarview > .bottom-bar { + box-shadow: 0 -1px alpha(currentColor,0.12); +} + +toolbarview > .bottom-bar.border { + box-shadow: 0 -1px alpha(currentColor,0.12); +} + +.sidebar-pane toolbarview > .top-bar, +.sidebar-pane toolbarview > .bottom-bar, .content-pane toolbarview > .top-bar, +.content-pane toolbarview > .bottom-bar, .about toolbarview > .top-bar, +.about toolbarview > .bottom-bar { + box-shadow: none; +} + +.sidebar-pane toolbarview > .top-bar, .sidebar-pane toolbarview > .top-bar:backdrop, +.sidebar-pane toolbarview > .bottom-bar, +.sidebar-pane toolbarview > .bottom-bar:backdrop, .content-pane toolbarview > .top-bar, .content-pane toolbarview > .top-bar:backdrop, +.content-pane toolbarview > .bottom-bar, +.content-pane toolbarview > .bottom-bar:backdrop, .about toolbarview > .top-bar, .about toolbarview > .top-bar:backdrop, +.about toolbarview > .bottom-bar, +.about toolbarview > .bottom-bar:backdrop { + background-color: transparent; +} + +tooltip { + padding: 6px 10px; + border-radius: 9px; + box-shadow: none; +} + +tooltip.background { + background-color: rgba(0, 0, 0, 0.8); + background-clip: padding-box; + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; +} + +tooltip > box { + border-spacing: 6px; +} + +.view, window.print .dialog-action-box, +textview > text, +dialog-host > dialog.view sheet, +window.print dialog-host > dialog.dialog-action-box sheet, +iconview { + color: @view_fg_color; + background-color: @view_bg_color; +} + +.view:disabled, window.print .dialog-action-box:disabled, +textview > text:disabled, +dialog-host > dialog.view sheet:disabled, +window.print dialog-host > dialog.dialog-action-box sheet:disabled, +iconview:disabled { + color: alpha(currentColor,0.5); + background-color: mix(@window_bg_color,@view_bg_color,0.4); +} + +.view:selected:focus, .view:selected, window.print .dialog-action-box:selected, +textview > text:selected, +dialog-host > dialog.view sheet:selected, +window.print dialog-host > dialog.dialog-action-box sheet:selected, +iconview:selected { + background-color: alpha(@accent_bg_color,0.25); + border-radius: 6px; +} + +textview { + caret-color: currentColor; +} + +textview > text { + background-color: transparent; +} + +textview > border { + background-color: mix(@window_bg_color,@view_bg_color,0.5); +} + +textview:drop(active) { + caret-color: @accent_bg_color; +} + +rubberband { + border: 1px solid @accent_color; + background-color: alpha(@accent_color,0.2); +} + +flowbox > flowboxchild, +gridview > child { + padding: 3px; + border-radius: 6px; +} + +flowbox > flowboxchild, +gridview > child { + outline: 0 solid transparent; + outline-offset: 4px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +flowbox > flowboxchild:focus:focus-visible, +gridview > child:focus:focus-visible { + outline-color: alpha(@accent_color,0.45); + outline-width: 2px; + outline-offset: -2px; +} + +flowbox > flowboxchild:selected, +gridview > child:selected { + background-color: alpha(@accent_bg_color,0.25); +} + +gridview > child.activatable:hover { + background-color: alpha(currentColor,0.04); +} + +gridview > child.activatable:active { + background-color: alpha(currentColor,0.08); +} + +gridview > child.activatable:selected:hover { + background-color: alpha(@accent_bg_color,0.32); +} + +gridview > child.activatable:selected:active { + background-color: alpha(@accent_bg_color,0.39); +} + +viewswitcher { + border-spacing: 3px; +} + +viewswitcher.narrow { + margin-top: -3px; + margin-bottom: -3px; + min-height: 6px; +} + +viewswitcher button.toggle { + padding: 0; +} + +viewswitcher button.toggle > stack > box.narrow { + font-size: 0.75rem; + padding-top: 4px; +} + +viewswitcher button.toggle > stack > box.narrow > label { + min-height: 18px; + padding-left: 3px; + padding-right: 3px; + padding-bottom: 2px; +} + +viewswitcher button.toggle > stack > box.wide { + padding: 2px 12px; + border-spacing: 6px; +} + +/********************** + * AdwViewSwitcherBar * + **********************/ +viewswitcherbar actionbar > revealer > box { + padding-left: 0; + padding-right: 0; + padding-top: 7px; +} + +toolbarview > .top-bar .collapse-spacing viewswitcherbar actionbar > revealer > box, +toolbarview > .bottom-bar .collapse-spacing viewswitcherbar actionbar > revealer > box { + padding-top: 6px; +} + +/************************ + * AdwViewSwitcherTitle * + ************************/ +viewswitchertitle { + margin-top: -6px; + margin-bottom: -6px; +} + +viewswitchertitle viewswitcher { + margin-left: 12px; + margin-right: 12px; +} + +viewswitchertitle viewswitcher.narrow { + margin-top: 3px; + margin-bottom: 3px; +} + +viewswitchertitle viewswitcher.wide { + margin-top: 6px; + margin-bottom: 6px; +} + +viewswitchertitle windowtitle { + margin-top: 0; + margin-bottom: 0; +} + +/******************* + * AdwIndicatorBin * + *******************/ +indicatorbin > indicator, indicatorbin > mask { + min-width: 6px; + min-height: 6px; + border-radius: 100px; +} + +indicatorbin > indicator { + margin: 1px; + background: alpha(currentColor,0.4); +} + +indicatorbin > mask { + padding: 1px; + background: black; +} + +indicatorbin.needs-attention > indicator { + background: @accent_color; +} + +indicatorbin.badge > indicator, +indicatorbin.badge > mask { + min-height: 13px; +} + +indicatorbin.badge > indicator > label { + font-size: 0.6rem; + font-weight: bold; + padding-left: 4px; + padding-right: 4px; + color: white; +} + +indicatorbin.badge.needs-attention > indicator { + background: @accent_bg_color; +} + +indicatorbin.badge.needs-attention > indicator > label { + color: @accent_fg_color; +} + +window { + border: none; +} + +window.csd { + margin: 0; + border-radius: 12px; + outline-offset: -1px; + outline: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 15px 16px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 0 36px transparent, 0 0 0 1px @headerbar_darker_shade_color; +} + +window.csd:backdrop { + transition: box-shadow 200ms ease-out; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 3px 3px 0 rgba(0, 0, 0, 0.18), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 0 36px transparent, 0 0 0 1px @headerbar_darker_shade_color; +} + +window.csd.tiled, window.csd.tiled-top, window.csd.tiled-left, window.csd.tiled-right, window.csd.tiled-bottom { + border-radius: 0; + outline: none; +} + +window.csd.maximized, window.csd.fullscreen { + border-radius: 0; + outline: none; + box-shadow: none; + transition: none; +} + +window.solid-csd { + margin: 0; + padding: 2px; + border-radius: 0; + background-color: @headerbar_bg_color; + border: 1px solid @headerbar_darker_shade_color; +} + +window.ssd { + box-shadow: 0 0 0 1px @headerbar_darker_shade_color; +} + +.nautilus-window .floating-bar { + min-height: 32px; + padding: 0; + margin: 6px; + border-style: none; + border-radius: 6px; + background-color: @accent_color; + color: @accent_fg_color; + box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.05), 0 2px 3px -1px rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.05); +} + +.nautilus-window .floating-bar button { + margin: 4px; + color: @accent_fg_color; +} + +#NautilusQueryEditor > menubutton { + margin: 6px 0; +} + +#NautilusQueryEditor > menubutton > button.image-button { + min-width: 24px; + min-height: 24px; + padding: 0px; +} + +#NautilusPathBar { + background-color: alpha(currentColor,0.05); + border-radius: 6px; + padding: 0; +} + +#NautilusPathButton { + margin: 0; + border-radius: 6px; +} + +window.org-gnome-TextEditor popover.open-popover > contents { + padding: 0; +} + +popover.background.global-search > arrow, popover.background.global-search > contents { + padding: 0; +} + +popover.background.pages-popover listview > row { + padding: 6px; +} + +popover.background.pages-popover listview > row button { + margin: 0; +} + +popover.background.pages-popover listview > row check { + margin: 4px 2px; + -gtk-icon-size: 12px; +} + +panelresizer .top-bar { + box-shadow: inset 0 -1px alpha(currentColor,0.12); +} + +.frameheader.header { + min-height: 48px; + padding: 0; + border: none; + border-bottom: 1px solid alpha(currentColor,0.12); + background-color: @headerbar_backdrop_color; +} + +.frameheader.header:backdrop { + background-color: @headerbar_bg_color; +} + +.frameheader.header tabbar.inline tabbox > tabboxchild { + margin: 0; +} + +panelframeswitcher.frameheader.header { + padding: 0 6px; +} + +panelframeswitcher > button.toggle.image-button { + border: none; + margin: 6px 0; +} + +panelstatusbar { + box-shadow: inset 0 1px alpha(currentColor,0.12); +} + +panelstatusbar > menubutton > button, +panelstatusbar > paneltogglebutton button { + border-radius: 0; +} + +panelwidget entry.statusbar { + background-color: @window_bg_color; + border-radius: 0; + outline: none; + box-shadow: none; + border-top: 1px solid alpha(currentColor,0.12); +} + +panelwidget entry.statusbar:focus-within { + outline: none; +} + +.IdeTweaksWindow .boxed-list, .IdeTweaksWindow list.content, +.org-gnome-Builder .boxed-list, +.org-gnome-Builder list.content { + box-shadow: inset 0 0 0 1px alpha(currentColor,0.08); +} + +.style-variant { + padding: 0 12px; +} + +.style-variant button.toggle { + padding: 0; +} + +.style-variant button.toggle, .style-variant button.toggle:hover, .style-variant button.toggle:focus, .style-variant button.toggle:active, .style-variant button.toggle:checked { + background: none; + outline: none; + border: none; + box-shadow: none; +} + +.style-variant button.toggle > stylevariantpreview > .wallpaper { + border-radius: 6px; + outline-color: transparent; + outline-width: 3px; + outline-offset: 3px; + outline-style: solid; + box-shadow: none; +} + +.style-variant button.toggle:hover > stylevariantpreview > .wallpaper { + outline-color: alpha(currentColor,0.05); +} + +.style-variant button.toggle:active > stylevariantpreview > .wallpaper { + outline-color: alpha(currentColor,0.15); +} + +.style-variant button.toggle:checked > stylevariantpreview > .wallpaper { + outline-color: @accent_color; +} + +playlistview scrollbar.overlay-indicator.dragging, playlistview scrollbar.overlay-indicator.hovering { + background-color: transparent; +} + +playlistview queuerow picture.cover, +playlistview queuerow image.card { + border: none; +} + +themeselector, +panelthemeselector { + margin: 9px; +} + +themeselector checkbutton, +panelthemeselector checkbutton { + padding: 0; + min-height: 44px; + min-width: 44px; + padding: 1px; + background-clip: content-box; + border-radius: 9999px; + box-shadow: inset 0 0 0 1px alpha(currentColor,0.12); +} + +themeselector checkbutton.follow:checked, themeselector checkbutton.light:checked, themeselector checkbutton.dark:checked, +panelthemeselector checkbutton.follow:checked, +panelthemeselector checkbutton.light:checked, +panelthemeselector checkbutton.dark:checked { + box-shadow: inset 0 0 0 2px @accent_bg_color; +} + +themeselector checkbutton.follow, +panelthemeselector checkbutton.follow { + background-image: linear-gradient(to bottom right, #ffffff 50%, #202020 50%); +} + +themeselector checkbutton.light, +panelthemeselector checkbutton.light { + background-color: #ffffff; +} + +themeselector checkbutton.dark, +panelthemeselector checkbutton.dark { + background-color: #202020; +} + +themeselector checkbutton.theme-selector radio, +panelthemeselector checkbutton.theme-selector radio { + -gtk-icon-source: none; + border: none; + box-shadow: none; + min-height: 20px; + min-width: 20px; + padding: 0; +} + +themeselector checkbutton.theme-selector radio, themeselector checkbutton.theme-selector radio:hover, themeselector checkbutton.theme-selector radio:active, themeselector checkbutton.theme-selector radio:checked, +panelthemeselector checkbutton.theme-selector radio, +panelthemeselector checkbutton.theme-selector radio:hover, +panelthemeselector checkbutton.theme-selector radio:active, +panelthemeselector checkbutton.theme-selector radio:checked { + background-color: transparent; + background-image: none; +} + +themeselector checkbutton.theme-selector radio:checked, +panelthemeselector checkbutton.theme-selector radio:checked { + -gtk-icon-size: 20px; + -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/checkbox-checked-symbolic@2.svg"))); +} + +themeselector checkbutton.theme-selector radio:checked, themeselector checkbutton.theme-selector radio:checked:hover, themeselector checkbutton.theme-selector radio:checked:active, +panelthemeselector checkbutton.theme-selector radio:checked, +panelthemeselector checkbutton.theme-selector radio:checked:hover, +panelthemeselector checkbutton.theme-selector radio:checked:active { + color: @accent_fg_color; + background-color: @accent_bg_color; + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.1); +} + +popover.menu themeswitcher { + padding: 6px; +} + +popover.menu themeswitcher .check { + min-height: 20px; + min-width: 20px; + background: none; + padding: 0; + margin: 0; + border-radius: 9999px; + color: @accent_fg_color; + background-color: @accent_bg_color; +} + +popover.menu themeswitcher .check, popover.menu themeswitcher .check:hover, popover.menu themeswitcher .check:active { + box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.1); +} + +popover.menu themeswitcher checkbutton { + padding: 0; + min-height: 44px; + min-width: 44px; + padding: 1px; + border: none; + background-clip: content-box; + border-radius: 9999px; + box-shadow: inset 0 0 0 1px alpha(currentColor,0.12); +} + +popover.menu themeswitcher checkbutton:checked { + box-shadow: inset 0 0 0 2px @accent_color; +} + +popover.menu themeswitcher checkbutton radio { + padding: 0; + border: none; +} + +popover.menu themeswitcher checkbutton radio, popover.menu themeswitcher checkbutton radio:hover, popover.menu themeswitcher checkbutton radio:active, popover.menu themeswitcher checkbutton radio:checked, popover.menu themeswitcher checkbutton radio:indeterminate { + background-color: transparent; + background-image: none; + box-shadow: none; + color: transparent; +} + +popover.menu themeswitcher checkbutton radio:checked, popover.menu themeswitcher checkbutton radio:indeterminate { + -gtk-icon-source: none; + -gtk-icon-size: 0; +} + +popover.menu themeswitcher checkbutton.system { + background: linear-gradient(-45deg, #1e1e1e 50%, white 50%); +} + +popover.menu themeswitcher checkbutton.light { + color: alpha(black,0.8); + background-color: white; +} + +popover.menu themeswitcher checkbutton.dark { + color: white; + background-color: #1e1e1e; +} + +window#desktopwindow.background { + background: none; +} + +/* GTK NAMED COLORS + ---------------- + use responsibly! */ +@define-color destructive_bg_color #E53935; +@define-color destructive_fg_color #FFFFFF; +@define-color destructive_color #E53935; +@define-color success_bg_color #4CAF50; +@define-color success_fg_color #FFFFFF; +@define-color success_color #4CAF50; +@define-color warning_bg_color #FBC02D; +@define-color warning_fg_color rgba(0, 0, 0, 0.87); +@define-color warning_color #FBC02D; +@define-color error_bg_color #E53935; +@define-color error_fg_color #FFFFFF; +@define-color error_color #E53935; +/* Public colors from Default */ +@define-color theme_bg_color @window_bg_color; +@define-color theme_fg_color @window_fg_color; +@define-color theme_base_color @view_bg_color; +@define-color theme_text_color @view_fg_color; +@define-color theme_selected_bg_color @accent_bg_color; +@define-color theme_selected_fg_color @accent_fg_color; +@define-color insensitive_bg_color mix(@window_bg_color,@view_bg_color,0.4); +@define-color insensitive_fg_color alpha(@window_fg_color,0.5); +@define-color insensitive_base_color @view_bg_color; +@define-color borders alpha(currentColor,0.12); +@define-color theme_unfocused_bg_color @window_bg_color; +@define-color theme_unfocused_fg_color @window_fg_color; +@define-color theme_unfocused_base_color @view_bg_color; +@define-color theme_unfocused_text_color @view_fg_color; +@define-color theme_unfocused_selected_bg_color @accent_bg_color; +@define-color theme_unfocused_selected_fg_color @accent_fg_color; +@define-color unfocused_insensitive_color @insensitive_bg_color; +@define-color unfocused_borders alpha(currentColor,0.12); diff --git a/src/sass/gtk/_defaults.scss b/src/sass/gtk/_defaults.scss new file mode 100644 index 00000000..ca934eec --- /dev/null +++ b/src/sass/gtk/_defaults.scss @@ -0,0 +1,84 @@ +/* GTK NAMED COLORS + ---------------- + use responsibly! */ + +// Sass thinks we're using the colors in the variables as strings and may shoot +// warning, it's innocuous and can be defeated by using #{$var}. + +// These are the colors apps are can override. We define the defaults here and +// define variables for them in _colors.scss + +// The main accent color and the matching text value +@define-color accent_bg_color #{$primary}; +@define-color accent_fg_color #{on($primary)}; +@define-color accent_color #{$primary}; + + +// destructive-action buttons +@define-color destructive_bg_color #{$destructive}; +@define-color destructive_fg_color #{on($destructive)}; +@define-color destructive_color #{$destructive}; + +// Levelbars, entries, labels and infobars. These don't need text colors +@define-color success_bg_color #{$success}; +@define-color success_fg_color #{on($success)}; +@define-color success_color #{$success}; + +@define-color warning_bg_color #{$warning}; +@define-color warning_fg_color #{on($warning)}; +@define-color warning_color #{$warning}; + +@define-color error_bg_color #{$error}; +@define-color error_fg_color #{on($error)}; +@define-color error_color #{$error}; + +// Window +@define-color window_bg_color #{$background}; +@define-color window_fg_color #{$text}; + +// Views - e.g. text view or tree view +@define-color view_bg_color #{$base}; +@define-color view_fg_color #{$text}; + +// Header bar, search bar, tab bar +@define-color headerbar_bg_color #{$titlebar-backdrop}; +@define-color headerbar_fg_color #{$titlebar-text}; +@define-color headerbar_border_color #{$titlebar-text}; +@define-color headerbar_backdrop_color #{$titlebar}; +@define-color headerbar_shade_color #{if($variant == 'light', transparentize(black, .88), transparentize(black, .64))}; +@define-color headerbar_darker_shade_color #{$window-border}; + +// Split pane views +@define-color sidebar_bg_color #{$sidebar}; +@define-color sidebar_fg_color #{on($sidebar)}; +@define-color sidebar_backdrop_color #{$sidebar-backdrop}; +@define-color sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))}; +@define-color sidebar_border_color #{transparentize(on($sidebar), .92)}; + +@define-color secondary_sidebar_bg_color #{$base}; +@define-color secondary_sidebar_fg_color #{$text}; +@define-color secondary_sidebar_backdrop_color #{$background}; +@define-color secondary_sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))}; +@define-color secondary_sidebar_border_color #{$border}; + +// Cards, boxed lists +@define-color card_bg_color #{if($variant == 'light', $base, $fill)}; +@define-color card_fg_color #{$text}; +@define-color card_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .64))}; + +// Dialogs +@define-color dialog_bg_color #{$base-alt}; +@define-color dialog_fg_color #{$text}; + +// Popovers +@define-color popover_bg_color #{$popover}; +@define-color popover_fg_color #{$text}; +@define-color popover_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))}; + +// Thumbnails +@define-color thumbnail_bg_color #{$surface}; +@define-color thumbnail_fg_color #{$text}; + +// Miscellaneous +@define-color shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))}; +@define-color scrollbar_outline_color #{if($variant == 'light', white, transparentize(black, .5))};