add theming support
replace CSS BG grid with SVG-based version
This commit is contained in:
14
src/assets/images/grid.svg
Normal file
14
src/assets/images/grid.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<pattern id="smallGrid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<rect width="18" height="18" fill="black" stroke="transparent"/>
|
||||
</pattern>
|
||||
<pattern id="grid" width="200" height="200" patternUnits="userSpaceOnUse">
|
||||
<rect width="200" height="200" fill="url(#smallGrid)" />
|
||||
<path d="M 200 0 L 0 0 0 200" fill="none" stroke="black" stroke-width="4`" />
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<rect width="100%" height="100%" fill="url(#smallGrid)" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 608 B |
@@ -61,6 +61,71 @@
|
||||
});
|
||||
}
|
||||
|
||||
// TODO: maybe put toggle behind collapsable "settings" menu that
|
||||
// lives on bottom left of screen on mobile?
|
||||
const actionBox = document.querySelector("#footer .actionBox");
|
||||
|
||||
/** THEME SWITCHER */
|
||||
|
||||
// load last theme
|
||||
const currentTheme = Cookies.get("currentTheme") ?? "";
|
||||
|
||||
const themeSwitch = document.createElement("div");
|
||||
themeSwitch.innerHTML = [
|
||||
'<label class="themeSwitch" for="themeSwitch">',
|
||||
'<div class="themeSwitch-description">',
|
||||
"Theme",
|
||||
"</div>",
|
||||
'<select id="themeSwitch" name="themeSwitch">',
|
||||
`<option value="" ${
|
||||
currentTheme === "" ? "selected" : ""
|
||||
}>Default</option>`,
|
||||
`<option value="themeAdmiral" ${
|
||||
currentTheme === "themeAdmiral" ? "selected" : ""
|
||||
}>Admiral</option>`,
|
||||
`<option value="themeAntsy92" ${
|
||||
currentTheme === "themeAntsy92" ? "selected" : ""
|
||||
}>Antsy92</option>`,
|
||||
`<option value="themeBingo" ${
|
||||
currentTheme === "themeBingo" ? "selected" : ""
|
||||
}>Bingo</option>`,
|
||||
`<option value="themeCyber77" ${
|
||||
currentTheme === "themeCyber77" ? "selected" : ""
|
||||
}>Cyber77</option>`,
|
||||
`<option value="themeLightCyan" ${
|
||||
currentTheme === "themeLightCyan" ? "selected" : ""
|
||||
}>LightCyan</option>`,
|
||||
`<option value="themeTerminalGreen" ${
|
||||
currentTheme === "themeTerminalGreen" ? "selected" : ""
|
||||
}>Terminal Green</option>`,
|
||||
`<option value="themeVagabond" ${
|
||||
currentTheme === "themeVagabond" ? "selected" : ""
|
||||
}>Vagabond</option>`,
|
||||
"</label>",
|
||||
].join("\n");
|
||||
themeSwitch.classList.add("js-themeSwitch", "themeSwitch");
|
||||
if (currentTheme)
|
||||
document
|
||||
.getElementsByTagName("body")[0]
|
||||
.classList.add(currentTheme);
|
||||
|
||||
actionBox.append(themeSwitch);
|
||||
|
||||
// add toggle event
|
||||
document
|
||||
.getElementById("themeSwitch")
|
||||
.addEventListener("change", function (e) {
|
||||
const body = document.getElementsByTagName("body")[0];
|
||||
body.className = body.className
|
||||
.split(/\s/)
|
||||
.filter((val) => !val.startsWith("theme"))
|
||||
.concat(e.target.value)
|
||||
.join(" ");
|
||||
Cookies.set("currentTheme", e.target.value);
|
||||
});
|
||||
|
||||
/** SCROLLING BACKGROUND */
|
||||
|
||||
// default to no scrolling on devices under 600 px w
|
||||
const isMobile = window.matchMedia(
|
||||
"only screen and (max-width: 600px)"
|
||||
@@ -74,22 +139,18 @@
|
||||
|
||||
const scrollToggle = document.createElement("div");
|
||||
scrollToggle.innerHTML = [
|
||||
'<label class="toggleSwitchV3" for="scrollingToggle">',
|
||||
'<div class="toggleSwitchV3-description">',
|
||||
'<label class="toggleSwitch" for="scrollingToggle">',
|
||||
'<div class="toggleSwitch-description">',
|
||||
"Background",
|
||||
"</div>",
|
||||
`<input class="toggleSwitchV3-checkbox" ${
|
||||
`<input class="toggleSwitch-checkbox" ${
|
||||
hasScrollToggle ? "checked" : ""
|
||||
} type="checkbox" id="scrollingToggle" />`,
|
||||
'<div class="toggleSwitchV3-status" data-ts-on="SCROLLING" data-ts-off="STATIC"></div>',
|
||||
'<div class="toggleSwitch-status" data-ts-on="SCROLLING" data-ts-off="STATIC"></div>',
|
||||
"</label>",
|
||||
].join("\n");
|
||||
scrollToggle.classList.add("js-scrollToggle", "scrollToggle");
|
||||
|
||||
const actionBox = document
|
||||
// .getElementById("footer")
|
||||
// .querySelector("#footer > .pageFooter-inner")
|
||||
.querySelector("#footer .actionBox");
|
||||
actionBox.append(scrollToggle);
|
||||
actionBox.classList.add("js-actionBox");
|
||||
|
||||
@@ -113,10 +174,6 @@
|
||||
.getElementById("gridContainer")
|
||||
.classList.add("js-isAnimated");
|
||||
|
||||
// TODO: maybe put toggle behind collapsable "settings" menu that
|
||||
// lives on bottom left of screen on mobile?
|
||||
// can eventually toggle color schemes here, too?
|
||||
|
||||
if (document.documentElement.className.indexOf("is404") > -1) {
|
||||
document.getElementById("searchQuery").value =
|
||||
window.location.pathname
|
||||
|
||||
@@ -7,30 +7,186 @@
|
||||
* http://creativecommons.org/publicdomain/zero/1.
|
||||
****************************************************************************/
|
||||
|
||||
/*
|
||||
Palette
|
||||
color: #9aa8bc
|
||||
bg: #0d1852
|
||||
link: 049c74
|
||||
border: 25baba
|
||||
big-font: 25baba
|
||||
black: 040308
|
||||
other: 094192
|
||||
|
||||
*/
|
||||
:root {
|
||||
--color-bg: #040308;
|
||||
--color-bg-translucent: rgba(4, 3, 8, 0.9);
|
||||
--color-button-border: #726f6a;
|
||||
--color-grid: #04778f;
|
||||
--color-main: #9aa8bc;
|
||||
--color-header: #25baba;
|
||||
--color-header-translucent: rgba(37, 171, 171, 0.3);
|
||||
--color-link: #049c74;
|
||||
--color-link-translucent: rgba(4, 156, 116, 0.8);
|
||||
--color-menubar: #282c32;
|
||||
--color-other-dark: #0d1852;
|
||||
--color-other-dark-translucent: rgba(13, 24, 82, 0.5);
|
||||
--color-other-light: #04778f;
|
||||
--color-other-link: #1e6e58;
|
||||
--color-pre-text: #ddd;
|
||||
--color-wtf-update-footer: #423f4d; /* retired in favor of --color-menubar */
|
||||
--color-wtf-embargoed: #151222 /* retired in favor of --color-other-dark-translucent */
|
||||
}
|
||||
|
||||
body {
|
||||
background: #040308; /* Old browsers */
|
||||
background: #040308;
|
||||
color: #9aa8bc;
|
||||
color: var(--color-main);
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
body.themeAdmiral {
|
||||
--color-bg: #3000FF;
|
||||
--color-bg-translucent: rgba(48, 0, 255, .8);
|
||||
--color-button-border: #ecfbff;
|
||||
--color-grid: #ecfbff;
|
||||
--color-header: #ecfbff;
|
||||
--color-header-translucent: rgba(236, 251, 255, .3);
|
||||
--color-link: #79BAEC;
|
||||
--color-link-translucent: rgba(236, 251, 255, .8);
|
||||
--color-main: #e6f4f1;
|
||||
--color-menubar: rgba(236, 251, 255, .1);
|
||||
--color-other-light: #ecfbff;
|
||||
--color-other-link: #79BAEC;
|
||||
}
|
||||
|
||||
body.themeAntsy92 {
|
||||
--color-bg: #000;
|
||||
--color-bg-translucent: rgba(0, 0, 0, .7);
|
||||
--color-button-border: #0cc;
|
||||
--color-grid: #00c;
|
||||
--color-header: #c0c;
|
||||
--color-header-translucent: rgba(204, 0, 204, .3);
|
||||
--color-link: #0cc;
|
||||
--color-link-translucent: rgba(0, 204, 204, .8);
|
||||
--color-main: #fff;
|
||||
--color-menubar: rgba(204, 0, 0, .2);
|
||||
--color-other-light: #00c;
|
||||
--color-other-link: #0c0;
|
||||
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
body.themeAntsy92 .menubar {
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-grid);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
body.themeBingo {
|
||||
--color-bg: #1C71C6;
|
||||
--color-bg-translucent: rgba(28, 113, 198, .9);
|
||||
--color-button-border: #ecfbff;
|
||||
--color-grid: #ecfbff;
|
||||
--color-header: #ecfbff;
|
||||
--color-header-translucent: rgba(236, 251, 255, .3);
|
||||
--color-link: #79BAEC;
|
||||
--color-link-translucent: rgba(236, 251, 255, .8);
|
||||
--color-main: #e6f4f1;
|
||||
--color-menubar: rgba(236, 251, 255, .1);
|
||||
--color-other-light: #ecfbff;
|
||||
--color-other-link: #79BAEC;
|
||||
}
|
||||
|
||||
body.themeCyber77 {
|
||||
/* Based on https://github.com/endormi/vscode-2077-theme/ */
|
||||
--color-bg: #030d22;
|
||||
--color-bg-translucent: rgba(3, 13, 34, .8);
|
||||
--color-button-border: #c832ff;
|
||||
--color-grid: #e92778;
|
||||
--color-header: #39C0FF;
|
||||
--color-header-translucent: rgba(57, 192, 255, .3);
|
||||
--color-link: #ff2e97;
|
||||
--color-link-translucent: rgba(233, 29, 120, .8);
|
||||
--color-main: #e6f4f1;
|
||||
--color-menubar: rgba(236, 251, 255, .1);
|
||||
--color-other-light: #e92778;
|
||||
--color-other-link: #ff2cf1;
|
||||
}
|
||||
|
||||
body.themeLightCyan {
|
||||
/* Based on a technique described at https://web.dev/articles/building/a-color-scheme */
|
||||
|
||||
--brand: #049c74;
|
||||
--brand-hue: 164;
|
||||
--brand-saturation: 95%;
|
||||
--brand-lightness: 31%;
|
||||
|
||||
--color-bg: hsl(var(--brand-hue), 25%, 90%);
|
||||
--color-bg-translucent: hsla(var(--brand-hue), 25%, 90%, .9);
|
||||
--color-button-border: hsl(var(--brand-hue), var(--brand-saturation), 25%);
|
||||
--color-grid: hsl(var(--brand-hue), var(--brand-saturation), 10%);
|
||||
--color-header: hsl(var(--brand-hue), var(--brand-saturation), 25%);
|
||||
--color-header-translucent: hsla(var(--brand-hue), var(--brand-saturation), 10%, .3);
|
||||
--color-link: hsl(var(--brand-hue), var(--brand-saturation), var(--brand-lightness));
|
||||
--color-link-translucent: hsla(var(--brand-hue), var(--brand-saturation), var(--brand-lightness), .8);
|
||||
--color-main: hsl(var(--brand-hue), var(--brand-saturation), 10%);
|
||||
--color-menubar: hsla(var(--brand-hue), 20%, 40%, .2);
|
||||
--color-other-link: #1e6e58;
|
||||
--color-other-light: hsl(var(--brand-hue), 30%, 30%);
|
||||
|
||||
--color-shadow: hsla(var(--brand-hue), 10%, 20%, .3);
|
||||
}
|
||||
|
||||
body.themeLightCyan .siteTitle-link {
|
||||
text-shadow: 0px 1px 1px var(--color-shadow);
|
||||
}
|
||||
|
||||
body.themeLightCyan .siteTitle-link:hover {
|
||||
text-shadow: 0px 2px 2px var(--color-shadow);
|
||||
}
|
||||
|
||||
|
||||
body.themeTerminalGreen {
|
||||
--color-bg: #040308;
|
||||
--color-bg-translucent: rgba(3, 3, 3, .8);
|
||||
--color-button-border: #a3af9e;
|
||||
--color-grid: #009600;
|
||||
--color-header: #f0fdec;
|
||||
--color-header-translucent: rgba(0, 194, 167, .3);
|
||||
--color-link: #009600;
|
||||
--color-link-translucent: rgba(0, 150, 0, .8);
|
||||
--color-main: #dff8d5;
|
||||
--color-menubar: rgba(236, 236, 236, .1);
|
||||
--color-other-light: #009600;
|
||||
--color-other-link: #00964b;
|
||||
}
|
||||
|
||||
body.themeVagabond {
|
||||
--color-bg: #2C0F2A;
|
||||
--color-bg-translucent: rgba(44, 15, 42, .8);
|
||||
--color-button-border: #ecfbff;
|
||||
--color-grid: #E94E5C;
|
||||
--color-header: #E94E5C;
|
||||
--color-header-translucent: rgba(233, 78, 92, .3);
|
||||
--color-link: #44FCFC;
|
||||
--color-link-translucent: rgba(68, 252, 252, .8);
|
||||
--color-main: #FADBB0;
|
||||
--color-menubar: rgba(236, 251, 255, .1);
|
||||
--color-other-light: #F6BC43;
|
||||
--color-other-link: #CC45B6;
|
||||
}
|
||||
|
||||
body.themeVagabond .siteTitle-link:visited {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
body.themeVagabond .navMenu-list-link:visited {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
body.themeVagabond .navMenu-list-link.isCurrentSection {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
a {
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 1px dashed #25baba;
|
||||
border-bottom-color: var(--color-header);
|
||||
color: #049c74;
|
||||
color: var(--color-link);
|
||||
font-weight: bold;
|
||||
padding: 0 0.2rem;
|
||||
text-decoration: none;
|
||||
@@ -45,18 +201,23 @@ a[target="_blank"]::after {
|
||||
|
||||
a:hover {
|
||||
background-color: #25baba;
|
||||
background-color: var(--color-header);
|
||||
border: 1px solid #25baba;
|
||||
border-color: var(--color-header);
|
||||
border-radius: 0.3rem;
|
||||
color: #040308;
|
||||
color: var(--color-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover:visited {
|
||||
color: #040308;
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #1e6e58;
|
||||
color: var(--color-other-link);
|
||||
}
|
||||
|
||||
article img {
|
||||
@@ -65,6 +226,7 @@ article img {
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid #04778f;
|
||||
border-left-color: var(--color-other-light);
|
||||
font-style: italic;
|
||||
margin: 1em 0;
|
||||
padding: 0 1em;
|
||||
@@ -74,7 +236,9 @@ code,
|
||||
kbd {
|
||||
background-color: #0d1852;
|
||||
background-color: rgba(13, 24, 82, 0.5);
|
||||
color: #ccc;
|
||||
background-color: var(--color-other-dark-translucent);
|
||||
color: #ddd;
|
||||
color: var(--color-pre-text);
|
||||
font-size: 0.9em;
|
||||
padding: 0.25em;
|
||||
}
|
||||
@@ -113,36 +277,42 @@ figure[data-type="video"] video {
|
||||
|
||||
h1 {
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
font-size: 2em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
font-size: 1.5em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
font-size: 1.22em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
font-size: 1.12em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
font-size: 1.06em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
@@ -174,7 +344,9 @@ ul {
|
||||
pre {
|
||||
background-color: #0d1852;
|
||||
background-color: rgba(13, 24, 82, 0.5);
|
||||
color: #ccc;
|
||||
background-color: var(--color-other-dark-translucent);
|
||||
color: #ddd;
|
||||
color: var(--color-pre-text);
|
||||
font-size: 0.9em;
|
||||
overflow: auto;
|
||||
padding: 0.25em;
|
||||
@@ -200,6 +372,7 @@ samp {
|
||||
.actionBox.js-actionBox > .topLink {
|
||||
align-items: center;
|
||||
border: 1px solid #726f6a;
|
||||
border-color: var(--color-button-border);
|
||||
border-radius: 0.3em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -317,11 +490,14 @@ samp {
|
||||
|
||||
.asideContent {
|
||||
border-top: 1px dotted #04778f;
|
||||
border-top-color: var(--color-other-light);
|
||||
}
|
||||
|
||||
.asideMenu-divider {
|
||||
border: 1px dashed #25baba;
|
||||
border-color: var(--color-header);
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@@ -334,6 +510,7 @@ samp {
|
||||
|
||||
.asideMenu-link {
|
||||
border: 1px solid #726f6a;
|
||||
border-color: var(--color-button-border);
|
||||
border-radius: 0.3em;
|
||||
display: inline-block;
|
||||
padding: 0.25em;
|
||||
@@ -391,13 +568,16 @@ samp {
|
||||
|
||||
.backLink-link {
|
||||
border: 1px solid #25baba;
|
||||
border-color: var(--color-header);
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.boxLink {
|
||||
border: 1px solid #726f6a;
|
||||
border-color: var(--color-button-border);
|
||||
border-radius: 0.3em;
|
||||
display: inline-block;
|
||||
padding: 0.25em;
|
||||
@@ -406,34 +586,43 @@ samp {
|
||||
.boxLink.isCurrent {
|
||||
background-color: #049c74;
|
||||
background-color: rgba(4, 156, 116, 0.8);
|
||||
background-color: var(--color-link-translucent);
|
||||
color: #040308;
|
||||
color: var(--color-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.boxLink.isCurrent:hover {
|
||||
background-color: #25baba;
|
||||
background-color: var(--color-header);
|
||||
}
|
||||
|
||||
.container {
|
||||
color: white;
|
||||
color: #ddd;
|
||||
color: var(--color-pre-text);
|
||||
}
|
||||
|
||||
.dataTable td {
|
||||
border-left: 1px solid #9aa8bc;
|
||||
border-left-color: var(--color-main);
|
||||
border-right: 1px solid #9aa8bc;
|
||||
border-right-color: var(--color-main);
|
||||
padding: 0.1em 0.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dataTable th {
|
||||
border: 1px solid #9aa8bc;
|
||||
border-color: var(--color-main);
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
padding: 0.2em 0.4em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dataTable thead tr {
|
||||
background-color: #0d1852;
|
||||
background-color: var(--color-other-dark);
|
||||
}
|
||||
|
||||
.dataTable tr {
|
||||
@@ -443,16 +632,21 @@ samp {
|
||||
|
||||
.dataTable tbody tr:last-child {
|
||||
border-bottom: 1px solid #9aa8bc;
|
||||
border-bottom-color: var(--color-main);
|
||||
}
|
||||
|
||||
.dataTable tbody:nth-child(even) tr:nth-child(even) {
|
||||
background-color: #0d1852;
|
||||
background-color: var(--color-other-dark);
|
||||
}
|
||||
|
||||
.dataTable tr:hover td {
|
||||
border-bottom: 1px solid #25baba;
|
||||
border-bottom-color: var(--color-header);
|
||||
border-top: 1px solid #25baba;
|
||||
border-top-color: var(--color-header);
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
}
|
||||
|
||||
.dirList {
|
||||
@@ -519,6 +713,7 @@ samp {
|
||||
.feedLine {
|
||||
border-color: #25baba;
|
||||
border-color: rgba(37, 171, 171, 0.3);
|
||||
border-color: var(--color-header-translucent);
|
||||
clear: both;
|
||||
margin: 2.5em auto;
|
||||
width: 80%;
|
||||
@@ -549,8 +744,10 @@ samp {
|
||||
-webkit-background-clip: content-box;
|
||||
background-position: center bottom;
|
||||
background-size: 20px 20px;
|
||||
background-image: linear-gradient(to right, #04778f 2px, transparent 2px), linear-gradient(to bottom, #04778f 2px, transparent 2px);
|
||||
background-color: var(--color-grid);
|
||||
background-image: url('/images/grid.svg');
|
||||
bottom: 0;
|
||||
contain: paint;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100vh;
|
||||
@@ -621,7 +818,9 @@ samp {
|
||||
|
||||
.linkButton-link {
|
||||
border: 1px solid #25baba;
|
||||
border-color: var(--color-header);
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
@@ -668,6 +867,7 @@ samp {
|
||||
|
||||
.menubar {
|
||||
background: #282c32;
|
||||
background-color: var(--color-menubar);
|
||||
display: static;
|
||||
}
|
||||
|
||||
@@ -690,18 +890,23 @@ samp {
|
||||
|
||||
.navMenu-list-link:visited {
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
}
|
||||
|
||||
.navMenu-list-link.isCurrentSection {
|
||||
background-color: #049c74;
|
||||
background-color: var(--color-link);
|
||||
border: 1px solid #25baba;
|
||||
border-color: var(--color-header);
|
||||
border-radius: 0.3rem;
|
||||
color: #040308;
|
||||
color: var(--color-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navMenu-list-link.isCurrentSection:hover {
|
||||
background-color: #25baba;
|
||||
background-color: var(--color-header);
|
||||
}
|
||||
|
||||
.navMenu-list-item {
|
||||
@@ -720,7 +925,9 @@ samp {
|
||||
.page {
|
||||
background: #040308;
|
||||
background: rgba(4, 3, 8, 0.9);
|
||||
background: var(--color-bg-translucent);
|
||||
border: 1px solid #9aa8bc;
|
||||
border-color: var(--color-main);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
display: block;
|
||||
@@ -734,6 +941,7 @@ samp {
|
||||
|
||||
.pageFooter {
|
||||
border-top: 1px solid #04778f;
|
||||
border-top-color: var(--color-other-light);
|
||||
margin: 0 auto;
|
||||
padding: 0.5em 1em;
|
||||
width: 100%;
|
||||
@@ -825,6 +1033,7 @@ samp {
|
||||
|
||||
.pageMenu-item:hover {
|
||||
border-color: #25baba;
|
||||
border-color: var(--color-header);
|
||||
}
|
||||
|
||||
.pageMenu-link {
|
||||
@@ -837,7 +1046,9 @@ samp {
|
||||
.pageMenu-link:hover .pageMenu-text {
|
||||
background-color: #25baba;
|
||||
background-color: rgba(150, 150, 150, 0.8);
|
||||
background-color: var(--color-header-translucent);
|
||||
color: #040308;
|
||||
color: var(--color-bg);
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -892,6 +1103,7 @@ samp {
|
||||
|
||||
.postMenu-link {
|
||||
border: 1px solid #726f6a;
|
||||
border-color: var(--color-button-border);
|
||||
border-radius: 0.3em;
|
||||
display: inline-block;
|
||||
padding: 0.25em;
|
||||
@@ -955,8 +1167,10 @@ samp {
|
||||
.searchBox-query {
|
||||
background: #040308;
|
||||
background: rgba(4, 3, 8, 0.9);
|
||||
background: var(--color-bg-translucent);
|
||||
border-radius: 0.3rem;
|
||||
color: #ddd;
|
||||
color: var(--color-pre-text);
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
@@ -969,6 +1183,7 @@ samp {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 1rem;
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
padding: 0.2em;
|
||||
@@ -983,18 +1198,7 @@ samp {
|
||||
|
||||
.siteTitle-link:visited {
|
||||
color: #25baba;
|
||||
}
|
||||
|
||||
.spellTable {
|
||||
margin-left: -1em;
|
||||
}
|
||||
|
||||
.spellTable td {
|
||||
border: 1px solid #094192;
|
||||
}
|
||||
|
||||
.spellTable tbody:nth-child(even) {
|
||||
background-color: #0d1852;
|
||||
color: var(--color-header);
|
||||
}
|
||||
|
||||
.tagPage-counts {
|
||||
@@ -1021,10 +1225,19 @@ samp {
|
||||
|
||||
.teaseLink-link {
|
||||
color: #25baba;
|
||||
color: var(--color-header);
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.themeSwitch select {
|
||||
background-color: transparent;
|
||||
border: 1px solid #726f6a;
|
||||
border-color: var(--color-button-border);
|
||||
color: #049c74;
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
.titleLink {
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -1032,6 +1245,7 @@ samp {
|
||||
.titleLink:active,
|
||||
.titleLink:hover {
|
||||
border: 1px solid #25baba;
|
||||
border-color: var(--color-header);
|
||||
}
|
||||
|
||||
.toggleBox {
|
||||
@@ -1040,46 +1254,49 @@ samp {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.toggleSwitchV3 {
|
||||
.toggleSwitch {
|
||||
border: 1px solid #726f6a;
|
||||
border-color: var(--color-button-border);
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
.toggleSwitchV3-checkbox {
|
||||
.toggleSwitch-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggleSwitchV3-checkbox::selection,
|
||||
.toggleSwitchV3-checkbox::-moz-selection,
|
||||
.toggleSwitchV3-checkbox:after::selection,
|
||||
.toggleSwitchV3-checkbox:after::-moz-selection,
|
||||
.toggleSwitchV3-checkbox:before::selection,
|
||||
.toggleSwitchV3-checkbox:before::-moz-selection,
|
||||
.toggleSwitchV3-checkbox *::selection,
|
||||
.toggleSwitchV3-checkbox *::-moz-selection,
|
||||
.toggleSwitchV3-checkbox *:after::selection,
|
||||
.toggleSwitchV3-checkbox *:after::-moz-selection,
|
||||
.toggleSwitchV3-checkbox *:before::selection,
|
||||
.toggleSwitchV3-checkbox *:before::-moz-selection,
|
||||
.toggleSwitchV3-checkbox + .toggleSwitchV3-status::selection,
|
||||
.toggleSwitchV3-checkbox + .toggleSwitchV3-status::-moz-selection {
|
||||
.toggleSwitch-checkbox::selection,
|
||||
.toggleSwitch-checkbox::-moz-selection,
|
||||
.toggleSwitch-checkbox:after::selection,
|
||||
.toggleSwitch-checkbox:after::-moz-selection,
|
||||
.toggleSwitch-checkbox:before::selection,
|
||||
.toggleSwitch-checkbox:before::-moz-selection,
|
||||
.toggleSwitch-checkbox *::selection,
|
||||
.toggleSwitch-checkbox *::-moz-selection,
|
||||
.toggleSwitch-checkbox *:after::selection,
|
||||
.toggleSwitch-checkbox *:after::-moz-selection,
|
||||
.toggleSwitch-checkbox *:before::selection,
|
||||
.toggleSwitch-checkbox *:before::-moz-selection,
|
||||
.toggleSwitch-checkbox + .toggleSwitch-status::selection,
|
||||
.toggleSwitch-checkbox + .toggleSwitch-status::-moz-selection {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.toggleSwitchV3-checkbox:checked + .toggleSwitchV3-status {
|
||||
.toggleSwitch-checkbox:checked + .toggleSwitch-status {
|
||||
background: #1e6e58;
|
||||
background: var(--color-other-link);
|
||||
}
|
||||
|
||||
.toggleSwitchV3-checkbox:checked + .toggleSwitchV3-status:before {
|
||||
.toggleSwitch-checkbox:checked + .toggleSwitch-status:before {
|
||||
bottom: -100%;
|
||||
}
|
||||
|
||||
.toggleSwitchV3-checkbox:checked + .toggleSwitchV3-status:after {
|
||||
.toggleSwitch-checkbox:checked + .toggleSwitch-status:after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.toggleSwitchV3-description {
|
||||
.toggleSwitch-description {
|
||||
color: #049c74;
|
||||
color: var(--color-link);
|
||||
font-weight: bold;
|
||||
padding: .5rem;
|
||||
text-decoration: none;
|
||||
@@ -1087,7 +1304,7 @@ samp {
|
||||
-webkit-transition: 0.3s background-color, 0.3s color, 0.3s border-radius;
|
||||
}
|
||||
|
||||
.toggleSwitchV3-status {
|
||||
.toggleSwitch-status {
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
background: transparent;
|
||||
@@ -1107,9 +1324,10 @@ samp {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggleSwitchV3-status:after,
|
||||
.toggleSwitchV3-status:before {
|
||||
.toggleSwitch-status:after,
|
||||
.toggleSwitch-status:before {
|
||||
color: #049c74;
|
||||
color: var(--color-link);
|
||||
content: "";
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
@@ -1121,16 +1339,18 @@ samp {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggleSwitchV3-status:after {
|
||||
.toggleSwitch-status:after {
|
||||
border-top: 1px solid transparent;
|
||||
bottom: 100%;
|
||||
color: #040308;
|
||||
color: var(--color-bg);
|
||||
content: attr(data-ts-on);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.toggleSwitchV3-status:before {
|
||||
.toggleSwitch-status:before {
|
||||
border-top: 1px solid #726f6a;
|
||||
border-top-color: var(--color-button-border);
|
||||
bottom: 0;
|
||||
content: attr(data-ts-off);
|
||||
left: 0;
|
||||
@@ -1138,13 +1358,16 @@ samp {
|
||||
|
||||
/* hover effects only on devices with fine pointers (AKA not phones) */
|
||||
@media(hover: hover) and (pointer: fine) {
|
||||
.toggleSwitchV3:hover {
|
||||
border: 1px solid hsl(180, 67%, 44%);
|
||||
.toggleSwitch:hover {
|
||||
border: 1px solid #25baba;
|
||||
border-color: var(--color-header);
|
||||
}
|
||||
|
||||
.toggleSwitchV3:hover > .toggleSwitchV3-description {
|
||||
.toggleSwitch:hover > .toggleSwitch-description {
|
||||
background-color: #25baba;
|
||||
background-color: var(--color-header);
|
||||
color: #040308;
|
||||
color: var(--color-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1158,6 +1381,7 @@ samp {
|
||||
|
||||
.topLink {
|
||||
border: 1px solid #726f6a;
|
||||
border-color: var(--color-button-border);
|
||||
border-radius: 0.3em;
|
||||
display: block;
|
||||
margin: 2em auto;
|
||||
@@ -1167,6 +1391,7 @@ samp {
|
||||
}
|
||||
.topLink:visited {
|
||||
color: #049c74;
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
.twitter-tweet {
|
||||
@@ -1181,6 +1406,7 @@ samp {
|
||||
.update-footer {
|
||||
align-items: start;
|
||||
color: #423f4d;
|
||||
color: var(--color-menubar);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.9em;
|
||||
@@ -1206,6 +1432,7 @@ samp {
|
||||
|
||||
.update-nav-link {
|
||||
border: 1px dashed #726f6a;
|
||||
border-color: var(--color-button-border);
|
||||
border-radius: 0.3em;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
@@ -1251,12 +1478,15 @@ samp {
|
||||
.asideMenu-link.isCurrent {
|
||||
background-color: #049c74;
|
||||
background-color: rgba(4, 156, 116, 0.8);
|
||||
background-color: var(--color-link-translucent);
|
||||
color: #040308;
|
||||
color: var(--color-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.asideMenu-link.isCurrent:hover {
|
||||
background-color: #25baba;
|
||||
background-color: var(--color-header);
|
||||
}
|
||||
|
||||
.asideUpdates .update-citation {
|
||||
@@ -1278,8 +1508,10 @@ samp {
|
||||
.feature hr {
|
||||
border: 1px 0 0 0;
|
||||
border-color: #0d1852;
|
||||
border-color: var(--color-other-dark);
|
||||
border-style: solid;
|
||||
color: #0d1852;
|
||||
color: var(--color-other-dark);
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
@@ -1290,31 +1522,39 @@ samp {
|
||||
.pageMenu-link.isCurrent .pageMenu-text {
|
||||
background-color: #049c74;
|
||||
background-color: rgba(4, 156, 116, 0.8);
|
||||
background-color: var(--color-link-translucent);
|
||||
color: #040308;
|
||||
color: var(--color-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pageMenu-link.isCurrent:hover .pageMenu-text {
|
||||
background-color: #25baba;
|
||||
background-color: var(--color-header);
|
||||
}
|
||||
|
||||
.textMenu-link.isCurrent {
|
||||
background-color: #049c74;
|
||||
background-color: rgba(4, 156, 116, 0.8);
|
||||
background-color: var(--color-link-translucent);
|
||||
color: #040308;
|
||||
color: var(--color-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.textMenu-link.isCurrent:hover {
|
||||
background-color: #25baba;
|
||||
background-color: var(--color-header);
|
||||
}
|
||||
|
||||
.update.isDraft {
|
||||
background-color: #282c32;
|
||||
background-color: var(--color-menubar);
|
||||
}
|
||||
|
||||
.update.isEmbargoed {
|
||||
background-color: #151222;
|
||||
background-color: var(--color-other-dark-translucent);
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
@@ -1371,7 +1611,9 @@ samp {
|
||||
.asideContent {
|
||||
background: #040308;
|
||||
background: rgba(4, 3, 8, 0.9);
|
||||
background-color: var(--color-bg-translucent);
|
||||
border: 1px solid #9aa8bc;
|
||||
border-color: var(--color-main);
|
||||
font-size: 0.8em;
|
||||
position: absolute;
|
||||
top: 5em;
|
||||
|
||||
Reference in New Issue
Block a user