mirror of
https://github.com/VickScarlet/lifeRestart.git
synced 2026-08-27 08:46:48 +08:00
123 lines
3.3 KiB
CSS
123 lines
3.3 KiB
CSS
:root {
|
|
--ratio: 1;
|
|
--ratio-font: 1;
|
|
color: var(--base-text-color);
|
|
}
|
|
|
|
html { transition: all 0.2s ease-in-out; }
|
|
html[data-theme='light'] { color-scheme: light; }
|
|
html[data-theme='dark'] { color-scheme: dark; }
|
|
.hide-scrollbar,
|
|
html {
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
&::-webkit-scrollbar { display: none; }
|
|
}
|
|
body {
|
|
min-height: calc(100dvh - 2rem);
|
|
width: calc(100dvw - 2rem);
|
|
display: grid;
|
|
place-items: center;
|
|
margin: 1rem;
|
|
padding: 0;
|
|
background: var(--base-background-color);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
html, body, button, input, select, textarea {
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC",
|
|
"Noto Sans SC", "Noto Sans CJK SC", "Noto Sans",
|
|
"Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.font-mono {
|
|
font-family:
|
|
"SF Mono", SFMono-Regular, Menlo, Monaco, Consolas,
|
|
"Noto Sans Mono CJK SC", "Noto Sans Mono", "Noto Code",
|
|
ui-monospace, monospace;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
button {
|
|
--style-color: var(--base-text-color);
|
|
--style-background: var(--base-background-color);
|
|
--border-color: var(--style-color);
|
|
--background-color: var(--style-background);
|
|
--text-color: var(--style-color);
|
|
color: var(--text-color);
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
border: var(--border-color) 0.0625rem solid;
|
|
background: var(--background-color);
|
|
font-size: calc(1.2rem * var(--ratio-font));
|
|
font-weight: bold;
|
|
padding: 0 1rem;
|
|
height: calc(2.5rem * var(--ratio));
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
transition: all 0.2s ease-in-out;
|
|
outline: none;
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
background: var(--style-color);
|
|
color: var(--style-background);
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
background: var(--style-color);
|
|
color: var(--style-background);
|
|
transition: none;
|
|
}
|
|
|
|
&.primary { --style-color: var(--color-primary); }
|
|
&.info { --style-color: var(--color-info); }
|
|
&.error { --style-color: var(--color-error); }
|
|
&.focus {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: calc(3.5rem * var(--ratio));
|
|
font-size: calc(1.6rem * var(--ratio-font));
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
input {
|
|
font-size: calc(1rem * var(--ratio-font));
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
background: var(--base-background-color);
|
|
text-align: center;
|
|
-moz-appearance: textfield;
|
|
appearance: none;
|
|
color: var(--base-text-color);
|
|
transition: all 0.2s ease-in-out;
|
|
&:focus { outline: none; }
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
}
|
|
|
|
@media (max-width: 32rem) { :root { font-size: 2.88vw; } }
|
|
@media screen and (orientation: portrait) and (pointer: coarse) {
|
|
:root {
|
|
--ratio: 1.5;
|
|
--ratio-font: 1.2;
|
|
}
|
|
} |