sinvo/lifeRestart
1
0
Fork 0
mirror of https://github.com/VickScarlet/lifeRestart.git synced 2026-08-28 01:06:49 +08:00
Code Issues Projects Releases Wiki Activity

update: phone style

Browse Source
This commit is contained in:
Vick Scarlet
2026-08-16 20:06:16 +08:00
committed by 神戸小鳥
parent 9ae4aa4ba2
commit 7e863021c9
11 changed files with 129 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/styles/common.css
+39 -8
View File
@@ -1,7 +1,12 @@
: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; }
:root { color: var(--base-text-color); }
.hide-scrollbar,
html {
overflow-y: auto;
@@ -51,22 +56,42 @@ button {
box-sizing: border-box;
border: var(--border-color) 0.0625rem solid;
background: var(--background-color);
font-size: 1.2rem;
font-size: calc(1.2rem * var(--ratio-font));
font-weight: bold;
padding: 0 1rem;
height: 2.5rem;
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;
&:hover {
--background-color: var(--style-color);
--text-color: var(--style-background);
outline: none;
@media (hover: hover) {
&:hover {
border: var(--style-background) 0.0625rem solid;
background: var(--style-color);
color: var(--style-background);
}
}
&:active {
border: var(--style-background) 0.0625rem solid;
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 {
@@ -76,7 +101,7 @@ ul {
}
input {
font-size: 1rem;
font-size: calc(1rem * var(--ratio-font));
padding: 0;
margin: 0;
border: none;
@@ -91,4 +116,10 @@ input {
&::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
}
@media (max-width: 32rem) { :root { font-size: 2.88vw; } }
@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;
}
}