Дизайн Артёма

2026-09-22 14:09:02 +03:00
parent cae64639bd
commit 8b12760dde
40 changed files with 3114 additions and 5008 deletions
@@ -1,178 +1,20 @@
-/* Shared modal/toast/skeleton primitives. */
-
-.modal-title {
-  font-size: 19px;
-  line-height: 1.2;
-  color: #f1d69a;
-}
-
-
-.modal-shell[hidden] {
-  display: none;
-}
-
-
-.modal-shell {
-  position: fixed;
-  inset: 0;
-  z-index: 24;
-}
-
-
-.modal-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(5, 9, 16, 0.74);
-  backdrop-filter: blur(4px);
-}
-
-
-.modal-dialog {
-  position: absolute;
-  left: 16px;
-  right: 16px;
-  bottom: 24px;
-  display: grid;
-  gap: 12px;
-  box-shadow: var(--shadow);
-}
-
-
-.modal {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.62);
-  display: grid;
-  place-items: center;
-  padding: 20px;
-  z-index: 20;
-}
-
-
-.modal-card {
-  width: min(100%, 390px);
-  background: #172238;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 16px;
-  padding: 14px;
-}
-
-
-.modal-card {
-  background: linear-gradient(165deg, rgba(16, 31, 58, 0.97), rgba(10, 18, 36, 0.97));
-  border-color: transparent;
-  box-shadow: 0 20px 38px rgba(2, 6, 12, 0.55);
-}
-
-
-/* ===== Channels UX Stabilization ===== */
-.toast-host {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: calc(18px + env(safe-area-inset-bottom));
-  display: grid;
-  justify-items: center;
-  gap: 8px;
-  z-index: 60;
-  pointer-events: none;
-}
-
-
-.toast {
-  min-width: min(88vw, 320px);
-  max-width: min(92vw, 420px);
-  border-radius: 14px;
-  padding: 11px 14px;
-  border: 1px solid transparent;
-  color: #f2dca8;
-  background: rgba(10, 14, 23, 0.8);
-  backdrop-filter: blur(12px);
-  box-shadow: 0 16px 30px rgba(1, 6, 12, 0.55);
-  opacity: 0;
-  transform: translateY(8px);
-  transition: opacity 0.22s ease, transform 0.22s ease;
-}
-
-
-.toast.is-visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-
-.toast.is-hiding {
-  opacity: 0;
-  transform: translateY(8px);
-}
-
-
-.toast.toast--error {
-  color: #ffd8e0;
-  border-color: rgba(234, 122, 150, 0.45);
-}
-
-
-.skeleton-card {
-  display: grid;
-  gap: 8px;
-}
-
-
-.skeleton-line {
-  height: 10px;
-  border-radius: 999px;
-  background: linear-gradient(100deg, rgba(93, 117, 154, 0.10), rgba(167, 191, 226, 0.24), rgba(93, 117, 154, 0.10));
-  background-size: 220% 100%;
-  animation: channels-shimmer 1.2s linear infinite;
-}
-
-
+/* Общие диалоги, уведомления и загрузка. */
+.modal-title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--text-primary); }
+.modal-shell[hidden] { display: none; }
+.modal-shell { position: fixed; inset: 0; z-index: 60; }
+.modal-backdrop { position: absolute; inset: 0; background: var(--scrim); }
+.modal-dialog { position: absolute; left: 16px; right: 16px; bottom: 24px; display: grid; gap: 12px; box-shadow: var(--shadow); }
+.modal { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; padding: 16px; z-index: 60; }
+.modal-card { width: min(100%, 560px); max-height: calc(100dvh - 32px); overflow-y: auto; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); }
+.toast-host { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; z-index: 140; pointer-events: none; }
+.toast { max-width: min(92vw,420px); padding: 12px 16px; border-radius: 12px; color: var(--text-primary); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border-subtle); opacity: 0; transition: opacity 160ms; }
+.toast.is-visible { opacity: 1; }
+.toast.is-hiding { opacity: 0; }
+.toast.toast--error { color: var(--danger); }
+.skeleton-card { display: grid; gap: 12px; }
+.skeleton-line { height: 12px; border-radius: 6px; background: var(--surface-selected); animation: skeleton-pulse 1.2s ease-in-out infinite alternate; }
 .skeleton-line.w-40 { width: 40%; }
-
 .skeleton-line.w-70 { width: 70%; }
-
 .skeleton-line.w-90 { width: 90%; }
-
-
-#about-channel-modal.modal,
-#edit-channel-modal.modal,
-#reply-modal.modal,
-#channel-message-modal.modal,
-#channel-edit-description-modal.modal,
-#channels-subscribe-modal.modal,
-#thread-reply-modal.modal {
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-
-#about-channel-modal .modal-card,
-#edit-channel-modal .modal-card,
-#reply-modal .modal-card,
-#channel-message-modal .modal-card,
-#channel-edit-description-modal .modal-card,
-#channels-subscribe-modal .modal-card,
-#thread-reply-modal .modal-card {
-  background: rgba(15, 18, 30, 0.92);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid transparent;
-  border-radius: 20px;
-  padding: 24px;
-}
-
-
-#about-channel-modal .modal-title,
-#edit-channel-modal .modal-title,
-#reply-modal .modal-title,
-#channel-message-modal .modal-title,
-#channel-edit-description-modal .modal-title,
-#channels-subscribe-modal .modal-title,
-#thread-reply-modal .modal-title {
-  color: rgba(255, 200, 50, 0.95);
-  font-size: 18px;
-  font-weight: 700;
-  margin-bottom: 16px;
-}
+@keyframes skeleton-pulse { to { opacity: .4; } }
+@media (prefers-reduced-motion: reduce) { .skeleton-line, .toast { animation: none; transition: none; } }