93 lines
No EOL
2 KiB
SCSS
93 lines
No EOL
2 KiB
SCSS
@use '../variables';
|
|
|
|
window.Bar {
|
|
.datetime-bar {
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
.clock-time {
|
|
font-size: 12px;
|
|
line-height: 0;
|
|
font-weight: 400;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.clock-date {
|
|
font-size: 12px;
|
|
line-height: 0;
|
|
font-weight: 400;
|
|
font-family: variables.$font-monospace;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.datetime-btn {
|
|
font-family: variables.$font-monospace;
|
|
background-color: rgba(variables.$bg-base, 0.7);
|
|
border: none;
|
|
box-shadow: none;
|
|
min-height: 0;
|
|
border-radius: 0;
|
|
padding: 0 6px;
|
|
margin: 0;
|
|
|
|
&:focus{
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
&:hover {
|
|
background-color: rgba(variables.$bg-surface, 0.4);
|
|
}
|
|
}
|
|
}
|
|
|
|
.calendar-popover {
|
|
background: transparent;
|
|
padding: 0 20px;
|
|
font-family: variables.$font-sans;
|
|
|
|
> contents {
|
|
padding: 0;
|
|
}
|
|
|
|
.calendar-widget {
|
|
header {
|
|
font-weight: bold;
|
|
color: variables.$text-primary;
|
|
border-bottom: 1px solid variables.$border-default;
|
|
}
|
|
|
|
.day-number {
|
|
border-radius: 0;
|
|
padding: 10px;
|
|
font-size: 13px;
|
|
color: variables.$text-secondary;
|
|
|
|
&:checked {
|
|
color: variables.$accent-primary;
|
|
font-weight: bold;
|
|
box-shadow: 0 3px 0 -1px variables.$accent-primary;
|
|
}
|
|
|
|
// marked + selected at the same time
|
|
&:checked:selected {
|
|
background: variables.$accent-primary;
|
|
color: variables.$text-primary;
|
|
box-shadow: 0 3px 0 -1px variables.$text-primary;
|
|
}
|
|
&:selected {
|
|
background: rgba(variables.$accent-primary, 0.5);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(variables.$accent-primary, 0.3);
|
|
color: variables.$text-primary;
|
|
}
|
|
}
|
|
|
|
.other-month {
|
|
color: rgba(variables.$text-secondary, 0.3);
|
|
}
|
|
}
|
|
}
|
|
} |