Compare commits
No commits in common. "main" and "color-scheme-switcher" have entirely different histories.
main
...
color-sche
173
index.html
173
index.html
@ -4,40 +4,27 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale: 1">
|
||||
<title>Cypher Player Assistant</title>
|
||||
<link rel="stylesheet" type="text/css" href="static/reset.css">
|
||||
<style>
|
||||
:root {
|
||||
/* Dark Color Scheme */
|
||||
--dark-bg: #111111;
|
||||
--dark-text: #eeeeee;
|
||||
--dark-box-border: #333333;
|
||||
--dark-bg: black;
|
||||
--dark-text: black;
|
||||
|
||||
/* Light Color Scheme */
|
||||
--light-bg: #eeeeee;
|
||||
--light-text: #111111;
|
||||
--light-box-border: #cccccc;
|
||||
--light-bg: white;
|
||||
--light-text: black;
|
||||
|
||||
/* Defaults */
|
||||
--bg: var(--light-bg);
|
||||
--text: var(--light-text);
|
||||
--box-border: var(--light-box-border);
|
||||
}
|
||||
|
||||
#color-scheme {
|
||||
#color-scheme-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#color-scheme:checked ~ .color-scheme-wrapper {
|
||||
--bg: var(--dark-bg);
|
||||
--text: var(--dark-text);
|
||||
--box-border: var(--dark-box-border);
|
||||
}
|
||||
|
||||
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
||||
#color-scheme-toggle:checked ~ #color-mode-wrapper .dark-mode-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
|
||||
#color-scheme-toggle:checked ~ #color-mode-wrapper .light-mode-hide {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
@ -50,154 +37,16 @@
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: var(--dark-bg);
|
||||
--text: var(--dark-text);
|
||||
--box-border: var(--dark-box-border);
|
||||
}
|
||||
|
||||
#color-scheme:checked ~ .color-scheme-wrapper {
|
||||
--bg: var(--light-bg);
|
||||
--text: var(--light-text);
|
||||
--box-border: var(--light-box-border);
|
||||
}
|
||||
|
||||
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
#color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark-mode-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.light-mode-hide {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
/* Actual page style */
|
||||
|
||||
.color-scheme-wrapper {
|
||||
min-height: 100vh;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#color-scheme-changer {
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 150%;
|
||||
width: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-scheme-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-scheme-toggle span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dark-mode-hide, .light-mode-hide {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dark-mode-hide {
|
||||
background-color: var(--dark-bg);
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
.light-mode-hide {
|
||||
background-color: var(--light-bg);
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 100%;
|
||||
font-family: serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#no-local-storage {
|
||||
display: none;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 80%;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: var(--box-border);
|
||||
border-radius: 10px;
|
||||
margin: 0 auto 1em auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#no-loaded-container {
|
||||
text-align: center;
|
||||
@media(prefers-color-scheme: light) {
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input id="color-scheme" type="checkbox">
|
||||
<div class="color-scheme-wrapper">
|
||||
<div id="color-scheme-changer">
|
||||
<label for="color-scheme" id="color-scheme-toggle">
|
||||
<span class="dark-mode-hide">☽</span>
|
||||
<span class="light-mode-hide">☼</span>
|
||||
</label>
|
||||
<input id="color-scheme-toggle" type="checkbox">
|
||||
<div id="color-scheme-wrapper">
|
||||
<h1>Cypher Player Assistant</h1>
|
||||
</div>
|
||||
<h1>
|
||||
Cypher Player Assistant
|
||||
<span id="no-local-storage" title="Local Storage is not available. You can import/export data, but the app won’t save it between sessions!">!</span>
|
||||
</h1>
|
||||
<div id="no-loaded-container" class="box">
|
||||
No character is loaded.
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const checkLocalStorage = () => {
|
||||
let storage;
|
||||
try {
|
||||
storage = window.localStorage;
|
||||
const x = "__storage_test__";
|
||||
storage.setItem(x, x);
|
||||
storage.removeItem(x);
|
||||
|
||||
return true;
|
||||
} catch (e) {
|
||||
return (
|
||||
e instanceof DOMException &&
|
||||
e.name === "QuotaExceededError" &&
|
||||
// acknowledge QuotaExceededError only if there's something already stored
|
||||
storage &&
|
||||
storage.length !== 0
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener(
|
||||
"DOMContentLoaded",
|
||||
() => {
|
||||
if (!checkLocalStorage()) {
|
||||
document.getElementById("no-local-storage").style.display = "initial";
|
||||
alert("Local Storage is not available, saving and loading data will be unavailable.");
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
/* CSS Reset */
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul[class], ol[class] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
scroll-behavior: smooth;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
ul[class], ol[class] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
article > * + * {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@media(prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user