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
modules/bar/workspaces/index.js
+1 -1
View File
@@ -9,7 +9,7 @@ function range(length, start = 1) {
const Workspaces = (monitor = -1, ws = 8) => {
const getWorkspacesForMonitor = (curWs, wsRules) => {
if (!wsRules || !wsRules.length) {
if (!wsRules || !Object.keys(wsRules).length) {
return true;
}
options.ts
+2 -1
View File
@@ -133,7 +133,7 @@ const options = mkOptions(OPTIONS, {
cards: opt(colors.base),
border: opt(colors.surface0),
text: opt(colors.text),
dimtext: opt(colors.text),
dimtext: opt(colors.surface2),
label: opt(colors.lavender),
listitems: {
passive: opt(colors.text),
@@ -386,6 +386,7 @@ const options = mkOptions(OPTIONS, {
yearmonth: opt(colors.teal),
weekdays: opt(colors.pink),
paginator: opt(colors.pink),
currentday: opt(colors.pink),
days: opt(colors.text),
contextdays: opt(colors.surface2),
},
scss/style/menus/calendar.scss
+27 -47
View File
@@ -1,11 +1,12 @@
@import "../colors";
@import '../../variables';
.calendar-content-container {
margin-top: 0em;
min-width: 27em;
min-height: 6em;
background: $crust;
border: 0.13em solid $surface0;
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, $bar-menus-menu-clock-border-color);
border-radius: 0.7em;
margin-right: 0.5em;
}
@@ -13,7 +14,7 @@
.calendar-menu-item-container {
border-radius: 0.4em;
margin-bottom: 1.35em;
background: $base;
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
}
.calendar-content-items {
@@ -27,19 +28,19 @@
.calendar-menu-widget {
border-radius: 0.4em;
color: $text;
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days);
&:selected {
box-shadow: inset 0 -0.5em 0 0 $pink,
inset -0.4em -0.3em 0 0 $base,
inset 0.4em 0 0 0.01em $base;
color: $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 if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color),
inset 0.4em 0 0 0.01em if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-currentday);
border-radius: 0em;
}
&.header {
background-color: transparent;
color: $teal;
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-yearmonth);
}
&.button {
color: $text;
@@ -47,15 +48,13 @@
font-size: 900em;
}
&:hover {
color: $pink;
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator);
}
&.highlight {
border: 2em solid $pink;
background-color: transparent;
color: $pink;
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays);
}
&:indeterminate {
color: $surface2;
color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65);
}
font-size: 1.1em;
@@ -67,13 +66,13 @@
.clock-content-time {
font-size: 4em;
color: $pink;
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-time-time);
}
.clock-content-period {
font-size: 1.75em;
margin-bottom: 1.35em;
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 {
color: $red;
margin: 1.5em;
margin-top: 2.5em;
min-width: 3em;
// min-height: 10em;
.calendar-menu-weather.today.icon {
image {
color: $pink;
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon);
font-size: 6em;
// margin-right: 0.3em;
}
}
.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;
font-size: 2.5em;
@@ -113,47 +109,31 @@
}
.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;
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 {
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 {
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 {
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 {
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 {
color: $sky;
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-extremelycold);
}
}
.calendar-menu-weather.today.stats.container {
margin-bottom: 0.75em;
color: $pink;
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-stats);
.weather.label {
margin-left: 0.35em;
@@ -165,15 +145,15 @@
}
.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;
}
.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;
}
.hourly-weather-temp {
color: $pink;
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-temperature);
}
scss/variables.scss
+2 -1
View File
@@ -63,7 +63,7 @@ $bar-menus-background: #11111b;
$bar-menus-cards: #1e1e2e;
$bar-menus-border: #313244;
$bar-menus-text: #cdd6f4;
$bar-menus-dimtext: #cdd6f4;
$bar-menus-dimtext: #585b70;
$bar-menus-label: #b4befe;
$bar-menus-listitems-passive: #cdd6f4;
$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-weekdays: #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-contextdays: #585b70;
$bar-menus-menu-clock-weather-icon: #f5c2e7;