Mastodon/MARL-Mastodon-Archive-Reader-Lite
1
0
Fork 0
mirror of https://github.com/s427/MARL.git synced 2025-01-18 13:00:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

dark theme

Browse Source
This commit is contained in:
Vincent CLAVIEN 2024-12-28 01:27:59 +01:00
parent d0fa67ea2a
commit 4f55d08740
29 changed files with 690 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierignore Normal file
View File

@ -0,0 +1 @@
_colors*.scss

5
css/_actor.scss
View File

@ -213,7 +213,7 @@
padding: 1rem;
text-align: center;
border-radius: 0.5rem;
background-color: rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.25);
@media (forced-colors: active) {
border: 1px dotted CanvasText;
}
@ -247,6 +247,9 @@
overflow: auto;
overflow-wrap: break-word;
}
textarea {
color: var(--actor-fg0);
}
}
.actor-likes-bookmarks {

170
css/_colors-mixins.scss Normal file
View File

@ -0,0 +1,170 @@
@mixin theme-vars($theme: "") {
@if $theme == "dark" {
--bg0: #{$dark-bg0};
--bg1: #{$dark-bg1};
--bg2: #{$dark-bg2};
--bg3: #{$dark-bg3};
--bg4: #{$dark-bg4};
--fg0: #{$dark-fg0};
--fg1: #{$dark-fg1};
--fg2: #{$dark-fg2};
--fg-inv: #{$dark-fg-inv};
--menu-bg: #{$dark-menu-bg};
--menu-fg: #{$dark-menu-fg};
--menu-fg-active: #{$dark-menu-fg-active};
--menu-icon: #{$dark-menu-icon};
--menu-filter-active: #{$dark-menu-filter-active};
--panel-close: #{$dark-panel-close};
--panel-close-hover: #{$dark-panel-close-hover};
--accent: #{$dark-accent};
--accent-dark: #{$dark-accent-dark};
--accent-light: #{$dark-accent-light};
--accent-light2: #{$dark-accent-light2};
--accent-light3: #{$dark-accent-light3};
--overlay-icon: #{$dark-overlay-icon};
--overlay-icon-hover: #{$dark-overlay-icon-hover};
--overlay-backdrop: #{$dark-overlay-backdrop};
--menu-backdrop: #{$dark-menu-backdrop};
--bg-input: #{$dark-bg-input};
--bg-input-hover: #{$dark-bg-input-hover};
--bg-input-focus: #{$dark-bg-input-focus};
--bg-button: #{$dark-bg-button};
--bg-button-hover: #{$dark-bg-button-hover};
--button-svg: #{$dark-button-svg};
--button-svg-hover: #{$dark-button-svg-hover};
--button-svg-focus: #{$dark-button-svg-focus};
--button-svg-active: #{$dark-button-svg-active};
--fg-button-focus: #{$dark-fg-button-focus};
--fg-button-active: #{$dark-fg-button-active};
--posts-count: #{$dark-posts-count};
--selection-text: #{$dark-selection-text};
--selection-bg: #{$dark-selection-bg};
--stripe1: #{$dark-stripe1};
--stripe2: #{$dark-stripe2};
--stripe-fg: #{$dark-stripe-fg};
--private-post-bg: #{$dark-private-post-bg};
--private-post-border: #{$dark-private-post-border};
.actors-wrapper {
--actor-hue: 0;
--actor-bg0: #{$dark-actor-bg0};
--actor-bg0-ok: #{$dark-actor-bg0-ok};
--actor-bg1: #{$dark-actor-bg1};
--actor-bg1-ok: #{$dark-actor-bg1-ok};
--actor-bg2: #{$dark-actor-bg2};
--actor-bg2-ok: #{$dark-actor-bg2-ok};
--actor-bg3: #{$dark-actor-bg3};
--actor-bg3-ok: #{$dark-actor-bg3-ok};
--actor-bg4: #{$dark-actor-bg4};
--actor-bg4-ok: #{$dark-actor-bg4-ok};
--actor-fg0: #{$dark-actor-fg0};
--actor-fg1: #{$dark-actor-fg1};
--actor-fg1-ok: #{$dark-actor-fg1-ok};
--actor-tabs-bg: #{$dark-actor-tabs-bg};
--actor-accent: #{$dark-actor-accent};
--actor-accent-ok: #{$dark-actor-accent-ok};
--actor-accent2-ok: #{$dark-actor-accent2-ok};
}
.actors-tabs button {
--actor-accent-ok: #{$dark-actor-accent-ok};
--actor-accent2-ok: #{$dark-actor-accent2-ok};
}
.toot-content {
--actor-accent-ok: #{$dark-actor-accent-ok};
--actor-accent2-ok: #{$dark-actor-accent2-ok};
}
} @else {
--bg0: #{$bg0};
--bg1: #{$bg1};
--bg2: #{$bg2};
--bg3: #{$bg3};
--bg4: #{$bg4};
--fg0: #{$fg0};
--fg1: #{$fg1};
--fg2: #{$fg2};
--fg-inv: #{$fg-inv};
--menu-bg: #{$menu-bg};
--menu-fg: #{$menu-fg};
--menu-fg-active: #{$menu-fg-active};
--menu-icon: #{$menu-icon};
--menu-filter-active: #{$menu-filter-active};
--panel-close: #{$panel-close};
--panel-close-hover: #{$panel-close-hover};
--accent: #{$accent};
--accent-dark: #{$accent-dark};
--accent-light: #{$accent-light};
--accent-light2: #{$accent-light2};
--accent-light3: #{$accent-light3};
--overlay-icon: #{$overlay-icon};
--overlay-icon-hover: #{$overlay-icon-hover};
--overlay-backdrop: #{$overlay-backdrop};
--menu-backdrop: #{$menu-backdrop};
--bg-input: #{$bg-input};
--bg-input-hover: #{$bg-input-hover};
--bg-input-focus: #{$bg-input-focus};
--bg-button: #{$bg-button};
--bg-button-hover: #{$bg-button-hover};
--button-svg: #{$button-svg};
--button-svg-hover: #{$button-svg-hover};
--button-svg-focus: #{$button-svg-focus};
--button-svg-active: #{$button-svg-active};
--fg-button-focus: #{$fg-button-focus};
--fg-button-active: #{$fg-button-active};
--posts-count: #{$posts-count};
--selection-text: #{$selection-text};
--selection-bg: #{$selection-bg};
--stripe1: #{$stripe1};
--stripe2: #{$stripe2};
--stripe-fg: #{$stripe-fg};
--private-post-bg: #{$private-post-bg};
--private-post-border: #{$private-post-border};
.actors-wrapper {
--actor-hue: 0;
--actor-bg0: #{$actor-bg0};
--actor-bg0-ok: #{$actor-bg0-ok};
--actor-bg1: #{$actor-bg1};
--actor-bg1-ok: #{$actor-bg1-ok};
--actor-bg2: #{$actor-bg2};
--actor-bg2-ok: #{$actor-bg2-ok};
--actor-bg3: #{$actor-bg3};
--actor-bg3-ok: #{$actor-bg3-ok};
--actor-bg4: #{$actor-bg4};
--actor-bg4-ok: #{$actor-bg4-ok};
--actor-fg0: #{$actor-fg0};
--actor-fg1: #{$actor-fg1};
--actor-fg1-ok: #{$actor-fg1-ok};
--actor-tabs-bg: #{$actor-tabs-bg};
--actor-accent: #{$actor-accent};
--actor-accent-ok: #{$actor-accent-ok};
--actor-accent2-ok: #{$actor-accent2-ok};
}
.actors-tabs button {
--actor-accent-ok: #{$actor-accent-ok};
--actor-accent2-ok: #{$actor-accent2-ok};
}
.toot-content {
--actor-accent-ok: #{$actor-accent-ok};
--actor-accent2-ok: #{$actor-accent2-ok};
}
}
}

292
css/_colors.scss
View File

@ -1,183 +1,207 @@
// tint and saturation factor for the app color scheme
// tint for the app color scheme
$hue: 30; // === 59.17 in oklch
/*********************************/
/* global background/text colors */
/*********************************/
$bg0: #fff; // post content
$bg1: hsl($hue, 10%, 95%); // post
$bg2: hsl($hue, 12%, 90%); // post attachment/meta/raw
$bg3: hsl($hue, 15%, 87%); // posts header
$bg4: hsl($hue, 17.5%, 84%); // filters/tags panels
$bg0: #fff; // post content
$bg1: hsl($hue, 10%, 95%); // post
$bg2: hsl($hue, 12%, 90%); // post attachment/meta/raw
$bg3: hsl($hue, 15%, 87%); // posts header
$bg4: hsl($hue, 17.5%, 84%); // filters/tags panels
$fg0: #000; // post content
$fg1: hsl($hue, 10%, 20%); // body text; some SVG icons (panel close)
$fg2: hsl($hue, 10%, 30%); // headings (h1, h2...)
$fg0: #000; // post content
$fg1: hsl($hue, 10%, 20%); // body text; some SVG icons (panel close)
$fg2: hsl($hue, 10%, 30%); // headings (h1, h2...)
$fg-inv: #fff; // misc highlighted text
$fg-inv: #fff; // misc highlighted text
// dark theme
$dark-bg0: hsl($hue, 6%, 20%);
$dark-bg1: hsl($hue, 8%, 13%);
$dark-bg2: hsl($hue, 10%, 10%);
$dark-bg3: hsl($hue, 12%, 8%);
$dark-bg4: hsl($hue, 12%, 8%);
$dark-fg0: hsl($hue, 5%, 95%);
$dark-fg1: hsl($hue, 10%, 80%);
$dark-fg2: hsl($hue, 15%, 50%);
$dark-fg-inv: #000;
/***************/
/* actor panel */
/***************/
$actor-bg0: hsl($hue, 37.5%, 11%); // bookmarks
$actor-bg1: hsl($hue, 32.5%, 15%); // favorites
$actor-bg2: hsl($hue, 25%, 20%); // actor raw data; tabs bg
$actor-bg3: hsl($hue, 25%, 25%); // actor panel
$actor-bg4: hsl($hue, 22.5%, 40%); // actor summary
$actor-bg0: hsl($hue, 37.5%, 11%); // bookmarks
$actor-bg1: hsl($hue, 32.5%, 15%); // favorites
$actor-bg2: hsl($hue, 25%, 20%); // actor raw data
$actor-bg3: hsl($hue, 25%, 25%); // actor panel
$actor-bg4: hsl($hue, 22.5%, 40%); // actor summary
$actor-fg0: #fff;
$actor-fg1: hsl($hue, 40%, 80%); // actor texts
$actor-tabs-bg: hsl($hue, 12%, 17%);
$actor-fg0: #fff;
$actor-fg1: hsl($hue, 40%, 80%); // actor texts
$actor-tabs-bg: hsl($hue, 12%, 17%);
// OKLCH variants (multiple archives opened)
$actor-bg0-ok: oklch(21% 18% var(--actor-hue)); // bookmarks; tabs bg
$actor-bg1-ok: oklch(24% 16% var(--actor-hue)); // favorites
$actor-bg2-ok: oklch(27% 14% var(--actor-hue)); // actor raw data
$actor-bg3-ok: oklch(30% 12% var(--actor-hue)); // actor panel
$actor-bg4-ok: oklch(40% 10% var(--actor-hue)); // actor summary
$actor-fg1-ok: oklch(92% 8% var(--actor-hue)); // actor texts
$actor-bg0-ok: oklch(21% 2% var(--actor-hue));
$actor-bg1-ok: oklch(24% 2% var(--actor-hue));
$actor-bg2-ok: oklch(27% 2% var(--actor-hue));
$actor-bg3-ok: oklch(30% 2% var(--actor-hue));
$actor-bg4-ok: oklch(40% 10% var(--actor-hue));
$actor-fg1-ok: oklch(92% 8% var(--actor-hue));
$actor-accent: hsl($hue, 75%, 50%);
$actor-accent-ok: oklch(80% 25% var(--actor-hue));
$actor-accent2-ok: oklch(60% 20% var(--actor-hue));
// -> outline; color code on post
$actor-accent: hsl($hue, 75%, 50%);
$actor-accent-ok: oklch(80% 25% var(--actor-hue));
$actor-accent2-ok: oklch(60% 20% var(--actor-hue)); // outline; color code on post
// dark theme
$dark-actor-bg0: hsl($hue, 32%, 2%);
$dark-actor-bg1: hsl($hue, 30%, 4%);
$dark-actor-bg2: hsl($hue, 27%, 6%);
$dark-actor-bg3: hsl($hue, 25%, 8%);
$dark-actor-bg4: hsl($hue, 20%, 15%);
$dark-actor-fg0: $dark-fg0;
$dark-actor-fg1: hsl($hue, 65%, 65%);
$dark-actor-tabs-bg: hsl($hue, 20%, 8%);
$dark-actor-bg0-ok: oklch(11% 1% var(--actor-hue));
$dark-actor-bg1-ok: oklch(14% 1% var(--actor-hue));
$dark-actor-bg2-ok: oklch(17% 1% var(--actor-hue));
$dark-actor-bg3-ok: oklch(20% 1% var(--actor-hue));
$dark-actor-bg4-ok: oklch(30% 6% var(--actor-hue));
$dark-actor-fg1-ok: oklch(85% 25% var(--actor-hue));
$dark-actor-accent: hsl($hue, 75%, 50%);
$dark-actor-accent-ok: oklch(80% 25% var(--actor-hue));
$dark-actor-accent2-ok: oklch(60% 20% var(--actor-hue));
/***************/
/* mobile menu */
/***************/
$menu-bg: hsl($hue, 25%, 20%); // actor-bg2
$menu-fg: hsl($hue, 40%, 80%); // actor-fg1
$menu-fg-active: #fff;
$menu-icon: #fff;
$menu-filter-active: hsl($hue, 75%, 50%); // accent-light2
$menu-bg: hsl($hue, 25%, 20%);
$menu-fg: hsl($hue, 40%, 80%);
$menu-fg-active: #fff;
$menu-icon: #fff;
$menu-filter-active: hsl($hue, 75%, 50%);
$menu-backdrop: rgba(0, 0, 0, 0.5);
$menu-backdrop: rgba(0, 0, 0, 0.5);
$panel-close: hsl($hue, 10%, 20%); // fg1
$panel-close-hover: hsl($hue, 75%, 38%); // accent-light
$panel-close: hsl($hue, 10%, 20%);
$panel-close-hover: hsl($hue, 75%, 38%);
// dark theme
$dark-menu-bg: hsl($hue, 25%, 5%);
$dark-menu-fg: hsl($hue, 40%, 80%);
$dark-menu-fg-active: #fff;
$dark-menu-icon: #fff;
$dark-menu-filter-active: hsl($hue, 75%, 50%);
$dark-menu-backdrop: rgba(0, 0, 0, 0.5);
$dark-panel-close: hsl($hue, 5%, 90%);
$dark-panel-close-hover: hsl($hue, 0%, 100%);
/**********/
/* accent */
/**********/
$accent: hsl($hue, 100%, 30%);
// -> links, active elements, counters, misc background stripes (color 1)
$accent-dark: hsl($hue, 100%, 26%);
// -> misc background stripes (color 2)
$accent-light: hsl($hue, 75%, 38%);
// -> focusable elements outline; main header counter
$accent-light2: hsl($hue, 75%, 50%);
// -> overlay hover/focus icons (SVG); private posts border; active filter indicator (mobile menu)
// === oklch(56.48% 0.124 59.17)
$accent-light3: hsl($hue, 75%, 75%);
// -> hover effect on images
$accent-light-bg: hsl($hue, 50%, 96%);
// -> private posts background
$accent: hsl($hue, 100%, 30%); // links, active elements
$accent-dark: hsl($hue, 100%, 26%); // counters
$accent-light: hsl($hue, 75%, 38%); // focusable elements outline; main header counter
$accent-light2: hsl($hue, 75%, 50%); // overlay hover/focus icons (SVG); active filter indicator (mobile menu)
$accent-light3: hsl($hue, 75%, 75%); // hover effect on images
// dark theme
$dark-accent: hsl($hue, 70%, 65%);
$dark-accent-dark: hsl($hue, 55%, 50%);
$dark-accent-light: hsl($hue, 75%, 60%);
$dark-accent-light2: hsl($hue, 75%, 68%);
$dark-accent-light3: hsl($hue, 75%, 75%);
/***********/
/* overlay */
/***********/
$overlay-icon: #fff;
$overlay-icon-hover: #fff;
$overlay-backdrop: rgba(0, 0, 0, 0.75);
$overlay-icon: #fff;
$overlay-icon-hover: #fff;
$overlay-backdrop: rgba(0, 0, 0, 0.75);
// dark theme
$dark-overlay-icon: #fff;
$dark-overlay-icon-hover: #fff;
$dark-overlay-backdrop: rgba(0, 0, 0, 0.9);
/*****************/
/* form elements */
/*****************/
$bg-input: rgba(255, 255, 255, 0.35);
$bg-input-hover: rgba(255, 255, 255, 0.65);
$bg-input-focus: rgba(255, 255, 255, 1);
$bg-input: rgba(255, 255, 255, 0.35);
$bg-input-hover: rgba(255, 255, 255, 0.65);
$bg-input-focus: rgba(255, 255, 255, 1);
$bg-button: rgba(255, 255, 255, 1);
$bg-button-hover: hsl($hue, 50%, 95%);
$button-svg: $fg1;
$button-svg-hover: hsl($hue, 75%, 50%);
$button-svg-focus: hsl($hue, 75%, 50%);
$button-svg-active: hsl($hue, 75%, 50%);
$bg-button: rgba(255, 255, 255, 1);
$bg-button-hover: hsl($hue, 50%, 95%);
$button-svg: $fg1;
$button-svg-hover: hsl($hue, 75%, 50%);
$button-svg-focus: $button-svg-hover;
$button-svg-active: $button-svg-hover;
$fg-button-focus: $accent;
$fg-button-active: $accent;
$fg-button-focus: $accent;
$fg-button-active: $accent;
// Note: some rgba values hardcoded, used mostly for box-shadow or backdrops
// dark theme
$dark-bg-input: rgba(255, 255, 255, 0.10);
$dark-bg-input-hover: rgba(255, 255, 255, 0.15);
$dark-bg-input-focus: rgba(255, 255, 255, 0.25);
$dark-bg-button: hsl($hue, 25%, 20%);
$dark-bg-button-hover: hsl($hue, 25%, 30%);
$dark-button-svg: $dark-fg1;
$dark-button-svg-hover: hsl($hue, 65%, 65%);
$dark-button-svg-focus: $dark-button-svg-hover;
$dark-button-svg-active: $dark-button-svg-hover;
$dark-fg-button-focus: $dark-accent;
$dark-fg-button-active: $dark-accent;
/********/
/* misc */
/********/
$posts-count: $accent-light;
$selection-text: #fff;
$selection-bg: $accent-light;
$stripe1: $accent;
$stripe2: $accent-dark;
$stripe-fg: $fg-inv;
$private-post-bg: hsl($hue, 50%, 96%);
$private-post-border: $accent-light2;
// dark theme
$dark-posts-count: $dark-fg0;
$dark-selection-text: #fff;
$dark-selection-bg: hsl($hue, 75%, 40%);
$dark-stripe1: hsl($hue, 75%, 25%);
$dark-stripe2: hsl($hue, 75%, 30%);
$dark-stripe-fg: $dark-fg0;
$dark-private-post-bg: $dark-bg2;
$dark-private-post-border: $dark-accent-dark;
@import "colors-mixins";
html {
--bg0: #{$bg0};
--bg1: #{$bg1};
--bg2: #{$bg2};
--bg3: #{$bg3};
--bg4: #{$bg4};
@include theme-vars();
--fg0: #{$fg0};
--fg1: #{$fg1};
--fg2: #{$fg2};
--fg-inv: #{$fg-inv};
--menu-bg: #{$menu-bg};
--menu-fg: #{$menu-fg};
--menu-fg-active: #{$menu-fg-active};
--menu-icon: #{$menu-icon};
--menu-filter-active: #{$menu-filter-active};
--panel-close: #{$panel-close};
--panel-close-hover: #{$panel-close-hover};
--accent: #{$accent};
--accent-dark: #{$accent-dark};
--accent-light: #{$accent-light};
--accent-light2: #{$accent-light2};
--accent-light3: #{$accent-light3};
--accent-light-bg: #{$accent-light-bg};
--overlay-icon: #{$overlay-icon};
--overlay-icon-hover: #{$overlay-icon-hover};
--overlay-backdrop: #{$overlay-backdrop};
--menu-backdrop: #{$menu-backdrop};
--bg-input: #{$bg-input};
--bg-input-hover: #{$bg-input-hover};
--bg-input-focus: #{$bg-input-focus};
--bg-button: #{$bg-button};
--bg-button-hover: #{$bg-button-hover};
--button-svg: #{$button-svg};
--button-svg-hover: #{$button-svg-hover};
--button-svg-focus: #{$button-svg-focus};
--button-svg-active: #{$button-svg-active};
--fg-button-focus: #{$fg-button-focus};
--fg-button-active: #{$fg-button-active};
@media (prefers-color-scheme: dark) {
color-scheme: dark;
@include theme-vars("dark");
}
}
.actors-wrapper {
--actor-hue: 0;
--actor-bg0: #{$actor-bg0};
--actor-bg0-ok: #{$actor-bg0-ok};
--actor-bg1: #{$actor-bg1};
--actor-bg1-ok: #{$actor-bg1-ok};
--actor-bg2: #{$actor-bg2};
--actor-bg2-ok: #{$actor-bg2-ok};
--actor-bg3: #{$actor-bg3};
--actor-bg3-ok: #{$actor-bg3-ok};
--actor-bg4: #{$actor-bg4};
--actor-bg4-ok: #{$actor-bg4-ok};
html.light {
color-scheme: light;
@include theme-vars();
}
--actor-fg0: #{$actor-fg0};
--actor-fg1: #{$actor-fg1};
--actor-fg1-ok: #{$actor-fg1-ok};
--actor-tabs-bg: #{$actor-tabs-bg};
--actor-accent: #{$actor-accent};
--actor-accent-ok: #{$actor-accent-ok};
--actor-accent2-ok: #{$actor-accent2-ok};
}
.actors-tabs button {
--actor-accent-ok: #{$actor-accent-ok};
--actor-accent2-ok: #{$actor-accent2-ok};
}
.toot-content {
--actor-accent-ok: #{$actor-accent-ok};
--actor-accent2-ok: #{$actor-accent2-ok};
html.dark {
color-scheme: dark;
@include theme-vars("dark");
}

74
css/_filters.scss
View File

@ -116,3 +116,77 @@
}
}
}
/********************/
/* THEME VARIATIONS */
/********************/
// light
@media (prefers-color-scheme: light) {
.toots-filter.checkbox label {
background-image: url("../svg/dark/checkbox-unchecked.svg");
}
.toots-filter.checkbox label:has(input:checked) {
background-image: url("../svg/dark/checkbox-checked.svg");
}
.toots-filter:hover label,
.toots-filter:focus-visible label,
.toots-filter:focus-within label {
background-color: rgba(255, 255, 255, 0.35);
}
.toots-filter.active label {
background-color: var(--accent);
}
}
html.light {
.toots-filter.checkbox label {
background-image: url("../svg/dark/checkbox-unchecked.svg");
}
.toots-filter.checkbox label:has(input:checked) {
background-image: url("../svg/dark/checkbox-checked.svg");
}
.toots-filter:hover label,
.toots-filter:focus-visible label,
.toots-filter:focus-within label {
background-color: rgba(255, 255, 255, 0.35);
}
.toots-filter.active label {
background-color: var(--accent);
}
}
// dark
@media (prefers-color-scheme: dark) {
.toots-filter.checkbox label {
background-image: url("../svg/light/checkbox-unchecked.svg");
}
.toots-filter.checkbox label:has(input:checked) {
background-image: url("../svg/light/checkbox-checked.svg");
}
.toots-filter:hover label,
.toots-filter:focus-visible label,
.toots-filter:focus-within label {
background-color: rgba(255, 255, 255, 0.1);
}
.toots-filter.active label {
background-color: var(--accent-light);
}
}
html.dark {
.toots-filter.checkbox label {
background-image: url("../svg/light/checkbox-unchecked.svg");
}
.toots-filter.checkbox label:has(input:checked) {
background-image: url("../svg/light/checkbox-checked.svg");
}
.toots-filter:hover label,
.toots-filter:focus-visible label,
.toots-filter:focus-within label {
background-color: rgba(255, 255, 255, 0.1);
}
.toots-filter.active label {
background-color: var(--accent-light);
}
}

23
css/_global.scss
View File

@ -127,8 +127,9 @@ button {
&:disabled {
top: 0;
box-shadow: none;
cursor: not-allowed;
color: inherit;
opacity: 0.35;
cursor: not-allowed;
.btn-icon {
fill: var(--button-svg);
@media (forced-colors: active) {
@ -192,6 +193,7 @@ details {
white-space: pre-wrap;
word-break: break-all;
font-size: 0.8em;
color: inherit;
}
textarea {
display: block;
@ -209,6 +211,11 @@ details {
}
}
::selection {
color: var(--selection-text);
background-color: var(--selection-bg);
}
// focusable elements
*:focus-visible,
.tags-group button:focus-visible div,
@ -234,3 +241,17 @@ details {
border-radius: 0.5rem;
background-color: #600;
}
@media (forced-colors: active) {
details {
summary {
color: ButtonText !important;
svg {
fill: ButtonText !important;
}
}
}
.tags-group button * {
color: ButtonText !important;
}
}

2
css/_layout.scss
View File

@ -47,7 +47,7 @@ html {
}
}
.nb {
color: var(--accent-light);
color: var(--posts-count);
}
.toggle-order {
margin-bottom: 5px;

30
css/_tags.scss
View File

@ -123,3 +123,33 @@ $display-wide: 340px;
padding-top: 0.5rem;
padding-bottom: 2rem;
}
/********************/
/* THEME VARIATIONS */
/********************/
// light
@media (prefers-color-scheme: light) {
.tags-group .active button div {
background-color: var(--accent);
}
}
html.light {
.tags-group .active button div {
background-color: var(--accent);
}
}
// dark
@media (prefers-color-scheme: dark) {
.tags-group .active button div {
background-color: var(--accent-light);
}
}
html.dark {
.tags-group .active button div {
background-color: var(--accent-light);
}
}

213
css/_toot.scss
View File

@ -37,13 +37,13 @@ $meta-visible: 100ch;
.toot-summary {
padding: 0.5rem 1rem;
margin-bottom: 1rem;
color: var(--fg-inv);
color: var(--stripe-fg);
background: repeating-linear-gradient(
45deg,
var(--accent-dark),
var(--accent-dark) 10px,
var(--accent) 10px,
var(--accent) 20px
var(--stripe1),
var(--stripe1) 10px,
var(--stripe2) 10px,
var(--stripe2) 20px
);
@include box-shadow-inner();
border-radius: 0.5rem;
@ -70,7 +70,7 @@ $meta-visible: 100ch;
position: relative;
overflow-wrap: break-word;
background: radial-gradient(circle at 100% 100%, var(--bg2), var(--bg0));
&::before {
&::after {
content: "";
position: absolute;
left: 0;
@ -93,25 +93,27 @@ $meta-visible: 100ch;
}
.toot-visibility-mentioned & {
background-color: var(--accent-light-bg);
border: 2px dashed var(--accent-light2);
background-color: var(--private-post-bg);
border: 2px dashed var(--private-post-border);
}
}
.multiple-actors .toot-content {
position: relative;
padding-left: 1.6rem;
&::before {
content: "";
position: absolute;
left: 0.35rem;
top: 0.35rem;
bottom: 0.35rem;
z-index: 1;
width: 0.25rem;
border-radius: 0.25rem;
background-color: red;
background-color: var(--actor-accent-ok, transparent);
@media (forced-colors: none) {
.multiple-actors .toot-content {
position: relative;
padding-left: 1.6rem;
&::before {
content: "";
position: absolute;
left: 0.35rem;
top: 0.35rem;
bottom: 0.35rem;
z-index: 1;
width: 0.25rem;
border-radius: 0.25rem;
background-color: red;
background-color: var(--actor-accent-ok, transparent);
}
}
}
@ -203,7 +205,7 @@ $meta-visible: 100ch;
padding: 0 1rem;
}
.no-alt-text .att-img-wrapper {
&.no-alt-text .att-img-wrapper {
position: relative;
&::before {
content: "";
@ -334,7 +336,6 @@ $meta-visible: 100ch;
margin: 0 1rem;
padding: 1rem;
font-size: 0.8em;
opacity: 0.8;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
@ -430,6 +431,7 @@ $meta-visible: 100ch;
.toot-visibility-mentioned .toot-infos .visibility {
background-image: url("../svg/dark/visibility-mentioned.svg");
}
.toot-infos .link a {
padding-left: 0;
padding-right: 1.6em;
@ -437,7 +439,7 @@ $meta-visible: 100ch;
background-image: url("../svg/dark/open-in-new.svg");
@media (forced-colors: active) {
padding-right: 0;
background: none;
background: none !important;
}
}
@ -465,6 +467,9 @@ $meta-visible: 100ch;
}
.summary-icon {
display: flex;
svg {
fill: currentColor;
}
}
details[open] {
@ -477,7 +482,7 @@ $meta-visible: 100ch;
summary {
opacity: 1;
background-color: transparent;
background-color: transparent !important;
box-shadow: none;
}
}
@ -496,3 +501,159 @@ $meta-visible: 100ch;
margin: 1em 0;
}
}
/********************/
/* THEME VARIATIONS */
/********************/
// light
@media (prefers-color-scheme: light) {
.toot-meta .toot-people li a {
background-image: url("../svg/dark/person.svg");
}
.toot-meta .toot-hashtags li a {
background-image: url("../svg/dark/hashtag.svg");
}
.toot-meta .toot-links li a {
background-image: url("../svg/dark/link.svg");
}
.toot-infos .published {
background-image: url("../svg/dark/calendar.svg");
}
.toot-type-post .toot-infos .type {
background-image: url("../svg/dark/type-post.svg");
}
.toot-type-boost .toot-infos .type {
background-image: url("../svg/dark/type-boost.svg");
}
.toot-visibility-public .toot-infos .visibility {
background-image: url("../svg/dark/visibility-public.svg");
}
.toot-visibility-unlisted .toot-infos .visibility {
background-image: url("../svg/dark/visibility-unlisted.svg");
}
.toot-visibility-followers .toot-infos .visibility {
background-image: url("../svg/dark/visibility-followers.svg");
}
.toot-visibility-mentioned .toot-infos .visibility {
background-image: url("../svg/dark/visibility-mentioned.svg");
}
.toot-infos .link a {
background-image: url("../svg/dark/open-in-new.svg");
}
}
html.light {
.toot-meta .toot-people li a {
background-image: url("../svg/dark/person.svg");
}
.toot-meta .toot-hashtags li a {
background-image: url("../svg/dark/hashtag.svg");
}
.toot-meta .toot-links li a {
background-image: url("../svg/dark/link.svg");
}
.toot-infos .published {
background-image: url("../svg/dark/calendar.svg");
}
.toot-type-post .toot-infos .type {
background-image: url("../svg/dark/type-post.svg");
}
.toot-type-boost .toot-infos .type {
background-image: url("../svg/dark/type-boost.svg");
}
.toot-visibility-public .toot-infos .visibility {
background-image: url("../svg/dark/visibility-public.svg");
}
.toot-visibility-unlisted .toot-infos .visibility {
background-image: url("../svg/dark/visibility-unlisted.svg");
}
.toot-visibility-followers .toot-infos .visibility {
background-image: url("../svg/dark/visibility-followers.svg");
}
.toot-visibility-mentioned .toot-infos .visibility {
background-image: url("../svg/dark/visibility-mentioned.svg");
}
.toot-infos .link a {
background-image: url("../svg/dark/open-in-new.svg");
}
}
// dark
@media (prefers-color-scheme: dark) {
.toot-type-boost .toot-content::after {
opacity: 0.25;
}
.toot-meta .toot-people li a {
background-image: url("../svg/light/person.svg");
}
.toot-meta .toot-hashtags li a {
background-image: url("../svg/light/hashtag.svg");
}
.toot-meta .toot-links li a {
background-image: url("../svg/light/link.svg");
}
.toot-infos .published {
background-image: url("../svg/light/calendar.svg");
}
.toot-type-post .toot-infos .type {
background-image: url("../svg/light/type-post.svg");
}
.toot-type-boost .toot-infos .type {
background-image: url("../svg/light/type-boost.svg");
}
.toot-visibility-public .toot-infos .visibility {
background-image: url("../svg/light/visibility-public.svg");
}
.toot-visibility-unlisted .toot-infos .visibility {
background-image: url("../svg/light/visibility-unlisted.svg");
}
.toot-visibility-followers .toot-infos .visibility {
background-image: url("../svg/light/visibility-followers.svg");
}
.toot-visibility-mentioned .toot-infos .visibility {
background-image: url("../svg/light/visibility-mentioned.svg");
}
.toot-infos .link a {
background-image: url("../svg/light/open-in-new.svg");
}
}
html.dark {
.toot-type-boost .toot-content::after {
opacity: 0.25;
}
.toot-meta .toot-people li a {
background-image: url("../svg/light/person.svg");
}
.toot-meta .toot-hashtags li a {
background-image: url("../svg/light/hashtag.svg");
}
.toot-meta .toot-links li a {
background-image: url("../svg/light/link.svg");
}
.toot-infos .published {
background-image: url("../svg/light/calendar.svg");
}
.toot-type-post .toot-infos .type {
background-image: url("../svg/light/type-post.svg");
}
.toot-type-boost .toot-infos .type {
background-image: url("../svg/light/type-boost.svg");
}
.toot-visibility-public .toot-infos .visibility {
background-image: url("../svg/light/visibility-public.svg");
}
.toot-visibility-unlisted .toot-infos .visibility {
background-image: url("../svg/light/visibility-unlisted.svg");
}
.toot-visibility-followers .toot-infos .visibility {
background-image: url("../svg/light/visibility-followers.svg");
}
.toot-visibility-mentioned .toot-infos .visibility {
background-image: url("../svg/light/visibility-mentioned.svg");
}
.toot-infos .link a {
background-image: url("../svg/light/open-in-new.svg");
}
}

18
css/_welcome.scss
View File

@ -66,13 +66,13 @@
align-items: center;
font-size: 2em;
background-color: var(--accent);
color: var(--fg-inv);
color: var(--stripe-fg);
background: repeating-linear-gradient(
45deg,
var(--accent-dark),
var(--accent-dark) 1rem,
var(--accent) 1rem,
var(--accent) 2rem
var(--stripe1),
var(--stripe1) 1rem,
var(--stripe2) 1rem,
var(--stripe2) 2rem
);
background-size: 200% auto;
@ -105,10 +105,10 @@
background: repeating-linear-gradient(
45deg,
var(--accent-dark),
var(--accent-dark) 1rem,
var(--accent) 1rem,
var(--accent) 2rem
var(--stripe1),
var(--stripe1) 1rem,
var(--stripe2) 1rem,
var(--stripe2) 2rem
);
background-size: 200% auto;

2
css/main.css
View File

File diff suppressed because one or more lines are too long

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

9
readme.md
View File

@ -17,10 +17,12 @@ Alternatively, you can download this project from its [project page](https://git
⚠️ __Only ZIP files are supported__ —not GZ files. This is a limitation of the JSZip library which is used by MARL to unpack the archive file. Older versions of Mastodon (prior to version 4.2.0) used to export the archive in TAR.GZ. If this is your case, you will have to first convert your archive to a ZIP file.
## Screenshot
## Screenshots
<img src="screenshot-multiple-archives.png" alt="app screenshot with multiple files loaded">
<img src="screenshot-dark-theme.png" alt="app screenshot with dark theme">
## Features
### What data is shown
@ -119,6 +121,11 @@ Mastodon: https://lou.lt/@s427
## Version history
- v. 1.3
- [NEW] dark theme
- will be set automatically based on your OS or browser preference (default to light if no preference is detected)
- support to manually choose the app theme will come in a later update
- misc minor tweaks or fixes
- v. 1.2
- [NEW] support for multiple archive files. Notes:
- you can select multiple files from the open dialog;

BIN
screenshot-dark-theme.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 KiB

BIN
screenshot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 294 KiB

20
svg/dark/checkbox-checked.svg
View File

@ -1,18 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#000000"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<rect
style="fill:#ffffff;fill-opacity:1;stroke-width:40"
width="567.97949"
height="567.97955"
x="196.41943"
y="-764.39893" />
<path
d="m424-424-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-424ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z" />
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000">
<rect style="fill:#ffffff;fill-opacity:1;stroke-width:40" width="567.97949" height="567.97955" x="196.41943" y="-764.39893" />
<path d="m424-424-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-424ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 711 B

After

Width:  |  Height:  |  Size: 548 B

20
svg/dark/checkbox-unchecked.svg
View File

@ -1,18 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#000000"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<rect
style="fill:#ffffff;stroke-width:40;fill-opacity:0.5"
width="570.43481"
height="569.61633"
x="194.78259"
y="-763.58057" />
<path
d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z" />
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000">
<rect style="fill:#ffffff;fill-opacity:0.5;stroke-width:40" width="570.43481" height="569.61633" x="194.78259" y="-763.58057" />
<path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 563 B

After

Width:  |  Height:  |  Size: 400 B

1
svg/light/calendar.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1018 B

4
svg/light/checkbox-checked.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff">
<rect style="fill:#000000;fill-opacity:1;stroke-width:40" width="567.97949" height="567.97955" x="196.41943" y="-764.39893" />
<path d="m424-424-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-424ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 548 B

4
svg/light/checkbox-unchecked.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff">
<rect style="fill:#000000;fill-opacity:0.5;stroke-width:40" width="570.43481" height="569.61633" x="194.78259" y="-763.58057" />
<path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 400 B

1
svg/light/hashtag.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="m360-320-33 131q-3 13-13 21t-24 8q-19 0-31-15t-7-33l28-112H171q-20 0-32-15.5t-7-34.5q3-14 14-22t25-8h129l40-160H231q-20 0-32-15.5t-7-34.5q3-14 14-22t25-8h129l33-131q3-13 13-21t24-8q19 0 31 15t7 33l-28 112h160l33-131q3-13 13-21t24-8q19 0 31 15t7 33l-28 112h109q20 0 32 15.5t7 34.5q-3 14-14 22t-25 8H660l-40 160h109q20 0 32 15.5t7 34.5q-3 14-14 22t-25 8H600l-33 131q-3 13-13 21t-24 8q-19 0-31-15t-7-33l28-112H360Zm20-80h160l40-160H420l-40 160Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 567 B

1
svg/light/link.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M280-280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h120q17 0 28.5 11.5T440-640q0 17-11.5 28.5T400-600H280q-50 0-85 35t-35 85q0 50 35 85t85 35h120q17 0 28.5 11.5T440-320q0 17-11.5 28.5T400-280H280Zm80-160q-17 0-28.5-11.5T320-480q0-17 11.5-28.5T360-520h240q17 0 28.5 11.5T640-480q0 17-11.5 28.5T600-440H360Zm200 160q-17 0-28.5-11.5T520-320q0-17 11.5-28.5T560-360h120q50 0 85-35t35-85q0-50-35-85t-85-35H560q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h120q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H560Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

1
svg/light/open-in-new.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h560v-240q0-17 11.5-28.5T800-480q17 0 28.5 11.5T840-440v240q0 33-23.5 56.5T760-120H200Zm560-584L416-360q-11 11-28 11t-28-11q-11-11-11-28t11-28l344-344H600q-17 0-28.5-11.5T560-800q0-17 11.5-28.5T600-840h200q17 0 28.5 11.5T840-800v200q0 17-11.5 28.5T800-560q-17 0-28.5-11.5T760-600v-104Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 529 B

1
svg/light/person.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-240v-32q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v32q0 33-23.5 56.5T720-160H240q-33 0-56.5-23.5T160-240Zm80 0h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 593 B

1
svg/light/type-post.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M560-120v-66q0-8 3-15.5t9-13.5l209-208q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T903-300L695-92q-6 6-13.5 9T666-80h-66q-17 0-28.5-11.5T560-120Zm300-223-37-37 37 37ZM620-140h38l121-122-37-37-122 121v38ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v57q0 17-11.5 28.5T760-510q-17 0-28.5-11.5T720-550v-50H560q-17 0-28.5-11.5T520-640v-160H240v640h200q17 0 28.5 11.5T480-120q0 17-11.5 28.5T440-80H240Zm0-80v-640 640Zm521-121-19-18 37 37-18-19Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 660 B

1
svg/light/visibility-followers.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 500 B

1
svg/light/visibility-mentioned.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v58q0 59-40.5 100.5T740-280q-35 0-66-15t-52-43q-29 29-65.5 43.5T480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480v58q0 26 17 44t43 18q26 0 43-18t17-44v-58q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h160q17 0 28.5 11.5T680-120q0 17-11.5 28.5T640-80H480Zm0-280q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 649 B

1
svg/light/visibility-public.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q20-22 36-47.5t26.5-53q10.5-27.5 16-56.5t5.5-59q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 603 B

1
svg/light/visibility-unlisted.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h360v-80q0-50-35-85t-85-35q-42 0-73.5 25.5T364-751q-4 14-16.5 22.5T320-720q-17 0-28.5-11t-8.5-26q14-69 69-116t128-47q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM240-160v-400 400Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 528 B