sinvo/lifeRestart
1
0
Fork 0
mirror of https://github.com/VickScarlet/lifeRestart.git synced 2026-08-28 09:16:47 +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/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