Add option for panel transparency

This commit is contained in:
vinceliuice
2020-08-18 21:44:43 +08:00
parent 09c1dba39b
commit cddcba7eff
35 changed files with 16392 additions and 92 deletions

View File

@@ -14,7 +14,7 @@ $alt_fg_color: if($variant == 'light', #424242, #afafaf);
$hint_fg_color: if($variant == 'light', #565656, #999999);
$track_color: if($variant == 'light', rgba(black, 0.20), rgba(white, 0.10));
$visit_color: if($variant == 'light', rgba(black, 0.16), rgba(white, 0.08));
$visit_color: if($variant == 'light', rgba(black, 0.35), rgba(white, 0.08));
$divider_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.06));
$light_fg_color: white;
@@ -115,21 +115,19 @@ $menu_bd: if($variant == 'light', rgba(black, 0.05), r
}
// Panel colors
$panel_opacity: 0.16;
$panel_bg: if($variant == 'light', #f1f1f1, #2a2a2a);
@if $trans == 'true' {
$panel_bg: if($variant == 'light', rgba(white, 0.15), rgba(black, 0.15));
$panel_bg: if($variant == 'light', rgba(white, $panel_opacity), rgba(black, $panel_opacity));
}
$panel_fg: $text_color;
@if $trans == 'true' {
$panel_fg: white;
}
$panel_fg: if($trans == 'true', white, $text_color);
$panel_top_color: if($variant == 'dark', #333333, #f5f5f5);
$panel_bottom_color: if($variant == 'dark', #2a2a2a, #e2e2e2);
$panel_border_color: if($variant =='light', rgba(white, 0.22), rgba(black, 0.22));
$panel_border_color: if($variant == 'light', rgba(white, 0.22), rgba(black, 0.22));
// Entry colors
$entry_bg: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05));

View File

@@ -19,7 +19,7 @@ $lower_opacity: 0.3;
$secondary_opacity: 0.75;
$hint_opacity: 0.6;
$disabled_opacity: 0.5;
$disabled_opacity: 0.45;
// sizes
$small_size: if($laptop == 'false', 24px, 20px);

View File

@@ -1070,13 +1070,13 @@ $popop_menuitem_radius: $wm_radius - 4px;
}
/* TOP BAR */
$panel_bg_color: if($variant == 'light', rgba(white, 0.15), rgba(black, 0.15));
$panel_fg_color: white;
$panel_shadow: 0 2px 3px rgba(black, 0.03), 0 3px 5px rgba(black, 0.03), 0 5px 10px rgba(black, 0.02);
$panel_asset_shadow: 0 1px 3px 3px rgba(black, 0.15);
@if $black == 'true' { $panel_fg: $text_color; }
#panel {
background-color: $panel_bg_color;
background-color: $panel_bg;
/* transition from solid to transparent */
transition-duration: 250ms;
font-weight: bold;
@@ -1087,7 +1087,7 @@ $panel_asset_shadow: 0 1px 3px 3px rgba(black, 0.15);
&.unlock-screen,
&.login-screen,
&.lock-screen {
background-color: $panel_bg_color;
background-color: $panel_bg;
}
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
@@ -1096,12 +1096,12 @@ $panel_asset_shadow: 0 1px 3px 3px rgba(black, 0.15);
.panel-corner {
-panel-corner-radius: $panel-corner-radius;
-panel-corner-background-color: $panel_bg_color;
-panel-corner-background-color: $panel_bg;
-panel-corner-border-width: 2px;
-panel-corner-border-color: transparent;
&:active, &:overview, &:focus {
-panel-corner-border-color: $panel_fg_color;
-panel-corner-border-color: $panel_fg;
}
&.lock-screen, &.login-screen, &.unlock-screen {
@@ -1117,7 +1117,7 @@ $panel_asset_shadow: 0 1px 3px 3px rgba(black, 0.15);
-natural-hpadding: 8px;
-minimum-hpadding: 8px;
font-weight: bold;
color: $panel_fg_color;
color: $panel_fg;
transition-duration: $longer_duration;
border-radius: $bt_radius;
// margin-top: 2px;
@@ -1147,14 +1147,14 @@ $panel_asset_shadow: 0 1px 3px 3px rgba(black, 0.15);
.popup-menu-arrow { width: 0; height: 0; } // Remove arrow on panel button
&:hover {
color: $panel_fg_color;
color: $panel_fg;
background-color: $light_divider_color;
}
&:active, &:overview, &:focus, &:checked {
&, &:hover {
background-color: $light_track_color;
color: $panel_fg_color;
color: $panel_fg;
box-shadow: none;
}
}
@@ -1163,8 +1163,8 @@ $panel_asset_shadow: 0 1px 3px 3px rgba(black, 0.15);
.unlock-screen &,
.login-screen &,
.lock-screen & {
color: $panel_fg_color;
&:focus, &:hover, &:active { color: $panel_fg_color; }
color: $panel_fg;
&:focus, &:hover, &:active { color: $panel_fg; }
}
}
@@ -1227,10 +1227,10 @@ $panel_asset_shadow: 0 1px 3px 3px rgba(black, 0.15);
// Activities button
#panel #panelActivities.panel-button {
> * {
background-image: url("assets/activities.svg");
background-position: center top;
background-size: 18px 18px;
width: 24px;
height: 24px;
background-color: transparent !important;