Files
web-pwa/src/lib/global.css

199 lines
4.3 KiB
CSS

/* OwlBoard Global CSS */
/* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
* Copyright (c) 2014,2015 by (URW)++ Design & Development
*/
@font-face {
font-family: 'URW Gothic';
src: url('/type/urwgothic/urwgothic-book-webfont.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
* Copyright (c) 2014,2015 by (URW)++ Design & Development
*/
@font-face {
font-family: 'URW Gothic';
src: url('/type/urwgothic/urwgothic-bookoblique-webfont.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
* Copyright (c) 2014,2015 by (URW)++ Design & Development
*/
@font-face {
font-family: 'URW Gothic';
src: url('/type/urwgothic/urwgothic-demi-webfont.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* * URW Gothic is licensed under the SIL Open Font License, Version 1.1.
* Copyright (c) 2014,2015 by (URW)++ Design & Development
*/
@font-face {
font-family: 'URW Gothic';
src: url('/type/urwgothic/urwgothic-demioblique-webfont.woff2') format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
}
/* 100: Thin */
@font-face {
font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-ThinItalic.woff2') format('woff2');
font-weight: 100;
font-style: italic;
font-display: swap;
}
/* 200: ExtraLight */
@font-face {
font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
/* 300: Light */
@font-face {
font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* 400: Regular / Italic */
@font-face {
font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* 500: Medium */
@font-face {
font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* 600: SemiBold */
@font-face {
font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* 700: Bold */
@font-face {
font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* 800: ExtraBold */
@font-face {
font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
:root {
/* Brand Colours */
--color-brand: #4fd1d1;
--color-accent: #3c6f79;
--color-title: #ebebeb;
--color-bg-light: #404c55;
--color-bg-dark: #2b343c;
/* Shadows */
--color-shadow: hsla(210, 20%, 5%, 0.35);
--shadow-std: 0 4px 12px var(--color-shadow);
--shadow-small: 0 4px 6px var(--color-shadow);
--shadow-up: 0 -4px 12px var(--color-shadow);
--shadow-right: 4px 0 12px var(--color-shadow);
/* Functional Colours */
--location-yellow: #edff22;
--delay-orange: #ff914d;
--alert-orange: #f87728;
--cancel-red: #c60000;
--early-blue: #5ec1ff;
}
/* Pulse Animations */
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes fast-pulse {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0.25;
}
}
body {
margin: 0;
padding: 0;
background-color: var(--color-accent);
color: white;
-webkit-font-smoothing: antialiased;
-mos-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a {
color: var(--color-brand);
}
a:visited {
color: var(--color-brand);
}
a:hover {
color: var(--color-accent);
}