kodi/webmanager-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: theme - 02

Browse Source
This commit is contained in:
kodi
2026-03-12 20:13:50 +01:00
parent 09c3e14dea
commit e25d43200f
14 changed files with 295 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/html/app.js
+16 -6
View File
@@ -60,7 +60,17 @@ let settingsState = {
selectedTheme: "default",
selectedColorMode: "dark",
};
const VALID_THEME_FAMILIES = ["default", "macos-soft", "midnight", "graphite", "windows11"];
const VALID_THEME_FAMILIES = [
"default",
"macos-soft",
"midnight",
"graphite",
"windows11",
"commander-electric",
"nord-arctic",
"catppuccin-soft",
"fluent-neon",
];
const VALID_COLOR_MODES = ["dark", "light"];
let searchState = {
pane: "left",
@@ -473,11 +483,11 @@ function iconTypeForEntry(entry) {
function mediaIconSvg(type) {
const icons = {
folder: '<svg viewBox="0 0 24 24" class="entry-media-svg" aria-hidden="true"><path d="M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v7a2.5 2.5 0 0 1-2.5 2.5H6a2.5 2.5 0 0 1-2.5-2.5z"/></svg>',
file: '<svg viewBox="0 0 24 24" class="entry-media-svg" aria-hidden="true"><path d="M7 3.5h6l4 4v12a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 19.5V5A1.5 1.5 0 0 1 7.5 3.5z"/><path d="M13 3.5V8h4.5"/></svg>',
image: '<svg viewBox="0 0 24 24" class="entry-media-svg" aria-hidden="true"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="M6.5 17l4.2-4.3 2.8 2.8 1.9-2L18.5 17z"/></svg>',
video: '<svg viewBox="0 0 24 24" class="entry-media-svg" aria-hidden="true"><rect x="4" y="6" width="11" height="12" rx="2"/><path d="M16 10.2l4-2.2v8l-4-2.2z"/></svg>',
pdf: '<svg viewBox="0 0 24 24" class="entry-media-svg" aria-hidden="true"><path d="M7 3.5h6l4 4v12a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 19.5V5A1.5 1.5 0 0 1 7.5 3.5z"/><path d="M8 16h8"/><path d="M8.2 12.4h2.1a1.4 1.4 0 1 0 0-2.8H8.2z"/><path d="M12.2 9.6v5.6h1.6a1.9 1.9 0 0 0 0-3.8h-1.6"/><path d="M17 9.6h-2.6v5.6"/><path d="M14.8 12.2h1.7"/></svg>',
folder: '<svg viewBox="0 0 24 24" class="entry-media-svg is-filled" aria-hidden="true"><path d="M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v7a2.5 2.5 0 0 1-2.5 2.5H6a2.5 2.5 0 0 1-2.5-2.5z"/><path d="M3.5 9h17" class="entry-media-detail"/></svg>',
file: '<svg viewBox="0 0 24 24" class="entry-media-svg is-filled" aria-hidden="true"><path d="M7 3.5h6l4 4v12a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 19.5V5A1.5 1.5 0 0 1 7.5 3.5z"/><path d="M13 3.5V8h4.5" class="entry-media-detail"/></svg>',
image: '<svg viewBox="0 0 24 24" class="entry-media-svg is-filled" aria-hidden="true"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.6" class="entry-media-detail-solid"/><path d="M6.5 17l4.2-4.3 2.8 2.8 1.9-2L18.5 17z" class="entry-media-detail"/></svg>',
video: '<svg viewBox="0 0 24 24" class="entry-media-svg is-filled" aria-hidden="true"><rect x="4" y="6" width="11" height="12" rx="2"/><path d="M16 10.2l4-2.2v8l-4-2.2z"/><path d="M9.2 10l3.8 2.1-3.8 2.1z" class="entry-media-detail-solid"/></svg>',
pdf: '<svg viewBox="0 0 24 24" class="entry-media-svg is-filled" aria-hidden="true"><path d="M7 3.5h6l4 4v12a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 19.5V5A1.5 1.5 0 0 1 7.5 3.5z"/><path d="M8 16h8M8.2 12.4h2.1a1.4 1.4 0 1 0 0-2.8H8.2zM12.2 9.6v5.6h1.6a1.9 1.9 0 0 0 0-3.8h-1.6M17 9.6h-2.6v5.6M14.8 12.2h1.7" class="entry-media-detail"/></svg>',
text: '<svg viewBox="0 0 24 24" class="entry-media-svg" aria-hidden="true"><path d="M7 3.5h6l4 4v12a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 19.5V5A1.5 1.5 0 0 1 7.5 3.5z"/><path d="M9 10h6"/><path d="M9 13h6"/><path d="M9 16h4"/></svg>',
markdown: '<svg viewBox="0 0 24 24" class="entry-media-svg" aria-hidden="true"><path d="M7 3.5h6l4 4v12a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 19.5V5A1.5 1.5 0 0 1 7.5 3.5z"/><path d="M8.5 15v-4l1.8 2 1.7-2v4"/><path d="M13.6 11.2h2.6"/><path d="M14.9 10.2v5.2"/><path d="M13.9 14.5l1 1 1-1"/></svg>',
json: '<svg viewBox="0 0 24 24" class="entry-media-svg" aria-hidden="true"><path d="M7 3.5h6l4 4v12a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 19.5V5A1.5 1.5 0 0 1 7.5 3.5z"/><path d="M10 9c-.9.6-1.3 1.5-1.3 3s.4 2.4 1.3 3"/><path d="M14 9c.9.6 1.3 1.5 1.3 3s-.4 2.4-1.3 3"/><circle cx="12" cy="12" r=".8" fill="currentColor" stroke="none"/></svg>',
webui/html/base.css
+18
View File
@@ -316,6 +316,24 @@ button:disabled {
stroke-linejoin: round;
}
.entry-media-svg.is-filled {
fill: currentColor;
stroke: currentColor;
}
.entry-media-svg .entry-media-detail {
fill: none;
stroke: var(--color-surface);
stroke-width: 1.45;
stroke-linecap: round;
stroke-linejoin: round;
}
.entry-media-svg .entry-media-detail-solid {
fill: var(--color-surface);
stroke: none;
}
.entry-media-icon.folder {
color: color-mix(in srgb, #d1a85e 72%, var(--color-text-muted));
}
webui/html/index.html
+8
View File
@@ -10,6 +10,10 @@
<link rel="stylesheet" href="/ui/theme-midnight.css">
<link rel="stylesheet" href="/ui/theme-graphite.css">
<link rel="stylesheet" href="/ui/theme-windows11.css">
<link rel="stylesheet" href="/ui/theme-commander-electric.css">
<link rel="stylesheet" href="/ui/theme-nord-arctic.css">
<link rel="stylesheet" href="/ui/theme-catppuccin-soft.css">
<link rel="stylesheet" href="/ui/theme-fluent-neon.css">
</head>
<body>
<div id="app-shell">
@@ -124,6 +128,10 @@
<option value="midnight">Midnight</option>
<option value="graphite">Graphite</option>
<option value="windows11">Windows 11</option>
<option value="commander-electric">Commander Electric</option>
<option value="nord-arctic">Nord Arctic</option>
<option value="catppuccin-soft">Catppuccin Soft</option>
<option value="fluent-neon">Fluent Neon</option>
</select>
</label>
<div id="settings-interface-error" class="error"></div>
webui/html/theme-catppuccin-soft.css
+49
View File
@@ -0,0 +1,49 @@
:root[data-theme-family="catppuccin-soft"][data-color-mode="dark"] {
--color-page-bg: #1e1f2c;
--color-surface: #2b2d42;
--color-surface-elevated: #353853;
--color-border: #585b7b;
--color-border-strong: #b4befe;
--color-text-primary: #f4f1fb;
--color-text-muted: #c4bedb;
--color-accent: #f5c2e7;
--color-accent-contrast: #44253c;
--color-selection-bg: #4a466a;
--color-selection-border: #f2a6d9;
--color-current-row-bg: #3d3a58;
--color-current-row-border: #89dceb;
--color-active-pane-border: #89dceb;
--color-button-bg: #44425f;
--color-button-hover: #514e71;
--color-button-secondary-bg: #373550;
--color-list-header-bg: rgba(245, 194, 231, 0.08);
--color-list-row-hover: rgba(245, 194, 231, 0.08);
--color-danger: #f2a6b3;
--color-danger-bg: #5b3040;
--color-overlay-bg: rgba(12, 10, 20, 0.62);
}
:root[data-theme-family="catppuccin-soft"][data-color-mode="light"] {
--color-page-bg: #f7f2fb;
--color-surface: #fff9fd;
--color-surface-elevated: #f4ebf7;
--color-border: #dccde6;
--color-border-strong: #c49ecf;
--color-text-primary: #3d314c;
--color-text-muted: #7d6d8f;
--color-accent: #b85ba0;
--color-accent-contrast: #ffffff;
--color-selection-bg: #f0dff1;
--color-selection-border: #d695c5;
--color-current-row-bg: #f7ebf4;
--color-current-row-border: #97ccd6;
--color-active-pane-border: #97ccd6;
--color-button-bg: #f2e5f0;
--color-button-hover: #ead8e6;
--color-button-secondary-bg: #f8f0f7;
--color-list-header-bg: rgba(184, 91, 160, 0.05);
--color-list-row-hover: rgba(184, 91, 160, 0.05);
--color-danger: #b34d69;
--color-danger-bg: #fbe7ec;
--color-overlay-bg: rgba(35, 22, 44, 0.22);
}
webui/html/theme-commander-electric.css
+53
View File
@@ -0,0 +1,53 @@
:root[data-theme-family="commander-electric"][data-color-mode="dark"] {
--color-page-bg: #08111f;
--color-surface: #0e2344;
--color-surface-elevated: #13305f;
--color-border: #29528f;
--color-border-strong: #67b8ff;
--color-text-primary: #edf6ff;
--color-text-muted: #9fc1ea;
--color-accent: #53d5ff;
--color-accent-contrast: #032239;
--color-selection-bg: #184784;
--color-selection-border: #66d6ff;
--color-current-row-bg: #123563;
--color-current-row-border: #ffe36a;
--color-active-pane-border: #ffe36a;
--color-button-bg: #174177;
--color-button-hover: #205394;
--color-button-secondary-bg: #102d58;
--color-list-header-bg: rgba(83, 213, 255, 0.08);
--color-list-row-hover: rgba(83, 213, 255, 0.1);
--color-danger: #ffb1a1;
--color-danger-bg: #5f261f;
--color-overlay-bg: rgba(2, 8, 18, 0.7);
--shadow-panel: 0 8px 20px rgba(0, 12, 30, 0.24);
--shadow-elevated: 0 18px 40px rgba(0, 12, 34, 0.36);
}
:root[data-theme-family="commander-electric"][data-color-mode="light"] {
--color-page-bg: #dceaff;
--color-surface: #f8fbff;
--color-surface-elevated: #dfeeff;
--color-border: #8bb0e3;
--color-border-strong: #3478d6;
--color-text-primary: #0e2344;
--color-text-muted: #4f6891;
--color-accent: #006fd6;
--color-accent-contrast: #ffffff;
--color-selection-bg: #cae2ff;
--color-selection-border: #4ba5ff;
--color-current-row-bg: #e7f2ff;
--color-current-row-border: #d0aa19;
--color-active-pane-border: #d0aa19;
--color-button-bg: #d5e8ff;
--color-button-hover: #c0dcff;
--color-button-secondary-bg: #e8f2ff;
--color-list-header-bg: rgba(0, 111, 214, 0.06);
--color-list-row-hover: rgba(0, 111, 214, 0.06);
--color-danger: #b23c2f;
--color-danger-bg: #fde9e4;
--color-overlay-bg: rgba(8, 23, 45, 0.24);
--shadow-panel: 0 8px 18px rgba(28, 66, 120, 0.12);
--shadow-elevated: 0 18px 36px rgba(28, 66, 120, 0.18);
}
webui/html/theme-fluent-neon.css
+53
View File
@@ -0,0 +1,53 @@
:root[data-theme-family="fluent-neon"][data-color-mode="dark"] {
--color-page-bg: #11161d;
--color-surface: #1a2430;
--color-surface-elevated: #202d3c;
--color-border: #38506a;
--color-border-strong: #67c9ff;
--color-text-primary: #edf7ff;
--color-text-muted: #9fb4c7;
--color-accent: #3fb4ff;
--color-accent-contrast: #05233d;
--color-selection-bg: #1f4460;
--color-selection-border: #70d2ff;
--color-current-row-bg: #1a364d;
--color-current-row-border: #8fbeff;
--color-active-pane-border: #70d2ff;
--color-button-bg: #21405a;
--color-button-hover: #29506f;
--color-button-secondary-bg: #1a3146;
--color-list-header-bg: rgba(63, 180, 255, 0.08);
--color-list-row-hover: rgba(63, 180, 255, 0.08);
--color-danger: #f1a5a5;
--color-danger-bg: #53292f;
--color-overlay-bg: rgba(8, 12, 18, 0.64);
--shadow-panel: 0 10px 24px rgba(0, 20, 40, 0.24);
--shadow-elevated: 0 20px 44px rgba(0, 22, 44, 0.34);
}
:root[data-theme-family="fluent-neon"][data-color-mode="light"] {
--color-page-bg: #eff7ff;
--color-surface: #ffffff;
--color-surface-elevated: #e8f3ff;
--color-border: #c8ddf4;
--color-border-strong: #66b8ff;
--color-text-primary: #132536;
--color-text-muted: #667f95;
--color-accent: #0d89ec;
--color-accent-contrast: #ffffff;
--color-selection-bg: #dff1ff;
--color-selection-border: #6cc6ff;
--color-current-row-bg: #edf7ff;
--color-current-row-border: #8fbfff;
--color-active-pane-border: #4bb4ff;
--color-button-bg: #dfeeff;
--color-button-hover: #d0e6ff;
--color-button-secondary-bg: #edf5ff;
--color-list-header-bg: rgba(13, 137, 236, 0.05);
--color-list-row-hover: rgba(13, 137, 236, 0.05);
--color-danger: #bb3845;
--color-danger-bg: #fde8eb;
--color-overlay-bg: rgba(18, 34, 50, 0.22);
--shadow-panel: 0 10px 22px rgba(33, 102, 176, 0.12);
--shadow-elevated: 0 20px 42px rgba(33, 102, 176, 0.18);
}
webui/html/theme-nord-arctic.css
+49
View File
@@ -0,0 +1,49 @@
:root[data-theme-family="nord-arctic"][data-color-mode="dark"] {
--color-page-bg: #1b222d;
--color-surface: #242d3a;
--color-surface-elevated: #2b3645;
--color-border: #435366;
--color-border-strong: #88a6c8;
--color-text-primary: #ecf2f9;
--color-text-muted: #adc0d4;
--color-accent: #88c0d0;
--color-accent-contrast: #16303d;
--color-selection-bg: #344359;
--color-selection-border: #8ab8ca;
--color-current-row-bg: #2d394b;
--color-current-row-border: #a6bdd7;
--color-active-pane-border: #9cc4de;
--color-button-bg: #314052;
--color-button-hover: #3a4b60;
--color-button-secondary-bg: #293545;
--color-list-header-bg: rgba(136, 192, 208, 0.06);
--color-list-row-hover: rgba(136, 192, 208, 0.07);
--color-danger: #e6a3a3;
--color-danger-bg: #54343a;
--color-overlay-bg: rgba(12, 18, 24, 0.58);
}
:root[data-theme-family="nord-arctic"][data-color-mode="light"] {
--color-page-bg: #edf3f8;
--color-surface: #fbfdff;
--color-surface-elevated: #e8eef5;
--color-border: #c7d4e2;
--color-border-strong: #88a6c8;
--color-text-primary: #243240;
--color-text-muted: #667789;
--color-accent: #4f7c98;
--color-accent-contrast: #ffffff;
--color-selection-bg: #dde8f2;
--color-selection-border: #94adc6;
--color-current-row-bg: #eef4f9;
--color-current-row-border: #b1c2d4;
--color-active-pane-border: #6f8fab;
--color-button-bg: #e7eef6;
--color-button-hover: #dae5f0;
--color-button-secondary-bg: #f2f6fa;
--color-list-header-bg: rgba(79, 124, 152, 0.05);
--color-list-row-hover: rgba(79, 124, 152, 0.05);
--color-danger: #b44b56;
--color-danger-bg: #f8e9eb;
--color-overlay-bg: rgba(18, 28, 39, 0.22);
}