LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish calendar styling...

Browse Source
This commit is contained in:
Jas Singh
2024-07-18 01:09:44 -07:00
parent 9354622eb0
commit c67b264a66
4 changed files with 32 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
modules/bar/workspaces/index.js
View File

@@ -9,7 +9,7 @@ function range(length, start = 1) {
const Workspaces = (monitor = -1, ws = 8) => { const Workspaces = (monitor = -1, ws = 8) => {
const getWorkspacesForMonitor = (curWs, wsRules) => { const getWorkspacesForMonitor = (curWs, wsRules) => {
if (!wsRules || !wsRules.length) { if (!wsRules || !Object.keys(wsRules).length) {
return true; return true;
} }

3
options.ts
View File

@@ -133,7 +133,7 @@ const options = mkOptions(OPTIONS, {
cards: opt(colors.base), cards: opt(colors.base),
border: opt(colors.surface0), border: opt(colors.surface0),
text: opt(colors.text), text: opt(colors.text),
dimtext: opt(colors.text), dimtext: opt(colors.surface2),
label: opt(colors.lavender), label: opt(colors.lavender),
listitems: { listitems: {
passive: opt(colors.text), passive: opt(colors.text),
@@ -386,6 +386,7 @@ const options = mkOptions(OPTIONS, {
yearmonth: opt(colors.teal), yearmonth: opt(colors.teal),
weekdays: opt(colors.pink), weekdays: opt(colors.pink),
paginator: opt(colors.pink), paginator: opt(colors.pink),
currentday: opt(colors.pink),
days: opt(colors.text), days: opt(colors.text),
contextdays: opt(colors.surface2), contextdays: opt(colors.surface2),
}, },

74
scss/style/menus/calendar.scss
View File

@@ -1,11 +1,12 @@
@import "../colors"; @import "../colors";
@import '../../variables';
.calendar-content-container { .calendar-content-container {
margin-top: 0em; margin-top: 0em;
min-width: 27em; min-width: 27em;
min-height: 6em; min-height: 6em;
background: $crust; background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color);
border: 0.13em solid $surface0; border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border, $bar-menus-menu-clock-border-color);
border-radius: 0.7em; border-radius: 0.7em;
margin-right: 0.5em; margin-right: 0.5em;
} }
@@ -13,7 +14,7 @@
.calendar-menu-item-container { .calendar-menu-item-container {
border-radius: 0.4em; border-radius: 0.4em;
margin-bottom: 1.35em; margin-bottom: 1.35em;
background: $base; background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
} }
.calendar-content-items { .calendar-content-items {
@@ -27,19 +28,19 @@
.calendar-menu-widget { .calendar-menu-widget {
border-radius: 0.4em; border-radius: 0.4em;
color: $text; color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days);
&:selected { &:selected {
box-shadow: inset 0 -0.5em 0 0 $pink, box-shadow: inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-currentday),
inset -0.4em -0.3em 0 0 $base, inset -0.4em -0.3em 0 0 if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color),
inset 0.4em 0 0 0.01em $base; inset 0.4em 0 0 0.01em if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
color: $pink; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-currentday);
border-radius: 0em; border-radius: 0em;
} }
&.header { &.header {
background-color: transparent; background-color: transparent;
color: $teal; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-yearmonth);
} }
&.button { &.button {
color: $text; color: $text;
@@ -47,15 +48,13 @@
font-size: 900em; font-size: 900em;
} }
&:hover { &:hover {
color: $pink; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator);
} }
&.highlight { &.highlight {
border: 2em solid $pink; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays);
background-color: transparent;
color: $pink;
} }
&:indeterminate { &:indeterminate {
color: $surface2; color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65);
} }
font-size: 1.1em; font-size: 1.1em;
@@ -67,13 +66,13 @@
.clock-content-time { .clock-content-time {
font-size: 4em; font-size: 4em;
color: $pink; color: if($bar-menus-monochrome, $bar-menus-icons-active, $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;
margin-right: -0.875em; margin-right: -0.875em;
color: $teal; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-time-timeperiod);
} }
} }
@@ -88,22 +87,19 @@
} }
.weather-container-box { .weather-container-box {
color: $red;
margin: 1.5em; margin: 1.5em;
margin-top: 2.5em; margin-top: 2.5em;
min-width: 3em; min-width: 3em;
// min-height: 10em;
.calendar-menu-weather.today.icon { .calendar-menu-weather.today.icon {
image { image {
color: $pink; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon);
font-size: 6em; font-size: 6em;
// margin-right: 0.3em;
} }
} }
.calendar-menu-weather.today.temp.label { .calendar-menu-weather.today.temp.label {
color: $text; color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-weather-temperature);
margin-left: 0.2em; margin-left: 0.2em;
font-size: 2.5em; font-size: 2.5em;
@@ -113,47 +109,31 @@
} }
.calendar-menu-weather.today.condition.label { .calendar-menu-weather.today.condition.label {
color: $teal; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-status);
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 0.4em; margin-bottom: 0.4em;
} }
// .calendar-menu-weather.today.condition.label.weather-color.red {
// color: $red;
// }
// .calendar-menu-weather.today.condition.label.weather-color.orange {
// color: $orange;
// }
// .calendar-menu-weather.today.condition.label.weather-color.lavender {
// color: $lavender;
// }
// .calendar-menu-weather.today.condition.label.weather-color.blue {
// color: $blue;
// }
// .calendar-menu-weather.today.condition.label.weather-color.sky {
// color: $sky;
// }
.calendar-menu-weather.today.temp.label.icon.weather-color.red { .calendar-menu-weather.today.temp.label.icon.weather-color.red {
color: $red; 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: $orange; 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: $lavender; 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: $blue; 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: $sky; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-extremelycold);
} }
} }
.calendar-menu-weather.today.stats.container { .calendar-menu-weather.today.stats.container {
margin-bottom: 0.75em; margin-bottom: 0.75em;
color: $pink; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-stats);
.weather.label { .weather.label {
margin-left: 0.35em; margin-left: 0.35em;
@@ -165,15 +145,15 @@
} }
.hourly-weather-time { .hourly-weather-time {
color: $pink; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-time);
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.hourly-weather-icon { .hourly-weather-icon {
color: $pink; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-icon);
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.hourly-weather-temp { .hourly-weather-temp {
color: $pink; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-temperature);
} }

3
scss/variables.scss
View File

@@ -63,7 +63,7 @@ $bar-menus-background: #11111b;
$bar-menus-cards: #1e1e2e; $bar-menus-cards: #1e1e2e;
$bar-menus-border: #313244; $bar-menus-border: #313244;
$bar-menus-text: #cdd6f4; $bar-menus-text: #cdd6f4;
$bar-menus-dimtext: #cdd6f4; $bar-menus-dimtext: #585b70;
$bar-menus-label: #b4befe; $bar-menus-label: #b4befe;
$bar-menus-listitems-passive: #cdd6f4; $bar-menus-listitems-passive: #cdd6f4;
$bar-menus-listitems-active: #b4befe; $bar-menus-listitems-active: #b4befe;
@@ -186,6 +186,7 @@ $bar-menus-menu-clock-time-timeperiod: #94e2d5;
$bar-menus-menu-clock-calendar-yearmonth: #94e2d5; $bar-menus-menu-clock-calendar-yearmonth: #94e2d5;
$bar-menus-menu-clock-calendar-weekdays: #f5c2e7; $bar-menus-menu-clock-calendar-weekdays: #f5c2e7;
$bar-menus-menu-clock-calendar-paginator: #f5c2e7; $bar-menus-menu-clock-calendar-paginator: #f5c2e7;
$bar-menus-menu-clock-calendar-currentday: #f5c2e7;
$bar-menus-menu-clock-calendar-days: #cdd6f4; $bar-menus-menu-clock-calendar-days: #cdd6f4;
$bar-menus-menu-clock-calendar-contextdays: #585b70; $bar-menus-menu-clock-calendar-contextdays: #585b70;
$bar-menus-menu-clock-weather-icon: #f5c2e7; $bar-menus-menu-clock-weather-icon: #f5c2e7;