updated dark theme and window corner radius

This commit is contained in:
Sly Kint A. Bacalso 2021-10-15 00:45:14 +08:00
parent 11edd2603c
commit a9e85799d6
7 changed files with 42 additions and 38 deletions

View File

@ -12,7 +12,7 @@
// Base colors // Base colors
$base_color: if($variant == 'light', #ffffff, #242424); $base_color: if($variant == 'light', #ffffff, #242424);
$text_color: if($variant == 'light', #363636, #dadada); $text_color: if($variant == 'light', #363636, #dadada);
$bg_color: if($variant == 'light', #f5f5f5, #333333); $bg_color: if($variant == 'light', #f5f5f5, #272727);
$fg_color: if($variant == 'light', #242424, #dedede); $fg_color: if($variant == 'light', #242424, #dedede);
$alt_fg_color: if($variant == 'light', #424242, #afafaf); $alt_fg_color: if($variant == 'light', #424242, #afafaf);
$hint_fg_color: if($variant == 'light', #565656, #999999); $hint_fg_color: if($variant == 'light', #565656, #999999);
@ -102,9 +102,9 @@ $alt_disabled_fg_color: if($variant == 'light', transparentize($alt_
$disabled_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); $disabled_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
// Headerbar colors // Headerbar colors
$header_bg: if($variant == 'light', #ffffff, #373737); $header_bg: if($variant == 'light', #ffffff, #242424); //default #373737
$dark_header_bg: if($trans == 'true', rgba($base_color, 0.95), $base_color); $dark_header_bg: if($trans == 'true', rgba($base_color, 0.95), $base_color);
$header_highlight: if($variant == 'dark', #434343, #f5f5f5); // For metacity $header_highlight: if($variant == 'dark', #373737, #f5f5f5); // For metacity //default #434343
$header_bg_backdrop: if($variant == 'light', darken($header_bg, 0%), darken($header_bg, 0%)); $header_bg_backdrop: if($variant == 'light', darken($header_bg, 0%), darken($header_bg, 0%));
$header_border: if($variant == 'light', mix(black, $header_bg, 12%), mix(black, $header_bg, 75%)); $header_border: if($variant == 'light', mix(black, $header_bg, 12%), mix(black, $header_bg, 75%));

View File

@ -5,7 +5,7 @@ $asset_suffix: if($variant == 'dark', '-dark', '');
$con_asset_suffix: if($variant=='dark', '', '-dark'); $con_asset_suffix: if($variant=='dark', '', '-dark');
$extra_background_clip: if($variant == 'light', padding-box, border-box); $extra_background_clip: if($variant == 'light', padding-box, border-box);
$panel-corner-radius: 0; $panel-corner-radius: 8px;
// font families // font families
$font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif; $font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
@ -27,11 +27,11 @@ $disabled_opacity: 0.45;
// sizes // sizes
$small_size: if($laptop == 'false', 24px, 20px); $small_size: if($laptop == 'false', 24px, 20px);
$medium_size: if($laptop == 'false', 36px, 32px); $medium_size: if($laptop == 'false', 28px, 26px);
$large_size: if($laptop == 'false', 48px, 44px); $large_size: if($laptop == 'false', 48px, 28px); // 44px
$menuitem_size: if($laptop == 'false', 32px, 28px); $menuitem_size: if($laptop == 'false', 32px, 28px);
$container_padding: if($laptop == 'false', 8px, 6px); $container_padding: if($laptop == 'false', 8px, 6px);
$headerbar_size: if($laptop == 'false', 42px, 38px); $headerbar_size: if($laptop == 'false', 28px, 28px);
// padding, margin and spacing // padding, margin and spacing
$base_padding: if($laptop == 'false', 6px, 4px); $base_padding: if($laptop == 'false', 6px, 4px);
@ -41,13 +41,13 @@ $base_spacing: if($laptop == 'false', 6px, 4px);
// radiuses // radiuses
$circular_radius: 9999px; $circular_radius: 9999px;
$bt_radius: if($laptop == 'false', 6px, 6px); $bt_radius: if($laptop == 'false', 6px, 6px);
$bd_radius: if($laptop == 'false', 8px, 8px); $bd_radius: if($laptop == 'false', 6px, 6px); // 8 radius
$wm_radius: if($laptop == 'false', 12px, 12px); $wm_radius: if($laptop == 'false', 8px, 8px); // 12 radius
$mn_radius: if($laptop == 'false', 10px, 10px); $mn_radius: if($laptop == 'false', 5px, 5px); // 10 radius
$dash_radius: if($laptop == 'false', 24px, 18px); $dash_radius: if($laptop == 'false', 24px, 18px);
$base_border_radius: if($laptop == 'false', 8px, 8px); $base_border_radius: if($laptop == 'false', 6px, 6px); // 8 radius
$modal_radius: $base_border_radius * 2; $modal_radius: $base_border_radius * 2;
$maximized_radius: 0; $maximized_radius: 8px;
@if $max_window_style == 'round' { @if $max_window_style == 'round' {
$maximized_radius: $wm_radius; $maximized_radius: $wm_radius;

View File

@ -44,6 +44,7 @@
.dash-background { .dash-background {
border-radius: 0; border-radius: 0;
background-color: transparent; //remove this
border-width: 0; border-width: 0;
border-#{$b_pos}-width: 1px; border-#{$b_pos}-width: 1px;
margin: 0 !important; margin: 0 !important;
@ -70,7 +71,7 @@
} }
#dash { // default-mode #dash { // default-mode
background: none; background: transparent;
box-shadow: none; box-shadow: none;
StWidget.focused .app-well-app-running-dot { StWidget.focused .app-well-app-running-dot {
@ -93,16 +94,18 @@
} }
.dash-background { .dash-background {
background-color: $dash_bg; // background-color: $dash_bg;
background-color: transparent; //remove this
border: 1px solid if($variant == 'light', rgba(black, 0.08), rgba(black, 0.75)); border: 1px solid if($variant == 'light', rgba(black, 0.08), rgba(black, 0.75));
box-shadow: inset 0 0 0 1px rgba(white, 0.05); box-shadow: inset 0 0 0 1px rgba(white, 0.05);
} }
&:overview #dash { // overview-mode #1 &:overview #dash { // overview-mode #1
background: none; background: transparent;
.dash-background { .dash-background {
background-color: $light_divider_color; // background-color: $light_divider_color;
background-color: transparent; //remove this
border: 1px solid rgba(black, 0.08); border: 1px solid rgba(black, 0.08);
box-shadow: inset 0 0 0 1px rgba(white, 0.05); box-shadow: inset 0 0 0 1px rgba(white, 0.05);
} }
@ -146,7 +149,7 @@
&.opaque.extended:overview, &.opaque.extended:overview,
&.transparent.extended:overview { &.transparent.extended:overview {
#dash { #dash {
background: none; background: transparent;
} }
.dash-background { .dash-background {

View File

@ -26,7 +26,7 @@ $dash_border_radius: $dash_padding * 1.5 + 12px;
} }
.dash-background { .dash-background {
background-color: $dash_background_color; background-color: transparent;
margin-bottom: $dash_bottom_margin; margin-bottom: $dash_bottom_margin;
padding: $dash_padding; padding: $dash_padding;
border-radius: $dash_border_radius; border-radius: $dash_border_radius;

View File

@ -142,7 +142,7 @@ $list_shadow: if($variant == 'light',
border-right-style: solid; border-right-style: solid;
} }
&:only-child { &:only-child {
border-radius: $bt_radius $bt_radius 0 0; border-radius: $bt_radius $bt_radius; // 0 0
border-style: solid; border-style: solid;
} }
} }
@ -826,7 +826,7 @@ button {
.linked:not(.vertical) > & { .linked:not(.vertical) > & {
border-radius: 0; border-radius: 0;
&:first-child { border-radius: $circular_radius 0 0 $circular_radius; } &:first-child { border-radius: $circular_radius $circular_radius; }
&:last-child { border-radius: 0 $circular_radius $circular_radius 0; } &:last-child { border-radius: 0 $circular_radius $circular_radius 0; }
&:only-child { border-radius: $circular_radius; } &:only-child { border-radius: $circular_radius; }
} }
@ -1486,6 +1486,7 @@ actionbar {
headerbar { headerbar {
min-height: $headerbar_size; min-height: $headerbar_size;
max-height: $headerbar_size;
padding: 0 $container_padding + 10px; padding: 0 $container_padding + 10px;
color: $header_fg; color: $header_fg;
background-color: $header_bg; background-color: $header_bg;
@ -1787,9 +1788,9 @@ headerbar {
button.titlebutton { button.titlebutton {
border: none; border: none;
min-width: 16px; min-width: 14px;
min-height: 16px; min-height: 14px;
margin: 0; margin: 0 2px 0 -5px;
padding: 0; padding: 0;
} }
} }
@ -4251,7 +4252,7 @@ decoration {
// server-side decorations as used by mutter // server-side decorations as used by mutter
.ssd & { .ssd & {
margin: -6px; margin: -6px;
border-radius: $wm_radius $wm_radius 0 0; border-radius: $wm_radius $wm_radius;
&, &.backdrop { box-shadow: $wm_outline; } &, &.backdrop { box-shadow: $wm_outline; }
&.maximized, &.tiled { border-radius: 0; } &.maximized, &.tiled { border-radius: 0; }
@ -4286,13 +4287,13 @@ decoration {
headerbar { headerbar {
button.titlebutton { button.titlebutton {
&.close, &.maximize, &.minimize { &.close, &.maximize, &.minimize {
min-width: 16px; min-width: 14px;
min-height: 16px; min-height: 14px;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 16px 16px; background-size: 14px 14px;
&, &:hover, &:focus, &:active, &:backdrop { &, &:hover, &:focus, &:active, &:backdrop {
@include button(undecorated); @include button(undecorated);

View File

@ -119,7 +119,7 @@ $list_shadow: if($variant == 'light',
border-right-style: solid; border-right-style: solid;
} }
&:only-child { &:only-child {
border-radius: $bt_radius $bt_radius 0 0; border-radius: $bt_radius $bt_radius ; // 0 0-
border-style: solid; border-style: solid;
} }
} }
@ -4430,13 +4430,13 @@ windowcontrols {
padding: 0; padding: 0;
&.close, &.maximize, &.minimize { &.close, &.maximize, &.minimize {
min-width: 16px; min-width: 14px;
min-height: 16px; min-height: 14px;
margin: 0; margin: 0 4px 0 -4px;
padding: 0; padding: 0;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 16px 16px; background-size: 14px 14px;
&, &:hover, &:focus, &:active, &:backdrop { &, &:hover, &:focus, &:active, &:backdrop {
@include button(undecorated); @include button(undecorated);

View File

@ -586,11 +586,11 @@ $disk_space_free: darken($bg_color, 3%);
terminal-window { terminal-window {
&.background.csd { &.background.csd {
border-radius: 0 0 0 0; border-radius: 0;
} }
decoration { decoration {
border-radius: $wm_radius $wm_radius 0 0; border-radius: $wm_radius $wm_radius;
} }
notebook { notebook {
@ -598,7 +598,7 @@ terminal-window {
// } // }
} }
&.background.csd.maximized { border-radius: 0 0 0 0; } // Fixed gnome 3.32 issue: Unable to restore window size after maximization &.background.csd.maximized { border-radius: 0; } // Fixed gnome 3.32 issue: Unable to restore window size after maximization
} }
window.background.csd { // gnome-terminal 3.32 setting window.background.csd { // gnome-terminal 3.32 setting
@ -1050,7 +1050,7 @@ workbench.csd > stack.titlebar:not(headerbar) {
&, &,
&:first-child, &:first-child,
&:last-child { &:last-child {
border-radius: $wm_radius $wm_radius 0 0; border-radius: $wm_radius $wm_radius;
} }
} }
} }
@ -2926,11 +2926,11 @@ window.background.csd {
> border { > border {
border: 1px solid $borders_color; border: 1px solid $borders_color;
border-bottom: none; border-bottom: none;
border-radius: $bt_radius $bt_radius 0 0; border-radius: $bt_radius $bt_radius;
} }
> stack > list { > stack > list {
border-radius: $bt_radius $bt_radius 0 0; border-radius: $bt_radius $bt_radius;
} }
} }