Compare commits

..

No commits in common. "bab131456d2d9a630cd1fbe755376d3719672b37" and "9d83a0e2ab3e4c01767e3bbdfa6041831d94e742" have entirely different histories.

42 changed files with 730 additions and 698 deletions

1
checkbox-focused.svg Normal file
View file

@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop offset="0" style="stop-color:#515151;stop-opacity:1"/><stop offset="1" style="stop-color:#292929;stop-opacity:1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#0b2e52;stop-opacity:1" offset="0"/><stop style="stop-color:#1862af;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="c"><stop style="stop-color:#333;stop-opacity:1" offset="0"/><stop style="stop-color:#292929;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="d"><stop style="stop-color:#16191a;stop-opacity:1" offset="0"/><stop style="stop-color:#2b3133;stop-opacity:1" offset="1"/></linearGradient></defs><g transform="translate(-342.5 -521.362)"><rect rx="3" y="524.362" x="345.5" height="18" width="18" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#3584e4;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.34999999;marker:none;enable-background:accumulate" ry="3"/><rect rx="3" y="524.362" x="345.5" height="18" width="18" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:#3584e4;fill-opacity:1;stroke:#3584e4;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" ry="3"/><path style="color:#000;fill:#fff;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="M361.998 527.733a1.5 1.5 0 0 0-2.117.127l-6.928 7.824-2.928-2.882a1.5 1.5 0 0 0-2.12.015 1.5 1.5 0 0 0 .015 2.121l4.055 3.993a1.5 1.5 0 0 0 2.175-.075l7.975-9.006a1.5 1.5 0 0 0-.127-2.117z"/></g></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,220 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="24"
height="24"
id="svg3199"
version="1.1"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="checkbox-off-focused-dark.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
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="defs3201">
<linearGradient
id="linearGradient15404"
inkscape:collect="always">
<stop
id="stop15406"
offset="0"
style="stop-color:#515151;stop-opacity:1" />
<stop
id="stop15408"
offset="1"
style="stop-color:#292929;stop-opacity:1" />
</linearGradient>
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 528.18109 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 528.18109 : 1"
inkscape:persp3d-origin="372.04724 : 352.78739 : 1"
id="perspective3207" />
<inkscape:perspective
id="perspective3187"
inkscape:persp3d-origin="0.5 : 2.3333333 : 1"
inkscape:vp_z="1 : 2.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 2.5 : 1"
sodipodi:type="inkscape:persp3d" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient5872-5-1"
id="linearGradient5891-0-4"
gradientUnits="userSpaceOnUse"
x1="205.84143"
y1="246.7094"
x2="206.74803"
y2="231.24142" />
<linearGradient
inkscape:collect="always"
id="linearGradient5872-5-1">
<stop
style="stop-color:#0b2e52;stop-opacity:1"
offset="0"
id="stop5874-4-4" />
<stop
style="stop-color:#1862af;stop-opacity:1"
offset="1"
id="stop5876-0-5" />
</linearGradient>
<inkscape:path-effect
effect="spiro"
id="path-effect5837-4-6"
is_visible="true"
lpeversion="0" />
<inkscape:path-effect
effect="spiro"
id="path-effect14768"
is_visible="true"
lpeversion="0" />
<inkscape:path-effect
effect="spiro"
id="path-effect5884-4-7"
is_visible="true"
lpeversion="0" />
<linearGradient
y2="-388.72955"
x2="-93.031357"
y1="-396.34738"
x1="-93.031357"
gradientTransform="matrix(1.5918367,0,0,0.85714285,-256.56122,59.685418)"
gradientUnits="userSpaceOnUse"
id="linearGradient14219"
xlink:href="#linearGradient15404"
inkscape:collect="always" />
<linearGradient
inkscape:collect="always"
id="linearGradient10013-4-63-6">
<stop
style="stop-color:#333333;stop-opacity:1;"
offset="0"
id="stop10015-2-76-1" />
<stop
style="stop-color:#292929;stop-opacity:1"
offset="1"
id="stop10017-46-15-8" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient10597-5">
<stop
style="stop-color:#16191a;stop-opacity:1;"
offset="0"
id="stop10599-2" />
<stop
style="stop-color:#2b3133;stop-opacity:1"
offset="1"
id="stop10601-5" />
</linearGradient>
<linearGradient
y2="-322.16354"
x2="921.22498"
y1="-330.05121"
x1="921.32812"
gradientTransform="matrix(1.5918367,0,0,0.85714285,-1456.5464,275.45191)"
gradientUnits="userSpaceOnUse"
id="linearGradient15374"
xlink:href="#linearGradient10013-4-63-6"
inkscape:collect="always" />
<linearGradient
gradientTransform="translate(-1199.9852,216.38048)"
y2="-227.07961"
x2="1203.9177"
y1="-217.56708"
x1="1203.9177"
gradientUnits="userSpaceOnUse"
id="linearGradient15376"
xlink:href="#linearGradient10597-5"
inkscape:collect="always" />
<linearGradient
id="linearGradient5581-5-2-4-6-8-7-35-8">
<stop
id="stop5583-0-92-8-0-7-6-5-1"
offset="0"
style="stop-color:#454c4c;stop-opacity:1;" />
<stop
style="stop-color:#393f3f;stop-opacity:1;"
offset="0.40000001"
id="stop5585-4-7-2-7-9-9-92-0" />
<stop
id="stop5587-6-7-2-0-3-1-21-5"
offset="1"
style="stop-color:#2d3232;stop-opacity:1;" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#a2a2a2"
bordercolor="#2d2d2d"
borderopacity="1"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="11.313708"
inkscape:cx="12.374369"
inkscape:cy="8.8388348"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
borderlayer="true"
inkscape:showpageshadow="false"
inkscape:snap-nodes="false"
inkscape:snap-bbox="true"
showborder="true"
inkscape:pagecheckerboard="0">
<inkscape:grid
type="xygrid"
id="grid14843"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<metadata
id="metadata3204">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-342.5,-521.36218)">
<rect
rx="3"
y="524.36218"
x="345.5"
height="18"
width="18"
id="rect11803"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#282828;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.15000001;marker:none;enable-background:accumulate"
ry="3" />
<rect
rx="5"
y="522.36218"
x="343.5"
height="22"
width="22"
id="rect2437"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#3584e4;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.35;marker:none;enable-background:accumulate"
ry="5" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.8 KiB

1
checkbox-off-focused.svg Normal file
View file

@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop offset="0" style="stop-color:#515151;stop-opacity:1"/><stop offset="1" style="stop-color:#292929;stop-opacity:1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#0b2e52;stop-opacity:1" offset="0"/><stop style="stop-color:#1862af;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="c"><stop style="stop-color:#333;stop-opacity:1" offset="0"/><stop style="stop-color:#292929;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="d"><stop style="stop-color:#16191a;stop-opacity:1" offset="0"/><stop style="stop-color:#2b3133;stop-opacity:1" offset="1"/></linearGradient></defs><g transform="translate(-342.5 -521.362)"><rect rx="3" y="524.362" x="345.5" height="18" width="18" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#fff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.15000001;marker:none;enable-background:accumulate" ry="3"/><rect rx="5" y="522.362" x="343.5" height="22" width="22" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#3584e4;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.35;marker:none;enable-background:accumulate" ry="5"/></g></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

211
checkbox-off-light.svg Normal file
View file

@ -0,0 +1,211 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="24"
height="24"
id="svg3199"
version="1.1"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="checkbox-off-dark.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
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="defs3201">
<linearGradient
id="linearGradient15404"
inkscape:collect="always">
<stop
id="stop15406"
offset="0"
style="stop-color:#515151;stop-opacity:1" />
<stop
id="stop15408"
offset="1"
style="stop-color:#292929;stop-opacity:1" />
</linearGradient>
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 528.18109 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 528.18109 : 1"
inkscape:persp3d-origin="372.04724 : 352.78739 : 1"
id="perspective3207" />
<inkscape:perspective
id="perspective3187"
inkscape:persp3d-origin="0.5 : 2.3333333 : 1"
inkscape:vp_z="1 : 2.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 2.5 : 1"
sodipodi:type="inkscape:persp3d" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient5872-5-1"
id="linearGradient5891-0-4"
gradientUnits="userSpaceOnUse"
x1="205.84143"
y1="246.7094"
x2="206.74803"
y2="231.24142" />
<linearGradient
inkscape:collect="always"
id="linearGradient5872-5-1">
<stop
style="stop-color:#0b2e52;stop-opacity:1"
offset="0"
id="stop5874-4-4" />
<stop
style="stop-color:#1862af;stop-opacity:1"
offset="1"
id="stop5876-0-5" />
</linearGradient>
<inkscape:path-effect
effect="spiro"
id="path-effect5837-4-6"
is_visible="true"
lpeversion="0" />
<inkscape:path-effect
effect="spiro"
id="path-effect14768"
is_visible="true"
lpeversion="0" />
<inkscape:path-effect
effect="spiro"
id="path-effect5884-4-7"
is_visible="true"
lpeversion="0" />
<linearGradient
y2="-388.72955"
x2="-93.031357"
y1="-396.34738"
x1="-93.031357"
gradientTransform="matrix(1.5918367,0,0,0.85714285,-256.56122,59.685418)"
gradientUnits="userSpaceOnUse"
id="linearGradient14219"
xlink:href="#linearGradient15404"
inkscape:collect="always" />
<linearGradient
inkscape:collect="always"
id="linearGradient10013-4-63-6">
<stop
style="stop-color:#333333;stop-opacity:1;"
offset="0"
id="stop10015-2-76-1" />
<stop
style="stop-color:#292929;stop-opacity:1"
offset="1"
id="stop10017-46-15-8" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient10597-5">
<stop
style="stop-color:#16191a;stop-opacity:1;"
offset="0"
id="stop10599-2" />
<stop
style="stop-color:#2b3133;stop-opacity:1"
offset="1"
id="stop10601-5" />
</linearGradient>
<linearGradient
y2="-322.16354"
x2="921.22498"
y1="-330.05121"
x1="921.32812"
gradientTransform="matrix(1.5918367,0,0,0.85714285,-1456.5464,275.45191)"
gradientUnits="userSpaceOnUse"
id="linearGradient15374"
xlink:href="#linearGradient10013-4-63-6"
inkscape:collect="always" />
<linearGradient
gradientTransform="translate(-1199.9852,216.38048)"
y2="-227.07961"
x2="1203.9177"
y1="-217.56708"
x1="1203.9177"
gradientUnits="userSpaceOnUse"
id="linearGradient15376"
xlink:href="#linearGradient10597-5"
inkscape:collect="always" />
<linearGradient
id="linearGradient5581-5-2-4-6-8-7-35-8">
<stop
id="stop5583-0-92-8-0-7-6-5-1"
offset="0"
style="stop-color:#454c4c;stop-opacity:1;" />
<stop
style="stop-color:#393f3f;stop-opacity:1;"
offset="0.40000001"
id="stop5585-4-7-2-7-9-9-92-0" />
<stop
id="stop5587-6-7-2-0-3-1-21-5"
offset="1"
style="stop-color:#2d3232;stop-opacity:1;" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#a2a2a2"
bordercolor="#2d2d2d"
borderopacity="1"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="11.313708"
inkscape:cx="12.374369"
inkscape:cy="8.8388348"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
borderlayer="true"
inkscape:showpageshadow="false"
inkscape:snap-nodes="false"
inkscape:snap-bbox="true"
showborder="true"
inkscape:pagecheckerboard="0">
<inkscape:grid
type="xygrid"
id="grid14843"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<metadata
id="metadata3204">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-342.5,-521.36218)">
<rect
rx="3"
y="524.36218"
x="345.5"
height="18"
width="18"
id="rect11803"
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#282828;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.15000001;marker:none;enable-background:accumulate"
ry="3" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.3 KiB

1
checkbox-off.svg Normal file
View file

@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop offset="0" style="stop-color:#515151;stop-opacity:1"/><stop offset="1" style="stop-color:#292929;stop-opacity:1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#0b2e52;stop-opacity:1" offset="0"/><stop style="stop-color:#1862af;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="c"><stop style="stop-color:#333;stop-opacity:1" offset="0"/><stop style="stop-color:#292929;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="d"><stop style="stop-color:#16191a;stop-opacity:1" offset="0"/><stop style="stop-color:#2b3133;stop-opacity:1" offset="1"/></linearGradient></defs><rect rx="3" y="524.362" x="345.5" height="18" width="18" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#fff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.15000001;marker:none;enable-background:accumulate" ry="3" transform="translate(-342.5 -521.362)"/></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

1
checkbox.svg Normal file
View file

@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop offset="0" style="stop-color:#515151;stop-opacity:1"/><stop offset="1" style="stop-color:#292929;stop-opacity:1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#0b2e52;stop-opacity:1" offset="0"/><stop style="stop-color:#1862af;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="c"><stop style="stop-color:#333;stop-opacity:1" offset="0"/><stop style="stop-color:#292929;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="d"><stop style="stop-color:#16191a;stop-opacity:1" offset="0"/><stop style="stop-color:#2b3133;stop-opacity:1" offset="1"/></linearGradient></defs><g transform="translate(-342.5 -521.362)"><rect rx="3" y="524.362" x="345.5" height="18" width="18" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:#3584e4;fill-opacity:1;stroke:#3584e4;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" ry="3"/><path style="color:#000;fill:#fff;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="M361.998 527.733a1.5 1.5 0 0 0-2.117.127l-6.928 7.824-2.928-2.882a1.5 1.5 0 0 0-2.12.015 1.5 1.5 0 0 0 .015 2.121l4.055 3.993a1.5 1.5 0 0 0 2.175-.075l7.975-9.006a1.5 1.5 0 0 0-.127-2.117z"/></g></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -65,5 +65,5 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color,
$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
// accent colors
$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%));
// selection colors
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));

View file

@ -39,9 +39,6 @@ $forced_circular_radius: 999px;
// radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius * 2;
// radii of dialogs
$alert_radius: 18px;
// Chroma key to flag when a background-color is always occluded, not visible.
// This allows any box-shadow behind it to be rendered more efficiently by
// omitting the middle rectangle.
@ -120,11 +117,11 @@ stage {
}
%default_button {
@include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);
&:focus { @include button(focus, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
&:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
&:insensitive { @include button(insensitive, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
&:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
&:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
&:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
}
// items in popover menus
@ -175,9 +172,8 @@ stage {
%entry_common {
border-radius: $base_border_radius;
padding: $base_padding * 1.5 $base_padding * 1.5;
selection-background-color: st-transparentize(-st-accent-color, 0.7);
selected-color: $fg_color;
selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color;
}
%entry {
@ -192,33 +188,48 @@ stage {
}
}
// buttons in notifications
// use a rounded style and have a lighter background
%notification_button {
font-weight: bold;
padding: $base_padding $base_padding * 2;
border-radius: $base_border_radius;
@include button(normal, $style: notification);
&:focus { @include button(focus, $style: notification);}
&:hover { @include button(hover, $style: notification);}
&:active { @include button(active, $style: notification);}
&:checked { @include button(checked, $style: notification);}
&:insensitive { @include button(insensitive, $style: notification);}
}
// buttons in dialogs
%dialog_button {
font-weight: bold;
// buttons in dialogs/notifications
// lighter in color and have a greater radius
%bubble_button {
padding: $base_padding * 2;
border-radius: $base_border_radius * 1.5;
font-weight: bold !important;
@include button(normal, $style: dialog);
&:focus { @include button(focus, $style: dialog);}
&:hover { @include button(hover, $style: dialog);}
&:active { @include button(active, $style: dialog);}
&:checked { @include button(checked, $style: dialog);}
&:insensitive { @include button(insensitive, $style: dialog);}
&:ltr {margin-right: 1px;}
&:rtl {margin-left: 1px;}
// needs a 1px adjustment to fit exactly into the outer radius
$bubble_button_radius: $modal_radius - 1px;
@include button(normal, $style: bubble);
&:focus { @include button(focus, $style: bubble);}
&:hover { @include button(hover, $style: bubble);}
&:active { @include button(active, $style: bubble);}
&:checked { @include button(checked, $style: bubble);}
&:insensitive { @include button(insensitive, $style: bubble);}
&:first-child:ltr {
border-radius: 0 0 0 $bubble_button_radius;
}
&:last-child:ltr {
border-radius: 0 0 $bubble_button_radius;
margin-right: 0 !important;
}
&:first-child:rtl {
border-radius: 0 0 $bubble_button_radius;
}
&:last-child:rtl {
border-radius: 0 0 0 $bubble_button_radius;
margin-left: 0 !important;
}
&:first-child:last-child {
border-radius: 0 0 $bubble_button_radius $bubble_button_radius;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
// tooltip
@ -280,7 +291,7 @@ stage {
%smaller {
font-weight: 400;
@include fontsize(9pt);
@include fontsize(8pt);
}
%monospace {font-family: monospace;}

View file

@ -22,9 +22,13 @@ $error_bg_color: if($variant == 'light', $red_3, $red_4);
$error_fg_color: $light_1;
$error_color: $error_bg_color;
// colors for selected or default elements
$selected_bg_color: if($variant == 'light', $blue_4, $blue_3);
$selected_fg_color: $light_1;
// link colors
$link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%));
$link_visited_color: st-transparentize($link_color, .6);
$link_color: if($variant == 'light', $blue_4, $blue_2);
$link_visited_color: transparentize($link_color, .6);
// special cased widget definitions
$background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants
@ -35,8 +39,8 @@ $shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
// focus colors
$focus_color: -st-accent-color;
$focus_border_color: st-transparentize($focus_color, 0.5);
$focus_color: $selected_bg_color;
$focus_border_color: transparentize($focus_color, 0.5);
// High Contrast overrides
@if $contrast == 'high' {
@ -46,5 +50,5 @@ $focus_border_color: st-transparentize($focus_color, 0.5);
$shadow_color: transparent;
$text_shadow_color: transparent;
// less transparent focus color
$focus_border_color: st-transparentize($focus_color, 0.2);
$focus_border_color: transparentize($focus_color, 0.2);
}

View file

@ -16,12 +16,12 @@
// $mc: mix color, defined in High Contrast specific stylesheet
// $mf: mix factor (%), defined in High Contrast specific stylesheet
//
@return st-mix($c, $mc, $mf);
@return mix($c, $mc, $mf);
}
// Function to mix the color and make the focus background
@function focus_bg_color($bg, $fc:$focus_color) {
@return st-mix($fc, $bg, 5%);
@return mix($fc, $bg, 5%);
}
//
@ -160,12 +160,12 @@
// - normal, focus, hover, active, checked, insensitive, default, undecorated
// $c: button bg color, derived from bg_color
// $tc: button text color, derived from fg_color
// $style: button style, possible values: card, notification, dialog, flat, default
// $style: button style, possible values: card, bubble, flat, default
// $always_dark: override the light theme check to use dark colors, true or false
//
// mix input colors to get button background color
$button_bg_color: st-mix($tc, $c, $background_mix_factor);
$button_bg_color: mix($tc, $c, $background_mix_factor);
// background color override for card elements
@if $style == 'card' { $button_bg_color: $card_bg_color;}
@ -187,46 +187,37 @@
}
// button base state background colors
$hover_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $hover_factor), st-lighten($button_bg_color, $hover_factor));
$active_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_factor));
$checked_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_factor));
$insensitive_button_bg_color: if($variant == 'light', st-lighten($button_bg_color, $insensitive_factor), st-darken($button_bg_color, $insensitive_factor));
$hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
$active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
$checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
$insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
// button extended state background colors
$active_hover_button_bg_color: if($variant == 'light', st-darken($active_button_bg_color, $hover_factor), st-lighten($active_button_bg_color, $hover_factor));
$checked_hover_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_button_bg_color, $hover_factor));
$checked_active_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $active_factor), st-lighten($checked_button_bg_color, $active_factor));
$active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));
$checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));
$checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));
// override button background colours if element is always dark
@if $always_dark {
$hover_button_bg_color: st-lighten($button_bg_color, $hover_factor);
$active_button_bg_color: st-lighten($button_bg_color, $active_factor);
$checked_button_bg_color: st-lighten($button_bg_color, $checked_factor);
$insensitive_button_bg_color: st-darken($button_bg_color, $insensitive_factor);
$hover_button_bg_color: lighten($button_bg_color, $hover_factor);
$active_button_bg_color: lighten($button_bg_color, $active_factor);
$checked_button_bg_color: lighten($button_bg_color, $checked_factor);
$insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
// extended
$active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor);
$checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor);
$checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor);
$active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor);
$checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor);
$checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
}
// background color override for buttons that use transparency
// styles: dialogs bubbles, lockscreen
@if $style == 'dialog' or $style == 'lockscreen' {
// styles: notification bubbles, lockscreen
@if $style == 'bubble' or $style == 'lockscreen' {
$button_bg_color: transparentize($tc, .9);
$hover_button_bg_color: transparentize($tc, .87);
$active_button_bg_color: transparentize($tc, .84);
$active_hover_button_bg_color: transparentize($tc, .81);
}
// background color overrides for notification style
@if $style == 'notification' {
$button_bg_color: transparentize($tc, .85);
$hover_button_bg_color: transparentize($tc, .7);
$insensitive_button_bg_color: transparentize($tc, .9);
$active_button_bg_color: transparentize($tc, .8);
$active_hover_button_bg_color: transparentize($tc, .8);
}
// flat style overrides
@if $style == 'flat' {
$insensitive_button_bg_color: $button_bg_color;
@ -292,7 +283,7 @@
// insensitive button
@else if $type == 'insensitive' {
$insensitive_button_fg_color: if($variant == 'light', st-transparentize($tc, .6), st-transparentize($tc, .5));
$insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
color: $insensitive_button_fg_color;
background-color: $insensitive_button_bg_color;
@ -309,7 +300,7 @@
// use a different focus ring color for default style
@if $style == 'default' {
@include focus_ring($fc:$accent_borders_color);
@include focus_ring($fc:$selected_borders_color);
}
// change background color if style is flat
@if $style == 'flat' {
@ -366,8 +357,8 @@
}
&:drop {
background-color: st-transparentize(-st-accent-color, .8);
box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2);
background-color: transparentize($selected_bg_color, .8);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
}
}
@ -377,16 +368,19 @@
// extend common styles
@extend %menuitem;
// lighten the background color always
$bg: lighten($bg,5%);
@if $style == 'flat' {
@include button(undecorated);
} @else {
@include button(normal, $c:$bg);
}
&:focus,
&:hover {
@include button(hover, $c:$bg);
}
&:active {@include button(active, $c:$bg);}
&:selected,
&:checked {@include button(checked, $c:$bg);}
&:insensitive {@include button(insensitive, $c:$bg);}
}

View file

@ -64,8 +64,8 @@ $hover_fg_color: lighten($fg_color, 20%);
$active_bg_color: lighten($bg_color, 22%);
$active_fg_color: lighten($fg_color, 22%);
// accent colors
$accent_borders_color: st-lighten(-st-accent-color, 30%);
// selection colors
$selected_borders_color: lighten($selected_bg_color, 30%);
//
// High Contrast specific definitions

View file

@ -3,8 +3,8 @@
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: st-lighten(st-transparentize(-st-accent-color, 0.7), 30%);
box-shadow: 0 0 2px 2px st-lighten(-st-accent-color, 20%);
background-color: lighten(transparentize($selected_bg_color, 0.7), 30%);
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
}
// Pointer accessibility notifications
@ -12,13 +12,13 @@
width: 60px;
height: 60px;
-pie-border-width: 3px;
-pie-border-color: -st-accent-color;
-pie-background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 40%);
-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 -st-accent-color;
border: 2px solid $selected_bg_color;
&.full-screen { border-width: 0; }
}

View file

@ -47,7 +47,12 @@ $app_folder_size: 720px;
width: 5px;
border-radius:5px;
background-color: $system_fg_color;
offset-y: 6px;
@if $contrast == 'high' {
margin-bottom: 4px;
} @else {
margin-bottom: 2px;
}
}
.app-folder-dialog-container {

View file

@ -3,7 +3,7 @@
color: $link_color;
&:hover {
color: st-lighten($link_color, 10%);
color: lighten($link_color, 10%);
}
}
@ -18,5 +18,10 @@
@if $contrast == 'high' {
icon-shadow: none;
background-color: $osd_bg_color;
padding: $base_padding * 2;
border-radius: $modal_radius;
border: 2px solid $hc_inset_color;
margin: $base_padding * 3;
}
}

View file

@ -111,7 +111,7 @@
&.calendar-today {
@extend %default_button;
// override colors above for when today is a weekend
color: -st-accent-fg-color !important;
color: $selected_fg_color !important;
&.calendar-day-with-events {
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
}
@ -268,9 +268,10 @@
spacing-columns: $base_padding * 2;
.weather-forecast-time {
@extend %smaller;
padding-top: $base_padding;
padding-bottom: $base_padding;
@extend %numeric;
@include fontsize(10pt);
padding-top: 0.2em;
padding-bottom: 0.4em;
}
.weather-forecast-icon {
icon-size: $large_scalable_icon_size;

View file

@ -1,49 +1,18 @@
/* Check Boxes */
// these are equal to the size of the SVG assets
$check_height: 24px;
$check_width: 24px;
.check-box {
StBoxLayout { spacing: .8em; }
StBin {
border-radius: 7px;
padding: 2px;
}
&:focus StBin {
// Trick due to St limitations. It needs a background to draw a box-shadow
background-color: rgba(0, 0, 0, 0.01);
box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65);
}
StIcon {
icon-size: 14px;
padding: 1px;
color: transparent;
border-radius: 6px;
border: 2px solid transparentize(if($variant == 'light', black, white), .85);
}
&:hover StIcon {
border-color: transparentize(if($variant == 'light', black, white), .8);
}
&:active StIcon {
border-color: transparentize(if($variant == 'light', black, white), .7);
}
&:checked StIcon {
background-color: -st-accent-color;
color: -st-accent-fg-color;
border-color: transparent;
}
&:checked:hover StIcon {
background-color: st-lighten(-st-accent-color, 5%);
color: st-lighten(-st-accent-fg-color, 5%);
}
&:checked:active StIcon {
background-color: st-darken(-st-accent-color, 7%);
color: st-darken(-st-accent-fg-color, 7%);
width: $check_width;
height: $check_height;
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off.svg"));
}
&:focus StBin { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-focused-light.svg"), 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

@ -11,9 +11,7 @@ $dash_spacing: $base_margin * 0.5;
// container for the dash
#dash {
// a bit of spacing so that dash doesn't touch the screen edges
padding-left: $base_padding;
padding-right: $base_padding;
margin-top: $dash_edge_offset;
// background behind item container
.dash-background {
@ -71,11 +69,7 @@ $dash_spacing: $base_margin * 0.5;
// running app dot
.app-grid-running-dot {
// manually position the dot within the dash item
@if $contrast == 'high' {
offset-y: -$dash_padding - 1px; // don't draw dot directly on inset
} @else {
offset-y: -$dash_padding;
}
margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
}
}

View file

@ -6,25 +6,23 @@
.modal-dialog {
background-color: $bg_color;
border-radius: $alert_radius;
border-radius: $modal_radius;
box-shadow: inset 0 0 0 1px $outer_borders_color;
padding: $base_padding * 4;
.modal-dialog-content-box {
margin: $base_margin * 8 $base_margin * 10;
spacing: $base_margin * 8;
margin-top: $base_margin * 2;
margin-bottom: $base_margin * 4;
max-width: 28em;
}
.modal-dialog-linked-button {
@extend %dialog_button;
@extend %bubble_button;
}
}
/* End Session Dialog */
.end-session-dialog {
width: 24em;
width: 30em;
.end-session-dialog-battery-warning,
.dialog-list-title {
@ -147,8 +145,8 @@
border-radius: $base_border_radius * 2;
&:hover,&:focus { background-color: $hover_bg_color; }
&:active {
background-color: -st-accent-color;
color: -st-accent-fg-color;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}

View file

@ -19,7 +19,7 @@
.candidate-box {
padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2;
border-radius: $base_border_radius;
&:selected { background-color: -st-accent-color; color: -st-accent-fg-color; }
&:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
&:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
}

View file

@ -63,17 +63,17 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// keys that may be latched: ctrl/alt/shift
&:latched {
border-color: st-lighten(-st-accent-color, 5%);
background-color: -st-accent-color;
border-color: lighten($selected_bg_color, 5%);
background-color: $selected_bg_color;
}
}
// enter key is suggested-action
&.enter-key {
@include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color);
&:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color);}
&:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color);}
&:checked { @include button(checked, $c:-st-accent-color, $tc:-st-accent-fg-color);}
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);}
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);}
&:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);}
border-radius: $key_border_radius;
color: $osd_fg_color;
}
@ -128,8 +128,8 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
.emoji-panel {
.keyboard-key:latched {
border-color: st-lighten(-st-accent-color, 5%);
background-color: -st-accent-color;
border-color: lighten($selected_bg_color, 5%);
background-color: $selected_bg_color;
}
}

View file

@ -80,11 +80,6 @@ $_gdm_dialog_width: 25em;
text-align: center;
}
.login-dialog-message-hint, .login-dialog-message {
color: darken($_gdm_fg, 10%);
min-height: 2.75em;
}
.login-dialog-user-selection-box {
// padding to ensure the box doesn't overlap the panel
padding-top: 4em;
@ -128,8 +123,8 @@ $_gdm_dialog_width: 25em;
color: darken($_gdm_fg,30%);
&:focus, &:selected {
background-color: -st-accent-color;
color: -st-accent-fg-color;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
@ -175,9 +170,9 @@ $_gdm_dialog_width: 25em;
&:logged-in {
// color border for logged-in user
.user-icon {
border-color: -st-accent-color;
border-color: $selected_bg_color;
StIcon {
background-color: st-transparentize(-st-accent-color, .7);
background-color: transparentize($selected_bg_color, .7);
}
}
}
@ -217,7 +212,7 @@ $_gdm_dialog_width: 25em;
.unlock-dialog-clock-time {
@extend %numeric;
@include fontsize(72pt);
font-weight: 800;
font-weight: 200;
}
.unlock-dialog-clock-date {
@ -238,7 +233,7 @@ $_gdm_dialog_width: 25em;
StButton#vhandle, StButton#hhandle {
background-color: transparentize($bg_color,0.7);
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
&:active { background-color: st-transparentize(-st-accent-color,0.5); }
&:active { background-color: transparentize($selected_bg_color,0.5); }
}
}
@ -318,8 +313,7 @@ $_gdm_dialog_width: 25em;
spacing: $base_padding * 4;
.user-widget-label {
font-weight: 400;
@include fontsize(20pt);
@extend %title_1;
text-align: center;
margin-bottom: .75em;
}
@ -328,7 +322,7 @@ $_gdm_dialog_width: 25em;
icon-size: $base_icon_size * 10;
& StIcon {
padding: $base_padding * 5;
padding: $base_padding * 4;
}
}
}

View file

@ -1,35 +1,5 @@
/* Looking Glass */
// common
.lg-dialog {
StEntry {
@extend %osd_entry;
min-height: to_em(22px);
}
// override link color since OSD style
$lg_link_color: st-lighten(-st-accent-color, 20%);
.shell-link {
color: $lg_link_color;
&:hover { color: st-lighten($lg_link_color, 10%); }
&:active { color: st-darken($lg_link_color, 10%); }
}
.actor-link {
@extend %monospace;
color: st-darken($osd_fg_color, 20%);
&:hover { color:$osd_fg_color; }
&:active { color: st-lighten($osd_fg_color, 20%); }
& StIcon { icon-size: 12px; }
}
}
.lg-completions-text {
@extend %caption;
font-style: italic;
}
// Dialog
#LookingGlassDialog {
@ -70,166 +40,92 @@
}
.notebook-tab {
@extend %osd_button_flat;
background-color: transparent;
@extend %osd_button;
-natural-hpadding: $base_padding * 2;
-minimum-hpadding: $base_padding * 2;
padding: $base_padding $base_padding * 2;
&:selected {
@include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
}
}
StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
}
.lg-dialog {
StEntry {
@extend %osd_entry;
min-height: to_em(22px);
}
.shell-link {
color: $link_color;
&:hover { color: lighten($link_color, 10%); }
&:active { color: darken($link_color, 10%); }
}
.actor-link {
color: $insensitive_fg_color;
&:hover { color: lighten($insensitive_fg_color, 20%); }
&:active { color: darken($insensitive_fg_color, 20%); }
& StIcon { icon-size: 12px; }
}
}
.lg-completions-text {
@extend %caption;
font-style: italic;
}
.lg-obj-inspector-title {
spacing: $base_padding;
}
.lg-obj-inspector-button {
border: 1px solid $borders_color;
padding: 4px;
border-radius: $base_border_radius;
&:hover { border: 1px solid $fg_color; }
}
// Extensions
#lookingGlassExtensions { padding: $base_padding; }
.lg-extensions-list {
padding: $base_padding;
spacing: $base_padding;
}
.lg-extension {
@extend %card;
}
.lg-extension-name {
@extend %heading;
}
.lg-extension-meta {
spacing: $base_padding;
}
// Inspector
#LookingGlassPropertyInspector {
background: $bg_color;
border: 1px solid $borders_color;
border-radius: $base_border_radius;
padding: $base_padding;
}
.lg-debug-flag-button {
StLabel { padding: $base_padding, 2 * $base_padding; }
background-color: $osd_bg_color;
color: $osd_fg_color;
border-radius: $modal_radius;
border: 1px solid $osd_borders_color;
padding: $base_padding * 2;
@if $contrast == 'high' {
border-color: $hc_inset_color;
}
.lg-obj-inspector-title {
@extend %heading;
spacing: $base_margin;
}
.lg-obj-inspector-close-button,
.lg-obj-inspector-button {
@extend %osd_button;
padding: $base_padding $base_padding * 2;
}
.lg-obj-inspector-close-button {
margin: $base_margin;
padding: $base_padding;
border-radius: $forced_circular_radius;
> StIcon {
icon-size: $base_icon_size;
}
}
&:hover { color: lighten($osd_fg_color, 20%); }
&:active { color: darken($osd_fg_color, 20%); }
}
// Evaluator
#LookingGlassEvaluator {
.lg-debug-flags-header {
padding-top: 2 * $base_padding;
padding: $base_padding;
.evaluator-results {
@extend %monospace;
spacing: $base_padding;
}
}
// Window List
#LookingGlassWindows {
padding: $base_padding;
spacing: $base_padding;
.lg-window {
@extend %card_common;
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
margin: 0;
padding: $base_padding * 2;
.lg-window-name {
@extend %heading;
}
.lg-window-props-box {
.lg-window-props {
}
}
}
}
// Extensions
#LookingGlassExtensions {
.lg-extensions-list {
padding: $base_padding;
spacing: $base_padding;
}
.lg-extension {
@extend %card_common;
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
margin: 0;
spacing: $base_margin;
padding: $base_padding * 2;
.lg-extension-name {
@extend %heading;
color: $osd_fg_color !important;
}
.lg-extension-description {
}
.lg-extension-meta {
spacing: $base_padding * 2;
}
}
.lg-extensions-none {
@extend %title_4;
color: transparentize($osd_fg_color, 0.5);
}
}
// Actors
#LookingGlassActors {
padding: $base_padding;
spacing: $base_margin;
}
// Debug
#LookingGlassDebugFlags {
.lg-debug-flags-header {
padding: $base_padding;
padding-top: 2 * $base_padding;
@extend %title_4;
}
.lg-debug-flag-button {
@extend %osd_button;
padding: $base_padding * 1.5 $base_padding * 2;
margin-bottom: $base_padding;
StLabel {
@extend %monospace;
font-weight: normal !important;
}
// switch style overrides since lg is OSD style
.toggle-switch {
@if $contrast == 'high' {
background: transparentize(white, .7);
&:hover {
background: transparentize(white, .6);
}
} @else {
background: transparentize(white, .85);
&:hover {
background: transparentize(white, .8);
}
}
&:checked {
background: -st-accent-color;
color: -st-accent-fg-color;
&:hover {
background-color: st-lighten(-st-accent-color, 5%);
color: st-lighten(-st-accent-fg-color, 5%);
}
}
}
}
@extend %title_2;
}

View file

@ -56,7 +56,7 @@
border-style: solid;
&:focus {
border-color: st-transparentize(-st-accent-color, 0.4);
border-color: transparentize($selected_bg_color, 0.4);
}
}
}
@ -64,19 +64,21 @@
// message bubbles
.message {
@extend %card;
padding: $base_padding;
padding: 0;
margin: 0;
border-radius: $modal_radius;
// subtract side padding to accommodate the close button's border
&:ltr { padding-right:-2px; };
&:rtl { padding-left:-2px; };
// message header
.message-header {
padding: 0 $scaled_padding;
margin: $base_padding;
margin-bottom: 0;
spacing: $base_padding;
color: $insensitive_fg_color;
padding:0 $base_padding;
// side padding to accommodate the close button
&:ltr { padding-right:$base_padding - 2px; };
&:rtl { padding-left:$base_padding - 2px; };
// header source icon
.message-source-icon {
@ -111,14 +113,17 @@
.message-expand-button,
.message-close-button {
@extend .icon-button;
@extend %notification_button;
border-radius: $forced_circular_radius; // make circular
color: $fg_color;
background-color: transparentize($fg_color, .9);
padding: 4px;
&:hover { background-color: transparentize($fg_color, .81);}
&:active,
&:active:hover { background-color: transparentize($fg_color, .76);}
&:insensitive { background-color: transparentize($fg_color, .93);}
}
.message-expand-button {
padding: $base_padding;
padding: 6px;
&:ltr { margin-right: $base_padding; }
&:rtl { margin-left: $base_padding; }
}
@ -127,6 +132,7 @@
// container for message contents
.message-box {
padding: $base_padding;
margin: $base_padding;
margin-top: 0;
spacing: $base_padding;
@ -137,12 +143,12 @@
// icon size and color
icon-size: $base_icon_size * 3; // 48px
-st-icon-style: symbolic;
// a small symbolic icon on a circle background
&.message-themed-icon {
border-radius: $forced_circular_radius;
background-color: transparentize($fg_color, .93);
icon-size: $scalable_icon_size;
border-radius: $forced_circular_radius; // is circular
background-color: transparentize($fg_color, 0.8);
icon-size: $base_icon_size;
min-width: $base_icon_size * 3;
min-height: $base_icon_size * 3;
}
@ -163,26 +169,6 @@
}
}
}
// container for message buttons
.message-action-bin {
padding: $base_margin;
spacing: $base_padding;
// set margin on children
* {
margin: 0 $base_margin;
// remove margins
&:first-child {
&:ltr { margin-left:0;}
&:rtl { margin-right:0;}
}
&:last-child {
&:ltr { margin-right:0;}
&:rtl { margin-left:0;}
}
}
}
}
// URLs in messages

View file

@ -1,7 +1,7 @@
// Rubberband for select-area screenshots
.select-area-rubberband {
background-color: st-transparentize(-st-accent-color,0.7);
border: 1px solid -st-accent-color;
background-color: transparentize($selected_bg_color,0.7);
border: 1px solid $selected_bg_color;
}
// User icon
@ -48,6 +48,6 @@
/* Tiled window previews */
.tile-preview {
background-color: st-transparentize(-st-accent-color,0.5);
border: 1px solid -st-accent-color;
background-color: transparentize($selected_bg_color,0.5);
border: 1px solid $selected_bg_color;
}

View file

@ -21,5 +21,5 @@ $notification_banner_width: 34em;
}
.notification-button {
@extend %notification_button;
@extend %bubble_button;
}

View file

@ -36,8 +36,8 @@ $osd_levelbar_height:6px;
// Monitor number label
.osd-monitor-label {
background-color: -st-accent-color;
color: -st-accent-fg-color;
background-color: $selected_bg_color;
color: $selected_fg_color;
border-radius: $modal_radius;
font-size: 3em;
font-weight: bold;

View file

@ -1,9 +1,13 @@
/* OVERVIEW */
.secondary-monitor-workspaces {
.controls-manager, .secondary-monitor-workspaces {
spacing: $base_padding * 2;
}
#overviewGroup {
background-color: $system_base_color;
}
.overview-controls {
padding-bottom: $base_margin * 8;
}

View file

@ -1,11 +1,10 @@
/* Popovers/Menus */
$menu_bg_color: $bg_color;
$menuitem_bg_color: if($variant == 'light', darken($menu_bg_color, 5%), lighten($menu_bg_color, 5%));
$menuitem_bg_color: lighten($menu_bg_color, 4%);
$menuitem_border_radius: $base_border_radius * 1.5;
$submenu_bg_color: if($variant == 'light', darken($menu_bg_color, 17%), lighten($menu_bg_color, 13%));
$submenu_bg_color: lighten($menu_bg_color, 7%);
// the popover itself
.popup-menu-boxpointer {
@ -34,7 +33,7 @@ $submenu_bg_color: if($variant == 'light', darken($menu_bg_color, 17%), lighten
// menu items
.popup-menu-item {
@include menuitem($bg:$menuitem_bg_color);
@include menuitem($bg:$menu_bg_color);
border-radius: $menuitem_border_radius;
@ -76,7 +75,6 @@ $submenu_bg_color: if($variant == 'light', darken($menu_bg_color, 17%), lighten
border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px;
margin-bottom: $base_padding;
border: 1px solid transparent;
background-color: $submenu_bg_color;
@if $contrast == 'high' {
border-color: $hc_inset_color;
@ -85,8 +83,8 @@ $submenu_bg_color: if($variant == 'light', darken($menu_bg_color, 17%), lighten
// submenu specific styles
.popup-menu-item {
border-radius: 0;
border-top-width:0;
@include menuitem($bg:$submenu_bg_color);
border-top-width:0;
&:last-child {
border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius;

View file

@ -64,7 +64,7 @@
&:checked {
@extend %default_button;
border-color: $accent_borders_color;
border-color: $selected_borders_color;
}
&:ltr {
@ -119,8 +119,8 @@
background-color: transparentize($fg_color, 0.8);
&.active {
background-color: -st-accent-color;
color: -st-accent-fg-color;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
// draw hc outline

View file

@ -168,18 +168,18 @@ $screenshot_ui_button_red: $red_4;
.screenshot-ui-window-selector-window {
&:hover {
.screenshot-ui-window-selector-window-border {
border-color: st-darken(-st-accent-color, 15%);
border-color: darken($selected_bg_color, 15%);
}
}
&:checked {
.screenshot-ui-window-selector-window-border {
border-color: -st-accent-color;
background-color: st-transparentize(-st-accent-color, 0.8);
border-color: $selected_bg_color;
background-color: transparentize($selected_bg_color, 0.8);
}
.screenshot-ui-window-selector-check {
color: -st-accent-fg-color;
background-color: -st-accent-color;
color: $selected_fg_color;
background-color: $selected_bg_color;
}
}
}

View file

@ -48,6 +48,7 @@
.grid-search-results {
spacing: $base_padding * 5;
margin:0 $base_margin * 3;
}
// Search results with icons

View file

@ -3,25 +3,25 @@
$slider_size: $scalable_icon_size;
.slider {
color: if($variant == 'light', $fg_color, darken($fg_color, 9%));
// slider trough
-barlevel-height: 4px;
-barlevel-background-color: transparentize($fg_color, 0.9);
-barlevel-background-color: 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: -st-accent-color;
-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: 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: 0;
-slider-handle-border-color: transparent; // because 0 width
// hc style
@if $contrast == 'high' {
-barlevel-background-color: transparentize($fg_color, 0.6);
}
&:hover {
color: if($variant == 'light', lighten($fg_color, 7%), $fg_color);
}
// hc style
@if $contrast == 'high' {
-barlevel-background-color: transparentize($fg_color, 0.6);
}
}

View file

@ -78,5 +78,5 @@ $switcher_radius: $modal_radius + $switcher_padding;
// Window cycler highlight
.cycler-highlight {
border: 5px solid -st-accent-color;
border: 5px solid $selected_bg_color;
}

View file

@ -1,53 +1,18 @@
/* Switches */
// these are equal to the size of the SVG assets
$switch_height: 26px;
$switch_width: 46px;
$switch_handle_size: 20px;
.toggle-switch {
width: $switch_width;
border-radius: $forced_circular_radius;
transition-duration: 100ms;
color: $fg_color;
@if $contrast == 'high' {
background: transparentize(if($variant == 'light', black, white), .7);
&:hover {
background: transparentize(if($variant == 'light', black, white), .6);
}
} @else {
background: transparentize(if($variant == 'light', black, white), .85);
&:hover {
background: transparentize(if($variant == 'light', black, white), .8);
}
}
StIcon {
icon-size: $base_icon_size;
}
.handle {
margin: 3px;
width: $switch_handle_size;
height: $switch_handle_size;
border-radius: $forced_circular_radius;
background: if($variant == 'light', white, mix(white, $bg_color, 80%));
box-shadow: 0 2px 4px transparentize(black, .8);
transition-duration: 100ms;
}
height: $switch_height;
width: $switch_width;
background-size: contain;
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg"));
&:checked {
background: -st-accent-color;
color: -st-accent-fg-color;
&:hover {
background-color: st-lighten(-st-accent-color, 5%);
color: st-lighten(-st-accent-fg-color, 5%);
}
.handle {
background: white;
}
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
}
& StIcon {icon-size: $base_icon_size;}
}

View file

@ -7,19 +7,6 @@ $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02);
spacing: $base_padding;
}
// Window icons
.window-icon {
// styled only with .icon-dropshadow
// but has a different style in high-contrast
@if $contrast == 'high' {
background-color: $osd_bg_color;
padding: $base_padding * 2;
border-radius: $modal_radius;
border: 2px solid $hc_inset_color;
margin: $base_padding * 3;
}
}
// Window titles
.window-caption {
@extend %tooltip;

View file

@ -1,6 +1,6 @@
/* Workspace Switcher */
$ws_indicator_height: 32px;
$ws_indicator_height: 48px;
$ws_dot_active: $ws_indicator_height / 3;
$ws_dot_inactive: $ws_indicator_height / 6;

View file

@ -27,6 +27,6 @@
// selected indicator
.workspace-thumbnail-indicator {
border: 3px solid -st-accent-color;
border: 3px solid $selected_bg_color;
border-radius: $base_border_radius;
}

View file

@ -1,219 +0,0 @@
diff --git a/gnome-shell-light.scss b/gnome-shell-dark-laptop.scss
similarity index 84%
rename from gnome-shell-light.scss
rename to gnome-shell-dark-laptop.scss
index 22b8347..61925f9 100644
--- a/gnome-shell-light.scss
+++ b/gnome-shell-dark-laptop.scss
@@ -1,6 +1,7 @@
-$variant: 'light';
+$variant: 'dark';
$contrast: 'normal';
+$laptop: true;
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common";
diff --git a/gnome-shell-dark.scss b/gnome-shell-dark.scss
index c1a330b..294ac64 100644
--- a/gnome-shell-dark.scss
+++ b/gnome-shell-dark.scss
@@ -1,6 +1,7 @@
$variant: 'dark';
$contrast: 'normal';
+$laptop: false;
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common";
diff --git a/gnome-shell-high-contrast.scss b/gnome-shell-high-contrast.scss
deleted file mode 100644
index a4394dd..0000000
--- a/gnome-shell-high-contrast.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$variant: 'dark';
-$contrast: "high";
-
-@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors
-@import "gnome-shell-sass/_drawing";
-@import "gnome-shell-sass/_common";
-@import "gnome-shell-sass/_widgets";
diff --git a/gnome-shell-sass/_colors.scss b/gnome-shell-sass/_colors.scss
index cbb3b71..63a4e91 100644
--- a/gnome-shell-sass/_colors.scss
+++ b/gnome-shell-sass/_colors.scss
@@ -21,7 +21,7 @@ $system_base_color: $_base_color_dark;
$system_fg_color: $_base_color_light;
// panel colors
-$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_5);
+$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_4);
$panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1);
// card elements
diff --git a/gnome-shell-sass/_drawing.scss b/gnome-shell-sass/_drawing.scss
index a2fa5f2..ce0ca34 100644
--- a/gnome-shell-sass/_drawing.scss
+++ b/gnome-shell-sass/_drawing.scss
@@ -392,7 +392,7 @@
}
// Panel menu/button drawing function
-@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"") {
+@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"", $border_radius: 3px) {
//
// $bg: background color, derived from $panel_fg_color
// $fg: foreground color, also derived from $panel_fg_color
@@ -406,7 +406,7 @@
transition-duration: 150ms;
border: 3px solid transparent;
background-color: transparent;
- border-radius: $forced_circular_radius;
+ border-radius: $border_radius;
font-weight: bold;
color: $fg;
@@ -450,7 +450,7 @@
#{$child_class} {
transition-duration: 150ms;
border: 3px solid transparent;
- border-radius: $forced_circular_radius;
+ border-radius: $border_radius;
}
&:focus, &:hover {
diff --git a/gnome-shell-sass/_palette.scss b/gnome-shell-sass/_palette.scss
index 78847d9..8627513 100644
--- a/gnome-shell-sass/_palette.scss
+++ b/gnome-shell-sass/_palette.scss
@@ -39,8 +39,8 @@ $light_2: #f6f5f4;
$light_3: #deddda;
$light_4: #c0bfbc;
$light_5: #9a9996;
-$dark_1: #77767b;
-$dark_2: #5e5c64;
-$dark_3: #3d3846;
-$dark_4: #241f31;
-$dark_5: #000000;
\ No newline at end of file
+$dark_1: #777777;
+$dark_2: #5e5e5e;
+$dark_3: #3d3d3d;
+$dark_4: #242424;
+$dark_5: #000000;
diff --git a/gnome-shell-sass/widgets/_corner-ripple.scss b/gnome-shell-sass/widgets/_corner-ripple.scss
index 9aff431..1760eda 100644
--- a/gnome-shell-sass/widgets/_corner-ripple.scss
+++ b/gnome-shell-sass/widgets/_corner-ripple.scss
@@ -3,7 +3,7 @@
$ripple_size: 50px;
.ripple-box {
- background-color: rgba(255,255,255,0.2);
+ background-color: rgba(0,0,0,0);
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2);
// plus + 2px for the border (box-shadow)
width: $ripple_size + 2px;
diff --git a/gnome-shell-sass/widgets/_panel.scss b/gnome-shell-sass/widgets/_panel.scss
index 2a29eee..80e93f9 100644
--- a/gnome-shell-sass/widgets/_panel.scss
+++ b/gnome-shell-sass/widgets/_panel.scss
@@ -1,8 +1,8 @@
/* Top Bar */
// a.k.a. the panel
-$privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3);
-$recording_indicator_color: $red_4;
+$privacy_indicator_color: if($variant == 'light', $orange_4, $red_3);
+$recording_indicator_color: $red_3;
$transparent_panel_fg_color: $light_1; // always white for transparent lock screens
$system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview
@@ -20,13 +20,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// panel menus
.panel-button {
@include panel_button();
- -natural-hpadding: $base_padding * 2;
- -minimum-hpadding: $base_padding;
+ -natural-hpadding: 6px;
+ -minimum-hpadding: 4px;
// status area icons
.system-status-icon {
icon-size: $scalable_icon_size;
- padding: 0 $base_padding;
+ padding: 0;
margin: 0 $base_margin;
}
@@ -39,7 +39,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// reduce margin between icons in combined menu
.panel-status-menu-box,
.panel-status-indicators-box {
- spacing: $base_margin;
+ spacing: 0px;
> .system-status-icon {
padding: 0;
@@ -47,6 +47,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
&#panelActivities {
+ -natural-hpadding: 10px;
+ -minimum-hpadding: 8px;
+
& StBoxLayout {
padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion
spacing: 5px;
@@ -69,6 +72,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
StIcon {
icon-size: $scalable_icon_size;
+
+ &:first-child {
+ margin-left: 3px;
+ }
}
}
@@ -86,6 +93,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// we want to exclude the do-not-disturb indicator from the background
// see _drawing.scss for override details
@include panel_button($highlighted_child: true, $child_class: '.clock');
+ -natural-hpadding: 0px;
+ -minimum-hpadding: 0px;
+ padding-left: 0px;
+ padding-right: 0px;
.clock {
// the highlighted child
@@ -151,7 +162,14 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// spacing between power icon and (optional) percentage label
.power-status.panel-status-indicators-box {
+ padding-left: 0px;
spacing: 0;
+
+ @if $laptop {
+ margin-bottom: 2px;
+ } @else {
+ margin-left: 0px;
+ }
}
// important privacy related indicators
@@ -174,7 +192,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
.clock-display-box {
spacing: 2px;
.clock {
- padding-left: $scaled_padding * 2;
- padding-right: $scaled_padding * 2;
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+
+ StIcon:last-child {
+ margin-right: 3px;
}
}

1
toggle-off-light.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect width="46" height="26" x="-46" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#c0bfbc;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="stroke:none;stroke-width:1;marker:none"/></g></svg>

After

Width:  |  Height:  |  Size: 539 B

1
toggle-off.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect width="46" height="26" x="-46" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#fff;fill-opacity:.15;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#fff;fill-opacity:1;stroke:none;stroke-width:1;marker:none"/></g></svg>

After

Width:  |  Height:  |  Size: 578 B

1
toggle-on-light.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="translate(0 -291.18)"><rect width="46" height="26" y="291.18" fill="#3081e3" ry="13" style="fill:#3584e4;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="stroke:none;stroke-width:1;marker:none"/></g></svg>

After

Width:  |  Height:  |  Size: 511 B

1
toggle-on.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="translate(0 -291.18)"><rect width="46" height="26" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#3584e4;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#fff;stroke:none;stroke-width:1;marker:none"/></g></svg>

After

Width:  |  Height:  |  Size: 533 B