224 lines
8.8 KiB
CSS
224 lines
8.8 KiB
CSS
:root {
|
|
--event-border-radius: 2.5px;
|
|
}
|
|
|
|
event {
|
|
margin: 1px;
|
|
font-size: 0.9rem;
|
|
background-color: var(--event-bg-color);
|
|
}
|
|
|
|
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: @light_1;
|
|
outline-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
event.timed,
|
|
event:not(.timed).color-light {
|
|
color: alpha(@dark_5, 0.8);
|
|
outline-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
event.slanted {
|
|
background-color: transparent;
|
|
background-image: linear-gradient(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, /* right edge */
|
|
transparent 5px,
|
|
var(--event-bg-color) 6px,
|
|
var(--event-bg-color) 9px,
|
|
transparent 10px,
|
|
transparent 16px,
|
|
var(--event-bg-color) 17px);
|
|
background-size: 50% 100%, 50% 100%, 50% 100%, 50% 100%;
|
|
background-position: left bottom, right bottom, left bottom, right bottom;
|
|
background-repeat: no-repeat;
|
|
background-origin: padding-box, padding-box, border-box, border-box;
|
|
background-clip: padding-box, padding-box, border-box, border-box;
|
|
}
|
|
|
|
event.slanted:backdrop {
|
|
background-image: linear-gradient(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, /* 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) {
|
|
background-image: linear-gradient(80deg, /* 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(260deg, /* 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):backdrop {
|
|
background-image: linear-gradient(80deg, /* 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(260deg, /* 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-start {
|
|
background-color: transparent;
|
|
background-image: linear-gradient(100deg, /* left edge */
|
|
transparent 5px,
|
|
var(--event-bg-color) 6px,
|
|
var(--event-bg-color) 9px,
|
|
transparent 10px,
|
|
transparent 16px,
|
|
var(--event-bg-color) 17px);
|
|
background-position: left bottom, left bottom;
|
|
background-size: 100% 100%, 100% 100%;
|
|
background-origin: padding-box, border-box;
|
|
background-clip: padding-box, border-box;
|
|
}
|
|
|
|
event.slanted-start:backdrop {
|
|
background-image: linear-gradient(100deg, /* left edge */
|
|
transparent 5px,
|
|
var(--event-bg-color) 6px,
|
|
var(--event-bg-color) 9px,
|
|
transparent 10px,
|
|
transparent 16px,
|
|
var(--event-bg-color) 17px);
|
|
}
|
|
|
|
event.slanted-start:dir(rtl) {
|
|
background-image: linear-gradient(260deg, /* right edge */
|
|
transparent 5px,
|
|
var(--event-bg-color) 6px,
|
|
var(--event-bg-color) 9px,
|
|
transparent 10px,
|
|
transparent 16px,
|
|
var(--event-bg-color) 17px);
|
|
background-position: right bottom, right bottom;
|
|
}
|
|
|
|
event.slanted-start:dir(rtl):backdrop {
|
|
background-image: linear-gradient(260deg, /* 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-end {
|
|
background-color: transparent;
|
|
background-image: linear-gradient(280deg, /* right edge */
|
|
transparent 5px,
|
|
var(--event-bg-color) 6px,
|
|
var(--event-bg-color) 9px,
|
|
transparent 10px,
|
|
transparent 16px,
|
|
var(--event-bg-color) 17px);
|
|
background-position: right bottom, right bottom;
|
|
background-size: 100% 100%, 100% 100%;
|
|
background-origin: padding-box, border-box;
|
|
background-clip: padding-box, border-box;
|
|
}
|
|
|
|
event.slanted-end:backdrop {
|
|
background-image: linear-gradient(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-end:dir(rtl) {
|
|
background-image: linear-gradient(80deg, /* left edge */
|
|
transparent 5px,
|
|
var(--event-bg-color) 6px,
|
|
var(--event-bg-color) 9px,
|
|
transparent 10px,
|
|
transparent 16px,
|
|
var(--event-bg-color) 17px);
|
|
background-position: left bottom, left bottom;
|
|
}
|
|
|
|
event.slanted-end:dir(rtl):backdrop {
|
|
background-image: linear-gradient(80deg, /* left edge */
|
|
transparent 5px,
|
|
var(--event-bg-color) 6px,
|
|
var(--event-bg-color) 9px,
|
|
transparent 10px,
|
|
transparent 16px,
|
|
var(--event-bg-color) 17px);
|
|
}
|