toor
b48d67a823
The inline boot styles and FOUC script still branched on the removed light/dark and ink/comic settings, so the first paint flashed the old light surface before Vue mounted. Match the single dark theme and give the logo sweep the neon tint.
95 lines
2.3 KiB
HTML
95 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
|
<link rel="apple-touch-icon" href="/logo.png" />
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<meta name="theme-color" content="#1a1d23" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-title" content="hermes-ui" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>hermes-ui</title>
|
|
<style>
|
|
html,
|
|
body,
|
|
#app {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: oklch(0.155 0.012 250);
|
|
}
|
|
|
|
.boot-fallback {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
color: oklch(0.945 0.006 200);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.boot-fallback__logo-wrap {
|
|
position: relative;
|
|
display: block;
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.boot-fallback__logo-wrap::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(105deg, transparent 30%, rgba(45, 212, 191, 0.55) 48%, transparent 66%);
|
|
transform: translateX(-140%);
|
|
mix-blend-mode: screen;
|
|
pointer-events: none;
|
|
-webkit-mask: url("/logo.png") center / contain no-repeat;
|
|
mask: url("/logo.png") center / contain no-repeat;
|
|
animation: boot-logo-shimmer 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
|
|
}
|
|
|
|
.boot-fallback__logo-wrap img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 18px;
|
|
}
|
|
|
|
@keyframes boot-logo-shimmer {
|
|
0% {
|
|
transform: translateX(-140%);
|
|
}
|
|
|
|
52%,
|
|
100% {
|
|
transform: translateX(140%);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- CYBER is a single dark theme: pin Arco's dark tokens before first paint -->
|
|
<script>
|
|
document.documentElement.setAttribute('arco-theme', 'dark');
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="boot-fallback">
|
|
<div class="boot-fallback__brand">
|
|
<span class="boot-fallback__logo-wrap">
|
|
<img src="/logo.png" alt="" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
|
|
</html>
|