* {
- -webkit-user-select: none;
- -webkit-user-drag: none;
- cursor: default;
+ -webkit-user-select: none;
+ -webkit-user-drag: none;
+ cursor: default;
}
:root {
- color-scheme: light dark;
+ color-scheme: light dark;
- --spacing: 20px;
+ --spacing: 20px;
}
html {
- height: 100%;
+ height: 100%;
}
body {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
- gap: var(--spacing);
- margin: 0 calc(var(--spacing) * 2);
- height: 100%;
+ gap: var(--spacing);
+ margin: 0 calc(var(--spacing) * 2);
+ height: 100%;
- font: -apple-system-short-body;
- text-align: center;
+ font: -apple-system-short-body;
+ text-align: center;
}
body:not(.state-on, .state-off) :is(.state-on, .state-off) {
- display: none;
+ display: none;
}
body.state-on :is(.state-off, .state-unknown) {
- display: none;
+ display: none;
}
body.state-off :is(.state-on, .state-unknown) {
- display: none;
+ display: none;
}
button {
- font-size: 1em;
+ font-size: 1em;
}