Gnome-Shell: Update for GNOME 40
This commit is contained in:
parent
79d7bfec81
commit
dcbb4e6e4b
@ -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
@ -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;
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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; }
|
||||
|
||||
@ -1 +0,0 @@
|
||||
@import 'extensions/workspace-indicator';
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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%);
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
53c53
|
||||
< $base_font_size: 11;
|
||||
---
|
||||
> $base_font_size: 10;
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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%);
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
}
|
||||
|
||||
#lockDialogGroup {
|
||||
background-color: lighten(#2e3436, 8%);
|
||||
background-color: $system_bg_color;
|
||||
}
|
||||
|
||||
#unlockDialogNotifications {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user