This commit is contained in:
Vincent CLAVIEN 2024-12-05 19:35:07 +01:00
parent 72517d4e8c
commit 83fea0f787
12 changed files with 234 additions and 148 deletions

View File

@ -1,6 +1,6 @@
.actor {
a {
color: var(--fg-inv0);
color: var(--actor-fg0);
}
h1,
h2,
@ -12,13 +12,13 @@
summary {
padding: 1rem;
svg {
fill: var(--fg-inv1);
fill: var(--actor-fg1);
}
&:hover,
&:focus {
color: var(--fg-inv0);
color: var(--actor-fg0);
svg {
fill: var(--fg-inv0);
fill: var(--actor-fg0);
}
}
}
@ -36,52 +36,6 @@
justify-content: flex-start;
}
.actors-tabs {
flex-grow: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
padding: 1rem 1rem 0;
background: var(--bg-inv0);
background-color: hsl(var(--actor-hue), 50%, 80%);
background-color: $actor-accent-dark-ok;
overflow: hidden;
box-shadow: 0 -0.75rem 0.75rem -0.75rem rgba(0, 0, 0, 0.75) inset;
user-select: none;
button {
all: unset;
padding: 0.35rem 0.7rem 0.3rem;
font-size: 0.85em;
font-family: inherit;
border-radius: 0.25rem 0.25rem 0 0;
color: var(--fg1);
background: #fff; // ### VAR
cursor: pointer;
opacity: 0.65;
span {
display: inline-block;
padding-bottom: 0.1rem;
border-bottom: 0.2rem solid transparent;
border-color: hsl(var(--actor-hue), 50%, 80%);
border-color: $actor-accent-light-ok;
}
&:hover {
opacity: 0.85;
}
&[aria-selected="true"] {
opacity: 1;
}
&:focus-visible {
outline: 2px solid hsl(var(--actor-hue), 50%, 80%);
outline: 2px solid $actor-accent-light-ok;
outline-offset: 2px;
}
}
}
.actor-panel {
flex-grow: 1;
height: 100%;
@ -91,8 +45,8 @@
justify-content: flex-start;
overflow-y: auto;
overflow-x: hidden;
color: var(--fg-inv1);
background: var(--bg-inv3);
color: var(--actor-fg1);
background: var(--actor-bg3);
}
.actor-pretty {
@ -175,13 +129,13 @@
.actor-summary {
margin: 2rem 0;
padding: 1rem;
color: var(--fg-inv0);
color: var(--actor-fg0);
line-height: 1.3;
background: var(--bg-inv4);
background: var(--actor-bg4);
background: radial-gradient(
circle at 200% 150%,
var(--bg-inv3),
var(--bg-inv4)
var(--actor-bg3),
var(--actor-bg4)
);
border-radius: 0.5rem;
box-shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
@ -203,8 +157,8 @@
}
dd {
padding: 0.5rem 1rem;
color: var(--fg-inv0);
border-left: 1px solid var(--bg-inv4);
color: var(--actor-fg0);
border-left: 1px solid var(--actor-bg4);
}
@container (width < 340px) {
@ -213,7 +167,7 @@
dl {
display: block;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--bg-inv4);
border-bottom: 1px solid var(--actor-bg4);
&:last-child {
border-bottom: none;
}
@ -237,7 +191,7 @@
gap: 1rem;
.count {
display: block;
color: var(--fg-inv0);
color: var(--actor-fg0);
font-size: 1.6em;
font-weight: bold;
}
@ -257,11 +211,11 @@
font-weight: bold;
&:hover,
&:focus-visible {
color: var(--fg-inv0);
color: var(--actor-fg0);
}
}
&[open] summary {
color: var(--fg-inv0);
color: var(--actor-fg0);
}
p {
margin-top: 0.5rem;
@ -271,7 +225,7 @@
}
.actor-raw {
background: var(--bg-inv2);
background: var(--actor-bg2);
box-shadow: 0 0.75rem 0.75rem -1rem #000 inset;
.details-content {
padding: 1rem 1rem 2rem;
@ -281,7 +235,7 @@
}
.actor-likes-bookmarks {
background: var(--bg-inv0);
background: var(--actor-bg0);
overflow-wrap: break-word;
h2 {
@ -316,10 +270,98 @@
}
.actor-likes {
background: var(--bg-inv1);
background: var(--actor-bg1);
box-shadow: 0 0.75rem 0.75rem -1rem #000 inset;
}
.actor-bookmarks {
padding-bottom: 1rem;
box-shadow: 0 0.75rem 0.75rem -1rem #000 inset;
}
.multiple-actors {
.actors-tabs {
flex-grow: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
padding: 1rem 1rem 0;
// background: var(--actor-bg0);
// background: var(--actor-bg0-ok);
background-color: hsl(var(--actor-hue), 50%, 80%);
background-color: var(--actor-bg3-ok);
overflow: hidden;
box-shadow: 0 -0.75rem 0.75rem -0.75rem rgba(0, 0, 0, 0.75) inset;
user-select: none;
button {
all: unset;
padding: 0.35rem 0.7rem 0.3rem;
font-size: 0.85em;
font-family: inherit;
border-radius: 0.25rem 0.25rem 0 0;
color: var(--fg1);
background: #fff; // ### VAR
cursor: pointer;
opacity: 0.65;
span {
display: inline-block;
padding-bottom: 0.1rem;
border-bottom: 0.2rem solid transparent;
border-color: hsl(var(--actor-hue), 50%, 80%);
border-color: $actor-accent-light-ok;
// border-color: var(--actor-fg1-ok);
}
&:hover {
opacity: 0.85;
}
&[aria-selected="true"] {
opacity: 1;
}
&:focus-visible {
outline: 2px solid hsl(var(--actor-hue), 50%, 80%);
outline: 2px solid $actor-accent-light-ok;
// outline: 2px solid var(--actor-fg1-ok);
outline-offset: 2px;
}
}
}
// color variations
.actor summary svg {
fill: var(--actor-fg1-ok);
}
.actor-panel {
color: var(--actor-fg1-ok);
background: var(--actor-bg3-ok);
}
.actor-summary {
background: var(--actor-bg4-ok);
background: radial-gradient(
circle at 200% 150%,
var(--actor-bg3-ok),
var(--actor-bg4-ok)
);
}
.actor-infos {
dd {
border-left-color: var(--actor-bg4-ok);
}
@container (width < 340px) {
dl {
border-bottom-color: var(--actor-bg4-ok);
}
}
}
.actor-raw {
background: var(--actor-bg2-ok);
}
.actor-likes-bookmarks {
background: var(--actor-bg0-ok);
}
.actor-likes {
background: var(--actor-bg1-ok);
}
}

View File

@ -1,65 +1,74 @@
// tint and saturation factor for the app color scheme
$hue: 30; // === 59.17 in oklch
$sat: 0.5;
/*********************************/
/* global background/text colors */
/*********************************/
$bg0: hsl(var(--hue), calc(var(--sat) * 0%), 100%);
// -> post content
$bg1: hsl(var(--hue), calc(var(--sat) * 20%), 95%);
// -> post
$bg2: hsl(var(--hue), calc(var(--sat) * 30%), 90%);
// -> post attachment/meta/raw
$bg3: hsl(var(--hue), calc(var(--sat) * 35%), 87%);
// -> posts header
$bg4: hsl(var(--hue), calc(var(--sat) * 40%), 84%);
// -> filters/tags panels
$bg0: #fff; // -> post content
$bg1: hsl($hue, 10%, 95%); // -> post
$bg2: hsl($hue, 15%, 90%); // -> post attachment/meta/raw
$bg3: hsl($hue, 17.5%, 87%); // -> posts header
$bg4: hsl($hue, 20%, 84%); // -> filters/tags panels
$fg0: hsl(var(--hue), calc(var(--sat) * 0%), 0%);
// -> post content
$fg1: hsl(var(--hue), calc(var(--sat) * 20%), 20%);
// -> body text; some SVG icons (panel close)
$fg2: hsl(var(--hue), calc(var(--sat) * 20%), 30%);
// -> headings (h1, h2...)
$fg0: hsl($hue, 0%, 0%); // -> post content
$fg1: hsl($hue, 10%, 20%); // -> body text; some SVG icons (panel close)
$fg2: hsl($hue, 10%, 30%); // -> headings (h1, h2...)
/********************************************/
/* inverted light scheme (e.g. actor panel) */
/********************************************/
$fg-inv: #fff; // -> misc highlighted text
$bg-inv0: hsl(var(--hue), calc(var(--sat) * 75%), 11%);
// -> bookmarks
$bg-inv1: hsl(var(--hue), calc(var(--sat) * 65%), 15%);
// -> favorites
$bg-inv2: hsl(var(--hue), calc(var(--sat) * 50%), 20%);
// -> actor raw data, mobile menu
$bg-inv3: hsl(var(--hue), calc(var(--sat) * 50%), 25%);
// -> actor panel
$bg-inv4: hsl(var(--hue), calc(var(--sat) * 45%), 40%);
// -> actor summary
/***************/
/* actor panel */
/***************/
$fg-inv0: hsl(var(--hue), calc(var(--sat) * 0%), 100%);
// -> misc highlighted text; mobile menu icons
$fg-inv1: hsl(var(--hue), calc(var(--sat) * 80%), 80%);
// -> actor, mobile menu
$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
// OKLCH variants
$actor-bg0-ok: oklch(11% 37.5% var(--actor-hue));
$actor-bg1-ok: oklch(15% 32.5% var(--actor-hue));
$actor-bg2-ok: oklch(20% 25% var(--actor-hue));
$actor-bg3-ok: oklch(25% 25% var(--actor-hue));
$actor-bg4-ok: oklch(40% 22.5% var(--actor-hue));
$actor-fg1-ok: oklch(92% 10% 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-backdrop: rgba(0, 0, 0, 0.5);
$panel-close: hsl($hue, 40%, 80%); // fg1
$panel-close-hover: hsl($hue, 75%, 38%); // accent-light
/**********/
/* accent */
/**********/
$accent: hsl(var(--hue), calc(var(--sat) * 200%), 30%);
$accent: hsl($hue, 100%, 30%);
// -> links, active elements, counters, misc background stripes (color 1)
$accent-dark: hsl(var(--hue), calc(var(--sat) * 250%), 26%);
$accent-dark: hsl($hue, 100%, 26%);
// -> misc background stripes (color 2)
$accent-light: hsl(var(--hue), calc(var(--sat) * 150%), 38%);
$accent-light: hsl($hue, 75%, 38%);
// -> focusable elements outline; main header counter
$accent-light2: hsl(var(--hue), calc(var(--sat) * 150%), 50%);
$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(var(--hue), calc(var(--sat) * 150%), 75%);
$accent-light3: hsl($hue, 75%, 75%);
// -> hover effect on images
$accent-light-bg: hsl(var(--hue), calc(var(--sat) * 100%), 96%);
$accent-light-bg: hsl($hue, 50%, 96%);
// -> private posts background
/***********/
@ -69,7 +78,6 @@ $accent-light-bg: hsl(var(--hue), calc(var(--sat) * 100%), 96%);
$overlay-icon: #fff;
$overlay-icon-hover: #fff;
$overlay-backdrop: rgba(0, 0, 0, 0.75);
$menu-backdrop: rgba(0, 0, 0, 0.5);
/*****************/
/* form elements */
@ -80,11 +88,11 @@ $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(var(--hue), calc(var(--sat) * 100%), 95%);
$bg-button-hover: hsl($hue, 50%, 95%);
$button-svg: $fg1;
$button-svg-hover: hsl(var(--hue), calc(var(--sat) * 150%), 50%);
$button-svg-focus: hsl(var(--hue), calc(var(--sat) * 150%), 50%);
$button-svg-active: hsl(var(--hue), calc(var(--sat) * 150%), 50%);
$button-svg-hover: hsl($hue, 75%, 50%);
$button-svg-focus: hsl($hue, 75%, 50%);
$button-svg-active: hsl($hue, 75%, 50%);
$fg-button-focus: $accent;
$fg-button-active: $accent;
@ -92,9 +100,6 @@ $fg-button-active: $accent;
// Note: some rgba values hardcoded, used mostly for box-shadow or backdrops
html {
--hue: #{$hue};
--sat: #{$sat};
--bg0: #{$bg0};
--bg1: #{$bg1};
--bg2: #{$bg2};
@ -104,15 +109,15 @@ html {
--fg0: #{$fg0};
--fg1: #{$fg1};
--fg2: #{$fg2};
--fg-inv: #{$fg-inv};
--bg-inv0: #{$bg-inv0};
--bg-inv1: #{$bg-inv1};
--bg-inv2: #{$bg-inv2};
--bg-inv3: #{$bg-inv3};
--bg-inv4: #{$bg-inv4};
--fg-inv0: #{$fg-inv0};
--fg-inv1: #{$fg-inv1};
--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};
@ -139,10 +144,24 @@ html {
--fg-button-focus: #{$fg-button-focus};
--fg-button-active: #{$fg-button-active};
--actor-hue: 0;
// ### TODO hsl() fallback
}
$actor-accent-light-ok: oklch(80% 0.15 var(--actor-hue));
$actor-accent-dark-ok: oklch(25% 0.25 var(--actor-hue));
.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-accent-light-ok: oklch(80% 15% var(--actor-hue));

View File

@ -96,7 +96,7 @@
}
&.active label {
color: var(--fg-inv0);
color: var(--fg-inv);
opacity: 1;
background-color: var(--accent);
@media (forced-colors: active) {

View File

@ -6,8 +6,8 @@ $panel-width: 400px;
display: none;
position: relative;
z-index: 2;
color: var(--fg-inv1);
background-color: var(--bg-inv2);
color: var(--menu-fg);
background-color: var(--menu-bg);
@media (forced-colors: active) {
color: buttonText;
@ -53,7 +53,7 @@ $panel-width: 400px;
width: $icon-width;
height: auto;
margin: 5px auto 0;
fill: var(--fg-inv0);
fill: var(--menu-icon);
@media (forced-colors: active) {
fill: buttonText;
@ -79,7 +79,7 @@ $panel-width: 400px;
width: 10px;
height: 10px;
border-radius: 10px;
background-color: var(--accent-light2);
background-color: var(--menu-filter-active);
@media (forced-colors: active) {
background-color: Highlight;
}
@ -164,7 +164,7 @@ $panel-width: 400px;
right: 6px;
top: 6px;
z-index: 1;
color: var(--fg1);
color: var(--panel-close);
background: transparent;
box-shadow: none;
.btn-icon {
@ -173,7 +173,7 @@ $panel-width: 400px;
&:hover,
&:focus,
&:focus-visible {
color: var(--accent-light);
color: var(--panel-close-hover);
}
@media (forced-colors: active) {
@ -205,7 +205,7 @@ $panel-width: 400px;
&.menu-open-actor .menu-actor,
&.menu-open-filters .menu-filters,
&.menu-open-tags .menu-tags {
color: var(--fg-inv0);
color: var(--menu-fg-active);
background-color: rgba(255, 255, 255, 0.2);
}
}

View File

@ -82,10 +82,10 @@ $display-wide: 340px;
}
}
.active button div {
color: var(--fg-inv0);
color: var(--fg-inv);
background-color: var(--accent);
.count {
color: var(--fg-inv0);
color: var(--fg-inv);
}
}
}

View File

@ -37,7 +37,7 @@ $meta-visible: 100ch;
.toot-summary {
padding: 0.5rem 1rem;
margin-bottom: 1rem;
color: var(--fg-inv0);
color: var(--fg-inv);
background: repeating-linear-gradient(
45deg,
var(--accent-dark),

View File

@ -66,7 +66,7 @@
align-items: center;
font-size: 2em;
background-color: var(--accent);
color: var(--fg-inv0);
color: var(--fg-inv);
background: repeating-linear-gradient(
45deg,
var(--accent-dark),
@ -128,3 +128,10 @@
background: var(--bg2);
}
}
.loading-more {
justify-content: center;
.file-loader {
margin: 0;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,7 @@
<link rel="icon" href="data:," />
<base target="_blank" />
<link rel="stylesheet" href="css/main.css?20241201" />
<link rel="stylesheet" href="css/main.css?20241204" />
<script>
const isFileProtocol = window.location.protocol === "file:";
const scripts = [
@ -54,7 +54,7 @@
:class="$store.ui.appClasses"
x-init="$watch('$store.files.appReady', value => checkAppReady(value))"
>
<template x-if="! $store.files.appReady">
<template x-if="!$store.files.appReady && !$store.files.someFilesLoaded">
<main
class="welcome"
:class="$store.files.loading ? 'file-loading' : ''"
@ -106,6 +106,16 @@
</main>
</template>
<template x-if="!$store.files.appReady && $store.files.someFilesLoaded">
<main class="welcome loading-more">
<div class="intro">
<div class="file-loader loading">
<span>... Loading ...</span>
</div>
</div>
</main>
</template>
<template x-if="$store.files.appReady">
<main
class="main-section"
@ -113,7 +123,11 @@
tabindex="-1"
x-on:resize.window="$store.ui.checkMenuState()"
>
<div class="main-section-inner" id="main-section-inner">
<div
class="main-section-inner"
id="main-section-inner"
:class="$store.files.sources.length > 1 ? 'multiple-actors' : ''"
>
<div class="mobile-menu" id="mobile-menu">
<nav>
<ul>
@ -188,13 +202,15 @@
<h2 class="visually-hidden" id="actor-title">Account info</h2>
<h3 class="visually-hidden" id="actor-tabs-title">Accounts</h3>
<div class="actors-wrapper">
<div
class="actors-wrapper"
:style="'--actor-hue: '+ $store.files.sources[$store.ui.actorPanel].hue"
>
<template x-if="$store.files.sources.length > 1">
<div
class="actors-tabs"
role="tablist"
aria-labelledby="actor-tabs-title"
:style="'--actor-hue: '+ $store.files.sources[$store.ui.actorPanel].hue"
>
<template x-for="(_, source) in $store.files.sources">
<button
@ -1023,7 +1039,6 @@
<div
class="toots"
:class="$store.files.sources.length > 1 ? 'multiple-actors' : ''"
id="toots"
role="region"
aria-labelledby="toots-title"
@ -1677,6 +1692,6 @@
</symbol>
</svg>
<script src="js/main.js?20241202"></script>
<script src="js/main.js?20241204"></script>
</body>
</html>

View File

@ -577,7 +577,6 @@ const filesStore = {
}
});
},
toggleTootsOrder() {
this.sortAsc = !this.sortAsc;
this.sortToots();

View File

@ -66,6 +66,10 @@ Accessibility is a vast and complex topic, and there's probably room for improve
MARL should work on pretty much any screen size, as low as 300 pixels wide (and possibly less).
### Persistent settings
Paging-related settings (namely: number of posts per page, and sorting order) are stored in the browser and automatically restored when the app is initialized, so that you don't have to re-set them the way you like it every time.
## Limitations
Everything is based on the data contained in the Mastodon archive file. As far as I can tell, the archive does __not__ include: