kevin/gnome-shell-dark-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Rebase against gnome-shell 47

Browse source
This commit is contained in:
Kevin MacMartin 2024-09-19 20:40:52 -04:00
parent 9d83a0e2ab
commit cf60bd56fd
47 changed files with 505 additions and 773 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
checkbox-focused.svg
View file

@ -1 +0,0 @@
<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>
Side by side

Before

Width:  |  Height:  |  Size: 1.7 KiB

220
checkbox-off-focused-light.svg
View file

@ -1,220 +0,0 @@
<?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>
Side by side

Before

Width:  |  Height:  |  Size: 6.8 KiB

1
checkbox-off-focused.svg
View file

@ -1 +0,0 @@
<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>
Side by side

Before

Width:  |  Height:  |  Size: 1.4 KiB

211
checkbox-off-light.svg
View file

@ -1,211 +0,0 @@
<?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>
Side by side

Before

Width:  |  Height:  |  Size: 6.3 KiB

1
checkbox-off.svg
View file

@ -1 +0,0 @@
<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>
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

1
checkbox.svg
View file

@ -1 +0,0 @@
<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>
Side by side

Before

Width:  |  Height:  |  Size: 1.4 KiB

1
gnome-shell-dark.scss
View file

@ -1,7 +1,6 @@
$variant: 'dark'; $variant: 'dark';
$contrast: 'normal'; $contrast: 'normal';
$laptop: false;
@import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing"; @import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common"; @import "gnome-shell-sass/_common";

7
gnome-shell-high-contrast.scss Normal file
View file

@ -0,0 +1,7 @@
$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";

3
gnome-shell-dark-laptop.scss → gnome-shell-light.scss
View file

@ -1,7 +1,6 @@
$variant: 'dark'; $variant: 'light';
$contrast: 'normal'; $contrast: 'normal';
$laptop: true;
@import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing"; @import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common"; @import "gnome-shell-sass/_common";

6
gnome-shell-sass/_colors.scss
View file

@ -21,7 +21,7 @@ $system_base_color: $_base_color_dark;
$system_fg_color: $_base_color_light; $system_fg_color: $_base_color_light;
// panel colors // panel colors
$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_4); $panel_bg_color: if($variant == 'light', $_base_color_light, $dark_5);
$panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1); $panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1);
// card elements // card elements
@ -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%));
// selection colors // accent colors
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%)); $accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%));

85
gnome-shell-sass/_common.scss
View file

@ -39,6 +39,9 @@ $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.
@ -117,11 +120,11 @@ stage {
} }
%default_button { %default_button {
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default); @include button(normal, $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);} &:focus { @include button(focus, $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);} &:hover { @include button(hover, $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);} &:insensitive { @include button(insensitive, $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);} &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
} }
// items in popover menus // items in popover menus
@ -172,8 +175,9 @@ 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;
selected-color: $selected_fg_color; selection-background-color: st-transparentize(-st-accent-color, 0.7);
selected-color: $fg_color;
} }
%entry { %entry {
@ -188,48 +192,33 @@ stage {
} }
} }
// buttons in dialogs/notifications // buttons in notifications
// lighter in color and have a greater radius // use a rounded style and have a lighter background
%bubble_button { %notification_button {
font-weight: bold;
padding: $base_padding $base_padding * 2;
border-radius: $base_border_radius;
@include button(normal, $style: notification);
&:focus { @include button(focus, $style: notification);}
&:hover { @include button(hover, $style: notification);}
&:active { @include button(active, $style: notification);}
&:checked { @include button(checked, $style: notification);}
&:insensitive { @include button(insensitive, $style: notification);}
}
// buttons in dialogs
%dialog_button {
font-weight: bold;
padding: $base_padding * 2; padding: $base_padding * 2;
font-weight: bold !important; border-radius: $base_border_radius * 1.5;
&:ltr {margin-right: 1px;} @include button(normal, $style: dialog);
&:rtl {margin-left: 1px;} &:focus { @include button(focus, $style: dialog);}
&:hover { @include button(hover, $style: dialog);}
// needs a 1px adjustment to fit exactly into the outer radius &:active { @include button(active, $style: dialog);}
$bubble_button_radius: $modal_radius - 1px; &:checked { @include button(checked, $style: dialog);}
&: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
@ -291,7 +280,7 @@ stage {
%smaller { %smaller {
font-weight: 400; font-weight: 400;
@include fontsize(8pt); @include fontsize(9pt);
} }
%monospace {font-family: monospace;} %monospace {font-family: monospace;}

14
gnome-shell-sass/_default-colors.scss
View file

@ -22,13 +22,9 @@ $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', $blue_4, $blue_2); $link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%));
$link_visited_color: transparentize($link_color, .6); $link_visited_color: st-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
@ -39,8 +35,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: $selected_bg_color; $focus_color: -st-accent-color;
$focus_border_color: transparentize($focus_color, 0.5); $focus_border_color: st-transparentize($focus_color, 0.5);
// High Contrast overrides // High Contrast overrides
@if $contrast == 'high' { @if $contrast == 'high' {
@ -50,5 +46,5 @@ $focus_border_color: 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: transparentize($focus_color, 0.2); $focus_border_color: st-transparentize($focus_color, 0.2);
} }

68
gnome-shell-sass/_drawing.scss
View file

@ -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 mix($c, $mc, $mf); @return st-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 mix($fc, $bg, 5%); @return st-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, bubble, flat, default // $style: button style, possible values: card, notification, dialog, 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: mix($tc, $c, $background_mix_factor); $button_bg_color: st-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,37 +187,46 @@
} }
// button base state background colors // button base state background colors
$hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor)); $hover_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $hover_factor), st-lighten($button_bg_color, $hover_factor));
$active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor)); $active_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_factor));
$checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor)); $checked_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_factor));
$insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor)); $insensitive_button_bg_color: if($variant == 'light', st-lighten($button_bg_color, $insensitive_factor), st-darken($button_bg_color, $insensitive_factor));
// button extended state background colors // button extended state background colors
$active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor)); $active_hover_button_bg_color: if($variant == 'light', st-darken($active_button_bg_color, $hover_factor), st-lighten($active_button_bg_color, $hover_factor));
$checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor)); $checked_hover_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_button_bg_color, $hover_factor));
$checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_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));
// 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: lighten($button_bg_color, $hover_factor); $hover_button_bg_color: st-lighten($button_bg_color, $hover_factor);
$active_button_bg_color: lighten($button_bg_color, $active_factor); $active_button_bg_color: st-lighten($button_bg_color, $active_factor);
$checked_button_bg_color: lighten($button_bg_color, $checked_factor); $checked_button_bg_color: st-lighten($button_bg_color, $checked_factor);
$insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor); $insensitive_button_bg_color: st-darken($button_bg_color, $insensitive_factor);
// extended // extended
$active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor); $active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor);
$checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor); $checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor);
$checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor); $checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor);
} }
// background color override for buttons that use transparency // background color override for buttons that use transparency
// styles: notification bubbles, lockscreen // styles: dialogs bubbles, lockscreen
@if $style == 'bubble' or $style == 'lockscreen' { @if $style == 'dialog' 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;
@ -283,7 +292,7 @@
// insensitive button // insensitive button
@else if $type == 'insensitive' { @else if $type == 'insensitive' {
$insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); $insensitive_button_fg_color: if($variant == 'light', st-transparentize($tc, .6), st-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;
@ -300,7 +309,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:$selected_borders_color); @include focus_ring($fc:$accent_borders_color);
} }
// change background color if style is flat // change background color if style is flat
@if $style == 'flat' { @if $style == 'flat' {
@ -357,8 +366,8 @@
} }
&:drop { &:drop {
background-color: transparentize($selected_bg_color, .8); background-color: st-transparentize(-st-accent-color, .8);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2); box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2);
} }
} }
@ -368,25 +377,22 @@
// 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);}
} }
// Panel menu/button drawing function // Panel menu/button drawing function
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"", $border_radius: 3px) { @mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"") {
// //
// $bg: background color, derived from $panel_fg_color // $bg: background color, derived from $panel_fg_color
// $fg: foreground color, also derived from $panel_fg_color // $fg: foreground color, also derived from $panel_fg_color
@ -400,7 +406,7 @@
transition-duration: 150ms; transition-duration: 150ms;
border: 3px solid transparent; border: 3px solid transparent;
background-color: transparent; background-color: transparent;
border-radius: $border_radius; border-radius: $forced_circular_radius;
font-weight: bold; font-weight: bold;
color: $fg; color: $fg;
@ -444,7 +450,7 @@
#{$child_class} { #{$child_class} {
transition-duration: 150ms; transition-duration: 150ms;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: $border_radius; border-radius: $forced_circular_radius;
} }
&:focus, &:hover { &:focus, &:hover {

4
gnome-shell-sass/_high-contrast-colors.scss
View file

@ -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%);
// selection colors // accent colors
$selected_borders_color: lighten($selected_bg_color, 30%); $accent_borders_color: st-lighten(-st-accent-color, 30%);
// //
// High Contrast specific definitions // High Contrast specific definitions

8
gnome-shell-sass/_palette.scss
View file

@ -39,8 +39,8 @@ $light_2: #f6f5f4;
$light_3: #deddda; $light_3: #deddda;
$light_4: #c0bfbc; $light_4: #c0bfbc;
$light_5: #9a9996; $light_5: #9a9996;
$dark_1: #777777; $dark_1: #77767b;
$dark_2: #5e5e5e; $dark_2: #5e5c64;
$dark_3: #3d3d3d; $dark_3: #3d3846;
$dark_4: #242424; $dark_4: #241f31;
$dark_5: #000000; $dark_5: #000000;

10
gnome-shell-sass/widgets/_a11y.scss
View file

@ -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: lighten(transparentize($selected_bg_color, 0.7), 30%); background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 30%);
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%); box-shadow: 0 0 2px 2px st-lighten(-st-accent-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: $selected_bg_color; -pie-border-color: -st-accent-color;
-pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%); -pie-background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 40%);
} }
// Screen zoom/Magnifier // Screen zoom/Magnifier
.magnifier-zoom-region { .magnifier-zoom-region {
border: 2px solid $selected_bg_color; border: 2px solid -st-accent-color;
&.full-screen { border-width: 0; } &.full-screen { border-width: 0; }
} }

7
gnome-shell-sass/widgets/_app-grid.scss
View file

@ -47,12 +47,7 @@ $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 {

7
gnome-shell-sass/widgets/_base.scss
View file

@ -3,7 +3,7 @@
color: $link_color; color: $link_color;
&:hover { &:hover {
color: lighten($link_color, 10%); color: st-lighten($link_color, 10%);
} }
} }
@ -18,10 +18,5 @@
@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;
} }
} }

9
gnome-shell-sass/widgets/_calendar.scss
View file

@ -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: $selected_fg_color !important; color: -st-accent-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,10 +268,9 @@
spacing-columns: $base_padding * 2; spacing-columns: $base_padding * 2;
.weather-forecast-time { .weather-forecast-time {
@extend %numeric; @extend %smaller;
@include fontsize(10pt); padding-top: $base_padding;
padding-top: 0.2em; padding-bottom: $base_padding;
padding-bottom: 0.4em;
} }
.weather-forecast-icon { .weather-forecast-icon {
icon-size: $large_scalable_icon_size; icon-size: $large_scalable_icon_size;

53
gnome-shell-sass/widgets/_check-box.scss
View file

@ -1,18 +1,49 @@
/* 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 {
width: $check_width; border-radius: 7px;
height: $check_height; padding: 2px;
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"); }
} }

2
gnome-shell-sass/widgets/_corner-ripple.scss
View file

@ -3,7 +3,7 @@
$ripple_size: 50px; $ripple_size: 50px;
.ripple-box { .ripple-box {
background-color: rgba(0,0,0,0); background-color: rgba(255,255,255,0.2);
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2); box-shadow: 0 0 2px 2px rgba(255,255,255,0.2);
// plus + 2px for the border (box-shadow) // plus + 2px for the border (box-shadow)
width: $ripple_size + 2px; width: $ripple_size + 2px;

10
gnome-shell-sass/widgets/_dash.scss
View file

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

14
gnome-shell-sass/widgets/_dialogs.scss
View file

@ -6,23 +6,25 @@
.modal-dialog { .modal-dialog {
background-color: $bg_color; background-color: $bg_color;
border-radius: $modal_radius; border-radius: $alert_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 %bubble_button; @extend %dialog_button;
} }
} }
/* End Session Dialog */ /* End Session Dialog */
.end-session-dialog { .end-session-dialog {
width: 30em; width: 24em;
.end-session-dialog-battery-warning, .end-session-dialog-battery-warning,
.dialog-list-title { .dialog-list-title {
@ -145,8 +147,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: $selected_bg_color; background-color: -st-accent-color;
color: $selected_fg_color; color: -st-accent-fg-color;
} }
} }

2
gnome-shell-sass/widgets/_ibus-popup.scss
View file

@ -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: $selected_bg_color; color: $selected_fg_color; } &:selected { background-color: -st-accent-color; color: -st-accent-fg-color; }
&:hover { background-color: $hover_bg_color; color: $hover_fg_color; } &:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
} }

16
gnome-shell-sass/widgets/_keyboard.scss
View file

@ -63,17 +63,17 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// keys that may be latched: ctrl/alt/shift // keys that may be latched: ctrl/alt/shift
&:latched { &:latched {
border-color: lighten($selected_bg_color, 5%); border-color: st-lighten(-st-accent-color, 5%);
background-color: $selected_bg_color; background-color: -st-accent-color;
} }
} }
// enter key is suggested-action // enter key is suggested-action
&.enter-key { &.enter-key {
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color);
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);} &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color);}
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);} &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color);}
&:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);} &:checked { @include button(checked, $c:-st-accent-color, $tc:-st-accent-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: lighten($selected_bg_color, 5%); border-color: st-lighten(-st-accent-color, 5%);
background-color: $selected_bg_color; background-color: -st-accent-color;
} }
} }

22
gnome-shell-sass/widgets/_login-lock.scss
View file

@ -80,6 +80,11 @@ $_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;
@ -123,8 +128,8 @@ $_gdm_dialog_width: 25em;
color: darken($_gdm_fg,30%); color: darken($_gdm_fg,30%);
&:focus, &:selected { &:focus, &:selected {
background-color: $selected_bg_color; background-color: -st-accent-color;
color: $selected_fg_color; color: -st-accent-fg-color;
} }
} }
@ -170,9 +175,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: $selected_bg_color; border-color: -st-accent-color;
StIcon { StIcon {
background-color: transparentize($selected_bg_color, .7); background-color: st-transparentize(-st-accent-color, .7);
} }
} }
} }
@ -212,7 +217,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: 200; font-weight: 800;
} }
.unlock-dialog-clock-date { .unlock-dialog-clock-date {
@ -233,7 +238,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: transparentize($selected_bg_color,0.5); } &:active { background-color: st-transparentize(-st-accent-color,0.5); }
} }
} }
@ -313,7 +318,8 @@ $_gdm_dialog_width: 25em;
spacing: $base_padding * 4; spacing: $base_padding * 4;
.user-widget-label { .user-widget-label {
@extend %title_1; font-weight: 400;
@include fontsize(20pt);
text-align: center; text-align: center;
margin-bottom: .75em; margin-bottom: .75em;
} }
@ -322,7 +328,7 @@ $_gdm_dialog_width: 25em;
icon-size: $base_icon_size * 10; icon-size: $base_icon_size * 10;
& StIcon { & StIcon {
padding: $base_padding * 4; padding: $base_padding * 5;
} }
} }
} }

252
gnome-shell-sass/widgets/_looking-glass.scss
View file

@ -1,5 +1,35 @@
/* 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 {
@ -40,92 +70,166 @@
} }
.notebook-tab { .notebook-tab {
@extend %osd_button; @extend %osd_button_flat;
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;
&:hover { color: lighten($osd_fg_color, 20%); } border-radius: $modal_radius;
&:active { color: darken($osd_fg_color, 20%); } border: 1px solid $osd_borders_color;
padding: $base_padding * 2;
@if $contrast == 'high' {
border-color: $hc_inset_color;
}
.lg-obj-inspector-title {
@extend %heading;
spacing: $base_margin;
}
.lg-obj-inspector-close-button,
.lg-obj-inspector-button {
@extend %osd_button;
padding: $base_padding $base_padding * 2;
}
.lg-obj-inspector-close-button {
margin: $base_margin;
padding: $base_padding;
border-radius: $forced_circular_radius;
> StIcon {
icon-size: $base_icon_size;
}
}
} }
.lg-debug-flags-header {
padding-top: 2 * $base_padding; // Evaluator
#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%);
}
}
}
}
} }

54
gnome-shell-sass/widgets/_message-list.scss
View file

@ -56,7 +56,7 @@
border-style: solid; border-style: solid;
&:focus { &:focus {
border-color: transparentize($selected_bg_color, 0.4); border-color: st-transparentize(-st-accent-color, 0.4);
} }
} }
} }
@ -64,21 +64,19 @@
// message bubbles // message bubbles
.message { .message {
@extend %card; @extend %card;
padding: 0; padding: $base_padding;
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 {
@ -113,17 +111,14 @@
.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: 6px; padding: $base_padding;
&:ltr { margin-right: $base_padding; } &:ltr { margin-right: $base_padding; }
&:rtl { margin-left: $base_padding; } &:rtl { margin-left: $base_padding; }
} }
@ -132,7 +127,6 @@
// 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;
@ -143,12 +137,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; // is circular border-radius: $forced_circular_radius;
background-color: transparentize($fg_color, 0.8); background-color: transparentize($fg_color, .93);
icon-size: $base_icon_size; icon-size: $scalable_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;
} }
@ -169,6 +163,26 @@
} }
} }
} }
// 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

8
gnome-shell-sass/widgets/_misc.scss
View file

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

2
gnome-shell-sass/widgets/_notifications.scss
View file

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

4
gnome-shell-sass/widgets/_osd.scss
View file

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

6
gnome-shell-sass/widgets/_overview.scss
View file

@ -1,13 +1,9 @@
/* OVERVIEW */ /* OVERVIEW */
.controls-manager, .secondary-monitor-workspaces { .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;
}

38
gnome-shell-sass/widgets/_panel.scss
View file

@ -1,8 +1,8 @@
/* Top Bar */ /* Top Bar */
// a.k.a. the panel // a.k.a. the panel
$privacy_indicator_color: if($variant == 'light', $orange_4, $red_3); $privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3);
$recording_indicator_color: $red_3; $recording_indicator_color: $red_4;
$transparent_panel_fg_color: $light_1; // always white for transparent lock screens $transparent_panel_fg_color: $light_1; // always white for transparent lock screens
$system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview $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 menus
.panel-button { .panel-button {
@include panel_button(); @include panel_button();
-natural-hpadding: 6px; -natural-hpadding: $base_padding * 2;
-minimum-hpadding: 4px; -minimum-hpadding: $base_padding;
// status area icons // status area icons
.system-status-icon { .system-status-icon {
icon-size: $scalable_icon_size; icon-size: $scalable_icon_size;
padding: 0; padding: 0 $base_padding;
margin: 0 $base_margin; 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 // reduce margin between icons in combined menu
.panel-status-menu-box, .panel-status-menu-box,
.panel-status-indicators-box { .panel-status-indicators-box {
spacing: 0px; spacing: $base_margin;
> .system-status-icon { > .system-status-icon {
padding: 0; padding: 0;
@ -47,9 +47,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
} }
&#panelActivities { &#panelActivities {
-natural-hpadding: 10px;
-minimum-hpadding: 8px;
& StBoxLayout { & StBoxLayout {
padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion
spacing: 5px; spacing: 5px;
@ -72,10 +69,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
StIcon { StIcon {
icon-size: $scalable_icon_size; icon-size: $scalable_icon_size;
&:first-child {
margin-left: 3px;
}
} }
} }
@ -93,10 +86,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// we want to exclude the do-not-disturb indicator from the background // we want to exclude the do-not-disturb indicator from the background
// see _drawing.scss for override details // see _drawing.scss for override details
@include panel_button($highlighted_child: true, $child_class: '.clock'); @include panel_button($highlighted_child: true, $child_class: '.clock');
-natural-hpadding: 0px;
-minimum-hpadding: 0px;
padding-left: 0px;
padding-right: 0px;
.clock { .clock {
// the highlighted child // the highlighted child
@ -162,14 +151,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// spacing between power icon and (optional) percentage label // spacing between power icon and (optional) percentage label
.power-status.panel-status-indicators-box { .power-status.panel-status-indicators-box {
padding-left: 0px;
spacing: 0; spacing: 0;
@if $laptop {
margin-bottom: 2px;
} @else {
margin-left: 0px;
}
} }
// important privacy related indicators // important privacy related indicators
@ -192,11 +174,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
.clock-display-box { .clock-display-box {
spacing: 2px; spacing: 2px;
.clock { .clock {
padding-left: 8px; padding-left: $scaled_padding * 2;
padding-right: 8px; padding-right: $scaled_padding * 2;
}
StIcon:last-child {
margin-right: 3px;
} }
} }

10
gnome-shell-sass/widgets/_popovers.scss
View file

@ -1,10 +1,11 @@
/* 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: lighten($menu_bg_color, 7%); $submenu_bg_color: if($variant == 'light', darken($menu_bg_color, 17%), lighten($menu_bg_color, 13%));
// the popover itself // the popover itself
.popup-menu-boxpointer { .popup-menu-boxpointer {
@ -33,7 +34,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// menu items // menu items
.popup-menu-item { .popup-menu-item {
@include menuitem($bg:$menu_bg_color); @include menuitem($bg:$menuitem_bg_color);
border-radius: $menuitem_border_radius; border-radius: $menuitem_border_radius;
@ -75,6 +76,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
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;
@ -83,8 +85,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// submenu specific styles // submenu specific styles
.popup-menu-item { .popup-menu-item {
border-radius: 0; border-radius: 0;
@include menuitem($bg:$submenu_bg_color);
border-top-width:0; border-top-width:0;
@include menuitem($bg:$submenu_bg_color);
&:last-child { &:last-child {
border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius; border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius;

6
gnome-shell-sass/widgets/_quick-settings.scss
View file

@ -64,7 +64,7 @@
&:checked { &:checked {
@extend %default_button; @extend %default_button;
border-color: $selected_borders_color; border-color: $accent_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: $selected_bg_color; background-color: -st-accent-color;
color: $selected_fg_color; color: -st-accent-fg-color;
} }
// draw hc outline // draw hc outline

10
gnome-shell-sass/widgets/_screenshot.scss
View file

@ -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: darken($selected_bg_color, 15%); border-color: st-darken(-st-accent-color, 15%);
} }
} }
&:checked { &:checked {
.screenshot-ui-window-selector-window-border { .screenshot-ui-window-selector-window-border {
border-color: $selected_bg_color; border-color: -st-accent-color;
background-color: transparentize($selected_bg_color, 0.8); background-color: st-transparentize(-st-accent-color, 0.8);
} }
.screenshot-ui-window-selector-check { .screenshot-ui-window-selector-check {
color: $selected_fg_color; color: -st-accent-fg-color;
background-color: $selected_bg_color; background-color: -st-accent-color;
} }
} }
} }

1
gnome-shell-sass/widgets/_search-results.scss
View file

@ -48,7 +48,6 @@
.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

16
gnome-shell-sass/widgets/_slider.scss
View file

@ -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.8); //background of the trough -barlevel-background-color: transparentize($fg_color, 0.9);
-barlevel-border-width: 2px;
-barlevel-border-color: transparent; // trough border color
// fill style // fill style
-barlevel-active-background-color: $selected_bg_color; -barlevel-active-background-color: -st-accent-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);
}
} }

2
gnome-shell-sass/widgets/_switcher-popup.scss
View file

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

53
gnome-shell-sass/widgets/_switches.scss
View file

@ -1,18 +1,53 @@
/* 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 {
color: $fg_color;
height: $switch_height;
width: $switch_width; width: $switch_width;
background-size: contain; border-radius: $forced_circular_radius;
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg")); transition-duration: 100ms;
&:checked { color: $fg_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"));
@if $contrast == 'high' {
background: transparentize(if($variant == 'light', black, white), .7);
&:hover {
background: transparentize(if($variant == 'light', black, white), .6);
}
} @else {
background: transparentize(if($variant == 'light', black, white), .85);
&:hover {
background: transparentize(if($variant == 'light', black, white), .8);
}
} }
& StIcon {icon-size: $base_icon_size;} 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 {
background: -st-accent-color;
color: -st-accent-fg-color;
&:hover {
background-color: st-lighten(-st-accent-color, 5%);
color: st-lighten(-st-accent-fg-color, 5%);
}
.handle {
background: white;
}
}
} }

13
gnome-shell-sass/widgets/_window-picker.scss
View file

@ -7,6 +7,19 @@ $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;

2
gnome-shell-sass/widgets/_workspace-switcher.scss
View file

@ -1,6 +1,6 @@
/* Workspace Switcher */ /* Workspace Switcher */
$ws_indicator_height: 48px; $ws_indicator_height: 32px;
$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;

2
gnome-shell-sass/widgets/_workspace-thumbnails.scss
View file

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

1
toggle-off-light.svg
View file

@ -1 +0,0 @@
<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>
Side by side

Before

Width:  |  Height:  |  Size: 539 B

1
toggle-off.svg
View file

@ -1 +0,0 @@
<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>
Side by side

Before

Width:  |  Height:  |  Size: 578 B

1
toggle-on-light.svg
View file

@ -1 +0,0 @@
<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>
Side by side

Before

Width:  |  Height:  |  Size: 511 B

1
toggle-on.svg
View file

@ -1 +0,0 @@
<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>
Side by side

Before

Width:  |  Height:  |  Size: 533 B