cyp/app/css/variables.less
Ondrej Zara 0b008659c7
styling
2020-03-10 15:25:43 +01:00

53 lines
872 B
Text

@breakpoint-menu: 480px;
cyp-app {
--font-size-large: 112.5%;
--icon-spacing: 4px;
--primary: rgb(var(--primary-raw));
--spacing: 8px;
--box-shadow: 0 0 3px #000;
--border-width: 4px;
}
.light() {
--fg: #333;
--bg: #f0f0f0;
--bg-alt: #e0e0e0;
--text-shadow: none;
}
.dark() {
--fg: #f0f0f0;
--bg: #333;
--bg-alt: #555;
--text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
cyp-app[theme=light] { .light(); }
cyp-app[theme=dark] { .dark(); }
@media (prefers-color-scheme: dark) {
cyp-app[theme=auto] { .dark(); }
}
@media (prefers-color-scheme: light) {
cyp-app[theme=auto] { .light(); }
}
cyp-app[color=dodgerblue] {
--primary-raw: 30, 144, 255;
}
cyp-app[color=darkorange] {
--primary-raw: 255, 140, 0;
}
cyp-app[color=limegreen] {
--primary-raw: 50, 205, 50;
}
@media (max-width: @breakpoint-menu) {
:root {
--spacing: var(--icon-spacing);
}
}