style: Stylesheet updates for GNOME 42

- updated switch assets
 - new high contrast assets
- use non-hardcoded bg color for dash
- updated palette colors
 - add missing color definitions to hc
- increase radii of many elements
- update search entry style
- align icon better in search entry
- restyle panel popovers without arrow and add drop shadow
- used theme colors in panel
- fix some things with popover labels
- new slider style
- some light variant fixes
- fixes to the calendar popover
 - day with event styles
 - better calendar-today.svg and dark variant
 - shorten calendary weekday header
 - saner padding
- overhaul popover menu style
- minor fixes to app grid and alt-tab switch
- updated looking glass styles
- nm-dialog adjustments
- search results adjustments
- expand out panel button hover styles
- button drawing adjustments
- adjust notifications area
- update on-screen keyboard style
 - better keyboard symbolic icon assets
 - change keyboard symbolic icons to 24px
 - improved keyboard style
 - gave the keyboard word suggestions some styles
- less obnoxious saner media control buttons
- cleaned up the css for the dash
- reworked the alt-tab switcher style
- sync style on workspace switcher
- adjusted dialog button style drawing
- popover submenu redrawing adjustement

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2104>
This commit is contained in:
Sam Hewitt 2021-12-28 10:16:54 -03:30 committed by Marge Bot
parent 0e4b87fe5a
commit 199529a67d
36 changed files with 643 additions and 972 deletions

View File

@ -2,6 +2,7 @@
<gresources>
<gresource prefix="/org/gnome/shell/theme">
<file>calendar-today.svg</file>
<file>calendar-today-dark.svg</file>
<file alias="icons/scalable/status/carousel-arrow-next-24-symbolic.svg">carousel-arrow-next-24-symbolic.svg</file>
<file alias="icons/scalable/status/carousel-arrow-back-24-symbolic.svg">carousel-arrow-back-24-symbolic.svg</file>
<file>checkbox-focused.svg</file>

View File

@ -0,0 +1 @@
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><circle style="color:#000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;fill:#fff;fill-opacity:.858277;fill-rule:nonzero;stroke:none;stroke-width:.999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" cx="16" cy="28" r="2"/></svg>

After

Width:  |  Height:  |  Size: 727 B

View File

@ -1,178 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
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:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="24"
height="24"
id="svg10621"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="calendar-today.svg">
<defs
id="defs10623">
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient34508-1-3"
id="radialGradient99561-1"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
cx="51"
cy="30"
fx="51"
fy="30"
r="42" />
<linearGradient
inkscape:collect="always"
id="linearGradient34508-1-3">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop34510-1-9" />
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"
id="stop34512-4-5" />
</linearGradient>
<radialGradient
r="42"
fy="30"
fx="51"
cy="30"
cx="51"
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
gradientUnits="userSpaceOnUse"
id="radialGradient10592"
xlink:href="#linearGradient34508-1-3"
inkscape:collect="always" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient34508-1-3"
id="radialGradient3770"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
cx="51"
cy="30"
fx="51"
fy="30"
r="42" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient34508-1-3"
id="radialGradient3001"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
cx="51"
cy="30"
fx="51"
fy="30"
r="42" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient34508-1-3"
id="radialGradient3007"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
cx="51"
cy="30"
fx="51"
fy="30"
r="42" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient34508-1-3"
id="radialGradient3067"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
cx="51"
cy="30"
fx="51"
fy="30"
r="42" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient34508-1-3"
id="radialGradient3072"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
cx="51"
cy="30"
fx="51"
fy="30"
r="42" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient34508-1-3"
id="radialGradient2997"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
cx="51"
cy="30"
fx="51"
fy="30"
r="42" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="8"
inkscape:cx="-23.537329"
inkscape:cy="-31.442864"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="2133"
inkscape:window-height="1241"
inkscape:window-x="238"
inkscape:window-y="88"
inkscape:window-maximized="0"
borderlayer="true"
inkscape:showpageshadow="false">
<inkscape:grid
type="xygrid"
id="grid3109"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<metadata
id="metadata10626">
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-469.08263,-537.99307)">
<circle
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:0.23756906;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="path7305"
cx="481.57138"
cy="559.4649"
r="1.5" />
</g>
</svg>
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><circle style="color:#000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;fill:#242424;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" cx="16" cy="28" r="2"/></svg>

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 718 B

View File

@ -1,34 +1,37 @@
// 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%));
$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
$fg_color: if($variant == 'light', #2e3436, #eeeeec);
$base_color: if($variant == 'light', #fff, lighten(desaturate(#242424, 20%), 2%));
$bg_color: if($variant == 'light', #f6f5f4, #242424);
$fg_color: if($variant == 'light', transparentize(black, .2), white);
$selected_fg_color: #fff;
$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
$selected_bg_color: if($variant == 'light', #3584e4, #1c71d8);
$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, 8%));
$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93));
$borders_color: if($variant == 'light', darken($bg_color, 12%), darken($bg_color, 3%));
$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 2%));
$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;
$warning_color: #f57900;
$error_color: #ff8080;
$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
$warning_color: if($variant == 'light', #e5a50a, #f5c211);;
$error_color: if($variant == 'light', #e01b24, #c01c28);
$success_color: if($variant == 'light', #2ec27e, #26a269);
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
$osd_fg_color: #eeeeec;
$osd_text_color: white;
$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04);
$osd_fg_color: white;
$osd_bg_color: transparentize(desaturate(#242424, 100%),0.04);
$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: 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(white, 0.84);
$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color
// overview background color
$system_bg_color: if($variant == 'light', darken(desaturate($bg_color, 100%), 35%), darken($bg_color, 2%));
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);

View File

@ -33,21 +33,21 @@ $base_spacing: 6px;
// border radii
$base_border_radius: 8px;
$modal_radius:$base_border_radius * 2;
// radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius*2; // 24px
// non-standard colors
$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 4%));
// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
// hover
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%));
$hover_borders_color: lighten($borders_color,if($variant=='light', 5%, 3%));
// derived hover colors
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 7%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%));
// active
$active_bg_color: if($variant == 'light', darken($bg_color, 7%), darken($bg_color, 9%));
// derived active colors
$active_bg_color: darken($bubble_buttons_color,if($variant=='light', 9%, 2%));
$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%));
// fonts
$base_font_size: 11;
@ -76,8 +76,8 @@ stage {
%osd_panel {
color: $osd_fg_color;
background-color: $osd_bg_color;
//border: 1px solid $osd_outer_borders_color;
border-radius: $base_border_radius * 2 + 4px;
border: 1px solid $osd_outer_borders_color;
border-radius: $modal_radius;
padding: $base_padding*2;
}
@ -90,23 +90,16 @@ stage {
// icon tiles
%icon_tile {
border-radius: $base_border_radius + 4px;
border-radius: $base_border_radius * 2; // 16px
padding: $base_padding;
border: 2px solid transparent;
transition-duration: 100ms;
text-align: center;
}
// dialogs
%bubble_panel {
color: $fg_color;
background-color: $bg_color;
border: 1px solid if($variant=='light', rgba(0,0,0, 0.6), $borders_color);
}
// button styling
%button {
border-radius: $base_border_radius;
border-radius: $base_border_radius - 2px; // 6px
border-style: solid;
border-width: 1px;
min-height: 22px;
@ -119,41 +112,45 @@ stage {
&:active, &:checked { @include button(active);}
}
// buttons in dialogs
%bubble_button {
@include button(normal, $shadow: none);
padding: $base_padding * 2;
border-style: solid;
border-width: 1px;
border-left-width: 0;
border-bottom-width: 0;
// dialogs
%bubble_panel {
color: $fg_color;
background-color: $bg_color;
border-radius: $base_border_radius*1.25 + 1px;
border: 1px solid $borders_edge;
}
// buttons in dialogs/notifications
// styled to have no shadow and be lighter in color
$bubble_button_radius:$base_border_radius*1.25;
%bubble_button {
padding: $base_padding * 2;
border: 0 solid $bg_color !important;
border-radius: 0;
border-right-width: 1px !important;
@include button(normal, $bubble_buttons_color, $shadow: none);
&:insensitive { @include button(insensitive, $shadow: none); }
&:focus { @include button(focus, $shadow: none); }
&:hover { @include button(hover, $shadow: none); }
&:active { @include button(active, $shadow: none); }
&:hover { @include button(hover, $bubble_buttons_color, $shadow: none); }
&:active { @include button(active, $bubble_buttons_color, $shadow: none); }
// radius is 2 pixel less to fit in bubble
&:first-child {
border-radius: 0 0 0 $modal_radius - 2px;
border-radius: 0 0 0 $bubble_button_radius;
}
&:last-child {
border-right-width: 0;
border-radius: 0 0 $modal_radius - 2px 0;
}
&:first-child:last-child {
border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px;
border-radius: 0 0 $bubble_button_radius 0;
border-right-width: 0 !important;
}
}
// notification styling
// styling for elements within popovers that look like notifications
@mixin notification_bubble($flat: false) {
border-width: 1px;
border-width: 0px;
border-style: solid;
border-radius: $base_border_radius + 2px;
border-radius: $base_border_radius;
margin: $base_margin;
@if $flat {

View File

@ -138,37 +138,38 @@
@if $t==normal {
color: $tc;
background-color: lighten($c, 3%);
border-color: draw_border_color($c);
border-color: lighten($c, 3%);
@include draw_shadows($button_shadow);
// 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;
text-shadow: none;
icon-shadow: none;
}
// focused button
@if $t==focus {
color: $tc;
text-shadow: 0 1px $text_shadow_color;
icon-shadow: 0 1px $text_shadow_color;
background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
// border-color: lighten($c, 3%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
//border-color: $selected_bg_color;
text-shadow: none;
icon-shadow: none;
}
// hover button
@else if $t==hover {
color: $tc;
background-color: lighten($c, if($variant == 'light', 8%, 5%));
border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
border-color: lighten($c, if($variant == 'light', 8%, 5%));
@include draw_shadows($button_shadow);
text-shadow: 0 1px $text_shadow_color;
icon-shadow: 0 1px $text_shadow_color;
text-shadow: none;
icon-shadow: none;
}
// active button
@else if $t==active {
color: $tc;
background-color: darken($c,3%);
border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
border-color: darken($c,3%);
text-shadow: none;
icon-shadow: none;
box-shadow: none;
@ -177,7 +178,7 @@
// insensitive button
@else if $t==insensitive {
color: $insensitive_fg_color;
border-color: $insensitive_borders_color;
border-color: $insensitive_bg_color;
background-color: $insensitive_bg_color;
box-shadow: none;
text-shadow: none;
@ -196,7 +197,7 @@
}
// overview icons
@mixin overview-icon($color) {
@mixin overview_icon($color) {
.overview-icon {
@extend %icon_tile;
color: $color;
@ -223,6 +224,7 @@
}
}
&:focus,
&:active,
&:checked {
.overview-icon {

View File

@ -24,6 +24,8 @@ $osd_fg_color: #eeeeec;
$osd_bg_color: #2e3436;
$osd_borders_color: rgba(0,0,0, 0.7);
$osd_outer_borders_color: rgba(255,255,255, 0.1);
$osd_insensitive_bg_color: mix($osd_fg_color, $osd_bg_color, 10%);
$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%));
$shadow_color: rgba(0,0,0, 0.1);
$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color

View File

@ -20,7 +20,7 @@ $app_grid_fg_color: #fff;
// Icon tiles in the app grid
.app-well-app,
%app-well-app {
%app_well_app {
@include overview-icon($app_grid_fg_color);
.overview-icon.overview-icon-with-label {
@ -35,12 +35,12 @@ $app_grid_fg_color: #fff;
/* App Folders */
.app-well-app.app-folder {
background-color: $dash_background_color;
border-radius: $base_border_radius + 4px; // same as %icon_tile
border-radius: $base_border_radius * 2; // same as %icon_tile
}
// expanded folder
.app-folder-dialog { //style like the dash
border-radius: $modal_radius * 1.5;
border-radius: 48px;
background-color: $dash_background_color;
padding: 12px 0px 12px 0px;
@ -51,7 +51,7 @@ $app_grid_fg_color: #fff;
& .folder-name-label,
& .folder-name-entry {
font-size: 18pt;
font-weight: 800;
font-weight: 1000;
}
& .folder-name-entry { width: 300px }
@ -60,14 +60,17 @@ $app_grid_fg_color: #fff;
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
& .edit-folder-button {
@extend %button;
@include button(undecorated, $shadow: none);
padding: 0;
width: 36px;
height: 36px;
border-radius: 18px;
& > StIcon { icon-size: 16px }
&:focus {@include button(focus);}
&:hover {@include button(hover);}
&:active {@include button(active);}
& > StIcon { icon-size: $base_icon_size }
}
}
@ -84,8 +87,9 @@ $app_grid_fg_color: #fff;
margin-bottom: 18px;
}
}
.app-folder-dialog-container {
padding: 12px;
padding: $base_padding*2;
width: 620px;
height: 620px;
}
@ -96,7 +100,7 @@ $app_grid_fg_color: #fff;
width: 5px;
border-radius:5px;
background-color: $osd_fg_color;
margin-bottom: 1px;
margin-bottom: 2px;
}
// Rename popup for app folders
@ -148,7 +152,7 @@ $app_grid_fg_color: #fff;
background-gradient-start: rgba(255, 255, 255, 0.05);
background-gradient-end: transparent;
background-gradient-direction: horizontal;
border-radius: 15px 0px 0px 15px;
border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5;
}
&.previous:ltr,
@ -156,7 +160,7 @@ $app_grid_fg_color: #fff;
background-gradient-start: transparent;
background-gradient-end: rgba(255, 255, 255, 0.05);
background-gradient-direction: horizontal;
border-radius: 0px 15px 15px 0px;
border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px;
}
}

View File

@ -1,14 +1,5 @@
/* Date/Time Menu */
.clock-display-box {
spacing: 2px;
.clock {
padding-left: $base_padding * 2;
padding-right: $base_padding * 2;
}
}
// overall menu
#calendarArea {
padding:0;
@ -17,11 +8,13 @@
// Calendar menu side column
.datemenu-calendar-column {
spacing: $base_spacing;
border: 0 solid $bubble_borders_color;
padding: 0 $base_padding * 2;
border: none;
border-style: solid;
border-color: $borders_color;
padding: 0;
&:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
&:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }
&:ltr {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
&:rtl {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
.datemenu-displays-section {
}
@ -33,7 +26,7 @@
.events-section-title {
@include notification_bubble($flat: true);
color: desaturate(darken($fg_color,40%), 10%);
color: $insensitive_fg_color;
font-weight: bold;
padding: .4em;
}
@ -46,6 +39,7 @@
// weekday label
.day-label {
@include fontsize($base_font_size+1);
color: $insensitive_fg_color;
font-weight: bold;
}
@ -66,7 +60,6 @@
color: lighten($fg_color,5%);
font-weight: bold;
padding: 8px 0;
&:focus {}
}
// prev/next month icons
@ -79,24 +72,24 @@
background-color: transparent;
height: 32px;
width: 32px;
border-radius: $base_border_radius;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
border-radius: $base_border_radius - 2px;
&:hover, &:focus { background-color: $hover_bg_color; }
&:active { background-color: $active_bg_color; }
}
$calendar_day_size: 32px;
.calendar-day-base {
@include fontsize($base_font_size - 3);
text-align: center;
width: $calendar_day_size;
height: $calendar_day_size;
padding: 0;
margin: 2px;
height: $calendar_day_size;
width: $calendar_day_size;
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%);
@ -105,9 +98,11 @@
// day of week heading
&.calendar-day-heading {
color: lighten($fg_color,10%);
margin-top: 1em;
@include fontsize($base_font_size - 4);
color: $insensitive_fg_color;
font-weight: 1000;
padding-top: $base_padding;
height: 16px !important; // force heading to be smaller height
@include fontsize($base_font_size - 2);
}
}
@ -123,7 +118,8 @@
border-left-width: 1px;
}
.calendar-work-day {}
.calendar-work-day {
}
.calendar-nonwork-day {
color: $insensitive_fg_color;
@ -131,29 +127,30 @@
// Today
.calendar-today {
font-weight: bold;
border: 1px solid transparent;
background-color: $selected_bg_color;
color: $selected_fg_color;
border: 1px solid transparent;
font-weight: bold;
color: $selected_fg_color !important;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: $selected_fg_color;
color: inherit;
}
&:active,&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
color: inherit;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: $selected_fg_color;
color: inherit;
}
}
}
.calendar-day-with-events {
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today.svg"), url("resource:///org/gnome/shell/theme/calendar-today-dark.svg"));
background-size: contain;
&.calendar-work-day {
color: lighten($fg_color,10%);
font-weight: bold;
@ -161,7 +158,7 @@
}
.calendar-other-month-day {
color: transparentize($fg_color ,0.5);
color: transparentize($fg_color ,0.5) !important;
}
.calendar-week-number {
@ -190,13 +187,13 @@
}
.events-title {
color: desaturate(darken($fg_color,40%), 10%);
color: $insensitive_fg_color;
font-weight: bold;
margin-bottom: $base_margin;
}
.event-time {
color: darken($fg_color,20%);
color: $insensitive_fg_color;
font-feature-settings: "tnum";
@include fontsize($base_font_size - 1);
}
@ -214,7 +211,7 @@
// title
.world-clocks-header {
color: desaturate(darken($fg_color,40%), 10%);
color: $insensitive_fg_color;
font-weight: bold;
}
@ -238,7 +235,7 @@
// timezone offset label
.world-clocks-timezone {
color: darken($fg_color,20%);
color: $insensitive_fg_color;
font-feature-settings: "tnum";
@include fontsize($base_font_size - 1);
}
@ -258,7 +255,7 @@
}
.weather-header {
color: desaturate(darken($fg_color,40%), 10%);
color: $insensitive_fg_color;
font-weight: bold;
&.location {

View File

@ -1,18 +1,17 @@
/* Dash */
$dash_background_color: #3b3b3b;
$dash_background_color: lighten($system_bg_color, 5%);
$dash_placeholder_size: 32px;
$dash_padding: $base_padding + 4px; // 10px
$dash_spacing: $base_padding / 4;
$dash_bottom_margin: $base_margin * 4;
$dash_border_radius: $modal_radius + 8px;
$dash_border_radius: $modal_radius * 1.5;
// container for the dash
#dash {
@include fontsize($base_font_size - 2);
margin-top: $base_spacing * 3;
padding: 0 $dash_padding;
margin-top: $base_margin * 3;
padding: $dash_padding;
.placeholder {
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
@ -26,27 +25,51 @@ $dash_border_radius: $modal_radius * 1.5;
height: $dash_placeholder_size;
}
// icon on the dash
.overview-icon {
padding: $dash_padding / 2;
padding: $base_padding+2px;
}
// Running app indicator (also shown in app grid)
.app-well-app-running-dot {
height: 5px;
width: 5px;
border-radius:5px;
background-color: $osd_fg_color;
margin-bottom: 12px;
}
}
// background of the dash behind app icons
.dash-background {
background-color: $dash_background_color;
margin-bottom: $dash_bottom_margin;
padding: $dash_padding;
border-radius: $dash_border_radius;
margin-bottom: 0; // this keeps things vertically centered
padding: $dash_padding;
}
// Dash Items
.dash-item-container .app-well-app, .show-apps {
padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin;
// items on the dash
.dash-item-container {
// each app item on the dash
.app-well-app {
padding:0;
margin: 2px;
}
// show apps button
.show-apps {
@include overview_icon($osd_fg_color);
margin: 2px;
padding: 0;
}
}
// separator between favourites and running apps
.dash-separator {
width: 1px;
margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin;
background-color: transparentize($osd_fg_color,0.7);
margin: 0 $base_margin*2;
background-color: transparentize($borders_color,0.5);
}
// OSD Tooltip
@ -56,18 +79,5 @@ $dash_border_radius: $modal_radius * 1.5;
border-radius: 99px;
padding: $base_padding $base_padding * 2;
text-align: center;
-y-offset: $base_margin * 3; // distance from the dash edge
}
// Show apps button
.show-apps {
@include overview-icon($osd_fg_color);
&:focus,
&:checked {
.overview-icon {
background-color: transparentize($osd_bg_color,0.5);
color: $fg_color;
}
}
-y-offset: $base_margin * 2; // distance from the dash edge
}

View File

@ -5,7 +5,6 @@
}
.modal-dialog {
border-radius: $modal_radius;
@extend %bubble_panel;
.modal-dialog-content-box {

View File

@ -1,15 +1,16 @@
/* On-screen Keyboard */
$key_size: 1.2em;
$key_border_radius: $base_border_radius + 3px;
$key_bg_color: $bg_color;
$key_border_radius: $base_border_radius + 4px; // 12px
$key_bg_color: darken($osd_fg_color, 70%);
// $default_key_bg_color: darken($key_bg_color, 4%);
$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
$default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%));
// draw keys using button function
#keyboard {
background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
// background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
background-color: $osd_bg_color;
box-shadow: inset 0 1px 0 0 $osd_outer_borders_color;
.page-indicator {
@ -31,13 +32,14 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
// the keys
.keyboard-key {
@include button(normal, $c:$key_bg_color);
@include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
&:focus { @include button(focus);}
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
&:active { @include button(active, $c: $key_bg_color); }
&:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
&:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
@include fontsize($base_font_size + 5);
font-weight: bold;
min-height: $key_size;
min-width: $key_size;
border-width: 1px;
@ -52,42 +54,56 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
// non-character keys
&.default-key {
@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);}
@include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
&:hover, &:checked {@include button(hover, $c: $default_key_bg_color, $tc:$osd_fg_color);}
&:active { @include button(active, $c: $default_key_bg_color, $tc:$osd_fg_color);}
border-radius: $key_border_radius;
}
// enter key is suggested-action
&.enter-key {
@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%));}
&:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%), $tc:$selected_fg_color);}
&:active {@include button(active, $c: darken($selected_bg_color, 2%), $tc:$selected_fg_color);}
border-radius: $key_border_radius;
color: $osd_fg_color;
}
&.shift-key-uppercase { color: $selected_bg_color }
&.shift-key-lowercase {}
StIcon { icon-size: 1.125em; }
// pressed shift has different style
&.shift-key-uppercase {
background-color: lighten($key_bg_color, 20%);
color: $osd_bg_color;
&:hover {
background-color: lighten($key_bg_color, 25%);
color: lighten($osd_bg_color, 5%);
}
}
// size of icons on keys
StIcon { icon-size: 24px; }
}
// long press on a key popup
.keyboard-subkeys {
color: $osd_fg_color;
-arrow-border-radius: $modal_radius;
-arrow-border-radius: $base_border_radius*2;
-arrow-background-color: $osd_bg_color;
-arrow-border-width: 1px;
-arrow-border-color: lighten($osd_bg_color, 9%);
-arrow-base: 20px;
-arrow-rise: 10px;
-boxpointer-gap: $base_spacing;
padding: $base_padding;
.keyboard-key {
@include button(normal, $c:$key_bg_color);
@include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
&:focus { @include button(focus);}
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
&:active { @include button(active, $c: $key_bg_color); }
&:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
&:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
border-radius:$base_border_radius;
border-radius:$key_border_radius;
}
}
@ -112,4 +128,20 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
@include fontsize($base_font_size + 3);
spacing: 12px;
min-height: 20pt;
padding: $base_padding*2;
color: $osd_fg_color;
// each suggestion
StButton {
margin: 0 3px;
min-width: 32px;
border-radius: $base_border_radius - 2px;
padding: $base_padding $base_padding*3;
@include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color);
&:focus { @include button(focus);}
&:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
&:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
}
}

View File

@ -1,46 +1,56 @@
/* Looking Glass */
$text_fg_color: #ccc;
// Dialog
#LookingGlassDialog {
background-color: $osd_bg_color;
spacing: $base_spacing;
padding: 4px;
border: 1px solid transparentize($osd_fg_color, 0.8);
border-radius: $base_border_radius;
border-radius: 0 0 $base_border_radius $base_border_radius;
border-top-width: 0;
border: 1px solid $osd_outer_borders_color;
color: $osd_fg_color;
padding: $base_padding;
spacing: $base_spacing;
& > #Toolbar {
border: none;
border-radius: $base_border_radius;
background-color: $osd_bg_color;
padding: $base_padding;
border-radius: 0;
background-color: transparent;
}
.labels {
spacing: $base_spacing;
}
.labels { spacing: $base_spacing; }
.notebook-tab {
-natural-hpadding: $base_padding*2;
-minimum-hpadding: 6px;
-minimum-hpadding: $base_padding*2;
font-weight: bold;
padding: $base_padding $base_padding*2;
color: darken($osd_fg_color, 15%);
transition-duration: 100ms;
padding-left: .3em;
padding-right: .3em;
border-bottom-width: 2px;
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 {
border-bottom-width: 2px;
box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color, 5%);
color: $osd_fg_color;
background-color: transparentize($osd_fg_color, 0.9);
}
}
StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; }
StBoxLayout#ResultsArea { spacing: $base_spacing; }
StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; padding: $base_padding; }
StBoxLayout#ResultsArea { spacing: $base_spacing; padding: $base_padding; }
}
.lg-dialog {
StEntry {
background-color: transparentize(lighten($osd_bg_color, 5%), 0.4);
color: $osd_fg_color;
@ -49,15 +59,17 @@ $text_fg_color: #ccc;
selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color;
}
.shell-link {
color: $link_color;
&:hover { color: lighten($link_color, 10%); }
&:active { color: darken($link_color, 10%); }
}
.actor-link {
color: $text_fg_color;
&:hover { color: lighten($text_fg_color, 20%); }
&:active { color: darken($text_fg_color, 20%); }
color: $insensitive_fg_color;
&:hover { color: lighten($insensitive_fg_color, 20%); }
&:active { color: darken($insensitive_fg_color, 20%); }
}
}
@ -78,18 +90,16 @@ $text_fg_color: #ccc;
}
// Extensions
#lookingGlassExtensions { padding: 4px; }
#lookingGlassExtensions { padding: $base_padding; }
.lg-extensions-list {
padding: 4px;
spacing: 6px;
padding: $base_padding;
spacing: $base_spacing;
}
.lg-extension {
border: 1px solid lighten($osd_borders_color, 5%);
background-color: lighten($osd_bg_color, 5%);
border-radius: $base_border_radius;
padding: 4px;
padding: $base_padding*2;
@include notification_bubble;
}
.lg-extension-name {
@ -97,7 +107,7 @@ $text_fg_color: #ccc;
}
.lg-extension-meta {
spacing: 6px;
spacing: $base_spacing;
}
// Inspector
@ -105,19 +115,20 @@ $text_fg_color: #ccc;
background: $osd_bg_color;
border: 1px solid $osd_borders_color;
border-radius: $base_border_radius;
padding: 6px;
padding: $base_padding;
}
.lg-debug-flag-button {
StLabel { padding: $base_spacing, 2 * $base_spacing; }
color: $text_fg_color;
&:hover { color: lighten($text_fg_color, 20%); }
&:active { color: darken($text_fg_color, 20%); }
color: $fg_color;
&:hover { color: lighten($fg_color, 20%); }
&:active { color: darken($fg_color, 20%); }
}
.lg-debug-flags-header {
padding-top: 2 * $base_spacing;
font-size: 120%;
font-weight: bold;
padding: $base_padding;
}

View File

@ -3,15 +3,32 @@
// main list
.message-list {
width: 31.5em;
padding: 0 $base_padding * 2;
width: 32em;
padding: 0;
.message-list-placeholder { spacing: 12px; }
.message-list-placeholder {
font-weight:1000;
font-size: 18pt;
color: transparentize($fg_color, 0.7);
spacing: 12px;
// icon size and color
> StIcon {
icon-size: $base_icon_size*4; // 32px
-st-icon-style: symbolic;
}
}
}
.message-list-sections {
spacing: $base_spacing;
margin: 0 $base_margin * 4; // to account for scrollbar
margin: 0;
padding-bottom: $base_padding;
// to account for scrollbar
&:ltr {margin-right: $base_margin * 4; }
&:rtl {margin-left: $base_margin * 4;}
}
.message-list-section,
@ -21,10 +38,10 @@
// do-not-disturb + clear button
.message-list-controls {
margin: ($base_margin * 2) ($base_margin * 4) 0;
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: $base_margin;
spacing: $base_spacing * 2;
padding: $base_padding;
margin: 0;
spacing: $base_spacing;
.dnd-button {
// We need this because the focus outline isn't inset like for the buttons
@ -32,7 +49,7 @@
// its color when focusing.
border-width: 2px;
border-color: transparent;
border-radius: 99px;
border-radius: 32px;
border-style: solid;
&:focus {
@ -47,10 +64,11 @@
// icon container
.message-icon-bin {
padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
padding: ($base_padding * 3);
padding-right:$base_padding;
&:rtl {
padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
padding-right:$base_padding;
}
// icon size and color
@ -68,13 +86,16 @@
// content
.message-content {
padding: $base_padding + $base_margin * 2;
spacing: 4px;
padding: ($base_padding*1.5);
margin-bottom: $base_margin*2;
}
// title
.message-title {
font-weight: bold;
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-top: 0.57em;
}
// secondary container in title box
@ -95,9 +116,17 @@
// close button
.message-close-button {
color: lighten($fg_color, 15%);
&:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
&:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
color: $fg_color;
background-color: transparentize($fg_color, 0.9);
border-radius: 99px;
padding: $base_padding;
margin: 0;
&:hover {
background-color: transparentize($fg_color, 0.8);
}
&:active {
background-color: transparentize($fg_color, 0.9);
}
}
// body
@ -113,30 +142,32 @@
/* Media Controls */
.message-media-control {
padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px
color: darken($fg_color, 15%);
padding: 0 $base_padding*2;
margin: $base_padding*2 0;
border-radius: $base_border_radius;
color: $fg_color;
// uses $hover_bg_color since the media controls are in a notification_bubble
// colors are lightened 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%);
background-color: lighten($active_bg_color, 5%);
color: $fg_color;
}
&:insensitive { color: darken($fg_color,40%); }
&:insensitive { color: lighten($insensitive_fg_color, 5%); }
// fix border-radius for last button
&:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
&:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
&:last-child:ltr { margin-right: $base_margin*3; }
&:last-child:rtl { margin-left: $base_margin*3; }
}
// album-art
.media-message-cover-icon {
icon-size: $base_icon_size*2 !important; // 48px
icon-size: $base_icon_size*3 !important; // 48px
border-radius: $base_border_radius;
// when there is no artwork
@ -145,6 +176,7 @@
background-color: $bg_color;
border: 1px solid transparent;
border-radius: $base_border_radius;
icon-size: $base_icon_size * 2 !important;
icon-size: $base_icon_size * 2 !important; // 32px
padding: ($base_padding*2 + 2); // 16px
}
}

View File

@ -23,27 +23,50 @@
.nm-dialog-header {
font-weight: bold;
}
.nm-dialog-subheader {
color: $insensitive_fg_color;
}
.nm-dialog-header-icon {
icon-size: $base_icon_size * 2;
}
.nm-dialog-header-hbox { spacing: 10px; }
// airplane mode
.nm-dialog-airplane-headline {
font-weight: bold;
}
.nm-dialog-airplane-text {
color: $insensitive_fg_color;
}
// list of networks
.nm-dialog-scroll-view {
border: 1px solid $borders_color;
padding:0;
border: none;
padding:$base_padding;
border-radius: $base_border_radius;
background-color: darken($bg_color, 3%);
}
// list item
.nm-dialog-item {
@include fontsize($base_font_size);
border-bottom: 1px solid $borders_color;
border: none;
padding: $base_padding * 2;
spacing: 0px;
text-shadow: none;
icon-shadow: none;
&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
border-radius: $base_border_radius - 3px;
}
&:hover {
background-color:$hover_bg_color;
}
}

View File

@ -2,11 +2,18 @@
$notification_banner_height: 64px;
$notification_banner_width: 34em;
$notification_banner_radius: $base_border_radius*1.5;
// make radius of buttons fit in bubble corner (banner radius - width of focus ring)
$notification_button_radius: ($notification_banner_radius - 2px);
// Banner notifications
.notification-banner {
min-height: $notification_banner_height;
width: $notification_banner_width;
box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
border-radius: $notification_banner_radius;
margin: $base_margin;
.notification-actions {
spacing: 0;

View File

@ -3,7 +3,7 @@
$panel_corner_radius: $base_border_radius+1;
$panel_bg_color: #000;
$panel_fg_color: #ddd;
$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
$panel_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration
@ -53,8 +53,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
}
&:hover, &:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
&:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
// The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background
@ -62,7 +62,27 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
}
}
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
}
}
}
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
}
}
}
@ -94,7 +114,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.login-screen,
&:overview {
.panel-button {
&:hover, &:active, &:overview, &:focus, &:checked {
&:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
&.clock-display {
@ -105,6 +125,26 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
}
}
&:hover {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
}
}
}
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
}
}
}
}
}
@ -133,3 +173,15 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
padding: 0 $base_padding;
spacing: $base_spacing;
}
// Clock
.clock-display-box {
spacing: 2px;
.clock {
padding-left: $base_padding * 2;
padding-right: $base_padding * 2;
}
}

View File

@ -1,16 +1,15 @@
/* Popovers/Menus */
$popover_arrow_height: 12px;
//.the popover itself
// the popover itself
.popup-menu-boxpointer {
-arrow-border-radius: $base_border_radius+4;
-arrow-border-radius: $modal_radius;
-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
-arrow-border-width: 1px;
-arrow-base: 24px;
-arrow-rise: 12px;
-arrow-box-shadow: none; // dreaming bugzilla #689995
margin: $base_margin; // used as distance from the screen edge
}
// container of the popover menu
@ -20,36 +19,74 @@ $popover_arrow_height: 12px;
//.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;
-boxpointer-gap: $base_margin+2px; // distance from the panel
// override popover styles for panel menus so
// we can draw a box shadow and no arrow
-arrow-border-radius: $modal_radius;
-arrow-background-color: transparent;
-arrow-border-color: transparent;
-arrow-border-width: 0;
-arrow-base: 0;
-arrow-rise: $base_margin; // use this as top margin
-arrow-box-shadow: none; // dreaming bugzilla #689995
margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
// style the menu content instead
.popup-menu-content {
border-radius: $modal_radius;
border: 1px solid $borders_color;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
background-color: $bg_color;
padding: $base_padding * 2;
}
.popup-menu-item {}
}
}
// popover content;
.popup-menu-content {
padding: $base_padding * 2 + $base_margin 0;
padding: $base_padding;
}
// menu items
.popup-menu-item {
spacing: $base_padding;
padding: $base_padding;
spacing: $base_spacing;
padding: $base_padding*2;
margin: 2px 0;
border-radius: $base_border_radius;
transition: 0.2s all ease;
&:ltr { padding-right:1.75em; padding-left: 0; }
&:rtl { padding-right: 0; padding-left:1.75em; }
&:hover {
background-color: $hover_bg_color;
}
&:checked {
background-color: lighten($bg_color, 2%);
box-shadow: none;
background-color: $hover_bg_color;
font-weight: bold;
margin-bottom: 0;
box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%);
border-radius: $base_border_radius $base_border_radius 0 0;
&:hover {
background-color: darken($hover_bg_color, 4%);
}
}
&.selected {
background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
background-color: transparentize($fg_color, if($variant=='light', 0.7, 0.9));
color: $fg_color;
}
&:active {
background-color: $selected_bg_color;
color: $selected_fg_color;
background-color: $active_bg_color;
color: $active_fg_color;
}
&:insensitive { color: transparentize($fg_color,0.5);}
@ -59,27 +96,65 @@ $popover_arrow_height: 12px;
.popup-inactive-menu-item {
color: $fg_color;
&:insensitive { color: transparentize($fg_color,0.5); }
// "Open Windows" label
font-weight: bold;
font-size: smaller;
&:insensitive { color: $insensitive_fg_color; }
}
// symbolic icons in popover
.popup-menu-arrow,
.popup-menu-icon { icon-size: $base_icon_size; }
.popup-menu-icon {
margin: 0;
padding:0;
icon-size: 16px !important;
}
.popup-menu-arrow {
margin-right: $base_margin;
}
// 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);
background-color: $hover_bg_color;
border:none;
border-radius: 0 0 $base_border_radius $base_border_radius;
padding: 0;
margin-top: 0;
&:active {
background-color: transparent;
}
.popup-menu-ornament {
min-width: 14px !important;
}
.popup-menu-item {
margin: 0;
border-radius: 0;
padding: $base_padding*1.5 $base_padding*2;
&:last-child:hover{
border-radius: 0 0 $base_border_radius $base_border_radius;
}
}
.popup-separator-menu-item {
margin: 0;
}
}
// container for radio and check boxes
.popup-menu-ornament {
width: 1.2em;
font-weight: bold;
font-size: 1em;
&:ltr { text-align: right };
&:rtl { text-align: left };
&:ltr { text-align: right; };
&:rtl { text-align: left; };
}
// separator
@ -89,13 +164,13 @@ $popover_arrow_height: 12px;
.popup-separator-menu-item-separator {
//-margin-horizontal: 24px;
height: 1px; //not really the whole box
margin: 6px 64px;
margin: $base_margin 4em;
background-color: lighten($borders_color, 2%);
.popup-sub-menu & { //submenu separators
margin: 0 64px 0 32px;
@if $variant == 'dark' {
background-color: lighten($bg_color,10%);
}
margin: 0 4em 0 3em; // balance it in the middle
padding:0 !important;
background-color: darken($hover_bg_color, 5%);
}
}
}
@ -110,6 +185,14 @@ $popover_arrow_height: 12px;
.aggregate-menu {
min-width: 21em;
// this is unneeded in at the top-level this menu, hide it
.popup-menu-ornament {width:0;padding:0;spacing:0;margin:0;}
.popup-menu-item {
&:ltr { padding-left:$base_padding;padding-right:$base_padding*2; }
&:rtl { padding-right:$base_padding;padding-left:$base_padding*2; }
}
// lock screen, shutdown, etc. buttons
.popup-menu-icon {
padding:0;
@ -120,11 +203,11 @@ $popover_arrow_height: 12px;
.popup-sub-menu .popup-menu-item > :first-child {
// account for icons in submenus with padding
&:ltr {
padding-left: $base_padding + $base_margin * 2;
padding-left: 0;
margin-left: $base_icon_size;
}
&:rtl {
padding-right: $base_padding + $base_margin * 2; ;
padding-right: 0;
margin-right: $base_icon_size;
}
}

View File

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

View File

@ -11,31 +11,33 @@
// This should be equal to #searchResultsContent spacing
spacing: $base_margin * 2;
// separator
// separator (unstyled)
.search-section-separator {
// height: 1px;
// background-color: $osd_outer_borders_color;
height: 0;
height: $base_margin*2; // use it as a spacer
background-color: transparent;
}
}
// content
.search-section-content {
background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
border-radius: $modal_radius+3;
background-color: lighten($system_bg_color, 5%);
border-radius: $modal_radius*1.5;
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));
box-shadow: none;
text-shadow: none;
color: $osd_fg_color;
padding: $base_padding * 3;
margin: $base_margin;
// This is the space between the provider icon and the results container
spacing: $base_margin * 2;
}
%search-section-content-item {
%search_section_content_item {
@extend %icon_tile;
border-radius: $base_border_radius;
color: $osd_fg_color;
&:focus,
&:hover,
&:selected {
@ -60,12 +62,12 @@
// Search results with icons
.grid-search-result {
@extend %app-well-app;
@extend %app_well_app;
}
// search result provider
.search-provider-icon {
@extend %search-section-content-item;
@extend %search_section_content_item;
// content
.list-search-provider-content {
@ -74,9 +76,7 @@
// provider labels
.list-search-provider-details {
width: 120px;
margin-top: 0;
color: darken($osd_fg_color, 8%);
// font-weight: bold;
color: $osd_fg_color;
}
}
}
@ -88,7 +88,7 @@
// search result listitem
.list-search-result {
@extend %search-section-content-item;
@extend %search_section_content_item;
// content
.list-search-result-content {
@ -103,6 +103,6 @@
// list item description
.list-search-result-description {
color: darken($osd_fg_color, 30%);
color: $osd_insensitive_fg_color;
}
}

View File

@ -1,27 +1,28 @@
/* Slider */
$slider_size: 15px;
$slider_size: 16px;
.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
-barlevel-height: 4px;
-barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough
-barlevel-border-width: 2px;
-barlevel-border-color: transparent; // 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
-barlevel-active-background-color: $selected_bg_color;
-barlevel-active-border-color: transparent;
// 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-border-color: transparent; //trough border when red;
-barlevel-overdrive-separator-width:1px;
// slider handler
-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);
-slider-handle-border-width: 0;
-slider-handle-border-color: transparent; // because 0 width
margin: 0 $base_padding;
color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
color: $fg_color;
&:hover { color: $hover_bg_color; }
&:active { color: $active_bg_color; }
}

View File

@ -1,37 +1,51 @@
/* App Switcher */
// same as dash
$switcher_padding: $base_padding + 4px; // 10px
$switcher_border_radius: $modal_radius + 8px;
// the full screen container of the switcher
.switcher-popup {
padding: 8px;
padding: 0;
spacing: $base_spacing * 4;
}
// switcher onscreen panel
.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);
// container for items in list
.switcher-list-item-container {
spacing: $base_spacing * 2;
}
// each item in the list
.item-box {
padding: 8px;
border-radius: $base_border_radius + 1px;
border: 1px solid transparent;
@extend %icon_tile;
&:outlined {
background-color: transparentize($osd_fg_color, 0.7);
}
&:hover,
&:selected {
background-color: transparentize($osd_fg_color, 0.7);
color: $osd_fg_color;
}
background-color: transparentize($osd_fg_color, .9);
}
// window thumbnails
.thumbnail-box {
padding: 2px;
spacing: $base_spacing;
&:focus {
background-color: transparentize($osd_fg_color, .7);
// border-color: $selected_bg_color;
}
.thumbnail {
width: 256px;
&:focus,
&:active,
&:checked {
background-color: transparentize(darken($osd_bg_color, 10%), .5);
}
}
.separator {
@ -39,16 +53,27 @@
background: $borders_color;
}
.switcher-list-item-container {
spacing: $base_spacing * 2;
// container of thumbnails
.thumbnail-box {
padding: 2px;
spacing: $base_spacing;
}
// window thumbnail itself
.thumbnail {
width: 256px; // equal to THUMBNAIL_DEFAULT_SIZE in altTab.js
border-radius:$base_border_radius;
}
}
// arrow if app has multiple windows
.switcher-arrow {
border-color: rgba(0,0,0,0);
color: transparentize($fg_color,0.2);
border-color: transparentize($osd_fg_color, 0.2);
color: transparentize($osd_fg_color, 0.2);
&:highlighted {
color: $fg_color;
border-color: $osd_fg_color;
color: $osd_fg_color;
}
}

View File

@ -1,8 +1,8 @@
/* Switches */
// these are equal to the size of the SVG assets
$switch_height: 22px;
$switch_width: 46px;
$switch_height: 26px;
$switch_width: 48px;
.toggle-switch {
color: $fg_color;

View File

@ -1,17 +1,23 @@
/* Workspace Switcher */
$ws_padding: $base_padding*2;
$ws_border_radius: $modal_radius + 8px;
.workspace-switcher-group {
padding: $base_padding * 2;
}
.workspace-switcher-container {
@extend %osd_panel;
padding: $ws_padding;
border-radius: $ws_border_radius;
box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
}
.workspace-switcher {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
spacing: $base_spacing * 2;
}

View File

@ -1,6 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<g fill="#2e3436">
<path d="M6 8H2.937l5.126-5.781L13.186 8H10v2H6z" style="marker:none" color="#000" overflow="visible"/>
<path d="M6 11h4v2H6z" style="marker:none"/>
</g>
</svg>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g style="stroke-width:.666667"><path style="stroke-width:.666666;marker:none" d="m8.092-1-7.5 8h4.5v4h6V7h4.5zm-3 14v4h6v-4z" fill="#2e3436" transform="translate(3.908 4)"/></g></svg>

Before

Width:  |  Height:  |  Size: 268 B

After

Width:  |  Height:  |  Size: 247 B

View File

@ -1,6 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<g font-weight="400" fill="#2e3436">
<path d="M11.994 3v4.004c.002.666-.183.72-.445.852-.262.13-.555.144-.555.144H4v2h6.994s.71.014 1.45-.355c.738-.37 1.552-1.313 1.55-2.645V3z" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;marker:none" color="#000" font-family="sans-serif" overflow="visible"/>
<path d="M6 12v-1c0-.257-.13-.528-.313-.719l-1.28-1.303 1.28-1.26C5.87 7.529 6 7.258 6 7V6H5c-.31 0-.552.09-.75.281L1.594 8.978l2.656 2.74c.198.192.44.282.75.282z" 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" color="#bebebe" font-family="Bitstream Vera Sans" overflow="visible"/>
</g>
</svg>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path style="font-weight:400;line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;fill:#2e3436;marker:none" d="M19.2 6v6.004c.006.996-1 .996-1 .996H6.608l1.285-1.281c.183-.19.313-.461.313-.719v-1h-1c-.31 0-.552.09-.75.281L2.8 13.98l3.656 3.74c.198.19.75.28.75.28h1v-1s-.13-.528-.313-.719L6.616 15H18.2c3.006 0 3-3 3-3V6Z"/></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 790 B

View File

@ -1,7 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<g color="#000" fill="#2e3436">
<path d="M4.707 5.293L3.293 6.707 8 11.414l4.707-4.707-1.414-1.414L8 8.586z" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;marker:none" font-weight="400" font-family="sans-serif" overflow="visible"/>
<path d="M12 6V5h1v1zM3 6V5h1v1z" style="marker:none" overflow="visible"/>
<path d="M3 6c0-.554.446-1 1-1s1 .446 1 1-.446 1-1 1-1-.446-1-1zM11 6c0-.554.446-1 1-1s1 .446 1 1-.446 1-1 1-1-.446-1-1z" style="marker:none" overflow="visible"/>
</g>
</svg>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path style="color:#000;line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;fill:#2e3436;marker:none" d="M3 8v1c0 .277.112.526.293.707L12 18.414l8.707-8.707c.18-.18.296-.38.293-.707V8h-1a.996.996 0 0 0-.707.293L12 15.586 4.707 8.293A.996.996 0 0 0 4 8Z"/></svg>

Before

Width:  |  Height:  |  Size: 990 B

After

Width:  |  Height:  |  Size: 723 B

View File

@ -1,7 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<g fill="#2e3436" fill-rule="evenodd">
<path d="M2 1v14h2V1z" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" color="#000" font-weight="400" font-family="sans-serif" overflow="visible"/>
<path d="M3 1a1 1 0 00-1 1v6a1 1 0 001 1h3.383l.722 1.447A1 1 0 008 11h5a1 1 0 001-1V4a1 1 0 00-1-1H9.617l-.722-1.447A1 1 0 008 1zm1 2h3.383l.722 1.447A1 1 0 009 5h3v4H8.617l-.722-1.447A1 1 0 007 7H4z" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" color="#000" font-weight="400" font-family="sans-serif" overflow="visible"/>
<path d="M3 8h4l1 2h5V4H9L8 2H3z"/>
</g>
</svg>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;fill:#2e3436;fill-rule:evenodd" d="M5 3v19h2V12h3.383l.722 1.447A1 1 0 0 0 12 14h6a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-4.383l-.722-1.447A1 1 0 0 0 12 3H6Z"/></svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 685 B

View File

@ -1,3 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path d="M6 13V9H2.937l5.126-5.781L13.186 9H10v4z" style="marker:none" color="#000" overflow="visible" fill="#2e3436"/>
</svg>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g style="stroke-width:.666667"><path style="stroke-width:.666666;marker:none" d="m8.092 0-7.5 8h4.5v7h6V8h4.5z" fill="#2e3436" transform="translate(3.908 4)"/></g></svg>

Before

Width:  |  Height:  |  Size: 195 B

After

Width:  |  Height:  |  Size: 233 B

View File

@ -1,175 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="64px"
height="64px"
id="svg3393"
version="1.1"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="no-notifications.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs3395">
<clipPath
id="clipPath6262-0"
clipPathUnits="userSpaceOnUse">
<rect
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
id="rect6264-6"
width="3.8250003"
height="6.3750005"
x="26.849981"
y="220.75" />
</clipPath>
<clipPath
id="clipPath6258-0"
clipPathUnits="userSpaceOnUse">
<rect
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
id="rect6260-6"
width="2.8977275"
height="5.3129687"
x="26.965673"
y="221.28162" />
</clipPath>
<clipPath
id="clipPath6254-6"
clipPathUnits="userSpaceOnUse">
<rect
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none"
id="rect6256-6"
width="1.876245"
height="4.8783236"
x="26.998718"
y="221.50153" />
</clipPath>
<clipPath
id="clipPath8028-3"
clipPathUnits="userSpaceOnUse">
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m -73,-30 -7,-7 v -4.5 h 16.5 v 4.5 l -7.5,7 z"
id="path8030-6"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath6810-7-87-7">
<rect
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
id="rect6812-2-4-5"
width="14"
height="11"
x="21"
y="281" />
</clipPath>
<clipPath
id="clipPath6262"
clipPathUnits="userSpaceOnUse">
<rect
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
id="rect6264"
width="3.8250003"
height="6.3750005"
x="26.849981"
y="220.75" />
</clipPath>
<clipPath
id="clipPath6258"
clipPathUnits="userSpaceOnUse">
<rect
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
id="rect6260"
width="2.8977275"
height="5.3129687"
x="26.965673"
y="221.28162" />
</clipPath>
<clipPath
id="clipPath6254"
clipPathUnits="userSpaceOnUse">
<rect
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none"
id="rect6256"
width="1.876245"
height="4.8783236"
x="26.998718"
y="221.50153" />
</clipPath>
<inkscape:path-effect
effect="spiro"
id="path-effect3951"
is_visible="true" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="125.08157"
inkscape:cy="-13.805087"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:document-units="px"
inkscape:grid-bbox="true"
inkscape:window-width="1664"
inkscape:window-height="1034"
inkscape:window-x="1479"
inkscape:window-y="252"
inkscape:window-maximized="0"
inkscape:pagecheckerboard="1" />
<metadata
id="metadata3398">
<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 />
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer">
<g
fill="#2e3436"
id="g91"
transform="matrix(3.96875,0,0,3.96875,0.25,0.2499995)"
style="fill:#bebebe;fill-opacity:1">
<path
d="m 13,6.5 c 0,2.761719 -2.238281,5 -5,5 -2.761719,0 -5,-2.238281 -5,-5 0,-2.761719 2.238281,-5 5,-5 2.761719,0 5,2.238281 5,5 z m 0,0"
id="path81"
style="fill:#bebebe;fill-opacity:1" />
<path
d="m 3,6.5 h 10 v 6 H 3 Z m 0,0"
id="path83"
style="fill:#bebebe;fill-opacity:1" />
<path
d="m 2.5,13 h 11 c 0.550781,0 1,-0.449219 1,-1 0,-0.550781 -0.449219,-1 -1,-1 h -11 c -0.550781,0 -1,0.449219 -1,1 0,0.550781 0.449219,1 1,1 z m 0,0"
id="path85"
style="fill:#bebebe;fill-opacity:1" />
<path
d="m 10,14 c 0,0.714844 -0.382812,1.375 -1,1.730469 -0.617188,0.359375 -1.382812,0.359375 -2,0 C 6.382812,15.375 6,14.714844 6,14"
id="path87"
style="fill:#bebebe;fill-opacity:1" />
<path
d="M 9.5,1.5 C 9.5,2.328125 8.828125,3 8,3 7.171875,3 6.5,2.328125 6.5,1.5 6.5,0.671875 7.171875,0 8,0 8.828125,0 9.5,0.671875 9.5,1.5 Z m 0,0"
id="path89"
style="fill:#bebebe;fill-opacity:1" />
</g>
</g>
</svg>
<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><path style="fill:#bebebe;fill-opacity:1;stroke-width:3.96875" d="M32 .25a5.955 5.955 0 0 0-5.887 6.842C18.028 9.6 12.156 17.136 12.156 26.047v17.86h-1.984a3.976 3.976 0 0 0-3.969 3.968 3.976 3.976 0 0 0 3.969 3.969h43.656a3.976 3.976 0 0 0 3.969-3.969 3.976 3.976 0 0 0-3.969-3.969h-1.984v-17.86c0-8.91-5.872-16.446-13.957-18.954A5.955 5.955 0 0 0 32 .25zm-7.938 55.563a7.93 7.93 0 0 0 3.97 6.867 7.897 7.897 0 0 0 7.937 0 7.93 7.93 0 0 0 3.968-6.867H24.063z"/></svg>

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 531 B

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="22"><defs><linearGradient id="a"><stop offset="0" stop-color="#39393a"/><stop offset="1" stop-color="#302f30"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="53" y1="294.429" x2="53" y2="309.804" gradientUnits="userSpaceOnUse" gradientTransform="translate(-42.76)"/></defs><g transform="translate(0 -291.18)" stroke-width="1.085" stroke="#151515"><rect style="marker:none" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#282828"/><rect ry="10.455" rx="10.455" y="291.715" x=".543" height="20.911" width="21.143" style="marker:none" fill="url(#b)"/></g></svg>
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect style="fill:#000;stroke:none;stroke-width:1;marker:none;fill-opacity:.5" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="294.18" x="-24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none;fill:#fff;fill-opacity:1" fill="#f8f7f7"/></g></svg>

Before

Width:  |  Height:  |  Size: 708 B

After

Width:  |  Height:  |  Size: 585 B

View File

@ -1,133 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
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="48"
height="22"
id="svg2857"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="toggle-off-hc.svg">
<defs
id="defs2859">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 526.18109 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 526.18109 : 1"
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective2865" />
<inkscape:perspective
id="perspective2843"
inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
inkscape:vp_z="1 : 0.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 0.5 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:path-effect
effect="spiro"
id="path-effect77541-4"
is_visible="true" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="-6.1820581"
inkscape:cy="-16.463788"
inkscape:document-units="px"
inkscape:current-layer="g37994"
showgrid="false"
inkscape:window-width="2560"
inkscape:window-height="1364"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
borderlayer="true"
inkscape:showpageshadow="false"
inkscape:snap-nodes="false"
inkscape:snap-bbox="true"
showborder="true">
<inkscape:grid
type="xygrid"
id="grid12954"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<metadata
id="metadata2862">
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-444.64286,-781.36218)">
<g
transform="matrix(0.6526046,0,0,0.80554422,99.592644,-636.32172)"
id="g37994">
<g
transform="matrix(1.5323214,0,0,1.2413968,-324.76058,489.69039)"
id="toggle-off"
inkscape:label="#g8477">
<circle
cy="1033.993"
cx="571.95966"
id="path8444"
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#555753;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
r="7" />
<rect
ry="2.0108337"
rx="1.9562569"
y="1031.9885"
x="565.0083"
height="4.0216675"
width="34.850178"
id="rect8461"
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#555753;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
</g>
<g
transform="matrix(1.5323214,0,0,1.2413968,-324.85635,491.16456)"
id="toggle-on"
inkscape:label="#g8481">
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect8475"
width="34.850178"
height="4.0216675"
x="565.0083"
y="1070.9279"
rx="1.9562569"
ry="2.0108337" />
<circle
transform="scale(-1,1)"
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="circle8463"
cx="-591.0213"
cy="1072.9402"
r="9" />
</g>
</g>
</g>
</svg>
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#000;stroke:none;stroke-width:1;marker:none;fill-opacity:.5" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/><path style="fill:#f8f7f7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-dashoffset:2" d="M29 303.18h12v2H29z"/></g></svg>

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 579 B

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="22"><g transform="translate(0 -291.18)"><rect style="marker:none;font-variant-east_asian:normal" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#e1dedb" stroke="#cdc7c2" stroke-linecap="round" stroke-linejoin="round"/><rect ry="10.455" rx="10.455" y="291.715" x=".543" height="20.911" width="21.143" style="marker:none;font-variant-east_asian:normal" fill="#f8f7f7" stroke="#aa9f98" stroke-linecap="round" stroke-linejoin="round"/><g transform="matrix(.97148 0 0 1 1658.914 -2552.91)" stroke-width="1.015" stroke-linecap="round" stroke-linejoin="round"><rect ry="13.17" rx="13.556" y="1234.681" x="-1242.732" height="26" width="49.409" style="marker:none" fill="#e1dedb" stroke="#cdc7c2"/><rect style="marker:none" width="26.763" height="26" x="-1242.732" y="1234.769" rx="13.511" ry="13.126" fill="#f8f7f7" stroke="#aa9f98"/></g><g transform="matrix(.97148 0 0 1 1658.914 -2512.91)" stroke-width="1.015" stroke="#2b73cc"><rect style="marker:none" width="49.409" height="26" x="-1242.732" y="1234.681" rx="13.556" ry="13.17" fill="#3081e3"/><rect ry="13.126" rx="13.511" y="1234.769" x="-1220.086" height="26" width="26.763" style="marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect style="fill:#c0bfbc;stroke:none;stroke-width:1;marker:none" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="294.18" x="-24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 547 B

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="22"><defs><linearGradient id="a"><stop offset="0" stop-color="#39393a"/><stop offset="1" stop-color="#302f30"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="53" y1="294.429" x2="53" y2="309.804" gradientUnits="userSpaceOnUse" gradientTransform="translate(-19)"/></defs><g transform="translate(0 -291.18)" stroke="#030e1b" stroke-width="1.085"><rect style="marker:none" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#15539e"/><rect ry="10.455" rx="10.455" y="291.715" x="24.304" height="20.911" width="21.143" style="marker:none" fill="url(#b)"/></g></svg>
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#1c71d8;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="294.18" x="24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="fill:#fff;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g></svg>

Before

Width:  |  Height:  |  Size: 707 B

After

Width:  |  Height:  |  Size: 541 B

View File

@ -1,113 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
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="48"
height="22"
id="svg2857"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="toggle-on-hc.svg">
<defs
id="defs2859">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 526.18109 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 526.18109 : 1"
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective2865" />
<inkscape:perspective
id="perspective2843"
inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
inkscape:vp_z="1 : 0.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 0.5 : 1"
sodipodi:type="inkscape:persp3d" />
<inkscape:path-effect
effect="spiro"
id="path-effect77541-4"
is_visible="true" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="-222.95215"
inkscape:cy="3.9378433"
inkscape:document-units="px"
inkscape:current-layer="g37994"
showgrid="false"
inkscape:window-width="2560"
inkscape:window-height="1364"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
borderlayer="true"
inkscape:showpageshadow="false"
inkscape:snap-nodes="false"
inkscape:snap-bbox="true"
showborder="true">
<inkscape:grid
type="xygrid"
id="grid12954"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<metadata
id="metadata2862">
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-444.64286,-781.36218)">
<g
transform="matrix(0.6526046,0,0,0.80554422,99.592644,-636.32172)"
id="g37994">
<g
transform="matrix(1.5323214,0,0,1.2413968,-324.85635,441.50868)"
id="toggle-on"
inkscape:label="#g8481">
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect8475"
width="34.850178"
height="4.0216675"
x="565.0083"
y="1070.9279"
rx="1.9562569"
ry="2.0108337" />
<circle
transform="scale(-1,1)"
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="circle8463"
cx="-591.0213"
cy="1072.9402"
r="9" />
</g>
</g>
</g>
</svg>
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)" stroke="#2b73cc"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13" stroke="none"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" stroke="none"/><rect ry="11" rx="11" y="299.18" x="8" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 677 B

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="22"><g transform="translate(0 -291.18)" stroke="#2b73cc"><rect style="marker:none;font-variant-east_asian:normal" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#3081e3"/><rect ry="10.455" rx="10.455" y="291.715" x="24.304" height="20.911" width="21.143" style="marker:none;font-variant-east_asian:normal" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3"/><rect ry="11" rx="11" y="294.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none;fill:#000;fill-opacity:.2" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g></svg>

Before

Width:  |  Height:  |  Size: 473 B

After

Width:  |  Height:  |  Size: 523 B