})
}
}
- const clearStorageButton = document.querySelector('#clear-storage-button')
+ const themeCheckbox = document.getElementById('theme-checkbox')
+ themeCheckbox.addEventListener('change', selectTheme)
+ selectTheme()
+ const clearStorageButton = document.getElementById('clear-storage-button')
clearStorageButton.addEventListener('click', (event) => {
if (event.detail === 1) {
clearStorage()
}
})
setTimeout(() => {
- document.getElementsByTagName('body')[0].style.visibility = 'visible'
+ document.body.style.visibility = 'visible'
}, 250)
console.log('loaded ui')
}
notify.ok(`Session storage cleared`)
btn.removeAttribute('disabled')
}
- // function toggleTheme () {
- // const body = document.querySelector('body')
- // const theme = body.style.getPropertyValue('--theme')
- // switch (theme) {
- // case dark: {
- // body.style = {
- // "--theme": "light",
- // "--theme-primary": "var(--color-light)",
- // "--theme-secondary": "var(--color-blue)",
- // "--theme-highlight": "var(--color-dark)",
- // "--theme-text": "var(--color-black)"
- // break
- // }
- // case light: {
- // body.style = {
- // "--theme": "light",
- // "--theme-primary": "var(--color-light)",
- // "--theme-secondary": "var(--color-blue)",
- // "--theme-highlight": "var(--color-dark)",
- // "--theme-text": "var(--color-black)"
- // break
- // }
- // }
+ function selectTheme () {
+ const body = document.querySelector('body')
+ const themeCheckbox = document.getElementById('theme-checkbox')
+ if (themeCheckbox.checked) {
+ body.style = '--theme:dark;--theme-primary:var(--color-dark);--theme-secondary:var(--color-gray);--theme-highlight:var(--color-blue);--theme-content:var(--color-light);'
+ themeCheckbox.value = 'dark'
+ } else {
+ body.style = '--theme:light;--theme-primary:var(--color-light);--theme-secondary:var(--color-gray);--theme-highlight:var(--color-blue);--theme-content:var(--color-dark);'
+ themeCheckbox.value = 'light'
+ }
+ }
</script>
<style>
*{border:0;box-sizing:border-box;font:normal normal normal calc(16px + 0.1dvh) 'sans-serif';margin:0;}
--color-dark: #20204C;
--color-light: #F4FAFF;
--color-gray: #676686;
- --color-black: #070707;
- --color-white: #FFFFFF;
--text-body: normal normal normal calc(16px + 0.1dvh) 'sans-serif';
--text-heading: normal normal bold calc(32px + 0.1dvh) 'sans-serif';
- background: linear-gradient(to right, var(--color-dark), calc((100dvw - 1080px) / 2), var(--color-black) 50%, calc(100dvw - ((100dvw - 1080px) / 2)), var(--color-dark));
- }
- body {
--theme: dark;
--theme-primary: var(--color-dark);
--theme-secondary: var(--color-gray);
--theme-highlight: var(--color-blue);
- --theme-text: var(--color-light);
+ --theme-content: var(--color-light);
+ --min-width: 360px;
+ --max-width: 1080px;
+ --letterbox: calc((100dvw - var(--max-width)) / 2);
+ }
+ body {
align-items: flex-start;
- background-color: var(--primary);
- color: var(--tertiary);
+ background-color: var(--theme-primary);
+ box-shadow: 0 0 2rem var(--color-dark);
+ color: var(--theme-content);
display: flex;
- fill: var(--color-blue);
+ fill: var(--theme-highlight);
flex-direction: column;
font: var(--text-body);
- height: 100dvh !important;
justify-content: stretch;
margin: 0 auto;
+ height: 100dvh !important;
min-height: 100dvh !important;
- min-width: 360px !important;
max-height: 100dvh !important;
- max-width: 1080px !important;
- width: 100dvw !important
+ width: 100dvw !important;
+ min-width: var(--min-width) !important;
+ max-width: var(--max-width) !important;
}
header {
flex: 0 1 auto;
font: var(--text-heading);
margin-bottom: 1em;
}
+ h1 {
+ text-align: center;
+ }
.flex-x,
.flex-y {
display: flex;
display: flex;
flex-direction: column;
margin: 0 auto;
+ max-width: var(--max-width);
+ min-width: var(--min-width);
pointer-events: none;
position: fixed;
top: 0.5rem;
width: 100%;
}
#notifications > dialog[open] {
- background-color: var(--color-blue);
- border: 1px solid var(--color-black);
+ background-color: var(--theme-highlight);
+ border: 1px solid var(--theme-secondary);
border-radius: 0.5rem;
color: var(--color-light);
cursor: pointer;
.hide {
display: none;
}
+ a {
+ color: var(--theme-highlight);
+ cursor: pointer;
+ text-decoration: none;
+ }
button {
+ background-color: var(--theme-highlight);
+ border: 1px solid var(--theme-secondary);
+ color: var(--theme-content);
cursor: pointer;
}
- h1 {
- text-align: center;
+ a:hover,
+ button:hover {
+ filter: brightness(120%);
}
input,
input[type='number'],
input[type='text'],
select,
select:focus {
+ background-color: var(--theme-secondary);
+ border: 1px solid var(--theme-content);
+ color: var(--theme-text);
font-size: calc(16px + 0.1dvh); /* prevents input focus zoom on mobile */
}
+ input:disabled,
+ input[type='number']:disabled,
+ input[type='password']:disabled,
+ input[type='text']:disabled,
+ select:disabled,
+ select:focus:disabled {
+ color: var(--theme-secondary);
+ }
label:has(+ :required)::after {
color: red;
content: '*';
justify-content: center;
padding: 0 1dvh;
}
- #xno {
- fill: var(--color-blue);
- flex: 1.5 1 auto;
- }
nav > a > * {
aspect-ratio: 1;
- fill: var(--color-blue);
flex: 1 0 auto;
height: 100%;
max-height: 10dvh;
max-width: 10dvh;
width: 100%;
}
+ #xno {
+ flex: 1.5 1 auto;
+ }
#xno > svg {
max-height: 15dvh;
max-width: 15dvh;
}
+ nav svg {
+ fill: var(--theme-highlight);
+ }
+ nav svg:hover {
+ fill: var(--theme-highlight);
+ }
+ .toggle {
+ position: relative;
+ }
+ .toggle > input[type='checkbox'] {
+ appearance: none;
+ background-color: var(--theme-highlight);
+ border: 0.1em solid var(--theme-secondary);
+ border-radius: 0.75em;
+ cursor: pointer;
+ height: 1.4em;
+ transition: all 0.2s;
+ width: 2.4em;
+ }
+ .toggle > input[type='checkbox']::before {
+ background-color: var(--theme-primary);
+ border-radius: 50%;
+ content: '';
+ height: 1em;
+ left: 0.27em;
+ position: absolute;
+ top: 0.2em;
+ transition: all 0.2s;
+ width: 1em;
+ }
+ .toggle > input[type='checkbox']:checked {
+ transition: all 0.2s;
+ }
+ .toggle > input[type='checkbox']:checked::before {
+ left: 1.2em;
+ transition: all 0.2s;
+ }
</style>
</head>
-<body onhashchange="switchPage(event)" style="--theme:dark;visibility:hidden;">
+<body onhashchange="switchPage(event)" style="visibility:hidden;">
<div id="notifications"></div>
<header>
<form>
<!-- Settings Page -->
<div id="settings" class="page">
- <h1>Settings</h1>
- <button id="clear-storage-button">
- Clear Storage
- </button>
+ <form class="flex-y left mid">
+ <h1>Settings</h1>
+ <label for="theme-checkbox">Theme</label>
+ <div class="toggle">
+ <input id="theme-checkbox" name="theme" type="checkbox" autocomplete="on" checked />
+ </div>
+ <button id="clear-storage-button">
+ Clear Storage
+ </button>
+ </form>
<article>
<h2>Licenses</h2>
<cite>
projects / nemo-wallet.git / commitdiff