forked from andyburke/autonomous.contact
625 lines
14 KiB
CSS
625 lines
14 KiB
CSS
/* Dark mode default */
|
|
:root {
|
|
--base-color: #234;
|
|
|
|
--bg: hsl(from var(--base-color) h 20% 10%);
|
|
--bg-darker: hsl(from var(--base-color) h 20% 7.5%);
|
|
--bg-lighter: hsl(from var(--base-color) h 20% 12.5%);
|
|
--bg-card: hsl(from var(--base-color) h 20% 15%);
|
|
--bg-card-hover: hsl(from var(--base-color) h 20% 16%);
|
|
|
|
--text-primary: hsl(from var(--base-color) h 5% 95%);
|
|
--text-secondary: hsl(from var(--base-color) h 5% 85%);
|
|
--text-muted: hsl(from var(--base-color) h 5% 75%);
|
|
|
|
--accent: hsl(from var(--base-color) h clamp(0, calc(s + 10), 100) clamp(0, calc(l + 20), 100));
|
|
--accent-dark: hsl(from var(--base-color) h clamp(0, calc(s + 5), 100) clamp(0, calc(l - 5), 100));
|
|
|
|
--border-subtle: hsl(from var(--base-color) h 50% 90%);
|
|
--border-normal: hsl(from var(--base-color) h 50% 80%);
|
|
--border-highlight: hsl(from var(--base-color) h 50% 25%);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
|
|
|
|
--blur-radius: 8px;
|
|
|
|
--icon-scale: 1;
|
|
--border-radius: 8px;
|
|
--border-radius-lg: 12px;
|
|
|
|
--space-xxs: 0.25rem;
|
|
--space-xs: 0.5rem;
|
|
--space-sm: 0.75rem;
|
|
--space-md: 1rem;
|
|
--space-lg: 1.5rem;
|
|
--space-xl: 2rem;
|
|
--space-xxl: 3rem;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg: hsl(from var(--base-color) h 20% 98%);
|
|
--bg-darker: hsl(from var(--base-color) h 20% 96%);
|
|
--bg-lighter: hsl(from var(--base-color) h 20% 99%);
|
|
--bg-card: hsl(from var(--base-color) h 20% 100%);
|
|
--bg-card-hover: hsl(from var(--base-color) h 20% 98%);
|
|
|
|
--text-primary: hsl(from var(--base-color) h 5% 5%);
|
|
--text-secondary: hsl(from var(--base-color) h 5% 30%);
|
|
--text-muted: hsl(from var(--base-color) h 5% 50%);
|
|
|
|
--border-subtle: hsl(from var(--base-color) h 50% 85%);
|
|
--border-normal: hsl(from var(--base-color) h 50% 70%);
|
|
--border-highlight: hsl(from var(--base-color) h 50% 35%);
|
|
}
|
|
}
|
|
|
|
/* Remove default margin in favour of better control in authored CSS */
|
|
body,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p,
|
|
figure,
|
|
blockquote,
|
|
dl,
|
|
dd {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
button,
|
|
input,
|
|
label {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
a:not([class]) {
|
|
text-decoration-skip-ink: auto;
|
|
color: currentColor;
|
|
}
|
|
|
|
img,
|
|
picture {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
details>summary {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 2rem;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
details>summary:before {
|
|
content: "";
|
|
border-width: 0.6rem;
|
|
border-style: solid;
|
|
border-color: transparent transparent transparent rgba(from var(--border-subtle) r g b / 0.9);
|
|
position: absolute;
|
|
top: 0.15rem;
|
|
left: 0;
|
|
transform: rotate(0);
|
|
transform-origin: 0.3rem 50%;
|
|
transition: 0.25s transform ease;
|
|
}
|
|
|
|
details[open]>summary:before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
details>summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
form input,
|
|
form textarea {
|
|
width: 100%;
|
|
color: inherit;
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid rgba(128, 128, 128, 0.2);
|
|
resize: none;
|
|
background: rgba(0, 0, 0, 0.01);
|
|
padding: 0.5rem;
|
|
font-size: large;
|
|
}
|
|
|
|
/* Make sure textareas without a rows attribute are not tiny */
|
|
textarea:not([rows]) {
|
|
min-height: 10em;
|
|
}
|
|
|
|
/* Anything that has been anchored to should have extra scroll margin */
|
|
:target {
|
|
scroll-margin-block: 5ex;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
color: var(--text-primary);
|
|
background-color: var(--bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
#background-container {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
main {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
}
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
main {
|
|
grid-template-columns: auto;
|
|
}
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
textarea:focus {
|
|
border-color: rgb(from var(--border-highlight) r g b / 60%);
|
|
outline: 0;
|
|
-webkit-box-shadow:
|
|
inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
|
0 0 2px rgb(from var(--border-highlight) r g b / 60%);
|
|
box-shadow:
|
|
inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
|
0 0 2px rgb(from var(--border-highlight) r g b / 60%);
|
|
}
|
|
|
|
.avatar-container {
|
|
display: block;
|
|
margin: 0 auto 1rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-container.inline {
|
|
display: inline-block;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.avatar-container.medium {
|
|
width: 4.5rem;
|
|
height: 4.5rem;
|
|
}
|
|
|
|
.avatar-container.large {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
}
|
|
|
|
.avatar-container.x-large {
|
|
width: 9rem;
|
|
height: 9rem;
|
|
}
|
|
|
|
.avatar-container.xx-large {
|
|
width: 12rem;
|
|
height: 12rem;
|
|
}
|
|
|
|
.avatar-container img {
|
|
height: 100%;
|
|
width: 100%;
|
|
max-width: none;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.resizable {
|
|
resize: horizontal;
|
|
overflow: hidden;
|
|
border-right: 4px solid #444;
|
|
}
|
|
|
|
.mockup {
|
|
position: relative;
|
|
}
|
|
|
|
.mockup::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: repeating-linear-gradient(-55deg,
|
|
rgba(0, 0, 0, 0.25) 0px,
|
|
rgba(0, 0, 0, 0.25) 20px,
|
|
rgba(255, 177, 1, 0.25) 20px,
|
|
rgba(255, 177, 1, 0.25) 40px);
|
|
}
|
|
|
|
.collapsed {
|
|
height: 0;
|
|
}
|
|
|
|
input[collapse-toggle] {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
label:has(input[collapse-toggle]) {
|
|
display: block;
|
|
max-width: fit-content;
|
|
cursor: pointer;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--border-radius);
|
|
padding: 0.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
input[collapse-toggle]+.collapsible,
|
|
label:has(input[collapse-toggle])+.collapsible {
|
|
transition: all 0.33s;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
input[collapse-toggle]:checked+.collapsible,
|
|
label:has(input[collapse-toggle]:checked)+.collapsible {
|
|
height: 100%;
|
|
}
|
|
|
|
form div {
|
|
position: relative;
|
|
display: flex;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
form label.placeholder {
|
|
position: absolute;
|
|
top: 0;
|
|
font-size: large;
|
|
margin: 10px;
|
|
padding: 0 10px;
|
|
-webkit-transition:
|
|
top 0.2s ease-in-out,
|
|
font-size 0.2s ease-in-out;
|
|
transition:
|
|
top 0.2s ease-in-out,
|
|
font-size 0.2s ease-in-out;
|
|
}
|
|
|
|
form input:focus~label.placeholder,
|
|
form input:valid~label.placeholder {
|
|
top: -1.6rem;
|
|
font-size: small;
|
|
border: 1px solid rgba(128, 128, 128, 0.2);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
form input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
form button {
|
|
width: 100%;
|
|
padding: 20px;
|
|
border: 1px solid var(--border-subtle);
|
|
font-size: 20px;
|
|
background-color: var(--bg);
|
|
color: var(--text-primary);
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
form button.primary {
|
|
border-color: var(--border-highlight);
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
button {
|
|
background: inherit;
|
|
color: inherit;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--text-primary);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
}
|
|
|
|
button.primary {
|
|
border: 1px solid var(--accent);
|
|
}
|
|
|
|
[data-requires-permission] {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
height: 0;
|
|
}
|
|
|
|
body[data-perms*="self.read"] [data-requires-permission="self.read"],
|
|
body[data-perms*="self.write"] [data-requires-permission="self.write"],
|
|
body[data-perms*="channels.create"] [data-requires-permission="channels.create"],
|
|
body[data-perms*="channels.read"] [data-requires-permission="channels.read"],
|
|
body[data-perms*="channels.write"] [data-requires-permission="channels.write"],
|
|
body[data-perms*="events.create.blurb"] [data-requires-permission="events.create.blurb"],
|
|
body[data-perms*="events.read.blurb"] [data-requires-permission="events.read.blurb"],
|
|
body[data-perms*="events.write.blurb"] [data-requires-permission="events.write.blurb"],
|
|
body[data-perms*="events.create.chat"] [data-requires-permission="events.create.chat"],
|
|
body[data-perms*="events.read.chat"] [data-requires-permission="events.read.chat"],
|
|
body[data-perms*="events.write.chat"] [data-requires-permission="events.write.chat"],
|
|
body[data-perms*="events.create.essay"] [data-requires-permission="events.create.essay"],
|
|
body[data-perms*="events.read.essay"] [data-requires-permission="events.read.essay"],
|
|
body[data-perms*="events.write.essay"] [data-requires-permission="events.write.essay"],
|
|
body[data-perms*="events.create.post"] [data-requires-permission="events.create.post"],
|
|
body[data-perms*="events.read.post"] [data-requires-permission="events.read.post"],
|
|
body[data-perms*="events.write.post"] [data-requires-permission="events.write.post"],
|
|
body[data-perms*="users.read"] [data-requires-permission="users.read"],
|
|
body[data-perms*="users.write"] [data-requires-permission="users.write"],
|
|
body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"] {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
height: unset;
|
|
}
|
|
|
|
.audio-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
overflow: hidden;
|
|
font-size: small;
|
|
padding: 0.25rem;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
|
|
white-space-collapse: discard;
|
|
}
|
|
|
|
.audio-container audio {
|
|
width: 100%;
|
|
margin-bottom: -5px;
|
|
}
|
|
|
|
.audio-container .audio-player-display-container {
|
|
width: 100%;
|
|
height: 3rem;
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: start;
|
|
}
|
|
|
|
.audio-container .audio-player-display-container canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--accent);
|
|
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
|
}
|
|
|
|
.audio-container .enhanced-audio-player-container {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.audio-container[data-audio-player] .enhanced-audio-player-container {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
display: block;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .blank {
|
|
width: 100%;
|
|
max-width: 100px;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .progress-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
text-align: center;
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .progress-container label[for="progress"] {
|
|
display: block;
|
|
margin-top: -0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .progress-container .time-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .progress-container .slider-container {
|
|
width: 80%;
|
|
padding: 0 1rem;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .progress-container .slider-container input[name="progress"] {
|
|
width: 100%;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .buttons-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .blank {
|
|
align-content: center;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .volume {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 100px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
.audio-container .audio-controls-container .blank {
|
|
width: auto;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .volume {
|
|
max-width: 50px;
|
|
}
|
|
}
|
|
|
|
.audio-container .audio-controls-container input[type="range"] {
|
|
--c: var(--accent);
|
|
/* active color */
|
|
--g: 4px;
|
|
/* the gap */
|
|
--l: 2px;
|
|
/* line thickness*/
|
|
--s: 15px;
|
|
/* thumb size*/
|
|
|
|
width: 100%;
|
|
height: var(--s);
|
|
/* needed for Firefox*/
|
|
--_c: color-mix(in srgb, var(--c), #000 var(--p, 0%));
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.audio-container .audio-controls-container input[type="range"]:focus-visible,
|
|
.audio-container .audio-controls-container input[type="range"]:hover {
|
|
--p: 25%;
|
|
}
|
|
|
|
.audio-container .audio-controls-container input[type="range"]:active,
|
|
.audio-container .audio-controls-container input[type="range"]:focus-visible {
|
|
--_b: var(--s);
|
|
}
|
|
|
|
/* chromium */
|
|
.audio-container .audio-controls-container input[type="range"]::-webkit-slider-thumb {
|
|
height: var(--s);
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
|
|
border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 0 1 / calc(50% - var(--l) / 2) 100vw/0 calc(100vw + var(--g));
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
/* Firefox */
|
|
.audio-container .audio-controls-container input[type="range"]::-moz-range-thumb {
|
|
height: var(--s);
|
|
width: var(--s);
|
|
background: none;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
|
|
border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 0 1 / calc(50% - var(--l) / 2) 100vw/0 calc(100vw + var(--g));
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
@supports not (color: color-mix(in srgb, red, red)) {
|
|
.audio-container .audio-controls-container input[type="range"] {
|
|
--_c: var(--c);
|
|
}
|
|
}
|
|
|
|
.audio-container .audio-controls-container .volume label[for="volume"] {
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .audio-control {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .audio-control .icon.play {
|
|
opacity: 1;
|
|
display: block;
|
|
}
|
|
|
|
.audio-container .audio-controls-container .audio-control .icon.pause {
|
|
opacity: 0;
|
|
display: none;
|
|
}
|
|
|
|
.audio-container[data-playing] .audio-controls-container .audio-control .icon.play {
|
|
opacity: 0;
|
|
display: none;
|
|
}
|
|
|
|
.audio-container[data-playing] .audio-controls-container .audio-control .icon.pause {
|
|
opacity: 1;
|
|
display: block;
|
|
}
|
|
|
|
/* === GLOW EFECTO === from: https://codepen.io/andrewuru/pen/Byjdgrb */
|
|
.glow {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
|
|
hsla(var(--accent), 100%, 60%, 0.4),
|
|
transparent 70%);
|
|
mix-blend-mode: screen;
|
|
pointer-events: none;
|
|
filter: blur(calc(2 * var(--blur-radius)));
|
|
}
|
|
|
|
.html-from-markdown {
|
|
padding: 2em;
|
|
}
|
|
|
|
.inline {
|
|
display: inline-block !important;
|
|
}
|