diff options
Diffstat (limited to 'desktop-themes/YaruOk/gtk-3.0/_tweaks.scss')
| -rw-r--r-- | desktop-themes/YaruOk/gtk-3.0/_tweaks.scss | 462 |
1 files changed, 462 insertions, 0 deletions
diff --git a/desktop-themes/YaruOk/gtk-3.0/_tweaks.scss b/desktop-themes/YaruOk/gtk-3.0/_tweaks.scss new file mode 100644 index 00000000..4cbdb537 --- /dev/null +++ b/desktop-themes/YaruOk/gtk-3.0/_tweaks.scss @@ -0,0 +1,462 @@ +$_base_hover_color: transparentize($fg_color, 0.85); +$_base_active_color: transparentize($fg_color, 0.75); +$_titlebutton_height: 24px; + +@mixin draw_circle($c, $size:$_titlebutton_height) { + $button_size: $size + 2px * 2; + $circle_size: 20px / $button_size / 2; + + background-image: -gtk-gradient(radial, + center center, 0, + center center, $circle_size, + to($c), + to(transparent)); +} + +@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: $blue; + } + button.suggested-action &, button.destructive-action & { + color: $selected_fg_color; + &:backdrop { color: $backdrop_selected_fg_color; } + } +} + +// titlebutton +button.titlebutton:not(.appmenu) { + + &, + &:hover, + &:active { + + headerbar &, + .titlebar &, + headerbar.selection-mode & { + + // spec bump otherwise :backdrop will still have a bg + &, + &:backdrop { + // @extend %undecorated_button; + } + } + } + + // Important - otherwise the circle size is wrong + min-height: $_titlebutton_height; + min-width: $_titlebutton_height; + padding: 2px; + + headerbar &, + .titlebar &, + headerbar.selection-mode &, + & { + &.maximize, &.minimize, &.close { + color: white; + -gtk-icon-shadow: 0 -1px black, 0 1px black, -1px 0px black, 1px 0px black; + 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 ); + box-shadow: inset 0px 1px rgba(255,255,255, 0.1),inset 0px -1px rgba(255,255,255, 0.1), inset 1px 0px rgba(255,255,255, 0.1), inset -1px 0px rgba(255,255,255, 0.1); + + &:backdrop { + background-image: none; + box-shadow: inset 0px 1px rgba(255,255,255, 0.5),inset 0px -1px rgba(255,255,255, 0.5), inset 1px 0px rgba(255,255,255, 0.5), inset -1px 0px rgba(255,255,255, 0.5); + border-color: $borders_color; + } + + border-color: gtkshade(#86abd9, 0.6); + &, &: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)); + } + } + } + + &.close{ + -gtk-icon-shadow: 0 -2px black,0 2px black, 2px 0px black, -2px 0px black, 0 -1px white, 0 1px white, -1px 0px white, 1px 0px white,; + + } + } +} + +// we prefered our gray hover for menus and popovers, orange is a very strong color +menu, +.menu, +.context-menu { + menuitem { + + &:hover { + color: $selected_fg_color; + background-color: $selected_bg_color; + } + } +} + +// We don't want menuitems to look like links, we should propose this upstream +menubar, +.menubar { + > menuitem { + &:hover { + color: $selected_fg_color; + background-color: $selected_bg_color; + } + } +} + +// We don't want the app notifications to look like OSD because they are interactive +.app-notification, +.app-notification.frame { + padding: 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; } +} + +// 2 pixel transparentized focus rings +// upstream is also interested in this + +*:not(button) { + outline-color: $focus_border_color; + outline-style: solid; + outline-offset: -2px; + outline-width: 2px; + -gtk-outline-radius: $button-radius; + :selected & { outline-color: $coloured_focus_border_color; } +} + +button { + outline-color: $focus_border_color; + outline-style: solid; + outline-offset: -2px; + outline-width: 2px; + -gtk-outline-radius: $button-radius; + &.suggested-action, &.destructive-action{ &, &:hover, &:active { outline-color: $coloured_focus_border_color; } } +} + +switch { + &, &:hover { slider { outline-color: transparent; } } + &:focus { + box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%), $focus_border_color); + } +} + +checkbutton, +radiobutton { + outline-color: $focus_border_color; + outline-offset: 1px; + outline-width: 2px; + row:selected & , treeview:selected & { outline-color: $coloured_focus_border_color; } +} + +treeview { + outline-color: $focus_border_color; + -gtk-outline-radius: 0px; + + &:selected { + outline-color: $coloured_focus_border_color; + } +} + +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; + } + } + } + } + } + } + } + } +} + +// 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 + +check, +radio { + menu menuitem & { + &, &:checked, &:indeterminate { + &, &:hover, &:disabled { + border-color: 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; } + +// Treeview items misses a hover, port to upstream + +treeview:hover { background: $selected_bg_color; } + +scale { + 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)); +} +// Fix for color chose buttons, should be moved to upstream as it is variable +// If the min-height is not set, it stretches compact headerbars +button.color { min-height: $_headerbar_height / 2; } + +// 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 { + block { + &.high, + &:not(.empty) { + border-color: if($variant == 'light', darken($success_color, 20%), $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; + } + } +} +// Adapt dark gtk3 scale and levelbar troughs to the shell +@if $variant=='dark' { + scale, progressbar { + trough { + border-color: $_dark_theme_outer_menu_border; + background-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 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%); + } + } +} + +// 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); } + } + } +} + +// 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 { + color: $selected_fg_color; + 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%)); + } + } + } + } +} + + +check:checked, radio:checked {border-color:$borders_color;color: $fg_color;}; +check:selected, radio:selected { color: $fg_color;}; + + |