417 lines
8.8 KiB
SCSS
417 lines
8.8 KiB
SCSS
@mixin calendar {
|
|
@include widget;
|
|
padding: $padding*2 $padding*2 0;
|
|
|
|
calendar{
|
|
// all: unset;
|
|
.view {
|
|
all:unset;
|
|
}
|
|
|
|
&.button{
|
|
@include button($flat: true);
|
|
}
|
|
|
|
&:selected{
|
|
box-shadow: inset 0 -8px 0 0 transparentize($accent, 0.5),
|
|
inset 0 0 0 1px $accent;
|
|
border-radius: $radii*0.6;
|
|
}
|
|
|
|
&.header{
|
|
background-color: transparent;
|
|
border: none;
|
|
color: transparentize($fg-color, 0.5);
|
|
}
|
|
|
|
&.highlight{
|
|
background-color: transparent;
|
|
color: transparentize($accent, 0.5);
|
|
}
|
|
|
|
&:indeterminate {
|
|
color: transparentize($fg-color, 0.9);
|
|
}
|
|
font-size: 1.1em;
|
|
padding: .2em;
|
|
color: $fg_color;
|
|
}
|
|
}
|
|
|
|
window#notification .dashboard,
|
|
window#weather .weather,
|
|
window#dashboard .window-content {
|
|
@include floating-widget;
|
|
|
|
.notifications {
|
|
min-width: $notifications-width;
|
|
|
|
.header {
|
|
margin-bottom: $spacing;
|
|
margin-right: $spacing;
|
|
|
|
> label { margin-left: $radii / 2; }
|
|
|
|
button {
|
|
@include button;
|
|
padding: $padding/2 $padding;
|
|
}
|
|
}
|
|
|
|
.notification-scrollable {
|
|
@include scrollable;
|
|
}
|
|
|
|
.notification-list {
|
|
//fixes weird spacing bug on notification panel - release4
|
|
// margin-right: $spacing;
|
|
}
|
|
|
|
.notification {
|
|
@include notification;
|
|
|
|
> box {
|
|
@include widget;
|
|
padding: $padding;
|
|
margin-bottom: $spacing;
|
|
}
|
|
}
|
|
|
|
.placeholder {
|
|
image { font-size: 7em; }
|
|
label { font-size: 1.2em; }
|
|
}
|
|
}
|
|
|
|
separator {
|
|
background-color: $popover-border-color;
|
|
min-width: 2px;
|
|
border-radius: $radii;
|
|
margin-right: $spacing;
|
|
}
|
|
|
|
.datemenu, .system-info {
|
|
@include spacing;
|
|
}
|
|
|
|
.clock-box {
|
|
padding: $padding;
|
|
|
|
.clock {
|
|
font-size: 5em;
|
|
}
|
|
|
|
.uptime {
|
|
color: transparentize($fg-color, 0.2);
|
|
}
|
|
}
|
|
|
|
.calendar {
|
|
@include calendar;
|
|
}
|
|
|
|
//weather popup
|
|
.weather-info {
|
|
.weather-icon{
|
|
font-size: 1.5em;
|
|
margin-top: 0.3em;
|
|
margin-bottom: 0.15em;
|
|
}
|
|
|
|
.weather-temperature {
|
|
all: unset;
|
|
font-size: 1.2em;
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// height of the notification popup
|
|
window#notification .dashboard {
|
|
min-height: 32em;
|
|
}
|
|
|
|
// weather popup
|
|
.weather-refresh {
|
|
all: unset;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.weather-refresh:hover {
|
|
color: gray;
|
|
}
|
|
|
|
.weather-refresh:active {
|
|
color: black;
|
|
}
|
|
|
|
.weather-refresh:focus {
|
|
color: $accent;
|
|
}
|
|
|
|
.weather-info {
|
|
background-color: rgba(81, 164, 231, 0.76);
|
|
border-radius: 16px;
|
|
padding: 0.55em;
|
|
// margin: 0 5px;
|
|
|
|
min-width: 5em;
|
|
min-height: 10em;
|
|
}
|
|
|
|
.weather-temperature {
|
|
margin-bottom: 0.6em;
|
|
}
|
|
|
|
.weather-day {
|
|
padding: 2px;
|
|
}
|
|
|
|
.weather-day:first-child {
|
|
padding: 0;
|
|
}
|
|
|
|
window#dashboard .dashboard,
|
|
window#quicksettings .window-content {
|
|
.circular-progress-box {
|
|
@include widget;
|
|
padding: $padding;
|
|
|
|
.circular-progress {
|
|
min-height: $sys-info-size;
|
|
min-width: $sys-info-size;
|
|
margin: $padding/2;
|
|
font-size: $padding;
|
|
background-color: $bg-color;
|
|
color: $accent;
|
|
|
|
image {
|
|
font-size: 1.8em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// weather window width of the weather widget
|
|
window#weather .weather .tooltip {
|
|
.weather-spacing {
|
|
padding-left: $spacing;
|
|
}
|
|
|
|
.qsweather-widget {
|
|
margin: 0;
|
|
}
|
|
|
|
.qs-weather-box-child {
|
|
min-width: 5em;
|
|
|
|
.weather-icon {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|
|
.qs-weather-box-main {
|
|
min-width: 16.5em;
|
|
}
|
|
}
|
|
|
|
// shared logic for weather widget, first one only goes to qs
|
|
window#quicksettings .window-content,
|
|
window#weather .tooltip {
|
|
.qsweather-widget {
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-top: $padding / 2;
|
|
border-radius: $radii;
|
|
}
|
|
|
|
.qs-weather-box-main {
|
|
margin: 0.5em;
|
|
|
|
.weather-icon {
|
|
font-size: 2.42em;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.weather-temperature {
|
|
all: unset;
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.weather-rain {
|
|
margin-left: 1.2em;
|
|
}
|
|
|
|
.weather-hour {
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
|
|
.qs-weather-box-child {
|
|
padding-bottom: 0.7em;
|
|
|
|
.weather-icon {
|
|
margin-top: 0.3em;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.weather-temperature {
|
|
all: unset;
|
|
margin-bottom: 0.2em;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
// .weather-max {
|
|
// color: #FF8C00;
|
|
// }
|
|
|
|
// .weather-min {
|
|
// color: #87ceeb;
|
|
// }
|
|
}
|
|
|
|
// fix to keep topbar on the correct height - 29 (hyprctl layers), new on release4
|
|
.weather.panel-button label{
|
|
font-size: 16px;
|
|
}
|
|
|
|
$sliderVolumeMinHeight: 2em;
|
|
$sliderTroughMinWidth: 2em;
|
|
|
|
window#dashboard .datemenu .sub-menu {
|
|
all:unset;
|
|
|
|
&:focus,
|
|
&:hover{
|
|
color: $accent;
|
|
}
|
|
}
|
|
|
|
.led-light-color-switcher {
|
|
.on,
|
|
.off {
|
|
min-width: 1.8em;
|
|
min-height: 3.8em;
|
|
background-color: #fff;
|
|
border: 1px solid black;
|
|
border-radius: 5px;
|
|
color: black;
|
|
margin-top: 0.5em;
|
|
|
|
&:focus,
|
|
&:hover{
|
|
box-shadow: inset 0 0 4px 2px $accent,
|
|
inset 0 0 0 99px $widget_bg;
|
|
}
|
|
}
|
|
|
|
.on {
|
|
box-shadow: inset 0px -20px 2px 2px rgba(0, 0, 0, 0.2);
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.off {
|
|
box-shadow: inset 0px 20px 2px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.slider {
|
|
min-width: 21.3em;
|
|
margin: 0 0.5em;
|
|
padding: 0;
|
|
margin-top: 1em;
|
|
|
|
slider {
|
|
all: unset;
|
|
}
|
|
|
|
trough{
|
|
min-height: $sliderVolumeMinHeight;
|
|
border-radius: $radii;
|
|
}
|
|
|
|
highlight,
|
|
progress {
|
|
background: transparent;
|
|
border-radius: $radii;
|
|
min-width: $sliderTroughMinWidth;
|
|
}
|
|
}
|
|
|
|
.color-temp.slider,
|
|
.hue.slider,
|
|
.brightness.slider {
|
|
highlight,
|
|
progress {
|
|
&:focus,
|
|
&:hover{
|
|
box-shadow: inset 0 0 3px 3px $accent,
|
|
inset 0 0 0 99px $widget_bg;
|
|
|
|
border: $accent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.color-temp.slider {
|
|
trough{
|
|
box-shadow:
|
|
inset 700px 0 10px rgba(98, 159, 255, 0.8), /* 6500K */
|
|
inset 600px 0 10px rgba(144, 196, 255, 0.8), /* 6000K */
|
|
inset 500px 0 10px rgba(200, 232, 255, 0.8), /* 5000K */
|
|
inset 400px 0 10px rgba(255, 255, 255, 0.8), /* 4000K */
|
|
inset 300px 0 10px rgba(255, 249, 200, 0.8), /* 3000K */
|
|
inset 200px 0 10px rgba(255, 232, 156, 0.8), /* 2000K */
|
|
inset 100px 0 10px rgba(255, 184, 104, 0.8), /* 1700K */
|
|
;
|
|
}
|
|
|
|
highlight,
|
|
progress {
|
|
box-shadow: inset 0px 0px 2px 1px black;
|
|
}
|
|
}
|
|
|
|
.hue.slider {
|
|
trough{
|
|
box-shadow:
|
|
inset 350px 0 10px rgba(255, 0, 0, 0.8), /* Red */
|
|
inset 300px 0 10px rgba(255, 0, 255, 0.8), /* Magenta */
|
|
inset 250px 0 10px rgba(0, 0, 255, 0.8), /* Blue */
|
|
inset 200px 0 10px rgba(0, 255, 255, 0.8), /* Cyan */
|
|
inset 150px 0 10px rgba(0, 255, 0, 0.8), /* Green */
|
|
inset 100px 0 10px rgba(255, 255, 0, 0.8), /* Yellow */
|
|
inset 50px 0 10px rgba(255, 0, 0, 0.8), /* Red */
|
|
;
|
|
}
|
|
|
|
highlight,
|
|
progress {
|
|
box-shadow: inset 0px 0px 2px 1px black;
|
|
}
|
|
}
|
|
|
|
.brightness.slider {
|
|
trough{
|
|
box-shadow:
|
|
inset 500px 0 10px rgba(255, 255, 255, 0.5),
|
|
inset 450px 0 10px rgba(220, 220, 220, 0.5),
|
|
inset 400px 0 10px rgba(190, 190, 190, 0.5),
|
|
inset 350px 0 10px rgba(160, 160, 160, 0.5),
|
|
inset 300px 0 10px rgba(130, 130, 130, 0.5),
|
|
inset 250px 0 10px rgba(100, 100, 100, 0.5),
|
|
inset 200px 0 10px rgba(70, 70, 70, 0.5),
|
|
inset 150px 0 10px rgba(40, 40, 40, 0.5),
|
|
inset 100px 0 10px rgba(10, 10, 10, 0.5),
|
|
inset 50px 0 10px rgba(0, 0, 0, 0.5)
|
|
;
|
|
|
|
highlight,
|
|
progress {
|
|
box-shadow: inset 0px 0px 2px 1px white;
|
|
}
|
|
}
|
|
}
|
|
} |