775 lines
14 KiB
CSS
775 lines
14 KiB
CSS
@import url("/static/css/normalize.css");
|
|
|
|
@font-face {
|
|
font-family: "Cadman";
|
|
src: url("/static/fonts/Cadman_Roman.woff2");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Cadman";
|
|
src: url("/static/fonts/Cadman_Bold.woff2");;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Cadman";
|
|
src: url("/static/fonts/Cadman_Italic.woff2");
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Cadman";
|
|
src: url("/static/fonts/Cadman_BoldItalic.woff2");
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible Mono";
|
|
src: url("/static/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf");
|
|
font-weight: 125 950;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Atkinson Hyperlegible Mono";
|
|
src: url("/static/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf");
|
|
font-weight: 125 950;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "site-title";
|
|
src: url("/static/fonts/ChicagoFLF.woff2");
|
|
}
|
|
|
|
:root {
|
|
--base-padding: 6px;
|
|
--border-radius: 3px;
|
|
--border-thickness: 1px;
|
|
--wrapper-side-margin: 36px;
|
|
|
|
/* colors */
|
|
--bg-color-primary: #c1ceb1;
|
|
--bg-color-secondary: #aeb8a1;
|
|
--bg-color-tertiary: #797976;
|
|
--bg-color-contrast: #bfb1ce;
|
|
|
|
--font-color-main: black;
|
|
--font-color-anti: white;
|
|
--font-color-link: #c11c1c;
|
|
--font-color-link-visited: hsl(from var(--font-color-link) h calc(s * 0.5) calc(l * 0.7));
|
|
|
|
--critical-color: #f73030;
|
|
--warn-color: #dfdf61;
|
|
--infobox-color: #97b3ec;
|
|
|
|
--button-color-primary: #b1cecd;
|
|
}
|
|
|
|
body {
|
|
--small-padding: calc(var(--base-padding) / 2);
|
|
--medium-padding: calc(var(--base-padding) * 2);
|
|
--big-padding: calc(var(--base-padding) * 3);
|
|
--huge-padding: calc(var(--base-padding) * 4);
|
|
|
|
--code-bg-color: hsl(from var(--bg-color-primary) h calc(s * 0.2) calc(l * 0.2));
|
|
|
|
background-color: var(--bg-color-tertiary);
|
|
font-family: Cadman;
|
|
color: var(--font-color-main);
|
|
margin: var(--big-padding) var(--wrapper-side-margin);
|
|
}
|
|
|
|
button, .linkbutton, input[type="submit"] {
|
|
--main-color: var(--button-color-primary);
|
|
--font-color: var(--font-color-main);
|
|
--border-color: hsl(from var(--main-color) h calc(s * 1.3) 25);
|
|
--hover-color: hsl(from var(--main-color) h s calc(l * 1.05));
|
|
--active-color: hsl(from var(--main-color) h s calc(l * 0.8));
|
|
--disabled-color: hsl(from var(--main-color) h calc(s * 0.5) l);
|
|
--bottom-color: hsl(from var(--main-color) h s calc(l * 0.7));
|
|
--top-color: hsl(from var(--main-color) h s calc(l * 1.2));
|
|
--top-color2: hsl(from var(--main-color) h s calc(l * 1.1));
|
|
--inset-color: #fff7;
|
|
/* position: relative; */
|
|
/* display: inline-block; */
|
|
padding: var(--small-padding) var(--big-padding);
|
|
margin: var(--base-padding) 0px;
|
|
border-radius: var(--border-radius);
|
|
border: solid var(--border-thickness) var(--border-color);
|
|
background: linear-gradient(var(--top-color) 0%, var(--top-color2) 25%, var(--main-color) 26%, var(--main-color) 50%, var(--bottom-color) 100%);
|
|
box-shadow: inset 0px 2px 5px 3px var(--inset-color);
|
|
color: var(--font-color);
|
|
text-decoration: none;
|
|
user-select: none;
|
|
|
|
cursor: pointer;
|
|
|
|
line-height: normal;
|
|
display: inline flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&.minimal {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
&.critical {
|
|
--main-color: var(--critical-color);
|
|
--font-color: var(--font-color-anti);
|
|
}
|
|
|
|
&.warn {
|
|
--main-color: var(--warn-color);
|
|
}
|
|
|
|
&.rss {
|
|
--main-color: #fba668;
|
|
}
|
|
|
|
&.alt {
|
|
--main-color: var(--bg-color-contrast);
|
|
}
|
|
|
|
&:hover {
|
|
background: linear-gradient(var(--top-color) 0%, var(--top-color2) 25%, var(--hover-color) 26%, var(--hover-color) 80%, var(--bottom-color) 100%);
|
|
}
|
|
|
|
&:is(:active, .active, [aria-selected='true']) {
|
|
background: linear-gradient(var(--active-color) 0%, var(--active-color) 50%, var(--main-color) 100%);
|
|
}
|
|
|
|
&:disabled {
|
|
background: var(--disabled-color);
|
|
--inset-color: #fff3;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.tab-button {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
|
|
&[aria-selected='true'] {
|
|
padding-top: calc(var(--base-padding) * 1.5);
|
|
}
|
|
}
|
|
|
|
.tab-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.tab-bar {
|
|
display: flex;
|
|
gap: var(--base-padding);
|
|
|
|
&> * {
|
|
margin-top: auto;
|
|
position: relative;
|
|
bottom: -2px;
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
.babycode-editor {
|
|
width: 100%;
|
|
height: 150px;
|
|
}
|
|
|
|
.post-edit-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
input[type="text"], input[type="password"], textarea, select {
|
|
--main-color: hsl(from var(--bg-color-primary) h s calc(l + 10));
|
|
--active-color: hsl(from var(--main-color) h s calc(l + 5));
|
|
--border-color: hsl(from var(--main-color) h calc(s * 1.3) 25);
|
|
background-color: var(--main-color);
|
|
border-radius: var(--border-radius);
|
|
border: solid var(--border-thickness) var(--border-color);
|
|
resize: vertical;
|
|
|
|
padding: var(--small-padding) var(--medium-padding);
|
|
margin: var(--base-padding) 0px;
|
|
|
|
&:focus {
|
|
background-color: var(--active-color);
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
font-family: 'Atkinson Hyperlegible Mono'
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
:where(a:link) {
|
|
color: var(--font-color-link);
|
|
}
|
|
:where(a:visited) {
|
|
color: var(--font-color-link-visited);
|
|
}
|
|
|
|
a.site-title {
|
|
font-family: site-title;
|
|
font-size: 3em;
|
|
text-decoration: none;
|
|
color: var(--font-color-main);
|
|
}
|
|
|
|
#header {
|
|
background-color: var(--bg-color-primary);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
|
|
&>.site-title {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
&>ul {
|
|
margin-top: var(--base-padding);
|
|
margin-bottom: var(--base-padding);
|
|
}
|
|
}
|
|
|
|
.plank {
|
|
--main-color: var(--bg-color-primary);
|
|
--lighter-color: hsl(from var(--main-color) h s calc(l*1.1));
|
|
--darker-color: hsl(from var(--main-color) h s calc(l*0.9));
|
|
--border-color: hsl(from var(--main-color) h s 90);
|
|
--rotation: 180deg;
|
|
padding: var(--medium-padding) var(--huge-padding);
|
|
|
|
background: linear-gradient(var(--rotation), var(--lighter-color) 0%, var(--main-color) 30%, var(--main-color) 70%, var(--darker-color) 100%);
|
|
background-color: var(--main-color);
|
|
|
|
border: 2px groove var(--border-color);
|
|
|
|
&:not(.no-shadow) {
|
|
box-shadow: 0px 6px 3px 0px #0004;
|
|
}
|
|
|
|
&.minimal {
|
|
padding: var(--small-padding) var(--big-padding);
|
|
}
|
|
|
|
&:not(.even){
|
|
margin-bottom: var(--small-padding);
|
|
}
|
|
|
|
&.top {
|
|
border-top-left-radius: var(--border-radius);
|
|
border-top-right-radius: var(--border-radius);
|
|
|
|
&:not(.even){
|
|
margin-bottom: var(--medium-padding);
|
|
}
|
|
}
|
|
|
|
&.bottom {
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-bottom-right-radius: var(--border-radius);
|
|
|
|
&:not(.even){
|
|
margin-top: var(--medium-padding);
|
|
}
|
|
}
|
|
}
|
|
|
|
.info {
|
|
margin: 0;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
form.horizontal {
|
|
display: flex;
|
|
gap: var(--base-padding);
|
|
align-items: center;
|
|
|
|
&.wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&> fieldset {
|
|
display: flex;
|
|
gap: var(--base-padding);
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
border-radius: var(--border-radius);
|
|
margin: 0;
|
|
}
|
|
|
|
legend {
|
|
padding: var(--small-padding);
|
|
border-radius: var(--border-radius);
|
|
border: 2px groove var(--border-color);
|
|
margin-top: var(--small-padding);
|
|
|
|
.plank:not(.secondary-bg) > & {
|
|
background-color: var(--bg-color-secondary);
|
|
}
|
|
.plank.secondary-bg > & {
|
|
background-color: var(--bg-color-primary);
|
|
}
|
|
}
|
|
|
|
ul.horizontal, ol.horizontal {
|
|
display: inline flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: var(--base-padding);
|
|
|
|
& li:not(.visible) {
|
|
list-style-type: none;
|
|
}
|
|
|
|
& li.visible {
|
|
margin-left: var(--big-padding);
|
|
}
|
|
|
|
&.wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&.bullet li::before {
|
|
content: '\2022';
|
|
}
|
|
|
|
& li > button, li > .linkbutton {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.primary-bg {
|
|
--main-color: var(--bg-color-primary);
|
|
background-color: var(--bg-color-primary);
|
|
}
|
|
|
|
.secondary-bg {
|
|
--main-color: var(--bg-color-secondary);
|
|
--rotation: 0deg;
|
|
}
|
|
|
|
.tertiary-bg {
|
|
--main-color: var(--bg-color-tertiary);
|
|
--rotation: 0deg;
|
|
}
|
|
|
|
.contrast-bg {
|
|
--main-color: var(--bg-color-contrast);
|
|
}
|
|
|
|
.motd {
|
|
display: flex;
|
|
gap: var(--base-padding);
|
|
}
|
|
|
|
.contain-svg {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
&.horizontal {
|
|
flex-direction: row;
|
|
gap: var(--base-padding);
|
|
}
|
|
}
|
|
|
|
.infobox {
|
|
--main-color: var(--infobox-color);
|
|
justify-content: start;
|
|
|
|
&.critical {
|
|
--main-color: hsl(from var(--critical-color) h 50% calc(l * 0.7));
|
|
color: var(--font-color-anti);
|
|
}
|
|
|
|
&.warn {
|
|
--main-color: hsl(from var(--warn-color) h 50% calc(l * 1.2));
|
|
}
|
|
}
|
|
|
|
.pager {
|
|
display: flex;
|
|
gap: var(--base-padding);
|
|
align-items: center;
|
|
}
|
|
|
|
.button-row {
|
|
display: flex;
|
|
gap: var(--base-padding);
|
|
align-items: center;
|
|
justify-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
&> * {
|
|
aspect-ratio: 1;
|
|
min-height: 32px;
|
|
width: auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
|
|
.title-container {
|
|
display: flex;
|
|
gap: var(--base-padding);
|
|
justify-content: start;
|
|
align-items: end;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.motd-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 75%
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.topic-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--base-padding);
|
|
}
|
|
|
|
.settings-grid {
|
|
display: grid;
|
|
gap: var(--base-padding);
|
|
--grid-item-base-width: 600px;
|
|
--grid-item-max-width: calc((100% - var(--grid-item-base-width)) / 2);
|
|
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-base-width), var(--grid-item-max-width)), 1fr));
|
|
|
|
&> * {
|
|
height: fit-content;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.thread-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--base-padding);
|
|
width: fit-content;
|
|
}
|
|
|
|
.actions-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.flex-last {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.flex-grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.post {
|
|
padding: var(--base-padding);
|
|
|
|
display: grid;
|
|
grid-template-columns: min(230px, 20vw) 1fr;
|
|
}
|
|
|
|
.userpage-usercard {
|
|
display: grid;
|
|
grid-template-columns: min(300px, 30vw) 1fr;
|
|
}
|
|
|
|
.usercard-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
top: var(--big-padding);
|
|
position: sticky;
|
|
gap: var(--base-padding);
|
|
}
|
|
|
|
.avatar {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.post-content {
|
|
display: grid;
|
|
grid-template-rows: min-content 1fr min-content;
|
|
&> * {
|
|
min-width: 0;
|
|
min-height: 54px;
|
|
}
|
|
}
|
|
|
|
.post-signature {
|
|
margin-top: auto;
|
|
border-top: 2px dotted gray;
|
|
}
|
|
|
|
.post-content-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.badge-button {
|
|
min-width: 88px;
|
|
min-height: 31px;
|
|
max-width: 88px;
|
|
max-height: 31px;
|
|
}
|
|
|
|
.badges-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--small-padding);
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&.nocenter {
|
|
justify-content: start;
|
|
}
|
|
}
|
|
|
|
.usercard-rest {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: inherit;
|
|
}
|
|
|
|
.post-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--base-padding);
|
|
}
|
|
|
|
#new-post-toast {
|
|
position: fixed;
|
|
bottom: 80px;
|
|
right: 80px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--big-padding);
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.notification-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--base-padding);
|
|
justify-content: center;
|
|
}
|
|
|
|
.babycode-editor-controls {
|
|
display: flex;
|
|
gap: var(--base-padding);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
form.full-width {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
&> textarea, &> select, &> input[type="text"], &> input[type="password"] {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* babycode tags */
|
|
.inline-code {
|
|
background-color: var(--code-bg-color);
|
|
color: var(--font-color-anti);
|
|
padding: var(--base-padding);
|
|
border-radius: var(--border-radius);
|
|
display: inline-block;
|
|
}
|
|
|
|
.babycode-big {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.babycode-small {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.babycode-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.babycode-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.post-image {
|
|
max-height: 400px;
|
|
max-width: 400px;
|
|
width: auto;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.code-block-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
|
|
&> button {
|
|
align-self: start;
|
|
}
|
|
}
|
|
|
|
code, kbd {
|
|
font-family: "Atkinson Hyperlegible Mono";
|
|
}
|
|
|
|
pre {
|
|
font-family: unset;
|
|
margin: 0;
|
|
margin-bottom: var(--base-padding);
|
|
}
|
|
|
|
pre code {
|
|
display: block;
|
|
background-color: var(--code-bg-color);
|
|
color: var(--font-color-anti);
|
|
padding: var(--base-padding);
|
|
overflow: scroll;
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
p {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
ul, ol {
|
|
margin: 0.5em 0;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
blockquote {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.emoji {
|
|
max-width: 15px;
|
|
max-height: 15px;
|
|
}
|
|
|
|
a.mention {
|
|
--mention-color: var(--bg-color-contrast);
|
|
--hover-color: hsl(from var(--mention-color) h calc(s * 0.7) calc(l * 1.1));
|
|
|
|
display: inline-block;
|
|
border-radius: var(--border-radius);
|
|
padding: var(--base-padding);
|
|
background-color: var(--mention-color);
|
|
color: black;
|
|
border: 1px dashed;
|
|
|
|
&:hover {
|
|
background-color: var(--hover-color);
|
|
}
|
|
|
|
&.me {
|
|
--mention-color: hsl(from var(--bg-color-contrast) calc(h + 90) s l);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.settings-grid {
|
|
--grid-item-base-width: 400px;
|
|
}
|
|
|
|
.mobile-fill-flex {
|
|
width: 100%;
|
|
}
|
|
|
|
.post, .userpage-usercard {
|
|
grid-template-columns: unset;
|
|
grid-template-rows: min-content 1fr;
|
|
}
|
|
|
|
.avatar {
|
|
max-width: 180px;
|
|
max-height: 180px;
|
|
min-width: 140px;
|
|
min-height: 140px;
|
|
}
|
|
|
|
.usercard-inner {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.thread-title-counter {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--base-padding);
|
|
}
|
|
|
|
.title-container {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#new-post-toast {
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.post-image {
|
|
max-width: min(75vw, 400px);
|
|
max-height: 50vh;
|
|
}
|
|
}
|