brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme: Stylesheet papercuts and other visual fixes

Browse Source 
- remove tiled preview corners; merge with misc.scss
- sync general label styles from libadwaita
- use variables in ibus css
- remove redundant spacing variable as its equal to padding
- use more global styles in screenshot css
- tidy up entry styles
- cleanup the networks dialog stylesheet
- make colours less dark
- cleanup the popover stylesheet
- cleanup the mixins for tiles and overview icons
- adjust the button style definitions on checked style
- add osd button definitions

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2172>
This commit is contained in:
Sam Hewitt 2022-02-07 14:52:40 -03:30
parent 514558409c
commit 39301a744e
35 changed files with 521 additions and 577 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
data/theme/gnome-shell-sass/_colors.scss
View File

@ -1,8 +1,8 @@
// When color definition differs for dark and light variant, // When color definition differs for dark and light variant,
// it gets @if-ed depending on $variant // it gets @if-ed depending on $variant
$base_color: if($variant == 'light', #fff, darken(desaturate(#2a2a2a, 20%), 2%)); $base_color: if($variant == 'light', #fff, darken(desaturate(#241f31, 100%), 2%));
$bg_color: if($variant == 'light', #f6f5f4, #2a2a2a); $bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
$fg_color: if($variant == 'light', transparentize(black, .2), white); $fg_color: if($variant == 'light', transparentize(black, .2), white);
$selected_fg_color: #fff; $selected_fg_color: #fff;
@ -30,7 +30,7 @@ $osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2)); $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
// overview background color // overview background color
$system_bg_color: if($variant == 'light', darken(desaturate($bg_color, 100%), 35%), darken($bg_color, 2%)); $system_bg_color: $base_color;
//insensitive state derived colors //insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_fg_color: mix($fg_color, $bg_color, 50%);

131
data/theme/gnome-shell-sass/_common.scss
View File

@ -28,7 +28,6 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
// padding, margin and spacing // padding, margin and spacing
$base_padding: 6px; $base_padding: 6px;
$base_margin: 4px; $base_margin: 4px;
$base_spacing: 6px;
// border radii // border radii
$base_border_radius: 8px; $base_border_radius: 8px;
@ -36,18 +35,17 @@ $base_border_radius: 8px;
// radii of things that display over other things, e.g. popovers // radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius*2; // 24px $modal_radius: $base_border_radius*2; // 24px
// non-standard colors
$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 4%));
// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
// derived hover colors // derived hover colors
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 7%)); $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%)); $hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%));
// derived active colors // derived active colors
$active_bg_color: darken($bg_color,if($variant=='light', 9%, 5%)); $active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%)); $active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%));
// derived checked colors
$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
// fonts // fonts
$base_font_size: 11; $base_font_size: 11;
@ -55,6 +53,7 @@ $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.
// icons // icons
$base_icon_size: 1.09em; $base_icon_size: 1.09em;
$large_icon_size: $base_icon_size*2; // 32px
// $base_icon_size: 16px; // $base_icon_size: 16px;
// Stage // Stage
@ -65,13 +64,6 @@ stage {
/* Common Stylings */ /* Common Stylings */
// Text
%status_text {
font-size: 2em;
font-weight: bold;
color: $osd_fg_color;
}
// osd panels // osd panels
%osd_panel { %osd_panel {
color: $osd_fg_color; color: $osd_fg_color;
@ -97,22 +89,6 @@ stage {
text-align: center; text-align: center;
} }
// button styling
%button {
border-radius: $base_border_radius - 2px; // 6px
border-style: solid;
border-width: 1px;
min-height: 22px;
font-weight: bold;
padding: $base_padding * 0.5 $base_padding * 4;
@include button(normal);
&:focus { @include button(focus);}
&:hover { @include button(hover);}
&:insensitive { @include button(insensitive);}
&:active, &:checked { @include button(active);}
}
// dialogs // dialogs
%bubble_panel { %bubble_panel {
color: $fg_color; color: $fg_color;
@ -121,18 +97,39 @@ stage {
border: 1px solid $borders_edge; border: 1px solid $borders_edge;
} }
// normal button styling
%button {
border-radius: $base_border_radius - 2px; // 6px
border-style: solid;
border-width: 1px;
font-weight: bold;
padding: $base_padding*.5 $base_padding*4;
@include button(normal);
&:focus { @include button(focus);}
&:hover { @include button(hover);}
&:insensitive { @include button(insensitive);}
&:active { @include button(active);}
&:checked { @include button(checked);}
}
// buttons in dialogs/notifications // buttons in dialogs/notifications
// lighter in color and have a greater radius
$bubble_button_radius:$base_border_radius*1.25; $bubble_button_radius:$base_border_radius*1.25;
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 7%));
%bubble_button { %bubble_button {
padding: $base_padding * 2; padding: $base_padding * 2;
font-weight: bold; font-weight: bold !important;
margin-right: 1px;
@include button(normal, $c:$bubble_buttons_color); @include button(normal, $c:$bubble_buttons_color);
&:insensitive { @include button(insensitive, $c:$bubble_buttons_color);} &:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
&:focus { @include button(focus, $c:$bubble_buttons_color);} &:focus { @include button(focus, $c:$bubble_buttons_color);}
&:hover { @include button(hover, $c:$bubble_buttons_color);} &:hover { @include button(hover, $c:$bubble_buttons_color);}
&:active { @include button(active, $c:$bubble_buttons_color);} &:active { @include button(active, $c:$bubble_buttons_color);}
&:checked { @include button(checked, $c:$bubble_buttons_color);}
&:first-child:ltr { &:first-child:ltr {
border-radius: 0 0 0 $bubble_button_radius; border-radius: 0 0 0 $bubble_button_radius;
@ -140,7 +137,7 @@ $bubble_button_radius:$base_border_radius*1.25;
&:last-child:ltr { &:last-child:ltr {
border-radius: 0 0 $bubble_button_radius 0; border-radius: 0 0 $bubble_button_radius 0;
border-right-width: 0 !important; margin-right: 0 !important;
} }
&:first-child:rtl { &:first-child:rtl {
@ -149,10 +146,72 @@ $bubble_button_radius:$base_border_radius*1.25;
&:last-child:rtl { &:last-child:rtl {
border-radius: 0 0 0 $bubble_button_radius; border-radius: 0 0 0 $bubble_button_radius;
border-left-width: 0 !important; margin-right: 0 !important;
} }
&:first-child:last-child { &:first-child:last-child {
border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important; border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
margin-right: 0 !important;
} }
} }
// buttons on OSD elements
// that are undecorated by default and use OSD colors
%osd_button {
@include button(undecorated);
&:insensitive { @include button(undecorated, $c:$osd_bg_color);}
&:focus { @include button(focus, $c:$osd_bg_color);}
&:hover { @include button(hover, $c:$osd_bg_color);}
&:active { @include button(active, $c:$osd_bg_color);}
&:outlined,&:checked { @include button(checked, $c:$osd_bg_color);}
}
/* General Typography */
%large_title {
font-weight: 300;
@include fontsize(24);
}
%title_1 {
font-weight: 800;
@include fontsize(20);
}
%title_2 {
font-weight: 800;
@include fontsize(15);
}
%title_3 {
font-weight: 700;
@include fontsize(15);
}
%title_4 {
font-weight: 700;
@include fontsize(13);
}
%heading {
font-weight: 700;
@include fontsize(11);
}
%caption_heading {
font-weight: 700;
@include fontsize(9);
}
%caption {
font-weight: 400;
@include fontsize(9);
}
%smaller {
font-weight: 400;
@include fontsize(8);
}
%monospace {font-family: monospace;}
%numeric { font-feature-settings: "tnum";}

176
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -25,33 +25,40 @@
// entries // entries
@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) { @mixin entry($t, $fc:$selected_bg_color) {
// //
// Entries drawing function // Entries drawing function
// //
// $t: entry type // $t: entry type
// $fc: focus color // $fc: focus color
// $edge: set to none to not draw the bottom edge or specify a color to not use the default one
// //
// possible $t values: // possible $t values:
// normal, focus, insensitive // normal, focus, insensitive
// //
@if $t==normal { @if $t==normal {
background-color: $base_color; background-color: lighten($bg_color, 5%);
border-color: $borders_color; color: transparentize($fg_color,0.3);
border: 2px solid lighten($bg_color, 5%);
} }
@if $t==focus { @if $t==focus {
border-color: if($fc==$selected_bg_color, background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%);
$selected_borders_color, border-color: $fc;
darken($fc,35%)); color: $fg_color;
box-shadow: inset 0 0 0 2px $fc; &:hover {}
} }
@if $t==hover { }
@if $t==hover {
background-color:lighten($hover_bg_color, 5%);
border-color:lighten($hover_bg_color, 5%);
color: transparentize($fg_color,0.3);
}
@if $t==insensitive { @if $t==insensitive {
background-color:lighten($insensitive_bg_color, 5%);
border-color: lighten($insensitive_bg_color, 5%);
color: $insensitive_fg_color; color: $insensitive_fg_color;
border-color: $insensitive_bg_color;
box-shadow: none;
} }
} }
@ -85,18 +92,28 @@
background-color: mix(lighten($c, 8%), $selected_bg_color, 90%); background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
} }
&:active {
background-color: mix(lighten($c, 10%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
}
} }
// hover key // hover key
@else if $t==hover { @else if $t==hover {
color: $tc; color: $tc;
background-color: lighten($c, if($variant == 'light', 8%, 5%)); background-color: lighten($c, 7%);
} }
// active key // active key
@else if $t==active { @else if $t==active {
color: $tc; color: $tc;
background-color: darken($c,3%); background-color: lighten($c, 10%);
}
// checked key
@else if $t==checked {
color: $tc;
background-color: lighten($c, 15%);
} }
// insensitive key // insensitive key
@ -117,6 +134,8 @@
// since buttons are all flat an borderless now the mixin is simpler // since buttons are all flat an borderless now the mixin is simpler
@mixin button($t, $tc:$fg_color, $c:$bg_color) { @mixin button($t, $tc:$fg_color, $c:$bg_color) {
$button_bg_color: mix($tc, $c, 5%);
// //
// Button drawing function // Button drawing function
// //
@ -133,17 +152,20 @@
// normal button // normal button
@if $t==normal { @if $t==normal {
color: $tc; color: $tc;
background-color: mix($tc, $c, 5%); background-color: $button_bg_color;
} }
// focused button // focused button
@if $t==focus { @if $t==focus {
color: $tc; color: $tc;
background-color: mix(mix($tc, $c, 5%), $selected_bg_color, 90%); background-color: mix($button_bg_color, $selected_bg_color, 90%);
// border-color: lighten($tc, 3%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4); box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
&:hover { &:hover {
background-color: mix(mix($tc, $c, 7%), $selected_bg_color, 90%); background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
}
&:active {
background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
} }
} }
@ -151,13 +173,21 @@
// hover button // hover button
@else if $t==hover { @else if $t==hover {
color: $tc; color: $tc;
background-color: mix($tc, $c, 7%); background-color: lighten($button_bg_color, 3%);
} }
// active button // active button
@else if $t==active { @else if $t==active {
color: $tc; color: $tc;
background-color: mix($tc, $c, 2%); background-color: lighten($button_bg_color, 6%);
}
// checked button
@else if $t==checked {
color: $tc;
background-color: lighten($button_bg_color, 9%);
&:hover { background-color: lighten($button_bg_color, 12%);}
&:active { background-color: lighten($button_bg_color, 15%);}
} }
// insensitive button // insensitive button
@ -187,79 +217,73 @@
color: transparentize($selected_fg_color, .5); color: transparentize($selected_fg_color, .5);
} }
} }
// reset // reset
@else if $t==undecorated { @else if $t==undecorated {
background-color: transparent; background-color: transparent;
background-color: none; background-color: none;
&:insensitive {
@include button(insensitive);
background-color: transparent;
color: transparentize($selected_fg_color, .5);
}
} }
} }
// tile // tile
@mixin tile($color) { @mixin tile_button($color, $flat: true) {
@extend %tile; @extend %tile;
background-color: transparent; @if $flat {
background-color: transparent;
&:hover, } @else {
&:selected:hover { background-color: transparentize($color, .84);
background-color: transparentize($color, .85);
} }
&:hover { background-color: transparentize($color, .9);}
&:focus:hover { &:selected, &:focus {
background-color: transparentize($color, .8); background-color: transparentize($color, .87);
&:hover { background-color: transparentize($color, .84);}
&:active { background-color: transparentize($color, .87);}
} }
&:active { background-color: transparentize($color, .84);}
&:selected, &:outlined, &:checked {
&:focus { background-color: transparentize($color, .81);
background-color: transparentize($color, .9); &:active { background-color: transparentize($color, .78);}
&:hover { background-color: transparentize($color, .75);}
} }
&:outlined,
&:checked,
&:active {
background-color: transparentize(darken($osd_bg_color, 10%), .5);
}
}
// overview icons
// mixin fo tiles in the overview
@mixin overview_icon($color) {
.overview-icon {
@extend %tile;
color: $color;
}
&:hover,
&:focus:hover,
&:selected {
.overview-icon {
background-color: transparentize($color, .9);
}
}
&:focus {
.overview-icon {
background-color: transparentize($color, .95);
// border-color: $selected_bg_color;
}
}
&:drop { &:drop {
.overview-icon { border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping background-color: transparentize($selected_bg_color, .8);
background-color: transparentize($selected_bg_color, .8);
}
}
&:active,
&:focus:active,
&:checked {
.overview-icon {
background-color: transparentize(darken($osd_bg_color, 10%), .5);
}
} }
} }
// overview icon, dash, app grid
@mixin overview_icon($color, $flat: true) {
.overview-icon { @extend %tile; }
@if $flat {
.overview-icon { background-color: transparent;}
} @else {
.overview-icon { background-color: transparentize($color, .81);}
}
&:hover .overview-icon { background-color: transparentize($color, .9);}
&:selected .overview-icon,
&:focus .overview-icon {
background-color: transparentize($color, .87);
&:hover .overview-icon { background-color: transparentize($color, .84);}
&:active .overview-icon { background-color: transparentize($color, .87);}
}
&:active .overview-icon { background-color: transparentize($color, .84);}
&:outlined .overview-icon,
&:checked .overview-icon {
background-color: transparentize($color, .81);
&:active .overview-icon { background-color: transparentize($color, .78);}
&:hover .overview-icon { background-color: transparentize($color, .75);}
}
&:drop .overview-icon {
border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
background-color: transparentize($selected_bg_color, .8);
}
}
// styling for elements within popovers that look like notifications // styling for elements within popovers that look like notifications
@mixin card($flat: false) { @mixin card($flat: false) {

1
data/theme/gnome-shell-sass/_widgets.scss
View File

@ -44,7 +44,6 @@
// A11y / misc // A11y / misc
@import 'widgets/a11y'; @import 'widgets/a11y';
@import 'widgets/misc'; @import 'widgets/misc';
@import 'widgets/tiled-previews';
@import 'widgets/keyboard'; @import 'widgets/keyboard';
@import 'widgets/looking-glass'; @import 'widgets/looking-glass';
// Lock / login screens // Lock / login screens

48
data/theme/gnome-shell-sass/widgets/_app-grid.scss
View File

@ -4,10 +4,10 @@ $app_icon_size: 96px;
// app icons // app icons
.icon-grid { .icon-grid {
row-spacing: $base_spacing * 2; row-spacing: $base_padding * 2;
column-spacing: $base_spacing * 2; column-spacing: $base_padding * 2;
max-row-spacing: $base_spacing * 12; max-row-spacing: $base_padding * 12;
max-column-spacing: $base_spacing * 12; max-column-spacing: $base_padding * 12;
page-padding-top: $base_padding * 4; page-padding-top: $base_padding * 4;
page-padding-bottom: $base_padding * 4; page-padding-bottom: $base_padding * 4;
page-padding-left: $base_padding * 2; page-padding-left: $base_padding * 2;
@ -16,31 +16,28 @@ $app_icon_size: 96px;
/* App Icons */ /* App Icons */
$app_grid_fg_color: #fff;
// Icon tiles in the app grid // Icon tiles in the app grid
.app-well-app, .app-well-app {
%app_well_app { @include overview_icon($osd_fg_color);
@include overview_icon($app_grid_fg_color);
.overview-icon {
padding: $base_padding*2;
}
.overview-icon.overview-icon-with-label { .overview-icon.overview-icon-with-label {
padding: 10px 8px 5px 8px;
> StBoxLayout { > StBoxLayout {
spacing: $base_spacing; spacing: $base_padding;
} }
} }
} }
/* App Folders */ // app folders
.app-well-app.app-folder { .app-well-app.app-folder {
background-color: $dash_background_color; @include overview_icon($osd_fg_color, $flat: false);
border-radius: $base_border_radius * 2; // same as %tile
} }
// expanded folder // expanded folder
.app-folder-dialog { //style like the dash .app-folder-dialog {
border-radius: 48px; border-radius: $modal_radius*2;
background-color: $dash_background_color; background-color: $dash_background_color;
padding: 12px 0px 12px 0px; padding: 12px 0px 12px 0px;
@ -50,8 +47,7 @@ $app_grid_fg_color: #fff;
& .folder-name-label, & .folder-name-label,
& .folder-name-entry { & .folder-name-entry {
font-size: 18pt; @extend %title_1;
font-weight: 1000;
} }
& .folder-name-entry { width: 300px } & .folder-name-entry { width: 300px }
@ -61,7 +57,6 @@ $app_grid_fg_color: #fff;
& .edit-folder-button { & .edit-folder-button {
@include button(undecorated); @include button(undecorated);
padding: 0;
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 18px; border-radius: 18px;
@ -75,8 +70,8 @@ $app_grid_fg_color: #fff;
} }
& .icon-grid { & .icon-grid {
row-spacing: $base_spacing * 2; row-spacing: $base_padding * 2;
column-spacing: $base_spacing * 5; column-spacing: $base_padding * 5;
page-padding-top: 0; page-padding-top: 0;
page-padding-bottom: 0; page-padding-bottom: 0;
page-padding-left: 0; page-padding-left: 0;
@ -99,23 +94,18 @@ $app_grid_fg_color: #fff;
height: 5px; height: 5px;
width: 5px; width: 5px;
border-radius:5px; border-radius:5px;
margin-bottom: 8px;
background-color: $osd_fg_color; background-color: $osd_fg_color;
margin-bottom: 2px;
} }
// Rename popup for app folders // Rename popup for app folders
.rename-folder-popup { .rename-folder-popup {
.rename-folder-popup-item { .rename-folder-popup-item {
spacing: $base_spacing; spacing: $base_padding;
&:ltr, &:rtl { padding: 0 $base_padding * 2; } &:ltr, &:rtl { padding: 0 $base_padding * 2; }
} }
} }
// right-click app menu
.app-menu {
max-width: 27.25em;
}
// App Grid pagination indicators // App Grid pagination indicators
.page-indicator { .page-indicator {
padding: $base_padding $base_padding * 2 0; padding: $base_padding $base_padding * 2 0;

1
data/theme/gnome-shell-sass/widgets/_buttons.scss
View File

@ -2,4 +2,5 @@
.button { .button {
@extend %button; // that's it @extend %button; // that's it
min-height: 22px;
} }

111
data/theme/gnome-shell-sass/widgets/_calendar.scss
View File

@ -1,19 +1,16 @@
/* Date/Time Menu */ /* Date/Time Menu */
// overall menu // overall menu
#calendarArea {} #calendarArea {
padding: $base_padding;
}
// Calendar menu side column // Calendar menu side column
.datemenu-calendar-column { .datemenu-calendar-column {
spacing: $base_spacing; spacing: $base_padding;
border: none;
border-style: solid;
border-color: $borders_color;
&:ltr {padding-left: $base_padding;} &:ltr {padding-left: $base_padding;}
&:rtl {padding-right: $base_padding;} &:rtl {padding-right: $base_padding;}
.datemenu-displays-box {spacing: $base_padding;}
.datemenu-displays-box {spacing: $base_spacing;}
} }
/* today button (the date) */ /* today button (the date) */
@ -23,21 +20,19 @@
// weekday label // weekday label
.day-label { .day-label {
@include fontsize($base_font_size+1); @extend %heading;
color: $insensitive_fg_color;
font-weight: bold;
} }
// date label // date label
.date-label { .date-label {
@include fontsize($base_font_size+7); @extend %title_2;
font-weight: 1000;
} }
} }
/* Calendar */ /* Calendar */
.calendar { .calendar {
@include card(flat); @include card(flat);
margin-top: 0;
// month header // month header
.calendar-month-header { .calendar-month-header {
@ -50,9 +45,10 @@
// month label // month label
.calendar-month-label { .calendar-month-label {
font-weight: bold; color: lighten($fg_color,5%);
@extend %heading;
padding: 8px 0;
} }
.pager-button { .pager-button {
background-color: transparent; background-color: transparent;
height: 32px; height: 32px;
@ -67,24 +63,23 @@
$calendar_day_size: 32px; $calendar_day_size: 32px;
.calendar-day-base { .calendar-day-base {
@include fontsize($base_font_size - 3);
text-align: center; text-align: center;
margin: 2px; margin: 2px;
height: $calendar_day_size; padding: 0 !important;
width: $calendar_day_size; height: $calendar_day_size !important;
border-radius: $calendar_day_size * 0.5 + 2px; width: $calendar_day_size !important;
font-feature-settings: "tnum"; border-radius: 99px;
@extend %numeric;
@extend %smaller;
&:hover {background-color: $hover_bg_color;} &:hover {background-color: $hover_bg_color;}
&:focus { &:focus {
font-weight: 1000;
background-color: mix($bg_color, $selected_bg_color, 80%); background-color: mix($bg_color, $selected_bg_color, 80%);
color: $selected_fg_color; color: $selected_fg_color;
box-shadow: 0 0 0 2px transparentize($selected_bg_color, 0.4); box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
} }
&:active,&:selected { &:active,&:selected {
font-weight: 1000;
color: $active_fg_color; color: $active_fg_color;
background-color: $active_bg_color; background-color: $active_bg_color;
&:focus { &:focus {
@ -97,20 +92,14 @@
color: $insensitive_fg_color; color: $insensitive_fg_color;
padding-top: $base_padding; padding-top: $base_padding;
height: 16px !important; // force heading to be smaller height height: 16px !important; // force heading to be smaller height
@include fontsize($base_font_size - 2); font-weight: bold;
@extend %smaller;
} }
} }
.calendar-day { .calendar-day {}
border-width: 0; // border collapse hack - see calendar.js
}
.calendar-work-day {} .calendar-work-day {}
.calendar-nonwork-day {color: $insensitive_fg_color;}
.calendar-nonwork-day {
color: $insensitive_fg_color;
}
.calendar-other-month-day { .calendar-other-month-day {
color: transparentize($fg_color, 0.5); color: transparentize($fg_color, 0.5);
&.calendar-nonwork-day { &.calendar-nonwork-day {
@ -118,11 +107,10 @@
} }
} }
// Today // Today
.calendar-today { .calendar-today {
background-color: $selected_bg_color; background-color: $selected_bg_color;
font-weight: 1000; font-weight: 800;
color: $selected_fg_color !important; color: $selected_fg_color !important;
&:hover,&:focus { &:hover,&:focus {
@ -144,10 +132,6 @@
.calendar-day-with-events { .calendar-day-with-events {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg")); background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
background-size: contain; background-size: contain;
&.calendar-work-day {
color: lighten($fg_color,10%);
font-weight: bold;
}
} }
.calendar-week-number { .calendar-week-number {
@ -155,7 +139,7 @@
font-weight: bold; font-weight: bold;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
margin: 6px; margin: 6px;
padding: $base_padding; padding: 0 $base_padding;
border-radius: 3px; border-radius: 3px;
background-color: darken($bg_color, 2%); background-color: darken($bg_color, 2%);
color: $insensitive_fg_color color: $insensitive_fg_color
@ -168,23 +152,23 @@
padding: $base_padding * 2; padding: $base_padding * 2;
.events-box { .events-box {
spacing: $base_spacing; spacing: $base_padding;
} }
.events-list { .events-list {
spacing: 2 * $base_spacing; spacing: 2 * $base_padding;
} }
.events-title { .events-title {
@extend %heading;
color: $insensitive_fg_color; color: $insensitive_fg_color;
font-weight: bold;
margin-bottom: $base_margin; margin-bottom: $base_margin;
} }
.event-time { .event-time {
@extend %numeric;
@extend %caption;
color: $insensitive_fg_color; color: $insensitive_fg_color;
font-feature-settings: "tnum";
@include fontsize($base_font_size - 1);
} }
} }
@ -194,29 +178,26 @@
padding: $base_padding * 2; padding: $base_padding * 2;
.world-clocks-grid { .world-clocks-grid {
spacing-rows: $base_spacing; spacing-rows: $base_padding;
spacing-columns: $base_spacing * 2; spacing-columns: $base_padding * 2;
} }
// title // title
.world-clocks-header { .world-clocks-header {
@extend %heading;
color: $insensitive_fg_color; color: $insensitive_fg_color;
font-weight: bold;
} }
// city label // city label
.world-clocks-city { .world-clocks-city {
color: $fg_color; color: $fg_color;
@include fontsize($base_font_size);
font-weight: normal;
} }
// timezone time // timezone time
.world-clocks-time { .world-clocks-time {
font-weight: bold; @extend %heading;
@extend %numeric;
color: $fg_color; color: $fg_color;
font-feature-settings: "tnum";
@include fontsize($base_font_size);
&:ltr {text-align: right;} &:ltr {text-align: right;}
&:rtl {text-align: left;} &:rtl {text-align: left;}
@ -224,9 +205,9 @@
// timezone offset label // timezone offset label
.world-clocks-timezone { .world-clocks-timezone {
@extend %numeric;
@extend %caption;
color: $insensitive_fg_color; color: $insensitive_fg_color;
font-feature-settings: "tnum";
@include fontsize($base_font_size - 1);
} }
} }
@ -236,42 +217,40 @@
padding: $base_padding * 2; padding: $base_padding * 2;
.weather-box { .weather-box {
spacing: $base_spacing + $base_margin; spacing: $base_padding + $base_margin;
} }
.weather-header-box { .weather-header-box {
spacing: $base_spacing; spacing: $base_padding;
} }
.weather-header { .weather-header {
color: $insensitive_fg_color; color: $insensitive_fg_color;
font-weight: bold; @extend %heading;
&.location { &.location {
font-weight: normal; font-weight: normal;
@include fontsize($base_font_size - 1);
} }
} }
.weather-grid { .weather-grid {
spacing-rows: $base_spacing; spacing-rows: $base_padding;
spacing-columns: $base_spacing * 2; spacing-columns: $base_padding * 2;
} }
.weather-forecast-time { .weather-forecast-time {
@extend %numeric;
@extend %caption;
color: darken($fg_color,30%); color: darken($fg_color,30%);
font-feature-settings: "tnum";
@include fontsize($base_font_size - 2);
font-weight: normal;
padding-top: 0.2em; padding-top: 0.2em;
padding-bottom: 0.4em; padding-bottom: 0.4em;
} }
.weather-forecast-icon { .weather-forecast-icon {
icon-size: $base_icon_size * 2; icon-size: $large_icon_size;
} }
.weather-forecast-temp { .weather-forecast-temp {
font-weight: bold; @extend %heading;
} }
} }

37
data/theme/gnome-shell-sass/widgets/_dash.scss
View File

@ -2,16 +2,13 @@
$dash_background_color: lighten($system_bg_color, 5%); $dash_background_color: lighten($system_bg_color, 5%);
$dash_placeholder_size: 32px; $dash_placeholder_size: 32px;
$dash_padding: $base_padding + 4px; // 10px $dash_padding: $base_padding*2; // 12px
$dash_spacing: $base_padding / 4; $dash_border_radius: $modal_radius + $dash_padding;
$dash_bottom_margin: $base_margin * 4;
$dash_border_radius: $modal_radius + 8px;
// container for the dash // container for the dash
#dash { #dash {
@include fontsize($base_font_size - 2); @extend %caption;
margin-top: $base_margin * 3; margin: 2em;
padding: $dash_padding;
.placeholder { .placeholder {
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
@ -25,19 +22,9 @@ $dash_border_radius: $modal_radius + 8px;
height: $dash_placeholder_size; height: $dash_placeholder_size;
} }
// icon on the dash
.overview-icon {
padding: $base_padding+2px;
}
// Running app indicator (also shown in app grid) // Running app indicator (also shown in app grid)
.app-well-app-running-dot { .app-well-app-running-dot {
height: 5px; margin-bottom: 15px; // hardcoded
width: 5px;
border-radius:5px;
background-color: $osd_fg_color;
margin-top: 2px;
margin-bottom: 12px;
} }
} }
@ -45,29 +32,25 @@ $dash_border_radius: $modal_radius + 8px;
.dash-background { .dash-background {
background-color: $dash_background_color; background-color: $dash_background_color;
border-radius: $dash_border_radius; border-radius: $dash_border_radius;
margin-bottom: 0; // this keeps things vertically centered
padding: $dash_padding; padding: $dash_padding;
spacing: $base_padding;
} }
// items on the dash // items on the dash
.dash-item-container { .dash-item-container {
// each app item on the dash // each app item on the dash
.app-well-app { .app-well-app .overview-icon {
margin: 2px; margin: 0 4px;
padding: $base_padding;
} }
// show apps button // show apps button
.show-apps { .show-apps { @include overview_icon($osd_fg_color);}
@include overview_icon($osd_fg_color);
margin: 2px;
}
} }
// separator between favourites and running apps // separator between favourites and running apps
.dash-separator { .dash-separator {
width: 1px; width: 1px;
margin: 0 $base_margin*2;
background-color: $borders_color; background-color: $borders_color;
} }

18
data/theme/gnome-shell-sass/widgets/_dialogs.scss
View File

@ -1,7 +1,7 @@
/* Modal Dialogs */ /* Modal Dialogs */
.headline { .headline {
@include fontsize($base_font_size + 1); @extend %title_4;
} }
.modal-dialog { .modal-dialog {
@ -34,13 +34,9 @@
.message-dialog-title { .message-dialog-title {
text-align: center; text-align: center;
font-size: 18pt; @extend %title_2;
font-weight: 800;
&.lightweight { &.lightweight { @extend %title_4;}
font-size: 13pt;
font-weight: 800;
}
} }
.message-dialog-description { text-align: center; } .message-dialog-description { text-align: center; }
} }
@ -51,7 +47,7 @@
.dialog-list-title { .dialog-list-title {
text-align: center; text-align: center;
font-weight: bold; @extend %heading;
} }
.dialog-list-scrollview { max-height: 200px; } .dialog-list-scrollview { max-height: 200px; }
@ -64,7 +60,7 @@
.dialog-list-item-title { font-weight: bold; } .dialog-list-item-title { font-weight: bold; }
.dialog-list-item-description { .dialog-list-item-description {
color: darken($fg_color,5%); color: darken($fg_color,5%);
@include fontsize($base_font_size - 1); @extend %caption;
} }
} }
} }
@ -78,7 +74,7 @@
} }
.run-dialog-entry { width: 20em; } .run-dialog-entry { width: 20em; }
.run-dialog-description { .run-dialog-description {
@include fontsize($base_font_size - 1); @extend %caption;
text-align: center; text-align: center;
color: darken($fg_color, 20%); color: darken($fg_color, 20%);
} }
@ -119,7 +115,7 @@
.prompt-dialog-info-label, .prompt-dialog-info-label,
.prompt-dialog-null-label { .prompt-dialog-null-label {
text-align: center; text-align: center;
@include fontsize($base_font_size - 1); @extend %caption;
} }
.prompt-dialog-error-label { .prompt-dialog-error-label {

8
data/theme/gnome-shell-sass/widgets/_entries.scss
View File

@ -3,23 +3,27 @@
StEntry { StEntry {
border-radius: $base_border_radius; border-radius: $base_border_radius;
padding: 8px; padding: 8px;
border-width: 0;
color: $fg_color; color: $fg_color;
@include entry(normal); @include entry(normal);
//&:hover { @include entry(hover);} &:hover { @include entry(hover);}
&:focus { @include entry(focus);} &:focus { @include entry(focus);}
&:insensitive { @include entry(insensitive);} &:insensitive { @include entry(insensitive);}
selection-background-color: $selected_bg_color; selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color; selected-color: $selected_fg_color;
StIcon.capslock-warning { StIcon.capslock-warning {
icon-size: 16px; icon-size: 16px;
warning-color: $warning_color; warning-color: $warning_color;
padding: 0 4px; padding: 0 4px;
} }
StIcon.peek-password { StIcon.peek-password {
icon-size: $base_icon_size; icon-size: $base_icon_size;
padding: 0 4px; padding: 0 4px;
} }
StLabel.hint-text { StLabel.hint-text {
margin-left: 2px; margin-left: 2px;
color: transparentize($fg_color, 0.3); color: transparentize($fg_color, 0.3);

29
data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
View File

@ -5,31 +5,32 @@
} }
.candidate-popup-content { .candidate-popup-content {
padding: 0.5em; padding: $base_padding;
spacing: 0.3em; spacing: $base_padding;
@extend .popup-menu-content;
} }
.candidate-index { .candidate-index {
padding: 0 0.5em 0 0; padding: 0;
color: darken($fg_color,10%); padding-right: $base_padding;
color: $insensitive_fg_color;
} }
.candidate-box { .candidate-box {
padding: 0.3em 0.5em 0.3em 0.5em; padding: $base_padding $base_padding*2 $base_padding $base_padding*2;
border-radius: $base_border_radius; border-radius: $base_border_radius;
&:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; } &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
&:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
} }
.candidate-page-button-box { .candidate-page-button-box {
height: 2em; height: 2em;
.vertical & { padding-top: 0.5em; } .vertical & { padding-top: $base_padding*2; }
.horizontal & { padding-left: 0.5em; } .horizontal & { padding-left: $base_padding*2; }
} }
.candidate-page-button { .candidate-page-button { padding: $base_padding;}
padding: 4px;
}
.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; } .candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0;box-shadow: none;}
.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; } .candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;box-shadow: none;}
.candidate-page-button-icon { icon-size: 1em; } .candidate-page-button-icon { icon-size: $base_icon_size; }

19
data/theme/gnome-shell-sass/widgets/_keyboard.scss
View File

@ -44,8 +44,9 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
@include keyboard_key(normal, $key_bg_color, $osd_fg_color); @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);} &:focus { @include keyboard_key(focus);}
&:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
&:grayed { //FIXMEy &:grayed { //FIXMEy
background-color: darken($bg_color, 3%); background-color: darken($bg_color, 3%);
@ -56,16 +57,18 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// non-character keys // non-character keys
&.default-key { &.default-key {
@include keyboard_key(normal, $default_key_bg_color, $osd_fg_color); @include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
&:hover, &:checked {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);} &:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);} &:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
&:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
border-radius: $key_border_radius; border-radius: $key_border_radius;
} }
// enter key is suggested-action // enter key is suggested-action
&.enter-key { &.enter-key {
@include keyboard_key(normal, $selected_bg_color, $selected_fg_color); @include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
&:hover, &:checked { @include keyboard_key(hover, lighten($selected_bg_color, 3%), $selected_fg_color);} &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);}
&:active {@include keyboard_key(active, darken($selected_bg_color, 2%), $selected_fg_color);} &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);}
&:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);}
border-radius: $key_border_radius; border-radius: $key_border_radius;
color: $osd_fg_color; color: $osd_fg_color;
} }
@ -94,15 +97,16 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
-arrow-border-color: lighten($osd_bg_color, 9%); -arrow-border-color: lighten($osd_bg_color, 9%);
-arrow-base: 20px; -arrow-base: 20px;
-arrow-rise: 10px; -arrow-rise: 10px;
-boxpointer-gap: $base_spacing; -boxpointer-gap: $base_padding;
padding: $base_padding; padding: $base_padding;
.keyboard-key { .keyboard-key {
@include keyboard_key(normal, $key_bg_color, $osd_fg_color); @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);} &:focus { @include keyboard_key(focus);}
&:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
border-radius:$key_border_radius; border-radius:$key_border_radius;
} }
@ -142,7 +146,8 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
@include keyboard_key(undecorated, $key_bg_color, $osd_fg_color); @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);} &:focus { @include keyboard_key(focus);}
&:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
} }
} }

10
data/theme/gnome-shell-sass/widgets/_login-dialog.scss
View File

@ -48,8 +48,8 @@
.login-dialog-session-list-button { .login-dialog-session-list-button {
padding: 0; padding: 0;
border-radius: 99px; border-radius: 99px;
width: $base_icon_size * 2; width: $large_icon_size;
height: $base_icon_size * 2; height: $large_icon_size;
border-color: darken($system_bg_color, 3%); border-color: darken($system_bg_color, 3%);
background-color: darken($system_bg_color, 3%); background-color: darken($system_bg_color, 3%);
@ -76,7 +76,7 @@
} }
.login-dialog-not-listed-label { .login-dialog-not-listed-label {
@include fontsize($base_font_size - 1); @extend %caption;
font-weight: bold; font-weight: bold;
color: darken($osd_fg_color,30%); color: darken($osd_fg_color,30%);
padding-top: 1em; padding-top: 1em;
@ -158,7 +158,7 @@
.login-dialog-prompt-layout { .login-dialog-prompt-layout {
padding-top: 24px; padding-top: 24px;
padding-bottom: 12px; padding-bottom: 12px;
spacing: $base_spacing * 2; spacing: $base_padding * 2;
width: 23em; width: 23em;
} }
@ -185,8 +185,8 @@
// Custom styling for unlock entry // Custom styling for unlock entry
.unlock-dialog { .unlock-dialog {
StEntry { StEntry {
border:none !important;
&:focus { &:focus {
box-shadow:none;
background-color: transparentize($fg_color, 0.9); background-color: transparentize($fg_color, 0.9);
} }
&:insensitive { &:insensitive {

27
data/theme/gnome-shell-sass/widgets/_looking-glass.scss
View File

@ -8,7 +8,7 @@
border: 1px solid $osd_outer_borders_color; border: 1px solid $osd_outer_borders_color;
color: $osd_fg_color; color: $osd_fg_color;
padding: $base_padding; padding: $base_padding;
spacing: $base_spacing; spacing: $base_padding;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
& > #Toolbar { & > #Toolbar {
@ -16,7 +16,7 @@
padding: $base_padding; padding: $base_padding;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
spacing: $base_spacing; spacing: $base_padding;
.lg-toolbar-button { .lg-toolbar-button {
padding: $base_padding $base_padding*2; padding: $base_padding $base_padding*2;
@ -27,7 +27,7 @@
} }
.labels { .labels {
spacing: $base_spacing; spacing: $base_padding;
} }
.notebook-tab { .notebook-tab {
@ -54,8 +54,8 @@
} }
} }
StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; padding: $base_padding; } StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
StBoxLayout#ResultsArea { spacing: $base_spacing; padding: $base_padding; } StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
} }
.lg-dialog { .lg-dialog {
@ -83,12 +83,12 @@
} }
.lg-completions-text { .lg-completions-text {
font-size: .9em; @extend %caption;
font-style: italic; font-style: italic;
} }
.lg-obj-inspector-title { .lg-obj-inspector-title {
spacing: $base_spacing; spacing: $base_padding;
} }
.lg-obj-inspector-button { .lg-obj-inspector-button {
@ -103,7 +103,7 @@
.lg-extensions-list { .lg-extensions-list {
padding: $base_padding; padding: $base_padding;
spacing: $base_spacing; spacing: $base_padding;
} }
.lg-extension { .lg-extension {
@ -112,11 +112,11 @@
} }
.lg-extension-name { .lg-extension-name {
font-weight: bold; @extend %heading;
} }
.lg-extension-meta { .lg-extension-meta {
spacing: $base_spacing; spacing: $base_padding;
} }
// Inspector // Inspector
@ -128,7 +128,7 @@
} }
.lg-debug-flag-button { .lg-debug-flag-button {
StLabel { padding: $base_spacing, 2 * $base_spacing; } StLabel { padding: $base_padding, 2 * $base_padding; }
color: $fg_color; color: $fg_color;
&:hover { color: lighten($fg_color, 20%); } &:hover { color: lighten($fg_color, 20%); }
@ -136,8 +136,7 @@
} }
.lg-debug-flags-header { .lg-debug-flags-header {
padding-top: 2 * $base_spacing; padding-top: 2 * $base_padding;
font-size: 120%;
font-weight: bold;
padding: $base_padding; padding: $base_padding;
@extend %title_2;
} }

23
data/theme/gnome-shell-sass/widgets/_message-list.scss
View File

@ -4,20 +4,15 @@
// main list // main list
.message-list { .message-list {
width: 32em; width: 32em;
border: none; border: solid $borders_color;
border-style: solid;
border-color: $borders_color;
padding: $base_padding;
// padding and margins to account for scrollbar // padding and margins to account for scrollbar
&:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; } &:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
&:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; } &:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
.message-list-placeholder { .message-list-placeholder {
font-weight:1000; @extend %title_2;
font-size: 18pt; color: transparentize($insensitive_fg_color, .5);
color: transparentize($fg_color, .8);
spacing: 12px;
// icon size and color // icon size and color
> StIcon { > StIcon {
@ -29,7 +24,7 @@
} }
.message-list-sections { .message-list-sections {
spacing: $base_spacing; spacing: $base_padding;
margin: 0; margin: 0;
padding-bottom: $base_padding; padding-bottom: $base_padding;
@ -40,15 +35,15 @@
.message-list-section, .message-list-section,
.message-list-section-list { .message-list-section-list {
spacing: $base_spacing; spacing: $base_padding;
} }
// do-not-disturb + clear button // do-not-disturb + clear button
.message-list-controls { .message-list-controls {
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: $base_padding; padding: $base_padding;
margin: 0; spacing: $base_padding;
spacing: $base_spacing; @extend %heading;
.dnd-button { .dnd-button {
// We need this because the focus outline isn't inset like for the buttons // We need this because the focus outline isn't inset like for the buttons
@ -80,7 +75,7 @@
// icon size and color // icon size and color
> StIcon { > StIcon {
icon-size: $base_icon_size*2; // 32px icon-size: $large_icon_size; // 32px
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
@ -177,7 +172,7 @@
background-color: $bg_color; background-color: $bg_color;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $base_border_radius; border-radius: $base_border_radius;
icon-size: $base_icon_size * 2 !important; // 32px icon-size: $large_icon_size !important; // 32px
padding: ($base_padding*2 + 2); // 16px padding: ($base_padding*2 + 2); // 16px
} }
} }

8
data/theme/gnome-shell-sass/widgets/_misc.scss
View File

@ -48,7 +48,7 @@
.caps-lock-warning-label { .caps-lock-warning-label {
text-align: center; text-align: center;
padding-bottom: 8px; padding-bottom: 8px;
@include fontsize($base_font_size - 1); @extend %caption;
color: $warning_color; color: $warning_color;
} }
@ -57,3 +57,9 @@
.workspace-animation { .workspace-animation {
background-color: $system_bg_color; background-color: $system_bg_color;
} }
/* Tiled window previews */
.tile-preview {
background-color: transparentize($selected_bg_color,0.5);
border: 1px solid $selected_bg_color;
}

65
data/theme/gnome-shell-sass/widgets/_network-dialog.scss
View File

@ -1,4 +1,4 @@
/* Network Dialogs */ /* Select Network dialogs */
.nm-dialog { .nm-dialog {
max-height: 34em; max-height: 34em;
min-height: 31em; min-height: 31em;
@ -10,70 +10,39 @@
padding: 24px; padding: 24px;
} }
.nm-dialog-airplane-box { spacing: 12px; } .nm-dialog-header { @extend %heading; }
.nm-dialog-subheader { color: $insensitive_fg_color;}
.nm-dialog-airplane-headline { .nm-dialog-header-icon { icon-size: $large_icon_size;}
font-weight: bold;
text-align: center;
}
.nm-dialog-airplane-text { color: $fg_color; }
// header
.nm-dialog-header {
font-weight: bold;
}
.nm-dialog-subheader {
color: $insensitive_fg_color;
}
.nm-dialog-header-icon {
icon-size: $base_icon_size * 2;
}
.nm-dialog-header-hbox { spacing: 10px; } .nm-dialog-header-hbox { spacing: 10px; }
// airplane mode
.nm-dialog-airplane-headline {
font-weight: bold;
}
.nm-dialog-airplane-text {
color: $insensitive_fg_color;
}
// list of networks
.nm-dialog-scroll-view { .nm-dialog-scroll-view {
border: none;
padding:$base_padding; padding:$base_padding;
border-radius: $base_border_radius; border-radius: $base_border_radius;
background-color: darken($bg_color, 3%); background-color: $base_color;
} }
// list item
.nm-dialog-item { .nm-dialog-item {
@include fontsize($base_font_size);
border: none;
padding: $base_padding * 2; padding: $base_padding * 2;
spacing: 0px;
text-shadow: none;
icon-shadow: none;
&:selected { &:selected {
background-color: $selected_bg_color; background-color: $selected_bg_color;
color: $selected_fg_color;
border-radius: $base_border_radius - 3px; border-radius: $base_border_radius - 3px;
color: $selected_fg_color;
} }
&:hover { background-color:$hover_bg_color;}
&:hover {
background-color:$hover_bg_color;
}
} }
// icons in list
.nm-dialog-icon { icon-size: $base_icon_size; } .nm-dialog-icon { icon-size: $base_icon_size; }
.nm-dialog-icons { spacing: $base_spacing * 2; } .nm-dialog-icons { spacing: $base_padding * 2; }
// no networks // no networks
.no-networks-label { color: $insensitive_fg_color; }
.no-networks-box { spacing: $base_padding; } .no-networks-box { spacing: $base_padding; }
.no-networks-label { color: $insensitive_fg_color; }
// airplane mode
.nm-dialog-airplane-box {
text-align: center;
spacing: 12px;
}
.nm-dialog-airplane-headline { @extend %title_3;}
.nm-dialog-airplane-text { color: $insensitive_fg_color;}

3
data/theme/gnome-shell-sass/widgets/_notifications.scss
View File

@ -4,9 +4,6 @@ $notification_banner_height: 64px;
$notification_banner_width: 34em; $notification_banner_width: 34em;
$notification_banner_radius: $base_border_radius*1.5; $notification_banner_radius: $base_border_radius*1.5;
// make radius of buttons fit in bubble corner (banner radius - width of focus ring)
$notification_button_radius: ($notification_banner_radius - 2px);
// Banner notifications // Banner notifications
.notification-banner { .notification-banner {
min-height: $notification_banner_height; min-height: $notification_banner_height;

25
data/theme/gnome-shell-sass/widgets/_osd.scss
View File

@ -4,20 +4,27 @@ $osd_levelbar_height:6px;
.osd-window { .osd-window {
@extend %osd_panel; @extend %osd_panel;
@extend %heading;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
&, & > * { spacing: $base_spacing * 2; } // 12px spacing: $base_padding * 2; // 12px
margin: 4em; padding: $base_padding * 2 $base_padding * 3;
& > * { spacing: 8px; }
margin-bottom: 4em;
StIcon { StIcon { icon-size:$large_icon_size;}
icon-size:$base_icon_size * 2;
&:first-child:last-child { padding: 0 $base_padding * 2; }
}
.osd-monitor-label { font-size: 3em; } .osd-monitor-label { font-size: 3em; }
StLabel {
&:ltr { margin-right: 6px; }
&:rtl { margin-left: 6px; }
}
.level { .level {
margin-bottom: 4px;
&:first-child { margin-bottom: 0px; }
height: $osd_levelbar_height; height: $osd_levelbar_height;
min-width:$base_icon_size * 10; min-width:$base_icon_size * 10;
-barlevel-height: $osd_levelbar_height; -barlevel-height: $osd_levelbar_height;
@ -25,8 +32,8 @@ $osd_levelbar_height:6px;
-barlevel-active-background-color: $osd_fg_color; -barlevel-active-background-color: $osd_fg_color;
-barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 3px; -barlevel-overdrive-separator-width: 3px;
&:ltr {margin-right: 16px;} &:ltr { margin-right: 6px; }
&:rtl {margin-left: 16px;} &:rtl { margin-left: 6px; }
} }
} }

2
data/theme/gnome-shell-sass/widgets/_overview.scss
View File

@ -1,7 +1,7 @@
/* OVERVIEW */ /* OVERVIEW */
.controls-manager, .secondary-monitor-workspaces { .controls-manager, .secondary-monitor-workspaces {
spacing: $base_spacing * 2; spacing: $base_padding * 2;
} }
#overviewGroup { #overviewGroup {

8
data/theme/gnome-shell-sass/widgets/_panel.scss
View File

@ -10,7 +10,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
background-color: $panel_bg_color; background-color: $panel_bg_color;
font-weight: bold; font-weight: bold;
height: $panel_height; height: $panel_height;
font-feature-settings: "tnum"; @extend %numeric;
transition-duration: $panel_transition_duration; transition-duration: $panel_transition_duration;
// transparent panel on lock & login screens // transparent panel on lock & login screens
@ -42,7 +42,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
box-shadow: inset 0 0 0 100px $screenshot_ui_button_red; box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
StBoxLayout { StBoxLayout {
spacing: $base_spacing; spacing: $base_padding;
} }
StIcon { StIcon {
@ -186,13 +186,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// App Menu // App Menu
#appMenu { #appMenu {
spacing: $base_spacing; spacing: $base_padding;
.label-shadow { color: transparent; } .label-shadow { color: transparent; }
} }
#appMenu .panel-status-menu-box { #appMenu .panel-status-menu-box {
padding: 0 $base_padding; padding: 0 $base_padding;
spacing: $base_spacing; spacing: $base_padding;
} }

141
data/theme/gnome-shell-sass/widgets/_popovers.scss
View File

@ -2,15 +2,6 @@
// the popover itself // the popover itself
.popup-menu-boxpointer { .popup-menu-boxpointer {
// override popover styles for panel menus so
// we can draw a box shadow and no arrow
-arrow-border-radius: $modal_radius;
-arrow-background-color: transparent;
-arrow-border-color: transparent;
-arrow-border-width: 0;
-arrow-base: 0;
-arrow-rise: $base_margin; // use this as top margin
-arrow-box-shadow: none; // dreaming bugzilla #689995
margin: $base_margin; // used as distance from the screen edge margin: $base_margin; // used as distance from the screen edge
} }
@ -23,107 +14,101 @@
&.panel-menu { &.panel-menu {
-boxpointer-gap: $base_margin+2px; // distance from the panel -boxpointer-gap: $base_margin+2px; // distance from the panel
margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
// style the menu content instead
.popup-menu-content {
padding: $base_padding*1.5;
}
.popup-menu-item {}
} }
} }
// popover content; // popover content
.popup-menu-content { .popup-menu-content {
padding: $base_padding; padding: $base_padding;
border-radius: $modal_radius; // account for margin oddities
border: 1px solid $borders_edge; padding-top: $base_padding - 2px !important;
padding-bottom: $base_padding - 2px !important;
border-radius: $modal_radius - 2px;
border: 1px solid $borders_edge;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
background-color: $bg_color; background-color: $bg_color;
} }
// menu items // menu items
.popup-menu-item { .popup-menu-item {
spacing: $base_spacing; padding: $base_padding*1.5 $base_padding*2;
padding: $base_padding*1.5;
margin: 2px 0; margin: 2px 0;
border-radius: $base_border_radius; border-radius: $base_border_radius;
transition: 0.2s all ease; transition: 0.2s all ease;
background-color: transparent;
&:ltr {padding-right:$base_padding; padding-left: 0;} &:focus, &:hover {
&:rtl {padding-right: 0; padding-left:$base_padding;} background-color: $hover_bg_color !important;
&:active { background-color: $active_bg_color !important;}
}
&:hover { &:checked {background-color: $checked_bg_color !important;}
background-color: $hover_bg_color;
}
&:checked { &:checked {
background-color: $hover_bg_color;
margin-bottom: 0; margin-bottom: 0;
box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 3%); box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%);
border-radius: $base_border_radius $base_border_radius 0 0; border-radius: $base_border_radius $base_border_radius 0 0;
&:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;}
&:hover { &:active { background-color: lighten($checked_bg_color, 5%) !important;}
background-color: lighten($hover_bg_color, 5%);
}
}
&.selected {
background-color: transparentize($fg_color, if($variant=='light', 0.7, 0.9));
color: $fg_color;
} }
&:active { &:active {
background-color: lighten($active_bg_color,3%); background-color: lighten($active_bg_color, 5%);
color: lighten($active_fg_color,3%); color: $active_fg_color;
} }
&:insensitive {color: transparentize($fg_color,0.5);} &:insensitive {color: transparentize($fg_color,0.5);}
} }
// all icons and other graphical elements
// all other graphical elements (sliders)
.popup-inactive-menu-item { .popup-inactive-menu-item {
color: $fg_color; color: $fg_color;
&:insensitive { color: $insensitive_fg_color; }
// "Open Windows" label
font-weight: bold;
font-size: smaller;
&:insensitive {color: $insensitive_fg_color;}
} }
// symbolic icons in popover // symbolic icons in popover
.popup-menu-arrow, .popup-menu-arrow,
.popup-menu-icon { .popup-menu-icon {
icon-size: 16px !important; icon-size: 16px !important; // for some reason the variable doesn't work here
} }
.popup-menu-arrow { .popup-menu-arrow {
margin-right: $base_margin; &:ltr {margin-right: $base_margin;}
&:rtl {margin-left: $base_margin;}
} }
// popover submenus // popover submenus
.popup-sub-menu { .popup-sub-menu {
border:none; background-color: $checked_bg_color;
background-color: $hover_bg_color;
border-radius: 0 0 $base_border_radius $base_border_radius; border-radius: 0 0 $base_border_radius $base_border_radius;
.popup-menu-ornament { .popup-menu-ornament {
min-width: 14px !important; min-width: $base_icon_size !important;
} }
// submenu specific styles
.popup-menu-item { .popup-menu-item {
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
padding: $base_padding*1.5 $base_padding*2;
&:last-child { &:last-child {
border-radius: 0 0 $base_border_radius $base_border_radius; border-radius: 0 0 $base_border_radius $base_border_radius;
} }
&:focus,&:hover { background-color: lighten($hover_bg_color, 10%) !important;}
&:checked {
background-color: lighten($checked_bg_color, 10%) !important;
&:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
}
&:active { background-color: lighten($active_bg_color, 10%) !important;}
} }
.popup-menu-section { .popup-menu-section {
.popup-menu-item:last-child:hover {border-radius: 0 } .popup-menu-item:last-child {
&:hover,&:focus {border-radius: 0;}
}
&:last-child .popup-menu-item:last-child { &:last-child .popup-menu-item:last-child {
border-radius: 0 0 $base_border_radius $base_border_radius; border-radius: 0 0 $base_border_radius $base_border_radius;
} }
@ -132,9 +117,9 @@
// container for radio and check boxes // container for radio and check boxes
.popup-menu-ornament { .popup-menu-ornament {
@extend %heading;
width: 1.2em; width: 1.2em;
font-weight: bold; text-align: center !important;
font-size: 1em;
&:ltr {text-align: right;}; &:ltr {text-align: right;};
&:rtl {text-align: left;}; &:rtl {text-align: left;};
@ -175,30 +160,42 @@
.aggregate-menu { .aggregate-menu {
min-width: 22em; min-width: 22em;
// this is unneeded in at the top-level this menu, hide it // this is unneeded at the top-level in this menu, hide it
.popup-menu-ornament {width:0;padding:0;margin:0;} .popup-menu-ornament { width: 0 !important; }
.popup-menu-item {
&:ltr {padding-left:$base_padding;padding-right:$base_padding*2;}
&:rtl {padding-right:$base_padding;padding-left:$base_padding*2;}
}
// lock screen, shutdown, etc. buttons // lock screen, shutdown, etc. buttons
.popup-menu-icon { .popup-menu-icon {
padding:0;
margin: 0 $base_margin;
-st-icon-style: symbolic; -st-icon-style: symbolic;
&:ltr {margin-right: $base_margin*2;}
&:rtl {margin-left: $base_margin*2;}
} }
// account for icons in submenus with padding // account for ornaments in submenus with padding
.popup-sub-menu .popup-menu-item > :first-child { .popup-sub-menu .popup-menu-item > :first-child {
&:ltr { // this value is hardcoded for visual effect
padding-left: 0; &:ltr { margin-left: $base_margin*2;}
margin-left: $base_icon_size; &:rtl { margin-right: $base_margin*2;}
} }
&:rtl { }
padding-right: 0;
margin-right: $base_icon_size; // right-click (and panel) app menu
.app-menu {
max-width: 27.25em;
.popup-menu-content { margin: $base_margin;}
&.panel-menu {
.popup-menu-content { margin: 0;} // avoid doubling up margin
}
// this is unneeded at the top-level in this menu, hide it
.popup-menu-ornament { width: 0 !important; }
.popup-inactive-menu-item:first-child {
// "Open Windows" label
> StLabel {
@extend %caption_heading;
&:ltr {margin-right: $base_margin*2;}
&:rtl {margin-left: $base_margin*2;}
} }
} }
} }

2
data/theme/gnome-shell-sass/widgets/_screen-shield.scss
View File

@ -11,7 +11,7 @@
.unlock-dialog-clock-time { .unlock-dialog-clock-time {
font-size: 64pt; font-size: 64pt;
padding-top: 42px; padding-top: 42px;
font-feature-settings: "tnum"; @extend %numeric;
} }
.unlock-dialog-clock-date { .unlock-dialog-clock-date {

95
data/theme/gnome-shell-sass/widgets/_screenshot.scss
View File

@ -1,75 +1,50 @@
// Screenshot UI // Screenshot UI
.icon-label-button-container { .icon-label-button-container {
spacing: $base_spacing; spacing: $base_padding;
font-size: $base_font_size - 3pt; @extend %caption;
StIcon { StIcon { icon-size: 32px;}
icon-size: 32px;
}
} }
$screenshot_ui_panel_padding: 18px; $screenshot_ui_panel_padding: $base_padding*3;
$screenshot_ui_shot_cast_margin: 21px; $screenshot_ui_shot_cast_margin: 21px;
$screenshot_ui_shot_cast_border_radius: 12px; $screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
$screenshot_ui_panel_border_radius: $screenshot_ui_shot_cast_border_radius + $screenshot_ui_shot_cast_margin;
$screenshot_ui_shot_cast_spacing: 3px; $screenshot_ui_shot_cast_spacing: 3px;
$screenshot_ui_button_red: #e01b24; $screenshot_ui_button_red: $error_color;
.screenshot-ui-panel { .screenshot-ui-panel {
background-color: $osd_bg_color; @extend %osd_panel;
border-radius: $screenshot_ui_panel_border_radius; border-radius: $screenshot_ui_panel_border_radius;
padding: $screenshot_ui_panel_padding; padding: $screenshot_ui_panel_padding;
// Reduce the bottom padding a little to accommodate the large capture button. // Reduce the bottom padding a little to accommodate the large capture button.
padding-bottom: $screenshot_ui_panel_padding - 6px; padding-bottom: $screenshot_ui_panel_padding - 6px;
margin-bottom: $base_margin * 8; margin-bottom: 4em;
spacing: $base_padding * 2; spacing: $base_padding * 2;
} }
.screenshot-ui-close-button { .screenshot-ui-close-button {
background-color: $osd_bg_color; @extend .window-close; // copy window close button
color: $osd_fg_color; padding: $base_padding; // but with more padding
border-radius: 99px;
padding: 6px;
height: 30px;
width: 30px;
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
margin-top: 8px;
&.left { margin-left: 8px; } &.left { margin-left: 8px; }
&.right { margin-right: 8px; } &.right { margin-right: 8px; }
& StIcon { icon-size: 24px; }
&:hover {
background-color: lighten($osd_bg_color, 15%);
}
&:active {
color: transparentize($osd_fg_color, 0.2);
background-color: darken($osd_bg_color, 5%);
}
} }
.screenshot-ui-type-button { .screenshot-ui-type-button {
padding: $base_padding * 2 $base_padding * 3; @extend %osd_button;
padding: $base_padding * 2 $base_padding * 3 !important;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding; border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
font-weight: bold;
&:hover, &:focus { background-color: $hover_bg_color; }
&:active { background-color: $active_bg_color; }
&:checked { background-color: $hover_bg_color; }
&:insensitive { color: $insensitive_fg_color; }
} }
.screenshot-ui-capture-button { .screenshot-ui-capture-button {
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 99px; border-radius: 99px;
border: 4px white; border: 4px $osd_fg_color;
padding: 4px; padding: 4px;
.screenshot-ui-capture-button-circle { .screenshot-ui-capture-button-circle {
background-color: white; background-color: $osd_fg_color;
transition-duration: 200ms; transition-duration: 200ms;
&:hover, &:focus { background-color: $hover_bg_color; } &:hover, &:focus { background-color: $hover_bg_color; }
border-radius: 99px; border-radius: 99px;
@ -77,13 +52,13 @@ $screenshot_ui_button_red: #e01b24;
&:hover, &:focus { &:hover, &:focus {
.screenshot-ui-capture-button-circle { .screenshot-ui-capture-button-circle {
background-color: darken(white, 15%); background-color: darken($osd_fg_color, 15%);
} }
} }
&:active { &:active {
.screenshot-ui-capture-button-circle { .screenshot-ui-capture-button-circle {
background-color: darken(white, 50%); background-color: darken($osd_fg_color, 50%);
} }
} }
@ -108,7 +83,7 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-shot-cast-container { .screenshot-ui-shot-cast-container {
background-color: $hover_bg_color; background-color: $hover_bg_color;
border-radius: $screenshot_ui_shot_cast_border_radius; border-radius: $modal_radius;
padding: $screenshot_ui_shot_cast_spacing; padding: $screenshot_ui_shot_cast_spacing;
spacing: $screenshot_ui_shot_cast_spacing; spacing: $screenshot_ui_shot_cast_spacing;
@ -117,39 +92,31 @@ $screenshot_ui_button_red: #e01b24;
} }
.screenshot-ui-shot-cast-button { .screenshot-ui-shot-cast-button {
padding: $base_padding $base_padding * 1.5; padding: $base_padding $base_padding*2;
background-color: transparent; background-color: transparent;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); } &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
&:active { background-color: $active_bg_color; } &:active { background-color: lighten($active_bg_color,5%); }
&:checked { background-color: white; color: black; } &:checked { background-color: white; color: black; }
border-radius: $screenshot_ui_shot_cast_border_radius - $screenshot_ui_shot_cast_spacing; border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
StIcon { StIcon { icon-size: $base_icon_size; }
icon-size: $base_icon_size;
}
} }
.screenshot-ui-show-pointer-button { .screenshot-ui-show-pointer-button {
padding: $base_padding * 2; @extend %osd_button;
border-radius: 99px; border-radius: 99px;
background-color: $hover_bg_color; padding: $base_padding * 2 !important;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); } StIcon { icon-size: $base_icon_size; }
&:active { background-color: $active_bg_color; }
&:checked { background-color: darken($hover_bg_color, 10%); }
StIcon {
icon-size: $base_icon_size;
}
} }
.screenshot-ui-area-indicator-shade { .screenshot-ui-area-indicator-shade {
background-color: rgba(0, 0, 0, .3); background-color: rgba(0,0,0,.3);
} }
.screenshot-ui-area-selector { .screenshot-ui-area-selector {
.screenshot-ui-area-indicator-shade { .screenshot-ui-area-indicator-shade {
background-color: rgba(0, 0, 0, .5); background-color: rgba(0,0,0,.5);
} }
.screenshot-ui-area-indicator-selection { .screenshot-ui-area-indicator-selection {
@ -160,7 +127,7 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-area-selector-handle { .screenshot-ui-area-selector-handle {
border-radius: 99px; border-radius: 99px;
background-color: white; background-color: white;
box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2);
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
@ -182,7 +149,7 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-window-selector-window-border { .screenshot-ui-window-selector-window-border {
transition-duration: 200ms; transition-duration: 200ms;
border-radius: 18px; border-radius: $modal_radius;
border: 6px transparent; border: 6px transparent;
} }
@ -215,10 +182,10 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-screen-selector { .screenshot-ui-screen-selector {
transition-duration: 200ms; transition-duration: 200ms;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0,0,0,.5);
&:hover { background-color: rgba(0, 0, 0, .3); } &:hover { background-color: rgba(0,0,0,.3); }
&:active { background-color: rgba(0, 0, 0, .7); } &:active { background-color: rgba(0,0,0,.7); }
&:checked { &:checked {
background-color: transparent; background-color: transparent;
border: 2px white; border: 2px white;

26
data/theme/gnome-shell-sass/widgets/_search-entry.scss
View File

@ -5,29 +5,19 @@ $search_entry_height: 36px;
%search_entry, %search_entry,
.search-entry { .search-entry {
background-color: lighten($bg_color, 5%);
border-width: 2px;
border-color: transparent;
border-radius: $search_entry_height * 0.5; // half the height border-radius: $search_entry_height * 0.5; // half the height
color: transparentize($fg_color,0.3);
margin-top: $base_spacing * 2; margin-top: $base_padding * 2;
margin-bottom: $base_spacing; margin-bottom: $base_padding;
padding: $base_padding+1 $base_padding+3; padding: $base_padding+1 $base_padding+3;
width: $search_entry_width; width: $search_entry_width;
&:hover {
background-color: lighten($hover_bg_color, 5%);
color: lighten($hover_fg_color, 5%);
}
&:focus { @include entry(normal);
border-style: solid; &:hover { @include entry(hover);}
border-color: $selected_bg_color; &:focus { @include entry(focus);}
color: $fg_color; &:insensitive { @include entry(insensitive);}
box-shadow: none;
}
.search-entry-icon { .search-entry-icon {
color: inherit; color: inherit;
icon-size: $base_icon_size; icon-size: $base_icon_size;
margin-top: 2px; // center vertically margin-top: 2px; // center vertically

18
data/theme/gnome-shell-sass/widgets/_search-results.scss
View File

@ -26,29 +26,29 @@
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
color: $osd_fg_color; color: $osd_fg_color;
padding: $base_padding * 3; padding: $base_padding*2;
margin: $base_margin; margin: $base_margin;
// This is the space between the provider icon and the results container // This is the space between the provider icon and the results container
} }
%search_section_content_item { %search_section_content_item {
@include tile($osd_fg_color); @include tile_button($osd_fg_color);
margin: $base_margin;
border-radius: $base_border_radius !important; border-radius: $base_border_radius !important;
} }
// "no results" text // "no results" text
.search-statustext { .search-statustext {
@extend %status_text; @extend %large_title;
} }
.grid-search-results { .grid-search-results {
spacing: $base_spacing * 6; spacing: $base_padding * 6;
} }
// Search results with icons // Search results with icons
.grid-search-result { .grid-search-result {
@extend %app_well_app; @extend .app-well-app;
} }
// search result provider // search result provider
@ -57,7 +57,7 @@
// content // content
.list-search-provider-content { .list-search-provider-content {
spacing: $base_spacing * 2; spacing: $base_padding * 2;
// provider labels // provider labels
.list-search-provider-details { .list-search-provider-details {
@ -69,7 +69,7 @@
// search results list // search results list
.list-search-results { .list-search-results {
spacing: $base_spacing; spacing: $base_padding;
} }
// search result listitem // search result listitem
@ -83,7 +83,7 @@
// list item title (with leading icon) // list item title (with leading icon)
.list-search-result-title { .list-search-result-title {
spacing: $base_spacing * 2; spacing: $base_padding * 2;
// font-weight: bold; // font-weight: bold;
} }

6
data/theme/gnome-shell-sass/widgets/_slider.scss
View File

@ -3,7 +3,6 @@
$slider_size: 16px; $slider_size: 16px;
.slider { .slider {
height: $slider_size;
// slider trough // slider trough
-barlevel-height: 4px; -barlevel-height: 4px;
-barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough -barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough
@ -20,9 +19,4 @@ $slider_size: 16px;
-slider-handle-radius: $slider_size * 0.5; // half the size of the size -slider-handle-radius: $slider_size * 0.5; // half the size of the size
-slider-handle-border-width: 0; -slider-handle-border-width: 0;
-slider-handle-border-color: transparent; // because 0 width -slider-handle-border-color: transparent; // because 0 width
margin: 0 $base_padding;
color: $fg_color;
&:hover { color: $hover_bg_color; }
&:active { color: $active_bg_color; }
} }

9
data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
View File

@ -8,7 +8,7 @@ $switcher_border_radius: $modal_radius + 8px;
// the full screen container of the switcher // the full screen container of the switcher
.switcher-popup { .switcher-popup {
padding: 0; padding: 0;
spacing: $base_spacing * 4; spacing: $base_padding * 4;
} }
// switcher onscreen panel // switcher onscreen panel
@ -20,12 +20,13 @@ $switcher_border_radius: $modal_radius + 8px;
// container for items in list // container for items in list
.switcher-list-item-container { .switcher-list-item-container {
spacing: $base_spacing * 2; spacing: $base_padding * 2;
} }
// each item in the list // each item in the list
.item-box { .item-box {
@include tile($osd_fg_color);
@include tile_button($osd_fg_color);
} }
.separator { .separator {
@ -36,7 +37,7 @@ $switcher_border_radius: $modal_radius + 8px;
// container of thumbnails // container of thumbnails
.thumbnail-box { .thumbnail-box {
padding: 2px; padding: 2px;
spacing: $base_spacing; spacing: $base_padding;
} }
// window thumbnail itself // window thumbnail itself

19
data/theme/gnome-shell-sass/widgets/_tiled-previews.scss
View File

@ -1,19 +0,0 @@
/* Tiled window previews */
$tile_corner_radius: $base_border_radius + 1px;
.tile-preview {
background-color: transparentize($selected_bg_color,0.5);
border: 1px solid $selected_bg_color;
}
.tile-preview-left.on-primary {
border-radius: $tile_corner_radius 0 0 0;
}
.tile-preview-right.on-primary {
border-radius: 0 $tile_corner_radius 0 0;
}
.tile-preview-left.tile-preview-right.on-primary {
border-radius: $tile_corner_radius $tile_corner_radius 0 0;
}

12
data/theme/gnome-shell-sass/widgets/_window-picker.scss
View File

@ -1,10 +1,11 @@
/* Window Picker */ /* Window Picker */
$window_picker_spacing: $base_spacing; // 6px $window_picker_spacing: $base_padding; // 6px
$window_picker_padding: $base_padding * 2; // 12px $window_picker_padding: $base_padding * 2; // 12px
$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4); $window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
$window_close_button_color: darken(transparentize($osd_bg_color, .05), 3%);
$window_close_button_size: 30px; $window_close_button_size: 30px;
$window_close_button_padding: 3px; $window_close_button_padding: 3px;
@ -24,24 +25,23 @@ $window_close_button_padding: 3px;
// Close button // Close button
.window-close { .window-close {
background-color: $osd_bg_color; background-color: $window_close_button_color;
color: $osd_fg_color; color: $osd_fg_color;
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2; border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
padding: $window_close_button_padding; padding: $window_close_button_padding;
height: $window_close_button_size; height: $window_close_button_size;
width: $window_close_button_size; width: $window_close_button_size;
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
transition-duration: 300ms; transition-duration: 300ms;
& StIcon { icon-size: 24px; } & StIcon { icon-size: 24px; } // uses non standard icon size
&:hover { &:hover {
background-color: lighten($osd_bg_color, 15%); background-color: mix($osd_fg_color, $window_close_button_color, 15%);
} }
&:active { &:active {
color: transparentize($osd_fg_color, 0.2); color: transparentize($osd_fg_color, 0.2);
background-color: darken($osd_bg_color, 5%); background-color: darken($window_close_button_color, 5%);
} }
} }

7
data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
View File

@ -1,13 +1,14 @@
/* Workspace Switcher */ /* Workspace Switcher */
$ws_indicator_height: $base_icon_size * 2; $ws_indicator_height: $large_icon_size;
$ws_dot_active: $ws_indicator_height / 3; $ws_dot_active: $ws_indicator_height / 3;
$ws_dot_inactive: $ws_indicator_height / 6; $ws_dot_inactive: $ws_indicator_height / 6;
.workspace-switcher { .workspace-switcher {
@extend %osd_panel; @extend %osd_panel;
margin: 4em; margin-bottom: 4em;
spacing: $base_spacing * 2; spacing: $base_padding * 2;
padding: $base_padding * 2 $base_padding * 3;
} }
.ws-switcher-indicator { .ws-switcher-indicator {

2
data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
View File

@ -3,7 +3,7 @@
// thumbnails in overview // thumbnails in overview
.workspace-thumbnails { .workspace-thumbnails {
visible-width: 32px; //amount visible before hover visible-width: 32px; //amount visible before hover
spacing: $base_spacing; spacing: $base_padding;
padding: $base_padding; padding: $base_padding;
.workspace-thumbnail { .workspace-thumbnail {

1
data/theme/meson.build
View File

@ -37,7 +37,6 @@ theme_sources = files([
'gnome-shell-sass/widgets/_slider.scss', 'gnome-shell-sass/widgets/_slider.scss',
'gnome-shell-sass/widgets/_switcher-popup.scss', 'gnome-shell-sass/widgets/_switcher-popup.scss',
'gnome-shell-sass/widgets/_switches.scss', 'gnome-shell-sass/widgets/_switches.scss',
'gnome-shell-sass/widgets/_tiled-previews.scss',
'gnome-shell-sass/widgets/_window-picker.scss', 'gnome-shell-sass/widgets/_window-picker.scss',
'gnome-shell-sass/widgets/_workspace-switcher.scss', 'gnome-shell-sass/widgets/_workspace-switcher.scss',
'gnome-shell-sass/widgets/_workspace-thumbnails.scss' 'gnome-shell-sass/widgets/_workspace-thumbnails.scss'

2
data/theme/toggle-off-hc.svg
View File

@ -1 +1 @@
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#fff;stroke:none;stroke-width:1;marker:none;fill-opacity:.15000001" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/><path style="fill:#f8f7f7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-dashoffset:2" d="M29 303.18h12v2H29z"/></g></svg> <svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect ry="11" rx="11" y="299.18" x="30" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/><rect style="fill:#fff;stroke:none;stroke-width:1;marker:none;fill-opacity:.15000001" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 586 B

After

Width:  |  Height:  |  Size: 710 B

2
data/theme/toggle-on-hc.svg
View File

@ -1 +1 @@
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)" stroke="#2b73cc"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13" stroke="none"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" stroke="none"/><rect ry="11" rx="11" y="299.18" x="8" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/></g></svg> <svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)" stroke="none"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g><path style="fill:#f8f7f7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-dashoffset:2" d="M14 7v12h-2V7Z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 677 B

After

Width:  |  Height:  |  Size: 518 B