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/Game.css
+2 -2
View File
@@ -13,7 +13,7 @@
> .section {
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: calc(0.5rem * var(--ratio));
width: 100%;
padding: 0;
box-sizing: border-box;
@@ -24,7 +24,7 @@
align-items: center;
font-weight: bold;
width: 100%;
height: 2rem;
height: calc(2rem * var(--ratio));
color: var(--base-text-color);
border: 0.0625rem solid var(--base-text-color);
border-bottom: 0.1875rem solid var(--color-primary);
apps/web/src/components/Talent.css
+30 -7
View File
@@ -4,8 +4,8 @@
justify-content: space-between;
align-items: center;
padding: 0 1rem;
height: 2rem;
font-size: 1rem;
height: calc(2rem * var(--ratio));
font-size: calc(1rem * var(--ratio-font));
gap: 1rem;
color: var(--color);
background: var(--background, var(--base-background-color));
@@ -17,13 +17,26 @@
&.selected {
--color: var(--base-background-color);
--background: var(--grade-color);
&:hover { --background: oklch(from var(--grade-color) calc(l + 0.1) c h); }
@media (hover: hover) {
&:hover { background: oklch(from var(--grade-color) calc(l + 0.1) c h); }
}
&:active {
background: oklch(from var(--grade-color) calc(l + 0.1) c h);
transition: none;
}
}
@media (hover: hover) {
&:hover { background: oklch(from var(--grade-color) calc(l + 0.5) c h); }
}
&:active {
background: oklch(from var(--grade-color) calc(l + 0.5) c h);
transition: none;
}
&:hover { --background: oklch(from var(--grade-color) calc(l + 0.5) c h); }
.talent-name { font-weight: bold; }
.talent-description {
color: oklch(from var(--color) calc(l + 0.1) c h);
font-size: 0.85rem;
font-size: calc(0.85rem * var(--ratio-font));
user-select: none;
&::before { content: '['; margin-right: 0.125rem; }
&::after { content: ']'; margin-left: 0.125rem; }
@@ -32,8 +45,18 @@
}
html[data-theme='dark'] {
.talent{
&:hover {--background: oklch(from var(--grade-color) calc(l - 0.5) c h);}
&.selected:hover { --background: oklch(from var(--grade-color) calc(l - 0.1) c h);}
@media (hover: hover) {
&:hover { background: oklch(from var(--grade-color) calc(l - 0.5) c h); }
&.selected:hover { background: oklch(from var(--grade-color) calc(l - 0.1) c h); }
}
&:active {
background: oklch(from var(--grade-color) calc(l - 0.5) c h);
transition: none;
}
&.selected:active {
background: oklch(from var(--grade-color) calc(l - 0.1) c h);
transition: none;
}
.talent-description { color: oklch(from var(--color) calc(l - 0.2) c h); }
}
}
apps/web/src/components/TextSvg.tsx
+37
View File
@@ -0,0 +1,37 @@
import { useState, useEffect, useRef } from 'react'
export interface Props {
text: string
className: string
}
export function TextSvg({ text, className }: Readonly<Props>) {
const [height, setHeight] = useState(0)
const [width, setWidth] = useState(0)
const textRef = useRef<SVGTextElement>(null)
useEffect(() => {
if (!textRef.current) return
const { width, height } = textRef.current.getBBox()
setWidth(width)
setHeight(height)
}, [text, className, textRef])
return (
<svg
className={className}
fill="currentColor"
viewBox={`0 0 ${width} ${height}`}
>
<text
ref={textRef}
fontSize={10}
style={{
transform: 'translate(50%,50%)',
textAnchor: 'middle',
dominantBaseline: 'central',
}}
>
{text}
</text>
</svg>
)
}
export default TextSvg
apps/web/src/containers/Alloc.css
+7 -5
View File
@@ -8,7 +8,7 @@
.allocation-input {
display: flex;
gap: 0;
height: 2rem;
height: calc(2rem * var(--ratio));
border: 0.0625rem solid var(--grade-color);
color: var(--grade-color);
box-sizing: border-box;
@@ -46,11 +46,12 @@
left: 0;
transform: translateY(-100%);
margin: 0;
font-size: calc(1rem * var(--ratio-font));
li {
display: flex;
justify-content: space-between;
align-items: center;
height: 2rem;
height: calc(2rem * var(--ratio));
padding: 0 0.5rem;
gap: 0.5rem;
}
@@ -67,6 +68,7 @@
margin: 0;
list-style: none;
width: 100%;
font-size: calc(1rem * var(--ratio-font));
> li {
flex: 1 0;
display: flex;
@@ -77,7 +79,7 @@
gap: 0;
> span {
width: 100%;
height: 2rem;
height: calc(2rem * var(--ratio));
color: var(--base-background-color);
background: var(--grade-color);
border: 0.0625rem solid var(--grade-color);
@@ -100,8 +102,8 @@
> button {
--style-color: var(--left-color);
flex: 1;
font-size: 1rem;
height: 2rem;
font-size: calc(1rem * var(--ratio-font));
height: calc(2rem * var(--ratio));
width: 6rem;
padding: 0;
}
apps/web/src/containers/Home.css
+1 -9
View File
@@ -5,15 +5,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
h1 {
font-size: 4rem;
margin: 0;
font-weight: bold;
}
h2 {
font-size: 2rem;
margin: 0;
}
.main { font-weight: bold; }
}
.theme-toggle-btn {
position: fixed;
apps/web/src/containers/Home.tsx
+4 -3
View File
@@ -1,4 +1,5 @@
import { useRemake } from '@remake/hooks'
import { TextSvg } from '@/components/TextSvg'
import { ThemeToggle } from '@/components/ThemeToggle'
import './Home.css'
@@ -7,10 +8,10 @@ export default function Home() {
return (
<div className="screen home">
<div className="title">
<h1>人生重开模拟器</h1>
<h2>这垃圾人生一秒也不想待了</h2>
<TextSvg text="人生重开模拟器" className="main" />
<TextSvg text="这垃圾人生一秒也不想待了" className="sub" />
</div>
<button className="primary" onClick={remake}>
<button className="primary focus" onClick={remake}>
立即重开
</button>
<ThemeToggle />
apps/web/src/containers/Play.css
+2 -2
View File
@@ -107,8 +107,8 @@
> button {
flex: 1 0;
min-width: 6rem;
font-size: 1.25rem;
height: 2.5rem;
font-size: calc(1.25rem * var(--ratio-font));
height: calc(2.5rem * var(--ratio));
}
}
}
apps/web/src/containers/Summary.css
+1 -1
View File
@@ -37,7 +37,7 @@
ul.talent-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: calc(0.5rem * var(--ratio));
width: 100%;
}
}
apps/web/src/containers/TalentPick.css
+1 -1
View File
@@ -7,7 +7,7 @@
ul.talent-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: calc(0.5rem * var(--ratio));
li {
display: flex;
align-items: center;
apps/web/src/containers/TalentPick.tsx
+5 -2
View File
@@ -14,8 +14,11 @@ export default function TalentPick() {
if (!pulled)
return (
<div className="screen talent-pick">
<button className="primary font-mono" onClick={() => puller()}>
{PullCount}连抽!
<button
className="primary font-mono focus"
onClick={() => puller()}
>
{PullCount} 连抽!
</button>
</div>
)
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;
}
}