diff --git a/src/app/app.css b/src/app/app.css index 2e97806c..2ec6dacd 100644 --- a/src/app/app.css +++ b/src/app/app.css @@ -182,15 +182,45 @@ button:disabled { } .panel__header { + display: flex; + align-items: center; + gap: 10px; + width: 100%; padding: 14px 16px; - border-bottom: 1px solid var(--color-border); color: #e4d8ca; + text-align: left; + background: transparent; + border: 0; + border-bottom: 1px solid var(--color-border); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } +.panel__header:hover:not(:disabled) { + transform: none; + background: rgba(255, 255, 255, 0.02); +} + +.panel--collapsed .panel__header { + border-bottom: 0; +} + +.panel__chevron { + width: 9px; + height: 9px; + flex: 0 0 auto; + border-right: 2px solid currentColor; + border-bottom: 2px solid currentColor; + transform: rotate(-45deg); + transition: transform 120ms ease; +} + +.panel__chevron--expanded { + transform: rotate(45deg); +} + .panel__body { display: flex; flex-direction: column;