Fix #5303: Stop styling commandline

Other third party themes should follow this recipe using
nesting and a :not
This commit is contained in:
Oliver Blanthorn 2025-12-03 12:51:04 +01:00
parent 22ab6b4f65
commit 749dd59903
No known key found for this signature in database
GPG key ID: 2BB8C36BB504BFF3

View file

@ -11,14 +11,16 @@
--serif-font: EconomistSerif, Plantin, Garamond, serif;
}
html {
html:not(.TridactylCommandline) {
height: 100vh;
width: 100vw;
overflow: hidden;
font-family: var(--serif-font);
}
body {
:not(.TridactylCommandline) {
body {
display: block;
height: 100%;
width: 100%;
@ -29,67 +31,66 @@ body {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: auto;
}
}
body > main {
body > main {
display: contents;
}
}
body > header,
body > footer,
figure, section, article, .notice,
h1, h2, h3, h4, h5, h6,
img, video, table {
body > header,
body > footer,
figure, section, article, .notice,
h1, h2, h3, h4, h5, h6,
img, video, table {
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
}
h1, h2, h3, h4, h5, h6 { break-after: avoid-column; }
h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { break-before: avoid-column; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-column; }
h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { break-before: avoid-column; }
img, video, table, pre, figure {
img, video, table, pre, figure {
display: block;
scrollbar-width: thin;
}
}
img, video, table {
img, video, table {
max-width: 100%;
}
}
table, pre, figure, img {
table, pre, figure, img {
width: 100%;
max-height: calc(100vh - 6rem);
overflow-y: auto;
}
}
body > header {
body > header {
display: block;
width: 100%;
border-bottom: 2px solid var(--accent);
margin-bottom: 2rem;
}
}
body > footer {
body > footer {
display: block;
margin-top: 4rem;
border-top: 2px solid var(--accent);
background-color: var(--accent-bg);
}
}
body > header h1,
body > header p {
body > header h1,
body > header p {
margin: 0.5rem auto;
}
}
body > header h1 { max-width: 100%; }
body > header h1 { max-width: 100%; }
h1 { font-size: 2rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.7rem; }
h1 { font-size: 2rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.7rem; }
h2, h3 { margin-top: 0.5rem; }
h2, h3 { margin-top: 0.5rem; }
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 600px) {
html, body {
height: auto;
display: block;
@ -107,4 +108,5 @@ h2, h3 { margin-top: 0.5rem; }
body > header {
margin-bottom: 0;
}
}
}