diff options
| author | raveit65 <[email protected]> | 2021-06-24 19:23:59 +0200 |
|---|---|---|
| committer | raveit65 <[email protected]> | 2021-06-24 19:24:49 +0200 |
| commit | b59e0442638ca4e1fbd9aca453ea34d15359bda4 (patch) | |
| tree | 90271aa844085dbddfae2f3865299089078bed3f /desktop-themes/YaruGreen/gtk-3.0/_common.scss | |
| parent | 9bf6f4ec2f77fd09a12ba2b68416e81a13b4ca3d (diff) | |
| download | mate-themes-b59e0442638ca4e1fbd9aca453ea34d15359bda4.tar.bz2 mate-themes-b59e0442638ca4e1fbd9aca453ea34d15359bda4.tar.xz | |
Revert "Propose a different traditional ok implentation (#290)"
This reverts commit 9bf6f4ec2f77fd09a12ba2b68416e81a13b4ca3d.
Diffstat (limited to 'desktop-themes/YaruGreen/gtk-3.0/_common.scss')
| -rw-r--r-- | desktop-themes/YaruGreen/gtk-3.0/_common.scss | 5038 |
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; -} |