theme: base of the refactor

- split _common.scss into widgets
- improve _drawing functions
- minify SVG assets

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/904
This commit is contained in:
Sam Hewitt 2019-12-18 16:25:03 -05:00 committed by Florian Müllner
parent eb2ebd2bf9
commit 9ea745bcd4
47 changed files with 7625 additions and 2988 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -6,11 +6,11 @@ $variant: 'light';
//force symbolic icons //force symbolic icons
stage { stage {
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
.toggle-switch { width: 48px; } .toggle-switch { width: 48px; }
.toggle-switch-us, .toggle-switch-intl { .toggle-switch-us, .toggle-switch-intl {
background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg"); 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"); } &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
} }

View File

@ -1,16 +1,15 @@
// When color definition differs for dark and light variant, // When color definition differs for dark and light variant,
// it gets @if ed depending on $variant // it gets @if ed depending on $variant
$base_color: if($variant == 'light', #fff, lighten(desaturate(#241f31, 20%), 2%));
$base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 20%), 2%));
$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%)); $bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
$fg_color: if($variant == 'light', #2e3436, #eeeeec); $fg_color: if($variant == 'light', #2e3436, #eeeeec);
$selected_fg_color: #ffffff; $selected_fg_color: #fff;
$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%)); $selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%)); $borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%));
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93)); $borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93));
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); $link_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%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
$top_hilight: $borders_edge; $top_hilight: $borders_edge;
@ -20,21 +19,20 @@ $error_color: #ff8080;
$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%)); $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%)); $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
$osd_fg_color: #eeeeec; $osd_fg_color: $fg_color;
$osd_text_color: white; $osd_text_color: if($variant == 'light', #000, #fff);
$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04); $osd_bg_color: if($variant == 'light', rgba(255,255,255,0.9), transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04));
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); $osd_insensitive_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_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
$osd_borders_color: transparentize(black, 0.3); $osd_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.7));
$osd_outer_borders_color: transparentize(white, 0.84); $osd_outer_borders_color: if($variant == 'light', rgba(0,0,0,0.1), lighten($osd_bg_color, 7%));
$tooltip_borders_color: $osd_outer_borders_color; $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
$shadow_color: transparentize(black, 0.9);
//insensitive state derived colors //insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $base_color, 60%); $insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: $borders_color; $insensitive_borders_color: mix($borders_color, $base_color, 60%);
//colors for the backdrop state, derived from the main colors. //colors for the backdrop state, derived from the main colors.
$backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%)); $backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%));
@ -42,4 +40,4 @@ $backdrop_bg_color: $bg_color;
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%); $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,15%)); $backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,15%));
$backdrop_borders_color: mix($borders_color, $bg_color, 90%); $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%); $backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);

File diff suppressed because it is too large Load Diff

View File

@ -2,25 +2,25 @@
// generic drawing of more complex things // generic drawing of more complex things
@function _widget_edge($c:$borders_edge) { @function draw_widget_edge($c:$borders_edge) {
// outer highlight "used" on most widgets // outer highlight "used" on most widgets
@return 0 1px $c; @return 0 1px $c;
} }
// provide font size in rem, with px fallback // provide font size in rem, with px fallback
@mixin fontsize($size: 24, $base: 16) { @mixin fontsize($size: 24, $base: 16) {
font-size: round($size) + pt; font-size: round($size) + pt;
//font-size: ($size / $base) * 1rem; //font-size: ($size / $base) * 1rem;
} }
@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { @mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
// //
// Helper function to stack up to 4 box-shadows; // Helper function to stack up to 4 box-shadows;
// //
@if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
@else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
@else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
@else { box-shadow: $shadow1; } @else { box-shadow: $shadow1; }
} }
// entries // entries
@ -31,63 +31,65 @@
// //
// $t: entry type // $t: entry type
// $fc: focus color // $fc: focus color
// $edge: set to none to not draw the bottom edge or specify a color to not // $edge: set to none to not draw the bottom edge or specify a color to not use the default one
// use the default one
// //
// possible $t values: // possible $t values:
// normal, focus, insensitive // normal, focus, insensitive
// //
@if $t==normal { @if $t==normal {
background-color: $base_color; background-color: $base_color;
border-color: $borders_color; border-color: $borders_color;
} }
@if $t==focus { @if $t==focus {
border-color: if($fc==$selected_bg_color, border-color: if($fc==$selected_bg_color,
$selected_borders_color, $selected_borders_color,
darken($fc,35%)); darken($fc,35%));
} }
@if $t==hover { } @if $t==hover { }
@if $t==insensitive { @if $t==insensitive {
color: $insensitive_fg_color; color: $insensitive_fg_color;
border-color: $insensitive_bg_color; border-color: $insensitive_bg_color;
box-shadow: none; box-shadow: none;
} }
} }
// buttons // buttons
@function _border_color ($c) { @return darken($c,25%); } // colored buttons want @function draw_border_color ($c) {
// the border form the //
// base color // colored buttons want the border form the base color
//
@return if($variant == 'light', darken($c, 18%), darken($c, 4%));
}
@function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) { @function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
// //
// calculate the color of text shadows // calculate the color of text shadows
// //
// $tc is the text color // $tc is the text color
// $bg is the background color // $bg is the background color
// //
$_lbg: lightness($bg)/100%; $lbg: lightness($bg)/100%;
@if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); } @if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); }
@else { @return transparentize(black,$_lbg*0.8); } @else { @return rgba(0,0,0,1-$lbg*0.8); }
} }
@function _button_hilight_color($c) { @function draw_button_hilight_color($c) {
// //
// calculate the right top hilight color for buttons // calculate the right top hilight color for buttons
// //
// $c: base color; // $c: base color;
// //
@if lightness($c)>90% { @return white; } @if lightness($c)>90% { @return white; }
@else if lightness($c)>80% { @return transparentize(white, 0.3); } @else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
@else if lightness($c)>50% { @return transparentize(white, 0.5); } @else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
@else if lightness($c)>40% { @return transparentize(white, 0.7); } @else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
@else { @return transparentize(white, 0.9); } @else { @return rgba(255,255,255, 0.1); }
} }
@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { @mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
// //
// helper function for the text emboss effect // helper function for the text emboss effect
// //
@ -96,16 +98,16 @@
// TODO: this functions needs a way to deal with special cases // TODO: this functions needs a way to deal with special cases
// //
$_shadow: _text_shadow_color($tc, $bg); $shadow: draw_text_shadow_color($tc, $bg);
@if lightness($tc)<50% { @if lightness($tc)<50% {
text-shadow: 0 1px $_shadow; text-shadow: 0 1px $shadow;
icon-shadow: 0 1px $_shadow; icon-shadow: 0 1px $shadow;
} }
@else { @else {
text-shadow: 0 -1px $_shadow; text-shadow: 0 -1px $shadow;
icon-shadow: 0 -1px $_shadow; icon-shadow: 0 -1px $shadow;
} }
} }
@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) { @mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) {
@ -124,79 +126,75 @@
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
// //
$_hilight_color: _button_hilight_color($c); $hilight_color: draw_button_hilight_color($c);
$_button_edge: if($edge == none, none, _widget_edge($edge)); $button_edge: if($edge == none, none, draw_widget_edge($edge));
$_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); $blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
$_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
@if $t==normal { // normal button
// @if $t==normal {
// normal button color: $tc;
// background-color: lighten($c, 3%) !important;
border-width: 1px;
border-style: solid;
border-color: draw_border_color($c);
@include draw_shadows(0 1px 1px 0 $shadow_color);
// box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
text-shadow: 0 1px $text_shadow_color;
icon-shadow: 0 1px $text_shadow_color;
}
color: $tc; // focused button
background-color: $c; @if $t==focus {
border-color: $borders_color; color: $tc;
box-shadow: $_button_shadow; text-shadow: 0 1px $text_shadow_color;
text-shadow: 0 1px black; icon-shadow: 0 1px $text_shadow_color;
icon-shadow: 0 1px black; box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.7);
} //border-color: $selected_bg_color;
@if $t==focus { }
//
// focused button
//
color: $tc;
text-shadow: 0 1px black;
icon-shadow: 0 1px black;
box-shadow: inset 0px 0px 0px 2px $selected_bg_color;
//border-color: $selected_bg_color;
}
@else if $t==hover { // hover osd button
// @else if $t==hover {
// active osd button color: $tc;
// background-color: lighten($c, if($variant == 'light', 8%, 5%)) !important;
color: $tc; border-width: 1px;
border-color: $borders_color; border-style: solid;
background-color: $c; border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
box-shadow: $_button_shadow; @include draw_shadows(0 1px 1px 0 $shadow_color);
text-shadow: 0 1px black; text-shadow: 0 1px $text_shadow_color;
icon-shadow: 0 1px black; icon-shadow: 0 1px $text_shadow_color;
}
} // active osd button
@else if $t==active { @else if $t==active {
// color: $tc;
// active osd button background-color: darken($c,3%) !important;
// border-width: 1px;
color: $tc; border-style: solid;
border-color: $borders_color; border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
background-color: $c; text-shadow: none;
text-shadow: none; icon-shadow: none;
icon-shadow: none; box-shadow: none;
box-shadow: none; }
}
@else if $t==insensitive {
color: $insensitive_fg_color; // insensitive button
border-color: $insensitive_borders_color; @else if $t==insensitive {
background-color: $insensitive_bg_color; color: $insensitive_fg_color;
box-shadow: none; border-width: 1px;
text-shadow: none; border-style: solid;
icon-shadow: none; border-color: $insensitive_borders_color;
} background-color: $insensitive_bg_color !important;
@else if $t==undecorated { box-shadow: none;
// text-shadow: none;
// reset icon-shadow: none;
// }
border-color: transparent;
background-color: transparent;
background-image: none;
@include _shadows(inset 0 1px transparentize(white,1),
$_blank_edge);
text-shadow: none;
icon-shadow: none;
}
}
// reset
@else if $t==undecorated {
border-color: transparent;
background-color: transparent;
background-image: none;
@include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
text-shadow: none;
icon-shadow: none;
}
}

View File

@ -22,11 +22,10 @@ $destructive_color: darken(#ef2929,10%);
$osd_fg_color: #eeeeec; $osd_fg_color: #eeeeec;
$osd_bg_color: #2e3436; $osd_bg_color: #2e3436;
$osd_borders_color: transparentize(black, 0.3); $osd_borders_color: rgba(0,0,0, 0.7);
$osd_outer_borders_color: transparentize(white, 0.9); $osd_outer_borders_color: rgba(255,255,255, 0.1);
$tooltip_borders_color: $osd_outer_borders_color; $shadow_color: rgba(0,0,0, 0.1);
$shadow_color: transparentize(black, 0.9);
//insensitive state derived colors //insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_fg_color: mix($fg_color, $bg_color, 50%);

View File

@ -0,0 +1,209 @@
/* App Grid */
$app_icon_size: 96px;
$app_icon_padding: 20px;
// app icons
.icon-grid {
spacing: 30px;
-shell-grid-horizontal-item-size: $app_icon_size + $app_icon_padding * 2;
-shell-grid-vertical-item-size: $app_icon_size + $app_icon_padding * 2;
.overview-icon {
icon-size: $app_icon_size;
}
}
//.app-display { spacing: 20px; }
/* App Icons */
$app_grid_fg_color: #fff;
// Outline for low res icons
.lowres-icon {
icon-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
// Dropshadow for large icons
.icon-dropshadow {
icon-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
// Icon tiles in the app grid
.app-well-app,
.app-folder {
.overview-icon {
@extend %icon_tile;
color: $app_grid_fg_color !important;
}
&:hover,
&:selected {
.overview-icon {
background-color: transparentize($osd_bg_color,0.7);
color: $app_grid_fg_color;
}
}
&:hover .overview-icon,
&:focus .overview-icon,
&:selected .overview-icon {
background-color: transparentize($osd_fg_color,0.9);
color: $osd_fg_color;
}
&:focus {
.overview-icon {
background-color: transparentize($osd_fg_color,0.7 );
// border-color: $selected_bg_color;
color: $app_grid_fg_color;
}
}
&:drop {
.overview-icon {
background-color: transparentize($selected_bg_color,.15);
}
}
&:active,
&:checked {
.overview-icon {
background-color: transparentize(darken($osd_bg_color,10%), 0.5);
}
}
}
/* App Folders */
.app-folder {
.overview-icon {
@extend %icon_tile;
}
}
//expanded folder
.app-folder-popup {
-arrow-border-radius: 8px;
-arrow-background-color: transparentize(darken($osd_bg_color,10%), 0.5);
-arrow-base: 24px;
-arrow-rise: 11px;
}
.app-folder-popup-bin { padding: 5px; }
.app-folder-icon {
padding: $base_padding;
spacing-rows: $base_spacing;
spacing-columns: $base_spacing;
}
// Running app indicator (also shown in dash)
.app-well-app-running-dot {
height: 5px;
width: 5px;
border-radius:5px;
background-color: $osd_fg_color;
margin-bottom: 1px;
}
// Rename popup for app folders
.rename-folder-popup {
.rename-folder-popup-item {
spacing: $base_spacing;
&:ltr, &:rtl { padding: 0, $base_padding * 2; }
}
}
// right-click app menu
.app-menu,
.app-well-menu {
max-width: 27.25em;
}
// App Grid pagination indicators
.page-indicator {
padding: 15px 20px;
.page-indicator-icon {
width: 12px;
height: 12px;
background-color: transparent;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 12px;
}
&:hover .page-indicator-icon { border-color: white; }
&:active .page-indicator-icon { border: none; margin: 2px; background-color: white; }
&:checked .page-indicator-icon,
&:checked:active .page-indicator-icon { background-color: white;}
}
// Some hacks I don't even know
.all-apps,
.frequent-apps > StBoxLayout {
// horizontal padding to make sure scrollbars or dash don't overlap content
padding: 0px 88px 10px 88px;
}
.app-well-app > .overview-icon.overview-icon-with-label {
padding: 10px 8px 5px 8px;
spacing: $base_spacing;
}
// Label when no frequent apps
.no-frequent-applications-label { @extend %status_text; }
// shutdown and other actions in the grid
.system-action-icon {
background-color: rgba(0,0,0,0.8);
color: #fff;
border-radius: 50%;
icon-size: $app_icon_size * 0.5;
}
/* Frequent | All toggle */
// container
.app-view-controls {
padding-bottom: 32px;
}
// buttons
.app-view-control {
padding: 4px 32px;
margin: 0;
background-color: transparentize($osd_bg_color, 0.5);
border-width: 1px;
color: darken($osd_fg_color, 25%);
&:hover {
background-color: transparentize($osd_bg_color, 0.5) !important;
box-shadow:none !important;
color: darken($osd_fg_color, 25%);
}
&:active {
box-shadow: inset 0 -2px 0 0 $osd_fg_color;
background-color: transparentize($selected_bg_color, 0.5) !important;
font-weight: bold;
}
&:checked {
background-color: transparentize(lighten($osd_bg_color, 20%), 0.5);
color: $osd_fg_color;
box-shadow: none;
font-weight: bold;
}
&:first-child {
border-right-width: 0 !important;
border-radius: $base_border_radius 0 0 $base_border_radius;
}
&:last-child {
border-radius: 0 $base_border_radius $base_border_radius 0;
}
}

View File

@ -0,0 +1,55 @@
/* App Switcher */
.switcher-popup {
padding: 8px;
spacing: $base_spacing * 4;
}
// switcher onscreen panel
.switcher-list {
@extend %osd_panel;
.item-box {
padding: 8px;
border-radius: $base_border_radius + 1px;
border: 1px solid transparent;
&:outlined {
border: 1px solid darken($borders_color,5%);
background-color: transparentize($osd_fg_color, 0.9);
box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.4);
}
&:selected {
background-color: transparentize($osd_fg_color, 0.9);
color: $osd_fg_color;
}
}
// window thumbnails
.thumbnail-box {
padding: 2px;
spacing: $base_spacing;
}
.thumbnail {
width: 256px;
}
.separator {
width: 1px;
background: $borders_color;
}
.switcher-list-item-container {
spacing: $base_spacing * 2;
}
}
.switcher-arrow {
border-color: rgba(0,0,0,0);
color: transparentize($fg_color,0.2);
&:highlighted {
color: $fg_color;
}
}

View File

@ -0,0 +1,5 @@
/* Buttons */
.button {
@extend %button; // that's it
}

View File

@ -0,0 +1,268 @@
/* Date/Time Menu */
// overall menu
#calendarArea {
padding:0;
margin:0;
}
// Calendar menu side column
.datemenu-calendar-column {
spacing: 0;
border: 0 solid $bubble_borders_color;
padding: $base_padding + $base_margin;
padding-bottom: 3em; // account for the notifications clear button
padding-top:0;
&:ltr { border-left-width: 1px; }
&:rtl { border-right-width: 1px; }
// today button (the date)
.datemenu-today-button {
padding: $base_padding * 1.5;
margin: $base_margin;
border: 1px solid transparent;
&:focus,
&:hover {
border-radius:$base_border_radius + 2px;
margin-top: $base_margin - 1px;
margin-bottom: $base_margin + 1px;
}
&:hover { @include button(hover);}
&:focus { @include button(focus);}
&:active {
@include button(active);
margin: $base_margin;
}
// weekday label
.day-label {
font-size: $base_font_size + 1pt;
font-weight: bold;
}
// date label
.date-label {
font-size: $base_font_size * 1.5;
font-weight: 1000;
}
}
// calendar
.calendar {
@extend %notification_bubble;
margin:$base_margin !important;
margin-bottom: $base_padding + $base_margin !important;
padding:$base_padding !important;
// more below for sub-elements
}
.datemenu-displays-section {
margin:0;
}
.datemenu-displays-box {
spacing: $base_spacing;
margin:0;
// world clocks and weather
.world-clocks-button,
.weather-button {
@extend %notification_bubble;
padding:$base_padding !important;
}
}
}
.events-section-title {
color: desaturate(darken($fg_color,40%), 10%);
font-weight: bold;
border-radius: 4px;
padding: .4em;
}
/* Calendar */
.calendar {
// month
.calendar-month-label {
color: lighten($fg_color,5%);
font-weight: bold;
padding: 8px 0;
&:focus {}
}
// prev/next month icons
.calendar-change-month-back StIcon,
.calendar-change-month-forward StIcon {
icon-size: $base_icon_size;
}
.pager-button {
background-color: transparent;
height: 32px;
width: 32px;
border-radius: $base_border_radius;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
&:active { background-color: $active_bg_color; }
}
$calendar_day_size: 32px;
.calendar-day-base {
font-size: 80%;
text-align: center;
width: $calendar_day_size;
height: $calendar_day_size;
padding: 0;
margin: 2px;
border-radius: $calendar_day_size * 0.5 + 2px;
border: 1px solid transparent; //avoid jumparound due to today
font-feature-settings: "tnum";
&:hover, &:focus { background-color: $hover_bg_color; }
&:active,&:selected {
color: lighten($fg_color,10%);
background-color: darken($bg_color,5%);
}
// day of week heading
&.calendar-day-heading {
color: lighten($fg_color,10%);
margin-top: 1em;
font-size: 70%;
}
}
.calendar-day { //border collapse hack - see calendar.js
border-width: 0;
}
.calendar-day-top {
border-top-width: 1px;
}
.calendar-day-left { border-left-width: 1px; }
.calendar-work-day {}
.calendar-nonwork-day {
color: $insensitive_fg_color;
}
// Today
.calendar-today {
font-weight: bold;
border: 1px solid transparent;
background-color: $selected_bg_color;
color: $selected_fg_color;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: $selected_fg_color;
}
&:active,&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: $selected_fg_color;
}
}
}
.calendar-day-with-events {
color: lighten($fg_color,10%);
font-weight: bold;
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
}
.calendar-other-month-day {
color: transparentize($fg_color ,0.5);
opacity: 0.5;
}
.calendar-week-number {
font-size: 70%;
font-weight: bold;
height: 1.8em;
width: 2.3em;
border-radius: 2px;
padding: 0.5em 0 0;
margin: 6px;
background-color: darken($bg_color, 2%);
color: lighten($fg_color, 5%);
}
}
/* Weather */
.weather-box {
spacing: $base_spacing;
padding:$base_padding;
.weather-header {
color: desaturate(darken($fg_color,40%), 10%);
font-weight: bold;
&.location {
font-weight: normal;
font-size: $base_font_size - 1pt;
}
}
.weather-grid {
margin-top: $base_margin;
spacing-rows: $base_spacing;
spacing-columns: $base_spacing * 2;
}
.weather-forecast-icon {
icon-size: $base_icon_size * 2;
}
.weather-forecast-time {
color: darken($fg_color,30%);
font-feature-settings: "tnum";
font-size: $base_font_size - 2pt;
font-weight: normal;
}
}
/* World clocks */
.world-clocks-grid {
padding:$base_padding;
spacing-rows: $base_spacing;
spacing-columns: $base_spacing * 2;
// title
.world-clocks-header {
color: desaturate(darken($fg_color,40%), 10%);
font-weight: bold;
}
// city label
.world-clocks-city {
color: $fg_color;
font-size: $base_font_size;
font-weight: normal;
}
// timezone time
.world-clocks-time {
font-weight: bold;
color: $fg_color;
font-feature-settings: "lnum";
font-size: $base_font_size;
text-align:right;
}
// timezone offset label
.world-clocks-timezone {
color: darken($fg_color,20%);
font-feature-settings: "tnum";
font-size: $base_font_size - 1pt;
}
}

View File

@ -0,0 +1,18 @@
/* Check Boxes */
// these are equal to the size of the SVG assets
$check_height: 22px;
$check_width: 24px;
.check-box {
StBoxLayout { spacing: .8em; }
StBin {
width: $check_width;
height: $check_height;
background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg");
}
&:focus StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); }
&:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); }
&:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); }
}

View File

@ -0,0 +1,24 @@
/* Activities Ripple */
$ripple_size: 50px;
.ripple-box {
background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
// plus + 2px for the border (box-shadow)
width: $ripple_size + 2px;
height: $ripple_size + 2px;
border-radius: 0 0 $ripple_size + 2px 0; // radius equals the size of the box to give us the curve
// just a simple change to the border radius position
&:rtl { border-radius: 0 0 0 $ripple_size + 2px; }
}
// Pointer location
.ripple-pointer-location {
width: $ripple_size;
height: $ripple_size;
border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve
background-color: lighten(transparentize($selected_bg_color, 0.7), 30%);
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
}

View File

@ -0,0 +1,84 @@
/* Dash */
$dash_placeholder_size: 32px;
$dash_border_radius: $modal_radius * 1.5;
#dash {
@extend %overview_panel;
font-size: $base_font_size - 2pt;
padding: 0;
padding-bottom: $base_padding + 4px;
//fixme: can't have non uniform borders :(
border-radius: 0 $dash_border_radius $dash_border_radius 0;
border-left-width: 0 !important;
&:rtl {
border-radius: $dash_border_radius 0 0 $dash_border_radius;
border-right-width: 0 !important;
}
.placeholder {
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
background-image:none;
background-size: contain;
height: $dash_placeholder_size;
}
.empty-dash-drop-target {
width: $dash_placeholder_size;
height: $dash_placeholder_size;
}
}
// Dash Items
.dash-item-container > StWidget {
padding: $base_padding + 4px;
padding-bottom: 0;
}
// OSD Tooltip
.dash-label {
background-color: transparentize($osd_bg_color,0.05);
border-radius: $base_border_radius + 2px;
border:none;
box-shadow:0 0 0 1px $osd_outer_borders_color;
color: $osd_fg_color;
padding: $base_padding $base_padding + 2px;
text-align: center;
margin-top: $base_margin + 4px;
-x-offset: $base_margin * 2; // distance from the dash edge
}
// Show apps button
.show-apps {
background-color: transparent;
color: $osd_fg_color;
& .overview-icon {
@extend %icon_tile;
color: $osd_fg_color;
}
&:hover .overview-icon,
&:focus .overview-icon,
&:selected .overview-icon {
background-color: transparentize($osd_fg_color,0.9);
color: $osd_fg_color;
}
&:drop .overview-icon {
background-color: transparentize($selected_bg_color,.15);
}
&:active .overview-icon,
&:checked .overview-icon {
background-color: darken($osd_bg_color,10%);
}
&:checked .show-apps-icon,
&:focus .show-apps-icon {
color: $fg_color;
transition-duration: 100ms;
}
}

View File

@ -0,0 +1,280 @@
/* Modal Dialogs */
.modal-dialog {
border-radius: $modal_radius;
@extend %bubble_panel;
.modal-dialog-content-box {
padding: 24px;
}
.run-dialog-entry { width: 20em; margin-bottom: 6px; }
.run-dialog-error-box {
padding-top: 16px;
spacing: 6px;
}
.run-dialog-button-box { padding-top: 1em; }
.run-dialog-label {
@include fontsize($base_font_size + 1.1);
font-weight: normal;
color: $fg_color;
padding-bottom: .4em;
}
}
.mount-dialog-subject,
.end-session-dialog-subject { //this should be a generic header class
@include fontsize($base_font_size * 1.3);
}
.modal-dialog-linked-button {
@extend %bubble_button;
}
/* Message Dialog */
.message-dialog-main-layout {
padding: 12px 20px 0;
spacing: 12px;
}
.message-dialog-content {
max-width: 28em;
spacing: 20px;
}
.message-dialog-icon {
min-width: $base_icon_size * 3;
icon-size: $base_icon_size * 3;
}
.message-dialog-title {
font-weight: bold;
}
.message-dialog-subtitle {
color: $fg_color;
font-weight: bold;
}
/* ShellMountOperation Dialogs */
.shell-mount-operation-icon {
icon-size: $base_icon_size * 3;
}
.mount-dialog {
spacing: 24px;
.message-dialog-title {
padding-top: 10px;
padding-left: 17px;
padding-bottom: 6px;
max-width: 34em;
}
.message-dialog-title:rtl {
padding-left: 0px;
padding-right: 17px;
}
.message-dialog-body {
padding-left: 17px;
width: 28em;
}
.message-dialog-body:rtl {
padding-left: 0px;
padding-right: 17px;
}
}
.mount-dialog-app-list {
max-height: 200px;
padding-top: 24px;
padding-left: 49px;
padding-right: 32px;
}
.mount-dialog-app-list:rtl {
padding-right: 49px;
padding-left: 32px;
}
.mount-dialog-app-list-item {
color: lighten($fg_color,10%);
&:hover { color: $fg_color; }
&:ltr { padding-right: 1em; }
&:rtl { padding-left: 1em; }
}
.mount-dialog-app-list-item-icon {
&:ltr { padding-right: 17px; }
&:rtl { padding-left: 17px; }
}
.mount-dialog-app-list-item-name {
font-size: 10pt;
}
/* Password or Authentication Dialog */
.prompt-dialog {
@extend %bubble_panel;
//this is the width of the entire modal popup
width: 34em;
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
.message-dialog-content { spacing: $base_spacing * 4; }
.message-dialog-title { color: lighten($fg_color,15%); }
}
.prompt-dialog-description:rtl {
text-align: right;
}
.prompt-dialog-password-box {
spacing: 1em;
padding-bottom: 1em;
}
.prompt-dialog-error-label {
font-size: 10pt;
color: $warning_color;
padding-bottom: 8px;
}
.prompt-dialog-info-label {
font-size: 10pt;
padding-bottom: 8px;
}
.hidden {
color: rgba(0,0,0,0);
}
.prompt-dialog-null-label {
font-size: 10pt;
padding-bottom: 8px;
}
.prompt-dialog-pim-box {
spacing: 1em;
}
.prompt-dialog-grid {
spacing-rows: 15px;
spacing-columns: 1em;
}
.prompt-dialog-keyfiles-box {
spacing: 1em;
}
.prompt-dialog-button.button {
padding: 8px;
}
.prompt-dialog-caps-lock-warning {
@extend .prompt-dialog-error-label;
padding-left: 6.2em;
}
/* Polkit Dialog */
.polkit-dialog-user-layout {
padding-left: 10px;
spacing: 10px;
&:rtl {
padding-left: 0px;
padding-right: 10px;
}
}
.polkit-dialog-user-root-label {
color: $warning_color;
}
.polkit-dialog-user-icon {
border-radius: 99px;
background-size: contain;
width: 48px;
height: 48px;
}
/* Audio selection dialog */
.audio-device-selection-dialog {
@extend %bubble_panel;
spacing: 30px;
}
.audio-selection-content {
spacing: 20px;
padding: 24px;
}
.audio-selection-title {
font-weight: bold;
text-align: center;
}
.audio-selection-box {
spacing: 20px;
}
.audio-selection-device {
border: 1px solid $bubble_borders_color;
border-radius: 12px;
&:hover,&:focus { background-color: $hover_bg_color; }
&:active {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
.audio-selection-device-box {
padding: 20px;
spacing: 20px;
}
.audio-selection-device-icon {
icon-size: $base_icon_size * 4;
}
/* Access Dialog */
.access-dialog {
@extend %bubble_panel;
spacing: 30px;
}
/* Geolocation Dialog */
.geolocation-dialog {
@extend %bubble_panel;
spacing: 30px;
}
/* Extension Dialog */
.extension-dialog {
@extend %bubble_panel;
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
.message-dialog-title { font-weight: normal; color: $fg_color; }
}
/* Inhibit-Shortcuts Dialog */
.inhibit-shortcuts-dialog {
@extend %bubble_panel;
spacing: 30px;
}
/* Network Agent Dialog */
.network-dialog-secret-table {
spacing-rows: 15px;
spacing-columns: 1em;
}
.keyring-dialog-control-table {
spacing-rows: 15px;
spacing-columns: 1em;
}

View File

@ -0,0 +1,80 @@
/* End Session Dialog */
$end_session_dialog_width: 28em;
.end-session-dialog {
spacing: $base_spacing;
border: 1px solid $bubble_borders_color;
}
.end-session-dialog-list {
padding-top: 20px;
}
.end-session-dialog-layout {
padding-left: 17px;
&:rtl { padding-right: 17px; }
}
.end-session-dialog-description {
width: $end_session_dialog_width;
padding-bottom: 10px;
&:rtl {
text-align: right;
}
}
.end-session-dialog-warning {
width: $end_session_dialog_width;
color: $warning_color;
padding-top: 6px;
&:rtl {
text-align: right;
}
}
// user profile picture
.end-session-dialog-logout-icon {
border-radius: 99px;
width: $base_icon_size * 3;
height: $base_icon_size * 3;
background-size: contain;
}
.end-session-dialog-shutdown-icon {
color: $fg_color;
width: $base_icon_size * 3;
height: $base_icon_size * 3;
}
.end-session-dialog-inhibitor-layout {
spacing: $base_spacing * 4;
max-height: 200px;
padding-right: 65px;
padding-left: 65px;
}
.end-session-dialog-session-list,
.end-session-dialog-app-list {
spacing: 1em;
}
.end-session-dialog-list-header {
font-weight: bold;
&:rtl { text-align: right; }
}
.end-session-dialog-app-list-item,
.end-session-dialog-session-list-item {
spacing: 1em;
}
.end-session-dialog-app-list-item-name,
.end-session-dialog-session-list-item-name {
font-weight: bold;
}
.end-session-dialog-app-list-item-description {
color: darken($fg_color,5%);
font-size: 10pt;
}

View File

@ -0,0 +1,23 @@
/* Entries */
StEntry {
border-radius: $base_border_radius;
padding: 4px;
border-width: 1px;
color: $fg_color;
@include entry(normal);
//&:hover { @include entry(hover);}
&:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));}
&:insensitive { @include entry(insensitive);}
selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color;
StIcon.capslock-warning {
icon-size: 16px;
warning-color: $warning_color;
padding: 0 4px;
}
StIcon.peek-password {
icon-size: $base_icon_size;
padding: 0 4px;
}
}

View File

@ -0,0 +1,46 @@
// hotplug
.hotplug-transient-box {
spacing: 6px;
padding: 2px 72px 2px 12px;
}
.hotplug-notification-item {
@extend %bubble_button;
border: none; box-shadow: none;
padding: 2px 10px;
&:focus { padding: 1px 71px 1px 11px; }
}
.hotplug-notification-item-icon {
icon-size: 24px;
padding: 2px 5px;
}
.hotplug-resident-box { spacing: $base_spacing * 2; }
.hotplug-resident-mount {
spacing: $base_spacing * 2;
border-radius: 4px;
&:hover { background-color: $hover_bg_color; }
}
.hotplug-resident-mount-label {
color: inherit;
padding-left: 6px;
}
.hotplug-resident-mount-icon {
icon-size: 24px;
padding-left: 6px;
}
.hotplug-resident-eject-icon {
icon-size: 16px;
}
.hotplug-resident-eject-button {
padding: 7px;
border-radius: 5px;
color: pink;
}

View File

@ -0,0 +1,30 @@
// IBus Candidate Popup
.candidate-popup-content {
padding: 0.5em;
spacing: 0.3em;
}
.candidate-index {
padding: 0 0.5em 0 0;
color: darken($fg_color,10%);
}
.candidate-box {
padding: 0.3em 0.5em 0.3em 0.5em;
border-radius: $base_border_radius;
&:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
}
.candidate-page-button-box {
height: 2em;
.vertical & { padding-top: 0.5em; }
.horizontal & { padding-left: 0.5em; }
}
.candidate-page-button {
padding: 4px;
}
.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; }
.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; }
.candidate-page-button-icon { icon-size: 1em; }

View File

@ -0,0 +1,125 @@
/* On-screen Keyboard */
$key_size: 1.2em;
$key_border_radius: $base_border_radius + 3px;
$key_bg_color: $bg_color;
// $default_key_bg_color: darken($key_bg_color, 4%);
$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
// draw keys using button function
%keyboard_key {
@include button(normal, $c:$key_bg_color);
&:focus { @include button(focus);}
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
&:active { @include button(active, $c: $key_bg_color); }
}
#keyboard {
background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
box-shadow: inset 0 1px 0 0 $osd_outer_borders_color !important;
.page-indicator {
padding: $base_padding;
.page-indicator-icon {
width: 6px;
height: 6px;
&:checked {
background-color:red;
}
}
}
}
// the container for individual keys
.key-container {
padding: $base_margin;
spacing: $base_margin;
}
// the keys
.keyboard-key {
@extend %keyboard_key;
font-size: $base_font_size + 5pt;
min-height: $key_size;
min-width: $key_size;
border-radius: $key_border_radius;
&:grayed { //FIXMEy
background-color: darken($bg_color, 3%);
color: $osd_fg_color;
border-color: $osd_borders_color;
}
// non-character keys
&.default-key {
// size of the icon asset
background-size: 24px;
@include button(normal, $c:$default_key_bg_color);
&:hover, &:checked {@include button(hover, $c: $default_key_bg_color);}
&:active { @include button(active, $c: $default_key_bg_color);}
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) !important; // drawing override because of a visual bug
}
// enter key is suggested-action
&.enter-key {
background-image: url("resource:///org/gnome/shell/theme/key-enter.svg");
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
&:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));}
&:active {@include button(active, $c: darken($selected_bg_color, 2%));}
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) !important; // drawing override because of a visual bug
}
// key assets
&.shift-key-lowercase {background-image: url("resource:///org/gnome/shell/theme/key-shift.svg");}
&.shift-key-uppercase {background-image: url("resource:///org/gnome/shell/theme/key-shift-uppercase.svg");}
&.shift-key-uppercase:latched {background-image: url("resource:///org/gnome/shell/theme/key-shift-latched-uppercase.svg");}
&.hide-key {background-image: url("resource:///org/gnome/shell/theme/key-hide.svg");}
&.layout-key {background-image: url("resource:///org/gnome/shell/theme/key-layout.svg");}
}
// long press on a key popup
.keyboard-subkeys {
color: $osd_fg_color;
-arrow-border-radius: $modal_radius;
-arrow-background-color: $osd_bg_color;
-arrow-border-width: 1px;
-arrow-border-color: lighten($osd_bg_color, 9%);
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: $base_spacing;
.keyboard-key {
@extend %keyboard_key;
border-radius:$base_border_radius;
}
}
// emoji
.emoji-page {
.keyboard-key {
background-color: transparent;
border: none;
color: initial;
}
}
.emoji-panel {
.keyboard-key:latched {
border-color: lighten($selected_bg_color, 5%);
background-color: $selected_bg_color;
}
}
// suggestions
.word-suggestions {
font-size: $base_font_size + 3pt;
spacing: 12px;
min-height: 20pt;
}

View File

@ -0,0 +1,154 @@
/* Login Dialog */
.login-dialog-banner-view {
padding-top: 24px;
max-width: 23em;
}
.login-dialog {
//reset
border: none;
background-color: transparent;
$_gdm_bg: lighten(#2e3436, 19%);
StEntry {
@extend %search_entry;
border-radius: $base_border_radius;
@if $variant=='dark' {
$_gdm_entry_bg: transparentize(lighten(desaturate(#241f31, 20%), 2%), 0.5);
background-color: $_gdm_entry_bg;
border-color: $_gdm_entry_bg;
color: $osd_fg_color;
}
}
.modal-dialog-button-box { spacing: 3px; }
.modal-dialog-button {
padding: 4px 18px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
background-color: $_gdm_bg;
border-color: $_gdm_bg;
color: $fg_color;
$_hover_c: lighten($_gdm_bg, 5%);
&:hover, &:focus {
background-color: $_hover_c;
border-color: $_hover_c;
}
&:active {
$_active_c: darken($_gdm_bg, 5%);
box-shadow: none;
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($fg_color, 0.3);
}
&:default {
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
border-color: $selected_bg_color;
&:hover, &:focus {
@include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color);
$_def_hover_c: lighten($selected_bg_color, 5%);
background-color: $_def_hover_c;
border-color: $_def_hover_c;
}
&:active {
@include button(active,$c:$selected_bg_color, $tc:$selected_fg_color);
$_def_active_c: darken($selected_bg_color, 5%);
background-color: $_def_active_c;
border-color: $_def_active_c;
}
&:insensitive {
@include button(insensitive);
border-color: darken($selected_bg_color, 10%);
background-color: darken($selected_bg_color, 10%);
color: transparentize($selected_fg_color, 0.3);
}
}
}
}
.login-dialog-logo-bin { padding: 24px 0px; }
.login-dialog-banner { color: darken($osd_fg_color,10%); }
.login-dialog-button-box { spacing: 5px; }
.login-dialog-message-warning { color: $warning_color; }
.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
.login-dialog-user-selection-box { padding: 100px 0px; }
.login-dialog-not-listed-label {
padding-left: 2px;
.login-dialog-not-listed-button:focus &,
.login-dialog-not-listed-button:hover & {
color: $osd_fg_color;
}
}
.login-dialog-not-listed-label {
font-size: 90%;
font-weight: bold;
color: darken($osd_fg_color,30%);
padding-top: 1em;
}
.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: 5px;
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; }
}
.login-dialog-username,
.user-widget-label {
color: $osd_fg_color;
font-size: 120%;
font-weight: bold;
text-align: left;
padding-left: 15px;
}
.user-widget-label {
&:ltr { padding-left: 14px; }
&:rtl { padding-right: 14px; }
}
.login-dialog-prompt-layout {
padding-top: 24px;
padding-bottom: 12px;
spacing: $base_spacing * 2;
width: 23em;
}
.login-dialog-prompt-label {
color: darken($osd_fg_color, 20%);
font-size: 110%;
padding-top: 1em;
}
.login-dialog-session-list-button StIcon {
icon-size: 1.25em;
}
.login-dialog-session-list-button {
color: darken($osd_fg_color,30%);
&:hover,&:focus { color: $osd_fg_color; }
&:active { color: darken($osd_fg_color, 50%); }
}

View File

@ -0,0 +1,97 @@
/* Looking Glass */
// Dialog
#LookingGlassDialog {
background-color: $osd_bg_color;
spacing: $base_spacing;
padding: 4px;
border: 2px solid transparentize($osd_fg_color, 0.8);
border-top-width:0;
border-radius: 0 0 $base_border_radius $base_border_radius;
& > #Toolbar {
border: none;
border-radius: $base_border_radius;
background-color: darken($osd_bg_color, 10%);
}
.labels { spacing: $base_spacing; }
.notebook-tab {
-natural-hpadding: $base_padding * 2;
-minimum-hpadding: 6px;
font-weight: bold;
color: $fg_color;
transition-duration: 100ms;
padding-left: .3em;
padding-right: .3em;
&:hover {
color: white;
text-shadow: black 0px 2px 2px;
}
&:selected {
border-bottom-width: 2px;
border-color: lighten($selected_bg_color,5%);
color: white;
text-shadow: black 0px 2px 2px;
}
}
StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; }
StBoxLayout#ResultsArea { spacing: $base_spacing; }
}
.lg-dialog {
StEntry {
selection-background-color: #bbbbbb;
selected-color: $osd_bg_color;
}
.shell-link {
color: #999999;
&:hover { color: #dddddd; }
}
}
.lg-completions-text {
font-size: .9em;
font-style: italic;
}
.lg-obj-inspector-title {
spacing: $base_spacing;
}
.lg-obj-inspector-button {
border: 1px solid gray;
padding: 4px;
border-radius: $base_border_radius;
&:hover { border: 1px solid #ffffff; }
}
// Extensions
#lookingGlassExtensions { padding: 4px; }
.lg-extensions-list {
padding: 4px;
spacing: 6px;
}
.lg-extension {
border: 1px solid $osd_borders_color;
border-radius: $base_border_radius;
padding: 4px;
}
.lg-extension-name {
font-weight: bold;
}
.lg-extension-meta {
spacing: 6px;
}
// Inspector
#LookingGlassPropertyInspector {
background: $osd_bg_color;
border: 1px solid $osd_borders_color;
border-radius: $base_border_radius;
padding: 6px;
}

View File

@ -0,0 +1,145 @@
/* Message List */
// a.k.a. notifications in the menu
// main list
.message-list {
width: 31.5em;
padding: 0 $base_padding * 2;
}
.message-list-sections {
margin:0;
spacing: $base_spacing;
}
.message-list-section,
.message-list-section-list {
spacing: $base_spacing;
}
.message-list-section-list {
&:ltr {padding:0;}
&:rtl {padding:0;}
}
// clear button
.message-list-clear-button {
margin:$base_margin;
.button {
@extend %button;
}
}
// message bubbles
.message {
@extend %notification_bubble;
// title
.message-title {
color: $fg_color;
font-weight: bold;
margin-bottom:4px;
}
// content
.message-content {
color: darken($fg_color, 10%);
padding: $base_padding 0;
margin:$base_margin * 2;
&:ltr {
margin-left: $base_margin;
padding-right:$base_padding;
}
&:rtl {
margin-right: $base_margin;
padding-left:$base_padding;
}
}
// close button
.message-close-button {
color: lighten($fg_color, 15%);
&:hover { color: darken($fg_color, 10%);}
}
// icon container
.message-icon-bin {
// padding: $base_padding;
margin:$base_padding 0;
&:rtl {
// padding: $base_padding;
}
// icon size and color
> StIcon {
color: $fg_color;
icon-size: $base_icon_size * 2; // 32px
-st-icon-style: symbolic;
padding:0;
margin:$base_padding;
}
// fallback
> .fallback-window-icon {
width: $base_icon_size;
height: $base_icon_size;
}
}
// secondary container in title box
.message-secondary-bin {
padding: 0;
// notification time stamp
> .event-time {
color: transparentize($fg_color, 0.5);
font-size: 80%;
text-align: right;
margin: 0 $base_margin * 2;
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-bottom: $base_padding;
}
}
}
/* Media Controls */
.message-media-control {
padding: $base_padding * 2 $base_padding * 4;
color: darken($fg_color, 15%);
// uses $hover_bg_color since the media controls are in a notification_bubble
&:hover {
background-color: lighten($hover_bg_color, 5%);
color: $fg_color;
}
&:active {
background-color: darken($hover_bg_color, 2%);
color: $fg_color;
}
&:insensitive { color: darken($fg_color,40%); }
// fix border-radius for last button on hover
&:last-child:ltr { &:hover {border-radius: 0 $base_border_radius+2 $base_border_radius+2 0;} }
&:last-child:rtl { &:hover {border-radius: $base_border_radius+2 0 0 $base_border_radius+2;} }
}
// album-art
.media-message-cover-icon {
icon-size: $base_icon_size * 2 !important; // 48px
border-radius: $base_border_radius;
// when there is no artwork
&.fallback {
color: darken($fg_color, 17%);
background-color: $bg_color;
border: 1px solid transparent;
border-radius: $base_border_radius;
icon-size: $base_icon_size * 2 !important;
padding: $base_padding * 2;
}
}

View File

@ -0,0 +1,55 @@
// Links/URLs
.shell-link {
color: $link_color;
&:hover { color: lighten($link_color,10%); }
}
.url-highlighter { link-color: $link_color; }
// Rubberband for select-area screenshots
.select-area-rubberband {
background-color: transparentize($selected_bg_color,0.7);
border: 1px solid $selected_bg_color;
}
// Pointer accessibility notifications
.pie-timer {
width: 60px;
height: 60px;
-pie-border-width: 3px;
-pie-border-color: $selected_bg_color;
-pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
}
// Screen zoom/Magnifier
.magnifier-zoom-region {
border: 2px solid $selected_bg_color;
&.full-screen { border-width: 0; }
}
// User icon
.user-icon {
background-size: contain;
color: $osd_fg_color;
border-radius: 99px;
&:hover {
color: lighten($osd_fg_color,30%);
}
}
// Input Source Switcher
.input-source-switcher-symbol {
font-size: 34pt;
width: 96px;
height: 96px;
}
// Window cycler highlight
.cycler-highlight {
border: 5px solid $selected_bg_color;
}
.headline { font-size: 110%; }
.lightbox { background-color: black; }
.flashspot { background-color: white; }

View File

@ -0,0 +1,57 @@
/* Network Dialogs */
.nm-dialog {
@extend %bubble_panel;
max-height: 34em;
min-height: 31em;
min-width: 32em;
}
.nm-dialog-content {
spacing: 20px;
padding: 24px;
}
.nm-dialog-airplane-box { spacing: 12px; }
.nm-dialog-airplane-headline {
font-weight: bold;
text-align: center;
}
.nm-dialog-airplane-text { color: $fg_color; }
// header
.nm-dialog-header {
font-weight: bold;
}
.nm-dialog-header-icon {
icon-size: $base_icon_size * 2;
}
.nm-dialog-header-hbox { spacing: 10px; }
// list of networks
.nm-dialog-scroll-view {
border: 1px solid $borders_color;
padding:0;
background-color: darken($bg_color, 3%);
}
// list item
.nm-dialog-item {
font-size: $base_font_size;
border-bottom: 1px solid $borders_color;
padding: $base_padding * 2;
spacing: 0px;
&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
// icons in list
.nm-dialog-icon { icon-size: $base_icon_size; }
.nm-dialog-icons { spacing: $base_spacing * 2; }
// no networks
.no-networks-label { color: $insensitive_fg_color; }
.no-networks-box { spacing: $base_padding; }

View File

@ -0,0 +1,100 @@
/* Notifications & Mesage Tray */
$notification_banner_height: 64px;
$notification_banner_width: 34em;
// Banner notifications
.notification-banner {
min-height: $notification_banner_height;
width: $notification_banner_width;
font-size: $base_font_size;
margin: $base_margin;
border-radius: $modal_radius;
.message-title { color: $fg_color }
.message-content { color: $fg_color; }
&:hover { background: $bg_color; }
&, &:focus, &:active {
background-color: $bg_color;
.message-title { color: $fg_color }
.message-content { color: $fg_color; }
}
// icon
.message-icon-bin > StIcon {
icon-size: $base_icon_size * 2;
color: $fg_color;
}
// entries
StEntry { @extend %bubble_entry; }
.notification-icon {
padding: 5px;
}
.notification-content {
padding: 5px;
spacing: 5px;
}
.secondary-icon { icon-size: $base_icon_size; }
.notification-actions {
padding-top: 0;
color: $fg_color;
border-top: 1px solid $bubble_borders_color;
spacing: 0;
}
.notification-button {
@extend %bubble_button;
min-height: $notification_banner_height * 0.5;
padding: $base_padding !important;
border-top-width: 0 !important;
&:focus { box-shadow: none; }
}
}
// 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%;
}
.secondary-icon { icon-size: $base_icon_size; }
// 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;
font-size: 9pt;
font-weight: bold;
color: lighten($fg_color,18%);
&:rtl { padding-left: 0; padding-right: 4px; }
}

View File

@ -0,0 +1,37 @@
/* OSD */
.osd-window {
@extend %osd_panel;
text-align: center;
font-weight: bold;
spacing: 1em;
margin: 32px;
min-width: 64px;
min-height: 64px;
.osd-monitor-label { font-size: 3em; }
.level {
height: 0.6em;
-barlevel-height: 0.6em;
-barlevel-background-color: transparentize($fg_color, if($variant=='light', 0.2, 0.9));
-barlevel-active-background-color: $osd_fg_color;
-barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 0.2em;
}
}
/* Pad OSD */
.pad-osd-window {
padding: 32px;
background-color: transparentize(#000, 0.2);
.pad-osd-title-box { spacing: 12px; }
.pad-osd-title-menu-box { spacing: 6px; }
}
.combo-box-label {
width: 15em;
}
.resize-popup {
@extend %osd_panel;
}

View File

@ -0,0 +1,10 @@
/* OVERVIEW */
#overview {
spacing: 24px;
background-color: transparent;
}
.overview-controls {
padding-bottom: 32px;
}

View File

@ -0,0 +1,106 @@
/* Top Bar */
// a.k.a. the panel
$panel_corner_radius: $base_border_radius+1;
$panel_bg_color: if($variant == 'light', rgba(0,0,0,0.9), #000);
$panel_fg_color: if($variant == 'light', darken($bg_color, 15%), darken($fg_color, 10%));
$panel_height: 1.86em;
#panel {
background-color: $panel_bg_color;
font-weight: bold;
height: $panel_height;
font-feature-settings: "tnum";
// transparent panel on lock & login screens
&.unlock-screen,
&.login-screen,
&.lock-screen {
background-color: transparent;
.panel-corner {
-panel-corner-radius: 0;
-panel-corner-background-color: transparent;
-panel-corner-border-color: transparent;
}
}
// spacing between activities, app menu and such
#panelLeft, #panelCenter {
spacing: $base_spacing;
}
// the rounded outset corners
.panel-corner {
-panel-corner-radius: $panel_corner_radius;
-panel-corner-background-color: $panel_bg_color;
-panel-corner-border-width: 2px;
-panel-corner-border-color: transparent;
&:active, &:overview, &:focus {
-panel-corner-border-color: lighten($selected_bg_color,5%);
}
}
// panel menus
.panel-button {
font-weight: bold;
color: $panel_fg_color;
-natural-hpadding: $base_padding * 2;
-minimum-hpadding: $base_padding;
&:hover {
color: lighten($panel_fg_color, 20%);
}
&:active, &:overview, &:focus, &:checked {
background-color: $panel_bg_color; // Trick due to St limitations. It needs a background to draw a box-shadow
box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
color: lighten($panel_fg_color, 20%);
}
// status area icons
.system-status-icon {
icon-size: $base_icon_size;
padding: $base_padding - 1px;
}
// app menu icon
.app-menu-icon {
margin-left: $base_margin;
margin-right: $base_margin;
-st-icon-style: symbolic;
// dimensions of the icon are hardcoded
}
// lock & login screen styles
.unlock-screen &,
.login-screen &,
.lock-screen & {
color: lighten($fg_color, 10%);
&:focus, &:hover, &:active { color: lighten($fg_color, 10%); }
}
}
.panel-status-indicators-box,
.panel-status-menu-box {
spacing: 2px;
}
// spacing between power icon and (optional) percentage label
.power-status.panel-status-indicators-box {
spacing: 0;
}
// indicator for active
.screencast-indicator,
.remote-access-indicator { color: $warning_color; }
}
// App Menu
#appMenu {
spacing: $base_spacing;
.label-shadow { color: transparent; }
}

View File

@ -0,0 +1,123 @@
/* Popovers/Menus */
$popover_arrow_height: 12px;
//.the popover itself
.popup-menu-boxpointer,
.candidate-popup-boxpointer {
-arrow-border-radius: $base_border_radius+4;
-arrow-background-color: $bg_color;
-arrow-border-width: 1px;
-arrow-border-color: $borders_color;
-arrow-base: $popover_arrow_height * 2;
-arrow-rise: $popover_arrow_height;
-arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995
}
// container of the popover menu
.popup-menu {
min-width: 15em;
color: $fg_color;
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
&.panel-menu {
-boxpointer-gap: $base_margin; // distance from the panel
margin-bottom: 1.75em;
}
}
.popup-menu-content {
padding: $base_padding * 2 + $base_margin 0;
}
// menu items
.popup-menu-item {
spacing: $base_padding;
padding: $base_padding;
&:ltr { padding-right:1.75em; padding-left: 0; }
&:rtl { padding-right: 0; padding-left:1.75em; }
&:checked {
background-color: lighten($bg_color, 2%);
box-shadow: none;
}
&.selected {
background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
color: $fg_color;
}
&:active {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:insensitive { color: transparentize($fg_color,0.5);}
}
// all icons and other graphical elements
.popup-inactive-menu-item {
color: $fg_color;
&:insensitive { color: transparentize($fg_color,0.5); }
}
// symbolic icons in popover
.popup-menu-arrow,
.popup-menu-icon { icon-size: $base_icon_size; }
// popover submenus
.popup-sub-menu {
background-color: darken($bg_color, 3%);
box-shadow: none;
border-top: 1px solid transparentize($borders_color, 0.2);
border-bottom: 1px solid transparentize($borders_color, 0.2);
.popup-menu-item:hover {background-color: darken($bg_color, 7%);}
}
// container for radio and check boxes
.popup-menu-ornament {
text-align: right;
width: 1.2em;
}
// separator
.popup-separator-menu-item {
//-margin-horizontal: 24px;
height: 1px; //not really the whole box
margin: 6px 64px;
background-color: lighten($borders_color, 2%);
border: none !important;
}
// desktop background menu
.background-menu {
-boxpointer-gap: $base_margin;
-arrow-rise: 0px; // hide the beak on the menu
}
// system status menu
.aggregate-menu {
min-width: 21em;
// lock screen, shutdown, etc. buttons
.popup-menu-icon {
padding:0;
margin: 0 $base_margin;
-st-icon-style: symbolic;
}
.popup-sub-menu .popup-menu-item > :first-child {
// account for icons in submenus with padding
&:ltr {
padding-left: $base_padding + $base_margin * 2;
margin-left: $base_icon_size;
}
&:rtl {
padding-right: $base_padding + $base_margin * 2; ;
margin-right: $base_icon_size;
}
}
}

View File

@ -0,0 +1,83 @@
/* Screen Shield */
$_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
.screen-shield-arrows {
padding-bottom: 3em;
}
.screen-shield-arrows Gjs_Arrow {
color: white;
width: 80px;
height: 48px;
-arrow-thickness: 12px;
-arrow-shadow: $_screenshield_shadow;
}
.screen-shield-clock {
color: white;
text-shadow: $_screenshield_shadow;
font-weight: bold;
text-align: center;
padding-bottom: 1.5em;
}
.screen-shield-clock-time {
font-size: 72pt;
text-shadow: $_screenshield_shadow;
font-feature-settings: "tnum";
}
.screen-shield-clock-date {
font-size: 28pt;
font-weight: normal;
}
.screen-shield-notifications-container {
spacing: 6px;
width: 30em;
background-color: transparent;
max-height: 500px;
.summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0;
}
.notification,
.screen-shield-notification-source {
padding: 12px 6px;
border: 1px solid $osd_outer_borders_color;
background-color: transparentize($osd_bg_color,0.5);
color: $osd_fg_color;
border-radius: 4px;
}
.notification { margin-right: 15px; } //compensate for space allocated to the scrollbar
}
.screen-shield-notification-label {
font-weight: bold;
padding: 0px 0px 0px 12px;
}
.screen-shield-notification-count-text { padding: 0px 0px 0px 12px; }
#panel.lock-screen { background-color: transparentize($osd_bg_color, 0.5); }
.screen-shield-background { //just the shadow, really
background: black;
box-shadow: 0px 2px 4px rgba(0,0,0,0.6);
}
#lockDialogGroup {
background: lighten(#2e3436, 8%) url(resource:///org/gnome/shell/theme/noise-texture.png);
background-repeat: repeat;
}
#screenShieldNotifications {
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); }
}
}

View File

@ -0,0 +1,29 @@
/* Scrollbars */
StScrollView {
&.vfade { -st-vfade-offset: 68px; }
&.hfade { -st-hfade-offset: 68px; }
}
StScrollBar {
padding: 0;
StScrollView & {
min-width: 14px;
min-height: 14px;
}
StBin#trough {
border-radius: 0;
background-color: transparent;
}
StButton#vhandle, StButton#hhandle {
border-radius: 8px;
background-color: mix($fg_color, $bg_color, 60%);
//border: 3px solid transparent; //would be nice to margin or at least to transparent
margin: 3px;
&:hover { background-color: mix($fg_color, $bg_color, 80%); }
&:active { background-color: $selected_bg_color; }
}
}

View File

@ -0,0 +1,33 @@
// Search entry
$search_entry_width: 320px;
%search_entry,
.search-entry {
width: $search_entry_width;
padding: 7px 9px;
border-radius: 18px;
color: transparentize($fg_color,0.3);
background-color: $bg_color;
border-color: $borders_color;
&:hover {
background-color: $hover_bg_color;
border-color: $hover_borders_color;
color: $hover_fg_color;
}
&:focus {
padding: 6px 8px; // 1px less to account for wider border
border-width: 2px;
color: $fg_color;
border-color: $selected_bg_color;
box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.2);
}
.search-entry-icon {
icon-size: $base_icon_size;
padding: 0 4px;
color: inherit;
}
}

View File

@ -0,0 +1,160 @@
/* Search */
$overview_search_container_width: 1024px;
%search_result_bubble {
background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
border-radius: $modal_radius + 3px;
border: 1px solid $osd_outer_borders_color;
box-shadow: 0 2px 4px 0 $shadow_color;
text-shadow: 0 1px if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2));
color: $osd_fg_color;
padding: $base_padding * 3;
margin: $base_margin;
}
// search overview container
#searchResultsContent {
max-width: $overview_search_container_width;
}
// search results sections "the boxes"
.search-section {
@extend %search_result_bubble;
spacing:0;
margin-top:0;
margin-bottom:0;
// hide separator
&:first-child .search-section-separator,
&:last-child .search-section-separator {
background-color: transparent;
}
// separator
.search-section-separator {
// margin-top: $base_padding * 2;
// height: 1px;
// background-color: $osd_outer_borders_color;
height: 0px;
background-color: transparent;
}
// content
.search-section-content {
spacing: 0;
}
}
// "no results" text
.search-statustext {
@extend %status_text;
}
// Search results with icons
.grid-search-result {
> .overview-icon {
@extend %icon_tile;
color: $osd_fg_color;
}
> .overview-icon.overview-icon-with-label {
padding: 10px 8px 5px 8px;
spacing: $base_spacing;
}
&:hover,
&:focus,
&:selected {
.overview-icon {
background-color: transparentize($osd_bg_color,0.8);
color: $osd_fg_color;
}
}
&:drop .overview-icon {
background-color: transparentize($selected_bg_color,.15);
}
&:active .overview-icon,
&:checked .overview-icon {
background-color: transparentize(darken($osd_bg_color,10%), 0.5);
}
}
// search result provider
.search-provider-icon {
@extend %icon_tile;
padding: 0;
spacing: 0;
margin-right: $base_margin * 2;
&:focus,
&:selected,
&:hover {
background-color: transparentize($osd_fg_color,.9);
transition-duration: 200ms;
}
&:active,
&:checked {
background-color: transparentize(darken($osd_bg_color,10%),.1);
}
// content
.list-search-provider-content {
spacing: $base_spacing * 2;
// provider labels
.list-search-provider-details {
width: 120px;
margin-top: 0;
color: darken($osd_fg_color, 8%);
// font-weight: bold;
}
}
}
// search results list
.list-search-results {
spacing: $base_spacing;
}
// search result listitem
.list-search-result {
@extend %icon_tile;
spacing: 0;
padding: $base_padding;
color: $osd_fg_color;
&:focus,
&:selected,
&:hover {
background-color: transparentize($osd_fg_color,.9);
transition-duration: 200ms;
}
&:active,
&:checked {
background-color: transparentize(darken($osd_bg_color,10%),.1);
}
// content
.list-search-result-content {
spacing: 0;
}
// list item title
.list-search-result-title {
color: $osd_fg_color;
spacing: $base_spacing * 2;
padding-right: $base_padding;
// font-weight: bold;
}
// list item description
.list-search-result-description {
color: darken($osd_fg_color, 30%);
}
}

View File

@ -0,0 +1,27 @@
/* Slider */
$slider_size: 15px;
.slider {
height: $slider_size;
// slider trough
-barlevel-height: 3px; // has to be an odd number
-barlevel-background-color: $borders_color; //background of the trough
-barlevel-border-width: 1px;
-barlevel-border-color: $borders_color; // trough border color
// fill style
-barlevel-active-background-color: $selected_bg_color; //active trough fill
-barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border
// overfill style (red in this case)
-barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red;
-barlevel-overdrive-separator-width:1px;
// slider hander
-slider-handle-radius: $slider_size * 0.5; // half the size of the size
-slider-handle-border-width: 1px;
-slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color);
color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
&:hover { color: $hover_bg_color; }
&:active { color: $active_bg_color; }
}

View File

@ -0,0 +1,16 @@
/* Switches */
// these are equal to the size of the SVG assets
$switch_height: 22px;
$switch_width: 46px;
.toggle-switch {
color: $fg_color;
height: $switch_height;
width: $switch_width;
background-size: contain;
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off.svg"),url("resource:///org/gnome/shell/theme/toggle-off-dark.svg"));
&:checked {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on.svg"),url("resource:///org/gnome/shell/theme/toggle-on-dark.svg"));
}
}

View File

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

View File

@ -0,0 +1,66 @@
/* Window Picker */
$window_picker_spacing: 48px;
$window_picker_padding: 64px;
$window_thumbnail_border_color:transparentize($selected_fg_color, 0.65);
$window_close_button_size: 24px;
$window_close_button_padding: 3px;
// Window picker
.window-picker {
// Space between window thumbnails
-horizontal-spacing: $window_picker_spacing;
-vertical-spacing: $window_picker_spacing;
// Padding for container around window thumbnails
padding: $window_picker_padding;
&.external-monitor { padding: $window_picker_padding; }
}
// Borders on window thumbnails
.window-clone-border {
border: 6px solid $window_thumbnail_border_color;
border-radius: $base_border_radius + 2px;
// For window decorations with round corners we can't match
// the exact shape when the window is scaled. So apply a shadow
// to fix that case
box-shadow: inset 0 0 0 1px transparentize($borders_color, 0.8);
}
// Window titles
.window-caption {
spacing: 24px;
color: $selected_fg_color;
background-color: rgba(0,0,0,0.5);
border:1px solid rgba(0,0,0,0.6);
border-radius: 8px;
margin-top: 24px;
padding: 4px 12px;
font-size: $base_font_size + 1pt;
font-weight: bold;
}
// Close button
.window-close {
background-color: $selected_bg_color;
color: $selected_fg_color;
border: none;
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
padding: $window_close_button_padding;
height: $window_close_button_size;
width: $window_close_button_size;
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
-shell-close-overlap: $window_close_button_size * 0.5;
&:hover {
background-color: lighten($selected_bg_color, 5%);
}
&:active {
background-color: darken($selected_bg_color, 5%);
}
}

View File

@ -0,0 +1,70 @@
/* Workspace Switcher */
.workspace-switcher-group {
padding: $base_padding * 2;
}
.workspace-switcher-container {
@extend %osd_panel;
box-shadow: 0 2px 10px 2px rgba(0,0,0,0.2);
}
.workspace-switcher {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
spacing: $base_spacing * 2;
.ws-switcher-box {
// background: transparent;
background: transparent;
height: 50px;
background-size: 32px;
border: 1px solid transparentize($osd_fg_color,0.9);
border-radius: $base_border_radius + 3px;
}
// active workspace in the switcher
.ws-switcher-active-up,
.ws-switcher-active-down,
.ws-switcher-active-left,
.ws-switcher-active-right {
background-color: $selected_bg_color;
border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%));
color: $selected_fg_color;
}
}
/* Workspace pager */
// thumbnails in overview
.workspace-thumbnails {
@extend %overview_panel;
visible-width: 32px; //amount visible before hover
spacing: $base_spacing;
padding: $base_padding;
//fixme: can't have non uniform borders :(
border-top-left-radius:0 !important;
border-bottom-left-radius:0 !important;
border-right-width: 0 !important;
&:rtl {
border-radius: 0 $modal_radius $modal_radius 0;
border-left-width: 0 !important;
}
// drag and drop indicator
.placeholder {
background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
background-size: contain;
height: 24px;
}
}
// selected indicator
.workspace-thumbnail-indicator {
border: 3px solid $selected_bg_color;
border-radius: 3px;
padding: 0px;
// background-color: transparentize($selected_bg_color, 0.9);
}

2314
data/theme/gnome-shell.css Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,109 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" class="keyboard-key" width="24" height="24">
<svg <path overflow="visible" font-weight="400" style="line-height:normal;-inkscape-font-specification:'Bitstream Vera Sans';text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" d="M10 23H8.5c-.398 0-.796-.14-1.079-.422L.345 15.5l7.078-7.078C7.704 8.14 8.102 8 8.5 8H10v1.5c0 .398-.14.796-.422 1.079L4.657 15.5l4.921 4.922c.282.282.422.68.422 1.078z" color="#000" font-family="Bitstream Vera Sans" fill="#fff"/>
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" <path overflow="visible" d="M22 1.5v9a5 5 0 01-5 5H4" style="marker:none" color="#000" fill="none" stroke="#fff" stroke-width="3"/>
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32"
viewBox="0 0 32 32"
version="1.1"
id="svg7384"
height="32"
sodipodi:docname="key-enter.svg"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1744"
inkscape:window-height="866"
id="namedview19"
showgrid="false"
inkscape:zoom="14.75"
inkscape:cx="7.9322034"
inkscape:cy="14.554666"
inkscape:window-x="0"
inkscape:window-y="55"
inkscape:window-maximized="0"
inkscape:current-layer="svg7384" />
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
osb:paint="solid"
id="linearGradient19282"
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
<stop
style="stop-color:#666666;stop-opacity:1;"
offset="0"
id="stop19284" />
</linearGradient>
</defs>
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer9" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer10" />
<g
transform="translate(-141.0002,-791)"
id="layer11" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer13" />
<g
transform="translate(-141.0002,-791)"
id="layer14" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer15" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="g71291" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="g4953" />
<g
transform="matrix(2,0,0,2,-281.56285,-1615.0002)"
style="display:inline"
id="layer12">
<path
id="path16589"
d="m 148.00015,821.0002 h -1 c -0.26528,0 -0.53057,-0.093 -0.71875,-0.2812 l -3.71875,-3.7188 c 0,0 2.47917,-2.4792 3.71875,-3.7187 0.18817,-0.1882 0.45344,-0.2813 0.71875,-0.2813 h 1 v 1 c 0,0.2653 -0.0931,0.5306 -0.28125,0.7188 l -2.28125,2.2812 2.28125,2.2813 c 0.18811,0.1881 0.28129,0.4534 0.28125,0.7187 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:accumulate"
inkscape:connector-curvature="0" />
<path
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:#bebebe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
d="m 154.0002,810 v 4.5 c 0,1.3807 -1.11929,2.5 -2.5,2.5 h -6.50005"
id="path16591"
inkscape:connector-curvature="0" />
</g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 676 B

View File

@ -1,114 +1,3 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<svg <path d="M12 20.875L.562 9.438C.171 9.046 0 8.51 0 8V6h2c.511 0 1.046.17 1.438.563L12 15.125l8.563-8.562C20.953 6.17 21.488 6 22 6h2v2c0 .511-.17 1.046-.563 1.438z" fill="#e5e5e5"/>
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32"
viewBox="0 0 32 32"
version="1.1"
id="svg7384"
height="32"
sodipodi:docname="key-hide.svg"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1919"
inkscape:window-height="1011"
id="namedview19"
showgrid="false"
inkscape:zoom="14.75"
inkscape:cx="-12.338983"
inkscape:cy="14.554666"
inkscape:window-x="0"
inkscape:window-y="55"
inkscape:window-maximized="0"
inkscape:current-layer="svg7384" />
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
osb:paint="solid"
id="linearGradient19282"
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
<stop
style="stop-color:#666666;stop-opacity:1;"
offset="0"
id="stop19284" />
</linearGradient>
</defs>
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer9" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer10" />
<g
transform="translate(-141.0002,-791)"
id="layer11" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer13" />
<g
transform="translate(-141.0002,-791)"
id="layer14" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer15" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="g71291" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="g4953" />
<g
style="display:inline"
inkscape:label="go-down"
id="g11722"
transform="matrix(2,0,0,2,-362.0004,-1494)">
<rect
transform="rotate(90)"
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:1;marker:none;enable-background:new"
id="rect11718"
y="-197.0002"
x="747"
height="16"
width="16" />
<path
style="display:inline;fill:#e5e5e5;fill-opacity:1;stroke:none"
d="m 189.0002,759.4375 -5.71875,-5.7187 C 183.08558,753.5229 183.0002,753.2556 183.0002,753 v -1 h 1 c 0.25562,0 0.52288,0.085 0.71875,0.2813 l 4.28125,4.2812 4.28125,-4.2812 C 193.47732,752.0854 193.74458,752 194.0002,752 h 1 v 1 c 0,0.2556 -0.0854,0.5229 -0.28125,0.7188 z"
id="path11720"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccscsccsscscc" />
</g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 278 B

View File

@ -1,129 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" class="keyboard-key" width="24" height="24">
<svg <path d="M4.5 2v21" fill="#e5e5e5" fill-rule="evenodd" stroke="#e5e5e5" stroke-width="3"/>
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" <path d="M4 12h6l2 4h8V6h-6l-2-4H4z" fill="none" stroke="#e5e5e5" stroke-width="2" stroke-linejoin="round"/>
xmlns:dc="http://purl.org/dc/elements/1.1/" <path d="M4 12h6l2 4h8V6h-6l-2-4H4z" fill="#e5e5e5" fill-rule="evenodd"/>
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32"
viewBox="0 0 32 32"
version="1.1"
id="svg7384"
height="32"
sodipodi:docname="key-layout.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="3440"
inkscape:window-height="1376"
id="namedview19"
showgrid="false"
inkscape:zoom="1"
inkscape:cx="46.246852"
inkscape:cy="17.474578"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg7384">
<inkscape:grid
type="xygrid"
id="grid861" />
</sodipodi:namedview>
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
osb:paint="solid"
id="linearGradient19282"
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
<stop
style="stop-color:#666666;stop-opacity:1;"
offset="0"
id="stop19284" />
</linearGradient>
</defs>
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer9" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer10" />
<g
transform="translate(-141.0002,-791)"
id="layer11" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer13" />
<g
transform="translate(-141.0002,-791)"
id="layer14" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer15" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="g71291" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="g4953" />
<g
style="stroke-width:0.5;enable-background:new"
id="g3561"
inkscape:label="preferences-desktop-locale"
transform="matrix(2,0,0,2,135.99464,-895.9793)">
<path
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path3535"
d="m -65,450 v 12"
style="fill:#e5e5e5;fill-opacity:1;fill-rule:evenodd;stroke:#e5e5e5;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccccccc"
inkscape:connector-curvature="0"
id="path3537"
d="m -65,456 h 4 l 1,2 h 5 v -6 h -4 l -1,-2 h -5 z"
style="fill:none;fill-rule:evenodd;stroke:#e5e5e5;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="opacity:1;vector-effect:none;fill:#e5e5e5;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m -65,456 h 4 l 1,2 h 5 v -6 h -4 l -1,-2 h -5 z"
id="path3539"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<rect
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:0.89050001;marker:none;enable-background:new"
id="rect3543"
y="448"
x="-68"
height="16"
width="16" />
</g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 378 B

View File

@ -1,109 +1,3 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<svg <path style="marker:none" d="M12 0L2 12h6v6h8v-6h6zM8 21v3h8v-3z" color="#000" overflow="visible" fill="#3584e4"/>
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32"
viewBox="0 0 32 32"
version="1.1"
id="svg7384"
height="32"
sodipodi:docname="key-shift-latched-uppercase.svg"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1791"
inkscape:window-height="984"
id="namedview19"
showgrid="false"
inkscape:zoom="14.75"
inkscape:cx="-0.77966097"
inkscape:cy="18.847458"
inkscape:window-x="0"
inkscape:window-y="55"
inkscape:window-maximized="0"
inkscape:current-layer="svg7384" />
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
osb:paint="solid"
id="linearGradient19282"
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
<stop
style="stop-color:#666666;stop-opacity:1;"
offset="0"
id="stop19284" />
</linearGradient>
</defs>
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer9" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer10" />
<g
transform="translate(-141.0002,-791)"
id="layer11" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer13" />
<g
transform="translate(-141.0002,-791)"
id="layer14" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer15" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="g71291" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="g4953" />
<g
transform="matrix(2,0,0,2,-282.0004,-1614.2187)"
style="display:inline;fill:#006098;fill-opacity:1"
id="layer12">
<path
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#006098;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
d="m 147,818 v -4 h -3.1248 l 5.125,-5.7813 5.125,5.7813 h -3.1875 v 4 z"
id="path16532"
inkscape:connector-curvature="0" />
<path
id="path16534"
d="m 147,822 v -2 h 3.9377 v 2 z"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#006098;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
inkscape:connector-curvature="0" />
</g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 211 B

View File

@ -1,104 +1,3 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<svg <path d="M8 22v-8H2L12 2l10 12h-6v8z" style="marker:none" color="#000" overflow="visible" fill="#3584e4"/>
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32"
viewBox="0 0 32 32"
version="1.1"
id="svg7384"
height="32"
sodipodi:docname="key-shift-uppercase.svg"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2160"
inkscape:window-height="1311"
id="namedview18"
showgrid="false"
inkscape:zoom="14.75"
inkscape:cx="-27.898305"
inkscape:cy="8"
inkscape:window-x="0"
inkscape:window-y="55"
inkscape:window-maximized="1"
inkscape:current-layer="svg7384" />
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
osb:paint="solid"
id="linearGradient19282"
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
<stop
style="stop-color:#666666;stop-opacity:1;"
offset="0"
id="stop19284" />
</linearGradient>
</defs>
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer9" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer10" />
<g
transform="translate(-141.0002,-791)"
id="layer11" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer13" />
<g
transform="translate(-141.0002,-791)"
id="layer14" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="layer15" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="g71291" />
<g
transform="translate(-141.0002,-791)"
style="display:inline"
id="g4953" />
<g
transform="matrix(2,0,0,2,-282.0008,-1614.2187)"
style="display:inline;fill:#006098;fill-opacity:1"
id="layer12">
<path
id="path16548"
d="m 147.0002,820 v -4 h -3.1248 l 5.125,-5.7813 5.125,5.7813 h -3.1875 v 4 z"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#006098;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
inkscape:connector-curvature="0" />
</g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 203 B

View File

@ -1,108 +1,3 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<svg <path d="M8 22v-8H2L12 2l10 12h-6v8z" style="marker:none" color="#000" overflow="visible" fill="#bebebe"/>
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="32"
viewBox="0 0 32 32"
version="1.1"
id="svg7384"
height="32"
sodipodi:docname="key-shift.svg"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1400"
inkscape:window-height="1034"
id="namedview4569"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="14.75"
inkscape:cx="1.5993763"
inkscape:cy="5"
inkscape:window-x="0"
inkscape:window-y="55"
inkscape:window-maximized="0"
inkscape:current-layer="svg7384" />
<metadata
id="metadata90">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>Gnome Symbolic Icon Theme</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<title
id="title9167">Gnome Symbolic Icon Theme</title>
<defs
id="defs7386">
<linearGradient
osb:paint="solid"
id="linearGradient19282"
gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
<stop
style="stop-color:#666666;stop-opacity:1;"
offset="0"
id="stop19284" />
</linearGradient>
</defs>
<g
transform="translate(-143.8754,-788)"
style="display:inline"
id="layer9" />
<g
transform="translate(-143.8754,-788)"
style="display:inline"
id="layer10" />
<g
transform="translate(-143.8754,-788)"
id="layer11" />
<g
transform="translate(-143.8754,-788)"
style="display:inline"
id="layer13" />
<g
transform="translate(-143.8754,-788)"
id="layer14" />
<g
transform="translate(-143.8754,-788)"
style="display:inline"
id="layer15" />
<g
transform="translate(-143.8754,-788)"
style="display:inline"
id="g71291" />
<g
transform="translate(-143.8754,-788)"
style="display:inline"
id="g4953" />
<g
transform="matrix(2,0,0,2,-282.0008,-1614.2187)"
style="display:inline"
id="layer12">
<path
id="path16548"
d="m 147.0002,820 v -4 h -3.1248 l 5.125,-5.7813 5.125,5.7813 h -3.1875 v 4 z"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
inkscape:connector-curvature="0" />
</g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 203 B