2022-10-11 14:48:22 +00:00
|
|
|
/*
|
|
|
|
|
* Bluelib Classic
|
|
|
|
|
* by <me@steffo.eu>
|
|
|
|
|
*/
|
|
|
|
|
body {
|
|
|
|
|
--b-border-radius: 8px;
|
2022-12-28 22:19:03 +00:00
|
|
|
--b-outer-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
|
2022-10-11 14:48:22 +00:00
|
|
|
}
|
|
|
|
|
body,
|
|
|
|
|
body * {
|
|
|
|
|
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.15);
|
|
|
|
|
}
|
|
|
|
|
body h1,
|
|
|
|
|
body h2,
|
|
|
|
|
body h3,
|
|
|
|
|
body h4,
|
|
|
|
|
body h5,
|
|
|
|
|
body h6 {
|
2022-12-28 22:19:03 +00:00
|
|
|
text-shadow: var(--b-outer-shadow);
|
2022-10-11 14:48:22 +00:00
|
|
|
}
|
|
|
|
|
body .panel h1,
|
|
|
|
|
body .panel h2,
|
|
|
|
|
body .panel h3,
|
|
|
|
|
body .panel h4,
|
|
|
|
|
body .panel h5,
|
|
|
|
|
body .panel h6 {
|
|
|
|
|
text-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
body .panel,
|
|
|
|
|
body table.panel > caption {
|
|
|
|
|
border-radius: var(--b-border-radius);
|
2022-12-28 22:19:03 +00:00
|
|
|
box-shadow: var(--b-outer-shadow);
|
2022-10-11 14:48:22 +00:00
|
|
|
}
|
|
|
|
|
body .panel .panel,
|
|
|
|
|
body table.panel > caption .panel {
|
2022-10-12 13:41:04 +00:00
|
|
|
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
|
2022-10-11 14:48:22 +00:00
|
|
|
backdrop-filter: none;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
body .mark,
|
|
|
|
|
body mark,
|
|
|
|
|
body .panel.mark {
|
|
|
|
|
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
|
|
|
|
|
}
|
|
|
|
|
body .mark .mark,
|
|
|
|
|
body mark .mark,
|
|
|
|
|
body .panel.mark .mark,
|
|
|
|
|
body .mark mark,
|
|
|
|
|
body mark mark,
|
|
|
|
|
body .panel.mark mark,
|
|
|
|
|
body .mark .panel.mark,
|
|
|
|
|
body mark .panel.mark,
|
|
|
|
|
body .panel.mark .panel.mark {
|
|
|
|
|
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
|
|
|
|
|
}
|
|
|
|
|
body .mark .mark .mark,
|
|
|
|
|
body mark .mark .mark,
|
|
|
|
|
body .panel.mark .mark .mark,
|
|
|
|
|
body .mark mark .mark,
|
|
|
|
|
body mark mark .mark,
|
|
|
|
|
body .panel.mark mark .mark,
|
|
|
|
|
body .mark .panel.mark .mark,
|
|
|
|
|
body mark .panel.mark .mark,
|
|
|
|
|
body .panel.mark .panel.mark .mark,
|
|
|
|
|
body .mark .mark mark,
|
|
|
|
|
body mark .mark mark,
|
|
|
|
|
body .panel.mark .mark mark,
|
|
|
|
|
body .mark mark mark,
|
|
|
|
|
body mark mark mark,
|
|
|
|
|
body .panel.mark mark mark,
|
|
|
|
|
body .mark .panel.mark mark,
|
|
|
|
|
body mark .panel.mark mark,
|
|
|
|
|
body .panel.mark .panel.mark mark,
|
|
|
|
|
body .mark .mark .panel.mark,
|
|
|
|
|
body mark .mark .panel.mark,
|
|
|
|
|
body .panel.mark .mark .panel.mark,
|
|
|
|
|
body .mark mark .panel.mark,
|
|
|
|
|
body mark mark .panel.mark,
|
|
|
|
|
body .panel.mark mark .panel.mark,
|
|
|
|
|
body .mark .panel.mark .panel.mark,
|
|
|
|
|
body mark .panel.mark .panel.mark,
|
|
|
|
|
body .panel.mark .panel.mark .panel.mark {
|
|
|
|
|
background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
|
|
|
|
|
}
|
|
|
|
|
body .todo,
|
|
|
|
|
body .panel.todo {
|
|
|
|
|
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
|
|
|
|
|
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
|
|
|
|
|
}
|
|
|
|
|
body .todo .panel,
|
|
|
|
|
body .panel.todo .panel {
|
|
|
|
|
background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
|
|
|
|
|
border-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
|
|
|
|
|
}
|
|
|
|
|
body table.panel {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
body table.panel > caption {
|
|
|
|
|
border-radius: 0;
|
2022-12-28 22:19:03 +00:00
|
|
|
box-shadow: var(--b-outer-shadow);
|
2022-10-11 14:48:22 +00:00
|
|
|
}
|
2022-10-14 22:51:30 +00:00
|
|
|
body table.dialog > caption {
|
2022-10-11 14:48:22 +00:00
|
|
|
border-bottom-width: 2px;
|
|
|
|
|
}
|
|
|
|
|
body input,
|
|
|
|
|
body textarea,
|
|
|
|
|
body select,
|
|
|
|
|
body button {
|
|
|
|
|
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.025);
|
|
|
|
|
}
|
|
|
|
|
body input:hover,
|
|
|
|
|
body textarea:hover,
|
|
|
|
|
body select:hover,
|
|
|
|
|
body button:hover {
|
|
|
|
|
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.05);
|
|
|
|
|
}
|
|
|
|
|
body input:active,
|
|
|
|
|
body textarea:active,
|
|
|
|
|
body select:active,
|
|
|
|
|
body button:active {
|
|
|
|
|
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
|
|
|
|
|
}
|
|
|
|
|
body input[type="text"],
|
|
|
|
|
body input[type="password"],
|
|
|
|
|
body input[type="email"],
|
|
|
|
|
body input[type="number"],
|
|
|
|
|
body input[type="search"],
|
|
|
|
|
body input[type="tel"],
|
|
|
|
|
body input[type="datetime-local"],
|
|
|
|
|
body input[type="date"],
|
|
|
|
|
body input[type="time"],
|
|
|
|
|
body select:not([multiple]) {
|
|
|
|
|
border-radius: var(--b-border-radius) var(--b-border-radius) 0 0;
|
|
|
|
|
}
|
|
|
|
|
body textarea,
|
|
|
|
|
body select[multiple] {
|
|
|
|
|
border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
|
|
|
|
|
}
|
|
|
|
|
body input[type="button"],
|
|
|
|
|
body button {
|
|
|
|
|
border-radius: var(--b-border-radius);
|
|
|
|
|
}
|
|
|
|
|
body ul > *::marker,
|
|
|
|
|
body ol > *::marker {
|
|
|
|
|
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5);
|
|
|
|
|
}
|
|
|
|
|
body summary {
|
|
|
|
|
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
|
|
|
|
|
}
|
|
|
|
|
body summary::marker {
|
|
|
|
|
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.5);
|
|
|
|
|
}
|
|
|
|
|
body summary:hover {
|
|
|
|
|
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
|
|
|
|
|
}
|
|
|
|
|
body summary:hover::marker {
|
|
|
|
|
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
|
|
|
|
|
}
|
|
|
|
|
body summary:active::marker {
|
|
|
|
|
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness));
|
|
|
|
|
}
|
|
|
|
|
body a:hover {
|
|
|
|
|
color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 20%) / 1);
|
|
|
|
|
}
|
|
|
|
|
body a:active {
|
|
|
|
|
color: hsl(calc(var(--bhsl-link-hue) + 0deg) calc(var(--bhsl-link-saturation) + 0%) calc(var(--bhsl-link-lightness) + 40%) / 1);
|
|
|
|
|
}
|
|
|
|
|
body kbd,
|
|
|
|
|
body samp {
|
|
|
|
|
border-radius: calc(var(--b-border-radius) / 4);
|
|
|
|
|
}
|
|
|
|
|
body var {
|
|
|
|
|
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
|
|
|
|
|
}
|
|
|
|
|
body q::before,
|
|
|
|
|
body q::after {
|
|
|
|
|
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
|
|
|
|
|
}
|
|
|
|
|
body rt {
|
|
|
|
|
color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.7);
|
|
|
|
|
}
|
