Fixing missing styling variables

This commit is contained in:
Jas Singh
2024-07-24 19:04:22 -07:00
parent 21393c122a
commit 7a5093a111
7 changed files with 590 additions and 540 deletions

View File

@@ -150,6 +150,7 @@ export default {
cloudy: "weather-overcast-symbolic", cloudy: "weather-overcast-symbolic",
overcast: "weather-overcast-symbolic", overcast: "weather-overcast-symbolic",
mist: "weather-overcast-symbolic", mist: "weather-overcast-symbolic",
patchy_rain_nearby: "weather-showers-scattered-symbolic",
patchy_rain_possible: "weather-showers-scattered-symbolic", patchy_rain_possible: "weather-showers-scattered-symbolic",
patchy_snow_possible: "weather-snow-symbolic", patchy_snow_possible: "weather-snow-symbolic",
patchy_sleet_possible: "weather-snow-symbolic", patchy_sleet_possible: "weather-snow-symbolic",

View File

@@ -164,7 +164,7 @@ const options = mkOptions(OPTIONS, {
}, },
iconbuttons: { iconbuttons: {
passive: opt(colors.text), passive: opt(colors.text),
active: opt(colors.pink) active: opt(colors.lavender)
}, },
progressbar: { progressbar: {
foreground: opt(colors.lavender), foreground: opt(colors.lavender),

View File

@@ -6,8 +6,8 @@
min-width: 27em; min-width: 27em;
min-height: 6em; min-height: 6em;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color); background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color);
border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color); border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
border-radius: 0.7em; border-radius: $bar-menus-border-radius;
margin-right: 0.5em; margin-right: 0.5em;
} }
@@ -42,17 +42,21 @@
background-color: transparent; background-color: transparent;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-yearmonth); color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-yearmonth);
} }
&.button { &.button {
color: $text; color: $text;
font-weight: 900; font-weight: 900;
font-size: 900em; font-size: 900em;
} }
&:hover { &:hover {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator);
} }
&.highlight { &.highlight {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays);
} }
&:indeterminate { &:indeterminate {
color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65); color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65);
} }
@@ -68,6 +72,7 @@
font-size: 4em; font-size: 4em;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-time); color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-time);
} }
.clock-content-period { .clock-content-period {
font-size: 1.75em; font-size: 1.75em;
margin-bottom: 1.35em; margin-bottom: 1.35em;
@@ -79,9 +84,11 @@
.calendar-menu-item-container.clock { .calendar-menu-item-container.clock {
margin-bottom: 0.65em; margin-bottom: 0.65em;
} }
.calendar-menu-item-container.calendar { .calendar-menu-item-container.calendar {
margin-bottom: 0.65em; margin-bottom: 0.65em;
} }
.calendar-menu-item-container.weather { .calendar-menu-item-container.weather {
margin-bottom: 0em; margin-bottom: 0em;
} }
@@ -117,15 +124,19 @@
.calendar-menu-weather.today.temp.label.icon.weather-color.red { .calendar-menu-weather.today.temp.label.icon.weather-color.red {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-extremelyhot); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-extremelyhot);
} }
.calendar-menu-weather.today.temp.label.icon.weather-color.orange { .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-hot); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-hot);
} }
.calendar-menu-weather.today.temp.label.icon.weather-color.lavender { .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-moderate); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-moderate);
} }
.calendar-menu-weather.today.temp.label.icon.weather-color.blue { .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-cold); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-cold);
} }
.calendar-menu-weather.today.temp.label.icon.weather-color.sky { .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-extremelycold); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-extremelycold);
} }

View File

@@ -5,8 +5,8 @@
margin-left: 0.50em; margin-left: 0.50em;
min-width: 28.5em; min-width: 28.5em;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color); background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color); border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
border-radius: 0.7em; border-radius: $bar-menus-border-radius;
button { button {
border-radius: 0.4em; border-radius: 0.4em;
@@ -15,16 +15,18 @@
.dashboard-card { .dashboard-card {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color); background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color);
margin: 1.3em; margin: 1.3em;
border-radius: 0.4em; border-radius: $bar-menus-card_radius;
padding: 1.5em; padding: 1.5em;
} }
.profile-picture-container { .profile-picture-container {
margin-right: 0.65em; margin-right: 0.65em;
margin-bottom: 0.65em; margin-bottom: 0.65em;
.profile-picture { .profile-picture {
font-size: 7.5em; font-size: 7.5em;
} }
.profile-name { .profile-name {
font-size: 1.5em; font-size: 1.5em;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name); color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name);
@@ -52,12 +54,15 @@
&.shutdown { &.shutdown {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown); background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown);
} }
&.restart { &.restart {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart); background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart);
} }
&.lock { &.lock {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout); background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout);
} }
&.sleep { &.sleep {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep); background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep);
} }
@@ -66,12 +71,15 @@
&.shutdown { &.shutdown {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown), 0.5);
} }
&.restart { &.restart {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart), 0.5);
} }
&.lock { &.lock {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout), 0.5);
} }
&.sleep { &.sleep {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep), 0.5);
} }
@@ -83,6 +91,7 @@
.shortcuts-container { .shortcuts-container {
.dashboard-card { .dashboard-card {
padding: 1.5em; padding: 1.5em;
button { button {
min-height: 2.5em; min-height: 2.5em;
min-width: 2.5em; min-width: 2.5em;
@@ -104,6 +113,7 @@
&.most-used { &.most-used {
margin-right: 0em; margin-right: 0em;
} }
&.utilities { &.utilities {
margin-left: 0.65em; margin-left: 0.65em;
} }
@@ -140,6 +150,7 @@
.controls-container { .controls-container {
margin-bottom: 0.65em; margin-bottom: 0.65em;
&.dashboard-card { &.dashboard-card {
margin-top: 0em; margin-top: 0em;
} }
@@ -160,47 +171,62 @@
&.wifi { &.wifi {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background); background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background);
} }
&.bluetooth { &.bluetooth {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background); background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background);
} }
&.notifications { &.notifications {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background); background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background);
} }
&.playback { &.playback {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background); background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background);
} }
&.input { &.input {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background); background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background);
} }
&.wifi:hover { &.wifi:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5);
} }
&.bluetooth:hover { &.bluetooth:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5);
} }
&.notifications:hover { &.notifications:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5);
} }
&.playback:hover { &.playback:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5);
} }
&.input:hover { &.input:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5);
} }
&.disabled { &.disabled {
background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-dashboard-controls-disabled); background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-dashboard-controls-disabled);
&.wifi:hover { &.wifi:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5);
} }
&.bluetooth:hover { &.bluetooth:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5);
} }
&.notifications:hover { &.notifications:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5);
} }
&.playback:hover { &.playback:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5);
} }
&.input:hover { &.input:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5);
} }
@@ -231,18 +257,23 @@
&.right.top { &.right.top {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-top-color); color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-top-color);
} }
&.right.middle { &.right.middle {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-middle-color); color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-middle-color);
} }
&.right.bottom { &.right.bottom {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-bottom-color); color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-bottom-color);
} }
&.left.top { &.left.top {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-top-color); color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-top-color);
} }
&.left.middle { &.left.middle {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-middle-color); color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-middle-color);
} }
&.left.bottom { &.left.bottom {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-bottom-color); color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-bottom-color);
} }
@@ -265,12 +296,15 @@
&.cpu label { &.cpu label {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon);
} }
&.ram label { &.ram label {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon);
} }
&.gpu label { &.gpu label {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon);
} }
&.storage label { &.storage label {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon); color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon);
} }
@@ -317,6 +351,7 @@
.stat-value { .stat-value {
margin-bottom: 0.75em; margin-bottom: 0.75em;
font-size: 0.9em; font-size: 0.9em;
&.cpu { &.cpu {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label); color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label);
} }

View File

@@ -6,8 +6,8 @@
min-width: 30.6em; min-width: 30.6em;
min-height: 48em; min-height: 48em;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background); background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border); border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
border-radius: 0.7em; border-radius: $bar-menus-border-radius;
margin-right: 0.45em; margin-right: 0.45em;
.window-content.notificationsmenu-window { .window-content.notificationsmenu-window {
@@ -40,10 +40,12 @@
.notification-card-content-container { .notification-card-content-container {
margin-bottom: 0.65em; margin-bottom: 0.65em;
&:last-child { &:last-child {
margin-bottom: 1em; margin-bottom: 1em;
} }
} }
.notification-card-content { .notification-card-content {
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
@@ -109,6 +111,7 @@
.bell { .bell {
font-size: 10em; font-size: 10em;
} }
.message { .message {
font-size: 1.5em; font-size: 1.5em;
} }

View File

@@ -62,10 +62,10 @@ $bar-buttons-notifications-background: #242438;
$bar-buttons-notifications-hover: #45475a; $bar-buttons-notifications-hover: #45475a;
$bar-buttons-notifications-icon: #b4befe; $bar-buttons-notifications-icon: #b4befe;
$bar-buttons-notifications-total: #b4befe; $bar-buttons-notifications-total: #b4befe;
$bar-menus-monochrome: false; $bar-menus-monochrome: true;
$bar-menus-background: #11111b; $bar-menus-background: #11111b;
$bar-menus-cards: #1e1e2e; $bar-menus-cards: #1e1e2e;
$bar-menus-card_radius: 0.4em; $bar-menus-card_radius: 0em;
$bar-menus-border-size: 0.13em; $bar-menus-border-size: 0.13em;
$bar-menus-border-radius: 0.7em; $bar-menus-border-radius: 0.7em;
$bar-menus-border-color: #313244; $bar-menus-border-color: #313244;
@@ -85,7 +85,7 @@ $bar-menus-buttons-active: #f5c2e7;
$bar-menus-buttons-disabled: #585b70; $bar-menus-buttons-disabled: #585b70;
$bar-menus-buttons-text: #11111b; $bar-menus-buttons-text: #11111b;
$bar-menus-iconbuttons-passive: #cdd6f4; $bar-menus-iconbuttons-passive: #cdd6f4;
$bar-menus-iconbuttons-active: #f5c2e7; $bar-menus-iconbuttons-active: #b4befe;
$bar-menus-progressbar-foreground: #b4befe; $bar-menus-progressbar-foreground: #b4befe;
$bar-menus-progressbar-background: #45475a; $bar-menus-progressbar-background: #45475a;
$bar-menus-slider-primary: #b4befe; $bar-menus-slider-primary: #b4befe;