Merge branch 'gnome-44' into kali/master
This commit is contained in:
Daniel Ruiz de Alegría
commit
e1c7d7fb7a
2
debian/control
vendored
2
debian/control
vendored
@ -65,7 +65,7 @@ Depends:
|
||||
plymouth-label,
|
||||
${misc:Depends},
|
||||
Breaks:
|
||||
gnome-shell (<< 43.0),
|
||||
gnome-shell (<< 44.0),
|
||||
kali-defaults (<< 2019.4.0),
|
||||
kali-desktop-xfce (<< 2020.2.18),
|
||||
kali-menu (<< 2019.4.4),
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -3,7 +3,7 @@
|
||||
|
||||
$_dark_base_color: #272a34;
|
||||
|
||||
$is_highcontrast: "false";
|
||||
$is_highcontrast: false;
|
||||
|
||||
$base_color: if($variant == 'light', darken(#ffffff, 2%), $_dark_base_color);
|
||||
$text_color: if($variant == 'light', black, white);
|
||||
@ -16,6 +16,7 @@ $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%),
|
||||
$borders_color: if($variant == 'light', darken($bg_color, 15%), darken($bg_color, 10%));
|
||||
$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
|
||||
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
|
||||
$outer_borders_color: $borders_edge;
|
||||
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
|
||||
$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
|
||||
$top_hilight: $borders_edge;
|
||||
@ -43,7 +44,7 @@ $osd_bg_color: lighten($_dark_base_color, 4%);
|
||||
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
|
||||
$osd_borders_color: black;
|
||||
$osd_outer_borders_color: transparentize(white, 0.9);
|
||||
$osd_outer_borders_color: transparentize($osd_fg_color, 0.9);
|
||||
|
||||
$sidebar_bg_color: mix($bg_color, $base_color, 50%);
|
||||
$base_hover_color: transparentize($fg_color, 0.95);
|
||||
@ -56,13 +57,10 @@ $shadow_color: transparentize(black, if($variant == 'light', 0.9, 0.7));
|
||||
$system_bg_color: $_dark_base_color;
|
||||
|
||||
// button
|
||||
$button_mix_factor: 5%;
|
||||
|
||||
// cards
|
||||
$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%));
|
||||
$button_mix_factor: 9%;
|
||||
|
||||
// notifications
|
||||
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 10%));
|
||||
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
|
||||
|
||||
$drop_target_color: #19a187;
|
||||
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
$overview_transparent_bg: transparentize(white, .9);
|
||||
$dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
|
||||
|
||||
%overview-transparent-bg {
|
||||
$_overview_transparent_bg: transparentize(white, .9);
|
||||
|
||||
background-color: $_overview_transparent_bg;
|
||||
box-shadow: inset 0 0 0 1px $_overview_transparent_bg;
|
||||
}
|
||||
|
||||
// Dropshadow for large icons
|
||||
.icon-dropshadow {
|
||||
icon-shadow: 0 1px 5px $shadow_color;
|
||||
@ -128,34 +134,39 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
|
||||
.datemenu-today-button {
|
||||
&:insensitive { color: inherit; }
|
||||
}
|
||||
/* Quick Settings */
|
||||
.quick-toggle-menu {
|
||||
& .header {
|
||||
& .icon {
|
||||
&.active { color: $selected_fg_color; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Search */
|
||||
// search entry
|
||||
.search-entry {
|
||||
$_text-shadow: 0px 1px 2px transparentize(black, 0.5);
|
||||
color: black;
|
||||
text-shadow: $_text-shadow;
|
||||
font-weight: bold;
|
||||
background-color: $overview_transparent_bg;
|
||||
|
||||
@extend %overview-transparent-bg;
|
||||
|
||||
width: 21em;
|
||||
padding: .6em .8em;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
text-shadow: $_text-shadow;
|
||||
transition-duration: 200ms;
|
||||
|
||||
StLabel.hint-text { color: $osd_fg_color; }
|
||||
|
||||
&, &:focus, &:hover {
|
||||
width: 21em;
|
||||
padding: .6em .8em;
|
||||
border: none;
|
||||
}
|
||||
&, StLabel.hint-text { color: $osd_fg_color; }
|
||||
|
||||
&:focus, &:hover {
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
|
||||
StLabel.hint-text { color: black; }
|
||||
&, StLabel.hint-text { color: black; }
|
||||
|
||||
.search-entry-icon {
|
||||
color: black;
|
||||
@ -171,8 +182,7 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
|
||||
|
||||
// search results
|
||||
.search-section-content {
|
||||
background-color: $overview_transparent_bg;
|
||||
border: none;
|
||||
@extend %overview-transparent-bg;
|
||||
}
|
||||
|
||||
// search result provider
|
||||
@ -191,13 +201,35 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
|
||||
}
|
||||
}
|
||||
|
||||
.dash-background, .dash-separator { background: $overview_transparent_bg; }
|
||||
.dash-background, .dash-separator {
|
||||
@extend %overview-transparent-bg;
|
||||
}
|
||||
|
||||
/* App Grid */
|
||||
#overview { color: $osd_fg_color; }
|
||||
|
||||
// Icon tiles in the app grid
|
||||
.app-well-app { color: white; }
|
||||
.app-well-app.app-folder {
|
||||
@include overview_icon(white, $flat: false);
|
||||
.overview-icon {
|
||||
@extend %overview-transparent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.app-folder-dialog {
|
||||
background: black;
|
||||
box-shadow: 0 0 20px lighten(black, 1%);
|
||||
box-shadow: 0 0 100px lighten(black, 4%);
|
||||
|
||||
& .folder-name-container .folder-name-entry { color: white; }
|
||||
}
|
||||
|
||||
/* Workspace pager */
|
||||
// thumbnails in overview
|
||||
.workspace-thumbnails {
|
||||
.workspace-thumbnail {
|
||||
@extend %overview-transparent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// selected indicator
|
||||
.workspace-thumbnail-indicator { border: 2px solid white; }
|
||||
|
||||
@ -5,11 +5,6 @@ $variant: 'dark';
|
||||
@import "gnome-shell-sass/_common";
|
||||
@import "gnome-shell-sass/_widgets";
|
||||
|
||||
//force symbolic icons
|
||||
stage {
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
.toggle-switch { width: 48px; }
|
||||
.toggle-switch {
|
||||
background-image: url("assets/toggle-off-hc.svg");
|
||||
|
||||
@ -3,20 +3,20 @@
|
||||
|
||||
@import '_palette.scss';
|
||||
|
||||
$is_highcontrast: "false";
|
||||
$is_highcontrast:false;
|
||||
|
||||
$_dark_base_color: darken(desaturate(#241f31, 100%), 2%);
|
||||
$_dark_base_color: desaturate($dark_4, 100%);
|
||||
|
||||
$base_color: if($variant == 'light', #fff, $_dark_base_color);
|
||||
$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
|
||||
$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', transparentize(black, .2), white);
|
||||
|
||||
$selected_fg_color: #fff;
|
||||
$selected_bg_color: #3584e4;
|
||||
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
|
||||
$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%));
|
||||
|
||||
$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9));
|
||||
$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%));
|
||||
$outer_borders_color: if($variant == 'light', rgba(255,255,255,0.8), 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%));
|
||||
@ -26,23 +26,20 @@ $error_color: if($variant == 'light', $red_3, $red_4);
|
||||
$success_color: if($variant == 'light', $green_4, $green_5);
|
||||
$destructive_color: $error_color;
|
||||
|
||||
$osd_fg_color: white;
|
||||
$osd_fg_color: $light_1;
|
||||
$osd_bg_color: $_dark_base_color; //hardcoded for both light & dark
|
||||
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||
$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%));
|
||||
$osd_borders_color: transparentize(black, 0.3);
|
||||
$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
|
||||
$osd_outer_borders_color: transparentize($osd_fg_color, 0.9);
|
||||
|
||||
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
|
||||
|
||||
// button
|
||||
$button_mix_factor: 5%;
|
||||
|
||||
// cards
|
||||
$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%));
|
||||
$button_mix_factor: 9%;
|
||||
|
||||
// notifications
|
||||
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 10%));
|
||||
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
|
||||
|
||||
// overview background color
|
||||
$system_bg_color: $base_color;
|
||||
@ -60,7 +57,6 @@ $backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15
|
||||
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
|
||||
$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
|
||||
|
||||
|
||||
// derived checked colors
|
||||
$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 7%));
|
||||
$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%));
|
||||
|
||||
@ -64,13 +64,9 @@ stage {
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
border-radius: 999px;
|
||||
padding: $base_padding*2;
|
||||
}
|
||||
|
||||
// Overview panels
|
||||
// for the dash and workspace switcher
|
||||
%overview_panel {
|
||||
color: $osd_fg_color;
|
||||
background-color: transparentize($osd_fg_color, 0.9);
|
||||
@if $is_highcontrast {
|
||||
border: 2px solid $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
// icon tiles
|
||||
@ -81,19 +77,14 @@ stage {
|
||||
border: 2px solid transparent;
|
||||
transition-duration: 200ms;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// dialogs
|
||||
%bubble_panel {
|
||||
color: $fg_color;
|
||||
background-color: $bg_color;
|
||||
border-radius: $base_border_radius*1.25 + 1px;
|
||||
border: 1px solid $borders_edge;
|
||||
@if $is_highcontrast {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
// normal button styling
|
||||
%button {
|
||||
border-radius: $base_border_radius - 2px; // 6px
|
||||
border-radius: $base_border_radius;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
font-weight: bold;
|
||||
@ -103,33 +94,39 @@ stage {
|
||||
&:focus { @include button(focus);}
|
||||
&:hover { @include button(hover);}
|
||||
&:insensitive { @include button(insensitive);}
|
||||
&:active { @include button(active);}
|
||||
&:checked { @include button(checked);}
|
||||
}
|
||||
|
||||
// normal icon-only button
|
||||
%icon_button {
|
||||
border-radius: 99px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
font-weight: bold;
|
||||
padding: $base_padding*2;
|
||||
|
||||
@include button(normal);
|
||||
&:focus { @include button(focus);}
|
||||
&:hover { @include button(hover);}
|
||||
&:insensitive { @include button(insensitive);}
|
||||
&:selected,
|
||||
&:active { @include button(active);}
|
||||
&:checked { @include button(checked);}
|
||||
|
||||
& > StIcon { icon-size: $base_icon_size; }
|
||||
&.flat {
|
||||
@include button(normal, $flat:true);
|
||||
&:focus { @include button(focus, $flat:true);}
|
||||
&:hover { @include button(hover, $flat:true);}
|
||||
&:insensitive { @include button(insensitive, $flat:true);}
|
||||
&:selected,
|
||||
&:active { @include button(active, $flat:true);}
|
||||
&:checked { @include button(checked, $flat:true);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// normal entry style
|
||||
%entry {
|
||||
border-radius: $base_border_radius;
|
||||
padding: $base_padding*1.5 $base_padding*1.5;
|
||||
color: $fg_color;
|
||||
selection-background-color: $selected_bg_color;
|
||||
selected-color: $selected_fg_color;
|
||||
|
||||
@include entry(normal);
|
||||
&:hover { @include entry(hover);}
|
||||
&:focus { @include entry(focus);}
|
||||
&:insensitive { @include entry(insensitive);}
|
||||
}
|
||||
|
||||
|
||||
// buttons in dialogs/notifications
|
||||
// lighter in color and have a greater radius
|
||||
|
||||
$bubble_button_radius:$base_border_radius*1.25;
|
||||
|
||||
%bubble_button {
|
||||
padding: $base_padding * 2;
|
||||
font-weight: bold !important;
|
||||
@ -143,27 +140,27 @@ $bubble_button_radius:$base_border_radius*1.25;
|
||||
&:hover { @include button(hover, $c:$bubble_buttons_color);}
|
||||
&:active { @include button(active, $c:$bubble_buttons_color);}
|
||||
&:checked { @include button(checked, $c:$bubble_buttons_color);}
|
||||
|
||||
|
||||
&:first-child:ltr {
|
||||
border-radius: 0 0 0 $bubble_button_radius;
|
||||
border-radius: 0 0 0 $modal_radius;
|
||||
}
|
||||
|
||||
&:last-child:ltr {
|
||||
border-radius: 0 0 $bubble_button_radius 0;
|
||||
border-radius: 0 0 $modal_radius;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:rtl {
|
||||
border-radius: 0 0 $bubble_button_radius 0;
|
||||
border-radius: 0 0 $modal_radius;
|
||||
}
|
||||
|
||||
&:last-child:rtl {
|
||||
border-radius: 0 0 0 $bubble_button_radius;
|
||||
border-radius: 0 0 0 $modal_radius;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
|
||||
border-radius: 0 0 $modal_radius $modal_radius;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
@ -180,6 +177,23 @@ $bubble_button_radius:$base_border_radius*1.25;
|
||||
&:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
}
|
||||
|
||||
|
||||
// tooltip
|
||||
%tooltip {
|
||||
background-color: $osd_bg_color;
|
||||
color: $osd_fg_color;
|
||||
border:1px solid $osd_outer_borders_color;
|
||||
border-radius: 99px;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
text-align: center;
|
||||
|
||||
@if $is_highcontrast {
|
||||
background-color: $osd_bg_color;
|
||||
color: $osd_fg_color;
|
||||
border: 1px solid $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
/* General Typography */
|
||||
|
||||
%large_title {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
// generic drawing of more complex things
|
||||
|
||||
@function draw_widget_edge($c:$borders_edge) {
|
||||
@function draw_widget_edge($c:$outer_borders_color) {
|
||||
// outer highlight "used" on most widgets
|
||||
@return 0 1px $c;
|
||||
}
|
||||
@ -35,29 +35,31 @@
|
||||
// possible $t values:
|
||||
// normal, focus, insensitive
|
||||
//
|
||||
transition-duration: 100ms;
|
||||
|
||||
@if $t==normal {
|
||||
background-color: lighten($bg_color, 5%);
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
color: transparentize($fg_color,0.3);
|
||||
border: 2px solid lighten($bg_color, 5%);
|
||||
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
@if $t==focus {
|
||||
background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%);
|
||||
border-color: $fc;
|
||||
background-color: mix(transparentize($fg_color, 0.8), $selected_bg_color, 95%);
|
||||
box-shadow: inset 0 0 0 2px $fc;
|
||||
color: $fg_color;
|
||||
&:hover {}
|
||||
}
|
||||
|
||||
@if $t==hover {
|
||||
background-color:lighten($hover_bg_color, 5%);
|
||||
border-color:lighten($hover_bg_color, 5%);
|
||||
color: transparentize($fg_color,0.3);
|
||||
background-color:transparentize($fg_color, 0.8);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@if $t==insensitive {
|
||||
background-color:lighten($insensitive_bg_color, 5%);
|
||||
border-color: lighten($insensitive_bg_color, 5%);
|
||||
background-color:transparentize($insensitive_fg_color, 0.8);
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
}
|
||||
@ -143,7 +145,7 @@
|
||||
//
|
||||
// since buttons are all flat an borderless now the mixin is simpler
|
||||
|
||||
@mixin button($t, $tc:$fg_color, $c:$bg_color) {
|
||||
@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false) {
|
||||
|
||||
$button_bg_color: mix($tc, $c, $button_mix_factor);
|
||||
transition-duration: 100ms;
|
||||
@ -152,9 +154,35 @@
|
||||
@if $t==normal {
|
||||
color: $tc;
|
||||
background-color: $button_bg_color;
|
||||
@if $is_highcontrast == "true" {
|
||||
box-shadow: inset 0 0 0 1px $button_inset_color;
|
||||
@if $flat {
|
||||
background-color: transparent;
|
||||
}
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 0 0 0 1px $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
// hover button
|
||||
@else if $t==hover {
|
||||
color: $tc;
|
||||
background-color: lighten($button_bg_color, 3%);
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 0 0 0 1px $hc_inset_color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// active button
|
||||
@else if $t==active {
|
||||
color: $tc;
|
||||
background-color: lighten($button_bg_color, 9%);
|
||||
}
|
||||
|
||||
// checked button
|
||||
@else if $t==checked {
|
||||
color: $tc;
|
||||
background-color: lighten($button_bg_color, 9%);
|
||||
&:hover { background-color: lighten($button_bg_color, 12%);}
|
||||
&:active { background-color: lighten($button_bg_color, 15%);}
|
||||
}
|
||||
|
||||
// focused button
|
||||
@ -172,57 +200,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
// hover button
|
||||
@else if $t==hover {
|
||||
color: $tc;
|
||||
background-color: 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%);
|
||||
}
|
||||
}
|
||||
|
||||
// active button
|
||||
@else if $t==active {
|
||||
color: $tc;
|
||||
background-color: 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%);
|
||||
}
|
||||
}
|
||||
|
||||
// checked button
|
||||
@else if $t==checked {
|
||||
color: $tc;
|
||||
background-color: 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%);}
|
||||
}
|
||||
|
||||
// insensitive button
|
||||
@else if $t==insensitive {
|
||||
color: transparentize($tc, 0.5);
|
||||
background-color: transparentize($tc, .95);
|
||||
@if $is_highcontrast == "true" {
|
||||
box-shadow: inset 0 0 0 1px transparentize($button_inset_color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// default/suggested button
|
||||
@else if $t==default {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
|
||||
box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
&:hover, &:focus {
|
||||
background-color: lighten($selected_bg_color, 5%);
|
||||
color: lighten($selected_fg_color, 5%);
|
||||
}
|
||||
@ -257,6 +249,9 @@
|
||||
background-color: transparent;
|
||||
} @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 {
|
||||
@ -279,11 +274,15 @@
|
||||
// overview icon, dash, app grid
|
||||
@mixin overview_icon($color, $flat: true) {
|
||||
transition-duration: 400ms;
|
||||
.overview-icon { @extend %tile; }
|
||||
.overview-icon {
|
||||
@extend %tile;
|
||||
}
|
||||
@if $flat {
|
||||
.overview-icon { background-color: transparent;}
|
||||
} @else {
|
||||
.overview-icon { background-color: transparentize($color, .81);}
|
||||
.overview-icon {
|
||||
background-color: transparentize($color, .93);
|
||||
}
|
||||
}
|
||||
&:hover .overview-icon { background-color: transparentize($color, .9);}
|
||||
|
||||
@ -308,26 +307,44 @@
|
||||
|
||||
// styling for elements within popovers that look like notifications
|
||||
@mixin card($flat: false) {
|
||||
border-radius: $base_border_radius;
|
||||
border-radius: $base_border_radius*1.5;
|
||||
margin: $base_margin;
|
||||
box-shadow: 0 1px 1px 0 $shadow_color;
|
||||
|
||||
@if $flat {
|
||||
@include button(undecorated);
|
||||
box-shadow: none !important;
|
||||
} @else {
|
||||
@include button(normal, $c:$card_bg_color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include button(focus, $c:$card_bg_color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include button(hover, $c:$card_bg_color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include button(active, $c:$card_bg_color);
|
||||
@include button(normal);
|
||||
}
|
||||
&:hover {@include button(hover);}
|
||||
&:active {@include button(active);}
|
||||
&:focus {@include button(focus);}
|
||||
}
|
||||
|
||||
// styling for all menuitems in popovers
|
||||
@mixin menuitem($bg, $flat: true) {
|
||||
|
||||
// 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;
|
||||
|
||||
&:ltr {padding-left: $base_padding;}
|
||||
&:rtl {padding-right: $base_padding;}
|
||||
|
||||
@if $flat {
|
||||
@include button(undecorated);
|
||||
box-shadow: none !important;
|
||||
} @else {
|
||||
@include button(normal, $c:$bg);
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
@include button(hover, $c:$bg);
|
||||
}
|
||||
&:active {@include button(active, $c:$bg);}
|
||||
&:checked {@include button(checked, $c:$bg);}
|
||||
}
|
||||
|
||||
@ -46,6 +46,5 @@
|
||||
@import 'widgets/misc';
|
||||
@import 'widgets/keyboard';
|
||||
@import 'widgets/looking-glass';
|
||||
// Lock / login screens
|
||||
@import 'widgets/login-dialog';
|
||||
@import 'widgets/screen-shield';
|
||||
// Lock / login screen
|
||||
@import 'widgets/login-lock';
|
||||
|
||||
@ -20,7 +20,10 @@ $app_icon_size: 96px;
|
||||
.app-well-app {
|
||||
@include overview_icon($osd_fg_color);
|
||||
|
||||
.overview-icon { padding: $base_padding*2;}
|
||||
.overview-icon {
|
||||
padding: $base_padding*2;
|
||||
border-radius: $base_border_radius*3;
|
||||
}
|
||||
.overview-icon.overview-icon-with-label {
|
||||
> StBoxLayout {
|
||||
spacing: $base_padding;
|
||||
@ -30,13 +33,19 @@ $app_icon_size: 96px;
|
||||
|
||||
// app folders
|
||||
.app-well-app.app-folder {
|
||||
@include overview_icon($osd_fg_color, $flat: false);
|
||||
@include overview_icon($fg_color, $flat: false);
|
||||
}
|
||||
|
||||
// expanded folder
|
||||
.app-folder-dialog {
|
||||
border-radius: $modal_radius*2;
|
||||
background-color: $dash_background_color;
|
||||
border-radius: $modal_radius*4;
|
||||
background-color: $bg_color;
|
||||
padding: $base_padding*2;
|
||||
box-shadow:inset 0 0 0 1px $outer_borders_color;
|
||||
|
||||
@if $is_highcontrast {
|
||||
box-shadow:inset 0 0 0 2px $hc_inset_color;
|
||||
}
|
||||
|
||||
& .folder-name-container {
|
||||
padding: 24px 36px 0;
|
||||
@ -47,7 +56,10 @@ $app_icon_size: 96px;
|
||||
@extend %title_1;
|
||||
}
|
||||
|
||||
& .folder-name-entry { width: 300px }
|
||||
& .folder-name-entry {
|
||||
width: 12em;
|
||||
border-radius: $base_border_radius*2;
|
||||
}
|
||||
|
||||
/* FIXME: this is to keep the label in sync with the entry */
|
||||
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
|
||||
@ -119,9 +131,12 @@ $app_icon_size: 96px;
|
||||
// shutdown and other actions in the grid
|
||||
.system-action-icon {
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
color: #fff;
|
||||
color: white;
|
||||
border-radius: 99px;
|
||||
icon-size: $app_icon_size * 0.5;
|
||||
@if $is_highcontrast {
|
||||
box-shadow: inset 0 0 0 2px $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
.page-navigation-hint {
|
||||
@ -147,15 +162,16 @@ $app_icon_size: 96px;
|
||||
}
|
||||
|
||||
.page-navigation-arrow {
|
||||
& > StIcon {
|
||||
margin: 6px;
|
||||
padding: 18px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 99px;
|
||||
margin: 6px;
|
||||
padding: 18px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 99px;
|
||||
@if $is_highcontrast {
|
||||
@include button(normal, $osd_fg_color, transparentize($osd_bg_color, 0.5));
|
||||
}
|
||||
|
||||
&:insensitive > StIcon { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
|
||||
&:hover > StIcon { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
|
||||
&:active > StIcon { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
|
||||
&:insensitive { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
|
||||
&:hover { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
|
||||
&:active { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
|
||||
}
|
||||
|
||||
@ -6,5 +6,14 @@
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
@extend %icon_button; // that's it
|
||||
@extend .button; // same style as buttons
|
||||
|
||||
border-radius: 99px;
|
||||
padding: $base_padding*2;
|
||||
min-height: 16px;
|
||||
|
||||
StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
/* today button (the date) */
|
||||
.datemenu-today-button {
|
||||
@include card($flat: true);
|
||||
@include card(flat);
|
||||
padding: $base_padding * 1.5;
|
||||
|
||||
// weekday label
|
||||
@ -45,7 +45,6 @@
|
||||
|
||||
// month label
|
||||
.calendar-month-label {
|
||||
color: lighten($fg_color,5%);
|
||||
@extend %heading;
|
||||
padding: 8px 0;
|
||||
}
|
||||
@ -54,9 +53,12 @@
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin: 2px;
|
||||
border-radius: $base_border_radius - 2px;
|
||||
border-radius: $base_border_radius;
|
||||
&:hover, &:focus {background-color: $hover_bg_color;}
|
||||
&:active {background-color: $active_bg_color;}
|
||||
@if $is_highcontrast {
|
||||
border:1px solid $hc_inset_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,7 +74,7 @@
|
||||
transition-duration: 100ms;
|
||||
@extend %numeric;
|
||||
@extend %smaller;
|
||||
|
||||
|
||||
&:hover {background-color: $hover_bg_color;}
|
||||
&:focus {
|
||||
background-color: mix($bg_color, $selected_bg_color, 80%);
|
||||
@ -93,12 +95,18 @@
|
||||
color: $insensitive_fg_color;
|
||||
padding-top: $base_padding;
|
||||
height: 16px !important; // force heading to be smaller height
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
@extend %smaller;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-day {}
|
||||
.calendar-day {
|
||||
font-weight: 600;
|
||||
@if $is_highcontrast {
|
||||
border:1px solid $hc_inset_color;
|
||||
border-radius: 9px;
|
||||
}
|
||||
}
|
||||
.calendar-work-day {}
|
||||
.calendar-nonwork-day {color: $insensitive_fg_color;}
|
||||
.calendar-other-month-day {
|
||||
@ -142,7 +150,7 @@
|
||||
margin: 6px;
|
||||
padding: 0 $base_padding;
|
||||
border-radius: 3px;
|
||||
background-color: darken($bg_color, 2%);
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
color: $insensitive_fg_color
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,17 +35,23 @@ $dash_border_radius: $modal_radius + $dash_padding;
|
||||
padding: $dash_padding;
|
||||
spacing: $base_padding;
|
||||
margin-bottom: $dash_padding;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border: 2px solid $hc_inset_color;
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
|
||||
// items on the dash
|
||||
.dash-item-container {
|
||||
> * {margin: 0 2px;}
|
||||
&:ltr:first-child {margin-left: 0;}
|
||||
&:rtl:first-child {margin-right: 0;}
|
||||
&: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;
|
||||
}
|
||||
|
||||
// show apps button
|
||||
@ -62,14 +68,13 @@ $dash_border_radius: $modal_radius + $dash_padding;
|
||||
margin: 0 $base_margin;
|
||||
background-color: $borders_color;
|
||||
margin-bottom: $dash_padding;
|
||||
@if $is_highcontrast {
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// OSD Tooltip
|
||||
.dash-label {
|
||||
color: $osd_fg_color;
|
||||
background-color: $osd_bg_color;
|
||||
border-radius: 99px;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
text-align: center;
|
||||
@extend %tooltip;
|
||||
-y-offset: $base_margin * 2; // distance from the dash edge
|
||||
}
|
||||
|
||||
@ -5,7 +5,9 @@
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
@extend %bubble_panel;
|
||||
background-color: $bg_color;
|
||||
border-radius: $modal_radius;
|
||||
box-shadow: inset 0 0 0 1px $outer_borders_color;
|
||||
|
||||
.modal-dialog-content-box {
|
||||
margin: 32px 40px;
|
||||
|
||||
@ -1,20 +1,10 @@
|
||||
/* Entries */
|
||||
|
||||
StEntry {
|
||||
border-radius: $base_border_radius;
|
||||
padding: 8px;
|
||||
color: $fg_color;
|
||||
|
||||
@include entry(normal);
|
||||
&:hover { @include entry(hover);}
|
||||
&:focus { @include entry(focus);}
|
||||
&:insensitive { @include entry(insensitive);}
|
||||
|
||||
selection-background-color: $selected_bg_color;
|
||||
selected-color: $selected_fg_color;
|
||||
@extend %entry;
|
||||
|
||||
StIcon.capslock-warning {
|
||||
icon-size: 16px;
|
||||
icon-size: $base_icon_size;
|
||||
warning-color: $warning_color;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
@ -1,201 +0,0 @@
|
||||
/* Login Dialog */
|
||||
|
||||
.login-dialog-banner-view {
|
||||
padding-top: 24px;
|
||||
max-width: 23em;
|
||||
}
|
||||
|
||||
.login-dialog,
|
||||
.unlock-dialog {
|
||||
//reset
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
$_gdm_bg: $system_bg_color;
|
||||
|
||||
.modal-dialog-button-box { spacing: 3px; }
|
||||
.modal-dialog-button {
|
||||
padding: 4px 18px;
|
||||
background-color: darken($system_bg_color, 3%);
|
||||
border-color: darken($system_bg_color, 3%);
|
||||
color: $osd_fg_color;
|
||||
|
||||
$_hover_c: lighten($_gdm_bg, 5%);
|
||||
&:hover, &:focus {
|
||||
background-color: $_hover_c;
|
||||
border-color: $_hover_c;
|
||||
}
|
||||
&:active {
|
||||
$_active_c: darken($_gdm_bg, 5%);
|
||||
background-color: $_active_c;
|
||||
border-color: $_active_c;
|
||||
}
|
||||
&:insensitive {
|
||||
@include button(insensitive);
|
||||
border-color: darken($_gdm_bg, 5%);
|
||||
background-color: darken($_gdm_bg, 5%);
|
||||
color: transparentize($osd_fg_color, 0.3);
|
||||
}
|
||||
&:default {
|
||||
@include button(default);
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-button,
|
||||
.switch-user-button,
|
||||
.login-dialog-session-list-button {
|
||||
padding: 0;
|
||||
border-radius: 99px;
|
||||
width: $large_icon_size;
|
||||
height: $large_icon_size;
|
||||
border-color: darken($system_bg_color, 3%);
|
||||
background-color: darken($system_bg_color, 3%);
|
||||
|
||||
StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.caps-lock-warning-label,
|
||||
.login-dialog-message-warning {
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-logo-bin { padding: 24px 0px; }
|
||||
.login-dialog-banner { color: darken($osd_fg_color,10%); }
|
||||
.login-dialog-button-box { width: 23em; spacing: 5px; }
|
||||
.login-dialog-message { text-align: center; }
|
||||
.login-dialog-user-selection-box { padding: 100px 0px; }
|
||||
.login-dialog-not-listed-label {
|
||||
padding-left: 2px;
|
||||
.login-dialog-not-listed-button:focus &,
|
||||
.login-dialog-not-listed-button:hover & {
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-not-listed-label {
|
||||
@extend %caption;
|
||||
font-weight: bold;
|
||||
color: darken($osd_fg_color,30%);
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
|
||||
.login-dialog-auth-list {
|
||||
spacing: 6px;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.login-dialog-auth-list-title {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.login-dialog-auth-list-item {
|
||||
border-radius: $base_border_radius + 4px;
|
||||
padding: 6px;
|
||||
color: darken($osd_fg_color,30%);
|
||||
&:focus, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
|
||||
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
|
||||
.login-dialog-user-list {
|
||||
spacing: 12px;
|
||||
width: 23em;
|
||||
&:expanded .login-dialog-user-list-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
|
||||
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; }
|
||||
}
|
||||
|
||||
.login-dialog-user-list-item {
|
||||
border-radius: $base_border_radius + 4px;
|
||||
padding: 6px;
|
||||
color: darken($osd_fg_color,30%);
|
||||
&:ltr .user-widget { padding-right: 1em; }
|
||||
&:rtl .user-widget { padding-left: 1em; }
|
||||
.login-dialog-timed-login-indicator {
|
||||
height: 2px;
|
||||
margin-top: 6px;
|
||||
background-color: $osd_fg_color;
|
||||
}
|
||||
&:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
|
||||
}
|
||||
|
||||
.user-widget-label {
|
||||
color: $osd_fg_color;
|
||||
}
|
||||
|
||||
.user-widget.horizontal .user-widget-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; }
|
||||
}
|
||||
|
||||
.user-widget.vertical .user-widget-label {
|
||||
@include fontsize($base_font_size + 5);
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.login-dialog-timed-login-indicator {
|
||||
height: 2px;
|
||||
background-color: darken($fg_color,40%);
|
||||
}
|
||||
|
||||
.login-dialog-prompt-layout {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 12px;
|
||||
spacing: $base_padding * 2;
|
||||
width: 23em;
|
||||
}
|
||||
|
||||
.login-dialog-prompt-entry {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.login-dialog-prompt-label {
|
||||
color: darken($osd_fg_color, 20%);
|
||||
@include fontsize($base_font_size + 1);
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.login-dialog {
|
||||
StEntry {
|
||||
@if $variant=='dark' {
|
||||
$_gdm_entry_bg: darken($system_bg_color, 3%);
|
||||
background-color: $_gdm_entry_bg;
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom styling for unlock entry
|
||||
.unlock-dialog {
|
||||
StEntry {
|
||||
border:none !important;
|
||||
&:focus {
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
}
|
||||
&:insensitive {
|
||||
color: transparentize($fg_color, 0.5);
|
||||
background-color: transparentize($fg_color, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-button,
|
||||
.switch-user-button,
|
||||
.login-dialog-session-list-button {
|
||||
border-color: transparent;
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,283 @@
|
||||
$_gdm_bg: $system_bg_color;
|
||||
$_gdm_fg: white;
|
||||
$_gdm_dialog_width: 23em;
|
||||
|
||||
// common style for gdm and lockscreen
|
||||
.login-dialog,
|
||||
.unlock-dialog {
|
||||
|
||||
.caps-lock-warning-label,
|
||||
.login-dialog-message-warning {
|
||||
color: $_gdm_fg;
|
||||
}
|
||||
}
|
||||
|
||||
/* Login Dialog */
|
||||
.login-dialog {
|
||||
background-color: $_gdm_bg;
|
||||
}
|
||||
|
||||
// buttons
|
||||
.login-dialog-button {
|
||||
@extend .button;
|
||||
|
||||
&.cancel-button,
|
||||
&.switch-user-button,
|
||||
&.login-dialog-session-list-button {
|
||||
@extend .icon-button;
|
||||
}
|
||||
|
||||
&.cancel-button {
|
||||
padding: $base_padding*1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-button-box {
|
||||
width: $_gdm_dialog_width;
|
||||
spacing: $base_padding*2;
|
||||
}
|
||||
|
||||
.login-dialog-logo-bin {
|
||||
margin:3em 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
|
||||
.login-dialog-auth-list {
|
||||
spacing: 6px;
|
||||
margin-left: 2em;
|
||||
}
|
||||
.login-dialog-auth-list-title {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.login-dialog-auth-list-item {
|
||||
border-radius: $base_border_radius*2;
|
||||
padding: 4px;
|
||||
color: darken($_gdm_fg,30%);
|
||||
|
||||
&:focus, &:selected {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
|
||||
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
|
||||
|
||||
.login-dialog-user-list {
|
||||
spacing: 12px;
|
||||
width: $_gdm_dialog_width;
|
||||
|
||||
.login-dialog-user-list-item {
|
||||
border-radius: $base_border_radius + 4px;
|
||||
padding: $base_padding;
|
||||
background-color: transparentize($_gdm_fg, .95);
|
||||
color: $_gdm_fg;
|
||||
|
||||
@if $is_highcontrast {
|
||||
box-shadow:inset 0 0 0 1px $hc_inset_color;;
|
||||
}
|
||||
.user-widget .user-icon {
|
||||
border: 4px 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%); }
|
||||
}
|
||||
|
||||
&:logged-in {
|
||||
.user-widget .user-icon {
|
||||
border-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-dialog-prompt-layout {
|
||||
spacing: $base_padding*2;
|
||||
width: 26em;
|
||||
}
|
||||
|
||||
.login-dialog-prompt-entry {}
|
||||
|
||||
|
||||
/* Screen Shield */
|
||||
// a.k.a. the lockscreen
|
||||
|
||||
.unlock-dialog {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.screen-shield-background { // just the shadow, really
|
||||
background: black;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
#lockDialogGroup {
|
||||
background-color: $_gdm_bg;
|
||||
}
|
||||
|
||||
// Clock
|
||||
.unlock-dialog-clock {
|
||||
color: $_gdm_fg;
|
||||
spacing: 2em;
|
||||
|
||||
.unlock-dialog-clock-time {
|
||||
@extend %numeric;
|
||||
@include fontsize(72);
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.unlock-dialog-clock-date {
|
||||
@extend %title_1;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.unlock-dialog-clock-hint {
|
||||
margin-top: 2em;
|
||||
padding: $base_padding $base_padding*3;
|
||||
border-radius: $base_border_radius*2;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// Notifications
|
||||
#unlockDialogNotifications {
|
||||
StButton#vhandle, StButton#hhandle {
|
||||
background-color: transparentize($bg_color,0.7);
|
||||
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
|
||||
&:active { background-color: transparentize($selected_bg_color,0.5); }
|
||||
}
|
||||
}
|
||||
|
||||
.unlock-dialog-notifications-container {
|
||||
margin: 12px;
|
||||
spacing: 6px;
|
||||
width: $_gdm_dialog_width;
|
||||
background-color: transparent;
|
||||
|
||||
.summary-notification-stack-scrollview {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.notification,
|
||||
.unlock-dialog-notification-source {
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
background-color: transparentize($_gdm_fg,0.9);
|
||||
color: $_gdm_fg;
|
||||
border-radius: $modal_radius;
|
||||
|
||||
&.critical { background-color: transparentize($_gdm_fg,0.8) }
|
||||
}
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-label {
|
||||
padding-left: 12px;
|
||||
padding-right: 0;
|
||||
&:rtl { padding-right: 12px; padding-left: 0; }
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-count-text {
|
||||
font-weight: bold;
|
||||
padding: 0 12px;
|
||||
color: $_gdm_fg;
|
||||
background-color: transparentize($_gdm_fg, 0.9);
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
||||
|
||||
// User Widget
|
||||
.user-widget {
|
||||
|
||||
.user-widget-label {
|
||||
color: $_gdm_fg;
|
||||
}
|
||||
|
||||
// layout of the user list
|
||||
&.horizontal {
|
||||
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;
|
||||
|
||||
.user-widget-label {
|
||||
@extend %title_1;
|
||||
text-align: center;
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
icon-size: $base_icon_size*10;
|
||||
|
||||
& StIcon {
|
||||
padding: 32px;
|
||||
icon-size: $base_icon_size*4;
|
||||
background-color: transparentize($_gdm_fg, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,15 +2,22 @@
|
||||
|
||||
// Dialog
|
||||
#LookingGlassDialog {
|
||||
background-color: $osd_bg_color;
|
||||
background-color: transparentize($bg_color,0.05);
|
||||
border-radius: 0 0 $modal_radius $modal_radius;
|
||||
border: 1px solid $outer_borders_color;
|
||||
border-top-width: 0;
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
color: $osd_fg_color;
|
||||
color: $fg_color;
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border: 2px solid $hc_inset_color;
|
||||
background-color: $bg_color;
|
||||
border-top-width: 0;
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
& > #Toolbar {
|
||||
border: none;
|
||||
padding: $base_padding;
|
||||
@ -33,25 +40,8 @@
|
||||
.notebook-tab {
|
||||
-natural-hpadding: $base_padding*2;
|
||||
-minimum-hpadding: $base_padding*2;
|
||||
|
||||
font-weight: bold;
|
||||
@extend %button;
|
||||
padding: $base_padding $base_padding*2;
|
||||
color: darken($osd_fg_color, 15%);
|
||||
transition-duration: 100ms;
|
||||
box-shadow:none;
|
||||
border:none;
|
||||
border-radius: $base_border_radius - 2px;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: $osd_fg_color;
|
||||
background-color: transparentize($osd_fg_color, 0.95);
|
||||
}
|
||||
|
||||
&:selected {
|
||||
color: $osd_fg_color;
|
||||
background-color: transparentize($osd_fg_color, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
|
||||
@ -61,12 +51,8 @@
|
||||
.lg-dialog {
|
||||
|
||||
StEntry {
|
||||
background-color: transparentize(lighten($osd_bg_color, 5%), 0.4);
|
||||
color: $osd_fg_color;
|
||||
border-color: transparentize($osd_fg_color, 0.8);
|
||||
min-height: 22px;
|
||||
selection-background-color: $selected_bg_color;
|
||||
selected-color: $selected_fg_color;
|
||||
@extend %entry;
|
||||
}
|
||||
|
||||
.shell-link {
|
||||
@ -94,10 +80,10 @@
|
||||
}
|
||||
|
||||
.lg-obj-inspector-button {
|
||||
border: 1px solid $osd_borders_color;
|
||||
border: 1px solid $borders_color;
|
||||
padding: 4px;
|
||||
border-radius: $base_border_radius;
|
||||
&:hover { border: 1px solid #ffffff; }
|
||||
&:hover { border: 1px solid $fg_color; }
|
||||
}
|
||||
|
||||
// Extensions
|
||||
@ -123,8 +109,8 @@
|
||||
|
||||
// Inspector
|
||||
#LookingGlassPropertyInspector {
|
||||
background: $osd_bg_color;
|
||||
border: 1px solid $osd_borders_color;
|
||||
background: $bg_color;
|
||||
border: 1px solid $borders_color;
|
||||
border-radius: $base_border_radius;
|
||||
padding: $base_padding;
|
||||
}
|
||||
|
||||
@ -143,6 +143,11 @@
|
||||
border-radius: $base_border_radius;
|
||||
color: $fg_color;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border: 1px solid $hc_inset_color;
|
||||
margin: $base_padding*2 2px;
|
||||
}
|
||||
|
||||
// colors are lightened since the media controls are in a card
|
||||
&:hover {
|
||||
background-color: lighten($hover_bg_color, 5%);
|
||||
@ -154,7 +159,12 @@
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:insensitive { color: lighten($insensitive_fg_color, 5%); }
|
||||
&:insensitive {
|
||||
color: lighten($insensitive_fg_color, 5%);
|
||||
@if $is_highcontrast {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// fix margin for last button
|
||||
&:last-child:ltr { margin-right: $base_margin*3; }
|
||||
|
||||
@ -10,9 +10,6 @@
|
||||
color: $osd_fg_color;
|
||||
border-radius: 99px;
|
||||
icon-size: $base_icon_size * 4; // 64px
|
||||
&:hover {
|
||||
color: lighten($osd_fg_color,30%);
|
||||
}
|
||||
|
||||
& StIcon {
|
||||
background-color: transparentize($osd_fg_color,0.95);
|
||||
@ -22,25 +19,16 @@
|
||||
}
|
||||
|
||||
&.user-avatar {
|
||||
border: 2px $osd_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.user-widget.vertical .user-icon {
|
||||
icon-size: $base_icon_size * 6; // 128px
|
||||
|
||||
& StIcon {
|
||||
padding: $base_padding * 3 + 2px; // 20px
|
||||
padding-top: $base_padding * 3; // 18 px
|
||||
padding-bottom: $base_padding * 3 + 4px; // 22px
|
||||
width: $base_icon_size * 5.5; height: $base_icon_size * 5.5; // 88px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox { background-color: black; }
|
||||
.flashspot { background-color: white; }
|
||||
|
||||
|
||||
// Hidden
|
||||
.hidden { color: rgba(0,0,0,0);}
|
||||
|
||||
|
||||
@ -41,6 +41,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
&.screen-recording-indicator {
|
||||
box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
|
||||
}
|
||||
|
||||
&.screen-sharing-indicator {
|
||||
box-shadow: inset 0 0 0 100px $warning_color;
|
||||
StBoxLayout { margin: 0 $base_padding; }
|
||||
@ -94,7 +95,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
|
||||
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
|
||||
&.clock-display {
|
||||
@ -174,7 +175,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
|
||||
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
|
||||
&.clock-display {
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
/* Popovers/Menus */
|
||||
|
||||
$menu_bg_color: $bg_color;
|
||||
$menuitem_bg_color: lighten($menu_bg_color, 4%);
|
||||
$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
|
||||
@ -19,45 +25,27 @@
|
||||
// popover content
|
||||
.popup-menu-content {
|
||||
padding: $base_padding;
|
||||
border-radius: $modal_radius*1.25;
|
||||
border: 1px solid $borders_edge;
|
||||
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||
background-color: $bg_color;
|
||||
border-radius: $modal_radius*1.25;
|
||||
border: 1px solid $outer_borders_color;
|
||||
box-shadow: 0 2px 4px 0 $shadow_color;
|
||||
}
|
||||
|
||||
// menu items
|
||||
.popup-menu-item {
|
||||
padding: $base_padding*1.5 $base_padding*2;
|
||||
border-radius: $base_border_radius*1.5;
|
||||
spacing: $base_padding;
|
||||
transition-duration: 100ms;
|
||||
background-color: transparent;
|
||||
@include menuitem($bg:$menu_bg_color);
|
||||
|
||||
&:ltr {padding-left: $base_padding;}
|
||||
&:rtl {padding-right: $base_padding;}
|
||||
|
||||
&:focus, &:hover {
|
||||
background-color: $hover_bg_color !important;
|
||||
&:active { background-color: $active_bg_color !important;}
|
||||
}
|
||||
|
||||
&:checked {background-color: $checked_bg_color !important;}
|
||||
border-radius: $menuitem_border_radius;
|
||||
|
||||
&:checked {
|
||||
margin-bottom: 0;
|
||||
box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%);
|
||||
border-radius: $base_border_radius $base_border_radius 0 0;
|
||||
&:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;}
|
||||
&:active { background-color: lighten($checked_bg_color, 5%) !important;}
|
||||
}
|
||||
border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important;
|
||||
|
||||
&:active {
|
||||
background-color: lighten($active_bg_color, 5%);
|
||||
color: $active_fg_color;
|
||||
@if $is_highcontrast {
|
||||
border: 1px solid $hc_inset_color;
|
||||
border-bottom-width:0;
|
||||
}
|
||||
}
|
||||
|
||||
&:insensitive {color: transparentize($fg_color,0.5);}
|
||||
|
||||
// add margin to switches in menu items
|
||||
.toggle-switch {
|
||||
&:ltr { margin-left: $base_margin;}
|
||||
@ -78,14 +66,14 @@
|
||||
icon-size: 16px !important; // for some reason the variable doesn't work here
|
||||
}
|
||||
|
||||
.popup-menu-arrow {
|
||||
}
|
||||
|
||||
|
||||
// popover submenus
|
||||
.popup-sub-menu {
|
||||
background-color: $checked_bg_color;
|
||||
border-radius: 0 0 $base_border_radius $base_border_radius;
|
||||
border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px;
|
||||
margin-bottom: $base_padding;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border: 1px solid $hc_inset_color;
|
||||
}
|
||||
|
||||
.popup-menu-ornament {
|
||||
min-width: $base_icon_size !important;
|
||||
@ -94,18 +82,13 @@
|
||||
// submenu specific styles
|
||||
.popup-menu-item {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
@include menuitem($bg:$submenu_bg_color, $flat:false);
|
||||
border-top-width:0;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 $base_border_radius $base_border_radius;
|
||||
border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius;
|
||||
border-bottom-width:0;
|
||||
}
|
||||
|
||||
&:focus,&:hover { background-color: $hover_bg_color !important;}
|
||||
&:checked {
|
||||
background-color: $checked_bg_color !important;
|
||||
&:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
|
||||
}
|
||||
&:active { background-color: $active_bg_color !important;}
|
||||
}
|
||||
|
||||
.popup-menu-section {
|
||||
@ -113,7 +96,7 @@
|
||||
&:hover,&:focus { border-radius: 0;}
|
||||
}
|
||||
&:last-child .popup-menu-item:last-child {
|
||||
border-radius: 0 0 $base_border_radius $base_border_radius;
|
||||
border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -130,10 +113,7 @@
|
||||
|
||||
// separator
|
||||
.popup-separator-menu-item {
|
||||
margin: 6px 0;
|
||||
padding:0 !important;
|
||||
&:ltr { margin-right: $base_margin;}
|
||||
&:rtl { margin-left: $base_margin;}
|
||||
border:none !important;
|
||||
|
||||
.popup-separator-menu-item-separator {
|
||||
height: 1px; //not really the whole box
|
||||
@ -153,7 +133,7 @@
|
||||
&:rtl { margin-left: 2.5em;}
|
||||
|
||||
.popup-separator-menu-item-separator {
|
||||
background-color: lighten($borders_color, 7%);
|
||||
background-color: $borders_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,16 +12,18 @@
|
||||
spacing-columns: $base_padding*2;
|
||||
}
|
||||
|
||||
.quick-toggle {
|
||||
.quick-toggle, .quick-menu-toggle {
|
||||
border-radius: 99px;
|
||||
min-width: 12em;
|
||||
max-width: 12em;
|
||||
min-height: 40px;
|
||||
min-height: 48px;
|
||||
border:none;
|
||||
}
|
||||
|
||||
&:checked { @include button(default); }
|
||||
.quick-toggle {
|
||||
&:checked { @include button(default, $c:$selected_bg_color); }
|
||||
|
||||
& > StBoxLayout { spacing: $base_padding; }
|
||||
& > StBoxLayout { spacing: $base_padding*1.5; }
|
||||
|
||||
/* Move padding into the box; this is to allow menu arrows
|
||||
to extend to the border */
|
||||
@ -30,40 +32,63 @@
|
||||
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
|
||||
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
|
||||
|
||||
.quick-toggle-label { font-weight: bold; }
|
||||
.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
|
||||
.quick-toggle-title { font-weight: bold; }
|
||||
|
||||
& StBoxLayout > .quick-toggle-subtitle {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quick-toggle-icon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.quick-menu-toggle {
|
||||
&:ltr > StBoxLayout { padding-right: 0; }
|
||||
&:rtl > StBoxLayout { padding-left: 0; }
|
||||
& .quick-toggle {
|
||||
min-width: auto;
|
||||
max-width: auto;
|
||||
|
||||
&:ltr { border-radius: 99px 0 0 99px; }
|
||||
&:rtl { border-radius: 0 99px 99px 0; }
|
||||
|
||||
&:ltr:last-child { border-radius: 99px; }
|
||||
&:rtl:last-child { border-radius: 99px; }
|
||||
}
|
||||
|
||||
& .quick-toggle-arrow {
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
padding: $base_padding $base_padding*1.75;
|
||||
border-width: 0;
|
||||
|
||||
&:ltr { border-radius: 0 99px 99px 0; }
|
||||
&:rtl { border-radius: 99px 0 0 99px; }
|
||||
&:checked {
|
||||
@include button(default, $c:$selected_bg_color);
|
||||
border-color: $selected_borders_color;
|
||||
}
|
||||
|
||||
&:ltr {
|
||||
border-radius: 0 99px 99px 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
&:rtl {
|
||||
border-radius: 99px 0 0 99px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-slider {
|
||||
padding: 0 $base_padding;
|
||||
|
||||
& > StBoxLayout { spacing: $base_padding; }
|
||||
|
||||
.icon-button { padding: $base_padding; }
|
||||
|
||||
.slider-bin {
|
||||
&:focus {@include button(focus);}
|
||||
min-height: 16px; // slider size
|
||||
padding: $base_padding;
|
||||
border-radius: 99px;
|
||||
}
|
||||
.quick-toggle-icon { icon-size: $base_icon_size; }
|
||||
.icon-button { background-color: transparent; }
|
||||
}
|
||||
|
||||
.quick-toggle-menu {
|
||||
background-color: $card_bg_color;
|
||||
@include card;
|
||||
border-radius: $base_border_radius*3;
|
||||
padding: $base_padding*2;
|
||||
margin: $base_padding*2 $base_padding*3 0;
|
||||
@ -79,9 +104,9 @@
|
||||
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
|
||||
border-radius: 999px;
|
||||
padding: 1.5 * $base_padding;
|
||||
background-color: lighten($bg_color, 10%);
|
||||
background-color: transparentize($fg_color, 0.8);
|
||||
|
||||
&.active { background-color: $selected_bg_color; }
|
||||
&.active { background-color: $selected_bg_color;}
|
||||
}
|
||||
|
||||
& .title {
|
||||
@ -100,8 +125,6 @@
|
||||
.quick-settings-system-item {
|
||||
& > StBoxLayout { spacing: 2 * $base_padding; }
|
||||
|
||||
.icon-button > StIcon { -st-icon-style: symbolic; }
|
||||
|
||||
& .power-item {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
@ -116,3 +139,40 @@
|
||||
.nm-network-item {
|
||||
.wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
|
||||
}
|
||||
|
||||
.bt-device-item {
|
||||
.popup-menu-icon { -st-icon-style: symbolic; }
|
||||
}
|
||||
|
||||
.bt-menu-placeholder {
|
||||
@extend %title_4;
|
||||
text-align: center;
|
||||
|
||||
padding: 2em 4em;
|
||||
}
|
||||
|
||||
.device-subtitle { color: transparentize($fg_color, 0.5); }
|
||||
|
||||
// background apps
|
||||
|
||||
.background-apps-quick-toggle {
|
||||
min-height: 40px;
|
||||
background-color: transparent;
|
||||
|
||||
& StIcon { icon-size: $base_icon_size !important; }
|
||||
}
|
||||
|
||||
.background-app-item {
|
||||
& .title { @extend %heading; }
|
||||
& .subtitle { @extend %caption; }
|
||||
& .popup-menu-icon {
|
||||
icon-size: $large_icon_size !important;
|
||||
-st-icon-style: regular !important;
|
||||
}
|
||||
& .close-button {
|
||||
@extend .icon-button;
|
||||
padding: $base_padding;
|
||||
}
|
||||
|
||||
&.popup-inactive-menu-item { color: $fg_color; }
|
||||
}
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
/* Screen Shield */
|
||||
|
||||
.unlock-dialog-clock {
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
spacing: 24px;
|
||||
padding-bottom: 2.5em;
|
||||
}
|
||||
|
||||
.unlock-dialog-clock-time {
|
||||
font-size: 64pt;
|
||||
padding-top: 42px;
|
||||
@extend %numeric;
|
||||
}
|
||||
|
||||
.unlock-dialog-clock-date {
|
||||
font-size: 16pt;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.unlock-dialog-clock-hint {
|
||||
font-weight: normal;
|
||||
padding-top: 48px;
|
||||
}
|
||||
|
||||
.unlock-dialog-notifications-container {
|
||||
margin: 12px;
|
||||
spacing: 6px;
|
||||
width: 23em;
|
||||
background-color: transparent;
|
||||
|
||||
.summary-notification-stack-scrollview {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.notification,
|
||||
.unlock-dialog-notification-source {
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
background-color: transparentize($osd_fg_color,0.9);
|
||||
color: $osd_fg_color;
|
||||
border-radius: $modal_radius;
|
||||
|
||||
&.critical { background-color: transparentize($osd_fg_color,0.8) }
|
||||
}
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-label {
|
||||
padding-left: 12px;
|
||||
padding-right: 0;
|
||||
&:rtl { padding-right: 12px; padding-left: 0; }
|
||||
}
|
||||
|
||||
.unlock-dialog-notification-count-text {
|
||||
font-weight: bold;
|
||||
padding: 0 12px;
|
||||
color: $osd_fg_color;
|
||||
background-color: transparentize($osd_fg_color, 0.9);
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
||||
.screen-shield-background { //just the shadow, really
|
||||
background: black;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
#lockDialogGroup {
|
||||
background-color: $system_bg_color;
|
||||
}
|
||||
#unlockDialogNotifications {
|
||||
StButton#vhandle, StButton#hhandle {
|
||||
background-color: transparentize($bg_color,0.7);
|
||||
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
|
||||
&:active { background-color: transparentize($selected_bg_color,0.5); }
|
||||
}
|
||||
}
|
||||
@ -1,24 +1,11 @@
|
||||
// Search entry
|
||||
|
||||
$search_entry_width: 320px;
|
||||
$search_entry_height: 36px;
|
||||
|
||||
%search_entry,
|
||||
.search-entry {
|
||||
border-radius: $search_entry_height * 0.5; // half the height
|
||||
|
||||
margin-top: $base_padding * 2;
|
||||
border-radius: 99px;
|
||||
margin-top: $base_padding*2;
|
||||
margin-bottom: $base_padding;
|
||||
padding: $base_padding+1 $base_padding+3;
|
||||
width: $search_entry_width;
|
||||
|
||||
@include entry(normal);
|
||||
&:hover { @include entry(hover);}
|
||||
&:focus { @include entry(focus);}
|
||||
&:insensitive { @include entry(insensitive);}
|
||||
width: 24em;
|
||||
|
||||
.search-entry-icon {
|
||||
color: inherit;
|
||||
icon-size: $base_icon_size;
|
||||
margin-top: 2px; // center vertically
|
||||
padding: 0 4px;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
spacing: $base_padding*3;
|
||||
|
||||
// separator (unstyled)
|
||||
.search-section-separator {
|
||||
.search-section-separator {
|
||||
height: $base_margin*2; // use it as a spacer
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -25,7 +25,7 @@
|
||||
.search-section-content {
|
||||
background-color: lighten($system_bg_color, 5%);
|
||||
border-radius: $modal_radius*1.5;
|
||||
border: 1px solid $osd_outer_borders_color;
|
||||
box-shadow:inset 0 0 0 1px solid $outer_borders_color;
|
||||
color: $osd_fg_color;
|
||||
padding: $base_padding*2;
|
||||
margin:0 $base_margin*3;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
/* App Switcher */
|
||||
|
||||
// same as dash
|
||||
$switcher_padding: $base_padding + 4px; // 10px
|
||||
$switcher_border_radius: $modal_radius + 8px;
|
||||
$switcher_padding: $base_padding*2;
|
||||
|
||||
|
||||
// the full screen container of the switcher
|
||||
@ -15,8 +14,8 @@ $switcher_border_radius: $modal_radius + 8px;
|
||||
.switcher-list {
|
||||
@extend %osd_panel;
|
||||
padding: $switcher_padding;
|
||||
border-radius: $switcher_border_radius;
|
||||
box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
|
||||
border-radius: $modal_radius+$switcher_padding;
|
||||
box-shadow: 0 8px 8px 0 $shadow_color;
|
||||
|
||||
// container for items in list
|
||||
.switcher-list-item-container {
|
||||
@ -28,6 +27,9 @@ $switcher_border_radius: $modal_radius + 8px;
|
||||
@include tile_button($osd_fg_color);
|
||||
// override over 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);
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
|
||||
@ -17,10 +17,7 @@ $window_close_button_padding: 3px;
|
||||
|
||||
// Window titles
|
||||
.window-caption {
|
||||
color: $osd_fg_color;
|
||||
background-color: lighten($osd_bg_color, 5%);
|
||||
border-radius: 99px;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
@extend %tooltip;
|
||||
}
|
||||
|
||||
// Close button
|
||||
@ -43,6 +40,10 @@ $window_close_button_padding: 3px;
|
||||
&:active {
|
||||
background-color: lighten($window_close_button_color, 13%);
|
||||
}
|
||||
|
||||
@if $is_highcontrast {
|
||||
border:2px solid $outer_borders_color;
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-background {
|
||||
|
||||
@ -7,8 +7,14 @@
|
||||
padding: $base_padding;
|
||||
|
||||
.workspace-thumbnail {
|
||||
@extend %overview_panel;
|
||||
border-radius: 3px;
|
||||
color: $osd_fg_color;
|
||||
background-color: lighten($system_bg_color, 10%);
|
||||
border-radius: $base_border_radius*0.5;
|
||||
border: 1px solid transparent;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
}
|
||||
|
||||
// drag and drop indicator
|
||||
@ -22,7 +28,5 @@
|
||||
// selected indicator
|
||||
.workspace-thumbnail-indicator {
|
||||
border: 3px solid $selected_bg_color;
|
||||
border-radius: 3px;
|
||||
padding: 0px;
|
||||
// background-color: transparentize($selected_bg_color, 0.9);
|
||||
border-radius: $base_border_radius;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ GREEN='\033[0;32m'
|
||||
YELLOW='\033[0;33m'
|
||||
RESET='\033[0m'
|
||||
|
||||
VERSION=43.rc
|
||||
VERSION=44.rc
|
||||
|
||||
echo
|
||||
printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n"
|
||||
@ -42,7 +42,7 @@ done <<- EOF
|
||||
gnome-shell-sass/widgets/_hotplug.scss
|
||||
gnome-shell-sass/widgets/_ibus-popup.scss
|
||||
gnome-shell-sass/widgets/_keyboard.scss
|
||||
gnome-shell-sass/widgets/_login-dialog.scss
|
||||
gnome-shell-sass/widgets/_login-lock.scss
|
||||
gnome-shell-sass/widgets/_looking-glass.scss
|
||||
gnome-shell-sass/widgets/_message-list.scss
|
||||
gnome-shell-sass/widgets/_misc.scss
|
||||
@ -52,7 +52,6 @@ done <<- EOF
|
||||
gnome-shell-sass/widgets/_panel.scss
|
||||
gnome-shell-sass/widgets/_popovers.scss
|
||||
gnome-shell-sass/widgets/_quick-settings.scss
|
||||
gnome-shell-sass/widgets/_screen-shield.scss
|
||||
gnome-shell-sass/widgets/_screenshot.scss
|
||||
gnome-shell-sass/widgets/_scrollbars.scss
|
||||
gnome-shell-sass/widgets/_search-entry.scss
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user