Gnome-Shell: Update for GNOME 40

This commit is contained in:
Daniel Ruiz de Alegría 2021-08-30 21:12:12 +02:00
parent 79d7bfec81
commit dcbb4e6e4b
No known key found for this signature in database
GPG Key ID: 59667A77E8BFCB6C
31 changed files with 1208 additions and 934 deletions

View File

@ -1 +0,0 @@
<svg version="1.1" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"><defs><filter id="a" x="-.12" y="-.12" width="1.24" height="1.24" style="color-interpolation-filters:sRGB"><feGaussianBlur stdDeviation="1.7"/></filter></defs><path d="m5 7v12h12v-12zm22 0v12h12v-12zm-19 3h6v6h-6zm22 0h6v6h-6zm-25 19v12h12v-12zm22 0v12h12v-12zm-19 3h6v6h-6zm22 0h6v6h-6z" style="filter:url(#a);opacity:.5;stroke-width:.5625"/><path d="m5 5v12h12v-12h-12zm22 0v12h12v-12h-12zm-19 3h6v6h-6v-6zm22 0h6v6h-6v-6zm-25 19v12h12v-12h-12zm22 0v12h12v-12h-12zm-19 3h6v6h-6v-6zm22 0h6v6h-6v-6z" style="fill:#2777ff;stroke-width:.5625"/></svg>

Before

Width:  |  Height:  |  Size: 623 B

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -51,6 +51,7 @@ $panel_fg: if($variant=='light', darken($fg_color, 10%), $fg_color);
$tooltip_borders_color: $osd_outer_borders_color;
$shadow_color: transparentize(black, if($variant == 'light', 0.9, 0.7));
$system_bg_color: $_dark_base_color;
$drop_target_color: #19a187;

View File

@ -5,4 +5,3 @@ $variant: 'dark';
@import "gnome-shell/upstream/gnome-shell-sass/_common";
@import "gnome-shell/upstream/gnome-shell-sass/_widgets";
@import "gnome-shell/_common-tweaks";
@import 'gnome-shell/_extensions';

View File

@ -5,4 +5,3 @@ $variant: 'light';
@import "gnome-shell/upstream/gnome-shell-sass/_common";
@import "gnome-shell/upstream/gnome-shell-sass/_widgets";
@import "gnome-shell/_common-tweaks";
@import 'gnome-shell/_extensions';

View File

@ -1,18 +1,18 @@
$overview_transparent_bg: transparentize(white, .8);
$overview_transparent_bg: transparentize(white, .9);
$dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6);
/* OSD */
$_osd_color: if($variant=='light', black, white);
$_osd_color: if($variant=='light', black, $fg_color);
%osd_panel {
font-weight: bold;
background-color: $bg_color;
color: $fg_color;
border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color);
box-shadow: 0 4px 10px transparentize(black, .8);
StIcon {
color: $_osd_color;
icon-shadow: transparentize(black, .3) 0 1px 6px;
icon-shadow: 0 0 6px transparentize(black, .6);
}
}
@ -26,24 +26,24 @@ $_osd_color: if($variant=='light', black, white);
/* Slider */
.slider {
height: 1.1em;
-barlevel-height: .35em;
-barlevel-background-color: $borders_color;
-barlevel-border-color: $selected_bg_color;
-barlevel-active-background-color: $selected_bg_color;
-barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 0.1em;
-barlevel-border-width: 0;
height: 1.1em;
-barlevel-height: .35em;
-barlevel-background-color: $borders_color;
-barlevel-border-color: $selected_bg_color;
-barlevel-active-background-color: $selected_bg_color;
-barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 0.1em;
-barlevel-border-width: 0;
-slider-handle-radius: 0;
-slider-handle-radius: 0;
}
/* Check Boxes */
.check-box {
StBin {
background-image: if($variant == 'light', url("assets/checkbox-off.svg"),
url("assets/checkbox-off-dark.svg"));
background-image: if($variant == 'light', url("assets/checkbox-off.svg"),
url("assets/checkbox-off-dark.svg"));
}
&:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused.svg"),
@ -54,6 +54,16 @@ $_osd_color: if($variant=='light', black, white);
url("assets/checkbox-focused-dark.svg")); }
}
/* Switches */
.toggle-switch {
background-image: if($variant == 'light', url("assets/toggle-off.svg"),
url("assets/toggle-off-dark.svg"));
&:checked {
background-image: if($variant == 'light', url("assets/toggle-on.svg"),
url("assets/toggle-on-dark.svg"));
}
}
/* App Switcher */
// switcher onscreen panel
.switcher-list {
@ -61,13 +71,12 @@ $_osd_color: if($variant=='light', black, white);
&:outlined {
padding: 6px;
border: 3px solid $selected_bg_color;
border-radius: 8px;
}
&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
text-shadow: transparentize(black, 0.1) 0 1px 2px;
text-shadow: 0 1px 4px transparentize(black, 0.6);
}
}
}
@ -82,20 +91,15 @@ $_osd_color: if($variant=='light', black, white);
.ws-switcher-active-down,
.ws-switcher-active-left,
.ws-switcher-active-right {
box-shadow: 0 0px 6px transparentize(black, .5);
//box-shadow: 0 0px 6px transparentize(black, .5);
}
/* Window Picker */
// Borders on window thumbnails
.window-clone-border { border-color: transparentize(white, .75); }
// Window titles
.window-caption {
font-size: .9em;
color: black;
background-color: white;
border: none;
box-shadow: $dialog_box_shadow;
}
@ -104,11 +108,11 @@ $_osd_color: if($variant=='light', black, white);
background-image: url("assets/close-window.svg");
background-size: 32px;
background-color: transparent;
border: 0;
box-shadow: none;
color: transparent;
height: 32px;
width: 32px;
transition-duration: .2s;
&:hover {
background-image: url("assets/close-window-hover.svg");
@ -118,6 +122,8 @@ $_osd_color: if($variant=='light', black, white);
&:active {
background-image: url("assets/close-window-active.svg");
background-color: transparent;
color: transparent;
transition-duration: 0s;
}
}
@ -131,7 +137,7 @@ $_osd_color: if($variant=='light', black, white);
#panel {
$_panel_bg: transparentize($bg_color, .2);
$_panel_fg: if($variant=='light', black, white);
$_panel_text_shadow: transparentize(black, .5) 0 1px 2px;
$_panel_text_shadow: 0 1px 2px transparentize(black, 0.5);
background: $_panel_bg;
text-shadow: $_panel_text_shadow;
@ -152,8 +158,21 @@ $_osd_color: if($variant=='light', black, white);
.panel-corner { -panel-corner-radius: 0; }
.panel-button {
&, &:hover, &:active, &:focus, &:overview, &:checked {
color: $_panel_fg;
&:active, &:focus, &:overview, &:checked {
color: $_panel_fg;
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2));
}
}
.panel-button.clock-display {
// Move highlight from .panel-button to .clock
&:active, &:overview, &:focus, &:checked {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2));
}
}
}
@ -161,7 +180,7 @@ $_osd_color: if($variant=='light', black, white);
margin-left: .4em;
StLabel {
background-image: if($variant == 'light', url("assets/view-grid-symbolic.svg"),
url("assets/view-grid-symbolic-dark.svg"));
url("assets/view-grid-symbolic-dark.svg"));
background-size: contain;
width: 1.5em;
height: 1.5em;
@ -169,13 +188,12 @@ $_osd_color: if($variant=='light', black, white);
}
&:overview StLabel {
background-image: url("assets/view-grid-symbolic-checked.svg");
background-image: url("assets/view-grid-symbolic-dark.svg");
}
}
}
/* Date/Time Menu */
// overall menu
#calendarArea {
background-image: if($variant == 'light', url("assets/kali-dragon.svg"),
@ -192,12 +210,22 @@ $_osd_color: if($variant=='light', black, white);
}
}
.calendar { @include notification_bubble($flat: true); }
.calendar {
@include notification_bubble($flat: true);
/* Message list */
.message-list {
width: 31.5em;
background: transparentize($bg_color, .3);
.calendar-day-base {
&:active, &:selected {
color: $fg_color;
background-color: if($variant=='light', darken($bg_color, 10%), lighten($bg_color, 10%));
}
}
.calendar-today {
&:active, &:selected {
background: $selected_bg_color;
color: $selected_fg_color;
}
}
}
/* Events */
@ -219,10 +247,11 @@ $_osd_color: if($variant=='light', black, white);
// search entry
.search-entry {
color: black;
text-shadow: 0px 1px 2px rgba(black, 0.9);
font-weight: bold;
background-color: $overview_transparent_bg;
text-shadow: 0px 1px 2px rgba(black, 0.9);
border-radius: 100px;
border-radius: 999px;
font-size: 1.1em;
transition-duration: 200ms;
StLabel.hint-text { color: $osd_fg_color; }
@ -237,8 +266,8 @@ $_osd_color: if($variant=='light', black, white);
background-color: white;
color: black;
font-weight: normal;
text-shadow: none;
box-shadow: none;
text-shadow: none;
StLabel.hint-text { color: black; }
@ -255,22 +284,10 @@ $_osd_color: if($variant=='light', black, white);
}
// search results
.search-section {
// separator
.search-section-separator {
height: 1px;
background-color: $osd_outer_borders_color;
}
&:last-child .search-section-separator { background-color: transparent; }
}
// content
.search-section-content {
background-color: transparent;
border-radius: 0;
border: 0;
box-shadow: 0;
background-color: $overview_transparent_bg;
box-shadow: none;
border: none;
}
// search result provider
@ -290,10 +307,17 @@ $_osd_color: if($variant=='light', black, white);
.overview-icon StIcon {
color: white;
icon-shadow: transparentize(black, .3) 0 2px 6px;
icon-shadow: 0 2px 6px transparentize(black, .6);
}
}
.dash-background {
background: $overview_transparent_bg;
//box-shadow: 0 2px 8px 0 transparentize(black, .2);
}
.dash-separator { background: $overview_transparent_bg; }
.show-apps {
&:focus,
&:checked {
@ -304,35 +328,28 @@ $_osd_color: if($variant=='light', black, white);
}
}
/* Workspace pager */
// thumbnails in overview
.workspace-thumbnails {
background-color: transparentize(black, .8);
border: none;
.placeholder { background-image: none; }
}
/* App Folders */
.app-well-app.app-folder {
background-color: $overview_transparent_bg;
box-shadow: 0 2px 5px black;
&, & .overview-icon.overview-icon-with-label {
background-color: $overview_transparent_bg
}
//box-shadow: 0 2px 5px black;
&:checked { background: black; }
&:checked { background: black; }
}
.app-folder-dialog {
background: black;
box-shadow: 0 0 20px black;
border: none;
background: black;
box-shadow: 0 0 20px black;
& .folder-name-container {
& .edit-folder-button {
&, &:hover, &:active {
background: white;
color: black;
}
}
}
& .folder-name-container {
& .edit-folder-button {
&, &:hover, &:active {
background: white;
color: black;
}
}
}
}
.app-folder-dialog-container { width: 720px; }

View File

@ -1 +0,0 @@
@import 'extensions/workspace-indicator';

View File

@ -1,10 +0,0 @@
.panel-workspace-indicator {
box-shadow: inset 0 0 0 100px white; // Dirty trick to override hardcoded background color
color: black;
border-radius: 3px;
}
#panel:overview .panel-workspace-indicator {
box-shadow: inset 0 0 0 100px black;
color: white;
}

View File

@ -15,3 +15,28 @@ stage {
background-image: url("assets/toggle-off-hc.svg");
&:checked { background-image: url("assets/toggle-on-hc.svg"); }
}
//force opaque panel
#panel {
&.login-screen,
&.unlock-screen,
&:overview {
background-color: #000;
.panel-corner {
-panel-corner-opacity: 1;
}
}
.panel-button {
color: #fff !important;
}
}
//thumbnail app icons no dropshadow and forced color
.window-picker .icon-dropshadow {
icon-shadow: none;
background-color: $osd_bg_color;
padding: $base_padding * 2;
border-radius: $modal_radius;
}

View File

@ -0,0 +1,44 @@
// When color definition differs for dark and light variant,
// it gets @if ed depending on $variant
$base_color: if($variant == 'light', #fff, lighten(desaturate(#241f31, 20%), 2%));
$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
$fg_color: if($variant == 'light', #2e3436, #eeeeec);
$selected_fg_color: #fff;
$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%));
$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93));
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
$top_hilight: $borders_edge;
$warning_color: #f57900;
$error_color: #ff8080;
$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
$osd_fg_color: #eeeeec;
$osd_text_color: white;
$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04);
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
$osd_borders_color: transparentize(black, 0.3);
$osd_outer_borders_color: transparentize(white, 0.84);
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: mix($borders_color, $base_color, 60%);
//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%));
$backdrop_bg_color: $bg_color;
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,15%));
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);

View File

@ -31,7 +31,7 @@ $base_margin: 4px;
$base_spacing: 6px;
// border radii
$base_border_radius: 5px;
$base_border_radius: 8px;
$modal_radius:$base_border_radius * 2;
@ -50,7 +50,7 @@ $active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%));
// fonts
$base_font_size: 11;
$base_font_size: 10;
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
// icons
@ -76,17 +76,16 @@ stage {
%osd_panel {
color: $osd_fg_color;
background-color: $osd_bg_color;
border: 1px solid $osd_outer_borders_color;
//border: 1px solid $osd_outer_borders_color;
border-radius: $base_border_radius * 2 + 4px;
padding: $base_padding * 2;
}
// Overview panels
// Overview panels
// for the dash and workspace switcher
%overview_panel {
color: $osd_fg_color;
background-color: transparentize($osd_bg_color, 0.2);
border: 1px solid $osd_outer_borders_color;
background-color: transparentize($osd_fg_color, 0.9);
}
// icon tiles
@ -130,8 +129,8 @@ stage {
border-bottom-width: 0;
&:insensitive { @include button(insensitive, $shadow: none); }
&:hover { @include button(hover, $shadow: none); }
&:focus { @include button(focus, $shadow: none); }
&:hover { @include button(hover, $shadow: none); }
&:active { @include button(active, $shadow: none); }
// radius is 2 pixel less to fit in bubble
@ -143,7 +142,7 @@ stage {
border-right-width: 0;
border-radius: 0 0 $modal_radius - 2px 0;
}
&:first-child:last-child {
border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px;
}

View File

@ -0,0 +1,4 @@
53c53
< $base_font_size: 11;
---
> $base_font_size: 10;

View File

@ -218,7 +218,8 @@
&:drop {
.overview-icon {
background-color: transparentize($selected_bg_color, .15);
border: 2px solid $selected_bg_color; //already 2px transparent so no jumping
background-color: transparentize($selected_bg_color, .8);
}
}

View File

@ -0,0 +1,41 @@
// When color definition differs for dark and light variant,
// it gets @if ed depending on $variant
$base_color: #222;
$bg_color: #000;
$fg_color: #fff;
$selected_fg_color: #ffffff;
$selected_bg_color: darken(#4a90d9,20%);
$selected_borders_color: darken($selected_bg_color, 20%);
$borders_color: darken($bg_color,12%);
$borders_edge: transparentize($fg_color, 0.9);
$link_color: lighten($selected_bg_color,20%);
$link_visited_color: lighten($selected_bg_color,10%);
$top_hilight: $borders_edge;
$warning_color: #f57900;
$error_color: #cc0000;
$success_color: darken(#73d216,10%);
$destructive_color: darken(#ef2929,10%);
$osd_fg_color: #eeeeec;
$osd_bg_color: #2e3436;
$osd_borders_color: rgba(0,0,0, 0.7);
$osd_outer_borders_color: rgba(255,255,255, 0.1);
$shadow_color: rgba(0,0,0, 0.1);
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: $borders_color;
//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: lighten($base_color,1%);
$backdrop_bg_color: $bg_color;
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
$backdrop_insensitive_color: lighten($backdrop_bg_color,15%);
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);

View File

@ -37,8 +37,8 @@
@import 'widgets/window-picker';
@import 'widgets/search-entry';
@import 'widgets/search-results';
@import 'widgets/app-grid';
@import 'widgets/dash';
@import 'widgets/app-grid';
@import 'widgets/workspace-thumbnails';
// A11y / misc
@import 'widgets/a11y';

View File

@ -4,10 +4,14 @@ $app_icon_size: 96px;
// app icons
.icon-grid {
row-spacing: $base_spacing * 6;
column-spacing: $base_spacing * 6;
row-spacing: $base_spacing * 2;
column-spacing: $base_spacing * 2;
max-row-spacing: $base_spacing * 12;
max-column-spacing: $base_spacing * 12;
page-padding-top: $base_padding * 4;
page-padding-bottom: $base_padding * 4;
page-padding-left: $base_padding * 2;
page-padding-right: $base_padding * 2;
}
/* App Icons */
@ -30,16 +34,15 @@ $app_grid_fg_color: #fff;
/* App Folders */
.app-well-app.app-folder {
background-color: transparentize($osd_bg_color, 0.8);
background-color: $dash_background_color;
border-radius: $base_border_radius + 4px; // same as %icon_tile
}
// expanded folder
.app-folder-dialog {
.app-folder-dialog { //style like the dash
border-radius: $modal_radius * 1.5;
border: 1px solid $osd_outer_borders_color;
background-color: transparentize(darken($osd_bg_color,10%), 0.05);
padding: 12px;
background-color: $dash_background_color;
padding: 12px 0px 12px 0px;
& .folder-name-container {
padding: 24px 36px 0;
@ -71,14 +74,14 @@ $app_grid_fg_color: #fff;
& .icon-grid {
row-spacing: $base_spacing * 2;
column-spacing: $base_spacing * 5;
page-padding-top: 0;
page-padding-bottom: 0;
page-padding-left: 0;
page-padding-right: 0;
}
& .page-indicators {
margin-bottom: 18px;
.page-indicator {
padding: 15px 12px;
}
}
}
.app-folder-dialog-container {
@ -87,13 +90,6 @@ $app_grid_fg_color: #fff;
height: 620px;
}
.app-folder-icon {
padding: $base_padding;
spacing-rows: $base_spacing;
spacing-columns: $base_spacing;
}
// Running app indicator (also shown in dash)
.app-well-app-running-dot {
height: 5px;
@ -119,7 +115,7 @@ $app_grid_fg_color: #fff;
// App Grid pagination indicators
.page-indicator {
padding: 15px 20px;
padding: $base_padding $base_padding * 2 0;
.page-indicator-icon {
width: 10px;
@ -129,10 +125,8 @@ $app_grid_fg_color: #fff;
}
}
// Some hacks I don't even know
.all-apps {
// horizontal padding to make sure scrollbars or dash don't overlap content
padding: 0px 88px 10px 88px;
.apps-scroll-view {
padding: 0;
}
// shutdown and other actions in the grid
@ -142,3 +136,33 @@ $app_grid_fg_color: #fff;
border-radius: 99px;
icon-size: $app_icon_size * 0.5;
}
.page-navigation-hint {
width: 300px;
&.dnd {
background: rgba(255, 255, 255, 0.1);
}
&.next:ltr,
&.previous:rtl {
background-gradient-start: rgba(255, 255, 255, 0.05);
background-gradient-end: transparent;
background-gradient-direction: horizontal;
border-radius: 15px 0px 0px 15px;
}
&.previous:ltr,
&.next:rtl {
background-gradient-start: transparent;
background-gradient-end: rgba(255, 255, 255, 0.05);
background-gradient-direction: horizontal;
border-radius: 0px 15px 15px 0px;
}
}
.page-navigation-arrow {
margin: 6px;
width: 24px;
height: 24px;
}

View File

@ -14,5 +14,5 @@
// Dropshadow for large icons
.icon-dropshadow {
icon-shadow: 0 1px 2px rgba(black, 0.4);
icon-shadow: 0 1px 5px rgba(black, 0.8);
}

View File

@ -1,11 +1,11 @@
/* Date/Time Menu */
.clock-display-box {
spacing: $base_spacing / 2;
spacing: 2px;
.clock {
padding-left: $base_padding;
padding-right: $base_padding;
padding-left: $base_padding * 2;
padding-right: $base_padding * 2;
}
}

View File

@ -1,20 +1,18 @@
/* Dash */
$dash_background_color: #3b3b3b;
$dash_placeholder_size: 32px;
$dash_spacing: $base_padding + 4px;
$dash_padding: $base_padding + 4px; // 10px
$dash_spacing: $base_padding / 4;
$dash_bottom_margin: $base_margin * 4;
$dash_border_radius: $modal_radius * 1.5;
#dash {
@extend %overview_panel;
@include fontsize($base_font_size - 2);
padding: ($dash_spacing / 2) 0;
border-radius: 0 $dash_border_radius $dash_border_radius 0;
border-left-width: 0;
&:rtl {
border-radius: $dash_border_radius 0 0 $dash_border_radius;
border-right-width: 0;
}
margin-top: $base_spacing * 3;
padding: 0 $dash_padding;
.placeholder {
// background-image: url("assets/dash-placeholder.svg");
@ -27,23 +25,38 @@ $dash_border_radius: $modal_radius * 1.5;
width: $dash_placeholder_size;
height: $dash_placeholder_size;
}
.overview-icon {
padding: $dash_padding / 2;
}
}
.dash-background {
background-color: $dash_background_color;
margin-bottom: $dash_bottom_margin;
padding: $dash_padding;
border-radius: $dash_border_radius;
}
// Dash Items
.dash-item-container > StWidget {
padding: ($dash_spacing / 2) $dash_spacing;
.dash-item-container .app-well-app, .show-apps {
padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin;
}
.dash-separator {
width: 1px;
margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin;
background-color: transparentize($osd_fg_color,0.7);
}
// OSD Tooltip
.dash-label {
background-color: transparentize($osd_bg_color,0.05);
border-radius: $base_border_radius + 2px;
border:none;
box-shadow:0 0 0 1px $osd_outer_borders_color;
color: $osd_fg_color;
padding: $base_padding $base_padding + 2px;
background-color: $osd_bg_color;
border-radius: 99px;
padding: $base_padding $base_padding * 2;
text-align: center;
-x-offset: $base_margin * 2; // distance from the dash edge
-y-offset: $base_margin * 3; // distance from the dash edge
}
// Show apps button
@ -53,9 +66,8 @@ $dash_border_radius: $modal_radius * 1.5;
&:focus,
&:checked {
.overview-icon {
background-color: darken($osd_bg_color,10%);
background-color: transparentize($osd_bg_color,0.5);
color: $fg_color;
}
}
}

View File

@ -162,3 +162,12 @@
.audio-selection-device-icon {
icon-size: $base_icon_size * 4;
}
/* Welcome dialog */
.welcome-dialog-image {
background-image: url("assets/gnome-shell-start.svg");
background-size: contain;
/* Reasonable maximum dimensions */
height: 300px;
width: 300px;
}

View File

@ -5,18 +5,19 @@
max-width: 23em;
}
.login-dialog {
.login-dialog,
.unlock-dialog {
//reset
border: none;
background-color: transparent;
$_gdm_bg: lighten(#2e3436, 19%);
$_gdm_bg: $system_bg_color;
StEntry {
@if $variant=='dark' {
$_gdm_entry_bg: transparentize(lighten(desaturate(#241f31, 20%), 2%), 0.5);
$_gdm_entry_bg: darken($system_bg_color, 3%);
background-color: $_gdm_entry_bg;
color: $osd_fg_color;
color: $fg_color;
}
}
@ -24,9 +25,9 @@
.modal-dialog-button {
padding: 4px 18px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
background-color: $_gdm_bg;
border-color: $_gdm_bg;
color: $fg_color;
background-color: darken($system_bg_color, 3%);
border-color: darken($system_bg_color, 3%);
color: $osd_fg_color;
$_hover_c: lighten($_gdm_bg, 5%);
&:hover, &:focus {
@ -43,7 +44,7 @@
@include button(insensitive);
border-color: darken($_gdm_bg, 5%);
background-color: darken($_gdm_bg, 5%);
color: transparentize($fg_color, 0.3);
color: transparentize($osd_fg_color, 0.3);
}
&:default {
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
@ -76,8 +77,8 @@
border-radius: 99px;
width: $base_icon_size * 2;
height: $base_icon_size * 2;
border-color: transparentize($bg_color,0.7);
background-color: transparentize($bg_color,0.7);
border-color: darken($system_bg_color, 3%);
background-color: darken($system_bg_color, 3%);
StIcon { icon-size: $base_icon_size; }
}
@ -92,7 +93,6 @@
.login-dialog-banner { color: darken($osd_fg_color,10%); }
.login-dialog-button-box { width: 23em; spacing: 5px; }
.login-dialog-message { text-align: center; }
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
.login-dialog-user-selection-box { padding: 100px 0px; }
.login-dialog-not-listed-label {
padding-left: 2px;
@ -151,6 +151,11 @@
padding-top: 16px;
}
.login-dialog-timed-login-indicator {
height: 2px;
background-color: darken($fg_color,40%);
}
.login-dialog-prompt-layout {
padding-top: 24px;
padding-bottom: 12px;

View File

@ -99,7 +99,7 @@
/* Media Controls */
.message-media-control {
padding: $base_padding * 2 $base_padding * 4;
padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px
color: darken($fg_color, 15%);
// uses $hover_bg_color since the media controls are in a notification_bubble

View File

@ -9,7 +9,7 @@
background-size: contain;
color: $osd_fg_color;
border-radius: 99px;
border: 2px $osd_fg_color;
icon-size: $base_icon_size * 4; // 64px
&:hover {
color: lighten($osd_fg_color,30%);
}
@ -17,6 +17,12 @@
& StIcon {
background-color: transparentize($osd_fg_color,0.95);
border-radius: 99px;
padding: $base_padding * 2 ; // 12px
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
}
&.user-avatar {
border: 2px $osd_fg_color;
}
}
@ -31,15 +37,6 @@
}
}
.user-widget.horizontal .user-icon {
icon-size: $base_icon_size * 4; // 64px
& StIcon {
padding: $base_padding * 2 ; // 12px
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
}
}
.lightbox { background-color: black; }
.flashspot { background-color: white; }
@ -54,3 +51,9 @@
@include fontsize($base_font_size - 1);
color: $warning_color;
}
/* Workspace animation */
.workspace-animation {
background-color: $system_bg_color;
}

View File

@ -1,10 +1,13 @@
/* OVERVIEW */
#overview {
spacing: 24px;
background-color: transparent;
.controls-manager, .secondary-monitor-workspaces {
spacing: $base_spacing * 2;
}
#overviewGroup {
background-color: $system_bg_color;
}
.overview-controls {
padding-bottom: 32px;
}
}

View File

@ -3,43 +3,36 @@
$panel_corner_radius: $base_border_radius+1;
$panel_bg_color: #000;
$panel_fg_color: #ccc;
$panel_height: 1.86em;
$panel_fg_color: #ddd;
$panel_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration
#panel {
background-color: $panel_bg_color;
font-weight: bold;
height: $panel_height;
font-feature-settings: "tnum";
transition-duration: $panel_transition_duration;
// transparent panel on lock & login screens
&.unlock-screen,
&.login-screen {
&.login-screen,
&:overview {
background-color: transparent;
.panel-corner {
-panel-corner-radius: 0;
-panel-corner-background-color: transparent;
-panel-corner-border-color: transparent;
-panel-corner-opacity: 0;
}
}
// spacing between activities, app menu and such
#panelLeft, #panelCenter {
spacing: $base_spacing;
}
// the rounded outset corners
.panel-corner {
-panel-corner-radius: $panel_corner_radius;
-panel-corner-background-color: $panel_bg_color;
-panel-corner-border-width: 2px;
-panel-corner-border-color: transparent;
&:active, &:overview, &:focus {
-panel-corner-border-color: lighten($selected_bg_color,5%);
}
-panel-corner-opacity: 1;
transition-duration: $panel_transition_duration;
}
// panel menus
@ -48,53 +41,69 @@ $panel_height: 1.86em;
color: $panel_fg_color;
-natural-hpadding: $base_padding * 2;
-minimum-hpadding: $base_padding;
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 99px;
&:hover {
color: lighten($panel_fg_color, 20%);
&.clock-display {
.clock {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 99px;
}
}
&:active, &:overview, &:focus, &:checked {
color: lighten($panel_fg_color, 20%);
&:hover, &:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
// The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
}
}
}
// status area icons
.system-status-icon {
icon-size: $base_icon_size;
padding: $base_padding - 1px;
margin: 0 $base_margin;
}
.panel-status-indicators-box .system-status-icon,
.panel-status-menu-box .system-status-icon {
margin: 0;
}
// app menu icon
.app-menu-icon {
margin-left: $base_margin;
margin-right: $base_margin;
-st-icon-style: symbolic;
// dimensions of the icon are hardcoded
}
// lock & login screen styles
.unlock-screen &,
.login-screen & {
color: lighten($fg_color, 10%);
&:focus, &:hover, &:active { color: lighten($fg_color, 10%); }
&#panelActivities {
-natural-hpadding: $base_padding * 3;
}
}
.panel-button {
&:active, &:overview, &:focus, &:checked {
// Trick due to St limitations. It needs a background to draw a box-shadow
background-color: rgba(0, 0, 0, 0.01);
box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
}
}
&.unlock-screen,
&.login-screen,
&:overview {
.panel-button {
&:hover, &:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
.panel-button.clock-display {
// Move highlight from .panel-button to .clock
&:active, &:overview, &:focus, &:checked {
box-shadow: none;
&.clock-display {
box-shadow: none;
.clock {
background-color: rgba(0, 0, 0, 0.01);
box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
.clock {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
}
}
}
}
}
@ -119,3 +128,8 @@ $panel_height: 1.86em;
spacing: $base_spacing;
.label-shadow { color: transparent; }
}
#appMenu .panel-status-menu-box {
padding: 0 $base_padding;
spacing: $base_spacing;
}

View File

@ -66,7 +66,7 @@
}
#lockDialogGroup {
background-color: lighten(#2e3436, 8%);
background-color: $system_bg_color;
}
#unlockDialogNotifications {

View File

@ -11,6 +11,8 @@ $search_entry_height: 36px;
color: transparentize($fg_color,0.3);
background-color: $bg_color;
border-color: $borders_color;
margin-top: $base_spacing * 2;
margin-bottom: $base_spacing;
&:hover {
background-color: $hover_bg_color;
@ -32,4 +34,4 @@ $search_entry_height: 36px;
padding: 0 4px;
color: inherit;
}
}
}

View File

@ -3,63 +3,50 @@
$window_picker_spacing: $base_spacing; // 6px
$window_picker_padding: $base_padding * 2; // 12px
$window_thumbnail_border_color:transparentize($selected_fg_color, 0.65);
$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
$window_close_button_size: 24px;
$window_close_button_size: 30px;
$window_close_button_padding: 3px;
$window_clone_border_size: 6px;
// Window picker
.window-picker {
// Space between window thumbnails
spacing: $window_picker_spacing;
// Padding for container around window thumbnails
padding: $window_picker_padding;
&.external-monitor { padding: $window_picker_padding; }
}
// Borders on window thumbnails
.window-clone-border {
border-width: $window_clone_border_size;
border-style: solid;
border-color: $window_thumbnail_border_color;
border-radius: $base_border_radius + 2;
// For window decorations with round corners we can't match
// the exact shape when the window is scaled. So apply a shadow
// to fix that case
box-shadow: inset 0 0 0 1px transparentize($borders_color, 0.8);
}
// Window titles
.window-caption {
color: $osd_fg_color;
background-color: $osd_bg_color;
border:1px solid $osd_outer_borders_color;
border-radius: $base_border_radius + 1;
border-radius: 99px;
padding: $base_padding $base_padding * 2;
font-weight: bold;
@include fontsize($base_font_size + 1);
}
// Close button
.window-close {
background-color: $selected_bg_color;
color: $selected_fg_color;
border: none;
background-color: $osd_bg_color;
color: $osd_fg_color;
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
padding: $window_close_button_padding;
height: $window_close_button_size;
width: $window_close_button_size;
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
transition-duration: 300ms;
& StIcon { icon-size: 24px; }
&:hover {
background-color: lighten($selected_bg_color, 5%);
background-color: lighten($osd_bg_color, 15%);
}
&:active {
background-color: darken($selected_bg_color, 5%);
color: transparentize($osd_fg_color, 0.2);
background-color: darken($osd_bg_color, 5%);
}
}
.workspace-background {
// keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
border-radius: 30px;
box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7);
}

View File

@ -2,24 +2,20 @@
// thumbnails in overview
.workspace-thumbnails {
@extend %overview_panel;
visible-width: 32px; //amount visible before hover
spacing: $base_spacing;
padding: $base_padding;
border-radius: $modal_radius 0 0 $modal_radius;
border-right-width: 0;
&:rtl {
border-radius: 0 $modal_radius $modal_radius 0;
border-left-width: 0;
.workspace-thumbnail {
@extend %overview_panel;
border-radius: 3px;
}
// drag and drop indicator
.placeholder {
background-image: url("assets/dash-placeholder.svg");
background-image: url("assets/workspace-placeholder.svg");
background-size: contain;
height: 24px;
width: 18px;
}
}

View File

@ -4,28 +4,28 @@ GREEN='\033[0;32m'
YELLOW='\033[0;33m'
RESET='\033[0m'
VERSION=3.38.3
VERSION=40.3
echo
echo " $YELLOW[ i ]$RESET Upstream version $VERSION"
printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n"
echo
while read file;
do
echo
echo " $GREEN[ * ]$RESET Downloading file $file"
mkdir -p $(dirname $file)
printf " $GREEN[ * ]$RESET Downloading file $file\n"
wget https://gitlab.gnome.org/GNOME/gnome-shell/raw/$VERSION/data/theme/$file -O $file --quiet
sed 's/resource:\/\/\/org\/gnome\/shell\/theme/assets/g' -i $file
if [ -f $file.patch ]
then
echo " $YELLOW[ ~ ]$RESET Apply patch"
printf " $YELLOW[ ~ ]$RESET Apply patch\n"
patch $file $file.patch --quiet
fi
done <<- EOF
pad-osd.css
gnome-shell-high-contrast.scss
gnome-shell-sass/_colors.scss
gnome-shell-sass/_common.scss
gnome-shell-sass/_drawing.scss
gnome-shell-sass/_widgets.scss