95 lines
3.4 KiB
CSS
95 lines
3.4 KiB
CSS
:root {
|
|
--bg: #14171A;
|
|
--surface: #1F2428;
|
|
--on-surface: #E8E4D8;
|
|
--on-surface-variant: rgba(232, 228, 216, 0.65);
|
|
--accent: #F4BA7A;
|
|
--error: #DC5050;
|
|
--success: #4CAF50;
|
|
--warning: #FFB300;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-width: 340px;
|
|
font: 14px/1.4 system-ui, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--on-surface);
|
|
}
|
|
.hidden { display: none !important; }
|
|
.topbar {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 10px 14px; background: var(--surface);
|
|
}
|
|
.brand { font-family: Georgia, serif; font-size: 16px; font-weight: 500; color: var(--accent); }
|
|
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--on-surface-variant); }
|
|
.dot.connected { background: var(--success); }
|
|
|
|
.setup { padding: 20px; text-align: center; }
|
|
.alert {
|
|
background: var(--surface); padding: 12px; border-radius: 6px;
|
|
margin-bottom: 12px; border-left: 3px solid var(--accent);
|
|
}
|
|
.alert.alert-error { border-left-color: var(--error); }
|
|
.alert strong { display: block; margin-bottom: 4px; }
|
|
.alert p { margin: 0; color: var(--on-surface-variant); font-size: 13px; }
|
|
|
|
.tabs { display: flex; border-bottom: 1px solid var(--surface); }
|
|
.tab {
|
|
flex: 1; padding: 10px 0; background: none; border: none;
|
|
color: var(--on-surface-variant); cursor: pointer; font: inherit;
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
|
.tab-panel { padding: 10px; }
|
|
|
|
.platform-card, .source-row {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 10px; margin-bottom: 6px; background: var(--surface);
|
|
border-radius: 6px; cursor: pointer;
|
|
}
|
|
.platform-card.disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.platform-card.loading { opacity: 0.6; cursor: wait; }
|
|
.platform-icon {
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|
display: grid; place-items: center; font-weight: 600; color: white;
|
|
}
|
|
.info { flex: 1; min-width: 0; }
|
|
.info .name { font-weight: 500; }
|
|
.info .status { font-size: 12px; color: var(--on-surface-variant); }
|
|
.info .status.ready { color: var(--success); }
|
|
.info .status.error { color: var(--error); }
|
|
.info .status.no-cookies { color: var(--warning); }
|
|
.action-icon { color: var(--on-surface-variant); }
|
|
|
|
.btn {
|
|
padding: 10px 14px; border: none; border-radius: 6px; cursor: pointer;
|
|
font: 500 14px/1 system-ui, sans-serif;
|
|
}
|
|
.btn.primary { background: var(--accent); color: var(--bg); }
|
|
.btn.primary:hover { filter: brightness(1.05); }
|
|
.btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.btn.block { display: block; width: 100%; margin-top: 8px; }
|
|
.btn.link { background: none; color: var(--on-surface-variant); padding: 4px; }
|
|
.btn.link:hover { color: var(--accent); }
|
|
|
|
.source-row .play {
|
|
background: none; border: none; color: var(--on-surface-variant);
|
|
cursor: pointer; padding: 4px;
|
|
}
|
|
.source-row .play:hover { color: var(--accent); }
|
|
.source-row .url { font-size: 11px; color: var(--on-surface-variant); word-break: break-all; }
|
|
|
|
.status-message {
|
|
padding: 10px 14px; margin: 8px 10px; border-radius: 6px;
|
|
background: var(--surface); border-left: 3px solid;
|
|
}
|
|
.status-message.success { border-left-color: var(--success); }
|
|
.status-message.error { border-left-color: var(--error); }
|
|
.status-message.warning { border-left-color: var(--warning); }
|
|
|
|
.footer {
|
|
border-top: 1px solid var(--surface);
|
|
padding: 6px 10px; text-align: right;
|
|
}
|