3wordchant
/
oasis
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
oasis/src/assets/style.css

744 lines
14 KiB
CSS
Raw Normal View History

Add lots of shared base16 + highlight.js themes
2019-09-29 23:06:41 +00:00
:root {
Change styles to remove duplication
2019-09-30 18:18:29 +00:00
/*
* according to https://www.color-blindness.com/color-name-hue/
*
* amber
* chartreuse
* free-speech-green (lime)
* aqua
* blue
* electric-indigo
* hot-magenta
*/
Add lots of shared base16 + highlight.js themes
2019-09-29 23:06:41 +00:00
--red: var(--base08);
--orange: var(--base09);
--yellow: var(--base0A);
--green: var(--base0B);
--cyan: var(--base0C);
--blue: var(--base0D);
--violet: var(--base0E);
Change styles to remove duplication
2019-09-30 18:18:29 +00:00
--magenta: var(--base0F);
/* convenience */
Add lots of shared base16 + highlight.js themes
2019-09-29 23:06:41 +00:00
--bg: var(--base00);
--bg-status: var(--base01);
--bg-selection: var(--base02);
--fg-alt: var(--base03);
--fg-status: var(--base04);
--fg: var(--base05);
--fg-light: var(--base06);
--bg-light: var(--base07);
Change styles to remove duplication
2019-09-30 18:18:29 +00:00
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
/* size (2^n) */
--size-3: 8rem;
--size-2: 4rem;
--size-1: 2rem;
--size-0: 1rem;
--size--1: 0.5rem;
--size--2: 0.25rem;
--size--3: 0.125rem;
--size--4: 0.0625rem;
Change style for content warnings
2019-12-13 22:25:39 +00:00
Change styles to remove duplication
2019-09-30 18:18:29 +00:00
/* size */
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
--common-radius: var(--size--2);
--measure: 36rem;
Change to use more consistent size framework
2019-12-15 18:45:41 +00:00
--line: 1.5rem;
Use capitalization for Oasis links and buttons Problem: Using all-lowercase-everything isn't really a standard around the web and it might be better to use consistent capitalization. This was brought up in: https://github.com/fraction/oasis/issues/98 Solution: This changes the main navigation to use links with the first letter capitalized, like how Patchwork + Twitter + Mastodon + etc do it. This means that we're consistently using sentence case everywhere, which I think is our best option. Originally I tried experimenting with all-caps for actions, which I found aesthetically pleasing, but you have to reduce the font size to make it look good (bad!) and I was reading that all-caps text is harder for friends with dyslexia or vision impairments.
2020-01-27 23:00:00 +00:00
--code-size: 85%;
Add lots of shared base16 + highlight.js themes
2019-09-29 23:06:41 +00:00
}
Add theme to scrollbars, `<button>`, and `<select>` elements
2019-09-30 21:45:34 +00:00
* {
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
scrollbar-color: var(--fg-status) var(--bg);
}
::selection {
background-color: var(--bg-selection);
Change default theme to Tomorrow
2019-12-15 00:06:44 +00:00
color: var(--fg-light);
Add theme to scrollbars, `<button>`, and `<select>` elements
2019-09-30 21:45:34 +00:00
}
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
html {
display: flex;
Experiment with common-good module
2020-01-22 00:22:19 +00:00
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
justify-content: center;
Change styles and restyle with CSS variables
2019-06-30 19:59:32 +00:00
font-size: 12pt;
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
line-height: 1.5;
margin: 0;
padding: 0;
Fix sidebar moving along X axis on short pages Problem: On short pages, like the search page, there's no scrollbar gutter on the right side of the page, which moves everything a few pixels to the right. After banging my head against this for an hour I finally realized that it only happens when your viewport is taller than the content on the page, which creates the scrollbar. This was reported as: https://github.com/fraction/oasis/issues/96 Solution: Change the display so that we consistently show a scrollbar gutter on the right side of the page regardless of whether we need it (e.g. on very short pages or on very tall monitors). This means that when we center the content on the page it won't move depending on the height of the page, which was frustrating and janky.
2020-01-27 21:44:30 +00:00
overflow-y: scroll;
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
}
Add basic search functionality
2019-12-07 23:22:00 +00:00
main {
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
margin: 0;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin-bottom: var(--size-0);
Add basic search functionality
2019-12-07 23:22:00 +00:00
}
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
/* https://www.desmos.com/calculator/3elcf5cwhn */
Experiment with common-good module
2020-01-22 00:22:19 +00:00
h1 {
font-size: 133%;
} /* 4 / 3 */
h2 {
font-size: 115%;
} /* 8 / 7 */
h3 {
font-size: 105%;
} /* 16 / 15 */
h4 {
font-size: 103%;
} /* 32 / 31 */
h5 {
font-size: 101%;
} /* 64 / 63 */
h6 {
font-size: 100%;
} /* 128 / 127 */
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
Add stylelint-config-standard for more opinionated CSS
2019-09-26 02:07:38 +00:00
h1,
h2,
h3,
h4,
h5,
h6 {
Replace faux-shadow with thin border, change default theme
2019-12-15 22:08:38 +00:00
color: var(--bg-light);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin: var(--size-0) 0;
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
}
Add stylelint-config-standard for more opinionated CSS
2019-09-26 02:07:38 +00:00
ul,
ol {
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
padding-left: var(--size-0);
margin-left: var(--size--3);
Add stylelint to ensure CSS styles aren't broken
2019-09-26 02:05:41 +00:00
}
a {
Change styles to reduce visual noise Big thanks for @cinnamon-bun for these suggestions!
2019-12-16 00:16:15 +00:00
color: var(--fg-light);
Add stylelint to ensure CSS styles aren't broken
2019-09-26 02:05:41 +00:00
}
fix common-good setup somehow it's cli arguments changed
2020-10-19 07:27:10 +00:00
button,
.file-button {
Fix public view to avoid showing private messages
2019-09-27 03:22:33 +00:00
cursor: pointer;
Change styles more
2019-12-14 22:50:54 +00:00
background: var(--fg);
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
color: var(--bg);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border: var(--size--4) solid var(--fg);
padding: var(--size--1) var(--size-0);
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
border-radius: var(--common-radius);
fix button sizes
2020-10-19 08:41:26 +00:00
font-size: 8pt;
Add theme to scrollbars, `<button>`, and `<select>` elements
2019-09-30 21:45:34 +00:00
}
fix crash w/ no likes, improve preview styling
2020-10-13 08:29:14 +00:00
.file-button {
fix common-good setup somehow it's cli arguments changed
2020-10-19 07:27:10 +00:00
float: right;
margin: 0;
background: transparent;
color: var(--fg);
fix crash w/ no likes, improve preview styling
2020-10-13 08:29:14 +00:00
}
#blob {
fix common-good setup somehow it's cli arguments changed
2020-10-19 07:27:10 +00:00
visibility: hidden;
height: 0;
padding: 0;
margin: 0;
fix crash w/ no likes, improve preview styling
2020-10-13 08:29:14 +00:00
}
Fixes spacing issues in text-based browsers Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-24 00:49:03 +00:00
section header a {
display: flex;
color: var(--fg-status);
text-decoration: none;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin-right: var(--size--2);
margin-left: var(--size--2);
Revert CSS changes from preview PR Problem: There were lots of CSS changes in the preview + blob PR and I didn't take enough time to look at them. It looks like a few of them made style problems (e.g. extra specing in the 'next' / 'previous' links on the profile pages) and it made it harder (IMO) to determine that links are links (since we've been using font weight to distinguish). Solution: Revert those changes back to the previous defaults. If the margin glitch was on purpose or anyone feels strongly about distinguishing links using some other style (color?) then I'm happy to merge those, but I'd like to fix the extra margin and have *some* way to distinguish links in the mean time.
2020-11-23 02:31:27 +00:00
font-weight: bold;
Fixes spacing issues in text-based browsers Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-24 00:49:03 +00:00
}
Adds visual separator for threads
2020-05-13 18:17:35 +00:00
/* For use with elements specific for
* rendering in a text browser and intended
* to be hidden in a graphical browser. */
.text-browser {
display: none;
}
Fixes spacing issues in text-based browsers Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-24 00:49:03 +00:00
section > footer > div > a,
section > footer > div > form > button {
Change styles to reduce visual noise Big thanks for @cinnamon-bun for these suggestions!
2019-12-16 00:16:15 +00:00
color: var(--fg-status);
Revert CSS changes from preview PR Problem: There were lots of CSS changes in the preview + blob PR and I didn't take enough time to look at them. It looks like a few of them made style problems (e.g. extra specing in the 'next' / 'previous' links on the profile pages) and it made it harder (IMO) to determine that links are links (since we've been using font weight to distinguish). Solution: Revert those changes back to the previous defaults. If the margin glitch was on purpose or anyone feels strongly about distinguishing links using some other style (color?) then I'm happy to merge those, but I'd like to fix the extra margin and have *some* way to distinguish links in the mean time.
2020-11-23 02:31:27 +00:00
font-weight: bold;
Replace faux-shadow with thin border, change default theme
2019-12-15 22:08:38 +00:00
}
Fixes spacing issues in text-based browsers Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-24 00:49:03 +00:00
section > footer > div > form > button {
Replace faux-shadow with thin border, change default theme
2019-12-15 22:08:38 +00:00
display: inline-block;
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
}
Add styling for search box
2019-12-12 22:37:36 +00:00
select,
input {
Add theme to scrollbars, `<button>`, and `<select>` elements
2019-09-30 21:45:34 +00:00
background: var(--bg);
Fix foreground color to increase contrast
2019-09-30 21:49:55 +00:00
color: var(--fg);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border: var(--size--4) solid var(--bg-selection);
padding: var(--size--1);
margin: var(--size-0) 0;
Add theme to scrollbars, `<button>`, and `<select>` elements
2019-09-30 21:45:34 +00:00
-moz-appearance: none;
appearance: none;
Change styles more
2019-12-14 22:50:54 +00:00
border-radius: var(--common-radius);
Add profile edit page Problem: An SSB client should allow you to declare your own name, but Oasis didn't support that behavior at all. Solution: Add a basic 'Edit Profile' page that lets you set your name and description. This doesn't implement profile images because I had limited time and didn't want to think about encoding formats, but it's worth mentioning that I remember something about binary uploads with the default form encoding actually send 3 times as much data because of escapes or something? This might not effect us because we're on localhost, but I want to make a note that this isn't implemented yet. This also makes a small change regarding the `<label>` element -- previously we were writing them as siblings to the input and using the `for` attribute to target the input, but while messing with the CSS I tried putting them directly in the `label()` and it ends up having the same effect with less code.
2020-02-26 21:38:55 +00:00
display: block;
Fix public view to avoid showing private messages
2019-09-27 03:22:33 +00:00
}
Add content warning publishing, fixes #191
2020-02-12 03:18:10 +00:00
.contentWarning {
background-color: var(--bg);
box-sizing: border-box;
display: block;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
font-size: var(--size-0);
padding: var(--size-0);
Add content warning publishing, fixes #191
2020-02-12 03:18:10 +00:00
width: 100%;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin: var(--size-0) 0;
border: var(--size--4) solid var(--bg-selection);
Add content warning publishing, fixes #191
2020-02-12 03:18:10 +00:00
border-radius: var(--common-radius);
color: var(--fg);
}
Fix like button hover
2019-12-15 23:25:22 +00:00
textarea {
background-color: var(--bg);
box-sizing: border-box;
display: block;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
font-size: var(--size-0);
padding: var(--size-0);
Fix like button hover
2019-12-15 23:25:22 +00:00
resize: vertical;
width: 100%;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin: var(--size-0) 0;
Fix like button hover
2019-12-15 23:25:22 +00:00
height: 12rem;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border: var(--size--4) solid var(--bg-selection);
Fix like button hover
2019-12-15 23:25:22 +00:00
border-radius: var(--common-radius);
color: var(--fg);
}
button:focus,
input:focus,
select:focus,
textarea:focus {
border-color: var(--blue);
}
Fix UI inconsistencies Problem: After some fantastic new pull requests, there are some inconsistencies between how each author implemented different features. Solution: Fix regressions and iron out inconsistencies. This fixes the heart highlight bug, uses the same indentation for Summaries + Threads + the thread view, tightens up the CSP now that we don't need unsafe-inline styles, and uses a neutral tone for indents with the same width as the blockquote border (so far violet has been reserved for private messages).
2020-03-25 22:39:14 +00:00
/* Prevent button styles being applied to heart button */
Fix like button hover
2019-12-15 23:25:22 +00:00
button:focus,
button:hover {
background-color: var(--fg-light);
}
Fix footer button hover background Problem: Footer buttons have the normal button background hover state that makes them difficult to read. This was meant to be fixed in another PR but I think I got the CSS order wrong. Solution: Reorder the CSS hierarchy to fix the bug. For real this time.
2020-04-01 14:45:15 +00:00
section > footer > div > form > button:hover,
section > footer > div > form > button:focus {
Fix like button hover
2019-12-15 23:25:22 +00:00
background-color: transparent;
}
Add raw JSON view
2019-06-25 17:18:45 +00:00
pre {
Add syntax highlighting
2019-06-25 16:52:34 +00:00
overflow-x: auto;
Change styles to remove duplication
2019-09-30 18:18:29 +00:00
background-color: var(--bg);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
padding: var(--size--1);
Change <pre> styles for legibility
2019-09-24 21:51:15 +00:00
font-size: 92%;
border-radius: var(--common-radius);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border: var(--size--4) solid var(--bg-status);
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
}
Remove message CSS class
2019-12-15 19:01:02 +00:00
section code {
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
max-width: 100%;
overflow-wrap: break-word;
padding: 0.125em 0.25em;
margin: 0;
Use capitalization for Oasis links and buttons Problem: Using all-lowercase-everything isn't really a standard around the web and it might be better to use consistent capitalization. This was brought up in: https://github.com/fraction/oasis/issues/98 Solution: This changes the main navigation to use links with the first letter capitalized, like how Patchwork + Twitter + Mastodon + etc do it. This means that we're consistently using sentence case everywhere, which I think is our best option. Originally I tried experimenting with all-caps for actions, which I found aesthetically pleasing, but you have to reduce the font size to make it look good (bad!) and I was reading that all-caps text is harder for friends with dyslexia or vision impairments.
2020-01-27 23:00:00 +00:00
font-size: var(--code-size);
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
background-color: var(--bg);
border-radius: var(--common-radius);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border: var(--size--4) solid var(--bg-status);
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
}
Remove message CSS class
2019-12-15 19:01:02 +00:00
section pre code {
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
color: inherit;
padding: 0;
margin: 0;
font-size: 100%;
background-color: initial;
border: initial;
border-radius: initial;
}
Remove message CSS class
2019-12-15 19:01:02 +00:00
section blockquote {
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
margin-left: 0;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border-left: var(--size--1) solid var(--bg-status);
padding-left: var(--size-0);
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
}
Remove message CSS class
2019-12-15 19:01:02 +00:00
section img,
section video {
max-width: 100%;
max-height: 100vh;
border-radius: var(--common-radius);
Change styles to reduce visual noise Big thanks for @cinnamon-bun for these suggestions!
2019-12-16 00:16:15 +00:00
box-sizing: border-box;
Remove message CSS class
2019-12-15 19:01:02 +00:00
}
Fixes spacing issues in text-based browsers Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-24 00:49:03 +00:00
section > h1 {
margin-top: 0;
padding-top: 0;
}
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
.profile > img,
.profile > h1 {
display: inline-block;
}
Remove message CSS class
2019-12-15 19:01:02 +00:00
section > header.profile {
height: auto;
Fix profile regression
2019-12-16 19:25:08 +00:00
justify-content: left;
Remove message CSS class
2019-12-15 19:01:02 +00:00
}
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
.profile > img {
width: 4rem;
height: 4rem;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin-right: var(--size-0);
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
border-radius: var(--common-radius);
}
Change default theme to Tomorrow
2019-12-15 00:06:44 +00:00
.private {
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border-left: var(--size--1) solid var(--violet);
Replace faux-shadow with thin border, change default theme
2019-12-15 22:08:38 +00:00
border-color: var(--violet);
Add highlight for thread "target" I don't think "target" is the right word to use, but when you click a message and you're taken to the thread I think it's useful to actually highlight which message you selected.
2019-06-29 19:06:45 +00:00
}
Remove message CSS class
2019-12-15 19:01:02 +00:00
section.thread-target {
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border: var(--size--4) solid var(--blue);
box-shadow: 0 0 var(--size--2) var(--blue);
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
}
Remove message CSS class
2019-12-15 19:01:02 +00:00
section.thread-target.private {
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border: var(--size--4) solid var(--violet);
border-left: var(--size--1) solid var(--violet);
Replace faux-shadow with thin border, change default theme
2019-12-15 22:08:38 +00:00
border-color: var(--violet);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
box-shadow: 0 0 var(--size--2) var(--violet);
Fix thread target highlight for private messages
2019-12-15 16:52:54 +00:00
}
Remove message CSS class
2019-12-15 19:01:02 +00:00
section audio {
Change audio width to 100% of container
2019-09-30 15:43:24 +00:00
width: 100%;
}
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
@media screen {
html {
min-height: 100%;
Change styles to remove duplication
2019-09-30 18:18:29 +00:00
color: var(--fg);
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
background-color: var(--bg-status);
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
}
Add stylelint-config-standard for more opinionated CSS
2019-09-26 02:07:38 +00:00
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
body {
Fix inconsistent body width
2019-06-29 21:19:25 +00:00
width: 100%;
Change style for content warnings
2019-12-13 22:25:39 +00:00
max-width: var(--measure);
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
margin: 0;
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
}
}
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
nav {
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin: var(--size-0) 0;
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
}
Add stylelint to ensure CSS styles aren't broken
2019-09-26 02:05:41 +00:00
nav > ul > li > a {
Change to increase resolution of images
2019-12-16 20:37:11 +00:00
color: var(--fg);
Add stylelint to ensure CSS styles aren't broken
2019-09-26 02:05:41 +00:00
text-decoration: none;
Revert CSS changes from preview PR Problem: There were lots of CSS changes in the preview + blob PR and I didn't take enough time to look at them. It looks like a few of them made style problems (e.g. extra specing in the 'next' / 'previous' links on the profile pages) and it made it harder (IMO) to determine that links are links (since we've been using font weight to distinguish). Solution: Revert those changes back to the previous defaults. If the margin glitch was on purpose or anyone feels strongly about distinguishing links using some other style (color?) then I'm happy to merge those, but I'd like to fix the extra margin and have *some* way to distinguish links in the mean time.
2020-11-23 02:31:27 +00:00
font-weight: bold;
Add stylelint to ensure CSS styles aren't broken
2019-09-26 02:05:41 +00:00
}
shuffle css around to make prettier / common-good happy
2020-10-20 11:51:02 +00:00
.author-action > a {
text-decoration: underline;
}
section header a:hover {
text-decoration: underline;
}
improve visual hierarchy by refining bold text use
2020-10-12 07:55:42 +00:00
nav > ul > li > a:hover {
Add option to browse popular by time period
2019-12-07 22:37:03 +00:00
text-decoration: underline;
}
improve visual hierarchy by refining bold text use
2020-10-12 07:55:42 +00:00
nav > ul > li > a.current {
fix common-good setup somehow it's cli arguments changed
2020-10-19 07:27:10 +00:00
font-weight: bold;
improve visual hierarchy by refining bold text use
2020-10-12 07:55:42 +00:00
}
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
section {
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
padding: var(--size-0);
Change styles and restyle with CSS variables
2019-06-30 19:59:32 +00:00
border-radius: var(--common-radius);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin: var(--size-0) 0;
Add nested replies to thread view
2019-06-28 20:55:05 +00:00
word-wrap: break-word;
Change style for content warnings
2019-12-13 22:25:39 +00:00
background: var(--bg);
Solve inconsistent widths between pages Problem: The `<section>` elements on some pages have different sizes, which means that the sidebar is doing wonky stuff. Solution: Make the sections all have a consistent width. Note that there's still a few pixels of jank on the 'search' page, I'm not sure why that's happening. The element inspector is reporting that everything is the same width but that isn't true.
2020-01-27 20:57:44 +00:00
width: 100%;
box-sizing: border-box;
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
}
Add nested replies to thread view
2019-06-28 20:55:05 +00:00
condense threads in summaries view, as well
2020-10-12 12:30:24 +00:00
.indent section,
improve thread view
2020-10-12 12:07:36 +00:00
.thread-container section {
fix common-good setup somehow it's cli arguments changed
2020-10-19 07:27:10 +00:00
margin: unset;
border-radius: unset;
border-bottom: var(--fg-alt) solid 1px;
improve thread view
2020-10-12 12:07:36 +00:00
}
delineate bottom border of summary details
2020-10-15 08:55:46 +00:00
.indent details[open] {
border-bottom: var(--fg-alt) solid 1px;
}
condense threads in summaries view, as well
2020-10-12 12:30:24 +00:00
.indent section:last-of-type,
improve thread view
2020-10-12 12:07:36 +00:00
.thread-container section:last-of-type {
fix common-good setup somehow it's cli arguments changed
2020-10-19 07:27:10 +00:00
border-bottom: unset;
improve thread view
2020-10-12 12:07:36 +00:00
}
add much improved mentions listing
2020-10-16 06:48:42 +00:00
.mentions-container {
display: grid;
grid-template-columns: 4rem auto;
grid-column-gap: 1rem;
margin-bottom: var(--size-0);
}
Remove message CSS class
2019-12-15 19:01:02 +00:00
section > header {
Fixes spacing issues in text-based browsers Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-24 00:49:03 +00:00
background: var(--bg);
color: var(--fg-status);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin-bottom: calc(-1 * var(--size--1));
margin-top: calc(-1 * var(--size--1));
padding-bottom: var(--size--1);
padding-top: var(--size--1);
Adds sticky section headers While reading long conversations, it's easy to get a bit lost as to whom is saying what. With some basic CSS, we can keep the header of the post sticky so you can see more context above the message.
2020-03-24 21:15:26 +00:00
position: sticky;
top: 0;
Fix z-index on sticky header
2020-03-31 15:05:38 +00:00
z-index: 1;
Fixes spacing issues in text-based browsers Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-24 00:49:03 +00:00
}
section > header > div {
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
display: flex;
Change section view to reduce clutter
2019-12-16 02:22:51 +00:00
justify-content: space-between;
Improve wrapping of sticky section header
2020-05-12 12:27:40 +00:00
flex-wrap: wrap;
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
}
Refactor directories, add docs, fix profile header
2019-07-03 03:52:49 +00:00
Change section view to reduce clutter
2019-12-16 02:22:51 +00:00
section header a > .avatar {
Change to use more consistent size framework
2019-12-15 18:45:41 +00:00
width: var(--line);
height: var(--line);
Change styles and restyle with CSS variables
2019-06-30 19:59:32 +00:00
border-radius: var(--common-radius);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin-right: var(--size--2);
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
}
Add stylelint to ensure CSS styles aren't broken
2019-09-26 02:05:41 +00:00
Revert selector to span to fix lock alignment
2020-03-27 14:11:11 +00:00
section header span {
Fixes spacing issues in text-based browsers Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-24 00:49:03 +00:00
display: inline-flex;
Refactor to use smaller and better-organized components
2019-06-25 03:10:13 +00:00
}
Change link redirect to center messsage footer Previously when you liked a post it would redirect you back to the previous page with the top of the post at the top of the screen. This was jarring and weird and I didn't like it at all. This change makes it so that the footer of the message you liked appears in the center of the screen, which is (in my experience) much closer to where it usually is when you click the like button. Before: when you click the like button the scroll resets so the top of the message is at the top of the screen. After: when you click the like button the scroll resets so that the footer of the message is in the center of the screen. Wanted: a way to redirect back to the original page *without* resetting the scroll position.
2019-06-29 17:55:43 +00:00
/*
* HACK: centered-footer
*
* When someone likes a message we want to submit the form and then redirect
* them back to the original page. Unfortunately when you link to anchor tags
* that scrolls the browser so that they're at the *top* of the page, not the
* center of the page. In our view we have an empty div with an appropriate
* anchor tag, so here we use CSS to center it on the screen.
*
* The code below creates padding-top that takes up 50% of the height of the
* viewport and then gets rid of it with negative margin. This has no effect
* on the display of the item, but means that when we link to the anchor tag
* it centers this empty element vertically on the screen.
*
* We also use `pointer-events: none` to ensure that this invisible div doesn't
* capture cursor events (clicks, drags, etc) on surrounding elements, because
* otherwise we could have a problem where someone clicks above the invisible
Change to use more consistent size framework
2019-12-15 18:45:41 +00:00
* div but the browser picogs they're clicking the gigantic amount of padding.
Change link redirect to center messsage footer Previously when you liked a post it would redirect you back to the previous page with the top of the post at the top of the screen. This was jarring and weird and I didn't like it at all. This change makes it so that the footer of the message you liked appears in the center of the screen, which is (in my experience) much closer to where it usually is when you click the like button. Before: when you click the like button the scroll resets so the top of the message is at the top of the screen. After: when you click the like button the scroll resets so that the footer of the message is in the center of the screen. Wanted: a way to redirect back to the original page *without* resetting the scroll position.
2019-06-29 17:55:43 +00:00
*/
Remove message CSS class
2019-12-15 19:01:02 +00:00
section > .centered-footer {
Change link redirect to center messsage footer Previously when you liked a post it would redirect you back to the previous page with the top of the post at the top of the screen. This was jarring and weird and I didn't like it at all. This change makes it so that the footer of the message you liked appears in the center of the screen, which is (in my experience) much closer to where it usually is when you click the like button. Before: when you click the like button the scroll resets so the top of the message is at the top of the screen. After: when you click the like button the scroll resets so that the footer of the message is in the center of the screen. Wanted: a way to redirect back to the original page *without* resetting the scroll position.
2019-06-29 17:55:43 +00:00
padding-top: 50vh;
margin-top: -50vh;
pointer-events: none;
}
Remove message CSS class
2019-12-15 19:01:02 +00:00
section > footer {
Remove meta-table from profiles
2019-12-16 20:07:52 +00:00
color: var(--fg-status);
Add links to reply and reply all pages
2019-08-07 02:44:09 +00:00
}
Fixes spacing issues in text-based browsers Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-24 00:49:03 +00:00
section > footer br {
display: none;
}
section > footer > div {
display: flex;
justify-content: space-between;
}
section > footer > div > * {
Add profile view and upgrade author view
2019-06-25 04:03:34 +00:00
text-decoration: none;
Add like counter and ability to add likes to message Note: currently likes just keep increasing, unliking is impossible!
2019-06-26 00:14:23 +00:00
}
make like button the same size as other footer actions
2020-10-12 12:19:28 +00:00
section > footer > div > form > button:first-of-type {
fix common-good setup somehow it's cli arguments changed
2020-10-19 07:27:10 +00:00
font-size: 100%;
make like button the same size as other footer actions
2020-10-12 12:19:28 +00:00
}
Fixes spacing issues in text-based browsers Closes #329; Addresses spacing issues in text-based browsers by introducting block elements and non-breaking spaces.
2020-03-24 00:49:03 +00:00
section > footer > div > form > button.liked {
Add stylelint-config-standard for more opinionated CSS
2019-09-26 02:07:38 +00:00
color: var(--red);
Add like counter and ability to add likes to message Note: currently likes just keep increasing, unliking is impossible!
2019-06-26 00:14:23 +00:00
}
Change theme to have sections with color contrast I think I was overusing borders and it gave the UI a wireframey skeleton feel that wasn't very fleshed out. The dependence on thin borders also caused trouble when using themes with low color contrast, since you'd have thin lines that were *also* low-contrast. Bad! Instead, I'm using a "card UI" style with varying colors, which I think looks better (???) and seems to be more compatible with more themes. Happy to roll this back if others don't dig it.
2019-12-14 21:29:04 +00:00
label {
display: block;
Fix form padding regressoin
2019-12-12 23:38:20 +00:00
margin: 0;
Add like counter and ability to add likes to message Note: currently likes just keep increasing, unliking is impossible!
2019-06-26 00:14:23 +00:00
}
Refactor nav into unordered list
2019-09-19 20:31:47 +00:00
nav > ul {
Add links to source and new issue page I don't feel great about linking to GitHub but that's because I don't feel great about *using* GitHub for source hosting and bug tracking. On the other hand, I think it's useful to link to both since the people who will be trying this are likely going to be developers right now. In the future I'll probably revert this change.
2019-06-25 17:35:43 +00:00
display: flex;
Let navbar items wrap on narrow screen
2020-02-01 00:34:37 +00:00
flex-wrap: wrap;
Add view info for Private, Mentions, and Publish Problem: The Private and Mentions page didn't have view labels yet, and Publish should be its own page instead of being at the top of every page. Solution: Inspired by @cinnamon-bun's work to add friendly view labels, plus a new Publish page. This also moves the period selection from the popular page into the view label, which felt better to me with the previous `<section>` background. I also tried a different text format for describing the pages, using a common form and using `<strong>` to draw attention to any change from "Posts from people you follow, sorted by recency" which feels like the expected default for most people. @cinnamon-bun: To me this feels like a fun back-and-forth where I'm riffing on your work and hoping that you do the same, but if it feels wrong/rude please let me know. Trying to work on designs with a system like C4 is super new for me and I wouldn't be surprised if there are pain points to fix! Resolves https://github.com/fraction/oasis/issues/160
2020-02-05 01:52:50 +00:00
justify-content: space-between;
Fix margin styles causing layout problems
2019-09-30 19:39:24 +00:00
margin: 0;
Refactor nav into unordered list
2019-09-19 20:31:47 +00:00
padding: 0;
}
nav > ul > li {
list-style: none;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin-right: var(--size--1);
Add links to source and new issue page I don't feel great about linking to GitHub but that's because I don't feel great about *using* GitHub for source hosting and bug tracking. On the other hand, I think it's useful to link to both since the people who will be trying this are likely going to be developers right now. In the future I'll probably revert this change.
2019-06-25 17:35:43 +00:00
}
Add profile view and upgrade author view
2019-06-25 04:03:34 +00:00
.profile {
display: flex;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin-bottom: var(--size-0);
Add profile view and upgrade author view
2019-06-25 04:03:34 +00:00
}
Add spartan status page for simple debugging
2019-06-29 02:55:36 +00:00
progress {
display: block;
width: 100%;
}
Add simple reply mechanism for basic replies
2019-08-07 14:47:21 +00:00
Add basic theme chooser
2019-09-29 17:52:51 +00:00
progress::-moz-progress-bar,
progress::-webkit-progress-value,
progress {
background: var(--blue);
border-color: var(--blue);
}
Add support for content warnings
2019-08-13 20:53:11 +00:00
summary {
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
padding: var(--size--1);
Remove dashed summary style from indented summary Problem: The indented summary took up lots of visual attention which isn't what we wanted. Also a bad merge broke the previous `<summary>`/ Solution: Fix the bad merge and remove the dashes style from the indented summary elements.
2020-04-15 14:27:23 +00:00
margin: var(--size-0) 0;
Change cursor when hovering over `<summary>`
2019-08-13 21:31:51 +00:00
cursor: pointer;
Fix UI inconsistencies Problem: After some fantastic new pull requests, there are some inconsistencies between how each author implemented different features. Solution: Fix regressions and iron out inconsistencies. This fixes the heart highlight bug, uses the same indentation for Summaries + Threads + the thread view, tightens up the CSP now that we don't need unsafe-inline styles, and uses a neutral tone for indents with the same width as the blockquote border (so far violet has been reserved for private messages).
2020-03-25 22:39:14 +00:00
background: var(--bg);
border-radius: var(--common-radius);
list-style-type: "+ ";
Merge branch 'master' of github.com:fraction/oasis into fix-summary-style
2020-04-15 14:14:24 +00:00
border: var(--size--4) dashed var(--fg-status);
Fix UI inconsistencies Problem: After some fantastic new pull requests, there are some inconsistencies between how each author implemented different features. Solution: Fix regressions and iron out inconsistencies. This fixes the heart highlight bug, uses the same indentation for Summaries + Threads + the thread view, tightens up the CSP now that we don't need unsafe-inline styles, and uses a neutral tone for indents with the same width as the blockquote border (so far violet has been reserved for private messages).
2020-03-25 22:39:14 +00:00
}
details[open] > summary {
list-style-type: "− ";
Add support for content warnings
2019-08-13 20:53:11 +00:00
}
Add mentions to message and Markdown to profiles
2019-08-14 18:44:25 +00:00
Remove dashed summary style from indented summary Problem: The indented summary took up lots of visual attention which isn't what we wanted. Also a bad merge broke the previous `<summary>`/ Solution: Fix the bad merge and remove the dashes style from the indented summary elements.
2020-04-15 14:27:23 +00:00
.indent > details > summary {
border: none;
}
Add mentions to message and Markdown to profiles
2019-08-14 18:44:25 +00:00
.md-mention {
-moz-user-select: all;
-ms-user-select: all;
-webkit-user-select: all;
user-select: all;
Fix Markdown mention code by removing new styles
2019-09-24 22:04:04 +00:00
background: none;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
overflow: hidden;
Add mentions to message and Markdown to profiles
2019-08-14 18:44:25 +00:00
}
Add about messages to profile view
2019-10-08 01:53:21 +00:00
table {
width: 100%;
Change default theme to Tomorrow
2019-12-15 00:06:44 +00:00
table-layout: fixed;
Add about messages to profile view
2019-10-08 01:53:21 +00:00
}
td,
th {
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
padding: var(--size--1);
outline: var(--size--4) solid var(--bg-status);
Add about messages to profile view
2019-10-08 01:53:21 +00:00
}
th {
text-align: left;
background-color: var(--bg-status);
}
Add basic search functionality
2019-12-07 23:22:00 +00:00
input[type="search"] {
width: 100%;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin: var(--size-0) 0;
Change default theme to Tomorrow
2019-12-15 00:06:44 +00:00
}
Add image search
2020-05-03 20:16:44 +00:00
.image-search-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--size-0);
}
.image-search-grid .image-result {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--size--1) 0;
background: var(--bg);
border-radius: var(--common-radius);
}
.image-search-grid .image-result .result-text {
hyphens: auto;
text-align: center;
}
Change default theme to Tomorrow
2019-12-15 00:06:44 +00:00
hr {
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border: var(--size--4) solid var(--fg-alt);
Add basic search functionality
2019-12-07 23:22:00 +00:00
}
Add buttons to 'meta' page to manage networking Problem: Sometimes you want to disconnect from the network but you don't want to have to restart Oasis with the `--offline` flag (https://github.com/fraction/oasis/issues/89). Sometimes networking gets stuck and you need to run the equivalent of `ssb gossip reconnect` (https://github.com/fraction/oasis/issues/63). Solution: Buttons on the 'meta' page that let you start, stop, or restart SSB-CONN whenever you want. Note that this commit includes an update to SSB-CONN, but this version and the previous version both have a bug where hitting 'stop' twice in a row will throw an error. This commit implements a workaround for the bug, but it's something we'll want to remove later once the underlying bug is fixed.
2020-01-27 00:55:48 +00:00
.form-button-group {
display: flex;
justify-content: space-between;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin: var(--size-0) 0;
Add buttons to 'meta' page to manage networking Problem: Sometimes you want to disconnect from the network but you don't want to have to restart Oasis with the `--offline` flag (https://github.com/fraction/oasis/issues/89). Sometimes networking gets stuck and you need to run the equivalent of `ssb gossip reconnect` (https://github.com/fraction/oasis/issues/63). Solution: Buttons on the 'meta' page that let you start, stop, or restart SSB-CONN whenever you want. Note that this commit includes an update to SSB-CONN, but this version and the previous version both have a bug where hitting 'stop' twice in a row will throw an error. This commit implements a workaround for the bug, but it's something we'll want to remove later once the underlying bug is fixed.
2020-01-27 00:55:48 +00:00
}
Merge branch 'master' of github.com:fraction/oasis into conn-buttons
2020-01-28 18:25:42 +00:00
Add simple nav sidebar on large screens Problem: Putting the navigation at the top of the screen makes it impossible to use when you're scrolling through a page, which isn't a good user experience. It was never meant to be permanent, and I think everyone has pointed out that it's been a pain. Solution: Super simple sidebar nav when people are on bigger screens. This doesn't solve the problem on mobile, and it doesn't incorporate the 'popular' page's interval settings, but I think it's a step in the right direction.
2020-01-27 20:36:40 +00:00
/* sidebar only appears on big screens */
@media (min-width: calc(45rem)) {
body > nav > ul {
justify-content: right;
flex-direction: column;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin-right: var(--size-1);
Add simple nav sidebar on large screens Problem: Putting the navigation at the top of the screen makes it impossible to use when you're scrolling through a page, which isn't a good user experience. It was never meant to be permanent, and I think everyone has pointed out that it's been a pain. Solution: Super simple sidebar nav when people are on bigger screens. This doesn't solve the problem on mobile, and it doesn't incorporate the 'popular' page's interval settings, but I think it's a step in the right direction.
2020-01-27 20:36:40 +00:00
position: sticky;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
top: var(--size-0);
Add simple nav sidebar on large screens Problem: Putting the navigation at the top of the screen makes it impossible to use when you're scrolling through a page, which isn't a good user experience. It was never meant to be permanent, and I think everyone has pointed out that it's been a pain. Solution: Super simple sidebar nav when people are on bigger screens. This doesn't solve the problem on mobile, and it doesn't incorporate the 'popular' page's interval settings, but I think it's a step in the right direction.
2020-01-27 20:36:40 +00:00
}
body > nav > ul > li {
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
margin-bottom: var(--size-0);
Add simple nav sidebar on large screens Problem: Putting the navigation at the top of the screen makes it impossible to use when you're scrolling through a page, which isn't a good user experience. It was never meant to be permanent, and I think everyone has pointed out that it's been a pain. Solution: Super simple sidebar nav when people are on bigger screens. This doesn't solve the problem on mobile, and it doesn't incorporate the 'popular' page's interval settings, but I think it's a step in the right direction.
2020-01-27 20:36:40 +00:00
}
main {
Create 'Summaries' page for new summary view Problem: Until we have a way to change the view of each page, it seems to me that each of the views that we're experimenting with should be on their own page rather than modifying the existing pages to add more functionality. I'm also noticing that I can't process all of the information that's on the screen when the new horizontal layout is used, and I think we would benefit from using the previous layout consistently. Solution: Move the summary view to its own page so that we can continue to iterate on it without modifying the popular view, which is already complex, and revert the style changes to maintain consistency with the rest of the linear design (threads go downward, indentation denotes sub-threads, etc).
2020-02-17 20:08:03 +00:00
width: 100%;
max-width: var(--measure);
Add simple nav sidebar on large screens Problem: Putting the navigation at the top of the screen makes it impossible to use when you're scrolling through a page, which isn't a good user experience. It was never meant to be permanent, and I think everyone has pointed out that it's been a pain. Solution: Super simple sidebar nav when people are on bigger screens. This doesn't solve the problem on mobile, and it doesn't incorporate the 'popular' page's interval settings, but I think it's a step in the right direction.
2020-01-27 20:36:40 +00:00
}
body {
display: flex;
justify-content: center;
Solve inconsistent widths between pages Problem: The `<section>` elements on some pages have different sizes, which means that the sidebar is doing wonky stuff. Solution: Make the sections all have a consistent width. Note that there's still a few pixels of jank on the 'search' page, I'm not sure why that's happening. The element inspector is reporting that everything is the same width but that isn't true.
2020-01-27 20:57:44 +00:00
max-width: none;
Add simple nav sidebar on large screens Problem: Putting the navigation at the top of the screen makes it impossible to use when you're scrolling through a page, which isn't a good user experience. It was never meant to be permanent, and I think everyone has pointed out that it's been a pain. Solution: Super simple sidebar nav when people are on bigger screens. This doesn't solve the problem on mobile, and it doesn't incorporate the 'popular' page's interval settings, but I think it's a step in the right direction.
2020-01-27 20:36:40 +00:00
}
}
Fix emoji and breaking space in main nav Problem: The regular space in the sidebar emoji was breaking the line at a specific viewport width and the emoji were being shown as the wrong font. Solution: Use a non-breaking space and `font-family: initial` for full-color emoji instead of using the system font. Resolves https://github.com/fraction/oasis/issues/150 Resolves https://github.com/fraction/oasis/issues/153
2020-02-05 22:33:44 +00:00
/* Use the browser's default font rendering instead of using our fancy
* font-family above. This resolves a problem where some emoji were being
* rendered in the system-ui font, which is rarely what we want.
*/
.emoji {
font-family: initial;
}
Create 'Summaries' page for new summary view Problem: Until we have a way to change the view of each page, it seems to me that each of the views that we're experimenting with should be on their own page rather than modifying the existing pages to add more functionality. I'm also noticing that I can't process all of the information that's on the screen when the new horizontal layout is used, and I think we would benefit from using the previous layout consistently. Solution: Move the summary view to its own page so that we can continue to iterate on it without modifying the popular view, which is already complex, and revert the style changes to maintain consistency with the rest of the linear design (threads go downward, indentation denotes sub-threads, etc).
2020-02-17 20:08:03 +00:00
/* This indent is used on the summaries page to create an indent of 1. It might
* be wise to nest these recursively on the thread view, which would make it so
* that we don't need any inline CSS anymore.
*/
Fix UI inconsistencies Problem: After some fantastic new pull requests, there are some inconsistencies between how each author implemented different features. Solution: Fix regressions and iron out inconsistencies. This fixes the heart highlight bug, uses the same indentation for Summaries + Threads + the thread view, tightens up the CSP now that we don't need unsafe-inline styles, and uses a neutral tone for indents with the same width as the blockquote border (so far violet has been reserved for private messages).
2020-03-25 22:39:14 +00:00
.indent {
padding-left: 1rem;
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
border-left: var(--size--2) solid var(--bg-selection);
Create 'Summaries' page for new summary view Problem: Until we have a way to change the view of each page, it seems to me that each of the views that we're experimenting with should be on their own page rather than modifying the existing pages to add more functionality. I'm also noticing that I can't process all of the information that's on the screen when the new horizontal layout is used, and I think we would benefit from using the previous layout consistently. Solution: Move the summary view to its own page so that we can continue to iterate on it without modifying the popular view, which is already complex, and revert the style changes to maintain consistency with the rest of the linear design (threads go downward, indentation denotes sub-threads, etc).
2020-02-17 20:08:03 +00:00
}
Add basic fork styling
2020-03-22 19:54:48 +00:00
shuffle css around to make prettier / common-good happy
2020-10-20 11:51:02 +00:00
.mentions-image {
grid-row: 1 / span 2;
}
.mentions-image > img {
border: var(--fg) solid 1px;
}
.mentions-container .emoji {
font-size: 1.5rem;
}
.mentions-name {
font-size: 1.25rem;
text-decoration: unset;
}
.mentions-name:hover {
text-decoration: underline;
}
.emo-rel {
display: inline-grid;
align-items: center;
grid-template-columns: 2rem auto;
grid-column-gap: 0.25rem;
}
.mentions-listing {
display: inline;
background-color: var(--bg);
padding: var(--size--1);
border-radius: var(--common-radius);
border: var(--size--4) solid var(--bg-status);
user-select: all;
font-size: var(--size--1);
overflow-x: auto;
width: 24rem;
}
section.post-preview {
padding-top: 0;
background: var(--bg-selection);
border: var(--fg-alt) solid 1px;
}
section.post-preview > section > footer {
display: none;
}
Hides content of messages from blocked people This introduces a basic implementation to not display the content of messages. It still shows that a message exists but shows localized copy indicating why the content was hidden. We should consider additional filters or queries in different views to actually remove these posts but I'll leave that as up for discussion since I can see value in showing that a blocked comment exists in a conversation.
2021-03-02 22:35:38 +00:00
section.post.blocked {
font-style: italic;
}
shuffle css around to make prettier / common-good happy
2020-10-20 11:51:02 +00:00
section > footer > div > a:hover,
section > footer > div > form > button:hover {
text-decoration: underline;
}
.author-action {
flex-grow: 1;
}
section header .author > a:first-child {
margin-left: 0;
color: var(--fg-light);
font-weight: bold;
}
Fix UI inconsistencies Problem: After some fantastic new pull requests, there are some inconsistencies between how each author implemented different features. Solution: Fix regressions and iron out inconsistencies. This fixes the heart highlight bug, uses the same indentation for Summaries + Threads + the thread view, tightens up the CSP now that we don't need unsafe-inline styles, and uses a neutral tone for indents with the same width as the blockquote border (so far violet has been reserved for private messages).
2020-03-25 22:39:14 +00:00
.theme-preview {
width: calc(100% / 15);
Replace "metric CSS" with --size-N Problem: The "metric CSS" was kind of clever but mostly just confusing. Solution: Use `--size-N` for the size, where the size is `2^n`. Double size is `--size-1`, half size is `--size--1` (negative one). The negatives kind of suck but I couldn't think of a better solution that didn't give up the flexibility, brevity, or the ability to sort alphabetically. Fixes: https://github.com/fraction/oasis/issues/100
2020-04-14 19:17:09 +00:00
height: var(--size-0);
margin-top: var(--size-0);
Fix UI inconsistencies Problem: After some fantastic new pull requests, there are some inconsistencies between how each author implemented different features. Solution: Fix regressions and iron out inconsistencies. This fixes the heart highlight bug, uses the same indentation for Summaries + Threads + the thread view, tightens up the CSP now that we don't need unsafe-inline styles, and uses a neutral tone for indents with the same width as the blockquote border (so far violet has been reserved for private messages).
2020-03-25 22:39:14 +00:00
display: inline-block;
}
.theme-preview-00 {
background-color: var(--base00);
}
.theme-preview-01 {
background-color: var(--base01);
}
.theme-preview-02 {
background-color: var(--base02);
}
.theme-preview-03 {
background-color: var(--base03);
}
.theme-preview-04 {
background-color: var(--base04);
}
.theme-preview-05 {
background-color: var(--base05);
}
.theme-preview-06 {
background-color: var(--base06);
}
.theme-preview-07 {
background-color: var(--base07);
}
.theme-preview-08 {
background-color: var(--base08);
}
.theme-preview-09 {
background-color: var(--base09);
}
.theme-preview-0A {
background-color: var(--base0A);
}
.theme-preview-0B {
background-color: var(--base0B);
}
.theme-preview-0C {
background-color: var(--base0C);
}
.theme-preview-0D {
background-color: var(--base0D);
}
.theme-preview-0E {
background-color: var(--base0E);
}
.theme-preview-0F {
background-color: var(--base0F);
Add basic fork styling
2020-03-22 19:54:48 +00:00
}