diff options
Diffstat (limited to 'desktop-themes/YaruOk/gtk-4.0/_tweaks.scss')
| -rw-r--r-- | desktop-themes/YaruOk/gtk-4.0/_tweaks.scss | 387 |
1 files changed, 0 insertions, 387 deletions
diff --git a/desktop-themes/YaruOk/gtk-4.0/_tweaks.scss b/desktop-themes/YaruOk/gtk-4.0/_tweaks.scss deleted file mode 100644 index b25541f8..00000000 --- a/desktop-themes/YaruOk/gtk-4.0/_tweaks.scss +++ /dev/null @@ -1,387 +0,0 @@ -$_base_hover_color: transparentize($fg_color, 0.85); -$_base_active_color: transparentize($fg_color, 0.75); - -@mixin undershoot($p) { - // - // undershoot - // - // $p: position - // - // possible $p values: - // top, bottom, right, left - // - - $_us_shadow_color: if($variant=='light', $silk, $jet); - $_us_shadow_alpha: 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; - } - - padding-#{$p}: 1px; - background-size: $_dash_bg_size; - background-repeat: $_gradient_repeat; - background-origin: content-box; - background-position: $_bg_pos; - border: none; - - @if ($p == left) { - box-shadow: inset 2px 0 0 transparentize($_us_shadow_color, $_us_shadow_alpha), - inset 1px 0 0 transparentize(darken($_us_shadow_color, 20%), $_us_shadow_alpha); - } - @else if ($p == right) { - box-shadow: inset -2px 0 0 transparentize($_us_shadow_color, $_us_shadow_alpha), - inset -1px 0 0 transparentize(darken($_us_shadow_color, 20%), $_us_shadow_alpha); - } - @else if ($p == top) { - box-shadow: inset 0 2px 0 0 transparentize($_us_shadow_color, $_us_shadow_alpha), - inset 0 1px 0 0 transparentize(darken($_us_shadow_color, 20%), $_us_shadow_alpha); - } - @else if ($p == bottom) { - box-shadow: inset 0 -2px 0 0 transparentize($_us_shadow_color, $_us_shadow_alpha), - inset 0 -1px 0 0 transparentize(darken($_us_shadow_color, 20%), $_us_shadow_alpha); - } -} - -// with a flatter headerbar and buttons, we dont need that heavy shadows, remove this when upstream agrees -headerbar *, button * { - text-shadow: none; - -gtk-icon-shadow: none; -} - -// blue spinner, white spinner for colored buttons -spinner { - &:not(:backdrop) { - color: $spinner_color; - } - button.suggested-action &, button.destructive-action & { - color: $selected_fg_color; - &:backdrop { color: $backdrop_selected_fg_color; } - } -} - - - - - -windowcontrols { -button { - &.maximize, &.minimize, &.close { - border-radius: 6px; - background-image: linear-gradient(to bottom, - $menubar_menuitem_hover_gradient_a, - $menubar_menuitem_hover_gradient_b 50%, - $menubar_menuitem_hover_gradient_c 50%, - $menubar_menuitem_hover_gradient_d ); - - &:backdrop { - background-image: none; - border-color: $borders_color; - } - - border-color: $menubar_menuitem_hover_border_color; - &, &:backdrop { - &:hover { - background-image: linear-gradient(to bottom, - $menubar_menuitem_hover_gradient_a, - $menubar_menuitem_hover_gradient_b) - // @include draw_circle(if($ambiance==true, lighten($inkstone, 7%), $_base_hover_color)); - } - - &:active { - background-image: linear-gradient(to bottom, - darken($core_color_a, 14%), - darken($core_color_a, 15%)) - // @include draw_circle(if($ambiance==true, lighten($inkstone, 12%), $_base_active_color)); - } - } - } -} -} - -// we prefered our gray hover for menus and popovers, orange is a very strong color -menu, -.menu, -.context-menu { - item:selected { - color: $fg_color; - background-color: $popover_hover_color; - } -} - -// We don't want menuitems to look like links, we should propose this upstream -menubar, -.menubar { - item:selected { - color: $fg_color; - background-color: $popover_hover_color; - } -} - -// We don't want the app notifications to look like OSD because they are interactive -.app-notification, -.app-notification.frame { - padding: 0px 10px; - margin: 12px; - color: $text_color; - border-radius: $menu_radius; - background: none; - background-color: $menu_color; - border: 1px solid $borders_color; - box-shadow: 0 2px 5px transparentize(black, 0.8); - text-shadow: none; - - button { - &, &:dir(ltr), &:dir(rtl) { - &.text-button, &.image-button, & { - @include button(normal); - &.flat { @include button(undecorated); } - &:hover { @include button(hover); } - &:active { @include button(active); } - &:backdrop { - @include button(backdrop); - &.flat { @include button(undecorated); } - } - &:disabled { @include button(insensitive); } - } - } - } - - &:backdrop { - background-color: $backdrop_bg_color; - color: $backdrop_text_color; - box-shadow: none; - transition: $backdrop_transition; - } - - border { border: none; } -} - -notebook > header { - &, &:backdrop { background: transparent; } - tabs { - &, &:hover, &:backdrop { - &, &.right, &.left, &.top, &.bottom { - background-color: transparent; - tab { - outline-width: 1px; - outline-offset: -2px; - &, &:dir(ltr), &:dir(rtl) { - &, &:backdrop { - &, &:checked { - &, &:hover, &:active { - background-color: transparent; - border-color: transparent; - } - } - &:hover:not(:checked):not(:backdrop) { color: $insensitive_fg_color; } - } - } - } - } - } - } -} - -// With the conservative tab styling scrolled windows need the undershoots -scrolledwindow { - undershoot { - &.top { @include undershoot(top); } - - &.bottom { @include undershoot(bottom); } - - &.left { @include undershoot(left); } - - &.right { @include undershoot(right); } - } -} - -// Check/radios in menus do not need a border -popover.menu { - check, - radio { - &, &:checked, &:indeterminate { - &, &:hover, &:disabled { - border-color: transparent; - background: transparent; - } - } - } -} - -// Fixes selected disabled check/radios leaking selected_bg_color, should move to upstream -treeview.view check, -treeview.view radio { - &:selected { - &:focus, & { - &:disabled { color: $insensitive_fg_color; } - } - } -} - -// Reducing the amount of the palette's background colors to two -.sidebar { background-color: $bg_color; } - -scale { - > trough > slider { - .osd & { - @include button(osd); - background-image: image(darken($osd_fg_color, 2%)); - - &:hover { - background-image: image(darken($osd_fg_color, 10%)); - } - - &:active { - background-image: image(darken($osd_fg_color, 25%)); - } - } - } -} - -// Rubberband selection shall match with shell's tile-preview -.rubberband, -rubberband { - background-color: transparentize($ash, 0.8); - border: 1px solid if($variant == 'light', transparentize($silk, 0.2), transparentize(darken($silk, 10%), 0.4)); -} - -// Entries drown if drawn on widgets with $base_color -// Fixing this at least for notebooks, since entries on tabs is a common pattern -@if $variant=='dark' { - notebook entry { background-color: darken($base_color, 2%); } -} - -// Make all :not:(.empty) level bars green - should be moved to upstream -levelbar > trough > block { - &.high, - &:not(.empty) { - border-color: $success_color; - background-color: $success_color; - &:backdrop { border-color: $success_color; } - } -} - -// Strengthen the menu shadows -// And lighten up the dark shell menu/popover border to increase visibility -$_dark_theme_outer_menu_border: lighten(desaturate($base_color, 100%), 14%); -decoration { - .csd.popup & { - box-shadow: 0 1px 2px 1px transparentize(black, if($variant=='light', 0.7, 0.6)), - 0 0 0 1px if($variant=='light', transparentize(black, 0.77), $_dark_theme_outer_menu_border); - } -} -@if $variant=='dark' { - menu separator { - background-color: $_dark_theme_outer_menu_border; - } -} -popover.background { - .csd &, & { - border-color: if($variant=='light', transparentize(black, 0.77), $_dark_theme_outer_menu_border); - &:backdrop { border-color: $backdrop_borders_color; } - } - @if $variant=='dark' { - separator { - background-color: $_dark_theme_outer_menu_border; - } - } -} - -// Add some transitions on checks and radios -check, -radio { - transition-property: background, border; - transition-duration: 200ms; - transition-timing-function: ease; -} - -// Due to the ubuntu orange beeing quiet bright -// we change the sidebar selection from a full orange -// row to a thin orange stripe plus a soft gray selection -$_selection_bg: if($variant=='light', darken($bg_color, 5%), lighten($base_color, 5%)); -list row, placessidebar row, sidebar row, .sidebar row { - &:selected { - &.activatable, & { - &, &:hover { - background-color: $_selection_bg; - &, button { &, & image { color: $text_color; } } - box-shadow: inset 4px 0 0 $selected_bg_color; - &:backdrop { - &, button { &, & image { color: $backdrop_fg_color; } } - background-color: if($variant=='light', $_selection_bg, lighten($_selection_bg, 2%)); - } - } - } - } -} - -// Adapt dark gtk3 scale and levelbar troughs to the shell -@if $variant=='dark' { - scale, progressbar { - > trough { - background-color: $_dark_theme_outer_menu_border; - &, &:disabled { - border-color: $_dark_theme_outer_menu_border; - } - } - &:backdrop { - > trough { - border-color: darken($_dark_theme_outer_menu_border, 5%); - background-color: darken($_dark_theme_outer_menu_border, 5%); - } - } - } - levelbar > trough > block.empty { - border-color: $_dark_theme_outer_menu_border; - background-color: $_dark_theme_outer_menu_border; - &:backdrop { - border-color: darken($_dark_theme_outer_menu_border, 5%); - background-color: darken($_dark_theme_outer_menu_border, 5%); - } - } -} - -// Adapt switch and scale slider troughs to the shell -@if $variant=='dark' { - switch, scale > trough { - &:not(:backdrop):not(:disabled){ - > slider { - background-image: image($warm_gray); - background-clip: padding-box; // fix background overflow - } - - &:hover { - > slider { - background-image: image(lighten($warm_gray, 4%)); - } - } - } - } -} - -// Reduce hyper prominent dark theme check switch border in backdrop -switch { - @if $variant=='dark' { - &:not(:checked):not(:backdrop):not(:disabled) { background-color: lighten($bg_color, 5%); } - } - &:backdrop { - &:checked:not(:disabled) { - &, slider { border-color: if($variant=='light', $checkradio_borders_color, $backdrop_borders_color); } - } - } -} - -check:checked, radio:checked {border-color:$borders_color} - -tab:hover{ color: $fg_color} |