SHA256
14 lines
1.6 KiB
CSS
14 lines
1.6 KiB
CSS
/* Пять разделов с одинаковыми действиями и доступными подписями. */
|
|
.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-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-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; }
|