1 files changed, 387 insertions, 0 deletions
diff --git a/desktop-themes/TraditionalOk/gtk-4.0/_tweaks.scss b/desktop-themes/TraditionalOk/gtk-4.0/_tweaks.scss
new file mode 100644
index 00000000..b25541f8
--- /dev/null
+++ b/desktop-themes/TraditionalOk/gtk-4.0/_tweaks.scss
@@ -0,0 +1,387 @@
+$_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}