131 lines
3.3 KiB
CSS
131 lines
3.3 KiB
CSS
:root {
|
|
--event-border-radius: 2.5px;
|
|
}
|
|
|
|
event {
|
|
outline: 0 solid transparent;
|
|
outline-offset: 6px;
|
|
transition: var(--focus-ring-transition);
|
|
margin: 1px;
|
|
font-size: 0.9rem;
|
|
background-color: var(--event-bg-color);
|
|
}
|
|
|
|
event:focus:focus-visible {
|
|
outline-color: rgb(from var(--accent-color) r g b / var(--dim-opacity));
|
|
outline-width: 2px;
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
event.timed {
|
|
background-color: color-mix(in srgb, var(--event-bg-color) 17%, transparent);
|
|
}
|
|
|
|
event widget.content {
|
|
margin: 4px;
|
|
}
|
|
|
|
event.timed widget.edge {
|
|
background-color: var(--event-bg-color);
|
|
}
|
|
|
|
event.timed,
|
|
event:not(.slanted):not(.slanted-start):not(.slanted-end) {
|
|
border-radius: var(--event-border-radius);
|
|
}
|
|
|
|
event.timed widget.edge {
|
|
border-radius: var(--event-border-radius);
|
|
min-width: 5px;
|
|
}
|
|
|
|
event.slanted,
|
|
event.slanted-start,
|
|
event.slanted-end:dir(rtl) {
|
|
padding-left: 16px;
|
|
border-radius: 0 var(--event-border-radius) var(--event-border-radius) 0;
|
|
}
|
|
|
|
event.slanted,
|
|
event.slanted-end,
|
|
event.slanted-start:dir(rtl) {
|
|
padding-right: 16px;
|
|
border-radius: var(--event-border-radius) 0 0 var(--event-border-radius);
|
|
}
|
|
|
|
event:not(.timed).color-dark {
|
|
/* Keep in symc with the dark style's event.timed colors */
|
|
color: var(--light-1);
|
|
}
|
|
|
|
event.timed,
|
|
event:not(.timed).color-light {
|
|
color: rgb(from var(--dark-5) r g b / 80%);
|
|
}
|
|
event.slanted,
|
|
event.slanted-start,
|
|
event.slanted-end {
|
|
--rotation: 0deg;
|
|
--linear-gradient-100deg: linear-gradient(calc(var(--rotation) + 100deg), /* left edge */
|
|
transparent 5px,
|
|
var(--event-bg-color) 6px,
|
|
var(--event-bg-color) 9px,
|
|
transparent 10px,
|
|
transparent 16px,
|
|
var(--event-bg-color) 17px);
|
|
|
|
--linear-gradient-280deg: linear-gradient(calc(var(--rotation) + 280deg), /* right edge */
|
|
transparent 5px,
|
|
var(--event-bg-color) 6px,
|
|
var(--event-bg-color) 9px,
|
|
transparent 10px,
|
|
transparent 16px,
|
|
var(--event-bg-color) 17px);
|
|
}
|
|
|
|
event.slanted:dir(rtl),
|
|
event.slanted-start:dir(rtl),
|
|
event.slanted-end:dir(rtl) {
|
|
--rotation: -20deg;
|
|
}
|
|
|
|
event.slanted {
|
|
background-color: transparent;
|
|
background-image:
|
|
var(--linear-gradient-100deg),
|
|
var(--linear-gradient-280deg);
|
|
background-size: 50% 100%;
|
|
background-position: left bottom, right bottom;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
event.slanted-start {
|
|
background-color: transparent;
|
|
background-size: 100%;
|
|
}
|
|
|
|
event.slanted-start:dir(ltr) {
|
|
background-image: var(--linear-gradient-100deg);
|
|
background-position: left bottom;
|
|
}
|
|
|
|
event.slanted-start:dir(rtl) {
|
|
background-image: var(--linear-gradient-280deg);
|
|
background-position: right bottom;
|
|
}
|
|
|
|
event.slanted-end {
|
|
background-color: transparent;
|
|
background-size: 100%;
|
|
}
|
|
|
|
event.slanted-end:dir(ltr) {
|
|
background-image: var(--linear-gradient-280deg);
|
|
background-position: right bottom;
|
|
}
|
|
|
|
event.slanted-end:dir(rtl) {
|
|
background-image: var(--linear-gradient-100deg);
|
|
background-position: left bottom;
|
|
}
|