CoastalCommitsPastes/client/app/styles/globals.css

187 lines
3.3 KiB
CSS
Raw Normal View History

2022-03-06 19:46:59 -05:00
:root {
2022-03-23 19:28:39 -04:00
/* Spacing */
--gap-quarter: 0.25rem;
--gap-half: 0.5rem;
--gap: 1rem;
--gap-double: 2rem;
2022-03-23 19:28:39 -04:00
--small-gap: 4rem;
--big-gap: 4rem;
--main-content: 55rem;
--radius: 8px;
--inline-radius: 5px;
--gap-negative: calc(-1 * var(--gap));
--gap-half-negative: calc(-1 * var(--gap-half));
--gap-quarter-negative: calc(-1 * var(--gap-quarter));
2022-03-23 19:28:39 -04:00
/* Typography */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono",
"Menlo", monospace;
/* Transitions */
--transition: 0.1s ease-in-out;
--transition-slow: 0.3s ease-in-out;
--token: #999;
--comment: #999;
--keyword: #fff;
--name: #fff;
--highlight: #2e2e2e;
/* Dark Mode Colors */
--bg: #000;
2022-03-23 19:28:39 -04:00
--fg: #fafbfc;
--gray: #666;
--light-gray: #444;
--lighter-gray: #222;
--lightest-gray: #1a1a1a;
--darker-gray: #b4b4b4;
--darkest-gray: #efefef;
2022-03-23 19:28:39 -04:00
--article-color: #eaeaea;
--header-bg: rgba(19, 20, 21, 0.45);
--gray-alpha: rgba(255, 255, 255, 0.5);
--selection: rgba(255, 255, 255, 0.99);
--border: var(--lighter-gray);
--warning: #ff6700;
--link: #3291ff;
color-scheme: dark;
2022-03-06 19:46:59 -05:00
}
[data-theme="light"] {
2022-03-23 19:28:39 -04:00
--token: #666;
--comment: #999;
--keyword: #000;
--name: #333;
--highlight: #eaeaea;
--bg: #fff;
--fg: #000;
--gray: #888;
2022-03-23 19:28:39 -04:00
--light-gray: #dedede;
--lighter-gray: #f5f5f5;
--lightest-gray: #fafafa;
--darker-gray: #555;
--darkest-gray: #222;
2022-03-23 19:28:39 -04:00
--article-color: #212121;
--header-bg: rgba(255, 255, 255, 0.8);
--gray-alpha: rgba(19, 20, 21, 0.5);
--selection: var(0, 0, 0, .6);
color-scheme: light;
}
* {
2022-03-23 19:28:39 -04:00
box-sizing: border-box;
}
// TODO: replace this with an accessible alternative
2022-11-16 03:49:12 -05:00
*:focus-visible {
outline: none;
2022-11-16 03:49:12 -05:00
}
::selection {
2022-03-23 19:28:39 -04:00
text-shadow: none;
background: var(--fg) !important;
color: var(--bg) !important;
2022-03-07 01:16:08 -05:00
}
2022-03-06 19:46:59 -05:00
html,
body {
2022-03-23 19:28:39 -04:00
padding: 0;
margin: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
2022-03-23 19:28:39 -04:00
min-height: 100vh;
font-family: var(--font-sans);
display: flex;
flex-direction: column;
2022-11-11 19:33:43 -05:00
background: var(--bg);
}
p {
overflow-wrap: break-word;
hyphens: auto;
}
input,
button,
textarea,
select {
2022-11-16 03:49:12 -05:00
border: none;
font-size: 1rem;
background: var(--bg);
}
blockquote {
2022-03-23 19:28:39 -04:00
font-style: italic;
margin: 0;
padding-left: 1rem;
border-left: 3px solid var(--light-gray);
}
a.reset {
2022-03-23 19:28:39 -04:00
outline: none;
text-decoration: none;
2022-03-06 19:46:59 -05:00
}
pre,
code {
2022-03-23 19:28:39 -04:00
font-family: var(--font-mono) !important;
}
hr {
border: 0;
border-bottom: 1px solid var(--light-gray);
margin: var(--gap) 0;
}
@media print {
2022-03-23 19:28:39 -04:00
:root {
--bg: #fff;
--fg: #000;
--gray: #888;
--light-gray: #dedede;
--lighter-gray: #f5f5f5;
--lightest-gray: #fafafa;
--article-color: #212121;
--header-bg: rgba(255, 255, 255, 0.8);
--gray-alpha: rgba(19, 20, 21, 0.5);
--selection: rgba(0, 0, 0, 0.99);
--token: #666;
--comment: #999;
--keyword: #000;
--name: #333;
--highlight: #eaeaea;
}
* {
text-shadow: none !important;
}
}
#root,
#__next {
isolation: isolate;
}
2022-11-16 03:49:12 -05:00
textarea {
resize: vertical;
border: 1px solid var(--border);
font-family: var(--font-sans);
padding: var(--gap-half);
border-radius: var(--radius);
}
textarea:focus {
border-color: var(--light-gray);
outline: none;
}