Gmer4Lfe
4ab3ddbc47
Plugin lives in Plugin/ — invisible to User Script Plugin. dev_install.sh symlinks into /usr/local/emhttp/plugins/varaverk/ for development. Pages: Monitor (5s poll), Scheduler (orchs + Advanced children, toggle + cron), Config (raw editor, host-aware file access), Docs (markdown + live $VAR substitution). API endpoints: monitor.php (JSON), scheduler.php (writes schedule.json + cron.d), config.php (writes conf files with host permission check). Includes: config.php (parser, host detection, var map), scheduler.php (job tree, cron.d rebuild), monitor.php (docker, GPU, resources, fallback, transcode), docs.php (file tree, var substitution, Parsedown renderer).
97 lines
5.2 KiB
CSS
97 lines
5.2 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-scheduler { max-width: 900px; }
|
|
.vv-hint { color: #888; font-size: 13px; margin-bottom: 16px; }
|
|
.vv-job { margin-bottom: 4px; }
|
|
.vv-orch { background: #1e1e1e; border: 1px solid #444; border-radius: 6px;
|
|
padding: 10px 12px; margin-bottom: 8px; }
|
|
.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: 10px; }
|
|
.vv-job-label { flex: 1; font-size: 14px; }
|
|
.vv-cron { width: 160px; background: #111; border: 1px solid #444; color: #ddd;
|
|
padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 13px; }
|
|
.vv-children { padding-top: 6px; }
|
|
.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; }
|
|
|
|
/* 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; }
|