$default-color: hsl(323,100%,65%);
%sans { font-family: "Alegreya Sans", "Open Sans", sans-serif; }
%serif { font-family: Alegreya, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, Junicode, serif; }
%teletype { font-family: "Inconsolata LGC", Inconsolata, monospace; font-size: 12pt !important; }
// @function tone($pct, $alpha: 0) { @return adjust-color($color, $lightness: $pct, $alpha: $alpha) }
@function tone($pct, $alpha: 0) { @return hsla(var(--hue), 100%, 65% + $pct, 1 + $alpha) }
@function vtone($pct, $vary, $alpha: 0) { @return hsla(calc(var(--hue) + $vary), 100%, 65% + $pct, 1 + $alpha) }
@function otone($pct, $alpha: 0) { @return hsla(calc(var(--hue) + var(--co)), 100%, 65% + $pct, 1 + $alpha) }
:root { --hue: 323; --co: 0; }
body {
@extend %sans;
background-color: tone(-55%);
color: tone(25%);
font-size: 14pt;
margin: 0;
padding: 0;
}
::selection {
color: tone(-60%);
background-color: tone(-10%);
}
::placeholder {
color: tone(0,-0.3);
font-style: italic;
}
a[href] {
color: tone(10%);
text-decoration-color: tone(10%,-0.5);
text-decoration-skip-ink: all;
text-decoration-thickness: 1px;
text-underline-offset: 0.1em;
&:hover, &:focus {
color: white;
text-shadow: 0 0 15px tone(20%);
text-decoration-color: tone(10%,-0.1);
outline: none;
}
}
a[href^="//"],
a[href^="http://"],
a[href^="https://"] { // external link
&:hover::after {
color: black;
background-color: white;
}
&::after {
content: "↗";
display: inline-block;
color: black;
margin-left: 4pt;
background-color: tone(10%);
padding: 0 4px;
text-shadow: none;
padding-right: 5px;
vertical-align: baseline;
font-size: 80%;
}
}
%content {
width: 8in;
margin: auto;
}
%glow {
box-shadow: 0 0 20px tone(0%,-0.8);
}
.button, a[href].button { // 🙄
@extend %sans;
font-size: 14pt;
box-sizing: border-box;
padding: 0.1in 0.2in;
border: 1px solid black;
color: otone(25%);
text-shadow: 1px 1px black;
text-decoration: none;
text-align: center;
cursor: default;
user-select: none;
-webkit-user-drag: none;
-webkit-app-region: no-drag;
--icon: url(/s/heart.webp);
background-image: linear-gradient(to bottom,
otone(-47%),
otone(-50%) 15%,
otone(-50%) 75%,
otone(-53%)
);
&:hover, &:focus {
@extend %glow;
outline: none;
color: tone(-55%);
text-shadow: none;
background: linear-gradient(to bottom,
otone(-27%),
otone(-30%) 15%,
otone(-30%) 75%,
otone(-35%)
);
}
&:active {
color: black;
padding-bottom: calc(0.1in - 2px);
padding-top: calc(0.1in + 2px);
background: linear-gradient(to top,
otone(-25%),
otone(-30%) 15%,
otone(-30%) 75%,
otone(-35%)
);
}
}
button { @extend .button;
&:first-of-type {
@extend .button;
color: white;
box-shadow: inset 0 1px otone(-25%),
inset 0 -1px otone(-50%);
background: linear-gradient(to bottom,
otone(-35%),
otone(-40%) 15%,
otone(-40%) 75%,
otone(-45%)
);
&:hover, &:focus {
box-shadow: inset 0 1px otone(-15%),
inset 0 -1px otone(-40%);
}
&:active {
box-shadow: inset 0 1px otone(-50%),
inset 0 -1px otone(-25%);
background: linear-gradient(to top,
otone(-30%),
otone(-35%) 15%,
otone(-35%) 75%,
otone(-40%)
);
}
}
//&:hover { font-weight: bold; }
}
$grad-ui-focus: linear-gradient(to bottom,
tone(-50%),
tone(-35%)
);
input[type='text'], input[type='number'], input[type='password'], textarea, select {
@extend %serif;
padding: 0.08in 0.1in;
box-sizing: border-box;
border: 1px solid black;
background: linear-gradient(to bottom, tone(-55%), tone(-40%));
font-size: 16pt;
color: tone(25%);
box-shadow: inset 0 0 20px -3px tone(-55%);
&:focus {
color: white;
border-image: linear-gradient(to bottom, tone(-10%), tone(-30%)) 1 / 1px;
background: $grad-ui-focus;
outline: none;
@extend %glow;
}
}
select { width: 100%; }
@mixin glass {
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
background-color: tone(-53%, -0.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
background-color: tone(-53%, -0.1);
}
}
h1 { margin-top: 0 }
header {
position: fixed;
height: min-content;
width: 100vw;
margin: 0;
padding: 0;
border-bottom: 1px solid black;
z-index: 1;
@include glass;
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
> div {
position: relative;
max-width: 10in;
margin: auto;
display: grid;
grid-template-columns: 1fr max-content;
grid-template-rows: 1fr;
h1 {
all: unset;
display: block;
font-size: 1.4em;
padding: 0.25in 0;
text-shadow: 2px 2px 1px black;
grid-column: 1/2; grid-row: 1/2;
}
nav {
all: unset;
display: flex;
justify-content: flex-end;
align-items: center;
grid-column: 2/3; grid-row: 1/2;
.ident {
color: tone(-20%);
margin-left: 0.2em;
border-left: 1px solid tone(-40%);
padding-left: 0.5em;
}
> a[href] {
display: block;
padding: 0.25in 0.10in;
//padding: calc((25% - 1em)/2) 0.15in;
&, &::after { transition: 0.3s; }
text-shadow: 1px 1px 1px black;
&:hover{
transform: scale(1.2);
}
}
> a[href].bell {
content: url(/s/bell.svg);
height: 2em;
padding: 0.125in 0.10in;
filter: drop-shadow(1px 1px 3px tone(-5%));
&:hover {
filter: drop-shadow(1px 1px 3px tone(-5%))
drop-shadow(0 0 10px tone(-5%));
}
}
}
}
}
main {
@extend %content;
display: block;
position: relative;
min-height: calc(100vh - 1.1in);
margin-top: 0;
margin-bottom: 0;
padding: 0 0.4in;
padding-top: 1.1in;
padding-bottom: 0.1in;
background-color: tone(-45%,-0.3);
border: {
left: 1px solid black;
right: 1px solid black;
}
}
.id {
color: tone(25%,-0.4);
> .nym {
font-weight: bold;
color: tone(25%);
}
> .xid {
color: tone(20%,-0.1);
font-size: 80%;
vertical-align: text-top;
}
}
body.profile {
#rel {
menu {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(max-content);
grid-gap: 0.1in;
> .opt {
padding: 0.1in;
border-radius: 5px;
border: 1px solid transparent;
&.on {
background-color: tone(-30%, -0.7);
box-shadow: 0 0 10px tone(-30%);
border-color: tone(-20%);
}
> button, > p { display: block; }
> p { text-align: center; font-size: 80%; margin: 0; margin-top: 0.1in; }
> button {
margin: auto;
}
&:last-child:nth-child(2n-1) {
grid-column: 1/3;
}
}
}
}
}
div.profile {
padding: 0.1in;
position: relative;
display: grid;
margin-bottom: 0.4in;
grid-template-columns: 2fr 1fr;
grid-template-rows: max-content 1fr;
width: 100%;
> .banner {
grid-column: 1 / 3;
grid-row: 1 / 2;
display: grid;
grid-template-columns: 1.1in 1fr;
grid-template-rows: max-content 1fr;
> .avatar {
display: block;
width: 1in; height: 1in;
object-fit: cover;
grid-column: 1 / 2;
grid-row: 1 / 3;
border: 1px solid black;
background-color: tone(-57%);
}
> .id {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
> .bio {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
}
> .stats {
grid-column: 3 / 4;
grid-row: 1 / 3;
display: flex;
flex-flow: column;
> * { flex-grow: 1; }
table {
width: 100%;
td, th { text-align: center; }
}
}
> form.actions {
grid-column: 1 / 3; grid-row: 2 / 3;
padding-top: 0.075in;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
> div {
display: flex;
flex-wrap: wrap;
flex-flow: row;
justify-content: center;
align-items: center;
margin-bottom: 0.07in;
> a[href] {
display: block;
margin: 0.025in 0.05in;
}
}
}
}
.epithet {
display: inline-block;
background: tone(20%);
color: tone(-45%);
text-shadow: 0 0 3px tone(-30%, -0.4);
border-radius: 2px;
padding: 6px;
padding-top: 2px;
padding-bottom: 4px;
font-size: 80%;
vertical-align: top;
font-weight: 300;
letter-spacing: 0.5px;
margin: 0 5pt;
// transform: scale(80%) translateX(-10pt); // cheating!
}
%box {
margin: auto;
border: 1px solid tone(-55%);
border-bottom: 3px solid black;
box-shadow: 0 0 1px black;
border-image: linear-gradient(to bottom,
tone(-40%),
tone(-52%) 10%,
tone(-55%) 90%,
tone(-60%)
) 1 / 1px;
background: linear-gradient(to bottom,
tone(-58%),
tone(-55%) 10%,
tone(-50%) 80%,
tone(-45%)
);
// outline: 1px solid black;
}
//body.error .message {
.message {
@extend %box;
display: block;
width: 4in;
margin:auto;
padding: 0.5in;
text-align: center;
menu:first-of-type { margin-top: 0.3in; }
img.icon { width: 1.875in; height: 1.875in; }
}
body.login {
form.auth-select {
@extend %box;
width: 3in;
padding: 0.4in;
p { text-align: center; }
menu {
.button {
display: block;
width: 100%;
& + button, & + a[href] { border-top: none; }
}
}
}
div.login {
@extend %box;
width: 4in;
padding: 0.4in;
> .msg {
text-align: center;
padding: 0.3in;
}
> .msg:first-child { padding-top: 0; }
> .user {
width: max-content; margin: auto;
background: tone(-20%,-0.3);
border: 1px solid black;
color: tone(-50%);
padding: 0.1in;
> img {
display: block;
width: 1in; height: 1in;
margin: auto;
border: 1px solid black;
background-color: tone(-50%);
}
> .name { @extend %serif; text-align: center; font-size: 130%; font-weight: bold; margin-top: 0.08in; }
}
>form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1.2em max-content max-content;
grid-gap: 5px;
> label, input, button { display: block; }
> label { grid-column: 1 / 3; grid-row: 1/2; font-weight: bold }
> input, textarea { grid-column: 1 / 3; grid-row: 2/3; }
> button { grid-column: 2 / 3; grid-row: 3/4; }
> a { grid-column: 1 / 2; grid-row: 3/4; }
> textarea { @extend %teletype; font-size: 80% !important; height: 1.5in; }
}
}
}
form.compose {
@extend %box;
display: grid;
grid-template-columns: 1.1in 2fr min-content 1fr 1.5fr;
grid-template-rows: 1fr min-content;
grid-gap: 2px;
padding: 0.1in;
> img { grid-column: 1/2; grid-row: 1/3; width: 1in; height: 1in;}
> textarea {
grid-column: 2/6; grid-row: 1/2; height: 3in;
resize: vertical;
margin-bottom: 0.08in;
}
> input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
> button[value="post"] { grid-column: 5/6; grid-row: 2/3; }
> button[value="attach"] { grid-column: 4/5; grid-row: 2/3; }
a.help[href] { margin-right: 0.05in }
}
a.help[href] {
display: block;
text-align: center;
padding: 0.09in 0.2in;
background: tone(-40%);
border: 1px solid black;
font-weight: bold;
text-decoration: none;
cursor: help;
max-width: 0.1in;
}
input.acl {
@extend %teletype;
background: url(/s/padlock.svg) no-repeat;
background-size: 20pt;
background-position: 0.05in 50%;
&:focus {
background: url(/s/padlock.svg) no-repeat, $grad-ui-focus;
background-size: 20pt;
background-position: 0.05in 50%;
};
padding-left: 0.40in;
}
.modal {
@extend %box;
position: fixed;
display: none;
left: 0; right: 0; bottom: 0; top: 0;
max-width: 7in;
margin: 1in auto;
padding: 0.2in 0.3in;
&:target { display: block; }
box-shadow: 0 0 4in 5in rgba(0,0,0,0.5);
z-index: 2;
> div {
height: 100%;
overflow-y: scroll;
>p:first-of-type { margin-top: 0; }
}
>a[href="#0"] { // close link
cursor: default;
display: block;
position: absolute;
top: -0.3in;
right: 0.1in;
margin: 0.1in;
padding: 0.1in;
&:hover { font-weight: bold; }
}
p { text-align: justify; }
}
code {
@extend %teletype;
background: tone(-55%);
// border: 1px inset tone(-20%);
padding: 2px 6px;
font-size: 1.5ex !important;
letter-spacing: 1.3px;
padding-bottom: 3px;
border-radius: 4px;
vertical-align: baseline;
box-shadow: 1px 1px 1px black;
}
pre {
@extend %teletype;
white-space: pre-wrap;
> code:only-child {
display: block;
padding: 0.1in;
}
}
div.thread {
margin-left: 0.3in;
& + article.post { margin-top: 0.3in; }
}
a[href].username {
>.nym { font-weight: bold; }
color: tone(0%,-0.4);
> span.nym { color: tone(10%) }
> span.handle { color: tone(-5%) }
&:hover {
> span.nym { color: white; }
> span.handle { color: tone(15%) }
}
}
article.post {
@extend %box;
display: grid;
margin: unset;
grid-template-columns: 1in 1fr max-content max-content;
grid-template-rows: min-content max-content;
margin-bottom: 0.1in;
transition: 0.2s ease-out;
>.avatar {
grid-column: 1/2; grid-row: 1/2;
background: linear-gradient(to bottom, tone(-53%), tone(-57%));
img {
display: block; width: 1in; height: 1in; margin:0;
border-right: 1px solid tone(-65%);
object-fit: cover;
}
}
>a[href].username {
display: block;
grid-column: 1/3;
grid-row: 2/3;
text-align: left;
text-decoration: none;
padding: 0.1in;
padding-left: 0.15in;
background: linear-gradient(to right, tone(-55%), transparent);
}
>.content {
grid-column: 2/5; grid-row: 1/2;
> small {
@extend %sans;
display: block;
margin-top: -0.1in;
font-size: 75%;
font-style: italic;
opacity: 80%;
}
padding: 0.2in;
@extend %serif;
font-size: 110%;
text-align: justify;
color: tone(25%);
}
> a[href].permalink {
display: block;
grid-column: 4/5; grid-row: 2/3;
font-size: 90%;
text-align: right;
padding: 0.1in;
padding-right: 0.15in;
font-style: italic;
background: linear-gradient(to left, tone(-55%,-0.5), transparent);
}
div.stats {
display: flex;
grid-column: 3/4; grid-row: 2/3;
justify-content: center;
> .like, > .rt {
margin: 0.5em 0.3em;
padding-left: 1.3em;
background-size: 1.1em;
background-repeat: no-repeat;
min-width: 0.3em;
&:focus {
outline: none;
opacity: 0.9 !important;
filter: drop-shadow(0 0 7px tone(-10%));
}
&:empty {
transition: 0.3s;
opacity: 0.0001; // qutebrowser won't show hints if opacity=0 :(
&:hover, &:focus { opacity: 0.6 !important; }
}
}
> .like { background-image: url(/s/heart.webp); }
> .rt { background-image: url(/s/retweet.webp); }
}
// used for keyboard navigation
&.live-selected {
//margin-left: 0.4in; margin-right: -0.4in;
box-shadow: 0 0 0 1px tone(15%), 0 0 1in tone(5%, -0.5);
transform: scale(1.05) translateX(0.1in);
}
}
article.post:hover div.stats { > .like, > .rt { &:empty {opacity: 0.3;} } }
a[href].rawlink {
@extend %teletype;
}
body.doc main {
@extend %serif;
text-align: justify;
li { margin-top: 0.05in; }
li:first-child { margin-top: 0; }
h1, h2, h3, h4, h5, h6 {
background: linear-gradient(to right, tone(-50%), transparent);
margin-left: -0.4in;
padding-left: 0.2in;
text-shadow: 0 2px 0 black;
}
}
%navmenu, body.profile main > menu {
margin-left: -0.25in;
grid-column: 1/2; grid-row: 1/2;
background: linear-gradient(to bottom, tone(-45%),tone(-55%));
border: 1px solid black;
padding: 0.1in;
> a[href] {
display: block;
text-align: left;
}
> a[href] + a[href] {
border-top: none;
}
hr {
border: none;
}
}
menu { all: unset; display: block; }
body.conf main {
display: grid;
grid-template-columns: 2in 1fr;
grid-template-rows: max-content 1fr;
div.context {
border-radius: 4px;
text-align: center;
background: tone(-53%);
box-shadow: 0 1px 0 1px tone(-55%);
border: 1px solid tone(-20%);
font-style: italic;
padding: 0.1in;
}
> menu { @extend %navmenu; }
> .panel {
grid-column: 2/3; grid-row: 1/3;
padding-left: 0.15in;
> h1 {
padding-bottom: 0.1in;
margin-bottom: 0.1in;
margin-left: -0.15in;
padding-left: 0.15in;
padding-top: 0.12in;
background: linear-gradient(to right, tone(-50%), tone(-50%,-0.7));
border: 1px solid tone(-55%);
border-left: none;
text-shadow: 1px 1px 0 black;
}
}
img.avatar.big {
display:block;
width: 70%;
height: auto;
margin: 0.2in auto;
border: 1px solid tone(-45%);
border-top-color: tone(-40%);
border-bottom: 2px solid tone(-60%);
object-fit: cover;
border-radius: 3px;
}
}
hr {
border: none;
border-top: 1px solid tone(-30%);
border-bottom: 1px solid tone(-55%);
}
form {
margin: 0.15in 0;
> p:first-child { margin-top: 0; }
> p:last-child { margin-bottom: 0; }
.elem {
margin: 0.1in 0;
> label,summary { display:block; font-weight: bold; padding: 0.03in 0; }
> .txtbox {
@extend %serif;
box-sizing: border-box;
padding: 0.08in 0.1in;
border: 1px solid black;
background: tone(-55%);
user-select: all;
}
> input, textarea, .txtbox {
display: block;
width: 100%;
}
> textarea { resize: vertical; min-height: 2in; }
}
body.conf & { > .button { margin-left: 50%; width: 50%; } }
.elem-group {
display: flex;
flex-flow: row;
> .elem {
flex-shrink: 1;
flex-grow: 1;
margin-left: 0.1in;
&:first-child { margin-left: 0; }
}
> .small { flex-shrink: 5; }
}
}
menu.choice {
display: flex;
&.horizontal {
flex-flow: row-reverse wrap;
justify-content: space-evenly;
}
&.vertical {
flex-flow: column;
margin-left: 50%;
}
&.vertical-float {
flex-flow: column;
float: right;
width: 40%;
margin-left: 0.1in;
}
> .button, a[href] {
flex-basis: min-content;
flex-grow: 1;
display: block; margin: 2px;
}
}
.check-panel {
display: flex;
flex-flow: row wrap;
> label {
display: block;
box-sizing: border-box;
width: calc(50% - 0.2in);
padding: 0.1in 0.1in;
margin: 0.1in 0.1in;
background: tone(-45%);
border: 1px solid black;
text-shadow: 1px 1px black;
flex-grow: 1;
&:focus-within {
border: 1px inset tone(-10%);
background: tone(-50%);
}
}
input[type="checkbox"] {
-webkit-appearance: none;
padding: 0.5em;
background: tone(-35%);
border: 1px outset tone(-50%);
vertical-align: bottom;
box-shadow: 0 1px tone(-50%);
&:checked {
border: 1px inset tone(-35%);
background: tone(-60%);
box-shadow: 0 1px tone(-40%);
}
&:focus {
border-color: tone(10%);
outline: none;
}
}
}
@keyframes flashup {
0% { opacity: 0; transform: scale(0.8); }
10% { opacity: 1; transform: scale(1.1); }
80% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.9) translateY(-0.12in); display: none; }
}
.flashmsg {
display: block;
position: fixed;
top: 1.3in;
max-width: 3in;
padding: 0.4in 0.2in;
left: 0; right: 0;
text-align: center;
text-shadow: 0 0 15px tone(10%);
margin: auto;
background: linear-gradient(to bottom, tone(-49%), tone(-43%,-0.1));
border: 1px solid tone(0%);
border-radius: 3px;
box-shadow: 0 0 50px tone(-55%);
color: white;
animation: ease forwards flashup;
//cubic-bezier(0.4, 0.63, 0.6, 0.31)
animation-duration: 2.5s;
}
form.action-bar {
display: flex;
> * {
flex-grow: 1;
flex-basis: 0;
margin-left: 0.1in;
}
> *:first-child {
margin-left: 0;
}
}
.color-picker {
/* implemented using javascript, alas */
@extend %box;
label { text-shadow: 1px 1px black; }
padding: 0.1in;
}
ul.user-list {
list-style-type: none;
margin: 0.5em 0;
padding: 0;
box-shadow: 0 0 10px -3px black inset;
border: 1px solid tone(-50%);
li {
background-color: tone(-20%, -0.8);
padding: 0.5em;
.regalia { margin-right: 0.3em; vertical-align: bottom; }
&:nth-child(odd) {
background-color: tone(-30%, -0.8);
}
}
}
ul.remarks {
margin: 0; padding: 0;
list-style-type: none;
li {
border-top: 1px solid otone(-22%);
border-bottom: 1px solid otone(-53%);
box-shadow: 0 1px 1px otone(-57%);
text-shadow: 1px 1px otone(-60%);
border-radius: 3px;
background: otone(-25%,-0.4);
color: otone(25%);
text-align: center;
padding: 0.3em 0;
margin: 0.2em 0.1em;
cursor: default;
}
}
.button, a[href] {
.neg { --co: 30 }
.pos { --co: -30 }
}
.pick-list {
display: flex;
flex-flow: row wrap;
padding: 0.1in;
background-color: tone(-50%);
border: 1px solid tone(-53%);
border-top: 1px solid tone(-57%);
border-bottom: 1px solid tone(-45%);
margin: 0.3em 0;
details & { border: none; background: none; }
> input[type="radio"], > input[type="checkbox"] {
display: none;
&+label {
display: block;
flex-grow: 1;
padding: 0.08in 0.05in;
margin: 0.03in;
flex-basis: 15%;
cursor: pointer;
transition: 0.3s;
text-align: center;
border: 1px solid transparent;
text-shadow: 1px 1px black;
color: otone(15%);
border-radius: 4px;
&:nth-child(7n+1) { --co: -10 } //silly hack
&:nth-child(7n+2) { --co: -35 }
&:nth-child(7n+3) { --co: -20 }
&:nth-child(7n+4) { --co: -50 }
&:nth-child(7n+5) { --co: -40 }
&:nth-child(7n+6) { --co: -5 }
&:nth-child(7n+7) { --co: -25 }
}
&+label:hover {
background-color: otone(-35%);
color: white;
}
&:checked+label {
border-top: 1px solid otone(-10%);
border-bottom: 1px solid otone(-50%);
background: linear-gradient(to bottom, otone(-25%,-0.2), otone(-28%,-0.3) 35%, otone(-30%,-0.5));
color: white;
box-shadow: 0 0 0 1px tone(-60%);
&:hover {
border-top: 1px solid otone(10%);
border-bottom: 1px solid otone(-60%);
font-weight: bold;
}
}
}
}
details {
//border: 1px solid tone(-60%);
border-top: 1px solid tone(-40%);
border-bottom: 1px solid tone(-60%);
border-radius: 3px;
padding: 0.05in 0.3in;
margin: 0.08in 0;
// background: linear-gradient(to top, tone(-55%), tone(-50%));
background: tone(-50%);
& > summary {
display: block;
margin: 0 -0.25in;
cursor: pointer;
user-select: none;
text-decoration: underline;
text-decoration-color: tone(10%,-0.5);
text-underline-offset: 0.1em;
text-shadow: 1px 1px black;
font-weight: normal;
&:hover {
color: white;
text-decoration-color: tone(10%,-0.1);
}
&::marker { display: none; }
&::-webkit-details-marker { display: none; }
&::before {
display: inline-block;
content: '➤';
padding: 0 0.3em;
color: tone(-30%);
transition: 0.4s;
}
}
&[open] {
// background: linear-gradient(to bottom, tone(-55%), tone(-50%));
border-bottom: 1px solid tone(-40%);
border-top: 1px solid tone(-60%);
> summary {
font-weight: bold;
&::before {
transform: rotate(90deg) scale(1.1);
color: tone(-20%);
text-shadow: 0 0 8px tone(-30%);
}
}
}
}
div.lede {
display: grid;
grid-template-columns: 1fr min-content;
grid-template-rows: 1.5em 1fr;
padding: 0.1in 0.3in;
margin: 0 -0.2in;
margin-top: 0.2in;
& + & { margin-top: 0; }
border-radius: 3px;
background: linear-gradient(to bottom, tone(-40%,-0.5), transparent);
border-top: 1px solid tone(-5%,-0.7);
> .promo {
grid-row: 1/2; grid-column: 1/2;
font-style: italic;
font-size: 90%;
color: tone(-10%);
> img {
vertical-align: middle;
margin-right: 0.4em;
width: 1em; height: 1em;
}
}
> a[href].del {
grid-row: 1/2; grid-column: 2/3;
text-decoration: none;
}
> .post {
grid-row: 2/3; grid-column: 1/3;
}
}
body.notices {
form { text-align: center; }
div.notice {
padding: 0.15in;
background: linear-gradient(to bottom, tone(10%, -0.9), transparent);
border: 1px solid tone(-60%);
& + div.notice { border-top: none; }
&.rt, &.like, &.reply, &.follow { &::before {
display: inline-block;
width: 1em; height: 1em;
margin-right: 1ex;
background-size: contain;
vertical-align: bottom;
content: ""; // 🙄
}}
&.rt::before { background-image: url(/s/retweet.webp); }
&.like::before { background-image: url(/s/heart.webp); }
&.reply::before { background-image: url(/s/reply.webp); }
&.follow::before { background-image: url(/s/follow.webp); }
> .action {
display: inline-block;
color: tone(5%);
> .id {
display: inline-block;
> img {
width: 1em; height: 1em;
vertical-align: middle;
margin-right: 0.5ex;
}
}
}
> a[href].quote {
&::before { content: "“"; }
&::after { content: "”"; }
font-style: italic; color: tone(20%);
text-decoration: none;
}
> article.post {
margin: 0.1in 0.2in;
margin-left: 0.4in;
}
}
}
.media.manager main, .media.gallery {
display: grid;
grid-template-columns: 2in 1fr;
grid-template-rows: max-content 1fr;
menu {
@extend %navmenu;
}
.gallery, .dir {
background: tone(-55%,-0.5);
border: 1px solid tone(-60%);
padding: 0.2in;
display: flex;
flex-wrap: wrap;
}
.gallery {
grid-row: 2/3; grid-column: 1/3;
margin-top: 0.1in;
flex-flow: row;
padding: 0 0.1in;
> a[href].thumb {
background: linear-gradient(to top, tone(10%,-0.8), tone(10%,-0.94) 30%, transparent);
border-radius: 4px;
border-bottom: 1px solid tone(15%, -0.5);
display: block;
width: 1.5in;
padding: 0.1in;
height: max-content;
margin: 0.1in;
> img {
width: 1.5in; height: 1.5in;
object-fit: contain;
object-position: center;
outline: none;
}
> .caption {
text-align: center;
font-size: 80%;
text-shadow: 1px 1px 0 black;
}
}
}
.dir {
grid-row: 1/2; grid-column: 2/3;
margin-left: 0.1in;
flex-flow: column;
flex-grow: 1;
> a[href].file {
padding: 0.1in 0.15in;
text-decoration: none;
height: max-content;
background-image: url(/s/file.webp); //TODO different icons for different mime types
background-repeat: no-repeat;
background-position: left;
padding-left: 0.4in;
> .label {
text-decoration: underline;
text-decoration-width: 1px;
text-underline-offset: 0.1em;
text-decoration-color: tone(10%,-0.5);
}
&:hover > .label {
}
> .mime {
font-style: italic;
opacity: 60%;
margin-left: 0.5ex;
}
}
}
}
.media.upload form {
padding: 0.1in 0.2in;
@extend %box;
}
body.media div.viewer {
@extend %box;
padding: 0.2in;
margin-bottom: 0.2in;
&.img {
> img {
display: block;
max-width: 100%;
margin: auto;
}
.caption {
margin-top: 0.2in;
text-align: center;
&:empty {margin: 0;}
}
}
&.text {
> .desc {
border-bottom: 1px solid tone(-5%);
box-shadow: 0 2px 0 black;
margin-bottom: 0.1in;
padding-bottom: 0.1in;
}
> article {
font-size: 90%;
padding: 0 0.2in;
max-height: calc(100vh - 3in);
overflow-y: scroll;
text-align: justify;
}
}
}