aidar/SHiNE-server
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: новый общий стиль, тёмная/светлая тема, настраиваемая палитра

Browse Source 
- styles/main.css: роли цветов (по умолчанию «Индиго»), шкала отступов/скруглений/шрифтов,
  цвета отношений для обеих тем; жёсткие цвета в стилях заменены на роли.
- Палитра: пресеты и личные правки, «Оформление» Авто/День/Ночь, долгое нажатие —
  редактор цветов с экспортом/импортом.
- Каналы: пузыри постов автора, плашки дней, строка «Написать в канал…», «О канале»,
  создание канала с адресом из названия; лента открывается на свежих постах.
- Чаты: плоский список, чипы-фильтры, пузыри, плашки дней; нижняя панель скрыта в переписке.
- Корневые разделы — единая шапка; профиль и чужой профиль — общая карточка;
  настройки, кошелёк, сеансы — меню-списки.
- Нижняя панель: иконки без подписей, бейджи на иконках.
- confirmDialog вместо window.confirm/alert; на телефоне диалоги — шторки снизу.
- docs/UI-Design/ISSUES-for-dev.md — найденные ошибки сервера/UI.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
q
2026-09-26 10:05:26 +03:00
co-authored by Claude Opus 5.5
parent 6e5b57fd7c
commit f8900e531a
94 changed files with 3337 additions and 2432 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shine-UI/styles/components/attachments.css
+69 -12
View File
@@ -14,7 +14,7 @@
.message-attachment-carousel-viewport {
align-items: center;
background: var(--surface);
background: transparent;
border: 1px solid var(--border-subtle);
border-radius: 14px;
display: grid;
@@ -155,11 +155,31 @@
.message-attachment-media-frame > .message-attachment-download {
bottom: 0.75rem;
bottom: 0.5rem;
position: absolute;
right: 0.75rem;
right: 0.5rem;
}
.message-attachment-download--icon {
width: 36px;
min-height: 36px;
height: 36px;
padding: 0;
justify-content: center;
border-radius: 50%;
color: #fff;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.message-attachment-download--icon svg { width: 18px; height: 18px; }
.message-attachment-download--icon:hover { background: rgba(0, 0, 0, 0.6); }
.message-attachment-media-frame:not(.is-loaded) { background: var(--surface-selected); animation: attachment-loading 1.2s ease-in-out infinite alternate; }
.message-attachment-media-frame.is-loaded { background: transparent; }
@keyframes attachment-loading { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .message-attachment-media-frame:not(.is-loaded) { animation: none; } }
.message-attachment-file-card {
align-items: center;
@@ -342,8 +362,48 @@
.ar-attachment-manager-card {
max-width: min(92vw, 34rem);
gap: 16px;
}
.ar-attachment-manager-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ar-attachment-manager-close { width: 44px; min-width: 44px; padding: 0; font-size: 18px; color: var(--text-secondary); }
.ar-attachment-note { margin: 0; font-size: .8125rem; line-height: 1.25rem; color: var(--text-secondary); }
.ar-attachment-alt-sources { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ar-attachment-link { min-height: 44px; padding: 0; justify-self: start; color: var(--accent); background: transparent; font-weight: 500; }
.ar-attachment-file-picker {
min-height: 56px;
padding: 8px;
display: flex;
align-items: center;
gap: 12px;
border: 1px dashed var(--border-control);
border-radius: 12px;
background: var(--surface);
cursor: pointer;
}
.ar-attachment-file-picker:hover { border-color: var(--accent); }
.ar-attachment-file-picker:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ar-attachment-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ar-attachment-file-btn {
flex-shrink: 0;
min-height: 40px;
padding: 0 14px;
display: inline-flex;
align-items: center;
border-radius: 10px;
color: var(--on-accent);
background: var(--accent);
font-weight: 600;
}
.ar-attachment-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: .875rem; }
.ar-attachment-summary { color: var(--text-primary); font-size: .875rem; }
.ar-attachment-ok { color: var(--success); font-weight: 600; }
.ar-attachment-details { color: var(--text-secondary); font-size: .8125rem; line-height: 1.25rem; }
.ar-attachment-details summary { min-height: 36px; display: flex; align-items: center; color: var(--accent); cursor: pointer; }
.ar-attachment-details > div { overflow-wrap: anywhere; }
.ar-attachment-manager-card--wide {
max-width: min(96vw, 58rem);
@@ -359,10 +419,7 @@
}
.ar-attachment-wallet-select,
.ar-attachment-wallet-select option {
color: var(--accent);
}
.ar-attachment-wallet-select option { color: var(--text-primary); background: var(--surface); }
.ar-attachment-history-table-wrap {
@@ -494,7 +551,7 @@
border-radius: 999px;
bottom: 0.42rem;
color: var(--text-primary);
font-size: 0.62rem;
font-size: 0.6875rem;
left: 0.42rem;
padding: 0.2rem 0.46rem;
position: absolute;
@@ -533,7 +590,7 @@
color: var(--text-secondary);
display: flex;
flex-wrap: wrap;
font-size: 0.6rem;
font-size: 0.6875rem;
gap: 0.22rem;
line-height: 1.05;
min-width: 0;
@@ -544,7 +601,7 @@
background: var(--border-subtle);
border-radius: 0.34rem;
color: var(--text-secondary);
font-size: 0.56rem;
font-size: 0.6875rem;
line-height: 1.05;
max-width: 100%;
min-width: 0;
@@ -558,7 +615,7 @@
.ar-attachment-status {
border-radius: 999px;
flex: 0 0 auto;
font-size: 0.58rem;
font-size: 0.6875rem;
font-weight: 800;
line-height: 1;
padding: 0.2rem 0.32rem;
@@ -588,7 +645,7 @@
border-radius: 999px;
color: var(--accent);
flex: 0 0 auto;
font-size: 0.58rem;
font-size: 0.6875rem;
font-weight: 800;
line-height: 1;
padding: 0.2rem 0.32rem;
shine-UI/styles/components/avatar.css
+10 -15
View File
@@ -6,9 +6,8 @@
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
border: 1px solid rgba(155, 182, 233, 0.46);
background: rgba(13, 26, 50, 0.86);
box-shadow: inset 0 0 0 1px rgba(240, 248, 255, 0.1);
border: 1px solid var(--border-control);
background: var(--surface);
}
@@ -30,7 +29,7 @@
.avatar-wizard-meta {
font-size: 13px;
line-height: 1.35;
color: #d9e7ff;
color: var(--text-secondary);
word-break: break-word;
}
@@ -38,7 +37,7 @@
.avatar-wizard-error {
min-height: 18px;
font-size: 13px;
color: #f6a8b3;
color: var(--danger);
}
@@ -63,11 +62,11 @@
flex: 0 0 auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: linear-gradient(130deg, #3c4f73, #243352);
background: var(--surface-selected);
display: grid;
place-items: center;
font-weight: 700;
color: #e5ebff;
font-weight: 600;
color: var(--accent);
font-size: 14px;
}
@@ -191,7 +190,7 @@
place-items: center;
border: 0;
background: transparent;
color: #ffffff;
color: var(--text-primary);
box-shadow: none;
}
@@ -211,12 +210,8 @@
display: grid;
place-items: center;
overflow: hidden;
background: #454b55;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -8px 16px rgba(0, 0, 0, 0.16);
background: var(--surface-selected);
color: var(--accent);
}
shine-UI/styles/components/call-ui.css
+39 -39
View File
@@ -28,8 +28,8 @@
gap: 10px;
min-height: 44px;
padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
border-bottom: 1px solid rgba(159, 255, 196, 0.28);
background: linear-gradient(180deg, rgba(30, 138, 79, 0.98), rgba(18, 106, 60, 0.98));
border-bottom: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
background: linear-gradient(180deg, var(--success), var(--surface));
box-shadow: 0 10px 24px rgba(5, 30, 16, 0.28);
pointer-events: auto;
}
@@ -42,7 +42,7 @@
background: transparent;
background-image: none;
box-shadow: none;
color: #ffffff;
color: var(--text-primary);
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -60,22 +60,22 @@
.call-minimized-bar-text:hover {
color: #ffffff;
color: var(--text-primary);
filter: brightness(1.12);
}
.call-minimized-bar-text:active {
color: #ffffff;
background: rgba(0, 0, 0, 0.12);
color: var(--text-primary);
background: color-mix(in srgb, var(--surface) 12%, transparent);
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.58),
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
inset 0 -1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
transform: translateY(1px) scale(0.97);
filter: brightness(0.9);
}
.call-minimized-bar-text:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
@@ -109,7 +109,7 @@
background: transparent;
background-image: none;
box-shadow: none;
color: #ffffff;
color: var(--text-primary);
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -119,7 +119,7 @@
.call-icon-btn:hover {
color: #ffffff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -129,12 +129,12 @@
.call-icon-btn:active {
color: #ffffff;
background: rgba(0, 0, 0, 0.12);
color: var(--text-primary);
background: color-mix(in srgb, var(--surface) 12%, transparent);
border: 0;
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.58),
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
inset 0 -1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
transform: translateY(1px) scale(0.97);
filter: brightness(0.9);
}
@@ -142,7 +142,7 @@
.call-icon-btn:disabled {
opacity: 1;
color: rgba(255, 255, 255, 0.42);
color: var(--text-secondary);
background: transparent;
border: 0;
box-shadow: none;
@@ -153,7 +153,7 @@
.call-icon-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
@@ -193,7 +193,7 @@
.call-overlay {
position: absolute;
inset: 0;
background: rgba(4, 8, 16, 0.88);
background: var(--surface);
backdrop-filter: blur(8px);
pointer-events: auto;
}
@@ -205,13 +205,13 @@
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at 50% 18%, rgba(79, 124, 208, 0.24), transparent 34%),
linear-gradient(180deg, rgba(11, 20, 38, 0.98), rgba(3, 7, 15, 1));
radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 34%),
linear-gradient(180deg, var(--surface), var(--surface));
}
.call-overlay-panel--remote-video {
background: #010203;
background: var(--surface);
}
@@ -234,7 +234,7 @@
min-height: 22px;
font-size: 14px;
font-weight: 700;
color: rgba(236, 242, 255, 0.94);
color: var(--text-primary);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.44);
}
@@ -252,7 +252,7 @@
bottom: calc(12px + env(safe-area-inset-bottom));
z-index: 4;
text-align: center;
color: rgba(207, 219, 246, 0.84);
color: var(--text-primary);
font-size: 13px;
pointer-events: none;
}
@@ -263,13 +263,13 @@
inset: 0;
overflow: hidden;
background:
radial-gradient(circle at 50% 24%, rgba(54, 88, 151, 0.48), transparent 30%),
linear-gradient(180deg, rgba(9, 17, 32, 0.98), rgba(2, 5, 12, 1));
radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--accent) 48%, transparent), transparent 30%),
linear-gradient(180deg, var(--surface), var(--surface));
}
.call-video-stage--remote-video {
background: #000;
background: var(--surface);
}
@@ -279,7 +279,7 @@
width: 100%;
height: 100%;
object-fit: cover;
background: #02050a;
background: var(--surface);
}
@@ -320,8 +320,8 @@
min-width: 100%;
min-height: 100%;
border-radius: 999px;
border: 2px solid rgba(221, 233, 255, 0.2);
background: linear-gradient(180deg, rgba(18, 31, 58, 0.96), rgba(9, 15, 29, 0.98));
border: 2px solid var(--border-subtle);
background: linear-gradient(180deg, var(--surface), var(--surface));
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
}
@@ -337,7 +337,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #f4f8ff;
color: var(--text-primary);
font-size: clamp(20px, 5.8vw, 28px);
font-weight: 700;
letter-spacing: 0.02em;
@@ -345,7 +345,7 @@
.call-kind {
color: #ffffff;
color: var(--text-primary);
font-size: clamp(27px, 8vw, 40px);
font-weight: 800;
letter-spacing: 0.05em;
@@ -355,7 +355,7 @@
.call-hero-status {
max-width: 88vw;
color: rgba(211, 223, 246, 0.9);
color: var(--text-primary);
font-size: 14px;
line-height: 1.35;
}
@@ -370,8 +370,8 @@
aspect-ratio: 3 / 4;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(176, 205, 255, 0.38);
background: rgba(7, 12, 22, 0.94);
border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
background: var(--surface);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
cursor: grab;
touch-action: none;
@@ -436,7 +436,7 @@
background: transparent;
background-image: none;
box-shadow: none;
color: #ffffff;
color: var(--text-primary);
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -447,7 +447,7 @@
.call-accept-btn:hover {
color: #ffffff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -457,12 +457,12 @@
.call-accept-btn:active {
color: #ffffff;
background: rgba(0, 0, 0, 0.12);
color: var(--text-primary);
background: color-mix(in srgb, var(--surface) 12%, transparent);
border: 0;
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.58),
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
inset 0 -1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
transform: translateY(1px) scale(0.97);
filter: brightness(0.9);
}
@@ -470,7 +470,7 @@
.call-accept-btn:disabled {
opacity: 1;
color: rgba(255, 255, 255, 0.42);
color: var(--text-secondary);
background: transparent;
border: 0;
box-shadow: none;
@@ -481,7 +481,7 @@
.call-accept-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
shine-UI/styles/components/channel-editor.css
+28 -20
View File
@@ -92,19 +92,21 @@
overflow-y: hidden;
width: 100%;
min-height: 160px;
padding: 0;
padding: 12px 14px;
resize: none;
border: 0;
border: 1px solid var(--border-subtle);
border-radius: 14px;
outline: 0;
color: var(--text-primary);
background: transparent;
background: var(--surface);
transition: border-color 160ms ease;
font: inherit;
font-size: 16px;
line-height: 24px;
caret-color: var(--accent);
}
.channel-editor__input::placeholder { color: var(--text-secondary); }
.channel-editor__input::placeholder { color: color-mix(in srgb, var(--text-secondary) 62%, var(--background)); opacity: 1; }
.channel-editor__type {
display: grid;
@@ -113,17 +115,7 @@
font-size: 13px;
}
.channel-editor__type .select {
color: var(--text-primary);
background: var(--surface);
border-color: var(--border-control);
}
.channel-editor__input:focus-visible {
border-radius: 4px;
outline: 2px solid var(--focus-ring);
outline-offset: 4px;
}
.channel-editor__input:focus-visible { outline: 0; border-color: var(--accent); }
.channel-editor__attachments { display: grid; gap: 8px; }
.channel-editor__author { display: flex; align-items: center; gap: 12px; font-size: .875rem; }
@@ -178,16 +170,31 @@
}
.channel-editor__attach {
width: 44px;
padding: 0;
display: inline-grid;
place-items: center;
color: var(--accent);
border: 1px solid var(--border-control);
background: var(--surface);
}
.channel-editor__attach svg { width: 22px; height: 22px; stroke-width: 1.9; }
.channel-editor__submit {
color: var(--on-accent);
background: var(--accent);
}
.channel-editor__submit:disabled {
opacity: 1;
color: var(--text-secondary);
background: var(--surface-selected);
}
.channel-editor__footer.has-extra { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.channel-editor__type { display: block; min-width: 0; }
.channel-editor__type-select { min-height: 44px; width: auto; max-width: 9.5rem; padding-left: 12px; border-radius: 12px; font-size: .875rem; }
.channel-editor__counter {
min-width: 0;
color: var(--text-secondary);
@@ -207,11 +214,12 @@
}
}
@media (max-width: 370px) {
.channel-editor__footer { grid-template-columns: auto minmax(0, 1fr); }
.channel-editor__counter { grid-column: 1 / -1; grid-row: 1; }
.channel-editor__attach { grid-column: 1; }
.channel-editor__submit { grid-column: 2; }
@media (max-width: 400px) {
.channel-editor__footer.has-extra { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
.channel-editor__footer.has-extra .channel-editor__type { grid-row: 1; grid-column: 1 / 3; }
.channel-editor__footer.has-extra .channel-editor__counter { grid-row: 1; grid-column: 3; }
.channel-editor__footer.has-extra .channel-editor__attach { grid-row: 2; grid-column: 1; }
.channel-editor__footer.has-extra .channel-editor__submit { grid-row: 2; grid-column: 3; }
}
@media (prefers-reduced-motion: reduce) {
shine-UI/styles/components/chips.css
+56
View File
@@ -0,0 +1,56 @@
/* Чипы-фильтры: ряд над списком («Все / Близкие / …»), как папки в мессенджерах.
* Выбранный чип выглядит так же, как выбранная вкладка (.tab-btn[aria-checked]). */
.chip-row {
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding: var(--space-1) 0;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip,
.fg-filter-chip {
flex-shrink: 0;
min-height: 36px;
padding: 0 14px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
color: var(--text-secondary);
background: var(--surface);
font: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: 1;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.chip:hover,
.fg-filter-chip:hover { color: var(--text-primary); }
.chip[aria-pressed='true'],
.chip.is-active,
.fg-filter-chip.is-active {
color: var(--text-primary);
background: var(--surface-selected);
border-color: color-mix(in srgb, var(--accent) 55%, var(--border-control));
font-weight: var(--weight-bold);
box-shadow: none;
}
.chip:focus-visible,
.fg-filter-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.chip-row--bleed {
margin-inline: calc(-1 * var(--page-gutter));
padding-inline: var(--page-gutter);
scroll-padding-inline: var(--page-gutter);
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
shine-UI/styles/components/emoji-picker.css
+8 -8
View File
@@ -19,7 +19,7 @@
-ms-overflow-style: none;
padding: 10px;
border-radius: 14px;
background: rgba(12, 19, 31, 0.98);
background: var(--surface);
box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.2);
}
@@ -39,7 +39,7 @@
.emoji-picker-section-title {
color: rgba(205, 218, 246, 0.78);
color: var(--text-primary);
font-size: 12px;
font-weight: 600;
}
@@ -67,7 +67,7 @@
background: transparent;
background-image: none;
box-shadow: none;
color: #fff;
color: var(--text-primary);
text-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -107,7 +107,7 @@
.emoji-picker-tab:hover,
.emoji-picker-item:hover {
color: #fff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -124,12 +124,12 @@
.emoji-picker-tab:active,
.emoji-picker-item:active {
color: #fff;
background: rgba(0, 0, 0, 0.12);
color: var(--text-primary);
background: color-mix(in srgb, var(--surface) 12%, transparent);
border: 0;
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.58),
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
inset 0 -1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
transform: translateY(1px) scale(0.97);
filter: brightness(0.9);
}
@@ -137,7 +137,7 @@
.emoji-picker-tab:focus-visible,
.emoji-picker-item:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
shine-UI/styles/components/modal.css
+21
View File
@@ -18,3 +18,24 @@
.skeleton-line.w-90 { width: 90%; }
@keyframes skeleton-pulse { to { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .skeleton-line, .toast { animation: none; transition: none; } }
@media (max-width: 599px) {
.modal { place-items: end stretch; padding: 0; }
.modal > .modal-card {
width: 100%;
max-width: 100%;
max-height: calc(100dvh - 48px - env(safe-area-inset-top));
border-width: 1px 0 0;
border-radius: 20px 20px 0 0;
padding-bottom: calc(20px + env(safe-area-inset-bottom));
animation: modal-sheet-in 180ms ease-out;
}
}
@keyframes modal-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } }
/* Общий диалог подтверждения (js/components/confirm-dialog.js). */
.confirm-dialog__card { width: min(100%, 400px); display: grid; gap: 12px; }
.confirm-dialog__text { margin: 0; color: var(--text-secondary); font-size: .9375rem; line-height: 1.375rem; overflow-wrap: anywhere; }
.confirm-dialog__danger { color: #fff; background: var(--danger); }
:root[data-theme='dark'] .confirm-dialog__danger { color: var(--background); }
shine-UI/styles/components/nav-list.css
+36
View File
@@ -0,0 +1,36 @@
/* Меню-список: группа строк «название / подсказка / ›» — для переходов по разделам
* (кошелёк, настройки разработчика и т. п.). Для действий без перехода — обычные кнопки. */
.nav-list { display: grid; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.nav-list__title { margin: var(--space-2) 0 var(--space-1); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-bold); }
.nav-row {
width: 100%;
min-height: 56px;
padding: 10px 40px 10px 14px;
position: relative;
display: grid;
align-content: center;
gap: 2px;
border: 0;
border-top: 1px solid var(--border-subtle);
border-radius: 0;
color: var(--text-primary);
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
}
.nav-row:first-child { border-top: 0; }
.nav-row::after { content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 22px; line-height: 1; }
.nav-row:hover { background: var(--surface-selected); }
.nav-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.nav-row__label { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-medium); }
.nav-row__hint { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-xs); }
.nav-row--danger .nav-row__label { color: var(--danger); }
.nav-row--danger::after { content: none; }
.nav-row__label.is-empty { color: var(--text-secondary); font-weight: 400; }
.nav-list > .nav-row.profile-param-item { margin: 0; border-radius: 0; background: transparent; box-shadow: none; }
.nav-list > .nav-row.profile-param-item:hover { background: var(--surface-selected); }
.language-row::after { content: none; }
.language-row[aria-checked='true']::after { content: '✓'; color: var(--accent); font-size: 18px; font-weight: var(--weight-bold); }
shine-UI/styles/components/overflow-dots.css
+2 -2
View File
@@ -23,8 +23,8 @@
border-radius: 50%;
background: currentColor;
box-shadow:
0 0 5px rgba(92, 190, 255, 0.72),
0 0 10px rgba(72, 145, 255, 0.34);
0 0 5px color-mix(in srgb, var(--accent) 72%, transparent),
0 0 10px color-mix(in srgb, var(--accent) 34%, transparent);
}
shine-UI/styles/components/palette-editor.css
+41
View File
@@ -0,0 +1,41 @@
/* Скрытый редактор палитры (js/components/palette-editor.js). */
.palette-editor__card { display: grid; gap: 16px; }
.palette-editor__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.palette-editor__close { width: 44px; min-width: 44px; padding: 0; font-size: 18px; color: var(--text-secondary); }
.palette-editor__section { display: grid; gap: 8px; }
.palette-editor__label { font-size: .75rem; line-height: 1.125rem; color: var(--text-secondary); }
.palette-editor__hint { margin: 0; font-size: .75rem; line-height: 1.125rem; color: var(--text-secondary); }
.palette-editor__roles { display: grid; gap: 2px; }
.palette-editor__role {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 2px 4px;
border-radius: 12px;
cursor: pointer;
}
.palette-editor__role:hover { background: var(--surface-selected); }
.palette-editor__role input[type='color'] {
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--border-control);
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.palette-editor__role input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
.palette-editor__role input[type='color']::-webkit-color-swatch { border: 0; border-radius: 50%; }
.palette-editor__role input[type='color']::-moz-color-swatch { border: 0; border-radius: 50%; }
.palette-editor__role input[type='color']:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.palette-editor__role-name { min-width: 0; font-size: .875rem; line-height: 1.25rem; color: var(--text-primary); }
.palette-editor__changed { margin-left: 4px; font-size: .75rem; color: var(--accent); }
.palette-editor__role-value { font-size: .75rem; color: var(--text-secondary); }
.palette-editor__share { display: grid; gap: 8px; }
.palette-editor__share summary { min-height: 44px; display: flex; align-items: center; color: var(--accent); cursor: pointer; }
.palette-editor__share[open] { gap: 8px; }
.palette-editor__json { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; line-height: 1.125rem; resize: vertical; }
.palette-editor__error { margin: 0; color: var(--danger); font-size: .8125rem; }
.palette-editor__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
shine-UI/styles/components/primitives.css
+122 -54
View File
@@ -65,45 +65,49 @@
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(132, 244, 161, 0.35);
color: #d7ffe3;
background: rgba(132, 244, 161, 0.09);
border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
color: var(--text-primary);
background: color-mix(in srgb, var(--success) 9%, transparent);
font-size: 12px;
font-weight: 600;
}
.badge.alt {
border-color: rgba(83, 216, 251, 0.35);
color: #dff8ff;
background: rgba(83, 216, 251, 0.11);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--text-primary);
background: color-mix(in srgb, var(--accent) 11%, transparent);
}
.badge.is-no {
border-color: rgba(170, 180, 205, 0.3);
color: #c5cedd;
background: rgba(152, 164, 190, 0.14);
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
color: var(--accent);
background: color-mix(in srgb, var(--text-primary) 14%, transparent);
}
.badge.is-yes-official {
border-color: rgba(132, 244, 161, 0.5);
color: #ddffe7;
background: rgba(132, 244, 161, 0.2);
border-color: color-mix(in srgb, var(--success) 50%, transparent);
color: var(--text-primary);
background: color-mix(in srgb, var(--success) 20%, transparent);
}
.badge.is-yes-shine {
border-color: rgba(183, 122, 255, 0.6);
color: #f4e7ff;
background: rgba(176, 102, 255, 0.22);
border-color: color-mix(in srgb, var(--rel-contact) 60%, transparent);
color: var(--text-primary);
background: color-mix(in srgb, var(--rel-contact) 22%, transparent);
}
.field-label {
.field-label,
.form-field > label,
label.meta-muted[for] {
color: var(--text-secondary);
font-size: 13px;
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-medium);
}
@@ -111,17 +115,25 @@
width: 100%;
border: 1px solid var(--border-control);
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
background-color: var(--surface);
min-height: 44px;
padding: 0 12px;
color: var(--text);
padding: 0 40px 0 12px;
color: var(--text-primary);
font-size: 16px;
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
cursor: pointer;
}
.select:focus {
.select:focus-visible {
outline: none;
border-color: var(--focus-ring);
box-shadow: 0 0 0 2px var(--focus-ring);
box-shadow: 0 0 0 1px var(--focus-ring);
}
@@ -137,7 +149,7 @@
.status-line.is-available {
color: #8ef0a8;
color: var(--success);
}
@@ -157,7 +169,7 @@
.help-fab {
position: fixed;
right: max(20px, calc((100vw - min(100vw, 430px)) / 2 + 20px));
right: max(20px, calc((100vw - min(100vw, var(--shell-content-width, 640px))) / 2 + 20px));
bottom: calc(20px + env(safe-area-inset-bottom));
z-index: 12;
}
@@ -175,9 +187,9 @@
display: block;
padding: 14px;
border-radius: var(--radius-md);
background: rgba(83, 216, 251, 0.08);
border: 1px solid rgba(83, 216, 251, 0.22);
color: #d9f8ff;
background: color-mix(in srgb, var(--accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
color: var(--text-primary);
}
@@ -191,8 +203,8 @@
.key-card {
padding: 12px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
background: color-mix(in srgb, var(--text-primary) 3%, transparent);
border: 1px solid var(--border-subtle);
}
@@ -203,8 +215,8 @@
align-items: center;
padding: 11px;
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--text-primary) 2%, transparent);
cursor: pointer;
}
@@ -222,7 +234,7 @@
display: grid;
place-items: center;
background: var(--accent);
color: #08212a;
color: var(--accent);
font-size: 12px;
font-weight: 700;
padding: 0 6px;
@@ -236,9 +248,9 @@
gap: 10px;
border-radius: 10px;
padding: 8px 10px;
color: #c5d2f4;
background: rgba(17, 24, 39, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-primary);
background: var(--surface);
border: 1px solid var(--border-subtle);
}
@@ -255,8 +267,8 @@
.page-label-hint {
margin-bottom: 3px;
color: #8ea2cd;
font-size: 10px;
color: var(--accent);
font-size: 11px;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
@@ -274,7 +286,7 @@
height: 16px;
flex: 0 0 16px;
border-radius: 4px;
color: #ffffff;
color: var(--text-primary);
background: transparent;
border: 0;
box-shadow: none;
@@ -302,16 +314,16 @@
}
.page-label-toggle:active {
background: rgba(0, 0, 0, 0.12);
background: color-mix(in srgb, var(--surface) 12%, transparent);
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.58),
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
inset 0 -1px 2px color-mix(in srgb, var(--text-primary) 8%, transparent);
transform: translateY(1px) scale(0.97);
filter: brightness(0.9);
}
.page-label-toggle:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline: 2px solid var(--border-control);
outline-offset: 2px;
}
@@ -339,10 +351,10 @@
.input {
border: 1px solid var(--line);
border: 1px solid var(--border-control);
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
min-height: 40px;
background: var(--surface);
min-height: 44px;
padding: 0 12px;
width: 100%;
outline: none;
@@ -350,18 +362,26 @@
font-size: 16px;
line-height: 1.4;
caret-color: var(--accent);
-webkit-text-fill-color: var(--text-primary);
}
.input:focus {
border-color: var(--focus-ring);
box-shadow: 0 0 0 2px var(--focus-ring);
box-shadow: 0 0 0 1px var(--focus-ring);
}
.input:disabled,
.select:disabled {
opacity: .6;
cursor: not-allowed;
}
.input::placeholder {
color: var(--text-secondary);
.input::placeholder,
textarea::placeholder {
color: color-mix(in srgb, var(--text-secondary) 62%, var(--surface));
-webkit-text-fill-color: color-mix(in srgb, var(--text-secondary) 62%, var(--surface));
opacity: 1;
}
@@ -373,8 +393,8 @@ textarea.input:-webkit-autofill:hover,
textarea.input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--text-primary) !important;
caret-color: var(--accent);
border-color: var(--line);
box-shadow: 0 0 0 1000px rgba(11, 24, 46, 0.96) inset !important;
border-color: var(--border-control);
box-shadow: 0 0 0 1000px var(--surface) inset !important;
transition: background-color 9999s ease-out 0s;
}
@@ -388,9 +408,19 @@ textarea.input {
.inline-error {
color: var(--danger);
min-height: 18px;
font-size: .8125rem;
line-height: 1.125rem;
}
.inline-error:empty { display: none; }
.form-field { display: grid; gap: 6px; min-width: 0; }
.form-field__optional { font-weight: 400; color: var(--text-secondary); }
.form-field__hint { font-size: .75rem; line-height: 1.125rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.form-field__hint[hidden] { display: none; }
.form-field__meta { display: flex; justify-content: space-between; gap: 8px; min-height: 18px; }
.form-field__counter { margin-left: auto; font-size: .75rem; line-height: 1.125rem; color: var(--text-secondary); }
.form-actions-grid {
display: grid;
@@ -416,7 +446,7 @@ textarea.input {
font-size: 13px;
line-height: 1.35;
word-break: break-all;
color: #dce7ff;
color: var(--text-primary);
}
@@ -518,8 +548,8 @@ body { overflow-x: hidden; }
@keyframes blurRevealMedium {
0% { filter: blur(0px); opacity: 1; color: inherit; }
40% { filter: blur(5px); opacity: 0; color: #D4AF37; }
100% { filter: blur(0px); opacity: 1; color: #D4AF37; }
40% { filter: blur(5px); opacity: 0; color: var(--warning); }
100% { filter: blur(0px); opacity: 1; color: var(--warning); }
}
@@ -536,3 +566,41 @@ body { overflow-x: hidden; }
.notifications-screen {
background: transparent;
}
/* Текст только для экранного диктора. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.search-field {
min-height: var(--control-height);
padding: 0 6px 0 12px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-2);
border: 1px solid var(--border-control);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text-secondary);
}
.search-field:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
.search-field__icon { display: inline-flex; }
.search-field__icon svg { width: 20px; height: 20px; }
.search-field__input { width: 100%; min-width: 0; height: 42px; border: 0; outline: 0; color: var(--text-primary); background: transparent; font-size: 16px; }
.search-field__input::placeholder { color: color-mix(in srgb, var(--text-secondary) 62%, var(--surface)); }
.search-field__action { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); color: var(--accent); background: transparent; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.search-field__action:hover { background: var(--surface-selected); }
.search-field__action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.empty-note { padding: var(--space-5) var(--space-4); text-align: center; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm, 1.45); }
.action-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
shine-UI/styles/components/scroll-to-bottom.css
+22 -63
View File
@@ -1,40 +1,30 @@
.scroll-to-bottom-btn__icon {
line-height: 1;
font-size: 28px;
font-weight: 700;
transform: translateY(-2px);
}
.scroll-to-bottom-btn {
position: absolute;
bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px) + 18px + env(safe-area-inset-bottom));
bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px) + 16px + env(safe-area-inset-bottom));
right: 16px;
z-index: 38;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
border: 0;
background: transparent;
background-image: none;
color: #ffffff;
box-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 38;
border: 1px solid var(--border-subtle);
border-radius: 50%;
color: var(--text-primary);
background: var(--surface);
box-shadow: 0 4px 14px color-mix(in srgb, var(--background) 40%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
width: 54px;
height: 54px;
right: 16px;
border-radius: 50%;
transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.16s ease;
}
/* Shared scroll-to-bottom control. */
/* ===== Общая кнопка прокрутки ленты вниз ===== */
.scroll-to-bottom-btn__icon { display: inline-flex; }
.scroll-to-bottom-btn__icon svg { width: 22px; height: 22px; stroke-width: 2.2; }
.scroll-to-bottom-btn.is-visible {
opacity: 1;
@@ -42,45 +32,14 @@
transform: translateY(0);
}
.scroll-to-bottom-btn:hover {
background: transparent;
box-shadow: none;
filter: none;
}
.scroll-to-bottom-btn:active {
background: rgba(0, 0, 0, 0.12);
box-shadow:
inset 0 3px 8px rgba(0, 0, 0, 0.58),
inset 0 -1px 2px rgba(255, 255, 255, 0.08);
transform: translateY(1px) scale(0.97);
filter: none;
}
.scroll-to-bottom-btn:focus,
.scroll-to-bottom-btn:focus-visible {
background: var(--shine-action-blue);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 26px rgba(var(--shine-action-blue-rgb), 0.34);
}
.scroll-to-bottom-btn:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.62);
outline-offset: 2px;
}
.scroll-to-bottom-btn::before,
.scroll-to-bottom-btn::after {
background: transparent;
background-image: none;
border-color: transparent;
box-shadow: none;
}
.scroll-to-bottom-btn:hover { background: var(--surface-selected); }
.scroll-to-bottom-btn:active { transform: scale(0.95); }
.scroll-to-bottom-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.app-shell--scroll-nested.keyboard-open .scroll-to-bottom-btn {
bottom: calc(var(--keyboard-offset, 0px) + var(--composer-height, 0px) + 18px);
bottom: calc(var(--keyboard-offset, 0px) + var(--composer-height, 0px) + 16px);
}
/* Общая круглая кнопка прокрутки. Её цвет задаётся --shine-action-blue. */
@media (prefers-reduced-motion: reduce) {
.scroll-to-bottom-btn { transition: none; transform: none; }
}
shine-UI/styles/components/tabs.css
+8 -2
View File
@@ -11,6 +11,7 @@
background: var(--surface);
}
.tabs--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabs--auto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tab-btn {
min-height: 44px;
@@ -23,9 +24,12 @@
}
.tab-btn.active {
.tab-btn.active,
.tab-btn[aria-checked='true'] {
background: var(--surface-selected);
color: var(--text);
color: var(--text-primary);
font-weight: 600;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--border-control));
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn:active { transform: scale(.98); }
@@ -58,3 +62,5 @@
background: transparent;
box-shadow: none;
}
.tab-btn .tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: var(--radius-pill); color: var(--on-accent); background: var(--accent); font-size: .6875rem; font-weight: var(--weight-bold); line-height: 1; vertical-align: 1px; }
shine-UI/styles/components/toolbar.css
+26 -9
View File
@@ -1,13 +1,30 @@
/* Пять разделов с одинаковыми действиями и доступными подписями. */
.toolbar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); min-height: 64px; gap: 0; padding: 4px 0; background: var(--background); }
.toolbar-btn { position: relative; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 1px; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); font-size: .6875rem; line-height: 1rem; overflow-wrap: anywhere; cursor: pointer; }
.toolbar-btn > svg { width: 36px; height: 28px; padding: 3px 7px; border-radius: 10px; flex-shrink: 0; }
.toolbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 56px; align-items: center; gap: 0; padding: 4px 0; background: var(--background); }
.toolbar-btn { position: relative; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 1px; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.toolbar-btn.active { color: var(--accent); }
.toolbar-btn.active > svg { background: var(--surface-selected); }
.toolbar-btn:hover, .toolbar-btn:active { background: var(--surface); }
.toolbar-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.toolbar-label-wrap { display: flex; align-items: center; gap: 3px; }
.toolbar-connection-dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--text-secondary); }
.toolbar-icon { position: relative; display: grid; place-items: center; width: 56px; height: 36px; border-radius: 18px; flex-shrink: 0; transition: background-color var(--duration-fast) ease; }
.toolbar-icon--mandala { height: 44px; }
.toolbar-btn.active .toolbar-icon { background: var(--surface-selected); }
.toolbar-btn:active .toolbar-icon { background: var(--surface-selected); }
.toolbar-svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: filter var(--duration-fast) ease; }
.toolbar-svg .toolbar-svg-dot { fill: currentColor; stroke: none; }
.toolbar-btn.active .toolbar-svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent)); }
.toolbar-mandala { display: block; width: 38px; height: 38px; object-fit: contain; transition: transform var(--duration-fast) ease; }
.toolbar-btn.active .toolbar-mandala { transform: scale(1.06); }
.toolbar-icon .toolbar-connection-indicator { position: absolute; right: 8px; bottom: 0; display: block; }
.toolbar-connection-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--text-secondary); box-shadow: 0 0 0 2px var(--background); }
.toolbar-connection-indicator.is-connected .toolbar-connection-dot { background: var(--success); }
.toolbar-connection-indicator.is-disconnected .toolbar-connection-dot { background: var(--danger); }
.toolbar-unread-badge { position: absolute; top: 0; right: 6px; min-width: 16px; padding: 0 4px; border-radius: 12px; color: var(--on-accent); background: var(--accent); font-size: .625rem; line-height: 16px; }
.toolbar-unread-badge { position: absolute; top: -5px; right: 2px; min-width: 18px; padding: 0 5px; border-radius: 12px; color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 2px var(--background); font-size: .6875rem; font-weight: 600; line-height: 18px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
.toolbar-icon, .toolbar-svg, .toolbar-mandala { transition: none; }
.toolbar-btn.active .toolbar-mandala { transform: none; }
}
.toolbar-svg * { vector-effect: non-scaling-stroke; }
:root[data-theme='light'] .toolbar-mandala { filter: saturate(1.4) brightness(0.8); }
shine-UI/styles/components/topbar.css
+4 -1
View File
@@ -1,5 +1,5 @@
:root { --app-topbar-base-height: 56px; --app-topbar-title-size: 1.0625rem; --app-topbar-bg: var(--background); --app-topbar-fg: var(--text-primary); --app-topbar-gold: var(--text-primary); --app-topbar-blue-glow: transparent; --app-topbar-blue-glow-soft: transparent; }
.topbar { width: 100%; min-height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 0 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 4px; background: var(--background); }
.topbar { width: 100%; min-height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 0 0; display: grid; grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr); align-items: center; gap: 4px; background: var(--background); }
.topbar__left, .topbar__center, .topbar__right { display: flex; min-width: 0; align-items: center; }
.topbar__center { justify-content: center; }
.topbar__right { justify-content: flex-end; }
@@ -13,5 +13,8 @@
.topbar button:disabled { color: var(--text-secondary); cursor: default; }
.topbar--profile .topbar__left { visibility: hidden; }
.header-icon-svg { display: block; width: 22px; height: 22px; }
.topbar__back svg { width: 24px; height: 24px; stroke-width: 2.2; }
.topbar__action svg { width: 22px; height: 22px; }
.topbar--root { grid-template-columns: auto minmax(0, 1fr) auto; }
.topbar--root .topbar__center { justify-content: flex-start; }
.topbar--root .topbar__title { font-size: 1.5rem; line-height: 1.875rem; }