|
|
|
|
@ -1385,10 +1385,11 @@ HTML = """<!doctype html>
|
|
|
|
|
.appearance-close:hover { color: var(--ui-text); border-color: var(--ui-border); background: var(--ui-input); }
|
|
|
|
|
.appearance-group { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ui-border); }
|
|
|
|
|
.appearance-group-head span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
|
|
|
|
|
.appearance-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
|
|
|
|
|
.appearance-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 6px; }
|
|
|
|
|
.appearance-options button { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 6px; height: 34px; padding: 0 7px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-input); color: var(--ui-muted); font: 10px/1.05 ui-sans-serif, system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
|
|
|
|
|
.appearance-options button:hover { color: var(--ui-text); border-color: color-mix(in srgb, var(--ui-accent) 62%, var(--ui-border)); transform: translateY(-1px); }
|
|
|
|
|
.appearance-options button.is-active { color: var(--ui-text); border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 20%, transparent); }
|
|
|
|
|
.appearance-options button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
.appearance-swatch { width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--ui-text) 18%, transparent); border-radius: 6px; background: var(--appearance-swatch); box-shadow: inset 0 0 0 4px var(--appearance-swatch-2, transparent); }
|
|
|
|
|
.accent-options button { grid-template-columns: 14px minmax(0, 1fr); }
|
|
|
|
|
.accent-options .appearance-swatch { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--appearance-swatch); box-shadow: 0 0 0 3px color-mix(in srgb, var(--appearance-swatch) 17%, transparent); }
|
|
|
|
|
@ -1436,6 +1437,7 @@ HTML = """<!doctype html>
|
|
|
|
|
.appearance-panel { position: fixed; top: 56px; right: 8px; width: min(370px, calc(100vw - 16px)); }
|
|
|
|
|
.appearance-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 420px) { .appearance-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
AlexsandrSnytkin
16 hours ago