diff --git a/index.html b/index.html index aa2a10d..1c3e4dd 100644 --- a/index.html +++ b/index.html @@ -188,6 +188,26 @@

Augmenta × Three.js

+ + diff --git a/src/styles.css b/src/styles.css index 926708c..a147ab8 100644 --- a/src/styles.css +++ b/src/styles.css @@ -135,6 +135,8 @@ button, input, select { font: inherit; } width: var(--sidebar-width); min-width: 0; height: 100%; + display: flex; + flex-direction: column; overflow-y: auto; border-left: 1px solid #252a35; background: rgba(17, 20, 26, 0.84); @@ -151,6 +153,67 @@ button, input, select { font: inherit; } pointer-events: none; } +.sidebar-footer { + margin-top: auto; + padding: 15px 18px 16px; + border-top: 1px solid #252a35; + color: #8f99aa; + background: rgba(12, 15, 20, .3); +} + +.sidebar-footer-app { + display: grid; + gap: 2px; +} + +.sidebar-footer-title { + color: #dbe1eb; + font-size: 11.5px; + font-weight: 650; + letter-spacing: .01em; +} + +.sidebar-footer-subtitle { + color: #737d8e; + font-size: 9.5px; + line-height: 1.35; +} + +.sidebar-footer-meta { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-top: 10px; + font-size: 9.5px; +} + +.sidebar-footer-link { + display: inline-flex; + align-items: center; + gap: 6px; + color: #9da7b9; + text-decoration: none; + transition: color 120ms ease; +} + +.sidebar-footer-link:hover { + color: var(--accent-hover); +} + +.sidebar-footer-link:focus-visible { + outline: 1px solid var(--accent); + outline-offset: 3px; + border-radius: 2px; +} + +.sidebar-footer-link img { + display: block; + width: 16px; + height: 16px; + object-fit: contain; +} + /* Desktop resize strip: invisible until the panel edge is hovered/focused. */ .sidebar-resizer { position: absolute; @@ -371,6 +434,7 @@ button.subtle-button.active:hover { /* Sidebar section hierarchy: compact top-level sections with denser Advanced controls. */ .panel-section { + flex: 0 0 auto; --section-title-size: 13px; --advanced-title-size: 10.5px; --disclosure-chevron-size: .54em;