Update the theme against gnome 46.0
This commit is contained in:
Kevin MacMartin
parent
3f513d5363
commit
0d88cff006
49 changed files with 2222 additions and 4426 deletions
|
|
@ -1,4 +1,5 @@
|
|||
$variant: 'dark';
|
||||
$contrast: 'normal';
|
||||
|
||||
$laptop: true;
|
||||
@import "gnome-shell-sass/_colors"; //use gtk colors
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
$variant: 'dark';
|
||||
$contrast: 'normal';
|
||||
|
||||
$laptop: false;
|
||||
@import "gnome-shell-sass/_colors"; //use gtk colors
|
||||
|
|
|
|||
|
|
@ -1,61 +1,53 @@
|
|||
// When color definition differs for dark and light variant,
|
||||
// it gets @if-ed depending on $variant
|
||||
//
|
||||
// Main color definitions
|
||||
//
|
||||
// When color definition differs for dark and light variant, it gets @if-ed depending on $variant
|
||||
|
||||
@import '_palette.scss';
|
||||
@import '_default-colors.scss';
|
||||
|
||||
$is_highcontrast:false;
|
||||
|
||||
// base color for light theme
|
||||
$_dark_base_color: desaturate($dark_4, 100%);
|
||||
// global colors
|
||||
$base_color: if($variant == 'light', $light_1, $_base_color_dark);
|
||||
$bg_color: if($variant == 'light', $_base_color_light, lighten($base_color, 5%));
|
||||
$fg_color: if($variant == 'light', $_base_color_dark, $light_1);
|
||||
|
||||
$base_color: if($variant == 'light', $light_1, $_dark_base_color);
|
||||
$bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%));
|
||||
$fg_color: if($variant == 'light', $_dark_base_color, white);
|
||||
// OSD elements
|
||||
$osd_fg_color: $light_1;
|
||||
$osd_bg_color: lighten($_base_color_dark, 5%);
|
||||
|
||||
$selected_fg_color: $light_1;
|
||||
$selected_bg_color: $blue_3;
|
||||
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%));
|
||||
// system elements (e.g. the overview) that are always dark
|
||||
$system_base_color: $_base_color_dark;
|
||||
$system_fg_color: $_base_color_light;
|
||||
|
||||
$borders_color: if($variant == 'light', transparentize($fg_color, .85), transparentize($fg_color, .9));
|
||||
// panel colors
|
||||
$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_4);
|
||||
$panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1);
|
||||
|
||||
// card elements
|
||||
$card_bg_color: if($variant == 'light', $light_1, lighten($bg_color, 7%));
|
||||
$card_shadow_color: if($variant == 'light', transparentize($dark_5, .97), transparent);
|
||||
$card_shadow_border_color: if($variant == 'light', transparentize($dark_5, .91), transparent);
|
||||
|
||||
//
|
||||
// Derived Colors
|
||||
//
|
||||
// colors based on the global defines above
|
||||
|
||||
// borders
|
||||
$borders_color: transparentize($fg_color, $border_opacity);
|
||||
$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
|
||||
|
||||
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
|
||||
$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
|
||||
|
||||
$warning_color: if($variant == 'light', $yellow_4, $yellow_3);
|
||||
$error_color: if($variant == 'light', $red_4, $red_3);
|
||||
$success_color: if($variant == 'light', $green_4, $green_5);
|
||||
$destructive_color: $error_color;
|
||||
|
||||
// color definitions for OSD elements
|
||||
$osd_fg_color: $light_1;
|
||||
$osd_bg_color: lighten($_dark_base_color, 5%);
|
||||
|
||||
// derived osd colors
|
||||
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||
$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
|
||||
// osd colors
|
||||
$osd_borders_color: transparentize($osd_fg_color, 0.9);
|
||||
$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
|
||||
|
||||
$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
|
||||
|
||||
// buttons
|
||||
$button_mix_factor: if($variant == 'light', 12%, 9%);
|
||||
|
||||
// notifications
|
||||
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
|
||||
|
||||
// color definitions for system elements (e.g. the overview)
|
||||
$system_base_color: $_dark_base_color; // always dark
|
||||
$system_fg_color: $light_2;
|
||||
|
||||
// derived system colors
|
||||
// system colors
|
||||
$system_bg_color: lighten($system_base_color, 5%);
|
||||
$system_borders_color: transparentize($system_fg_color, .9);
|
||||
$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
|
||||
$system_overlay_bg_color: mix($system_base_color, $system_fg_color, 90%); // for non-transparent items, e.g. dash
|
||||
|
||||
// derived global colors
|
||||
// insensitive state
|
||||
$insensitive_fg_color: if($variant == 'light', mix($fg_color, $bg_color, 60%), mix($fg_color, $bg_color, 50%));
|
||||
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
|
||||
|
|
@ -72,3 +64,6 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color,
|
|||
// active state
|
||||
$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
|
||||
$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
|
||||
|
||||
// selection colors
|
||||
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));
|
||||
|
|
|
|||
|
|
@ -25,29 +25,41 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
|
|||
|
||||
/* Global Values */
|
||||
|
||||
// padding, margin and spacing
|
||||
$base_padding: 6px;
|
||||
$base_margin: 4px;
|
||||
// Base values of elements of the shell in their smallest "unit".
|
||||
// These are used in calculations elsewhere to have elements in proportion
|
||||
$base_font_size: 11pt; // font size
|
||||
$base_padding: 6px; // internal padding of elements
|
||||
$base_margin: 4px; // margin between elements
|
||||
$base_border_radius: 8px; // radii on all elements
|
||||
|
||||
// border radii
|
||||
$base_border_radius: 8px;
|
||||
// Radius used to make sure elements that have rounded corners stay as such.
|
||||
// This is a workaround for 50% not working.
|
||||
$forced_circular_radius: 999px;
|
||||
|
||||
// radii of things that display over other things, e.g. popovers
|
||||
$modal_radius: $base_border_radius*2; // 24px
|
||||
$modal_radius: $base_border_radius * 2;
|
||||
|
||||
// Chroma key to flag when a background-color is always occluded, not visible.
|
||||
// This allows any box-shadow behind it to be rendered more efficiently by
|
||||
// omitting the middle rectangle.
|
||||
$invisible_occluded_bg_color: rgba(3,2,1,0);
|
||||
|
||||
// fonts
|
||||
$base_font_size: 11;
|
||||
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
|
||||
// Fixed icon sizes
|
||||
$base_icon_size: 16px;
|
||||
$medium_icon_size: $base_icon_size * 1.5; // 24px
|
||||
$large_icon_size: $base_icon_size * 2; // 32px
|
||||
|
||||
// icons
|
||||
$base_icon_size: 1.09em;
|
||||
$large_icon_size: $base_icon_size*2; // 32px
|
||||
// $base_icon_size: 16px;
|
||||
// Scaled values
|
||||
// Used in elements that follow text scaling factors
|
||||
$scaled_padding: to_em(6px); // same as $base_padding
|
||||
|
||||
// Used for symbolic icons that scale
|
||||
$scalable_icon_size: to_em(16px);
|
||||
$medium_scalable_icon_size: $scalable_icon_size * 1.5;
|
||||
$large_scalable_icon_size: $scalable_icon_size * 2;
|
||||
|
||||
// animation definition
|
||||
$ease_out_quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
|
||||
// Stage
|
||||
stage {
|
||||
|
|
@ -56,29 +68,31 @@ stage {
|
|||
}
|
||||
|
||||
/* Common Stylings */
|
||||
%reset {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// icon tiles
|
||||
%tile {
|
||||
border-radius: $base_border_radius * 2; // 16px
|
||||
border-radius: $base_border_radius * 2;
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
border: 2px solid transparent;
|
||||
transition-duration: 200ms;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
// normal button styling
|
||||
// common button styling
|
||||
%button_common {
|
||||
border-radius: $base_border_radius;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: $base_padding * .5 $base_padding * 4;
|
||||
font-weight: bold;
|
||||
padding: $base_padding*.5 $base_padding*4;
|
||||
transition: border-width 300ms $ease_out_quad,
|
||||
box-shadow 300ms $ease_out_quad;
|
||||
}
|
||||
|
||||
%button {
|
||||
|
|
@ -90,35 +104,84 @@ stage {
|
|||
&:selected,
|
||||
&:active { @include button(active);}
|
||||
&:checked { @include button(checked);}
|
||||
&.default { @include button(default);}
|
||||
}
|
||||
|
||||
&.flat {
|
||||
@include button(normal, $flat:true);
|
||||
&:focus { @include button(focus, $flat:true);}
|
||||
&:hover { @include button(hover, $flat:true);}
|
||||
&:insensitive { @include button(insensitive, $flat:true);}
|
||||
%flat_button {
|
||||
@include button(normal, $style: flat);
|
||||
&:focus { @include button(focus, $style: flat);}
|
||||
&:hover { @include button(hover, $style: flat);}
|
||||
&:insensitive { @include button(insensitive, $style: flat);}
|
||||
&:selected,
|
||||
&:active { @include button(active, $flat:true);}
|
||||
&:checked { @include button(checked, $flat:true);}
|
||||
&.default { @include button(default, $flat:false);}
|
||||
&:active { @include button(active, $style: flat);}
|
||||
&:checked { @include button(checked, $style: flat);}
|
||||
}
|
||||
|
||||
%default_button {
|
||||
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
|
||||
&:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
&:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
}
|
||||
|
||||
// items in popover menus
|
||||
%menuitem {
|
||||
font-weight: normal;
|
||||
spacing: $base_padding;
|
||||
transition-duration: 100ms;
|
||||
padding: $base_padding * 1.5 $base_padding * 2;
|
||||
}
|
||||
|
||||
// common style for card elements
|
||||
%card_common {
|
||||
border-radius: $base_border_radius * 1.5;
|
||||
padding: $scaled_padding * 2;
|
||||
margin: $base_margin;
|
||||
background-color: $card_bg_color;
|
||||
box-shadow: 0 1px 2px 0 $card_shadow_color;
|
||||
// bit of a hack here with border since we can't have double box-shadow
|
||||
border: 1px solid $card_shadow_border_color;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
%card {
|
||||
@extend %card_common;
|
||||
@include button(normal, $style: card);
|
||||
&:hover { @include button(hover, $style: card);}
|
||||
&:active { @include button(active, $style: card);}
|
||||
&:focus { @include button(focus, $style: card);}
|
||||
&:insensitive { @include button(insensitive, $style: card);}
|
||||
}
|
||||
|
||||
%card_flat {
|
||||
@extend %card_common;
|
||||
border: 1px solid transparent !important; // override of the button style needed here
|
||||
@include button(undecorated, $style: flat);
|
||||
&:hover { @include button(hover, $style: flat);}
|
||||
&:active { @include button(active, $style: flat);}
|
||||
&:focus { @include button(focus, $style: card);}
|
||||
&:insensitive { @include button(insensitive, $style: card);}
|
||||
}
|
||||
|
||||
|
||||
// normal entry style
|
||||
%entry_common {
|
||||
border-radius: $base_border_radius;
|
||||
padding: $base_padding*1.5 $base_padding*1.5;
|
||||
padding: $base_padding * 1.5 $base_padding * 1.5;
|
||||
selection-background-color: $selected_bg_color;
|
||||
selected-color: $selected_fg_color;
|
||||
}
|
||||
|
||||
%entry {
|
||||
@extend %entry_common;
|
||||
@include entry(normal, $c:$fg_color);
|
||||
&:hover { @include entry(hover, $c:$fg_color);}
|
||||
&:focus { @include entry(focus, $c:$fg_color);}
|
||||
&:insensitive { @include entry(insensitive, $c:$fg_color);}
|
||||
@include entry(normal);
|
||||
&:hover { @include entry(hover);}
|
||||
&:focus { @include entry(focus);}
|
||||
&:insensitive { @include entry(insensitive);}
|
||||
|
||||
StLabel.hint-text {
|
||||
color: transparentize($fg_color, 0.3);
|
||||
|
|
@ -134,33 +197,36 @@ stage {
|
|||
&:ltr {margin-right: 1px;}
|
||||
&:rtl {margin-left: 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);}
|
||||
// needs a 1px adjustment to fit exactly into the outer radius
|
||||
$bubble_button_radius: $modal_radius - 1px;
|
||||
|
||||
@include button(normal, $style: bubble);
|
||||
&:focus { @include button(focus, $style: bubble);}
|
||||
&:hover { @include button(hover, $style: bubble);}
|
||||
&:active { @include button(active, $style: bubble);}
|
||||
&:checked { @include button(checked, $style: bubble);}
|
||||
&:insensitive { @include button(insensitive, $style: bubble);}
|
||||
|
||||
&:first-child:ltr {
|
||||
border-radius: 0 0 0 $modal_radius;
|
||||
border-radius: 0 0 0 $bubble_button_radius;
|
||||
}
|
||||
|
||||
&:last-child:ltr {
|
||||
border-radius: 0 0 $modal_radius;
|
||||
border-radius: 0 0 $bubble_button_radius;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:rtl {
|
||||
border-radius: 0 0 $modal_radius;
|
||||
border-radius: 0 0 $bubble_button_radius;
|
||||
}
|
||||
|
||||
&:last-child:rtl {
|
||||
border-radius: 0 0 0 $modal_radius;
|
||||
border-radius: 0 0 0 $bubble_button_radius;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: 0 0 $modal_radius $modal_radius;
|
||||
border-radius: 0 0 $bubble_button_radius $bubble_button_radius;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
|
@ -172,11 +238,11 @@ stage {
|
|||
border: 1px solid transparentize($light_1, 0.9);
|
||||
color: $light_1;
|
||||
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
text-align: center;
|
||||
|
||||
@if $is_highcontrast {
|
||||
@if $contrast == 'high' {
|
||||
background-color: black;
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
|
|
@ -185,47 +251,47 @@ stage {
|
|||
/* General Typography */
|
||||
%large_title {
|
||||
font-weight: 300;
|
||||
@include fontsize(24);
|
||||
@include fontsize(24pt);
|
||||
}
|
||||
|
||||
%title_1 {
|
||||
font-weight: 800;
|
||||
@include fontsize(20);
|
||||
@include fontsize(20pt);
|
||||
}
|
||||
|
||||
%title_2 {
|
||||
font-weight: 800;
|
||||
@include fontsize(15);
|
||||
@include fontsize(15pt);
|
||||
}
|
||||
|
||||
%title_3 {
|
||||
font-weight: 700;
|
||||
@include fontsize(15);
|
||||
@include fontsize(15pt);
|
||||
}
|
||||
|
||||
%title_4 {
|
||||
font-weight: 700;
|
||||
@include fontsize(13);
|
||||
@include fontsize(13pt);
|
||||
}
|
||||
|
||||
%heading {
|
||||
font-weight: 700;
|
||||
@include fontsize(11);
|
||||
@include fontsize(11pt);
|
||||
}
|
||||
|
||||
%caption_heading {
|
||||
font-weight: 700;
|
||||
@include fontsize(9);
|
||||
@include fontsize(9pt);
|
||||
}
|
||||
|
||||
%caption {
|
||||
font-weight: 400;
|
||||
@include fontsize(9);
|
||||
@include fontsize(9pt);
|
||||
}
|
||||
|
||||
%smaller {
|
||||
font-weight: 400;
|
||||
@include fontsize(8);
|
||||
@include fontsize(8pt);
|
||||
}
|
||||
|
||||
%monospace {font-family: monospace;}
|
||||
|
|
@ -237,21 +303,20 @@ stage {
|
|||
color: $osd_fg_color;
|
||||
background-color: $osd_bg_color;
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
border-radius: 999px;
|
||||
padding: $base_padding*2;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border: 2px solid $hc_inset_color;
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: $base_padding * 2;
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset($width: 2px,$border: true);
|
||||
}
|
||||
}
|
||||
|
||||
// entries
|
||||
%osd_entry {
|
||||
@extend %entry_common;
|
||||
@include entry(normal, $c:$osd_fg_color,);
|
||||
&:hover { @include entry(hover, $c:$osd_fg_color);}
|
||||
&:focus { @include entry(focus, $c:$osd_fg_color);}
|
||||
&:insensitive { @include entry(insensitive, $c:$osd_fg_color);}
|
||||
@include entry(normal, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);
|
||||
&:hover { @include entry(hover, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
|
||||
&:focus { @include entry(focus, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
|
||||
&:insensitive { @include entry(insensitive, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
|
||||
|
||||
StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
|
||||
}
|
||||
|
|
@ -259,18 +324,22 @@ stage {
|
|||
// buttons on OSD elements
|
||||
%osd_button {
|
||||
@extend %button_common;
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);
|
||||
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
|
||||
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
|
||||
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
|
||||
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
|
||||
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
|
||||
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);}
|
||||
}
|
||||
|
||||
%osd_button_flat {
|
||||
@extend %osd_button;
|
||||
@include button(undecorated, $osd:true);
|
||||
&:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
@extend %button_common;
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);
|
||||
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
|
||||
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
|
||||
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
|
||||
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
|
||||
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);}
|
||||
}
|
||||
|
||||
/* System Elements */
|
||||
|
|
@ -278,15 +347,14 @@ stage {
|
|||
// entries
|
||||
%system_entry {
|
||||
@extend %entry_common;
|
||||
@include entry(normal, $c:$system_fg_color,);
|
||||
&:hover { @include entry(hover, $c:$system_fg_color);}
|
||||
&:focus { @include entry(focus, $c:$system_fg_color, $fc:$selected_bg_color);}
|
||||
&:insensitive { @include entry(insensitive, $c:$system_fg_color);}
|
||||
@include entry(normal, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);
|
||||
&:hover { @include entry(hover, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
|
||||
&:focus { @include entry(focus, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
|
||||
&:insensitive { @include entry(insensitive, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
|
||||
|
||||
StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
|
||||
}
|
||||
|
||||
|
||||
// buttons
|
||||
%system_button {
|
||||
@include button(normal, $tc:$system_fg_color, $c:$system_bg_color);
|
||||
|
|
@ -294,5 +362,30 @@ stage {
|
|||
&:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:outlined,&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
}
|
||||
|
||||
/* Lockscreen Elements */
|
||||
|
||||
// buttons
|
||||
%lockscreen_button {
|
||||
@extend %button_common;
|
||||
@include button(normal, $tc:$system_fg_color, $style: lockscreen);
|
||||
&:focus { @include button(focus, $tc:$system_fg_color, $style: lockscreen);}
|
||||
&:hover { @include button(hover, $tc:$system_fg_color, $style: lockscreen);}
|
||||
&:active { @include button(active, $tc:$system_fg_color, $style: lockscreen);}
|
||||
&:checked { @include button(checked, $tc:$system_fg_color, $style: lockscreen);}
|
||||
&:insensitive { @include button(insensitive, $tc:$system_fg_color, $style: lockscreen);}
|
||||
}
|
||||
|
||||
// entries
|
||||
%lockscreen_entry {
|
||||
@extend %entry_common;
|
||||
@include entry(normal, $c:$system_fg_color, $style: lockscreen, $always_dark: true);
|
||||
&:hover { @include entry(hover, $c:$system_fg_color, $style: lockscreen, $always_dark: true);}
|
||||
&:focus { @include entry(focus, $c:$system_fg_color, $style: lockscreen, $always_dark: true);}
|
||||
&:insensitive { @include entry(insensitive, $c:$system_fg_color, $style: lockscreen, $always_dark: true);}
|
||||
|
||||
StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
|
||||
}
|
||||
|
||||
|
|
|
|||
54
gnome-shell-sass/_default-colors.scss
Normal file
54
gnome-shell-sass/_default-colors.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
// Named Colors
|
||||
|
||||
// base colors
|
||||
$_base_color_dark: desaturate($dark_4, 100%);
|
||||
$_base_color_light: desaturate($light_2, 100%);
|
||||
|
||||
// colors for destructive elements
|
||||
$destructive_bg_color: if($variant == 'light', $red_3, $red_4);
|
||||
$destructive_fg_color: $light_1;
|
||||
$destructive_color: $destructive_bg_color;
|
||||
|
||||
// colors for levelbars, entries, labels and infobars
|
||||
$success_bg_color: if($variant == 'light', $green_4, $green_5);
|
||||
$success_fg_color: $light_1;
|
||||
$success_color: $success_bg_color;
|
||||
|
||||
$warning_bg_color: if($variant == 'light', $yellow_4, $yellow_3);
|
||||
$warning_fg_color: transparentize(black, .2);
|
||||
$warning_color: $warning_bg_color;
|
||||
|
||||
$error_bg_color: if($variant == 'light', $red_3, $red_4);
|
||||
$error_fg_color: $light_1;
|
||||
$error_color: $error_bg_color;
|
||||
|
||||
// colors for selected or default elements
|
||||
$selected_bg_color: if($variant == 'light', $blue_4, $blue_3);
|
||||
$selected_fg_color: $light_1;
|
||||
|
||||
// link colors
|
||||
$link_color: if($variant == 'light', $blue_4, $blue_2);
|
||||
$link_visited_color: transparentize($link_color, .6);
|
||||
|
||||
// special cased widget definitions
|
||||
$background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants
|
||||
$border_opacity: if($variant == 'light', .85, .9); // change the border opacity in different variants
|
||||
|
||||
// shadows
|
||||
$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
|
||||
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
|
||||
|
||||
// focus colors
|
||||
$focus_color: $selected_bg_color;
|
||||
$focus_border_color: transparentize($focus_color, 0.5);
|
||||
|
||||
// High Contrast overrides
|
||||
@if $contrast == 'high' {
|
||||
// increase border opacity
|
||||
$border_opacity: .5;
|
||||
// remove shadows
|
||||
$shadow_color: transparent;
|
||||
$text_shadow_color: transparent;
|
||||
// less transparent focus color
|
||||
$focus_border_color: transparentize($focus_color, 0.2);
|
||||
}
|
||||
|
|
@ -1,355 +1,378 @@
|
|||
//
|
||||
// Drawing functions
|
||||
//
|
||||
|
||||
// Function to convert px values to em
|
||||
@function to_em($input, $base: 16px) {
|
||||
// multiplied and divided by 1000 to make up for round() shortcoming
|
||||
$em_value: ($input / $base) * 1.091 * 1000;
|
||||
@return round($em_value) / 1000 * 1em;
|
||||
}
|
||||
|
||||
// Boost the contrast of a color by mixing it with high contrast defined colors
|
||||
@function hc_color_mix($c, $mc:$hc_mix_color, $mf:$hc_mix_factor) {
|
||||
//
|
||||
// $c: input color
|
||||
// $mc: mix color, defined in High Contrast specific stylesheet
|
||||
// $mf: mix factor (%), defined in High Contrast specific stylesheet
|
||||
//
|
||||
@return mix($c, $mc, $mf);
|
||||
}
|
||||
|
||||
// Function to mix the color and make the focus background
|
||||
@function focus_bg_color($bg, $fc:$focus_color) {
|
||||
@return mix($fc, $bg, 5%);
|
||||
}
|
||||
|
||||
//
|
||||
// Drawing mixins
|
||||
|
||||
// generic drawing of more complex things
|
||||
|
||||
@function draw_widget_edge($c:$outer_borders_color) {
|
||||
// outer highlight "used" on most widgets
|
||||
@return 0 1px $c;
|
||||
}
|
||||
|
||||
// provide font size in rem, with px fallback
|
||||
@mixin fontsize($size: 24, $base: 16) {
|
||||
font-size: round($size) + pt;
|
||||
//font-size: ($size / $base) * 1rem;
|
||||
}
|
||||
|
||||
@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
|
||||
//
|
||||
// Helper function to stack up to 4 box-shadows;
|
||||
//
|
||||
@if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
|
||||
@else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
|
||||
@else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
|
||||
@else { box-shadow: $shadow1; }
|
||||
}
|
||||
|
||||
// Draw the inset for High Contrast elements
|
||||
@mixin draw_hc_inset($width: 1px, $ic: $hc_inset_color, $border: false, $no_inset: false) {
|
||||
//
|
||||
// $width width of the inset, in pixels
|
||||
// $ic color of the inset
|
||||
//
|
||||
// $border if true, use a border instead of a box-shadow to draw inset
|
||||
// $no_inset if true, override the mixin to not draw an iset
|
||||
//
|
||||
|
||||
// Text entries
|
||||
@mixin entry($t, $c, $fc:$selected_bg_color) {
|
||||
//
|
||||
// Entries drawing function
|
||||
//
|
||||
// $t: entry type
|
||||
// $c: text color, used to derive background color of entries
|
||||
//
|
||||
// possible $t values: normal, focus, insensitive
|
||||
//
|
||||
transition-duration: 100ms;
|
||||
box-shadow: inset 0 0 0 $width $ic;
|
||||
|
||||
@if $t==normal {
|
||||
background-color: transparentize($c, 0.85);
|
||||
color: transparentize($c,0.3);
|
||||
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
||||
}
|
||||
// draw inset as border
|
||||
@if $border {
|
||||
border: $width solid $ic;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@if $t==focus {
|
||||
background-color: mix(transparentize($c, 0.75), $fc, 95%);
|
||||
box-shadow: inset 0 0 0 2px transparentize($fc, 0.3);
|
||||
color: $c;
|
||||
&:hover {}
|
||||
}
|
||||
|
||||
@if $t==hover {
|
||||
background-color: transparentize($c, 0.75);
|
||||
}
|
||||
|
||||
@if $t==insensitive {
|
||||
background-color:transparentize($c, 0.75);
|
||||
color: transparentize($c, 0.5);
|
||||
// don't draw an inset at all
|
||||
@if $no_inset {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// On-screen Keyboard
|
||||
@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) {
|
||||
//
|
||||
// Keyboard key drawing function
|
||||
//
|
||||
// $t: key type,
|
||||
// $c: base key color for colored* types
|
||||
// $tc: optional text color for colored* types
|
||||
//
|
||||
// possible $t values:
|
||||
// normal, hover, active, insensitive, insensitive-active,
|
||||
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
|
||||
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
|
||||
//
|
||||
|
||||
// normal key
|
||||
@if $t==normal {
|
||||
color: $tc;
|
||||
background-color: lighten($c, 3%);
|
||||
}
|
||||
|
||||
// focused key
|
||||
@if $t==focus {
|
||||
color: $tc;
|
||||
background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
|
||||
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
|
||||
&:hover {
|
||||
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, 7%);
|
||||
}
|
||||
|
||||
// active key
|
||||
@else if $t==active {
|
||||
color: $tc;
|
||||
background-color: lighten($c, 10%);
|
||||
}
|
||||
|
||||
// checked key
|
||||
@else if $t==checked {
|
||||
color: $tc;
|
||||
background-color: lighten($c, 15%);
|
||||
}
|
||||
|
||||
// insensitive key
|
||||
@else if $t==insensitive {
|
||||
color: $insensitive_fg_color;
|
||||
background-color: $insensitive_bg_color;
|
||||
}
|
||||
|
||||
// reset
|
||||
@else if $t==undecorated {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
// Draw the focus ring
|
||||
@mixin focus_ring($width: 2px, $fc: $focus_border_color, $border: false) {
|
||||
box-shadow: inset 0 0 0 $width $fc !important;
|
||||
@if $border {
|
||||
border:$width solid $fc !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Mixin to convert provided font size in pt to em units
|
||||
@mixin fontsize($size, $base: 16px, $unit: pt) {
|
||||
// if pt, convert into unitless value with the assumption: 1pt = 1.091px
|
||||
$adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
|
||||
$rounded_size: round($adjusted_size / $base) / 1000;
|
||||
font-size: $rounded_size * 1em;
|
||||
// font-size: round($size) + pt;
|
||||
}
|
||||
|
||||
// Function to fill the background of a panel button
|
||||
@mixin panel_button_fill($bg) {
|
||||
// use a box-shadow to fill the background
|
||||
// this is done because panel buttons use a transparent border to fake padding
|
||||
box-shadow: inset 0 0 0 100px $bg;
|
||||
}
|
||||
|
||||
// Text entries drawing function
|
||||
@mixin entry($type, $c:$fg_color, $bc:$bg_color, $style: null, $always_dark: false) {
|
||||
//
|
||||
// $type: entry type, possible values: normal, focus, hover, insensitive
|
||||
// $c: text color
|
||||
// $bc: background color
|
||||
// $always_dark: override the light theme check to use dark colors, true or false
|
||||
//
|
||||
|
||||
// entry colors
|
||||
$entry_fg_color: $c;
|
||||
$entry_bg_color: mix($c, $bc, $background_mix_factor);
|
||||
$entry_focus_color: $focus_color;
|
||||
|
||||
// entry color overrides for lockscreen style
|
||||
@if $style == 'lockscreen' {
|
||||
$entry_bg_color: transparentize($c, .9);
|
||||
$entry_focus_color: transparentize($entry_fg_color, 0.6);
|
||||
@if $contrast == 'high' {
|
||||
$entry_focus_color: transparentize($entry_fg_color, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// background color adjustment factors
|
||||
// the % a color is lightened or darkened for button states
|
||||
$hover_factor: 4%;
|
||||
$insensitive_factor: 3%;
|
||||
|
||||
// entry state background colors
|
||||
$hover_entry_bg_color: if($variant == 'light', darken($entry_bg_color, $hover_factor), lighten($entry_bg_color, $hover_factor));
|
||||
$insensitive_entry_bg_color: if($variant == 'light', lighten($entry_bg_color, $insensitive_factor), darken($entry_bg_color, $insensitive_factor));
|
||||
|
||||
// override entry background colours if element is always dark
|
||||
@if $always_dark {
|
||||
$hover_entry_bg_color: lighten($entry_bg_color, $hover_factor);
|
||||
$insensitive_entry_bg_color: darken($entry_bg_color, $insensitive_factor);
|
||||
}
|
||||
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
|
||||
// normal
|
||||
@if $type == 'normal' {
|
||||
background-color: $entry_bg_color;
|
||||
color: transparentize($c, 0.3);
|
||||
}
|
||||
|
||||
// focus styles
|
||||
@if $type == 'focus' {
|
||||
@include focus_ring();
|
||||
background-color: focus_bg_color($entry_bg_color);
|
||||
color: $entry_fg_color;
|
||||
|
||||
// lockscreen style
|
||||
@if $style == 'lockscreen' {
|
||||
@include focus_ring($fc:$entry_focus_color);
|
||||
background-color: focus_bg_color($entry_bg_color, $fc:$entry_focus_color);
|
||||
}
|
||||
}
|
||||
|
||||
// hover styles
|
||||
@if $type == 'hover' {
|
||||
background-color: $hover_entry_bg_color;
|
||||
color: $entry_fg_color;
|
||||
}
|
||||
|
||||
// insensitive styles
|
||||
@if $type == 'insensitive' {
|
||||
background-color: $insensitive_entry_bg_color;
|
||||
color: transparentize($entry_fg_color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button drawing function
|
||||
//
|
||||
// $t: button type,
|
||||
// $c: base button colors, derived from fg_color
|
||||
// $tc: base button colors, derived from fg_color
|
||||
//
|
||||
// possible $t values:
|
||||
// normal, hover, active, insensitive, insensitive-active,
|
||||
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
|
||||
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
|
||||
//
|
||||
// since buttons are all flat an borderless now the mixin is simpler
|
||||
@mixin button($type, $tc:$fg_color, $c:$bg_color, $style: null, $always_dark: false) {
|
||||
//
|
||||
// $type: button type, possible values:
|
||||
// - normal, focus, hover, active, checked, insensitive, default, undecorated
|
||||
// $c: button bg color, derived from bg_color
|
||||
// $tc: button text color, derived from fg_color
|
||||
// $style: button style, possible values: card, bubble, flat, default
|
||||
// $always_dark: override the light theme check to use dark colors, true or false
|
||||
//
|
||||
|
||||
@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false) {
|
||||
// mix input colors to get button background color
|
||||
$button_bg_color: mix($tc, $c, $background_mix_factor);
|
||||
|
||||
$button_bg_color: mix($tc, $c, $button_mix_factor);
|
||||
transition-duration: 100ms;
|
||||
// background color override for card elements
|
||||
@if $style == 'card' { $button_bg_color: $card_bg_color;}
|
||||
// background color mix override for flat style; the button bg color is the background color input
|
||||
@if $style == 'flat' { $button_bg_color: $c;}
|
||||
// background color mix override for default button style
|
||||
@if $style == 'default' { $button_bg_color: $c;}
|
||||
|
||||
@if $osd {
|
||||
$button_bg_color: transparentize($tc, 0.9);
|
||||
// background color adjustment factors
|
||||
// the % a color is lightened or darkened for button states
|
||||
$hover_factor: 4%;
|
||||
$active_factor: 9%;
|
||||
$checked_factor: 8%;
|
||||
$insensitive_factor: 3%;
|
||||
|
||||
// flat style overrides
|
||||
@if $style == 'flat' {
|
||||
$hover_factor: 7%; // stronger factor in flat style
|
||||
}
|
||||
|
||||
// normal button
|
||||
@if $t==normal {
|
||||
// button base state background colors
|
||||
$hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
|
||||
$active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
|
||||
$checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
|
||||
$insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
|
||||
|
||||
// button extended state background colors
|
||||
$active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));
|
||||
$checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));
|
||||
$checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));
|
||||
|
||||
// override button background colours if element is always dark
|
||||
@if $always_dark {
|
||||
$hover_button_bg_color: lighten($button_bg_color, $hover_factor);
|
||||
$active_button_bg_color: lighten($button_bg_color, $active_factor);
|
||||
$checked_button_bg_color: lighten($button_bg_color, $checked_factor);
|
||||
$insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
|
||||
// extended
|
||||
$active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor);
|
||||
$checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor);
|
||||
$checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
|
||||
}
|
||||
|
||||
// background color override for buttons that use transparency
|
||||
// styles: notification bubbles, lockscreen
|
||||
@if $style == 'bubble' or $style == 'lockscreen' {
|
||||
$button_bg_color: transparentize($tc, .9);
|
||||
$hover_button_bg_color: transparentize($tc, .87);
|
||||
$active_button_bg_color: transparentize($tc, .84);
|
||||
$active_hover_button_bg_color: transparentize($tc, .81);
|
||||
}
|
||||
|
||||
// flat style overrides
|
||||
@if $style == 'flat' {
|
||||
$insensitive_button_bg_color: $button_bg_color;
|
||||
}
|
||||
|
||||
// high contrast overrides
|
||||
@if $contrast == 'high' {
|
||||
// override button background colors for high contrast
|
||||
$button_bg_color: hc_color_mix($button_bg_color);
|
||||
$hover_button_bg_color: hc_color_mix($hover_button_bg_color);
|
||||
$active_button_bg_color: hc_color_mix($active_button_bg_color);
|
||||
$checked_button_bg_color: hc_color_mix($checked_button_bg_color);
|
||||
|
||||
// also draw the inset border
|
||||
@include draw_hc_inset();
|
||||
|
||||
// duplicate flat bg color for High Contrast
|
||||
@if $style == 'flat' {
|
||||
$button_bg_color: $c;
|
||||
}
|
||||
|
||||
@if $style == 'default' {
|
||||
@include draw_hc_inset($no_inset: true);
|
||||
}
|
||||
}
|
||||
|
||||
// normal style
|
||||
@if $type == 'normal' {
|
||||
color: $tc;
|
||||
background-color: $button_bg_color;
|
||||
@if $flat {
|
||||
background-color: transparent;
|
||||
}
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
// focused button
|
||||
@if $t==focus {
|
||||
color: $tc;
|
||||
background-color: mix($button_bg_color, $selected_bg_color, 90%);
|
||||
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
|
||||
&:hover {
|
||||
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) !important;
|
||||
}
|
||||
&: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) !important;
|
||||
// no inset in High Contrast when the style is flat
|
||||
@if $style == 'flat' and $contrast == 'high' {
|
||||
@include draw_hc_inset($no_inset: true);
|
||||
}
|
||||
}
|
||||
|
||||
// hover button
|
||||
@else if $t==hover {
|
||||
@else if $type == 'hover' {
|
||||
color: $tc;
|
||||
background-color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%));
|
||||
|
||||
@if $is_highcontrast == "true" {
|
||||
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%);
|
||||
background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%);
|
||||
}
|
||||
background-color: $hover_button_bg_color;
|
||||
}
|
||||
|
||||
// active button
|
||||
@else if $t==active {
|
||||
@else if $type == 'active' {
|
||||
color: $tc;
|
||||
background-color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%));
|
||||
@if $is_highcontrast == "true" {
|
||||
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%);
|
||||
background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%);
|
||||
background-color: $active_button_bg_color;
|
||||
&:hover { background-color: $active_hover_button_bg_color;}
|
||||
&:focus {
|
||||
// otherwise use focus bg color mixin
|
||||
$bg: focus_bg_color($active_button_bg_color);
|
||||
background-color: $bg;
|
||||
}
|
||||
}
|
||||
|
||||
// checked button
|
||||
@else if $t==checked {
|
||||
@else if $type == 'checked' {
|
||||
color: $tc;
|
||||
background-color: if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%));
|
||||
@if $is_highcontrast == "true" {
|
||||
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%);
|
||||
background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%);
|
||||
}
|
||||
&:hover { background-color: lighten($button_bg_color, 12%);}
|
||||
&:active { background-color: lighten($button_bg_color, 15%);}
|
||||
background-color: $checked_button_bg_color;
|
||||
&:hover { background-color: $checked_hover_button_bg_color;}
|
||||
&:active { background-color: $checked_active_button_bg_color;}
|
||||
}
|
||||
|
||||
// insensitive button
|
||||
@else if $t==insensitive {
|
||||
color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
|
||||
background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95));
|
||||
}
|
||||
@else if $type == 'insensitive' {
|
||||
$insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
|
||||
color: $insensitive_button_fg_color;
|
||||
background-color: $insensitive_button_bg_color;
|
||||
|
||||
// default/suggested button
|
||||
@else if $t==default {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background-color: lighten($selected_bg_color, 5%);
|
||||
color: lighten($selected_fg_color, 5%);
|
||||
}
|
||||
&:active {
|
||||
background-color: darken($selected_bg_color, 7%);
|
||||
color: darken($selected_fg_color, 7%);
|
||||
}
|
||||
&:insensitive {
|
||||
@include button(insensitive);
|
||||
background-color: transparentize($selected_bg_color, .5);
|
||||
color: transparentize($selected_fg_color, .5);
|
||||
// no outline in High Contrast for insensitive buttons
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset($no_inset: true);
|
||||
}
|
||||
}
|
||||
|
||||
// reset
|
||||
@else if $t==undecorated {
|
||||
// focused button
|
||||
@else if $type == 'focus' {
|
||||
color: $tc;
|
||||
@include focus_ring();
|
||||
|
||||
// use a different focus ring color for default style
|
||||
@if $style == 'default' {
|
||||
@include focus_ring($fc:$selected_borders_color);
|
||||
}
|
||||
// change background color if style is flat
|
||||
@if $style == 'flat' {
|
||||
$button_bg_color: transparentize($button_bg_color, 0.75);
|
||||
}
|
||||
|
||||
background-color: focus_bg_color($button_bg_color);
|
||||
|
||||
&:hover {
|
||||
background-color: focus_bg_color($hover_button_bg_color);
|
||||
}
|
||||
}
|
||||
|
||||
// reset (unstyled button)
|
||||
@else if $type == 'undecorated' {
|
||||
background-color: transparent;
|
||||
background-color: none;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&:insensitive {
|
||||
@include button(insensitive);
|
||||
background-color: transparent;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tile
|
||||
@mixin tile_button($color, $flat: true) {
|
||||
// Helper mixin for button-like elements with an icon
|
||||
@mixin tile_button($fg:$system_fg_color, $bg:$system_bg_color, $raised: false, $system: true) {
|
||||
//
|
||||
// $fg: foreground color
|
||||
// $bg: background color
|
||||
//
|
||||
// $raised: uses raised style, true or false
|
||||
// $system: uses system styles, true or false
|
||||
//
|
||||
|
||||
@extend %tile;
|
||||
@if $flat {
|
||||
background-color: transparent;
|
||||
|
||||
@if $raised {
|
||||
@include button(normal, $tc:$fg, $c:$bg, $always_dark: $system);
|
||||
&:focus { @include button(focus, $tc:$fg, $c:$bg, $always_dark: $system);}
|
||||
&:hover { @include button(hover, $tc:$fg, $c:$bg, $always_dark: $system);}
|
||||
&:active { @include button(active, $tc:$fg, $c:$bg, $always_dark: $system);}
|
||||
&:highlighted,&:selected,
|
||||
&:checked { @include button(checked, $tc:$fg, $c:$bg, $always_dark: $system);}
|
||||
&:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $always_dark: $system);}
|
||||
} @else {
|
||||
background-color: transparentize($color, .84);
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 999px 0 0 0 transparentize($color, .2); // bit of a hack
|
||||
}
|
||||
}
|
||||
&: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);}
|
||||
}
|
||||
&: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);}
|
||||
@include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);
|
||||
&:focus { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
|
||||
&:hover { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
|
||||
&:active { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
|
||||
&:highlighted,&:selected,
|
||||
&:checked { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
|
||||
&:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
|
||||
}
|
||||
|
||||
&:drop {
|
||||
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) {
|
||||
transition-duration: 400ms;
|
||||
.overview-icon {
|
||||
@extend %tile;
|
||||
}
|
||||
@if $flat {
|
||||
.overview-icon { background-color: transparent;}
|
||||
} @else {
|
||||
.overview-icon { background-color: transparentize($color, .93); }
|
||||
}
|
||||
&:hover .overview-icon { background-color: transparentize($color, .87);}
|
||||
|
||||
&: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) {
|
||||
border-radius: $base_border_radius*1.5;
|
||||
margin: $base_margin;
|
||||
|
||||
@if $flat {
|
||||
@include button(undecorated);
|
||||
box-shadow: none !important;
|
||||
} @else {
|
||||
@include button(normal);
|
||||
}
|
||||
&:hover {@include button(hover);}
|
||||
&:active {@include button(active);}
|
||||
&:focus {@include button(focus);}
|
||||
&:insensitive {
|
||||
@include button(insensitive);
|
||||
@if $flat {
|
||||
background-color: transparent;
|
||||
}
|
||||
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
|
||||
}
|
||||
}
|
||||
|
||||
// styling for all menuitems in popovers
|
||||
@mixin menuitem($bg, $flat: true) {
|
||||
@mixin menuitem($bg, $style: flat) {
|
||||
|
||||
// extend common styles
|
||||
@extend %menuitem;
|
||||
|
||||
// lighten the background color always
|
||||
$bg: lighten($bg,5%);
|
||||
|
||||
font-weight: normal;
|
||||
spacing: $base_padding;
|
||||
transition-duration: 100ms;
|
||||
padding: $base_padding*1.5 $base_padding*2;
|
||||
|
||||
@if $flat {
|
||||
@if $style == 'flat' {
|
||||
@include button(undecorated);
|
||||
box-shadow: none !important;
|
||||
} @else {
|
||||
@include button(normal, $c:$bg);
|
||||
}
|
||||
|
|
@ -359,86 +382,85 @@
|
|||
}
|
||||
&:active {@include button(active, $c:$bg);}
|
||||
&:checked {@include button(checked, $c:$bg);}
|
||||
&:insensitive {@include button(insensitive, $c:$bg);}
|
||||
}
|
||||
|
||||
//
|
||||
// Panel menu/button drawing function
|
||||
//
|
||||
// $bg: background color, derived from $panel_fg_color
|
||||
// $fg: foreground color, also derived from $panel_fg_color
|
||||
//
|
||||
// $flat: if true, the button is filled instead of transparent
|
||||
// $highlighted_child: if true, applies some special overrides for to a
|
||||
// child element, see _panel.scss for details
|
||||
// $child_class: class name of the child element
|
||||
//
|
||||
|
||||
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"", $border_radius: 3px) {
|
||||
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"", $border_radius: 3px) {
|
||||
//
|
||||
// $bg: background color, derived from $panel_fg_color
|
||||
// $fg: foreground color, also derived from $panel_fg_color
|
||||
// $style: can be set to 'filled' if button uses a colored background
|
||||
//
|
||||
// $highlighted_child: if true, applies some special overrides for to a
|
||||
// child element, see _panel.scss for details
|
||||
// $child_class: class name of the child element
|
||||
//
|
||||
|
||||
transition-duration: 150ms;
|
||||
border: 3px solid transparent;
|
||||
background-color: transparent;
|
||||
border-radius: $border_radius;
|
||||
|
||||
font-weight: bold;
|
||||
background-color: transparent;
|
||||
color: $fg;
|
||||
|
||||
@if $flat {
|
||||
box-shadow: none;
|
||||
// background fill defines
|
||||
$fill: transparent;
|
||||
$hover_fill: transparentize($fg, .83);
|
||||
$active_fill: transparentize($fg, .72);
|
||||
$active_hover_fill: transparentize($fg, .68);
|
||||
|
||||
&:active, &:focus, &:checked {
|
||||
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65);
|
||||
}
|
||||
@if $style == 'filled' {
|
||||
$fill: $bg;
|
||||
$hover_fill: if($variant == 'light', darken($bg, 5%), lighten($bg, 5%));
|
||||
$active_fill: if($variant == 'light', darken($bg, 9%), lighten($bg, 9%));
|
||||
$active_hover_fill: if($variant == 'light', darken($bg, 11%), lighten($bg, 11%));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
|
||||
@include panel_button_fill($fill);
|
||||
|
||||
&:focus, &:hover {
|
||||
@include panel_button_fill($hover_fill);
|
||||
}
|
||||
|
||||
} @else {
|
||||
box-shadow: inset 0 0 0 100px transparentize($bg, 0.2);
|
||||
&:active, &:checked {
|
||||
@include panel_button_fill($active_fill);
|
||||
|
||||
&:active, &:focus, &:checked {
|
||||
box-shadow: inset 0 0 0 100px $bg;
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 100px transparentize($bg, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 100px transparentize($bg, 0.1);
|
||||
&:hover{
|
||||
@include panel_button_fill($active_hover_fill);
|
||||
}
|
||||
}
|
||||
|
||||
// some overrides to style a child element
|
||||
@if $highlighted_child {
|
||||
box-shadow: none !important;
|
||||
|
||||
// remove the common styles from the parent
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
|
||||
// add them to the child
|
||||
#{$child_class} {
|
||||
transition-duration: 150ms;
|
||||
border: 3px solid transparent;
|
||||
border-radius: $border_radius;
|
||||
}
|
||||
|
||||
&:active, &:focus, &:checked {
|
||||
box-shadow: none !important;
|
||||
|
||||
&:focus, &:hover {
|
||||
#{$child_class} {
|
||||
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
|
||||
@include panel_button_fill($hover_fill);
|
||||
}
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
#{$child_class} {
|
||||
@include panel_button_fill($active_fill);
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65) !important;
|
||||
@include panel_button_fill($active_hover_fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
#{$child_class} {
|
||||
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,74 +1,81 @@
|
|||
// When color definition differs for dark and light variant,
|
||||
// it gets @if ed depending on $variant
|
||||
//
|
||||
// High Contrast theme definitions
|
||||
//
|
||||
// this is an always dark theme, so no 'light' theme conditions
|
||||
|
||||
@import '_palette.scss';
|
||||
@import '_default-colors.scss';
|
||||
|
||||
$is_highcontrast:true;
|
||||
// global colors
|
||||
$base_color: $dark_5;
|
||||
$bg_color: lighten($base_color, 10%);
|
||||
$fg_color: $light_1;
|
||||
|
||||
$base_color: if($variant == 'light', $light_1, $dark_5);
|
||||
$bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%));
|
||||
$fg_color: if($variant == 'light', transparentize($dark_5, .2), $light_1);
|
||||
|
||||
$selected_fg_color: $light_1;
|
||||
$selected_bg_color: $blue_3;
|
||||
$selected_borders_color: darken($selected_bg_color, 20%);
|
||||
|
||||
$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .7));
|
||||
$outer_borders_color: $borders_color;
|
||||
|
||||
$link_color: lighten($selected_bg_color,20%);
|
||||
$link_visited_color: lighten($selected_bg_color,10%);
|
||||
|
||||
$warning_color: if($variant == 'light', $yellow_5, $yellow_3);
|
||||
$error_color: if($variant == 'light', $red_3, $red_4);
|
||||
$success_color: if($variant == 'light', $green_4, $green_5);
|
||||
$destructive_color: $error_color;
|
||||
|
||||
// color definitions for OSD elements
|
||||
// OSD elements
|
||||
$osd_fg_color: $light_1;
|
||||
$osd_bg_color: $base_color;
|
||||
|
||||
// derived osd colors
|
||||
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||
$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
|
||||
$osd_borders_color: transparentize($osd_fg_color, 0.8);
|
||||
$osd_outer_borders_color: $osd_borders_color;
|
||||
|
||||
$shadow_color: rgba(0,0,0,0);
|
||||
|
||||
// button
|
||||
$button_mix_factor: 20%;
|
||||
|
||||
// notifications
|
||||
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
|
||||
|
||||
// color definitions for system elements
|
||||
// system elements
|
||||
$system_base_color: $dark_5;
|
||||
$system_fg_color: $light_1;
|
||||
|
||||
// derived system colors
|
||||
// panel colors
|
||||
$panel_bg_color: $dark_5;
|
||||
$panel_fg_color: $light_1;
|
||||
|
||||
// card elements
|
||||
$card_bg_color: $bg_color;
|
||||
$card_shadow_color: transparent;
|
||||
$card_shadow_border_color: $card_bg_color;
|
||||
|
||||
//
|
||||
// Derived Colors
|
||||
//
|
||||
// colors based on the global defines above
|
||||
|
||||
// borders
|
||||
$borders_color: transparentize($fg_color, $border_opacity);
|
||||
$outer_borders_color: $borders_color;
|
||||
|
||||
// osd colors
|
||||
$osd_borders_color: transparentize($osd_fg_color, 0.8);
|
||||
$osd_outer_borders_color: $osd_borders_color;
|
||||
|
||||
// system colors
|
||||
$system_bg_color: lighten($system_base_color, 5%);
|
||||
$system_borders_color: transparentize($system_fg_color, .9);
|
||||
$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
|
||||
$system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%);
|
||||
|
||||
// derived global colors
|
||||
// insensitive state
|
||||
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
|
||||
$insensitive_fg_color: $fg_color;
|
||||
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
|
||||
$insensitive_borders_color: $borders_color;
|
||||
|
||||
// checked state
|
||||
$checked_bg_color: if($variant=='light', darken($bg_color, 12%), lighten($bg_color, 18%));
|
||||
$checked_fg_color: if($variant=='light', darken($fg_color, 12%), lighten($fg_color, 18%));
|
||||
$checked_bg_color: lighten($bg_color, 18%);
|
||||
$checked_fg_color: lighten($fg_color, 18%);
|
||||
|
||||
// hover state
|
||||
$hover_bg_color: if($variant=='light', darken($bg_color, 8%), lighten($bg_color, 20%));
|
||||
$hover_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 20%));
|
||||
$hover_bg_color: lighten($bg_color, 20%);
|
||||
$hover_fg_color: lighten($fg_color, 20%);
|
||||
|
||||
// active state
|
||||
$active_bg_color: if($variant=='light', darken($bg_color, 10%), lighten($bg_color, 22%));
|
||||
$active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%));
|
||||
$active_bg_color: lighten($bg_color, 22%);
|
||||
$active_fg_color: lighten($fg_color, 22%);
|
||||
|
||||
// inset colour for high contrast
|
||||
$hc_inset_color: transparentize($fg_color, 0.7);
|
||||
// selection colors
|
||||
$selected_borders_color: lighten($selected_bg_color, 30%);
|
||||
|
||||
//
|
||||
// High Contrast specific definitions
|
||||
//
|
||||
|
||||
// color for outline drawn onto all elements (may be a border or a box-shadow)
|
||||
$hc_inset_color: transparentize($fg_color, 0.6);
|
||||
|
||||
// color used in a mixin in _drawing to boost a color's contrast
|
||||
$hc_mix_color: $light_1;
|
||||
|
||||
// the mix factor used to boost contrast of a color in the above mixin
|
||||
$hc_mix_factor: 87%;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
@import 'widgets/ibus-popup';
|
||||
// Notifications
|
||||
@import 'widgets/notifications';
|
||||
@import 'widgets/hotplug';
|
||||
// Dialogs
|
||||
@import 'widgets/dialogs';
|
||||
// OSDs
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
/* App Grid */
|
||||
|
||||
$app_icon_size: 96px;
|
||||
$app_folder_size: 720px;
|
||||
|
||||
// app icons
|
||||
.icon-grid {
|
||||
row-spacing: $base_padding * 2;
|
||||
column-spacing: $base_padding * 2;
|
||||
max-row-spacing: $base_padding * 7;
|
||||
max-column-spacing: $base_padding * 7;
|
||||
max-row-spacing: $base_padding * 6;
|
||||
max-column-spacing: $base_padding * 6;
|
||||
page-padding-top: $base_padding * 4;
|
||||
page-padding-bottom: $base_padding * 4;
|
||||
page-padding-left: $base_padding * 3;
|
||||
|
|
@ -16,41 +17,69 @@ $app_icon_size: 96px;
|
|||
|
||||
/* App Icons */
|
||||
|
||||
// Icon tiles in the app grid
|
||||
.app-well-app {
|
||||
@include overview_icon($system_fg_color);
|
||||
// items in the app grid and dash
|
||||
.overview-tile {
|
||||
@include tile_button($bg:$system_base_color);
|
||||
|
||||
.overview-icon {
|
||||
padding: $base_padding*2;
|
||||
// override the %tile style
|
||||
border-radius: $base_border_radius*3;
|
||||
color: $system_fg_color;
|
||||
}
|
||||
.overview-icon.overview-icon-with-label {
|
||||
padding: $base_padding * 2;
|
||||
|
||||
// the icon itself
|
||||
.overview-icon {
|
||||
// item with a label
|
||||
&.overview-icon-with-label {
|
||||
> StBoxLayout {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// app folders
|
||||
.app-well-app.app-folder {
|
||||
@include overview_icon($system_fg_color, $flat: false);
|
||||
.app-folder {
|
||||
@include tile_button($bg:$system_base_color, $raised: true);
|
||||
}
|
||||
|
||||
// expanded folder
|
||||
.app-folder-dialog {
|
||||
border-radius: $modal_radius*4;
|
||||
background-color: $system_overlay_bg_color;
|
||||
padding: $base_padding*2;
|
||||
box-shadow:inset 0 0 0 1px $system_borders_color;
|
||||
// Running app indicator (also shown in dash)
|
||||
.app-grid-running-dot {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border-radius:5px;
|
||||
background-color: $system_fg_color;
|
||||
|
||||
@if $is_highcontrast {
|
||||
box-shadow:inset 0 0 0 2px $hc_inset_color;
|
||||
@if $contrast == 'high' {
|
||||
margin-bottom: 4px;
|
||||
} @else {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-folder-dialog-container {
|
||||
// pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
|
||||
padding-top: $panel_height;
|
||||
}
|
||||
|
||||
// Expanded app folder dialog
|
||||
.app-folder-dialog {
|
||||
width: $app_folder_size;
|
||||
height: $app_folder_size;
|
||||
|
||||
border-radius: $modal_radius * 4;
|
||||
background-color: $system_overlay_bg_color;
|
||||
color: $system_fg_color;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
padding: 0 2px;
|
||||
box-shadow: inset 0 0 0 2px $hc_inset_color;
|
||||
} @else {
|
||||
padding: 0 1px;
|
||||
box-shadow: inset 0 0 0 1px $system_borders_color;
|
||||
}
|
||||
|
||||
& .folder-name-container {
|
||||
padding: 24px 36px 0;
|
||||
spacing: 12px;
|
||||
padding: $base_padding * 4 $base_padding * 6;
|
||||
padding-bottom: 0;
|
||||
|
||||
& .folder-name-label,
|
||||
& .folder-name-entry {
|
||||
|
|
@ -58,50 +87,30 @@ $app_icon_size: 96px;
|
|||
}
|
||||
|
||||
& .folder-name-entry {
|
||||
@extend %system_entry;
|
||||
width: 12em;
|
||||
color: $system_fg_color !important;
|
||||
}
|
||||
|
||||
/* FIXME: this is to keep the label in sync with the entry */
|
||||
& .folder-name-label { padding: 5px 7px; color: $system_fg_color; }
|
||||
|
||||
& .edit-folder-button {
|
||||
@extend %button;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 99px;
|
||||
& > StIcon { icon-size: $base_icon_size }
|
||||
}
|
||||
}
|
||||
|
||||
& .icon-grid {
|
||||
row-spacing: $base_padding * 2;
|
||||
column-spacing: $base_padding * 5;
|
||||
page-padding-top: 0;
|
||||
page-padding-bottom: 0;
|
||||
page-padding-left: 0;
|
||||
page-padding-right: 0;
|
||||
& .icon-button {
|
||||
@include button(normal, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);
|
||||
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);}
|
||||
&:active { @include button(active, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);}
|
||||
}
|
||||
|
||||
& .page-indicators {
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: $base_padding * 4;
|
||||
}
|
||||
}
|
||||
|
||||
.app-folder-dialog-container {
|
||||
padding: $base_padding*2;
|
||||
width: 720px;
|
||||
height: 720px;
|
||||
}
|
||||
& .page-navigation-arrow {
|
||||
@include button(normal, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);
|
||||
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);}
|
||||
&:active { @include button(active, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);}
|
||||
}
|
||||
|
||||
// Running app indicator (also shown in dash)
|
||||
.app-well-app-running-dot {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border-radius:5px;
|
||||
margin-bottom: 8px;
|
||||
background-color: $system_fg_color;
|
||||
& .overview-tile {
|
||||
@include tile_button($bg:$system_overlay_bg_color);
|
||||
}
|
||||
}
|
||||
|
||||
// Rename popup for app folders
|
||||
|
|
@ -113,15 +122,16 @@ $app_icon_size: 96px;
|
|||
}
|
||||
|
||||
// App Grid pagination indicators
|
||||
$page_indicator_size: 10px;
|
||||
.page-indicator {
|
||||
padding: $base_padding $base_padding * 2 0;
|
||||
transition-duration:400ms;
|
||||
|
||||
.page-indicator-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 10px; // the same as height&width
|
||||
background-color: white;
|
||||
width: $page_indicator_size;
|
||||
height: $page_indicator_size;
|
||||
border-radius: $forced_circular_radius;
|
||||
background-color: $system_fg_color;
|
||||
transition-duration: 400ms;
|
||||
}
|
||||
}
|
||||
|
|
@ -134,13 +144,14 @@ $app_icon_size: 96px;
|
|||
.system-action-icon {
|
||||
background-color: transparentize($system_fg_color,.9);
|
||||
color: $system_fg_color;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
icon-size: $app_icon_size * 0.5;
|
||||
@if $is_highcontrast {
|
||||
@if $contrast == 'high' {
|
||||
box-shadow: inset 0 0 0 2px $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
// page navigation
|
||||
.page-navigation-hint {
|
||||
&.dnd {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
|
@ -151,7 +162,7 @@ $app_icon_size: 96px;
|
|||
background-gradient-start: rgba(255, 255, 255, 0.05);
|
||||
background-gradient-end: transparent;
|
||||
background-gradient-direction: horizontal;
|
||||
border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5;
|
||||
border-radius: $modal_radius * 1.5 0px 0px $modal_radius * 1.5;
|
||||
}
|
||||
|
||||
&.previous:ltr,
|
||||
|
|
@ -159,25 +170,21 @@ $app_icon_size: 96px;
|
|||
background-gradient-start: transparent;
|
||||
background-gradient-end: rgba(255, 255, 255, 0.05);
|
||||
background-gradient-direction: horizontal;
|
||||
border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px;
|
||||
border-radius: 0px $modal_radius * 1.5 $modal_radius * 1.5 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-navigation-arrow {
|
||||
margin: 6px;
|
||||
padding: 18px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 99px;
|
||||
margin: $base_padding;
|
||||
padding: $base_padding * 3;
|
||||
width: $medium_icon_size;
|
||||
height: $medium_icon_size;
|
||||
border-radius: $forced_circular_radius;
|
||||
transition-duration: 100ms;
|
||||
|
||||
> StIcon { color: $system_fg_color;}
|
||||
|
||||
@if $is_highcontrast {
|
||||
@include button(normal, $system_fg_color, transparentize($system_bg_color, 0.5));
|
||||
}
|
||||
|
||||
&:insensitive { @include button(undecorated, $system_fg_color, transparentize($system_bg_color, 0.5));}
|
||||
&:hover { @include button(hover, $system_fg_color, transparentize($system_bg_color, 0.5));}
|
||||
&:active { @include button(active, $system_fg_color, transparentize($system_bg_color, 0.5));}
|
||||
@include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);
|
||||
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);}
|
||||
&:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,19 @@
|
|||
|
||||
// Outline for low res icons
|
||||
.lowres-icon {
|
||||
icon-shadow: 0 1px 2px rgba(black, 0.3);
|
||||
icon-shadow: 0 1px 2px rgba(black, 0.2);
|
||||
}
|
||||
|
||||
// Dropshadow for large icons
|
||||
.icon-dropshadow {
|
||||
icon-shadow: 0 1px 5px rgba(black, 0.8);
|
||||
icon-shadow: 0 2px 4px rgba(black, 0.4);
|
||||
|
||||
@if $contrast == 'high' {
|
||||
icon-shadow: none;
|
||||
background-color: $osd_bg_color;
|
||||
padding: $base_padding * 2;
|
||||
border-radius: $modal_radius;
|
||||
border: 2px solid $hc_inset_color;
|
||||
margin: $base_padding * 3;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,39 @@
|
|||
/* Buttons */
|
||||
|
||||
.button {
|
||||
@extend %button; // that's it
|
||||
min-height: 22px;
|
||||
@extend %button;
|
||||
// uses scalable value since it's a text element
|
||||
min-height: to_em(22px);
|
||||
|
||||
// default style
|
||||
&.default {
|
||||
@extend %default_button;
|
||||
}
|
||||
// flat style
|
||||
&.flat {
|
||||
@extend %flat_button;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
@extend .button; // same style as buttons
|
||||
@extend %button;
|
||||
|
||||
border-radius: 99px;
|
||||
padding: $base_padding*2;
|
||||
min-height: 16px;
|
||||
border-radius: $forced_circular_radius; // is circular
|
||||
padding: $scaled_padding * 2;
|
||||
min-height: $scalable_icon_size;
|
||||
|
||||
StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
icon-size: $scalable_icon_size;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
// default style
|
||||
&.default {
|
||||
@extend %default_button;
|
||||
}
|
||||
|
||||
// flat style
|
||||
&.flat {
|
||||
@extend %flat_button;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,25 +2,31 @@
|
|||
|
||||
// overall menu
|
||||
#calendarArea {
|
||||
padding: $base_padding - 2px;
|
||||
padding: $base_margin;
|
||||
}
|
||||
|
||||
// Calendar menu side column
|
||||
.datemenu-popover {
|
||||
border-radius: $base_border_radius * 1.5 + $base_padding * 3;
|
||||
}
|
||||
|
||||
// calendar menu side column
|
||||
.datemenu-calendar-column {
|
||||
spacing: $base_padding;
|
||||
&:ltr {padding-left: $base_padding;}
|
||||
&:rtl {padding-right: $base_padding;}
|
||||
.datemenu-displays-box {spacing: $base_padding;}
|
||||
&:ltr { margin-left: $base_padding;}
|
||||
&:rtl { margin-right: $base_padding;}
|
||||
.datemenu-displays-box {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
}
|
||||
|
||||
/* today button (the date) */
|
||||
// today button (the date)
|
||||
.datemenu-today-button {
|
||||
@include card(flat);
|
||||
@extend %card_flat;
|
||||
padding: $base_padding * 1.5;
|
||||
|
||||
// weekday label
|
||||
.day-label {
|
||||
@extend %heading;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// date label
|
||||
|
|
@ -29,10 +35,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Calendar */
|
||||
// the mini calendar
|
||||
.calendar {
|
||||
@include card(flat);
|
||||
@extend %card_flat;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
|
||||
// month header
|
||||
.calendar-month-header {
|
||||
|
|
@ -40,23 +47,25 @@
|
|||
// prev/next month icons
|
||||
.calendar-change-month-back StIcon,
|
||||
.calendar-change-month-forward StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
icon-size: $scalable_icon_size;
|
||||
}
|
||||
|
||||
// month label
|
||||
.calendar-month-label {
|
||||
@extend %heading;
|
||||
@extend %flat_button;
|
||||
color: $fg_color !important;
|
||||
padding: 8px 0;
|
||||
width: 10em;
|
||||
border-radius: $forced_circular_radius;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pager-button {
|
||||
@extend .button, .flat;
|
||||
padding: 0 !important;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin: 2px;
|
||||
border-radius: $base_border_radius;
|
||||
transition-duration: 100ms;
|
||||
@extend .icon-button, .flat;
|
||||
height: 2.6em;
|
||||
width: 2.6em;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,41 +73,48 @@
|
|||
.calendar-day {
|
||||
@extend %numeric;
|
||||
@extend %smaller;
|
||||
@extend .button, .flat;
|
||||
|
||||
border-radius: 99px;
|
||||
height: 3em !important;
|
||||
width: 3em !important;
|
||||
@extend %flat_button;
|
||||
border-radius: $forced_circular_radius;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
margin: 2px;
|
||||
padding: 0 !important;
|
||||
font-weight: 600;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
transition-duration: 100ms;
|
||||
|
||||
// day of week heading
|
||||
&.calendar-day-heading {
|
||||
background-color: transparent;
|
||||
color: $insensitive_fg_color;
|
||||
height: 0.93em !important; // force heading to be smaller height
|
||||
padding-top: $base_padding !important;
|
||||
margin-bottom: 0;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
&.calendar-weekday {}
|
||||
|
||||
&.calendar-weekend {
|
||||
color: $insensitive_fg_color;
|
||||
@if $contrast == 'high' {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
&.calendar-other-month {
|
||||
color: transparentize($insensitive_fg_color, 0.7) !important;
|
||||
color: transparentize($fg_color, 0.5);
|
||||
font-weight: normal;
|
||||
|
||||
&.calendar-weekend {
|
||||
color: transparentize($fg_color, 0.5);
|
||||
@if $contrast == 'high' {
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
@if $contrast == 'high' {
|
||||
color: $fg_color;
|
||||
font-style: italic; // differentiate with a font-style instead of text color
|
||||
}
|
||||
}
|
||||
|
||||
&.calendar-today {
|
||||
@extend .button, .default;
|
||||
color: $selected_fg_color; /* override weekends */
|
||||
@extend %default_button;
|
||||
// override colors above for when today is a weekend
|
||||
color: $selected_fg_color !important;
|
||||
&.calendar-day-with-events {
|
||||
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
|
||||
}
|
||||
}
|
||||
|
||||
&.calendar-day-with-events {
|
||||
|
|
@ -107,41 +123,62 @@
|
|||
}
|
||||
}
|
||||
|
||||
// day of week heading
|
||||
.calendar-day-heading {
|
||||
@extend %numeric;
|
||||
@extend %smaller;
|
||||
@extend %flat_button;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: $base_margin;
|
||||
padding: $base_padding * 0.5 $base_padding;
|
||||
border-radius: $base_border_radius;
|
||||
}
|
||||
|
||||
// week number style
|
||||
.calendar-week-number {
|
||||
@include fontsize($base_font_size - 4);
|
||||
@extend %smaller;
|
||||
font-weight: bold;
|
||||
font-feature-settings: "tnum";
|
||||
text-align: center;
|
||||
margin: 6px;
|
||||
margin: $base_padding;
|
||||
padding: 0 $base_padding;
|
||||
border-radius: 3px;
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
border-radius: $base_border_radius * 0.5;
|
||||
background-color: transparentize($insensitive_fg_color, .8);
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border:1px solid $hc_inset_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Events */
|
||||
// common style for the date menu widgets
|
||||
.events-button,
|
||||
.world-clocks-button,
|
||||
.weather-button {
|
||||
@extend %card;
|
||||
}
|
||||
|
||||
// events
|
||||
.events-button {
|
||||
@include card;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.events-box {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.events-list {
|
||||
spacing: 2 * $base_padding;
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
// event title
|
||||
.events-title {
|
||||
@extend %heading;
|
||||
margin-bottom: $base_margin;
|
||||
color: $insensitive_fg_color;
|
||||
padding-bottom: $base_padding;
|
||||
}
|
||||
|
||||
// list of events
|
||||
.events-list {
|
||||
spacing: $base_padding;
|
||||
|
||||
// container for an event
|
||||
.event-box {
|
||||
spacing: $base_padding;
|
||||
border-radius: $base_border_radius;
|
||||
|
||||
.event-summary {
|
||||
@extend %heading;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
|
|
@ -149,34 +186,43 @@
|
|||
@extend %caption;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.event-placeholder {
|
||||
color: $insensitive_fg_color;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* World clocks */
|
||||
// world clocks
|
||||
.world-clocks-button {
|
||||
@include card;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.world-clocks-grid {
|
||||
spacing-rows: $base_padding;
|
||||
spacing-columns: $base_padding * 2;
|
||||
}
|
||||
|
||||
// title
|
||||
.world-clocks-header {
|
||||
@extend %heading;
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
// change style when no world clocks are configured
|
||||
&.no-world-clocks {
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
// clocks
|
||||
.world-clocks-grid {
|
||||
spacing-rows: $base_padding;
|
||||
spacing-columns: $base_padding * 2;
|
||||
|
||||
// city label
|
||||
.world-clocks-city {
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
// timezone time
|
||||
.world-clocks-time {
|
||||
@extend %heading;
|
||||
@extend %numeric;
|
||||
color: $fg_color;
|
||||
font-weight: bold;
|
||||
|
||||
&:ltr {text-align: right;}
|
||||
&:rtl {text-align: left;}
|
||||
|
|
@ -188,48 +234,54 @@
|
|||
@extend %caption;
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Weather */
|
||||
// weather
|
||||
.weather-button {
|
||||
@include card;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.weather-box {
|
||||
spacing: $base_padding + $base_margin;
|
||||
}
|
||||
spacing: $base_padding;
|
||||
|
||||
// header
|
||||
.weather-header-box {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.weather-header {
|
||||
color: $insensitive_fg_color;
|
||||
@extend %heading;
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
// change style when no location is configured
|
||||
&.no-location {
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&.location {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// weather items
|
||||
.weather-grid {
|
||||
spacing-rows: $base_padding;
|
||||
spacing-columns: $base_padding * 2;
|
||||
}
|
||||
|
||||
.weather-forecast-time {
|
||||
@extend %numeric;
|
||||
@extend %caption;
|
||||
color: darken($fg_color,30%);
|
||||
@include fontsize(10pt);
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.weather-forecast-icon {
|
||||
icon-size: $large_icon_size;
|
||||
icon-size: $large_scalable_icon_size;
|
||||
margin-bottom: $base_margin;
|
||||
}
|
||||
|
||||
.weather-forecast-temp {
|
||||
@extend %heading;
|
||||
@extend %numeric;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,17 +4,35 @@
|
|||
$dash_background_color: $system_overlay_bg_color;
|
||||
|
||||
$dash_placeholder_size: 32px;
|
||||
$dash_padding: $base_padding*2; // 12px
|
||||
$dash_padding: $base_padding * 2;
|
||||
$dash_edge_offset: $base_margin * 3;
|
||||
$dash_border_radius: $modal_radius + $dash_padding;
|
||||
$dash_spacing: $base_margin * 0.5;
|
||||
|
||||
// container for the dash
|
||||
#dash {
|
||||
@extend %caption;
|
||||
margin-top: $dash_padding;
|
||||
margin-top: $dash_edge_offset;
|
||||
|
||||
// background behind item container
|
||||
.dash-background {
|
||||
background-color: $dash_background_color;
|
||||
border-radius: $dash_border_radius;
|
||||
padding-top: $dash_padding;
|
||||
padding-bottom: $dash_padding;
|
||||
padding-left: $dash_padding - $dash_spacing; // subtract the margins added to .overview-tile below
|
||||
padding-right: $dash_padding - $dash_spacing;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset($width: 2px);
|
||||
}
|
||||
}
|
||||
|
||||
// items on the dash
|
||||
.dash-item-container {
|
||||
|
||||
.placeholder {
|
||||
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
|
||||
background-image:none;
|
||||
background-image: none;
|
||||
background-size: contain;
|
||||
height: $dash_placeholder_size;
|
||||
}
|
||||
|
|
@ -24,55 +42,54 @@ $dash_border_radius: $modal_radius + $dash_padding;
|
|||
height: $dash_placeholder_size;
|
||||
}
|
||||
|
||||
// Running app indicator (also shown in app grid)
|
||||
.app-well-app-running-dot {
|
||||
margin-bottom: 14px; // hardcoded
|
||||
}
|
||||
}
|
||||
// IMPORTANT: items on the dash need to extend to the edge to be adequate click targets
|
||||
// as such the %tile style is overriden and button styles are applied to the child class .overview-icon
|
||||
.show-apps,
|
||||
.overview-tile {
|
||||
// remove styles
|
||||
@extend %reset;
|
||||
|
||||
// background of the dash behind app icons
|
||||
.dash-background {
|
||||
background-color: $dash_background_color;
|
||||
border-radius: $dash_border_radius;
|
||||
padding: $dash_padding;
|
||||
spacing: $base_padding;
|
||||
margin-bottom: $dash_padding;
|
||||
margin: 0 $dash_spacing;
|
||||
padding-bottom: $dash_edge_offset; // align with other items
|
||||
|
||||
@if $is_highcontrast {
|
||||
border: 2px solid $hc_inset_color;
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
$fg:$system_fg_color;
|
||||
$bg:$dash_background_color;
|
||||
|
||||
// items on the dash
|
||||
.dash-item-container {
|
||||
> * {margin: 0 2px;}
|
||||
&:ltr{&:first-child {margin-left: 0;}}
|
||||
&:rtl{&:first-child {margin-right: 0;}}
|
||||
|
||||
// each app item on the dash
|
||||
.app-well-app .overview-icon {
|
||||
padding: $base_padding;
|
||||
border-radius: $base_border_radius*2;
|
||||
.overview-icon {
|
||||
@extend %tile;
|
||||
@include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);
|
||||
}
|
||||
|
||||
// show apps button
|
||||
.show-apps { @include overview_icon($system_fg_color);}
|
||||
|
||||
.show-apps, .app-well-app {
|
||||
padding-bottom: $dash_padding;
|
||||
color: $system_fg_color;
|
||||
&:focus .overview-icon { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
|
||||
&:hover .overview-icon { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
|
||||
&:active .overview-icon { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
|
||||
&:checked .overview-icon { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
|
||||
}
|
||||
}
|
||||
|
||||
// separator between favourites and running apps
|
||||
.dash-separator {
|
||||
// running app dot
|
||||
.app-grid-running-dot {
|
||||
// manually position the dot within the dash item
|
||||
margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
|
||||
}
|
||||
}
|
||||
|
||||
// separator between pinned and running apps
|
||||
.dash-separator {
|
||||
width: 1px;
|
||||
margin: 0 $base_margin;
|
||||
margin-left:$base_margin;
|
||||
margin-right:$base_margin;
|
||||
background-color: $system_borders_color;
|
||||
margin-bottom: $dash_padding;
|
||||
@if $is_highcontrast {
|
||||
|
||||
@if $contrast == 'high' {
|
||||
width: 2px;
|
||||
background-color: $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
// make sure all dash components have same margin from screen edge
|
||||
.dash-separator,
|
||||
.dash-background {
|
||||
margin-bottom: $dash_edge_offset;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
box-shadow: inset 0 0 0 1px $outer_borders_color;
|
||||
|
||||
.modal-dialog-content-box {
|
||||
margin: 32px 40px;
|
||||
spacing: 32px;
|
||||
margin: $base_margin * 8 $base_margin * 10;
|
||||
spacing: $base_margin * 8;
|
||||
max-width: 28em;
|
||||
}
|
||||
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
/* Message Dialog */
|
||||
.message-dialog-content {
|
||||
spacing: 18px;
|
||||
spacing: $base_padding * 3;
|
||||
|
||||
.message-dialog-title {
|
||||
text-align: center;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
/* Dialog List */
|
||||
.dialog-list {
|
||||
spacing: 18px;
|
||||
spacing: $base_padding * 3;
|
||||
|
||||
.dialog-list-title {
|
||||
text-align: center;
|
||||
|
|
@ -71,8 +71,8 @@
|
|||
/* Run Dialog */
|
||||
.run-dialog {
|
||||
.modal-dialog-content-box {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 14px;
|
||||
margin-top: $base_padding * 4;
|
||||
margin-bottom: $base_padding * 2;
|
||||
}
|
||||
.run-dialog-entry { width: 20em; }
|
||||
.run-dialog-description {
|
||||
|
|
@ -88,25 +88,25 @@
|
|||
width: 28em;
|
||||
|
||||
.modal-dialog-content-box {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: $base_margin * 6;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-password-grid {
|
||||
spacing-rows: 8px;
|
||||
spacing-columns: 4px;
|
||||
spacing-rows: $base_margin * 2;
|
||||
spacing-columns: $base_margin;
|
||||
|
||||
.prompt-dialog-password-entry {
|
||||
width: auto;
|
||||
|
||||
// 4px (spacing) + 16px (spinner-width)
|
||||
&:ltr { margin-left: 20px; }
|
||||
&:rtl { margin-right: 20px; }
|
||||
&:ltr { margin-left: $base_margin+$base_icon_size; }
|
||||
&:rtl { margin-right: $base_margin+$base_icon_size; }
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-password-layout {
|
||||
spacing: 8px;
|
||||
spacing: $base_margin * 2;
|
||||
}
|
||||
|
||||
.prompt-dialog-password-entry {
|
||||
|
|
@ -129,20 +129,20 @@
|
|||
|
||||
.polkit-dialog-user-layout {
|
||||
text-align: center;
|
||||
spacing: 8px;
|
||||
margin-bottom: 6px;
|
||||
spacing: $base_margin * 2;
|
||||
margin-bottom: $base_padding;
|
||||
|
||||
.polkit-dialog-user-root-label { color: $warning_color; }
|
||||
}
|
||||
|
||||
/* Audio selection dialog */
|
||||
.audio-device-selection-dialog {
|
||||
.modal-dialog-content-box { margin-bottom: 28px; }
|
||||
.audio-selection-box { spacing: 20px; }
|
||||
.modal-dialog-content-box { margin-bottom: $base_margin * 7; }
|
||||
.audio-selection-box { spacing: $base_margin * 5; }
|
||||
}
|
||||
|
||||
.audio-selection-device {
|
||||
border-radius: $base_border_radius*2;
|
||||
border-radius: $base_border_radius * 2;
|
||||
&:hover,&:focus { background-color: $hover_bg_color; }
|
||||
&:active {
|
||||
background-color: $selected_bg_color;
|
||||
|
|
@ -151,8 +151,8 @@
|
|||
}
|
||||
|
||||
.audio-selection-device-box {
|
||||
padding: 20px;
|
||||
spacing: 20px;
|
||||
padding: $base_margin * 5;
|
||||
spacing: $base_margin * 5;
|
||||
}
|
||||
|
||||
.audio-selection-device-icon {
|
||||
|
|
|
|||
|
|
@ -4,17 +4,17 @@ StEntry {
|
|||
@extend %entry;
|
||||
|
||||
StIcon.capslock-warning {
|
||||
icon-size: $base_icon_size;
|
||||
icon-size: $scalable_icon_size;
|
||||
warning-color: $warning_color;
|
||||
padding: 0 4px;
|
||||
padding: 0 $base_margin;
|
||||
}
|
||||
|
||||
StIcon.peek-password {
|
||||
icon-size: $base_icon_size;
|
||||
padding: 0 4px;
|
||||
icon-size: $scalable_icon_size;
|
||||
padding: 0 $base_margin;
|
||||
}
|
||||
|
||||
StLabel.hint-text {
|
||||
margin-left: 2px;
|
||||
margin-left: $base_margin * 0.5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
// hotplug
|
||||
|
||||
.hotplug-notification-item {
|
||||
@extend %bubble_button;
|
||||
}
|
||||
|
||||
.hotplug-notification-item-icon {
|
||||
icon-size: 24px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
.candidate-box {
|
||||
padding: $base_padding $base_padding*2 $base_padding $base_padding*2;
|
||||
padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2;
|
||||
border-radius: $base_border_radius;
|
||||
&:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
|
||||
&:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
|
||||
.candidate-page-button-box {
|
||||
height: 2em;
|
||||
.vertical & { padding-top: $base_padding*2; }
|
||||
.horizontal & { padding-left: $base_padding*2; }
|
||||
.vertical & { padding-top: $base_padding * 2; }
|
||||
.horizontal & { padding-left: $base_padding * 2; }
|
||||
}
|
||||
|
||||
.candidate-page-button {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/* On-screen Keyboard */
|
||||
|
||||
$key_size: 1.2em;
|
||||
$key_border_radius: $base_border_radius + 4px; // 12px
|
||||
$key_border_radius: $base_border_radius * 1.25;
|
||||
$key_bg_color: darken($osd_fg_color, 70%);
|
||||
// $default_key_bg_color: darken($key_bg_color, 4%);
|
||||
$default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%));
|
||||
|
|
@ -31,8 +31,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
|||
|
||||
// the keys
|
||||
.keyboard-key {
|
||||
|
||||
@include fontsize($base_font_size + 5);
|
||||
@include fontsize($base_font_size + 5pt);
|
||||
font-weight: bold;
|
||||
min-height: $key_size;
|
||||
min-width: $key_size;
|
||||
|
|
@ -41,12 +40,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
|||
border-radius: $key_border_radius;
|
||||
box-shadow: 0 1px 0 0 $shadow_color;
|
||||
|
||||
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
|
||||
@include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
|
||||
|
||||
&:focus { @include keyboard_key(focus);}
|
||||
&: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); }
|
||||
&:focus { @include button(focus);}
|
||||
&:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
|
||||
&:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
&:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
|
||||
&:grayed { //FIXMEy
|
||||
background-color: darken($bg_color, 3%);
|
||||
|
|
@ -56,10 +55,10 @@ $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 {@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);}
|
||||
@include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
|
||||
&:hover { @include button(hover, $c:$default_key_bg_color, $tc:$osd_fg_color);}
|
||||
&:active { @include button(active, $c:$default_key_bg_color, $tc:$osd_fg_color);}
|
||||
&:checked { @include button(checked, $c:$default_key_bg_color, $tc:$osd_fg_color);}
|
||||
border-radius: $key_border_radius;
|
||||
|
||||
// keys that may be latched: ctrl/alt/shift
|
||||
|
|
@ -71,10 +70,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
|||
|
||||
// enter key is suggested-action
|
||||
&.enter-key {
|
||||
@include keyboard_key(normal, $selected_bg_color, $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);}
|
||||
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
|
||||
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);}
|
||||
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);}
|
||||
&:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);}
|
||||
border-radius: $key_border_radius;
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
|
|
@ -92,12 +91,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
|||
}
|
||||
|
||||
// size of icons on keys
|
||||
StIcon { icon-size: 24px; }
|
||||
StIcon { icon-size: $medium_icon_size; }
|
||||
}
|
||||
|
||||
// long press on a key popup
|
||||
.keyboard-subkeys {
|
||||
-arrow-border-radius: $base_border_radius*2;
|
||||
-arrow-border-radius: $base_border_radius * 2;
|
||||
-arrow-background-color: $osd_bg_color;
|
||||
-arrow-border-width: 1px;
|
||||
-arrow-border-color: lighten($osd_bg_color, 9%);
|
||||
|
|
@ -107,12 +106,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
|||
padding: $base_padding;
|
||||
|
||||
.keyboard-key {
|
||||
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
|
||||
@include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
|
||||
|
||||
&:focus { @include keyboard_key(focus);}
|
||||
&: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); }
|
||||
&:focus { @include button(focus);}
|
||||
&:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
|
||||
&:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
&:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
|
||||
border-radius:$key_border_radius;
|
||||
}
|
||||
|
|
@ -136,24 +135,24 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
|||
|
||||
// suggestions
|
||||
.word-suggestions {
|
||||
@include fontsize($base_font_size + 1);
|
||||
@extend %title_4;
|
||||
spacing: 12px;
|
||||
min-height: 17pt;
|
||||
padding: $base_padding*2;
|
||||
padding: $base_padding * 2;
|
||||
color: $osd_fg_color;
|
||||
|
||||
// each suggestion
|
||||
StButton {
|
||||
margin: 0 3px;
|
||||
min-width: 32px;
|
||||
border-radius: $base_border_radius - 2px;
|
||||
padding: 0px $base_padding*3;
|
||||
border-radius: 4px;
|
||||
padding: 0px $base_padding * 3;
|
||||
|
||||
@include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
|
||||
@include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color);
|
||||
|
||||
&:focus { @include keyboard_key(focus);}
|
||||
&: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); }
|
||||
&:focus { @include button(focus);}
|
||||
&:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
|
||||
&:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
&:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,32 @@
|
|||
$_gdm_bg: $system_bg_color;
|
||||
$_gdm_bg: $system_base_color;
|
||||
$_gdm_fg: $system_fg_color;
|
||||
$_gdm_dialog_width: 23em;
|
||||
$_gdm_dialog_width: 25em;
|
||||
|
||||
// common style for gdm and lockscreen
|
||||
// common style for login and lockscreen
|
||||
.login-dialog,
|
||||
.unlock-dialog {
|
||||
color: $_gdm_fg;
|
||||
|
||||
.caps-lock-warning-label,
|
||||
.login-dialog-message-warning {
|
||||
color: $_gdm_fg;
|
||||
}
|
||||
|
||||
.login-dialog-prompt-layout {
|
||||
width: $_gdm_dialog_width;
|
||||
spacing: $base_padding * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Login Dialog */
|
||||
// GDM Login Dialog
|
||||
// uses dark grey system styles
|
||||
.login-dialog {
|
||||
background-color: $_gdm_bg;
|
||||
.login-dialog-prompt-entry {
|
||||
@extend %system_entry;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons
|
||||
// buttons on login screen
|
||||
.login-dialog-button {
|
||||
|
||||
&.cancel-button,
|
||||
|
|
@ -28,50 +37,89 @@ $_gdm_dialog_width: 23em;
|
|||
}
|
||||
|
||||
&.cancel-button {
|
||||
padding: $base_padding*1.5;
|
||||
padding: $base_padding * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-button-box {
|
||||
width: $_gdm_dialog_width;
|
||||
spacing: $base_padding*2;
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
|
||||
.conflicting-session-dialog-content {
|
||||
spacing: 20px;
|
||||
|
||||
.conflicting-session-dialog-title {
|
||||
text-align: center;
|
||||
@extend %title_2;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.conflicting-session-dialog-desc {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.conflicting-session-dialog-desc-warning {
|
||||
text-align: center;
|
||||
color: $warning_color;
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-logo-bin {
|
||||
margin:3em 0;
|
||||
margin: 3em 0;
|
||||
}
|
||||
|
||||
.login-dialog-banner-view {
|
||||
max-width: $_gdm_dialog_width;
|
||||
|
||||
.login-dialog-banner {
|
||||
color: darken($_gdm_fg,10%);
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-message {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-dialog-user-selection-box {
|
||||
// padding to ensure the box doesn't overlap the panel
|
||||
padding-top: 4em;
|
||||
padding-bottom: 8em;
|
||||
}
|
||||
.login-dialog-banner { color: darken($_gdm_fg,10%); }
|
||||
.login-dialog-banner-view { max-width: $_gdm_dialog_width; }
|
||||
.login-dialog-message { text-align: center; }
|
||||
.login-dialog-user-selection-box { padding: 100px 0px; }
|
||||
|
||||
.login-dialog-not-listed-label {
|
||||
@include fontsize($base_font_size);
|
||||
font-weight: bold;
|
||||
color: darken($_gdm_fg,30%);
|
||||
padding: $base_padding*2;
|
||||
|
||||
.login-dialog-not-listed-button:focus &,
|
||||
.login-dialog-not-listed-button:hover & {
|
||||
color: $_gdm_fg;
|
||||
}
|
||||
.login-dialog-not-listed-button:focus & {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@extend %heading;
|
||||
padding: $base_padding;
|
||||
}
|
||||
|
||||
.login-dialog-not-listed-button {
|
||||
// use button styling
|
||||
@extend %button_common;
|
||||
@include button(normal, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);
|
||||
&:focus { @include button(focus, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
|
||||
&:hover { @include button(hover, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
|
||||
&:active { @include button(active, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
|
||||
|
||||
padding: 0 $base_padding;
|
||||
margin: $base_padding;
|
||||
}
|
||||
|
||||
// Authentication methods list
|
||||
.login-dialog-auth-list-view {
|
||||
-st-vfade-offset: 3em;
|
||||
}
|
||||
|
||||
.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
|
||||
.login-dialog-auth-list {
|
||||
spacing: 6px;
|
||||
spacing: $base_padding;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.login-dialog-auth-list-title {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.login-dialog-auth-list-item {
|
||||
border-radius: $base_border_radius*2;
|
||||
padding: 4px;
|
||||
border-radius: $base_border_radius * 2;
|
||||
padding: $base_margin;
|
||||
color: darken($_gdm_fg,30%);
|
||||
|
||||
&:focus, &:selected {
|
||||
|
|
@ -81,84 +129,69 @@ $_gdm_dialog_width: 23em;
|
|||
}
|
||||
|
||||
.login-dialog-auth-list-label {
|
||||
@include fontsize($base_font_size + 2);
|
||||
font-weight: bold;
|
||||
padding-left: 15px;
|
||||
|
||||
&:ltr { padding-left: 14px; text-align: left; }
|
||||
&:rtl { padding-right: 14px; text-align: right; }
|
||||
@extend %title_4;
|
||||
&:ltr { padding-left: $base_padding * 2.5; text-align: left; }
|
||||
&:rtl { padding-right: $base_padding * 2.5; text-align: right; }
|
||||
}
|
||||
|
||||
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
|
||||
|
||||
.login-dialog-user-list {
|
||||
spacing: 12px;
|
||||
// User list
|
||||
.login-dialog-user-list-view {
|
||||
width: $_gdm_dialog_width;
|
||||
-st-vfade-offset: 3em;
|
||||
|
||||
.login-dialog-user-list {
|
||||
margin: 0 $base_margin * 2; // margin to account for scrollbar
|
||||
spacing: $base_padding * 2;
|
||||
|
||||
.login-dialog-user-list-item {
|
||||
border-radius: $base_border_radius + 4px;
|
||||
padding: $base_padding;
|
||||
background-color: transparentize($_gdm_fg, .95);
|
||||
color: $_gdm_fg;
|
||||
// use button styling
|
||||
@extend %button_common;
|
||||
@include button(normal, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);
|
||||
&:selected,
|
||||
&:focus { @include button(focus, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
|
||||
&:hover { @include button(hover, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
|
||||
&:active { @include button(active, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
|
||||
|
||||
@if $is_highcontrast {
|
||||
box-shadow:inset 0 0 0 1px $hc_inset_color;;
|
||||
}
|
||||
.user-widget .user-icon {
|
||||
border: 4px solid transparent;
|
||||
border-radius: $modal_radius;
|
||||
padding: $base_padding * 1.5;
|
||||
|
||||
// create border for indicating logged in user
|
||||
.user-icon {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.login-dialog-timed-login-indicator {
|
||||
height: 2px;
|
||||
margin-top: 6px;
|
||||
background-color: darken($_gdm_fg, 30%);
|
||||
}
|
||||
|
||||
&:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
|
||||
}
|
||||
|
||||
&:expanded .login-dialog-user-list-item {
|
||||
transition-duration: 300ms;
|
||||
transition-timing-function: ease;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($_gdm_fg, .9);
|
||||
color: $_gdm_fg;
|
||||
}
|
||||
|
||||
&:selected {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
&:hover { background-color: lighten($selected_bg_color,5%); }
|
||||
margin-top: $base_padding;
|
||||
background-color: transparentize($_gdm_fg, .3);
|
||||
}
|
||||
|
||||
&:logged-in {
|
||||
.user-widget .user-icon {
|
||||
// color border for logged-in user
|
||||
.user-icon {
|
||||
border-color: $selected_bg_color;
|
||||
StIcon {
|
||||
background-color: transparentize($selected_bg_color, .7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-prompt-layout {
|
||||
spacing: $base_padding*2;
|
||||
width: 26em;
|
||||
}
|
||||
|
||||
.login-dialog-prompt-entry {
|
||||
@extend %system_entry;
|
||||
}
|
||||
|
||||
|
||||
/* Screen Shield */
|
||||
// a.k.a. the lockscreen
|
||||
|
||||
// Screen Shield
|
||||
// a.k.a. the lockscreen, uses transparent styles
|
||||
.unlock-dialog {
|
||||
background-color: transparent;
|
||||
|
||||
// %system_entry style override to have neutral focus color with wallpaper background
|
||||
.login-dialog-prompt-entry {
|
||||
&:focus { @include entry(focus, $c:$system_fg_color, $fc:transparentize($system_fg_color, 0.5));}
|
||||
@extend %lockscreen_entry;
|
||||
}
|
||||
|
||||
.button,
|
||||
.icon-button {
|
||||
@extend %lockscreen_button;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -178,7 +211,7 @@ $_gdm_dialog_width: 23em;
|
|||
|
||||
.unlock-dialog-clock-time {
|
||||
@extend %numeric;
|
||||
@include fontsize(72);
|
||||
@include fontsize(72pt);
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
|
|
@ -189,8 +222,8 @@ $_gdm_dialog_width: 23em;
|
|||
|
||||
.unlock-dialog-clock-hint {
|
||||
margin-top: 2em;
|
||||
padding: $base_padding $base_padding*3;
|
||||
border-radius: $base_border_radius*2;
|
||||
padding: $base_padding $base_padding * 3;
|
||||
border-radius: $base_border_radius * 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -205,8 +238,8 @@ $_gdm_dialog_width: 23em;
|
|||
}
|
||||
|
||||
.unlock-dialog-notifications-container {
|
||||
margin: 12px;
|
||||
spacing: 6px;
|
||||
margin: $base_margin * 3;
|
||||
spacing: $base_padding;
|
||||
width: $_gdm_dialog_width;
|
||||
background-color: transparent;
|
||||
|
||||
|
|
@ -217,7 +250,7 @@ $_gdm_dialog_width: 23em;
|
|||
|
||||
.notification,
|
||||
.unlock-dialog-notification-source {
|
||||
padding: 12px 16px;
|
||||
padding: $base_margin * 3 $base_margin * 4;
|
||||
border: none;
|
||||
background-color: transparentize($_gdm_fg,0.9);
|
||||
color: $_gdm_fg;
|
||||
|
|
@ -227,49 +260,57 @@ $_gdm_dialog_width: 23em;
|
|||
}
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-icon {
|
||||
icon-size: $large_icon_size;
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-label {
|
||||
padding-left: 12px;
|
||||
padding-left: $base_padding * 2;
|
||||
padding-right: 0;
|
||||
&:rtl { padding-right: 12px; padding-left: 0; }
|
||||
&:rtl { padding-right: $base_padding * 2; padding-left: 0; }
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-count-text {
|
||||
font-weight: bold;
|
||||
padding: 0 12px;
|
||||
padding: 0 $base_padding * 2;
|
||||
color: $_gdm_fg;
|
||||
background-color: transparentize($_gdm_fg, 0.9);
|
||||
border-radius: 99px;
|
||||
background-color: transparentize($_gdm_fg, .9);
|
||||
border-radius: $forced_circular_radius;
|
||||
}
|
||||
|
||||
|
||||
// User Widget
|
||||
.user-widget {
|
||||
.login-dialog,
|
||||
.unlock-dialog {
|
||||
|
||||
// User Widget
|
||||
.user-widget {
|
||||
|
||||
// common
|
||||
.user-widget-label {
|
||||
color: $_gdm_fg;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
background-color: transparentize($_gdm_fg, .87);
|
||||
color: $_gdm_fg;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
background-color: transparentize($_gdm_fg, .7);
|
||||
box-shadow:inset 0 0 0 1px $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
// layout of the user list
|
||||
&.horizontal {
|
||||
spacing: $base_padding*3;
|
||||
spacing: $base_padding * 3;
|
||||
.user-widget-label {
|
||||
@extend %title_3;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
& StIcon {
|
||||
padding: 12px;
|
||||
icon-size: $base_icon_size*2;
|
||||
width: $base_icon_size*3;
|
||||
height: $base_icon_size*3;
|
||||
background-color: transparentize($_gdm_fg, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// layout of the login prompt
|
||||
&.vertical {
|
||||
spacing: $base_padding*4;
|
||||
spacing: $base_padding * 4;
|
||||
|
||||
.user-widget-label {
|
||||
@extend %title_1;
|
||||
|
|
@ -278,12 +319,11 @@ $_gdm_dialog_width: 23em;
|
|||
}
|
||||
|
||||
.user-icon {
|
||||
icon-size: $base_icon_size*10;
|
||||
icon-size: $base_icon_size * 10;
|
||||
|
||||
& StIcon {
|
||||
padding: 32px;
|
||||
icon-size: $base_icon_size*4;
|
||||
background-color: transparentize($_gdm_fg, 0.9);
|
||||
padding: $base_padding * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
|
||||
border-radius: $modal_radius;
|
||||
margin-top: $base_margin;
|
||||
border-top-width: 0;
|
||||
border: 2px solid transparent;
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border: 2px solid $hc_inset_color;
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
background-color: $osd_bg_color;
|
||||
box-shadow:none;
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
.lg-toolbar-button {
|
||||
@extend %osd_button;
|
||||
padding: $base_padding $base_padding*2;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
|
||||
& > StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
|
@ -41,9 +41,9 @@
|
|||
|
||||
.notebook-tab {
|
||||
@extend %osd_button;
|
||||
-natural-hpadding: $base_padding*2;
|
||||
-minimum-hpadding: $base_padding*2;
|
||||
padding: $base_padding $base_padding*2;
|
||||
-natural-hpadding: $base_padding * 2;
|
||||
-minimum-hpadding: $base_padding * 2;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
}
|
||||
|
||||
StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
StEntry {
|
||||
@extend %osd_entry;
|
||||
min-height: 22px;
|
||||
min-height: to_em(22px);
|
||||
}
|
||||
|
||||
.shell-link {
|
||||
|
|
@ -97,8 +97,7 @@
|
|||
}
|
||||
|
||||
.lg-extension {
|
||||
padding: $base_padding*2;
|
||||
@include card;
|
||||
@extend %card;
|
||||
}
|
||||
|
||||
.lg-extension-name {
|
||||
|
|
|
|||
|
|
@ -12,36 +12,37 @@
|
|||
|
||||
.message-list-placeholder {
|
||||
@extend %title_2;
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
color: transparentize($fg_color, .75);
|
||||
@if $contrast == 'high' {
|
||||
color: transparentize($fg_color, .5);
|
||||
}
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: $base_icon_size*3; // 48px
|
||||
margin-bottom: $base_margin*3;
|
||||
icon-size: 96px; // non-em asset size
|
||||
margin-bottom: $base_margin * 3;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-list-sections {
|
||||
spacing: $base_padding;
|
||||
margin: 0;
|
||||
padding-bottom: $base_padding;
|
||||
|
||||
// to account for scrollbar
|
||||
&:ltr {margin-right: $base_margin * 3; }
|
||||
&:rtl {margin-left: $base_margin * 3;}
|
||||
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
|
||||
.message-list-section,
|
||||
.message-list-section-list {
|
||||
spacing: $base_padding;
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
|
||||
// do-not-disturb + clear button
|
||||
.message-list-controls {
|
||||
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
|
||||
padding: $base_padding;
|
||||
padding: $base_padding * 2;
|
||||
padding-bottom: $base_padding;
|
||||
spacing: $base_padding;
|
||||
@extend %heading;
|
||||
|
||||
|
|
@ -62,73 +63,112 @@
|
|||
|
||||
// message bubbles
|
||||
.message {
|
||||
@include card;
|
||||
@extend %card;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: $modal_radius;
|
||||
|
||||
// icon container
|
||||
.message-icon-bin {
|
||||
padding: ($base_padding * 3);
|
||||
// subtract side padding to accommodate the close button's border
|
||||
&:ltr { padding-right:-2px; };
|
||||
&:rtl { padding-left:-2px; };
|
||||
|
||||
&:ltr {padding-right:$base_padding;}
|
||||
&:rtl {padding-left:$base_padding;}
|
||||
// message header
|
||||
.message-header {
|
||||
padding: 0 $scaled_padding;
|
||||
margin: $base_padding;
|
||||
margin-bottom: 0;
|
||||
spacing: $base_padding;
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: $large_icon_size; // 32px
|
||||
// header source icon
|
||||
.message-source-icon {
|
||||
icon-size: $scalable_icon_size; // 16px
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
// fallback
|
||||
> .fallback-app-icon {
|
||||
width: $base_icon_size;
|
||||
height: $base_icon_size;
|
||||
}
|
||||
}
|
||||
// box that contains the source icon, source name and timestamp of the message
|
||||
.message-header-content {
|
||||
spacing: $base_padding;
|
||||
min-height: to_em(24px);
|
||||
padding-bottom: $base_padding;
|
||||
|
||||
// content
|
||||
.message-content {
|
||||
spacing: 4px;
|
||||
padding: ($base_padding*1.5);
|
||||
margin-bottom: $base_margin*2;
|
||||
}
|
||||
|
||||
// title
|
||||
.message-title {
|
||||
// header source title
|
||||
.message-source-title {
|
||||
font-weight: bold;
|
||||
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
|
||||
padding-top: 0.57em;
|
||||
}
|
||||
|
||||
// secondary container in title box
|
||||
.message-secondary-bin {
|
||||
padding: 0 $base_margin * 2;
|
||||
|
||||
// notification time stamp
|
||||
> .event-time {
|
||||
color: transparentize($fg_color, 0.5);
|
||||
@include fontsize($base_font_size - 2);
|
||||
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
|
||||
padding-bottom: 0.13em;
|
||||
// Time label
|
||||
.event-time {
|
||||
@extend %caption;
|
||||
color: $insensitive_fg_color;
|
||||
// Add bottom padding to align the app name with the time horizontally
|
||||
padding-bottom: to_em(1px);
|
||||
|
||||
&:ltr { text-align: right };
|
||||
&:rtl { text-align: left };
|
||||
}
|
||||
}
|
||||
|
||||
// close button
|
||||
// buttons in the message header
|
||||
.message-expand-button,
|
||||
.message-close-button {
|
||||
@extend .icon-button;
|
||||
color: $fg_color;
|
||||
background-color: transparentize($fg_color, 0.8);
|
||||
border-radius: 99px;
|
||||
padding: $base_padding - 1px;
|
||||
margin: 1px;
|
||||
&:hover {background-color: transparentize($fg_color, 0.7);}
|
||||
&:active {background-color: transparentize($fg_color, 0.8);}
|
||||
|
||||
> StIcon { icon-size: $base_icon_size; }
|
||||
background-color: transparentize($fg_color, .9);
|
||||
padding: 4px;
|
||||
&:hover { background-color: transparentize($fg_color, .81);}
|
||||
&:active,
|
||||
&:active:hover { background-color: transparentize($fg_color, .76);}
|
||||
&:insensitive { background-color: transparentize($fg_color, .93);}
|
||||
}
|
||||
|
||||
// body
|
||||
.message-body {color: darken($fg_color, 10%);}
|
||||
.message-expand-button {
|
||||
padding: 6px;
|
||||
&:ltr { margin-right: $base_padding; }
|
||||
&:rtl { margin-left: $base_padding; }
|
||||
}
|
||||
}
|
||||
|
||||
// container for message contents
|
||||
.message-box {
|
||||
padding: $base_padding;
|
||||
margin: $base_padding;
|
||||
margin-top: 0;
|
||||
spacing: $base_padding;
|
||||
|
||||
// icon of the message
|
||||
.message-icon {
|
||||
&:ltr { margin-right:$base_padding;}
|
||||
&:rtl { margin-left:$base_padding;}
|
||||
|
||||
// icon size and color
|
||||
icon-size: $base_icon_size * 3; // 48px
|
||||
-st-icon-style: symbolic;
|
||||
|
||||
&.message-themed-icon {
|
||||
border-radius: $forced_circular_radius; // is circular
|
||||
background-color: transparentize($fg_color, 0.8);
|
||||
icon-size: $base_icon_size;
|
||||
min-width: $base_icon_size * 3;
|
||||
min-height: $base_icon_size * 3;
|
||||
}
|
||||
}
|
||||
|
||||
// If the header isn't displayed we need more top margin
|
||||
&:first-child {
|
||||
margin-top: $base_padding * 2;
|
||||
}
|
||||
|
||||
// text of the message
|
||||
.message-content {
|
||||
spacing: $base_margin;
|
||||
|
||||
// message title
|
||||
.message-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// URLs in messages
|
||||
|
|
@ -138,14 +178,14 @@
|
|||
|
||||
/* Media Controls */
|
||||
.message-media-control {
|
||||
padding: 0 $base_padding*3;
|
||||
margin: $base_padding*2 0;
|
||||
padding: 0 $base_padding * 3;
|
||||
border-radius: $base_border_radius;
|
||||
color: $fg_color;
|
||||
border: 1px solid transparent;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border: 1px solid $hc_inset_color;
|
||||
margin: $base_padding*2 2px;
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
margin: $base_padding * 2 2px;
|
||||
}
|
||||
|
||||
// colors are lightened since the media controls are in a card
|
||||
|
|
@ -161,30 +201,22 @@
|
|||
|
||||
&:insensitive {
|
||||
color: lighten($insensitive_fg_color, 5%);
|
||||
@if $is_highcontrast {
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// fix margin for last button
|
||||
&:last-child:ltr { margin-right: $base_margin*3; }
|
||||
&:last-child:rtl { margin-left: $base_margin*3; }
|
||||
|
||||
& StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
// album-art
|
||||
.media-message-cover-icon {
|
||||
icon-size: $base_icon_size*3 !important; // 48px
|
||||
border-radius: $base_border_radius;
|
||||
.media-message {
|
||||
// album-art
|
||||
.message-icon {
|
||||
border-radius: $base_border_radius !important;
|
||||
|
||||
// when there is no artwork
|
||||
&.fallback {
|
||||
color: darken($fg_color, 17%);
|
||||
background-color: $bg_color;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $base_border_radius;
|
||||
&.message-themed-icon {
|
||||
icon-size: $large_icon_size !important; // 32px
|
||||
padding: ($base_padding*2 + 2); // 16px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,21 +7,21 @@
|
|||
// User icon
|
||||
.user-icon {
|
||||
background-size: contain;
|
||||
border-radius: $forced_circular_radius;
|
||||
icon-size: $base_icon_size * 4;
|
||||
|
||||
background-color: transparentize($osd_fg_color,0.95);
|
||||
color: $osd_fg_color;
|
||||
border-radius: 99px;
|
||||
icon-size: $base_icon_size * 4; // 64px
|
||||
|
||||
& StIcon {
|
||||
background-color: transparentize($osd_fg_color,0.95);
|
||||
border-radius: 99px;
|
||||
padding: $base_padding * 2 ; // 12px
|
||||
width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px;
|
||||
padding: $base_padding * 2;
|
||||
}
|
||||
|
||||
&.user-avatar {
|
||||
box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9);
|
||||
@if $is_highcontrast {
|
||||
box-shadow:inset 0 0 0 1px $hc_inset_color;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,50 +11,15 @@ $notification_banner_width: 34em;
|
|||
border-radius: $modal_radius;
|
||||
margin: $base_margin;
|
||||
|
||||
.notification-actions {
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
}
|
||||
|
||||
.notification-buttons-bin {
|
||||
spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-button {
|
||||
.notification-button {
|
||||
@extend %bubble_button;
|
||||
}
|
||||
}
|
||||
|
||||
// counter
|
||||
.summary-source-counter {
|
||||
font-size: $base_font_size - 1pt;
|
||||
font-weight: bold;
|
||||
height: 1.6em;
|
||||
width: 1.6em;
|
||||
-shell-counter-overlap-x: 3px;
|
||||
-shell-counter-overlap-y: 3px;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
border: 2px solid $fg_color;
|
||||
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
|
||||
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
|
||||
}
|
||||
|
||||
// chat bubbles
|
||||
.chat-body { spacing: 5px; }
|
||||
.chat-response { margin: 5px; }
|
||||
.chat-log-message { color: darken($fg_color,10%); }
|
||||
.chat-new-group { padding-top: 1em; }
|
||||
.chat-received {
|
||||
padding-left: 4px;
|
||||
&:rtl { padding-left: 0px; padding-right: 4px; }
|
||||
}
|
||||
|
||||
.chat-sent {
|
||||
padding-left: 18pt;
|
||||
color: lighten($fg_color, 15%);
|
||||
&:rtl { padding-left: 0; padding-right: 18pt; }
|
||||
}
|
||||
|
||||
.chat-meta-message {
|
||||
padding-left: 4px;
|
||||
@include fontsize($base_font_size - 2);
|
||||
font-weight: bold;
|
||||
color: lighten($fg_color,18%);
|
||||
&:rtl { padding-left: 0; padding-right: 4px; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,43 +7,45 @@ $osd_levelbar_height:6px;
|
|||
@extend %heading;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
spacing: $base_padding * 2; // 12px
|
||||
spacing: $base_padding * 2;
|
||||
padding: $base_padding * 2 $base_padding * 3;
|
||||
& > * { spacing: 8px; }
|
||||
& > * { spacing: $base_margin * 2; }
|
||||
margin-bottom: 4em;
|
||||
|
||||
StIcon { icon-size:$large_icon_size;}
|
||||
StIcon { icon-size: $large_icon_size;}
|
||||
|
||||
StLabel {
|
||||
&:ltr { margin-right: 6px; }
|
||||
&:rtl { margin-left: 6px; }
|
||||
&:ltr { margin-right: $base_padding; }
|
||||
&:rtl { margin-left: $base_padding; }
|
||||
}
|
||||
|
||||
.level {
|
||||
margin-bottom: 4px;
|
||||
&:first-child { margin-bottom: 0px; }
|
||||
margin-bottom: $base_margin;
|
||||
&:first-child { margin-bottom: 0; }
|
||||
|
||||
height: $osd_levelbar_height;
|
||||
min-width:$base_icon_size * 10;
|
||||
min-width: 160px;
|
||||
-barlevel-height: $osd_levelbar_height;
|
||||
-barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
|
||||
-barlevel-active-background-color: $osd_fg_color;
|
||||
-barlevel-overdrive-color: $destructive_color;
|
||||
-barlevel-overdrive-separator-width: 3px;
|
||||
&:ltr { margin-right: 6px; }
|
||||
&:rtl { margin-left: 6px; }
|
||||
-barlevel-overdrive-separator-width: $base_padding * 0.5;
|
||||
&:ltr { margin-right: $base_padding; }
|
||||
&:rtl { margin-left: $base_padding; }
|
||||
}
|
||||
}
|
||||
|
||||
// Monitor number label
|
||||
.osd-monitor-label {
|
||||
@extend %osd_panel;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
border-radius: $modal_radius;
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
font-feature-settings: "tnum";
|
||||
margin: $base_margin * 3;
|
||||
padding: $base_padding * 2;
|
||||
text-align: center;
|
||||
min-width: 1.3em;
|
||||
min-width: 1.5em;
|
||||
}
|
||||
|
||||
/* Pad OSD */
|
||||
|
|
|
|||
|
|
@ -9,5 +9,5 @@
|
|||
}
|
||||
|
||||
.overview-controls {
|
||||
padding-bottom: 32px;
|
||||
padding-bottom: $base_margin * 8;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
/* Top Bar */
|
||||
// a.k.a. the panel
|
||||
|
||||
$privacy_indicator_color: $red_3;
|
||||
$privacy_indicator_color: if($variant == 'light', $orange_4, $red_3);
|
||||
$recording_indicator_color: $red_3;
|
||||
|
||||
$panel_bg_color: if($variant == 'light', $light_3, $dark_4);
|
||||
$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%));
|
||||
$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color);
|
||||
$transparent_panel_fg_color: $light_1; // always white for transparent lock screens
|
||||
$system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview
|
||||
|
||||
$panel_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels
|
||||
$panel_height: 2.2em;
|
||||
$panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
|
||||
|
|
@ -17,44 +16,49 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
|||
height: $panel_height;
|
||||
@extend %numeric;
|
||||
transition-duration: $panel_transition_duration;
|
||||
box-shadow: inset 0 -1px 0 0 $panel_border_color;
|
||||
|
||||
// panel menus
|
||||
.panel-button {
|
||||
@include panel_button($bg: $panel_fg_color, $border_radius: 3px);
|
||||
@include panel_button();
|
||||
-natural-hpadding: 6px;
|
||||
-minimum-hpadding: 4px;
|
||||
|
||||
// status area icons
|
||||
.system-status-icon {
|
||||
icon-size: $base_icon_size;
|
||||
padding: ($base_padding - 1px) 0px ($base_padding - 1px) 0px;
|
||||
icon-size: $scalable_icon_size;
|
||||
padding: 0;
|
||||
margin: 0 $base_margin;
|
||||
}
|
||||
|
||||
.panel-status-indicators-box .system-status-icon,
|
||||
.panel-status-menu-box .system-status-icon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// app menu icon
|
||||
.app-menu-icon {
|
||||
-st-icon-style: symbolic;
|
||||
// dimensions of the icon are hardcoded
|
||||
}
|
||||
|
||||
// reduce margin between icons in combined menu
|
||||
.panel-status-menu-box,
|
||||
.panel-status-indicators-box {
|
||||
spacing: $base_margin;
|
||||
|
||||
> .system-status-icon {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&#panelActivities {
|
||||
-natural-hpadding: 10px;
|
||||
-minimum-hpadding: 8px;
|
||||
|
||||
& StBoxLayout {
|
||||
padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion
|
||||
spacing: 5px;
|
||||
}
|
||||
|
||||
& .workspace-dot {
|
||||
border-radius: 999px;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
border-radius: $forced_circular_radius;
|
||||
min-width: $scalable_icon_size * 0.5;
|
||||
min-height: $scalable_icon_size * 0.5;
|
||||
background-color: $panel_fg_color;
|
||||
}
|
||||
}
|
||||
|
|
@ -63,11 +67,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
|||
&.screen-recording-indicator,
|
||||
&.screen-sharing-indicator {
|
||||
StBoxLayout {
|
||||
spacing: $base_padding;
|
||||
spacing: $scaled_padding;
|
||||
}
|
||||
|
||||
StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
icon-size: $scalable_icon_size;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 3px;
|
||||
|
|
@ -76,11 +80,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
|||
}
|
||||
|
||||
&.screen-recording-indicator {
|
||||
@include panel_button($screenshot_ui_button_red, $flat: false);
|
||||
@include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled);
|
||||
}
|
||||
|
||||
&.screen-sharing-indicator {
|
||||
@include panel_button($privacy_indicator_color, $flat: false);
|
||||
@include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled);
|
||||
}
|
||||
|
||||
// clock
|
||||
|
|
@ -88,7 +92,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
|||
// The clock display needs to have the background on .clock because
|
||||
// we want to exclude the do-not-disturb indicator from the background
|
||||
// see _drawing.scss for override details
|
||||
@include panel_button($highlighted_child: true, $child_class:".clock", $border_radius: 3px);
|
||||
@include panel_button($highlighted_child: true, $child_class: '.clock');
|
||||
-natural-hpadding: 0px;
|
||||
-minimum-hpadding: 0px;
|
||||
padding-left: 0px;
|
||||
|
|
@ -97,45 +101,66 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
|||
.clock {
|
||||
// the highlighted child
|
||||
}
|
||||
|
||||
.messages-indicator {
|
||||
icon-size: $scalable_icon_size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// transparent panel on lock & login screens
|
||||
// transparent panel on overview, lock & login screens
|
||||
&:overview,
|
||||
&.unlock-screen,
|
||||
&.login-screen,
|
||||
&:overview {
|
||||
&.login-screen {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
// unfortunate duplication to keep indicator style in these states
|
||||
.panel-button {
|
||||
@include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $border_radius: 3px);
|
||||
&.screen-recording-indicator {
|
||||
@include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled);
|
||||
}
|
||||
|
||||
&.screen-sharing-indicator {
|
||||
@include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// use transparent text styles for lock & login screen panels
|
||||
&.unlock-screen,
|
||||
&.login-screen {
|
||||
.panel-button {
|
||||
@include panel_button($fg:$transparent_panel_fg_color);
|
||||
|
||||
// clock
|
||||
&.clock-display {
|
||||
@include panel_button($fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class: '.clock');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// use system text styles for overview panel
|
||||
&:overview {
|
||||
.panel-button {
|
||||
@include panel_button($fg:$system_panel_fg_color);
|
||||
|
||||
&#panelActivities .workspace-dot {
|
||||
background-color: $panel_system_fg_color;
|
||||
background-color: $system_panel_fg_color;
|
||||
}
|
||||
|
||||
// clock
|
||||
&.clock-display {
|
||||
@include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $highlighted_child: true, $child_class:".clock");
|
||||
}
|
||||
|
||||
// unfortunate duplication so these indicators have styles
|
||||
&.screen-recording-indicator {
|
||||
@include panel_button($screenshot_ui_button_red, $flat: false);
|
||||
}
|
||||
|
||||
&.screen-sharing-indicator {
|
||||
@include panel_button($privacy_indicator_color, $flat: false);
|
||||
@include panel_button($fg:$system_panel_fg_color, $highlighted_child: true, $child_class: '.clock');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-status-indicators-box {
|
||||
spacing: 2px;
|
||||
padding-right: 2px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.panel-status-indicators-box,
|
||||
.panel-status-menu-box {
|
||||
spacing: 2px;
|
||||
}
|
||||
|
|
@ -158,13 +183,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
|||
|
||||
// App Menu
|
||||
#appMenu {
|
||||
spacing: $base_padding;
|
||||
spacing: $scaled_padding;
|
||||
.label-shadow { color: transparent; }
|
||||
}
|
||||
|
||||
#appMenu .panel-status-menu-box {
|
||||
padding: 0 $base_padding;
|
||||
spacing: $base_padding;
|
||||
padding: 0 $scaled_padding;
|
||||
spacing: $scaled_padding;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
|
||||
$menu_bg_color: $bg_color;
|
||||
$menuitem_bg_color: lighten($menu_bg_color, 4%);
|
||||
$menuitem_border_radius: $base_border_radius*1.5;
|
||||
$menuitem_border_radius: $base_border_radius * 1.5;
|
||||
|
||||
$submenu_bg_color: lighten($menu_bg_color, 7%);
|
||||
|
||||
// the popover itself
|
||||
.popup-menu-boxpointer {
|
||||
-arrow-rise: $base_margin+2px; // distance from the panel & screen edge
|
||||
-arrow-rise: $base_padding; // distance from the panel & screen edge
|
||||
}
|
||||
|
||||
// container of the popover menu
|
||||
|
|
@ -26,7 +26,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
|
|||
.popup-menu-content {
|
||||
padding: $base_padding;
|
||||
background-color: $bg_color;
|
||||
border-radius: $modal_radius*1.25;
|
||||
border-radius: $modal_radius * 1.25;
|
||||
border: 1px solid $outer_borders_color;
|
||||
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
|
|||
&:checked {
|
||||
border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important;
|
||||
|
||||
@if $is_highcontrast {
|
||||
@if $contrast == 'high' {
|
||||
border: 1px solid $hc_inset_color;
|
||||
border-bottom-width:0;
|
||||
}
|
||||
|
|
@ -67,22 +67,23 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
|
|||
// symbolic icons in popover
|
||||
.popup-menu-arrow,
|
||||
.popup-menu-icon {
|
||||
icon-size: 16px !important; // for some reason the variable doesn't work here
|
||||
icon-size: $scalable_icon_size;
|
||||
}
|
||||
|
||||
// popover submenus
|
||||
.popup-sub-menu {
|
||||
border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px;
|
||||
margin-bottom: $base_padding;
|
||||
border: 1px solid transparent;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border: 1px solid $hc_inset_color;
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
|
||||
// submenu specific styles
|
||||
.popup-menu-item {
|
||||
border-radius: 0;
|
||||
@include menuitem($bg:$submenu_bg_color, $flat:false);
|
||||
@include menuitem($bg:$submenu_bg_color);
|
||||
border-top-width:0;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -103,8 +104,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
|
|||
|
||||
// container for radio and check boxes
|
||||
.popup-menu-ornament {
|
||||
icon-size: $base_icon_size !important;
|
||||
width: $base_icon_size;
|
||||
icon-size: $scalable_icon_size !important;
|
||||
width: $scalable_icon_size;
|
||||
}
|
||||
|
||||
// separator
|
||||
|
|
@ -144,8 +145,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
|
|||
// "Open Windows" label
|
||||
> StLabel {
|
||||
@extend %caption_heading;
|
||||
&:ltr {margin-right: $base_margin*2;}
|
||||
&:rtl {margin-left: $base_margin*2;}
|
||||
&:ltr {margin-right: $base_margin * 2;}
|
||||
&:rtl {margin-left: $base_margin * 2;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,46 @@
|
|||
.quick-settings {
|
||||
padding: $base_padding*3;
|
||||
border-radius: $modal_radius*2.25;
|
||||
padding: $base_padding * 3;
|
||||
border-radius: $modal_radius * 2.25;
|
||||
|
||||
.icon-button, .button {
|
||||
padding: $base_padding*1.75;
|
||||
padding: $base_padding * 1.75;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-settings-grid {
|
||||
spacing-rows: $base_padding*2;
|
||||
spacing-columns: $base_padding*2;
|
||||
spacing-rows: $base_padding * 2;
|
||||
spacing-columns: $base_padding * 2;
|
||||
}
|
||||
|
||||
.quick-toggle, .quick-menu-toggle {
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
min-width: 12em;
|
||||
max-width: 12em;
|
||||
min-height: 48px;
|
||||
min-height: $scalable_icon_size * 3; // use icon size so the button scales
|
||||
border:none;
|
||||
}
|
||||
|
||||
.quick-toggle {
|
||||
&:checked { @include button(default, $c:$selected_bg_color); }
|
||||
background-color: none;
|
||||
&:checked { @extend %default_button;}
|
||||
|
||||
& > StBoxLayout { spacing: $base_padding*1.5; }
|
||||
& > StBoxLayout { spacing: $base_padding * 1.5; }
|
||||
|
||||
/* Move padding into the box; this is to allow menu arrows
|
||||
to extend to the border */
|
||||
&.button { padding: 0; }
|
||||
& > StBoxLayout { padding: 0 $base_padding*2; }
|
||||
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
|
||||
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
|
||||
& > StBoxLayout { padding: 0 $base_padding * 2; }
|
||||
&:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
|
||||
&:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
|
||||
|
||||
.quick-toggle-title { font-weight: bold; }
|
||||
|
||||
& StBoxLayout > .quick-toggle-subtitle {
|
||||
@extend %caption;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quick-toggle-icon { icon-size: $base_icon_size; }
|
||||
.quick-toggle-icon { icon-size: $scalable_icon_size; }
|
||||
}
|
||||
|
||||
.quick-menu-toggle {
|
||||
|
|
@ -47,31 +48,31 @@
|
|||
min-width: auto;
|
||||
max-width: auto;
|
||||
|
||||
&:ltr { border-radius: 99px 0 0 99px; }
|
||||
&:ltr > StBoxLayout { padding-right: $base_padding*1.5; }
|
||||
&:rtl { border-radius: 0 99px 99px 0; }
|
||||
&:rtr > StBoxLayout { padding-left: $base_padding*1.5; }
|
||||
&:ltr { border-radius: $forced_circular_radius 0 0 $forced_circular_radius; }
|
||||
&:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
|
||||
&:rtl { border-radius: 0 $forced_circular_radius $forced_circular_radius 0; }
|
||||
&:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
|
||||
|
||||
&:ltr:last-child { border-radius: 99px; }
|
||||
&:rtl:last-child { border-radius: 99px; }
|
||||
&:ltr:last-child { border-radius: $forced_circular_radius; }
|
||||
&:rtl:last-child { border-radius: $forced_circular_radius; }
|
||||
}
|
||||
|
||||
& .quick-toggle-arrow {
|
||||
padding: $base_padding $base_padding*1.75;
|
||||
padding: $scaled_padding $scaled_padding * 1.75;
|
||||
border-width: 0;
|
||||
border-color: transparentize($fg_color, .75);
|
||||
|
||||
&:checked {
|
||||
@include button(default, $c:$selected_bg_color);
|
||||
@extend %default_button;
|
||||
border-color: $selected_borders_color;
|
||||
}
|
||||
|
||||
&:ltr {
|
||||
border-radius: 0 99px 99px 0;
|
||||
border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
&:rtl {
|
||||
border-radius: 99px 0 0 99px;
|
||||
border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -84,33 +85,36 @@
|
|||
|
||||
.slider-bin {
|
||||
&:focus {@include button(focus);}
|
||||
min-height: 16px; // slider size
|
||||
padding: $base_padding;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-toggle-menu {
|
||||
@include card;
|
||||
@extend %card;
|
||||
|
||||
// override some card styles
|
||||
background-color: $bg_color !important;
|
||||
color: $fg_color !important;
|
||||
&:insensitive {
|
||||
// override insensitive style on submenu
|
||||
@include button(normal);
|
||||
}
|
||||
|
||||
border-radius: $base_border_radius*3;
|
||||
padding: $base_padding*2;
|
||||
margin: $base_padding*2 $base_padding*3 0;
|
||||
border-radius: $base_border_radius * 3;
|
||||
|
||||
.popup-menu-item > StIcon { -st-icon-style: symbolic; }
|
||||
margin: $base_padding * 2 $base_padding * 3 0;
|
||||
|
||||
.popup-menu-item > StIcon {
|
||||
-st-icon-style: symbolic;
|
||||
icon-size: $scalable_icon_size;
|
||||
}
|
||||
|
||||
& .header {
|
||||
spacing-rows: 0.5 * $base_padding;
|
||||
spacing-columns: $base_padding*2;
|
||||
padding-bottom: 2 * $base_padding;
|
||||
spacing-rows: $base_padding * 0.5;
|
||||
spacing-columns: $base_padding * 2;
|
||||
padding-bottom: $base_padding * 2;
|
||||
|
||||
& .icon {
|
||||
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
|
||||
border-radius: 999px;
|
||||
icon-size: $medium_scalable_icon_size;
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: 1.5 * $base_padding;
|
||||
background-color: transparentize($fg_color, 0.8);
|
||||
|
||||
|
|
@ -118,6 +122,14 @@
|
|||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
// draw hc outline
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset();
|
||||
&.active {
|
||||
@include draw_hc_inset($no_inset: true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .title {
|
||||
|
|
@ -134,7 +146,7 @@
|
|||
}
|
||||
|
||||
.quick-settings-system-item {
|
||||
& > StBoxLayout { spacing: 2 * $base_padding; }
|
||||
& > StBoxLayout { spacing: $base_padding * 2; }
|
||||
|
||||
& .power-item {
|
||||
min-height: 0;
|
||||
|
|
@ -148,7 +160,7 @@
|
|||
}
|
||||
|
||||
.nm-network-item {
|
||||
.wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
|
||||
.wireless-secure-icon { icon-size: $scalable_icon_size * 0.5; } // half-size symbolic
|
||||
}
|
||||
|
||||
.bt-device-item {
|
||||
|
|
@ -164,23 +176,19 @@
|
|||
|
||||
.device-subtitle { color: transparentize($fg_color, 0.5); }
|
||||
|
||||
.keyboard-brightness-item .slider {
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
.keyboard-brightness-level {
|
||||
spacing: $base_padding;
|
||||
|
||||
.button:checked { @include button(default, $c:$selected_bg_color); }
|
||||
.button:checked { @extend %default_button; }
|
||||
}
|
||||
|
||||
// background apps
|
||||
|
||||
.background-apps-quick-toggle {
|
||||
min-height: 40px;
|
||||
min-height: to_em(40px);
|
||||
background-color: transparent;
|
||||
|
||||
& StIcon { icon-size: $base_icon_size !important; }
|
||||
& StIcon { icon-size: $scalable_icon_size !important; }
|
||||
}
|
||||
|
||||
.background-app-item {
|
||||
|
|
@ -190,9 +198,14 @@
|
|||
icon-size: $large_icon_size !important;
|
||||
-st-icon-style: regular !important;
|
||||
}
|
||||
& .close-button {
|
||||
@extend .icon-button;
|
||||
& .icon-button {
|
||||
padding: $base_padding;
|
||||
|
||||
// override some background colors since it's a button on an already styled background
|
||||
// FIXME: may need a generic drawing method for button in menu item in future
|
||||
background-color: transparentize($fg_color, 0.87);
|
||||
&:hover { background-color: transparentize($fg_color, 0.78);}
|
||||
&:active { background-color: transparentize($fg_color, 0.69);}
|
||||
}
|
||||
& .spinner {
|
||||
padding: $base_padding;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,15 @@
|
|||
// Screenshot UI
|
||||
.icon-label-button-container {
|
||||
spacing: $base_padding;
|
||||
@extend %caption;
|
||||
|
||||
StIcon { icon-size: 32px;}
|
||||
}
|
||||
|
||||
$screenshot_ui_panel_padding: $base_padding*3;
|
||||
$screenshot_ui_shot_cast_margin: 21px;
|
||||
$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
|
||||
$screenshot_ui_shot_cast_spacing: 3px;
|
||||
|
||||
$screenshot_ui_button_red: $error_color;
|
||||
$screenshot_ui_panel_padding: $base_padding * 3;
|
||||
$screenshot_ui_panel_border_radius: $modal_radius * 2;
|
||||
$screenshot_ui_button_red: $red_4;
|
||||
|
||||
.screenshot-ui-panel {
|
||||
@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;
|
||||
padding-bottom: $screenshot_ui_panel_padding - $base_padding;
|
||||
margin-bottom: 4em;
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
|
|
@ -26,36 +17,43 @@ $screenshot_ui_button_red: $error_color;
|
|||
.screenshot-ui-close-button {
|
||||
@extend .window-close; // copy window close button
|
||||
padding: $base_padding !important; // but with more padding
|
||||
margin-top: 12px;
|
||||
margin-top: $base_margin * 3;
|
||||
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||
&.left { margin-left: 12px;}
|
||||
&.right { margin-right: 12px;}
|
||||
&.left { margin-left: $base_margin * 3;}
|
||||
&.right { margin-right: $base_margin * 3;}
|
||||
}
|
||||
|
||||
.screenshot-ui-type-button {
|
||||
@extend %osd_button_flat;
|
||||
min-width: 48px;
|
||||
padding: $base_padding * 2 $base_padding * 3 !important;
|
||||
padding: $base_padding * 2 $base_padding * 3;
|
||||
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
|
||||
|
||||
.icon-label-button-container {
|
||||
@extend %caption;
|
||||
spacing: $scaled_padding;
|
||||
|
||||
> StIcon { icon-size: $large_icon_size;}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-ui-capture-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 99px;
|
||||
width: $large_icon_size;
|
||||
height: $large_icon_size;
|
||||
border-radius: $forced_circular_radius;
|
||||
border: 4px $osd_fg_color;
|
||||
padding: 4px;
|
||||
padding: $base_margin;
|
||||
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: $osd_fg_color;
|
||||
transition-duration: 200ms;
|
||||
&:hover, &:focus { background-color: $hover_bg_color;}
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: darken($osd_fg_color, 15%);
|
||||
background-color: darken($osd_fg_color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -84,32 +82,36 @@ $screenshot_ui_button_red: $error_color;
|
|||
|
||||
.screenshot-ui-shot-cast-container {
|
||||
background-color: transparentize($osd_fg_color,0.9);
|
||||
border-radius: $modal_radius;
|
||||
padding: $screenshot_ui_shot_cast_spacing;
|
||||
spacing: $screenshot_ui_shot_cast_spacing;
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: $base_padding * 0.5;
|
||||
spacing: $base_padding * 0.5;
|
||||
|
||||
&:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
|
||||
&:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
}
|
||||
|
||||
// non-standard button style
|
||||
.screenshot-ui-shot-cast-button {
|
||||
padding: $base_padding $base_padding*2;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
background-color: transparent;
|
||||
border-radius: $forced_circular_radius;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
@include draw_hc_inset();
|
||||
}
|
||||
|
||||
> StIcon { icon-size: $base_icon_size;}
|
||||
|
||||
&:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);}
|
||||
&:active { background-color: transparentize($osd_fg_color, .5);}
|
||||
&:checked { background-color: $osd_fg_color; color: $osd_bg_color;}
|
||||
&:insensitive { color: transparentize($osd_fg_color, 0.5);}
|
||||
|
||||
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
|
||||
|
||||
StIcon { icon-size: $base_icon_size;}
|
||||
}
|
||||
|
||||
.screenshot-ui-show-pointer-button {
|
||||
@extend %osd_button_flat;
|
||||
border-radius: 99px;
|
||||
padding: $base_padding * 2 !important;
|
||||
StIcon { icon-size: $base_icon_size;}
|
||||
@extend .icon-button;
|
||||
}
|
||||
|
||||
.screenshot-ui-area-indicator-shade {
|
||||
|
|
@ -127,15 +129,15 @@ $screenshot_ui_button_red: $error_color;
|
|||
}
|
||||
|
||||
.screenshot-ui-area-selector-handle {
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 3px 2px $shadow_color;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: $medium_icon_size;
|
||||
height: $medium_icon_size;
|
||||
}
|
||||
|
||||
.screenshot-ui-window-selector {
|
||||
background-color: $system_bg_color;
|
||||
background-color: $system_base_color;
|
||||
|
||||
.screenshot-ui-window-selector-window-container {
|
||||
margin: 100px;
|
||||
|
|
@ -158,9 +160,9 @@ $screenshot_ui_button_red: $error_color;
|
|||
.screenshot-ui-window-selector-check {
|
||||
transition-duration: 200ms;
|
||||
color: transparent;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
border-width: 12px;
|
||||
icon-size: 24px;
|
||||
icon-size: $medium_icon_size;
|
||||
}
|
||||
|
||||
.screenshot-ui-window-selector-window {
|
||||
|
|
@ -197,5 +199,5 @@ $screenshot_ui_button_red: $error_color;
|
|||
.screenshot-ui-tooltip {
|
||||
@extend %tooltip;
|
||||
text-align: center;
|
||||
-y-offset: 24px;
|
||||
-y-offset: $base_margin * 6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
// Search entry
|
||||
.search-entry {
|
||||
border-radius: 99px;
|
||||
margin-top: $base_padding*2;
|
||||
border-radius: $forced_circular_radius;
|
||||
margin-top: $base_padding * 2;
|
||||
margin-bottom: $base_padding;
|
||||
width: 24em;
|
||||
|
||||
@extend %system_entry;
|
||||
|
||||
.search-entry-icon {
|
||||
icon-size: $base_icon_size;
|
||||
icon-size: $scalable_icon_size;
|
||||
margin-top: 2px; // center vertically
|
||||
padding: 0 4px;
|
||||
padding: 0 $base_margin;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@
|
|||
}
|
||||
|
||||
#searchResultsContent {
|
||||
max-width: 1072px;
|
||||
max-width: 1044px;
|
||||
}
|
||||
|
||||
// search results sections "the boxes"
|
||||
.search-section {
|
||||
// This should be equal to #searchResultsContent spacing
|
||||
spacing: $base_padding*3;
|
||||
spacing: $base_padding * 3;
|
||||
|
||||
// separator (unstyled)
|
||||
.search-section-separator {
|
||||
height: $base_margin*2; // use it as a spacer
|
||||
height: $base_margin * 2; // use it as a spacer
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -25,14 +25,19 @@
|
|||
.search-section-content {
|
||||
background-color: $system_overlay_bg_color;
|
||||
color: $system_fg_color;
|
||||
border-radius: $modal_radius*1.5;
|
||||
padding: $base_padding*2;
|
||||
margin:0 $base_margin*3;
|
||||
border-radius: $modal_radius * 1.5;
|
||||
padding: $base_padding * 2;
|
||||
margin:0 $base_margin * 3;
|
||||
border: 2px solid transparent;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
%search_section_content_item {
|
||||
@include tile_button($system_fg_color);
|
||||
border-radius: $base_border_radius+3px;
|
||||
@include tile_button($bg:$system_overlay_bg_color);
|
||||
border-radius: $base_border_radius * 1.65;
|
||||
}
|
||||
|
||||
// "no results" text
|
||||
|
|
@ -42,13 +47,13 @@
|
|||
}
|
||||
|
||||
.grid-search-results {
|
||||
spacing: $base_padding*5;
|
||||
margin:0 $base_margin*3;
|
||||
spacing: $base_padding * 5;
|
||||
margin:0 $base_margin * 3;
|
||||
}
|
||||
|
||||
// Search results with icons
|
||||
.grid-search-result {
|
||||
@extend .app-well-app;
|
||||
@extend .overview-tile;
|
||||
}
|
||||
|
||||
// search result provider
|
||||
|
|
@ -86,11 +91,18 @@
|
|||
// list item title (with leading icon)
|
||||
.list-search-result-title {
|
||||
spacing: $base_padding * 2;
|
||||
// font-weight: bold;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// list item description
|
||||
.list-search-result-description {
|
||||
color: $system_insensitive_fg_color;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
color: $system_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Slider */
|
||||
|
||||
$slider_size: 16px;
|
||||
$slider_size: $scalable_icon_size;
|
||||
|
||||
.slider {
|
||||
// slider trough
|
||||
|
|
@ -19,4 +19,9 @@ $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
|
||||
|
||||
// hc style
|
||||
@if $contrast == 'high' {
|
||||
-barlevel-background-color: transparentize($fg_color, 0.6);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/* App Switcher */
|
||||
|
||||
// same as dash
|
||||
$switcher_padding: $base_padding*2;
|
||||
|
||||
$switcher_padding: $base_padding * 2;
|
||||
$switcher_radius: $modal_radius + $switcher_padding;
|
||||
|
||||
// the full screen container of the switcher
|
||||
.switcher-popup {
|
||||
|
|
@ -14,7 +14,7 @@ $switcher_padding: $base_padding*2;
|
|||
.switcher-list {
|
||||
@extend %osd_panel;
|
||||
padding: $switcher_padding;
|
||||
border-radius: $modal_radius+$switcher_padding;
|
||||
border-radius: $switcher_radius;
|
||||
box-shadow: 0 8px 8px 0 $shadow_color;
|
||||
|
||||
// container for items in list
|
||||
|
|
@ -24,11 +24,19 @@ $switcher_padding: $base_padding*2;
|
|||
|
||||
// each item in the list
|
||||
.item-box {
|
||||
@include tile_button($osd_fg_color);
|
||||
// override over style so mouse doesn't steal focus
|
||||
@include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color);
|
||||
// override %tile style so mouse doesn't steal focus
|
||||
&:hover {background: none;}
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 0 0 0 999px transparentize($hc_inset_color,0.2);
|
||||
|
||||
// brighter than normal selected style
|
||||
&:selected {
|
||||
background-color: transparentize($osd_fg_color, 0.8);
|
||||
}
|
||||
|
||||
@if $contrast == 'high' {
|
||||
&:selected {
|
||||
background-color: transparentize($osd_fg_color, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
// these are equal to the size of the SVG assets
|
||||
$switch_height: 26px;
|
||||
$switch_width: 48px;
|
||||
$switch_width: 46px;
|
||||
|
||||
.toggle-switch {
|
||||
color: $fg_color;
|
||||
|
|
@ -13,4 +13,6 @@ $switch_width: 48px;
|
|||
&:checked {
|
||||
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
|
||||
}
|
||||
|
||||
& StIcon {icon-size: $base_icon_size;}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,10 @@
|
|||
/* Window Picker */
|
||||
|
||||
$window_picker_spacing: $base_padding; // 6px
|
||||
$window_picker_padding: $base_padding * 2; // 12px
|
||||
|
||||
$window_thumbnail_label_color: transparentize($system_bg_color, 0.4);
|
||||
|
||||
$window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02);
|
||||
$window_close_button_size: 30px;
|
||||
$window_close_button_padding: 3px;
|
||||
|
||||
// Window picker
|
||||
.window-picker {
|
||||
// Space between window thumbnails
|
||||
spacing: $window_picker_spacing;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
// Window titles
|
||||
|
|
@ -24,14 +16,19 @@ $window_close_button_padding: 3px;
|
|||
.window-close {
|
||||
background-color: $window_close_button_color;
|
||||
color: $system_fg_color;
|
||||
border-radius: 99px;
|
||||
border-radius: $forced_circular_radius;
|
||||
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||
padding: $window_close_button_padding;
|
||||
height: $window_close_button_size;
|
||||
width: $window_close_button_size;
|
||||
padding: $base_padding * 0.5;
|
||||
height: $large_icon_size;
|
||||
width: $large_icon_size;
|
||||
transition-duration: 100ms;
|
||||
border: 2px solid transparent;
|
||||
|
||||
& StIcon { icon-size: 24px; } // uses non standard icon size
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
|
||||
& StIcon { icon-size: $medium_icon_size; }
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($window_close_button_color, 7%);
|
||||
|
|
@ -41,9 +38,6 @@ $window_close_button_padding: 3px;
|
|||
background-color: lighten($window_close_button_color, 13%);
|
||||
}
|
||||
|
||||
@if $is_highcontrast {
|
||||
border:2px solid $outer_borders_color;
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-background {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Workspace Switcher */
|
||||
|
||||
$ws_indicator_height: $large_icon_size;
|
||||
$ws_indicator_height: 48px;
|
||||
$ws_dot_active: $ws_indicator_height / 3;
|
||||
$ws_dot_inactive: $ws_indicator_height / 6;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
.workspace-thumbnail {
|
||||
color: $system_fg_color;
|
||||
background-color: lighten($system_bg_color, 10%);
|
||||
border-radius: $base_border_radius*0.5;
|
||||
border-radius: $base_border_radius * 0.5;
|
||||
border: 1px solid transparent;
|
||||
|
||||
@if $is_highcontrast {
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ theme_sources = files([
|
|||
'gnome-shell-sass/widgets/_dash.scss',
|
||||
'gnome-shell-sass/widgets/_dialogs.scss',
|
||||
'gnome-shell-sass/widgets/_entries.scss',
|
||||
'gnome-shell-sass/widgets/_hotplug.scss',
|
||||
'gnome-shell-sass/widgets/_ibus-popup.scss',
|
||||
'gnome-shell-sass/widgets/_keyboard.scss',
|
||||
'gnome-shell-sass/widgets/_login-lock.scss',
|
||||
|
|
|
|||
265
patches/gnome-45.0-dark-theme.patch
Normal file
265
patches/gnome-45.0-dark-theme.patch
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
From de447719bc49c92bb8f1a04115e4533b2430a524 Mon Sep 17 00:00:00 2001
|
||||
From: Kevin MacMartin <prurigro@gmail.com>
|
||||
Date: Mon, 25 Mar 2024 13:06:47 -0400
|
||||
Subject: [PATCH] Dark theme
|
||||
|
||||
---
|
||||
...ight.scss => gnome-shell-dark-laptop.scss} | 3 +-
|
||||
data/theme/gnome-shell-dark.scss | 2 +
|
||||
data/theme/gnome-shell-high-contrast.scss | 33 -------------
|
||||
data/theme/gnome-shell-sass/_drawing.scss | 6 +--
|
||||
data/theme/gnome-shell-sass/_palette.scss | 10 ++--
|
||||
.../widgets/_corner-ripple.scss | 2 +-
|
||||
.../gnome-shell-sass/widgets/_panel.scss | 49 ++++++++++++++-----
|
||||
7 files changed, 50 insertions(+), 55 deletions(-)
|
||||
rename data/theme/{gnome-shell-light.scss => gnome-shell-dark-laptop.scss} (83%)
|
||||
delete mode 100644 data/theme/gnome-shell-high-contrast.scss
|
||||
|
||||
diff --git a/data/theme/gnome-shell-light.scss b/data/theme/gnome-shell-dark-laptop.scss
|
||||
similarity index 83%
|
||||
rename from data/theme/gnome-shell-light.scss
|
||||
rename to data/theme/gnome-shell-dark-laptop.scss
|
||||
index ae6fce7dd..e603503f6 100644
|
||||
--- a/data/theme/gnome-shell-light.scss
|
||||
+++ b/data/theme/gnome-shell-dark-laptop.scss
|
||||
@@ -1,5 +1,6 @@
|
||||
-$variant: 'light';
|
||||
+$variant: 'dark';
|
||||
|
||||
+$laptop: true;
|
||||
@import "gnome-shell-sass/_colors"; //use gtk colors
|
||||
@import "gnome-shell-sass/_drawing";
|
||||
@import "gnome-shell-sass/_common";
|
||||
diff --git a/data/theme/gnome-shell-dark.scss b/data/theme/gnome-shell-dark.scss
|
||||
index 8ee499912..294ac6463 100644
|
||||
--- a/data/theme/gnome-shell-dark.scss
|
||||
+++ b/data/theme/gnome-shell-dark.scss
|
||||
@@ -1,5 +1,7 @@
|
||||
$variant: 'dark';
|
||||
+$contrast: 'normal';
|
||||
|
||||
+$laptop: false;
|
||||
@import "gnome-shell-sass/_colors"; //use gtk colors
|
||||
@import "gnome-shell-sass/_drawing";
|
||||
@import "gnome-shell-sass/_common";
|
||||
diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss
|
||||
deleted file mode 100644
|
||||
index 00f247e73..000000000
|
||||
--- a/data/theme/gnome-shell-high-contrast.scss
|
||||
+++ /dev/null
|
||||
@@ -1,33 +0,0 @@
|
||||
-$variant: 'dark';
|
||||
-
|
||||
-@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors
|
||||
-@import "gnome-shell-sass/_drawing";
|
||||
-@import "gnome-shell-sass/_common";
|
||||
-@import "gnome-shell-sass/_widgets";
|
||||
-
|
||||
-.toggle-switch { width: 48px; }
|
||||
-.toggle-switch {
|
||||
- background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
|
||||
- &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
|
||||
-}
|
||||
-
|
||||
-//force opaque panel
|
||||
-#panel {
|
||||
- &.login-screen,
|
||||
- &.unlock-screen,
|
||||
- &:overview {
|
||||
- background-color: #000;
|
||||
- }
|
||||
-
|
||||
- .panel-button {
|
||||
- color: #fff !important;
|
||||
- }
|
||||
-}
|
||||
-
|
||||
-//thumbnail app icons no dropshadow and forced color
|
||||
-.window-picker .icon-dropshadow {
|
||||
- icon-shadow: none;
|
||||
- background-color: $osd_bg_color;
|
||||
- padding: $base_padding * 2;
|
||||
- border-radius: $modal_radius;
|
||||
-}
|
||||
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
|
||||
index 85f16fb3c..d9d6db986 100644
|
||||
--- a/data/theme/gnome-shell-sass/_drawing.scss
|
||||
+++ b/data/theme/gnome-shell-sass/_drawing.scss
|
||||
@@ -373,11 +373,11 @@
|
||||
// $child_class: class name of the child element
|
||||
//
|
||||
|
||||
-@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
|
||||
+@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"", $border_radius: 3px) {
|
||||
|
||||
transition-duration: 150ms;
|
||||
border: 3px solid transparent;
|
||||
- border-radius: 99px;
|
||||
+ border-radius: $border_radius;
|
||||
|
||||
font-weight: bold;
|
||||
background-color: transparent;
|
||||
@@ -419,7 +419,7 @@
|
||||
#{$child_class} {
|
||||
transition-duration: 150ms;
|
||||
border: 3px solid transparent;
|
||||
- border-radius: 99px;
|
||||
+ border-radius: $border_radius;
|
||||
}
|
||||
|
||||
&:active, &:focus, &:checked {
|
||||
diff --git a/data/theme/gnome-shell-sass/_palette.scss b/data/theme/gnome-shell-sass/_palette.scss
|
||||
index 78847d95a..8627513c6 100644
|
||||
--- a/data/theme/gnome-shell-sass/_palette.scss
|
||||
+++ b/data/theme/gnome-shell-sass/_palette.scss
|
||||
@@ -39,8 +39,8 @@ $light_2: #f6f5f4;
|
||||
$light_3: #deddda;
|
||||
$light_4: #c0bfbc;
|
||||
$light_5: #9a9996;
|
||||
-$dark_1: #77767b;
|
||||
-$dark_2: #5e5c64;
|
||||
-$dark_3: #3d3846;
|
||||
-$dark_4: #241f31;
|
||||
-$dark_5: #000000;
|
||||
\ No newline at end of file
|
||||
+$dark_1: #777777;
|
||||
+$dark_2: #5e5e5e;
|
||||
+$dark_3: #3d3d3d;
|
||||
+$dark_4: #242424;
|
||||
+$dark_5: #000000;
|
||||
diff --git a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
|
||||
index 9aff43174..1760edaee 100644
|
||||
--- a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
|
||||
+++ b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
|
||||
@@ -3,7 +3,7 @@
|
||||
$ripple_size: 50px;
|
||||
|
||||
.ripple-box {
|
||||
- background-color: rgba(255,255,255,0.2);
|
||||
+ background-color: rgba(0,0,0,0);
|
||||
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2);
|
||||
// plus + 2px for the border (box-shadow)
|
||||
width: $ripple_size + 2px;
|
||||
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
|
||||
index f19c7c76e..1ad3a18d5 100644
|
||||
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
|
||||
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
|
||||
@@ -1,9 +1,9 @@
|
||||
/* Top Bar */
|
||||
// a.k.a. the panel
|
||||
|
||||
-$privacy_indicator_color: $orange_3;
|
||||
+$privacy_indicator_color: $red_3;
|
||||
|
||||
-$panel_bg_color: if($variant == 'light', $light_3, $dark_5);
|
||||
+$panel_bg_color: if($variant == 'light', $light_3, $dark_4);
|
||||
$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%));
|
||||
$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color);
|
||||
|
||||
@@ -21,14 +21,14 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
|
||||
// panel menus
|
||||
.panel-button {
|
||||
- @include panel_button($panel_fg_color);
|
||||
- -natural-hpadding: $base_padding * 2;
|
||||
- -minimum-hpadding: $base_padding;
|
||||
+ @include panel_button($bg: $panel_fg_color, $border_radius: 3px);
|
||||
+ -natural-hpadding: 6px;
|
||||
+ -minimum-hpadding: 4px;
|
||||
|
||||
// status area icons
|
||||
.system-status-icon {
|
||||
icon-size: $base_icon_size;
|
||||
- padding: $base_padding - 1px;
|
||||
+ padding: ($base_padding - 1px) 0px ($base_padding - 1px) 0px;
|
||||
margin: 0 $base_margin;
|
||||
}
|
||||
|
||||
@@ -44,7 +44,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
}
|
||||
|
||||
&#panelActivities {
|
||||
- -natural-hpadding: $base_padding * 2.5;
|
||||
+ -natural-hpadding: 10px;
|
||||
+ -minimum-hpadding: 8px;
|
||||
|
||||
& StBoxLayout {
|
||||
spacing: 5px;
|
||||
@@ -67,6 +68,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
|
||||
StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
+
|
||||
+ &:first-child {
|
||||
+ margin-left: 3px;
|
||||
+ }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,7 +88,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
// The clock display needs to have the background on .clock because
|
||||
// we want to exclude the do-not-disturb indicator from the background
|
||||
// see _drawing.scss for override details
|
||||
- @include panel_button($highlighted_child: true, $child_class:".clock");
|
||||
+ @include panel_button($highlighted_child: true, $child_class:".clock", $border_radius: 3px);
|
||||
+ -natural-hpadding: 0px;
|
||||
+ -minimum-hpadding: 0px;
|
||||
+ padding-left: 0px;
|
||||
+ padding-right: 0px;
|
||||
|
||||
.clock {
|
||||
// the highlighted child
|
||||
@@ -99,7 +108,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
box-shadow: none;
|
||||
|
||||
.panel-button {
|
||||
- @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color);
|
||||
+ @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $border_radius: 3px);
|
||||
|
||||
&#panelActivities .workspace-dot {
|
||||
background-color: $panel_system_fg_color;
|
||||
@@ -121,14 +130,26 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
}
|
||||
}
|
||||
|
||||
- .panel-status-indicators-box,
|
||||
+ .panel-status-indicators-box {
|
||||
+ spacing: 2px;
|
||||
+ padding-right: 2px;
|
||||
+ padding-left: 3px;
|
||||
+ }
|
||||
+
|
||||
.panel-status-menu-box {
|
||||
spacing: 2px;
|
||||
}
|
||||
|
||||
// spacing between power icon and (optional) percentage label
|
||||
.power-status.panel-status-indicators-box {
|
||||
+ padding-left: 0px;
|
||||
spacing: 0;
|
||||
+
|
||||
+ @if $laptop {
|
||||
+ margin-bottom: 2px;
|
||||
+ } @else {
|
||||
+ margin-left: 2px;
|
||||
+ }
|
||||
}
|
||||
|
||||
// important privacy related indicators
|
||||
@@ -151,7 +172,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
.clock-display-box {
|
||||
spacing: 2px;
|
||||
.clock {
|
||||
- padding-left: $base_padding * 2;
|
||||
- padding-right: $base_padding * 2;
|
||||
+ padding-left: 8px;
|
||||
+ padding-right: 8px;
|
||||
+ }
|
||||
+
|
||||
+ StIcon:last-child {
|
||||
+ margin-right: 3px;
|
||||
}
|
||||
}
|
||||
--
|
||||
2.44.0
|
||||
|
||||
250
patches/gnome-46.0-dark-theme.patch
Normal file
250
patches/gnome-46.0-dark-theme.patch
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
From 7698d02e99c01afc6451ec13dca730c1f0e100a1 Mon Sep 17 00:00:00 2001
|
||||
From: Kevin MacMartin <prurigro@gmail.com>
|
||||
Date: Mon, 25 Mar 2024 13:32:44 -0400
|
||||
Subject: [PATCH] Dark theme
|
||||
|
||||
---
|
||||
...ight.scss => gnome-shell-dark-laptop.scss} | 3 +-
|
||||
data/theme/gnome-shell-dark.scss | 1 +
|
||||
data/theme/gnome-shell-high-contrast.scss | 7 ----
|
||||
data/theme/gnome-shell-sass/_colors.scss | 4 +-
|
||||
data/theme/gnome-shell-sass/_drawing.scss | 6 +--
|
||||
data/theme/gnome-shell-sass/_palette.scss | 10 ++---
|
||||
.../widgets/_corner-ripple.scss | 2 +-
|
||||
.../gnome-shell-sass/widgets/_panel.scss | 41 +++++++++++++++----
|
||||
8 files changed, 48 insertions(+), 26 deletions(-)
|
||||
rename data/theme/{gnome-shell-light.scss => gnome-shell-dark-laptop.scss} (84%)
|
||||
delete mode 100644 data/theme/gnome-shell-high-contrast.scss
|
||||
|
||||
diff --git a/data/theme/gnome-shell-light.scss b/data/theme/gnome-shell-dark-laptop.scss
|
||||
similarity index 84%
|
||||
rename from data/theme/gnome-shell-light.scss
|
||||
rename to data/theme/gnome-shell-dark-laptop.scss
|
||||
index 22b8347..61925f9 100644
|
||||
--- a/data/theme/gnome-shell-light.scss
|
||||
+++ b/data/theme/gnome-shell-dark-laptop.scss
|
||||
@@ -1,6 +1,7 @@
|
||||
-$variant: 'light';
|
||||
+$variant: 'dark';
|
||||
$contrast: 'normal';
|
||||
|
||||
+$laptop: true;
|
||||
@import "gnome-shell-sass/_colors"; //use gtk colors
|
||||
@import "gnome-shell-sass/_drawing";
|
||||
@import "gnome-shell-sass/_common";
|
||||
diff --git a/data/theme/gnome-shell-dark.scss b/data/theme/gnome-shell-dark.scss
|
||||
index c1a330b..294ac64 100644
|
||||
--- a/data/theme/gnome-shell-dark.scss
|
||||
+++ b/data/theme/gnome-shell-dark.scss
|
||||
@@ -1,6 +1,7 @@
|
||||
$variant: 'dark';
|
||||
$contrast: 'normal';
|
||||
|
||||
+$laptop: false;
|
||||
@import "gnome-shell-sass/_colors"; //use gtk colors
|
||||
@import "gnome-shell-sass/_drawing";
|
||||
@import "gnome-shell-sass/_common";
|
||||
diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss
|
||||
deleted file mode 100644
|
||||
index a4394dd..0000000
|
||||
--- a/data/theme/gnome-shell-high-contrast.scss
|
||||
+++ /dev/null
|
||||
@@ -1,7 +0,0 @@
|
||||
-$variant: 'dark';
|
||||
-$contrast: "high";
|
||||
-
|
||||
-@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors
|
||||
-@import "gnome-shell-sass/_drawing";
|
||||
-@import "gnome-shell-sass/_common";
|
||||
-@import "gnome-shell-sass/_widgets";
|
||||
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
|
||||
index ffd4e9f..9a5450a 100644
|
||||
--- a/data/theme/gnome-shell-sass/_colors.scss
|
||||
+++ b/data/theme/gnome-shell-sass/_colors.scss
|
||||
@@ -21,7 +21,7 @@ $system_base_color: $_base_color_dark;
|
||||
$system_fg_color: $_base_color_light;
|
||||
|
||||
// panel colors
|
||||
-$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_5);
|
||||
+$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_4);
|
||||
$panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1);
|
||||
|
||||
// card elements
|
||||
@@ -66,4 +66,4 @@ $active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_colo
|
||||
$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
|
||||
|
||||
// selection colors
|
||||
-$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));
|
||||
\ No newline at end of file
|
||||
+$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));
|
||||
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
|
||||
index 5d56d4c..dd6f8a8 100644
|
||||
--- a/data/theme/gnome-shell-sass/_drawing.scss
|
||||
+++ b/data/theme/gnome-shell-sass/_drawing.scss
|
||||
@@ -386,7 +386,7 @@
|
||||
}
|
||||
|
||||
// Panel menu/button drawing function
|
||||
-@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"") {
|
||||
+@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"", $border_radius: 3px) {
|
||||
//
|
||||
// $bg: background color, derived from $panel_fg_color
|
||||
// $fg: foreground color, also derived from $panel_fg_color
|
||||
@@ -400,7 +400,7 @@
|
||||
transition-duration: 150ms;
|
||||
border: 3px solid transparent;
|
||||
background-color: transparent;
|
||||
- border-radius: $forced_circular_radius;
|
||||
+ border-radius: $border_radius;
|
||||
|
||||
font-weight: bold;
|
||||
color: $fg;
|
||||
@@ -444,7 +444,7 @@
|
||||
#{$child_class} {
|
||||
transition-duration: 150ms;
|
||||
border: 3px solid transparent;
|
||||
- border-radius: $forced_circular_radius;
|
||||
+ border-radius: $border_radius;
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
diff --git a/data/theme/gnome-shell-sass/_palette.scss b/data/theme/gnome-shell-sass/_palette.scss
|
||||
index 78847d9..8627513 100644
|
||||
--- a/data/theme/gnome-shell-sass/_palette.scss
|
||||
+++ b/data/theme/gnome-shell-sass/_palette.scss
|
||||
@@ -39,8 +39,8 @@ $light_2: #f6f5f4;
|
||||
$light_3: #deddda;
|
||||
$light_4: #c0bfbc;
|
||||
$light_5: #9a9996;
|
||||
-$dark_1: #77767b;
|
||||
-$dark_2: #5e5c64;
|
||||
-$dark_3: #3d3846;
|
||||
-$dark_4: #241f31;
|
||||
-$dark_5: #000000;
|
||||
\ No newline at end of file
|
||||
+$dark_1: #777777;
|
||||
+$dark_2: #5e5e5e;
|
||||
+$dark_3: #3d3d3d;
|
||||
+$dark_4: #242424;
|
||||
+$dark_5: #000000;
|
||||
diff --git a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
|
||||
index 9aff431..1760eda 100644
|
||||
--- a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
|
||||
+++ b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
|
||||
@@ -3,7 +3,7 @@
|
||||
$ripple_size: 50px;
|
||||
|
||||
.ripple-box {
|
||||
- background-color: rgba(255,255,255,0.2);
|
||||
+ background-color: rgba(0,0,0,0);
|
||||
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2);
|
||||
// plus + 2px for the border (box-shadow)
|
||||
width: $ripple_size + 2px;
|
||||
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
|
||||
index 2a29eee..9b455a0 100644
|
||||
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
|
||||
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
|
||||
@@ -1,8 +1,8 @@
|
||||
/* Top Bar */
|
||||
// a.k.a. the panel
|
||||
|
||||
-$privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3);
|
||||
-$recording_indicator_color: $red_4;
|
||||
+$privacy_indicator_color: if($variant == 'light', $orange_4, $red_3);
|
||||
+$recording_indicator_color: $red_3;
|
||||
|
||||
$transparent_panel_fg_color: $light_1; // always white for transparent lock screens
|
||||
$system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview
|
||||
@@ -20,13 +20,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
// panel menus
|
||||
.panel-button {
|
||||
@include panel_button();
|
||||
- -natural-hpadding: $base_padding * 2;
|
||||
- -minimum-hpadding: $base_padding;
|
||||
+ -natural-hpadding: 6px;
|
||||
+ -minimum-hpadding: 4px;
|
||||
|
||||
// status area icons
|
||||
.system-status-icon {
|
||||
icon-size: $scalable_icon_size;
|
||||
- padding: 0 $base_padding;
|
||||
+ padding: 0;
|
||||
margin: 0 $base_margin;
|
||||
}
|
||||
|
||||
@@ -47,6 +47,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
}
|
||||
|
||||
&#panelActivities {
|
||||
+ -natural-hpadding: 10px;
|
||||
+ -minimum-hpadding: 8px;
|
||||
+
|
||||
& StBoxLayout {
|
||||
padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion
|
||||
spacing: 5px;
|
||||
@@ -69,6 +72,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
|
||||
StIcon {
|
||||
icon-size: $scalable_icon_size;
|
||||
+
|
||||
+ &:first-child {
|
||||
+ margin-left: 3px;
|
||||
+ }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,6 +93,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
// we want to exclude the do-not-disturb indicator from the background
|
||||
// see _drawing.scss for override details
|
||||
@include panel_button($highlighted_child: true, $child_class: '.clock');
|
||||
+ -natural-hpadding: 0px;
|
||||
+ -minimum-hpadding: 0px;
|
||||
+ padding-left: 0px;
|
||||
+ padding-right: 0px;
|
||||
|
||||
.clock {
|
||||
// the highlighted child
|
||||
@@ -144,6 +155,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
}
|
||||
}
|
||||
|
||||
+ .panel-status-indicators-box {
|
||||
+ padding-right: 2px;
|
||||
+ padding-left: 3px;
|
||||
+ }
|
||||
+
|
||||
.panel-status-indicators-box,
|
||||
.panel-status-menu-box {
|
||||
spacing: 2px;
|
||||
@@ -151,7 +167,14 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
|
||||
// spacing between power icon and (optional) percentage label
|
||||
.power-status.panel-status-indicators-box {
|
||||
+ padding-left: 0px;
|
||||
spacing: 0;
|
||||
+
|
||||
+ @if $laptop {
|
||||
+ margin-bottom: 2px;
|
||||
+ } @else {
|
||||
+ margin-left: 2px;
|
||||
+ }
|
||||
}
|
||||
|
||||
// important privacy related indicators
|
||||
@@ -174,7 +197,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
.clock-display-box {
|
||||
spacing: 2px;
|
||||
.clock {
|
||||
- padding-left: $scaled_padding * 2;
|
||||
- padding-right: $scaled_padding * 2;
|
||||
+ padding-left: 8px;
|
||||
+ padding-right: 8px;
|
||||
+ }
|
||||
+
|
||||
+ StIcon:last-child {
|
||||
+ margin-right: 3px;
|
||||
}
|
||||
}
|
||||
--
|
||||
2.44.0
|
||||
|
||||
1
process-working-dark.svg
Normal file
1
process-working-dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
1
process-working-light.svg
Normal file
1
process-working-light.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
3084
process-working.svg
3084
process-working.svg
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 98 KiB |
|
|
@ -1 +0,0 @@
|
|||
<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:.4" 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: 703 B |
|
|
@ -1 +1 @@
|
|||
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect style="fill:#c0bfbc;stroke:none;stroke-width:1;marker:none" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="294.18" x="-24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><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></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect width="46" height="26" x="-46" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#c0bfbc;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="stroke:none;stroke-width:1;marker:none"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 547 B After Width: | Height: | Size: 539 B |
|
|
@ -1 +1 @@
|
|||
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(-1 0 0 1 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"/><rect ry="11" rx="11" y="294.18" x="-24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none;fill:#fff;fill-opacity:1" fill="#f8f7f7"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect width="46" height="26" x="-46" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#fff;fill-opacity:.15;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#fff;fill-opacity:1;stroke:none;stroke-width:1;marker:none"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 592 B After Width: | Height: | Size: 578 B |
|
|
@ -1 +0,0 @@
|
|||
<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: 518 B |
|
|
@ -1 +1 @@
|
|||
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3"/><rect ry="11" rx="11" y="294.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none;fill:#000;fill-opacity:.2" fill="#f8f7f7"/><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></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="translate(0 -291.18)"><rect width="46" height="26" y="291.18" fill="#3081e3" ry="13" style="fill:#3584e4;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="stroke:none;stroke-width:1;marker:none"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 523 B After Width: | Height: | Size: 511 B |
|
|
@ -1 +1 @@
|
|||
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><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="294.18" x="24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="fill:#fff;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="translate(0 -291.18)"><rect width="46" height="26" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#3584e4;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#fff;stroke:none;stroke-width:1;marker:none"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 541 B After Width: | Height: | Size: 533 B |
Loading…
Reference in a new issue