Nikolay Tatarinov
54446d7b0f
- Updated HTML structure for navigation buttons in the calendar, adding SVG icons for improved visual clarity. - Introduced a new muted text style in CSS for better presentation of empty duty list messages. - Enhanced calendar CSS for navigation buttons and day indicators, improving layout and responsiveness. - Improved error handling in the UI by adding retry functionality to the error display, allowing users to retry actions directly from the error message. - Updated internationalization messages to include a retry option for error handling. - Added unit tests to verify the new error handling behavior and UI updates.
104 lines
2.4 KiB
CSS
104 lines
2.4 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);
|
|
}
|
|
|
|
/* Muted text (e.g. empty duty list message). */
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
[data-theme="light"] .container {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
[data-theme="dark"] .container {
|
|
border-radius: 12px;
|
|
}
|