Spaces:
Running
Running
File size: 1,635 Bytes
c2d5aa0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | .footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
flex-direction: column;
}
/* ββ Collapsed bar ββ */
.bar {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 0 20px;
height: 32px;
background: #0f2557;
color: #a8c0f0;
font-size: .72rem;
font-weight: 500;
border: none;
cursor: pointer;
letter-spacing: .02em;
text-align: left;
transition: background .15s;
flex-shrink: 0;
}
.bar:hover { background: #1a3a7a; color: #dce8ff; }
.lock { font-size: .8rem; flex-shrink: 0; }
.label {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.chevron {
font-size: .6rem;
flex-shrink: 0;
opacity: .7;
}
/* ββ Expanded panel ββ */
.panel {
background: #0f2557;
border-top: 1px solid #1e4fa8;
padding: 20px 28px 16px;
max-height: 260px;
overflow-y: auto;
animation: slideUp .2s ease-out;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.panelTitle {
font-size: .8rem;
font-weight: 700;
color: #dce8ff;
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: .05em;
border-bottom: 1px solid #1e4fa8;
padding-bottom: 8px;
}
.paragraph {
font-size: .76rem;
line-height: 1.6;
color: #94b4e0;
margin: 0 0 8px;
}
.paragraph:last-child { margin-bottom: 0; }
/* Scrollbar styling for the panel */
.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb { background: #1e4fa8; border-radius: 2px; }
|