summaryrefslogtreecommitdiff
path: root/desktop-themes/YaruGreen/gtk-3.0/_common.scss
diff options
context:
space:
mode:
Diffstat (limited to 'desktop-themes/YaruGreen/gtk-3.0/_common.scss')
-rw-r--r--desktop-themes/YaruGreen/gtk-3.0/_common.scss5038
1 files changed, 0 insertions, 5038 deletions
diff --git a/desktop-themes/YaruGreen/gtk-3.0/_common.scss b/desktop-themes/YaruGreen/gtk-3.0/_common.scss
deleted file mode 100644
index 203bc59c..00000000
--- a/desktop-themes/YaruGreen/gtk-3.0/_common.scss
+++ /dev/null
@@ -1,5038 +0,0 @@
-@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: gtkshade($scrollbar_slider_bg_color,0.90);
-$scrollbar_slider_gradient_b: gtkshade($core_color_a, 0.88);
-$scrollbar_slider_gradient_c: gtkshade($core_color_a, 0.85);
-$scrollbar_slider_gradient_d: gtkshade($core_color_a, 0.80);
-$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: gtkshade($scrollbar_slider_hover_bg_color, 0.93);
-$scrollbar_slider_hover_gradient_b: gtkshade($core_color_a, 0.92);
-$scrollbar_slider_hover_gradient_c: gtkshade($core_color_a, 0.90);
-$scrollbar_slider_hover_gradient_d: gtkshade($core_color_a, 0.86);
-
-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.4) 12px,
- gtkalpha($progressbar_pattern_color, 0.4) 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;
-}