mirror of
https://github.com/wu736139669/hapi.git
synced 2026-08-05 06:24:37 +00:00
therainismeandweishu
efbe4f8d90
- Add Settings > Display > Font Size selector (80/90/100/110/120%) - Persist preference (hapi-font-scale) and apply globally via --app-font-scale - Normalize main UI typography to match Settings
261 lines
7.3 KiB
CSS
261 lines
7.3 KiB
CSS
@import "tailwindcss";
|
|
@config "../tailwind.config.ts";
|
|
|
|
:root {
|
|
--app-bg: var(--tg-theme-bg-color, #ffffff);
|
|
--app-fg: var(--tg-theme-text-color, #111827);
|
|
--app-hint: var(--tg-theme-hint-color, #6b7280);
|
|
--app-link: var(--tg-theme-link-color, #111827);
|
|
--app-button: var(--tg-theme-button-color, #111827);
|
|
--app-button-text: var(--tg-theme-button-text-color, #ffffff);
|
|
--app-banner-bg: var(--tg-theme-button-color, #111827);
|
|
--app-banner-text: var(--tg-theme-button-text-color, #ffffff);
|
|
--app-secondary-bg: var(--tg-theme-secondary-bg-color, #f3f4f6);
|
|
|
|
/* Theme-aware colors (light mode defaults) */
|
|
--app-border: rgba(0, 0, 0, 0.1);
|
|
--app-divider: rgba(0, 0, 0, 0.08);
|
|
--app-subtle-bg: rgba(0, 0, 0, 0.05);
|
|
--app-code-bg: #f6f8fa;
|
|
--app-inline-code-bg: rgba(0, 0, 0, 0.08);
|
|
|
|
/* Diff colors (light) - from hapi-app */
|
|
--app-diff-added-bg: #e6ffed;
|
|
--app-diff-added-text: #24292e;
|
|
--app-diff-removed-bg: #ffeef0;
|
|
--app-diff-removed-text: #24292e;
|
|
|
|
/* Git status colors (light) */
|
|
--app-git-staged-color: #34C759;
|
|
--app-git-unstaged-color: #FF9500;
|
|
--app-git-deleted-color: #FF3B30;
|
|
--app-git-renamed-color: #2563eb;
|
|
--app-git-untracked-color: #8E8E93;
|
|
|
|
/* Badge colors (light) */
|
|
--app-badge-warning-bg: rgba(245, 158, 11, 0.2);
|
|
--app-badge-warning-text: #b45309;
|
|
--app-badge-warning-border: rgba(245, 158, 11, 0.3);
|
|
--app-badge-success-bg: rgba(34, 197, 94, 0.2);
|
|
--app-badge-success-text: #15803d;
|
|
--app-badge-success-border: rgba(34, 197, 94, 0.3);
|
|
--app-badge-error-bg: rgba(239, 68, 68, 0.18);
|
|
--app-badge-error-text: #b91c1c;
|
|
--app-badge-error-border: rgba(239, 68, 68, 0.3);
|
|
|
|
--app-font-scale: 1;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* Primary colors - override fallbacks for non-Telegram browsers */
|
|
--app-bg: var(--tg-theme-bg-color, #1c1c1e);
|
|
--app-fg: var(--tg-theme-text-color, #ffffff);
|
|
--app-hint: var(--tg-theme-hint-color, #8e8e93);
|
|
--app-link: var(--tg-theme-link-color, #ffffff);
|
|
--app-button: var(--tg-theme-button-color, #ffffff);
|
|
--app-button-text: var(--tg-theme-button-text-color, #111827);
|
|
--app-banner-bg: var(--tg-theme-button-color, #3A3A3C);
|
|
--app-banner-text: var(--tg-theme-button-text-color, #ffffff);
|
|
--app-secondary-bg: var(--tg-theme-secondary-bg-color, #2C2C2E);
|
|
|
|
--app-border: rgba(255, 255, 255, 0.1);
|
|
--app-divider: rgba(255, 255, 255, 0.08);
|
|
--app-subtle-bg: rgba(255, 255, 255, 0.05);
|
|
--app-code-bg: #282c34;
|
|
--app-inline-code-bg: rgba(255, 255, 255, 0.1);
|
|
|
|
/* Diff colors (dark) - from hapi-app */
|
|
--app-diff-added-bg: #0d2e1f;
|
|
--app-diff-added-text: #c9d1d9;
|
|
--app-diff-removed-bg: #3f1b23;
|
|
--app-diff-removed-text: #c9d1d9;
|
|
|
|
/* Git status colors (dark) */
|
|
--app-git-staged-color: #4ade80;
|
|
--app-git-unstaged-color: #f59e0b;
|
|
--app-git-deleted-color: #f87171;
|
|
--app-git-renamed-color: #60a5fa;
|
|
--app-git-untracked-color: #9ca3af;
|
|
|
|
/* Badge colors (dark) */
|
|
--app-badge-warning-bg: rgba(251, 191, 36, 0.2);
|
|
--app-badge-warning-text: #fbbf24;
|
|
--app-badge-warning-border: rgba(251, 191, 36, 0.3);
|
|
--app-badge-success-bg: rgba(74, 222, 128, 0.2);
|
|
--app-badge-success-text: #4ade80;
|
|
--app-badge-success-border: rgba(74, 222, 128, 0.3);
|
|
--app-badge-error-bg: rgba(248, 113, 113, 0.2);
|
|
--app-badge-error-text: #fca5a5;
|
|
--app-badge-error-border: rgba(248, 113, 113, 0.35);
|
|
}
|
|
|
|
html {
|
|
font-size: calc(100% * var(--app-font-scale));
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
height: var(--tg-viewport-stable-height, 100dvh);
|
|
overflow: hidden;
|
|
touch-action: pan-x pan-y;
|
|
overscroll-behavior: none;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--app-bg);
|
|
color: var(--app-fg);
|
|
}
|
|
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.session-list-item:hover,
|
|
.session-list-new-button:hover {
|
|
background-color: var(--app-subtle-bg);
|
|
}
|
|
}
|
|
|
|
/* Markdown styles */
|
|
.markdown-content a { color: var(--app-link); text-decoration: underline; }
|
|
.markdown-content code { background: var(--app-inline-code-bg); padding: 0.1em 0.3em; border-radius: 4px; font-size: 0.9em; }
|
|
.markdown-content blockquote { border-left: 3px solid var(--app-hint); padding-left: 0.75rem; margin: 0.5rem 0; opacity: 0.85; }
|
|
.markdown-content ul, .markdown-content ol { padding-left: 1.5rem; margin: 0.5rem 0; }
|
|
.markdown-content table { border-collapse: collapse; width: 100%; }
|
|
.markdown-content th, .markdown-content td { border: 1px solid var(--app-border); padding: 0.25rem 0.5rem; }
|
|
|
|
.aui-md-codeblock pre.shiki {
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
background-color: transparent !important;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.aui-md-codeblock pre.shiki code {
|
|
display: block;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
.aui-md-codeblock .shiki,
|
|
.aui-md-codeblock .shiki span {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Shiki dual theme colors */
|
|
.shiki,
|
|
.shiki span {
|
|
color: var(--shiki-light) !important;
|
|
font-style: var(--shiki-light-font-style) !important;
|
|
font-weight: var(--shiki-light-font-weight) !important;
|
|
text-decoration: var(--shiki-light-text-decoration) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .shiki,
|
|
html[data-theme="dark"] .shiki span {
|
|
color: var(--shiki-dark) !important;
|
|
font-style: var(--shiki-dark-font-style) !important;
|
|
font-weight: var(--shiki-dark-font-weight) !important;
|
|
text-decoration: var(--shiki-dark-text-decoration) !important;
|
|
}
|
|
|
|
/* Ultrathink rainbow sparkle effect - per-letter wave animation */
|
|
@keyframes rainbow-wave {
|
|
0% { color: #ff5555; } /* red */
|
|
14% { color: #ffaa00; } /* orange */
|
|
28% { color: #ffff55; } /* yellow */
|
|
42% { color: #55ff55; } /* green */
|
|
57% { color: #55ffff; } /* cyan */
|
|
71% { color: #5555ff; } /* blue */
|
|
85% { color: #ff55ff; } /* magenta/pink */
|
|
100% { color: #ff5555; } /* red */
|
|
}
|
|
|
|
@keyframes sparkle-wave {
|
|
0%, 100% {
|
|
filter: brightness(1);
|
|
}
|
|
50% {
|
|
filter: brightness(0.7);
|
|
}
|
|
}
|
|
|
|
.rainbow-letter {
|
|
display: inline-block;
|
|
animation: rainbow-wave 2s linear infinite, sparkle-wave 2s ease-in-out infinite;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* PWA install prompt animation */
|
|
@keyframes slide-up {
|
|
from {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slide-up 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes menu-pop {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.98);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.animate-menu-pop {
|
|
animation: menu-pop 0.18s ease-out;
|
|
}
|
|
|
|
/* Syncing spinner animation */
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* New messages indicator bounce animation */
|
|
@keyframes bounce-in {
|
|
0% {
|
|
transform: translateX(-50%) scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: translateX(-50%) scale(1.05);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-bounce-in {
|
|
animation: bounce-in 0.3s ease-out;
|
|
}
|
|
|
|
/* ReactQueryDevtools button - move to middle-right to avoid blocking UI */
|
|
.tsqd-open-btn-container {
|
|
bottom: 50% !important;
|
|
transform: translateY(50%);
|
|
}
|