summaryrefslogtreecommitdiff
path: root/desktop-themes/YaruOk/gtk-3.0/_common.scss
diff options
context:
space:
mode:
authorblue-devil-93 <[email protected]>2021-06-24 10:32:21 +0200
committerGitHub <[email protected]>2021-06-24 10:32:21 +0200
commit9bf6f4ec2f77fd09a12ba2b68416e81a13b4ca3d (patch)
tree497fa90cd62785e4c9a522d265f323598fe575d8 /desktop-themes/YaruOk/gtk-3.0/_common.scss
parentfb195c9951cd9d87cd650f1cb901dbfc5966ab04 (diff)
downloadmate-themes-9bf6f4ec2f77fd09a12ba2b68416e81a13b4ca3d.tar.bz2
mate-themes-9bf6f4ec2f77fd09a12ba2b68416e81a13b4ca3d.tar.xz
Propose a different traditional ok implentation (#290)
* tr * Propose another Traditonal Ok implementation based on Yaru * Makefile * fix makefile * remove whitespace+ * remove trailing whitespaces * rename it to traditionalok * move Theme to yaruok * Fix regression in mate appearance yaruok * Sync with official branch * readd traditionalokf * fix YaruOK case mismatch * improve tabs on gtk4 * fix Makefile.am * Add YaruGreen * Fix YaruGreen GTK3 * Fix Build - first try * Fix Build - second try * Fix Build - third try * improve colors of yaru green, decrease tab size * import scrollbar code from traditional green to yaru green * fix build * Tab_alignment_fix_for_yaru_green * add panel grip * decrease_tab_size fix_panel fix_link_color * sync_yru_ok_with_green * addpanel_gripper_to yaru * darken yarugreen scrollbar as requested * decrease border radius for popover on yaru grren and ok * decrease border radius for popover on yaru grren and ok . * fiy overlay - first try * fix osd colors * improve tabs and panel grabber * decrease popover and menu radius to 2px * fix mate-calc * fix mate-calc.
Diffstat (limited to 'desktop-themes/YaruOk/gtk-3.0/_common.scss')
-rw-r--r--desktop-themes/YaruOk/gtk-3.0/_common.scss5036
1 files changed, 5036 insertions, 0 deletions
diff --git a/desktop-themes/YaruOk/gtk-3.0/_common.scss b/desktop-themes/YaruOk/gtk-3.0/_common.scss
new file mode 100644
index 00000000..bc7d4f34
--- /dev/null
+++ b/desktop-themes/YaruOk/gtk-3.0/_common.scss
@@ -0,0 +1,5036 @@
+@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;
+$button_radius: 4px; // Yaru change: we want everything to be less round
+$model_button_radius: 3px; // blx change: we want everything to be less round
+$menu_radius: 2px; // Yaru change: we want everything to be less round
+$window_radius: $button_radius + 3;
+$popover_radius: 2px; // Yaru change: we want everything to be less round
+
+// Optional compact sizes for buttons, headerbar and headerbar widgets
+$_sizevariant: 'default'; //compact otherwise
+$_headerbar_height: if($_sizevariant=='default', 10px, 20px);
+$_entry_height: if($_sizevariant=='default', 32px, 28px);
+$_btn_pad: if($_sizevariant=='default', 3px 8px, 2px 6px);
+$_hb_btn_pad: if($_sizevariant=='default', 2px, 2px);
+$_img_btn_pad: if($_sizevariant=='default', 5px, 2px);
+$_sel_menu_pad: if($_sizevariant=='default', 6px 10px, 4px 10px);
+$_circ_btn_pad: if($_sizevariant=='default', 4px, 2px);
+$_switch_margin: if($_sizevariant=='default', 10px, 7px);
+
+* {
+ padding: 0;
+ -GtkToolButton-icon-spacing: 4;
+ -GtkTextView-error-underline-color: $error_color;
+
+ // The size for scrollbars. The slider is 2px smaller, but we keep it
+ // up so that the whole area is sensitive to button presses for the
+ // slider. The stepper button is larger in both directions, the slider
+ // only in the width
+
+ -GtkScrolledWindow-scrollbar-spacing: 0;
+
+ -GtkToolItemGroup-expander-size: 11;
+
+ -GtkWidget-text-handle-width: 20;
+ -GtkWidget-text-handle-height: 24;
+
+ -GtkDialog-button-spacing: 4;
+ -GtkDialog-action-area-border: 0;
+
+ // We use the outline properties to signal the focus properties
+ // to the adwaita engine: using real CSS properties is faster,
+ // and we don't use any outlines for now.
+
+ outline-color: gtkalpha(currentColor, 0.3);
+ outline-style: dashed;
+ outline-offset: -3px;
+ outline-width: 1px;
+ -gtk-outline-radius: $button-radius - 2;
+
+ -gtk-secondary-caret-color: $selected_bg_color
+}
+
+
+/***************
+ * Base States *
+ ***************/
+.background {
+ color: $fg_color;
+ background-color: $bg_color;
+
+ &:backdrop {
+ color: $backdrop_fg_color;
+ background-color: $backdrop_bg_color;
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ }
+}
+
+/*
+ These wildcard seems unavoidable, need to investigate.
+ Wildcards are bad and troublesome, use them with care,
+ or better, just don't.
+ Everytime a wildcard is used a kitten dies, painfully.
+*/
+
+*:disabled { -gtk-icon-effect: dim; }
+
+.gtkstyle-fallback {
+ color: $fg_color;
+ background-color: $bg_color;
+
+ &:hover {
+ color: $fg_color;
+ background-color: lighten($bg_color, 10%);
+ }
+
+ &:active {
+ color: $fg_color;
+ background-color: darken($bg_color, 10%);
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ background-color: $insensitive_bg_color;
+ }
+
+ &:selected {
+ color: $selected_fg_color;
+ background-color: $selected_bg_color;
+ }
+}
+
+.view,
+%view {
+ color: $text_color;
+ background-color: $base_color;
+
+ &:backdrop {
+ color: $backdrop_text_color;
+ background-color: $backdrop_base_color;
+ &:disabled { color: $backdrop_insensitive_color; }
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ background-color: $insensitive_bg_color;
+ }
+
+ &:selected {
+ &:focus, & {
+ @extend %selected_items;
+
+ border-radius: 3px;
+ }
+ }
+}
+
+.view,
+textview {
+ text {
+ @extend %view;
+
+ selection { &:focus, & { @extend %selected_items; }}
+ }
+}
+
+textview border { background-color: mix($bg_color, $base_color, 50%); }
+
+iconview { @extend .view; }
+
+.rubberband,
+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;
+
+ &:selected {
+ @extend %selected_items;
+
+ outline-offset: -2px;
+ }
+ }
+}
+
+.content-view .tile {
+ margin: 2px;
+ background-color: if($variant=='light', transparent, black);
+ border-radius: 0;
+ padding: 0;
+
+ &:backdrop { background-color: if($variant=='light', transparent, darken($backdrop_base_color,5%)); }
+ &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
+ &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); }
+}
+
+label {
+ caret-color: currentColor; // this shouldn't be needed.
+
+ &.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; }
+
+ &:backdrop {
+ color: $backdrop_insensitive_color;
+
+ button & { color: inherit; }
+ }
+
+ selection { @extend %selected_items_disabled; }
+ }
+
+ &:backdrop {
+ selection { @extend %selected_items_backdrop; }
+ }
+
+ &.error {
+ color: $error_color;
+ &:disabled { color: transparentize($error_color,0.5); }
+ &:disabled:backdrop { color: transparentize($error_color,0.6); }
+ }
+}
+
+.dim-label {
+ opacity: 0.55;
+ text-shadow: none;
+}
+
+assistant {
+ .sidebar {
+ background-color: $base_color;
+ border-top: 1px solid $borders_color;
+
+ &:backdrop {
+ background-color: $backdrop_base_color;
+ border-color: $backdrop_borders_color;
+ }
+ }
+
+ &.csd .sidebar { border-top-style: none; }
+
+ .sidebar label { padding: 6px 12px; }
+
+ .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
+}
+
+%osd,
+.osd {
+ color: $osd_fg_color;
+ border: none;
+ background-color: $osd_bg_color;
+ background-clip: padding-box;
+ text-shadow: 0 1px black;
+ -gtk-icon-shadow: 0 1px black;
+
+ &:backdrop {
+ text-shadow: none;
+ -gtk-icon-shadow: none;
+ }
+}
+
+
+/*********************
+ * Spinner Animation *
+ *********************/
+@keyframes spin {
+ to { -gtk-icon-transform: rotate(1turn); }
+}
+
+spinner {
+ background: none;
+ &:backdrop { color: $backdrop_fg_color; }
+ 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: $_entry_height;
+ padding-left: 8px;
+ padding-right: 8px;
+ border: 1px solid;
+ border-radius: $button_radius;
+ transition: all 200ms $ease-out-quad;
+
+ @include entry(normal);
+
+ image { // icons inside the entry
+ &.left { margin-right: 6px; }
+ &.right { margin-left: 6px; }
+ }
+
+
+ &.flat {
+ &:focus, &:backdrop, &:disabled, &:backdrop:disabled, & {
+ min-height: 0;
+ padding: 2px;
+ background-color: transparent;
+ border-color: transparent;
+ border-radius: 0;
+ }
+ }
+
+ &:focus { @include entry(focus); }
+
+ &:disabled { @include entry(insensitive); }
+
+ &:backdrop {
+ @include entry(backdrop);
+
+ transition: $backdrop_transition;
+ }
+
+ &:backdrop:disabled { @include entry(backdrop-insensitive); }
+
+ 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;
+ border-color: entry_focus_border($e_color);
+
+ &:focus { @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; }
+
+ &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
+ }
+
+ &:drop(active) {
+ &:focus, & {
+ border-color: $drop_target_color;
+ box-shadow: inset 0 0 0 1px $drop_target_color;
+ }
+ }
+
+ .osd & {
+ @include entry(osd);
+
+ &:focus { @include entry(osd-focus); }
+
+ &:backdrop { @include entry(osd-backdrop); }
+
+ &:disabled { @include entry(osd-insensitive); }
+ }
+ }
+
+ progress {
+ margin: 2px -6px;
+ background-color: transparent;
+ background-image: none;
+ border-radius: 0;
+ border-width: 0 0 2px;
+ border-color: $progress_bg_color;
+ border-style: solid;
+ box-shadow: none;
+
+ &:backdrop { background-color: transparent; }
+ }
+
+ // linked entries
+ .linked:not(.vertical) > & { @extend %linked; }
+ .linked:not(.vertical) > &:focus + &,
+ .linked:not(.vertical) > &:focus + button,
+ .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); }
+
+ .linked:not(.vertical) > &:focus.error + &,
+ .linked:not(.vertical) > &:focus.error + button,
+ .linked:not(.vertical) > &:focus.error + combobox > box > button.combo { border-left-color: entry_focus_border($error_color); }
+
+ .linked:not(.vertical) > &:drop(active) + &,
+ .linked:not(.vertical) > &:drop(active) + button,
+ .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
+
+ // Vertically linked entries
+ // FIXME: take care of "colored" entries
+ .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%);
+
+ &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); }
+ }
+
+ // brighter border between linked insensitive entries
+ &:disabled + %entry:disabled,
+ &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
+
+ // color back the top border of a linked focused entry following another entry.
+ // :not(:only-child) is a specificity bump hack.
+ + %entry:focus:not(:only-child),
+ + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); }
+
+ + %entry:focus.error:not(:only-child),
+ + entry:focus.error:not(:only-child) { border-top-color: entry_focus_border($error_color); }
+
+ + %entry:drop(active):not(:only-child),
+ + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
+
+ // this takes care of coloring the top border of the focused entry subsequent widget.
+ // :not(:only-child) is a specificity bump hack.
+ &:focus:not(:only-child) {
+ + %entry,
+ + entry,
+ + button,
+ + combobox > box > button.combo { border-top-color: entry_focus_border(); }
+ }
+
+ &:focus.error:not(:only-child) {
+ + %entry,
+ + entry,
+ + button,
+ + combobox > box > button.combo { border-top-color: entry_focus_border($error_color); }
+ }
+
+ &:drop(active):not(:only-child) {
+ + %entry,
+ + entry,
+ + button,
+ + combobox > box > button.combo { border-top-color: $drop_target_color; }
+ }
+ }
+
+ &.error { color: $error_color; }
+}
+
+treeview entry {
+ &:focus {
+ &: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 { border-color: $selected_bg_color; }
+ }
+}
+
+.entry-tag {
+ // sizing
+ padding: 5px;
+
+ margin-top: 2px;
+ margin-bottom: 2px;
+
+ // side margins: compensate the entry padding with a negative margin
+ // then the negative margin itself
+ :dir(ltr) & {
+ margin-left: 8px;
+ margin-right: -5px;
+ }
+ :dir(rtl) & {
+ margin-left: -5px;
+ margin-right: 8px;
+ }
+
+ border-style: none;
+
+ $_entry_tag_color: if($variant=='light', $selected_fg_color, $base_color);
+ color: $_entry_tag_color;
+
+ $_entry_tag_bg: if($variant=='light', $selected_bg_color, mix($fg_color, $base_color, 50%));
+ background-color: $_entry_tag_bg;
+
+ &:hover {
+ background-color: lighten($_entry_tag_bg, 10%);
+ }
+
+ :backdrop & {
+ color: $backdrop_base_color;
+ background-color: if($variant=='light', $selected_bg_color,
+ mix($backdrop_fg_color, $backdrop_base_color, 50%));
+ }
+
+ &.button {
+ background-color: transparent;
+ color: transparentize($_entry_tag_color, 0.3);
+ }
+
+ :not(:backdrop) &.button {
+ &:hover {
+ border: 1px solid $_entry_tag_bg;
+ color: $_entry_tag_color;
+ }
+ &:active {
+ background-color: $_entry_tag_bg;
+ color: transparentize($_entry_tag_color, 0.3);
+ }
+ }
+}
+
+/***********
+ * Buttons *
+ ***********/
+// stuff for .needs-attention
+$_dot_color: if($variant=='light', $selected_bg_color,
+ lighten($selected_bg_color,15%));
+@keyframes needs_attention {
+ from {
+ background-image: -gtk-gradient(radial,
+ center center, 0,
+ center center, 0.01,
+ to($_dot_color),
+ to(transparent));
+ }
+
+ to {
+ background-image: -gtk-gradient(radial,
+ center center, 0,
+ center center, 0.5,
+ to($selected_bg_color),
+ to(transparent));
+ }
+}
+
+%button,
+button {
+ @at-root %button_basic, & {
+
+ min-height: 24px;
+ min-width: 16px;
+ padding: $_btn_pad;
+ border: 1px solid;
+ border-radius: $button_radius;
+ transition: $button_transition;
+
+ @include button(normal);
+
+ @at-root %button_basic_flat,
+ &.flat {
+ @include button(undecorated);
+ // to avoid adiacent 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 {
+ transition: $button_transition;
+ transition-duration: 500ms;
+
+ &:active { transition: $button_transition; }
+ }
+ }
+
+ &:hover {
+ @include button(hover);
+ -gtk-icon-effect: highlight;
+ }
+
+ &:active,
+ &:checked {
+ @include button(active);
+
+ transition-duration: 50ms;
+ }
+
+ &:backdrop {
+ &.flat, & {
+ @include button(backdrop);
+
+ transition: $backdrop_transition;
+ -gtk-icon-effect: none;
+
+ &:active,
+ &:checked { @include button(backdrop-active); }
+
+ &:disabled {
+ @include button(backdrop-insensitive);
+
+ &:active,
+ &:checked { @include button(backdrop-insensitive-active); }
+ }
+ }
+ }
+
+ @at-root %button_basic_flat,
+ &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
+
+ &:disabled {
+ @include button(insensitive);
+
+ &:active,
+ &:checked { @include button(insensitive-active); }
+ }
+
+ &.image-button {
+ min-width: 24px;
+ padding-left: $_img_btn_pad;
+ padding-right: $_img_btn_pad;
+ }
+
+ &.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: 34px; }
+
+ 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;
+ }
+
+ &:disabled {
+ &:backdrop, & {
+ @include button(osd-insensitive);
+
+ border: none;
+ }
+ }
+
+ &:backdrop {
+ @include button(osd-backdrop);
+
+ border: 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); }}
+
+ &:backdrop { @include button(osd-backdrop); }
+
+ &.flat {
+ @include button(undecorated);
+
+ box-shadow: none; //FIXME respect no edge on the button mixin
+ text-shadow: 0 1px black;
+ -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;
+ }
+
+ &:backdrop { @include button(undecorated); }
+
+ &:active,
+ &:checked { @include button(osd-active); }
+ }
+ }
+
+ // Suggested and Destructive Action buttons
+ @each $b_type, $b_color in (suggested-action, $suggested_bg_color),
+ (destructive-action, $destructive_color) {
+ &.#{$b_type} {
+ @include button(normal, $b_color);
+
+ &.flat {
+ @include button(undecorated);
+
+ color: $b_color; //FIXME: does it work on the dark variant?
+ }
+
+ &:hover { @include button(hover, $b_color); }
+
+ &:active,
+ &:checked { @include button(active, $b_color); }
+
+ &:backdrop,
+ &.flat:backdrop {
+ @include button(backdrop, $b_color, white);
+
+ &:active,
+ &:checked { @include button(backdrop-active, $b_color, white); }
+
+ &:disabled {
+ @include button(backdrop-insensitive);
+
+ &:active,
+ &:checked { @include button(backdrop-insensitive-active, $b_color, white); }
+ }
+ }
+
+ &.flat {
+ &:backdrop, &:disabled, &:backdrop: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); }}
+
+ &:backdrop { @include button(osd-backdrop, $b_color); }
+ }
+ }
+ }
+
+ .stack-switcher > & {
+ // 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.
+
+ outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
+
+ > label {
+ padding-left: 6px; // label padding
+ padding-right: 6px; //
+ }
+
+ > image {
+ padding-left: 6px; // image padding
+ padding-right: 6px; //
+ padding-top: 3px; //
+ padding-bottom: 3px; //
+ }
+
+ &.text-button {
+ // compensate text-button paddings
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+
+ &.image-button {
+ // we want image buttons to have a 1:1 aspect ratio, so compensation
+ // of the padding added to the GtkImage is needed
+ padding-left: 2px;
+ padding-right: 2px;
+ }
+
+ &.needs-attention {
+ > label,
+ > image { @extend %needs_attention; }
+
+ &:active,
+ &:checked {
+ > label,
+ > image {
+ animation: none;
+ background-image: none;
+ }
+ }
+ }
+ }
+
+ // hide separators
+ &.font,
+ &.file { separator { background-color: transparent; }}
+
+ &.font { > box > box > label { font-weight: bold; }}
+
+ // inline-toolbar buttons
+ .inline-toolbar & { @extend %linked; }
+
+ .primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
+
+ .linked > & { @extend %linked; }
+
+ .linked.vertical > & { @extend %linked_vertical; }
+
+ &.circular { // The Bloody Circul Button
+ border-radius: 9999px;
+ -gtk-outline-radius: 9999px;
+ padding: $_circ_btn_pad; /* circles instead of ellipses */
+
+ label { padding: 0; }
+
+ // the followind code is needed since we use a darker bottom border on buttons, which looks pretty
+ // bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details),
+ // so on relevant states we an additional background-image with a gradient clipped on the border-box,
+ // so setting a transparent border would reveal it.
+
+ $_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%);
+
+ &:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) {
+ @include button(normal);
+
+ background-image: $button_fill, $_border_bg;
+ border-color: transparent;
+ }
+
+ &:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) {
+ @include button(hover);
+
+ background-image: $button_fill, $_border_bg;
+ border-color: transparent;
+ }
+
+ background-origin: padding-box, border-box;
+ background-clip: padding-box, border-box;
+ }
+}
+
+%needs_attention {
+ animation: needs_attention 150ms ease-in;
+ $_dot_shadow: _text_shadow_color();
+ $_dot_shadow_r: if($variant=='light',0.5,0.45);
+ background-image: -gtk-gradient(radial,
+ center center, 0,
+ center center, 0.5,
+ to($_dot_color),
+ to(transparent)),
+ -gtk-gradient(radial,
+ center center, 0,
+ center center, $_dot_shadow_r,
+ to($_dot_shadow),
+ to(transparent));
+ 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; }
+ }
+}
+
+
+// all the following is for the +|- buttons on inline toolbars, that way
+// should really be deprecated...
+.inline-toolbar toolbutton > button { // redefining the button look is
+ // needed since those are flat...
+ @include button(normal);
+
+ &:hover { @include button(hover); }
+
+ &:active,
+ &:checked{ @include button(active); }
+
+ &:disabled {
+ @include button(insensitive);
+
+ &:active,
+ &:checked { @include button(insensitive-active); }
+ }
+
+ &:backdrop {
+ @include button(backdrop);
+
+ &:active,
+ &:checked { @include button(backdrop-active); }
+
+ &:disabled {
+ @include button(backdrop-insensitive);
+
+ &:active,
+ &:checked { @include button(backdrop-insensitive-active); }
+ }
+ }
+}
+
+// More inline toolbar buttons
+toolbar.inline-toolbar toolbutton {
+ > button.flat { @extend %linked_middle; }
+
+ &:first-child > button.flat { @extend %linked_left; }
+
+ &:last-child > button.flat { @extend %linked_right; }
+
+ &:only-child > button.flat { @extend %linked_only_child; }
+}
+
+%linked_middle {
+ border-right-style: none;
+ border-radius: 0;
+ -gtk-outline-radius: 0;
+}
+
+%linked_left {
+ border-top-left-radius: $button_radius;
+ border-bottom-left-radius: $button_radius;
+ -gtk-outline-top-left-radius: $button_radius;
+ -gtk-outline-bottom-left-radius: $button_radius;
+}
+
+%linked_right {
+ border-right-style: solid;
+ border-top-right-radius: $button_radius;
+ border-bottom-right-radius: $button_radius;
+ -gtk-outline-top-right-radius: $button_radius;
+ -gtk-outline-bottom-right-radius: $button_radius;
+}
+
+%linked_only_child {
+ border-style: solid;
+ border-radius: $button_radius;
+ -gtk-outline-radius: $button_radius;
+}
+
+// .linked assumes Box, which reverses nodes in RTL, so 1st child is always left
+%linked {
+ @extend %linked_middle;
+
+ &:first-child { @extend %linked_left; }
+ &:last-child { @extend %linked_right; }
+
+ &:only-child { @extend %linked_only_child; }
+}
+
+// Other widgets use widget child order, so 1st/last child are at text start/end
+%linked_flippable {
+ @extend %linked_middle;
+
+ &:dir(ltr) {
+ &:first-child { @extend %linked_left; }
+ &:last-child { @extend %linked_right; }
+ }
+
+ &:dir(rtl) {
+ &:first-child { @extend %linked_right; }
+ &:last-child { @extend %linked_left; }
+ }
+
+ &:only-child { @extend %linked_only_child; }
+}
+
+%linked_vertical_middle {
+ border-style: solid solid none solid;
+ border-radius: 0;
+ -gtk-outline-radius: 0;
+}
+
+%linked_vertical_top {
+ border-top-left-radius: $button_radius;
+ border-top-right-radius: $button_radius;
+ -gtk-outline-top-left-radius: $button_radius;
+ -gtk-outline-top-right-radius: $button_radius;
+}
+
+%linked_vertical_bottom {
+ border-bottom-style: solid;
+ border-bottom-left-radius: $button_radius;
+ border-bottom-right-radius: $button_radius;
+ -gtk-outline-bottom-left-radius: $button_radius;
+ -gtk-outline-bottom-right-radius: $button_radius;
+}
+
+%linked_vertical_only_child {
+ border-style: solid;
+ border-radius: $button_radius;
+ -gtk-outline-radius: $button_radius;
+}
+
+%linked_vertical {
+ @extend %linked_vertical_middle;
+
+ &:first-child { @extend %linked_vertical_top; }
+
+ &:last-child { @extend %linked_vertical_bottom; }
+
+ &:only-child { @extend %linked_vertical_only_child; }
+}
+
+%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;
+}
+
+/* menu buttons */
+modelbutton.flat,
+.menuitem.button.flat {
+ min-height: 26px;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: $model_button_radius;
+ outline-offset: -2px;
+
+ @extend %undecorated_button;
+
+ &:hover {box-shadow: inset 0px 1px $menubar_menuitem_hover_border_color, inset 0px -1px $menubar_menuitem_hover_border_color;
+ border-style:solid;
+ 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 );
+ background-color: $selected_bg_color;
+ color: $selected_fg_color; }
+
+ &:selected { @extend %selected_items; }
+
+ &:backdrop,
+ &:backdrop:hover { @extend %undecorated_button; }
+}
+
+modelbutton.flat arrow {
+ background: none;
+
+ &:hover { background: none; }
+
+ &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
+
+ &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
+}
+
+button.color {
+ padding: 4px;
+
+ colorswatch:only-child {
+ &, overlay { border-radius: 0; }
+
+ @if $variant == 'light' {
+ box-shadow: 0 1px _text_shadow_color();
+
+ .osd & { box-shadow: none; }
+ }
+ }
+
+ @if $variant == 'light' {
+ .osd &, & {
+ &:disabled,
+ &:backdrop,
+ &:active,
+ &:checked { colorswatch:only-child { box-shadow: none; }}
+ }
+ }
+}
+
+/* list buttons */
+/* tone down as per new designs, see issue #1473, #1748 */
+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;
+
+ &: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, &:disabled:backdrop { color: transparentize(desaturate($link_color, 100%), 0.2); }
+
+ &:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { color: transparentize($link_color, 0.1); }}
+
+ @at-root %link_selected,
+ &:selected,
+ *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
+}
+
+button:link,
+button:visited {
+ @extend %undecorated_button;
+
+ @extend %link;
+
+ text-shadow: none;
+
+ &:hover,
+ &:active,
+ &:checked {
+ @extend %undecorated_button;
+
+ text-shadow: none;
+ }
+
+ > label {
+ @extend %link;
+
+ text-decoration-line: 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;
+
+ %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;
+
+ &:backdrop:disabled { background-color: transparent; }
+ }
+
+ entry {
+ @extend %spinbutton_horz_entry;
+ }
+
+ button {
+ 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: $base_hover_color;
+ }
+
+ &: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);
+ }
+
+ &:backdrop {
+ color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
+ background-color: transparent;
+ border-color: transparentize($backdrop_borders_color, 0.7);
+ transition: $backdrop_transition;
+ }
+
+ &:backdrop:disabled {
+ color: transparentize($backdrop_insensitive_color,0.7);
+ background-color: transparent;
+ background-image: none;
+ border-style: none none none solid; // It is needed or it gets overridden
+
+ &:dir(rtl) { border-style: none solid none 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; }
+ }
+ }
+
+ // OSD horizontal
+ .osd &:not(.vertical) {
+ entry {
+ @extend %spinbutton_horz_entry;
+ }
+
+ button {
+ @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: transparentize($osd_fg_color, 0.9);
+ -gtk-icon-shadow: 0 1px black;
+ box-shadow: none;
+ }
+
+ &:backdrop {
+ @include button(undecorated);
+
+ color: $osd_fg_color;
+ border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+ -gtk-icon-shadow: none;
+ 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; }
+
+ &:backdrop:disabled { color: $backdrop_insensitive_color; }
+
+ &:drop(active) {
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ entry {
+ min-height: 32px;
+ min-width: 32px;
+ padding: 0;
+ border-radius: 0;
+ }
+
+ button {
+ min-height: 32px;
+ min-width: 32px;
+ padding: 0;
+
+ &.up { @extend %top_button; }
+
+ &.down { @extend %bottom_button; }
+ }
+
+ %top_button {
+ border-radius: $button_radius $button_radius 0 0;
+ border-style: solid solid none solid;
+ }
+
+ %bottom_button {
+ border-radius: 0 0 $button_radius $button_radius;
+ border-style: none solid solid solid;
+ }
+ }
+
+ // 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); }
+
+ &:backdrop { @include button(osd-backdrop); }
+ }
+
+ // Misc
+ treeview &:not(.vertical) {
+ min-height: 0;
+ border-style: none;
+ border-radius: 0;
+
+ entry {
+ min-height: 0;
+ padding: 1px 2px;
+ }
+ }
+ font-feature-settings: "tnum";
+}
+
+
+/**************
+ * ComboBoxes *
+ **************/
+combobox {
+ arrow {
+ -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+ min-height: 16px;
+ min-width: 16px;
+ }
+
+ &.linked {
+ button:nth-child(2) {
+ &:dir(ltr) { @extend %linked_right; }
+ &:dir(rtl) { @extend %linked_left; }
+ }
+ }
+
+ &:drop(active) { // FIXME: untested
+ box-shadow: none;
+
+ button.combo { @extend %button_basic_drop_active; }
+ }
+}
+
+// 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) > combobox > box > button.combo { @extend %linked_middle; }
+.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked_left; }
+.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked_right; }
+.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked_only_child; }
+
+.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
+.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical_top; }
+.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical_bottom; }
+.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical_only_child; }
+
+
+/************
+ * Toolbars *
+ ************/
+%toolbar {
+ -GtkWidget-window-dragging: true;
+ padding: 4px;
+ background-color: $bg_color;
+}
+
+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: $menu_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: 0 7px 1px 6px; }
+ &.vertical separator { margin: 6px 1px 7px 0; }
+
+ &:not(.inline-toolbar):not(.osd) {
+ // workaround: add margins to the children of tool items to simulate
+ // spacing, ignore the overflow button (.toggle) and the overflow menu
+ // (.popup)
+ > *:not(.toggle):not(.popup) > * {
+ margin-right: 1px;
+ margin-bottom: 1px;
+ }
+ }
+}
+
+//searchbar, location-bar & inline-toolbar
+.inline-toolbar {
+ @extend %toolbar;
+
+ @extend %darkbar;
+
+ padding: 3px;
+ border-width: 0 1px 1px;
+ border-radius: 0 0 5px 5px;
+}
+
+searchbar > revealer > box,
+.location-bar {
+ @extend %toolbar;
+
+ @extend %darkbar;
+
+ border-width: 0 0 1px;
+ padding: 3px;
+}
+
+searchbar > revealer > box {
+ // workaround: undo the GtkContainer:border-width and use CSS padding instead
+ margin: -6px;
+ padding: 6px;
+}
+
+%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;
+ }
+}
+
+
+/***************
+ * Header bars *
+ ***************/
+%titlebar,
+headerbar {
+ padding: 0 2px;
+ min-height: $_headerbar_height;
+ border-width: 0 0 1px;
+ border-style: solid;
+ border-color: $alt_borders_color;
+ border-radius: 0;
+ color: $fg_color;
+
+ @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 change: with our button styling we do not want a stronger bottom border
+ // border-top-color: darken($borders_color, 8%);
+
+ }
+
+ .selection-mode &,
+ &.selection-mode {
+ $_hc: mix($top_hilight, $suggested_bg_color, 50%); // hilight color
+
+ color: $selected_fg_color;
+ border-color: $suggested_border_color;
+ text-shadow: 0 -1px transparentize(black, 0.5);
+
+ @include headerbar_fill($suggested_bg_color, $_hc);
+
+ &:backdrop {
+ background-color: $suggested_bg_color;
+ background-image: none;
+ box-shadow: inset 0 1px mix($top_hilight, $suggested_bg_color, 60%);
+
+ label {
+ text-shadow: none;
+ color: $selected_fg_color;
+ }
+ }
+
+ .subtitle:link { @extend %link_selected; }
+
+ button {
+ @include button(normal, $suggested_bg_color, $fg_color);
+ min-height: 10px;
+ @at-root %selection_mode_button_flat,
+ &.flat { @include button(undecorated); }
+
+ &:hover { @include button(hover, $suggested_bg_color, $fg_color); }
+
+ &:active,
+ &:checked,
+ &.toggle:checked,
+ &.toggle:active { @include button(active, $suggested_bg_color, $fg_color); }
+
+ &:backdrop {
+ &.flat, & {
+ @include button(backdrop, $suggested_bg_color, $fg_color);
+
+ -gtk-icon-effect: none;
+ border-color: $suggested_border_color;
+
+ &:active,
+ &:checked {
+ @include button(backdrop-active, $suggested_bg_color, $fg_color);
+
+ border-color: $suggested_border_color;
+ }
+
+ &:disabled {
+ @include button(backdrop-insensitive, $suggested_bg_color, $fg_color);
+
+ border-color: $suggested_border_color;
+
+ &:active, &:checked {
+ @include button(backdrop-insensitive-active, $suggested_bg_color, $fg_color);
+
+ border-color: $suggested_border_color;
+ }
+ }
+ }
+ }
+
+ @at-root %selection_mode_button_flat,
+ &.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
+
+ &:disabled {
+ @include button(insensitive, $suggested_bg_color, $fg_color);
+
+ &:active,
+ &:checked { @include button(insensitive-active, $suggested_bg_color, $fg_color); }
+ }
+
+ &.suggested-action {
+ @include button(normal);
+
+ border-color: $suggested_border_color;
+
+ &:hover {
+ @include button(hover);
+
+ border-color: $suggested_border_color;
+ }
+
+ &:active {
+ @include button(active);
+
+ border-color: $suggested_border_color;
+ }
+
+ &:disabled {
+ @include button(insensitive);
+
+ border-color: $suggested_border_color;
+ }
+
+ &:backdrop {
+ @include button(backdrop);
+
+ border-color: $suggested_border_color;
+ }
+
+ &:backdrop:disabled {
+ @include button(backdrop-insensitive);
+
+ border-color: $suggested_border_color;
+ }
+ }
+ }
+
+ .selection-menu {
+ &:backdrop, & {
+ border-color: transparentize($suggested_bg_color, 1);
+ background-color: transparentize($suggested_bg_color, 1);
+ background-image: none;
+ box-shadow: none;
+ min-height: 20px;
+ padding: $_sel_menu_pad;
+
+ arrow { -GtkArrow-arrow-scaling: 1; }
+
+ .arrow {
+ -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+ color: transparentize($selected_fg_color,0.5);
+ -gtk-icon-shadow: none;
+ }
+ }
+ }
+ }
+
+ // squared corners when the window is maximized, tiled, or fullscreen
+ .tiled &,
+ .tiled-top &,
+ .tiled-right &,
+ .tiled-bottom &,
+ .tiled-left &,
+ .maximized &,
+ .fullscreen & {
+ &:backdrop, & {
+ border-radius: 0;
+ }
+ }
+
+ &.default-decoration {
+ min-height: 28px;
+ padding: 4px;
+
+ button.titlebutton {
+ min-height: 26px;
+ min-width: 26px;
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+
+
+ separator.titlebutton { opacity: 0; } /* hide the close button separator */
+
+ .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 {
+ color: $fg_color;
+ // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
+ entry,
+ spinbutton,
+ separator:not(.sidebar),
+ button {
+ margin-top: $_hb_btn_pad;
+ margin-bottom: $_hb_btn_pad;
+ }
+ switch {
+ margin-top: $_switch_margin;
+ margin-bottom: $_switch_margin;
+ }
+
+ &.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;
+ }
+}
+
+.background .titlebar {
+ &:backdrop, & {
+ border-top-left-radius: $window_radius;
+ border-top-right-radius: $window_radius;
+ }
+}
+
+.background.tiled .titlebar,
+.background.tiled-top .titlebar,
+.background.tiled-right .titlebar,
+.background.tiled-bottom .titlebar,
+.background.tiled-left .titlebar,
+.background.maximized .titlebar,
+.background.solid-csd .titlebar {
+ &:backdrop, & {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+}
+
+headerbar { // headerbar border rounding
+
+ window separator:first-child + &,
+ window &:first-child { &:backdrop, & { border-top-left-radius: 7px; }}
+ window &:last-child { &:backdrop, & { border-top-right-radius: 7px; }}
+
+ window stack & { // tackles the stacked headerbars case
+ &:first-child, &:last-child {
+ &:backdrop, & {
+ border-top-left-radius: 7px;
+ border-top-right-radius: 7px;
+ }
+ }
+ }
+
+ window.tiled &,
+ window.tiled-top &,
+ window.tiled-right &,
+ window.tiled-bottom &,
+ window.tiled-left &,
+ window.maximized &,
+ window.fullscreen &,
+ window.solid-csd & {
+ &, &:backdrop {
+ &,
+ &:first-child,
+ &:last-child,
+ &:only-child {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ }
+ }
+}
+
+.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:not(.selection-mode) {
+ $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 *
+ ************/
+
+// GtkPathBar does not work with just .linked, so we must override that. But we
+// can’t simply remove .linked from the widget as that might break other themes.
+// Note also we select on filechooser to avoid interfering with NautilusPathBar.
+filechooser .path-bar.linked > button {
+ @extend %linked_flippable;
+}
+
+.path-bar 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.view {
+ @at-root * {
+ -GtkTreeView-horizontal-separator: 4;
+ -GtkTreeView-grid-line-width: 1;
+ -GtkTreeView-grid-line-pattern: '';
+ -GtkTreeView-tree-line-width: 1;
+ -GtkTreeView-tree-line-pattern: '';
+ -GtkTreeView-expander-size: 16;
+ }
+
+ border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
+ border-top-color: $bg_color; // while this is the grid lines color, better then nothing
+
+ rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
+
+ &:selected {
+ &:focus, & {
+ border-radius: 0;
+ color: $selected_fg_color;
+ @extend %selected_items;
+ }
+
+ &:backdrop, & {
+ border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
+ border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
+ }
+ }
+
+ &: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%); }
+ }
+
+ &:backdrop { color: $backdrop_insensitive_color; }
+ }
+
+ &.separator {
+ min-height: 2px;
+ color: $bg_color;
+
+ &:backdrop { color: transparentize($bg_color, 0.9); }
+ }
+
+ &:backdrop {
+ border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
+ border-top: $backdrop_bg_color;
+ }
+ &: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 {
+ -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; }
+
+ &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); }
+ }
+
+ &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+ &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
+ }
+
+ &.progressbar { // progress bar in treeviews
+ @if $variant == light { color: $base_color; }
+
+ background-color: $progress_bg_color;
+ background-image: image($progress_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;
+ }
+ }
+ }
+
+ &:backdrop {
+ @if $variant == 'light' { color: $backdrop_base_color; }
+
+ @else { border-color: $backdrop_base_color; }
+ background-image: none;
+ box-shadow: none;
+ }
+ }
+
+ &.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, 70%);
+
+ @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 {
+ $column_header_button_gradient_a: gtkshade($core_color_b, 1.05);
+$column_header_button_gradient_b: gtkshade($core_color_b, 1.02);
+$column_header_button_gradient_c: $core_color_b;
+$column_header_button_gradient_d: gtkshade($core_color_b, 0.96);
+
+ padding: 0 6px;
+ background-image: linear-gradient(to bottom,
+ $column_header_button_gradient_a ,
+ $column_header_button_gradient_b 50%,
+ $column_header_button_gradient_c 50%,
+ $column_header_button_gradient_d);
+ border-style: none solid solid none;
+ border-color: $borders_color;
+ border-radius: 0;
+ text-shadow: none;
+ background-color: $column_header_button_gradient_a;
+
+ &:disabled {
+ border-color: $bg_color;
+ background-image: none;
+ }
+
+ &:backdrop {
+ color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
+ border-color: $backdrop_bg_color;
+ border-style: none solid solid none;
+ background-image: none;
+ background-color: $backdrop_base_color;
+
+ &:disabled {
+ border-color: $backdrop_bg_color;
+ background-image: none;
+ }
+ }
+
+ &:last-child { &:backdrop, & { border-right-style: none; }}
+}
+
+
+
+/*********
+ * Menus *
+ *********/
+menubar,
+.menubar {
+ -GtkWidget-window-dragging: true;
+ padding: 0px;
+ box-shadow: inset 0 -1px transparentize(black, 0.9);
+ background-image: linear-gradient(to bottom,
+ $menubar_gradient_a,
+ $menubar_gradient_b 50%,
+ $menubar_gradient_c);
+
+
+ &:backdrop { background-color: $backdrop_bg_color; }
+
+ > menuitem {
+ min-height: 16px;
+ padding: 4px 8px;
+ border-width: 1px 1px 0px;
+ border-color: transparent;
+ border-style:solid;
+
+ // remove padding and rounding from menubar submenus
+ menu {
+ &:dir(rtl), &:dir(ltr) { // specificity bump
+ border-radius: 0;
+ padding: 0;
+ }
+ }
+
+ &:hover { //Seems like it :hover even with keyboard focus
+ border-width: 1px 1px 0px;
+ border-color: $menubar_menuitem_hover_border_color;
+ border-style:solid;
+ color: $link_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 );
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ box-shadow: none;
+ }
+ }
+
+ // remove padding and rounding from menubar submenu decoration
+ .csd.popup decoration {border-radius:0;}
+}
+
+// Needed to make the border-radius of menus work
+// otherwise the background bleeds out of the menu edges
+.background.popup { background-color: transparent; }
+
+menu,
+.menu,
+.context-menu {
+ margin: 4px; // see https://bugzilla.gnome.org/show_bug.cgi?id=591258
+ padding: 4px 0px;
+ background-color: $menu_color;
+ border: 1px solid $borders_color; // adds borders in a non composited env
+
+ .csd & {
+ border: none; // axes borders in a composited env
+ border-radius: $menu_radius;
+ }
+
+ &:backdrop { background-color: $backdrop_menu_color; }
+
+ menuitem {
+ min-height: 16px;
+ min-width: 40px;
+ padding: 4px 6px;
+ text-shadow: none;
+
+ &:hover {
+ color: $selected_fg_color;
+ background-color: $selected_bg_color;
+ box-shadow: inset 0px 1px $menubar_menuitem_hover_border_color, inset 0px -1px $menubar_menuitem_hover_border_color;
+ border-style:solid;
+ 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 );
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ &:backdrop { color: $backdrop_insensitive_color; }
+ }
+
+ &:backdrop,
+ &:backdrop:hover {
+ color: $backdrop_fg_color;
+ background-color: transparent;
+ }
+
+ // submenu indicators
+ arrow {
+ min-height: 16px;
+ min-width: 16px;
+
+ &:dir(ltr) {
+ -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+ margin-left: 10px;
+ }
+
+ &:dir(rtl) {
+ -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
+ margin-right: 10px;
+ }
+ }
+
+ // avoids labels color being overridden, see
+ // https://bugzilla.gnome.org/show_bug.cgi?id=767058
+ label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
+ }
+
+ // overflow arrows
+ > arrow {
+ @include button(undecorated);
+
+ min-height: 16px;
+ min-width: 16px;
+ padding: 4px;
+ background-color: $menu_color;
+ border-radius: 0;
+
+ &.top {
+ margin-top: -4px;
+ border-bottom: 1px solid mix($fg_color, $base_color, 10%);
+ border-top-right-radius: $menu_radius;
+ border-top-left-radius: $menu_radius;
+ -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+ }
+
+ &.bottom {
+ margin-top: 8px;
+ margin-bottom: -12px;
+ border-top: 1px solid mix($fg_color, $base_color, 10%);
+ border-bottom-right-radius: $menu_radius;
+ border-bottom-left-radius: $menu_radius;
+ -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+ }
+
+ &:hover { background-color: mix($fg_color, $base_color, 10%); }
+
+ &:backdrop { background-color: $backdrop_menu_color; }
+
+ &:disabled {
+ color: transparent;
+ background-color: transparent;
+ border-color: transparent ;
+ }
+ }
+}
+
+menuitem {
+ accelerator { color: gtkalpha(currentColor,0.55); }
+
+ check,
+ radio {
+ min-height: 16px;
+ min-width: 16px;
+
+ &:dir(ltr) { margin-right: 7px; }
+ &:dir(rtl) { margin-left: 7px; }
+ }
+}
+
+/***************
+ * Popovers *
+ ***************/
+
+popover.background {
+ padding: 2px;
+ background-color: $popover_bg_color;
+
+ .csd &, & {
+ border: 1px solid $borders_color;
+ border-radius: $popover_radius;
+ }
+
+ .csd & {
+ $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
+
+ background-clip: padding-box;
+ border-color: $borders_color;
+ }
+
+ box-shadow: 0 1px 2px transparentize(black, 0.7);
+
+ &:backdrop {
+ background-color: $backdrop_bg_color;
+ box-shadow: none;
+ }
+
+ > list,
+ > .view,
+ > toolbar {
+ border-style: none;
+ background-color: transparent;
+ }
+
+ .csd &, & {
+ &.touch-selection,
+ &.magnifier {
+ @extend %osd;
+
+ border: 1px solid transparentize(white, 0.9);
+
+ button { @extend %osd_button };
+ }
+
+ &.osd { @extend %osd; }
+ }
+
+ separator { margin: 3px; }
+
+ list separator { margin: 0px; }
+}
+
+/*************
+ * Notebooks *
+ *************/
+notebook {
+ > header.top {padding-top: 1px; box-shadow: 0px -1px $bg_color, 0px -2px $bg_color, 1px 0px $bg_color, -1px 0px $bg_color; border-top-color: $bg_color; }
+ > header.bottom {padding-bottom: 2px; box-shadow: 0px 1px $bg_color, 0px 2px $bg_color, 1px 0px $bg_color, -1px 0px $bg_color; border-bottom-color: $bg_color; }
+ > header.left {padding-left: 3px; box-shadow: 0px 1px $bg_color, 0px -1px $bg_color, 1px 0px $bg_color, -1px 0px $bg_color; border-left-color: $bg_color;}
+ > header.right {padding-right: 3px; box-shadow: 0px 1px $bg_color, 0px -1px $bg_color, 1px 0px $bg_color, -1px 0px $bg_color; border-right-color: $bg_color; }
+
+
+ > header {
+ padding: 1px;
+ border-color: $borders_color;
+ border-width: 1px;
+ background-color: $dark_fill;
+
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_dark_fill;
+ }
+
+ tabs { margin: -1px; }
+
+ &.top {
+ border-bottom-style: solid;
+ > tabs {
+ margin-bottom: -2px; margin-top: 2px;
+ > tab {
+ background-image: linear-gradient(to bottom, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+ box-shadow: 0px -1px $borders_color, 1px 0px $borders_color, -1px 0px $borders_color, inset 0px -1px $borders_color;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ &:hover { } // Yaru change: 4px underlines are too much
+
+ &:backdrop { }
+
+ &:checked { background-image: linear-gradient(to bottom,
+ gtkshade($core_color_a, 0.7),
+ $core_color_a 3px,
+ desaturate(darken($core_color_a, 30%), 15%) 5px,
+ lighten($notebook_base_color, 4%) 5px,
+ $notebook_base_color);
+ box-shadow: 0px -1px desaturate(darken($core_color_a, 30%), 15%), 1px 0px $borders_color, -1px 0px $borders_color; } // Yaru change: 4px underlines are too much
+ }
+ }
+ }
+
+ &.bottom {
+ border-top-style: solid;
+ > tabs {
+ margin-top: -2px; margin-bottom: 2px;
+ > tab {
+ background-image: linear-gradient(to top, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+ box-shadow: 0px 1px $borders_color , 1px 0px $borders_color, -1px 0px $borders_color, inset 0px 1px $borders_color;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ &:hover { } // Yaru change: 4px underlines are too much
+
+ &:backdrop { }
+
+ &:checked { background-image: linear-gradient(to top,
+ gtkshade($core_color_a, 0.7),
+ $core_color_a 3px,
+ desaturate(darken($core_color_a, 30%), 15%) 5px,
+ lighten($notebook_base_color, 4%) 5px,
+ $notebook_base_color);
+ box-shadow: 0px 1px desaturate(darken($core_color_a, 30%), 15%) , 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 {
+ background-image: linear-gradient(to right, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+ box-shadow: 0px 1px $borders_color , 0px -1px $borders_color, -1px 0px $borders_color, inset -1px 0px $borders_color;
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+
+ &:hover { } // Yaru change: 4px underlines are too much
+
+ &:backdrop { }
+
+ &:checked { background-image: linear-gradient(to right,
+ gtkshade($core_color_a, 0.7),
+ $core_color_a 3px,
+ desaturate(darken($core_color_a, 30%), 15%) 5px,
+ lighten($notebook_base_color, 4%) 5px,
+ $notebook_base_color);
+ box-shadow: -1px 0px desaturate(darken($core_color_a, 30%), 15%) , 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 {
+ background-image: linear-gradient(to left, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+ box-shadow: 0px 1px $borders_color , 0px -1px $borders_color, 1px 0px $borders_color, inset 1px 0px $borders_color;
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ &:hover { } // Yaru change: 4px underlines are too much
+
+ &:backdrop { }
+
+ &:checked { background-image: linear-gradient(to left,
+ gtkshade($core_color_a, 0.7),
+ $core_color_a 3px,
+ desaturate(darken($core_color_a, 30%), 15%) 5px,
+ lighten($notebook_base_color, 4%) 5px,
+ $notebook_base_color);
+ box-shadow:1px 0px desaturate(darken($core_color_a, 30%), 15%), 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); }
+ }
+
+ tab {
+ min-height: 22px;
+ min-width: 22px;
+ padding: 3px 12px;
+
+ outline-offset: -5px;
+
+ color: $fg_color;
+ font-weight: normal;
+
+ border-width: 0px; // for reorderable tabs
+ border-color: transparent; //
+
+ &:hover {
+ color: $fg_color;
+ background-color: darken($bg_color,4%);
+
+ &.reorderable-page {
+ border-color: transparentize($borders_color, 0.7);
+ background-color: transparentize($bg_color, 0.8);
+ }
+ }
+
+ &:backdrop {
+ color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
+
+ &.reorderable-page {
+ border-color: transparent;
+ background-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); }
+ }
+ }
+
+ &:backdrop:checked {
+ color: $backdrop_fg_color;
+
+ &.reorderable-page {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_bg_color;
+ }
+ }
+
+ // colors the button like the label, overridden otherwise
+ button.flat {
+ &:hover { color: currentColor; }
+
+ &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
+
+ 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: 0px;
+ padding-right: 0px;
+
+ &:not(:only-child) {
+ margin-left: 1px;
+ margin-right: 1px;
+
+ &:first-child { margin-left: 0px; }
+ &:last-child { margin-right: -1px; }
+ }
+
+ tab {
+ margin-left: 0px;
+ margin-right: 0px;
+
+ &.reorderable-page { border-style: none solid; }
+ }
+ }
+ }
+
+ &.left,
+ &.right {
+ tabs {
+ padding-top: 0px;
+ padding-bottom: 0px;
+
+ &:not(:only-child) {
+ margin-top: 0px;
+ margin-bottom: 0px;
+
+ &:first-child { margin-top: 0px; }
+ &:last-child { margin-bottom: -1px; }
+ }
+
+ tab {
+ margin-top: 0px;
+ margin-bottom: 0px;
+
+ &.reorderable-page { border-style: solid none; }
+ }
+ }
+ }
+
+ &.top tab { padding-bottom: 4px; }
+ &.bottom tab { padding-top: 4px; }
+ }
+
+ > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
+ background-color: $notebook_base_color;
+
+ &:backdrop { background-color: $notebook_base_color; }
+ }
+}
+
+
+/**************
+ * Scrollbars *
+ **************/
+$scrollbar_trough_gradient_a: gtkshade($core_color_b, 0.86);
+$scrollbar_trough_gradient_b: gtkshade($core_color_b, 0.90);
+
+$scrollbar_slider_bg_color: gtkshade($core_color_a, 0.99);
+$scrollbar_slider_gradient_a: $scrollbar_slider_bg_color;
+$scrollbar_slider_gradient_b: gtkshade($core_color_a, 0.96);
+$scrollbar_slider_gradient_c: gtkshade($core_color_a, 0.92);
+$scrollbar_slider_gradient_d: gtkshade($core_color_a, 0.88);
+$scrollbar_slider_inner_border_color: gtkshade($core_color_a, 1.04);
+
+$scrollbar_slider_hover_bg_color: gtkshade($core_color_a, 1.03);
+$scrollbar_slider_hover_gradient_a: $scrollbar_slider_hover_bg_color;
+$scrollbar_slider_hover_gradient_b: gtkshade($core_color_a, 0.99);
+$scrollbar_slider_hover_gradient_c: gtkshade($core_color_a, 0.96);
+$scrollbar_slider_hover_gradient_d: gtkshade($core_color_a, 0.91);
+
+scrollbar {
+ $_slider_min_length: 40px;
+
+ // disable steppers
+ @at-root * {
+ -GtkScrollbar-has-backward-stepper: true;
+ -GtkScrollbar-has-forward-stepper: true;
+ }
+
+ 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; }
+
+ &:backdrop {
+ background-color: $backdrop_scrollbar_bg_color;
+ border-color: $backdrop_borders_color;
+ transition: $backdrop_transition;
+ }
+
+ &.horizontal trough {
+ min-height: 14px;
+ border-radius: 0px;
+ border-width: 0px 1px 0px 1px;
+ border-image: none;
+ background-image: linear-gradient(to bottom,
+ $scrollbar_trough_gradient_a,
+ $scrollbar_trough_gradient_b 50%);
+}
+
+ &.vertical trough {
+ min-height: 14px;
+ border-radius: 0px;
+ border-width: 0px 1px 0px 1px;
+ border-image: none;
+ background-image: linear-gradient(to right,
+ $scrollbar_trough_gradient_a,
+ $scrollbar_trough_gradient_b 50% );
+}
+
+ &.horizontal slider {
+ background-position: center center;
+ background-image: url("assets/slider-horz-grip.png"), linear-gradient(to bottom,
+ transparentize($scrollbar_slider_gradient_a, 0.01) 1px,
+ transparentize($scrollbar_slider_gradient_b, 0.01) 50%,
+ transparentize($scrollbar_slider_gradient_c, 0.01) 50%,
+ transparentize($scrollbar_slider_gradient_d, 0.01) 95%);
+ }
+
+ &.vertical slider {
+ background-position: center center;
+ background-image: url("assets/slider-vert-grip.png"), linear-gradient(to right,
+ transparentize($scrollbar_slider_gradient_a, 0.01) 1px,
+ transparentize($scrollbar_slider_gradient_b, 0.01) 50%,
+ transparentize($scrollbar_slider_gradient_c, 0.01) 50%,
+ transparentize($scrollbar_slider_gradient_d, 0.01) 95%);
+ }
+
+ &.vertical slider:hover {
+ background-position: center center;
+ background-image: url("assets/slider-vert-grip.png"), linear-gradient(to right,
+ $scrollbar_slider_inner_border_color,
+ $scrollbar_slider_hover_gradient_a 1px,
+ $scrollbar_slider_hover_gradient_b 50%,
+ $scrollbar_slider_hover_gradient_c 50%,
+ $scrollbar_slider_hover_gradient_d 95%,
+ $scrollbar_slider_inner_border_color);
+}
+
+ &.horizontal slider:hover {
+ background-position: center center;
+ background-image: url("assets/slider-horz-grip.png"), linear-gradient(to bottom,
+ $scrollbar_slider_inner_border_color,
+ $scrollbar_slider_hover_gradient_a 1px,
+ $scrollbar_slider_hover_gradient_b 50%,
+ $scrollbar_slider_hover_gradient_c 50%,
+ $scrollbar_slider_hover_gradient_d 95%,
+ $scrollbar_slider_inner_border_color);
+}
+
+ // slider
+ slider {
+ background-repeat: no-repeat;
+ background-position: center center;
+ min-width: 14px;
+ min-height: 14px;
+ border: 1px solid darken($core_color_a , 35%);
+ border-radius: 0px;
+ // background-clip: padding-box;
+ // background-color: $scrollbar_slider_color;
+
+ &:hover { background-color: $scrollbar_slider_hover_color; }
+
+ &:hover:active { background-color: $scrollbar_slider_active_color; }
+
+ &:backdrop { background-color: $backdrop_scrollbar_slider_color; }
+
+ &:disabled { background-color: transparent; }
+ }
+
+ &.fine-tune {
+ slider {
+ min-width: 4px;
+ min-height: 4px;
+ }
+
+ &.horizontal slider { border-width: 5px 4px; }
+ &.vertical slider { border-width: 4px 5px; }
+ }
+
+ &.overlay-indicator {
+ &:not(.dragging):not(.hovering) {
+ border-color: transparent;
+ opacity: 0.4;
+ background-color: transparent;
+
+ slider {
+ margin: 0;
+ min-width: 3px;
+ min-height: 3px;
+ background-color: $fg_color;
+ border: 1px solid if($variant == 'light', white, black);
+ }
+
+ button {
+ min-width: 5px;
+ min-height: 5px;
+ background-color: $fg_color;
+ background-clip: padding-box;
+ border-radius: 100%;
+ border: 1px solid if($variant == 'light', white, black);
+ -gtk-icon-source: none;
+ }
+
+ &.horizontal {
+ slider {
+ margin: 0 0px;
+ min-width: $_slider_min_length;
+ }
+
+ button {
+ margin: 1px 2px;
+ min-width: 5px;
+ }
+ }
+
+ &.vertical {
+ slider {
+ margin: 0px 0;
+ min-height: $_slider_min_length;
+ }
+
+ button {
+ margin: 2px 1px;
+ min-height: 5px;
+ }
+ }
+ }
+
+ &.dragging,
+ &.hovering { opacity: 0.8; }
+ }
+
+ &.horizontal slider { min-width: $_slider_min_length; }
+
+ &.vertical slider { min-height: $_slider_min_length; }
+
+ // button styling
+ button {
+ padding: 0;
+ min-width: 13px;
+ min-height: 13px;
+ border-style: none;
+ border-radius: 0;
+ transition-property: min-height, min-width, color;
+
+ @include button(undecorated);
+
+ color: $scrollbar_slider_color;
+
+ &:hover {
+ @include button(undecorated);
+
+ color: $scrollbar_slider_hover_color;
+ }
+ &:active, &:checked {
+ @include button(undecorated);
+
+ color: $scrollbar_slider_active_color;
+ }
+ &:disabled {
+ @include button(undecorated);
+
+ color: transparentize($scrollbar_slider_color, 0.8);
+ }
+ &:backdrop {
+ @include button(undecorated);
+
+ color: $backdrop_scrollbar_slider_color;
+
+ &:disabled {
+ @include button(undecorated);
+
+ color: transparentize($backdrop_scrollbar_slider_color, 0.8);
+ }
+ }
+ }
+
+ // button icons
+ &.vertical {
+ button {
+ &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+ &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+ }
+ }
+
+ &.horizontal {
+ button {
+ &.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+
+ &.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+ }
+ }
+}
+
+treeview ~ scrollbar.vertical {
+ border-top: 1px solid $borders_color;
+ margin-top: -1px;
+}
+
+/**********
+ * Switch *
+ **********/
+switch {
+ outline-offset: -4px;
+
+ // similar to the .scale
+ border: 1px solid $borders_color;
+ border-radius: 14px;
+ color: $fg_color;
+ background-color: $dark_fill;
+ text-shadow: 0 1px transparentize(black, 0.9);
+
+ &:checked {
+ color: $selected_fg_color;
+ border-color: $checkradio_borders_color;
+ background-color: $checkradio_bg_color;
+ text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
+ 0 0 2px transparentize(white, 0.4);
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ border-color: $borders_color;
+ background-color: $insensitive_bg_color;
+ text-shadow: none;
+ }
+
+ &:backdrop {
+ color: $backdrop_fg_color;
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_dark_fill;
+ text-shadow: none;
+ transition: $backdrop_transition;
+
+ &:checked {
+ @if $variant == 'light' { color: $backdrop_bg_color; }
+ border-color: if($variant == 'light', $checkradio_borders_color,
+ $selected_borders_color);
+ background-color: $checkradio_bg_color;
+ }
+
+ &:disabled {
+ color: $backdrop_insensitive_color;
+ border-color: $backdrop_borders_color;
+ background-color: $insensitive_bg_color;
+ }
+ }
+
+ slider {
+ margin: -1px;
+ min-width: 24px;
+ min-height: 24px;
+ border: 1px solid;
+ border-radius: 50%;
+ transition: $button_transition;
+ -gtk-outline-radius: 20px;
+
+ @if $variant == 'light' {
+ @include button(normal-alt, $edge: $shadow_color);
+ }
+ @else {
+ @include button(normal-alt, $c: lighten($bg_color,6%), $edge: $shadow_color);
+ }
+ }
+
+ image { color: transparent; } /* only show i / o for the accessible theme */
+
+ &:hover slider {
+ @if $variant == 'light' {
+ @include button(hover-alt, $edge: $shadow_color);
+ }
+ @else {
+ @include button(hover-alt, $c: lighten($bg_color,6%), $edge: $shadow_color);
+ }
+ }
+
+ &:checked > slider { border: 1px solid $checkradio_borders_color; }
+
+ &:disabled slider { @include button(insensitive); }
+
+ &:backdrop {
+ slider {
+ transition: $backdrop_transition;
+
+ @include button(backdrop);
+ }
+
+ &:checked > slider { border-color: $checkradio_borders_color; }
+
+ &:disabled slider { @include button(backdrop-insensitive); }
+ }
+
+ row:selected & {
+ @if $variant == 'light' {
+ box-shadow: none;
+ border-color: $checkradio_borders_color;
+
+ &:backdrop { border-color: $checkradio_borders_color; }
+
+ > slider { &:checked, & { border-color: $checkradio_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:not(list) check#{$check_state} {
+ 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.text-button, radiobutton.text-button {
+ // this is for a nice focus on check and radios text
+ padding: 2px 0;
+ outline-offset: 0;
+
+ label:not(:only-child) {
+ &:first-child { margin-left: 4px; }
+ &:last-child { margin-right: 4px; }
+ }
+}
+
+check,
+radio {
+ margin: 0 4px;
+
+ &:only-child { margin: 0; }
+
+ popover & { // when in a popover add more space between the label and the check, reset the other side margin.
+ // See https://bugzilla.gnome.org/show_bug.cgi?id=779570 for details.
+ &.left:dir(rtl) {
+ margin-left: 0;
+ margin-right: 12px;
+ }
+
+ &.right:dir(ltr) {
+ margin-left: 12px;
+ margin-right: 0;
+ }
+ }
+
+ 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"),
+ (":backdrop", "backdrop"),
+ (":backdrop:disabled", 'backdrop-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"),
+ (":backdrop", "backdrop"),
+ (":backdrop:disabled", 'backdrop-insensitive') {
+ &#{$state} {
+ @include check($t, $checkradio_bg_color, $fg_color, $checked: true);
+ }
+ }
+ }
+ }
+ }
+
+ &:backdrop { transition: $backdrop_transition; }
+
+
+ @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); }
+ &:backdrop { @include button(osd-backdrop); }
+ &:disabled { @include button(osd-insensitive); }
+ }
+
+ menu menuitem & {
+ margin: 0; // this is a workaround for a menu check/radio size allocation issue
+
+ &, &:checked, &:indeterminate {
+ &, &:hover, &:disabled { //FIXME use button reset mixin
+ min-height: 14px;
+ min-width: 14px;
+ background-image: none;
+ background-color: transparent;
+ box-shadow: none;
+ -gtk-icon-shadow: none;
+ color: inherit;
+ border-color: currentColor;
+ }
+ }
+ }
+}
+
+%check,
+check {
+ border-radius: 1px;
+
+ &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
+ -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
+
+ &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
+ -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+}
+
+%radio,
+radio {
+ border-radius: 100%;
+
+ &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")),
+ -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
+
+ &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
+ -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+}
+
+// ANIMATION:
+// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
+// the transformation is set on the active state and it get reset on the checked state.
+radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); }
+
+check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
+
+radio,
+check {
+ &:active { -gtk-icon-transform: scale(0, 1); border-color: $borders_color; } // should tackle the indeterminate state, untested
+
+ &:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
+ -gtk-icon-transform: unset;
+ transition: 400ms;
+ }
+}
+
+menu menuitem {
+ radio,
+ check {
+ &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { transition: none; }
+ }
+}
+
+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);
+
+ &:disabled { background-color: $insensitive_bg_color; }
+
+ &:backdrop {
+ background-color: $backdrop_dark_fill;
+ border-color: $backdrop_borders_color;
+ transition: $backdrop_transition;
+
+ &:disabled { background-color: $insensitive_bg_color; }
+ }
+
+ // ...on selected list rows
+ row:selected & { &:disabled, & { 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 $progress_border_color;
+ border-radius: 3px;
+ background-color: gtkshade($core_color_a, 0.90);
+
+ &:disabled {
+ background-color: transparent;
+ border-color: transparent;
+ }
+
+ &:backdrop {
+ border-color: $progress_border_color;
+ &: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: 10px;
+ min-width: 10px;
+ padding: 11px;
+
+ // those are inside the trough node, I need them to show their own border over the trough one, so negative margin
+ fill,
+ highlight { margin: -1px; }
+
+ // the slider is inside the trough, so to have make it bigger there's a negative margin
+
+ slider {
+ min-height: 18px;
+ min-width: 18px;
+ margin: -9px;
+ }
+
+ // 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
+ slider { margin: -6px; }
+
+ fill,
+ highlight,
+ trough {
+ border-radius: 5px;
+ -gtk-outline-radius: 7px;
+ }
+ }
+
+ // the backing bit
+ trough {
+ @extend %scale_trough;
+
+ outline-offset: 2px;
+ -gtk-outline-radius: 5px;
+ }
+
+ // the colored part of the backing bit
+ 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
+ fill {
+ @extend %scale_trough;
+
+ &:backdrop, & { background-color: $borders_color; }
+
+ &:disabled {
+ &:backdrop, & {
+ border-color: transparent;
+ background-color: transparent;
+ }
+ }
+
+ // OSD
+ .osd & {
+ background-color: mix($osd_fg_color, $osd_borders_color, 25%);
+
+ &:disabled {
+ &:backdrop, & {
+ border-color: transparent;
+ background-color: transparent;
+ }
+ }
+ }
+ }
+
+ &.horizontal slider {
+ min-width: 20px;
+ }
+
+ &.vertical slider {
+ min-height: 20px;
+ }
+
+ slider {
+ @include button(normal, $edge: $shadow_color);
+ min-height: 12px;
+ min-width: 12px;
+ margin: -5px;
+
+ border: 1px solid darken($alt_borders_color, 3%);
+ border-radius: 3px;
+ transition: $button_transition;
+ transition-property: background, border, box-shadow;
+
+ &:hover { @include button(hover, $edge: $shadow_color); }
+
+ &:active { border-color: $progress_border_color; }
+
+ &:disabled { @include button(insensitive); }
+
+ &:backdrop {
+ transition: $backdrop_transition;
+
+ @include button(backdrop);
+
+ &:disabled { @include button(backdrop-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
+ }
+
+ &:backdrop {
+ @include button(osd-backdrop);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+ &:disabled {
+ @include button(osd-backdrop-insensitive);
+ background-color: opacify($osd_bg_color, 1); // solid background needed here
+ }
+ }
+ }
+ }
+
+ marks,
+ value {
+ color: gtkalpha(currentColor, 0.55);
+ font-feature-settings: "tnum";
+ }
+
+ //marks margins
+ @each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
+ (horizontal, bottom, bottom, top),
+ (vertical, top, left, right),
+ (vertical, bottom, right, left) {
+ &.#{$scale_orient} marks {
+ &.#{$marks_class} {
+ margin-#{$marks_margin}: $_marks_distance;
+ margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
+ }
+ }
+
+ &.#{$scale_orient}.fine-tune marks {
+ &.#{$marks_class} {
+ margin-#{$marks_margin}: $_marks_distance;
+ margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px);
+ }
+ }
+ }
+
+ &.horizontal {
+ indicator {
+ min-height: $_marks_length;
+ min-width: 1px;
+ }
+
+ &.fine-tune indicator { min-height: ($_marks_length - 3px); }
+ }
+
+ &.vertical {
+ indicator {
+ min-height: 1px;
+ min-width: $_marks_length;
+ }
+
+ &.fine-tune indicator { min-width: ($_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'),
+ (':backdrop', '-backdrop'),
+ (':backdrop:disabled', '-backdrop-insensitive') {
+ &.#{$dir_class}.#{$marks_class} {
+
+ 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 slider {
+ // bigger negative margins to make the trough grow here as well
+ margin: -7px;
+
+ @if $dir_class == 'horizontal' {
+ @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
+
+ @else { margin-bottom: -11px; }
+ }
+
+ @else {
+ @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;
+ }
+
+ slider {
+ &:dir(ltr), &:dir(rtl) { // specificity bumb
+ &: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;
+ }
+
+ 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;
+ }
+
+ 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;
+ }
+
+ slider {
+ margin-bottom: -15px;
+ margin-top: 6px;
+ }
+ }
+ }
+
+ &.vertical {
+ &:dir(ltr) {
+ padding: 0 0 0 12px;
+
+ trough {
+ padding-left: 7px;
+ background-position: 6px 0;
+ }
+
+ slider {
+ margin-left: -15px;
+ margin-right: 6px;
+ }
+ }
+
+ &:dir(rtl) {
+ padding: 0 12px 0 0;
+
+ trough {
+ padding-right: 7px;
+ background-position: -6px 0;
+ }
+
+ slider {
+ margin-right: -15px;
+ margin-left: 6px;
+ }
+ }
+ }
+ }
+ }
+}
+
+
+/*****************
+ * Progress bars *
+ *****************/
+progressbar {
+ // sizing
+ &.horizontal {
+ trough,
+ progress { min-height: 16px; }
+ }
+
+ &.vertical {
+ trough,
+ progress { min-width: 16px; }
+ }
+
+ &.horizontal 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 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";
+
+ &:backdrop {
+ box-shadow: none;
+ transition: $backdrop_transition;
+ }
+
+ trough { @extend %scale_trough; }
+
+ progress {
+ @extend %scale_highlight;
+
+ border-radius: 1.5px;
+
+ &.left {
+ border-top-left-radius: 2px;
+ border-bottom-left-radius: 2px;
+ }
+
+ &.right {
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ }
+
+ &.top {
+ border-top-right-radius: 2px;
+ border-top-left-radius: 2px;
+ }
+
+ &.bottom {
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+ }
+ }
+
+ &.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 {
+ &.horizontal {
+ block {
+ min-height: 1px;
+ }
+
+ &.discrete block {
+ margin: 0 1px;
+ min-width: 32px;
+ }
+ }
+
+ &.vertical {
+ block {
+ min-width: 1px;
+ }
+
+ &.discrete block {
+ margin: 1px 0;
+ min-height: 32px;
+ }
+ }
+
+ &:backdrop { transition: $backdrop_transition; }
+
+ trough {
+ border: 1px solid;
+ padding: 2px;
+ border-radius: 3px;
+ @include entry(normal);
+
+ &:backdrop { @include entry(backdrop); }
+ }
+
+ block {
+ border: 1px solid;
+ border-radius: 1px;
+
+ &.low {
+ border-color: if($variant == 'light', darken($warning_color, 20%), $warning_color);
+ background-color: $warning_color;
+
+ &:backdrop { border-color: $warning_color; };
+ }
+
+ &.high,
+ &:not(.empty) {
+ border-color: if($variant == 'light', darken($progress_bg_color, 20%), $progress_bg_color);
+ background-color: $progress_bg_color;
+
+ &:backdrop { border-color: $progress_bg_color; }
+ }
+
+ &.full {
+ border-color: if($variant == 'light', darken($success_color, 20%), $success_color);
+ background-color: $success_color;
+
+ &:backdrop { border-color: $success_color; };
+ }
+
+ &.empty {
+ background-color: transparent;
+ border-color: if($variant == 'light', transparentize($fg_color,0.8), transparentize($fg_color,0.9));
+
+ &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); }
+ }
+ }
+}
+
+
+/****************
+ * Print dialog *
+*****************/
+printdialog {
+ paper {
+ color: $fg_color;
+ border: 1px solid $borders_color;
+ background: white;
+ padding: 0;
+
+ &:backdrop {
+ color: $backdrop_fg_color;
+ border-color: $backdrop_borders_color;
+ }
+ }
+
+ .dialog-action-box { margin: 12px; }
+}
+
+
+/**********
+ * Frames *
+ **********/
+frame > border,
+.frame {
+ box-shadow: none;
+ margin: 0;
+ padding: 0;
+ border-radius: 0;
+ border: 1px solid $borders_color;
+
+ &.flat { border-style: none; }
+
+ &:backdrop { border-color: $backdrop_borders_color; }
+}
+
+actionbar > revealer > box {
+ padding: 6px;
+ border-top: 1px solid $borders_color;
+
+ &:backdrop { border-color: $backdrop_borders_color; }
+}
+
+scrolledwindow {
+ viewport.frame { // avoid double borders when viewport inside scrolled window
+ border-style: none;
+ }
+
+ // 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);
+
+ &:backdrop { @include overshoot(top, backdrop); }
+ }
+
+ &.bottom {
+ @include overshoot(bottom);
+
+ &:backdrop { @include overshoot(bottom, backdrop); }
+ }
+
+ &.left {
+ @include overshoot(left);
+
+ &:backdrop { @include overshoot(left, backdrop); }
+ }
+
+ &.right {
+ @include overshoot(right);
+
+ &:backdrop { @include overshoot(right, backdrop); }
+ }
+ }
+
+
+ junction { // the small square between two scrollbars
+ border-color: transparent;
+ // the border image is used to add the missing dot between the borders, details, details, details...
+ border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
+ background-color: $scrollbar_bg_color;
+
+ &:dir(rtl) { border-image-slice: 0 1 0 0; }
+
+ &:backdrop {
+ border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
+ background-color: $backdrop_scrollbar_bg_color;
+ transition: $backdrop_transition;
+ }
+ }
+}
+
+//vbox and hbox separators
+separator {
+ background: transparentize(black, 0.9);
+ min-width: 1px;
+ min-height: 1px;
+}
+
+
+/*********
+ * Lists *
+ *********/
+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 {
+ transition: all 150ms $ease-out-quad;
+
+ &:hover { transition: none; }
+
+ &:backdrop { transition: $backdrop_transition; }
+
+ &.activatable {
+ &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+
+ &:hover { background-color: $selected_bg_color; }
+
+ &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
+
+ &:backdrop:hover { background-color: transparent; }
+
+ &:selected {
+ &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+
+ &.has-open-popup,
+ &:hover { background-color: $selected_bg_color; }
+
+ &:backdrop { background-color: $selected_bg_color; }
+ }
+ }
+
+ &:selected { @extend %selected_items; }
+}
+
+
+/*********************
+ * App Notifications *
+ *********************/
+.app-notification,
+.app-notification.frame {
+ @extend %osd;
+
+ padding: 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;
+
+ &:backdrop {
+ background-image: none;
+ transition: $backdrop_transition;
+ }
+
+ button { @extend %osd_button; }
+
+ border { border: none; }
+}
+
+
+/*************
+ * Expanders *
+ *************/
+expander {
+ title > arrow {
+ min-width: 16px;
+ min-height: 16px;
+ -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+ &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+ &:hover { color: lighten($fg_color,30%); } //only lightens the arrow
+ &:disabled { color: $insensitive_fg_color; }
+ &:disabled:backdrop { color: $backdrop_insensitive_color; }
+
+ &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+ }
+}
+
+
+/************
+ * Calendar *
+ ***********/
+calendar {
+ color: $text_color;
+ border: 1px solid $borders_color;
+
+ &:selected {
+ @extend %selected_items;
+
+ border-radius: 3px;
+ }
+
+ &.header {
+ border-bottom-color: transparentize(black, 0.9);
+
+ &:backdrop { border-bottom-color: transparentize(black, 0.9); }
+ }
+
+ &.button {
+ @extend %undecorated_button;
+
+ color: transparentize($fg_color, 0.55);
+
+ &:hover { color: $fg_color; }
+
+ &:backdrop { color: transparentize($backdrop_fg_color,0.55); }
+
+ &:disabled { color: transparentize($insensitive_fg_color,0.55); }
+ }
+
+ &.highlight {
+ color: $insensitive_fg_color;
+
+ &:backdrop { color: $backdrop_insensitive_color; }
+ }
+
+ &:backdrop {
+ color: $backdrop_text_color;
+ border-color: $backdrop_borders_color;
+ }
+
+ &:indeterminate { color: gtkalpha(currentColor, 0.1); }
+}
+
+
+/***********
+ * Dialogs *
+ ***********/
+messagedialog { // 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;
+ }
+
+ &.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-right-style: none;
+ border-bottom-style: none;
+ border-radius: 0;
+ -gtk-outline-radius: 0;
+
+ &:first-child {
+ border-left-style: none;
+ border-bottom-left-radius: $button_radius + 2;
+ -gtk-outline-bottom-left-radius: $button_radius + 2;
+ }
+
+ &:last-child {
+ border-bottom-right-radius: $button_radius + 2;
+ -gtk-outline-bottom-right-radius: $button_radius + 2;
+ }
+ }
+ }
+}
+
+filechooser {
+ .dialog-action-box {
+ border-top: 1px solid $borders_color;
+
+ &:backdrop { border-top-color: $backdrop_borders_color; }
+ }
+
+ #pathbarbox { border-bottom: 1px solid $bg_color; }
+}
+
+filechooserbutton:drop(active) {
+ box-shadow: none;
+ border-color: transparent;
+}
+
+
+/***********
+ * Sidebar *
+ ***********/
+.sidebar {
+ border-style: none;
+ 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;
+ }
+ }
+
+ &:backdrop {
+ background-color: $backdrop_sidebar_bg_color;
+ border-color: $backdrop_borders_color;
+ transition: $backdrop_transition;
+ }
+
+ list { background-color: transparent; }
+
+ paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
+}
+
+stacksidebar {
+ &.sidebar {
+ &:dir(ltr),
+ &.left,
+ &.left:dir(rtl) { list { @extend %sidebar_left; }}
+
+ &:dir(rtl),
+ &.right { list { @extend %sidebar_right; }}
+ }
+
+ row {
+ padding: 10px 4px;
+
+ > label {
+ padding-left: 6px;
+ padding-right: 6px;
+ }
+
+ &.needs-attention > label {
+ @extend %needs_attention;
+
+ background-size: 6px 6px, 0 0;
+ }
+ }
+}
+
+separator.sidebar {
+ background-color: $borders_color;
+
+ &:backdrop {
+ background-color: $backdrop_borders_color;
+ }
+
+ &.selection-mode,
+ .selection-mode & {
+ background-color: darken($suggested_bg_color, 20%);
+ }
+}
+
+
+/****************
+ * 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
+
+placessidebar {
+ > viewport.frame { border-style: none; }
+
+ row {
+ // Needs overriding of the GtkListBoxRow padding
+ min-height: 36px;
+ padding: 0px;
+
+ // Using margins/padding directly in the SidebarRow
+ // will make the animation of the new bookmark row jump
+ > revealer { padding: 0 14px; }
+
+ &:selected { color: $selected_fg_color; }
+
+ &:disabled { color: $insensitive_fg_color; }
+
+ &:backdrop {
+ color: $backdrop_fg_color;
+
+ &:selected { color: $backdrop_selected_fg_color; }
+
+ &:disabled { color: $backdrop_insensitive_color; }
+ }
+
+ 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%;
+ -gtk-outline-radius: 100%;
+
+ &:not(:hover):not(:active),
+ &:backdrop { > image { opacity: $_placesidebar_icons_opacity; }}
+ }
+
+ // 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 { background-color: transparent; }
+
+ // this selects the "connect to server" label
+ > actionbar > revealer > box > label {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+}
+
+
+/*********
+ * 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 istead 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?
+
+ &:backdrop { background-image: image($backdrop_borders_color); }
+
+ &.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;
+
+ &:backdrop {
+ background-color: $backdrop_bg_color;
+ background-image: image($backdrop_borders_color),
+ image($backdrop_borders_color);
+ }
+ }
+ }
+
+ &.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;
+ }
+ }
+}
+
+
+/**************
+ * GtkInfoBar *
+ **************/
+infobar {
+ border-style: none;
+
+ &.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%));
+ border-bottom: 1px solid lighten($borders_color, 5%);
+ }
+
+ &.info,
+ &.question,
+ &.warning,
+ &.error {
+ &:backdrop > revealer > box, & > revealer > box {
+ label, & { color: $fg_color; }
+ background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%),
+ desaturate(darken(invert($selected_bg_color),40%), 70%));
+ border-bottom: 1px solid lighten($borders_color, 5%);
+ }
+
+ text-shadow: none;
+
+ &:backdrop { text-shadow: none; }
+
+ button {
+ // FIXME: extend selection mode buttons
+ @include button(normal, $bg_color, $fg_color, none);
+
+ &:hover { @include button(hover, $bg_color, $fg_color, none); }
+
+ &:active,
+ &:checked { @include button(active, $bg_color, $fg_color, none); }
+
+ &:disabled { @include button(insensitive,$bg_color,$fg_color,none); }
+
+ &:backdrop {
+ @include button(backdrop, $bg_color, $fg_color, none);
+ border-color: _border_color($bg_color);
+
+ &:disabled {
+ @include button(backdrop-insensitive, $bg_color,
+ $fg_color, none);
+ border-color: _border_color($bg_color);
+ }
+ }
+ &:backdrop, & {
+ label, & { color: $fg_color; }
+ }
+ }
+
+ selection { background-color: darken($bg_color, 10%); }
+
+ *:link { color: $link_color; }
+ }
+}
+
+
+/************
+ * 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 suble border is meant to
+ // not make the tooltip melt with
+ // very dark backgrounds
+ }
+
+ padding: 4px; /* not working */
+ border-radius: 5px;
+ box-shadow: none; // otherwise it gets inherited by windowframe.csd
+ text-shadow: 0 1px black;
+
+ // FIXME: we need a border or tooltips vanish on black background.
+ decoration { background-color: transparent; }
+
+ * { // Yeah this is ugly
+ padding: 4px;
+ background-color: transparent;
+ color: white;
+ }
+}
+
+
+/*****************
+ * 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.
+
+ &: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 {
+ outline-color: transparentize(white, 0.4);
+
+ overlay {
+ color: white;
+
+ &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
+
+ &:backdrop { color: transparentize(white, 0.5); }
+ }
+ }
+
+ &.light {
+ outline-color: transparentize(black, 0.4);
+
+ overlay {
+ color: black;
+
+ &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
+
+ &:backdrop { color: transparentize(black, 0.5); }
+ }
+ }
+
+ &: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);
+
+ &:hover {
+ box-shadow: inset 0 1px transparentize(white, 0.6),
+ inset 0 -1px transparentize(black, 0.8);
+ }
+
+ &:backdrop, &:backdrop:hover {
+ border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
+ box-shadow: none;
+ }
+ }
+
+ &#add-color-button {
+ border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
+
+ &:only-child { border-radius: $_colorswatch_radius; }
+
+ overlay {
+ @include button(normal);
+
+ &:hover { @include button(hover); }
+
+ &:backdrop { @include button(backdrop); }
+ }
+ }
+
+ &: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; }
+ }
+}
+
+// colorscale popup
+colorchooser .popover.osd { border-radius: 5px; }
+
+/********
+ * Misc *
+ ********/
+//content view (grid/list)
+.content-view {
+ background-color: darken($bg_color,7%);
+
+ &:hover { -gtk-icon-effect: highlight; }
+
+ &:backdrop { background-color: darken($bg_color,7%); }
+
+ rubberband, .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;
+ }
+
+ &:backdrop { &:hover, &:disabled, & { @extend %undecorated_button; }}
+ }
+}
+
+
+/**********************
+ * Window Decorations *
+ *********************/
+decoration {
+ border-radius: $window_radius $window_radius 0 0;
+ // 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));
+
+ box-shadow: 1px 1px 0px $fg_color,-1px 1px 0px $fg_color, 1px -1px 0px $fg_color, -1px -1px 0px $fg_color;
+
+
+ // FIXME rationalize shadows
+
+ // this is used for the resize cursor area
+ margin: 10px;
+
+ &: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.
+ 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
+ transition: $backdrop_transition;
+ }
+
+ .maximized &,
+ .fullscreen &,
+ .tiled &,
+ .tiled-top &,
+ .tiled-right &,
+ .tiled-bottom &,
+ .tiled-left & { 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
+
+ .csd.popup & {
+ border-radius: $menu_radius;
+ box-shadow: 0 1px 2px transparentize(black, 0.8),
+ 0 0 0 1px transparentize($_wm_border, 0.1);
+ }
+
+ tooltip.csd & {
+ border-radius: 5px;
+ box-shadow: none;
+ }
+
+ messagedialog.csd & {
+ 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: 4px;
+ background-color: $borders_color;
+ border: solid 1px $borders_color;
+ border-radius: 0;
+ box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight;
+
+ &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; }
+ }
+}
+
+// Window Close button
+button.titlebutton {
+
+ border-width:1px;
+ border-style:solid;
+ &:not(.appmenu) {
+ border-radius: 4px;
+ padding: $_hb_btn_pad;
+ margin: 0 2px;
+ min-width: 0;
+ min-height: 0;
+ }
+
+
+ &:backdrop { }
+}
+
+.selection-mode headerbar button.titlebutton,
+.selection-mode .titlebar button.titlebutton,
+headerbar.selection-mode button.titlebutton,
+.titlebar.selection-mode button.titlebutton {
+
+ &:backdrop { }
+}
+
+// catch all extend :)
+
+%selected_items {
+ background-color: $selected_bg_color;
+
+ &.hover { color: $selected_fg_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%); }
+
+ @at-root %selected_items_backdrop,
+ &:backdrop {
+ color: $backdrop_selected_fg_color;
+
+ &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
+ }
+ }
+}
+
+.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;
+
+ @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'));
+ padding-left: 10px;
+ }
+
+ &.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'));
+ padding-right: 10px;
+ }
+
+ &.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'));
+ }
+ }
+}
+
+.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
+
+// shortcut window keys
+.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;
+
+ &:backdrop {
+ background-color: $backdrop_base_color;
+ color: $backdrop_fg_color;
+ transition: $backdrop_transition;
+ }
+}
+
+: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 button.circular,
+stackswitcher button.text-button.circular { // FIXME aggregate with buttons
+ 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);
+}
+
+/* Dropshadow 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 {
+ padding-left: 0;
+ padding-right: 0;
+
+ entry.search { margin: 3px 5px 5px 5px; }
+}
+
+button.emoji-section {
+ border-color: transparent;
+ border-width: 3px;
+ border-style: none none solid;
+ border-radius: 0;
+
+ margin: 2px 4px 2px 4px;
+ 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;
+
+ outline-offset: -5px;
+
+ &:first-child { margin-left: 7px; }
+ &:last-child { margin-right: 7px; }
+
+ &:backdrop:not(:checked) { border-color: transparent; }
+ &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
+ &:checked { border-color: $selected_bg_color; }
+
+ label {
+ padding: 0;
+
+ opacity: 0.55;
+ }
+
+ &:hover label { opacity: 0.775; }
+ &:checked label { opacity: 1; }
+}
+
+popover.emoji-picker .emoji {
+ font-size: x-large;
+ padding: 6px;
+
+ :hover {
+ background: $selected_bg_color;
+ border-radius: 6px;
+ }
+}
+
+popover.emoji-completion arrow {
+ border: none;
+ background: none;
+}
+
+popover.emoji-completion contents row box {
+ padding: 2px 10px;
+}
+
+popover.emoji-completion .emoji:hover {
+ background: $popover_hover_color;
+}
generated by cgit v1.2.1 (git 2.18.0) at 2024-12-18 21:32:17 +0000