nightTab/css/base.css

86 lines
1.7 KiB
CSS

:root {
--black: #222222;
--white: #ffffff;
--gray-01: #262831;
--gray-02: #2f333e;
--gray-03: #393e4b;
--gray-04: #434958;
--gray-05: #4d5465;
--gray-06: #575f72;
--gray-07: #616a7f;
--gray-08: #6b758c;
--gray-09: #758099;
--gray-10: #7f8ba6;
--gray-11: #8997b4;
--gray-12: #95a2bb;
--gray-13: #a2adc3;
--gray-14: #aeb8cb;
--gray-15: #bbc3d3;
--gray-16: #c7ceda;
--gray-17: #d4d9e2;
--gray-18: #e0e4ea;
--gray-19: #edeff2;
--gray-20: #fafafa;
--root-font-size: 14px;
--radius: 2px;
--accent: 255, 170, 51;
--line-width: 3px;
--background: var(--gray-01);
--animation-speed-fast: 0.1s;
--animation-speed-medium: 0.2s;
--animation-speed-slow: 0.3s;
--font-regular: "Open Sans Regular", sans-serif;
--font-bold: "Open Sans Bold", sans-serif;
--font-light: "Open Sans Light", sans-serif;
--font-fjalla: "Fjalla One Regular", sans-serif;
/* breakpoint reference */
/* can not be used in @media as of yet */
--breakpoint-sm: 550px;
--breakpoint-md: 700px;
--breakpoint-lg: 900px;
--breakpoint-xl: 1300px;
}
:root.is-link-block {
--link-height: 7em;
--url-height: 20%;
--edit-height: 30%;
}
:root.is-link-list {
--link-height: 4em;
--url-height: 30%;
--edit-height: 50%;
}
@media (min-width: 700px) {
:root {
--root-font-size: 16px;
}
:root.is-link-block {
--link-height: 9em;
}
}
::selection {
background-color: rgb(var(--accent));
color: var(--white);
}
html {
font-size: var(--root-font-size);
}
body {
background-color: var(--background);
color: var(--white);
font-size: 1rem;
width: 100vw;
height: 100vh;
font-family: var(--font-regular);
}
* {
box-sizing: border-box;
}