diff --git a/ui_server.py b/ui_server.py index c24f6a2..6f3e278 100644 --- a/ui_server.py +++ b/ui_server.py @@ -1311,16 +1311,20 @@ HTML = """ .config-deleted-list { display: grid; gap: 5px; padding-top: 4px; border-top: 1px solid var(--ui-border); } .config-deleted-list[hidden] { display: none !important; } .config-restore-panel[hidden], .config-trash[hidden] { display: none !important; } - .config-canvas { position: relative; display: block; min-height: 760px; padding: 8px 6px 18px; overflow: auto; overscroll-behavior: contain; } - .config-canvas > .config-block { position: absolute; box-sizing: border-box; container: config-block / inline-size; margin: 0; min-width: 240px; min-height: 110px; border: 1px solid var(--ui-border) !important; border-radius: 10px; background: var(--ui-panel) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .1); overflow: auto; transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease; } + .config-canvas { position: relative; display: block; min-height: 760px; padding: 8px 6px 18px; overflow: auto; overscroll-behavior: contain; background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--ui-accent) 7%, transparent), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--ui-bg) 74%, var(--ui-panel)), var(--ui-bg)); } + .config-canvas::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .34; background-image: linear-gradient(color-mix(in srgb, var(--ui-text) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ui-text) 5%, transparent) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, black, transparent 86%); } + .config-canvas > .config-block { position: absolute; z-index: 1; box-sizing: border-box; container: config-block / inline-size; margin: 0; min-width: 240px; min-height: 110px; border: 1px solid var(--ui-border) !important; border-radius: 14px; background: color-mix(in srgb, var(--ui-panel) 94%, var(--ui-accent)) !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-bg) 22%, transparent); overflow: auto; transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease; } + body[data-card-style="flat"] .config-canvas > .config-block { box-shadow: none; border-radius: 8px; } + body[data-card-style="neon"] .config-canvas > .config-block { border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--ui-border)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-accent) 12%, transparent), 0 10px 24px color-mix(in srgb, var(--ui-accent) 10%, transparent); } .config-canvas > .config-block { cursor: grab; touch-action: none; } .config-canvas > .config-block:hover { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)) !important; } .config-canvas > .config-block.is-selected { border-color: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-border)) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 12%, transparent), 0 6px 18px rgba(0, 0, 0, .1); } .config-canvas > .config-block.is-dragging, .config-canvas > .config-block.is-resizing { z-index: 5; border-color: var(--ui-accent) !important; box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-accent) 16%, transparent); transition: none; } .config-canvas > .config-custom-block { border-style: dashed !important; } - .config-block > summary { position: sticky; top: 0; z-index: 2; background: var(--ui-panel); } + .config-block > summary { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--ui-panel) 92%, var(--ui-accent)); border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent); } .config-block > summary::after { display: none !important; } - .block-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .block-title { min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .block-title::before { content: "✦"; flex: 0 0 auto; color: var(--ui-accent); font-size: .85em; opacity: .8; } .config-block > summary { cursor: grab; touch-action: none; } .config-block > summary:active, .config-block.is-dragging > summary { cursor: grabbing; } .config-block.is-dragging, .config-block.is-resizing { user-select: none; } @@ -1512,7 +1516,7 @@ HTML = """
АкцентСиний
ИнтерфейсСистема · 100%
ПлотностьСбалансированная
-
ХарактерМягкий · Плавный
СкруглениеМягкое
АнимацияПлавная
КонтрастОбычный
+
ХарактерМягкий · Плавный
СкруглениеМягкое
АнимацияПлавная
КонтрастОбычный
Карточки блоковМягкие
Настройки сохраняются автоматически