theme: Stylesheet papercuts and other visual fixes
- 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
parent
514558409c
commit
39301a744e
@ -1,8 +1,8 @@
|
||||
// When color definition differs for dark and light variant,
|
||||
// it gets @if-ed depending on $variant
|
||||
|
||||
$base_color: if($variant == 'light', #fff, darken(desaturate(#2a2a2a, 20%), 2%));
|
||||
$bg_color: if($variant == 'light', #f6f5f4, #2a2a2a);
|
||||
$base_color: if($variant == 'light', #fff, darken(desaturate(#241f31, 100%), 2%));
|
||||
$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
|
||||
$fg_color: if($variant == 'light', transparentize(black, .2), white);
|
||||
|
||||
$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));
|
||||
|
||||
// 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_fg_color: mix($fg_color, $bg_color, 50%);
|
||||
|
||||
@ -28,7 +28,6 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
|
||||
// padding, margin and spacing
|
||||
$base_padding: 6px;
|
||||
$base_margin: 4px;
|
||||
$base_spacing: 6px;
|
||||
|
||||
// border radii
|
||||
$base_border_radius: 8px;
|
||||
@ -36,18 +35,17 @@ $base_border_radius: 8px;
|
||||
// radii of things that display over other things, e.g. popovers
|
||||
$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
|
||||
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 7%));
|
||||
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_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, 4%));
|
||||
|
||||
// derived active colors
|
||||
$active_bg_color: darken($bg_color,if($variant=='light', 9%, 5%));
|
||||
$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
|
||||
$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
|
||||
$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
|
||||
$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
|
||||
$base_icon_size: 1.09em;
|
||||
$large_icon_size: $base_icon_size*2; // 32px
|
||||
// $base_icon_size: 16px;
|
||||
|
||||
// Stage
|
||||
@ -65,13 +64,6 @@ stage {
|
||||
|
||||
/* Common Stylings */
|
||||
|
||||
// Text
|
||||
%status_text {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
|
||||
// osd panels
|
||||
%osd_panel {
|
||||
color: $osd_fg_color;
|
||||
@ -97,22 +89,6 @@ stage {
|
||||
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
|
||||
%bubble_panel {
|
||||
color: $fg_color;
|
||||
@ -121,18 +97,39 @@ stage {
|
||||
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
|
||||
// lighter in color and have a greater radius
|
||||
|
||||
$bubble_button_radius:$base_border_radius*1.25;
|
||||
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 7%));
|
||||
|
||||
%bubble_button {
|
||||
padding: $base_padding * 2;
|
||||
font-weight: bold;
|
||||
font-weight: bold !important;
|
||||
margin-right: 1px;
|
||||
|
||||
@include button(normal, $c:$bubble_buttons_color);
|
||||
&:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
|
||||
&:focus { @include button(focus, $c:$bubble_buttons_color);}
|
||||
&:hover { @include button(hover, $c:$bubble_buttons_color);}
|
||||
&:active { @include button(active, $c:$bubble_buttons_color);}
|
||||
&:checked { @include button(checked, $c:$bubble_buttons_color);}
|
||||
|
||||
&:first-child:ltr {
|
||||
border-radius: 0 0 0 $bubble_button_radius;
|
||||
@ -140,7 +137,7 @@ $bubble_button_radius:$base_border_radius*1.25;
|
||||
|
||||
&:last-child:ltr {
|
||||
border-radius: 0 0 $bubble_button_radius 0;
|
||||
border-right-width: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:rtl {
|
||||
@ -149,10 +146,72 @@ $bubble_button_radius:$base_border_radius*1.25;
|
||||
|
||||
&:last-child:rtl {
|
||||
border-radius: 0 0 0 $bubble_button_radius;
|
||||
border-left-width: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
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";}
|
||||
|
||||
@ -25,33 +25,40 @@
|
||||
|
||||
// entries
|
||||
|
||||
@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
|
||||
@mixin entry($t, $fc:$selected_bg_color) {
|
||||
//
|
||||
// Entries drawing function
|
||||
//
|
||||
// $t: entry type
|
||||
// $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:
|
||||
// normal, focus, insensitive
|
||||
//
|
||||
|
||||
@if $t==normal {
|
||||
background-color: $base_color;
|
||||
border-color: $borders_color;
|
||||
background-color: lighten($bg_color, 5%);
|
||||
color: transparentize($fg_color,0.3);
|
||||
border: 2px solid lighten($bg_color, 5%);
|
||||
}
|
||||
|
||||
@if $t==focus {
|
||||
border-color: if($fc==$selected_bg_color,
|
||||
$selected_borders_color,
|
||||
darken($fc,35%));
|
||||
box-shadow: inset 0 0 0 2px $fc;
|
||||
background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%);
|
||||
border-color: $fc;
|
||||
color: $fg_color;
|
||||
&: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 {
|
||||
background-color:lighten($insensitive_bg_color, 5%);
|
||||
border-color: lighten($insensitive_bg_color, 5%);
|
||||
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%);
|
||||
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
|
||||
@else if $t==hover {
|
||||
color: $tc;
|
||||
background-color: lighten($c, if($variant == 'light', 8%, 5%));
|
||||
background-color: lighten($c, 7%);
|
||||
}
|
||||
|
||||
// active key
|
||||
@else if $t==active {
|
||||
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
|
||||
@ -117,6 +134,8 @@
|
||||
// since buttons are all flat an borderless now the mixin is simpler
|
||||
|
||||
@mixin button($t, $tc:$fg_color, $c:$bg_color) {
|
||||
|
||||
$button_bg_color: mix($tc, $c, 5%);
|
||||
//
|
||||
// Button drawing function
|
||||
//
|
||||
@ -133,17 +152,20 @@
|
||||
// normal button
|
||||
@if $t==normal {
|
||||
color: $tc;
|
||||
background-color: mix($tc, $c, 5%);
|
||||
background-color: $button_bg_color;
|
||||
}
|
||||
|
||||
// focused button
|
||||
@if $t==focus {
|
||||
color: $tc;
|
||||
background-color: mix(mix($tc, $c, 5%), $selected_bg_color, 90%);
|
||||
// border-color: lighten($tc, 3%);
|
||||
background-color: mix($button_bg_color, $selected_bg_color, 90%);
|
||||
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
@ -151,13 +173,21 @@
|
||||
// hover button
|
||||
@else if $t==hover {
|
||||
color: $tc;
|
||||
background-color: mix($tc, $c, 7%);
|
||||
background-color: lighten($button_bg_color, 3%);
|
||||
}
|
||||
|
||||
// active button
|
||||
@else if $t==active {
|
||||
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
|
||||
@ -187,79 +217,73 @@
|
||||
color: transparentize($selected_fg_color, .5);
|
||||
}
|
||||
}
|
||||
|
||||
// reset
|
||||
@else if $t==undecorated {
|
||||
background-color: transparent;
|
||||
background-color: none;
|
||||
&:insensitive {
|
||||
@include button(insensitive);
|
||||
background-color: transparent;
|
||||
color: transparentize($selected_fg_color, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tile
|
||||
@mixin tile($color) {
|
||||
@mixin tile_button($color, $flat: true) {
|
||||
@extend %tile;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover,
|
||||
&:selected:hover {
|
||||
background-color: transparentize($color, .85);
|
||||
@if $flat {
|
||||
background-color: transparent;
|
||||
} @else {
|
||||
background-color: transparentize($color, .84);
|
||||
}
|
||||
|
||||
&:focus:hover {
|
||||
background-color: transparentize($color, .8);
|
||||
&:hover { background-color: transparentize($color, .9);}
|
||||
&:selected, &:focus {
|
||||
background-color: transparentize($color, .87);
|
||||
&:hover { background-color: transparentize($color, .84);}
|
||||
&:active { background-color: transparentize($color, .87);}
|
||||
}
|
||||
|
||||
&:selected,
|
||||
&:focus {
|
||||
background-color: transparentize($color, .9);
|
||||
&:active { background-color: transparentize($color, .84);}
|
||||
&:outlined, &:checked {
|
||||
background-color: transparentize($color, .81);
|
||||
&: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 {
|
||||
.overview-icon {
|
||||
border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
|
||||
background-color: transparentize($selected_bg_color, .8);
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus:active,
|
||||
&:checked {
|
||||
.overview-icon {
|
||||
background-color: transparentize(darken($osd_bg_color, 10%), .5);
|
||||
}
|
||||
border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
|
||||
background-color: transparentize($selected_bg_color, .8);
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
@mixin card($flat: false) {
|
||||
|
||||
@ -44,7 +44,6 @@
|
||||
// A11y / misc
|
||||
@import 'widgets/a11y';
|
||||
@import 'widgets/misc';
|
||||
@import 'widgets/tiled-previews';
|
||||
@import 'widgets/keyboard';
|
||||
@import 'widgets/looking-glass';
|
||||
// Lock / login screens
|
||||
|
||||
@ -4,10 +4,10 @@ $app_icon_size: 96px;
|
||||
|
||||
// app icons
|
||||
.icon-grid {
|
||||
row-spacing: $base_spacing * 2;
|
||||
column-spacing: $base_spacing * 2;
|
||||
max-row-spacing: $base_spacing * 12;
|
||||
max-column-spacing: $base_spacing * 12;
|
||||
row-spacing: $base_padding * 2;
|
||||
column-spacing: $base_padding * 2;
|
||||
max-row-spacing: $base_padding * 12;
|
||||
max-column-spacing: $base_padding * 12;
|
||||
page-padding-top: $base_padding * 4;
|
||||
page-padding-bottom: $base_padding * 4;
|
||||
page-padding-left: $base_padding * 2;
|
||||
@ -16,31 +16,28 @@ $app_icon_size: 96px;
|
||||
|
||||
/* App Icons */
|
||||
|
||||
$app_grid_fg_color: #fff;
|
||||
|
||||
// Icon tiles in the app grid
|
||||
.app-well-app,
|
||||
%app_well_app {
|
||||
@include overview_icon($app_grid_fg_color);
|
||||
.app-well-app {
|
||||
@include overview_icon($osd_fg_color);
|
||||
|
||||
.overview-icon {
|
||||
padding: $base_padding*2;
|
||||
}
|
||||
.overview-icon.overview-icon-with-label {
|
||||
padding: 10px 8px 5px 8px;
|
||||
|
||||
> StBoxLayout {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* App Folders */
|
||||
// app folders
|
||||
.app-well-app.app-folder {
|
||||
background-color: $dash_background_color;
|
||||
border-radius: $base_border_radius * 2; // same as %tile
|
||||
@include overview_icon($osd_fg_color, $flat: false);
|
||||
}
|
||||
|
||||
// expanded folder
|
||||
.app-folder-dialog { //style like the dash
|
||||
border-radius: 48px;
|
||||
.app-folder-dialog {
|
||||
border-radius: $modal_radius*2;
|
||||
background-color: $dash_background_color;
|
||||
padding: 12px 0px 12px 0px;
|
||||
|
||||
@ -50,8 +47,7 @@ $app_grid_fg_color: #fff;
|
||||
|
||||
& .folder-name-label,
|
||||
& .folder-name-entry {
|
||||
font-size: 18pt;
|
||||
font-weight: 1000;
|
||||
@extend %title_1;
|
||||
}
|
||||
|
||||
& .folder-name-entry { width: 300px }
|
||||
@ -61,7 +57,6 @@ $app_grid_fg_color: #fff;
|
||||
|
||||
& .edit-folder-button {
|
||||
@include button(undecorated);
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 18px;
|
||||
@ -75,8 +70,8 @@ $app_grid_fg_color: #fff;
|
||||
}
|
||||
|
||||
& .icon-grid {
|
||||
row-spacing: $base_spacing * 2;
|
||||
column-spacing: $base_spacing * 5;
|
||||
row-spacing: $base_padding * 2;
|
||||
column-spacing: $base_padding * 5;
|
||||
page-padding-top: 0;
|
||||
page-padding-bottom: 0;
|
||||
page-padding-left: 0;
|
||||
@ -99,23 +94,18 @@ $app_grid_fg_color: #fff;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border-radius:5px;
|
||||
margin-bottom: 8px;
|
||||
background-color: $osd_fg_color;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
// Rename popup for app folders
|
||||
.rename-folder-popup {
|
||||
.rename-folder-popup-item {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
&:ltr, &:rtl { padding: 0 $base_padding * 2; }
|
||||
}
|
||||
}
|
||||
|
||||
// right-click app menu
|
||||
.app-menu {
|
||||
max-width: 27.25em;
|
||||
}
|
||||
|
||||
// App Grid pagination indicators
|
||||
.page-indicator {
|
||||
padding: $base_padding $base_padding * 2 0;
|
||||
|
||||
@ -2,4 +2,5 @@
|
||||
|
||||
.button {
|
||||
@extend %button; // that's it
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
/* Date/Time Menu */
|
||||
|
||||
// overall menu
|
||||
#calendarArea {}
|
||||
#calendarArea {
|
||||
padding: $base_padding;
|
||||
}
|
||||
|
||||
// Calendar menu side column
|
||||
.datemenu-calendar-column {
|
||||
spacing: $base_spacing;
|
||||
border: none;
|
||||
border-style: solid;
|
||||
border-color: $borders_color;
|
||||
|
||||
spacing: $base_padding;
|
||||
&:ltr {padding-left: $base_padding;}
|
||||
&:rtl {padding-right: $base_padding;}
|
||||
|
||||
.datemenu-displays-box {spacing: $base_spacing;}
|
||||
.datemenu-displays-box {spacing: $base_padding;}
|
||||
}
|
||||
|
||||
/* today button (the date) */
|
||||
@ -23,21 +20,19 @@
|
||||
|
||||
// weekday label
|
||||
.day-label {
|
||||
@include fontsize($base_font_size+1);
|
||||
color: $insensitive_fg_color;
|
||||
font-weight: bold;
|
||||
@extend %heading;
|
||||
}
|
||||
|
||||
// date label
|
||||
.date-label {
|
||||
@include fontsize($base_font_size+7);
|
||||
font-weight: 1000;
|
||||
@extend %title_2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Calendar */
|
||||
.calendar {
|
||||
@include card(flat);
|
||||
margin-top: 0;
|
||||
|
||||
// month header
|
||||
.calendar-month-header {
|
||||
@ -50,9 +45,10 @@
|
||||
|
||||
// month label
|
||||
.calendar-month-label {
|
||||
font-weight: bold;
|
||||
color: lighten($fg_color,5%);
|
||||
@extend %heading;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.pager-button {
|
||||
background-color: transparent;
|
||||
height: 32px;
|
||||
@ -67,24 +63,23 @@
|
||||
$calendar_day_size: 32px;
|
||||
|
||||
.calendar-day-base {
|
||||
@include fontsize($base_font_size - 3);
|
||||
text-align: center;
|
||||
margin: 2px;
|
||||
height: $calendar_day_size;
|
||||
width: $calendar_day_size;
|
||||
border-radius: $calendar_day_size * 0.5 + 2px;
|
||||
font-feature-settings: "tnum";
|
||||
padding: 0 !important;
|
||||
height: $calendar_day_size !important;
|
||||
width: $calendar_day_size !important;
|
||||
border-radius: 99px;
|
||||
@extend %numeric;
|
||||
@extend %smaller;
|
||||
|
||||
&:hover {background-color: $hover_bg_color;}
|
||||
&:focus {
|
||||
font-weight: 1000;
|
||||
background-color: mix($bg_color, $selected_bg_color, 80%);
|
||||
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 {
|
||||
font-weight: 1000;
|
||||
color: $active_fg_color;
|
||||
background-color: $active_bg_color;
|
||||
&:focus {
|
||||
@ -97,20 +92,14 @@
|
||||
color: $insensitive_fg_color;
|
||||
padding-top: $base_padding;
|
||||
height: 16px !important; // force heading to be smaller height
|
||||
@include fontsize($base_font_size - 2);
|
||||
font-weight: bold;
|
||||
@extend %smaller;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
border-width: 0; // border collapse hack - see calendar.js
|
||||
}
|
||||
|
||||
.calendar-day {}
|
||||
.calendar-work-day {}
|
||||
|
||||
.calendar-nonwork-day {
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
|
||||
.calendar-nonwork-day {color: $insensitive_fg_color;}
|
||||
.calendar-other-month-day {
|
||||
color: transparentize($fg_color, 0.5);
|
||||
&.calendar-nonwork-day {
|
||||
@ -118,11 +107,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Today
|
||||
.calendar-today {
|
||||
background-color: $selected_bg_color;
|
||||
font-weight: 1000;
|
||||
font-weight: 800;
|
||||
color: $selected_fg_color !important;
|
||||
|
||||
&:hover,&:focus {
|
||||
@ -144,10 +132,6 @@
|
||||
.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-size: contain;
|
||||
&.calendar-work-day {
|
||||
color: lighten($fg_color,10%);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-week-number {
|
||||
@ -155,7 +139,7 @@
|
||||
font-weight: bold;
|
||||
font-feature-settings: "tnum";
|
||||
margin: 6px;
|
||||
padding: $base_padding;
|
||||
padding: 0 $base_padding;
|
||||
border-radius: 3px;
|
||||
background-color: darken($bg_color, 2%);
|
||||
color: $insensitive_fg_color
|
||||
@ -168,23 +152,23 @@
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.events-box {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.events-list {
|
||||
spacing: 2 * $base_spacing;
|
||||
spacing: 2 * $base_padding;
|
||||
}
|
||||
|
||||
.events-title {
|
||||
@extend %heading;
|
||||
color: $insensitive_fg_color;
|
||||
font-weight: bold;
|
||||
margin-bottom: $base_margin;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
@extend %numeric;
|
||||
@extend %caption;
|
||||
color: $insensitive_fg_color;
|
||||
font-feature-settings: "tnum";
|
||||
@include fontsize($base_font_size - 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -194,29 +178,26 @@
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.world-clocks-grid {
|
||||
spacing-rows: $base_spacing;
|
||||
spacing-columns: $base_spacing * 2;
|
||||
spacing-rows: $base_padding;
|
||||
spacing-columns: $base_padding * 2;
|
||||
}
|
||||
|
||||
// title
|
||||
.world-clocks-header {
|
||||
@extend %heading;
|
||||
color: $insensitive_fg_color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// city label
|
||||
.world-clocks-city {
|
||||
color: $fg_color;
|
||||
@include fontsize($base_font_size);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// timezone time
|
||||
.world-clocks-time {
|
||||
font-weight: bold;
|
||||
@extend %heading;
|
||||
@extend %numeric;
|
||||
color: $fg_color;
|
||||
font-feature-settings: "tnum";
|
||||
@include fontsize($base_font_size);
|
||||
|
||||
&:ltr {text-align: right;}
|
||||
&:rtl {text-align: left;}
|
||||
@ -224,9 +205,9 @@
|
||||
|
||||
// timezone offset label
|
||||
.world-clocks-timezone {
|
||||
@extend %numeric;
|
||||
@extend %caption;
|
||||
color: $insensitive_fg_color;
|
||||
font-feature-settings: "tnum";
|
||||
@include fontsize($base_font_size - 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -236,42 +217,40 @@
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.weather-box {
|
||||
spacing: $base_spacing + $base_margin;
|
||||
spacing: $base_padding + $base_margin;
|
||||
}
|
||||
|
||||
.weather-header-box {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.weather-header {
|
||||
color: $insensitive_fg_color;
|
||||
font-weight: bold;
|
||||
@extend %heading;
|
||||
|
||||
&.location {
|
||||
font-weight: normal;
|
||||
@include fontsize($base_font_size - 1);
|
||||
}
|
||||
}
|
||||
|
||||
.weather-grid {
|
||||
spacing-rows: $base_spacing;
|
||||
spacing-columns: $base_spacing * 2;
|
||||
spacing-rows: $base_padding;
|
||||
spacing-columns: $base_padding * 2;
|
||||
}
|
||||
|
||||
.weather-forecast-time {
|
||||
@extend %numeric;
|
||||
@extend %caption;
|
||||
color: darken($fg_color,30%);
|
||||
font-feature-settings: "tnum";
|
||||
@include fontsize($base_font_size - 2);
|
||||
font-weight: normal;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.weather-forecast-icon {
|
||||
icon-size: $base_icon_size * 2;
|
||||
icon-size: $large_icon_size;
|
||||
}
|
||||
|
||||
.weather-forecast-temp {
|
||||
font-weight: bold;
|
||||
@extend %heading;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,16 +2,13 @@
|
||||
|
||||
$dash_background_color: lighten($system_bg_color, 5%);
|
||||
$dash_placeholder_size: 32px;
|
||||
$dash_padding: $base_padding + 4px; // 10px
|
||||
$dash_spacing: $base_padding / 4;
|
||||
$dash_bottom_margin: $base_margin * 4;
|
||||
$dash_border_radius: $modal_radius + 8px;
|
||||
$dash_padding: $base_padding*2; // 12px
|
||||
$dash_border_radius: $modal_radius + $dash_padding;
|
||||
|
||||
// container for the dash
|
||||
#dash {
|
||||
@include fontsize($base_font_size - 2);
|
||||
margin-top: $base_margin * 3;
|
||||
padding: $dash_padding;
|
||||
@extend %caption;
|
||||
margin: 2em;
|
||||
|
||||
.placeholder {
|
||||
// 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;
|
||||
}
|
||||
|
||||
// icon on the dash
|
||||
.overview-icon {
|
||||
padding: $base_padding+2px;
|
||||
}
|
||||
|
||||
// Running app indicator (also shown in app grid)
|
||||
.app-well-app-running-dot {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border-radius:5px;
|
||||
background-color: $osd_fg_color;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 15px; // hardcoded
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,29 +32,25 @@ $dash_border_radius: $modal_radius + 8px;
|
||||
.dash-background {
|
||||
background-color: $dash_background_color;
|
||||
border-radius: $dash_border_radius;
|
||||
margin-bottom: 0; // this keeps things vertically centered
|
||||
padding: $dash_padding;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
// items on the dash
|
||||
.dash-item-container {
|
||||
|
||||
// each app item on the dash
|
||||
.app-well-app {
|
||||
margin: 2px;
|
||||
.app-well-app .overview-icon {
|
||||
margin: 0 4px;
|
||||
padding: $base_padding;
|
||||
}
|
||||
|
||||
// show apps button
|
||||
.show-apps {
|
||||
@include overview_icon($osd_fg_color);
|
||||
margin: 2px;
|
||||
}
|
||||
.show-apps { @include overview_icon($osd_fg_color);}
|
||||
}
|
||||
|
||||
// separator between favourites and running apps
|
||||
.dash-separator {
|
||||
width: 1px;
|
||||
margin: 0 $base_margin*2;
|
||||
background-color: $borders_color;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* Modal Dialogs */
|
||||
|
||||
.headline {
|
||||
@include fontsize($base_font_size + 1);
|
||||
@extend %title_4;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
@ -34,13 +34,9 @@
|
||||
|
||||
.message-dialog-title {
|
||||
text-align: center;
|
||||
font-size: 18pt;
|
||||
font-weight: 800;
|
||||
@extend %title_2;
|
||||
|
||||
&.lightweight {
|
||||
font-size: 13pt;
|
||||
font-weight: 800;
|
||||
}
|
||||
&.lightweight { @extend %title_4;}
|
||||
}
|
||||
.message-dialog-description { text-align: center; }
|
||||
}
|
||||
@ -51,7 +47,7 @@
|
||||
|
||||
.dialog-list-title {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@extend %heading;
|
||||
}
|
||||
|
||||
.dialog-list-scrollview { max-height: 200px; }
|
||||
@ -64,7 +60,7 @@
|
||||
.dialog-list-item-title { font-weight: bold; }
|
||||
.dialog-list-item-description {
|
||||
color: darken($fg_color,5%);
|
||||
@include fontsize($base_font_size - 1);
|
||||
@extend %caption;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -78,7 +74,7 @@
|
||||
}
|
||||
.run-dialog-entry { width: 20em; }
|
||||
.run-dialog-description {
|
||||
@include fontsize($base_font_size - 1);
|
||||
@extend %caption;
|
||||
text-align: center;
|
||||
color: darken($fg_color, 20%);
|
||||
}
|
||||
@ -119,7 +115,7 @@
|
||||
.prompt-dialog-info-label,
|
||||
.prompt-dialog-null-label {
|
||||
text-align: center;
|
||||
@include fontsize($base_font_size - 1);
|
||||
@extend %caption;
|
||||
}
|
||||
|
||||
.prompt-dialog-error-label {
|
||||
|
||||
@ -3,23 +3,27 @@
|
||||
StEntry {
|
||||
border-radius: $base_border_radius;
|
||||
padding: 8px;
|
||||
border-width: 0;
|
||||
color: $fg_color;
|
||||
|
||||
@include entry(normal);
|
||||
//&:hover { @include entry(hover);}
|
||||
&:hover { @include entry(hover);}
|
||||
&:focus { @include entry(focus);}
|
||||
&:insensitive { @include entry(insensitive);}
|
||||
|
||||
selection-background-color: $selected_bg_color;
|
||||
selected-color: $selected_fg_color;
|
||||
|
||||
StIcon.capslock-warning {
|
||||
icon-size: 16px;
|
||||
warning-color: $warning_color;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
StIcon.peek-password {
|
||||
icon-size: $base_icon_size;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
StLabel.hint-text {
|
||||
margin-left: 2px;
|
||||
color: transparentize($fg_color, 0.3);
|
||||
|
||||
@ -5,31 +5,32 @@
|
||||
}
|
||||
|
||||
.candidate-popup-content {
|
||||
padding: 0.5em;
|
||||
spacing: 0.3em;
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
@extend .popup-menu-content;
|
||||
}
|
||||
|
||||
.candidate-index {
|
||||
padding: 0 0.5em 0 0;
|
||||
color: darken($fg_color,10%);
|
||||
padding: 0;
|
||||
padding-right: $base_padding;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
|
||||
.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;
|
||||
&: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 {
|
||||
height: 2em;
|
||||
.vertical & { padding-top: 0.5em; }
|
||||
.horizontal & { padding-left: 0.5em; }
|
||||
.vertical & { padding-top: $base_padding*2; }
|
||||
.horizontal & { padding-left: $base_padding*2; }
|
||||
}
|
||||
|
||||
.candidate-page-button {
|
||||
padding: 4px;
|
||||
}
|
||||
.candidate-page-button { padding: $base_padding;}
|
||||
|
||||
.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; }
|
||||
.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; }
|
||||
.candidate-page-button-icon { icon-size: 1em; }
|
||||
.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;box-shadow: none;}
|
||||
.candidate-page-button-icon { icon-size: $base_icon_size; }
|
||||
|
||||
@ -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);
|
||||
|
||||
&: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); }
|
||||
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
|
||||
|
||||
&:grayed { //FIXMEy
|
||||
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
|
||||
&.default-key {
|
||||
@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);}
|
||||
&:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
|
||||
border-radius: $key_border_radius;
|
||||
}
|
||||
|
||||
// enter key is suggested-action
|
||||
&.enter-key {
|
||||
@include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
|
||||
&:hover, &:checked { @include keyboard_key(hover, lighten($selected_bg_color, 3%), $selected_fg_color);}
|
||||
&:active {@include keyboard_key(active, darken($selected_bg_color, 2%), $selected_fg_color);}
|
||||
&:hover { @include keyboard_key(hover, $selected_bg_color, $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;
|
||||
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-base: 20px;
|
||||
-arrow-rise: 10px;
|
||||
-boxpointer-gap: $base_spacing;
|
||||
-boxpointer-gap: $base_padding;
|
||||
padding: $base_padding;
|
||||
|
||||
.keyboard-key {
|
||||
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
|
||||
|
||||
&: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); }
|
||||
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
|
||||
|
||||
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);
|
||||
|
||||
&: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); }
|
||||
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,8 +48,8 @@
|
||||
.login-dialog-session-list-button {
|
||||
padding: 0;
|
||||
border-radius: 99px;
|
||||
width: $base_icon_size * 2;
|
||||
height: $base_icon_size * 2;
|
||||
width: $large_icon_size;
|
||||
height: $large_icon_size;
|
||||
border-color: darken($system_bg_color, 3%);
|
||||
background-color: darken($system_bg_color, 3%);
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
}
|
||||
|
||||
.login-dialog-not-listed-label {
|
||||
@include fontsize($base_font_size - 1);
|
||||
@extend %caption;
|
||||
font-weight: bold;
|
||||
color: darken($osd_fg_color,30%);
|
||||
padding-top: 1em;
|
||||
@ -158,7 +158,7 @@
|
||||
.login-dialog-prompt-layout {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 12px;
|
||||
spacing: $base_spacing * 2;
|
||||
spacing: $base_padding * 2;
|
||||
width: 23em;
|
||||
}
|
||||
|
||||
@ -185,8 +185,8 @@
|
||||
// Custom styling for unlock entry
|
||||
.unlock-dialog {
|
||||
StEntry {
|
||||
border:none !important;
|
||||
&:focus {
|
||||
box-shadow:none;
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
}
|
||||
&:insensitive {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
color: $osd_fg_color;
|
||||
padding: $base_padding;
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
|
||||
|
||||
& > #Toolbar {
|
||||
@ -16,7 +16,7 @@
|
||||
padding: $base_padding;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
|
||||
.lg-toolbar-button {
|
||||
padding: $base_padding $base_padding*2;
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.labels {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.notebook-tab {
|
||||
@ -54,8 +54,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; padding: $base_padding; }
|
||||
StBoxLayout#ResultsArea { spacing: $base_spacing; padding: $base_padding; }
|
||||
StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
|
||||
StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
|
||||
}
|
||||
|
||||
.lg-dialog {
|
||||
@ -83,12 +83,12 @@
|
||||
}
|
||||
|
||||
.lg-completions-text {
|
||||
font-size: .9em;
|
||||
@extend %caption;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.lg-obj-inspector-title {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.lg-obj-inspector-button {
|
||||
@ -103,7 +103,7 @@
|
||||
|
||||
.lg-extensions-list {
|
||||
padding: $base_padding;
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.lg-extension {
|
||||
@ -112,11 +112,11 @@
|
||||
}
|
||||
|
||||
.lg-extension-name {
|
||||
font-weight: bold;
|
||||
@extend %heading;
|
||||
}
|
||||
|
||||
.lg-extension-meta {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
// Inspector
|
||||
@ -128,7 +128,7 @@
|
||||
}
|
||||
|
||||
.lg-debug-flag-button {
|
||||
StLabel { padding: $base_spacing, 2 * $base_spacing; }
|
||||
StLabel { padding: $base_padding, 2 * $base_padding; }
|
||||
|
||||
color: $fg_color;
|
||||
&:hover { color: lighten($fg_color, 20%); }
|
||||
@ -136,8 +136,7 @@
|
||||
}
|
||||
|
||||
.lg-debug-flags-header {
|
||||
padding-top: 2 * $base_spacing;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
padding-top: 2 * $base_padding;
|
||||
padding: $base_padding;
|
||||
@extend %title_2;
|
||||
}
|
||||
|
||||
@ -4,20 +4,15 @@
|
||||
// main list
|
||||
.message-list {
|
||||
width: 32em;
|
||||
border: none;
|
||||
border-style: solid;
|
||||
border-color: $borders_color;
|
||||
padding: $base_padding;
|
||||
border: solid $borders_color;
|
||||
|
||||
// padding and margins to account for scrollbar
|
||||
&: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; }
|
||||
|
||||
.message-list-placeholder {
|
||||
font-weight:1000;
|
||||
font-size: 18pt;
|
||||
color: transparentize($fg_color, .8);
|
||||
spacing: 12px;
|
||||
@extend %title_2;
|
||||
color: transparentize($insensitive_fg_color, .5);
|
||||
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
@ -29,7 +24,7 @@
|
||||
}
|
||||
|
||||
.message-list-sections {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
margin: 0;
|
||||
padding-bottom: $base_padding;
|
||||
|
||||
@ -40,15 +35,15 @@
|
||||
|
||||
.message-list-section,
|
||||
.message-list-section-list {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
// do-not-disturb + clear button
|
||||
.message-list-controls {
|
||||
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
|
||||
padding: $base_padding;
|
||||
margin: 0;
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
@extend %heading;
|
||||
|
||||
.dnd-button {
|
||||
// We need this because the focus outline isn't inset like for the buttons
|
||||
@ -80,7 +75,7 @@
|
||||
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: $base_icon_size*2; // 32px
|
||||
icon-size: $large_icon_size; // 32px
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
@ -177,7 +172,7 @@
|
||||
background-color: $bg_color;
|
||||
border: 1px solid transparent;
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
.caps-lock-warning-label {
|
||||
text-align: center;
|
||||
padding-bottom: 8px;
|
||||
@include fontsize($base_font_size - 1);
|
||||
@extend %caption;
|
||||
color: $warning_color;
|
||||
}
|
||||
|
||||
@ -57,3 +57,9 @@
|
||||
.workspace-animation {
|
||||
background-color: $system_bg_color;
|
||||
}
|
||||
|
||||
/* Tiled window previews */
|
||||
.tile-preview {
|
||||
background-color: transparentize($selected_bg_color,0.5);
|
||||
border: 1px solid $selected_bg_color;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* Network Dialogs */
|
||||
/* Select Network dialogs */
|
||||
.nm-dialog {
|
||||
max-height: 34em;
|
||||
min-height: 31em;
|
||||
@ -10,70 +10,39 @@
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.nm-dialog-airplane-box { spacing: 12px; }
|
||||
|
||||
.nm-dialog-airplane-headline {
|
||||
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 { @extend %heading; }
|
||||
.nm-dialog-subheader { color: $insensitive_fg_color;}
|
||||
.nm-dialog-header-icon { icon-size: $large_icon_size;}
|
||||
.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 {
|
||||
border: none;
|
||||
padding:$base_padding;
|
||||
border-radius: $base_border_radius;
|
||||
background-color: darken($bg_color, 3%);
|
||||
background-color: $base_color;
|
||||
}
|
||||
|
||||
// list item
|
||||
.nm-dialog-item {
|
||||
@include fontsize($base_font_size);
|
||||
border: none;
|
||||
padding: $base_padding * 2;
|
||||
spacing: 0px;
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
|
||||
&:selected {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
|
||||
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-icons { spacing: $base_spacing * 2; }
|
||||
.nm-dialog-icons { spacing: $base_padding * 2; }
|
||||
|
||||
// no networks
|
||||
.no-networks-label { color: $insensitive_fg_color; }
|
||||
.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;}
|
||||
|
||||
@ -4,9 +4,6 @@ $notification_banner_height: 64px;
|
||||
$notification_banner_width: 34em;
|
||||
$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
|
||||
.notification-banner {
|
||||
min-height: $notification_banner_height;
|
||||
|
||||
@ -4,20 +4,27 @@ $osd_levelbar_height:6px;
|
||||
|
||||
.osd-window {
|
||||
@extend %osd_panel;
|
||||
@extend %heading;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
&, & > * { spacing: $base_spacing * 2; } // 12px
|
||||
margin: 4em;
|
||||
spacing: $base_padding * 2; // 12px
|
||||
padding: $base_padding * 2 $base_padding * 3;
|
||||
& > * { spacing: 8px; }
|
||||
margin-bottom: 4em;
|
||||
|
||||
StIcon {
|
||||
icon-size:$base_icon_size * 2;
|
||||
|
||||
&:first-child:last-child { padding: 0 $base_padding * 2; }
|
||||
}
|
||||
StIcon { icon-size:$large_icon_size;}
|
||||
|
||||
.osd-monitor-label { font-size: 3em; }
|
||||
|
||||
StLabel {
|
||||
&:ltr { margin-right: 6px; }
|
||||
&:rtl { margin-left: 6px; }
|
||||
}
|
||||
|
||||
.level {
|
||||
margin-bottom: 4px;
|
||||
&:first-child { margin-bottom: 0px; }
|
||||
|
||||
height: $osd_levelbar_height;
|
||||
min-width:$base_icon_size * 10;
|
||||
-barlevel-height: $osd_levelbar_height;
|
||||
@ -25,8 +32,8 @@ $osd_levelbar_height:6px;
|
||||
-barlevel-active-background-color: $osd_fg_color;
|
||||
-barlevel-overdrive-color: $destructive_color;
|
||||
-barlevel-overdrive-separator-width: 3px;
|
||||
&:ltr {margin-right: 16px;}
|
||||
&:rtl {margin-left: 16px;}
|
||||
&:ltr { margin-right: 6px; }
|
||||
&:rtl { margin-left: 6px; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* OVERVIEW */
|
||||
|
||||
.controls-manager, .secondary-monitor-workspaces {
|
||||
spacing: $base_spacing * 2;
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
|
||||
#overviewGroup {
|
||||
|
||||
@ -10,7 +10,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
background-color: $panel_bg_color;
|
||||
font-weight: bold;
|
||||
height: $panel_height;
|
||||
font-feature-settings: "tnum";
|
||||
@extend %numeric;
|
||||
transition-duration: $panel_transition_duration;
|
||||
|
||||
// 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;
|
||||
|
||||
StBoxLayout {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
StIcon {
|
||||
@ -186,13 +186,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
|
||||
// App Menu
|
||||
#appMenu {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
.label-shadow { color: transparent; }
|
||||
}
|
||||
|
||||
#appMenu .panel-status-menu-box {
|
||||
padding: 0 $base_padding;
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -2,15 +2,6 @@
|
||||
|
||||
// the popover itself
|
||||
.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
|
||||
}
|
||||
|
||||
@ -23,107 +14,101 @@
|
||||
&.panel-menu {
|
||||
-boxpointer-gap: $base_margin+2px; // distance from the panel
|
||||
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 {
|
||||
padding: $base_padding;
|
||||
border-radius: $modal_radius;
|
||||
border: 1px solid $borders_edge;
|
||||
// account for margin oddities
|
||||
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);
|
||||
background-color: $bg_color;
|
||||
}
|
||||
|
||||
// menu items
|
||||
.popup-menu-item {
|
||||
spacing: $base_spacing;
|
||||
padding: $base_padding*1.5;
|
||||
padding: $base_padding*1.5 $base_padding*2;
|
||||
margin: 2px 0;
|
||||
border-radius: $base_border_radius;
|
||||
transition: 0.2s all ease;
|
||||
background-color: transparent;
|
||||
|
||||
&:ltr {padding-right:$base_padding; padding-left: 0;}
|
||||
&:rtl {padding-right: 0; padding-left:$base_padding;}
|
||||
&:focus, &:hover {
|
||||
background-color: $hover_bg_color !important;
|
||||
&:active { background-color: $active_bg_color !important;}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $hover_bg_color;
|
||||
}
|
||||
&:checked {background-color: $checked_bg_color !important;}
|
||||
|
||||
&:checked {
|
||||
background-color: $hover_bg_color;
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($hover_bg_color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: transparentize($fg_color, if($variant=='light', 0.7, 0.9));
|
||||
color: $fg_color;
|
||||
&:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;}
|
||||
&:active { background-color: lighten($checked_bg_color, 5%) !important;}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lighten($active_bg_color,3%);
|
||||
color: lighten($active_fg_color,3%);
|
||||
background-color: lighten($active_bg_color, 5%);
|
||||
color: $active_fg_color;
|
||||
}
|
||||
|
||||
&:insensitive {color: transparentize($fg_color,0.5);}
|
||||
}
|
||||
|
||||
// all icons and other graphical elements
|
||||
|
||||
// all other graphical elements (sliders)
|
||||
.popup-inactive-menu-item {
|
||||
color: $fg_color;
|
||||
|
||||
// "Open Windows" label
|
||||
font-weight: bold;
|
||||
font-size: smaller;
|
||||
|
||||
&:insensitive {color: $insensitive_fg_color;}
|
||||
&:insensitive { color: $insensitive_fg_color; }
|
||||
}
|
||||
|
||||
// symbolic icons in popover
|
||||
.popup-menu-arrow,
|
||||
.popup-menu-icon {
|
||||
icon-size: 16px !important;
|
||||
icon-size: 16px !important; // for some reason the variable doesn't work here
|
||||
}
|
||||
|
||||
.popup-menu-arrow {
|
||||
margin-right: $base_margin;
|
||||
&:ltr {margin-right: $base_margin;}
|
||||
&:rtl {margin-left: $base_margin;}
|
||||
}
|
||||
|
||||
|
||||
// popover submenus
|
||||
.popup-sub-menu {
|
||||
border:none;
|
||||
background-color: $hover_bg_color;
|
||||
background-color: $checked_bg_color;
|
||||
border-radius: 0 0 $base_border_radius $base_border_radius;
|
||||
|
||||
.popup-menu-ornament {
|
||||
min-width: 14px !important;
|
||||
min-width: $base_icon_size !important;
|
||||
}
|
||||
|
||||
// submenu specific styles
|
||||
.popup-menu-item {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: $base_padding*1.5 $base_padding*2;
|
||||
|
||||
&:last-child {
|
||||
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-item:last-child:hover {border-radius: 0 }
|
||||
.popup-menu-item:last-child {
|
||||
&:hover,&:focus {border-radius: 0;}
|
||||
}
|
||||
&:last-child .popup-menu-item:last-child {
|
||||
border-radius: 0 0 $base_border_radius $base_border_radius;
|
||||
}
|
||||
@ -132,9 +117,9 @@
|
||||
|
||||
// container for radio and check boxes
|
||||
.popup-menu-ornament {
|
||||
@extend %heading;
|
||||
width: 1.2em;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
text-align: center !important;
|
||||
|
||||
&:ltr {text-align: right;};
|
||||
&:rtl {text-align: left;};
|
||||
@ -175,30 +160,42 @@
|
||||
.aggregate-menu {
|
||||
min-width: 22em;
|
||||
|
||||
// this is unneeded in at the top-level this menu, hide it
|
||||
.popup-menu-ornament {width:0;padding:0;margin:0;}
|
||||
|
||||
.popup-menu-item {
|
||||
&:ltr {padding-left:$base_padding;padding-right:$base_padding*2;}
|
||||
&:rtl {padding-right:$base_padding;padding-left:$base_padding*2;}
|
||||
}
|
||||
// this is unneeded at the top-level in this menu, hide it
|
||||
.popup-menu-ornament { width: 0 !important; }
|
||||
|
||||
// lock screen, shutdown, etc. buttons
|
||||
.popup-menu-icon {
|
||||
padding:0;
|
||||
margin: 0 $base_margin;
|
||||
-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 {
|
||||
&:ltr {
|
||||
padding-left: 0;
|
||||
margin-left: $base_icon_size;
|
||||
}
|
||||
&:rtl {
|
||||
padding-right: 0;
|
||||
margin-right: $base_icon_size;
|
||||
// this value is hardcoded for visual effect
|
||||
&:ltr { margin-left: $base_margin*2;}
|
||||
&:rtl { margin-right: $base_margin*2;}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
.unlock-dialog-clock-time {
|
||||
font-size: 64pt;
|
||||
padding-top: 42px;
|
||||
font-feature-settings: "tnum";
|
||||
@extend %numeric;
|
||||
}
|
||||
|
||||
.unlock-dialog-clock-date {
|
||||
|
||||
@ -1,75 +1,50 @@
|
||||
// Screenshot UI
|
||||
.icon-label-button-container {
|
||||
spacing: $base_spacing;
|
||||
font-size: $base_font_size - 3pt;
|
||||
spacing: $base_padding;
|
||||
@extend %caption;
|
||||
|
||||
StIcon {
|
||||
icon-size: 32px;
|
||||
}
|
||||
StIcon { 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_border_radius: 12px;
|
||||
$screenshot_ui_panel_border_radius: $screenshot_ui_shot_cast_border_radius + $screenshot_ui_shot_cast_margin;
|
||||
$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
|
||||
$screenshot_ui_shot_cast_spacing: 3px;
|
||||
|
||||
$screenshot_ui_button_red: #e01b24;
|
||||
$screenshot_ui_button_red: $error_color;
|
||||
|
||||
.screenshot-ui-panel {
|
||||
background-color: $osd_bg_color;
|
||||
@extend %osd_panel;
|
||||
border-radius: $screenshot_ui_panel_border_radius;
|
||||
padding: $screenshot_ui_panel_padding;
|
||||
// Reduce the bottom padding a little to accommodate the large capture button.
|
||||
padding-bottom: $screenshot_ui_panel_padding - 6px;
|
||||
margin-bottom: $base_margin * 8;
|
||||
margin-bottom: 4em;
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
|
||||
.screenshot-ui-close-button {
|
||||
background-color: $osd_bg_color;
|
||||
color: $osd_fg_color;
|
||||
border-radius: 99px;
|
||||
padding: 6px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
|
||||
margin-top: 8px;
|
||||
|
||||
@extend .window-close; // copy window close button
|
||||
padding: $base_padding; // but with more padding
|
||||
&.left { margin-left: 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 {
|
||||
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;
|
||||
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 {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 99px;
|
||||
border: 4px white;
|
||||
border: 4px $osd_fg_color;
|
||||
padding: 4px;
|
||||
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: white;
|
||||
background-color: $osd_fg_color;
|
||||
transition-duration: 200ms;
|
||||
&:hover, &:focus { background-color: $hover_bg_color; }
|
||||
border-radius: 99px;
|
||||
@ -77,13 +52,13 @@ $screenshot_ui_button_red: #e01b24;
|
||||
|
||||
&:hover, &:focus {
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: darken(white, 15%);
|
||||
background-color: darken($osd_fg_color, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.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 {
|
||||
background-color: $hover_bg_color;
|
||||
border-radius: $screenshot_ui_shot_cast_border_radius;
|
||||
border-radius: $modal_radius;
|
||||
padding: $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 {
|
||||
padding: $base_padding $base_padding * 1.5;
|
||||
padding: $base_padding $base_padding*2;
|
||||
background-color: transparent;
|
||||
&: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; }
|
||||
|
||||
border-radius: $screenshot_ui_shot_cast_border_radius - $screenshot_ui_shot_cast_spacing;
|
||||
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
|
||||
|
||||
StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.screenshot-ui-show-pointer-button {
|
||||
padding: $base_padding * 2;
|
||||
@extend %osd_button;
|
||||
border-radius: 99px;
|
||||
background-color: $hover_bg_color;
|
||||
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
|
||||
&:active { background-color: $active_bg_color; }
|
||||
&:checked { background-color: darken($hover_bg_color, 10%); }
|
||||
|
||||
StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
padding: $base_padding * 2 !important;
|
||||
StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.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-indicator-shade {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background-color: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.screenshot-ui-area-indicator-selection {
|
||||
@ -160,7 +127,7 @@ $screenshot_ui_button_red: #e01b24;
|
||||
.screenshot-ui-area-selector-handle {
|
||||
border-radius: 99px;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
@ -182,7 +149,7 @@ $screenshot_ui_button_red: #e01b24;
|
||||
|
||||
.screenshot-ui-window-selector-window-border {
|
||||
transition-duration: 200ms;
|
||||
border-radius: 18px;
|
||||
border-radius: $modal_radius;
|
||||
border: 6px transparent;
|
||||
}
|
||||
|
||||
@ -215,10 +182,10 @@ $screenshot_ui_button_red: #e01b24;
|
||||
|
||||
.screenshot-ui-screen-selector {
|
||||
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); }
|
||||
&:active { background-color: rgba(0, 0, 0, .7); }
|
||||
&:hover { background-color: rgba(0,0,0,.3); }
|
||||
&:active { background-color: rgba(0,0,0,.7); }
|
||||
&:checked {
|
||||
background-color: transparent;
|
||||
border: 2px white;
|
||||
|
||||
@ -5,29 +5,19 @@ $search_entry_height: 36px;
|
||||
|
||||
%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
|
||||
color: transparentize($fg_color,0.3);
|
||||
margin-top: $base_spacing * 2;
|
||||
margin-bottom: $base_spacing;
|
||||
|
||||
margin-top: $base_padding * 2;
|
||||
margin-bottom: $base_padding;
|
||||
padding: $base_padding+1 $base_padding+3;
|
||||
width: $search_entry_width;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($hover_bg_color, 5%);
|
||||
color: lighten($hover_fg_color, 5%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-style: solid;
|
||||
border-color: $selected_bg_color;
|
||||
color: $fg_color;
|
||||
box-shadow: none;
|
||||
}
|
||||
@include entry(normal);
|
||||
&:hover { @include entry(hover);}
|
||||
&:focus { @include entry(focus);}
|
||||
&:insensitive { @include entry(insensitive);}
|
||||
|
||||
.search-entry-icon {
|
||||
.search-entry-icon {
|
||||
color: inherit;
|
||||
icon-size: $base_icon_size;
|
||||
margin-top: 2px; // center vertically
|
||||
|
||||
@ -26,29 +26,29 @@
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
color: $osd_fg_color;
|
||||
padding: $base_padding * 3;
|
||||
padding: $base_padding*2;
|
||||
margin: $base_margin;
|
||||
// This is the space between the provider icon and the results container
|
||||
}
|
||||
|
||||
%search_section_content_item {
|
||||
@include tile($osd_fg_color);
|
||||
|
||||
@include tile_button($osd_fg_color);
|
||||
margin: $base_margin;
|
||||
border-radius: $base_border_radius !important;
|
||||
}
|
||||
|
||||
// "no results" text
|
||||
.search-statustext {
|
||||
@extend %status_text;
|
||||
@extend %large_title;
|
||||
}
|
||||
|
||||
.grid-search-results {
|
||||
spacing: $base_spacing * 6;
|
||||
spacing: $base_padding * 6;
|
||||
}
|
||||
|
||||
// Search results with icons
|
||||
.grid-search-result {
|
||||
@extend %app_well_app;
|
||||
@extend .app-well-app;
|
||||
}
|
||||
|
||||
// search result provider
|
||||
@ -57,7 +57,7 @@
|
||||
|
||||
// content
|
||||
.list-search-provider-content {
|
||||
spacing: $base_spacing * 2;
|
||||
spacing: $base_padding * 2;
|
||||
|
||||
// provider labels
|
||||
.list-search-provider-details {
|
||||
@ -69,7 +69,7 @@
|
||||
|
||||
// search results list
|
||||
.list-search-results {
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
// search result listitem
|
||||
@ -83,7 +83,7 @@
|
||||
|
||||
// list item title (with leading icon)
|
||||
.list-search-result-title {
|
||||
spacing: $base_spacing * 2;
|
||||
spacing: $base_padding * 2;
|
||||
// font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
$slider_size: 16px;
|
||||
|
||||
.slider {
|
||||
height: $slider_size;
|
||||
// slider trough
|
||||
-barlevel-height: 4px;
|
||||
-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-border-width: 0;
|
||||
-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; }
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ $switcher_border_radius: $modal_radius + 8px;
|
||||
// the full screen container of the switcher
|
||||
.switcher-popup {
|
||||
padding: 0;
|
||||
spacing: $base_spacing * 4;
|
||||
spacing: $base_padding * 4;
|
||||
}
|
||||
|
||||
// switcher onscreen panel
|
||||
@ -20,12 +20,13 @@ $switcher_border_radius: $modal_radius + 8px;
|
||||
|
||||
// container for items in list
|
||||
.switcher-list-item-container {
|
||||
spacing: $base_spacing * 2;
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
|
||||
// each item in the list
|
||||
.item-box {
|
||||
@include tile($osd_fg_color);
|
||||
|
||||
@include tile_button($osd_fg_color);
|
||||
}
|
||||
|
||||
.separator {
|
||||
@ -36,7 +37,7 @@ $switcher_border_radius: $modal_radius + 8px;
|
||||
// container of thumbnails
|
||||
.thumbnail-box {
|
||||
padding: 2px;
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
// window thumbnail itself
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
/* Window Picker */
|
||||
|
||||
$window_picker_spacing: $base_spacing; // 6px
|
||||
$window_picker_spacing: $base_padding; // 6px
|
||||
$window_picker_padding: $base_padding * 2; // 12px
|
||||
|
||||
$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_padding: 3px;
|
||||
|
||||
@ -24,24 +25,23 @@ $window_close_button_padding: 3px;
|
||||
|
||||
// Close button
|
||||
.window-close {
|
||||
background-color: $osd_bg_color;
|
||||
background-color: $window_close_button_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; }
|
||||
& StIcon { icon-size: 24px; } // uses non standard icon size
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($osd_bg_color, 15%);
|
||||
background-color: mix($osd_fg_color, $window_close_button_color, 15%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: transparentize($osd_fg_color, 0.2);
|
||||
background-color: darken($osd_bg_color, 5%);
|
||||
background-color: darken($window_close_button_color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
/* Workspace Switcher */
|
||||
|
||||
$ws_indicator_height: $base_icon_size * 2;
|
||||
$ws_indicator_height: $large_icon_size;
|
||||
$ws_dot_active: $ws_indicator_height / 3;
|
||||
$ws_dot_inactive: $ws_indicator_height / 6;
|
||||
|
||||
.workspace-switcher {
|
||||
@extend %osd_panel;
|
||||
margin: 4em;
|
||||
spacing: $base_spacing * 2;
|
||||
margin-bottom: 4em;
|
||||
spacing: $base_padding * 2;
|
||||
padding: $base_padding * 2 $base_padding * 3;
|
||||
}
|
||||
|
||||
.ws-switcher-indicator {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// thumbnails in overview
|
||||
.workspace-thumbnails {
|
||||
visible-width: 32px; //amount visible before hover
|
||||
spacing: $base_spacing;
|
||||
spacing: $base_padding;
|
||||
padding: $base_padding;
|
||||
|
||||
.workspace-thumbnail {
|
||||
|
||||
@ -37,7 +37,6 @@ theme_sources = files([
|
||||
'gnome-shell-sass/widgets/_slider.scss',
|
||||
'gnome-shell-sass/widgets/_switcher-popup.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/_workspace-switcher.scss',
|
||||
'gnome-shell-sass/widgets/_workspace-thumbnails.scss'
|
||||
|
||||
@ -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>
|
||||
|
Before Width: | Height: | Size: 586 B After Width: | Height: | Size: 710 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 677 B After Width: | Height: | Size: 518 B |
Loading…
Reference in New Issue
Block a user