treehouse/static/css/main.css

905 lines
17 KiB
CSS
Raw Normal View History

2023-08-27 15:27:42 +02:00
/* Color scheme. */
:root {
2023-08-27 19:40:47 +02:00
/* naturally */
--liquidex-brand-blue: #058ef0;
2024-03-07 21:21:02 +01:00
/* but also: */
--liquidex-brand-red: #eb134a;
--liquidex-brand-yellow: #ffc31f;
--liquidex-brand-green: #06ca4a;
2023-08-27 19:40:47 +02:00
--text-color-light: #55423e;
--link-color-light: #004ec8;
--link-color-visited-light: #6c2380;
2023-08-27 15:27:42 +02:00
--background-color: rgb(255, 253, 246);
2023-08-28 22:11:18 +02:00
--background-color-tooltip: rgb(226, 223, 214);
2023-08-27 15:27:42 +02:00
--text-color: #55423e;
2023-08-27 17:01:27 +02:00
--link-color: #004ec8;
--link-color-visited: #6c2380;
2023-08-27 15:27:42 +02:00
--shaded-background: rgba(0, 0, 0, 5%);
--border-1: rgba(0, 0, 0, 15%);
--border-2: rgba(0, 0, 0, 30%);
2023-08-27 17:01:27 +02:00
--hover: rgba(0, 0, 0, 15%);
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: rgb(30, 40, 53);
2023-08-28 22:11:18 +02:00
--background-color-tooltip: rgb(23, 31, 41);
2023-08-27 17:01:27 +02:00
--text-color: #d7cdbf;
--link-color: #93cce8;
--link-color-visited: #f7afde;
--shaded-background: #f7e5df0c;
2024-02-07 15:33:46 +01:00
--border-0: #f7e5df1a;
2023-08-27 17:01:27 +02:00
--border-1: #f7e5df26;
2024-02-07 15:33:46 +01:00
--border-1-and-a-half: #f7e5df3a;
2023-08-27 17:01:27 +02:00
--border-2: #f7e5df4d;
}
2023-08-27 15:27:42 +02:00
}
2024-06-13 21:50:09 +02:00
:root {
/* Font size-responsive measurements. treehouse was designed against a font size of 14px;
each of these sizes is (n / 14)rem where n is the number of pixels. */
--1px: 0.07142857143rem;
--2px: 0.1428571429rem;
--3px: 0.2142857143rem;
--4px: 0.2857142857rem;
--6px: 0.4285714286rem;
--8px: 0.5714285714rem;
--10px: 0.7142857143rem;
--12px: 0.8571428571rem;
--16px: 1.142857143rem;
}
2023-08-18 18:26:41 +02:00
/* Article-style layout. Center everything and give it a maximum width */
body {
max-width: 1200px;
2023-08-18 18:26:41 +02:00
margin-left: auto;
margin-right: auto;
2023-08-27 15:27:42 +02:00
display: flex;
flex-direction: column;
2023-08-18 18:26:41 +02:00
}
2023-08-20 15:54:06 +02:00
main {
2024-06-13 21:50:09 +02:00
padding: 0 var(--16px);
2023-08-20 15:54:06 +02:00
}
@media screen and (max-width: 480px) {
main {
2024-06-13 21:50:09 +02:00
padding: 0 var(--8px);
2023-08-20 15:54:06 +02:00
}
}
2023-08-18 17:04:12 +02:00
/* Choose more pretty colors than vanilla HTML */
2024-06-13 20:10:38 +02:00
:root {
scrollbar-color: var(--border-2) var(--shaded-background);
scrollbar-width: auto;
scrollbar-gutter: stable;
}
2023-08-18 17:04:12 +02:00
body {
2023-08-27 15:27:42 +02:00
background-color: var(--background-color);
color: var(--text-color);
2023-08-27 19:40:47 +02:00
}
body::selection {
/* Even though this color doesn't yield the most readable text, browsers */
background-color: var(--liquidex-brand-blue);
2023-08-18 17:04:12 +02:00
}
2023-08-18 18:26:41 +02:00
/* Set up typography */
2023-08-18 17:04:12 +02:00
@font-face {
font-family: 'RecVar';
2024-07-19 18:04:11 +02:00
/* NOTE: I put the hash in here manually instead of adding the complexity of piping CSS through
Handlebars because I don't really think it's worth it for this single asset.
Other assets are referenced rarely enough that caching probably isn't gonna make too much of
an impact.
It's unlikely I'll ever update the font anyways, so eh, whatever. */
src: url('../font/Recursive_VF_1.085.woff2?cache=b3-445487d5');
}
2024-02-14 23:31:39 +01:00
@font-face {
font-family: 'RecVarMono';
2024-07-19 18:04:11 +02:00
src: url('../font/Recursive_VF_1.085.woff2?cache=b3-445487d5');
2024-02-14 23:31:39 +01:00
font-variation-settings: "MONO" 1.0;
}
2024-06-13 22:00:26 +02:00
body,
pre,
code,
kbd,
button {
2023-08-18 17:04:12 +02:00
font-family: 'RecVar', sans-serif;
2023-08-18 18:26:41 +02:00
line-height: 1.5;
2023-08-18 17:04:12 +02:00
}
2024-06-13 22:00:26 +02:00
body {
font-size: 87.5%;
}
2024-05-18 13:41:43 +02:00
pre,
code,
kbd,
button {
font-size: 100%;
}
2023-08-18 17:04:12 +02:00
:root {
--recursive-mono: 0.0;
--recursive-casl: 1.0;
--recursive-wght: 400;
2024-03-07 21:21:02 +01:00
--recursive-slnt: 0.0;
2023-08-18 17:04:12 +02:00
--recursive-crsv: 0.5;
--recursive-simplified-f: "ss03";
--recursive-simplified-g: "ss04";
--recursive-simplified-l: "ss05";
--recursive-simplified-r: "ss06";
--recursive-no-serif-L-Z: "ss08";
2023-08-18 17:04:12 +02:00
}
*,
*:before,
*:after {
font-variation-settings:
"MONO" var(--recursive-mono),
"CASL" var(--recursive-casl),
"wght" var(--recursive-wght),
"slnt" var(--recursive-slnt),
"CRSV" var(--recursive-crsv);
font-feature-settings:
var(--recursive-simplified-f),
var(--recursive-simplified-g),
var(--recursive-simplified-l),
var(--recursive-simplified-r),
var(--recursive-no-serif-L-Z);
2023-08-18 17:04:12 +02:00
}
h1 {
--recursive-slnt: 0.0;
--recursive-casl: 0.0;
--recursive-wght: 900;
2023-08-18 18:26:41 +02:00
2023-08-27 17:01:27 +02:00
font-size: 3.5rem;
font-feature-settings: var(--recursive-simplified-r) 0;
2023-08-18 18:26:41 +02:00
}
h2 {
--recursive-slnt: 0.0;
--recursive-casl: 0.5;
--recursive-wght: 800;
font-size: 2rem;
}
h3 {
--recursive-slnt: 0.0;
--recursive-casl: 0.5;
--recursive-wght: 700;
font-size: 1.5rem;
2023-08-18 17:04:12 +02:00
}
2023-08-31 19:25:19 +02:00
h4 {
--recursive-slnt: 0.0;
--recursive-casl: 0.5;
--recursive-wght: 700;
font-size: 1rem;
}
2023-08-18 17:04:12 +02:00
pre,
code,
2024-02-16 22:01:19 +01:00
kbd,
2024-02-17 14:56:17 +01:00
th-literate-program {
2023-08-18 17:04:12 +02:00
--recursive-mono: 1.0;
2023-08-18 18:26:41 +02:00
--recursive-casl: 0.0;
--recursive-slnt: 0.0;
2024-02-17 18:01:17 +01:00
--recursive-wght: 450;
2023-08-18 18:26:41 +02:00
}
b,
strong {
--recursive-wght: 700;
}
i,
em {
--recursive-slnt: -16.0;
2024-02-17 21:03:45 +01:00
font-style: normal;
2023-08-18 18:26:41 +02:00
}
/* Lay out elements a bit more compactly */
p,
pre {
2023-08-27 19:40:47 +02:00
margin: 0 0;
2023-08-18 18:26:41 +02:00
}
h1,
h2,
2023-08-31 19:25:19 +02:00
h3,
h4,
h5,
h6 {
2024-06-13 21:50:09 +02:00
margin: var(--4px) 0;
2023-08-18 18:26:41 +02:00
}
/* Lay out elements a little less compactly (actually just have some blank space past the end) */
body {
padding-bottom: 10rem;
}
/* Make code examples a little prettier by giving them visual separation from the rest of the page */
2024-02-16 22:01:19 +01:00
code,
2024-02-17 14:56:17 +01:00
th-literate-program {
2024-06-13 21:50:09 +02:00
padding: var(--3px) var(--4px);
2023-09-03 12:09:37 +02:00
background-color: var(--shaded-background);
2024-06-13 22:00:26 +02:00
border-radius: 0.4em;
2023-09-03 12:09:37 +02:00
}
2024-02-17 14:56:17 +01:00
th-literate-program,
2024-02-16 22:01:19 +01:00
th-literate-output {
display: block;
}
kbd {
2024-06-13 21:50:09 +02:00
padding: var(--3px) var(--6px);
border: var(--1px) solid var(--border-1);
2024-06-13 22:00:26 +02:00
border-radius: 0.4em;
}
2024-02-16 22:01:19 +01:00
pre,
2024-02-17 14:56:17 +01:00
th-literate-program {
2024-06-13 21:50:09 +02:00
padding: var(--8px) var(--12px);
margin: var(--12px) 0;
background-color: var(--shaded-background);
2024-06-13 22:00:26 +02:00
border-radius: 0.5em;
2024-02-08 13:49:22 +01:00
transition: background-color var(--transition-duration);
}
2024-02-17 21:03:45 +01:00
@media (prefers-color-scheme: light) {
pre,
th-literate-program {
background-color: transparent;
2024-06-13 21:50:09 +02:00
border: var(--1px) solid var(--border-1);
2024-02-17 21:03:45 +01:00
}
2023-08-18 18:26:41 +02:00
}
2024-02-16 22:01:19 +01:00
pre>code,
2024-02-17 14:56:17 +01:00
th-literate-program>code {
padding: 0;
2023-09-03 12:09:37 +02:00
background: none;
2024-06-13 21:50:09 +02:00
border-radius: 0;
2023-09-03 12:09:37 +02:00
}
2024-02-17 21:03:45 +01:00
th-literate-program {
white-space: pre;
}
2023-08-20 15:54:06 +02:00
/* And don't let code examples fly off and overflow the window */
2024-02-18 23:37:31 +01:00
pre,
th-literate-program {
2024-02-08 13:49:22 +01:00
min-width: 0;
width: auto;
overflow: auto;
2023-08-20 15:54:06 +02:00
}
2023-08-18 18:26:41 +02:00
/* Also don't let images get out of hand */
img {
max-width: 100%;
}
2024-02-07 11:35:08 +01:00
/* Also regarding images - make them look a bit more pretty by default */
img.pic {
2024-06-13 21:50:09 +02:00
border-radius: var(--6px);
margin: var(--8px) 0;
2024-02-07 11:35:08 +01:00
}
2024-02-14 23:31:39 +01:00
/* Image hints for tweaking rendering */
img {
&[src*='+pixel'] {
2024-02-17 21:03:45 +01:00
image-rendering: pixelated;
2024-02-14 23:31:39 +01:00
border-radius: 0;
}
2024-02-17 21:03:45 +01:00
/* TODO: These could be autogenerated! */
2024-02-19 22:32:26 +01:00
&[src*='+width72'] {
width: 72px;
height: auto;
}
2024-02-14 23:31:39 +01:00
&[src*='+width160'] {
width: 160px;
height: auto;
}
&[src*='+width640'] {
width: 640px;
height: auto;
}
2024-02-17 21:03:45 +01:00
&[src*='+width752'] {
width: 752px;
height: auto;
}
2024-02-14 23:31:39 +01:00
/* Resources for use in JavaScript. */
&.resource {
display: none;
}
}
2023-08-18 18:26:41 +02:00
/* Fix the default blue and ugly purple links normally have */
a {
2023-08-27 17:01:27 +02:00
color: var(--link-color);
2023-08-18 18:26:41 +02:00
}
a:visited {
2023-08-27 17:01:27 +02:00
color: var(--link-color-visited);
2023-08-18 18:26:41 +02:00
}
2024-03-24 22:32:01 +01:00
/* Allow for some secret links */
a.secret {
color: var(--text-color);
text-decoration: none;
}
2023-08-18 19:25:38 +02:00
/* Make blockquotes a bit prettier */
2023-08-18 18:26:41 +02:00
2023-08-18 19:25:38 +02:00
blockquote {
margin: 0;
2024-06-13 21:50:09 +02:00
padding: var(--4px) var(--12px);
margin: var(--4px) 0;
border-left: var(--4px) solid var(--border-1);
2023-08-18 17:04:12 +02:00
}
2023-08-18 19:25:38 +02:00
/* And tables. */
2023-08-18 17:04:12 +02:00
2023-08-18 20:58:07 +02:00
table {
2024-06-13 21:50:09 +02:00
margin: var(--8px) 0;
2023-08-18 20:58:07 +02:00
}
2023-08-18 17:04:12 +02:00
2023-08-18 19:25:38 +02:00
table,
th,
td {
2024-06-13 21:50:09 +02:00
border: var(--1px) solid var(--border-2);
2023-08-18 19:25:38 +02:00
border-collapse: collapse;
2024-06-13 21:50:09 +02:00
padding: var(--4px) var(--10px);
2023-08-18 17:04:12 +02:00
}
2023-08-18 19:25:38 +02:00
th {
2023-08-27 15:27:42 +02:00
background-color: var(--shaded-background);
2023-08-18 17:04:12 +02:00
2023-08-18 19:25:38 +02:00
--recursive-wght: 700;
--recursive-casl: 0.5;
2023-08-18 17:04:12 +02:00
}
2023-08-22 18:23:18 +02:00
2024-02-21 23:17:19 +01:00
/* Horizontal rules */
hr {
width: 100%;
border: none;
2024-06-13 21:50:09 +02:00
border-top: var(--1px) solid var(--border-1);
2024-02-21 23:17:19 +01:00
margin-top: 2em;
margin-bottom: 2em;
}
2023-08-27 15:27:42 +02:00
/* Style the noscript box a little more prettily. */
2023-08-22 18:23:18 +02:00
.noscript {
2024-06-13 21:50:09 +02:00
padding: var(--16px);
2023-08-22 18:23:18 +02:00
background-color: #fde748;
2023-08-27 19:40:47 +02:00
color: var(--text-color-light);
2024-06-13 21:50:09 +02:00
border: var(--1px) solid #6c581c;
border-radius: var(--8px);
2023-08-22 18:23:18 +02:00
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.noscript p {
margin-top: 0;
2024-06-13 21:50:09 +02:00
margin-bottom: var(--16px);
2023-08-22 18:23:18 +02:00
}
.noscript p:last-child {
margin-bottom: 0;
}
2023-08-27 15:27:42 +02:00
2023-08-27 19:40:47 +02:00
.noscript a {
color: var(--link-color-light);
}
.noscript a:visited {
color: var(--link-color-visited-light);
}
/* also, webkit. */
#webkit-makes-me-go-insane {
display: none;
}
2024-02-07 13:32:47 +01:00
/* Style the navigation bar. */
2023-08-27 15:27:42 +02:00
nav {
display: flex;
2023-08-28 21:14:51 +02:00
align-items: center;
2023-08-27 15:27:42 +02:00
}
2024-02-07 13:32:47 +01:00
nav .nav-page {
display: flex;
2024-02-21 23:17:19 +01:00
flex-grow: 1;
2024-02-07 13:32:47 +01:00
flex-direction: column;
}
/* Give the logo on the top some nicer looks */
2023-08-27 15:27:42 +02:00
nav .logo {
width: 48px;
height: 48px;
padding: 16px;
display: block;
opacity: 100%;
color: var(--text-color);
}
2023-08-27 18:25:21 +02:00
2024-02-07 13:32:47 +01:00
/* Style page titles */
h1.page-title {
--recursive-wght: 800;
margin-top: 0;
margin-bottom: 0;
2024-06-13 21:50:09 +02:00
margin-left: 2.25rem;
2024-02-07 13:32:47 +01:00
font-size: 1.25rem;
2024-03-03 21:43:01 +01:00
& a {
color: var(--text-color);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
@media (hover: none) {
h1.page-title a {
text-decoration: underline;
}
2024-02-07 13:32:47 +01:00
}
2024-02-21 23:17:19 +01:00
/* Style the `new` link on the homepage */
2024-03-03 21:23:37 +01:00
a[data-cast~="new"] {
2024-02-21 23:17:19 +01:00
flex-shrink: 0;
color: var(--text-color);
opacity: 50%;
2024-06-13 21:50:09 +02:00
margin-right: var(--16px);
2024-02-22 16:14:02 +01:00
2024-02-21 23:17:19 +01:00
&.has-news {
opacity: 100%;
text-decoration: none;
2024-02-08 22:41:01 +01:00
2024-02-21 23:17:19 +01:00
& .new-text {
text-decoration: underline;
}
}
& .badge {
2024-06-13 21:50:09 +02:00
margin-left: var(--8px);
2024-02-21 23:17:19 +01:00
text-decoration: none;
}
}
/* Style new badges */
span.badge {
--recursive-wght: 800;
--recursive-slnt: 0;
--recursive-mono: 1.0;
--recursive-casl: 0;
border-radius: 999px;
2024-06-13 21:50:09 +02:00
padding: var(--2px) var(--6px);
2024-02-21 23:17:19 +01:00
font-size: 0.9em;
&.red {
color: white;
background-color: #d01243;
}
2024-02-22 16:14:02 +01:00
&.blue {
color: white;
background-color: #058ef0;
}
2024-02-21 23:17:19 +01:00
&.before-content {
2024-06-13 21:50:09 +02:00
margin-right: var(--6px);
2024-02-21 23:17:19 +01:00
}
}
/* Style the footer */
2024-02-08 22:41:01 +01:00
footer {
margin-top: 4rem;
padding-right: 1.75rem;
2024-02-08 22:41:01 +01:00
text-align: right;
display: flex;
flex-direction: row;
&>section:first-child {
flex-grow: 1;
}
&>section:last-child {
flex-shrink: 0;
}
& #version-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
opacity: 50%;
padding-left: 1.75rem;
transition: var(--transition-duration) opacity;
& .icon-history {
display: inline-block;
width: 24px;
height: 24px;
padding-right: 1.75rem;
background-image: var(--icon-history);
background-repeat: no-repeat;
background-position: 50% 50%;
}
&>ul {
display: flex;
flex-direction: row;
list-style: none;
padding-left: 0;
opacity: 0%;
transition: var(--transition-duration) opacity;
}
&>ul>li:not(:first-child)::before {
content: '·';
text-decoration: none;
display: inline-block;
padding-left: 0.75em;
padding-right: 0.75em;
}
& a {
display: inline-block;
color: var(--text-color);
}
&:hover>ul {
opacity: 100%;
}
}
2024-02-08 22:41:01 +01:00
& #footer-icon {
color: var(--text-color);
2024-06-13 21:50:09 +02:00
padding-right: 1.75rem;
opacity: 40%;
2024-02-08 22:41:01 +01:00
}
}
2023-08-27 18:25:21 +02:00
/* Style emojis to be readable */
2024-03-03 21:23:37 +01:00
img[data-cast~="emoji"] {
2023-08-27 20:54:59 +02:00
max-width: 1.5em;
max-height: 1.5em;
2023-08-27 18:25:21 +02:00
vertical-align: bottom;
2023-08-27 20:54:59 +02:00
object-fit: contain;
2023-08-27 18:25:21 +02:00
}
2023-08-27 18:47:57 +02:00
2023-08-28 22:11:18 +02:00
/* And also style emoji tooltips. */
2024-02-20 21:50:24 +01:00
th-emoji-tooltip {
2024-02-08 11:49:17 +01:00
display: flex;
2023-08-28 22:11:18 +02:00
flex-direction: column;
align-items: center;
2024-02-20 21:50:24 +01:00
position: fixed;
2024-02-08 11:49:17 +01:00
transform: translateX(-50%) translateY(-10%) scale(0.8);
2023-08-28 22:11:18 +02:00
width: max-content;
z-index: 100;
background-color: var(--background-color-tooltip);
2024-06-13 21:50:09 +02:00
padding: var(--8px);
margin-top: var(--8px);
border-radius: var(--6px);
2024-02-08 11:49:17 +01:00
transition:
opacity var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
filter var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1),
transform var(--transition-duration) cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0%;
2024-06-13 21:50:09 +02:00
filter: blur(var(--3px));
2024-02-08 11:49:17 +01:00
pointer-events: none;
2023-08-28 22:11:18 +02:00
}
2024-02-20 21:50:24 +01:00
th-emoji-tooltip.transitioned-in {
2024-02-08 11:49:17 +01:00
opacity: 100%;
2024-06-13 21:50:09 +02:00
filter: blur(0);
2024-02-08 11:49:17 +01:00
transform: translateX(-50%) scale(1.0);
2023-08-28 22:11:18 +02:00
}
2024-02-20 21:50:24 +01:00
th-emoji-tooltip img {
2023-08-28 22:11:18 +02:00
display: block;
2024-06-13 21:50:09 +02:00
max-width: 4.5rem;
max-height: 4.5rem;
2023-08-28 22:11:18 +02:00
}
2024-02-20 21:50:24 +01:00
th-emoji-tooltip p {
2023-08-28 22:11:18 +02:00
--recursive-wght: 550;
color: var(--text-color);
2024-02-20 21:50:24 +01:00
font-size: 0.9em;
2023-08-28 22:11:18 +02:00
margin: 0;
2024-02-20 21:50:24 +01:00
padding-top: 6px;
2023-08-28 22:11:18 +02:00
line-height: 1;
}
2024-07-22 20:34:42 +02:00
.th-emoji-unknown {
text-decoration: 1px underline var(--error-color);
cursor: help;
}
2023-08-27 18:47:57 +02:00
/* Funny joke */
@keyframes hello-there {
0% {
opacity: 0%;
}
70% {
opacity: 0%;
}
100% {
opacity: 70%;
}
}
.oops-you-seem-to-have-gotten-stuck {
margin-top: 16px;
display: none;
position: absolute;
opacity: 0%;
}
#index\:treehouse>details:not([open])>summary .oops-you-seem-to-have-gotten-stuck {
display: inline;
animation: 4s hello-there forwards;
2024-02-08 22:41:01 +01:00
}
2024-02-16 22:01:19 +01:00
/* Literate programming support */
2024-02-18 12:10:02 +01:00
:root {
--error-color: #d94141;
}
@media (prefers-color-scheme: dark) {
:root {
--error-color: #e39393;
}
}
2024-02-17 14:56:17 +01:00
th-literate-program[data-mode="input"] {
2024-02-16 22:01:19 +01:00
/* Override the cursor with an I-beam, because the editor captures clicks and does not bubble
them back up to the caller */
cursor: text;
}
2024-02-17 14:56:17 +01:00
th-literate-program[data-mode="output"] {
2024-02-18 00:29:58 +01:00
padding: 0;
background: none;
2024-02-18 12:10:02 +01:00
border: none;
2024-02-19 22:32:26 +01:00
border-radius: 0;
2024-02-18 00:29:58 +01:00
2024-02-20 23:30:36 +01:00
& iframe,
2024-02-21 23:26:53 +01:00
& img.placeholder-image {
2024-02-18 00:29:58 +01:00
border-style: none;
border-radius: 4px;
2024-02-18 10:58:57 +01:00
display: block;
2024-02-21 23:17:19 +01:00
}
2024-04-07 18:11:56 +02:00
& iframe {
width: 100%;
}
2024-02-21 23:26:53 +01:00
& img.placeholder-image.js {
2024-02-20 23:30:36 +01:00
transition: opacity var(--transition-duration);
}
& iframe,
2024-02-21 23:26:53 +01:00
& img.placeholder-image.loading {
2024-02-20 23:30:36 +01:00
opacity: 50%;
}
& iframe.loaded {
opacity: 100%;
2024-02-18 00:29:58 +01:00
}
/* The inner iframe is hidden until something requests display. */
& iframe.hidden {
display: none;
}
2024-02-18 12:10:02 +01:00
2024-02-18 23:37:31 +01:00
& pre>code {
display: block;
}
2024-02-18 12:10:02 +01:00
& pre.error {
color: var(--error-color);
position: relative;
&:empty {
display: none;
}
&::after {
content: 'Error';
2024-06-13 21:50:09 +02:00
padding: var(--8px);
2024-02-18 12:10:02 +01:00
position: absolute;
right: 0;
top: 0;
color: var(--text-color);
opacity: 50%;
}
}
2024-02-18 23:37:31 +01:00
2024-02-21 23:26:53 +01:00
& pre.console,
& pre.placeholder-console {
2024-02-18 23:37:31 +01:00
position: relative;
2024-02-21 23:26:53 +01:00
margin-top: 0;
margin-bottom: 0;
2024-02-18 23:37:31 +01:00
&:empty {
display: none;
}
&::after {
content: 'Console';
2024-06-13 21:50:09 +02:00
padding: var(--8px);
2024-02-18 23:37:31 +01:00
position: absolute;
right: 0;
top: 0;
color: var(--text-color);
opacity: 50%;
}
}
2024-02-18 00:29:58 +01:00
}
2024-02-17 18:01:17 +01:00
/* Syntax highlighting */
:root {
2024-02-17 21:03:45 +01:00
--syntax-comment: #9b8580;
--syntax-identifier: var(--text-color);
--syntax-keyword1: #e15e2b;
--syntax-keyword2: #199aca;
--syntax-operator: #e3755b;
--syntax-function: #d57b07;
--syntax-literal: #a64fb3;
--syntax-string: #79ac3b;
--syntax-punct: #a28680;
2024-02-17 18:01:17 +01:00
}
@media (prefers-color-scheme: dark) {
:root {
--syntax-comment: #aca8a4;
--syntax-identifier: var(--text-color);
--syntax-keyword1: #ffb06a;
2024-02-19 22:32:26 +01:00
--syntax-keyword2: #8ad4f9;
2024-02-17 18:01:17 +01:00
--syntax-operator: #ec9f8d;
--syntax-function: #fbd283;
--syntax-literal: #e9b9f0;
--syntax-string: #b0dd7a;
--syntax-punct: #9d9a96;
}
}
.th-syntax-highlighting span {
&.comment {
--recursive-slnt: -16.0;
color: var(--syntax-comment);
}
&.identifier {
color: var(--syntax-identifier);
}
&.keyword1 {
color: var(--syntax-keyword1);
}
&.keyword2 {
color: var(--syntax-keyword2);
}
&.operator {
color: var(--syntax-operator);
}
&.function {
color: var(--syntax-function);
}
&.literal {
color: var(--syntax-literal);
}
&.string {
color: var(--syntax-string);
}
&.punct {
color: var(--syntax-punct);
}
2024-02-17 21:03:45 +01:00
2024-03-12 20:03:00 +01:00
&.error {
color: var(--error-color);
text-decoration: wavy underline;
}
2024-05-18 13:41:43 +02:00
&.hidden {
display: none;
}
&.type-hint {
color: var(--syntax-comment);
font-size: 80%;
}
2024-02-17 21:03:45 +01:00
}
.th-syntax-highlighting {
& .export {
text-decoration: underline dotted;
cursor: help;
text-decoration-color: transparent;
transition: text-decoration-color var(--transition-duration);
}
&:hover,
&:focus {
& .export {
text-decoration-color: var(--syntax-keyword1);
}
}
2024-02-17 18:01:17 +01:00
}
2024-02-21 23:17:19 +01:00
/* Style settings sections */
2024-03-03 21:23:37 +01:00
section[data-cast~="settings"] {
2024-02-21 23:17:19 +01:00
/* Don't display settings when JavaScript is disabled.
JS overrides this value on the element itself. */
display: none;
2024-03-02 20:53:44 +01:00
}