Nikolay Tatarinov
2fb553567f
Some checks failed
CI / lint-and-test (push) Failing after 45s
- Added Node.js setup and webapp testing steps to the CI workflow for improved integration. - Updated HTML to link multiple CSS files for better modularity and organization of styles. - Removed deprecated `style.css` and introduced new CSS files for base styles, calendar, day detail, hints, markers, states, and duty list to enhance maintainability and readability. - Implemented new styles for improved presentation of duty information and user interactions. - Added unit tests for new API functions and contact link rendering to ensure functionality and reliability.
95 lines
2.3 KiB
CSS
95 lines
2.3 KiB
CSS
/* === Variables & themes */
|
|
:root {
|
|
--bg: #1a1b26;
|
|
--surface: #24283b;
|
|
--text: #c0caf5;
|
|
--muted: #565f89;
|
|
--accent: #7aa2f7;
|
|
--duty: #9ece6a;
|
|
--today: #bb9af7;
|
|
--unavailable: #e0af68;
|
|
--vacation: #7dcfff;
|
|
--error: #f7768e;
|
|
--timeline-date-width: 3.6em;
|
|
--timeline-track-width: 10px;
|
|
--transition-fast: 0.15s;
|
|
--transition-normal: 0.25s;
|
|
--ease-out: cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Light theme: prefer Telegram themeParams (--tg-theme-*), fallback to Telegram-like palette */
|
|
[data-theme="light"] {
|
|
--bg: var(--tg-theme-bg-color, #f0f1f3);
|
|
--surface: var(--tg-theme-secondary-bg-color, #e0e2e6);
|
|
--text: var(--tg-theme-text-color, #343b58);
|
|
--muted: var(--tg-theme-hint-color, #6b7089);
|
|
--accent: var(--tg-theme-link-color, #2e7de0);
|
|
--duty: #587d0a;
|
|
--today: var(--tg-theme-link-color, var(--tg-theme-accent-text-color, #2481cc));
|
|
--unavailable: #b8860b;
|
|
--vacation: #0d6b9e;
|
|
--error: #c43b3b;
|
|
}
|
|
|
|
/* Dark theme: prefer Telegram themeParams, fallback to Telegram dark palette */
|
|
[data-theme="dark"] {
|
|
--bg: var(--tg-theme-bg-color, #17212b);
|
|
--surface: var(--tg-theme-secondary-bg-color, #232e3c);
|
|
--text: var(--tg-theme-text-color, #f5f5f5);
|
|
--muted: var(--tg-theme-hint-color, #708499);
|
|
--accent: var(--tg-theme-link-color, #6ab3f3);
|
|
--today: var(--tg-theme-link-color, var(--tg-theme-accent-text-color, #6ab2f2));
|
|
--duty: #5c9b4a;
|
|
--unavailable: #b8860b;
|
|
--vacation: #5a9bb8;
|
|
--error: #e06c75;
|
|
}
|
|
|
|
/* === Layout & base */
|
|
html {
|
|
scrollbar-gutter: stable;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
html::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.container {
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
padding: 12px;
|
|
padding-top: 0px;
|
|
padding-bottom: env(safe-area-inset-bottom, 12px);
|
|
}
|
|
|
|
[data-theme="light"] .container {
|
|
border-radius: 12px;
|
|
}
|