thp/doc-generator/static/styles/global.css

309 lines
5.7 KiB
CSS
Raw Normal View History

2023-03-27 20:22:09 +00:00
:root {
--js-color: #FFE70B;
--dark-color: #0f0f0f;
--light-color: white;
--error-color: #ff3b3b;
--error-text-color: #410002;
--error-bg-color: #ffdad6;
--c1: #e7b711;
--c2: #038dce;
--c3: #ffaed7;
--c4: #f44336;
--c5: #39b487;
--c3-transparent: #772957; /* rgba(252, 168, 209, 0.35); */
--bg-color: var(--dark-color);
--color: #dedede;
--code-bg-color: #151515;
--code-color: #bababa;
--border-color: #72787e;
/* C1 Material Colors */
--c1-primary: #f1c01f;
/* C2 Material Colors */
--c2-primary: #90ccff;
--c2-on-primary: #003351;
--c2-primary-container: #004b72;
--c2-on-primary-container: #cce5ff;
2023-04-11 02:10:53 +00:00
--c2-surface-variant: #41474d;
--c2-on-surface-variant: #c1c7ce;
2023-03-27 20:22:09 +00:00
/* C3 Material Colors */
--c3-primary: #ffaed7;
--c3-on-primary: #5b113f;
--c3-primary-container: #782957;
--c3-on-primary-container: #ffd8e9;
/* C4 Material Colors */
--c4-primary: #ffb4a8;
/* C5 Material Colors */
--c5-primary: #66dcac;
--c5-on-primary: #003825;
--c5-primary-container: #005137;
--c5-on-primary-container: #83f9c7;
}
@media (prefers-color-scheme: light) {
:root {
--c2: #038dce;
--bg-color: #fffdfc;
--color: #202020;
--code-bg-color: #fdf6e3;
--code-color: #073642;
--border-color: rgba(64, 64, 64, 0.25);
--c3-transparent: #ffd8ea;
/* C1 Material Colors */
--c1-primary: #765b00;
/* C2 Material Colors */
--c2-primary: #006397;
--c2-on-primary: #ffffff;
--c2-primary-container: #cce5ff;
--c2-on-primary-container: #001e31;
2023-04-11 02:10:53 +00:00
--c2-surface-variant: #dde3ea;
--c2-on-surface-variant: #41474d;
2023-03-27 20:22:09 +00:00
/* C3 Material Colors */
--c3-primary: #954170;
--c3-on-primary: #ffffff;
--c3-primary-container: #ffd8e9;
--c3-on-primary-container: #3c0027;
/* C4 Material Colors */
--c4-primary: #bc1714;
/* C5 Material Colors */
--c5-primary: #006c4b;
--c5-on-primary: #ffffff;
--c5-primary-container: #83f9c7;
--c5-on-primary-container: #002114;
}
}
html {
2023-04-11 02:10:53 +00:00
font-size: 18px;
2023-03-27 20:22:09 +00:00
}
.padded {
padding-left: 2rem;
border-left: solid 1px var(--border-color);
}
@media screen and (max-width: 800px) {
html {
font-size: 18px;
}
}
body {
font-family: Inter, sans-serif;
background-color: var(--bg-color);
color: var(--color);
}
svg.railroad-diagram {
background-color: rgba(0,0,0,0) !important;
}
svg.railroad-diagram path {
stroke: var(--c1) !important;
}
svg.railroad-diagram rect {
stroke: var(--c2) !important;
fill: var(--c2) !important;
}
svg.railroad-diagram g.non-terminal rect {
stroke: var(--c4) !important;
fill: var(--c4) !important;
}
svg.railroad-diagram text {
font-family: Inter, sans-serif !important;
font-weight: normal !important;
fill: white;
}
g.terminal text {
font-family: Iosevka, sans-serif !important;
}
.railroad-code {
text-align: center;
padding: 1rem;
}
.railroad-code svg {
transform: scale(1.5);
}
pre {
border: solid 1px rgba(150, 150, 150, 0.5);
}
code, pre {
font-family: "SF Mono", Iosevka, "Source Code Pro", monospace !important;
font-variant-ligatures: discretionary-ligatures;
}
.marked pre {
font-size: 0.85rem;
}
.marked p {
line-height: 1.5rem;
text-align: justify;
margin: 1rem 0;
2023-03-27 20:22:09 +00:00
}
.marked h1 {
font-weight: 900;
2023-03-27 20:22:09 +00:00
margin-top: 3rem;
margin-bottom: 2rem;
font-size: 2.25rem;
2023-03-27 20:22:09 +00:00
}
.marked h2 {
font-size: 2rem;
font-weight: bold;
2023-03-27 20:22:09 +00:00
margin-top: 3rem;
margin-bottom: 1.5rem;
}
.marked h3 {
font-size: 1.75rem;
font-weight: 500;
margin-top: 2.5rem;
margin-bottom: 1.25rem;
text-decoration: underline;
2023-03-30 21:19:48 +00:00
/*
position: sticky;
top: 0;
background-color: var(--bg-color);
2023-03-30 21:19:48 +00:00
*/
}
.marked h4 {
font-size: 1.25rem;
2023-03-27 20:22:09 +00:00
font-weight: 300;
margin-top: 2rem;
margin-bottom: 1rem;
2023-03-27 20:22:09 +00:00
}
.marked table {
text-align: center;
border-collapse: collapse;
}
.marked table, th, td {
border: solid 1px rgba(150, 150, 150, 1);
}
.marked table td, th {
padding: 0.25rem 0.5rem;
}
.md-modifier {
border-radius: 0.75rem;
padding: 1rem;
margin: 2rem 0;
}
.md-modifier > div {
padding-bottom: 1rem;
font-weight: 500;
}
.md-info {
border: solid 2px var(--js-color);
}
.md-info > div {
color: var(--js-color);
}
@media (prefers-color-scheme: light) {
.md-info {
background-color: var(--js-color);
}
.md-info > div {
color: var(--dark-color);
font-weight: 600;
}
}
.md-warning {
border: solid 3px var(--c4);
}
.md-warning > div {
color: var(--c4);
}
@media (prefers-color-scheme: light) {
.md-warning {
background-color: var(--error-bg-color);
color: var(--error-text-color);
}
.md-warning > div {
color: var(--c4);
font-weight: 600;
}
}
.md-implemented {
border: solid 3px var(--c2-primary);
}
.md-implemented > div {
color: var(--c2-primary);
}
@media screen and (max-width: 800px) {
.marked p {
line-height: 1.25rem;
}
.marked h1 {
margin-top: 1rem;
margin-bottom: 0.75rem;
}
pre[class*="language-"].line-numbers {
font-size: 0.8rem;
}
.railroad-code svg {
display: none;
transform: scale(1);
}
}
2023-03-30 21:19:48 +00:00
/* Used by headers generated at src/generator/heading.rs */
.heading-linked :hover::after{
color: var(--c2-primary);
2023-03-30 21:19:48 +00:00
content: "#";
display: inline-block;
font-size: 0.7em;
line-height: 1;
margin-left: 4px;
text-decoration: none;
}