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, 0 insertions, 462 deletions
diff --git a/desktop-themes/YaruOk/gtk-3.0/_tweaks.scss b/desktop-themes/YaruOk/gtk-3.0/_tweaks.scss deleted file mode 100644 index 4cbdb537..00000000 --- a/desktop-themes/YaruOk/gtk-3.0/_tweaks.scss +++ /dev/null @@ -1,462 +0,0 @@ -$_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;}; - - |