mirror of
https://github.com/s427/MARL.git
synced 2025-01-31 11:34:46 +01:00
version 1.0
This commit is contained in:
Vincent CLAVIEN
parent
1d05ac4057
commit
9136b33c85
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
.data
|
||||
.docs
|
||||
269
css/_actor.scss
Normal file
269
css/_actor.scss
Normal file
@ -0,0 +1,269 @@
|
||||
.actor {
|
||||
container-type: inline-size;
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
color: var(--fg-inv1);
|
||||
background: var(--bg-inv3);
|
||||
|
||||
a {
|
||||
color: var(--fg-inv0);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
summary {
|
||||
padding: 1rem;
|
||||
svg {
|
||||
fill: var(--fg-inv1);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--fg-inv0);
|
||||
svg {
|
||||
fill: var(--fg-inv0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details:not(.comment) summary:focus-visible {
|
||||
outline-offset: -6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.actor-pretty {
|
||||
flex-shrink: 0;
|
||||
padding: 1rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.actor-banner,
|
||||
.actor-id {
|
||||
button {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actor-banner {
|
||||
margin: -1rem -1rem 0;
|
||||
button:focus-visible {
|
||||
outline-offset: -4px;
|
||||
border-radius: 8px;
|
||||
overflow: visible;
|
||||
img {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actor-id {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"img name"
|
||||
"img url";
|
||||
grid-template-columns: 100px 1fr;
|
||||
grid-template-rows: min-content 1fr;
|
||||
|
||||
button {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
& > * {
|
||||
position: relative;
|
||||
top: -2rem !important;
|
||||
}
|
||||
}
|
||||
.actor-avatar {
|
||||
grid-area: img;
|
||||
width: 100px;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&.no-avatar {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.actor-name {
|
||||
grid-area: name;
|
||||
margin: 2.4rem 0 0;
|
||||
padding-left: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
.actor-url {
|
||||
grid-area: url;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.actor-summary {
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
color: var(--fg-inv0);
|
||||
line-height: 1.3;
|
||||
background: var(--bg-inv4);
|
||||
background: radial-gradient(
|
||||
circle at 200% 150%,
|
||||
var(--bg-inv3),
|
||||
var(--bg-inv4)
|
||||
);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.actor-infos {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, max-content) minmax(50%, 1fr);
|
||||
margin: 2rem 0;
|
||||
|
||||
dl {
|
||||
grid-column: span 2;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
dt {
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
dd {
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--fg-inv0);
|
||||
border-left: 1px solid var(--bg-inv4);
|
||||
}
|
||||
|
||||
@container (width < 340px) {
|
||||
display: block;
|
||||
|
||||
dl {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid var(--bg-inv4);
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
dt {
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
dd {
|
||||
padding: 0;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actor-posts-count {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: 2rem 0 0;
|
||||
gap: 1rem;
|
||||
.count {
|
||||
display: block;
|
||||
color: var(--fg-inv0);
|
||||
font-size: 1.6em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.total,
|
||||
.archive {
|
||||
flex: 0 0 calc(50% - 0.5rem);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.comment {
|
||||
flex: 0 0 100%;
|
||||
font-size: 0.8em;
|
||||
summary {
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: var(--fg-inv0);
|
||||
}
|
||||
}
|
||||
&[open] summary {
|
||||
color: var(--fg-inv0);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
padding-left: 2.05rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actor-raw {
|
||||
background: var(--bg-inv2);
|
||||
box-shadow: 0 0.75rem 0.75rem -1rem #000 inset;
|
||||
.details-content {
|
||||
padding: 1rem 1rem 2rem;
|
||||
overflow: auto;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.actor-likes-bookmarks {
|
||||
flex-grow: 1;
|
||||
background: var(--bg-inv0);
|
||||
overflow-wrap: break-word;
|
||||
|
||||
h2 {
|
||||
display: inline;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
font-size: 0.9em;
|
||||
padding: 0 1rem 2rem 2.05rem;
|
||||
}
|
||||
li {
|
||||
padding: 0.25rem 0.75rem;
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.25rem;
|
||||
line-height: 1.1;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.no-content {
|
||||
padding: 0 1rem 2rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.actor-likes {
|
||||
background: var(--bg-inv1);
|
||||
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;
|
||||
}
|
||||
141
css/_colors.scss
Normal file
141
css/_colors.scss
Normal file
@ -0,0 +1,141 @@
|
||||
// tint and saturation factor for the app color scheme
|
||||
$hue: 30;
|
||||
$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
|
||||
|
||||
$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...)
|
||||
|
||||
/********************************************/
|
||||
/* inverted light scheme (e.g. actor panel) */
|
||||
/********************************************/
|
||||
|
||||
$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
|
||||
|
||||
$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
|
||||
|
||||
/**********/
|
||||
/* accent */
|
||||
/**********/
|
||||
|
||||
$accent: hsl(var(--hue), calc(var(--sat) * 200%), 30%);
|
||||
// -> links, active elements, counters, misc background stripes (color 1)
|
||||
$accent-dark: hsl(var(--hue), calc(var(--sat) * 250%), 26%);
|
||||
// -> misc background stripes (color 2)
|
||||
$accent-light: hsl(var(--hue), calc(var(--sat) * 150%), 38%);
|
||||
// -> focusable elements outline; main header counter
|
||||
$accent-light2: hsl(var(--hue), calc(var(--sat) * 150%), 50%);
|
||||
// -> overlay hover/focus icons (SVG); private posts border; active filter indicator (mobile menu)
|
||||
$accent-light3: hsl(var(--hue), calc(var(--sat) * 150%), 75%);
|
||||
// -> hover effect on images
|
||||
$accent-light-bg: hsl(var(--hue), calc(var(--sat) * 100%), 96%);
|
||||
// -> private posts background
|
||||
|
||||
/***********/
|
||||
/* overlay */
|
||||
/***********/
|
||||
|
||||
$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 */
|
||||
/*****************/
|
||||
|
||||
$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(var(--hue), calc(var(--sat) * 100%), 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%);
|
||||
|
||||
$fg-button-focus: $accent;
|
||||
$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};
|
||||
--bg3: #{$bg3};
|
||||
--bg4: #{$bg4};
|
||||
|
||||
--fg0: #{$fg0};
|
||||
--fg1: #{$fg1};
|
||||
--fg2: #{$fg2};
|
||||
|
||||
--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};
|
||||
|
||||
--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};
|
||||
}
|
||||
106
css/_filters.scss
Normal file
106
css/_filters.scss
Normal file
@ -0,0 +1,106 @@
|
||||
.toots-filters {
|
||||
height: 100dvh;
|
||||
max-height: 100dvh;
|
||||
padding: 1rem 1rem 2em;
|
||||
background-color: var(--bg4);
|
||||
overflow-y: auto;
|
||||
container-type: inline-size;
|
||||
user-select: none;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toots-filters-reset {
|
||||
margin-top: 1rem;
|
||||
text-align: right;
|
||||
|
||||
.reset:not(:disabled) {
|
||||
box-shadow: 0 0 0 0.25rem var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
.toots-filters-group {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
.toots-filters-group-title {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.toots-filters-group:has(.text) {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
gap: 0.35rem;
|
||||
.toots-filter {
|
||||
grid-column: span 2;
|
||||
&.text {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
}
|
||||
@container (width < 260px) {
|
||||
display: block;
|
||||
.toots-filter.text label {
|
||||
margin: 0.5rem 0 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toots-filter {
|
||||
margin-bottom: 2px;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
padding: 0.2rem 0.3rem;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
&.sep-above {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
label {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
&.text {
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.checkbox {
|
||||
label {
|
||||
position: relative;
|
||||
padding-left: 1.7rem;
|
||||
background: transparent url("../svg/dark/checkbox-unchecked.svg")
|
||||
no-repeat 2px 2px / auto 18.4px scroll;
|
||||
|
||||
&:has(input:checked) {
|
||||
background-image: url("../svg/dark/checkbox-checked.svg");
|
||||
}
|
||||
}
|
||||
input {
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover label,
|
||||
&:focus-visible label,
|
||||
&:focus-within label {
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
&.active label {
|
||||
color: var(--fg-inv0);
|
||||
opacity: 1;
|
||||
background-color: var(--accent);
|
||||
@media (forced-colors: active) {
|
||||
outline: 1px solid Highlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
237
css/_global.scss
Normal file
237
css/_global.scss
Normal file
@ -0,0 +1,237 @@
|
||||
/* mini-reset */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* anti-mini-reset */
|
||||
.actor-summary,
|
||||
.toot-content {
|
||||
* {
|
||||
all: revert;
|
||||
}
|
||||
|
||||
/* anti-anti-mini-reset */
|
||||
& > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
& > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
a {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
/* global rules */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--fg1);
|
||||
font-size: 16px;
|
||||
background: var(--bg2);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a,
|
||||
.main-welcome p label {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding: 0.3em 0.5em;
|
||||
line-height: 24px;
|
||||
font-family: inherit;
|
||||
vertical-align: middle;
|
||||
background: var(--bg-button);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.35);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
border: 1px solid ButtonText;
|
||||
}
|
||||
|
||||
&:not(:has(svg)) {
|
||||
padding: 0.7em 1em;
|
||||
}
|
||||
|
||||
.btn-icon,
|
||||
.btn-label {
|
||||
display: inline-block;
|
||||
line-height: 24px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.btn-label {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
.btn-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: var(--button-svg);
|
||||
@media (forced-colors: active) {
|
||||
fill: ButtonText;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-button-hover);
|
||||
.btn-icon {
|
||||
fill: var(--button-svg-hover);
|
||||
@media (forced-colors: active) {
|
||||
fill: ButtonText;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
color: var(--fg-button-focus);
|
||||
.btn-icon {
|
||||
fill: var(--button-svg-focus);
|
||||
@media (forced-colors: active) {
|
||||
fill: ButtonText;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
top: 0.15em;
|
||||
color: var(--fg-button-active);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
.btn-icon {
|
||||
fill: var(--button-svg-active);
|
||||
@media (forced-colors: active) {
|
||||
fill: ButtonText;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
top: 0;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.35;
|
||||
.btn-icon {
|
||||
fill: var(--button-svg);
|
||||
@media (forced-colors: active) {
|
||||
fill: GrayText;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.3em 0.5em;
|
||||
color: inherit;
|
||||
border: none;
|
||||
background-color: var(--bg-input);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
border: 1px solid ButtonText;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-input-hover);
|
||||
}
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
background-color: var(--bg-input-focus);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 6ch;
|
||||
text-align: center;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
details {
|
||||
summary {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
.summary-icon {
|
||||
min-width: 1.3rem;
|
||||
text-align: center;
|
||||
svg {
|
||||
height: 1.3em;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
}
|
||||
.summary-label {
|
||||
}
|
||||
}
|
||||
pre,
|
||||
textarea {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
resize: vertical;
|
||||
border: none;
|
||||
background: transparent;
|
||||
min-height: 20em;
|
||||
min-height: 15.5lh;
|
||||
|
||||
@supports (field-sizing: content) {
|
||||
min-height: 0;
|
||||
field-sizing: content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// focusable elements
|
||||
*:focus-visible,
|
||||
// .att-img-wrapper:hover,
|
||||
.tags-group button:focus-visible div,
|
||||
.toots-filter:has([type="checkbox"]:focus-visible) {
|
||||
text-decoration: none;
|
||||
outline: 2px solid var(--accent-light);
|
||||
outline-offset: 2px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.visually-hidden:not(:focus):not(:active) {
|
||||
@include visually-hidden();
|
||||
}
|
||||
|
||||
.nojs {
|
||||
margin: 5dvh 10dvw;
|
||||
padding: 2em;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #600;
|
||||
}
|
||||
203
css/_layout.scss
Normal file
203
css/_layout.scss
Normal file
@ -0,0 +1,203 @@
|
||||
html {
|
||||
width: 100dvw;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-section-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100dvh;
|
||||
max-width: 100dvw;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"actor filters header tags"
|
||||
"actor filters toots tags";
|
||||
grid-template-columns: min(25%, 600px) min(20%, 400px) 1fr min(20%, 400px);
|
||||
grid-template-rows: min-content 1fr;
|
||||
}
|
||||
|
||||
.actor {
|
||||
grid-area: actor;
|
||||
}
|
||||
.toots-header {
|
||||
grid-area: header;
|
||||
}
|
||||
.toots-filters {
|
||||
grid-area: filters;
|
||||
}
|
||||
.toots {
|
||||
grid-area: toots;
|
||||
}
|
||||
.toots-tags {
|
||||
grid-area: tags;
|
||||
}
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toots-header {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
background-color: var(--bg3);
|
||||
h2 {
|
||||
padding: 1rem 1rem 0;
|
||||
.order {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.nb {
|
||||
color: var(--accent-light);
|
||||
}
|
||||
.toggle-order {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.load-new {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.paging-options-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toots {
|
||||
background: var(--bg3);
|
||||
overflow: auto;
|
||||
container-type: inline-size;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
.paging {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
.direction-back,
|
||||
.direction-fwd {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.direction-back {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.direction-fwd {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// bottom paging
|
||||
.toots .paging {
|
||||
padding-bottom: 2rem;
|
||||
// -> align with padding-bottom on .toots-filters and .toots-tags (side panels)
|
||||
|
||||
@media (width < 400px) {
|
||||
.direction-back,
|
||||
.direction-fwd,
|
||||
.paging-options-toggle {
|
||||
.btn-label {
|
||||
@include visually-hidden();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// top paging
|
||||
.toots-header {
|
||||
container-type: inline-size;
|
||||
|
||||
input {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.paging {
|
||||
clear: both;
|
||||
flex-wrap: wrap;
|
||||
.paging-options,
|
||||
.paging-options-toggle {
|
||||
order: 2;
|
||||
user-select: none;
|
||||
}
|
||||
.direction-back {
|
||||
order: 1;
|
||||
}
|
||||
.direction-fwd {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.toggle-order {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@container (width < 675px) {
|
||||
// hide the paging options and show "options" button
|
||||
|
||||
.toggle-order {
|
||||
display: none;
|
||||
}
|
||||
.paging-options-toggle {
|
||||
display: block;
|
||||
}
|
||||
.paging .toggle-order {
|
||||
display: inline-block;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.paging .paging-options {
|
||||
font-size: 0.85em;
|
||||
|
||||
display: none;
|
||||
order: 4;
|
||||
flex-basis: calc(100% + 2rem);
|
||||
position: relative;
|
||||
margin: 0.5rem -1rem -1rem;
|
||||
text-align: center;
|
||||
background: var(--bg4);
|
||||
box-shadow: 0 0.75rem 0.75rem -1rem #000 inset;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: calc(50% - 0.5rem);
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0.5rem solid transparent;
|
||||
border-top: 0.4rem solid var(--bg3);
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
&::before {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.paging-options-inner {
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
}
|
||||
} // ! @container
|
||||
|
||||
@container (width < 550px) {
|
||||
.paging {
|
||||
.direction-back,
|
||||
.direction-fwd,
|
||||
.paging-options-toggle {
|
||||
.btn-label {
|
||||
@include visually-hidden();
|
||||
}
|
||||
}
|
||||
}
|
||||
} // ! @container
|
||||
}
|
||||
264
css/_menu.scss
Normal file
264
css/_menu.scss
Normal file
@ -0,0 +1,264 @@
|
||||
$menu-width: 75px;
|
||||
$icon-width: 35px;
|
||||
$panel-width: 400px;
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: var(--fg-inv1);
|
||||
background-color: var(--bg-inv2);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
color: buttonText;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
height: 100dvh;
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
list-style: none;
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: $menu-width;
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-size: 0.75em;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
&:focus-visible {
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: $icon-width;
|
||||
height: auto;
|
||||
margin: 5px auto 0;
|
||||
fill: var(--fg-inv0);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
fill: buttonText;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.visually-hidden {
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
&.menu-filters {
|
||||
&.filters-active {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
z-index: 1;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--accent-light2);
|
||||
@media (forced-colors: active) {
|
||||
background-color: Highlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.menu-new {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
color: Canvas;
|
||||
background: Highlight;
|
||||
span {
|
||||
color: CanvasText;
|
||||
}
|
||||
svg {
|
||||
fill: Canvas;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.panel-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background-color: var(--menu-backdrop);
|
||||
}
|
||||
|
||||
@media screen and (width < 1200px) {
|
||||
// toolbar becomes visible, positionned to the left side of the screen
|
||||
|
||||
.toots-header {
|
||||
z-index: 2;
|
||||
box-shadow: 0 -10px 10px 10px rgba(0, 0, 0, 0.5);
|
||||
.load-new {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.toots {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main-section-inner {
|
||||
grid-template-areas:
|
||||
"menu header"
|
||||
"menu toots";
|
||||
grid-template-columns: $menu-width 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toots .paging {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mobile-menu-panel {
|
||||
position: fixed;
|
||||
left: 0 - ($menu-width + $panel-width);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
width: min(#{$panel-width}, calc(100dvw - #{$menu-width}));
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: left 0.2s ease-out;
|
||||
transition-property: left, box-shadow;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
.panel-close {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
z-index: 1;
|
||||
color: var(--fg1);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
.btn-icon {
|
||||
fill: currentColor;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
color: var(--accent-light);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
color: buttonText;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: block;
|
||||
grid-area: menu;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.main-page.menu-open {
|
||||
.panel-backdrop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.menu-open-actor .actor,
|
||||
&.menu-open-filters .toots-filters,
|
||||
&.menu-open-tags .toots-tags {
|
||||
left: $menu-width;
|
||||
box-shadow: -1rem 0 1rem 1rem rgba(0, 0, 0, 0.5);
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition-duration: 0.35s;
|
||||
}
|
||||
}
|
||||
|
||||
&.menu-open-actor .menu-actor,
|
||||
&.menu-open-filters .menu-filters,
|
||||
&.menu-open-tags .menu-tags {
|
||||
color: var(--fg-inv0);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width < 500px) {
|
||||
// toolbar is repositioned to the bottom of the screen
|
||||
|
||||
.main-section-inner {
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"toots"
|
||||
"menu";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content 1fr min-content;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
box-shadow: none;
|
||||
ul {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
flex-grow: 1;
|
||||
}
|
||||
button {
|
||||
aspect-ratio: unset;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-panel {
|
||||
height: auto;
|
||||
bottom: $menu-width;
|
||||
width: 100dvw;
|
||||
left: -100dvw;
|
||||
box-shadow: none;
|
||||
}
|
||||
.main-page.menu-open {
|
||||
&.menu-open-actor .actor,
|
||||
&.menu-open-filters .toots-filters,
|
||||
&.menu-open-tags .toots-tags {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toots-tags {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.tags-title {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
13
css/_mixins.scss
Normal file
13
css/_mixins.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@mixin visually-hidden() {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin box-shadow-inner() {
|
||||
box-shadow: 0 0.1rem 0.2rem -0.2rem rgba(0, 0, 0, 0.5) inset;
|
||||
}
|
||||
85
css/_overlay.scss
Normal file
85
css/_overlay.scss
Normal file
@ -0,0 +1,85 @@
|
||||
.overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.overlay-content,
|
||||
.overlay-content img {
|
||||
max-width: calc(100dvw - 88px);
|
||||
max-height: calc(100dvh - 44px);
|
||||
}
|
||||
|
||||
.overlay-content img {
|
||||
box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.overlay-ui {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
svg {
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
fill: var(--overlay-icon);
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
svg {
|
||||
fill: var(--overlay-icon-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
.viewer-close {
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.viewer-next {
|
||||
right: 4px;
|
||||
top: calc(50% - 18px);
|
||||
}
|
||||
.viewer-prev {
|
||||
left: 4px;
|
||||
top: calc(50% - 18px);
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background-color: var(--overlay-backdrop);
|
||||
}
|
||||
}
|
||||
125
css/_tags.scss
Normal file
125
css/_tags.scss
Normal file
@ -0,0 +1,125 @@
|
||||
$display-wide: 340px;
|
||||
|
||||
.toots-tags {
|
||||
display: grid;
|
||||
grid-template-rows: min-content repeat(3, 1fr);
|
||||
height: 100vh;
|
||||
padding-bottom: 2rem;
|
||||
overflow: hidden;
|
||||
background-color: var(--bg4);
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.tags-title {
|
||||
padding: 1rem;
|
||||
}
|
||||
.tags-group {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
padding: 1rem 1rem 0;
|
||||
grid-template-rows: min-content 1fr;
|
||||
|
||||
ul {
|
||||
font-size: 0.85em;
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0.3rem 4px;
|
||||
}
|
||||
button {
|
||||
all: unset;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 0.25rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 0.2rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
.count {
|
||||
@container (width >= #{$display-wide}) {
|
||||
display: inline-block;
|
||||
min-width: 5ch;
|
||||
text-align: right;
|
||||
}
|
||||
color: var(--accent-dark);
|
||||
font-size: 0.85em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.name {
|
||||
flex-grow: 1;
|
||||
word-break: break-all;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.domain {
|
||||
margin-left: auto;
|
||||
padding-left: 0.5em;
|
||||
font-size: 0.85em;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.02em;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.name {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active button div {
|
||||
color: var(--fg-inv0);
|
||||
background-color: var(--accent);
|
||||
.count {
|
||||
color: var(--fg-inv0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-group-header {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@container (width >= #{$display-wide}) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.25rem 1rem;
|
||||
}
|
||||
h3 {
|
||||
.count {
|
||||
color: var(--accent-dark);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tags-group-filter {
|
||||
flex-grow: 1;
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
@container (width >= #{$display-wide}) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags-group-scroll {
|
||||
overflow: auto;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
479
css/_toot.scss
Normal file
479
css/_toot.scss
Normal file
@ -0,0 +1,479 @@
|
||||
$meta-visible: 100ch;
|
||||
|
||||
.toot {
|
||||
@container (width >= #{$meta-visible}) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header meta"
|
||||
"pretty meta"
|
||||
"infos meta"
|
||||
"raw meta";
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: min-content min-content 1fr min-content;
|
||||
}
|
||||
|
||||
background: var(--bg1);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-pretty {
|
||||
grid-area: pretty;
|
||||
padding: 1rem;
|
||||
|
||||
.fetch-boost-data {
|
||||
padding-top: 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-summary {
|
||||
padding: 0.5rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--fg-inv0);
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--accent-dark),
|
||||
var(--accent-dark) 10px,
|
||||
var(--accent) 10px,
|
||||
var(--accent) 20px
|
||||
);
|
||||
@include box-shadow-inner();
|
||||
border-radius: 0.5rem;
|
||||
@media (forced-colors: active) {
|
||||
outline: 1px solid Highlight;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-content {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
color: var(--fg0);
|
||||
line-height: 1.3;
|
||||
overflow-wrap: break-word;
|
||||
background-color: var(--bg0);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
|
||||
.toot-type-boost & {
|
||||
position: relative;
|
||||
overflow-wrap: break-word;
|
||||
background: radial-gradient(circle at 100% 100%, var(--bg2), var(--bg0));
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background: transparent url("../svg/light/type-boost.svg") no-repeat
|
||||
calc(100% - 1rem) calc(100% - 0.5rem) / auto 50% scroll;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.toot-content-inner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-visibility-mentioned & {
|
||||
background-color: var(--accent-light-bg);
|
||||
border: 2px dashed var(--accent-light2);
|
||||
}
|
||||
}
|
||||
|
||||
.toot-attachments {
|
||||
margin: 1rem 0 0;
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.att-description {
|
||||
font-size: 0.85em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.no-alt-text {
|
||||
.att-description {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
.desc-source {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
font-style: normal;
|
||||
word-break: break-all;
|
||||
line-height: 1.2;
|
||||
strong {
|
||||
color: var(--accent);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.att-img {
|
||||
& + .att-img {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.att-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.att-img-wrapper {
|
||||
width: clamp(75px, 7.5dvw, 150px);
|
||||
flex: 0 0 clamp(75px, 7.5dvw, 150px);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: background-color 0.35s ease-out;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:hover {
|
||||
transition-duration: 0.2s;
|
||||
background: var(--accent-light3);
|
||||
img {
|
||||
filter: grayscale(50%);
|
||||
@media (forced-colors: active) {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
font-size: 0.6em;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
|
||||
mix-blend-mode: multiply;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: filter 0.2s ease-out;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.att-description {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.no-alt-text .att-img-wrapper {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -0.5rem;
|
||||
bottom: -0.25rem;
|
||||
z-index: 2;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 10rem;
|
||||
background: #c00 url("../svg/light/no-alt-text.svg") no-repeat 50% 50% /
|
||||
contain scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.att-sound {
|
||||
padding: 1rem;
|
||||
background-color: var(--bg2);
|
||||
border-radius: 0.5rem;
|
||||
@include box-shadow-inner();
|
||||
|
||||
& + .att-sound {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
audio {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 0 1rem 0;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.att-video {
|
||||
& + .att-video {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
video {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 75dvh;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.att-description {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-meta {
|
||||
@container (width < #{$meta-visible}) {
|
||||
display: none;
|
||||
}
|
||||
grid-area: meta;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
padding-left: 0;
|
||||
dl {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
}
|
||||
dt {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex-basis: calc((100% - 2rem) / 3);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
padding: 1rem;
|
||||
background-color: var(--bg2);
|
||||
border-radius: 0.5rem;
|
||||
@include box-shadow-inner();
|
||||
|
||||
@media (forced-colors: active) {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
.toot-links {
|
||||
flex-grow: 1;
|
||||
a {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0.35rem 0 0;
|
||||
a {
|
||||
display: block;
|
||||
padding-left: 1.5rem;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: auto 1.2rem;
|
||||
word-break: break-all;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.toot-people li a {
|
||||
background-image: url("../svg/dark/person.svg");
|
||||
}
|
||||
.toot-hashtags li a {
|
||||
background-image: url("../svg/dark/hashtag.svg");
|
||||
}
|
||||
.toot-links li a {
|
||||
background-image: url("../svg/dark/link.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.toot-infos {
|
||||
grid-area: infos;
|
||||
margin: 0 1rem;
|
||||
padding: 1rem;
|
||||
font-size: 0.8em;
|
||||
opacity: 0.8;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
container-type: inline-size;
|
||||
background: var(--bg2);
|
||||
border-radius: 0.5rem;
|
||||
@include box-shadow-inner();
|
||||
|
||||
& > span {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.type,
|
||||
.visibility,
|
||||
.published,
|
||||
.link a {
|
||||
padding-left: 1.6em;
|
||||
background: transparent none no-repeat 0 0 / 1rem auto scroll;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.published {
|
||||
padding-left: 0;
|
||||
&::before {
|
||||
content: "-";
|
||||
margin: 0 1ch;
|
||||
}
|
||||
}
|
||||
|
||||
.published,
|
||||
.visibility {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.visibility {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.type {
|
||||
order: 1;
|
||||
}
|
||||
.author {
|
||||
order: 2;
|
||||
}
|
||||
.published {
|
||||
order: 4;
|
||||
}
|
||||
.visibility {
|
||||
order: 5;
|
||||
}
|
||||
.link {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.published {
|
||||
flex: 0 0 100%;
|
||||
margin-right: 0;
|
||||
padding-left: 1.6em;
|
||||
background-image: url("../svg/dark/calendar.svg");
|
||||
|
||||
@media (forced-colors: active) {
|
||||
padding-left: 0;
|
||||
}
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
.updated {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding-left: 0;
|
||||
padding-right: 1.6em;
|
||||
background-position: 100% 50%;
|
||||
background-image: url("../svg/dark/open-in-new.svg");
|
||||
@media (forced-colors: active) {
|
||||
padding-right: 0;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-raw {
|
||||
grid-area: raw;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0 1rem 2rem;
|
||||
details {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
summary {
|
||||
justify-content: flex-end;
|
||||
gap: 0.3rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.8em;
|
||||
text-align: right;
|
||||
opacity: 0.8;
|
||||
user-select: none;
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--bg2);
|
||||
}
|
||||
}
|
||||
.summary-icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
background-color: var(--bg2);
|
||||
@include box-shadow-inner();
|
||||
|
||||
@media (forced-colors: active) {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
|
||||
summary {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.details-content {
|
||||
padding: 1rem;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.toots-no-results {
|
||||
padding: 4rem 1rem;
|
||||
text-align: center;
|
||||
background: var(--bg1);
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
130
css/_welcome.scss
Normal file
130
css/_welcome.scss
Normal file
@ -0,0 +1,130 @@
|
||||
@keyframes movingStripes {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: calc(sqrt(8) * -1rem) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome {
|
||||
max-width: 80ch;
|
||||
height: 100dvh;
|
||||
margin: 0 auto;
|
||||
padding: 10dvh 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
line-height: 1.4;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.intro {
|
||||
h1 {
|
||||
margin-bottom: 7dvh;
|
||||
text-align: center;
|
||||
line-height: 1.1;
|
||||
.accronym {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 1em 0;
|
||||
label {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
@media (forced-colors: active) {
|
||||
color: ButtonText;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-loader {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
max-height: 70dvh;
|
||||
margin: 7dvh 0;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background: var(--bg0);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--bg0);
|
||||
outline: 2px solid var(--accent-light);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2em;
|
||||
background-color: var(--accent);
|
||||
color: var(--fg-inv0);
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--accent-dark),
|
||||
var(--accent-dark) 1rem,
|
||||
var(--accent) 1rem,
|
||||
var(--accent) 2rem
|
||||
);
|
||||
background-size: 200% auto;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: movingStripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
margin-top: auto;
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-page.highlight-drag {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--accent-dark),
|
||||
var(--accent-dark) 1rem,
|
||||
var(--accent) 1rem,
|
||||
var(--accent) 2rem
|
||||
);
|
||||
background-size: 200% auto;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: movingStripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
z-index: 0;
|
||||
|
||||
background: var(--bg2);
|
||||
}
|
||||
}
|
||||
1
css/main.css
Normal file
1
css/main.css
Normal file
File diff suppressed because one or more lines are too long
1
css/main.css.map
Normal file
1
css/main.css.map
Normal file
File diff suppressed because one or more lines are too long
12
css/main.scss
Normal file
12
css/main.scss
Normal file
@ -0,0 +1,12 @@
|
||||
@import "colors";
|
||||
@import "mixins";
|
||||
|
||||
@import "global";
|
||||
@import "layout";
|
||||
@import "welcome";
|
||||
@import "actor";
|
||||
@import "filters";
|
||||
@import "toot";
|
||||
@import "tags";
|
||||
@import "menu";
|
||||
@import "overlay";
|
||||
BIN
img/no-avatar.png
Normal file
BIN
img/no-avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
img/no-header.png
Normal file
BIN
img/no-header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
1601
index.html
Normal file
1601
index.html
Normal file
File diff suppressed because it is too large
Load Diff
5
js/alpinejs.min.js
vendored
Normal file
5
js/alpinejs.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
13
js/jszip.min.js
vendored
Normal file
13
js/jszip.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1214
js/main.js
Normal file
1214
js/main.js
Normal file
File diff suppressed because it is too large
Load Diff
BIN
screenshot.png
Normal file
BIN
screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
1
svg/dark/at.svg
Normal file
1
svg/dark/at.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 649 B |
1
svg/dark/calendar.svg
Normal file
1
svg/dark/calendar.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 1018 B |
18
svg/dark/checkbox-checked.svg
Normal file
18
svg/dark/checkbox-checked.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<?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>
|
||||
|
After Width: | Height: | Size: 711 B |
18
svg/dark/checkbox-unchecked.svg
Normal file
18
svg/dark/checkbox-unchecked.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<?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>
|
||||
|
After Width: | Height: | Size: 563 B |
1
svg/dark/hashtag.svg
Normal file
1
svg/dark/hashtag.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 567 B |
1
svg/dark/link.svg
Normal file
1
svg/dark/link.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 638 B |
1
svg/dark/open-in-new.svg
Normal file
1
svg/dark/open-in-new.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 529 B |
1
svg/dark/person.svg
Normal file
1
svg/dark/person.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 593 B |
1
svg/dark/type-boost.svg
Normal file
1
svg/dark/type-boost.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M284-506q14-28 29-54t33-52l-56-11-84 84 78 33Zm482-275q-70 2-149.5 41T472-636q-42 42-75 90t-49 90l114 113q42-16 90-49t90-75q65-65 104-144t41-149q0-4-1.5-8t-4.5-7q-3-3-7-4.5t-8-1.5ZM546-541q-23-23-23-56.5t23-56.5q23-23 57-23t57 23q23 23 23 56.5T660-541q-23 23-57 23t-57-23Zm-34 262 33 79 84-84-11-56q-26 18-52 32.5T512-279Zm351-534q8 110-36 214.5T688-399l20 99q4 20-2 39t-20 33L560-102q-15 15-36 11.5T495-114l-61-143-171-171-143-61q-20-8-24-29t11-36l126-126q14-14 33.5-20t39.5-2l99 20q95-95 199.5-139T819-857q8 1 16 4.5t14 9.5q6 6 9.5 14t4.5 16ZM157-321q35-35 85.5-35.5T328-322q35 35 34.5 85.5T327-151q-48 48-113.5 57T82-76q9-66 18-131.5T157-321Zm57 56q-17 17-23.5 41T180-175q25-4 49-10t41-23q12-12 13-29t-11-29q-12-12-29-11.5T214-265Z"/></svg>
|
||||
|
After Width: | Height: | Size: 860 B |
1
svg/dark/type-post.svg
Normal file
1
svg/dark/type-post.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 660 B |
1
svg/dark/visibility-followers.svg
Normal file
1
svg/dark/visibility-followers.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 500 B |
1
svg/dark/visibility-mentioned.svg
Normal file
1
svg/dark/visibility-mentioned.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 649 B |
1
svg/dark/visibility-public.svg
Normal file
1
svg/dark/visibility-public.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 603 B |
1
svg/dark/visibility-unlisted.svg
Normal file
1
svg/dark/visibility-unlisted.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
|
||||
|
After Width: | Height: | Size: 528 B |
1
svg/light/menu-filters.svg
Normal file
1
svg/light/menu-filters.svg
Normal 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="M440-240q-17 0-28.5-11.5T400-280q0-17 11.5-28.5T440-320h80q17 0 28.5 11.5T560-280q0 17-11.5 28.5T520-240h-80ZM280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280ZM160-640q-17 0-28.5-11.5T120-680q0-17 11.5-28.5T160-720h640q17 0 28.5 11.5T840-680q0 17-11.5 28.5T800-640H160Z"/></svg>
|
||||
|
After Width: | Height: | Size: 455 B |
1
svg/light/menu-new.svg
Normal file
1
svg/light/menu-new.svg
Normal 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="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h207q16 0 30.5 6t25.5 17l57 57h360q17 0 28.5 11.5T880-680q0 17-11.5 28.5T840-640H447l-80-80H160v480l79-263q8-26 29.5-41.5T316-560h516q41 0 64.5 32.5T909-457l-72 240q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm-84-262v-218 218Zm84 262 72-240-72 240Z"/></svg>
|
||||
|
After Width: | Height: | Size: 448 B |
1
svg/light/menu-profile.svg
Normal file
1
svg/light/menu-profile.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 593 B |
1
svg/light/menu-tags.svg
Normal file
1
svg/light/menu-tags.svg
Normal 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="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h440q19 0 36 8.5t28 23.5l180 240q16 21 16 48t-16 48L664-192q-11 15-28 23.5t-36 8.5H160Zm0-80h440l180-240-180-240H160v480Zm310-240Z"/></svg>
|
||||
|
After Width: | Height: | Size: 315 B |
1
svg/light/no-alt-text.svg
Normal file
1
svg/light/no-alt-text.svg
Normal 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-120q-33 0-56.5-23.5T400-200q0-33 23.5-56.5T480-280q33 0 56.5 23.5T560-200q0 33-23.5 56.5T480-120Zm0-240q-33 0-56.5-23.5T400-440v-320q0-33 23.5-56.5T480-840q33 0 56.5 23.5T560-760v320q0 33-23.5 56.5T480-360Z"/></svg>
|
||||
|
After Width: | Height: | Size: 337 B |
1
svg/light/type-boost.svg
Normal file
1
svg/light/type-boost.svg
Normal 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="M284-506q14-28 29-54t33-52l-56-11-84 84 78 33Zm482-275q-70 2-149.5 41T472-636q-42 42-75 90t-49 90l114 113q42-16 90-49t90-75q65-65 104-144t41-149q0-4-1.5-8t-4.5-7q-3-3-7-4.5t-8-1.5ZM546-541q-23-23-23-56.5t23-56.5q23-23 57-23t57 23q23 23 23 56.5T660-541q-23 23-57 23t-57-23Zm-34 262 33 79 84-84-11-56q-26 18-52 32.5T512-279Zm351-534q8 110-36 214.5T688-399l20 99q4 20-2 39t-20 33L560-102q-15 15-36 11.5T495-114l-61-143-171-171-143-61q-20-8-24-29t11-36l126-126q14-14 33.5-20t39.5-2l99 20q95-95 199.5-139T819-857q8 1 16 4.5t14 9.5q6 6 9.5 14t4.5 16ZM157-321q35-35 85.5-35.5T328-322q35 35 34.5 85.5T327-151q-48 48-113.5 57T82-76q9-66 18-131.5T157-321Zm57 56q-17 17-23.5 41T180-175q25-4 49-10t41-23q12-12 13-29t-11-29q-12-12-29-11.5T214-265Z"/></svg>
|
||||
|
After Width: | Height: | Size: 860 B |
Loading…
x
Reference in New Issue
Block a user