Gmer4Lfe
706ef2dd72
Scripts list on left, persistent log panel on right. On screens ≤880px falls back to stacked single-column. Right panel stays open until page refresh or another selection. Running dot pulses green on the job row and in the log header while script executes, clears when log goes stale.
148 lines
8.0 KiB
CSS
148 lines
8.0 KiB
CSS
/* Varaverk plugin styles — inherits unRAID theme, adds plugin-specific layout */
|
|
|
|
#varaverk-wrap { padding: 10px; font-family: inherit; }
|
|
|
|
/* Tab bar */
|
|
#vv-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #444; }
|
|
.vv-tab { padding: 6px 16px; text-decoration: none; color: #aaa; border-radius: 4px 4px 0 0; }
|
|
.vv-tab:hover { color: #fff; background: #333; }
|
|
.vv-tab.active { color: #fff; background: #555; border-bottom: 2px solid #fff; }
|
|
|
|
/* Cards / layout */
|
|
.vv-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
|
|
.vv-card { flex: 1; min-width: 200px; background: #1e1e1e; border: 1px solid #444;
|
|
border-radius: 6px; padding: 12px; }
|
|
.vv-wide { flex: 100%; }
|
|
.vv-card h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
|
|
color: #888; letter-spacing: 0.05em; }
|
|
|
|
/* Fallback state badge */
|
|
.vv-state-badge { font-size: 20px; font-weight: bold; padding: 4px 0; }
|
|
.vv-state-normal { color: #4caf50; }
|
|
.vv-state-failover { color: #f44336; }
|
|
.vv-state-no_internet { color: #ff9800; }
|
|
.vv-state-dark { color: #9e9e9e; }
|
|
.vv-state-unknown { color: #666; }
|
|
|
|
/* Docker table */
|
|
#vv-docker-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
#vv-docker-table th { text-align: left; padding: 4px 8px; color: #888;
|
|
border-bottom: 1px solid #444; }
|
|
#vv-docker-table td { padding: 4px 8px; border-bottom: 1px solid #2a2a2a; }
|
|
.vv-status-up { color: #4caf50; }
|
|
.vv-status-down { color: #f44336; }
|
|
|
|
/* Scheduler */
|
|
.vv-hint { color: #888; font-size: 13px; margin-bottom: 16px; }
|
|
.vv-sched-card { margin-bottom: 10px; }
|
|
.vv-script { background: #161616; border: 1px solid #333; border-radius: 4px;
|
|
padding: 6px 10px; margin: 4px 0; margin-left: 20px; }
|
|
.vv-job-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.vv-job-label { flex: 1; font-size: 14px; min-width: 120px; }
|
|
.vv-cron { width: 140px; background: #111; border: 1px solid #444; color: #ddd;
|
|
padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 13px; }
|
|
.vv-children { padding-top: 8px; border-top: 1px solid #333; margin-top: 8px; }
|
|
.vv-advanced-toggle { background: none; border: 1px solid #555; color: #aaa;
|
|
padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; }
|
|
.vv-advanced-toggle:hover { border-color: #888; color: #fff; }
|
|
.vv-job-status { font-size: 12px; min-width: 20px; }
|
|
.vv-btn-sm { padding: 3px 10px; background: #2a2a2a; border: 1px solid #555; color: #ccc;
|
|
border-radius: 4px; cursor: pointer; font-size: 12px; white-space: nowrap; }
|
|
.vv-btn-sm:hover { border-color: #888; color: #fff; }
|
|
.vv-btn-sm.active { border-color: #4caf50; color: #4caf50; }
|
|
|
|
/* Running dot */
|
|
.vv-job-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
|
|
.vv-dot-running { background: #4caf50; animation: vv-pulse-dot 1s ease-in-out infinite; }
|
|
#vv-log-dot { animation: vv-pulse-dot 1s ease-in-out infinite; }
|
|
@keyframes vv-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
|
|
|
|
/* Selected job row */
|
|
.vv-row-selected { background: rgba(255,255,255,0.05); border-radius: 4px;
|
|
outline: 1px solid #555; }
|
|
|
|
/* Two-panel layout */
|
|
#vv-sched-layout { display: flex; gap: 16px; align-items: flex-start; }
|
|
#vv-sched-left { flex: 0 0 500px; min-width: 0; }
|
|
#vv-sched-right { display: none; flex: 1; min-width: 0; position: sticky; top: 16px; }
|
|
#vv-sched-right.vv-panel-visible { display: block; }
|
|
.vv-log-right-pre { min-height: 360px; max-height: calc(100vh - 200px); }
|
|
|
|
/* Mobile: stack vertically, right panel full-width below cards */
|
|
@media (max-width: 880px) {
|
|
#vv-sched-layout { flex-direction: column; }
|
|
#vv-sched-left { flex: none; width: 100%; }
|
|
#vv-sched-right { position: static; width: 100%; }
|
|
.vv-log-right-pre { min-height: 200px; max-height: 340px; }
|
|
}
|
|
|
|
/* Card footer */
|
|
.vv-card-footer { display: flex; align-items: center; gap: 10px;
|
|
margin-top: 12px; padding-top: 10px; border-top: 1px solid #333; }
|
|
.vv-save-btn { padding: 5px 18px; background: #4caf50; border: none; color: #fff;
|
|
border-radius: 4px; cursor: pointer; font-size: 13px; }
|
|
.vv-save-btn:hover { background: #388e3c; }
|
|
.vv-save-status { font-size: 12px; color: #aaa; }
|
|
.vv-run-btn { border-color: #2196f3 !important; color: #2196f3 !important; }
|
|
.vv-run-btn:hover { background: #0d47a1 !important; color: #fff !important;
|
|
border-color: #2196f3 !important; }
|
|
.vv-dry-btn { border-color: #ff9800 !important; color: #ff9800 !important; }
|
|
.vv-dry-btn:hover { background: #e65100 !important; color: #fff !important;
|
|
border-color: #ff9800 !important; }
|
|
|
|
/* Log panel */
|
|
.vv-log-panel { margin-top: 10px; border-top: 1px solid #333; padding-top: 8px; }
|
|
.vv-log-toolbar { display: flex; justify-content: space-between; align-items: center;
|
|
margin-bottom: 4px; }
|
|
.vv-log-ts { font-size: 11px; color: #666; }
|
|
.vv-log-pre { background: #0d0d0d; border: 1px solid #333; border-radius: 4px;
|
|
padding: 10px 12px; margin: 0; font-family: monospace; font-size: 12px;
|
|
color: #ccc; white-space: pre-wrap; word-break: break-all;
|
|
max-height: 340px; overflow-y: auto; line-height: 1.5; }
|
|
|
|
/* Toggle switch */
|
|
.vv-toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
|
|
.vv-toggle input { opacity: 0; width: 0; height: 0; }
|
|
.vv-slider { position: absolute; inset: 0; background: #444; border-radius: 20px; cursor: pointer;
|
|
transition: 0.2s; }
|
|
.vv-slider:before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; bottom: 3px;
|
|
background: #fff; border-radius: 50%; transition: 0.2s; }
|
|
.vv-toggle input:checked + .vv-slider { background: #4caf50; }
|
|
.vv-toggle input:checked + .vv-slider:before { transform: translateX(16px); }
|
|
|
|
/* Config editor */
|
|
#vv-conf-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
|
|
.vv-conf-tab { padding: 4px 12px; text-decoration: none; color: #aaa;
|
|
border: 1px solid #444; border-radius: 4px; font-size: 13px; }
|
|
.vv-conf-tab.active { color: #fff; background: #333; border-color: #666; }
|
|
#vv-conf-editor { width: 100%; min-height: 500px; background: #111; color: #ddd;
|
|
border: 1px solid #444; padding: 12px; font-family: monospace;
|
|
font-size: 13px; line-height: 1.5; border-radius: 4px; box-sizing: border-box; resize: vertical; }
|
|
#vv-conf-actions { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
|
|
#vv-conf-actions button { padding: 6px 18px; background: #4caf50; border: none;
|
|
color: #fff; border-radius: 4px; cursor: pointer; font-size: 14px; }
|
|
#vv-conf-actions button:hover { background: #388e3c; }
|
|
#vv-conf-status { font-size: 13px; color: #aaa; }
|
|
|
|
/* Docs */
|
|
#vv-docs { display: flex; gap: 16px; }
|
|
#vv-docs-sidebar { width: 220px; flex-shrink: 0; }
|
|
#vv-docs-sidebar h3 { font-size: 12px; text-transform: uppercase; color: #888; margin: 0 0 8px; }
|
|
#vv-docs-sidebar ul { list-style: none; padding: 0; margin: 0; }
|
|
#vv-docs-sidebar li { margin: 2px 0; }
|
|
#vv-docs-sidebar a { display: block; padding: 3px 8px; font-size: 12px; color: #aaa;
|
|
text-decoration: none; border-radius: 3px; }
|
|
#vv-docs-sidebar a:hover { background: #222; color: #fff; }
|
|
#vv-docs-sidebar a.active { background: #333; color: #fff; }
|
|
#vv-docs-content { flex: 1; min-width: 0; }
|
|
.vv-doc-body { background: #1a1a1a; border: 1px solid #444; border-radius: 6px;
|
|
padding: 20px; line-height: 1.7; }
|
|
.vv-doc-body h1, .vv-doc-body h2, .vv-doc-body h3 { color: #ddd; }
|
|
.vv-doc-body code { background: #111; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
|
|
.vv-doc-body pre { background: #111; padding: 12px; border-radius: 4px; overflow-x: auto; }
|
|
.vv-doc-hint { font-size: 12px; color: #666; margin-top: 8px; }
|
|
|
|
/* Live var substitution colours */
|
|
code.vv-live-var { color: #4caf50; background: #0d1f0d; }
|
|
code.vv-unknown-var { color: #ff9800; background: #1f130d; }
|