35 lines
3.0 KiB
CSS
35 lines
3.0 KiB
CSS
/* Additive CSS: activity dock occupies the right side below the audio controls. */
|
|
.alfred-feature-dock {
|
|
position: fixed; z-index: 110; top: 104px; right: 16px;
|
|
width: min(370px, 34vw); max-height: calc(100dvh - 220px);
|
|
overflow: hidden; display: flex; flex-direction: column;
|
|
background: rgba(19, 24, 32, .94); color: #e7eef7;
|
|
border: 1px solid rgba(104, 159, 216, .30); border-radius: 15px;
|
|
box-shadow: 0 10px 44px rgba(0,0,0,.36);
|
|
font-family: system-ui, -apple-system, sans-serif; font-size: 13px;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.alfred-feature-header { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
|
|
.alfred-feature-toggle { background: transparent; color: #dceafe; border: 0; font-weight: 650; font: inherit; cursor: pointer; text-align: left; flex: 1; padding: 3px; }
|
|
.alfred-feature-count { color:#92c5fc; border: 1px solid rgba(113,175,255,.3); border-radius: 99px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
|
|
.alfred-feature-contents { min-height: 44px; max-height: calc(100dvh - 280px); overflow: auto; padding: 8px; }
|
|
.alfred-feature-collapsed { width: 190px; }
|
|
.alfred-feature-collapsed .alfred-feature-header { border-bottom: 0; }
|
|
.alfred-feature-collapsed .alfred-feature-contents { display: none; }
|
|
.alfred-feature-card { padding: 11px 12px; margin-bottom: 9px; background: rgba(35,44,56,.95); border: 1px solid rgba(160,180,220,.13); border-radius: 10px; overflow-wrap: anywhere; }
|
|
.alfred-feature-card-header { display: flex; align-items: flex-start; gap: 8px; }
|
|
.alfred-feature-card-title { flex: 1; font-size: 13px; font-weight: 650; line-height: 1.45; }
|
|
.alfred-feature-status { flex: none; padding: 2px 6px; font-size: 11px; border-radius: 9px; background: #445065; color:#f5f5f5; }
|
|
.alfred-feature-status.running { color: #c3e3ff; background:#245074; }
|
|
.alfred-feature-status.succeeded { color: #b8e7d0; background:#234c3a; }
|
|
.alfred-feature-status.failed, .alfred-feature-status.interrupted { color:#ffd5d5; background:#75383a; }
|
|
.alfred-feature-body, .alfred-feature-detail { margin: 9px 0 5px; color:#d9e2ed; line-height: 1.5; white-space: pre-wrap; }
|
|
.alfred-feature-detail { font-size: 12px; color: #b8d1ec; }
|
|
.alfred-feature-image { display:block; width: 100%; max-height: 230px; object-fit: contain; margin: 8px 0; border-radius: 8px; }
|
|
.alfred-feature-weather { color: #f0cd88; font-size: 16px; }
|
|
.alfred-feature-event { padding: 5px 0; border-top: 1px solid rgba(255,255,255,.07); }
|
|
.alfred-feature-footer { display:flex; align-items:center; justify-content:space-between; margin-top:8px; color:#91a7c0; font-size: 11px; }
|
|
.alfred-feature-more, .alfred-feature-speak { background: rgba(70,119,175,.17); border: 1px solid rgba(118,173,230,.35); color:#d2e8ff; border-radius:7px; padding:3px 9px; cursor:pointer; }
|
|
.alfred-feature-empty { color:#9db2c8; padding: 0 6px; }
|
|
@media (max-width: 720px) { .alfred-feature-dock { top: 86px; right: 8px; width: min(310px, 82vw); max-height: calc(100dvh - 190px); } .alfred-feature-contents { max-height: calc(100dvh - 255px); } }
|