diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss index c565f706b0..039c1e0515 100644 --- a/gtk/theme/Adwaita/_colors.scss +++ b/gtk/theme/Adwaita/_colors.scss @@ -50,7 +50,7 @@ $drop_target_color: #4e9a06; //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_bg_color: mix($bg_color, $base_color, 60%); -$insensitive_borders_color: $borders_color; +$insensitive_borders_color: mix($borders_color, $bg_color, 80%); //colors for the backdrop state, derived from the main colors. $backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%)); diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index bbb9029ce7..692af6dc79 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2520,14 +2520,20 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work border-radius: 3px; background-color: $dark_fill; - &:disabled { background-color: $insensitive_bg_color; } + &:disabled { + background-color: $insensitive_bg_color; + border-color: $insensitive_borders_color; + } &:backdrop { background-color: $backdrop_dark_fill; border-color: $backdrop_borders_color; transition: $backdrop_transition; - &:disabled { background-color: $insensitive_bg_color; } + &:disabled { + background-color: $insensitive_bg_color; + border-color: $insensitive_borders_color; + } } // ...on selected list rows diff --git a/gtk/theme/HighContrast/HighContrast-inverse.scss b/gtk/theme/HighContrast/HighContrast-inverse.scss index 6cc8033df1..bfb2eb3c65 100644 --- a/gtk/theme/HighContrast/HighContrast-inverse.scss +++ b/gtk/theme/HighContrast/HighContrast-inverse.scss @@ -6,6 +6,7 @@ $variant: 'dark'; -@import 'colors'; -@import 'drawing'; -@import 'common'; +@import '../Adwaita/colors'; +@import 'colors-hc'; +@import '../Adwaita/drawing'; +@import '../Adwaita/common'; diff --git a/gtk/theme/HighContrast/HighContrast.scss b/gtk/theme/HighContrast/HighContrast.scss index 84fbdc5f50..9a5613fc32 100644 --- a/gtk/theme/HighContrast/HighContrast.scss +++ b/gtk/theme/HighContrast/HighContrast.scss @@ -6,6 +6,7 @@ $variant: 'light'; -@import 'colors'; -@import 'drawing'; -@import 'common'; +@import '../Adwaita/colors'; +@import 'colors-hc'; +@import '../Adwaita/drawing'; +@import '../Adwaita/common'; diff --git a/gtk/theme/HighContrast/_colors-hc.scss b/gtk/theme/HighContrast/_colors-hc.scss new file mode 100644 index 0000000000..f9c038bbe7 --- /dev/null +++ b/gtk/theme/HighContrast/_colors-hc.scss @@ -0,0 +1,16 @@ +// High Contrast color overrides +// When color definition differs for dark and light variant +// it gets @if ed depending on $variant + + +$fg_color: if($variant == 'light', darken($fg_color, 3%), lighten($fg_color, 2%)); +$bg_color: if($variant == 'light', lighten($bg_color, 3%), darken($bg_color, 2%)); +$selected_bg_color: darken($selected_bg_color,10%); +$selected_borders_color: darken($selected_borders_color, 10%); +$borders_color: if($variant == 'light', darken($borders_color, 30%), lighten($borders_color, 30%)); +$alt_borders_color: if($variant == 'light', darken($alt_borders_color, 33%), lighten($alt_borders_color, 28%)); + +//insensitive state derived colors +$insensitive_fg_color: mix($fg_color, $bg_color, 50%); +$insensitive_bg_color: mix($bg_color, $base_color, 60%); +$insensitive_borders_color: mix($borders_color, $bg_color, 80%); diff --git a/gtk/theme/HighContrast/_colors.scss b/gtk/theme/HighContrast/_colors.scss deleted file mode 100644 index ac9ba03249..0000000000 --- a/gtk/theme/HighContrast/_colors.scss +++ /dev/null @@ -1,96 +0,0 @@ -// When color definition differs for dark and light variant, -// it gets @if ed depending on $variant - - -$base_color: if($variant == 'light', #fff, #111); -$bg_color: if($variant == 'light', #fff, #000); -$fg_color: if($variant == 'light', #000, #fff); - -$selected_fg_color: if($variant == 'light', #fff, #000); -$selected_bg_color: if($variant == 'light', #000, #ddd); //#4a90d9; -$selected_borders_color: if($variant == 'light', #000, #aaa); -$popover_bg_color: $bg_color; -$popover_hover_color: lighten($bg_color, 5%); - -$borders_color: mix($bg_color,$fg_color,50%); -$borders_edge: if($variant == 'light', #fff, #000); -$link_color: $selected_bg_color; - -$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 95%), mix($base_color, $bg_color, 60%)); -$scrollbar_slider_color: mix($fg_color, $bg_color, 60%); -$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%); -$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%)); - -$suggested_color: #4a90d9; -$warning_color: #f57900; -$error_color: #cc0000; -$success_color: #73d216; -$destructive_color: #ef2929; -$dark_fill: if($variant == 'light', mix($fg_color, $bg_color, 50%), mix($fg_color, $bg_color, 10%)); - -$osd_fg_color: #fff; -$osd_bg_color: transparentize(#000,0.2); -$osd_borders_color: transparentize(#fff,0.8); - -//insensitive state derived colors -$insensitive_fg_color: mix($fg_color, $bg_color, 50%); -$insensitive_bg_color: mix($bg_color, $base_color, 60%); -$insensitive_borders_color: mix($borders_color, $base_color, 50%); - -//colors for the backdrop state, derived from the main colors. -$backdrop_base_color: $base_color; -$backdrop_bg_color: $bg_color; -$backdrop_fg_color: $fg_color; -$backdrop_borders_color: mix($borders_color, $bg_color, 90%); -$backdrop_dark_fill: mix($fg_color, $bg_color, 30%); -$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); -$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); - -//apps rely on some named colors to be exported -/* GTK NAMED COLORS */ -@define-color theme_fg_color #{"" + $fg_color}; -@define-color theme_bg_color #{"" + $bg_color}; -@define-color theme_base_color #{"" + $base_color}; -@define-color theme_selected_bg_color #{"" + $selected_bg_color}; -@define-color theme_selected_fg_color #{"" + $selected_fg_color}; -@define-color insensitive_bg_color #{"" + $insensitive_bg_color}; -@define-color insensitive_fg_color #{"" + $insensitive_fg_color}; -@define-color insensitive_base_color #{"" + $base_color}; -@define-color theme_unfocused_fg_color #{"" + $backdrop_fg_color}; -@define-color theme_unfocused_bg_color #{"" + $backdrop_bg_color}; -@define-color theme_unfocused_base_color #{"" + $backdrop_base_color}; -@define-color theme_unfocused_selected_bg_color #{"" + $selected_bg_color}; -@define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color}; -@define-color unfocused_insensitive_color #{"" + $insensitive_fg_color}; -@define-color borders #{"" + $borders_color}; -@define-color unfocused_borders #{"" + $backdrop_borders_color}; - -@define-color warning_color #{"" + $warning_color}; -@define-color error_color #{"" + $error_color}; -@define-color success_color #{"" + $success_color}; - -//WM - -$_wm_highlight: $borders_edge; - -@define-color wm_title shade(#{"" + $fg_color}, 1.8); -@define-color wm_unfocused_title #{"" + $backdrop_fg_color}; -@define-color wm_highlight #{"" + $_wm_highlight}; -@define-color wm_borders_edge #{"" + $borders_edge}; - -@define-color wm_bg_a shade(#{"" + $bg_color}, 1.2); -@define-color wm_bg_b #{"" + $bg_color}; - -@define-color wm_shadow alpha(black, 0.35); -@define-color wm_border alpha(black, 0.18); - -@define-color wm_button_hover_color_a shade(#{"" + $bg_color}, 1.3); -@define-color wm_button_hover_color_b #{"" + $bg_color}; -@define-color wm_button_active_color_a shade(#{"" + $bg_color}, 0.85); -@define-color wm_button_active_color_b shade(#{"" + $bg_color}, 0.89); -@define-color wm_button_active_color_c shade(#{"" + $bg_color}, 0.9); - -//FIXME this is really an API - -@define-color content_view_bg #{"" + $base_color}; - diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss deleted file mode 100644 index 2493cf2d8a..0000000000 --- a/gtk/theme/HighContrast/_common.scss +++ /dev/null @@ -1,3518 +0,0 @@ -@function gtkalpha($c,$a) { - @return unquote("alpha(#{$c},#{$a})"); -} - -$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); - -* { - padding: 0; - -gtk-icon-style: symbolic; //force symbolic style icons - - // 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 - - outline-style: none; -} - -button:focus, -checkbutton:focus, -radiobutton:focus, -switch:focus, -scale:focus, -label:focus, -row:focus, -flowboxchild:focus { - // 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: currentColor; - outline-style: dashed; - outline-offset: -4px; - outline-width: 2px; -} - -/*************** - * Base States * - ***************/ - -.background { - color: $fg_color; - background-color: $bg_color; -} - -dnd { - color: $fg-color; -} - -.background:backdrop { - text-shadow: none; - -gtk-icon-shadow: none; - - color: lighten($fg_color,10%); - background-color: $backdrop_bg_color; -} - -/* - 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-filter: opacity(0.5); -} - -.gtkstyle-fallback { - background-color: $bg_color; - color: $fg_color; - &:hover { - background-color: lighten($bg_color, 10%); - color: $fg_color; - } - &:active { - background-color: darken($bg_color, 10%); - color: $fg_color; - } - &:disabled { - background-color: $insensitive_bg_color; - color: $insensitive_fg_color; - } - &:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - } -} - -.normal-icons { - -gtk-icon-size: 16px; -} - -.large-icons { - -gtk-icon-size: 32px; -} - -.view { - color: $fg_color; - background-color: $base_color; - &:backdrop { - color: $backdrop_fg_color; - background-color: $backdrop_base_color; - } - &:disabled { - color: $insensitive_fg_color; - background-color: $insensitive_bg_color; - } - @at-root %view_selected, - &:selected, - &:selected:focus, - &:selected:hover { @extend %selected_items; } -} - -textview text { - @extend .view; - - selection, - selection:focus, - selection:hover { - @extend %selected_items; - } -} - -iconview { @extend .view ;} - -.rubberband, -rubberband { - border: 1px solid $selected_bg_color; - background-color: transparentize($selected_bg_color,0.8); -} - -flowbox { - & rubberband { @extend rubberband; } - flowboxchild { - padding: 3px; - border-radius: 3px; - &:selected { - @extend %selected_items; - outline-offset: -2px; - } - } -} - -label { - & selection, - & selection:focus, - & selection:hover, - & selection:backdrop { - @extend %selected_items; - } - &:disabled, &:backdrop:disabled { - color: $insensitive_fg_color; - } -} - -%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-image: none; - opacity: 0; // non spinning spinner makes no sense - -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); - &:checked { - opacity: 1; - animation: spin 1s linear infinite; - &:disabled { - opacity: 0.5; - } - } -} - -/**************** - * Text Entries * - ****************/ - -%entry, -entry { - %entry_basic, & { - min-height: 32px; - padding-left: 8px; - padding-right: 8px; - border: 1px solid; - border-radius: 3px; - transition: all 200ms $ease-out-quad; - - @include entry(normal); - - image { // icons inside the entry - &.left { padding-left: 0; padding-right: 6px; } - &.right { padding-left: 6px; padding-right: 0; } - } - - undershoot { - &.left { @include undershoot(left); } - &.right { @include undershoot(right); } - } - - &.flat { - &:focus, &:backdrop, &:disabled, & { - min-height: 0; - padding: 2px; - background-image: none; - border-color: transparent; - border-radius: 0; - box-shadow: none; - } - - // Dodge transparency in selected treeview row, else bg & fg end up same - treeview &:focus { background-color: $base_color; } - } - - &:focus { @include entry(focus); } - - &:disabled { @include entry(insensitive); } - - &:backdrop { @include entry(backdrop); } - - &:backdrop:disabled { @include entry(backdrop-insensitive); } - - selection { &:focus, & { @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); } - - &:selected { &:focus, & { 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: $fg_color; - box-shadow: inset 0 0 0 1px $fg_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: $selected_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: $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: $fg_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%); - background-image: _solid($base_color); - - &:backdrop { - border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); - background-image: _solid($backdrop_base_color); - } - } - - // 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 and add back the focus shadow. - // :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: $error_color; } - - + %entry:drop(active):not(:only-child), - + entry:drop(active):not(:only-child) { border-top-color: $fg_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: $error_color; } - } - - &:drop(active):not(:only-child) { - + %entry, - + entry, - + button, - + combobox > box > button.combo { border-top-color: $fg_color; } - } - } -} - -/*********** - * Buttons * - ***********/ -// stuff for .needs-attention -$_dot_color: $selected_bg_color; - -@keyframes needs_attention { - from { background-image: radial-gradient($_dot_color 0%, transparentize($_dot_color, 1) 0%); } - to { background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color, 1) 70%); } -} - - -button { - @at-root %button_basic, & { - $_button_transition: all 200ms $ease-out-quad; - - min-height: 24px; - min-width: 16px; - padding: 4px 8px; - border: 1px solid; - border-radius: 3px; - transition: $_button_transition; - - @include button(normal); - - &:disabled { - @include button(insensitive); - - &:active, - &:checked { @include button(insensitive-active); } - } - - &:backdrop { - @include button(backdrop); - - -gtk-icon-filter: 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 { - @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; } - } - - &:backdrop, - &:disabled, - &:backdrop:disabled { - @include button(undecorated-insensitive); - } - } - - &:hover, - &.flat:hover { - @include button(hover); - -gtk-icon-filter: brightness(1.2); - } - - &:active, - &:checked { - @include button(active); - - transition-duration: 50ms; - } - - &.image-button { - min-width: 24px; - padding-left: 4px; - padding-right: 4px; - } - - &.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: $fg_color; - border-color: $fg_color; - box-shadow: inset 0 0 0 1px $fg_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 { - &.image-button { - min-height: 48px; - min-width: 48px; - } - - 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, $f_color in (suggested-action, $selected_bg_color, $selected_fg_color), - (destructive-action, $destructive_color, white) { - &.#{$b_type} { - @include button(normal, $b_color, $f_color); - - &.flat { - @include button(undecorated); - - color: $b_color; //FIXME: does it work on the dark variant? - } - - &:hover { @include button(hover, $b_color, $f_color); } - - &:active, - &:checked { @include button(active, $b_color, $f_color); } - - &:backdrop, - &.flat:backdrop { - @include button(backdrop, $b_color, $f_color); - - &:active, - &:checked { @include button(backdrop-active, $b_color, $f_color); } - - &:disabled { - @include button(backdrop-insensitive); - - &:active, - &:checked { @include button(backdrop-insensitive-active, $b_color, $f_color); } - } - } - - &.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, $f_color); } - } - - .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; - } - } - } - } - - .linked:not(.vertical) > & { @extend %linked; } - - .linked.vertical > & { @extend %linked_vertical; } -} - -%needs_attention { - animation: needs_attention 150ms ease-in; - background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color,1 ) 70%); - background-size: 6px 6px; - background-repeat: no-repeat; - - background-position: right 3px; - - &:backdrop { background-size: 6px 6px;} - - &:dir(rtl) { background-position: left 3px; } -} - - -%linked_not_left { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -%linked_not_right { - border-right-style: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -// 1st/last child are at text start/end -%linked { - &:dir(ltr) { - &:not(:first-child) { @extend %linked_not_left; } - &:not(:last-child) { @extend %linked_not_right; } - } - - &:dir(rtl) { - &:not(:first-child) { @extend %linked_not_right; } - &:not(:last-child) { @extend %linked_not_left; } - } -} - -%linked_not_top { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -%linked_not_bottom { - border-bottom-style: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -%linked_vertical{ - &:not(:first-child) { @extend %linked_not_top; } - - &:not(:last-child) { @extend %linked_not_bottom; } -} - -%undecorated_button { - background-color: transparent; - background-image: none; - border-color: transparent; - box-shadow: inset 0 1px transparentize(white,1), - 0 1px transparentize(white, 1); - text-shadow: none; - -gtk-icon-shadow: none; -} - -/* menu buttons */ -%modelbutton_flat, -modelbutton.flat, -.menuitem.button.flat { - min-height: 26px; - padding-left: 5px; - padding-right: 5px; - border-radius: 3px; - outline-offset: -2px; - - @extend %undecorated_button; - - &:hover { background-color: $popover_hover_color; } - - &:selected { @extend %selected_items; } - - &:backdrop, - &:backdrop:hover { @extend %undecorated_button; } - - // FIXME: remove the following when the checks/radios rewrite lands - check:last-child, - radio:last-child { margin-left: 8px; } - - check:first-child, - radio:first-child { margin-right: 8px; } -} - -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' { - &:disabled, - &:backdrop { box-shadow: none; } - } - } -} - - -/********* - * Links * - *********/ - -*:link { - color: $selected_bg_color; //FIXME use a proper color - &:hover, &:active, &:visited { - color: mix($fg_color, $selected_bg_color, 40%); //FIXME same here - } - &:backdrop, &:backdrop:hover { - color: $selected_bg_color; - } -} - -button:link, button:visited { - color: $suggested_color; - font-weight: bold; - @extend %undecorated_button; - text-shadow: none; - &:hover, &:active { - @extend %undecorated_button; - color: mix($fg_color, $selected_bg_color, 40%); //FIXME same here - text-shadow: none; - } - &:backdrop { - @extend %undecorated_button; //This shouldn't be needed but avoids - //a weird transition which for some reason - //makes borders blink on hover - color: $selected_bg_color; //FIXME use a proper color - } -} - -/***************** - * 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; - border-width: 2px; - border-color: $borders_color; - box-shadow: none; - padding: 0; - - text { - min-width: 28px; - margin: 0; - background: none; - border: none; - box-shadow: none; - } - - 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-radius: 0; - - &:dir(rtl) { border-style: none solid none none; } - - &:hover { - color: $fg_color; - background-color: $bg_color; - } - - &:disabled { color: transparentize($insensitive_fg_color, 0.7); } - - &:active { - background-color: $osd_bg_color; - color: $osd_fg_color; - } - - &:backdrop { - color: $backdrop_fg_color; - background-color: transparent; - border-color: transparentize($backdrop_borders_color, 0.7); - } - - &:backdrop:disabled { - color: $insensitive_bg_color; - background-image: none; - border-style: none none none solid; // It is needed or it gets overridden - - &:dir(rtl) { border-style: none solid none none; } - } - } - } - - // OSD horizontal - .osd &:not(.vertical) { - border-color: $osd_borders_color; - color: $fg_color; - box-shadow: none; - - &:focus, &:active { - border-color: opacify($osd_borders_color,0.5); - box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8); - } - - text { - box-shadow: none; - color: $fg_color; - text-shadow: none; - &:focus, &:active { - box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8); - } - } - - button { - @include button(undecorated); - - color: $fg_color; - border-style: none none none solid; - border-color: transparentize($borders_color,0.8); - border-radius: 0; - box-shadow: none; - - &:dir(rtl) { border-style: none solid none none; } - - &:active { - background-color: $osd_bg_color; - color: $osd_fg_color; - } - &:hover { - @include button(undecorated); - - border-style: none none none solid; - border-color: transparentize($borders_color,0.8); - background-color: transparentize($osd_fg_color, 0.9); - box-shadow: none; - } - - &:backdrop { - @include button(undecorated); - - color: $insensitive_fg_color; - border-color: transparentize($borders_color,0.9); - box-shadow: none; - border-style: none none none solid; - } - - &:disabled { - //@include button(undecorated); - - color: $insensitive_fg_color; - border-color: transparentize($borders_color,0.9); - border-style: none none none solid; - box-shadow: none; - } - - &:last-child { border-radius: 0 3px 3px 0; } - - &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } - } - } - - // 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 - border-width: 2px; - border-color: $borders_color; - - &:disabled { color: $insensitive_fg_color; } - &:backdrop:disabled { color: $insensitive_fg_color; } - - &:drop(active) { - border-color: transparent; - box-shadow: none; - } - - text { - @extend %entry; - min-height: 32px; - min-width: 32px; - padding: 0; - border-radius: 0; - border-color: $borders_color; - } - - button { - min-height: 32px; - min-width: 32px; - padding: 0; - - &.up { @extend %top_button; } - - &.down { @extend %bottom_button; } - } - - %top_button { - border-bottom-style: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - - %bottom_button { - border-top-style: none; - border-top-left-radius: 0; - border-top-right-radius: 0; - } - } - - // OSD vertical - .osd &.vertical button:first-child { - @include button(osd); - - &:hover { @include button(osd-hover);} - - &:active { @include button(osd-active); } - - &:disabled { @include button(osd-insensitive); } - - &:backdrop { @include button(osd-backdrop); } - } - - // Misc - treeview & { - entry, - entry:focus { - padding: 1px; - border-width: 1px 0; - border-color: $selected_bg_color; - border-radius: 0; - box-shadow: none; - } - } -} - -/************** - * 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_not_left; } - &:dir(rtl) { @extend %linked_not_right; } - } - } - - &: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 { - &:dir(ltr) { - &:not(:first-child) > box > button.combo { @extend %linked_not_left; } - &:not(:last-child) > box > button.combo { @extend %linked_not_right; } - } - - &:dir(rtl) { - &:not(:first-child) > box > button.combo { @extend %linked_not_right; } - &:not(:last-child) > box > button.combo { @extend %linked_not_left; } - } -} - -.linked.vertical > combobox { - &:not(:first-child) > box > button.combo { @extend %linked_not_top; } - &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; } -} - - -/************ - * Toolbars * - ************/ -toolbar { //FIXME: why is all this being ignored? - padding: 6px; - background-color: $bg_color; - &.osd { - background-color: $osd_bg_color; - border-radius: 6px; - padding: 12px; - & label { color: $osd_fg_color; } - } - //searchbar - &.vertical { - border-right: 1px solid $borders_color; - &:dir(rtl) { - border-right: none; - border-left: 1px solid $borders_color; - } - } -} - -searchbar { - @extend toolbar; - border-width: 0 0 1px; - border-color: $borders_color; - border-style: none none solid none; - padding: 3px; -} - -%inset-bar { - border-style: solid; - border-color: $borders_color; - $_bg: mix($bg_color, $borders_color, 70%); - background-color: $_bg; - box-shadow: inset 0 2px 3px -1px mix($borders_color, $_bg, 60%); - //FIXME edge would be nice, but doesn't work - &:backdrop { - border-color: $backdrop_borders_color; - background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%); - box-shadow: none; - } -} - -/*************** - * Header bars * - ***************/ - -%titlebar, -headerbar { - min-height: 46px; - border-width: 0 0 1px; - border-style: solid; - border-color: $borders_color; - border-radius: 7px 7px 0 0; - - background-color: transparent; - background-image: linear-gradient(to bottom, - lighten($bg_color,4%), - $bg_color); - box-shadow: inset 0 -1px mix($borders_color, $bg_color, 30%), // bottom shade - inset 0 1px $borders_edge; // top highlight - padding: 6px; - - &:backdrop { - border-color: $backdrop_borders_color; - background-color: $bg_color; - background-image: none; - box-shadow: none; - } - - .title { - font-weight: bold; - padding: 0px 12px; - } - .subtitle { - font-size: 80%; - padding: 0 12px; - } - - &.selection-mode { - color: darken($selected_bg_color, 15%); - text-shadow: 0 1px transparentize(black, 0.5); - background-image: linear-gradient(to bottom, - lighten($selected_bg_color,5%), - lighten($selected_bg_color,2%)); - box-shadow: inset 0 -1px mix($borders_color,$bg_color, 30%), //bottom shade - inset 0 1px mix($borders_edge,$selected_bg_color, 50%); //top highlight - button { - @include button(normal, $selected_bg_color, $selected_fg_color, $edge: none); - &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $edge: none); } - &:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); } - &:disabled { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } - &:backdrop { - @include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none); - border-color: darken($selected_bg_color, 15%); - } - &:backdrop:disabled { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } - &.suggested-action { - @include button($t:normal, $edge: none); - &:hover { @include button($t:hover,$edge: none); } - &:active { @include button($t:active, $edge: none); } - &:disabled { @include button($t:insensitive, $edge: none); } - &:backdrop { @include button($t:backdrop, $edge: none); } - &:backdrop:disabled { @include button($t:backdrop-insensitive, $edge: none); } - } - } - .selection-menu { - border-width: 0; - background-image: none; - box-shadow: none; - } - } - - // squared corners when the window is maximized, tiled, or fullscreen - .tiled &, - .maximized &, - .fullscreen & { - border-radius: 0; - } - - &.default-decoration { - min-height: 28px; - padding: 4px; - - button.titlebutton { - min-height: 26px; - min-width: 26px; - margin: 0; - padding: 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; - } - - @extend %titlebar; -} - - -/************ - * Pathbars * - ************/ - -.path-bar button { - padding: 5px 6px 6px; - &:first-child { padding-left: 8px; } - &:last-child { padding-right: 8px; } - &:only-child { - padding-left: 12px; - padding-right: 12px; - } - - // the following is for spacing the icon and the label inside the home button - & label:last-child { padding-left: 2px; } - & label:first-child { padding-right: 2px; } - & label:only-child { padding-right: 0; padding-left: 0; } - image { padding-top: 1px; } -} - - -/************** - * Tree Views * - **************/ -treeview.view { - - 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 { - border-radius: 0; - @extend %selected_items; - } - - &:selected, &:backdrop:selected { - 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($selected_fg_color, $selected_bg_color, 50%); } - } - &:backdrop { color: $insensitive_fg_color; } - } - - &.separator:backdrop { - min-height: 2px; - color: transparentize(black, 0.9); - } - - &:backdrop { - color: $backdrop_fg_color; - border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); - border-top: $backdrop_bg_color; - } - - &.dnd { - border-style: solid none; - border-width: 1px; - border-color: mix($fg_color, $selected_bg_color, 50%); - } - - &.expander { - // GtkTreeView uses the larger of the expander’s min-width and min-height - min-width: 24px; - min-height: 24px; - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } - color: mix($fg_color, $base_color, 70%); - &:hover { color: $fg_color; } - &:selected { - color: mix($selected_fg_color, $selected_bg_color, 70%); - &:hover { color: $selected_fg_color; } - &:backdrop { color: mix($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 - color: $base_color; - - border: 1px solid $selected_borders_color; - border-radius: 4px; - background-color: $fg_color; - - &:selected { color: $selected_bg_color; } - - &:backdrop { - color: $selected_bg_color; - border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) - background-color: $backdrop_base_color; - } - } - - &.trough { // progress bar trough in treeviews - background-color: transparentize($fg_color,0.9); - border-radius: 4px; - - &:selected { - background-color: transparentize($selected_fg_color, 0.7); - border-width: 1px 0; - border-style: solid; - border-color: $selected_bg_color; - } - } - - header { - button { - @extend %column_header_button; - $_column_header_color: mix($fg_color,$base_color,50%); - color: $_column_header_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; - } - &:active { - @extend %column_header_button; - color: $selected_fg_color; - } - } - & button:last-child, - & button:last-child:hover, - & button:last-child:backdrop { //treeview-like derived widgets in Banshee and Evolution - border-right-style: none; - } - } -} - -%column_header_button { - padding: 3px 6px; - border-style: none solid solid none; - border-radius: 0; - border-width: 1px; - background-image: none; - border-color: mix($backdrop_fg_color, $backdrop_bg_color,50%); - text-shadow: none; - &:disabled { - border-color: $bg_color; - background-image: none; - } - &:backdrop { - border-color: mix($backdrop_fg_color, $backdrop_bg_color,50%); - border-style: none solid solid none; - color: mix($backdrop_fg_color, $backdrop_bg_color,50%); - background-image: none; - background-color: $backdrop_base_color; - &:disabled { - border-color: $backdrop_bg_color; - background-image: none; - } - } -} - -treeview.view.progressbar { //Progressbar in treeview cells - color: $base_color; - border-radius: 4px; - background-image: linear-gradient(to bottom, - $selected_bg_color, - darken($selected_bg_color,10%)); - &:selected { - color: $selected_bg_color; - background-image: linear-gradient(to bottom, - $base_color, - darken($base_color,10%)); - &:backdrop { - color: $selected_bg_color; - background-image: none; - background-color: $backdrop_base_color; - } - } - &:backdrop { - color: $backdrop_base_color; - background-image: none; - } -} - -/********* - * Menus * - *********/ -menubar, -.menubar { - padding: 0px; - box-shadow: inset 0 -1px $borders_color; - & > menuitem { - padding: 4px 8px; - &:hover { //Seems like it :hover even with keyboard focus - box-shadow: inset 0 -3px $selected_bg_color; - color: $selected_bg_color; - } - &:disabled { - color: $insensitive_fg_color; - box-shadow: none; - } - } -} - -menu, -.menu { - margin: 4px; - padding: 0px; - background-color: $base_color; - border: 1px solid $borders_color; - & menuitem { - text-shadow: none; - padding: 4px; - min-width: 40px; - &:hover { - color: $selected_fg_color; - background-color: $selected_bg_color; - } - &:disabled { - color: $insensitive_fg_color; - &:backdrop { color: $insensitive_fg_color; } - } - &:backdrop, &:backdrop:hover { - color: $backdrop_fg_color; - background-color: $backdrop_base_color; - } - //submenu indicators - & arrow { - min-height: 16px; - min-width: 16px; - } - & arrow:dir(ltr) { - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - margin-left: 10px; - } - & arrow:dir(rtl) { - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); - margin-right: 10px; - } - } -} - -menuitem { - & check, - & radio { - min-height: 16px; - min-width: 16px; - &:dir(ltr) { margin-right: 7px; } - &:dir(rtl) { margin-left: 7px; } - } -} - -/*************** - * Popovers * - ***************/ - -popover.background { - padding: 2px; - border-radius: 5px; - background-color: $popover_bg_color; - - &, .csd & { border: 1px solid $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; } - - checkbutton, - radiobutton { @extend %modelbutton_flat; } -} - -/***************** - * Notebooks and * - * Tabs * - *****************/ - -notebook { - // Through me you go to the grief wracked city; - // Through me you go to everlasting pain; - // Through me you go a pass among lost souls. - // ... - // Abandon all hope — Ye Who Enter Here - padding: 0; - background-color: $base_color; - transition: all 200ms ease-out; - &:backdrop { - background-color: $backdrop_base_color; - } - &.frame { - border: 1px solid $borders_color; - &:backdrop { border-color: $backdrop_borders_color; } - } - & header { - // FIXME: double borders in some case, can't fix it w/o a class tho - // FIXME: doesn't work on dark var - background-color: mix($bg_color, $borders_color, 85%); - - // this is the shading of the header behind the tabs - .frame & { - border: 1px solid $borders_color; - &.top { border-bottom-width: 0; } - &.bottom { border-top-width: 0; } - &.right { border-left-width: 0; } - &.left { border-right-width: 0; } - &:backdrop { border-color: $backdrop_borders_color; } - } - - $_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85); - &.top { - box-shadow: $_header_shade, - inset 0 -1px $borders_color; // border - &:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; } - } - &.bottom { - box-shadow: $_header_shade, - inset 0 1px $borders_color; - &:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; } - } - &.right { - box-shadow: $_header_shade, - inset 1px 0 $borders_color; - &:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; } - } - &.left { - box-shadow: $_header_shade, - inset -1px 0 $borders_color; - &:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; } - } - &:backdrop { - // same color as backdrop pushed button - background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%); - box-shadow: none; - } - & tabs arrow { - color: $insensitive_fg_color; - &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); } - &:checked { color: $fg_color; } - &:disabled { color: transparentize($insensitive_fg_color,0.7); } - &:backdrop { color: transparentize($backdrop_fg_color,0.6); } - } - } - //vertical tab sizing - $vt_vpadding: 8px; - $vt_hpadding: 20px; - // horizontal tab sizing - $ht_vpadding: 5px; - $ht_hpadding: 20px; - $tab_indicator_size: 3px; - - & header.top tab { - padding: $vt_vpadding $vt_hpadding; - border-bottom-width: $tab_indicator_size; - &.reorderable-page { - padding-left: 12px; // for a nicer close button - padding-right: 12px; // placement - border-left-width: 1px; - border-right-width: 1px; - } - } - & header.bottom tab { - padding: $vt_vpadding $vt_hpadding; - border-top-width: $tab_indicator_size; - &.reorderable-page { - padding-left: 12px; // for a nicer close button - padding-right: 12px; // placement - border-left-width: 1px; - border-right-width: 1px; - } - } - & header.left tab { - padding: $ht_vpadding $ht_hpadding; - border-right-width: $tab_indicator_size; - &.reorderable-page { - border-bottom-width: 1px; - border-top-width: 1px; - } - } - & header.right tab { - padding: $ht_vpadding $ht_hpadding; - border-left-width: $tab_indicator_size; - &.reorderable-page { - border-bottom-width: 1px; - border-top-width: 1px; - } - } - - & tab { - border-width: 0; - border-style: solid; - border-color: transparent; - background-color: transparent; - - outline-offset: 0; - - //here's the interesting stuff - &:hover { - border-color: $borders_color; - } - &:checked, &:backdrop:checked { - border-color: $selected_bg_color; - } - &:backdrop { - background-color: transparent; - border-color: transparent; - } - @each $_tab, $_border in (top, bottom), - (bottom, top), - (left, right), - (right, left) { - .#{$_tab} &.reorderable-page { - border-color: transparent; - &:hover { - border-color: transparentize($borders_color,0.7); - border-#{$_border}-color: $borders_color; - background-color: transparentize($bg_color,0.8); - } - &:checked { - background-color: transparentize($bg_color,0.5); - border-color: transparentize($borders_color,0.5); - border-#{$_border}-color: $selected_bg_color; - &:hover { background-color: transparentize($bg_color,0.3); } - &:backdrop { - border-color: $backdrop_borders_color; - background-color: $backdrop_bg_color; - border-#{$_border}-color: $selected_bg_color; - } - } - &:backdrop { - border-color: transparent; - background-color: transparent; - } - } - } - label { //tab text - padding: 0 2px; // needed for a nicer focus ring - font-weight: bold; - color: mix($fg_color, $insensitive_fg_color, 50%); /* color: inherit doesn't work here */ - &:backdrop { - color: $insensitive_fg_color; - } - } - &:hover label { - // prelight tab text - color: mix($fg_color, $insensitive_fg_color, 75%); - } - &:checked label { - // active tab text - color: $fg_color; - &:backdrop { color: $backdrop_fg_color; } - } - button { //tab close button - border: 2px solid transparent; - @extend %undecorated_button; - -gtk-icon-shadow: none; - transition: none; - color: transparentize($fg_color,0.7); - &:hover { - color: $fg_color; - @include button(hover, $edge: none); - border-width: 2px; - background-image: none; - box-shadow: none; - } - &:checked { - @include button(active, $edge: none); - border-width: 2px; - } - &:backdrop, &:backdrop:hover { - color: transparentize($backdrop_fg_color,0.7); - border-color: transparent; - border-width: 2px; - } - & > image { // this is a hack which makes tabs grow - padding: 2px; - } - } - } -} - -//.notebook > .frame, -//.notebook > .view { border: none; } - -/************** - * Scrollbars * - **************/ -scrollbar { - $_slider_min_length: 40px; - - background-color: $scrollbar_bg_color; - transition: 300ms $ease-out-quad; - - // scrollbar border - &.top { border-bottom: 1px solid $borders_color; } - &.bottom { border-top: 1px solid $borders_color; } - &.left { border-right: 1px solid $borders_color; } - &.right { border-left: 1px solid $borders_color; } - - &:backdrop { - background-color: $backdrop_scrollbar_bg_color; - border-color: $backdrop_borders_color; - } - - // slider - slider { - min-width: 14px; - min-height: 14px; - margin: -1px; - border: 4px solid transparent; - border-radius: 12px; - 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 2px; - min-width: $_slider_min_length; - } - - button { - margin: 1px 2px; - min-width: 5px; - } - } - - &.vertical { - slider { - margin: 2px 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: 12px; - min-height: 12px; - 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 { - font-size: smaller; - font-stretch: condensed; - font-weight: bold; - outline-offset: -4px; - // similar to the .scale - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: $borders_color; - background-color: $dark_fill; - box-shadow: inset 0 1px transparentize(black, 0.9); /*outset not working*/ - text-shadow: 0 1px transparentize(black, 0.9); - &:active { - color: $selected_fg_color; - border-color: $selected_borders_color; - background-color: $selected_bg_color; - text-shadow: 0 0 2px white; - } - &: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_bg_color; - box-shadow: none; - text-shadow: none; - &:checked { - color: $selected_fg_color; - border-color: $backdrop_borders_color; - background-color: $backdrop_borders_color; - box-shadow: none; - } - &:disabled, &:disabled:checked { - background-color: $insensitive_bg_color; - color: $insensitive_fg_color; - border-color: $insensitive_fg_color; - } - } - - slider { - margin: -1px; - min-width: 45px; - min-height: 27px; - border: 2px solid; - border-radius: 3px; - @include button(normal); - } - - &:hover slider { @include button(hover); } - - &:checked slider { border: 2px solid $selected_borders_color; } - - &:disabled slider { @include button(insensitive); } - - &:backdrop { - slider { @include button(backdrop); } - - &:checked slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); } - - &:disabled slider { @include button(backdrop-insensitive); } - } -} - -/************************* - * 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 - - -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; } - } - - &:disabled { - &:active, &:indeterminate, & { - // set insensitive color, which is overriden otherwise - color: $insensitive_fg_color; - - &:backdrop { color: $insensitive_fg_color; } - } - } -} - -check, -radio { - margin: 0 4px; - - &:only-child { margin: 0; } - - min-height: 14px; - min-width: 14px; - border: 1px solid; - -gtk-icon-source: none; - -gtk-icon-size: 14px; - - @include button(normal); - - &:hover { @include button(hover); } - &:active { @include button(active); } - &:disabled { @include button(insensitive); } - &:backdrop { - @include button(backdrop); - - &:disabled { @include button(backdrop-insensitive); } - } - - @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: $selected_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 - - &, &: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; - animation: none; - } - } -} - -%check, -check { - border-radius: 3px; - - &: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"))); } -} - -// let's animate things -@keyframes check_check { - from { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); } - to { -gtk-icon-transform: unset; } -} - -@keyframes check_radio { - from { -gtk-icon-transform: scale(0); } - to { -gtk-icon-transform: unset; } -} - -@keyframes check_indeterminate { - from { -gtk-icon-transform: scale(0, 1); } - to { -gtk-icon-transform: unset; } -} - -check:not(:indeterminate):checked { animation: check_check 400ms; } - -radio:not(:indeterminate):checked { animation: check_radio 400ms; } - -check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate 400ms; } - -// no animations in menus -menu menuitem { - check:not(:indeterminate):checked, - radio:not(:indeterminate):checked, - check:indeterminate:checked:active, - radio:indeterminate:checked { animation: none; } -} - - -// treeview stuff, let's the fun begin: -treeview.view check:selected { - &:focus, &:backdrop, & { - &:disabled, & { - @extend %check; - } - } -} - -treeview.view radio:selected { - &:focus, &:backdrop, & { - &:disabled, & { - @extend %radio; - } - } -} - -treeview.view check, -treeview.view radio { - &:selected { - &:focus, &:hover, & { color: $selected_fg_color; } - - &:backdrop { - &:hover, & { - color: $selected_fg_color; - border-color: $selected_fg_color; - } - - &:disabled { - color: $insensitive_fg_color; - border-color: $insensitive_fg_color; - } - } - - &:disabled { color: $insensitive_fg_color;} - } -} - - - -/************ - * GtkScale * - ************/ -%scale_trough { - border: 2px solid $borders_color; - border-radius: 4px; - background-color: $dark_fill; - box-shadow: none; - - &:disabled { - border-color: $insensitive_borders_color; - background-color: $insensitive_bg_color; - } - - &:backdrop { - background-color: $backdrop_dark_fill; - border-color: $backdrop_borders_color; - - &:disabled { background-color: $insensitive_bg_color; border-color: $insensitive_borders_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); - box-shadow: none; - - &:disabled { background-color: $insensitive_bg_color; } - } -} - -%scale_highlight { - border: 2px solid $selected_borders_color; - border-radius: 4px; - background-color: $selected_bg_color; - - &:disabled { - background-color: transparent; - border-color: transparent; - } - - &:backdrop { - border-color: $backdrop_dark_fill; - &: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: 12px; - - fill, - highlight { margin: -1px; } - - slider { - min-height: 18px; - min-width: 18px; - margin: -9px; - } - - &.fine-tune { - &.horizontal { - padding-top: 9px; - padding-bottom: 9px; - min-height: 16px; - } - - &.vertical { - padding-left: 9px; - padding-right: 9px; - min-width: 16px; - } - - slider { margin: -6px; } - - fill, - highlight, - trough { - border-radius: 5px; - } - } - - // the backing bit - trough { - @extend %scale_trough; - - outline-offset: 2px; - } - - // 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; - box-shadow: none; - } - - &: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; - } - } - } - } - - slider { - @include button(normal); - - border: 2px solid $borders_color; - border-radius: 100%; - - &:hover { @include button(hover); } - - &:active { border-color: $selected_borders_color; } - - &:disabled { @include button (insensitive); } - - &:backdrop { - @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: $osd_borders_color; - background-color: opacify($osd_bg_color, 1); // solid background needed here - - &:hover { @include button(osd-hover); } - - &:active { @include button(osd-active); } - - &:disabled { @include button(osd-insensitive); } - - &:backdrop { - @include button(osd-backdrop); - - &:disabled { @include button(osd-backdrop-insensitive); } - } - } - } - - value { color: gtkalpha(currentColor, 0.4); } - - marks { - color: gtkalpha(currentColor, 0.4); - - @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), - (bottom, bottom, top), - (top, left, right), - (bottom, right, left) { - &.#{$marks_class} { - margin-#{$marks_margin}: $_marks_distance; - margin-#{$marks_pos}: -($_marks_distance + $_marks_length); - } - } - } - - &.fine-tune marks { - @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), - (bottom, bottom, top), - (top, left, right), - (bottom, right, left) { - &.#{$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); } - } -} - - -/***************** - * Progress bars * - *****************/ - -//FIXME it's a wip ok? - -progressbar { - padding: 0; - font-size: 83%; - color: $fg_color; - - &:backdrop { - color: $insensitive_fg_color; - } - - trough { - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: $borders_color; - background-color: mix($borders_color,$bg_color, 35%); - box-shadow: inset 1px 1px transparentize(black, 0.9); - - &:backdrop { - border-color: $backdrop_borders_color; - background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%); - box-shadow: 0 1px transparentize(white,1); - } - } - - &.osd trough { - background-color: transparent; - box-shadow: none; - border-width: 0; - //FIXME: there is a margin on top - } - - // moving bit - &.horizontal { - trough { min-width: 150px; } - trough, progress { min-height: 2px; } - } - - &.vertical { - trough { min-height: 80px; } - trough, progress { min-width: 2px; } - } - - & progress { - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: $selected_borders_color; - background-color: $selected_bg_color; - - // I really prefer these flat w/o this shadow - Lapo - box-shadow: inset 0 1px 0 transparentize($borders_edge,0.8); - - &.vertical { - box-shadow: inset 1px 0 0 transparentize($borders_edge,0.8); - } - - &:backdrop { - border-color: $selected_bg_color; - background-color: $selected_bg_color; - box-shadow: none; - } - - &.osd { - border-width: 0; - border-radius: 0; - } - } - - trough.empty progress { all: unset; } // make the progress indicator disappear when the fraction is 0 -} - -/************* - * Level Bar * - *************/ - -levelbar { - & trough { - // FIXME: outset not working - padding: 2px; - border-radius: 3px; - @include entry(normal); - &:backdrop { - @include entry(backdrop); - } - } - - &.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; - } - } - - & block.filled.low { - border-color: darken($warning_color,10%); - background-color: $warning_color; - &:backdrop { border-color: $warning_color; }; - } - & block.filled.high { - border-width: 1px; - border-style: solid; - border-color: darken($selected_bg_color,10%); - background-color: $selected_bg_color; - box-shadow: 0 1px transparentize(black, 0.9); - border-radius: 1px; - &:backdrop { - border-color: $selected_bg_color; - box-shadow: none; - } - } - & block.filled.full { - border-color: darken($success_color,10%); - background-color: $success_color; - &:backdrop { border-color: $success_color; } - } - & block.empty { - border-width: 1px; - border-style: solid; - background-color: transparent; - border-color: transparentize($fg_color,0.8); - border-radius: 1px; - box-shadow: none; - &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); } - } -} - - -// catch all extend :) - -%selected_items { - background-color: $selected_bg_color; - color: $selected_fg_color; - &:backdrop { background-color: $borders_color; color: $selected_fg_color; } -} - -.monospace { font-family: monospace; } - - -/********** - * frames * - **********/ -frame, -.frame { - border: 1px solid $borders_color; - &.flat { border-style: none; } - &:backdrop { border-color: $backdrop_borders_color; } - padding: 0; -} - -actionbar > revealer > box { - padding: 6px; - border-width: 1px 0 0; - border-color: $borders_color; - border-style: solid none none; -} - -placessidebar, -scrolledwindow { - .frame { border-radius: 2px; } - viewport.frame { // avoid double borders when viewport inside scrolled window - border-style: none; - } - // This is used when content is touch-dragged past boundaries. - 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); } - } - } - - // works similarly to the overshoot, the size if fixed tho. - undershoot { - &.top { - @include undershoot(top); - } - &.bottom { - @include undershoot(bottom); - } - &.left { - @include undershoot(left); - } - &.right { - @include undershoot(right); - } - } - - junction { // the small square between two scrollbars - border-color: transparent; - background-color: darken($bg_color, 5%); - &:backdrop { background-color: transparent; } - } - -} - -//vbox and hbox separators -separator { - background: $borders_color; - min-width: 1px; - min-height: 1px; -} - -/********* - * Lists * - *********/ - -list { - background-color: $base_color; - border-color: $borders_color; - &:backdrop { - background-color: $backdrop_base_color; - border-color: $backdrop_borders_color; - } - & row { - padding: 2px; - } -} - -row.activatable, -row.activatable:backdrop, -row.activatable:backdrop:active, -row.activatable:backdrop:checked, -row.activatable:backdrop:disabled, -row.activatable:backdrop:disabled:active, -row.activatable:backdrop:disabled:checked, -row.activatable:disabled:active, -row.activatable:disabled:checked { - // reset button inherited stuff - @extend %undecorated_button; - background-color: transparentize($base_color,1); // for the transition - border-style: none; // I need no borders here - border-radius: 0; // and no rounded corners - box-shadow: none; // and no box-shadow -} - -row { - &.activatable { - color: $fg_color; - &:hover { - background-color: mix($fg_color, $base_color, 5%); - } - &:active { - box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); - } - &:selected { - @extend %selected_items; - background-color: $selected_bg_color; - color: $selected_fg_color; - &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } - &:hover { - background-color: mix($fg_color, $selected_bg_color, 10%); - } - &:backdrop { background-color: $borders_color; } - .button.flat { - color: $selected_fg_color; - &:hover { color: $fg_color; } - &:active { color: $selected_fg_color; } - } - } - } - .button.flat { - color: $fg_color; - &:active { color: $selected_fg_color; } - } -} - - -// transition -row, -row.activatable { - transition: all 300ms $ease-out-quad; - &:hover { transition: none; } -} - - -/********************* - * App Notifications * - *********************/ - -.app-notification, -.app-notification.frame { - padding: 10px; - border-width: 0 1px 1px; - border-style: solid; - border-color: $borders_color; - border-radius: 0 0 6px 6px; - background-image: linear-gradient(to bottom, mix(black, $bg_color, 6%) 5%, - mix(black, $bg_color, 4%)); - // FIXME no space for outer shadow : box-shadow: 0 1px 1px rgba(0,0,0,.5); - .button { padding: 6px; } - border { border-width: 0; } -} - -/************* - * Expanders * - *************/ - -expander { - min-width: 24px; - min-height: 24px; - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } - - &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } - - &:disabled { color: $insensitive_fg_color; } -} - -expander-widget title:hover > expander { - color: lighten($fg_color,30%); //only lightens the icon -} - -/************ - * Calendar * - ***********/ -calendar { - border: 1px solid $borders_color; - &:selected { - @extend %view_selected; - } - &.button { - @extend %undecorated_button; - padding: 0 4px; //FIXME no effect on these pseudobuttons - color: mix($fg_color, $base_color, 40%); //we need a dimmed stuff var - &:hover { - @extend %undecorated_button; - color: $fg_color; - } - &:backdrop, &:backdrop:hover { - @extend %undecorated_button; - color: mix($backdrop_fg_color, $backdrop_base_color, 50%); - } - } - &.view { border-radius: 2px; } - &.header { - background: linear-gradient(to bottom, - lighten($bg_color,2%), - darken($bg_color,2%)); - border-bottom-color: mix($borders_color,$bg_color,50%); - &:backdrop { - background-image: _solid($backdrop_bg_color); - border-bottom-color: mix($backdrop_borders_color,$backdrop_bg_color,50%); - } - } - - &:indeterminate, &:indeterminate:backdrop { color: gtkalpha(currentColor, 0.55); } - &.highlight, &.highlight:backdrop { color: $fg_color; } -} - - -/*********** - * Dialogs * - ***********/ - -messagedialog .dialog-action-area button { - padding: 8px; -} - -messagedialog { // Message Dialog styling - .titlebar { - border-style: none; - box-shadow: inset 0 1px $borders_edge; - } - - &.csd { // rounded bottom border styling for csd version - &.background { - // bigger radius for better antialiasing - border-bottom-left-radius: 9px; - border-bottom-right-radius: 9px; - } - - .dialog-action-area button { - padding: 12px; - border-radius: 0; - - @include button(normal, $edge: none); - @extend %middle_button; - - &:hover { - @include button(hover, $edge: none); - @extend %middle_button; - } - - &:active { - @include button(active, $edge: none); - @extend %middle_button; - } - - &:disabled { - @include button(insensitive, $edge: none); - @extend %middle_button; - } - - &:backdrop { - @include button(backdrop, $edge: none); - @extend %middle_button; - } - &:backdrop:disabled { - @include button(backdrop-insensitive, $edge: none); - @extend %middle_button; - } - - @each $b_type, $b_color in (suggested-action, $suggested_color), - (destructive-action, $destructive_color) { - &.#{$b_type} { - @include button(normal, $b_color, white, $edge: none); - @extend %middle_button; - - &:hover { - @include button(hover, $b_color, white, $edge: none); - @extend %middle_button; - } - - &:active { - @include button(active, $b_color, white, $edge: none); - @extend %middle_button; - } - - &:backdrop { - @include button(backdrop, $b_color, white); - @extend %middle_button; - - &:disabled { - @include button(backdrop-insensitive); - @extend %middle_button; - } - } - - &:disabled { - @include button(insensitive); - @extend %middle_button; - } - } - } - - &:first-child{ @extend %first_button; } - &:last-child { @extend %last_button; } - } - - %middle_button { - border-right-style: none; - border-bottom-style: none; - } - - %last_button { - border-bottom-right-radius: 7px; - } - - %first_button { - border-left-style: none; - border-bottom-left-radius: 7px; - } - } -} - -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: none; - &:backdrop { - background-color: $bg_color; - } - - &:selected { - @extend %selected_items; - } - - & > scrolledwindow > .frame { - border-right: 1px solid $borders_color; - &:dir(rtl) { - border-right: none; - border-left: 1px solid $borders_color; - } - } -} - -stacksidebar { - & row { - padding: 10px 4px; - > label { - padding-left: 6px; - padding-right: 6px; - } - &.needs-attention > label { - @extend %needs_attention; - background-size: 6px 6px, 0 0; - } - } -} - -/**************** - * File chooser * - ****************/ -$_placesidebar_icons_opacity: 0.7; - -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; - } - - & image.sidebar-icon { - opacity: $_placesidebar_icons_opacity; // dim the device icons - - &: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%; - - &: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: _solid($fg_color); - background-clip: content-box; - } - - &.sidebar-new-bookmark-row { color: $selected_bg_color; } - - &:drop(active):not(:disabled) { - color: $fg_color; - box-shadow: inset 0 1px $fg_color, - inset 0 -1px $fg_color; - - &:selected { - color: $selected_fg_color; - background-color: $fg_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; } -} - - -/********* - * Paned * - *********/ - - -paned { - > separator { - min-width: 1px; - min-height: 1px; - background-image: _solid($borders_color); - - &:backdrop { - background-image: _solid($backdrop_borders_color); - } - } - - &:dir(ltr).horizontal > separator { - margin: 0 -8px 0 0; - padding: 0 8px 0 0; - } - &:dir(rtl).horizontal > separator { - margin: 0 0 0 -8px; - padding: 0 0 0 8px; - } - - &.vertical > separator { - margin: 0 0 -8px 0; - padding: 0 0 8px 0; - } - - > separator:selected { - background-color: $selected_bg_color; - } - - > separator.wide { - min-width: 5px; - min-height: 5px; - background-color: transparent; - border-style: none solid; - border-color: $borders_color; - border-width: 1px; - } -} - -/************** - * GtkInfoBar * - **************/ -infobar { - border-width: 0; - border-style: none; -} - -.info, -.question, -.warning, -.error { - background-color: $selected_bg_color; - color: $selected_fg_color; - text-shadow: 0 1px darken($selected_bg_color, 10%); - border-color: darken($selected_bg_color, 10%); - button { - @include button(normal, $selected_bg_color, $selected_fg_color, $edge: none); - &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $edge: none); } - &:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); } - &:disabled { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } - &:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none); } - &:backdrop:disabled { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } - } - label:selected, - label:selected:focus, - label:selected:hover { - background-color: lighten($selected_bg_color, 20%); - } -} - -/************ - * 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: $bg_color; - background-clip: padding-box; - border: 2px solid $fg_color; - } - - padding: 4px; /* not working */ - border-radius: 5px; - box-shadow: none; // otherwise it gets inherited by windowframe.csd - - // 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: $fg_color; - } -} - - -/***************** - * 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{}, GtkColorSwatch has the programmatically set background, so most of the style - // is applied to the overlay box. - - $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge(); - - box-shadow: $_colorswatch_shadow; - - // take care of colorswatches on selected elements - :selected & { - box-shadow: none; - & overlay, & overlay:hover { - border-color: $selected_fg_color; - } - } - - // we need to re-set the shadow here since it get axed by the previous bit - &:selected { box-shadow: $_colorswatch_shadow; } - - // border rounding - &.top { - border-top-left-radius: 6px; - border-top-right-radius: 6px; - } - &.bottom { - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - } - &.left, &:first-child:not(overlay):not(.top) { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - } - &.right, &:last-child:not(overlay):not(.bottom) { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; - } - &:only-child:not(overlay) { border-radius: 6px; } - - // overlay corner rounding - &.top > overlay { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } - &.bottom > overlay { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - } - &:first-child:not(.top) > overlay { - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - } - &:last-child:not(.bottom) > overlay { - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - } - &:only-child > overlay { border-radius: 5px; } - - // nth-child is used for the custom colors row. - // the :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay - // and GtkColorSwatch.overlay, I know it's weird, but this is GTK. - - // hover effect - &.activatable:hover, - &.activatable:hover:selected { - background-image: linear-gradient(135deg, transparentize(white, 0.3), - transparentize(white, 1) 50%); - box-shadow: inset 0 1px transparentize(white, 0.6), - inset 0 -1px transparentize(black, 0.6); - } - &:backdrop, - &:backdrop:selected, - &.dark:backdrop, - &.dark:backdrop:selected { - background-image: none; - box-shadow: none; - } - - // indicator and keynav outline colors, color-dark is a color with luminosity lower then 50% - &.dark { - color: white; - border: 1px solid transparentize(black, 0.7); - &:hover { border-color: transparentize(black, 0.5); } - &:backdrop { color: transparentize(white, 0.7); } - } - &.light { - color: black; - border: 1px solid transparentize(black, 0.7); - &:hover { border-color: transparentize(black, 0.5); } - &:backdrop { color: transparentize(black, 0.7); } - } - - // border color - & overlay, - & overlay:selected { - background: none; - border: none; - } - - // make the add color button looks like, well, a button - &#add-color-button { - @include button(normal); - &:hover { @include button(hover); } - &:backdrop { @include button(backdrop); } - & overlay { border-width: 0; background: none; } - } -} - - -/********************** - * Window Decorations * - *********************/ - -decoration { - border-radius: 7px 7px 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: transparentize($fg_color, 0.77); - $_wm_border_backdrop: transparentize($fg_color, 0.82); - - box-shadow: 0 3px 9px 1px transparentize(black, 0.5), - 0 0 0 1px $_wm_border; //doing borders with box-shadow - - /* this is used for the resize cursor area */ - margin: 10px; - - &:backdrop { - box-shadow: 0 2px 6px 2px transparentize(black, 0.8), - 0 3px 9px 1px transparent, - 0 0 0 1px $_wm_border_backdrop; - } - - .tiled & { - border-radius: 0; - } - - .csd.popup & { - border-radius: 0; - 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: 7px; - box-shadow: 0 1px 2px transparentize(black, 0.8), - 0 0 0 1px transparentize($_wm_border, 0.1); - } - - .solid-csd & { - border-radius: 0; - margin: 4px; - background-color: $backdrop_bg_color; - border: solid 1px $backdrop_borders_color; - box-shadow: none; - } -} - -// Window Close button -button.titlebutton { - @extend %button_basic; - - @extend %button_basic_flat; -} - -/********************** - * Touch Copy & Paste * - *********************/ - -//touch selection handlebars for the Popover.osd above -cursor-handle { - background-color: $bg_color; - background-image: none; - -gtk-icon-source: none; - box-shadow: none; - outline-style: none; - outline-color: transparent; - border: 2px solid $fg_color; - @each $s,$as in ('',''), - (':hover','-hover'), - (':active','-active') { //no need for insensitive and backdrop - &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) { - border-radius: 10px 0 0 0; - padding-left: 10px; - } - &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) { - border-radius: 0 10px 0 0; - padding-right: 10px; - } - &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) { - border-radius: 10px 10px 0 0; - } - } -} - -/* Decouple the font of context menus from their entry/textview */ -.context-menu { - font: initial; -} - -.touch-selection { - font: initial; - color: $osd_fg_color; - border: none; - background-color: opacify($osd_bg_color,0.2); - background-clip: padding-box; - box-shadow: none; - text-shadow: 0 1px black; - -gtk-icon-shadow: 0 1px black; - &:backdrop { text-shadow: none; } - button { - @include button(osd); - &:hover { @include button(osd-hover); } - &:active, &:checked { @include button(osd-active); } - &:disabled, &:backdrop:disabled { @include button(osd-insensitive); } - &:backdrop { @include button(osd-backdrop); } - } - // checkboxes and radios to use the -dark style for OSD style popovers - @each $w,$a in ('check', 'checkbox'), - ('radio','radio') { - @each $s,$as in ('','-unchecked'), - (':hover', '-unchecked-hover'), - (':active', '-unchecked-active'), - (':disabled','-unchecked-insensitive'), - (':indeterminate', '-mixed'), - (':indeterminate:hover', '-mixed-hover'), - (':indeterminate:selected', '-mixed-active'), - (':indeterminate:disabled', '-mixed-insensitive'), - (':checked', '-checked'), - (':checked:disabled','-checked-insensitive'), - (':checked:hover', '-checked-hover'), - (':checked:active', '-checked-active'), - (':backdrop:checked', '-checked-backdrop') { - .#{$w}#{$s} { - -gtk-icon-shadow: none; - color: $osd_fg_color; - } - } - } -} - -button.circular { // FIXME: aggregate to buttons - border-radius: 20px; - - label { padding: 0; } - row:selected & { - color: $selected_fg_color; - &:hover { color: $fg_color; } - &:active { color: $selected_fg_color; } - } -} - -// shortcut window keys -.keycap { - min-width: 18px; - min-height: 25px; - margin-top: 3px; - padding-bottom: 2px; - padding-left: 6px; - padding-right: 6px; - - color: $fg_color; - background-color: $base_color; - border: 2px solid; - border-color: $borders_color; - border-radius: 5px; - box-shadow: inset 0 -3px mix($borders_color, $bg_color, 50%), - inset 0 -2px $bg_color, - inset 0 0 0 1px $base_color; - font-size: smaller; -} - -*:drop(active):focus, -*:drop(active) { - border-color: $fg_color; - box-shadow: inset 0 0 0 2px $fg_color; -} - -stackswitcher button.text-button { - min-width: 100px; -} - -stackswitcher button.circular { - min-width: 0px; -} - - -/********* - * Emoji * - ********/ - -popover.emoji-picker { padding-left: 0; padding-right: 0; } - -button.emoji-section, -button.emoji-section:backdrop { /* Dodge stuff inherited from backdrop button */ - 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; - - &:backdrop:not(:checked) { border-color: transparent; } - &:hover { border-color: $borders_color; } - &:checked { border-color: $selected_bg_color; } - - label { - padding: 0; - - opacity: 0.55; - } - - &:hover label { opacity: 0.775; } - - &:checked label { - opacity: 1; - - /* Dodge default inversion to white for non-flat, selected button */ - color: $fg_color; - } -} - -.emoji { - font-size: x-large; - padding: 6px; - border-radius: 6px; - - :hover { - background: $selected_bg_color; - color: $selected_fg_color; - } -} - -/**************** - * Print dialog * -*****************/ -printdialog { - drawing { - color: $fg_color; - background: none; - border: none; - padding: 0; - - &:backdrop { - color: $backdrop_fg_color; - border-color: $backdrop_borders_color; - } - - paper { - background: white; - color: black; - border: 1px solid $borders_color; - } - - } - - .dialog-action-box { margin: 12px; } -} - diff --git a/gtk/theme/HighContrast/_drawing.scss b/gtk/theme/HighContrast/_drawing.scss deleted file mode 100644 index 24efd5ef90..0000000000 --- a/gtk/theme/HighContrast/_drawing.scss +++ /dev/null @@ -1,378 +0,0 @@ -// Drawing mixins - -// generic drawing of more complex things -@function _widget_edge($c:$borders_edge) { -// outer highlight "used" on most widgets - @return 0 1px $c; -} - -@function _solid($c) { -// solid color image - @return linear-gradient(to bottom, $c, $c); -} - -@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { -// -// Helper function to stack up to 4 box-shadows; -// - @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } - @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } - @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } - @else { box-shadow: $shadow1; } -} - -// entries - -@function entry_focus_border($fc:$selected_bg_color) { - @if $variant == 'light' { @return $fc; } - @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); } -} - -@function entry_focus_glow($fc) { - $_focus_glow_color: transparentize($fc,0.85); - @return inset 0 0 0 1px $_focus_glow_color; -} - -@function entry_gradient($c) { - @return linear-gradient(to bottom, darken($c,3%), $c 90%); -} - -@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) { -// -// Entries drawing function -// -// $t: entry type -// $fc: focus color -// $edge:none set to true not to draw the bottom edge hilight -// -// possible $t values: -// normal, focus, insensitive, backdrop, backdrop-insensitive; -// - background-color: transparent; - border-style: solid; - background-image: linear-gradient(to bottom, - darken($base_color,3%), - $base_color 90%); - $_entry_edge: none; - - @if $t==normal { - color: $fg_color; - border-color: $borders_color; - @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%), - $_entry_edge); - } - @if $t==focus { - border-color: $fc; - @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%), - inset 0 0 0 1px $fc, - $_entry_edge); - } - @if $t==insensitive { - color: $insensitive_fg_color; - border-color: $borders_color; - background-image: _solid($insensitive_bg_color); - @include _shadows($_entry_edge); - } - @if $t==backdrop { - color: $backdrop_fg_color; - background-image: _solid($backdrop_base_color); - box-shadow: 0 1px transparentize(white,1); - } - @if $t==backdrop-insensitive { - color: $insensitive_fg_color; - background-image: _solid($backdrop_bg_color); - box-shadow: 0 1px transparentize(white,1); - } -} - -// buttons - -@mixin _button_border_color ($c) { border-color: darken($c,25%); } // colored buttons want the border form the base color - -@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { -// -// helper function for the text emboss effect -// -// $tc is the optional text color, not the shadow color -// -// TODO: this functions needs a way to deal with special cases -// - - $_dark: black; - $_bright: white; - - @if lightness($tc) < 50% { - text-shadow: 0 1px $_bright; - -gtk-icon-shadow: 0 1px $_bright; - } - @else { - text-shadow: 0 -1px $_dark; - -gtk-icon-shadow: 0 -1px $_dark; - } -} - -@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_color) { -// -// Button drawing function -// -// $t: button type, -// $c: base button color for colored* types -// $tc: optional text color for colored* types -// $noedge:none set to true not to draw the bottom edge hilight -// -// possible $t values: -// normal, hover, active, insensitive, insensitive-active, -// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active -// - border-width: 2px; - border-style: solid; - - $_top_hilight: if(lightness($c)> 70%, white, transparentize(white,0.9)); //not just dark/light but colored buttons - - @if $t==normal { - // - // normal button - // - color: $tc; - background-image: none; - background-color: $c; - - @if $c!=$bg_color { @include _button_border_color($c); } - @else { border-color: $borders_color; } - - } - - @else if $t==hover { - // - // hovered button - // - color: $tc; //fg_color - background-color: $c; - @if $c!=$bg_color { @include _button_border_color($c); } - @else { border-color: $borders_color; } - background-image: none; - - } - - @else if $t==active { - // - // pushed button - // - background-image: none; - color: invert($tc); - background-color: invert($c); - @if $c!=$bg_color { @include _button_border_color($c); } - @else { border-color: $borders_color; } - } - @else if $t==insensitive { - // - // insensitive button - // - color: $insensitive_fg_color; - background-color: $insensitive_bg_color; - border-color: $insensitive_borders_color; - background-image: none; - } - @else if $t==insensitive-active { - // - // insensitive pushed button - // - color: $insensitive_fg_color; - border-color: $insensitive_borders_color; - background-image: none; - background-color: $insensitive_bg_color; - } - - @else if $t==backdrop { - // - // backdrop button - // - color: if($c!=$bg_color, $tc, $backdrop_fg_color); - background-color: if($c!=$bg_color, $c, $backdrop_bg_color); - border-color: if($c!=$bg_color, $c, $backdrop_borders_color); - background-image: none; - } - - @else if $t==backdrop-active { - // - // backdrop pushed button - // - color: invert($backdrop_fg_color); - background-color: $backdrop_borders_color; - border-color: $backdrop_borders_color; - background-image: none; - } - - @else if $t==backdrop-insensitive { - // - // backdrop insensitive button - // - color: $insensitive_fg_color; - background-color: $insensitive_bg_color; - border-color: $insensitive_borders_color; - background-image: none; - } - - @else if $t==backdrop-insensitive-active { - // - // backdrop insensitive pushed button - // - color: $insensitive_fg_color; - border-color: $insensitive_borders_color; - background-image: none; - background-color: mix($backdrop_borders_color,$backdrop_bg_color, 8%); - } - - @else if $t==osd { - // - // normal osd button - // - color: $osd_fg_color; - background-image: none; - background-color: $osd_bg_color; - border-color: $osd_borders_color; - } - - @else if $t==osd-hover { - // - // active osd button - // - color: $osd_fg_color; - background-color: lighten($osd_bg_color,30%); - border-color: $osd_borders_color; - } - - @else if $t==osd-active { - // - // active osd button - // - color: $osd_bg_color; - background-color: $osd_fg_color; - border-color: $osd_borders_color; - box-shadow: none; - } - @else if $t==osd-insensitive { - // - // insensitive osd button - // - border-color: $osd_borders_color; - color: $insensitive_fg_color; - } - - @else if $t==undecorated { - color: $tc; - background-color: transparent; - background-image: none; - border-color: transparent; - } - - @else if $t==undecorated-insensitive { - color: $insensitive_fg_color; - background-color: transparent; - background-image: none; - border-color: transparent; - } -} - -@mixin overshoot($p, $t:normal, $c:$fg_color) { -// -// overshoot -// -// $p: position -// $t: type -// $c: base color -// -// possible $p values: -// top, bottom, right, left -// -// possible $t values: -// normal, backdrop -// - - $_small_gradient_length: 5%; - $_big_gradient_length: 100%; - - $_small_gradient_size: 100% $_small_gradient_length; - $_big_gradient_size: 100% $_big_gradient_length; - - @if $p==right or $p==left { - $_small_gradient_size: $_small_gradient_length 100%; - $_big_gradient_size: $_big_gradient_length 100%; - } - - $_small_gradient_color: $c; - $_big_gradient_color: transparentize($c, 0.93); - - @if $c==$fg_color { - $_small_gradient_color: darken($borders_color, 50%); - $_big_gradient_color: transparentize($fg_color, 0.93); - - @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } - } - - $_small_gradient: radial-gradient(ellipse farthest-side at $p, - $_small_gradient_color 85%, - transparentize($_small_gradient_color, 1)); - - $_big_gradient: radial-gradient(ellipse farthest-side at $p, - $_big_gradient_color, - transparentize($_big_gradient_color, 1)); - - @if $t==normal { - background-image: $_small_gradient, $_big_gradient; - background-size: $_small_gradient_size, $_big_gradient_size; - } - - @else if $t==backdrop { - background-image: $_small_gradient; - background-size: $_small_gradient_size; - } - - background-repeat: no-repeat; - background-position: $p; - - background-color: transparent; // reset some properties to be sure to not inherit them somehow - border: none; // - box-shadow: none; // -} - -@mixin undershoot($p) { -// -// undershoot -// -// $p: position -// -// possible $p values: -// top, bottom, right, left -// - - $_undershoot_color_dark: transparentize(black, 0.8); - $_undershoot_color_light: transparentize(white, 0.8); - - $_gradient_dir: left; - $_dash_bg_size: 10px 1px; - $_gradient_repeat: repeat-x; - $_bg_pos: center $p; - - background-color: transparent; // shouldn't be needed, but better to be sure; - - @if ($p == left) or ($p == right) { - $_gradient_dir: top; - $_dash_bg_size: 1px 10px; - $_gradient_repeat: repeat-y; - $_bg_pos: $p center; - } - - background-image: linear-gradient(to $_gradient_dir, // this is the dashed line - $_undershoot_color_light 50%, - $_undershoot_color_dark 50%); - - padding-#{$p}: 1px; - background-size: $_dash_bg_size; - background-repeat: $_gradient_repeat; - background-origin: content-box; - background-position: $_bg_pos; - border: none; - box-shadow: none; -} - diff --git a/gtk/theme/HighContrast/assets.svg b/gtk/theme/HighContrast/assets.svg new file mode 100644 index 0000000000..e432764588 --- /dev/null +++ b/gtk/theme/HighContrast/assets.svg @@ -0,0 +1,2249 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/gtk/theme/HighContrast/assets.txt b/gtk/theme/HighContrast/assets.txt new file mode 100644 index 0000000000..4b27b15e1b --- /dev/null +++ b/gtk/theme/HighContrast/assets.txt @@ -0,0 +1,60 @@ +text-select-end +text-select-end-hover +text-select-end-active +text-select-start +text-select-start-hover +text-select-start-active +text-select-end-dark +text-select-end-hover-dark +text-select-end-active-dark +text-select-start-dark +text-select-start-hover-dark +text-select-start-active-dark +slider-horz-scale-has-marks-below +slider-horz-scale-has-marks-below-hover +slider-horz-scale-has-marks-below-active +slider-horz-scale-has-marks-below-insensitive +slider-horz-scale-has-marks-below-backdrop +slider-horz-scale-has-marks-below-backdrop-insensitive +slider-vert-scale-has-marks-below +slider-vert-scale-has-marks-below-hover +slider-vert-scale-has-marks-below-active +slider-vert-scale-has-marks-below-insensitive +slider-vert-scale-has-marks-below-backdrop +slider-vert-scale-has-marks-below-backdrop-insensitive +slider-horz-scale-has-marks-above +slider-horz-scale-has-marks-above-hover +slider-horz-scale-has-marks-above-active +slider-horz-scale-has-marks-above-insensitive +slider-horz-scale-has-marks-above-backdrop +slider-horz-scale-has-marks-above-backdrop-insensitive +slider-vert-scale-has-marks-above +slider-vert-scale-has-marks-above-hover +slider-vert-scale-has-marks-above-active +slider-vert-scale-has-marks-above-insensitive +slider-vert-scale-has-marks-above-backdrop +slider-vert-scale-has-marks-above-backdrop-insensitive +slider-horz-scale-has-marks-below-dark +slider-horz-scale-has-marks-below-hover-dark +slider-horz-scale-has-marks-below-active-dark +slider-horz-scale-has-marks-below-insensitive-dark +slider-horz-scale-has-marks-below-backdrop-dark +slider-horz-scale-has-marks-below-backdrop-insensitive-dark +slider-vert-scale-has-marks-below-dark +slider-vert-scale-has-marks-below-hover-dark +slider-vert-scale-has-marks-below-active-dark +slider-vert-scale-has-marks-below-insensitive-dark +slider-vert-scale-has-marks-below-backdrop-dark +slider-vert-scale-has-marks-below-backdrop-insensitive-dark +slider-horz-scale-has-marks-above-dark +slider-horz-scale-has-marks-above-hover-dark +slider-horz-scale-has-marks-above-active-dark +slider-horz-scale-has-marks-above-insensitive-dark +slider-horz-scale-has-marks-above-backdrop-dark +slider-horz-scale-has-marks-above-backdrop-insensitive-dark +slider-vert-scale-has-marks-above-dark +slider-vert-scale-has-marks-above-hover-dark +slider-vert-scale-has-marks-above-active-dark +slider-vert-scale-has-marks-above-insensitive-dark +slider-vert-scale-has-marks-above-backdrop-dark +slider-vert-scale-has-marks-above-backdrop-insensitive-dark diff --git a/gtk/theme/HighContrast/assets/bullet@2-symbolic.symbolic.png b/gtk/theme/HighContrast/assets/bullet@2-symbolic.symbolic.png new file mode 100644 index 0000000000..e9df4256c0 Binary files /dev/null and b/gtk/theme/HighContrast/assets/bullet@2-symbolic.symbolic.png differ diff --git a/gtk/theme/HighContrast/assets/check@2-symbolic.symbolic.png b/gtk/theme/HighContrast/assets/check@2-symbolic.symbolic.png new file mode 100644 index 0000000000..f7c143fcc7 Binary files /dev/null and b/gtk/theme/HighContrast/assets/check@2-symbolic.symbolic.png differ diff --git a/gtk/theme/HighContrast/assets/dash@2-symbolic.symbolic.png b/gtk/theme/HighContrast/assets/dash@2-symbolic.symbolic.png new file mode 100644 index 0000000000..d2b3385ee1 Binary files /dev/null and b/gtk/theme/HighContrast/assets/dash@2-symbolic.symbolic.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active-dark.png new file mode 100644 index 0000000000..8c8bac8ddf Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active-dark@2.png new file mode 100644 index 0000000000..877ee5e2da Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active.png new file mode 100644 index 0000000000..3651a31c3e Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active@2.png new file mode 100644 index 0000000000..80b8bd04f7 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-active@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-dark.png new file mode 100644 index 0000000000..92467aaa87 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-dark@2.png new file mode 100644 index 0000000000..b6ad2e839b Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive-dark.png new file mode 100644 index 0000000000..2f95c9b2d9 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive-dark@2.png new file mode 100644 index 0000000000..435dc8ba1e Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive.png new file mode 100644 index 0000000000..6279ce258d Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive@2.png new file mode 100644 index 0000000000..b9002ed698 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop-insensitive@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop.png new file mode 100644 index 0000000000..015bdc1470 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop@2.png new file mode 100644 index 0000000000..72f416055e Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-backdrop@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-dark.png new file mode 100644 index 0000000000..63876741b2 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-dark@2.png new file mode 100644 index 0000000000..c53532cd9d Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover-dark.png new file mode 100644 index 0000000000..170a4d6ef7 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover-dark@2.png new file mode 100644 index 0000000000..a540c03db3 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover.png new file mode 100644 index 0000000000..abee80382b Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover@2.png new file mode 100644 index 0000000000..e14fe5890f Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-hover@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive-dark.png new file mode 100644 index 0000000000..f449b24556 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive-dark@2.png new file mode 100644 index 0000000000..a43dd89533 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive.png new file mode 100644 index 0000000000..3daebf6d59 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive@2.png new file mode 100644 index 0000000000..fb59359e92 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above-insensitive@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above.png new file mode 100644 index 0000000000..af90ecbfaa Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above@2.png new file mode 100644 index 0000000000..44faf90f20 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-above@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active-dark.png new file mode 100644 index 0000000000..76ee981e22 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active-dark@2.png new file mode 100644 index 0000000000..f0c5b9f3ae Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active.png new file mode 100644 index 0000000000..0a9e75eba2 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active@2.png new file mode 100644 index 0000000000..9a2e34f8ab Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-active@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-dark.png new file mode 100644 index 0000000000..363a139451 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-dark@2.png new file mode 100644 index 0000000000..ae1bdbbf1b Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive-dark.png new file mode 100644 index 0000000000..b651a0b1b7 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive-dark@2.png new file mode 100644 index 0000000000..33ea1b5439 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive.png new file mode 100644 index 0000000000..74bc9549ed Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive@2.png new file mode 100644 index 0000000000..0fee9a098e Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop-insensitive@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop.png new file mode 100644 index 0000000000..9be420d666 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop@2.png new file mode 100644 index 0000000000..9b0ed097d0 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-backdrop@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-dark.png new file mode 100644 index 0000000000..bdcef691f3 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-dark@2.png new file mode 100644 index 0000000000..9844798bd5 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover-dark.png new file mode 100644 index 0000000000..95f222221c Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover-dark@2.png new file mode 100644 index 0000000000..e3f712fc17 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover.png new file mode 100644 index 0000000000..88dac3bd6c Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover@2.png new file mode 100644 index 0000000000..187f4cd43e Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-hover@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive-dark.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive-dark.png new file mode 100644 index 0000000000..35a8d1cef2 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive-dark@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive-dark@2.png new file mode 100644 index 0000000000..95daeb82cd Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive.png new file mode 100644 index 0000000000..a18b90e2da Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive@2.png new file mode 100644 index 0000000000..05ef9ce71f Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below-insensitive@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below.png new file mode 100644 index 0000000000..b8998e75bf Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below.png differ diff --git a/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below@2.png b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below@2.png new file mode 100644 index 0000000000..6da588d914 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-horz-scale-has-marks-below@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active-dark.png new file mode 100644 index 0000000000..690de66231 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active-dark@2.png new file mode 100644 index 0000000000..38fec1e37e Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active.png new file mode 100644 index 0000000000..4104b82401 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active@2.png new file mode 100644 index 0000000000..a2897a5b6d Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-active@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-dark.png new file mode 100644 index 0000000000..dcd52d9a86 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-dark@2.png new file mode 100644 index 0000000000..da234e3db4 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive-dark.png new file mode 100644 index 0000000000..22d8f47573 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive-dark@2.png new file mode 100644 index 0000000000..aa61b30d04 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive.png new file mode 100644 index 0000000000..46803568e7 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive@2.png new file mode 100644 index 0000000000..a3b3f9de11 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop-insensitive@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop.png new file mode 100644 index 0000000000..0338011f2d Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop@2.png new file mode 100644 index 0000000000..d694fd3f86 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-backdrop@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-dark.png new file mode 100644 index 0000000000..d2f48d6521 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-dark@2.png new file mode 100644 index 0000000000..c2c35c7cba Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover-dark.png new file mode 100644 index 0000000000..70144279db Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover-dark@2.png new file mode 100644 index 0000000000..ac33835bb2 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover.png new file mode 100644 index 0000000000..e92ffcefa0 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover@2.png new file mode 100644 index 0000000000..5276c48212 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-hover@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive-dark.png new file mode 100644 index 0000000000..f12256e308 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive-dark@2.png new file mode 100644 index 0000000000..1c95ba21e2 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive.png new file mode 100644 index 0000000000..565397f765 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive@2.png new file mode 100644 index 0000000000..1f85ef41f6 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above-insensitive@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above.png new file mode 100644 index 0000000000..95cba46ac9 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above@2.png new file mode 100644 index 0000000000..cea71a4eb3 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-above@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active-dark.png new file mode 100644 index 0000000000..09052c0bff Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active-dark@2.png new file mode 100644 index 0000000000..4d802844cd Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active.png new file mode 100644 index 0000000000..87dc0a6799 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active@2.png new file mode 100644 index 0000000000..2725a16274 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-active@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-dark.png new file mode 100644 index 0000000000..fccfc4833b Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-dark@2.png new file mode 100644 index 0000000000..da674ae88c Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive-dark.png new file mode 100644 index 0000000000..169a1c8eab Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive-dark@2.png new file mode 100644 index 0000000000..3c4b2082d1 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive.png new file mode 100644 index 0000000000..baffc8bf31 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive@2.png new file mode 100644 index 0000000000..646adbad81 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop-insensitive@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop.png new file mode 100644 index 0000000000..058ef4c563 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop@2.png new file mode 100644 index 0000000000..96bb988f98 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-backdrop@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-dark.png new file mode 100644 index 0000000000..daedcf1247 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-dark@2.png new file mode 100644 index 0000000000..eb8837126b Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover-dark.png new file mode 100644 index 0000000000..316dffd6d8 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover-dark@2.png new file mode 100644 index 0000000000..ca5df7ee8a Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover.png new file mode 100644 index 0000000000..89e5bfc6bd Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover@2.png new file mode 100644 index 0000000000..828eb10af5 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-hover@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive-dark.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive-dark.png new file mode 100644 index 0000000000..585d5ea7a4 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive-dark.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive-dark@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive-dark@2.png new file mode 100644 index 0000000000..50b932efc8 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive.png new file mode 100644 index 0000000000..33d198d9c5 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive@2.png new file mode 100644 index 0000000000..aa71bc0c05 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below-insensitive@2.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below.png new file mode 100644 index 0000000000..9067e3a4ac Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below.png differ diff --git a/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below@2.png b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below@2.png new file mode 100644 index 0000000000..0e09fd8544 Binary files /dev/null and b/gtk/theme/HighContrast/assets/slider-vert-scale-has-marks-below@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end-active-dark.png b/gtk/theme/HighContrast/assets/text-select-end-active-dark.png new file mode 100644 index 0000000000..5d7384c47d Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end-active-dark.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end-active-dark@2.png b/gtk/theme/HighContrast/assets/text-select-end-active-dark@2.png new file mode 100644 index 0000000000..c36b320af9 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end-active-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end-active.png b/gtk/theme/HighContrast/assets/text-select-end-active.png new file mode 100644 index 0000000000..f0d30536bc Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end-active.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end-active@2.png b/gtk/theme/HighContrast/assets/text-select-end-active@2.png new file mode 100644 index 0000000000..a88ec99102 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end-active@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end-dark.png b/gtk/theme/HighContrast/assets/text-select-end-dark.png new file mode 100644 index 0000000000..8c002878be Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end-dark.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end-dark@2.png b/gtk/theme/HighContrast/assets/text-select-end-dark@2.png new file mode 100644 index 0000000000..294378d507 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end-hover-dark.png b/gtk/theme/HighContrast/assets/text-select-end-hover-dark.png new file mode 100644 index 0000000000..c69893970a Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end-hover-dark.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end-hover-dark@2.png b/gtk/theme/HighContrast/assets/text-select-end-hover-dark@2.png new file mode 100644 index 0000000000..77eb139069 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end-hover-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end-hover.png b/gtk/theme/HighContrast/assets/text-select-end-hover.png new file mode 100644 index 0000000000..eae48d031e Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end-hover.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end-hover@2.png b/gtk/theme/HighContrast/assets/text-select-end-hover@2.png new file mode 100644 index 0000000000..1efe34b90c Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end-hover@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end.png b/gtk/theme/HighContrast/assets/text-select-end.png new file mode 100644 index 0000000000..134ae7c792 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-end@2.png b/gtk/theme/HighContrast/assets/text-select-end@2.png new file mode 100644 index 0000000000..7c3de07469 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-end@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start-active-dark.png b/gtk/theme/HighContrast/assets/text-select-start-active-dark.png new file mode 100644 index 0000000000..06e6a54e88 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start-active-dark.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start-active-dark@2.png b/gtk/theme/HighContrast/assets/text-select-start-active-dark@2.png new file mode 100644 index 0000000000..154b013b42 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start-active-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start-active.png b/gtk/theme/HighContrast/assets/text-select-start-active.png new file mode 100644 index 0000000000..a6423a2561 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start-active.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start-active@2.png b/gtk/theme/HighContrast/assets/text-select-start-active@2.png new file mode 100644 index 0000000000..bd119ca391 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start-active@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start-dark.png b/gtk/theme/HighContrast/assets/text-select-start-dark.png new file mode 100644 index 0000000000..7fd06a16dd Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start-dark.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start-dark@2.png b/gtk/theme/HighContrast/assets/text-select-start-dark@2.png new file mode 100644 index 0000000000..10a921e413 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start-hover-dark.png b/gtk/theme/HighContrast/assets/text-select-start-hover-dark.png new file mode 100644 index 0000000000..cb3b1d9ca5 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start-hover-dark.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start-hover-dark@2.png b/gtk/theme/HighContrast/assets/text-select-start-hover-dark@2.png new file mode 100644 index 0000000000..7cc67feef0 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start-hover-dark@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start-hover.png b/gtk/theme/HighContrast/assets/text-select-start-hover.png new file mode 100644 index 0000000000..1bbd58b6bf Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start-hover.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start-hover@2.png b/gtk/theme/HighContrast/assets/text-select-start-hover@2.png new file mode 100644 index 0000000000..63a987d4bd Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start-hover@2.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start.png b/gtk/theme/HighContrast/assets/text-select-start.png new file mode 100644 index 0000000000..754ddc8f31 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start.png differ diff --git a/gtk/theme/HighContrast/assets/text-select-start@2.png b/gtk/theme/HighContrast/assets/text-select-start@2.png new file mode 100644 index 0000000000..27cb4e6e22 Binary files /dev/null and b/gtk/theme/HighContrast/assets/text-select-start@2.png differ diff --git a/gtk/theme/HighContrast/meson.build b/gtk/theme/HighContrast/meson.build index da81db45c5..0e8502f755 100644 --- a/gtk/theme/HighContrast/meson.build +++ b/gtk/theme/HighContrast/meson.build @@ -1,7 +1,5 @@ hc_scss_files = files([ - '_colors.scss', - '_common.scss', - '_drawing.scss', + '_colors-hc.scss', ]) hc_theme_variants = [ diff --git a/gtk/theme/HighContrast/render-assets.sh b/gtk/theme/HighContrast/render-assets.sh new file mode 100755 index 0000000000..7fd8d98d6b --- /dev/null +++ b/gtk/theme/HighContrast/render-assets.sh @@ -0,0 +1,34 @@ +#! /bin/bash + +INKSCAPE="flatpak run org.inkscape.Inkscape" +OPTIPNG="/usr/bin/optipng" + +SRC_FILE="assets.svg" +ASSETS_DIR="assets" +INDEX="assets.txt" + +for i in `cat $INDEX` +do +if [ -f $ASSETS_DIR/$i.png ]; then + echo $ASSETS_DIR/$i.png exists. +else + echo + echo Rendering $ASSETS_DIR/$i.png + $INKSCAPE --export-id=$i \ + --export-id-only \ + --export-png=$ASSETS_DIR/$i.png $SRC_FILE >/dev/null #\ + # && $OPTIPNG -o7 --quiet $ASSETS_DIR/$i.png +fi +if [ -f $ASSETS_DIR/$i@2.png ]; then + echo $ASSETS_DIR/$i@2.png exists. +else + echo + echo Rendering $ASSETS_DIR/$i@2.png + $INKSCAPE --export-id=$i \ + --export-dpi=180 \ + --export-id-only \ + --export-png=$ASSETS_DIR/$i@2.png $SRC_FILE >/dev/null #\ + # && $OPTIPNG -o7 --quiet $ASSETS_DIR/$i@2.png +fi +done +exit 0