Compare commits

...

No commits in common. "master" and "main" have entirely different histories.
master ... main

96 changed files with 2846 additions and 10065 deletions

View File

@ -1,16 +1,10 @@
<h1 align="center"> WhiteSur GTK Theme </h1> <h1 align="center"> WhiteSur GTK Theme </h1>
<p align="center"> <img src="pictures/macbook.png"/> </p> <p align="center"> <img src="imagenes/macbook.png"/> </p>
<br> <br>
<p align="center"> <b> A macOS BigSur-like theme for your GTK apps </b> </p> <p align="center"> <b> A macOS BigSur-like theme for your GTK apps </b> </p>
<br> <br>
## Donate
If you like my project, you can buy me a coffee:
<span class="paypal"><a href="https://www.paypal.me/vinceliuice" title="Donate to this project using Paypal"><img src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png" alt="PayPal donate button" /></a></span>
# Installation is easy! # Installation is easy!
<details> <summary> Required dependencies <b>(click to open)</b> </summary> <details> <summary> Required dependencies <b>(click to open)</b> </summary>
@ -42,7 +36,7 @@ Don't worry, WhiteSur installer already provides all of those dependencies.
### Installing from source ### Installing from source
1. Run `git clone https://github.com/vinceliuice/WhiteSur-gtk-theme.git --depth=1` 1. Run `git clone https://gitea.soloconlinux.org.es/luisgulo/WhiteSur-gtk-theme.git --depth=1`
2. Run `./install.sh` to install the default WhiteSur GTK theme pack. 2. Run `./install.sh` to install the default WhiteSur GTK theme pack.
@ -177,7 +171,7 @@ sudo flatpak override --filesystem=xdg-config/gtk-4.0
``` ```
### <p align="center"> <b> Change theme color and accent </b> </p> ### <p align="center"> <b> Change theme color and accent </b> </p>
<p align="center"> <img src="pictures/colors-themes.png"/> </p> <p align="center"> <img src="imagenes/colors-themes.png"/> </p>
#### Install theme color #### Install theme color
Parameter: `--color` `-c` (repeatable) Parameter: `--color` `-c` (repeatable)
@ -201,7 +195,7 @@ Example:
``` ```
### <p align="center"> <b> Change Nautilus style </b> </p> ### <p align="center"> <b> Change Nautilus style </b> </p>
<p align="center"> <img src="pictures/nautilus.png"/> </p> <p align="center"> <img src="imagenes/nautilus.png"/> </p>
Parameter: `--nautilus-style` `-N` Parameter: `--nautilus-style` `-N`
@ -283,7 +277,7 @@ Usage: `./tweaks.sh [OPTIONS...]`
### <p align="center"> <b> Install and edit Firefox theme </b> </p> ### <p align="center"> <b> Install and edit Firefox theme </b> </p>
<p align="center"> <a href="src/other/firefox"> <p align="center"> <a href="src/other/firefox">
<img src="pictures/firefox.svg"/> <img src="imagenes/firefox.svg"/>
</a> </p> </a> </p>
#### [Install Firefox theme](src/other/firefox) #### [Install Firefox theme](src/other/firefox)
@ -303,7 +297,7 @@ Example:
``` ```
### <p align="center"> <b> Install and customize GDM theme </b> </p> ### <p align="center"> <b> Install and customize GDM theme </b> </p>
<p align="center"> <img src="pictures/gdm.png"/> </p> <p align="center"> <img src="imagenes/gdm.png"/> </p>
#### Install GDM theme #### Install GDM theme
Parameter: `--gdm` `-g` (requires to be run as root) Parameter: `--gdm` `-g` (requires to be run as root)
@ -348,22 +342,22 @@ like changing theme color (dark and light variant) and accent, GNOME Shell
## Other recommended stuff ## Other recommended stuff
### WhiteSur Icon Theme ### WhiteSur Icon Theme
<p align="center"> <a href="https://github.com/vinceliuice/WhiteSur-icon-theme"> <p align="center"> <a href="https://gitea.soloconlinux.org.es/luisgulo/WhiteSur-icon-theme">
<img src="pictures/icon-theme.png"/> <img src="imagenes/icon-theme.png"/>
</a> </p> </a> </p>
<br> <br>
<p align="center"> <a href="https://github.com/vinceliuice/WhiteSur-icon-theme"> <p align="center"> <a href="https://gitea.soloconlinux.org.es/luisgulo/WhiteSur-icon-theme">
<img src="pictures/download-button.svg"/> <img src="imagenes/download-button.svg"/>
</a> </p> </a> </p>
<br> <br>
### WhiteSur Wallpapers ### WhiteSur Wallpapers
<p align="center"> <a href="https://github.com/vinceliuice/WhiteSur-wallpapers"> <p align="center"> <a href="https://gitea.soloconlinux.org.es/luisgulo/WhiteSur-wallpapers">
<img class="image" src="pictures/wallpaper.gif"/> <img class="image" src="imagenes/wallpaper.gif"/>
</a> </p> </a> </p>
<br> <br>
<p align="center"> <a href="https://github.com/vinceliuice/WhiteSur-wallpapers"> <p align="center"> <a href="https://gitea.soloconlinux.org.es/luisgulo/WhiteSur-wallpapers">
<img src="pictures/download-button.svg"/> <img src="imagenes/download-button.svg"/>
</a> </p> </a> </p>
<br> <br>

View File

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

View File

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -1377,4 +1377,4 @@
id="tspan6079" id="tspan6079"
x="210.33585" x="210.33585"
y="277.48306" y="277.48306"
style="fill:#ffffff;stroke-width:0.172719">Alt style</tspan></text></g></g></svg> style="fill:#ffffff;stroke-width:0.172719">Flat style</tspan></text></g></g></svg>

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 79 KiB

View File

Before

Width:  |  Height:  |  Size: 516 KiB

After

Width:  |  Height:  |  Size: 516 KiB

View File

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 91 KiB

View File

Before

Width:  |  Height:  |  Size: 576 KiB

After

Width:  |  Height:  |  Size: 576 KiB

View File

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

View File

@ -39,6 +39,7 @@ usage() {
helpify "-l, --libadwaita" "" "Install theme into gtk4.0 config for libadwaita" "Default is dark version" helpify "-l, --libadwaita" "" "Install theme into gtk4.0 config for libadwaita" "Default is dark version"
helpify "-HD, --highdefinition" "" "Set to High Definition size" "Default is laptop size" helpify "-HD, --highdefinition" "" "Set to High Definition size" "Default is laptop size"
helpify "--normal, --normalshowapps" "" "Set gnome-shell show apps button style to normal" "Default is BigSur" helpify "--normal, --normalshowapps" "" "Set gnome-shell show apps button style to normal" "Default is BigSur"
helpify "--default, --defaultactivities" "" "Set gnome-shell panel activities button style to system default" "Default is Apple icon"
helpify "--round, --roundedmaxwindow" "" "Set maximized window to rounded" "Default is square" helpify "--round, --roundedmaxwindow" "" "Set maximized window to rounded" "Default is square"
helpify "--right, --rightplacement" "" "Set Nautilus title button placement to right" "Default is left" helpify "--right, --rightplacement" "" "Set Nautilus title button placement to right" "Default is left"
helpify "--black, --blackfont" "" "Set panel font color to black" "Default is white" helpify "--black, --blackfont" "" "Set panel font color to black" "Default is white"
@ -78,6 +79,8 @@ while [[ $# -gt 0 ]]; do
interactive='true'; shift ;; interactive='true'; shift ;;
--normal|--normalshowapps) --normal|--normalshowapps)
showapps_normal="true"; shift ;; showapps_normal="true"; shift ;;
--default|--defaultactivities)
default_activities="true"; shift ;;
--right|--rightplacement) --right|--rightplacement)
right_placement="true"; shift ;; right_placement="true"; shift ;;
--round|--roundedmaxwindow) --round|--roundedmaxwindow)

View File

@ -19,7 +19,7 @@ install() {
compress() { compress() {
for color in "${C_VARIANTS[@]}"; do for color in "${C_VARIANTS[@]}"; do
for solid in "${S_VARIANTS[@]}"; do for solid in "${S_VARIANTS[@]}"; do
rm -rf ${RELEASE_DIR}/${THEME_NAME}${color}${solid}${RELEASE_VERSION}.tar.xz rm -rf ${RELEASE_DIR}/${THEME_NAME}${color}${solid}.tar.xz
done done
done done
@ -27,7 +27,7 @@ compress() {
for color in "${C_VARIANTS[@]}"; do for color in "${C_VARIANTS[@]}"; do
for solid in "${S_VARIANTS[@]}"; do for solid in "${S_VARIANTS[@]}"; do
tar -Jcf ${RELEASE_DIR}/${THEME_NAME}${color}${solid}${RELEASE_VERSION}.tar.xz ${THEME_NAME}${color}${solid} tar -Jcf ${RELEASE_DIR}/${THEME_NAME}${color}${solid}.tar.xz ${THEME_NAME}${color}${solid}
done done
done done
} }
@ -37,8 +37,8 @@ compress() {
#install && compress #install && compress
#prompt -s "Compress Gnome${RELEASE_VERSION} version finished!"; echo #prompt -s "Compress Gnome${RELEASE_VERSION} version finished!"; echo
GNOME_VERSION="44-0" GNOME_VERSION="46-0"
RELEASE_VERSION="-44-0" RELEASE_VERSION="-last"
install && compress install && compress
prompt -s "Compress Gnome${RELEASE_VERSION} version finished!"; echo prompt -s "Compress Gnome${RELEASE_VERSION} version finished!"; echo

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 404 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 6.3 MiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 2.9 MiB

View File

@ -1,854 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="1680"
height="1032"
viewBox="0 0 1680 1032"
version="1.1"
id="svg8"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="nautilus.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="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient2199">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop2195" />
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="1"
id="stop2197" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient2191">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop2187" />
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="1"
id="stop2189" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient1092">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop1088" />
<stop
style="stop-color:#f0f0f0;stop-opacity:1;"
offset="1"
id="stop1090" />
</linearGradient>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter1168"
x="-0.079559895"
width="1.1591198"
y="-0.168085"
height="1.33617">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="4.0025233"
id="feGaussianBlur1170" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1092"
id="linearGradient1094"
x1="817.63928"
y1="35.904663"
x2="758.03125"
y2="35.904663"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.2405688,0,0,1.2405688,-654.50446,111.56196)" />
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath2183">
<path
id="path2185"
style="opacity:0.95;fill:#f0f0f0;fill-opacity:1;fill-rule:evenodd;stroke-width:0.426552;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;stop-color:#000000"
d="m 753.53325,18.838851 c -6.59466,0 -11.90389,5.309225 -11.90389,11.903869 v 70.55057 c 0,6.59464 5.30923,11.90387 11.90389,11.90387 H 884.0064 c 6.59464,0 11.90345,-5.30923 11.90345,-11.90387 V 30.74272 c 0,-6.594644 -5.30881,-11.903869 -11.90345,-11.903869 z m 25.52894,13.706719 h 96.53397 c 1.75895,0 3.17498,1.416028 3.17498,3.17498 v 4.233438 0.404893 0.0025 46.157553 c -2.2e-4,1.758943 -1.41603,3.17498 -3.17498,3.17498 h -96.53397 -17.85602 c -1.75891,0 -3.17498,-1.416037 -3.17498,-3.17498 V 40.218915 39.954406 35.720962 c 0,-1.758944 1.41609,-3.174971 3.17498,-3.174971 z" />
</clipPath>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2191"
id="linearGradient2193"
x1="-373.27124"
y1="-161.61761"
x2="-285.88553"
y2="-161.61761"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2199"
id="linearGradient2201"
x1="200.66541"
y1="-305.63361"
x2="130.38258"
y2="-305.63361"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="761.42857"
inkscape:cy="378.57143"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:snap-bbox="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-nodes="true"
inkscape:window-width="1920"
inkscape:window-height="1012"
inkscape:window-x="0"
inkscape:window-y="32"
inkscape:window-maximized="1"
units="px"
inkscape:snap-global="true"
inkscape:showpageshadow="2"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1">
<inkscape:grid
type="xygrid"
id="grid1005"
originx="0"
originy="0" />
</sodipodi:namedview>
<metadata
id="metadata5">
<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="图层 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g2988"
transform="matrix(3.7795276,0,0,3.7795276,-100.81369,0)">
<g
transform="matrix(0.99998739,0,0,0.99998739,-76.997739,-517.14425)"
fill="#b3b3b3"
stroke-width="0.085214"
aria-label="Button"
id="g1186" />
<rect
style="fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:0.354783;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
id="rect12679"
width="444.5"
height="273.04999"
x="26.673622"
y="0"
rx="14.767365"
ry="14.767365" />
<path
id="path1163"
style="opacity:0.35;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.130969;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill;filter:url(#filter1168)"
d="m 612.683,37.754373 c -1.75895,0 -3.175,1.41605 -3.175,3.175 v 4.23333 46.56666 c 0,1.75895 1.41605,3.175 3.175,3.175 h 17.85577 96.53416 c 1.75895,0 3.17476,-1.41605 3.175,-3.175 v -46.56666 -4.23333 c 0,-1.75895 -1.41605,-3.175 -3.175,-3.175 h -96.53416 z"
transform="matrix(1.2405688,0,0,1.2405688,-693.96085,-19.207893)" />
<path
id="path13402"
style="opacity:0.15;fill:#f5f5f5;fill-opacity:1;stroke:#000000;stroke-width:0.656468;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
d="m 66.114725,21.14318 c -2.182098,0 -3.938806,1.756708 -3.938806,3.938806 v 5.251737 57.769158 c 0,2.182099 1.756708,3.938806 3.938806,3.938806 H 208.00803 c 2.1821,0 3.93881,-1.756707 3.93881,-3.938806 V 30.333723 25.081986 c 0,-2.182098 -1.75671,-3.938806 -3.93881,-3.938806 z"
sodipodi:nodetypes="sscsssscsss" />
<path
id="path1829"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.162476;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
d="M 88.266037,21.143179 V 92.041685 H 208.02312 c 2.1821,0 3.93852,-1.756708 3.9388,-3.938806 V 30.333726 25.081984 c 0,-2.182098 -1.7567,-3.938805 -3.9388,-3.938805 z"
sodipodi:nodetypes="ccsscssc" />
<path
id="path13729"
style="opacity:0.9;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:0.162476;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
d="m 66.114738,21.143179 c -2.182099,0 -3.938806,1.756707 -3.938806,3.938805 v 5.251742 57.769153 c 0,2.182098 1.756707,3.938806 3.938806,3.938806 H 88.266037 V 21.143179 Z" />
<rect
x="-71.033585"
y="23.112591"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect1901"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,72.346512,-315.74747)"
id="g1909">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#fe6254"
fill-rule="evenodd"
id="path1903"
style="fill:#cb4e43;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#fe6254"
fill-rule="evenodd"
id="path1905" />
<path
d="m 9.1716,1037.5 c -0.39174,0.3917 -0.39174,1.0224 0,1.4142 l 1.4142,1.4142 -1.4142,1.4142 c -0.39174,0.3918 -0.39174,1.0225 0,1.4142 0.39174,0.3918 1.0225,0.3918 1.4142,0 l 1.4142,-1.4142 1.4142,1.4142 c 0.39174,0.3918 1.0225,0.3918 1.4142,0 0.39174,-0.3917 0.39174,-1.0224 0,-1.4142 l -1.4142,-1.4142 1.4142,-1.4142 c 0.39174,-0.3918 0.39174,-1.0225 0,-1.4142 -0.39174,-0.3918 -1.0225,-0.3918 -1.4142,0 L 12,1038.9142 10.5858,1037.5 c -0.39174,-0.3918 -1.0225,-0.3918 -1.4142,0 z"
enable-background="new"
fill="#000000"
opacity="0.5"
id="path1907" />
</g>
<rect
x="-78.259308"
y="23.112591"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect1915"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,79.572242,-315.74747)"
id="g1923">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#28d33f"
fill-rule="evenodd"
id="path1917"
style="fill:#20a932;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#28d33f"
fill-rule="evenodd"
id="path1919" />
<path
d="m 13.5858,1037.4 -4.5859,4.5859 V 1038.4 c 0,-0.4155 0.5845,-1 1,-1 z m 1.4141,1.4141 v 3.5859 c 0,0.4155 -0.5845,1 -1,1 H 10.414 Z"
fill="#000000"
opacity="0.5"
id="path1921" />
</g>
<rect
x="-85.48011"
y="23.112591"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect1929"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,86.792998,-315.74747)"
id="g1937">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#fdc92d"
fill-rule="evenodd"
id="path1931"
style="fill:#caa124;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#fdc92d"
fill-rule="evenodd"
id="path1933" />
<rect
x="8"
y="1039.4"
width="8"
height="2"
ry="1"
fill="#000000"
opacity="0.5"
id="rect1935" />
</g>
<rect
style="opacity:0.15;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.10537;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
id="rect13698"
width="70.898483"
height="0.32823381"
x="21.143171"
y="-88.594254"
rx="0"
ry="0"
transform="rotate(90)" />
<rect
style="opacity:0.35;fill:#000000;stroke:none;stroke-width:0.149855;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
id="rect1437"
width="49.235073"
height="10.503482"
x="112.45135"
y="100.45855"
rx="5.2517409"
ry="5.2517409" />
<text
xml:space="preserve"
style="font-size:6.90876px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;fill:#ffffff;stroke-width:0.172719"
x="124.19079"
y="108.2859"
id="text1443"><tspan
sodipodi:role="line"
id="tspan1441"
x="124.19079"
y="108.2859"
style="fill:#ffffff;stroke-width:0.172719">Default</tspan></text>
<path
id="path1250"
style="opacity:0.35;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.130969;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill;filter:url(#filter1168)"
d="m 761.20611,37.771856 c -1.75895,0 -3.175,1.41605 -3.175,3.175 v 4.23333 46.56666 c 0,1.75895 1.41605,3.175 3.175,3.175 h 17.85577 96.53416 c 1.75895,0 3.17476,-1.41605 3.175,-3.175 v -46.56666 -4.23333 c 0,-1.75895 -1.41605,-3.175 -3.175,-3.175 h -96.53416 z"
transform="matrix(1.2405688,0,0,1.2405688,-654.50446,-19.229579)" />
<path
id="path1252"
style="opacity:0.15;fill:#f5f5f5;fill-opacity:1;stroke:#000000;stroke-width:0.656468;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
d="m 289.82425,21.143183 c -2.1821,0 -3.9388,1.756708 -3.9388,3.938806 v 5.251737 57.769158 c 0,2.182099 1.7567,3.938806 3.9388,3.938806 h 141.89331 c 2.1821,0 3.9388,-1.756707 3.9388,-3.938806 V 30.333726 25.081989 c 0,-2.182098 -1.7567,-3.938806 -3.9388,-3.938806 z"
sodipodi:nodetypes="sscsssscsss" />
<path
id="path1254"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.162476;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
d="m 289.82424,21.143181 c -2.1821,0 -3.93881,1.756707 -3.93881,3.938806 v 5.251741 0.328234 h 26.0901 v 61.379724 h 119.75725 c 2.1821,0 3.93855,-1.756707 3.93881,-3.938806 V 30.333728 25.081987 c 0,-2.182099 -1.75671,-3.938806 -3.93881,-3.938806 H 311.97553 Z" />
<path
id="path1256"
style="opacity:0.9;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:0.162476;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
d="M 285.88543,30.661962 V 88.10288 c 0,2.182099 1.75671,3.938806 3.93881,3.938806 h 22.15129 V 30.661962 Z" />
<rect
x="-294.74313"
y="23.112593"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect1258"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,296.05604,-315.74746)"
id="g1266">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#fe6254"
fill-rule="evenodd"
id="path1260"
style="fill:#cb4e43;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#fe6254"
fill-rule="evenodd"
id="path1262" />
<path
d="m 9.1716,1037.5 c -0.39174,0.3917 -0.39174,1.0224 0,1.4142 l 1.4142,1.4142 -1.4142,1.4142 c -0.39174,0.3918 -0.39174,1.0225 0,1.4142 0.39174,0.3918 1.0225,0.3918 1.4142,0 l 1.4142,-1.4142 1.4142,1.4142 c 0.39174,0.3918 1.0225,0.3918 1.4142,0 0.39174,-0.3917 0.39174,-1.0224 0,-1.4142 l -1.4142,-1.4142 1.4142,-1.4142 c 0.39174,-0.3918 0.39174,-1.0225 0,-1.4142 -0.39174,-0.3918 -1.0225,-0.3918 -1.4142,0 L 12,1038.9142 10.5858,1037.5 c -0.39174,-0.3918 -1.0225,-0.3918 -1.4142,0 z"
enable-background="new"
fill="#000000"
opacity="0.5"
id="path1264" />
</g>
<rect
x="-301.96887"
y="23.112593"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect1268"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,303.28177,-315.74746)"
id="g1276">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#28d33f"
fill-rule="evenodd"
id="path1270"
style="fill:#20a932;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#28d33f"
fill-rule="evenodd"
id="path1272" />
<path
d="m 13.5858,1037.4 -4.5859,4.5859 V 1038.4 c 0,-0.4155 0.5845,-1 1,-1 z m 1.4141,1.4141 v 3.5859 c 0,0.4155 -0.5845,1 -1,1 H 10.414 Z"
fill="#000000"
opacity="0.5"
id="path1274" />
</g>
<rect
x="-309.18967"
y="23.112593"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect1278"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,310.50252,-315.74746)"
id="g1286">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#fdc92d"
fill-rule="evenodd"
id="path1280"
style="fill:#caa124;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#fdc92d"
fill-rule="evenodd"
id="path1282" />
<rect
x="8"
y="1039.4"
width="8"
height="2"
ry="1"
fill="#000000"
opacity="0.5"
id="rect1284" />
</g>
<rect
style="opacity:0.15;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.06017;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
id="rect1288"
width="149.78596"
height="0.32823381"
x="-435.67151"
y="-30.990198"
rx="0"
ry="0"
transform="scale(-1)" />
<rect
style="opacity:0.35;fill:#000000;stroke:none;stroke-width:0.165899;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
id="rect1290"
width="60.342545"
height="10.503482"
x="330.60712"
y="100.45854"
rx="5.2517409"
ry="5.2517409" />
<text
xml:space="preserve"
style="font-size:6.90876px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;fill:#ffffff;stroke-width:0.172719"
x="338.90176"
y="107.61627"
id="text1294"><tspan
sodipodi:role="line"
id="tspan1292"
x="338.90176"
y="107.61627"
style="fill:#ffffff;stroke-width:0.172719">Mojave style</tspan></text>
<rect
style="opacity:0.15;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.95376;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
id="rect1313"
width="61.055111"
height="0.32823381"
x="30.984335"
y="-311.97775"
rx="0"
ry="0"
transform="rotate(90)" />
<path
id="rect1366"
style="opacity:0.35;fill:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
d="m 249.90834,51.520613 v 7.139088 h -17.72462 v 9.354658 h 17.72462 v 7.139089 L 265.66357,63.33703 Z" />
<path
id="path506"
style="opacity:0.35;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.130969;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill;filter:url(#filter1168)"
d="m 761.20611,37.771856 c -1.75895,0 -3.175,1.41605 -3.175,3.175 v 4.23333 46.56666 c 0,1.75895 1.41605,3.175 3.175,3.175 h 17.85577 96.53416 c 1.75895,0 3.17476,-1.41605 3.175,-3.175 v -46.56666 -4.23333 c 0,-1.75895 -1.41605,-3.175 -3.175,-3.175 h -96.53416 z"
transform="matrix(1.2405688,0,0,1.2405688,-654.50446,111.56196)"
clip-path="url(#clipPath2183)" />
<path
id="path458"
style="opacity:0.35;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.130969;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill;filter:url(#filter1168)"
d="m 612.683,37.754373 c -1.75895,0 -3.175,1.41605 -3.175,3.175 v 4.23333 46.56666 c 0,1.75895 1.41605,3.175 3.175,3.175 h 17.85577 96.53416 c 1.75895,0 3.17476,-1.41605 3.175,-3.175 v -46.56666 -4.23333 c 0,-1.75895 -1.41605,-3.175 -3.175,-3.175 h -96.53416 z"
transform="matrix(1.2405688,0,0,1.2405688,-693.96085,111.58365)" />
<path
id="path460"
style="opacity:0.15;fill:#f5f5f5;fill-opacity:1;stroke:#000000;stroke-width:0.656468;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
d="m 66.114725,151.93472 c -2.182098,0 -3.938806,1.75671 -3.938806,3.93881 v 5.25174 57.76915 c 0,2.1821 1.756708,3.93881 3.938806,3.93881 H 208.00803 c 2.1821,0 3.93881,-1.75671 3.93881,-3.93881 v -57.76915 -5.25174 c 0,-2.1821 -1.75671,-3.93881 -3.93881,-3.93881 z"
sodipodi:nodetypes="sscsssscsss" />
<path
id="path462"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.162476;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
d="m 88.266037,151.93472 v 70.89851 H 208.02312 c 2.1821,0 3.93852,-1.75671 3.9388,-3.93881 v -57.76915 -5.25174 c 0,-2.1821 -1.7567,-3.93881 -3.9388,-3.93881 z"
sodipodi:nodetypes="ccsscssc" />
<path
id="path464"
style="opacity:0.9;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:0.162476;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
d="m 66.114738,151.93472 c -2.182099,0 -3.938806,1.75671 -3.938806,3.93881 v 5.25174 57.76915 c 0,2.1821 1.756707,3.93881 3.938806,3.93881 h 22.151299 v -70.89851 z" />
<rect
x="-71.033585"
y="153.90413"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect466"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,72.346512,-184.95592)"
id="g474">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#fe6254"
fill-rule="evenodd"
id="path468"
style="fill:#cb4e43;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#fe6254"
fill-rule="evenodd"
id="path470" />
<path
d="m 9.1716,1037.5 c -0.39174,0.3917 -0.39174,1.0224 0,1.4142 l 1.4142,1.4142 -1.4142,1.4142 c -0.39174,0.3918 -0.39174,1.0225 0,1.4142 0.39174,0.3918 1.0225,0.3918 1.4142,0 l 1.4142,-1.4142 1.4142,1.4142 c 0.39174,0.3918 1.0225,0.3918 1.4142,0 0.39174,-0.3917 0.39174,-1.0224 0,-1.4142 l -1.4142,-1.4142 1.4142,-1.4142 c 0.39174,-0.3918 0.39174,-1.0225 0,-1.4142 -0.39174,-0.3918 -1.0225,-0.3918 -1.4142,0 L 12,1038.9142 10.5858,1037.5 c -0.39174,-0.3918 -1.0225,-0.3918 -1.4142,0 z"
enable-background="new"
fill="#000000"
opacity="0.5"
id="path472" />
</g>
<rect
x="-78.259308"
y="153.90413"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect476"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,79.572242,-184.95592)"
id="g484">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#28d33f"
fill-rule="evenodd"
id="path478"
style="fill:#20a932;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#28d33f"
fill-rule="evenodd"
id="path480" />
<path
d="m 13.5858,1037.4 -4.5859,4.5859 V 1038.4 c 0,-0.4155 0.5845,-1 1,-1 z m 1.4141,1.4141 v 3.5859 c 0,0.4155 -0.5845,1 -1,1 H 10.414 Z"
fill="#000000"
opacity="0.5"
id="path482" />
</g>
<rect
x="-85.48011"
y="153.90413"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect486"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,86.792998,-184.95592)"
id="g494">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#fdc92d"
fill-rule="evenodd"
id="path488"
style="fill:#caa124;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#fdc92d"
fill-rule="evenodd"
id="path490" />
<rect
x="8"
y="1039.4"
width="8"
height="2"
ry="1"
fill="#000000"
opacity="0.5"
id="rect492" />
</g>
<rect
style="opacity:0.15;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.10537;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
id="rect496"
width="70.898483"
height="0.32823381"
x="151.93471"
y="-88.594254"
rx="0"
ry="0"
transform="rotate(90)" />
<rect
style="opacity:0.35;fill:#000000;stroke:none;stroke-width:0.149855;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
id="rect498"
width="49.235073"
height="10.503482"
x="112.45135"
y="231.25009"
rx="5.2517409"
ry="5.2517409" />
<text
xml:space="preserve"
style="font-size:6.90876px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;fill:#ffffff;stroke-width:0.172719"
x="124.19079"
y="239.07744"
id="text502"><tspan
sodipodi:role="line"
id="tspan500"
x="124.19079"
y="239.07744"
style="fill:#ffffff;stroke-width:0.172719">Default</tspan></text>
<path
id="path508"
style="opacity:0.15;fill:#f5f5f5;fill-opacity:1;stroke:#000000;stroke-width:0.656468;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
d="m 289.82425,151.93472 c -2.1821,0 -3.9388,1.75671 -3.9388,3.93881 v 5.25174 57.76915 c 0,2.1821 1.7567,3.93881 3.9388,3.93881 h 141.89331 c 2.1821,0 3.9388,-1.75671 3.9388,-3.93881 v -57.76915 -5.25174 c 0,-2.1821 -1.7567,-3.93881 -3.9388,-3.93881 z"
sodipodi:nodetypes="sscsssscsss" />
<path
id="path397"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.162476;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
d="m 311.97579,161.63019 v 61.20299 h 119.75703 c 2.1821,0 3.93851,-1.75669 3.93877,-3.93878 v -57.26421 z" />
<path
id="path455"
style="opacity:0.95;fill:url(#linearGradient1094);fill-opacity:1;stroke:none;stroke-width:0.162476;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
d="m 289.82415,151.93767 c -2.18206,0 -3.93877,1.75668 -3.93877,3.93878 v 5.25187 0.32815 h 26.09042 v 0.17673 h 123.6958 v -0.50488 -5.25187 c 0,-2.1821 -1.75667,-3.93878 -3.93877,-3.93878 H 311.9758 Z" />
<path
id="path512"
style="opacity:0.95;fill:#f0f0f0;fill-opacity:1;stroke:none;stroke-width:0.162476;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
d="m 285.88543,161.4535 v 57.44092 c 0,2.1821 1.75671,3.9388 3.93881,3.9388 h 22.15129 V 161.4535 Z" />
<rect
x="-294.74313"
y="153.90413"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect514"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,296.05604,-184.95592)"
id="g522">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#fe6254"
fill-rule="evenodd"
id="path516"
style="fill:#cb4e43;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#fe6254"
fill-rule="evenodd"
id="path518" />
<path
d="m 9.1716,1037.5 c -0.39174,0.3917 -0.39174,1.0224 0,1.4142 l 1.4142,1.4142 -1.4142,1.4142 c -0.39174,0.3918 -0.39174,1.0225 0,1.4142 0.39174,0.3918 1.0225,0.3918 1.4142,0 l 1.4142,-1.4142 1.4142,1.4142 c 0.39174,0.3918 1.0225,0.3918 1.4142,0 0.39174,-0.3917 0.39174,-1.0224 0,-1.4142 l -1.4142,-1.4142 1.4142,-1.4142 c 0.39174,-0.3918 0.39174,-1.0225 0,-1.4142 -0.39174,-0.3918 -1.0225,-0.3918 -1.4142,0 L 12,1038.9142 10.5858,1037.5 c -0.39174,-0.3918 -1.0225,-0.3918 -1.4142,0 z"
enable-background="new"
fill="#000000"
opacity="0.5"
id="path520" />
</g>
<rect
x="-301.96887"
y="153.90413"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect524"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,303.28177,-184.95592)"
id="g532">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#28d33f"
fill-rule="evenodd"
id="path526"
style="fill:#20a932;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#28d33f"
fill-rule="evenodd"
id="path528" />
<path
d="m 13.5858,1037.4 -4.5859,4.5859 V 1038.4 c 0,-0.4155 0.5845,-1 1,-1 z m 1.4141,1.4141 v 3.5859 c 0,0.4155 -0.5845,1 -1,1 H 10.414 Z"
fill="#000000"
opacity="0.5"
id="path530" />
</g>
<rect
x="-309.18967"
y="153.90413"
width="5.2516088"
height="5.2516088"
ry="5.5571868e-06"
opacity="0"
stroke-width="0.155684"
style="paint-order:markers stroke fill"
id="rect534"
transform="scale(-1,1)" />
<g
transform="matrix(-0.32822555,0,0,0.32822555,310.50252,-184.95592)"
id="g542">
<path
d="m 12,1047.4 c 3.8659,0 6.9999,-3.134 6.9999,-7 0,-3.866 -3.134,-7 -6.9999,-7 -3.866,0 -7.0001,3.134 -7.0001,7 0,3.866 3.134,7 7.0001,7"
fill="#fdc92d"
fill-rule="evenodd"
id="path536"
style="fill:#caa124;fill-opacity:1" />
<path
d="m 12,1046.9 c 3.5898,0 6.4999,-2.9103 6.4999,-6.5001 0,-3.5899 -2.9102,-6.5 -6.4999,-6.5 -3.5899,0 -6.5001,2.9101 -6.5001,6.5 0,3.5898 2.9102,6.5001 6.5001,6.5001"
fill="#fdc92d"
fill-rule="evenodd"
id="path538" />
<rect
x="8"
y="1039.4"
width="8"
height="2"
ry="1"
fill="#000000"
opacity="0.5"
id="rect540" />
</g>
<rect
style="opacity:0.15;fill:url(#linearGradient2193);fill-opacity:1;stroke:none;stroke-width:3.06017;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
id="rect544"
width="149.78596"
height="0.32823381"
x="-435.67151"
y="-161.78174"
rx="0"
ry="0"
transform="scale(-1)" />
<rect
style="opacity:0.35;fill:#000000;stroke:none;stroke-width:0.165899;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
id="rect546"
width="60.342545"
height="10.503482"
x="330.60712"
y="231.25008"
rx="5.2517409"
ry="5.2517409" />
<text
xml:space="preserve"
style="font-size:6.90876px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;fill:#ffffff;stroke-width:0.172719"
x="338.90176"
y="238.40781"
id="text550"><tspan
sodipodi:role="line"
id="tspan548"
x="338.90176"
y="238.40781"
style="fill:#ffffff;stroke-width:0.172719">Glassy style</tspan></text>
<rect
style="opacity:0.15;fill:url(#linearGradient2201);fill-opacity:1;stroke:none;stroke-width:1.95376;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
id="rect552"
width="61.055111"
height="0.32823381"
x="161.77588"
y="-311.97775"
rx="0"
ry="0"
transform="rotate(90)" />
<path
id="path556"
style="opacity:0.35;fill:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
d="m 249.90834,182.31216 v 7.13908 h -17.72462 v 9.35466 h 17.72462 v 7.13909 l 15.75523,-11.81642 z" />
<rect
style="opacity:0.15;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke-width:0.24546;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;stop-color:#000000"
id="rect2203"
width="123.30653"
height="0.3175"
x="88.594254"
y="30.710873"
rx="0"
ry="0" />
<rect
style="opacity:0.15;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke-width:0.24546;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;stop-color:#000000"
id="rect2322"
width="123.30653"
height="0.3175"
x="88.594254"
y="161.47144"
rx="0"
ry="0" />
<rect
style="opacity:0.35;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke-width:0.516764;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;stop-color:#000000"
id="rect2742"
width="97.366669"
height="16.933332"
x="205.31667"
y="117.99952"
rx="4.6719189"
ry="4.5959425" />
<text
xml:space="preserve"
style="font-weight:bold;font-size:8.46667px;font-family:'Droid Sans';-inkscape-font-specification:'Droid Sans Bold';opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;stop-color:#000000"
x="214.0712"
y="128.63365"
id="text2434"><tspan
sodipodi:role="line"
id="tspan2432"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.46667px;font-family:Cantarell;-inkscape-font-specification:Cantarell;fill:#ffffff;stroke-width:0.529167"
x="214.0712"
y="128.63365">./install.sh -N mojave</tspan></text>
<rect
style="opacity:0.35;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke-width:0.516764;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;stop-color:#000000"
id="rect2744"
width="97.366669"
height="16.933332"
x="205.31667"
y="244.21236"
rx="4.6719189"
ry="4.5959425" />
<text
xml:space="preserve"
style="font-weight:bold;font-size:8.46667px;font-family:'Droid Sans';-inkscape-font-specification:'Droid Sans Bold';opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;stop-color:#000000"
x="214.0712"
y="254.8465"
id="text2748"><tspan
sodipodi:role="line"
id="tspan2746"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.46667px;font-family:Cantarell;-inkscape-font-specification:Cantarell;fill:#ffffff;stroke-width:0.529167"
x="214.0712"
y="254.8465">./install.sh -N glassy</tspan></text>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -26,7 +26,9 @@ MY_HOME=$(getent passwd "${MY_USERNAME}" | cut -d: -f6)
if command -v gnome-shell &> /dev/null; then if command -v gnome-shell &> /dev/null; then
SHELL_VERSION="$(gnome-shell --version | cut -d ' ' -f 3 | cut -d . -f -1)" SHELL_VERSION="$(gnome-shell --version | cut -d ' ' -f 3 | cut -d . -f -1)"
if [[ "${SHELL_VERSION:-}" -ge "44" ]]; then if [[ "${SHELL_VERSION:-}" -ge "46" ]]; then
GNOME_VERSION="46-0"
elif [[ "${SHELL_VERSION:-}" -ge "44" ]]; then
GNOME_VERSION="44-0" GNOME_VERSION="44-0"
elif [[ "${SHELL_VERSION:-}" -ge "42" ]]; then elif [[ "${SHELL_VERSION:-}" -ge "42" ]]; then
GNOME_VERSION="42-0" GNOME_VERSION="42-0"
@ -36,7 +38,7 @@ if command -v gnome-shell &> /dev/null; then
GNOME_VERSION="3-28" GNOME_VERSION="3-28"
fi fi
else else
GNOME_VERSION="none" GNOME_VERSION="46-0"
fi fi
#----------Program options-------------# #----------Program options-------------#
@ -316,7 +318,11 @@ signal_error() {
prompt -e "\n =========== SYSTEM INFO =========" prompt -e "\n =========== SYSTEM INFO ========="
prompt -e "DISTRO : $(IFS=';'; echo "${dist_ids[*]}")" prompt -e "DISTRO : $(IFS=';'; echo "${dist_ids[*]}")"
prompt -e "SUDO : $([[ -w "/root" ]] && echo "yes" || echo "no")" prompt -e "SUDO : $([[ -w "/root" ]] && echo "yes" || echo "no")"
prompt -e "GNOME : ${GNOME_VERSION}" if command -v gnome-shell &> /dev/null; then
prompt -e "DESKTOP : $(gnome-shell --version)"
else
prompt -e "DESKTOP : ${DESKTOP_SESSION}"
fi
prompt -e "REPO : ${repo_ver}\n" prompt -e "REPO : ${repo_ver}\n"
if [[ "$(grep -ril "Release" "${WHITESUR_TMP_DIR}/error_log.txt")" == "${WHITESUR_TMP_DIR}/error_log.txt" ]]; then if [[ "$(grep -ril "Release" "${WHITESUR_TMP_DIR}/error_log.txt")" == "${WHITESUR_TMP_DIR}/error_log.txt" ]]; then

View File

@ -381,10 +381,6 @@ install_shelly() {
TARGET_DIR="${6}" TARGET_DIR="${6}"
fi fi
if [[ "${GNOME_VERSION}" == 'none' ]]; then
local GNOME_VERSION='44-0'
fi
mkdir -p "${TARGET_DIR}" mkdir -p "${TARGET_DIR}"
mkdir -p "${TARGET_DIR}/assets" mkdir -p "${TARGET_DIR}/assets"
cp -r "${THEME_SRC_DIR}/assets/gnome-shell/icons" "${TARGET_DIR}" cp -r "${THEME_SRC_DIR}/assets/gnome-shell/icons" "${TARGET_DIR}"
@ -563,7 +559,7 @@ fix_whiskermenu() {
sed -i "s|.*menu-opacity=.*|menu-opacity=95|" "$HOME/.config/xfce4/panel/whiskermenu"*".rc" sed -i "s|.*menu-opacity=.*|menu-opacity=95|" "$HOME/.config/xfce4/panel/whiskermenu"*".rc"
fi fi
if (pgrep xfce4-session &> /dev/null); then if pgrep xfce4-session &> /dev/null && [ "$(id -u)" -ne 0 ]; then
xfce4-panel -r xfce4-panel -r
fi fi
} }
@ -739,6 +735,7 @@ config_firefox() {
echo "user_pref(\"browser.uidensity\", 0);" >> "${d}/prefs.js" echo "user_pref(\"browser.uidensity\", 0);" >> "${d}/prefs.js"
echo "user_pref(\"layers.acceleration.force-enabled\", true);" >> "${d}/prefs.js" echo "user_pref(\"layers.acceleration.force-enabled\", true);" >> "${d}/prefs.js"
echo "user_pref(\"mozilla.widget.use-argb-visuals\", true);" >> "${d}/prefs.js" echo "user_pref(\"mozilla.widget.use-argb-visuals\", true);" >> "${d}/prefs.js"
echo "user_pref(\"widget.gtk.rounded-bottom-corners.enabled\", true);" >> "${d}/prefs.js"
fi fi
done done
} }
@ -780,14 +777,13 @@ remove_firefox_theme() {
# DASH TO DOCK # # DASH TO DOCK #
############################################################################### ###############################################################################
install_dash_to_dock() { fix_dash_to_dock() {
if [[ -d "${DASH_TO_DOCK_DIR_HOME}" ]]; then if [[ -d "${DASH_TO_DOCK_DIR_HOME}" ]]; then
backup_file "${DASH_TO_DOCK_DIR_HOME}" "udo" backup_file "${DASH_TO_DOCK_DIR_HOME}/stylesheet.css" "udo"
rm -rf "${DASH_TO_DOCK_DIR_HOME}" elif [[ -d "${DASH_TO_DOCK_DIR_ROOT}" ]]; then
backup_file "${DASH_TO_DOCK_DIR_ROOT}/stylesheet.css" "sudo"
fi fi
udo cp -rf "${DASH_TO_DOCK_SRC_DIR}/dash-to-dock@micxgx.gmail.com" "${GNOME_SHELL_EXTENSION_DIR}"
if has_command dbus-launch; then if has_command dbus-launch; then
udo dbus-launch dconf write /org/gnome/shell/extensions/dash-to-dock/apply-custom-theme true udo dbus-launch dconf write /org/gnome/shell/extensions/dash-to-dock/apply-custom-theme true
fi fi
@ -958,6 +954,12 @@ customize_theme() {
sed $SED_OPT "/\$showapps_button/s/bigsur/normal/" "${THEME_SRC_DIR}/sass/_theme-options-temp.scss" sed $SED_OPT "/\$showapps_button/s/bigsur/normal/" "${THEME_SRC_DIR}/sass/_theme-options-temp.scss"
fi fi
# Change gnome-shell panel activities button style
if [[ "${default_activities}" == 'true' ]]; then
prompt -s "Changing gnome-shell panel activities button style ...\n"
sed $SED_OPT "/\$activities/s/apple/normal/" "${THEME_SRC_DIR}/sass/_theme-options-temp.scss"
fi
# Change panel font color # Change panel font color
if [[ "${monterey}" == 'true' ]]; then if [[ "${monterey}" == 'true' ]]; then
black_font="true" black_font="true"

View File

@ -0,0 +1,8 @@
$variant: 'dark';
@import '../../../sass/variables';
@import '../../../sass/colors';
@import '../../../sass/gnome-shell/drawing';
@import '../../../sass/gnome-shell/common';
@import '../../../sass/gnome-shell/widgets-46-0';
@import '../../../sass/gnome-shell/extensions-40-0';

View File

@ -0,0 +1,8 @@
$variant: 'light';
@import '../../../sass/variables';
@import '../../../sass/colors';
@import '../../../sass/gnome-shell/drawing';
@import '../../../sass/gnome-shell/common';
@import '../../../sass/gnome-shell/widgets-46-0';
@import '../../../sass/gnome-shell/extensions-40-0';

View File

@ -115,14 +115,18 @@
--gnome-tab-attention-icon-color: #718be8; --gnome-tab-attention-icon-color: #718be8;
/* Switch */ /* Switch */
--gnome-switch-background: #282828; --gnome-switch-background: #464646;
--gnome-switch-border-color: #1b1b1b; --gnome-switch-hover-background: #525252;
--gnome-switch-slider-background: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%); --gnome-switch-active-background: #606060;
--gnome-switch-slider-border-color: #111111; --gnome-switch-border-color: transparent;
--gnome-switch-slider-background: #ffffff;
--gnome-switch-slider-border-color: transparent;
--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); --gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-background: #15539e; --gnome-switch-pressed-background: #315bef;
--gnome-switch-active-border-color: #030c17; --gnome-switch-pressed-hover-background: #5073f1;
--gnome-switch-active-slider-border-color: #030c17; --gnome-switch-pressed-active-background: #6584f3;
--gnome-switch-active-border-color: transparent;
--gnome-switch-active-slider-border-color: transparent;
/* Dirty hacks for replaced symbolic icons, they load from /* Dirty hacks for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be * /usr/share/icons/<theme>/ and on some systems they need to be
@ -131,5 +135,33 @@
--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
--gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */ --gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */
--gnome-window-icons-hack-filter: invert(90%); /* without invert: none */ --gnome-window-icons-hack-filter: invert(90%); /* without invert: none */
/* Private window colors */
--gnome-private-accent: #78aeed;
/* Toolbars */
--gnome-private-toolbar-background: var(--gnome-headerbar-background);
--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
/* Menus */
--gnome-private-menu-background: #383838;
/* Header bar */
--gnome-private-headerbar-background: #252F49;
--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
/* Tabs */
--gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */
--gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */
/* Text color for Firefox Logo in new private tab */
--gnome-private-wordmark: #FBFBFE;
/* New private tab background */
--gnome-private-in-content-page-background: #242424;
/* Private browsing info box */
--gnome-private-text-primary-color: #FBFBFE;
} }
} }

View File

@ -114,14 +114,18 @@
--gnome-tab-attention-icon-color: #718be8; --gnome-tab-attention-icon-color: #718be8;
/* Switch */ /* Switch */
--gnome-switch-background: #e1dedb; --gnome-switch-background: #b2b2b2;
--gnome-switch-border-color: #cdc7c2; --gnome-switch-hover-background: #a0a0a0;
--gnome-switch-slider-background: linear-gradient(to bottom, white 10%, white 90%); --gnome-switch-active-background: #929292;
--gnome-switch-slider-border-color: #bfb8b1; --gnome-switch-border-color: transparent;
--gnome-switch-slider-background: #ffffff;
--gnome-switch-slider-border-color: transparent;
--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); --gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-background: #3584e4; --gnome-switch-active-border-color: transparent;
--gnome-switch-active-border-color: #185fb4; --gnome-switch-active-slider-border-color: transparent;
--gnome-switch-active-slider-border-color: #185fb4; --gnome-switch-pressed-background: #315bef;
--gnome-switch-pressed-hover-background: #5073f1;
--gnome-switch-pressed-active-background: #6584f3;
/* Dirty hacks for replaced symbolic icons, they load from /* Dirty hacks for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be * /usr/share/icons/<theme>/ and on some systems they need to be
@ -130,4 +134,32 @@
--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%); --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%);
--gnome-icons-hack-filter: none; --gnome-icons-hack-filter: none;
--gnome-window-icons-hack-filter: invert(30%); --gnome-window-icons-hack-filter: invert(30%);
/* Private window colors */
--gnome-private-accent: #1c71d8;
/* Toolbars */
--gnome-private-toolbar-background: var(--gnome-headerbar-background);
--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
/* Menus */
--gnome-private-menu-background: #ffffff;
/* Header bar */
--gnome-private-headerbar-background: #D7E3F0;
--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
/* Tabs */
--gnome-private-tabbar-tab-hover-background: #cbd7e3; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background: #c6d1dd; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background-contrast: #a9b6c4; /* Hardcoded color */
--gnome-private-tabbar-tab-active-hover-background: #c0cbd7; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-hover-background: #e4e9f0; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-active-background: #e1e7ed; /* Hardcoded color */
/* Text color for Firefox Logo in new private tab */
--gnome-private-wordmark: #20123A;
/* New private tab background */
--gnome-private-in-content-page-background: #FAFAFA;
/* Private browsing info box */
--gnome-private-text-primary-color: #15141A;
} }

View File

@ -15,14 +15,9 @@ toolbarspring {
/* URL bar */ /* URL bar */
#urlbar { #urlbar {
/* margin-top: -1px !important;*/
box-shadow: none !important; box-shadow: none !important;
background: var(--gnome-popover-background) !important;
border-radius: 8px !important;
border: none !important;
padding: 0 !important;
max-width: 360px !important;
} }
#urlbar-background { #urlbar-background {
box-shadow: none !important; box-shadow: none !important;
border: 0 !important; border: 0 !important;
@ -32,10 +27,13 @@ toolbarspring {
} }
#urlbar:-moz-window-inactive { #urlbar:-moz-window-inactive {
background: var(--gnome-inactive-urlbar-background) !important;
border-color: var(--gnome-inactive-headerbar-background) !important; border-color: var(--gnome-inactive-headerbar-background) !important;
} }
#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background {
outline-color: transparent !important;
}
#urlbar-container, #urlbar-container,
#wrapper-urlbar-container, #wrapper-urlbar-container,
#urlbar #urlbar-input-container { #urlbar #urlbar-input-container {
@ -57,7 +55,7 @@ toolbarspring {
width: 360px !important; width: 360px !important;
z-index: 5 !important; z-index: 5 !important;
padding: 0 !important; padding: 0 !important;
border-radius: 10px !important; border-radius: 8px !important;
} }
#urlbar[breakout][breakout-extend][open] { #urlbar[breakout][breakout-extend][open] {
height: auto !important; height: auto !important;
@ -69,10 +67,6 @@ toolbarspring {
padding: 0 !important; padding: 0 !important;
} }
#urlbar[breakout][breakout-extend][open] #urlbar-background {
box-shadow: var(--gnome-urlbar-box-shadow) !important;
}
#urlbar-input { #urlbar-input {
text-align: center !important; text-align: center !important;
padding: 0 28px 0 0 !important; padding: 0 28px 0 0 !important;
@ -80,10 +74,20 @@ toolbarspring {
/* URL bar results */ /* URL bar results */
.urlbarView { .urlbarView {
background: transparent !important; background: var(--gnome-popover-background) !important;
color: var(--gnome-toolbar-color) !important; color: var(--gnome-toolbar-color) !important;
margin: 0 !important; margin: 6px 0 0 0 !important;
width: 100% !important; width: 100% !important;
position: absolute !important;
box-shadow: var(--gnome-urlbar-box-shadow) !important;
border-radius: 12px !important;
border: 0 !important;
}
@media (prefers-color-scheme: dark) {
.urlbarView {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
} }
.urlbarView-body-outer { .urlbarView-body-outer {
@ -91,7 +95,7 @@ toolbarspring {
--item-padding-end: 0 !important; --item-padding-end: 0 !important;
max-height: 40vh !important; max-height: 40vh !important;
overflow-x: auto; overflow-x: auto;
padding: 0 8px !important; padding: 0 6px !important;
} }
.urlbarView-body-inner { .urlbarView-body-inner {
@ -124,7 +128,7 @@ toolbarspring {
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
border: none !important; border: none !important;
padding: 0 0 !important; padding: 0 !important;
min-height: 32px !important; min-height: 32px !important;
min-width: 32px !important; min-width: 32px !important;
margin: 0 !important; margin: 0 !important;
@ -219,3 +223,37 @@ toolbarspring {
opacity: 0.8 !important; opacity: 0.8 !important;
fill: var(--gnome-toolbar-color) !important; fill: var(--gnome-toolbar-color) !important;
} }
/*translations-button*/
#translations-button[translationsactive] > #translations-button-icon {
fill: var(--theme-primary-active-color) !important;
fill-opacity: 1;
}
#translations-button-circle-arrows {
height: 16px;
width: 16px;
list-style-image: url("chrome://browser/skin/sync.svg");
fill: var(--theme-primary-active-color) !important;
fill-opacity: 1;
margin-inline: 1px;
}
#translations-button-locale {
background-color: var(--theme-primary-active-color) !important;
color: white !important;
border-radius: 4px;
font-size: 0.8em;
height: 20px;
min-width: 20px;
text-align: center;
padding-top: 3px;
padding-inline: 1px;
box-sizing: border-box;
margin-inline: 2px -2px;
margin-block: -2px;
}
#translations-button[translationsactive="true"] {
width: auto !important;
}

View File

@ -6,20 +6,15 @@
--space-above-tabbar: 0 !important; --space-above-tabbar: 0 !important;
} }
/* Fix tabs bar icon sizes */
#TabsToolbar {
padding: 0 0 6px 0 !important;
}
/* Tabs bar height */ /* Tabs bar height */
#tabbrowser-tabs, #tabbrowser-tabs,
#tabbrowser-tabs arrowscrollbox { #tabbrowser-tabs arrowscrollbox {
height: 36px !important;
min-height: 36px !important; min-height: 36px !important;
--tab-min-height: 36px !important; --tab-min-height: 36px !important;
} }
.tab-background, .tab-stack { .tab-background, .tab-stack {
height: 36px !important;
min-height: 36px !important; min-height: 36px !important;
} }
@ -58,27 +53,27 @@ tab > stack {
margin-block: 0 !important; margin-block: 0 !important;
} }
.tab-background:not([selected=true]) { #TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background {
background: var(--gnome-tabbar-tab-background) !important; background: var(--gnome-tabbar-tab-background) !important;
} }
.tab-background:not([selected=true]):-moz-window-inactive { #TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive {
background: var(--gnome-inactive-tabbar-tab-background) !important; background: var(--gnome-inactive-tabbar-tab-background) !important;
} }
/* Tab hover */ /* Tab hover */
#TabsToolbar .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) { #TabsToolbar .tabbrowser-tab:not([selected=true]):hover > .tab-stack > .tab-background {
background: var(--gnome-tabbar-tab-hover-background) !important; background: var(--gnome-tabbar-tab-hover-background) !important;
} }
/* Active tab */ /* Active tab */
.tab-background[selected=true] { .tab-background:is([selected]) {
background: var(--gnome-tabbar-tab-active-background) !important; background: var(--gnome-tabbar-tab-active-background) !important;
animation: none !important; animation: none !important;
transition: none !important; transition: none !important;
} }
.tab-background[selected=true]:-moz-window-inactive { .tab-background:is([selected]):-moz-window-inactive {
background: var(--gnome-inactive-tabbar-tab-active-background) !important; background: var(--gnome-inactive-tabbar-tab-active-background) !important;
} }
@ -302,7 +297,7 @@ tab[selected]:-moz-window-inactive .tab-label {
} }
#TabsToolbar #alltabs-button { #TabsToolbar #alltabs-button {
padding: 0 0 !important; padding: 0 !important;
visibility: collapse !important; visibility: collapse !important;
} }
@ -314,18 +309,21 @@ tab[selected]:-moz-window-inactive .tab-label {
} }
#TabsToolbar .toolbarbutton-1 image, #TabsToolbar .toolbarbutton-1 image,
#tabs-newtab-button image, #TabsToolbar #new-tab-button image { #tabs-newtab-button image,
#TabsToolbar #new-tab-button image {
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
height: 16px !important; height: 16px !important;
width: 16px !important; width: 16px !important;
} }
#TabsToolbar #scrollbutton-up, #TabsToolbar #scrollbutton-down { #TabsToolbar #scrollbutton-up,
#TabsToolbar #scrollbutton-down {
height: 36px !important; height: 36px !important;
} }
#TabsToolbar #scrollbutton-up image, #TabsToolbar #scrollbutton-down image { #TabsToolbar #scrollbutton-up image,
#TabsToolbar #scrollbutton-down image {
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
height: 16px !important; height: 16px !important;
@ -333,9 +331,13 @@ tab[selected]:-moz-window-inactive .tab-label {
} }
/* firefox-view-button */ /* firefox-view-button */
:root:not([privatebrowsingmode="temporary"]):not([firefoxviewhidden]) :is(#firefox-view-button, #wrapper-firefox-view-button) + #tabbrowser-tabs { :root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs,
:root[privatebrowsingmode]:not([firefoxviewhidden]) :is(
toolbarbutton:not(#firefox-view-button),
toolbarpaletteitem:not(#wrapper-firefox-view-button)
) + #tabbrowser-tabs {
border-inline-start: none !important; border-inline-start: none !important;
padding-inline-start: 0 !important; padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width)) !important;
margin-inline-start: 0 !important; margin-inline-start: 0 !important;
} }

View File

@ -18,10 +18,6 @@ tab > stack {
background-image: none !important; background-image: none !important;
} }
.tabbrowser-tab {
margin: 1px 0 0 0 !important;
}
.tabbrowser-tab:not([visuallyselected="true"], [multiselected]), .tabbrowser-tab:-moz-lwtheme { .tabbrowser-tab:not([visuallyselected="true"], [multiselected]), .tabbrowser-tab:-moz-lwtheme {
color: var(--gnome-tabbar-tab-color) !important; color: var(--gnome-tabbar-tab-color) !important;
} }
@ -36,25 +32,25 @@ tab > stack {
transition: background 200ms !important; transition: background 200ms !important;
} }
.tab-background:not([selected=true]) { #TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background {
background: var(--gnome-tabbar-tab-background) !important; background: var(--gnome-tabbar-tab-background) !important;
} }
.tab-background:not([selected=true]):-moz-window-inactive { #TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive {
background: var(--gnome-inactive-tabbar-tab-background) !important; background: var(--gnome-inactive-tabbar-tab-background) !important;
} }
/* Tab hover */ /* Tab hover */
#TabsToolbar .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) { #TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background {
background: var(--gnome-tabbar-tab-hover-background) !important; background: var(--gnome-tabbar-tab-hover-background) !important;
} }
/* Active tab */ /* Active tab */
.tab-background[selected=true] { .tab-background:is([selected]) {
background: var(--gnome-tabbar-tab-active-background) !important; background: var(--gnome-tabbar-tab-active-background) !important;
} }
.tab-background[selected=true]:-moz-window-inactive { .tab-background:is([selected]):-moz-window-inactive {
background: var(--gnome-inactive-tabbar-tab-active-background) !important; background: var(--gnome-inactive-tabbar-tab-active-background) !important;
} }
@ -184,7 +180,7 @@ tab[selected]:-moz-window-inactive .tab-label {
#TabsToolbar .toolbarbutton-1, #TabsToolbar .toolbarbutton-1,
#TabsToolbar #tabs-newtab-button, #TabsToolbar #tabs-newtab-button,
#TabsToolbar #new-tab-button { #TabsToolbar #new-tab-button {
margin: 1px 2px 0 !important; margin: 0 2px !important;
padding: 0 10px !important; padding: 0 10px !important;
max-height: 32px !important; max-height: 32px !important;
min-height: 32px !important; min-height: 32px !important;
@ -215,10 +211,12 @@ tab[selected]:-moz-window-inactive .tab-label {
} }
/* firefox-view-button */ /* firefox-view-button */
:root:not([privatebrowsingmode="temporary"]):not([firefoxviewhidden]) :is(#firefox-view-button, #wrapper-firefox-view-button) + #tabbrowser-tabs { :root:not([privatebrowsingmode="temporary"]):not([firefoxviewhidden]) :is(#firefox-view-button, #wrapper-firefox-view-button) {
display: none !important;
}
:root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs, :root[privatebrowsingmode]:not([firefoxviewhidden]) :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) + #tabbrowser-tabs {
border-inline-start: none !important; border-inline-start: none !important;
padding-inline-start: 0 !important;
margin-inline-start: -40px !important;
} }
#firefox-view-button > .toolbarbutton-icon { #firefox-view-button > .toolbarbutton-icon {

View File

@ -7,7 +7,13 @@
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
#nav-bar, #PersonalToolbar, #toolbar-menubar, #TabsToolbar, #titlebar { #nav-bar,
#titlebar,
#PersonalToolbar,
#toolbar-menubar,
#TabsToolbar,
#navigator-toolbox,
.notificationbox-stack {
border: none !important; border: none !important;
color: var(--gnome-toolbar-color); color: var(--gnome-toolbar-color);
background: var(--gnome-toolbar-background) !important; background: var(--gnome-toolbar-background) !important;
@ -20,13 +26,14 @@
findbar { findbar {
border: 0 !important; border: 0 !important;
background: var(--gnome-findbar-background) !important; background: var(--gnome-findbar-background) !important;
border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; border-top: 1px solid var(--gnome-toolbar-border-color) !important;
} }
#nav-bar:-moz-window-inactive, #nav-bar:-moz-window-inactive,
#PersonalToolbar:-moz-window-inactive, #PersonalToolbar:-moz-window-inactive,
#toolbar-menubar:-moz-window-inactive, #toolbar-menubar:-moz-window-inactive,
#TabsToolbar:-moz-window-inactive, #TabsToolbar:-moz-window-inactive,
#navigator-toolbox:-moz-window-inactive,
findbar:-moz-window-inactive { findbar:-moz-window-inactive {
background: var(--gnome-inactive-toolbar-background) !important; background: var(--gnome-inactive-toolbar-background) !important;
} }
@ -83,15 +90,22 @@ findbar:-moz-window-inactive {
#navigator-toolbox #TabsToolbar { #navigator-toolbox #TabsToolbar {
-moz-box-ordinal-group: 100; -moz-box-ordinal-group: 100;
order: 100; order: 100;
padding-bottom: 6px !important;
} }
/* Sidebar */ /* Sidebar */
#sidebar-box, #sidebar-box, #sidebar,
.sidebar-panel[lwt-sidebar] { .sidebar-panel[lwt-sidebar] {
color: var(--gnome-toolbar-color) !important; color: var(--gnome-toolbar-color) !important;
background: var(--gnome-toolbar-background) !important; background: var(--gnome-toolbar-background) !important;
} }
.sidebar-splitter {
width: 1px !important;
background-color: var(--gnome-toolbar-border-color) !important;
border: none !important;
}
/* Customization page */ /* Customization page */
#customization-container:-moz-lwtheme { #customization-container:-moz-lwtheme {
background-image: linear-gradient(var(--gnome-browser-before-load-background), var(--gnome-browser-before-load-background)) !important; background-image: linear-gradient(var(--gnome-browser-before-load-background), var(--gnome-browser-before-load-background)) !important;

View File

@ -20,7 +20,7 @@
findbar { findbar {
border: none !important; border: none !important;
background: var(--gnome-findbar-background) !important; background: var(--gnome-findbar-background) !important;
border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; border-top: 1px solid var(--gnome-toolbar-border-color) !important;
} }
#nav-bar:-moz-window-inactive, #nav-bar:-moz-window-inactive,
@ -48,9 +48,9 @@ findbar:-moz-window-inactive,
} }
#TabsToolbar { #TabsToolbar {
margin-top: -41px !important; margin-top: -40px !important;
margin-bottom: 8px !important;
padding: 0 !important; padding: 0 !important;
margin-bottom: 6px !important;
background: none !important; background: none !important;
max-height: 42px !important; max-height: 42px !important;
} }
@ -97,12 +97,18 @@ findbar:-moz-window-inactive,
} }
/* Sidebar */ /* Sidebar */
#sidebar-box, #sidebar-box, #sidebar,
.sidebar-panel[lwt-sidebar] { .sidebar-panel[lwt-sidebar] {
color: var(--gnome-toolbar-color) !important; color: var(--gnome-toolbar-color) !important;
background: var(--gnome-toolbar-background) !important; background: var(--gnome-toolbar-background) !important;
} }
.sidebar-splitter {
width: 1px !important;
background-color: var(--gnome-toolbar-border-color) !important;
border: none !important;
}
/* Customization page */ /* Customization page */
#customization-container:-moz-lwtheme { #customization-container:-moz-lwtheme {
background-image: linear-gradient(var(--gnome-browser-before-load-background), var(--gnome-browser-before-load-background)) !important; background-image: linear-gradient(var(--gnome-browser-before-load-background), var(--gnome-browser-before-load-background)) !important;

View File

@ -12,6 +12,7 @@
@import "parts/tabsbar-alt.css"; @import "parts/tabsbar-alt.css";
@import "parts/findbar.css"; @import "parts/findbar.css";
@import "parts/dialogs.css"; @import "parts/dialogs.css";
@import "parts/notification.css";
@import "parts/video-player.css"; @import "parts/video-player.css";
@import "parts/remove-white-flash.css"; @import "parts/remove-white-flash.css";
@import "parts/custom-icons.css"; @import "parts/custom-icons.css";

View File

@ -12,6 +12,7 @@
@import "parts/tabsbar.css"; @import "parts/tabsbar.css";
@import "parts/findbar.css"; @import "parts/findbar.css";
@import "parts/dialogs.css"; @import "parts/dialogs.css";
@import "parts/notification.css";
@import "parts/video-player.css"; @import "parts/video-player.css";
@import "parts/remove-white-flash.css"; @import "parts/remove-white-flash.css";
@import "parts/custom-icons.css"; @import "parts/custom-icons.css";

View File

@ -114,14 +114,18 @@
--gnome-tab-attention-icon-color: #718be8; --gnome-tab-attention-icon-color: #718be8;
/* Switch */ /* Switch */
--gnome-switch-background: #282828; --gnome-switch-background: #464646;
--gnome-switch-border-color: #1b1b1b; --gnome-switch-hover-background: #525252;
--gnome-switch-slider-background: linear-gradient(to bottom, #3c3c3c 20%, #353535 90%); --gnome-switch-active-background: #606060;
--gnome-switch-slider-border-color: #111111; --gnome-switch-border-color: transparent;
--gnome-switch-slider-background: #ffffff;
--gnome-switch-slider-border-color: transparent;
--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); --gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-background: #15539e; --gnome-switch-pressed-background: #315bef;
--gnome-switch-active-border-color: #030c17; --gnome-switch-pressed-hover-background: #5073f1;
--gnome-switch-active-slider-border-color: #030c17; --gnome-switch-pressed-active-background: #6584f3;
--gnome-switch-active-border-color: transparent;
--gnome-switch-active-slider-border-color: transparent;
/* Dirty hacks for replaced symbolic icons, they load from /* Dirty hacks for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be * /usr/share/icons/<theme>/ and on some systems they need to be
@ -130,5 +134,33 @@
--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
--gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */ --gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */
--gnome-window-icons-hack-filter: invert(90%); /* without invert: none */ --gnome-window-icons-hack-filter: invert(90%); /* without invert: none */
/* Private window colors */
--gnome-private-accent: #78aeed;
/* Toolbars */
--gnome-private-toolbar-background: var(--gnome-headerbar-background);
--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
/* Menus */
--gnome-private-menu-background: #383838;
/* Header bar */
--gnome-private-headerbar-background: #252F49;
--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
/* Tabs */
--gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */
--gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */
/* Text color for Firefox Logo in new private tab */
--gnome-private-wordmark: #FBFBFE;
/* New private tab background */
--gnome-private-in-content-page-background: #242424;
/* Private browsing info box */
--gnome-private-text-primary-color: #FBFBFE;
} }
} }

View File

@ -112,14 +112,18 @@
--gnome-tab-attention-icon-color: #718be8; --gnome-tab-attention-icon-color: #718be8;
/* Switch */ /* Switch */
--gnome-switch-background: #e1dedb; --gnome-switch-background: #b2b2b2;
--gnome-switch-border-color: #cdc7c2; --gnome-switch-hover-background: #a0a0a0;
--gnome-switch-slider-background: linear-gradient(to bottom, white 10%, white 90%); --gnome-switch-active-background: #929292;
--gnome-switch-slider-border-color: #bfb8b1; --gnome-switch-border-color: transparent;
--gnome-switch-slider-background: #ffffff;
--gnome-switch-slider-border-color: transparent;
--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); --gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-background: #3584e4; --gnome-switch-active-border-color: transparent;
--gnome-switch-active-border-color: #185fb4; --gnome-switch-active-slider-border-color: transparent;
--gnome-switch-active-slider-border-color: #185fb4; --gnome-switch-pressed-background: #315bef;
--gnome-switch-pressed-hover-background: #5073f1;
--gnome-switch-pressed-active-background: #6584f3;
/* Dirty hacks for replaced symbolic icons, they load from /* Dirty hacks for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be * /usr/share/icons/<theme>/ and on some systems they need to be
@ -128,4 +132,32 @@
--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%); --gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%);
--gnome-icons-hack-filter: none; --gnome-icons-hack-filter: none;
--gnome-window-icons-hack-filter: invert(30%); --gnome-window-icons-hack-filter: invert(30%);
/* Private window colors */
--gnome-private-accent: #1c71d8;
/* Toolbars */
--gnome-private-toolbar-background: var(--gnome-headerbar-background);
--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
/* Menus */
--gnome-private-menu-background: #ffffff;
/* Header bar */
--gnome-private-headerbar-background: #D7E3F0;
--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
/* Tabs */
--gnome-private-tabbar-tab-hover-background: #cbd7e3; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background: #c6d1dd; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background-contrast: #a9b6c4; /* Hardcoded color */
--gnome-private-tabbar-tab-active-hover-background: #c0cbd7; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-hover-background: #e4e9f0; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-active-background: #e1e7ed; /* Hardcoded color */
/* Text color for Firefox Logo in new private tab */
--gnome-private-wordmark: #20123A;
/* New private tab background */
--gnome-private-in-content-page-background: #FAFAFA;
/* Private browsing info box */
--gnome-private-text-primary-color: #15141A;
} }

View File

@ -235,3 +235,37 @@ toolbarspring {
opacity: 0.8 !important; opacity: 0.8 !important;
fill: var(--gnome-toolbar-color) !important; fill: var(--gnome-toolbar-color) !important;
} }
/*translations-button*/
#translations-button[translationsactive] > #translations-button-icon {
fill: var(--theme-primary-active-color) !important;
fill-opacity: 1;
}
#translations-button-circle-arrows {
height: 16px;
width: 16px;
list-style-image: url("chrome://browser/skin/sync.svg");
fill: var(--theme-primary-active-color) !important;
fill-opacity: 1;
margin-inline: 1px;
}
#translations-button-locale {
background-color: var(--theme-primary-active-color) !important;
color: white !important;
border-radius: 4px;
font-size: 0.8em;
height: 20px;
min-width: 20px;
text-align: center;
padding-top: 3px;
padding-inline: 1px;
box-sizing: border-box;
margin-inline: 2px -2px;
margin-block: -2px;
}
#translations-button[translationsactive="true"] {
width: auto !important;
}

View File

@ -19,14 +19,6 @@
max-height: 32px !important; max-height: 32px !important;
} }
/* Extra margin for the first and last tabs */
.tabbrowser-tab[first-tab]:not([pinned=true]) {
margin-left: 8px !important;
}
.tabbrowser-tab[last-tab]:not([pinned=true]) {
margin-right: 8px !important;
}
#TabsToolbar .toolbar-items { #TabsToolbar .toolbar-items {
margin-bottom: -1px !important; margin-bottom: -1px !important;
} }
@ -84,7 +76,7 @@
} }
/* Space between tabs */ /* Space between tabs */
.tabbrowser-tab:not([pinned=true]) { .tabbrowser-tab:not([pinned]) {
margin: 0 !important; margin: 0 !important;
} }
@ -228,11 +220,6 @@ tab[selected]:-moz-window-inactive {
margin-right: auto !important margin-right: auto !important
} }
/* Remove tab icons */
/* tab:not([pinned=true]) .tab-icon-image {
display: none;
} */
/* Close tab button */ /* Close tab button */
.close-icon { .close-icon {
height: 16px !important; height: 16px !important;
@ -351,14 +338,14 @@ tab[selected]:-moz-window-inactive {
} }
/* Tab hover */ /* Tab hover */
#TabsToolbar .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) { #TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background {
background-color: var(--gnome-tabbar-tab-active-hover-background) !important; background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
border-image: none !important; border-image: none !important;
box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 -1px var(--gnome-toolbar-border-color) !important; box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 -1px var(--gnome-toolbar-border-color) !important;
} }
/* Active tab */ /* Active tab */
.tab-background[selected=true] { .tab-background:is([selected]) {
background-color: var(--gnome-tabbar-tab-active-background) !important; background-color: var(--gnome-tabbar-tab-active-background) !important;
background-image: none !important; background-image: none !important;
border: none !important; border: none !important;
@ -372,14 +359,15 @@ tab[selected]:-moz-window-inactive {
inset 0 -1px var(--gnome-toolbar-border-color) !important; inset 0 -1px var(--gnome-toolbar-border-color) !important;
} }
.tab-background[selected=true]:-moz-window-inactive { .tab-background:is([selected]):-moz-window-inactive {
background-color: var(--gnome-inactive-tabbar-tab-active-background) !important; background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
border-image: none !important; border-image: none !important;
} }
/* Tabs scroll buttons hover */ /* Tabs scroll buttons */
#TabsToolbar .scrollbutton-up:not([disabled]):hover, #TabsToolbar .scrollbutton-down:not([disabled]):hover { #TabsToolbar #scrollbutton-up:not([disabled]):hover,
background-color: var(--gnome-tabbar-tab-active-hover-background) !important; #TabsToolbar #scrollbutton-down:not([disabled]):hover {
background: var(--gnome-tabbar-tab-active-hover-background) !important;
} }
/* Full width tabs */ /* Full width tabs */
@ -405,6 +393,7 @@ tab[selected]:-moz-window-inactive {
min-width: 32px !important; min-width: 32px !important;
min-height: 32px !important; min-height: 32px !important;
padding: 0 !important; padding: 0 !important;
border: none !important;
} }
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
@ -418,26 +407,39 @@ tab[selected]:-moz-window-inactive {
height: 32px !important; height: 32px !important;
} }
#alltabs-button { #TabsToolbar #alltabs-button {
display: none !important; display: none !important;
} }
/* firefox-view-button */ /* firefox-view-button */
:root:not([privatebrowsingmode="temporary"]):not([firefoxviewhidden]) :is(#firefox-view-button, #wrapper-firefox-view-button) + #tabbrowser-tabs { :root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs,
:root[privatebrowsingmode]:not([firefoxviewhidden]) :is(
toolbarbutton:not(#firefox-view-button),
toolbarpaletteitem:not(#wrapper-firefox-view-button)
) + #tabbrowser-tabs {
border-inline-start: 1px solid var(--gnome-toolbar-border-color) !important; border-inline-start: 1px solid var(--gnome-toolbar-border-color) !important;
padding-inline-start: 0 !important; padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width)) !important;
margin-inline-start: 0 !important; margin-inline-start: 0 !important;
} }
#firefox-view-button { #TabsToolbar #firefox-view-button {
border-radius: 0 !important; border-radius: 0 !important;
padding: 0 4px !important;
} }
#firefox-view-button > .toolbarbutton-icon { #firefox-view-button > .toolbarbutton-icon {
filter: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
#TabsToolbar #firefox-view-button[open] {
background-color: var(--gnome-tabbar-tab-active-background) !important;
box-shadow: inset 0 -1px var(--gnome-toolbar-border-color) !important;
}
#TabsToolbar #firefox-view-button[open]:-moz-window-inactive {
background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
}
/* Create new container tab indicator */ /* Create new container tab indicator */
.tabbrowser-tab[class*="identity-color-"] .tab-content::before { .tabbrowser-tab[class*="identity-color-"] .tab-content::before {
content: ""; content: "";

View File

@ -26,22 +26,27 @@
} }
#TabsToolbar { #TabsToolbar {
border: 0 !important; border: none !important;
background: var(--gnome-tabstoolbar-background) !important; background: var(--gnome-tabstoolbar-background) !important;
border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; border-bottom: 1px solid var(--gnome-toolbar-border-color) !important;
box-shadow: inset 0 1px var(--gnome-toolbar-border-color) !important; box-shadow: inset 0 1px var(--gnome-toolbar-border-color) !important;
} }
#navigator-toolbox {
background: var(--gnome-tabstoolbar-background) !important;
}
findbar { findbar {
border: 0 !important; border: 0 !important;
background: var(--gnome-findbar-background) !important; background: var(--gnome-findbar-background) !important;
border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; border-top: 1px solid var(--gnome-toolbar-border-color) !important;
} }
.container.infobar { .container.infobar {
background: var(--gnome-browser-before-load-background) !important; background: var(--gnome-browser-before-load-background) !important;
} }
#navigator-toolbox:-moz-window-inactive,
#nav-bar:-moz-window-inactive, .notificationbox-stack:-moz-window-inactive, #nav-bar:-moz-window-inactive, .notificationbox-stack:-moz-window-inactive,
#PersonalToolbar:-moz-window-inactive, #toolbar-menubar:-moz-window-inactive, #PersonalToolbar:-moz-window-inactive, #toolbar-menubar:-moz-window-inactive,
#TabsToolbar:-moz-window-inactive, findbar:-moz-window-inactive { #TabsToolbar:-moz-window-inactive, findbar:-moz-window-inactive {
@ -119,12 +124,18 @@ findbar:-moz-window-inactive label,
} }
/* Sidebar */ /* Sidebar */
#sidebar-box, #sidebar-box, #sidebar,
.sidebar-panel[lwt-sidebar] { .sidebar-panel[lwt-sidebar] {
color: var(--gnome-toolbar-color) !important; color: var(--gnome-toolbar-color) !important;
background: var(--gnome-toolbar-background) !important; background: var(--gnome-toolbar-background) !important;
} }
.sidebar-splitter {
width: 1px !important;
background-color: var(--gnome-toolbar-border-color) !important;
border: none !important;
}
/* Customization page */ /* Customization page */
#customization-container:-moz-lwtheme { #customization-container:-moz-lwtheme {
background-image: linear-gradient(var(--gnome-browser-before-load-background), var(--gnome-browser-before-load-background)) !important; background-image: linear-gradient(var(--gnome-browser-before-load-background), var(--gnome-browser-before-load-background)) !important;

View File

@ -12,11 +12,11 @@
@import "parts/tabsbar.css"; @import "parts/tabsbar.css";
@import "parts/findbar.css"; @import "parts/findbar.css";
@import "parts/dialogs.css"; @import "parts/dialogs.css";
@import "parts/notification.css";
@import "parts/video-player.css"; @import "parts/video-player.css";
@import "parts/remove-white-flash.css"; @import "parts/remove-white-flash.css";
@import "parts/custom-icons.css"; @import "parts/custom-icons.css";
@import "parts/icons.css"; @import "parts/icons.css";
@import "parts/video-player.css";
@import "colors/light.css"; @import "colors/light.css";
@import "colors/dark.css"; @import "colors/dark.css";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

View File

@ -1,9 +1,5 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#tabbrowser-tabs {
--tab-min-height: 0 !important;
}
#tabbrowser-tabs tab:only-of-type, #tabbrowser-tabs tab:only-of-type,
#TabsToolbar #alltabs-button { #TabsToolbar #alltabs-button {
display: none !important; display: none !important;
@ -12,3 +8,9 @@
.tab-background, .tab-stack { .tab-background, .tab-stack {
min-height: 0 !important; min-height: 0 !important;
} }
#tabbrowser-tabs,
#tabbrowser-tabs arrowscrollbox {
min-height: 0 !important;
--tab-min-height: 0 !important;
}

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m4 0c-1.108 0-2 0.892-2 2v1c-1.108 0-2 0.892-2 2v9c0 1.108 0.892 2 2 2h12c1.108 0 2-0.892 2-2v-9c0-1.108-0.892-2-2-2v-1c0-1.108-0.892-2-2-2h-8zm0 1h8c0.554 0 1 0.446 1 1v1h-10v-1c0-0.554 0.446-1 1-1zm-2 3h1 10 1c0.554 0 1 0.446 1 1v9c0 0.554-0.446 1-1 1h-12c-0.554 0-1-0.446-1-1v-9c0-0.554 0.446-1 1-1zm3 3v1h6v-1h-6z" fill="#333333"/>
</svg>

After

Width:  |  Height:  |  Size: 443 B

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m4 0v2h-4v1h7.0879c-0.32818 1.2173-1.0515 3.1702-2.5879 4.9609-1.1609-1.3551-1.8594-2.8064-2.2734-3.9609h-1.0449c0.44206 1.3182 1.2381 3.0697 2.6387 4.6855-0.76616 0.74967-1.6939 1.4449-2.8203 2.0117v1.1094c1.4202-0.64826 2.5701-1.4851 3.5-2.3984 0.97137 0.95419 2.1841 1.8252 3.6934 2.4844l-1.8965 4.1074h1.0996l1.3848-3h4.4375l1.3848 3h1.0996l-4.1523-8.998v-0.0019531h-1.0997l-1.8398 3.9844c-1.4071-0.61084-2.5328-1.4179-3.4336-2.3008 1.7975-2.073 2.599-4.3661 2.9355-5.6836h0.88672v-1h-4v-2h-1zm7 8.1914 1.7578 3.8086h-3.5156l1.7578-3.8086z" fill="#6584f3"/>
</svg>

After

Width:  |  Height:  |  Size: 657 B

View File

@ -0,0 +1,48 @@
@media (prefers-color-scheme: dark) {
:host,
:root {
--in-content-page-background: rgb(29,29,29) !important;
--in-content-page-color: rgb(253,253,253) !important;
--in-content-box-background: rgb(36, 36, 36) !important;
--in-content-box-background-odd: rgba(250,250,250,0.05) !important;
--in-content-box-info-background: rgba(250,250,250,0.15) !important;
--in-content-border-color: rgba(250,250,250,0.2) !important;
--in-content-border-hover: rgba(250,250,250,0.3) !important;
--in-content-icon-color: rgb(252,252,252) !important;
--in-content-primary-button-text-color: rgb(255,255,255) !important;
--in-content-primary-button-background: var(--theme-primary-color) !important;
--in-content-primary-button-background-hover: var(--theme-primary-hover-color) !important;
--in-content-primary-button-background-active: var(--theme-primary-active-color) !important;
--in-content-table-background: rgb(35, 35, 35) !important;
--newtab-background-color: var(--gnome-browser-before-load-background) !important;
--newtab-background-color-secondary: var(--gnome-menu-background) !important;
--newtab-primary-action-background: var(--theme-primary-color) !important;
scrollbar-color: rgba(250,250,250,.4) rgba(22,22,22,.3) !important;
}
@media not (prefers-contrast) {
:root[dialogroot],
:host(dialog) {
--in-content-page-background: #424242 !important;
}
}
}
.toggle-button {
--toggle-background-color: var(--gnome-switch-background) !important;
--toggle-background-color-hover: var(--gnome-switch-hover-background) !important;
--toggle-background-color-active: var(--gnome-switch-active-background) !important;
--toggle-background-color-pressed: var(--gnome-switch-pressed-background) !important;
--toggle-background-color-pressed-hover: var(--gnome-switch-pressed-hover-background) !important;
--toggle-background-color-pressed-active: var(--gnome-switch-pressed-active-background) !important;
--toggle-border-color: var(--gnome-switch-border-color) !important;
--toggle-dot-background-color: var(--gnome-switch-slider-background) !important;
--toggle-dot-background-color-on-pressed: var(--gnome-switch-slider-background) !important;
}

View File

@ -6,6 +6,8 @@ body {
--newtab-background-color-secondary: var(--gnome-menu-background) !important; --newtab-background-color-secondary: var(--gnome-menu-background) !important;
--newtab-primary-action-background: var(--theme-primary-color) !important; --newtab-primary-action-background: var(--theme-primary-color) !important;
--newtab-primary-element-text-color: #ffffff !important; --newtab-primary-element-text-color: #ffffff !important;
--newtab-overlay-color: var(--gnome-tabstoolbar-background) !important;
--newtab-border-color: var(--gnome-toolbar-border-color) !important;
} }
.modalOverlayOuter { .modalOverlayOuter {

View File

@ -0,0 +1,17 @@
body.dark {
--main-background: var(--gnome-browser-before-load-background) !important;
--main-foreground: var(--gnome-toolbar-color) !important;
--primary-color: var(--theme-primary-color) !important;
--toolbar-border: rgba(250, 250, 250, 0.2) !important;
--toolbar-button-background-hover: rgb(82, 82, 82) !important;
--toolbar-button-background-active: rgb(92, 92, 92) !important;
--popup-background: rgb(66, 66, 66) !important;
--opaque-popup-border: #424242 !important;
--popup-line: rgba(250, 250, 250, 0.1) !important;
--popup-button-background: rgb(43, 43, 43)!important;
--selected-background: rgba(var(--theme-primary-color), 0.3) !important;
--font-value-background: rgba(var(--theme-primary-color), 0.15) !important;
--font-value-border: #656565 !important;
--icon-fill: rgb(251, 251, 251) !important;
--icon-disabled-fill: rgba(251, 251, 251, 0.4) !important;
}

View File

@ -60,6 +60,7 @@ button.customizationmode-button {
.permission-popup-permission-remove-button { .permission-popup-permission-remove-button {
padding: 2px 4px !important; padding: 2px 4px !important;
align-items: center !important;
} }
menulist { menulist {
@ -295,8 +296,7 @@ button.close,
#appMenu-popup .toolbaritem-combined-buttons:not(.unified-extensions-item) toolbarbutton:not(:last-of-type):not(#appMenu-zoomEnlarge-button), #appMenu-popup .toolbaritem-combined-buttons:not(.unified-extensions-item) toolbarbutton:not(:last-of-type):not(#appMenu-zoomEnlarge-button),
#context-navigation menuitem:not(:last-of-type), #context-navigation menuitem:not(:last-of-type),
.findbar-container toolbarbutton.findbar-find-previous, .findbar-container toolbarbutton.findbar-find-previous,
.findbar-button:not(:last-of-type), .findbar-button:not(:last-of-type) {
.search-panel-one-offs .searchbar-engine-one-off-item:not(:last-child) {
border-top-right-radius: 0 !important; border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
border-right-width: 1px !important; border-right-width: 1px !important;
@ -308,8 +308,7 @@ button.close,
#context-navigation menuitem:not(:first-of-type), #context-navigation menuitem:not(:first-of-type),
.findbar-container toolbarbutton.findbar-find-previous, .findbar-container toolbarbutton.findbar-find-previous,
.findbar-container toolbarbutton.findbar-find-next, .findbar-container toolbarbutton.findbar-find-next,
.findbar-button:not(:first-of-type), .findbar-button:not(:first-of-type) {
.search-panel-one-offs .searchbar-engine-one-off-item:not(:first-child) {
border-top-left-radius: 0 !important; border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
border-left-width: 0 !important; border-left-width: 0 !important;

View File

@ -4,50 +4,48 @@
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
/* Switchers */ /* Switchers */
.protections-popup-tp-switch-box { .toggle-button {
padding: 0 !important; --toggle-height: 26px !important;
-moz-box-pack: start !important; --toggle-width: 48px !important;
--toggle-border-radius: 24px !important;
--toggle-border-color: var(--gnome-switch-border-color) !important;
--toggle-background-color: var(--gnome-switch-background) !important;
--toggle-background-color-hover: var(--gnome-switch-hover-background) !important;
--toggle-background-color-active: var(--gnome-switch-active-background) !important;
--toggle-background-color-pressed: var(--gnome-switch-pressed-background) !important;
--toggle-background-color-pressed-hover: var(--gnome-switch-pressed-hover-background) !important;
--toggle-background-color-pressed-active: var(--gnome-switch-pressed-active-background) !important;
--toggle-dot-height: 22px !important;
--toggle-dot-background-color: #ffffff !important;
--toggle-dot-background-color-on-pressed: #ffffff !important;
--toggle-dot-margin: 1px !important/* border: 0 !important;*/
} }
#protections-popup-tp-switch:not([enabled])[showdotindicator]::after {
display: none !important; .toggle-button:enabled:hover {
background: var(--toggle-background-color-hover);
border-color: var(--toggle-border-color);
} }
#protections-popup-tp-switch {
background: var(--gnome-switch-background) !important; .toggle-button:enabled:active {
border: 1px solid var(--gnome-switch-border-color) !important; background: var(--toggle-background-color-active);
border-radius: 24px !important; border-color: var(--toggle-border-color);
min-width: 50px !important;
width: 50px !important;
min-height: 26px !important;
padding: 0 !important;
position: relative !important;
display: block !important;
margin: 0 !important;
} }
#protections-popup-tp-switch:hover {
border-color: var(--gnome-switch-border-color) !important; .toggle-button[aria-pressed="true"] {
background: var(--toggle-background-color-pressed);
border-color: transparent;
} }
#protections-popup-tp-switch::before {
position: absolute !important; .toggle-button[aria-pressed="true"]:enabled:hover {
top: -1px; background: var(--toggle-background-color-pressed-hover);
left: -1px; border-color: transparent;
background: var(--gnome-switch-slider-background) !important;
border: 1px solid var(--gnome-switch-slider-border-color) !important;
box-shadow: var(--gnome-switch-slider-box-shadow);
border-radius: 24px !important;
height: 24px !important;
width: 24px !important;
transition: left .2s ease;
outline: 0 !important;
} }
#protections-popup-tp-switch[enabled] {
background: var(--gnome-switch-active-background) !important; .toggle-button[aria-pressed="true"]:enabled:active {
border-color: var(--gnome-switch-active-border-color) !important; background: var(--toggle-background-color-pressed-active);
padding-inline-start: 24px !important; border-color: transparent;
} }
#protections-popup-tp-switch[enabled]:hover {
border-color: var(--gnome-switch-active-border-color) !important; .toggle-button::before {
} box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
#protections-popup-tp-switch[enabled]::before {
border-color: var(--gnome-switch-active-slider-border-color) !important;
left: 24px;
} }

View File

@ -2,13 +2,33 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#main-window { /* Headerbar top border corners rounded */
-moz-appearance: -moz-window-titlebar !important; :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) {
#nav-bar {
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important;
box-shadow: var(--gnome-headerbar-box-shadow) !important;
} }
/* Headerbar top border corners rounded */ #nav-bar:-moz-window-inactive {
:root[tabsintitlebar]:not([inFullscreen]):not([sizemode="maximized"]) #nav-bar { box-shadow: var(--gnome-inactive-headerbar-box-shadow) !important;
border-radius: 12px 12px 0 0 !important; }
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "widget.gtk.rounded-bottom-corners.enabled") {
body,
dialog,
body::backdrop,
dialog::backdrop {
/* Use an uniform clip to allow WebRender to optimize it better */
border-radius: 12px !important;
}
window[role="dialog"] {
border-bottom-left-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}
}
} }
/* Window buttons: at least 1 button */ /* Window buttons: at least 1 button */
@ -90,7 +110,7 @@
/* Left window buttons */ /* Left window buttons */
@media (-moz-gtk-csd-reversed-placement) { @media (-moz-gtk-csd-reversed-placement) {
:root[tabsintitlebar]:not([inFullscreen]) #nav-bar { :root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
padding-right: 3px !important; padding-right: 6px !important;
} }
/* Window buttons box */ /* Window buttons box */

View File

@ -82,6 +82,7 @@ dialog[subdialog] {
/* Buttons */ /* Buttons */
.dialog-button-box { .dialog-button-box {
display: flex !important; display: flex !important;
background: none !important;
border-top: 1px solid var(--gnome-menu-border-color) !important; border-top: 1px solid var(--gnome-menu-border-color) !important;
padding: 3px !important; padding: 3px !important;
} }

View File

@ -2,6 +2,11 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Hide tabsbar default private browsing indicator */
#private-browsing-indicator-with-label {
display: none !important;
}
:root[privatebrowsingmode="temporary"] #nav-bar toolbarspring:first-of-type:before { :root[privatebrowsingmode="temporary"] #nav-bar toolbarspring:first-of-type:before {
background: url("../icons/user-not-tracked.svg") no-repeat; background: url("../icons/user-not-tracked.svg") no-repeat;
background-size: contain; background-size: contain;

View File

@ -9,11 +9,6 @@
/* Headerbar CSD colors */ /* Headerbar CSD colors */
:root[tabsintitlebar] #nav-bar { :root[tabsintitlebar] #nav-bar {
border: none !important; border: none !important;
border-bottom: none !important;
box-shadow: var(--gnome-headerbar-box-shadow) !important;
}
:root[tabsintitlebar] #nav-bar:-moz-window-inactive {
box-shadow: var(--gnome-inactive-headerbar-box-shadow) !important;
} }
/* Headerbar buttons */ /* Headerbar buttons */

View File

@ -2,6 +2,12 @@
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
#TabsToolbar .toolbarbutton-1 {
& > .toolbarbutton-icon, & > .toolbarbutton-text, & > .toolbarbutton-badge-stack {
border-radius: 0 !important;
}
}
/* Cursors autoscroller fix */ /* Cursors autoscroller fix */
.autoscroller { .autoscroller {
--panel-background: transparent !important; --panel-background: transparent !important;
@ -108,6 +114,12 @@ arrowscrollbox[orient="horizontal"] {
margin: 2px 0; margin: 2px 0;
} }
/*translations-button*/
#translations-button-icon {
list-style-image: url("../icons/translations.svg") !important;
margin-right: 0 !important;
}
/* Tree views */ /* Tree views */
treechildren::-moz-tree-twisty { treechildren::-moz-tree-twisty {
list-style-image: url("../icons/pan-end-symbolic.svg") !important; list-style-image: url("../icons/pan-end-symbolic.svg") !important;
@ -569,6 +581,10 @@ toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme {
fill: rgb(224, 41, 29) !important; fill: rgb(224, 41, 29) !important;
} }
#firefox-view-button {
list-style-image: url("../icons/firefox-view.svg") !important;
}
/* Info */ /* Info */
.panel-info-button > image { .panel-info-button > image {
list-style-image: url("../icons/info-symbolic.svg") !important; list-style-image: url("../icons/info-symbolic.svg") !important;
@ -608,6 +624,7 @@ button.close::before {
.menu-iconic-icon { .menu-iconic-icon {
height: 16px !important; height: 16px !important;
width: 16px !important; width: 16px !important;
padding: 0 !important;
} }
/* Fix icon color */ /* Fix icon color */
@ -754,7 +771,8 @@ treechildren::-moz-tree-image {
.bookmark-item[container] .toolbarbutton-icon, .bookmark-item[container] .toolbarbutton-icon,
.menu-iconic.bookmark-item[container] .menu-iconic-icon, .menu-iconic.bookmark-item[container] .menu-iconic-icon,
.panel-info-button > image, .panel-info-button > image,
#password-notification-icon { #password-notification-icon,
#firefox-view-button .toolbarbutton-icon {
filter: invert(60%) brightness(150%); filter: invert(60%) brightness(150%);
} }

View File

@ -0,0 +1,202 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html "http://www.w3.org/1999/xhtml";
.notificationbox-stack {
/* Prevent the animation from overlapping the navigation toolbar */
overflow: clip;
}
.notificationbox-stack[notificationside="top"] {
/* Create a stacking context for the box-shadow */
position: relative;
z-index: 1;
}
notification {
min-height: 32px;
padding-inline-start: 16px;
color: var(--gnome-toolbar-color);
background: var(--gnome-toolbar-background) !important;
border-color: var(--gnome-toolbar-border-color) !important;
border-style: solid;
border-width: 1px 0;
text-shadow: none;
font-size: 1.15em;
align-items: center !important;
vertical-align: middle !important;
--notification-background: var(--gnome-toolbar-background);
--notification-text: var(--gnome-toolbar-color);
--notification-border: var(--gnome-toolbar-border-color);
--notification-button-background: var(--gnome-button-background);
--notification-button-background-hover: var(--gnome-button-hover-background);
--notification-button-background-active: var(--gnome-button-active-background);
--notification-button-text: inherit;
--notification-primary-button-background: #0060df;
--notification-primary-button-background-hover: #003eaa;
--notification-primary-button-background-active: #002275;
--notification-primary-button-text: var(--gnome-toolbar-color);
}
notification:-moz-window-inactive {
background: var(--gnome-inactive-toolbar-background) !important;
}
notification description {
margin-bottom: 0 !important;
}
notification element {
vertical-align: middle !important;
margin-top: 0 !important;
margin-right: 0 !important;
}
@media (prefers-color-scheme: dark) {
notification[type="info"]:-moz-lwtheme {
--notification-background: var(--gnome-toolbar-background);
--notification-text: var(--gnome-toolbar-color);
}
notification[type="info"] {
--notification-button-background: var(--gnome-button-background);
--notification-button-background-hover: var(--gnome-button-hover-background);
--notification-button-background-active: var(--gnome-button-active-background);
}
}
.notificationbox-stack[notificationside="top"] > notification {
border-top-style: none;
}
.notificationbox-stack[notificationside="bottom"] > notification {
border-bottom-style: none;
}
notification[type="warning"] {
--notification-background: #ffe900;
--notification-text: #0c0c0d;
}
notification[type="critical"] {
--notification-background: #d70022;
--notification-text: #fff;
}
notification[type="critical"] > .close-icon:hover {
background-color: color-mix(in srgb, currentColor 20%, transparent);
}
notification[type="critical"] > .close-icon:hover:active {
background-color: color-mix(in srgb, currentColor 30%, transparent);
}
.messageText {
margin-inline-start: 12px !important;
margin-block: 0;
}
.messageText > .text-link {
text-decoration: underline;
margin-block: 0;
}
.messageText > .text-link:not(.notification-link) {
color: inherit !important;
margin-inline: 0;
}
.messageImage {
width: 24px;
margin: 0;
-moz-context-properties: fill;
fill: currentColor;
vertical-align: middle !important;
}
notification[type="info"] > hbox > .messageImage {
list-style-image: url("chrome://global/skin/icons/help.svg");
}
notification[type="warning"] > hbox > .messageImage {
list-style-image: url("chrome://global/skin/icons/warning.svg");
}
notification[type="critical"] > hbox > .messageImage {
list-style-image: url("chrome://global/skin/icons/error.svg");
}
.messageCloseButton {
margin: 0 6px !important;
padding: 0;
}
.messageCloseButton > .toolbarbutton-icon {
padding: 6px;
width: 32px;
/* Close button needs to be clickable from the edge of the window */
margin-inline-end: 8px;
}
.messageCloseButton:focus-visible {
/* Override the dotted outline from button.css */
outline: none;
}
.messageCloseButton:focus-visible > .toolbarbutton-icon {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
border-radius: var(--toolbarbutton-border-radius, 4px);
}
.notification-button {
appearance: none;
border: 1px solid transparent;
border-radius: 4px;
background-color: var(--notification-button-background);
color: var(--notification-button-text);
padding: 0 6px;
margin: 4px 6px;
height: 24px;
vertical-align: middle !important;
}
.notification-button[disabled] {
opacity: 0.5;
}
.notification-button:not([disabled]):hover {
background-color: var(--notification-button-background-hover);
}
.notification-button:not([disabled]):hover:active {
background-color: var(--notification-button-background-active);
}
.notification-button:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
.notification-button.primary {
background-color: var(--notification-primary-button-background);
color: var(--notification-primary-button-text);
}
.notification-button.primary:not([disabled]):hover {
background-color: var(--notification-primary-button-background-hover);
}
.notification-button.primary:not([disabled]):hover:active {
background-color: var(--notification-primary-button-background-active);
}
.notificationbox-stack {
background-color: var(--toolbar-bgcolor);
width: 100%;
}

View File

@ -324,3 +324,15 @@
background-color: #fff !important; background-color: #fff !important;
} }
#downloads-indicator-progress-inner {
background: conic-gradient(AccentColor var(--download-progress-pcent), transparent var(--download-progress-pcent));
}
.downloadProgress::-moz-progress-bar {
background-color: var(--download-progress-fill-color);
}
.downloadProgress[paused]::-moz-progress-bar {
background-color: var(--download-progress-paused-color);
}

View File

@ -186,6 +186,10 @@ menuitem, menupopup menu,
min-height: 28px !important; min-height: 28px !important;
} }
.toolbar-menupopup :is(menu, menuitem) {
margin: 0 !important;
}
.subviewbutton, .subviewbutton,
.protections-popup-footer-button, .protections-popup-footer-button,
.protections-popup-category, .protections-popup-category,
@ -303,3 +307,8 @@ panel[type="autocomplete-richlistbox"] {
.autocomplete-richlistitem:not([type="loginsFooter"]):hover .ac-site-icon { .autocomplete-richlistitem:not([type="loginsFooter"]):hover .ac-site-icon {
fill: #fff !important; fill: #fff !important;
} }
/* Fixes for menu scrollbox */
arrowscrollbox.menupopup-arrowscrollbox {
height: 100%;
}

View File

@ -1,5 +1,7 @@
@import "Monterey/colors/light.css"; @import "Monterey/colors/light.css";
@import "Monterey/colors/dark.css"; @import "Monterey/colors/dark.css";
@import "Monterey/pages/common.css";
@import "Monterey/pages/newtab.css"; @import "Monterey/pages/newtab.css";
@import "Monterey/pages/reader.css";
@import "Monterey/pages/privatebrowsing.css"; @import "Monterey/pages/privatebrowsing.css";

View File

@ -1,5 +1,7 @@
@import "WhiteSur/colors/light.css"; @import "WhiteSur/colors/light.css";
@import "WhiteSur/colors/dark.css"; @import "WhiteSur/colors/dark.css";
@import "WhiteSur/pages/common.css";
@import "WhiteSur/pages/newtab.css"; @import "WhiteSur/pages/newtab.css";
@import "WhiteSur/pages/reader.css";
@import "WhiteSur/pages/privatebrowsing.css"; @import "WhiteSur/pages/privatebrowsing.css";

View File

@ -2,6 +2,19 @@
@return unquote("alpha(#{$c},#{$a})"); @return unquote("alpha(#{$c},#{$a})");
} }
@function gtkmix($c1,$c2,$r) {
$ratio: 1 - $r / 100%; // match SCSS mix()
@return unquote("mix(#{$c1},#{$c2},#{$ratio})");
}
@function gtkshade($c,$s) {
@return unquote("shade(#{$c},#{$s})");
}
@function gtkcolor($c) {
@return unquote("@#{$c}");
}
// base options // base options
@import 'theme-options-temp'; @import 'theme-options-temp';
@import 'gtk-base-temp'; @import 'gtk-base-temp';

View File

@ -29,6 +29,9 @@ $panel_font: 'white';
// Panel height size // Panel height size
$panel_size: 'default'; $panel_size: 'default';
// Panel Activities button style
$activities: 'apple';
// Monterey style // Monterey style
$monterey: 'false'; $monterey: 'false';

View File

@ -1,6 +1,13 @@
@import 'theme-options-temp'; @import 'theme-options-temp';
@import 'gtk-base-temp'; @import 'gtk-base-temp';
// Function to convert px values to em
@function to_em($input, $base: 16px) {
// multiplied and divided by 1000 to make up for round() shortcoming
$em_value: ($input / $base) * 1.091 * 1000;
@return round($em_value) / 1000 * 1em;
}
$asset_suffix: if($variant == 'dark', '-dark', ''); $asset_suffix: if($variant == 'dark', '-dark', '');
$con_asset_suffix: if($variant=='dark', '', '-dark'); $con_asset_suffix: if($variant=='dark', '', '-dark');
$extra_background_clip: if($variant == 'light', padding-box, border-box); $extra_background_clip: if($variant == 'light', padding-box, border-box);
@ -57,6 +64,17 @@ $maximized_radius: 0;
// icons // icons
// $base_icon_size: 1.09em; // $base_icon_size: 1.09em;
$base_icon_size: 16px; $base_icon_size: 16px;
$medium_icon_size: $base_icon_size * 1.5; // 24px
$large_icon_size: $base_icon_size * 2; // 32px
// Scaled values
// Used in elements that follow text scaling factors
$scaled_padding: to_em(6px); // same as $base_padding
// Used for symbolic icons that scale
$scalable_icon_size: to_em(16px);
$medium_scalable_icon_size: $scalable_icon_size * 1.5;
$large_scalable_icon_size: $scalable_icon_size * 2;
// durations // durations
$shorter_duration: 100ms; $shorter_duration: 100ms;

View File

@ -70,7 +70,7 @@ stage {
// Entries // Entries
// //
%entry { %entry {
padding: 7px; padding: 6px;
caret-size: 1px; caret-size: 1px;
selection-background-color: $selected_bg_color; selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color; selected-color: $selected_fg_color;
@ -903,14 +903,20 @@ StScrollBar {
} }
.calendar-event-button { .calendar-event-button {
margin: 6px 0 6px 0; margin: 6px 0;
border-radius: $bt_radius; border-radius: $bt_radius;
background-color: $fill_color;
&:hover { &:hover {
background-gradient-direction: vertical; background-gradient-direction: none;
background-gradient-start: $fill_color;;
background-gradient-end: $fill_color;
box-shadow: none; box-shadow: none;
background-color: $divider_color;
}
&:active {
background-gradient-direction: none;
box-shadow: none;
background-color: $track_color;
} }
} }
@ -1471,8 +1477,8 @@ StScrollBar {
} }
#menu-search-entry { #menu-search-entry {
width: 250px; min-width: 250px;
height: 15px; min-height: 16px;
font-weight: normal; font-weight: normal;
caret-color: $fg_color; caret-color: $fg_color;

View File

@ -24,10 +24,10 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
*/ */
// Stage // Stage
// stage { stage {
// @include font(body-1); @include fontsize($base_font_size);
// color: $fg_color; color: $fg_color;
// } }
/* General Typography */ /* General Typography */

View File

@ -10,6 +10,13 @@
@return ($size / $root-font-size) + em; @return ($size / $root-font-size) + em;
} }
// Function to convert px values to em
@function to_em($input, $base: 16px) {
// multiplied and divided by 1000 to make up for round() shortcoming
$em_value: ($input / $base) * 1.091 * 1000;
@return round($em_value) / 1000 * 1em;
}
// provide font size in rem, with px fallback // provide font size in rem, with px fallback
@mixin fontsize($size: 24, $base: 16) { @mixin fontsize($size: 24, $base: 16) {
font-size: round($size) + pt; font-size: round($size) + pt;
@ -104,18 +111,19 @@
@if $t == normal { @if $t == normal {
background-color: $bc; background-color: $bc;
border-radius: $circular_radius; border-radius: $circular_radius;
border: 2px solid transparent; border: 2px solid transparent !important;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0); box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important;
outline: none;
} }
@if $t == hover { @if $t == hover {
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.1); box-shadow: inset 0 0 0 1px rgba($borders_color, 0.1) !important;
border: 2px solid transparent; border: 2px solid transparent !important;
} }
@if $t == focus { @if $t == focus {
border: 2px solid lighten($fc, 15%); border: 2px solid lighten($fc, 15%) !important;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0); box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important;
} }
@if $t == insensitive { @if $t == insensitive {
@ -126,25 +134,25 @@
@if $t == flat-normal { @if $t == flat-normal {
background-color: $bc; background-color: $bc;
border-radius: $circular_radius; border-radius: $circular_radius;
border: none; border: none !important;
box-shadow: none; box-shadow: none !important;
color: $tc; color: $tc;
} }
@if $t == flat-hover { @if $t == flat-hover {
background-color: $bc; background-color: $bc;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05); box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05) !important;
color: $tc; color: $tc;
} }
@if $t == flat-focus { @if $t == flat-focus {
border: none; border: none !important;
background-color: rgba($bc, 0.2); background-color: rgba($bc, 0.2);
color: $tc; color: $tc;
} }
@if $t == flat-insensitive { @if $t == flat-insensitive {
border: none; border: none !important;
background-color: rgba($bc, 0.05); background-color: rgba($bc, 0.05);
color: rgba($tc, 0.45); color: rgba($tc, 0.45);
} }
@ -161,26 +169,26 @@
@if $t == normal { @if $t == normal {
background-color: rgba(white, 0.12); background-color: rgba(white, 0.12);
border-radius: $bd_radius; border-radius: $bd_radius;
border-color: transparent; border-color: transparent !important;
box-shadow: 1px 2px 3px rgba(black, 0); box-shadow: none !important;
} }
@if $t == focus { @if $t == focus {
border-color: transparent; border-color: transparent !important;
background-color: rgba(white, 0.18); background-color: rgba(white, 0.18);
box-shadow: 1px 2px 3px rgba(black, 0); box-shadow: none !important;
} }
@if $t == hover { @if $t == hover {
background-color: rgba(white, 0.2); background-color: rgba(white, 0.2);
border-color: transparent; border-color: transparent !important;
box-shadow: 1px 2px 3px rgba(black, 0.35); box-shadow: none !important;
} }
@if $t == insensitive { @if $t == insensitive {
color: $disabled_fg_color; color: $disabled_fg_color;
border-color: transparent; border-color: transparent !important;
box-shadow: 1px 2px 3px rgba(black, 0); box-shadow: none !important;
} }
} }
@ -224,13 +232,20 @@
@if $t == active { @if $t == active {
color: $tc; color: $tc;
background-color: transparent; background-color: if($variant=='light', darken($c, 5%), lighten($c, 5%));
background-image: if($variant=='light', darken($c, 5%), lighten($c, 5%));
border: 1px solid $button_borders; border: 1px solid $button_borders;
text-shadow: none; text-shadow: none;
icon-shadow: none; icon-shadow: none;
} }
@if $t == checked {
color: $tc;
background-color: $selected_bg_color;
border: 1px solid $selected_bg_color;
text-shadow: none;
icon-shadow: none;
}
@if $t == insensitive { @if $t == insensitive {
color: if($tc == $fg_color, $disabled_fg_color, $tc); color: if($tc == $fg_color, $disabled_fg_color, $tc);
background-color: if($c == $base_color, $divider_color, $c); background-color: if($c == $base_color, $divider_color, $c);
@ -276,6 +291,15 @@
icon-shadow: none; icon-shadow: none;
} }
@if $t == flat-checked {
color: $tc;
background-color: $divider_color;
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
@if $t == flat-insensitive { @if $t == flat-insensitive {
color: if($tc == $fg_color, $disabled_fg_color, $tc); color: if($tc == $fg_color, $disabled_fg_color, $tc);
background-color: transparent; background-color: transparent;

View File

@ -0,0 +1,45 @@
@import 'common/a11y';
@import 'common/app-grid';
@import 'common/base';
@import 'common/buttons';
@import 'common/calendar';
@import 'common/check-box';
@import 'common/corner-ripple';
@import 'common/dash';
@import 'common/dialogs';
@import 'common/entries';
@import 'common/hotplug';
@import 'common/ibus-popup';
@import 'common/keyboard';
@import 'common/login-dialog';
@import 'common/looking-glass';
@import 'common/misc';
@import 'common/network-dialog';
@import 'common/osd';
@import 'common/overview';
@import 'common/panel';
@import 'common/popovers';
@import 'common/screen-shield';
@import 'common/scrollbars';
@import 'common/search-entry';
@import 'common/search-results';
@import 'common/slider';
@import 'common/switcher-popup';
@import 'common/switches';
@import 'common/tiled-previews';
@import 'common/workspace-switcher';
@import 'widgets-46-0/app-grid';
@import 'widgets-46-0/dash';
@import 'widgets-40-0/misc';
@import 'widgets-46-0/message-list';
@import 'widgets-46-0/notifications';
@import 'widgets-40-0/overview';
@import 'widgets-42-0/osd';
@import 'widgets-40-0/panel';
@import 'widgets-42-0/popovers';
@import 'widgets-44-0/quick-settings';
@import 'widgets-40-0/screen-shield';
@import 'widgets-42-0/screenshot';
@import 'widgets-40-0/search-entry';
@import 'widgets-40-0/window-picker';
@import 'widgets-40-0/workspace-thumbnails';

View File

@ -1,18 +1,6 @@
/* App Icons */ /* App Icons */
.show-apps,
.app-well-app,
%app-well-app { %app-well-app {
@include font(body-1);
.overview-icon.overview-icon-with-label {
padding: 10px 12px 14px;
> StBoxLayout {
spacing: 6px;
}
}
.overview-icon { .overview-icon {
color: $light_fg_color; color: $light_fg_color;
border-radius: $wm_radius * 1.5; border-radius: $wm_radius * 1.5;
@ -21,6 +9,7 @@
transition-duration: 100ms; transition-duration: 100ms;
text-align: center; text-align: center;
text-shadow: none; text-shadow: none;
background-color: transparent;
} }
&:hover .overview-icon, &:hover .overview-icon,
@ -38,31 +27,13 @@
} }
} }
// App Folders
.app-folder {
background: none;
border-radius: $wm_radius * 1.5;
.overview-icon {
background-color: $light_divider_color;
border-radius: $wm_radius * 1.5;
}
&:hover .overview-icon {
background-color: rgba(white, 0.2);
}
&:active .overview-icon {
background-color: rgba(white, 0.3);
}
}
// expanded folder // expanded folder
.app-folder-dialog { .app-folder-dialog {
border-radius: $bd_radius * 4; border-radius: $bd_radius * 4;
border: none; border: none;
box-shadow: none; box-shadow: none;
background-color: rgba(if($colorscheme == 'nord', #20242c, #262626), 0.9); background-color: rgba(if($colorscheme == 'nord', #20242c, #262626), 0.9);
color: $light_alt_fg_color;
.folder-name-container { .folder-name-container {
padding: 24px 36px 0; padding: 24px 36px 0;

View File

@ -1,6 +1,24 @@
/* Buttons */ /* Buttons */
%button { %button {
@include button(flat-normal);
&:hover { @include button(flat-hover); }
&:selected, &:active { @include button(flat-active); }
&:checked { @include button(checked); }
&:insensitive { @include button(flat-insensitive); }
&:focus { @include button(flat-focus); }
}
%flat_button {
@include button(flat-normal);
&:hover { @include button(flat-hover); }
&:selected, &:active { @include button(flat-active); }
&:checked { @include button(flat-checked); }
&:insensitive { @include button(flat-insensitive); }
&:focus { @include button(flat-focus); }
}
%default_button {
@include button(flat-normal); @include button(flat-normal);
&:hover { @include button(flat-hover); } &:hover { @include button(flat-hover); }
&:active { @include button(flat-active); } &:active { @include button(flat-active); }
@ -9,19 +27,45 @@
} }
.button { .button {
min-height: $small_size; min-height: to_em(22px);
padding: $container_padding $container_padding * 2; padding: $container_padding $container_padding * 2;
border-radius: $bt_radius; border-radius: $bt_radius;
border: none; border: none;
@extend %button; @extend %button;
// default style
&.default {
@extend %default_button;
}
// flat style
&.flat {
@extend %flat_button;
}
} }
.icon-button { .icon-button {
min-height: $small_size; min-height: $scalable_icon_size;
min-width: $small_size; min-width: $scalable_icon_size;
padding: $container_padding; padding: $scaled_padding * 2;
border-radius: $circular_radius; border-radius: $circular_radius;
border: none;
@extend %button; @extend %button;
StIcon {
icon-size: $scalable_icon_size;
-st-icon-style: symbolic;
}
// default style
&.default {
@extend %default_button;
}
// flat style
&.flat {
@extend %flat_button;
}
} }
%osd_button { %osd_button {

View File

@ -41,7 +41,11 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
// overall menu // overall menu
#calendarArea { #calendarArea {
padding: 4px 0; padding: $base_margin 0;
}
.datemenu-popover {
border-radius: $base_border_radius + $base_margin * 3 !important;
} }
// Calendar menu side column // Calendar menu side column
@ -75,21 +79,16 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
font-weight: bold; font-weight: bold;
} }
.datemenu-today-button,
.datemenu-displays-box {
margin: 4px 8px;
}
/* today button (the date) */ /* today button (the date) */
.datemenu-today-button { .datemenu-today-button {
border: none; border: none;
box-shadow: none; box-shadow: none;
background: none; background: none;
padding: $base_padding; padding: $base_padding $base_padding * 2;
margin: 0 12px; margin: $base_margin $base_margin * 2;
text-shadow: none; text-shadow: none;
color: $alt_fg_color; color: $alt_fg_color;
border-radius: $mn_radius; border-radius: $base_border_radius;
&:hover, &:focus { &:hover, &:focus {
color: $fg_color; color: $fg_color;
@ -119,7 +118,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
box-shadow: none !important; box-shadow: none !important;
background-color: transparent; background-color: transparent;
padding: $base_padding !important; padding: $base_padding !important;
margin: 0 4px !important; margin: 0 !important;
text-shadow: none; text-shadow: none;
// border-radius: $base_border_radius; // border-radius: $base_border_radius;
@ -127,7 +126,8 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
.calendar-month-label { .calendar-month-label {
margin: 0; margin: 0;
padding: $base_padding 0; padding: $base_padding 0;
color: $fg_color; color: $fg_color !important;
background-color: transparent !important;
font-weight: bold; font-weight: bold;
font-size: 1em !important; font-size: 1em !important;
text-align: center; text-align: center;
@ -158,6 +158,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
&:active { background-color: $track_color; } &:active { background-color: $track_color; }
} }
.calendar-day,
.calendar-day-base { .calendar-day-base {
@include font(caption); @include font(caption);
text-align: center; text-align: center;
@ -168,6 +169,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
border-radius: $circular_radius; border-radius: $circular_radius;
color: $alt_fg_color; color: $alt_fg_color;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
background-color: transparent;
&:hover, &:focus { &:hover, &:focus {
background-color: $divider_color; background-color: $divider_color;
@ -184,19 +186,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
color: $fg_color; color: $fg_color;
background-color: $track_color; background-color: $track_color;
border-color: transparent; //avoid jumparound due to today border-color: transparent; //avoid jumparound due to today
} box-shadow: none !important;
&.calendar-day-heading { //day of week heading
width: $menuitem_size !important;
height: $menuitem_size - 6px !important;
margin-top: 6px !important;
padding: 0 !important;
// border-radius: $circular_radius;
background-color: transparent;
color: $hint_fg_color;
@include font(caption);
font-weight: bold;
text-align: center;
} }
} }
@ -260,16 +250,21 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
} }
} }
.calendar-other-month,
.calendar-other-month-day { .calendar-other-month-day {
color: $disabled_fg_color; color: $disabled_fg_color !important;
opacity: 0.5; opacity: 1;
&.calendar-weekend {
color: $alt_disabled_fg_color !important;
}
} }
.calendar-week-number { .calendar-week-number {
width: 22px; width: 22px;
height: 16px; height: 16px;
margin: 6px 6px 6px 4px; margin: 6px 6px 6px 4px;
padding: 0 0; padding: 0;
border-radius: $bt_radius; border-radius: $bt_radius;
background-color: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05)); background-color: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05));
color: $hint_fg_color; color: $hint_fg_color;
@ -277,6 +272,19 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.calendar-day-heading { //day of week heading
width: $menuitem_size !important;
height: $menuitem_size - 6px !important;
margin: $base_margin;
padding: 0 !important;
// border-radius: $circular_radius;
background-color: transparent !important;
color: $hint_fg_color !important;
@include font(caption);
font-weight: bold;
text-align: center;
}
} }
.world-clocks-button, .world-clocks-button,
@ -284,16 +292,18 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
.events-button { .events-button {
@extend %popover_bubble; @extend %popover_bubble;
padding: $base_padding * 3 !important; padding: $base_padding * 3 !important;
margin: 3px 4px !important; margin: $base_margin $base_padding + $base_margin !important;
} }
// Events // Events
.events-button { .events-button {
.events-box { .events-box {
color: $hint_fg_color;
spacing: $base_spacing; spacing: $base_spacing;
} }
.events-list { .events-list {
color: $hint_fg_color;
spacing: 2 * $base_spacing; spacing: 2 * $base_spacing;
text-shadow: none; text-shadow: none;
} }

View File

@ -43,12 +43,15 @@
min-height: $medium_size; min-height: $medium_size;
border-radius: 0; border-radius: 0;
transition-duration: 100ms; transition-duration: 100ms;
border:L none;
box-shadow: none;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
background-color: transparent;
&:hover { &:hover {
color: $light_fg_color; color: $light_fg_color;
text-shadow: none; text-shadow: none;
border-color: $light_track_color border-color: $light_track_color;
} }
&:selected { &:selected {

View File

@ -2,7 +2,7 @@
// a.k.a. notifications in the menu // a.k.a. notifications in the menu
.message-list { .message-list {
width: 31.5em; width: 30em;
padding: 0 $base_margin; padding: 0 $base_margin;
text-shadow: none; text-shadow: none;
border: none; border: none;
@ -109,7 +109,7 @@
} }
.message-title { .message-title {
padding-top: 0.35em !important; padding-top: 0.57em;
// color: $fg_color; // color: $fg_color;
font-weight: bold; font-weight: bold;
} }
@ -148,7 +148,7 @@
} }
.message-media-control { .message-media-control {
margin: 18px 4px !important; margin: 20px 4px !important;
padding: 8px !important; padding: 8px !important;
border-radius: $circular_radius; border-radius: $circular_radius;
color: $alt_fg_color; color: $alt_fg_color;
@ -164,14 +164,14 @@
// album-art // album-art
.media-message-cover-icon { .media-message-cover-icon {
icon-size: 32px !important; icon-size: $base_icon_size * 2 !important;
margin: 0 0 0 4px !important; margin-left: $base_padding !important;
&:rtl { margin: 0 4px 0 0 !important; } &:rtl { margin-right: $base_padding !important; }
&.fallback { &.fallback {
icon-size: 16px !important; icon-size: $base_icon_size * 2 !important;
padding: 8px; padding: 4px;
border: none; border: none;
border-radius: $bt_radius; border-radius: $bt_radius;
background-color: $divider_color; background-color: $divider_color;

View File

@ -47,9 +47,64 @@ $panel_height: $menuitem_size;
} }
} }
%normal_activites {
-natural-hpadding: $base_padding * 3;
color: $panel_fg;
StBoxLayout {
spacing: $container_padding;
}
.workspace-dot {
background-color: $panel_fg;
}
&:overview {
.workspace-dot {
background-color: $light_fg_color;
}
}
}
%apple_activites {
-natural-hpadding: $base_padding * 2;
background-image: url("assets/activities.svg");
background-position: center center;
background-size: 24px 24px;
width: 24px;
height: 24px;
color: transparent;
font-size: 0;
> * { width: $medium_size; }
StBoxLayout {
spacing: 0;
}
.workspace-dot {
background-color: transparent;
}
&:active, &:overview, &:focus, &:checked {
border: none;
color: transparent;
}
&:overview { background-color: transparent; }
@if $variant == 'light' {
@if $panel_font == 'black' or $trans == 'false' {
&:overview {
background-image: url("assets/activities-white.svg");
}
}
}
}
#panel { #panel {
background-color: $panel_bg; background-color: $panel_bg;
font-weight: normal; font-weight: 500;
color: $panel_fg; color: $panel_fg;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
transition-duration: 250ms; transition-duration: 250ms;
@ -71,7 +126,6 @@ $panel_height: $menuitem_size;
.panel-button { .panel-button {
-natural-hpadding: 12px; -natural-hpadding: 12px;
-minimum-hpadding: 12px; -minimum-hpadding: 12px;
font-weight: normal;
color: $panel_fg; color: $panel_fg;
transition-duration: 150ms; transition-duration: 150ms;
border-radius: $bt_radius; border-radius: $bt_radius;
@ -149,6 +203,10 @@ $panel_height: $menuitem_size;
padding: 0 $base_padding + 12px !important; padding: 0 $base_padding + 12px !important;
margin: 0 !important; margin: 0 !important;
} }
.messages-indicator {
icon-size: $scalable_icon_size;
}
} }
&:hover, &:active, &:overview, &:focus, &:checked { &:hover, &:active, &:overview, &:focus, &:checked {
@ -197,32 +255,52 @@ $panel_height: $menuitem_size;
} }
&#panelActivities { // Activities button &#panelActivities { // Activities button
background-image: url("assets/activities.svg");
background-position: center center;
background-size: 24px 24px;
width: 24px;
height: 24px;
background-gradient-direction: none; background-gradient-direction: none;
border: none; border: none;
color: transparent;
font-size: 0;
> * { width: $medium_size; } @if $activities == 'apple' {
@extend %apple_activites;
&:active, &:overview, &:focus, &:checked { } @else {
border: none; @extend %normal_activites;
color: transparent;
// background-image: url("assets/activities-active.svg");
}
&:overview { background-color: transparent; }
@if $variant == 'light' {
@if $panel_font == 'black' or $trans == 'false' {
&:overview {
background-image: url("assets/activities-white.svg");
} }
} }
// screen activity indicators
&.screen-recording-indicator,
&.screen-sharing-indicator {
border: 3px solid transparent;
background-color: transparent;
StBoxLayout {
spacing: $scaled_padding;
}
StIcon {
icon-size: $scalable_icon_size;
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 1000px $error_color !important;
&:hover {
box-shadow: inset 0 0 0 1000px mix($panel_fg, $error_color, 12%) !important;
}
&:active {
box-shadow: inset 0 0 0 1000px mix($panel_fg, $error_color, 24%) !important;
}
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 1000px $warning_color !important;
&:hover {
box-shadow: inset 0 0 0 1000px mix($panel_fg, $warning_color, 12%) !important;
}
&:active {
box-shadow: inset 0 0 0 1000px mix($panel_fg, $warning_color, 24%) !important;
} }
} }
} }
@ -243,6 +321,7 @@ $panel_height: $menuitem_size;
// Input indicators // Input indicators
Gjs_status_keyboard_InputSourceIndicator.panel-button, // Ibus Gjs_status_keyboard_InputSourceIndicator.panel-button, // Ibus
Gjs_appindicatorsupport_rgcjonas_gmail_com_indicatorStatusIcon_IndicatorStatusIcon.panel-button,
Gjs_appindicatorsupport_rgcjonas_gmail_com_indicatorStatusIcon_AppIndicatorsIndicatorStatusIcon.panel-button { // Fcitx Gjs_appindicatorsupport_rgcjonas_gmail_com_indicatorStatusIcon_AppIndicatorsIndicatorStatusIcon.panel-button { // Fcitx
-natural-hpadding: 12px + $base_padding !important; -natural-hpadding: 12px + $base_padding !important;
-minimum-hpadding: 12px + $base_padding !important; -minimum-hpadding: 12px + $base_padding !important;
@ -306,4 +385,7 @@ $panel_height: $menuitem_size;
// indicator for active // indicator for active
.screencast-indicator, .screencast-indicator,
.remote-access-indicator { color: $warning_color; } .remote-access-indicator { color: $warning_color; }
// important privacy related indicators
.privacy-indicator { color: $warning_color; }
} }

View File

@ -146,6 +146,12 @@ $popop_menuitem_radius: $po_radius - $base_padding;
} }
&:insensitive { color: $disabled_fg_color !important; } &:insensitive { color: $disabled_fg_color !important; }
// add margin to switches in menu items
.toggle-switch {
&:ltr { margin-left: $base_margin; }
&:rtl { margin-right: $base_margin; }
}
} }
.popup-sub-menu { .popup-sub-menu {
@ -171,6 +177,11 @@ $popop_menuitem_radius: $po_radius - $base_padding;
} }
} }
.popup-ornamented-menu-item {
&:ltr { padding-left: $base_padding; }
&:rtl { padding-right: $base_padding; }
}
.popup-inactive-menu-item { //all icons and other graphical elements .popup-inactive-menu-item { //all icons and other graphical elements
color: $alt_fg_color !important; color: $alt_fg_color !important;
@ -186,11 +197,8 @@ $popop_menuitem_radius: $po_radius - $base_padding;
// container for radio and check boxes // container for radio and check boxes
.popup-menu-ornament { .popup-menu-ornament {
width: 1.2em; icon-size: $scalable_icon_size !important;
text-align: center !important; width: $scalable_icon_size;
&:ltr { text-align: right; }
&:rtl { text-align: left; }
} }
// desktop background menu // desktop background menu

View File

@ -8,11 +8,14 @@
// switcher onscreen panel // switcher onscreen panel
.switcher-list { .switcher-list {
@extend %osd_panel; @extend %osd_panel;
border-radius: $bt_radius * 2 + $base_padding * 2;
.item-box { .item-box {
padding: 8px; padding: 8px;
border-radius: $bt_radius; border-radius: $bt_radius * 2;
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent;
color: $fg_color;
&:outlined { &:outlined {
background-color: $divider_color; background-color: $divider_color;

View File

@ -58,6 +58,10 @@
margin-top: 0 !important; margin-top: 0 !important;
padding: $dash_padding !important; padding: $dash_padding !important;
#dashtodockDashContainer {
padding: $dash_padding 0 !important;
}
.dash-background { .dash-background {
margin-bottom: 0 !important; margin-bottom: 0 !important;
padding: $dash_padding !important; padding: $dash_padding !important;
@ -67,6 +71,84 @@
padding: $dash_spacing $base_padding !important; padding: $dash_spacing $base_padding !important;
} }
} }
&.extended {
#dash {
#dashtodockDashContainer {
padding: 0 !important;
#dashtodockDashScrollview:first-child {
padding-top: 0 !important;
}
#dashtodockDashScrollview:last-child {
padding-bottom: 0 !important;
}
& > :first-child {
.show-apps {
padding-bottom: $container_padding !important;
}
}
& > :last-child {
.show-apps {
padding-bottom: $dash_padding + $container_padding !important;
}
}
}
}
}
}
&.top,
&.bottom {
#dash {
margin-top: 0 !important;
padding: $dash_padding !important;
#dashtodockDashContainer {
padding: $dash_padding 0 !important;
}
.dash-background {
margin-bottom: 0 !important;
padding: $dash_padding !important;
border-left: none !important;
}
.dash-item-container .app-well-app, .show-apps {
padding: $base_padding $dash_spacing !important;
}
}
&.extended {
#dash {
#dashtodockDashContainer {
padding: 0 !important;
#dashtodockDashScrollview:first-child {
padding-left: 0 !important;
}
#dashtodockDashScrollview:last-child {
padding-right: 0 !important;
}
& > :first-child {
.show-apps {
padding-left: $container_padding !important;
}
}
& > :last-child {
.show-apps {
padding-right: $dash_padding + $container_padding !important;
}
}
}
}
}
} }
#dash { // default-mode #dash { // default-mode
@ -95,13 +177,13 @@
background-color: if($variant == 'light', rgba(white, 0.35), $light_track_color); background-color: if($variant == 'light', rgba(white, 0.35), $light_track_color);
} }
} }
}
.dash-background { .dash-background {
background-color: $dash_bg; background-color: $dash_bg;
border: 1px solid if($variant == 'light', rgba(black, 0.08), rgba(black, 0.75)); border: 1px solid if($variant == 'light', rgba(black, 0.08), rgba(black, 0.75));
box-shadow: inset 0 0 0 1px rgba(white, 0.05); box-shadow: inset 0 0 0 1px rgba(white, 0.05);
} }
}
&:overview #dash { // overview-mode #1 &:overview #dash { // overview-mode #1
background: none; background: none;

View File

@ -19,6 +19,66 @@ $app_icon_padding: 24px;
} }
} }
/* App Icons */
.show-apps,
.app-well-app {
@include font(body-1);
.overview-icon.overview-icon-with-label {
padding: 10px 12px 14px;
> StBoxLayout {
spacing: 6px;
}
}
.overview-icon {
color: $light_fg_color;
border-radius: $wm_radius * 1.5;
padding: 12px;
border: none;
transition-duration: 100ms;
text-align: center;
text-shadow: none;
background-color: transparent;
}
&:hover .overview-icon,
&:focus .overview-icon,
&:selected .overview-icon {
background-color: $light_divider_color;
border-image: none;
background-image: none;
}
&:active .overview-icon,
&:checked .overview-icon {
background-color: $light_track_color;
box-shadow: none;
}
}
// App Folders
.app-folder {
background: none;
border-radius: $wm_radius * 1.5;
padding: 0;
margin: 0;
.overview-icon {
background-color: $light_divider_color;
border-radius: $wm_radius * 1.5;
}
&:hover .overview-icon {
background-color: rgba(white, 0.2);
}
&:active .overview-icon {
background-color: rgba(white, 0.3);
}
}
.app-folder-icon { .app-folder-icon {
padding: $base_padding; padding: $base_padding;
spacing-rows: $base_spacing; spacing-rows: $base_spacing;

View File

@ -11,6 +11,66 @@
page-padding-right: 12px; page-padding-right: 12px;
} }
/* App Icons */
.show-apps,
.app-well-app {
@include font(body-1);
.overview-icon.overview-icon-with-label {
padding: 10px 12px 14px;
> StBoxLayout {
spacing: 6px;
}
}
.overview-icon {
color: $light_fg_color;
border-radius: $wm_radius * 1.5;
padding: 12px;
border: none;
transition-duration: 100ms;
text-align: center;
text-shadow: none;
background-color: transparent;
}
&:hover .overview-icon,
&:focus .overview-icon,
&:selected .overview-icon {
background-color: $light_divider_color;
border-image: none;
background-image: none;
}
&:active .overview-icon,
&:checked .overview-icon {
background-color: $light_track_color;
box-shadow: none;
}
}
// App Folders
.app-folder {
background: none;
border-radius: $wm_radius * 1.5;
padding: 0;
margin: 0;
.overview-icon {
background-color: $light_divider_color;
border-radius: $wm_radius * 1.5;
}
&:hover .overview-icon {
background-color: rgba(white, 0.2);
}
&:active .overview-icon {
background-color: rgba(white, 0.3);
}
}
.app-folder-dialog { .app-folder-dialog {
.page-navigation-hint { .page-navigation-hint {
width: if($laptop == 'true', 60px, 80px); width: if($laptop == 'true', 60px, 80px);

View File

@ -23,7 +23,7 @@ $dash_border_radius: $dash_padding * 1.5 + 12px;
.dash-background { .dash-background {
background-color: $dash_background_color; background-color: $dash_background_color;
margin-bottom: $dash_bottom_margin; margin-bottom: $dash_bottom_margin;
padding: $dash_padding $dash_padding - $dash_spacing * 2; padding: $dash_padding $dash_padding - $dash_spacing * 2 !important;
border-radius: $dash_border_radius; border-radius: $dash_border_radius;
} }
@ -34,12 +34,12 @@ $dash_border_radius: $dash_padding * 1.5 + 12px;
> * { margin: 0; } > * { margin: 0; }
.app-well-app, .show-apps { .app-well-app, .show-apps {
padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin; padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin !important;
} }
.overview-icon { .overview-icon {
padding: $dash_padding / 2; padding: $dash_padding / 2;
border-radius: $dash_padding / 2 + 12px; border-radius: $dash_border_radius - $dash_padding;
} }
} }

View File

@ -11,6 +11,66 @@
page-padding-right: 18px; page-padding-right: 18px;
} }
/* App Icons */
.show-apps,
.app-well-app {
@include font(body-1);
.overview-icon.overview-icon-with-label {
padding: 10px 12px 14px;
> StBoxLayout {
spacing: 6px;
}
}
.overview-icon {
color: $light_fg_color;
border-radius: $wm_radius * 1.5;
padding: 12px;
border: none;
transition-duration: 100ms;
text-align: center;
text-shadow: none;
background-color: transparent;
}
&:hover .overview-icon,
&:focus .overview-icon,
&:selected .overview-icon {
background-color: $light_divider_color;
border-image: none;
background-image: none;
}
&:active .overview-icon,
&:checked .overview-icon {
background-color: $light_track_color;
box-shadow: none;
}
}
// App Folders
.app-folder {
background: none;
border-radius: $wm_radius * 1.5;
padding: 0;
margin: 0;
.overview-icon {
background-color: $light_divider_color;
border-radius: $wm_radius * 1.5;
}
&:hover .overview-icon {
background-color: rgba(white, 0.2);
}
&:active .overview-icon {
background-color: rgba(white, 0.3);
}
}
.app-folder-dialog { .app-folder-dialog {
.page-navigation-hint { .page-navigation-hint {
width: if($laptop == 'true', 60px, 80px); width: if($laptop == 'true', 60px, 80px);

View File

@ -125,7 +125,7 @@
.quick-slider { .quick-slider {
& > StBoxLayout { spacing: $base_padding; } & > StBoxLayout { spacing: $base_padding; }
.icon-button { padding: $base_padding; } .icon-button { padding: $scaled_padding * 1.5; }
.slider-bin { .slider-bin {
&:focus { @include button(focus); } &:focus { @include button(focus); }

View File

@ -0,0 +1,166 @@
/* App Grid */
$app_icon_size: 96px;
$app_folder_size: 720px;
// app icons
.icon-grid {
row-spacing: 12px;
column-spacing: 12px;
max-row-spacing: 36px;
max-column-spacing: 36px;
page-padding-top: 24px;
page-padding-bottom: 24px;
page-padding-left: 18px;
page-padding-right: 18px;
}
/* App Icons */
// items in the app grid and dash
.overview-tile {
color: $light_alt_fg_color;
background-color: transparent;
&:focus { color: $light_fg_color; background-color: $light_divider_color; }
&:hover { color: $light_fg_color; background-color: $light_divider_color; }
&:active { color: $light_fg_color; background-color: $light_track_color; }
&:highlighted,&:selected,
&:checked { color: $light_fg_color; background-color: $light_track_color; }
&:insensitive { color: $light_alt_disabled_fg_color; background-color: transparent; }
// override the %tile style
border-radius: $wm_radius * 1.5;
padding: 12px;
spacing: $base_padding;
text-align: center;
transition-duration: 100ms;
// the icon itself
.overview-icon {
// item with a label
&.overview-icon-with-label {
> StBoxLayout {
spacing: 6px;
}
}
}
}
// Running app indicator (also shown in dash)
.app-grid-running-dot {
width: 5px;
height: 5px;
border-radius: 5px;
background-color: $light_alt_fg_color;
margin-bottom: 6px;
StWidget.focused & {
background-color: $primary_color;
}
}
.app-folder {
background-color: $light_divider_color;
&:focus { background-color: $light_divider_color; }
&:hover { background-color: rgba(white, 0.2); }
&:active { background-color: rgba(white, 0.3); }
&:highlighted,&:selected,
&:checked { background-color: rgba(white, 0.3); }
&:insensitive { background-color: transparent; }
}
.app-folder-dialog-container {
// pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
padding-top: $menuitem_size;
}
// Expanded app folder dialog
.app-folder-dialog {
width: $app_folder_size;
height: $app_folder_size;
& .page-indicators {
margin-bottom: $base_padding * 4;
}
& .icon-button, & .page-navigation-arrow {
color: $light_alt_fg_color;
background-color: transparent;
border: none !important;
&:hover {
background-color: $light_divider_color;
color: $light_fg_color;
}
&:active {
background-color: $light_track_color;
color: $light_fg_color;
}
}
}
.apps-scroll-view {
padding: 0;
}
// shutdown and other actions in the grid
.system-action-icon {
background-color: $light_fill_color;
color: $light_fg_color;
border-radius: $circular_radius;
icon-size: $app_icon_size * 0.5;
}
.page-navigation-hint {
width: if($laptop == 'true', 220px, 300px);
&.dnd {
background: rgba(255, 255, 255, 0.1);
}
&.next:ltr,
&.previous:rtl {
background-gradient-start: $light_divider_color;
background-gradient-end: transparent;
background-gradient-direction: horizontal;
border-radius: $modal_radius 0px 0px $modal_radius;
}
&.previous:ltr,
&.next:rtl {
background-gradient-start: transparent;
background-gradient-end: $light_divider_color;
background-gradient-direction: horizontal;
border-radius: 0px $modal_radius $modal_radius 0px;
}
}
.page-navigation-arrow {
margin: $base_padding;
padding: $base_padding * 3;
width: 24px;
height: 24px;
border-radius: $circular_radius;
color: $light_alt_fg_color;
background-color: transparent;
> StIcon { color: $light_fg_color; }
&:insensitive {
background-color: $light_fill_color;
color: $light_alt_disabled_fg_color;
}
&:hover {
background-color: $light_divider_color;
color: $light_fg_color;
}
&:active {
background-color: $light_track_color;
color: $light_fg_color;
}
}

View File

@ -0,0 +1,94 @@
/* Dash */
$dash_background_color: rgba(white, 0.15);
$dash_placeholder_size: 32px;
$dash_padding: $base_padding * 2;
$dash_edge_offset: $base_margin * 3;
$dash_border_radius: 20px + $dash_padding;
$dash_spacing: $base_margin * 0.5;
// container for the dash
#dash {
margin-top: $dash_edge_offset;
// background behind item container
.dash-background {
background-color: $dash_background_color;
border-radius: $dash_border_radius;
padding-top: $dash_padding;
padding-bottom: $dash_padding;
padding-left: $dash_padding - $dash_spacing; // subtract the margins added to .overview-tile below
padding-right: $dash_padding - $dash_spacing;
}
// items on the dash
.dash-item-container {
.placeholder {
// background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
background-image: none;
background-size: contain;
height: $dash_placeholder_size;
}
.empty-dash-drop-target {
width: $dash_placeholder_size;
height: $dash_placeholder_size;
}
// IMPORTANT: items on the dash need to extend to the edge to be adequate click targets
// as such the %tile style is overriden and button styles are applied to the child class .overview-icon
.show-apps,
.overview-tile {
// remove styles
background: none;
box-shadow: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0 $dash_spacing;
padding-bottom: $dash_edge_offset; // align with other items
.overview-icon {
border-radius: 20px;
padding: $base_padding;
spacing: $base_padding;
text-align: center;
transition-duration: 100ms;
background: none;
}
&:focus .overview-icon { background-color: $light_divider_color; }
&:hover .overview-icon { background-color: $light_divider_color; }
&:active .overview-icon { background-color: $light_track_color; }
&:highlighted .overview-icon,&:selected .overview-icon,
&:checked .overview-icon { background-color: $light_track_color; }
&:insensitive .overview-icon { background-color: transparent; }
}
// running app dot
.app-grid-running-dot {
// 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
}
}
// separator between pinned and running apps
.dash-separator {
width: 1px;
margin-left:$base_margin;
margin-right:$base_margin;
background-color: rgba(white, 0.25);
}
// make sure all dash components have same margin from screen edge
.dash-separator,
.dash-background {
margin-bottom: $dash_edge_offset;
}
}
// OSD Tooltip
.dash-label {
-y-offset: $base_margin * 2; // distance from the dash edge
}

View File

@ -0,0 +1,254 @@
/* Message List */
// a.k.a. notifications in the menu
.message-list {
width: 29em;
padding: 0 $base_margin;
text-shadow: none;
border: none;
// padding and margins to account for scrollbar
&:ltr {
margin-left: 0;
margin-right: 0;
padding-right: 0;
border-right-width: 0;
}
&:rtl {
margin-right: 0;
margin-left: 0;
padding-left: 0;
border-left-width: 0;
}
.message-list-placeholder {
@extend %title_2;
color: $disabled_fg_color;
// icon size and color
> StIcon {
icon-size: 96px; // 48px
margin-bottom: $base_margin * 3;
-st-icon-style: symbolic;
}
}
}
.message-list-sections {
spacing: $base_padding * 2;
// to account for scrollbar
&:ltr { margin-right: $base_margin * 3; }
&:rtl { margin-left: $base_margin * 3; }
}
.message-list-section,
.message-list-section-list {
spacing: $base_padding * 2;
}
// do-not-disturb + clear button
.message-list-controls {
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: $base_padding * 2;
padding-bottom: $base_padding;
spacing: $base_padding;
@extend %heading;
.dnd-button {
// We need this because the focus outline isn't inset like for the buttons
// so the dnd button would grow when it gets focus if we didn't change only
// its color when focusing.
border-width: 2px;
border-color: transparent;
border-radius: 32px;
border-style: solid;
&:focus {
border-color: transparentize($selected_bg_color, 0.4);
}
}
}
$card_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($base_color, 8%), 0.95));
%card {
border-radius: $base_border_radius;
padding: $scaled_padding;
margin: $base_margin;
background-color: $card_bg;
box-shadow: 0 1px 2px 0 rgba(black, 0.02);
// bit of a hack here with border since we can't have double box-shadow
color: $alt_fg_color;
&:hover, &:focus {
color: $fg_color;
background-color: if($variant == 'light', rgba($card_bg, 1), rgba(lighten($card_bg, 5%), 1));
box-shadow: 0 1px 3px rgba(black, 0.05) !important;
}
&:active {
color: $fg_color;
background-color: if($variant == 'light', darken($card_bg, 1%), lighten($card_bg, 3%));
box-shadow: none !important;
}
&:insensitive {
color: $alt_disabled_fg_color;
background-color: rgba($card_bg, 0.5);
box-shadow: none !important;
}
}
// message bubbles
.message {
@extend %card;
border: 1px solid transparent;
border-left: none;
// subtract side padding to accommodate the close button's border
&:ltr { padding-right:-2px; }
&:rtl { padding-left:-2px; }
// message header
.message-header {
padding: 0 $scaled_padding;
margin: $base_padding;
margin-bottom: 0;
spacing: $base_padding;
color: $disabled_fg_color;
// header source icon
.message-source-icon {
icon-size: $scalable_icon_size; // 16px
-st-icon-style: symbolic;
}
// box that contains the source icon, source name and timestamp of the message
.message-header-content {
spacing: $base_padding;
min-height: to_em(24px);
padding-bottom: $base_padding;
// header source title
.message-source-title {
font-weight: bold;
}
// Time label
.event-time {
@extend %caption;
color: $disabled_fg_color;
// Add bottom padding to align the app name with the time horizontally
padding-bottom: to_em(1px);
&:ltr { text-align: right; }
&:rtl { text-align: left; }
}
}
// buttons in the message header
.message-expand-button,
.message-close-button {
@extend .icon-button;
color: $fg_color;
background-color: transparentize($fg_color, .9);
padding: 4px;
border: none;
&:hover { background-color: transparentize($fg_color, .81); }
&:active,
&:active:hover { background-color: transparentize($fg_color, .76); }
&:insensitive { background-color: transparentize($fg_color, .93); }
}
.message-expand-button {
padding: 4px;
&:ltr { margin-right: $base_padding; }
&:rtl { margin-left: $base_padding; }
}
}
// container for message contents
.message-box {
padding: $base_padding;
margin: $base_padding;
margin-top: 0;
spacing: $base_padding;
// icon of the message
.message-icon {
&:ltr { margin-right:$base_padding; }
&:rtl { margin-left:$base_padding; }
// icon size and color
icon-size: $base_icon_size * 3; // 48px
-st-icon-style: symbolic;
&.message-themed-icon {
border-radius: $circular_radius; // is circular
background-color: transparentize($fg_color, 0.8);
icon-size: $base_icon_size;
min-width: $base_icon_size * 3;
min-height: $base_icon_size * 3;
}
}
// If the header isn't displayed we need more top margin
&:first-child {
margin-top: $base_padding * 2;
}
// text of the message
.message-content {
spacing: $base_margin;
// message title
.message-title {
font-weight: bold;
}
}
}
.message-secondary-bin {
padding: 0 $base_margin * 2;
> .event-time {
color: $hint_fg_color;
font-size: 1em;
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-bottom: 0.13em;
&:ltr { text-align: right; }
&:rtl { text-align: left; }
}
}
}
// URLs in messages
.url-highlighter {
link-color: $link_color;
}
.message-media-control {
margin: 7px 4px !important;
padding: 8px !important;
border-radius: $circular_radius;
color: $alt_fg_color;
&:hover, &:focus { color: $fg_color; background-color: $divider_color; }
&:active { color: $fg_color; background-color: $track_color; }
&:insensitive { color: $disabled_fg_color; }
StIcon { icon-size: $base_icon_size; }
}
.media-message {
// album-art
.message-icon {
border-radius: $bt_radius !important;
&.message-themed-icon {
icon-size: $large_icon_size !important; // 32px
}
}
}

View File

@ -0,0 +1,77 @@
/* Notifications & Message Tray */
$notification_banner_height: 64px;
$notification_banner_width: 34em;
// Banner notifications
.notification-banner {
min-height: $notification_banner_height;
width: $notification_banner_width;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
border-radius: $wm_radius;
margin: $base_padding;
padding: $scaled_padding;
border-left: 0;
border-bottom: 0;
}
.notification-buttons-bin {
spacing: 0;
padding: 0;
}
.notification-button {
min-height: 40px;
padding: 0 16px;
background-color: $fill_color;
color: $alt_fg_color;
font-weight: 500;
border: none;
margin-right: $scaled_padding !important;
&:focus {
background-color: $base_color;
color: $fg_color;
box-shadow: inset 0 0 0 2px $divider_color !important;
}
&:hover {
background-color: $divider_color;
color: $fg_color;
box-shadow: none;
}
&:active, &:checked {
background-color: $track_color;
color: $fg_color;
}
&:insensitive {
background-color: transparent;
color: $alt_disabled_fg_color;
}
&:first-child:ltr {
border-radius: $bt_radius;
}
&:last-child:ltr {
border-radius: $bt_radius;
margin-right: $scaled_padding !important;
}
&:first-child:rtl {
border-radius: $bt_radius;
}
&:last-child:rtl {
border-radius: $bt_radius;
margin-left: 0 !important;
}
&:first-child:last-child {
border-radius: $bt_radius;
margin-left: 0 !important;
margin-right: $scaled_padding !important;
}
}

View File

@ -28,8 +28,17 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
-gtk-secondary-caret-color: $selected_bg_color; -gtk-secondary-caret-color: $selected_bg_color;
} }
$side_style_shadow: linear-gradient(to left, rgba(black, if($variant == 'light', 0.02, 0.1)), transparent 6px);
%side_style_left {
background-image: $side_style_shadow;
background-color: rgba($dark_sidebar_bg, 1);
box-shadow: none;
border: none;
}
%side_headerbar_left { %side_headerbar_left {
background-image: none; background-image: $side_style_shadow;
background-color: rgba($dark_sidebar_bg, 1); background-color: rgba($dark_sidebar_bg, 1);
box-shadow: inset 0 1px $highlight_color; box-shadow: inset 0 1px $highlight_color;
border: none; border: none;
@ -44,7 +53,7 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
%side_searchbar { %side_searchbar {
> revealer > box { > revealer > box {
background-color: rgba($dark_sidebar_bg, 1); background-color: rgba($dark_sidebar_bg, 1);
border-color: $dark_sidebar_border; background-image: $side_style_shadow;
} }
} }
@ -57,11 +66,11 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
} }
$list_shadow: if($variant == 'light', $list_shadow: if($variant == 'light',
(inset 0 0 8px rgba(black, 0.02), inset 0 0 3px rgba(black, 0.01), inset 0 0 0 1px rgba(black, 0.04), inset 0 1px rgba(black, 0.05)), (inset 0 0 8px rgba(black, 0.01), inset 0 0 3px rgba(black, 0.01), inset 0 0 0 1px rgba(black, 0.04), inset 0 1px rgba(black, 0.05)),
(inset 0 0 8px rgba(white, 0.03), inset 0 0 3px rgba(white, 0.02), inset 0 0 0 1px rgba(white, 0.04), inset 0 1px rgba(white, 0.06))); (inset 0 0 8px rgba(white, 0.01), inset 0 0 3px rgba(white, 0.02), inset 0 0 0 1px rgba(white, 0.04), inset 0 1px rgba(white, 0.06)));
%circular_list { %circular_list {
border-radius: $wm_radius; border-radius: $bd_radius;
box-shadow: $list_shadow; box-shadow: $list_shadow;
background-color: if($variant == 'light', rgba(black, 0.03), rgba(white, 0.05)); background-color: if($variant == 'light', rgba(black, 0.03), rgba(white, 0.05));
border: none; border: none;
@ -77,24 +86,41 @@ $list_shadow: if($variant == 'light',
%circular_row { %circular_row {
&:first-child { &:first-child {
border-top-left-radius: $wm_radius; border-top-left-radius: $bd_radius;
border-top-right-radius: $wm_radius; border-top-right-radius: $bd_radius;
} }
&:last-child { // Not use ? &:last-child { // Not use ?
border-bottom-left-radius: $wm_radius; border-bottom-left-radius: $bd_radius;
border-bottom-right-radius: $wm_radius; border-bottom-right-radius: $bd_radius;
} }
&:only-child { &:only-child {
border-radius: $wm_radius; border-radius: $bd_radius;
}
& + row {
border-top: 1px solid transparent;
border-image: linear-gradient(to right,
transparent 0%,
transparent 2%,
$menu_bd 2%,
$menu_bd 98%,
transparent 98%,
transparent 100%) 1 0 0 0 / 1px 0 0 0 stretch;
}
&:hover, &:active, &:selected {
&, & + row {
border-image: none;
}
} }
} }
%sidebar_row { %sidebar_row {
margin: 2px 4px; margin: 2px 4px;
border-radius: $wm_radius - 4px; border-radius: $bd_radius;
-gtk-outline-radius : $wm_radius - 6px; -gtk-outline-radius : $bd_radius - 2px;
} }
// catch all extend // catch all extend
@ -662,8 +688,8 @@ $_dot_color: $selected_bg_color;
%flat_button { %flat_button {
@include button(flat-normal); @include button(flat-normal);
&:hover { @include button(flat-hover); } &:hover { @include button(flat-hover); }
&:active, &:active:hover { @include button(flat-active); } &:active { @include button(flat-active); }
&:checked, &:checked:hover { @include button(flat-checked); } &:checked { @include button(flat-checked); }
&:disabled { @include button(flat-insensitive); } &:disabled { @include button(flat-insensitive); }
} }
@ -713,6 +739,7 @@ button {
} }
&:active, &:checked { &:active, &:checked {
@include button(active);
background-clip: if($variant=='light', border-box, padding-box); background-clip: if($variant=='light', border-box, padding-box);
transition-duration: 200ms; transition-duration: 200ms;
@ -721,33 +748,13 @@ button {
&:disabled { &:disabled {
@include button(insensitive); @include button(insensitive);
}
.background & {
&:active, &:checked {
@include button(active);
}
&:disabled {
&:active, &:checked { &:active, &:checked {
@include button(insensitive-active); @include button(insensitive-active);
} }
} }
}
.background &.flat { // reset &.image-button, &.popup {
&:active, &:checked {
@include button(flat-active);
}
&:disabled {
&:active, &:checked {
@include button(flat-insensitive-active);
}
}
}
&.image-button:not(.circular), &.popup:not(.circular) {
min-height: $menuitem_size - 4px; min-height: $menuitem_size - 4px;
min-width: $menuitem_size - 4px; min-width: $menuitem_size - 4px;
padding-left: $container_padding - 2px; padding-left: $container_padding - 2px;
@ -785,8 +792,11 @@ button {
&.popup { padding-right: $container_padding; padding-left: $container_padding; } &.popup { padding-right: $container_padding; padding-left: $container_padding; }
} }
&.close, &.circular, &.circular.flat, &.close,
&.image-button.close:not(.circular) { // The Bloody Circul Button &.circular,
&.circular.image-button,
&.circular.flat,
&.image-button.close { // The Bloody Circul Button
@extend %circular_button; @extend %circular_button;
&:active, &:checked { &:active, &:checked {
@ -1888,6 +1898,10 @@ headerbar {
stack.titlebar { box-shadow: none; } stack.titlebar { box-shadow: none; }
} }
label.titlebar {
background-color: $header_bg;
}
window.background.csd.unified { window.background.csd.unified {
> deck > box.vertical > stack > headerbar.titlebar.windowhandle { > deck > box.vertical > stack > headerbar.titlebar.windowhandle {
> box > separator { background: none; } > box > separator { background: none; }
@ -2488,16 +2502,19 @@ notebook {
} }
button.flat.toggle.popup { button.flat.toggle.popup {
min-width: $medium_size;
border: none; border: none;
box-shadow: none; box-shadow: none;
border-radius: $bt_radius;
padding: 0 $container_padding / 2;
@if $monterey == 'true' { @if $monterey == 'true' {
min-width: $medium_size;
margin-top: -2px; margin-top: -2px;
margin-bottom: -2px; margin-bottom: -2px;
margin-left: $container_padding / 2; margin-left: $container_padding / 2;
border-radius: $bt_radius;
padding: 0 $container_padding / 2;
} @else {
border-radius: 0;
padding: 0;
} }
&:active, &:checked { &:active, &:checked {
@ -2599,36 +2616,26 @@ notebook {
button.flat, button.flat,
button.close-button, button.close-button,
button.image-button.flat { button.image-button.flat {
border: none;
box-shadow: none;
border-radius: 3px; border-radius: 3px;
padding: 0; padding: 0;
color: mix($bg_color, $fg_color, 35%); color: $alt_fg_color;
margin-left: $container_padding / 2;
margin-right: -$container_padding;
@if $monterey == 'false' {
min-height: $small_size;
min-width: $small_size;
margin-top: 2px;
margin-bottom: 2px;
} @else {
min-height: 16px; min-height: 16px;
min-width: 16px; min-width: 16px;
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
margin-left: $container_padding / 2; margin-left: $container_padding / 2;
margin-right: -$container_padding / 2; margin-right: -$container_padding / 2;
}
&:hover { &:hover {
@extend %undecorated_button;
color: $fg_color; color: $fg_color;
background-color: rgba($borders_color, 0.1); background-color: rgba($fg_color, 0.1);
} }
&:active { &:active {
@extend %undecorated_button;
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%)); color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
background-color: rgba($borders_color, 0.2); background-color: rgba($fg_color, 0.2);
} }
} }
} }
@ -2674,9 +2681,9 @@ scrollbar {
// slider // slider
slider { slider {
min-width: $container_padding - 2px; min-width: $container_padding + 2px;
min-height: $container_padding - 2px; min-height: $container_padding + 2px;
margin: -1px; margin: 0;
border: 4px solid transparent; border: 4px solid transparent;
border-radius: $container_padding * 2; border-radius: $container_padding * 2;
background-clip: padding-box; background-clip: padding-box;
@ -2704,26 +2711,24 @@ scrollbar {
background-color: transparent; background-color: transparent;
slider { slider {
margin: 0; margin: $container_padding / 2;
min-width: $container_padding - 2px; min-width: $container_padding - 2px;
min-height: $container_padding - 2px; min-height: $container_padding - 2px;
background-color: mix($fg_color, $bg_color, 70%); background-color: mix($fg_color, $bg_color, 70%);
border: 1px solid $borders_color; border: none;
} }
&.horizontal slider { &.horizontal slider {
margin: 0 $container_padding / 2;
min-width: $_slider_min_length; min-width: $_slider_min_length;
} }
&.vertical slider { &.vertical slider {
margin: $container_padding / 2 0;
min-height: $_slider_min_length; min-height: $_slider_min_length;
} }
} }
&.dragging, &.dragging,
&.hovering { opacity: 0.99; } &.hovering { opacity: 1; }
} }
&.horizontal slider { min-width: $_slider_min_length; } &.horizontal slider { min-width: $_slider_min_length; }
@ -2761,8 +2766,8 @@ switch {
background-color: transparent; background-color: transparent;
background-clip: padding-box; background-clip: padding-box;
color: transparent; color: transparent;
min-width: 40px; min-width: 32px;
min-height: 24px; min-height: 20px;
font-size: 0; font-size: 0;
box-shadow: inset 0 1px 2px rgba(black, 0.1); box-shadow: inset 0 1px 2px rgba(black, 0.1);
background-image: $switch_image, radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%); background-image: $switch_image, radial-gradient(circle farthest-corner at center, transparent 0%, transparent 0%);
@ -2796,8 +2801,8 @@ switch {
slider { slider {
transition: $longer_transition, $shadow_transition, margin 0; transition: $longer_transition, $shadow_transition, margin 0;
min-width: 22px; min-width: 18px;
min-height: 22px; min-height: 18px;
margin: 1px 0 1px 1px; margin: 1px 0 1px 1px;
border-radius: $circular_radius; border-radius: $circular_radius;
-gtk-outline-radius: $circular_radius; -gtk-outline-radius: $circular_radius;

View File

@ -35,41 +35,61 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
} }
$list_shadow: if($variant == 'light', $list_shadow: if($variant == 'light',
(inset 0 0 8px rgba(black, 0.02), inset 0 0 3px rgba(black, 0.01), inset 0 0 0 1px rgba(black, 0.04), inset 0 1px rgba(black, 0.05)), (inset 0 0 0 1px rgba(black, 0.04), inset 0 1px rgba(black, 0.05)),
(inset 0 0 8px rgba(white, 0.03), inset 0 0 3px rgba(white, 0.02), inset 0 0 0 1px rgba(white, 0.04), inset 0 1px rgba(white, 0.06))); (inset 0 0 0 1px rgba(white, 0.04), inset 0 1px rgba(white, 0.06)));
%circular_list { %circular_list {
border-radius: $wm_radius; border-radius: $bd_radius;
box-shadow: $list_shadow; box-shadow: $list_shadow;
background-color: if($variant == 'light', rgba(black, 0.03), rgba(white, 0.05)); background-color: if($variant == 'light', rgba(black, 0.03), rgba(white, 0.05));
border: none; border: none;
color: $text_color; color: $text_color;
> separator { background: none; min-height: 0; } > separator {
min-height: 0;
background-color: transparent;
}
} }
%circular_row { %circular_row {
border: none; border: none;
&:first-child { &:first-child {
border-top-left-radius: $wm_radius; border-top-left-radius: $bd_radius;
border-top-right-radius: $wm_radius; border-top-right-radius: $bd_radius;
} }
&:last-child { // Not use ? &:last-child { // Not use ?
border-bottom-left-radius: $wm_radius; border-bottom-left-radius: $bd_radius;
border-bottom-right-radius: $wm_radius; border-bottom-right-radius: $bd_radius;
} }
&:only-child { &:only-child {
border-radius: $wm_radius; border-radius: $bd_radius;
}
& + row {
border-top: 1px solid transparent;
border-image: linear-gradient(to right,
transparent 0%,
transparent 2%,
$menu_bd 2%,
$menu_bd 98%,
transparent 98%,
transparent 100%) 1 0 0 0 / 1px 0 0 0 stretch;
}
&:hover, &:active, &:selected {
&, & + row {
border-image: none;
}
} }
} }
%sidebar_row { %sidebar_row {
margin: 2px 4px; margin: 2px 4px;
border-radius: $wm_radius - 4px; border-radius: $bd_radius;
-gtk-outline-radius : $wm_radius - 6px; -gtk-outline-radius : $bd_radius - 2px;
} }
// catch all extend // catch all extend
@ -99,11 +119,13 @@ $list_shadow: if($variant == 'light',
border-top-left-radius: $bt_radius; border-top-left-radius: $bt_radius;
border-bottom-left-radius: $bt_radius; border-bottom-left-radius: $bt_radius;
} }
&:last-child { &:last-child {
border-top-right-radius: $bt_radius; border-top-right-radius: $bt_radius;
border-bottom-right-radius: $bt_radius; border-bottom-right-radius: $bt_radius;
border-right-style: solid; border-right-style: solid;
} }
&:only-child { &:only-child {
border-radius: $bt_radius; border-radius: $bt_radius;
border-style: solid; border-style: solid;
@ -118,15 +140,18 @@ $list_shadow: if($variant == 'light',
%linked_vertical{ %linked_vertical{
border-radius: 0; border-radius: 0;
border-bottom-style: none; border-bottom-style: none;
&:first-child { &:first-child {
border-top-left-radius: $bt_radius; border-top-left-radius: $bt_radius;
border-top-right-radius: $bt_radius; border-top-right-radius: $bt_radius;
} }
&:last-child { &:last-child {
border-bottom-left-radius: $bt_radius; border-bottom-left-radius: $bt_radius;
border-bottom-right-radius: $bt_radius; border-bottom-right-radius: $bt_radius;
border-bottom-style: solid; border-bottom-style: solid;
} }
&:only-child { &:only-child {
border-radius: $bt_radius; border-radius: $bt_radius;
border-style: solid; border-style: solid;
@ -335,9 +360,6 @@ label {
color: $fg_color; color: $fg_color;
} }
row:selected &,
&:selected { @extend %nobg_selected_items; }
> selection { > selection {
color: $selected_fg_color; color: $selected_fg_color;
background-color: $selected_bg_color; background-color: $selected_bg_color;
@ -346,6 +368,7 @@ label {
&:disabled { &:disabled {
opacity: 1; opacity: 1;
color: $disabled_fg_color; color: $disabled_fg_color;
selection { color: mix($selected_fg_color, $selected_bg_color, 50%); } selection { color: mix($selected_fg_color, $selected_bg_color, 50%); }
} }
} }
@ -903,7 +926,9 @@ button {
@at-root %pill_button, @at-root %pill_button,
&.pill { &.pill {
padding: $container_padding * 1.5 $container_padding * 5; min-height: $menuitem_size - 4px;
min-width: $menuitem_size - 4px;
padding: $container_padding;
border-radius: $circular_radius; border-radius: $circular_radius;
} }
@ -950,25 +975,35 @@ button {
// big standalone buttons like in Documents pager // big standalone buttons like in Documents pager
&.osd { &.osd {
color: $osd_fg_color; color: white;
background-color: $osd_bg_color; background-color: rgba(black, 0.65);
border-color: darken($osd_bg_color, 8%); border: none;
box-shadow: none; box-shadow: none;
&.image-button { &.image-button {
padding: 3px;
min-height: 28px;
min-width: 28px;
&.remove-button {
padding: 0; padding: 0;
min-height: 42px; }
min-width: 42px;
} }
&:hover { &:hover {
color: $selected_bg_color; color: white;
background-color: rgba(black, 0.75);
box-shadow: none; box-shadow: none;
background-color: $osd_button_bg;
} }
&.keyboard-activating, &:active, &:checked {@include button(osd-active); } &.keyboard-activating, &:active, &:checked {
&:disabled { @include button(osd-insensitive); } color: white;
background-color: rgba(black, 0.85);
}
&:disabled {
opacity: 0.35;
}
} }
//overlay / OSD style //overlay / OSD style
@ -1747,13 +1782,9 @@ combobox {
// Toolbars // Toolbars
// //
%toolbar {
padding: $container_padding / 2 $container_padding;
border-spacing: $container_padding;
}
.toolbar { .toolbar {
@extend %toolbar; padding: $container_padding;
border-spacing: $container_padding;
background-color: $bg_color; background-color: $bg_color;
color: $text_color; color: $text_color;
@ -1763,8 +1794,7 @@ combobox {
&.vertical separator { margin: $container_padding 0; } &.vertical separator { margin: $container_padding 0; }
// oldstyle toolbar buttons // oldstyle toolbar buttons
button { > button {
margin: 1px;
@extend %flat_button; @extend %flat_button;
} }
@ -1794,6 +1824,20 @@ combobox {
} }
searchbar { searchbar {
> revealer > box {
padding: $container_padding;
border-spacing: $container_padding;
entry, button { margin: 0; }
.close {
min-width: 18px;
min-height: 18px;
padding: 4px;
border-radius: 50%;
}
}
&:not(.inline) > revealer > box { &:not(.inline) > revealer > box {
border-style: solid; border-style: solid;
border-color: $solid_borders_color; border-color: $solid_borders_color;
@ -1807,21 +1851,6 @@ searchbar {
button.flat { button.flat {
@extend %circular_button; @extend %circular_button;
} }
> revealer > box {
padding: $container_padding;
border-spacing: $container_padding;
@extend %toolbar;
entry, button { margin: 0; }
.close {
min-width: 18px;
min-height: 18px;
padding: 4px;
border-radius: 50%;
}
}
} }
actionbar > revealer > box { actionbar > revealer > box {
@ -1951,6 +1980,7 @@ headerbar {
margin: 0; margin: 0;
&:backdrop { &:backdrop {
opacity: 1;
transition: $backdrop_transition; transition: $backdrop_transition;
color: transparentize($header_fg, 0.3); color: transparentize($header_fg, 0.3);
background-color: $header_bg_backdrop; background-color: $header_bg_backdrop;
@ -2006,6 +2036,12 @@ headerbar {
button { button {
@extend %headerbar_buttons; @extend %headerbar_buttons;
&.star {
min-width: 24px;
padding: 2px;
border-radius: $circular_radius;
}
} }
entry, entry,
@ -2185,6 +2221,8 @@ headerbar {
min-height: $medium_size; min-height: $medium_size;
padding: 0; padding: 0;
background-color: $header_bg; background-color: $header_bg;
border: none;
box-shadow: none;
> windowhandle > box { > windowhandle > box {
padding: 0 $container_padding / 2; padding: 0 $container_padding / 2;
@ -2428,6 +2466,10 @@ treeview.view {
} }
} }
treeview.navigation-sidebar {
padding: 0;
}
// //
// Menus // Menus
// //
@ -2488,7 +2530,7 @@ popover {
> arrow, > arrow,
> contents { > contents {
color: $fg_color; color: $fg_color;
background-clip: border-box; background-clip: padding-box;
background-color: $menu_bg; background-color: $menu_bg;
box-shadow: 0 3px 6px 0 if($variant=='light', transparentize(black, 0.85), transparentize(black, 0.85)), box-shadow: 0 3px 6px 0 if($variant=='light', transparentize(black, 0.85), transparentize(black, 0.85)),
0 0 0 1px if($variant=='light', rgba($borders_color, 0.03), rgba($dark_borders_color, 0.55)); 0 0 0 1px if($variant=='light', rgba($borders_color, 0.03), rgba($dark_borders_color, 0.55));
@ -2526,7 +2568,7 @@ popover {
} }
listview { listview {
padding: $container_padding; padding: 0;
margin: 0; margin: 0;
> row { > row {
@ -2669,7 +2711,9 @@ popover.menu {
&:hover { &:hover {
color: $selected_fg_color; color: $selected_fg_color;
background-color: $selected_bg_color; background-color: $selected_bg_color;
transition: background-color $shorter_duration $deceleration_curve; transition: background-color 50ms $deceleration_curve;
arrow { color: $selected_fg_color; }
} }
&:hover:focus { &:hover:focus {
@ -2908,36 +2952,26 @@ notebook {
button.flat, button.flat,
button.close-button, button.close-button,
button.image-button.flat { button.image-button.flat {
border: none;
box-shadow: none;
border-radius: 3px; border-radius: 3px;
padding: 0; padding: 0;
color: mix($bg_color, $fg_color, 35%); color: $alt_fg_color;
margin-left: $container_padding / 2;
margin-right: -$container_padding;
@if $monterey == 'false' {
min-height: $small_size;
min-width: $small_size;
margin-top: 2px;
margin-bottom: 2px;
} @else {
min-height: 16px; min-height: 16px;
min-width: 16px; min-width: 16px;
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
margin-left: $container_padding / 2; margin-left: $container_padding / 2;
margin-right: -$container_padding / 2; margin-right: -$container_padding / 2;
}
&:hover { &:hover {
@extend %undecorated_button;
color: $fg_color; color: $fg_color;
background-color: rgba($borders_color, 0.1); background-color: rgba($fg_color, 0.1);
} }
&:active { &:active {
@extend %undecorated_button;
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%)); color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
background-color: rgba($borders_color, 0.2); background-color: rgba($fg_color, 0.2);
} }
} }
} }
@ -2978,9 +3012,9 @@ scrollbar {
transition: none; transition: none;
> slider { > slider {
min-width: $container_padding - 2px; min-width: $container_padding + 2px;
min-height: $container_padding - 2px; min-height: $container_padding + 2px;
margin: -1px; margin: 0;
border: 4px solid transparent; border: 4px solid transparent;
border-radius: $container_padding * 2; border-radius: $container_padding * 2;
background-clip: padding-box; background-clip: padding-box;
@ -3027,7 +3061,7 @@ scrollbar {
box-shadow: none; box-shadow: none;
> range > trough > slider { > range > trough > slider {
margin: 0; margin: $container_padding / 2;
min-width: $container_padding - 2px; min-width: $container_padding - 2px;
min-height: $container_padding - 2px; min-height: $container_padding - 2px;
background-color: mix($fg_color, $bg_color, 70%); background-color: mix($fg_color, $bg_color, 70%);
@ -3035,18 +3069,16 @@ scrollbar {
} }
&.horizontal > range > trough > slider { &.horizontal > range > trough > slider {
margin: 0 $container_padding / 2;
min-width: $_slider_min_length; min-width: $_slider_min_length;
} }
&.vertical > range > trough > slider { &.vertical > range > trough > slider {
margin: $container_padding / 2 0;
min-height: $_slider_min_length; min-height: $_slider_min_length;
} }
} }
&.dragging, &.dragging,
&.hovering { opacity: 0.99; } &.hovering { opacity: 1; }
} }
&.horizontal > range > trough > slider { min-width: $_slider_min_length; } &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
@ -3089,8 +3121,8 @@ switch {
background-color: transparent; background-color: transparent;
background-clip: padding-box; background-clip: padding-box;
color: transparent; color: transparent;
min-width: 40px; min-width: 32px;
min-height: 24px; min-height: 20px;
font-size: 0; font-size: 0;
padding: 0; padding: 0;
box-shadow: inset 0 1px 2px rgba(black, 0.1); box-shadow: inset 0 1px 2px rgba(black, 0.1);
@ -3125,8 +3157,8 @@ switch {
> slider { > slider {
transition: $longer_transition, $shadow_transition, margin 0; transition: $longer_transition, $shadow_transition, margin 0;
min-width: 22px; min-width: 18px;
min-height: 22px; min-height: 18px;
margin: 1px 0 1px 1px; margin: 1px 0 1px 1px;
padding: 0; padding: 0;
border-radius: $circular_radius; border-radius: $circular_radius;
@ -3612,6 +3644,10 @@ progressbar {
min-width: $container_padding / 2; min-width: $container_padding / 2;
min-height: $container_padding / 2; min-height: $container_padding / 2;
background-color: transparent; background-color: transparent;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
> trough { > trough {
border-style: none; border-style: none;
@ -3806,6 +3842,24 @@ scrolledwindow {
padding: 0; padding: 0;
} }
&.undershoot-top {
@include undershoot(top);
}
&.undershoot-bottom {
@include undershoot(bottom);
}
&.undershoot-start {
&:dir(ltr) { @include undershoot(left); }
&:dir(rtl) { @include undershoot(right); }
}
&.undershoot-end {
&:dir(ltr) { @include undershoot(right); }
&:dir(rtl) { @include undershoot(left); }
}
> junction { // the small square between two scrollbars > junction { // the small square between two scrollbars
border: none; border: none;
background-color: $_scrollbar_bg_color; background-color: $_scrollbar_bg_color;
@ -3908,8 +3962,6 @@ listview.view {
&, &:active { &, &:active {
color: $fg_color; color: $fg_color;
background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15)); background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15));
label { color: $fg_color; }
} }
&.has-open-popup, &.has-open-popup,
@ -3953,8 +4005,6 @@ row {
color: $fg_color; color: $fg_color;
background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15)); background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15));
label { color: $fg_color; }
// button { @extend %selected-button; } // button { @extend %selected-button; }
} }
@ -4265,6 +4315,8 @@ window.background.messagedialog {
border-radius: $bt_radius; border-radius: $bt_radius;
} }
} }
separator { background-color: transparent; }
} }
} }
@ -4368,7 +4420,7 @@ stacksidebar {
// Navigation Sidebar // Navigation Sidebar
.navigation-sidebar { .navigation-sidebar {
background-color: $dark_sidebar_bg; background-color: $dark_sidebar_bg;
padding: $container_padding 0; //only vertical padding. horizontal row size would clip padding: $container_padding; //only vertical padding. horizontal row size would clip
> separator { > separator {
margin: $container_padding 0; margin: $container_padding 0;
@ -4379,7 +4431,10 @@ stacksidebar {
min-height: 36px; min-height: 36px;
padding: 0 $container_padding + 2px; padding: 0 $container_padding + 2px;
border-radius: $bt_radius; border-radius: $bt_radius;
margin: 0 $container_padding 2px; margin: 0;
outline: none;
+ row { margin-top: $container_padding / 2; }
&:hover, &:hover,
&:focus-visible:focus-within { &:focus-visible:focus-within {
@ -4395,17 +4450,16 @@ stacksidebar {
color: $fg_color; color: $fg_color;
background-color: rgba($fg_color, 0.15); background-color: rgba($fg_color, 0.15);
label { color: $fg_color; }
&:hover { &:hover {
background-color: rgba($fg_color, 0.2); background-color: rgba($fg_color, 0.2);
} }
&:focus-visible:focus-within { &:focus-visible:focus-within {
outline-width: 0; outline: none;
color: $selected_fg_color; color: $fg_color;
background-color: $selected_bg_color; background-color: rgba($fg_color, 0.15);
&:hover { background-color: darken($selected_bg_color,10%); }
&:hover { background-color: rgba($fg_color, 0.2); }
} }
} }
@ -4473,13 +4527,12 @@ placessidebar {
&.sidebar-new-bookmark-row { color: $selected_bg_color; } &.sidebar-new-bookmark-row { color: $selected_bg_color; }
&:drop(active):not(:disabled) { &:drop(active):not(:disabled) {
&, label, image { color: $drop_target_color; } color: $drop_target_color;
box-shadow: inset 0 1px $drop_target_color, box-shadow: inset 0 1px $drop_target_color,
inset 0 -1px $drop_target_color; inset 0 -1px $drop_target_color;
&:selected { &:selected {
&, label, image { color: $dark_sidebar_fg; } color: $dark_sidebar_fg;
background-color: $drop_target_color; background-color: $drop_target_color;
} }
} }

View File

@ -494,41 +494,73 @@
box-shadow: none; // box-shadow: none; //
} }
@mixin undershoot($p, $c: $wm_shadow, $neighbor: false, $style: default) {
// //
// Undershoot // undershoot
// //
@mixin undershoot($p) {
// $p: position // $p: position
// $c: shade color
// $neighbor: use ~ instead of >
// //
// possible $p values: // possible $p values:
// top, bottom, right, left // top, bottom, right, left
// //
$_undershoot_color_dark: transparentize(black, 0.8); $_border_pos: '';
$_undershoot_color_light: transparentize(white, 0.8); $_direction: '';
$_selector: if($neighbor, '~', '>');
$_gradient_dir: left; @if $p==top {
$_dash_bg_size: 10px 1px; $_direction: bottom;
$_gradient_repeat: repeat-x; $_border_pos: 0 1px;
$_bg_pos: center $p; } @else if $p==bottom {
$_direction: top;
background-color: transparent; // shouldn't be needed, but better to be sure; $_border_pos: 0 -1px;
} @else if $p==left {
@if ($p == left) or ($p == right) { $_direction: right;
$_gradient_dir: top; $_border_pos: 1px 0;
$_dash_bg_size: 1px 10px; } @else if $p==right {
$_gradient_repeat: repeat-y; $_direction: left;
$_bg_pos: $p center; $_border_pos: -1px 0;
} @else {
@error "Unknown position #{$p}"
} }
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line #{$_selector} undershoot.#{$p} {
$_undershoot_color_light 50%, box-shadow: if($style == 'default', none, inset $_border_pos $borders_color);
$_undershoot_color_dark 50%); background: linear-gradient(to $_direction, gtkalpha($c, .25), transparent 6px);
padding-#{$p}: 1px;
background-size: $_dash_bg_size;
background-repeat: $_gradient_repeat;
background-origin: content-box;
background-position: $_bg_pos;
border: none;
} }
}
@mixin background-shadow($direction, $color) {
background-image:
linear-gradient($direction,
gtkalpha($color, 0.7),
gtkalpha($color, 0.14) 40px,
gtkalpha($color, 0) 56px),
linear-gradient($direction,
gtkalpha($color, 0.4),
gtkalpha($color, 0.14) 7px,
gtkalpha($color, 0) 24px);
}
@mixin transition-shadows($color) {
> dimming {
background: none;
}
> border {
background: none;
}
> shadow {
min-width: 56px;
min-height: 56px;
&.left { @include background-shadow(to right, $color); }
&.right { @include background-shadow(to left, $color); }
&.up { @include background-shadow(to bottom, $color); }
&.down { @include background-shadow(to top, $color); }
}
}

View File

@ -445,6 +445,10 @@ $raven_padding: 8px;
.container { padding: 2px $container_padding $container_padding; } .container { padding: 2px $container_padding $container_padding; }
flowboxchild { padding: 0; } flowboxchild { padding: 0; }
separator {
margin: $container_padding / 2 $container_padding;
}
} }
// &.budgie-screenshot-applet { // &.budgie-screenshot-applet {
@ -466,7 +470,7 @@ window.budgie-popover:not(.csd) {
} }
// FIXME: workspace has unnecessary/unknown margin // FIXME: workspace has unnecessary/unknown margin
.workspace-switcher { .budgie-panel.background .workspace-switcher {
.workspace-layout { .workspace-layout {
border: 0 solid $borders_color; border: 0 solid $borders_color;
@ -480,8 +484,7 @@ window.budgie-popover:not(.csd) {
.right & { border-top-width: 1px; } .right & { border-top-width: 1px; }
} }
.workspace-item, .workspace-item {
.workspace-add-button {
border: 0 solid $borders_color; border: 0 solid $borders_color;
.top &, .top &,
@ -501,24 +504,18 @@ window.budgie-popover:not(.csd) {
} }
.workspace-add-button { .workspace-add-button {
background-color: transparent;
background-image: none;
@extend %budgie_button; @extend %budgie_button;
padding: $container_padding;
&:hover { box-shadow: none; } border-radius: $bt_radius;
&:active { background-image: none; }
&:active image { margin: 1px 0 -1px; }
} }
.workspace-icon-button { .workspace-icon-button {
.budgie-panel & { // to overwrite the .budgie-panel button style below
min-height: 24px; min-height: 24px;
min-width: 24px; min-width: 24px;
padding: 0; padding: 0;
border-radius: $bt_radius; border-radius: $bt_radius;
} }
} }
}
$budgie_panel_radius: $wm_radius + $container_padding / 2; $budgie_panel_radius: $wm_radius + $container_padding / 2;
@ -1227,6 +1224,21 @@ $raven_shadow: 0 0 3px 0 rgba(black, 0.2), 0 0 8px 0 rgba(black, 0.15), 0 0 16px
} }
} }
} }
.raven-notifications-group {
.raven-notifications-group-header {
padding-left: $container_padding;
}
list > row {
border-radius: $bt_radius;
padding: $container_padding;
.notification-clone {
padding-left: $container_padding;
}
}
}
} }
// some specific scale styling // some specific scale styling
@ -1416,6 +1428,22 @@ window.budgie-switcher-window {
} }
} }
// Power Dialog
.budgie-power-dialog {
.titlebar {
&, &:backdrop {
background-color: transparent;
box-shadow: none;
border: none;
}
}
&.background.csd {
border-radius: $wm_radius;
box-shadow: inset 0 0 0 1px $highlight_color;
}
}
// PolKit Dialog // PolKit Dialog
.budgie-polkit-dialog { .budgie-polkit-dialog {
.message { color: gtkalpha(currentColor, 0.6); } .message { color: gtkalpha(currentColor, 0.6); }

View File

@ -89,8 +89,12 @@ $nautilus_sidebar_image: image($dark_sidebar_bg);
> .linked > button.disclosure-button { margin-left: $container_padding / 2; } > .linked > button.disclosure-button { margin-left: $container_padding / 2; }
@if $placement == 'left' { @if $placement == 'left' {
.nautilus-path-bar, entry.search { > box > stack > box {
margin-left: 22px; margin-left: 18px;
}
entry {
margin-left: 6px;
} }
} }
} }
@ -1431,9 +1435,9 @@ row#AutostartTitle.tweak {
// separator of sidebar on Gnome control center and Gnome tweaks // separator of sidebar on Gnome control center and Gnome tweaks
window.background.csd { window.background.csd {
> hdyleaflet, > hdyleaflet,
> leaflet, > leaflet.unfolded, > leaflet,
> box.horizontal { > box.horizontal {
> separator.vertical { > separator {
@extend %side_separator; @extend %side_separator;
} }
@ -1445,19 +1449,20 @@ window.background.csd {
} }
> hdyleaflet > box.vertical > stack.main-container, > hdyleaflet > box.vertical > stack.main-container,
> leaflet > box.vertical > stack.main-container { // Right side > leaflet > box.vertical > stack.main-container,
> leaflet > box.vertical:last-child > scrolledwindow { // Right side
background-color: $base_color; background-color: $base_color;
border-bottom-right-radius: $wm_radius; border-bottom-right-radius: $wm_radius;
} }
// sidebar on gnome tweak // sidebar on gnome tweak
list.tweak-categories { list.tweak-categories,
background-image: none; > leaflet > box > scrolledwindow > viewport > list.navigation-sidebar {
background-color: rgba($dark_sidebar_bg, 1); @extend %side_style_left;
border-radius: 0 0 0 $wm_radius; border-radius: 0 0 0 $wm_radius;
// Themed left sidebar // Themed left sidebar
.tweak-category:not(:selected):not(:hover) { > row:not(:selected):not(:hover) {
background: none; background: none;
} }
@ -1469,12 +1474,15 @@ window.background.csd {
} }
&.maximized, &.tiled, &.fullscreen { &.maximized, &.tiled, &.fullscreen {
> hdyleaflet > box.vertical > stack.main-container { > hdyleaflet > box.vertical > stack.main-container,
> leaflet > box.vertical > stack.main-container,
> leaflet > box.vertical:last-child > scrolledwindow {
border-bottom-right-radius: $maximized_radius; border-bottom-right-radius: $maximized_radius;
} }
// sidebar on gnome tweak // sidebar on gnome tweak
.tweak-categories { list.tweak-categories,
leaflet > box > scrolledwindow > viewport > list.navigation-sidebar {
border-radius: 0 0 0 $maximized_radius; border-radius: 0 0 0 $maximized_radius;
} }
} }
@ -1585,7 +1593,7 @@ window.background.csd {
> leaflet > box.vertical > scrolledwindow.view, // > 3.38.0 > leaflet > box.vertical > scrolledwindow.view, // > 3.38.0
> hdyleaflet > box.vertical > scrolledwindow.view, // > 3.34.0 > hdyleaflet > box.vertical > scrolledwindow.view, // > 3.34.0
> box.horizontal > box.vertical > scrolledwindow.view { // > 3.25.90 > box.horizontal > box.vertical > scrolledwindow.view { // > 3.25.90
background-color: rgba($dark_sidebar_bg, 1); @extend %side_style_left;
border-bottom-left-radius: $wm_radius + 1px; border-bottom-left-radius: $wm_radius + 1px;
> viewport.frame > stack { > viewport.frame > stack {
@ -1762,7 +1770,7 @@ window.background.csd {
> overlay > leaflet, > overlay > leaflet,
> deck > box > overlay > leaflet { // >= 40.0 > deck > box > overlay > leaflet { // >= 40.0
> stack { > stack {
background-color: rgba($dark_sidebar_bg, 1); @extend %side_style_left;
border-bottom-left-radius: $wm_radius; border-bottom-left-radius: $wm_radius;
} }
@ -2725,7 +2733,7 @@ window#GearyMainWindow.background.csd { // <= 3.32
} }
.geary-main-layout { // >= 40.0 .geary-main-layout { // >= 40.0
background-color: $dark_sidebar_bg; @extend %side_style_left;
> leaflet > leaflet > headerbar { // left and center headerbar > leaflet > leaflet > headerbar { // left and center headerbar
&:first-child { @extend %side_headerbar_left; background-color: transparent; } &:first-child { @extend %side_headerbar_left; background-color: transparent; }
@ -2733,10 +2741,14 @@ window#GearyMainWindow.background.csd { // <= 3.32
} }
> leaflet > leaflet > box { // >= 44.0 > leaflet > leaflet > box { // >= 44.0
& > headerbar { @extend %side_headerbar_right; box-shadow: none; } > headerbar { @extend %side_headerbar_right; box-shadow: none; }
&:first-child > headerbar { @extend %side_headerbar_left; box-shadow: none; } &:first-child > headerbar { @extend %side_headerbar_left; box-shadow: none; }
> scrolledwindow {
background-image: $side_style_shadow;
}
treeview.view.sidebar { treeview.view.sidebar {
background-color: transparent; background-color: transparent;
@ -2795,16 +2807,16 @@ window#GearyMainWindow.background.csd { // <= 3.32
scrolledwindow { scrolledwindow {
// margin: -1px 0; // margin: -1px 0;
padding: 0 4px; padding: 0 $container_padding / 2;
background-color: $base_color; background-color: $base_color;
treeview.view { treeview.view {
background-image: none; background-image: none;
border: 2px solid transparent; border: 2px solid transparent;
border-radius: $mn_radius; border-radius: $bt_radius;
outline: none; outline: none;
padding: 6px 0; padding: $container_padding $container_padding * 1.5;
margin: 0 4px; margin: 0 $container_padding / 2;
&:hover { &:hover {
background-color: rgba($fg_color, 0.1); background-color: rgba($fg_color, 0.1);
@ -2854,21 +2866,27 @@ window#GearyMainWindow.background.csd { // <= 3.32
conversation-list { // center part >= 44.0 conversation-list { // center part >= 44.0
list#conversation-list { list#conversation-list {
padding: 6px; padding: $container_padding;
> row.activatable.conversation-list { > row.activatable.conversation-list {
border: none; border: none;
border-radius: $mn_radius; border-radius: $bt_radius;
padding: $container_padding;
&:not(:first-child) { > widget > box > box {
margin-top: 6px; padding: $container_padding / 2;
}
button.flat {
padding: 4px 0;
border-radius: $circular_radius;
} }
} }
> separator { > separator {
background: none; background-color: $menu_bd;
border: none; border: none;
min-height: 0; margin: $container_padding / 2 $container_padding * 2;
} }
} }
} }

View File

@ -9,7 +9,7 @@ $nautilus_borders_color: if($variant=='light', darken(rgba($dark_sidebar_bg, 1),
$flap_sidebar_size: 240px; $flap_sidebar_size: 240px;
@if $nautilus_style == 'stable' { @if $nautilus_style == 'stable' {
$nautilus_header_image: linear-gradient(90deg, $dark_sidebar_bg $flap_sidebar_size, $nautilus_header_image: linear-gradient(90deg, transparent $flap_sidebar_size,
$nautilus_borders_color $flap_sidebar_size, $nautilus_borders_color $flap_sidebar_size,
$nautilus_borders_color ($flap_sidebar_size + 1px), $nautilus_borders_color ($flap_sidebar_size + 1px),
$base_color ($flap_sidebar_size + 1px)); $base_color ($flap_sidebar_size + 1px));
@ -19,7 +19,7 @@ $flap_sidebar_size: 240px;
} }
@if $nautilus_style == 'glassy' { @if $nautilus_style == 'glassy' {
$nautilus_header_image: linear-gradient(90deg, $dark_sidebar_bg ($flap_sidebar_size / 2), $nautilus_header_image: linear-gradient(90deg, transparent ($flap_sidebar_size / 2),
$dark_header_bg 40%); $dark_header_bg 40%);
$nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) (($flap_sidebar_size / 2) - 40px), $nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) (($flap_sidebar_size / 2) - 40px),
@ -29,9 +29,12 @@ $flap_sidebar_size: 240px;
.nautilus-window { .nautilus-window {
@if $nautilus_style == 'stable' or $nautilus_style == 'glassy' { @if $nautilus_style == 'stable' or $nautilus_style == 'glassy' {
&.background.csd { &.background.csd {
background-color: transparent; &, &:backdrop {
background-color: $dark_sidebar_bg;
}
headerbar { &:not(.view) headerbar {
&, &:backdrop {
background-color: transparent; background-color: transparent;
border: none; border: none;
background-image: $nautilus_header_image; background-image: $nautilus_header_image;
@ -39,9 +42,10 @@ $flap_sidebar_size: 240px;
} }
} }
} }
}
@if $nautilus_style == 'stable' { @if $nautilus_style == 'stable' {
headerbar { &:not(.view) headerbar {
box.start > box { box.start > box {
margin-left: 144px; margin-left: 144px;
} }
@ -54,19 +58,27 @@ $flap_sidebar_size: 240px;
headerbar > windowhandle > box { padding: 0 10px; } headerbar > windowhandle > box { padding: 0 10px; }
placessidebar.background { placessidebar {
row.sidebar-row { .navigation-sidebar > row {
&:selected {
background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15));
color: $fg_color;
}
&.sidebar-row {
.sidebar-icon { color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, 20%)); } .sidebar-icon { color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, 20%)); }
} }
} }
flap.unfolded {
> placessidebar.background {
background: none;
list.navigation-sidebar {
background-color: $dark_sidebar_bg;
} }
flap.unfolded,
.sidebar-pane {
&, &:backdrop {
background-color: transparent;
}
placessidebar {
background: none;
} }
> separator.horizontal { > separator.horizontal {
@ -74,8 +86,14 @@ $flap_sidebar_size: 240px;
} }
} }
flap.unfolded {
list.navigation-sidebar {
background-color: transparent;
}
}
flap.folded { flap.folded {
> placessidebar { placessidebar {
border-right: 1px solid $header_border; border-right: 1px solid $header_border;
} }
} }
@ -84,23 +102,29 @@ $flap_sidebar_size: 240px;
.box { .box {
@if $monterey == 'false' { @if $monterey == 'false' {
background-color: mix(black, $base_color, 6%); background-color: mix(black, $base_color, 6%);
border-top: 1px solid $borders_color;
} @else { } @else {
background-color: $base_color; background-color: $base_color;
} }
tabbox { margin: 0 -3px; }
} }
} }
.nautilus-grid-view.view { .nautilus-grid-view {
background-color: $base_color;
child.activatable { child.activatable {
border-radius: $bt_radius; border-radius: $bt_radius;
@extend %row_activatable; @extend %row_activatable;
} }
} }
.nautilus-list-view.view { .nautilus-list-view {
padding: 0; padding: 0;
margin: 0; margin: 0;
border-spacing: 0; border-spacing: 0;
background-color: $base_color;
listview.view { listview.view {
padding: 0; padding: 0;
@ -130,7 +154,6 @@ $flap_sidebar_size: 240px;
min-height: 24px; min-height: 24px;
min-width: 24px; min-width: 24px;
padding: 0; padding: 0;
-gtk-icon-shadow: none;
@extend %selected-button; @extend %selected-button;
} }
} }
@ -196,6 +219,12 @@ $flap_sidebar_size: 240px;
} }
} }
navigation-view-page > toolbarview > scrolledwindow > viewport > clamp {
> box > box > stack > button {
margin-top: $container_padding * 2;
}
}
// Extensions // Extensions
window.nightthemeswitcher headerbar { window.nightthemeswitcher headerbar {
background: $header_bg; background: $header_bg;
@ -207,7 +236,8 @@ window.nightthemeswitcher headerbar {
// //
window.background.csd { window.background.csd {
> contents { > contents,
> widget { // 44.0
> leaflet.unfolded > box { > leaflet.unfolded > box {
> headerbar { > headerbar {
@extend %side_headerbar_left; @extend %side_headerbar_left;
@ -238,6 +268,8 @@ window.background.csd {
> stack.background { background-color: $base_color; } > stack.background { background-color: $base_color; }
} }
}
}
preferencesgroup > box { preferencesgroup > box {
button.background-preview-button { button.background-preview-button {
@ -285,8 +317,6 @@ window.background.csd {
} }
} }
} }
}
}
// //
@ -294,7 +324,8 @@ window.background.csd {
// //
window.background { window.background {
> contents > toastoverlay > leaflet { > contents > toastoverlay > leaflet,
> widget > toastoverlay > leaflet { // 44.0
> box { > box {
background-color: $base_color; background-color: $base_color;
@ -326,26 +357,11 @@ window.background {
} }
} }
} }
.current-week {
background-color: $fill_color;
}
button.circular.day {
border: none;
box-shadow: none;
@extend %flat_button;
}
datechooser navigator > button.flat.pill {
padding: 0 $container_padding * 2;
min-height: $menuitem_size;
min-width: $menuitem_size;
}
} }
&.maximized, &.tiled { &.maximized, &.tiled {
> contents > toastoverlay > leaflet { > contents > toastoverlay > leaflet,
> widget > toastoverlay > leaflet {
> box { > box {
> headerbar { > headerbar {
&, &:backdrop { &, &:backdrop {
@ -358,6 +374,33 @@ window.background {
} }
} }
datechooser {
.current-week {
background-color: $fill_color;
}
button.circular.day {
border: none;
box-shadow: none;
@extend %flat_button;
&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
navigator > button.flat {
padding: 0;
min-height: $menuitem_size;
min-width: $menuitem_size;
}
}
agenda-view list.background {
background-color: transparent;
}
menubutton.flat.popup.sources-button { menubutton.flat.popup.sources-button {
margin: 0; margin: 0;
@ -610,14 +653,14 @@ screenshot-carousel button,
padding: $container_padding / 2 $container_padding * 1.5; padding: $container_padding / 2 $container_padding * 1.5;
} }
flowboxchild.card { flowboxchild.card:not(.category-tile) {
padding: 0; padding: 0;
border: none; border: none;
box-shadow: none; box-shadow: none;
background: none; background: none;
} }
button.card.category-tile { .category-tile.card {
padding: $container_padding * 3.5; padding: $container_padding * 3.5;
border: none; border: none;
border-radius: $bt_radius; border-radius: $bt_radius;
@ -630,6 +673,7 @@ button.card.category-tile {
min-width: 130px; min-width: 130px;
font-size: 105%; font-size: 105%;
font-weight: normal; font-weight: normal;
box-shadow: none;
} }
// Styling for specific category buttons. // Styling for specific category buttons.
@ -740,10 +784,8 @@ clamp.large .category-tile:not(.category-tile-iconless) {
// The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c // The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c
.featured-tile { .featured-tile {
all: unset;
padding: 0; padding: 0;
box-shadow: none; box-shadow: none;
color: $fg_color;
label.title-1 { label.title-1 {
margin-top: $container_padding; margin-top: $container_padding;
@ -1066,14 +1108,6 @@ scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) >
scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $container_padding * 6; } scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $container_padding * 6; }
scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $container_padding * 2; } scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $container_padding * 2; }
statuspage.icon-dropshadow image.icon {
-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
0 -1px rgba(0,0,0,0.05),
1px 0 rgba(0,0,0,0.1),
0 1px rgba(0,0,0,0.3),
-1px 0 rgba(0,0,0,0.1);
}
window.info scrollbar.vertical { window.info scrollbar.vertical {
margin-top: 48px; margin-top: 48px;
background: none; background: none;

View File

@ -156,10 +156,12 @@ toast {
@extend %osd; @extend %osd;
margin: $container_padding * 2; margin: $container_padding * 2;
margin-bottom: $container_padding * 3; margin-bottom: $container_padding * 3;
border-radius: $mn_radius; border-radius: $circular_radius;
border-spacing: $container_padding; border-spacing: $container_padding;
padding: $container_padding; padding: $container_padding;
box-shadow: 0 3px 8px rgba(black, 0.35); box-shadow: 0 3px 8px rgba(black, 0.35), $wm_outline;
outline: 1px solid $highlight_color;
outline-offset: -1px;
&:dir(ltr) { padding-left: $container_padding * 2; } &:dir(ltr) { padding-left: $container_padding * 2; }
&:dir(rtl) { padding-right: $container_padding * 2; } &:dir(rtl) { padding-right: $container_padding * 2; }
@ -228,14 +230,42 @@ viewswitcherbar actionbar > revealer > box {
} }
// AdwViewSwitcherTitle // AdwViewSwitcherTitle
viewswitchertitle {
margin-top: 0;
margin-bottom: 0;
viewswitchertitle viewswitcher { viewswitcher {
margin-left: $container_padding * 2; margin-left: $container_padding * 2;
margin-right: $container_padding * 2; margin-right: $container_padding * 2;
&.narrow {
margin-top: 0;
margin-bottom: 0;
button.toggle {
> stack > box {
&.narrow {
padding-top: 0;
padding-bottom: 0;
border-spacing: 0;
}
}
}
}
&.wide {
margin-top: 0;
margin-bottom: 0;
}
}
windowtitle {
margin-top: 0;
margin-bottom: 0;
}
} }
// AdwIndicatorBin // AdwIndicatorBin
indicatorbin { indicatorbin {
> indicator, > mask { > indicator, > mask {
min-width: $container_padding * 2; min-width: $container_padding * 2;
@ -267,6 +297,35 @@ indicatorbin {
} }
} }
headerbar > windowhandle > box viewswitcher.wide {
box-shadow: inset 0 0 0 1px $light_borders_color;
border-radius: $bt_radius;
padding: 0;
margin: 8px 0;
> button.toggle {
margin: 0;
font-weight: 500;
border-radius: $bt_radius;
&:not(:first-child) {
border-width: 0 0 0 1px;
border-style: none solid none none;
border-image: linear-gradient(to bottom,
transparent 16%,
$light_borders_color 16%,
$light_borders_color 84%,
transparent 84%) 0 0 0 1 / 0 0 0 1px stretch;
}
&:hover, &:active, &:checked {
border-image: none;
& + button { border-image: none; }
}
}
}
// //
// Tab View // Tab View
@ -326,6 +385,9 @@ tabbar {
background-color: transparent; background-color: transparent;
> separator { > separator {
margin: 0;
background-color: $borders_color;
&.hidden { &.hidden {
opacity: 0; opacity: 0;
} }
@ -442,8 +504,229 @@ tabbox:drop(active) {
box-shadow: none; box-shadow: none;
} }
// Sidebar // Transition shadows
flap,
leaflet,
navigation-view,
overlay-split-view {
@include transition-shadows($dark_borders_color);
}
.unfolded stacksidebar.sidebar { toolbarview.undershoot-top scrolledwindow {
@include undershoot(top);
}
toolbarview.undershoot-bottom scrolledwindow {
@include undershoot(bottom);
}
// Sidebar
.unfolded stacksidebar.sidebar { border: none; }
.sidebar-pane {
background-color: $dark_sidebar_bg;
color: $dark_sidebar_fg;
&:backdrop {
background-color: $dark_sidebar_bg;
// transition: background-color $longer_duration $deceleration_curve;
}
.sidebar,
.toolbar,
headerbar,
.navigation-sidebar,
searchbar > revealer > box {
background-color: transparent;
box-shadow: none;
border: none; border: none;
} }
.toolbar {
padding: $container_padding $container_padding * 2;
}
list.navigation-sidebar:not(.view) {
padding: $container_padding * 2;
> row {
&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
}
toolbarview.undershoot-top scrolledwindow {
@include undershoot(top, $style: 'compact');
}
toolbarview.undershoot-bottom scrolledwindow {
@include undershoot(bottom, $style: 'compact');
}
scrolledwindow {
&.undershoot-top {
@include undershoot(top, $style: 'compact');
}
&.undershoot-bottom {
@include undershoot(bottom, $style: 'compact');
}
&.undershoot-start {
&:dir(ltr) { @include undershoot(left, $style: 'compact'); }
&:dir(rtl) { @include undershoot(right, $style: 'compact'); }
}
&.undershoot-end {
&:dir(ltr) { @include undershoot(right, $style: 'compact'); }
&:dir(rtl) { @include undershoot(left, $style: 'compact'); }
}
}
flap,
leaflet,
navigation-view,
overlay-split-view {
@include transition-shadows($dark_borders_color);
}
banner > revealer > widget {
background-color: gtkmix($selected_bg_color, $dark_sidebar_bg, 30%);
color: $text_color;
&:backdrop {
background-color: gtkmix($selected_bg_color, $dark_sidebar_bg, 30%);
}
}
&:dir(ltr), &.end:dir(rtl) {
&, banner > revealer > widget {
box-shadow: inset -1px 0 6px rgba(black, if($variant == 'light', 0.04, 0.08));
border-right: 1px solid $dark_sidebar_border;
}
}
&:dir(rtl), &.end:dir(ltr) {
&, banner > revealer > widget {
box-shadow: inset 1px 0 6px rgba(black, if($variant == 'light', 0.04, 0.08));
border-left: 1px solid $dark_sidebar_border;
}
}
}
/* Middle pane in three-pane setups */
.content-pane .sidebar-pane,
.sidebar-pane .content-pane {
background-color: $base_color;
color: $text_color;
&:backdrop {
background-color: $base_color;
// transition: background-color $longer_duration $deceleration_curve;
}
toolbarview.undershoot-top scrolledwindow {
@include undershoot(top, $style: 'compact');
}
toolbarview.undershoot-bottom scrolledwindow {
@include undershoot(bottom, $style: 'compact');
}
scrolledwindow {
&.undershoot-top {
@include undershoot(top, $style: 'compact');
}
&.undershoot-bottom {
@include undershoot(bottom, $style: 'compact');
}
&.undershoot-start {
&:dir(ltr) { @include undershoot(left, $style: 'compact'); }
&:dir(rtl) { @include undershoot(right, $style: 'compact'); }
}
&.undershoot-end {
&:dir(ltr) { @include undershoot(right, $style: 'compact'); }
&:dir(rtl) { @include undershoot(left, $style: 'compact'); }
}
}
flap,
leaflet,
navigation-view,
overlay-split-view {
@include transition-shadows($dark_borders_color);
}
banner > revealer > widget {
background-color: gtkmix($selected_bg_color, $base_color, 30%);
color: $text_color;
&:backdrop {
background-color: gtkmix($selected_bg_color, $base_color, 30%);
}
}
&:dir(ltr), &.end:dir(rtl) {
&, banner > revealer > widget {
box-shadow: inset -1px 0 6px rgba(black, if($variant == 'light', 0.04, 0.08));
border-right: 1px solid $dark_sidebar_border;
}
}
&:dir(rtl), &.end:dir(ltr) {
&, banner > revealer > widget {
box-shadow: inset 1px 0 6px rgba(black, if($variant == 'light', 0.04, 0.08));
border-left: 1px solid $dark_sidebar_border;
}
}
}
.sidebar-pane .sidebar-pane {
background-color: transparent;
color: inherit;
}
.content-pane {
background-color: $base_color;
toolbarview {
&, &.view {
background-color: transparent;
}
> stack, > box > stack.view {
background-color: transparent;
}
}
notebook > stack box > switch {
margin: 14px 0;
}
list.background {
background-color: transparent;
}
}
// Gnome >= 45.0
.sidebar-pane,
.content-pane {
headerbar {
&, &:backdrop {
background-color: transparent;
box-shadow: none;
border: none;
}
}
}
.top-bar {
.collapse-spacing {
padding: 0;
}
}

View File

@ -413,6 +413,18 @@ window.background.csd {
} }
} }
notebook.tilix-background {
> header {
> tabs > tab {
button.tilix-small-button {
padding: 0; // not use ?
min-height: 16px;
min-width: 16px;
}
}
}
}
// //
// Lollypop // Lollypop
// //

View File

@ -74,7 +74,7 @@ UnityPanelWidget,
background-color: lighten($header_bg, 8); background-color: lighten($header_bg, 8);
border-radius: 0px; border-radius: 0px;
padding: 0px; padding: 0px;
color: white; color: $header_fg;
} }
.lightdm.menu .menuitem *, .lightdm.menu .menuitem *,

View File

@ -214,9 +214,9 @@ if [[ "${uninstall}" == 'true' ]]; then
fi fi
if [[ "${dash_to_dock}" == 'true' && "${gdm}" != 'true' ]]; then if [[ "${dash_to_dock}" == 'true' && "${gdm}" != 'true' ]]; then
prompt -i "Removing '${name}' Dash to Dock theme... \n" prompt -i "Revert Dash to Dock theme... \n"
revert_dash_to_dock_theme revert_dash_to_dock_theme
prompt -s "Done! '${name}' Dash to Dock theme has been removed. \n" prompt -s "Done! Dash to Dock theme has reverted to default. \n"
fi fi
if [[ "${firefox}" == 'true' && "${gdm}" != 'true' ]]; then if [[ "${firefox}" == 'true' && "${gdm}" != 'true' ]]; then
@ -250,9 +250,9 @@ else
fi fi
if [[ "${dash_to_dock}" == 'true' && "${gdm}" != 'true' ]]; then if [[ "${dash_to_dock}" == 'true' && "${gdm}" != 'true' ]]; then
prompt -i "Installing '${name}' ${colors[0]} Dash to Dock theme... \n" prompt -i "Fix Dash to Dock theme issue... \n"
install_dash_to_dock_theme fix_dash_to_dock
prompt -s "Done! '${name}' Dash to Dock theme has been installed. \n" prompt -s "Done! '${name}' Dash to Dock theme has been fixed. \n"
prompt -w "DASH TO DOCK: You may need to logout to take effect. \n" prompt -w "DASH TO DOCK: You may need to logout to take effect. \n"
fi fi
@ -271,7 +271,7 @@ else
if [[ "${gdm}" != 'true' ]]; then if [[ "${gdm}" != 'true' ]]; then
prompt -w "FIREFOX: Please go to [Firefox menu] > [Customize...], and customize your Firefox to make it work. Move your 'new tab' button to the titlebar instead of tab-switcher." prompt -w "FIREFOX: Please go to [Firefox menu] > [Customize...], and customize your Firefox to make it work. Move your 'new tab' button to the titlebar instead of tab-switcher."
prompt -i "FIREFOX: Anyways, you can also edit 'userChrome.css' and 'customChrome.css' later in your Firefox profile directory. \n" prompt -i "FIREFOX: Anyway, you can also edit 'userChrome.css' and 'customChrome.css' later in your Firefox profile directory. \n"
fi fi
fi fi
fi fi