summaryrefslogtreecommitdiff
path: root/desktop-themes/YaruOK/gtk-4.0/_common.scss
diff options
context:
space:
mode:
Diffstat (limited to 'desktop-themes/YaruOK/gtk-4.0/_common.scss')
-rw-r--r--desktop-themes/YaruOK/gtk-4.0/_common.scss4387
1 files changed, 4387 insertions, 0 deletions
diff --git a/desktop-themes/YaruOK/gtk-4.0/_common.scss b/desktop-themes/YaruOK/gtk-4.0/_common.scss
new file mode 100644
index 00000000..012ae960
--- /dev/null
+++ b/desktop-themes/YaruOK/gtk-4.0/_common.scss
@@ -0,0 +1,4387 @@
+@function gtkalpha($c,$a) {
+ @return unquote("alpha(#{$c},#{$a})");
+}
+
+$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$asset_suffix: if($variant=='dark', '-dark', '');
+$backdrop_transition: 200ms ease-out;
+$button_transition: all 200ms $ease-out-quad;
+$focus_transition: outline-width 200ms $ease-out-quad, outline-offset 200ms $ease-out-quad;
+$button_radius: 4px; // Yaru change: we want everything to be less round
+$menu_radius: 3px; // Yaru change: we want everything to be less round
+$menu_margin: $menu_radius; //margin around menuitems & sidebar items
+$window_radius: $button_radius + 3;
+$popover_radius: $button_radius + 2; // Yaru change: we want everything to be less round
+
+/***************
+ * Base States *
+ ***************/
+.background {
+ color: $fg_color;
+ background-color: $bg_color;
+
+ &:backdrop {
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ }
+}
+
+dnd {
+ color: $fg-color;
+}
+
+.normal-icons {
+ -gtk-icon-size: 16px;
+}
+
+.large-icons {
+ -gtk-icon-size: 32px;
+}
+
+/*
+ These wildcard seems unavoidable, need to investigate.
+ Wildcards are bad and troublesome, use them with care,
+ or better, just don't.
+ Every time a wildcard is used a kitten dies, painfully.
+*/
+
+spinner:disabled,
+arrow:disabled,
+scrollbar:disabled,
+check:disabled,
+radio:disabled,
+treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); }
+
+.view,
+%view {
+ color: $text_color;
+ background-color: $base_color;
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ background-color: $insensitive_bg_color;
+ }
+
+ &:selected {
+ &:focus, & {
+ @extend %selected_items;
+
+ border-radius: 3px;
+ }
+ }
+}
+
+textview {
+ > text {
+ @extend %view;
+
+ > selection { &:focus, & { @extend %selected_items; }}
+ }
+
+ &:drop(active) {
+ caret-color: $drop_target_color;
+ }
+}
+
+textview > border { background-color: mix($bg_color, $base_color, 50%); }
+
+iconview {
+ @extend .view;
+
+ @include focus-ring();
+
+ &:drop(active) {
+ box-shadow: none;
+ }
+
+ > dndtarget:drop(active) {
+ border-style: solid;
+ border-width: 1px;
+ border-color: $selected_borders_color;
+ }
+}
+
+rubberband {
+ border: 1px solid darken($selected_bg_color, 10%);
+ background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
+}
+
+flowbox {
+ > rubberband { @extend rubberband; }
+
+ > flowboxchild {
+ padding: 3px;
+ transition: $focus_transition;
+
+ @include focus-ring();
+
+ &:selected {
+ outline-color: $alt_focus_border_color;
+
+ @extend %selected_items;
+ }
+ }
+}
+
+gridview {
+ > rubberband { @extend rubberband; }
+
+ > child {
+ padding: 3px;
+ transition: $focus_transition;
+
+ @include focus-ring();
+
+ &:selected {
+ outline-color: $alt_focus_border_color;
+
+ @extend %selected_items;
+ }
+
+ box { //cells
+ border-spacing: 8px; //label separation
+ margin: 12px;
+ }
+ }
+}
+
+coverflow cover {
+ color: $text_color;
+ background-color: $base_color;
+ border: 1px solid black;
+}
+
+label {
+ @include focus-ring();
+
+ &.separator {
+ @extend .dim-label;
+ }
+
+ &:selected { @extend %nobg_selected_items; }
+
+ > selection {
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+
+ button & { color: inherit; }
+
+ > selection { @extend %selected_items_disabled; }
+ }
+
+ &.error {
+ color: $error_color;
+ &:disabled { color: transparentize($error_color,0.5); }
+ }
+}
+
+.dim-label {
+ opacity: $dim_label_opacity;
+ text-shadow: none;
+}
+
+window.assistant {
+ .sidebar {
+ padding: $menu-margin;
+ border-top: 1px solid $borders_color;
+ }
+
+ &.csd .sidebar { border-top-style: none; }
+
+ .sidebar > label { padding: 6px 12px; }
+
+ .sidebar > label.highlight {
+ background-color: $menu_selected_color;
+ border-radius: $menu-margin;
+ }
+}
+
+window.aboutdialog image.large-icons {
+ -gtk-icon-size: 128px;
+}
+
+%osd,
+.osd {
+ color: $osd_fg_color;
+ border: none;
+ background-color: $osd_bg_color;
+ background-clip: padding-box;
+ -gtk-icon-shadow: 0 1px black;
+
+}
+
+
+/*********************
+ * Spinner Animation *
+ *********************/
+@keyframes spin {
+ to { transform: rotate(1turn); }
+}
+
+spinner {
+ background: none;
+ opacity: 0; // non spinning spinner makes no sense
+ -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
+
+ &:checked {
+ opacity: 1;
+ animation: spin 1s linear infinite;
+
+ &:disabled { opacity: 0.5; }
+ }
+}
+
+/**********************
+ * General Typography *
+ **********************/
+
+.large-title {
+ font-weight: 300;
+ font-size: 24pt;
+}
+.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 {
+ 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;
+}
+
+/****************
+ * Text Entries *
+ ****************/
+
+%entry,
+entry {
+ %entry_basic, & {
+ min-height: 32px;
+ padding-left: 8px;
+ padding-right: 8px;
+ border: 1px solid;
+ border-radius: $button_radius;
+ border-spacing: 6px;
+ transition: all 200ms $ease-out-quad;
+
+ @include entry(normal);
+
+ @include focus-ring($focus-state: 'focus-within');
+
+ > image { // icons inside the entry
+ &.left { margin-right: 6px; }
+ &.right { margin-left: 6px; }
+ }
+
+ > text > placeholder {
+ @extend .dim-label;
+ }
+
+ > text > block-cursor {
+ @include entry(block_cursor);
+ }
+
+ &.flat {
+ &:focus-within, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ min-height: 0;
+ padding: 2px;
+ background-color: transparent;
+ border-color: transparent;
+ border-radius: 0;
+ }
+ }
+
+ &:focus-within {
+ @include entry(focus);
+ > placeholder {
+ opacity: 0; /* We hide placeholders on focus */
+ }
+ }
+
+ &:disabled { @include entry(insensitive); }
+
+ > text > selection { @extend %selected_items; }
+
+ // entry error and warning style
+ @each $e_type, $e_color in (error, $error_color),
+ (warning, $warning_color) {
+ &.#{$e_type} {
+ color: $e_color;
+
+ @include focus-ring($focus-state: 'focus-within', $fc: transparentize($e_color, 0.5));
+
+ &:focus-within { @include entry(focus, $e_color); }
+
+ > selection { background-color: $e_color; }
+ }
+ }
+
+ > image { // entry icons colors
+ color: mix($fg_color, $base_color, 80%);
+
+ &:hover { color: $fg_color; }
+
+ &:active { color: $selected_bg_color; }
+
+ }
+
+ &.password image.caps-lock-indicator {
+ color: mix($backdrop_fg_color, $backdrop_base_color, 80%);
+ }
+
+ &:drop(active) {
+ &:focus-within, & {
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 1px $drop_target_color;
+ }
+ }
+
+ .osd & {
+ @include entry(osd);
+
+ &:focus-within { @include entry(osd-focus); }
+
+ &:disabled { @include entry(osd-insensitive); }
+ }
+ }
+
+ > progress {
+ margin-bottom: 2px;
+ }
+
+ progress > trough > progress {
+ background-color: transparent;
+ background-image: none;
+ border-radius: 0;
+ border-width: 0 0 2px;
+ border-color: $selected_bg_color;
+ border-style: solid;
+ box-shadow: none;
+
+ }
+
+ // linked entries
+ .linked:not(.vertical) > & { @extend %linked; }
+
+ .linked:not(.vertical) > &:drop(active) + &,
+ .linked:not(.vertical) > &:drop(active) + button,
+ .linked:not(.vertical) > &:drop(active) + menubutton > button,
+ .linked:not(.vertical) > &:drop(active) + dropdown > button,
+ .linked:not(.vertical) > &:drop(active) + colorbutton > button,
+ .linked:not(.vertical) > &:drop(active) + fontbutton > button,
+ .linked:not(.vertical) > &:drop(active) + filechooserbutton > button,
+ .linked:not(.vertical) > &:drop(active) + filechooserbutton > combobox > box > button.combo,
+ .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
+ .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
+
+ // Vertically linked entries
+ // FIXME: take care of "colored" entries
+ .linked.vertical > & {
+ @extend %linked_vertical;
+
+ // brighter border between linked entries
+ &:not(:disabled) + entry:not(:disabled),
+ &:not(:disabled) + %entry:not(:disabled) {
+ border-top-color: mix($borders_color, $base_color, 30%);
+ }
+
+ // brighter border between linked insensitive entries
+ &:disabled + %entry:disabled,
+ &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
+
+ + %entry:drop(active):not(:only-child),
+ + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
+
+ &:drop(active):not(:only-child) {
+ + %entry,
+ + entry,
+ + button,
+ + menubutton > button,
+ + dropdown > button,
+ + colorbutton > button,
+ + fontbutton > button,
+ + filechooserbutton > button,
+ + filechooserbutton > combobox > box > button.combo,
+ + appchooserbutton > combobox > box > button.combo,
+ + combobox > box > button.combo { border-top-color: $drop_target_color; }
+ }
+ }
+
+ &.error { color: $error_color; }
+}
+
+treeview entry {
+ &:focus-within {
+ &:dir(rtl), &:dir(ltr) { // specificity bump hack
+ background-color: $base_color;
+ transition-property: color, background;
+ }
+ }
+
+ &.flat, & {
+ border-radius: 0;
+ background-image: none;
+ background-color: $base_color;
+
+ &:focus-within { border-color: $selected_bg_color; }
+ }
+}
+
+/*******************
+ * Editable Labels *
+ *******************/
+editablelabel > stack > text {
+ @include entry(normal);
+}
+
+/***********
+ * Buttons *
+ ***********/
+// stuff for .needs-attention
+$_dot_color: if($variant=='light', $selected_bg_color,
+ lighten($selected_bg_color,15%));
+@keyframes needs_attention {
+ from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
+ to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
+}
+
+%button,
+button {
+ @at-root %button_basic, & {
+
+ min-height: 24px;
+ min-width: 16px;
+ padding: 4px 9px;
+ border: 1px solid;
+ border-radius: $button_radius;
+ transition: $button_transition;
+
+ @include button(normal);
+
+ @include focus-ring();
+
+ &:hover {
+ @include button(hover);
+ -gtk-icon-filter: brightness(1.2);
+ }
+
+ &:active,
+ &:checked {
+ @include button(active);
+
+ transition-duration: 50ms;
+ }
+
+ &:checked:hover { @include button(checked-hover); }
+ &:checked:active { @include button(checked-active); }
+
+ &:backdrop {
+ &.flat, & {
+ @include button(backdrop);
+
+ transition: $backdrop_transition;
+ -gtk-icon-filter: none;
+
+ &:active,
+ &:checked { @include button(backdrop-active); }
+
+ &:disabled {
+ @include button(backdrop-insensitive);
+
+ &:active,
+ &:checked { @include button(backdrop-insensitive-active); }
+ }
+ }
+ }
+
+ &:disabled {
+ @include button(insensitive);
+
+ &:active,
+ &:checked { @include button(insensitive-active); }
+ }
+
+ @at-root %button_basic_flat,
+ &.flat {
+ @include button(undecorated);
+ // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set
+ // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
+ // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
+ // in this case the duration is increased.
+ transition: none;
+
+ &:hover {
+ @include button(undecorated-hover);
+ transition: $button_transition;
+ transition-duration: 500ms;
+ }
+ &:active,
+ &:checked {
+ @include button(undecorated-active);
+ transition: $button_transition;
+ }
+ &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }
+ }
+
+ &.image-button {
+ min-width: 24px;
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+
+ &.text-button {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ &.text-button.image-button {
+ padding-left: 8px;
+ padding-right: 8px;
+
+ label {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+ }
+
+ @at-root %button_basic_drop_active,
+ &:drop(active) {
+ color: $drop_target_color;
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 1px $drop_target_color;
+ }
+ }
+
+ @at-root %button_selected, & {
+ row:selected & {
+ @if $variant == 'light' { border-color: $selected_borders_color; }
+ }
+
+ @at-root %button_selected_flat, &.flat {
+ row:selected & {
+ &:not(:active):not(:checked):not(:hover):not(disabled) {
+ color: $selected_fg_color;
+ border-color: transparent;
+
+ &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
+ }
+ }
+ }
+ }
+
+
+ // big standalone buttons like in Documents pager
+ &.osd {
+ min-width: 26px;
+ min-height: 32px;
+
+ &.image-button {
+ min-width: 30px;
+ &:only-child {
+ margin: 4px;
+ border-radius: 50%; // completely round when it is a single button
+ box-shadow: 0 1px 2px transparentize(black, 0.8); // drop shadow for the only child
+ };
+ }
+
+ color: $osd_fg_color;
+ border-radius: 5px;
+
+ @include button(osd);
+
+ border: none;
+ box-shadow: none;
+
+ &:hover {
+ @include button(osd-hover);
+
+ border: none;
+ box-shadow: none;
+ }
+
+ &:active,
+ &:checked {
+ @include button(osd-active);
+
+ border: none;
+ box-shadow: none;
+ }
+ }
+
+ //overlay / OSD style
+ @at-root %osd_button,
+ .osd & {
+ @include button(osd);
+
+ &:hover { @include button(osd-hover); }
+
+ &:active,
+ &:checked { &:backdrop, & { @include button(osd-active); }}
+
+ &:disabled { &:backdrop, & { @include button(osd-insensitive); }}
+
+ &.flat {
+ @include button(undecorated);
+
+ box-shadow: none;
+ -gtk-icon-shadow: 0 1px black;
+
+ &:hover { @include button(osd-hover); }
+
+ &:disabled {
+ @include button(osd-insensitive);
+ background-image: none;
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ &:active,
+ &:checked { @include button(osd-active); }
+ }
+ }
+
+ // Suggested and Destructive Action buttons
+ @each $b_type, $b_color in (suggested-action, $suggested_bg_color), // Yaru change: use our own palette
+ (destructive-action, $destructive_color) {
+ &.#{$b_type} {
+ @include button(normal, $b_color, white);
+ @include focus-ring($fc: $alt_focus_border_color);
+
+ &.flat {
+ @include button(undecorated);
+
+ color: $b_color; //FIXME: does it work on the dark variant?
+ }
+
+ &:hover { @include button(hover, $b_color, white); }
+
+ &:active,
+ &:checked { @include button(active, $b_color, white); }
+
+ &.flat {
+ &:disabled {
+ @include button(undecorated);
+
+ color: transparentize($b_color, 0.2);
+ }
+ }
+
+ &:disabled {
+ @include button(insensitive);
+
+ &:active,
+ &:checked { @include button(insensitive-active, $b_color, white); }
+ }
+
+ .osd & {
+ @include button(osd, $b_color);
+
+ &:hover { @include button(osd-hover, $b_color); }
+
+ &:active,
+ &:checked { &:backdrop, & { @include button(osd-active, $b_color); }}
+
+ &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }}
+
+ }
+ }
+ }
+
+ stackswitcher > & {
+ // to position the needs attention dot, padding is added to the button
+ // child, a label needs just lateral padding while an icon needs vertical
+ // padding added too.
+
+ > label {
+ padding: 0 6px;
+ margin: 0 -6px;
+ }
+
+ > image {
+ padding: 3px 6px;
+ margin: -3px -6px;
+ }
+
+ &.needs-attention {
+ > label,
+ > image { @extend %needs_attention; }
+ }
+ }
+
+ // hide separators
+ &.font{
+ separator { background-color: transparent; }
+ > box { border-spacing: 6px; }
+ > box > box > label { font-weight: bold; }
+ }
+
+ .linked:not(.vertical) > & { @extend %linked; }
+
+ .linked.vertical > & { @extend %linked_vertical; }
+
+ &.circular { // force circular button shape
+ min-width: 32px;
+ min-height: 32px;
+ padding: 0;
+ border-radius: 9999px;
+
+ label { padding: 0; }
+ }
+}
+
+%needs_attention {
+ // the dot is drawn by using two radial gradient, the first one is the actual dot, the other
+ // simulates the shadow labels and icons normally have in buttons.
+ animation: needs_attention 150ms ease-in;
+
+ background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 ));
+ background-size: 6px 6px, 6px 6px;
+ background-repeat: no-repeat;
+
+ @if $variant == 'light' { background-position: right 3px, right 4px; }
+
+ @else { background-position: right 3px, right 2px; }
+
+ &:backdrop { background-size: 6px 6px, 0 0;}
+
+ &:dir(rtl) {
+ @if $variant == 'light' { background-position: left 3px, left 4px; }
+
+ @else { background-position: left 3px, left 2px; }
+ }
+}
+
+
+%linked_not_left {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+%linked_not_right {
+ border-right-style: none;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+// 1st/last child are at text start/end
+%linked {
+ &:dir(ltr) {
+ &:not(:first-child) { @extend %linked_not_left; }
+ &:not(:last-child) { @extend %linked_not_right; }
+ }
+
+ &:dir(rtl) {
+ &:not(:first-child) { @extend %linked_not_right; }
+ &:not(:last-child) { @extend %linked_not_left; }
+ }
+}
+
+%linked_not_top {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+%linked_not_bottom {
+ border-bottom-style: none;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+%linked_vertical {
+ &:not(:first-child) { @extend %linked_not_top; }
+
+ &:not(:last-child) { @extend %linked_not_bottom; }
+}
+
+%undecorated_button {
+ background-color: transparent;
+ background-image: none;
+ border-color: transparent;
+ box-shadow: inset 0 1px transparentize(white, 1),
+ 0 1px transparentize(white, 1);
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+}
+
+.linked:not(.vertical) > menubutton,
+.linked:not(.vertical) > dropdown,
+.linked:not(.vertical) > colorbutton,
+.linked:not(.vertical) > fontbutton,
+.linked:not(.vertical) > filechooserbutton {
+ &:dir(ltr) {
+ &:not(:first-child) > button { @extend %linked_not_left; }
+ &:not(:last-child) > button { @extend %linked_not_right; }
+ }
+
+ &:dir(rtl) {
+ &:not(:first-child) > button { @extend %linked_not_right; }
+ &:not(:last-child) > button { @extend %linked_not_left; }
+ }
+}
+
+.linked.vertical > menubutton,
+.linked.vertical > dropdown,
+.linked.vertical > colorbutton,
+.linked.vertical > fontbutton,
+.linked.vertical > filechooserbutton {
+ &:not(:first-child) > button { @extend %linked_not_top; }
+ &:not(:last-child) > button { @extend %linked_not_bottom; }
+}
+
+/* menu buttons */
+modelbutton.flat {
+ min-height: 26px;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: $button_radius;
+
+ @extend %undecorated_button;
+
+ &:hover { background-color: $menu_selected_color; }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+
+
+ }
+
+ &:selected { @extend %selected_items; }
+}
+
+modelbutton.flat arrow {
+ background: none;
+ min-width: 16px;
+ min-height: 16px;
+ opacity: 0.3; //dim icon
+
+ &:hover { background: none; }
+
+ &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
+
+ &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
+}
+
+/* oldstyle toolbar buttons */
+
+.toolbar button {
+ margin: 1px;
+ @extend %undecorated_button;
+
+ &:hover { @include button('hover'); }
+ &:active { @include button('active'); }
+ &:disabled { @include button('insensitive'); }
+ &:backdrop { @include button('backdrop'); }
+ &:backdrop:disabled { @include button('backdrop-insensitive'); }
+}
+
+button.color {
+ padding: 4px;
+
+ > colorswatch:only-child {
+ &, > overlay { border-radius: 0; }
+
+ @if $variant == 'light' {
+ box-shadow: 0 1px $shadow_color;
+
+ .osd & { box-shadow: none; }
+ }
+ }
+
+ @if $variant == 'light' {
+ .osd &, & {
+ &:disabled,
+ &:active,
+ &:checked { colorswatch:only-child { box-shadow: none; }}
+ }
+ }
+}
+
+/* list buttons */
+/* tone down as per new designs, see issue #1473 */
+%list_button,
+list > row button.image-button:not(.flat) {
+ @extend %undecorated_button;
+ border: 1px solid transparentize($borders_color, .5);
+ &:hover { @include button(hover); }
+ &:active,
+ &:checked { @include button(active); }
+}
+
+/*********
+ * Links *
+ *********/
+
+%link,
+link {
+ color: $link_color;
+ text-decoration: underline;
+
+ &:visited {
+ color: $link_visited_color;
+
+ *:selected & { color: mix($selected_fg_color, $link_visited_color, 60%); }
+ }
+
+ &:hover {
+ $_fg: lighten($link_color, 10%);
+ color: $_fg;
+
+ *:selected & { color: mix($selected_fg_color, $_fg, 90%); }
+ }
+
+ &:active {
+ color: $link_color;
+
+ *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
+ }
+
+ &:disabled { color: transparentize(desaturate($link_color, 100%), 0.2); }
+
+ @at-root %link_selected,
+ &:selected,
+ *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
+}
+
+link {
+ @include focus-ring();
+}
+
+button.link {
+ @extend %link;
+
+ &,
+ &:hover,
+ &:active,
+ &:checked {
+ @extend %undecorated_button;
+
+ text-shadow: none;
+ }
+
+ > label {
+ text-decoration: underline;
+ }
+}
+
+
+/*****************
+ * GtkSpinButton *
+ *****************/
+spinbutton {
+ &:not(.vertical) {
+ // in this horizontal configuration, the whole spinbutton
+ // behaves as the entry, so we extend the entry styling
+ // and nuke the style on the internal entry
+ @extend %entry;
+
+ padding: 0;
+ border-spacing: 0;
+
+ %spinbutton_horz_entry {
+ min-width: 28px;
+ // reset all the other props since the spinbutton node is styled here
+ margin: 0;
+ background: none;
+ background-color: transparent;
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+ padding: 6px;
+
+ &:backdrop:disabled { background-color: transparent; }
+ }
+
+ > text {
+ @extend %spinbutton_horz_entry;
+ }
+
+ /* :not here just to bump specificity above that of the list button styling */
+ > button.image-button.up:not(.flat),
+ > button.image-button.down:not(.flat) {
+ min-height: 16px;
+ margin: 0;
+ padding-bottom: 0;
+ padding-top: 0;
+ color: mix($fg_color, $base_color, 90%);
+ background-image: none;
+ border-style: none none none solid;
+ border-color: transparentize($borders_color, 0.7);
+ border-radius: 0;
+ box-shadow: none;
+
+ &:dir(rtl) { border-style: none solid none none; }
+
+ &:hover {
+ color: $fg_color;
+ background-color: darken($bg_color,5%);
+ }
+
+ &:disabled {
+ color: transparentize($insensitive_fg_color, 0.7);
+ background-color: transparent;
+ }
+
+ &:active {
+ background-color: transparentize(black, 0.9);
+ box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
+ }
+
+ &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
+
+ &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
+ }
+ }
+
+ // OSD horizontal
+ .osd &:not(.vertical) {
+ > text {
+ @extend %spinbutton_horz_entry;
+ }
+
+ > button.image-button.up:not(.flat),
+ > button.image-button.down:not(.flat) {
+ @include button(undecorated);
+
+ color: $osd_fg_color;
+ border-style: none none none solid;
+ border-color: transparentize($osd_borders_color, 0.3);
+ border-radius: 0;
+ box-shadow: none;
+ -gtk-icon-shadow: 0 1px black;
+
+ &:dir(rtl) { border-style: none solid none none; }
+
+ &:hover {
+ @include button(undecorated);
+
+ color: $osd_fg_color;
+ border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+ background-color: darken($osd_bg_color,10%);
+ -gtk-icon-shadow: 0 1px black;
+ box-shadow: none;
+ }
+
+ &:disabled {
+ @include button(undecorated);
+
+ color: $osd_insensitive_fg_color;
+ border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+ -gtk-icon-shadow: none;
+ box-shadow: none;
+ }
+
+ &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
+
+ &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
+ }
+ }
+
+ // Vertical
+ &.vertical {
+ // in the vertical configuration, we treat the spinbutton
+ // as a box, and tweak the style of the entry in the middle
+ // so that it's linked
+
+ // FIXME: this should not be set at all, but otherwise it gets the wrong
+ // color
+ &:disabled { color: $insensitive_fg_color; }
+
+ &:drop(active) {
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ > text {
+ @extend %entry;
+
+ min-height: 32px;
+ min-width: 32px;
+ padding: 0;
+ border-radius: 0;
+
+ > selection { @extend %selected_items; }
+ > block-cursor { @include entry(block_cursor); }
+ }
+
+ > button {
+ min-height: 32px;
+ min-width: 32px;
+ padding: 0;
+
+ &.up { @extend %top_button; }
+
+ &.down { @extend %bottom_button; }
+ }
+
+ %top_button {
+ border-bottom-style: none;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ %bottom_button {
+ border-top-style: none;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ }
+
+ // OSD vertical
+ .osd &.vertical > button:first-child {
+ @include button(osd);
+
+ &:hover { @include button(osd-hover);}
+
+ &:active { @include button(osd-active); }
+
+ &:disabled { @include button(osd-insensitive); }
+ }
+
+ // Misc
+ treeview &:not(.vertical) {
+ min-height: 0;
+ border-style: none;
+ border-radius: 0;
+
+ > text {
+ min-height: 0;
+ padding: 1px 2px;
+ }
+ }
+
+ font-feature-settings: "tnum";
+}
+
+
+/**************
+ * ComboBoxes *
+ **************/
+dropdown > popover.menu.background > contents { padding: 0; } //allow search entries with no margin
+
+dropdown > button > box {
+ border-spacing: 6px;
+}
+
+dropdown,
+combobox {
+ arrow {
+ -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+ min-height: 16px;
+ min-width: 16px;
+ }
+
+ // align menu labels with the button label
+ > popover.menu > contents modelbutton {
+ padding-left: 9px;
+ padding-right: 9px;
+ }
+
+ &.linked {
+ button:nth-child(2) {
+ &:dir(ltr) { @extend %linked_not_left; }
+ &:dir(rtl) { @extend %linked_not_right; }
+ }
+ }
+
+ &:drop(active) { // FIXME: untested
+ box-shadow: none;
+
+ button.combo { @extend %button_basic_drop_active; }
+ }
+
+ // newstyle
+ popover {
+ margin-top: 6px;
+ padding: 0;
+
+ listview {
+
+ margin: 8px 0;
+
+ &>row {
+ padding: 8px;
+
+ &:selected {
+ outline-color: $alt_focus_border_color;
+ color: $text-color;
+ background-color: $menu_selected_color;
+ }
+ }
+ }
+
+ // drodowns with searchboxes on top
+ .dropdown-searchbar {
+ padding: 6px;
+ border-bottom: 1px solid $borders_color;
+ }
+ }
+}
+
+
+// the combo is a composite widget so the way we do button linking doesn't
+// work, special case needed. See
+// https://bugzilla.gnome.org/show_bug.cgi?id=733979
+
+.linked:not(.vertical) > filechooserbutton > combobox,
+.linked:not(.vertical) > appchooserbutton > combobox,
+.linked:not(.vertical) > combobox {
+ &:dir(ltr) {
+ &:not(:first-child) > box > button.combo { @extend %linked_not_left; }
+ &:not(:last-child) > box > button.combo { @extend %linked_not_right; }
+ }
+
+ &:dir(rtl) {
+ &:not(:first-child) > box > button.combo { @extend %linked_not_right; }
+ &:not(:last-child) > box > button.combo { @extend %linked_not_left; }
+ }
+}
+
+.linked.vertical > filechooserbutton > combobox,
+.linked.vertical > appchooserbutton > combobox,
+.linked.vertical > combobox {
+ &:not(:first-child) > box > button.combo { @extend %linked_not_top; }
+ &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; }
+}
+
+
+/************
+ * Toolbars *
+ ************/
+%toolbar {
+ padding: 4px;
+ border-spacing: 4px;
+ background-color: $bg_color;
+}
+
+.toolbar,
+toolbar {
+ @extend %toolbar;
+
+ background-image: linear-gradient(to bottom,
+ $toolbar_gradient_a 2px,
+ $toolbar_gradient_b 50%,
+ $toolbar_gradient_c 50%,
+ $toolbar_gradient_d);
+ padding: 2px ;
+ border-width: 1px 0 1px 0;
+ border-radius: 0;
+ border-style: solid;
+ border-top-color: $base_color;
+ border-bottom-color: $toolbar_border_bottom_color;
+
+ // on OSD
+ .osd & { background-color: transparent; }
+
+ // stand-alone OSD toolbars
+ &.osd {
+ padding: 13px;
+ border: none;
+ border-radius: 5px;
+ background-color: $osd_bg_color;
+
+ &.left,
+ &.right,
+ &.top,
+ &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
+ }
+
+ // toolbar separators
+ &.horizontal > separator { margin: 4px 0; }
+ &.vertical > separator { margin: 0 4px; }
+}
+
+//searchbar & location-bar
+searchbar > revealer > box {
+ padding: 6px;
+ border-spacing: 6px;
+ @extend %toolbar;
+
+ @extend %darkbar;
+
+ border-width: 0 0 1px;
+}
+
+%darkbar {
+ border-style: solid;
+ border-color: $borders_color;
+ $_bg: mix($bg_color, $borders_color, 70%);
+ background-color: $_bg;
+
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_dark_fill;
+ box-shadow: none;
+ transition: $backdrop_transition;
+ }
+}
+
+/**************
+ * GtkInfoBar *
+ **************/
+infobar {
+ > revealer > box {
+ padding: 8px;
+ border-spacing: 12px;
+ }
+
+ &.action:hover > revealer > box {
+ background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 47%), 30%),
+ desaturate(darken(invert($selected_bg_color), 42%), 70%));
+ }
+
+ &.info,
+ &.question,
+ &.warning,
+ &.error {
+ > revealer > box {
+ border-bottom: 1px solid lighten($borders_color, 5%);
+ background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%),
+ desaturate(darken(invert($selected_bg_color), 40%), 70%));
+ }
+ }
+}
+
+ //close button for info and searchbar (#3215)
+
+ infobar .close,
+ searchbar .close {
+ @include button(undecorated);
+ min-width: 16px;
+ min-height: 16px;
+ padding: 4px;
+ border-radius: 50%;
+
+ &:hover { @include button(hover); }
+ }
+
+
+/*****************
+ * Title buttons *
+ *****************/
+
+windowcontrols {
+ border-spacing: 6px;
+
+ &:not(.empty) {
+ &.start:dir(ltr),
+ &.end:dir(rtl) {
+ margin-right: 7px;
+ }
+
+ &.start:dir(rtl),
+ &.end:dir(ltr) {
+ margin-left: 7px;
+ }
+ }
+
+ button { // Yaru changes: disable default windowcontrols button look (see _tweaks for yaru style)
+ //@extend %button_basic;
+
+ //@extend %button_basic_flat;
+
+
+ border-radius: 9999px;
+ padding: 6px;
+ margin: 0 2px;
+ min-width: 0;
+ min-height: 0;
+ //&:hover {
+ //special case hover colors inside a headerbar
+ //@include button(undecorated-hover,$c:darken($headerbar_bg_color,6%));
+ //}
+ //&:active,
+ //&:checked { @include button(undecorated-active,$c:darken($headerbar_bg_color,10%)); }
+ }
+}
+
+
+/***************
+ * Header bars *
+ ***************/
+%titlebar,
+headerbar {
+ padding: 0 6px;
+ min-height: 23px;
+ border-width: 0 0 1px;
+ border-style: solid;
+ border-color: $alt_borders_color;
+ border-radius: 0;
+
+ @include headerbar_fill(darken($bg_color, 10%));
+
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ @include headerbar_fill(darken($bg_color, 10%));
+ box-shadow: inset 0 1px $top_hilight;
+
+ transition: $backdrop_transition;
+ }
+
+ .title {
+ padding-left: 12px;
+ padding-right: 12px;
+ font-weight: bold;
+ }
+
+ .subtitle {
+ font-size: smaller;
+ padding-left: 12px;
+ padding-right: 12px;
+
+ @extend .dim-label;
+ }
+
+ /* Darken switchbuttons for headerbars. issue #1588 */
+ stackswitcher > button:checked,
+ button.toggle:checked {
+
+ background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
+ border-color: darken($borders_color, 6%); // Yaru changes: modify borders
+ // border-top-color: darken($borders_color, 8%);
+ &:backdrop {
+ @include button(backdrop-active);
+ }
+ }
+
+ // squared corners when the window is maximized, tiled, or fullscreen
+ .tiled &,
+ .tiled-top &,
+ .tiled-left &,
+ .tiled-right &,
+ .tiled-bottom &,
+ .maximized &,
+ .fullscreen & {
+ &:backdrop, & {
+ border-radius: 0;
+ }
+ }
+
+ &.default-decoration {
+ min-height: 28px;
+ padding: 4px;
+
+ windowcontrols {
+ button,
+ menubutton {
+ min-height: 26px;
+ min-width: 26px;
+ margin: 0;
+ padding: 0;
+ }
+
+ menubutton button {
+ min-height: 20px;
+ min-width: 20px;
+ margin: 0;
+ padding: 4px;
+ }
+ }
+ }
+
+ .solid-csd & {
+ &:backdrop, & {
+ &:dir(rtl), &:dir(ltr) { // specificity bump
+ margin-left: -1px;
+ margin-right: -1px;
+ margin-top: -1px;
+ border-radius: 0;
+ box-shadow: none;
+ }
+ }
+ }
+}
+
+headerbar {
+ > windowhandle > box {
+ &,
+ > box.start,
+ > box.end {
+ border-spacing: 6px;
+ }
+ }
+
+ // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
+ entry,
+ spinbutton,
+ separator:not(.sidebar),
+ button,
+ menubutton {
+ margin-top: 6px;
+ margin-bottom: 6px;
+ }
+
+ // Reset margins for buttons inside menubutton
+ menubutton > button {
+ margin-top: 0px;
+ margin-bottom: 0px;
+ }
+
+ switch {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+
+ &.titlebar headerbar:not(.titlebar) {
+ // Drop the background of non-titlebar nested headerbars. This is needed to
+ // work around headerbar sliding animation issues without refactoring
+ // Adwaita's support of titlebars and headerbars as it may break
+ // applications.
+ // See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information.
+ background: none;
+ box-shadow: none;
+ }
+}
+
+
+.titlebar:not(headerbar) {
+ window.csd > & {
+ // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
+ padding: 0;
+ background-color: transparent;
+ background-image: none;
+ border-style: none;
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ separator { background-color: $borders_color; } // FIXME: use darker border?
+
+ @extend %titlebar;
+}
+
+// Development versions of apps to use a differently styled headerbar
+
+window.devel {
+ headerbar.titlebar {
+ $c: darken($bg_color, 10%);
+ $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+ linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)),
+ linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%));
+ @if $variant == 'dark' {
+ $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+ linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
+ linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
+ }
+
+ background: $bg_color $gradient;
+
+ &:backdrop {
+ background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
+ image($bg_color); /* background-color would flash */
+ }
+ }
+}
+
+/************
+ * Pathbars *
+ ************/
+
+pathbar > button {
+ &.text-button, &.image-button, & {
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+
+ &.text-button.image-button label {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ &.text-button.image-button, & {
+ label:last-child { padding-right: 8px; }
+ label:first-child { padding-left: 8px; }
+ }
+
+ image {
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+
+ &.slider-button {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+
+/**************
+ * Tree Views *
+ **************/
+
+$_treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, $base_color, 20%));
+$_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%));
+columnview.view,
+treeview.view {
+ border-left-color: $_treeview_borders_color; // this is actually the tree lines color,
+ border-top-color: $_treeview_borders_color; // while this is the grid lines color, better then nothing
+
+ @include focus-ring();
+
+ > rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
+
+ &:selected {
+ &:focus, & {
+ border-radius: 0;
+ outline-color: $alt_focus_border_color;
+
+ @extend %selected_items;
+ }
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+
+ &:selected {
+ color: mix($selected_fg_color, $selected_bg_color, 40%);
+ &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
+ }
+ }
+
+ &.separator {
+ min-height: 2px;
+ color: $_treeview_borders_color;
+ }
+
+ &:backdrop {
+ border-left-color: $_treeview_backdrop_borders_color;
+ border-top: $_treeview_backdrop_borders_color;
+ }
+
+ &:drop(active) {
+ box-shadow: none;
+ }
+
+ > dndtarget:drop(active) {
+ border-style: solid none;
+ border-width: 1px;
+ border-color: $selected_borders_color;
+
+ &.after { border-top-style: none; }
+
+ &.before { border-bottom-style: none; }
+ }
+
+ &.expander {
+ // GtkTreeView uses the larger of the expander’s min-width and min-height
+ min-width: 16px;
+ min-height: 16px;
+ -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+
+ &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+ color: mix($text_color, $base_color, 70%);
+
+ &:hover { color: $text_color; }
+
+ &:selected {
+ color: mix($selected_fg_color, $selected_bg_color, 70%);
+
+ &:hover { color: $selected_fg_color; }
+ }
+
+ &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+ }
+
+ &.progressbar { // progress bar in treeviews
+ @if $variant == light { color: $base_color; }
+
+ background-color: $selected_bg_color;
+ background-image: image($selected_bg_color);
+ box-shadow: none;
+
+ &:selected {
+ &:focus, & {
+
+ @if $variant == 'light' {
+ color: $selected_bg_color;
+
+ }
+
+ @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
+
+ background-image: image($base_color);
+
+ &:backdrop {
+ @if $variant == 'light' {
+ color: $selected_bg_color;
+ }
+ background-color: $backdrop_base_color;
+ }
+ }
+ }
+ }
+
+ &.trough { // progress bar trough in treeviews
+ background-color: transparentize($fg_color,0.9);
+
+ &:selected {
+ &:focus, & {
+ background-color: if($variant == 'light',
+ transparentize($selected_fg_color, 0.7),
+ darken($selected_bg_color, 10%));
+
+ }
+ }
+ }
+
+ > header {
+ > button {
+ $_column_header_color: mix($fg_color, $base_color, 50%);
+
+ @extend %column_header_button;
+
+ color: $_column_header_color;
+ background-color: $base_color;
+ font-weight: bold;
+ text-shadow: none;
+ box-shadow: none;
+
+ &:hover {
+ @extend %column_header_button;
+
+ color: mix($_column_header_color, $fg_color, 50%);
+ box-shadow: none;
+ transition: none; //I shouldn't need this
+ }
+
+ &:active {
+ @extend %column_header_button;
+
+ color: $fg_color;
+ transition: none; //I shouldn't need this
+ }
+ }
+ }
+
+ button.dnd,
+ header.button.dnd { // for treeview-like derive widgets
+ &:active, &:selected, &:hover, & {
+ padding: 0 6px;
+ color: $base_color;
+ background-image: none;
+ background-color: $selected_bg_color;
+ border-style: none;
+ border-radius: 0;
+ box-shadow: inset 0 0 0 1px $base_color;
+ text-shadow: none;
+ transition: none;
+ }
+ }
+
+ acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
+}
+
+%column_header_button {
+ padding: 0 6px;
+ background-image: none;
+ border-style: none none solid solid;
+ border-color: $_treeview_borders_color;
+ border-radius: 0;
+ text-shadow: none;
+
+ &:disabled {
+ border-color: $bg_color;
+ background-image: none;
+ }
+
+ &:last-child { &:backdrop, & { border-right-style: none; }}
+}
+
+/***************
+ * Popovers *
+ ***************/
+
+popover.background {
+ background-color: transparent;
+ font: initial; // Decouple the font of popovers from their entry/textview
+
+ > arrow,
+ > contents {
+ $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
+
+ background-color: $menu_color;
+ background-clip: padding-box;
+ border: 1px solid $_popover_border;
+ box-shadow: 0 1px 2px transparentize(black, 0.7);
+ }
+
+ &:backdrop {
+ background-color: transparent;
+ }
+
+ > contents {
+ padding: 8px;
+ border-radius: $popover_radius;
+
+ > list,
+ > .view,
+ > toolbar {
+ border-style: none;
+ background-color: transparent;
+ }
+
+ separator {
+ background-color: mix($bg_color, $borders_color, 30%);
+ margin: 3px;
+ }
+
+ list separator { margin: 0; }
+ }
+
+ .osd &,
+ &.touch-selection,
+ &.magnifier {
+ background-color: transparent;
+
+ > arrow,
+ > contents {
+ @extend %osd;
+
+ border: 1px solid transparentize(white, 0.9);
+ box-shadow: none;
+ }
+ }
+
+ &.touch-selection,
+ &.magnifier {
+ button { @extend %osd_button; }
+ }
+}
+
+magnifier {
+ background-color: $base_color;
+}
+
+/**********************
+ * Popover Base Menus *
+ **********************/
+
+$_menu-padding: 12px; //inner menuitem padding
+//global $menu-margin for outside menuitems
+
+popover.menu {
+ padding: 0;
+
+ box.inline-buttons {
+ padding: 0 $_menu-padding;
+
+ button.image-button.model {
+ @include button(undecorated);
+
+ min-height: 30px;
+ min-width: 30px;
+ padding: 0;
+ border: none;
+ outline: none;
+ transition: none;
+
+ &:selected { background-image: linear-gradient(to bottom,
+ $menubar_menuitem_hover_gradient_a,
+ $menubar_menuitem_hover_gradient_b 50%,
+ $menubar_menuitem_hover_gradient_c 50%,
+ $menubar_menuitem_hover_gradient_d ); }
+ }
+ }
+
+ box.circular-buttons {
+ padding: $_menu-padding $_menu-padding 6px;
+
+ button.circular.image-button.model {
+ @extend %list_button;
+
+ padding: 11px;
+ &:focus {
+ background-color: $menu_selected_color;
+ border-color: $menu_selected_color;
+ }
+ }
+ }
+
+ & > arrow,
+ &.background > contents {
+ background-color: $menu_color;
+ padding: $menu-margin;
+ }
+
+ &.background separator {
+ margin: 6px 0;
+ }
+
+ accelerator {
+ color: gtkalpha(currentColor,0.55);
+
+ &:dir(ltr) { margin-left: $_menu-padding; }
+ &:dir(rtl) { margin-right: $_menu-padding; }
+ }
+
+ check,
+ radio {
+ @include check('menu', 'transparent', $text_color);
+
+ &:hover { @include check('menu-active', 'transparent', $text_color); }
+ &:active { @include check('menu-active', 'transparent', $text_color); }
+ }
+
+ //only menu radios have a border
+ radio { border-color: $borders_color;
+ &:active { border-color: transparentize($borders_color,0.5); }
+ }
+
+ arrow.left,
+ radio.left,
+ check.left {
+ margin-left: -2px;
+ margin-right: 6px;
+ }
+
+ arrow.right,
+ radio.right,
+ check.right {
+ margin-left: 6px;
+ margin-right: -2px;
+ }
+
+ modelbutton {
+ min-height: 30px;
+ min-width: 40px;
+ padding: 0 $_menu-padding;
+ border-radius: $menu-margin;
+
+ &:selected {
+ color: $selected_fg_color;
+ background-image: linear-gradient(to bottom,
+ $menubar_menuitem_hover_gradient_a,
+ $menubar_menuitem_hover_gradient_b 50%,
+ $menubar_menuitem_hover_gradient_c 50%,
+ $menubar_menuitem_hover_gradient_d );
+ box-shadow: inset 0px 1px $menubar_menuitem_hover_border_color, inset 0px -1px $menubar_menuitem_hover_border_color;
+ }
+ &:selected:active {
+ //@extend %selected_items;
+ //color: $selected_fg_color;
+ background-color: darken($bg_color,14%); // matching buttons
+ }
+ }
+
+ label.title {
+ font-weight: bold;
+ padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing
+ }
+}
+
+// initial styling for popover menu and bar
+menubar {
+ padding: 0px;
+ box-shadow: inset 0 -1px transparentize(black, 0.9);
+
+ > item {
+ min-height: 16px;
+ padding: 4px 8px;
+
+ &:selected { //Seems like it :hover even with keyboard focus
+ background-image: linear-gradient(to bottom,
+ $menubar_menuitem_hover_gradient_a,
+ $menubar_menuitem_hover_gradient_b 50%,
+ $menubar_menuitem_hover_gradient_c 50%,
+ $menubar_menuitem_hover_gradient_d );
+ box-shadow: inset 1px 0px $menubar_menuitem_hover_border_color, inset -1px 0px $menubar_menuitem_hover_border_color;
+ > label {color: white;}
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ box-shadow: none;
+ }
+ }
+
+ & > item popover.menu.background > contents {
+ padding: $menu-margin;
+ }
+ //nested submenus
+ & > item popover.menu popover.menu {
+ padding: 0 0 4px 0;
+ }
+ & > item popover.menu.background popover.menu.background > contents {
+ margin: 0;
+ border-radius: $popover_radius; //including top
+ }
+}
+
+
+/*************
+ * Notebooks *
+ *************/
+notebook {
+ @include focus-ring("> header > tabs > tab:checked", $offset: -2px, $focus-state: 'focus:focus-visible');
+
+ > header {
+ padding: 1px;
+ border-color: $borders_color;
+ border-width: 1px;
+ background-color: transparent; // Yaru change: remove notebook background
+
+ > tabs { margin: -1px; }
+
+ &.top {
+ border-bottom-style: solid;
+ > tabs {
+ margin-bottom: -2px;
+ > tab {
+ &:hover { color: $fg_color; } // Yaru change: 4px underlines are too much
+
+
+ &:checked { background-image: linear-gradient(to bottom,
+ $core_color_a 3px,
+ $borders_color 5px,
+ $base_color 5px,
+ $base_color);
+ box-shadow: 0px -1px $borders_color, 1px 0px $borders_color, -1px 0px $borders_color; } // Yaru change: 4px underlines are too much
+ }
+ }
+ }
+
+ &.bottom {
+ border-top-style: solid;
+ > tabs {
+ margin-top: -2px;
+ > tab {
+ &:hover { color: $fg_color; } // Yaru change: 4px underlines are too much
+
+ &:checked { background-image: linear-gradient(to top,
+ $core_color_a 3px,
+ $borders_color 5px,
+ $base_color 5px,
+ $base_color);
+ box-shadow: 0px 1px $borders_color, 1px 0px $borders_color, -1px 0px $borders_color; } // Yaru change: 4px underlines are too much
+ }
+ }
+ }
+
+ &.left {
+ border-right-style: solid;
+ > tabs {
+ margin-right: -2px;
+ > tab {
+ &:hover { color: $fg_color; } // Yaru change: 4px underlines are too much
+
+ &:checked { background-image: linear-gradient(to right,
+ $core_color_a 3px,
+ $borders_color 5px,
+ $base_color 5px,
+ $base_color);
+ box-shadow: 0px -1px $borders_color,0px 1px $borders_color; } // Yaru change: 4px underlines are too much
+ }
+ }
+ }
+
+ &.right {
+ border-left-style: solid;
+ > tabs {
+ margin-left: -2px;
+ > tab {
+ &:hover { } // Yaru change: 4px underlines are too much
+
+
+ &:checked { background-image: linear-gradient(to left,
+ $core_color_a 3px,
+ $borders_color 5px,
+ $base_color 5px,
+ $base_color);
+ box-shadow: 0px -1px $borders_color,0px 1px $borders_color;} // Yaru change: 4px underlines are too much
+ }
+ }
+ }
+
+ &.top > tabs > arrow {
+ @extend %notebook_vert_arrows;
+
+ border-top-style: none;
+ }
+
+ &.bottom > tabs > arrow {
+ @extend %notebook_vert_arrows;
+
+ border-bottom-style: none;
+ }
+
+ @at-root %notebook_vert_arrows {
+ margin-left: -5px;
+ margin-right: -5px;
+ padding-left: 4px;
+ padding-right: 4px;
+
+ &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+
+ &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+ }
+
+ &.left > tabs > arrow {
+ @extend %notebook_horz_arrows;
+
+ border-left-style: none;
+ }
+
+ &.right > tabs > arrow {
+ @extend %notebook_horz_arrows;
+
+ border-right-style: none;
+ }
+
+ @at-root %notebook_horz_arrows {
+ margin-top: -5px;
+ margin-bottom: -5px;
+ padding-top: 4px;
+ padding-bottom: 4px;
+
+ &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+
+ &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+ }
+
+ > tabs > arrow {
+ @extend %button_basic;
+
+ @extend %button_basic_flat;
+
+ min-height: 16px;
+ min-width: 16px;
+ border-radius: 0;
+
+ &:hover:not(:active):not(:backdrop) {
+ background-clip: padding-box;
+ background-image: none;
+ background-color: transparentize(white, 0.7);
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ &:disabled { @include button(undecorated); }
+ }
+
+ > tabs > tab {
+ transition: $focus_transition;
+ min-height: 30px;
+ min-width: 30px;
+ padding: 3px 12px;
+
+ color: $fg_color;
+ font-weight: normal;
+
+ border-width: 1px; // for reorderable tabs
+ border-color: transparent; //
+
+ &:hover {
+ color: $fg_color;
+ background-color: darken($dark_fill,4%);
+
+ &.reorderable-page {
+ border-color: transparentize($borders_color, 0.7);
+ background-color: transparentize($bg_color, 0.8);
+ }
+ }
+
+ &:not(:checked) {
+ outline-color: transparent;
+ }
+
+ &:checked {
+ color: $fg_color;
+ &.reorderable-page {
+ border-color: transparentize($borders_color, 0.5);
+ background-color: transparentize($bg_color, 0.5);
+
+ &:hover { background-color: transparentize($bg_color, 0.3); }
+ }
+ }
+
+ // colors the button like the label, overridden otherwise
+ button.flat {
+ color: gtkalpha(currentColor, 0.3);
+ &:hover { color: $fg_color; }
+
+ padding: 0;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ // FIXME: generalize .small-button?
+ min-width: 20px;
+ min-height: 20px;
+
+ &:last-child {
+ margin-left: 4px;
+ margin-right: -4px;
+ }
+
+ &:first-child {
+ margin-left: -4px;
+ margin-right: 4px;
+ }
+ }
+ }
+
+ &.top,
+ &.bottom {
+ > tabs {
+ padding-left: 4px;
+ padding-right: 4px;
+
+ &:not(:only-child) {
+ margin-left: 3px;
+ margin-right: 3px;
+
+ &:first-child { margin-left: -1px; }
+ &:last-child { margin-right: -1px; }
+ }
+
+ > tab {
+ margin-left: 4px;
+ margin-right: 4px;
+
+ &.reorderable-page { border-style: none solid; }
+ }
+ }
+ }
+
+ &.left,
+ &.right {
+ > tabs {
+ padding-top: 4px;
+ padding-bottom: 4px;
+
+ &:not(:only-child) {
+ margin-top: 3px;
+ margin-bottom: 3px;
+
+ &:first-child { margin-top: -1px; }
+ &:last-child { margin-bottom: -1px; }
+ }
+
+ > tab {
+ margin-top: 4px;
+ margin-bottom: 4px;
+
+ &.reorderable-page { border-style: solid none; }
+ }
+ }
+ }
+
+ &.top > tabs > tab { padding-bottom: 4px; }
+ &.bottom > tabs > tab { padding-top: 4px; }
+ }
+
+ > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
+ background-color: $base_color;
+ }
+}
+
+
+/**************
+ * Scrollbars *
+ **************/
+scrollbar {
+ $_slider_min_length: 40px;
+
+ background-color: $scrollbar_bg_color;
+ transition: 300ms $ease-out-quad;
+
+ // scrollbar border
+ &.top { border-bottom: 1px solid $borders_color; }
+ &.bottom { border-top: 1px solid $borders_color; }
+ &.left { border-right: 1px solid $borders_color; }
+ &.right { border-left: 1px solid $borders_color; }
+
+ > range > trough > slider {
+ min-width: 6px;
+ min-height: 6px;
+ margin: -1px;
+ border: 4px solid transparent;
+ border-radius: 8px;
+ background-clip: padding-box;
+ background-color: $scrollbar_slider_color;
+
+ &:hover { background-color: $scrollbar_slider_hover_color; }
+
+ &:hover:active { background-color: $scrollbar_slider_active_color; }
+
+ &:disabled { background-color: transparent; }
+ }
+
+ > range.fine-tune {
+ > trough > slider {
+ min-width: 4px;
+ min-height: 4px;
+ }
+
+ &.horizontal > trough > slider { border-width: 5px 4px; }
+ &.vertical > trough > slider { border-width: 4px 5px; }
+ }
+
+ &.overlay-indicator {
+ &:not(.dragging):not(.hovering) {
+ border-color: transparent;
+ opacity: 0.4;
+ background-color: transparent;
+
+ > range > trough > slider {
+ margin: 0;
+ min-width: 3px;
+ min-height: 3px;
+ background-color: $fg_color;
+ border: 1px solid if($variant == 'light', white, black);
+ }
+
+ &.horizontal {
+ > range > trough > slider {
+ margin: 0 2px;
+ min-width: $_slider_min_length;
+ }
+ }
+
+ &.vertical {
+ > range > trough > slider {
+ margin: 2px 0;
+ min-height: $_slider_min_length;
+ }
+ }
+ }
+
+ &.dragging,
+ &.hovering { opacity: 0.8; }
+ }
+
+ &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
+ &.vertical > range > trough > slider { min-height: $_slider_min_length; }
+}
+
+treeview ~ scrollbar.vertical {
+ border-top: 1px solid $borders_color;
+ margin-top: -1px;
+}
+
+/**********
+ * Switch *
+ **********/
+switch {
+ font-weight: bold;
+ font-size: smaller;
+
+ // similar to the .scale
+ border: 1px solid $borders_color;
+ border-radius: 14px;
+ color: $fg_color;
+ background-color: $dark_fill;
+ transition: $focus_transition;
+
+ @include focus-ring($offset: 0, $outer: true);
+
+ headerbar & { background-color: darken($dark_fill,8%); } //3504
+
+ &:checked {
+ color: $selected_fg_color;
+ border-color: $switch_borders_color;
+ background-color: $switch_bg_color;
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ border-color: $borders_color;
+ background-color: $insensitive_bg_color;
+ text-shadow: none;
+ }
+
+ > slider {
+ @include button(normal);
+
+ margin: -1px;
+ min-width: 24px;
+ min-height: 24px;
+ border: 1px solid;
+ border-color: $borders_color;
+ border-radius: 50%;
+ transition: $button_transition;
+ }
+
+ > image { color: transparent; } /* only show i / o for the accessible theme */
+
+ &:hover > slider {
+ @include button(hover);
+ }
+
+ &:checked > slider { border: 1px solid $switch_borders_color; }
+
+ &:disabled > slider { @include button(insensitive); }
+
+
+ row:selected & {
+ outline-color: $alt_focus_border_color;
+
+ @if $variant == 'light' {
+ box-shadow: none;
+ border-color: $switch_borders_color;
+
+ > slider { &:checked, & { border-color: $switch_borders_color; } }
+ }
+ }
+}
+
+
+/*************************
+ * Check and Radio items *
+ *************************/
+// draw regular check and radio items using our PNG assets
+// all assets are rendered from assets.svg. never add pngs directly
+
+
+//selection-mode
+@each $check_state, $check_icon, $check_color, $check_background in
+ ('', 'none', 'transparent', $checkradio_bg_color),
+ (':hover', 'none', 'transparent', $checkradio_bg_color),
+ (':active', 'none', 'transparent', $checkradio_bg_color),
+ (':backdrop', 'none', 'transparent', '#{desaturate($checkradio_bg_color, 100%)}'),
+ (':checked', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
+ (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
+ (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
+ (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 0.2)}', '#{desaturate($checkradio_bg_color, 100%)}'), {
+
+ .view.content-view.check#{$check_state}:not(list),
+ .content-view .tile check#{$check_state}:not(list) {
+ margin: 4px;
+ min-width: 32px;
+ min-height: 32px;
+ color: #{$check_color};
+ background-color: #{$check_background};
+ border-radius: 5px;
+ background-image: none;
+ transition: 200ms;
+ box-shadow: none;
+ border-width: 0;
+ -gtk-icon-source: #{$check_icon};
+ -gtk-icon-shadow: none;
+ }
+}
+
+checkbutton {
+ border-spacing: 4px;
+ border-radius: $button_radius;
+ transition: $focus_transition;
+
+ @include focus-ring();
+
+ &.text-button {
+ // this is for a nice focus on check and radios text
+ padding: 4px;
+ }
+}
+
+check,
+radio {
+ min-height: 14px;
+ min-width: 14px;
+ border: 1px solid;
+ -gtk-icon-source: none;
+
+ & {
+ // for unchecked
+ $_c: if($variant=='light', white, $bg_color);
+
+ @each $state, $t in ("", "normal"),
+ (":hover", "hover"),
+ (":active", "active"),
+ (":disabled", "insensitive") {
+ &#{$state} {
+ @include check($t, $_c);
+ }
+ }
+ }
+
+ & {
+ // for checked
+ @each $t in (':checked'), (':indeterminate') {
+ &#{$t} {
+ @each $state, $t in ("", "normal"),
+ (":hover", "hover"),
+ (":active", "active"),
+ (":disabled", "insensitive") {
+ &#{$state} {
+ @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
+ }
+ }
+ }
+ }
+ }
+
+ @if $variant == 'light' {
+ // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
+ // color, hence we need special casing.
+ row:selected & { border-color: $checkradio_borders_color; }
+ }
+
+ .osd & {
+ @include button(osd);
+
+ &:hover { @include button(osd); }
+ &:active { @include button(osd-active); }
+ &:disabled { @include button(osd-insensitive); }
+ }
+}
+
+%check,
+check {
+ border-radius: 3px;
+ -gtk-icon-size: 14px;
+
+ &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")),
+ -gtk-recolor(url("assets/[email protected]"))); }
+
+ &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")),
+ -gtk-recolor(url("assets/[email protected]"))); }
+}
+
+%radio,
+radio {
+ border-radius: 100%;
+ -gtk-icon-size: 14px;
+
+ &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")),
+ -gtk-recolor(url("assets/[email protected]"))); }
+
+ &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")),
+ -gtk-recolor(url("assets/[email protected]"))); }
+}
+
+treeview.view check,
+treeview.view radio {
+ &:selected {
+ &:focus, & {
+ color: $checkradio_fg_color;
+
+ @if $variant == 'light' { border-color: $selected_borders_color; }
+ }
+ }
+}
+
+treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround
+
+
+/************
+ * GtkScale *
+ ************/
+%scale_trough {
+ border: 1px solid $borders_color;
+ border-radius: 3px;
+ background-color: gtkshade($core_color_b, 0.90);
+
+ headerbar & { background-color: darken($dark_fill,8%); } //3504
+
+ &:disabled {
+ background-color: $insensitive_bg_color;
+ border-color: $insensitive_borders_color;
+ }
+
+ // ...on selected list rows
+ row:selected & {
+ &:disabled, & {
+ outline-color: $alt_focus_border_color;
+ border-color: $selected_borders_color;
+ }
+ }
+
+ // OSD
+ .osd & {
+ border-color: $osd_borders_color;
+ background-color: transparentize($osd_borders_color, 0.2);
+
+ &:disabled { background-color: $osd_insensitive_bg_color; }
+ }
+}
+
+%scale_highlight {
+ border: 1px solid $borders_color; // Yaru change: use our own palette
+ border-radius: 3px;
+ background-color: gtkshade($core_color_a, 0.90);
+
+ &:disabled {
+ background-color: transparent;
+ border-color: transparent;
+ }
+
+ // ...on selected list rows
+ row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
+
+ // OSD
+ .osd & {
+ border-color: $osd_borders_color;
+
+ &:disabled { border-color: transparent; }
+ }
+}
+
+scale {
+ // sizing
+ $_marks_length: 6px;
+ $_marks_distance: 6px;
+
+ min-height: 5px;
+ min-width: 5px;
+ padding: 4px;
+
+ @include focus-ring("> trough", $offset: 10px);
+
+ // those are inside the trough node, I need them to show their own border over the trough one, so negative margin
+ > trough {
+ transition: $focus_transition;
+
+ > fill,
+ > highlight { margin: -1px; }
+
+ // the slider is inside the trough, so to have make it bigger there's a negative margin
+
+ > slider {
+ min-height: 12px;
+ min-width: 12px;
+ margin: -5px;
+ padding: 0px;
+ border-radius: 3px;
+ }
+ }
+
+
+ &.horizontal > trough > slider { min-width: 25px}
+ &.vertical > trough > slider { min-height: 25px}
+
+ // click-and-hold the slider to activate
+ &.fine-tune {
+ &.horizontal {
+ padding-top: 9px;
+ padding-bottom: 9px;
+ min-height: 16px;
+ }
+
+ &.vertical {
+ padding-left: 9px;
+ padding-right: 9px;
+ min-width: 16px;
+ }
+
+ // to make the trough grow in fine-tune mode
+ > trough > slider { margin: -6px; }
+
+ > trough > fill,
+ > trough > highlight,
+ > trough {
+ border-radius: 5px;
+ }
+ }
+
+ // the backing bit
+ > trough {
+ @extend %scale_trough;
+ }
+
+ // the colored part of the backing bit
+ > trough > highlight { @extend %scale_highlight; }
+
+ // this is another differently styled part of the backing bit, the most relevant use case is for example
+ // in media player to indicate how much video stream as been cached
+ > trough > fill {
+ @extend %scale_trough;
+
+
+ &:disabled {
+ border-color: transparent;
+ background-color: transparent;
+ }
+
+ // OSD
+ .osd & {
+ background-color: mix($osd_fg_color, $osd_borders_color, 25%);
+
+ &:disabled {
+ border-color: transparent;
+ background-color: transparent;
+ }
+ }
+ }
+
+ &.horizontal > slider {
+ min-width: 25px;
+ }
+
+ &.vertical > slider {
+ min-height: 25px;
+ }
+
+ > trough > slider {
+
+ @include button(normal);
+
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 3px;
+ transition: $button_transition;
+ transition-property: background, border, box-shadow;
+
+ &:hover { @include button(hover); }
+
+ &:active { border-color: $progress_bg_color; } // Yaru change: use our own palette
+
+ &:disabled { @include button(insensitive); }
+
+ // ...on selected list rows
+ row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
+
+ // OSD
+ .osd & {
+ @include button(osd);
+ border-color: darken($osd_borders_color, 3%);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+ &:hover {
+ @include button(osd-hover);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+ }
+
+ &:active {
+ @include button(osd-active);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+ }
+
+ &:disabled {
+ @include button(osd-insensitive);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+ }
+ }
+ }
+
+ > value {
+ color: gtkalpha(currentColor, 0.55);
+ font-feature-settings: "tnum";
+ }
+
+ &.horizontal {
+ > marks {
+ color: gtkalpha(currentColor, 0.55);
+ &.top { margin-bottom: $_marks_distance; }
+ &.bottom { margin-top: $_marks_distance; }
+
+ indicator {
+ background-color: currentColor;
+ min-height: $_marks_length;
+ min-width: 1px;
+ }
+ }
+
+ > value.left { margin-right: 9px; }
+ > value.right { margin-left: 9px; }
+
+ &.fine-tune >marks {
+ &.top { margin-top: 3px; }
+ &.bottom { margin-bottom: 3px; }
+
+ indicator { min-height: ($_marks_length - 3px); }
+ }
+ }
+
+ &.vertical {
+ > marks {
+ color: gtkalpha(currentColor, 0.55);
+ &.top { margin-right: $_marks_distance; }
+ &.bottom { margin-left: $_marks_distance; }
+
+ indicator {
+ background-color: currentColor;
+ min-height: 1px;
+ min-width: $_marks_length;
+ }
+ }
+
+ > value.top { margin-bottom: 9px; }
+ > value.bottom { margin-top: 9px; }
+
+ &.fine-tune >marks {
+ &.top { margin-left: 3px; }
+ &.bottom { margin-right: 3px; }
+
+ indicator { min-height: ($_marks_length - 3px); }
+ }
+ }
+
+ // *WARNING* scale with marks madness following
+
+ // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
+ $suffix: if($variant == 'light', '', '-dark');
+
+ @each $dir_class, $dir_infix in ('horizontal', 'horz'),
+ ('vertical', 'vert') {
+ @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
+ ('scale-has-marks-below', 'marks-after:not(.marks-before)') {
+ @each $state, $state_infix in ('', ''),
+ (':hover', '-hover'),
+ (':active', '-active'),
+ (':disabled', '-insensitive') {
+ &.#{$dir_class}.#{$marks_class} {
+
+ > trough > slider {
+ &#{$state} {
+ // an asymmetric slider asset is used here, so the margins are uneven, the smaller
+ // margin is set on the point side.
+ margin: -10px;
+ $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
+ border-style: none;
+ border-radius: 0;
+
+ background-color: transparent;
+ background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
+
+ $_scale_slider_bg_pos: bottom;
+
+ @if $dir_class == 'horizontal' {
+ min-height: 26px;
+ min-width: 22px;
+
+ @if $marks_infix == 'scale-has-marks-above' {
+ margin-top: -14px;
+
+ $_scale_slider_bg_pos: top;
+ }
+
+ @else { margin-bottom: -14px; }
+ }
+
+ @else {
+ min-height: 22px;
+ min-width: 26px;
+
+ @if $marks_infix == 'scale-has-marks-above' {
+ margin-left: -14px;
+
+ $_scale_slider_bg_pos: left bottom;
+ }
+
+ @else {
+ margin-right: -14px;
+
+ $_scale_slider_bg_pos: right bottom;
+ }
+ }
+
+ background-position: $_scale_slider_bg_pos;
+ background-repeat: no-repeat;
+ box-shadow: none;
+ }
+ }
+
+ &.fine-tune > trough > slider {
+ @if $dir_class == 'horizontal' {
+ // bigger negative margins to make the trough grow here as well
+ margin: -7px -10px;
+
+ @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
+
+ @else { margin-bottom: -11px; }
+ }
+
+ @else {
+ margin: -10px -7px;
+
+ @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
+
+ @else { margin-right: -11px; }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &.color {
+ min-height: 0;
+ min-width: 0;
+
+ > trough {
+ background-image: image($borders_color);
+ background-repeat: no-repeat;
+ }
+
+ &.horizontal {
+ padding: 0 0 15px 0;
+
+ > trough {
+ padding-bottom: 4px;
+ background-position: 0 -3px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ > trough > slider {
+ &:dir(ltr), &:dir(rtl) { // specificity bump
+ &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ margin-bottom: -15px;
+ margin-top: 6px;
+ }
+ }
+ }
+ }
+
+ &.vertical {
+ &:dir(ltr) {
+ padding: 0 0 0 15px;
+
+ > trough {
+ padding-left: 4px;
+ background-position: 3px 0;
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ > trough > slider {
+ &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ margin-left: -15px;
+ margin-right: 6px;
+ }
+ }
+ }
+
+ &:dir(rtl) {
+ padding: 0 15px 0 0;
+
+ > trough {
+ padding-right: 4px;
+ background-position: -3px 0;
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ }
+
+ > trough > slider {
+ &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ margin-right: -15px;
+ margin-left: 6px;
+ }
+ }
+ }
+ }
+
+ &.fine-tune {
+ &.horizontal {
+ &:dir(ltr), &:dir(rtl) { // specificity bump
+ padding: 0 0 12px 0;
+
+ > trough {
+ padding-bottom: 7px;
+ background-position: 0 -6px;
+ }
+
+ > trough > slider {
+ margin-bottom: -15px;
+ margin-top: 6px;
+ }
+ }
+ }
+
+ &.vertical {
+ &:dir(ltr) {
+ padding: 0 0 0 12px;
+
+ > trough {
+ padding-left: 7px;
+ background-position: 6px 0;
+ }
+
+ > trough > slider {
+ margin-left: -15px;
+ margin-right: 6px;
+ }
+ }
+
+ &:dir(rtl) {
+ padding: 0 12px 0 0;
+
+ > trough {
+ padding-right: 7px;
+ background-position: -6px 0;
+ }
+
+ > trough > slider {
+ margin-right: -15px;
+ margin-left: 6px;
+ }
+ }
+ }
+ }
+ }
+}
+
+
+/*****************
+ * Progress bars *
+ *****************/
+progressbar {
+ // sizing
+ &.horizontal {
+ > trough {
+ min-width: 150px;
+ &, > progress { min-height: 16px; }
+ }
+ }
+
+ &.vertical {
+ > trough {
+ min-height: 80px;
+ &, > progress { min-width: 16px; }
+ }
+ }
+
+ &.horizontal > trough > progress { margin: 0 -1px;
+ background-image:
+ repeating-linear-gradient(135deg,
+ gtkalpha($progressbar_pattern_color, 0.0),
+ gtkalpha($progressbar_pattern_color, 0.0) 12px,
+ gtkalpha($progressbar_pattern_color, 0.5) 12px,
+ gtkalpha($progressbar_pattern_color, 0.5) 24px),
+ linear-gradient(to bottom,
+ gtkalpha($progressbar_gradient_a, 0.7),
+ gtkalpha($progressbar_gradient_b, 0.7) 50%,
+ gtkalpha($progressbar_gradient_c, 0.7) 50%,
+ gtkalpha($progressbar_gradient_d, 0.7));} // the progress node is positioned after the trough border
+ &.vertical > trough > progress { margin: -1px 0;
+ background-image:
+ repeating-linear-gradient(45deg,
+ gtkalpha($progressbar_pattern_color, 0.0),
+ gtkalpha($progressbar_pattern_color, 0.0) 12px,
+ gtkalpha($progressbar_pattern_color, 0.5) 12px,
+ gtkalpha($progressbar_pattern_color, 0.5) 24px),
+ linear-gradient(to right,
+ gtkalpha($progressbar_gradient_a, 0.7),
+ gtkalpha($progressbar_gradient_b, 0.7) 50%,
+ gtkalpha($progressbar_gradient_c, 0.7) 50%,
+ gtkalpha($progressbar_gradient_d, 0.7)); } // this moves it over it.
+
+
+ // FIXME: insensitive state missing and some other state should be set probably
+ font-size: smaller;
+ color: transparentize($fg_color, 0.6);
+ font-feature-settings: "tnum";
+
+ > trough { @extend %scale_trough; }
+
+ > trough > progress {
+ @extend %scale_highlight; /* share most of scales' */
+ /* override insensitive that is specific to progress */
+ &:disabled {
+ background-color: $insensitive_fg_color;
+ border-color: $insensitive_fg_color;
+ }
+
+ border-radius: 1.5px;
+ $_progress-radius: 5px;
+ &.left {
+ border-top-left-radius: $_progress-radius;
+ border-bottom-left-radius: $_progress-radius;
+ }
+
+ &.right {
+ border-top-right-radius: $_progress-radius;
+ border-bottom-right-radius: $_progress-radius;
+ }
+
+ &.top {
+ border-top-right-radius: $_progress-radius;
+ border-top-left-radius: $_progress-radius;
+ }
+
+ &.bottom {
+ border-bottom-right-radius: $_progress-radius;
+ border-bottom-left-radius: $_progress-radius;
+ }
+ }
+
+ &.osd { // progressbar.osd used for epiphany page loading progress
+ min-width: 3px;
+ min-height: 3px;
+ background-color: transparent;
+
+ > trough {
+ border-style: none;
+ border-radius: 0;
+ background-color: transparent;
+ box-shadow: none;
+
+ > progress {
+ border-style: none;
+ border-radius: 0;
+ }
+ }
+ }
+
+ > trough.empty > progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
+}
+
+/*************
+ * Level Bar *
+ *************/
+
+$_levelbar_size: 9px;
+$_levelbar_border_radius: 5px;
+
+levelbar {
+ &.horizontal {
+ trough > block {
+ min-height: $_levelbar_size;
+ border-radius: $_levelbar_border_radius;
+
+ &:dir(rtl) {
+ border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
+ }
+
+ &:dir(ltr) {
+ border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
+ }
+
+ &.empty,&.full {
+ border-radius: $_levelbar_border_radius;
+ }
+ }
+
+ // segmented level bar
+ &.discrete {
+ trough > block {
+ min-height: 2px;
+ margin: 1px;
+ min-width: 24px;
+ border-radius:0;
+ &:first-child {border-radius: 2px 0 0 2px;}
+ &:last-child {
+ border-radius: 0 2px 2px 0;
+ }
+ }
+ }
+ }
+
+ &.vertical {
+ trough > block {
+ min-width: $_levelbar_size;
+ border-radius: $_levelbar_border_radius;
+ }
+
+ &.discrete > trough > block {
+ min-width: $_levelbar_size - 7px;
+ margin: 1px 0;
+ min-height: 32px;
+ }
+ }
+
+ > trough {
+ padding: 0;
+ }
+
+ // level bar colours
+ > trough > block {
+ border: 1px solid;
+
+ &.low {
+ border-color: $warning_color;
+ background-color: $warning_color;
+ }
+
+ &.high,
+ &:not(.empty) {
+ border-color: $progress_bg_color; // Yaru change: use our own palette
+ background-color: $progress_bg_color; // Yaru change: use our own palette
+ }
+
+ &.full {
+ border-color: $success_color;
+ background-color: $success_color;
+ }
+
+ &.empty {
+ background-color: $dark_fill; // Yaru change: use our own palette
+ border-color: $dark_fill; // Yaru change: use our own palette
+ }
+ }
+}
+
+
+/****************
+ * Print dialog *
+*****************/
+window.dialog.print {
+ drawing {
+ color: $fg_color;
+ background: none;
+ border: none;
+ padding: 0;
+
+ paper {
+ background: white;
+ color: #2e3436;
+ border: 1px solid $borders_color;
+ }
+
+ }
+
+ .dialog-action-box { margin: 12px; }
+}
+
+
+/**********
+ * Frames *
+ **********/
+frame,
+.frame {
+ border: 1px solid $borders_color;
+}
+
+frame {
+ border-radius: $window_radius;
+
+ > label {
+ margin: 4px;
+ }
+}
+
+actionbar > revealer > box {
+ padding: 6px;
+ border-spacing: 6px;
+ border-top: 1px solid $borders_color;
+}
+
+scrolledwindow {
+ // This is used when content is touch-dragged past boundaries.
+ // draws a box on top of the content, the size changes programmatically.
+ > overshoot {
+ &.top {
+ @include overshoot(top);
+ }
+
+ &.bottom {
+ @include overshoot(bottom);
+ }
+
+ &.left {
+ @include overshoot(left);
+ }
+
+ &.right {
+ @include overshoot(right);
+ }
+ }
+
+ > junction { // the small square between two scrollbars
+ // Only color the top-left (or top right in RTL) pixel, to visually connect
+ // the borders of the two scrollbars.
+
+ background: $borders_color,
+ linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
+ linear-gradient(to right, transparent 1px, $scrollbar_bg_color 1px);
+
+ &:dir(rtl) {
+ background: $borders_color,
+ linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
+ linear-gradient(to left, transparent 1px, $scrollbar_bg_color 1px);
+ }
+ }
+}
+
+//vbox and hbox separators
+separator {
+ background: lighten($borders_color, 5%);
+ min-width: 1px;
+ min-height: 1px;
+}
+
+
+/*********
+ * Lists *
+ *********/
+listview,
+list {
+ color: $text_color;
+ background-color: $base_color;
+ border-color: $borders_color;
+
+ &:backdrop {
+ color: $backdrop_text_color;
+ background-color: $backdrop_base_color;
+ border-color: $backdrop_borders_color;
+ }
+
+ > row { padding: 2px; }
+ > row.expander { padding: 0px; }
+ > row.expander .row-header { padding: 2px; }
+
+ &.horizontal row.separator,
+ &.separators.horizontal > row:not(.separator) {
+ border-left: 1px solid $_treeview_borders_color;
+ }
+ &:not(.horizontal) row.separator,
+ &.separators:not(.horizontal) > row:not(.separator) {
+ border-bottom: 1px solid $_treeview_borders_color;
+ }
+}
+
+row {
+ @include focus-ring();
+
+ &.activatable {
+ &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+
+ &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
+
+ &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
+
+ &:selected {
+ &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+
+ &.has-open-popup,
+ &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
+ }
+ }
+
+ &:selected {
+ outline-color: $alt_focus_border_color;
+
+ @extend %selected_items;
+ }
+}
+
+columnview {
+ // move padding to child cells
+ > listview > row {
+ padding: 0;
+
+ // align horizontal sizing with header buttons
+ > cell {
+ padding: 8px 6px;
+
+ &:not(:first-child) {
+ border-left: 1px solid transparent;
+ }
+ }
+ }
+
+ // make column separators visible when :show-column-separators is true
+ &.column-separators > listview > row > cell {
+ border-left-color: $_treeview_borders_color;
+ }
+
+ // shrink vertically for .data-table
+ &.data-table > listview > row > cell {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ }
+}
+
+treeexpander {
+ border-spacing: 4px;
+}
+
+/********************************************************
+ * Data Tables *
+ * treeview like tables with individual focusable cells *
+ * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 *
+ ********************************************************/
+
+columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
+ outline: 2px solid $focus_border_color;
+}
+
+columnview row:not(:selected) cell editablelabel.editing:focus-within {
+ outline: 2px solid $selected_bg_color;
+}
+
+columnview row:not(:selected) cell editablelabel.editing text selection {
+ color: $selected_fg_color;
+ background-color: $selected_bg_color;
+}
+
+/*******************************************************
+ * 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 */
+ & > row {
+ padding: 8px 12px;
+ min-height: 32px; /* should be tall even when only containing a label */
+
+ & > box {
+ border-spacing: 12px;
+ }
+ }
+}
+
+/*********************
+ * App Notifications *
+ *********************/
+.app-notification {
+ @extend %osd;
+
+ padding: 10px;
+ border-spacing: 10px;
+ border-radius: 0 0 5px 5px;
+ background-color: $osd_bg_color;
+ background-image: linear-gradient(to bottom, transparentize(black, 0.8),
+ transparent 2px);
+ background-clip: padding-box;
+
+ button { @extend %osd_button; }
+
+ border { border: none; }
+}
+
+
+/*************
+ * Expanders *
+ *************/
+expander {
+ min-width: 16px;
+ min-height: 16px;
+ -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+ &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+ &:disabled { color: $insensitive_fg_color; }
+
+ &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+}
+
+expander-widget {
+ @include focus-ring("> box > title");
+
+ > box > title {
+ transition: $focus_transition;
+ border-radius: $button_radius;
+
+ &:hover > expander {
+ color: lighten($fg_color,30%); //only lightens the icon
+ }
+ }
+}
+
+.navigation-sidebar,
+placessidebar,
+stackswitcher,
+expander-widget {
+ &:not(decoration):not(window):drop(active):focus,
+ &:not(decoration):not(window):drop(active) {
+ box-shadow: none;
+ }
+}
+
+
+/************
+ * Calendar *
+ ***********/
+calendar {
+ color: $text_color;
+ border: 1px solid $borders_color;
+
+ > header {
+ border-bottom: 1px solid $borders_color;
+
+ > button {
+ border: none;
+ box-shadow: none;
+ background: none;
+ border-radius: 0;
+ }
+ > button:backdrop {
+ background: none;
+ }
+ }
+
+ > grid {
+ > label.day-name {
+ }
+
+ > label.week-number {
+ }
+
+ > label.today {
+ box-shadow: inset 0px -2px $borders_color;
+
+ &:selected {
+ box-shadow: none;
+ }
+ }
+
+ > label:focus {
+ outline-color: $focus_border_color;
+ outline-offset: -2px;
+ outline-width: 2px;
+ outline-style: solid;
+ }
+
+ > label.day-number {
+ padding: 4px;
+
+ &:selected{
+ @extend %selected_items;
+ border-radius: 3px;
+ }
+ }
+
+ > label.day-number.other-month {
+ color: gtkalpha(currentColor, 0.3);
+ }
+ }
+
+}
+
+
+/***********
+ * Dialogs *
+ ***********/
+window.dialog.message { // Message Dialog styling
+ .titlebar {
+ min-height: 20px;
+ background-image: none;
+ background-color: $bg_color;
+ border-style: none;
+ border-top-left-radius: 7px;
+ border-top-right-radius: 7px;
+ }
+
+ box.dialog-vbox.vertical {
+ border-spacing: 10px;
+ }
+
+ & label.title {
+ font-weight: 800;
+ font-size: 15pt;
+ }
+
+ &.csd { // rounded bottom border styling for csd version
+ &.background {
+ // bigger radius for better antialiasing
+ border-bottom-left-radius: $window_radius+1;
+ border-bottom-right-radius: $window_radius+1;
+ }
+
+ .dialog-action-area button {
+ padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
+ border-radius: 0;
+ border-left-style: solid;
+ border-right-style: none;
+ border-bottom-style: none;
+
+ &:first-child{
+ border-left-style: none;
+ border-bottom-left-radius: 7px;
+ }
+
+ &:last-child {
+ border-bottom-right-radius: 7px;
+ }
+ }
+ }
+}
+
+filechooser {
+ .dialog-action-box {
+ border-top: 1px solid $borders_color;
+ }
+
+ #pathbarbox { border-bottom: 1px solid $bg_color; }
+}
+
+
+filechooserbutton>button>box {
+ border-spacing: 6px;
+}
+filechooserbutton:drop(active) {
+ box-shadow: none;
+ border-color: transparent;
+}
+
+
+/***********
+ * Sidebar *
+ ***********/
+.sidebar {
+ background-color: mix($bg_color, $base_color, 50%);
+
+ &:not(separator) {
+ @at-root %sidebar_left,
+ &:dir(ltr),
+ &.left,
+ &.left:dir(rtl) {
+ border-right: 1px solid $borders_color;
+ border-left-style: none;
+ }
+
+ @at-root %sidebar_right,
+ &:dir(rtl),
+ &.right {
+ border-left: 1px solid $borders_color;
+ border-right-style: none;
+ }
+ }
+
+ listview.view,
+ list { background-color: transparent; }
+
+ paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
+}
+
+stacksidebar {
+ //not a regular list
+ list.separators:not(.horizontal) > row:not(.separator) {
+ border-bottom: none;
+ }
+ row {
+ padding: 10px 4px;
+
+ > label {
+ padding-left: 6px;
+ padding-right: 6px;
+ }
+
+ &.needs-attention > label {
+ @extend %needs_attention;
+ background-size: 6px 6px, 0 0;
+ }
+ &:selected {
+ background-color: $menu_selected_color;
+ border-radius: $menu_radius;
+ color: $fg_color;
+ }
+ &:selected:hover:dir(ltr), &:selected:hover:dir(rtl) {
+ background-color: darken($menu_selected_color,5%);
+ }
+ &:focus:focus-visible {
+ outline-width: 0;
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+ }
+ &.activatable:active, &.activatable:selected:active {
+ box-shadow: none; // #3413
+ }
+ }
+}
+
+separator.sidebar {
+ background-color: $borders_color;
+}
+
+
+/**********************
+ * Navigation Sidebar *
+ **********************/
+
+.navigation-sidebar {
+ padding: $menu-margin 0; //only vertical padding. horizontal row size would clip
+
+ > separator {
+ margin: $menu-margin;
+ }
+
+ > row {
+ min-height: 36px;
+ padding: 0 8px;
+ border-radius: $menu-margin;
+ margin: 0 $menu-margin 2px;
+
+ &:hover,
+ &:focus-visible:focus-within {
+ background-color: darken($menu_selected_color, 5%);
+ }
+
+ &:selected {
+ background-color: $menu_selected_color;
+ color: inherit;
+
+ &:hover {
+ background-color: darken($menu_selected_color,5%);
+ }
+
+ &:focus-visible:focus-within {
+ outline-width: 0;
+ color: $selected_fg_color;
+ background-color: $selected_bg_color;
+ &:hover { background-color: darken($selected_bg_color,10%); }
+ }
+ }
+
+ &:disabled { color: $insensitive_fg_color; }
+ }
+}
+
+
+/****************
+ * File chooser *
+ ****************/
+
+$_placesidebar_icons_opacity: 0.7;
+
+row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons
+ // see bug #786613 for details
+ // on this oddity
+
+/* this should be more generic, only using .navigation-sidebar
+ https://gitlab.gnome.org/GNOME/gtk/-/issues/2929
+*/
+
+placessidebar {
+ .navigation-sidebar > row {
+ // Needs overriding of the `.navigation-sidebar > row` padding
+ padding: 0;
+
+ // Using margins/padding directly in the SidebarRow
+ // will make the animation of the new bookmark row jump
+ > revealer { padding: 0 14px; }
+
+ image.sidebar-icon {
+ &:dir(ltr) { padding-right: 8px; }
+ &:dir(rtl) { padding-left: 8px; }
+ }
+
+ label.sidebar-label {
+ &:dir(ltr) { padding-right: 2px; }
+ &:dir(rtl) { padding-left: 2px; }
+ }
+
+ @at-root button.sidebar-button {
+ @extend %button_basic_flat;
+
+ @extend %button_selected_flat;
+ min-height: 26px;
+ min-width: 26px;
+ margin-top: 3px;
+ margin-bottom: 3px;
+ padding: 0;
+ border-radius: 100%;
+ }
+
+ // in the sidebar case it makes no sense to click the selected row
+ &:selected:active { box-shadow: none; }
+
+ &.sidebar-placeholder-row {
+ padding: 0 8px;
+ min-height: 2px;
+ background-image: image($drop_target_color);
+ background-clip: content-box;
+ }
+
+ &.sidebar-new-bookmark-row { color: $selected_bg_color; }
+
+ &:drop(active):not(:disabled) {
+ color: $drop_target_color;
+ box-shadow: inset 0 1px $drop_target_color,
+ inset 0 -1px $drop_target_color;
+
+ &:selected {
+ color: $selected_fg_color;
+ background-color: $drop_target_color;
+ }
+ }
+ }
+}
+
+placesview {
+ .server-list-button > image {
+ transition: 200ms $ease-out-quad;
+ -gtk-icon-transform: rotate(0turn);
+ }
+
+ .server-list-button:checked > image {
+ transition: 200ms $ease-out-quad;
+ -gtk-icon-transform: rotate(-0.5turn);
+ }
+
+ row.activatable:hover { }
+
+ > actionbar > revealer > box > box{
+ border-spacing: 6px;
+ }
+}
+
+
+/*********
+ * Paned *
+ *********/
+paned {
+ > separator {
+ min-width: 1px;
+ min-height: 1px;
+ -gtk-icon-source: none; // defeats the ugly default handle decoration
+ border-style: none; // just to be sure
+ background-color: transparent;
+ // workaround, using background instead of a border since the border will get rendered twice (?)
+ background-image: image($borders_color);
+ background-size: 1px 1px;
+
+ &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
+
+ &.wide {
+ min-width: 5px;
+ min-height: 5px;
+ background-color: $bg_color;
+ background-image: image($borders_color), image($borders_color);
+ background-size: 1px 1px, 1px 1px;
+ }
+ }
+
+ &.horizontal > separator {
+ background-repeat: repeat-y;
+
+ &:dir(ltr) {
+ margin: 0 -8px 0 0;
+ padding: 0 8px 0 0;
+ background-position: left;
+ }
+ &:dir(rtl) {
+ margin: 0 0 0 -8px;
+ padding: 0 0 0 8px;
+ background-position: right;
+ }
+
+ &.wide {
+ margin: 0;
+ padding: 0;
+ background-repeat: repeat-y, repeat-y;
+ background-position: left, right;
+ }
+ }
+
+ &.vertical > separator {
+ margin: 0 0 -8px 0;
+ padding: 0 0 8px 0;
+ background-repeat: repeat-x;
+ background-position: top;
+
+ &.wide {
+ margin: 0;
+ padding: 0;
+ background-repeat: repeat-x, repeat-x;
+ background-position: bottom, top;
+ }
+ }
+}
+
+
+/**************
+ * GtkVideo *
+ **************/
+
+video {
+ & image.osd {
+ min-width: 64px;
+ min-height: 64px;
+ border-radius: 32px;
+ }
+ background: black;
+}
+
+/************
+ * Tooltips *
+ ************/
+tooltip {
+ &.background {
+ // background-color needs to be set this way otherwise it gets drawn twice
+ // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
+ background-color: transparentize(black, 0.2);
+ background-clip: padding-box;
+ border: 1px solid $tooltip_borders_color; // this subtle border is meant to
+ // not make the tooltip melt with
+ // very dark backgrounds
+ color: white;
+ }
+
+ padding: 6px 10px;
+ border-radius: $window_radius;
+ box-shadow: none; // otherwise it gets inherited by windowframe.csd
+
+ > box {
+ border-spacing: 6px;
+ }
+}
+
+
+/*****************
+ * Color Chooser *
+ *****************/
+colorswatch {
+ // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
+ // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
+ // applied to the overlay box.
+
+ transition: $focus_transition;
+
+ @include focus-ring($width: 4px, $offset: -2px);
+
+ &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
+
+ $_colorswatch_radius: 5px;
+
+ // base color corners rounding
+ // to avoid the artifacts caused by rounded corner anti-aliasing the base color
+ // sports a bigger radius.
+ // nth-child is needed by the custom color strip.
+
+ &.top {
+ border-top-left-radius: $_colorswatch_radius + 0.5px;
+ border-top-right-radius: $_colorswatch_radius + 0.5px;
+
+ > overlay {
+ border-top-left-radius: $_colorswatch_radius;
+ border-top-right-radius: $_colorswatch_radius;
+ }
+ }
+
+ &.bottom {
+ border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+ border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+
+ > overlay {
+ border-bottom-left-radius: $_colorswatch_radius;
+ border-bottom-right-radius: $_colorswatch_radius;
+ }
+ }
+
+ &.left,
+ &:first-child:not(.top) {
+ border-top-left-radius: $_colorswatch_radius + 0.5px;
+ border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+
+ > overlay {
+ border-top-left-radius: $_colorswatch_radius;
+ border-bottom-left-radius: $_colorswatch_radius;
+ }
+ }
+
+ &.right,
+ &:last-child:not(.bottom) {
+ border-top-right-radius: $_colorswatch_radius + 0.5px;
+ border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+
+ > overlay {
+ border-top-right-radius: $_colorswatch_radius;
+ border-bottom-right-radius: $_colorswatch_radius;
+ }
+ }
+
+ &.dark {
+ > overlay {
+ color: white;
+ }
+
+ &.activatable:hover > overlay {
+ border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color);
+ }
+ }
+
+ &.light {
+ > overlay {
+ color: black;
+ }
+
+ &.activatable:hover > overlay {
+ border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color);
+ }
+ }
+
+ &:drop(active) {
+ box-shadow: none;
+
+ &.light > overlay {
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
+ inset 0 0 0 1px $drop_target_color;
+ }
+
+ &.dark > overlay {
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color),
+ inset 0 0 0 1px $drop_target_color;
+ }
+ }
+
+ > overlay {
+ border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
+ }
+
+ &.activatable:hover > overlay {
+ box-shadow: inset 0 1px transparentize(white, 0.6),
+ inset 0 -1px transparentize(black, 0.8);
+ }
+
+ &#add-color-button {
+ border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
+
+ &:only-child { border-radius: $_colorswatch_radius; }
+
+ > overlay {
+ @include button(normal);
+ }
+
+ &.activatable:hover > overlay {
+ @include button(hover);
+ }
+ }
+
+ &:disabled {
+ opacity: 0.5;
+
+ > overlay {
+ border-color: transparentize(black, 0.4);
+ box-shadow: none;
+ }
+ }
+
+ row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
+
+ &#editor-color-sample {
+ border-radius: 4px;
+
+ > overlay { border-radius: 4.5px; }
+ }
+}
+
+plane {
+ transition: $focus_transition;
+
+ @include focus-ring($offset: 2px, $outer: true);
+}
+
+// colorscale popup
+colorchooser .popover.osd { border-radius: 5px; }
+
+/********
+ * Misc *
+ ********/
+.content-view {
+ background-color: darken($bg_color,7%);
+
+ &:hover { -gtk-icon-filter: brightness(1.2); }
+
+ .tile {
+ margin: 2px;
+ background-color: if($variant=='light', transparent, black);
+ border-radius: 0;
+ padding: 0;
+
+ &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
+ &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); }
+}
+
+ > rubberband { @extend rubberband; }
+
+}
+
+.scale-popup {
+ .osd & { @extend %osd; }
+
+ .osd & button.flat { //FIXME: quick hack, redo properly
+ border-style: none;
+ border-radius: 5px;
+ }
+
+ button { // +/- buttons on GtkVolumeButton popup
+ &:hover {
+ @extend %undecorated_button;
+ background-color: transparentize($fg_color,0.9);
+ border-radius: 5px;
+ }
+ }
+}
+
+
+/**********************
+ * Window Decorations *
+ *********************/
+window {
+ // lamefun trick to get rounded borders regardless of CSD use
+ border-width: 0px;
+
+ // this needs to be transparent
+ // see bug #722563
+ $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
+ $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
+
+ &.csd {
+ box-shadow: 1px 1px 0px $fg_color,-1px 1px 0px $fg_color, 1px -1px 0px $fg_color, -1px -1px 0px $fg_color;
+ //doing borders with box-shadow
+ margin: 0px;
+ border-radius: $window_radius $window_radius 0 0;
+ &:backdrop {
+ // the transparent shadow here is to enforce that the shadow extents don't
+ // change when we go to backdrop, to prevent jumping windows.
+ // The biggest shadow should be in the same order then in the active state
+ // or the jumping will happen during the transition.
+
+ transition: $backdrop_transition;
+ }
+
+ &.popup {
+ border-radius: $menu_radius;
+ box-shadow: 0 1px 2px transparentize(black, 0.8),
+ 0 0 0 1px transparentize($_wm_border, 0.1);
+ }
+
+ &.dialog.message {
+ border-radius: $window_radius;
+ box-shadow: 0 1px 2px transparentize(black, 0.8),
+ 0 0 0 1px transparentize($_wm_border, 0.1);
+ }
+
+ &.solid-csd {
+ margin: 0;
+ padding: 0;
+ border: solid 1px $borders_color;
+ border-radius: 0;
+ box-shadow: inset 0 0 0 3px $headerbar_bg_color, inset 0 1px $top_hilight;
+
+ &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; }
+ }
+ }
+
+ &.maximized,
+ &.fullscreen,
+ &.tiled,
+ &.tiled-top,
+ &.tiled-left,
+ &.tiled-right,
+ &.tiled-bottom { border-radius: 0; }
+
+ &.popup { box-shadow: none; }
+
+ // server-side decorations as used by mutter
+ &.ssd { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows
+
+}
+
+tooltip.csd {
+ border-radius: 5px;
+ box-shadow: none;
+}
+
+// catch all extend :)
+
+%selected_items {
+ background-color: $selected_bg_color;
+
+ @at-root %nobg_selected_items, & {
+ color: $selected_fg_color;
+
+ @at-root %selected_items_disabled,
+ &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
+
+ }
+}
+
+.monospace { font-family: monospace; }
+
+
+/**********************
+ * Touch Copy & Paste *
+ *********************/
+//touch selection handlebars for the Popover.osd above
+cursor-handle {
+ background-color: transparent;
+ background-image: none;
+ box-shadow: none;
+ border-style: none;
+ min-width: 20px;
+ min-height: 24px;
+ padding-left: 20px;
+ padding-right: 20px;
+ padding-top: 24px;
+ padding-bottom: 24px;
+
+ @each $s,$as in ('',''),
+ (':hover','-hover'),
+ (':active','-active') { //no need for insensitive and backdrop
+ &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
+ $_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
+ -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+ url('#{$_url}@2.png'));
+ }
+
+ &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
+ $_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
+ -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+ url('#{$_url}@2.png'));
+ }
+
+ &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
+ $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
+ -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
+ url('#{$_url}@2.png'));
+ }
+ }
+}
+
+shortcuts-section {
+ margin: 20px;
+}
+
+.shortcuts-search-results {
+ margin: 20px;
+ border-spacing: 24px;
+}
+
+// shortcut window keys
+shortcut {
+ border-spacing: 6px;
+}
+
+shortcut > .keycap {
+ min-width: 20px;
+ min-height: 25px;
+ margin-top: 2px;
+ padding-bottom: 3px;
+ padding-left: 6px;
+ padding-right: 6px;
+
+ color: $fg_color;
+ background-color: $base_color;
+ border: 1px solid;
+ border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color);
+ border-radius: 5px;
+ box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%));
+ font-size: smaller;
+
+}
+
+:not(decoration):not(window):drop(active):focus,
+:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 1px $drop_target_color;
+ caret-color: $drop_target_color;
+}
+
+stackswitcher > button.text-button { min-width: 100px; } // FIXME aggregate with buttons
+
+stackswitcher.circular {
+ border-spacing: 12px;
+
+ // FIXME aggregate with buttons
+ > button.circular,
+ > button.text-button.circular {
+ min-width: 32px;
+ min-height: 32px;
+ padding: 0;
+ }
+}
+/*************
+ * App Icons *
+ *************/
+/* 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);
+}
+
+/* Drapshadow 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);
+}
+
+/*********
+ * Emoji *
+ ********/
+
+popover.emoji-picker > contents {
+ padding: 0;
+}
+
+.emoji-searchbar {
+ padding: 6px;
+ border-spacing: 6px;
+ border-bottom: 1px solid $borders_color;
+}
+
+.emoji-toolbar {
+ padding: 6px;
+ border-spacing: 6px;
+ border-top: 1px solid $borders_color;
+}
+
+button.emoji-section {
+ border-color: transparent;
+ border-width: 3px;
+ border-style: none none solid;
+ border-radius: 0;
+
+ padding: 3px 0 0;
+ min-width: 32px;
+ min-height: 28px;
+
+ /* reset props inherited from the button style */
+ background: none;
+ box-shadow: none;
+ text-shadow: none;
+
+ &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
+ &:checked { border-color: $selected_bg_color; }
+}
+
+popover.emoji-picker emoji {
+ font-size: x-large;
+ padding: 6px;
+ border-radius: 6px;
+
+ &:focus,
+ &:hover {
+ background: $selected_bg_color;
+ }
+}
+
+emoji-completion-row > box {
+ border-spacing: 10px;
+ padding: 2px 10px;
+}
+
+emoji-completion-row:focus,
+emoji-completion-row:hover {
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+}
+
+emoji-completion-row emoji:focus,
+emoji-completion-row emoji:hover {
+ background-color: $menu_selected_color;
+}
+
+popover.entry-completion > contents {
+ padding: 0;
+}
+
+statusbar {
+ padding: 6px 10px 6px 10px;
+}