Files
custum-hyprpanel/scss/style/menus/calendar.scss
Jas Singh 4cdda38604 Implement framework for custom modules and out of the box custom modules as well. (#213)
* Create declarative module scaffolding

* Added ram module (WIP)

* Updates to options, styling and more.

* Added function for styling custom modules.

* Added utility functions and cleaned up code

* Type and fn name updates.

* Update module utils to handle absent values.

* Added icon color in style2 that was missing.

* Linted utils.ts

* Add CPU module and update RAM module to use /proc/meminfo.

* Added disk storage module.

* Consolidate code

* Added netstat module and removed elements from systray default ignore list.

* Added keyboard layout module.

* Fix hook types and move module to customModules directory

* Added updates modules.

* Spacing updates

* Added weather module.

* Added power menu and power module in bar. Increased update default interval to 6 ours.

* Updated styling of bar buttons, made power menu label toggleable, etc.

* Consolidate code and add dynamic tooltips based on data being used.

* Make default custom mogules matugen compatible

* Update base theme

* Fix custom module background coloring

* Remove testing opacity.

* Update themes to account for new modules

* Update nix stuff for libgtop (Need someone to test this)

* Update nix

* Update fractions to multiplications

* Move styling in style directory

* Implement a polling framework for variables that can dynamically adjust polling intervals.

* Netstat module updates when interface name is changed.

* Readme update
2024-09-02 21:10:59 -07:00

183 lines
5.0 KiB
SCSS

.calendar-menu-content * {
font-size: $font-size * $bar-menus-menu-clock-scaling * 0.01;
}
.calendar-content-container {
margin-top: 0em;
min-width: 27em;
min-height: 6em;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
border-radius: $bar-menus-border-radius;
margin-right: 0.5em;
opacity: $bar-menus-opacity * 0.01;
}
.calendar-menu-item-container {
border-radius: $bar-menus-card_radius;
margin-bottom: 1.35em;
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
}
.calendar-content-items {
margin: 1.35em;
}
.calendar-container-box {
margin: 0.75em;
margin-bottom: 0em;
}
.calendar-menu-widget {
border-radius: 0.4em;
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days);
&:selected {
box-shadow: inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $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-label, $bar-menus-menu-clock-calendar-currentday);
border-radius: 0em;
}
&.header {
background-color: transparent;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-yearmonth);
}
&.button {
color: $text;
font-weight: 900;
font-size: 900em;
}
&:hover {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator);
}
&.highlight {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays);
}
&:indeterminate {
color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65);
}
font-size: 1.1em;
padding: 0.35em;
}
.clock-content-items {
min-height: 8em;
.clock-content-time {
font-size: 4em;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-time);
}
.clock-content-period {
font-size: 1.75em;
margin-bottom: 1.35em;
margin-right: -0.875em;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-time-timeperiod);
}
}
.calendar-menu-item-container.clock {
margin-bottom: 0.65em;
}
.calendar-menu-item-container.calendar {
margin-bottom: 0.65em;
}
.calendar-menu-item-container.weather {
margin-bottom: 0em;
}
.weather-container-box {
margin: 1.5em;
margin-top: 2.5em;
min-width: 3em;
.calendar-menu-weather.today.icon {
image {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon);
font-size: 6em;
}
}
.calendar-menu-weather.today.temp.label {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-weather-temperature);
margin-left: 0.2em;
font-size: 2.5em;
&.icon {
font-size: 2.5em;
}
}
.calendar-menu-weather.today.condition.label {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-status);
font-size: 1.5em;
margin-bottom: 0.4em;
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
}
.calendar-menu-weather.today.stats.container {
margin-bottom: 0.75em;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-stats);
.weather.label {
margin-left: 0.35em;
}
}
.menu-separator.weather {
margin: 1.5em 0em;
}
.hourly-weather-time {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-time);
margin-bottom: 0.5em;
}
.hourly-weather-icon {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-icon);
margin-bottom: 0.5em;
}
.hourly-weather-temp {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-weather-hourly-temperature);
}
.weather.precip.icon {
min-width: 1em;
font-size: 1em;
}
.weather.wind.icon {
min-width: 1em;
font-size: 1em;
}