22 lines
3.8 KiB
CSS
22 lines
3.8 KiB
CSS
/* DONA_V8_DYNAMIC: component-only holographic UI, separate from existing views */
|
|
.d8-open-button{min-width:48px;min-height:48px;border:1px solid rgba(166,201,237,.34);background:#111727;color:#d4eafa;border-radius:50%;font-size:25px;cursor:pointer}
|
|
.d8-open-button:hover{background:#233853}
|
|
.d8-overlay[hidden]{display:none!important}
|
|
.d8-overlay{position:fixed;inset:0;z-index:120000;background:rgba(4,9,20,.92);backdrop-filter:blur(16px);display:flex;justify-content:center;align-items:stretch;padding:clamp(8px,2vw,24px);color:#e9f4ff}
|
|
.d8-panel{width:min(1300px,100%);min-height:0;overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(145,203,239,.28);border-radius:25px;background:linear-gradient(155deg,#0c1729,#0d1424 65%,#171828);box-shadow:0 14px 75px rgba(0,0,0,.65);padding:clamp(14px,2vw,28px)}
|
|
.d8-head{display:flex;gap:15px;justify-content:space-between;align-items:start}.d8-brand .d8-eyebrow{font-size:11px;letter-spacing:.17em;color:#83c9e6}.d8-title{margin:5px 0 15px;font-size:clamp(22px,3vw,36px);color:#f2f8ff}
|
|
.d8-close{font-size:26px;width:48px;height:48px;border-radius:50%;background:#1c2740;border:1px solid #50617b;color:white;cursor:pointer}
|
|
.d8-compose{display:flex;gap:8px;flex-wrap:wrap}.d8-input{flex:1 1 230px;min-width:0;min-height:48px;background:#101a30;color:#f6faff;border:1px solid #435875;border-radius:12px;padding:12px;font:inherit}
|
|
.d8-btn,.d8-chip{background:#1b2b45;border:1px solid #466681;border-radius:11px;color:#e6f6ff;padding:10px 15px;cursor:pointer;font:inherit}.d8-btn:hover,.d8-chip:hover{background:#2b4664}.d8-submit{background:linear-gradient(90deg,#176880,#554a91);font-weight:600}
|
|
.d8-examples,.d8-toolbar,.d8-pinned{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}.d8-chip{font-size:13px;padding:7px 12px;border-radius:25px}.d8-pins-label{font-size:12px;color:#a2b8cc}.d8-pin-item{display:inline-flex;align-items:center}.d8-pin-remove{border:0;background:transparent;color:#d5e9f8;padding:4px 7px;cursor:pointer}
|
|
.d8-note{min-height:1.5em;font-size:13px;margin:12px 0;color:#a1c6dc}
|
|
.d8-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:13px;align-items:stretch}
|
|
.d8-heading{grid-column:1/-1;padding:14px 2px}.d8-heading h2{font-size:clamp(18px,2.2vw,27px);margin:0 0 5px}.d8-heading p{color:#b7d0e4;margin:0 0 4px}.d8-heading small{color:#8ba6bf}
|
|
.d8-player-controls{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
|
|
.d8-card{background:linear-gradient(145deg,rgba(56,79,115,.4),rgba(20,32,50,.6));border:1px solid rgba(154,196,227,.23);border-radius:16px;padding:17px;min-width:0;overflow:hidden}
|
|
.d8-card-title{font-size:14px;color:#a9cce3;letter-spacing:.02em;margin:0 0 13px}.d8-metric-value{font-weight:700;font-size:clamp(27px,3vw,40px);color:#fff;overflow-wrap:anywhere}.d8-unit{margin-left:4px;font-size:15px;color:#acbed3}.d8-detail{color:#b0c7dd;font-size:13px}.d8-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;color:#e1eaf5}.d8-list{margin:0;padding-left:22px;line-height:1.8;overflow-wrap:anywhere}
|
|
.d8-table{width:100%;border-collapse:collapse;font-size:14px}.d8-table-scroll{overflow-x:auto}.d8-table td,.d8-table th{text-align:left;border-bottom:1px solid #3a4e64;padding:9px 7px}.d8-table th{color:#a9cce3}.d8-table td{overflow-wrap:anywhere}.d8-table{min-width:max-content}
|
|
.d8-bar-row{margin:10px 0}.d8-bar-line{display:flex;justify-content:space-between;gap:8px;font-size:13px}.d8-track{height:8px;border-radius:10px;overflow:hidden;background:#202d45;margin-top:5px}.d8-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#63c8ea,#c39aed)}
|
|
.d8-light-state{font-size:15px;color:#dfebfa}.d8-action{margin-top:4px}.d8-footer{color:#8caac1;font-size:11px;padding:15px 0 8px}
|
|
@media (max-width:560px){.d8-overlay{padding:0}.d8-panel{border-radius:0}.d8-grid{grid-template-columns:1fr}.d8-compose{flex-wrap:nowrap}.d8-input{min-width:60px}}
|