css: Use CSS variables for linear gradients
This commit is contained in:
Hari Rana
+43
-143
@@ -55,169 +55,69 @@ event:not(.timed).color-light {
|
|||||||
color: rgb(from var(--dark-5) r g b / 80%);
|
color: rgb(from var(--dark-5) r g b / 80%);
|
||||||
outline-color: rgba(255, 255, 255, 0.5);
|
outline-color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
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 {
|
event.slanted {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: linear-gradient(100deg, /* left edge */
|
background-image:
|
||||||
transparent 5px,
|
var(--linear-gradient-100deg),
|
||||||
var(--event-bg-color) 6px,
|
var(--linear-gradient-280deg);
|
||||||
var(--event-bg-color) 9px,
|
background-size: 50% 100%;
|
||||||
transparent 10px,
|
background-position: left bottom, right bottom;
|
||||||
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-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 {
|
event.slanted-start {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: linear-gradient(100deg, /* left edge */
|
background-size: 100%;
|
||||||
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 {
|
event.slanted-start:dir(ltr) {
|
||||||
background-image: linear-gradient(100deg, /* left edge */
|
background-image: var(--linear-gradient-100deg);
|
||||||
transparent 5px,
|
background-position: left bottom;
|
||||||
var(--event-bg-color) 6px,
|
|
||||||
var(--event-bg-color) 9px,
|
|
||||||
transparent 10px,
|
|
||||||
transparent 16px,
|
|
||||||
var(--event-bg-color) 17px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
event.slanted-start:dir(rtl) {
|
event.slanted-start:dir(rtl) {
|
||||||
background-image: linear-gradient(260deg, /* right edge */
|
background-image: var(--linear-gradient-280deg);
|
||||||
transparent 5px,
|
background-position: right bottom;
|
||||||
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 {
|
event.slanted-end {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: linear-gradient(280deg, /* right edge */
|
background-size: 100%;
|
||||||
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 {
|
event.slanted-end:dir(ltr) {
|
||||||
background-image: linear-gradient(280deg, /* right edge */
|
background-image: var(--linear-gradient-280deg);
|
||||||
transparent 5px,
|
background-position: right bottom;
|
||||||
var(--event-bg-color) 6px,
|
|
||||||
var(--event-bg-color) 9px,
|
|
||||||
transparent 10px,
|
|
||||||
transparent 16px,
|
|
||||||
var(--event-bg-color) 17px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
event.slanted-end:dir(rtl) {
|
event.slanted-end:dir(rtl) {
|
||||||
background-image: linear-gradient(80deg, /* left edge */
|
background-image: var(--linear-gradient-100deg);
|
||||||
transparent 5px,
|
background-position: left bottom;
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user