Compare commits
No commits in common. "bab131456d2d9a630cd1fbe755376d3719672b37" and "9d83a0e2ab3e4c01767e3bbdfa6041831d94e742" have entirely different histories.
bab131456d
...
9d83a0e2ab
42 changed files with 730 additions and 698 deletions
1
checkbox-focused.svg
Normal file
1
checkbox-focused.svg
Normal 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 |
220
checkbox-off-focused-light.svg
Normal file
220
checkbox-off-focused-light.svg
Normal 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
1
checkbox-off-focused.svg
Normal 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
211
checkbox-off-light.svg
Normal 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
1
checkbox-off.svg
Normal 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
1
checkbox.svg
Normal 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 |
|
|
@ -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_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%));
|
$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
|
||||||
|
|
||||||
// accent colors
|
// selection colors
|
||||||
$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%));
|
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));
|
||||||
|
|
|
||||||
|
|
@ -39,9 +39,6 @@ $forced_circular_radius: 999px;
|
||||||
// radii of things that display over other things, e.g. popovers
|
// radii of things that display over other things, e.g. popovers
|
||||||
$modal_radius: $base_border_radius * 2;
|
$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.
|
// 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
|
// This allows any box-shadow behind it to be rendered more efficiently by
|
||||||
// omitting the middle rectangle.
|
// omitting the middle rectangle.
|
||||||
|
|
@ -120,11 +117,11 @@ stage {
|
||||||
}
|
}
|
||||||
|
|
||||||
%default_button {
|
%default_button {
|
||||||
@include button(normal, $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:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
|
&:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||||
&:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
|
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||||
&:insensitive { @include button(insensitive, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
|
&:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||||
&:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
|
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||||
}
|
}
|
||||||
|
|
||||||
// items in popover menus
|
// items in popover menus
|
||||||
|
|
@ -175,9 +172,8 @@ stage {
|
||||||
%entry_common {
|
%entry_common {
|
||||||
border-radius: $base_border_radius;
|
border-radius: $base_border_radius;
|
||||||
padding: $base_padding * 1.5 $base_padding * 1.5;
|
padding: $base_padding * 1.5 $base_padding * 1.5;
|
||||||
|
selection-background-color: $selected_bg_color;
|
||||||
selection-background-color: st-transparentize(-st-accent-color, 0.7);
|
selected-color: $selected_fg_color;
|
||||||
selected-color: $fg_color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
%entry {
|
%entry {
|
||||||
|
|
@ -192,33 +188,48 @@ stage {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// buttons in notifications
|
// buttons in dialogs/notifications
|
||||||
// use a rounded style and have a lighter background
|
// lighter in color and have a greater radius
|
||||||
%notification_button {
|
%bubble_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;
|
|
||||||
padding: $base_padding * 2;
|
padding: $base_padding * 2;
|
||||||
border-radius: $base_border_radius * 1.5;
|
font-weight: bold !important;
|
||||||
|
|
||||||
@include button(normal, $style: dialog);
|
&:ltr {margin-right: 1px;}
|
||||||
&:focus { @include button(focus, $style: dialog);}
|
&:rtl {margin-left: 1px;}
|
||||||
&:hover { @include button(hover, $style: dialog);}
|
|
||||||
&:active { @include button(active, $style: dialog);}
|
// needs a 1px adjustment to fit exactly into the outer radius
|
||||||
&:checked { @include button(checked, $style: dialog);}
|
$bubble_button_radius: $modal_radius - 1px;
|
||||||
&:insensitive { @include button(insensitive, $style: dialog);}
|
|
||||||
|
@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
|
// tooltip
|
||||||
|
|
@ -280,7 +291,7 @@ stage {
|
||||||
|
|
||||||
%smaller {
|
%smaller {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@include fontsize(9pt);
|
@include fontsize(8pt);
|
||||||
}
|
}
|
||||||
|
|
||||||
%monospace {font-family: monospace;}
|
%monospace {font-family: monospace;}
|
||||||
|
|
|
||||||
|
|
@ -22,9 +22,13 @@ $error_bg_color: if($variant == 'light', $red_3, $red_4);
|
||||||
$error_fg_color: $light_1;
|
$error_fg_color: $light_1;
|
||||||
$error_color: $error_bg_color;
|
$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 colors
|
||||||
$link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%));
|
$link_color: if($variant == 'light', $blue_4, $blue_2);
|
||||||
$link_visited_color: st-transparentize($link_color, .6);
|
$link_visited_color: transparentize($link_color, .6);
|
||||||
|
|
||||||
// special cased widget definitions
|
// special cased widget definitions
|
||||||
$background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants
|
$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));
|
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
|
||||||
|
|
||||||
// focus colors
|
// focus colors
|
||||||
$focus_color: -st-accent-color;
|
$focus_color: $selected_bg_color;
|
||||||
$focus_border_color: st-transparentize($focus_color, 0.5);
|
$focus_border_color: transparentize($focus_color, 0.5);
|
||||||
|
|
||||||
// High Contrast overrides
|
// High Contrast overrides
|
||||||
@if $contrast == 'high' {
|
@if $contrast == 'high' {
|
||||||
|
|
@ -46,5 +50,5 @@ $focus_border_color: st-transparentize($focus_color, 0.5);
|
||||||
$shadow_color: transparent;
|
$shadow_color: transparent;
|
||||||
$text_shadow_color: transparent;
|
$text_shadow_color: transparent;
|
||||||
// less transparent focus color
|
// less transparent focus color
|
||||||
$focus_border_color: st-transparentize($focus_color, 0.2);
|
$focus_border_color: transparentize($focus_color, 0.2);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,12 +16,12 @@
|
||||||
// $mc: mix color, defined in High Contrast specific stylesheet
|
// $mc: mix color, defined in High Contrast specific stylesheet
|
||||||
// $mf: mix factor (%), 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 to mix the color and make the focus background
|
||||||
@function focus_bg_color($bg, $fc:$focus_color) {
|
@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
|
// - normal, focus, hover, active, checked, insensitive, default, undecorated
|
||||||
// $c: button bg color, derived from bg_color
|
// $c: button bg color, derived from bg_color
|
||||||
// $tc: button text color, derived from fg_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
|
// $always_dark: override the light theme check to use dark colors, true or false
|
||||||
//
|
//
|
||||||
|
|
||||||
// mix input colors to get button background color
|
// 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
|
// background color override for card elements
|
||||||
@if $style == 'card' { $button_bg_color: $card_bg_color;}
|
@if $style == 'card' { $button_bg_color: $card_bg_color;}
|
||||||
|
|
@ -187,46 +187,37 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// button base state background colors
|
// 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));
|
$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', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_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', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_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', st-lighten($button_bg_color, $insensitive_factor), st-darken($button_bg_color, $insensitive_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
|
// 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));
|
$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', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_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', st-darken($checked_button_bg_color, $active_factor), st-lighten($checked_button_bg_color, $active_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
|
// override button background colours if element is always dark
|
||||||
@if $always_dark {
|
@if $always_dark {
|
||||||
$hover_button_bg_color: st-lighten($button_bg_color, $hover_factor);
|
$hover_button_bg_color: lighten($button_bg_color, $hover_factor);
|
||||||
$active_button_bg_color: st-lighten($button_bg_color, $active_factor);
|
$active_button_bg_color: lighten($button_bg_color, $active_factor);
|
||||||
$checked_button_bg_color: st-lighten($button_bg_color, $checked_factor);
|
$checked_button_bg_color: lighten($button_bg_color, $checked_factor);
|
||||||
$insensitive_button_bg_color: st-darken($button_bg_color, $insensitive_factor);
|
$insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
|
||||||
// extended
|
// extended
|
||||||
$active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor);
|
$active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor);
|
||||||
$checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor);
|
$checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor);
|
||||||
$checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor);
|
$checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
|
||||||
}
|
}
|
||||||
|
|
||||||
// background color override for buttons that use transparency
|
// background color override for buttons that use transparency
|
||||||
// styles: dialogs bubbles, lockscreen
|
// styles: notification bubbles, lockscreen
|
||||||
@if $style == 'dialog' or $style == 'lockscreen' {
|
@if $style == 'bubble' or $style == 'lockscreen' {
|
||||||
$button_bg_color: transparentize($tc, .9);
|
$button_bg_color: transparentize($tc, .9);
|
||||||
$hover_button_bg_color: transparentize($tc, .87);
|
$hover_button_bg_color: transparentize($tc, .87);
|
||||||
$active_button_bg_color: transparentize($tc, .84);
|
$active_button_bg_color: transparentize($tc, .84);
|
||||||
$active_hover_button_bg_color: transparentize($tc, .81);
|
$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
|
// flat style overrides
|
||||||
@if $style == 'flat' {
|
@if $style == 'flat' {
|
||||||
$insensitive_button_bg_color: $button_bg_color;
|
$insensitive_button_bg_color: $button_bg_color;
|
||||||
|
|
@ -292,7 +283,7 @@
|
||||||
|
|
||||||
// insensitive button
|
// insensitive button
|
||||||
@else if $type == 'insensitive' {
|
@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;
|
color: $insensitive_button_fg_color;
|
||||||
background-color: $insensitive_button_bg_color;
|
background-color: $insensitive_button_bg_color;
|
||||||
|
|
||||||
|
|
@ -309,7 +300,7 @@
|
||||||
|
|
||||||
// use a different focus ring color for default style
|
// use a different focus ring color for default style
|
||||||
@if $style == 'default' {
|
@if $style == 'default' {
|
||||||
@include focus_ring($fc:$accent_borders_color);
|
@include focus_ring($fc:$selected_borders_color);
|
||||||
}
|
}
|
||||||
// change background color if style is flat
|
// change background color if style is flat
|
||||||
@if $style == 'flat' {
|
@if $style == 'flat' {
|
||||||
|
|
@ -366,8 +357,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:drop {
|
&:drop {
|
||||||
background-color: st-transparentize(-st-accent-color, .8);
|
background-color: transparentize($selected_bg_color, .8);
|
||||||
box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2);
|
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -377,16 +368,19 @@
|
||||||
// extend common styles
|
// extend common styles
|
||||||
@extend %menuitem;
|
@extend %menuitem;
|
||||||
|
|
||||||
|
// lighten the background color always
|
||||||
|
$bg: lighten($bg,5%);
|
||||||
|
|
||||||
@if $style == 'flat' {
|
@if $style == 'flat' {
|
||||||
@include button(undecorated);
|
@include button(undecorated);
|
||||||
} @else {
|
} @else {
|
||||||
@include button(normal, $c:$bg);
|
@include button(normal, $c:$bg);
|
||||||
}
|
}
|
||||||
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
@include button(hover, $c:$bg);
|
@include button(hover, $c:$bg);
|
||||||
}
|
}
|
||||||
&:active {@include button(active, $c:$bg);}
|
&:active {@include button(active, $c:$bg);}
|
||||||
&:selected,
|
|
||||||
&:checked {@include button(checked, $c:$bg);}
|
&:checked {@include button(checked, $c:$bg);}
|
||||||
&:insensitive {@include button(insensitive, $c:$bg);}
|
&:insensitive {@include button(insensitive, $c:$bg);}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -64,8 +64,8 @@ $hover_fg_color: lighten($fg_color, 20%);
|
||||||
$active_bg_color: lighten($bg_color, 22%);
|
$active_bg_color: lighten($bg_color, 22%);
|
||||||
$active_fg_color: lighten($fg_color, 22%);
|
$active_fg_color: lighten($fg_color, 22%);
|
||||||
|
|
||||||
// accent colors
|
// selection colors
|
||||||
$accent_borders_color: st-lighten(-st-accent-color, 30%);
|
$selected_borders_color: lighten($selected_bg_color, 30%);
|
||||||
|
|
||||||
//
|
//
|
||||||
// High Contrast specific definitions
|
// High Contrast specific definitions
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
width: $ripple_size;
|
width: $ripple_size;
|
||||||
height: $ripple_size;
|
height: $ripple_size;
|
||||||
border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve
|
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%);
|
background-color: lighten(transparentize($selected_bg_color, 0.7), 30%);
|
||||||
box-shadow: 0 0 2px 2px st-lighten(-st-accent-color, 20%);
|
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pointer accessibility notifications
|
// Pointer accessibility notifications
|
||||||
|
|
@ -12,13 +12,13 @@
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
-pie-border-width: 3px;
|
-pie-border-width: 3px;
|
||||||
-pie-border-color: -st-accent-color;
|
-pie-border-color: $selected_bg_color;
|
||||||
-pie-background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 40%);
|
-pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Screen zoom/Magnifier
|
// Screen zoom/Magnifier
|
||||||
.magnifier-zoom-region {
|
.magnifier-zoom-region {
|
||||||
border: 2px solid -st-accent-color;
|
border: 2px solid $selected_bg_color;
|
||||||
|
|
||||||
&.full-screen { border-width: 0; }
|
&.full-screen { border-width: 0; }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,12 @@ $app_folder_size: 720px;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
border-radius:5px;
|
border-radius:5px;
|
||||||
background-color: $system_fg_color;
|
background-color: $system_fg_color;
|
||||||
offset-y: 6px;
|
|
||||||
|
@if $contrast == 'high' {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
} @else {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-folder-dialog-container {
|
.app-folder-dialog-container {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
color: $link_color;
|
color: $link_color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: st-lighten($link_color, 10%);
|
color: lighten($link_color, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -18,5 +18,10 @@
|
||||||
|
|
||||||
@if $contrast == 'high' {
|
@if $contrast == 'high' {
|
||||||
icon-shadow: none;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -111,7 +111,7 @@
|
||||||
&.calendar-today {
|
&.calendar-today {
|
||||||
@extend %default_button;
|
@extend %default_button;
|
||||||
// override colors above for when today is a weekend
|
// override colors above for when today is a weekend
|
||||||
color: -st-accent-fg-color !important;
|
color: $selected_fg_color !important;
|
||||||
&.calendar-day-with-events {
|
&.calendar-day-with-events {
|
||||||
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
|
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;
|
spacing-columns: $base_padding * 2;
|
||||||
|
|
||||||
.weather-forecast-time {
|
.weather-forecast-time {
|
||||||
@extend %smaller;
|
@extend %numeric;
|
||||||
padding-top: $base_padding;
|
@include fontsize(10pt);
|
||||||
padding-bottom: $base_padding;
|
padding-top: 0.2em;
|
||||||
|
padding-bottom: 0.4em;
|
||||||
}
|
}
|
||||||
.weather-forecast-icon {
|
.weather-forecast-icon {
|
||||||
icon-size: $large_scalable_icon_size;
|
icon-size: $large_scalable_icon_size;
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,18 @@
|
||||||
/* Check Boxes */
|
/* Check Boxes */
|
||||||
|
|
||||||
|
// these are equal to the size of the SVG assets
|
||||||
|
$check_height: 24px;
|
||||||
|
$check_width: 24px;
|
||||||
|
|
||||||
|
|
||||||
.check-box {
|
.check-box {
|
||||||
StBoxLayout { spacing: .8em; }
|
StBoxLayout { spacing: .8em; }
|
||||||
|
|
||||||
StBin {
|
StBin {
|
||||||
border-radius: 7px;
|
width: $check_width;
|
||||||
padding: 2px;
|
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 {
|
|
||||||
// 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%);
|
|
||||||
}
|
}
|
||||||
|
&: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"); }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,7 @@ $dash_spacing: $base_margin * 0.5;
|
||||||
|
|
||||||
// container for the dash
|
// container for the dash
|
||||||
#dash {
|
#dash {
|
||||||
// a bit of spacing so that dash doesn't touch the screen edges
|
margin-top: $dash_edge_offset;
|
||||||
padding-left: $base_padding;
|
|
||||||
padding-right: $base_padding;
|
|
||||||
|
|
||||||
// background behind item container
|
// background behind item container
|
||||||
.dash-background {
|
.dash-background {
|
||||||
|
|
@ -71,11 +69,7 @@ $dash_spacing: $base_margin * 0.5;
|
||||||
// running app dot
|
// running app dot
|
||||||
.app-grid-running-dot {
|
.app-grid-running-dot {
|
||||||
// manually position the dot within the dash item
|
// manually position the dot within the dash item
|
||||||
@if $contrast == 'high' {
|
margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
|
||||||
offset-y: -$dash_padding - 1px; // don't draw dot directly on inset
|
|
||||||
} @else {
|
|
||||||
offset-y: -$dash_padding;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,25 +6,23 @@
|
||||||
|
|
||||||
.modal-dialog {
|
.modal-dialog {
|
||||||
background-color: $bg_color;
|
background-color: $bg_color;
|
||||||
border-radius: $alert_radius;
|
border-radius: $modal_radius;
|
||||||
box-shadow: inset 0 0 0 1px $outer_borders_color;
|
box-shadow: inset 0 0 0 1px $outer_borders_color;
|
||||||
padding: $base_padding * 4;
|
|
||||||
|
|
||||||
.modal-dialog-content-box {
|
.modal-dialog-content-box {
|
||||||
|
margin: $base_margin * 8 $base_margin * 10;
|
||||||
spacing: $base_margin * 8;
|
spacing: $base_margin * 8;
|
||||||
margin-top: $base_margin * 2;
|
|
||||||
margin-bottom: $base_margin * 4;
|
|
||||||
max-width: 28em;
|
max-width: 28em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-dialog-linked-button {
|
.modal-dialog-linked-button {
|
||||||
@extend %dialog_button;
|
@extend %bubble_button;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* End Session Dialog */
|
/* End Session Dialog */
|
||||||
.end-session-dialog {
|
.end-session-dialog {
|
||||||
width: 24em;
|
width: 30em;
|
||||||
|
|
||||||
.end-session-dialog-battery-warning,
|
.end-session-dialog-battery-warning,
|
||||||
.dialog-list-title {
|
.dialog-list-title {
|
||||||
|
|
@ -147,8 +145,8 @@
|
||||||
border-radius: $base_border_radius * 2;
|
border-radius: $base_border_radius * 2;
|
||||||
&:hover,&:focus { background-color: $hover_bg_color; }
|
&:hover,&:focus { background-color: $hover_bg_color; }
|
||||||
&:active {
|
&:active {
|
||||||
background-color: -st-accent-color;
|
background-color: $selected_bg_color;
|
||||||
color: -st-accent-fg-color;
|
color: $selected_fg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
.candidate-box {
|
.candidate-box {
|
||||||
padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2;
|
padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2;
|
||||||
border-radius: $base_border_radius;
|
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; }
|
&:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
// keys that may be latched: ctrl/alt/shift
|
||||||
&:latched {
|
&:latched {
|
||||||
border-color: st-lighten(-st-accent-color, 5%);
|
border-color: lighten($selected_bg_color, 5%);
|
||||||
background-color: -st-accent-color;
|
background-color: $selected_bg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// enter key is suggested-action
|
// enter key is suggested-action
|
||||||
&.enter-key {
|
&.enter-key {
|
||||||
@include button(normal, $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:-st-accent-color, $tc:-st-accent-fg-color);}
|
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);}
|
||||||
&:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color);}
|
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);}
|
||||||
&:checked { @include button(checked, $c:-st-accent-color, $tc:-st-accent-fg-color);}
|
&:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);}
|
||||||
border-radius: $key_border_radius;
|
border-radius: $key_border_radius;
|
||||||
color: $osd_fg_color;
|
color: $osd_fg_color;
|
||||||
}
|
}
|
||||||
|
|
@ -128,8 +128,8 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
|
||||||
|
|
||||||
.emoji-panel {
|
.emoji-panel {
|
||||||
.keyboard-key:latched {
|
.keyboard-key:latched {
|
||||||
border-color: st-lighten(-st-accent-color, 5%);
|
border-color: lighten($selected_bg_color, 5%);
|
||||||
background-color: -st-accent-color;
|
background-color: $selected_bg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -80,11 +80,6 @@ $_gdm_dialog_width: 25em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-dialog-message-hint, .login-dialog-message {
|
|
||||||
color: darken($_gdm_fg, 10%);
|
|
||||||
min-height: 2.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-dialog-user-selection-box {
|
.login-dialog-user-selection-box {
|
||||||
// padding to ensure the box doesn't overlap the panel
|
// padding to ensure the box doesn't overlap the panel
|
||||||
padding-top: 4em;
|
padding-top: 4em;
|
||||||
|
|
@ -128,8 +123,8 @@ $_gdm_dialog_width: 25em;
|
||||||
color: darken($_gdm_fg,30%);
|
color: darken($_gdm_fg,30%);
|
||||||
|
|
||||||
&:focus, &:selected {
|
&:focus, &:selected {
|
||||||
background-color: -st-accent-color;
|
background-color: $selected_bg_color;
|
||||||
color: -st-accent-fg-color;
|
color: $selected_fg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -175,9 +170,9 @@ $_gdm_dialog_width: 25em;
|
||||||
&:logged-in {
|
&:logged-in {
|
||||||
// color border for logged-in user
|
// color border for logged-in user
|
||||||
.user-icon {
|
.user-icon {
|
||||||
border-color: -st-accent-color;
|
border-color: $selected_bg_color;
|
||||||
StIcon {
|
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 {
|
.unlock-dialog-clock-time {
|
||||||
@extend %numeric;
|
@extend %numeric;
|
||||||
@include fontsize(72pt);
|
@include fontsize(72pt);
|
||||||
font-weight: 800;
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unlock-dialog-clock-date {
|
.unlock-dialog-clock-date {
|
||||||
|
|
@ -238,7 +233,7 @@ $_gdm_dialog_width: 25em;
|
||||||
StButton#vhandle, StButton#hhandle {
|
StButton#vhandle, StButton#hhandle {
|
||||||
background-color: transparentize($bg_color,0.7);
|
background-color: transparentize($bg_color,0.7);
|
||||||
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
|
&: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;
|
spacing: $base_padding * 4;
|
||||||
|
|
||||||
.user-widget-label {
|
.user-widget-label {
|
||||||
font-weight: 400;
|
@extend %title_1;
|
||||||
@include fontsize(20pt);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: .75em;
|
margin-bottom: .75em;
|
||||||
}
|
}
|
||||||
|
|
@ -328,7 +322,7 @@ $_gdm_dialog_width: 25em;
|
||||||
icon-size: $base_icon_size * 10;
|
icon-size: $base_icon_size * 10;
|
||||||
|
|
||||||
& StIcon {
|
& StIcon {
|
||||||
padding: $base_padding * 5;
|
padding: $base_padding * 4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,5 @@
|
||||||
/* Looking Glass */
|
/* 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
|
// Dialog
|
||||||
#LookingGlassDialog {
|
#LookingGlassDialog {
|
||||||
|
|
||||||
|
|
@ -70,166 +40,92 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.notebook-tab {
|
.notebook-tab {
|
||||||
@extend %osd_button_flat;
|
@extend %osd_button;
|
||||||
background-color: transparent;
|
|
||||||
-natural-hpadding: $base_padding * 2;
|
-natural-hpadding: $base_padding * 2;
|
||||||
-minimum-hpadding: $base_padding * 2;
|
-minimum-hpadding: $base_padding * 2;
|
||||||
padding: $base_padding $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
|
// Inspector
|
||||||
#LookingGlassPropertyInspector {
|
#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;
|
color: $osd_fg_color;
|
||||||
border-radius: $modal_radius;
|
&:hover { color: lighten($osd_fg_color, 20%); }
|
||||||
border: 1px solid $osd_borders_color;
|
&:active { color: darken($osd_fg_color, 20%); }
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg-debug-flags-header {
|
||||||
// Evaluator
|
padding-top: 2 * $base_padding;
|
||||||
#LookingGlassEvaluator {
|
|
||||||
padding: $base_padding;
|
padding: $base_padding;
|
||||||
|
@extend %title_2;
|
||||||
.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%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|
||||||
&:focus {
|
&: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 bubbles
|
||||||
.message {
|
.message {
|
||||||
@extend %card;
|
@extend %card;
|
||||||
padding: $base_padding;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: $modal_radius;
|
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
|
||||||
.message-header {
|
.message-header {
|
||||||
|
padding: 0 $scaled_padding;
|
||||||
|
margin: $base_padding;
|
||||||
|
margin-bottom: 0;
|
||||||
spacing: $base_padding;
|
spacing: $base_padding;
|
||||||
color: $insensitive_fg_color;
|
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
|
// header source icon
|
||||||
.message-source-icon {
|
.message-source-icon {
|
||||||
|
|
@ -111,14 +113,17 @@
|
||||||
.message-expand-button,
|
.message-expand-button,
|
||||||
.message-close-button {
|
.message-close-button {
|
||||||
@extend .icon-button;
|
@extend .icon-button;
|
||||||
@extend %notification_button;
|
|
||||||
border-radius: $forced_circular_radius; // make circular
|
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
|
background-color: transparentize($fg_color, .9);
|
||||||
padding: 4px;
|
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 {
|
.message-expand-button {
|
||||||
padding: $base_padding;
|
padding: 6px;
|
||||||
&:ltr { margin-right: $base_padding; }
|
&:ltr { margin-right: $base_padding; }
|
||||||
&:rtl { margin-left: $base_padding; }
|
&:rtl { margin-left: $base_padding; }
|
||||||
}
|
}
|
||||||
|
|
@ -127,6 +132,7 @@
|
||||||
// container for message contents
|
// container for message contents
|
||||||
.message-box {
|
.message-box {
|
||||||
padding: $base_padding;
|
padding: $base_padding;
|
||||||
|
margin: $base_padding;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
spacing: $base_padding;
|
spacing: $base_padding;
|
||||||
|
|
||||||
|
|
@ -137,12 +143,12 @@
|
||||||
|
|
||||||
// icon size and color
|
// icon size and color
|
||||||
icon-size: $base_icon_size * 3; // 48px
|
icon-size: $base_icon_size * 3; // 48px
|
||||||
|
-st-icon-style: symbolic;
|
||||||
|
|
||||||
// a small symbolic icon on a circle background
|
|
||||||
&.message-themed-icon {
|
&.message-themed-icon {
|
||||||
border-radius: $forced_circular_radius;
|
border-radius: $forced_circular_radius; // is circular
|
||||||
background-color: transparentize($fg_color, .93);
|
background-color: transparentize($fg_color, 0.8);
|
||||||
icon-size: $scalable_icon_size;
|
icon-size: $base_icon_size;
|
||||||
min-width: $base_icon_size * 3;
|
min-width: $base_icon_size * 3;
|
||||||
min-height: $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
|
// URLs in messages
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
// Rubberband for select-area screenshots
|
// Rubberband for select-area screenshots
|
||||||
.select-area-rubberband {
|
.select-area-rubberband {
|
||||||
background-color: st-transparentize(-st-accent-color,0.7);
|
background-color: transparentize($selected_bg_color,0.7);
|
||||||
border: 1px solid -st-accent-color;
|
border: 1px solid $selected_bg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// User icon
|
// User icon
|
||||||
|
|
@ -48,6 +48,6 @@
|
||||||
|
|
||||||
/* Tiled window previews */
|
/* Tiled window previews */
|
||||||
.tile-preview {
|
.tile-preview {
|
||||||
background-color: st-transparentize(-st-accent-color,0.5);
|
background-color: transparentize($selected_bg_color,0.5);
|
||||||
border: 1px solid -st-accent-color;
|
border: 1px solid $selected_bg_color;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,5 +21,5 @@ $notification_banner_width: 34em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-button {
|
.notification-button {
|
||||||
@extend %notification_button;
|
@extend %bubble_button;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,8 +36,8 @@ $osd_levelbar_height:6px;
|
||||||
|
|
||||||
// Monitor number label
|
// Monitor number label
|
||||||
.osd-monitor-label {
|
.osd-monitor-label {
|
||||||
background-color: -st-accent-color;
|
background-color: $selected_bg_color;
|
||||||
color: -st-accent-fg-color;
|
color: $selected_fg_color;
|
||||||
border-radius: $modal_radius;
|
border-radius: $modal_radius;
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,13 @@
|
||||||
/* OVERVIEW */
|
/* OVERVIEW */
|
||||||
|
|
||||||
.secondary-monitor-workspaces {
|
.controls-manager, .secondary-monitor-workspaces {
|
||||||
spacing: $base_padding * 2;
|
spacing: $base_padding * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
#overviewGroup {
|
#overviewGroup {
|
||||||
background-color: $system_base_color;
|
background-color: $system_base_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overview-controls {
|
||||||
|
padding-bottom: $base_margin * 8;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
/* Popovers/Menus */
|
/* Popovers/Menus */
|
||||||
|
|
||||||
$menu_bg_color: $bg_color;
|
$menu_bg_color: $bg_color;
|
||||||
|
$menuitem_bg_color: lighten($menu_bg_color, 4%);
|
||||||
$menuitem_bg_color: if($variant == 'light', darken($menu_bg_color, 5%), lighten($menu_bg_color, 5%));
|
|
||||||
$menuitem_border_radius: $base_border_radius * 1.5;
|
$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
|
// the popover itself
|
||||||
.popup-menu-boxpointer {
|
.popup-menu-boxpointer {
|
||||||
|
|
@ -34,7 +33,7 @@ $submenu_bg_color: if($variant == 'light', darken($menu_bg_color, 17%), lighten
|
||||||
|
|
||||||
// menu items
|
// menu items
|
||||||
.popup-menu-item {
|
.popup-menu-item {
|
||||||
@include menuitem($bg:$menuitem_bg_color);
|
@include menuitem($bg:$menu_bg_color);
|
||||||
|
|
||||||
border-radius: $menuitem_border_radius;
|
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;
|
border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px;
|
||||||
margin-bottom: $base_padding;
|
margin-bottom: $base_padding;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
background-color: $submenu_bg_color;
|
|
||||||
|
|
||||||
@if $contrast == 'high' {
|
@if $contrast == 'high' {
|
||||||
border-color: $hc_inset_color;
|
border-color: $hc_inset_color;
|
||||||
|
|
@ -85,8 +83,8 @@ $submenu_bg_color: if($variant == 'light', darken($menu_bg_color, 17%), lighten
|
||||||
// submenu specific styles
|
// submenu specific styles
|
||||||
.popup-menu-item {
|
.popup-menu-item {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-top-width:0;
|
|
||||||
@include menuitem($bg:$submenu_bg_color);
|
@include menuitem($bg:$submenu_bg_color);
|
||||||
|
border-top-width:0;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius;
|
border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius;
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@
|
||||||
|
|
||||||
&:checked {
|
&:checked {
|
||||||
@extend %default_button;
|
@extend %default_button;
|
||||||
border-color: $accent_borders_color;
|
border-color: $selected_borders_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:ltr {
|
&:ltr {
|
||||||
|
|
@ -119,8 +119,8 @@
|
||||||
background-color: transparentize($fg_color, 0.8);
|
background-color: transparentize($fg_color, 0.8);
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: -st-accent-color;
|
background-color: $selected_bg_color;
|
||||||
color: -st-accent-fg-color;
|
color: $selected_fg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// draw hc outline
|
// draw hc outline
|
||||||
|
|
|
||||||
|
|
@ -168,18 +168,18 @@ $screenshot_ui_button_red: $red_4;
|
||||||
.screenshot-ui-window-selector-window {
|
.screenshot-ui-window-selector-window {
|
||||||
&:hover {
|
&:hover {
|
||||||
.screenshot-ui-window-selector-window-border {
|
.screenshot-ui-window-selector-window-border {
|
||||||
border-color: st-darken(-st-accent-color, 15%);
|
border-color: darken($selected_bg_color, 15%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:checked {
|
&:checked {
|
||||||
.screenshot-ui-window-selector-window-border {
|
.screenshot-ui-window-selector-window-border {
|
||||||
border-color: -st-accent-color;
|
border-color: $selected_bg_color;
|
||||||
background-color: st-transparentize(-st-accent-color, 0.8);
|
background-color: transparentize($selected_bg_color, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.screenshot-ui-window-selector-check {
|
.screenshot-ui-window-selector-check {
|
||||||
color: -st-accent-fg-color;
|
color: $selected_fg_color;
|
||||||
background-color: -st-accent-color;
|
background-color: $selected_bg_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,7 @@
|
||||||
|
|
||||||
.grid-search-results {
|
.grid-search-results {
|
||||||
spacing: $base_padding * 5;
|
spacing: $base_padding * 5;
|
||||||
|
margin:0 $base_margin * 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Search results with icons
|
// Search results with icons
|
||||||
|
|
|
||||||
|
|
@ -3,25 +3,25 @@
|
||||||
$slider_size: $scalable_icon_size;
|
$slider_size: $scalable_icon_size;
|
||||||
|
|
||||||
.slider {
|
.slider {
|
||||||
color: if($variant == 'light', $fg_color, darken($fg_color, 9%));
|
|
||||||
|
|
||||||
// slider trough
|
// slider trough
|
||||||
-barlevel-height: 4px;
|
-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
|
// 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)
|
// overfill style (red in this case)
|
||||||
-barlevel-overdrive-color: $destructive_color;
|
-barlevel-overdrive-color: $destructive_color;
|
||||||
|
-barlevel-overdrive-border-color: transparent; //trough border when red;
|
||||||
-barlevel-overdrive-separator-width:1px;
|
-barlevel-overdrive-separator-width:1px;
|
||||||
// slider handler
|
// slider handler
|
||||||
-slider-handle-radius: $slider_size * 0.5; // half the size of the size
|
-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
|
// hc style
|
||||||
@if $contrast == 'high' {
|
@if $contrast == 'high' {
|
||||||
-barlevel-background-color: transparentize($fg_color, 0.6);
|
-barlevel-background-color: transparentize($fg_color, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: if($variant == 'light', lighten($fg_color, 7%), $fg_color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -78,5 +78,5 @@ $switcher_radius: $modal_radius + $switcher_padding;
|
||||||
|
|
||||||
// Window cycler highlight
|
// Window cycler highlight
|
||||||
.cycler-highlight {
|
.cycler-highlight {
|
||||||
border: 5px solid -st-accent-color;
|
border: 5px solid $selected_bg_color;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,18 @@
|
||||||
/* Switches */
|
/* Switches */
|
||||||
|
|
||||||
|
// these are equal to the size of the SVG assets
|
||||||
|
$switch_height: 26px;
|
||||||
$switch_width: 46px;
|
$switch_width: 46px;
|
||||||
$switch_handle_size: 20px;
|
|
||||||
|
|
||||||
.toggle-switch {
|
.toggle-switch {
|
||||||
width: $switch_width;
|
|
||||||
border-radius: $forced_circular_radius;
|
|
||||||
transition-duration: 100ms;
|
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
|
height: $switch_height;
|
||||||
@if $contrast == 'high' {
|
width: $switch_width;
|
||||||
background: transparentize(if($variant == 'light', black, white), .7);
|
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"));
|
||||||
&: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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked {
|
&:checked {
|
||||||
background: -st-accent-color;
|
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& StIcon {icon-size: $base_icon_size;}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,19 +7,6 @@ $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02);
|
||||||
spacing: $base_padding;
|
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 titles
|
||||||
.window-caption {
|
.window-caption {
|
||||||
@extend %tooltip;
|
@extend %tooltip;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
/* Workspace Switcher */
|
/* Workspace Switcher */
|
||||||
|
|
||||||
$ws_indicator_height: 32px;
|
$ws_indicator_height: 48px;
|
||||||
$ws_dot_active: $ws_indicator_height / 3;
|
$ws_dot_active: $ws_indicator_height / 3;
|
||||||
$ws_dot_inactive: $ws_indicator_height / 6;
|
$ws_dot_inactive: $ws_indicator_height / 6;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,6 @@
|
||||||
|
|
||||||
// selected indicator
|
// selected indicator
|
||||||
.workspace-thumbnail-indicator {
|
.workspace-thumbnail-indicator {
|
||||||
border: 3px solid -st-accent-color;
|
border: 3px solid $selected_bg_color;
|
||||||
border-radius: $base_border_radius;
|
border-radius: $base_border_radius;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
1
toggle-off-light.svg
Normal 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
1
toggle-off.svg
Normal 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
1
toggle-on-light.svg
Normal 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
1
toggle-on.svg
Normal 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 |
Loading…
Reference in a new issue