Implemented the calendar menu that displays time, calendar and weather (WIP).
This commit is contained in:
Jas Singh
139
style.css
139
style.css
@@ -1,7 +1,7 @@
|
||||
* {
|
||||
all: unset;
|
||||
font-family: "Ubuntu Nerd Font";
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.175rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -344,8 +344,8 @@ spinner:checked {
|
||||
min-height: 4.5em;
|
||||
}
|
||||
.workspaces label.active {
|
||||
color: #b4befe;
|
||||
background-color: #b4befe;
|
||||
color: #f5c2e7;
|
||||
background-color: #f5c2e7;
|
||||
min-width: 11em;
|
||||
min-height: 4.5em;
|
||||
}
|
||||
@@ -400,11 +400,11 @@ spinner:checked {
|
||||
}
|
||||
|
||||
.bar {
|
||||
background: #181825;
|
||||
background: #11111b;
|
||||
}
|
||||
|
||||
.bar_item_box_visible {
|
||||
background: rgba(49, 50, 68, 0.8);
|
||||
background-color: #242438;
|
||||
border-radius: 0.35em;
|
||||
padding: 0.2rem 0.9rem;
|
||||
margin: 0.5rem 0.25rem;
|
||||
@@ -611,32 +611,32 @@ window#verification .verification {
|
||||
color: #9278b6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
padding: 1.2rem;
|
||||
min-width: 20rem;
|
||||
min-height: 8rem;
|
||||
padding: 0.84em;
|
||||
min-width: 20em;
|
||||
min-height: 6em;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
window#verification .verification .text-box {
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
window#verification .verification .text-box .title {
|
||||
font-size: 1.5em;
|
||||
color: #eba0ac;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
window#verification .verification .text-box .desc {
|
||||
color: #b4befe;
|
||||
font-size: 1em;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 1.15rem 2.25rem;
|
||||
margin-bottom: 0.55em;
|
||||
padding: 1em 3em;
|
||||
}
|
||||
window#verification .verification .verification-button {
|
||||
background: #11111b;
|
||||
padding: 0.75rem 0rem;
|
||||
margin: 0.4rem 1.9rem;
|
||||
border: 0.2rem solid;
|
||||
padding: 0.7em 0em;
|
||||
margin: 0.4em 1.7em;
|
||||
border: 0.15em solid;
|
||||
border-color: #11111b;
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 0.3em;
|
||||
opacity: 1;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
@@ -697,6 +697,8 @@ window#powermenu .powermenu.box {
|
||||
|
||||
.widget-button {
|
||||
border-color: #11111b;
|
||||
min-width: 4.5em;
|
||||
min-height: 4.5em;
|
||||
opacity: 1;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
@@ -1108,9 +1110,9 @@ image {
|
||||
|
||||
.calendar-content-container {
|
||||
margin-top: 0em;
|
||||
min-width: 16em;
|
||||
min-width: 27em;
|
||||
min-height: 6em;
|
||||
background: #181825;
|
||||
background: #11111b;
|
||||
border: 0.13em solid #313244;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
@@ -1119,35 +1121,114 @@ image {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.calendar-content-items {
|
||||
margin: 1em;
|
||||
.calendar-menu-item-container {
|
||||
border-radius: 0.4em;
|
||||
margin-bottom: 1.35em;
|
||||
background: #1e1e2e;
|
||||
}
|
||||
|
||||
.calendar-menu-calendar {
|
||||
all: unset;
|
||||
padding: 1em;
|
||||
.calendar-content-items {
|
||||
margin: 1.35em;
|
||||
}
|
||||
|
||||
.calendar-container-box {
|
||||
margin: 0.75em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
.calendar-menu-widget {
|
||||
margin-top: 2em;
|
||||
border-radius: 0.4em;
|
||||
color: #cdd6f4;
|
||||
font-size: 1.1em;
|
||||
padding: 0.2em;
|
||||
padding: 0.35em;
|
||||
}
|
||||
.calendar-menu-calendar:selected {
|
||||
box-shadow: inset 0 -0.4em 0 0 #f5c2e7, inset 0 -0.2em 0 0 #181825, inset 0 0 0 0.01em #181825;
|
||||
.calendar-menu-widget:selected {
|
||||
box-shadow: inset 0 -0.5em 0 0 #f5c2e7, inset -0.4em -0.3em 0 0 #1e1e2e, inset 0.4em 0 0 0.01em #1e1e2e;
|
||||
color: #f5c2e7;
|
||||
border-radius: 0em;
|
||||
}
|
||||
.calendar-menu-calendar.header {
|
||||
.calendar-menu-widget.header {
|
||||
background-color: transparent;
|
||||
color: #94e2d5;
|
||||
}
|
||||
.calendar-menu-calendar.highlight {
|
||||
.calendar-menu-widget.button {
|
||||
color: #cdd6f4;
|
||||
font-weight: 900;
|
||||
font-size: 900em;
|
||||
}
|
||||
.calendar-menu-widget:hover {
|
||||
color: #f5c2e7;
|
||||
}
|
||||
.calendar-menu-widget.highlight {
|
||||
border: 2em solid #f5c2e7;
|
||||
background-color: transparent;
|
||||
color: #f5c2e7;
|
||||
}
|
||||
.calendar-menu-calendar:indeterminate {
|
||||
.calendar-menu-widget:indeterminate {
|
||||
color: #585b70;
|
||||
}
|
||||
|
||||
.clock-content-items {
|
||||
min-height: 6em;
|
||||
}
|
||||
.clock-content-items .clock-content-time {
|
||||
font-size: 4em;
|
||||
color: #f5c2e7;
|
||||
}
|
||||
.clock-content-items .clock-content-period {
|
||||
font-size: 1.75em;
|
||||
margin-bottom: 0.7em;
|
||||
margin-right: -0.875em;
|
||||
color: #94e2d5;
|
||||
}
|
||||
|
||||
.calendar-menu-item-container.weather {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
.weather-container-box {
|
||||
color: #f38ba8;
|
||||
margin: 1.5em;
|
||||
min-width: 3em;
|
||||
}
|
||||
.weather-container-box .calendar-menu-weather.today.icon image {
|
||||
color: #f5c2e7;
|
||||
font-size: 5em;
|
||||
}
|
||||
.weather-container-box .calendar-menu-weather.today.temp.label {
|
||||
color: #cdd6f4;
|
||||
margin-left: 0.2em;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.weather-container-box .calendar-menu-weather.today.condition.label {
|
||||
color: #94e2d5;
|
||||
font-size: 1.75em;
|
||||
margin-left: -1.4em;
|
||||
}
|
||||
.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.red {
|
||||
color: #f38ba8;
|
||||
}
|
||||
.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
|
||||
color: #fab387;
|
||||
}
|
||||
.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
|
||||
color: #b4befe;
|
||||
}
|
||||
.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
|
||||
color: #89b4fa;
|
||||
}
|
||||
.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
|
||||
color: #89dceb;
|
||||
}
|
||||
|
||||
.calendar-menu-weather.today.stats.container {
|
||||
color: #f5c2e7;
|
||||
}
|
||||
.calendar-menu-weather.today.stats.container .weather.label {
|
||||
margin-left: 0.35em;
|
||||
}
|
||||
|
||||
.notification-card-container {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user