summaryrefslogtreecommitdiff
path: root/desktop-themes/YaruOk/gtk-3.0/_tweaks.scss
diff options
context:
space:
mode:
Diffstat (limited to 'desktop-themes/YaruOk/gtk-3.0/_tweaks.scss')
-rw-r--r--desktop-themes/YaruOk/gtk-3.0/_tweaks.scss462
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;};
-
-