ForcePilot/web/src/assets/base.css

86 lines
2.1 KiB
CSS
Raw Normal View History

/* color palette from <https://github.com/vuejs/theme> */
:root {
2024-07-16 18:14:27 +08:00
--c-white: #ffffff;
--c-white-soft: #f8f8f8;
--c-white-mute: #f2f2f2;
2024-07-29 01:00:02 +08:00
--c-black: #202428;
2024-07-16 18:14:27 +08:00
--c-black-soft: #222222;
--c-black-mute: #282828;
2024-07-16 18:14:27 +08:00
--c-indigo: #2c3e50;
--c-black-light-1: #333333;
--c-black-light-2: #454545;
--c-black-light-3: #666666;
--c-black-light-4: #999999;
2024-07-16 18:14:27 +08:00
--c-text-light-1: var(--c-indigo);
--c-text-light-2: rgba(60, 66, 70, 0.66);
--c-text-dark-1: var(--c-white);
2024-07-31 20:22:05 +08:00
--c-text-dark-2: #b8b8b8;
}
/* semantic color variables for this project */
:root {
2024-07-16 18:14:27 +08:00
--color-background: var(--c-white);
--color-background-soft: var(--c-white-soft);
--color-background-mute: var(--c-white-mute);
--color-border: var(--c-black-light-2);
--color-border-hover: var(--c-black-light-1);
2024-07-16 18:14:27 +08:00
--color-heading: var(--c-text-light-1);
2024-07-29 01:00:02 +08:00
--color-text: var(--c-black);
--section-gap: 160px;
2024-07-14 16:42:38 +08:00
--main-color: #005f77;
--main-color-dark: #004d5c;
--main-light-1: #007f96;
2024-07-26 14:13:05 +08:00
--main-light-2: #D3EAED;
--main-light-3: #EDF4F5;
--main-light-4: #F2F6F7;
2024-07-29 01:00:02 +08:00
--main-light-5: #F7FAFB;
--main-light-6: #FAFDFD;
2024-07-14 16:42:38 +08:00
--min-width: 400px;
--min-header-width: 80px;
2024-07-16 18:14:27 +08:00
--error-color: #f50a0d;
}
/* @media (prefers-color-scheme: dark) {
:root {
2024-07-16 18:14:27 +08:00
--color-background: var(--c-black);
--color-background-soft: var(--c-black-soft);
--color-background-mute: var(--c-black-mute);
--color-border: var(--c-black-dark-2);
--color-border-hover: var(--c-black-dark-1);
2024-07-16 18:14:27 +08:00
--color-heading: var(--c-text-dark-1);
--color-text: var(--c-text-dark-2);
}
} */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
position: relative;
font-weight: normal;
}
body {
display: flow-root;
min-height: 100vh;
color: var(--color-text);
line-height: 1.6;
font-family: 'HarmonyOS Sans SC', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}