MrBlake/MrTerm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 25 Wiki Activity

Themes: share app theme colors between desktop and Android (app-themes.css), add theme picker and accent color to the Android app, and add Windows XP, Windows 11, macOS (Liquid Glass) and Cyberpunk 2077 themes with matching terminal schemes

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
MrBlake
2026-09-26 14:31:51 +02:00
co-authored by Claude Opus 5.5
parent 27091ab5d1
commit 58709e09f2
10 changed files with 285 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/web/styles.css
+56 -24
View File
@@ -1,26 +1,19 @@
:root {
--bg: #14161d;
--surface: #1c1f29;
--surface2: #252936;
--line: #2c3040;
--text: #e6e8ef;
--muted: #9aa0b4;
--faint: #5d6377;
--accent: #6e7bff;
--accent-soft: #6e7bff26;
--green: #3ecf8e;
--red: #ff5f6d;
--orange: #ffb347;
--radius: 14px;
/* Capacitor setzt --safe-area-inset-* bei Edge-to-Edge; env() als Rückfall */
/* Status-/Navigationsleiste und Tastatur rechnet MainActivity als Rand um den WebView heraus */
/* Farben kommen aus lib/app-themes.css (gemeinsam mit dem Desktop, Auswahl über data-theme) */
--surface: var(--card);
--surface2: var(--card-hover);
--line: var(--border);
--accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
--r: calc(var(--r) + 4px);
/* Status-/Navigationsleiste rechnet MainActivity als Rand um den WebView heraus */
--top: 0px;
--bottom: 0px;
color-scheme: dark;
}
:root.light { color-scheme: light; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { font: 15px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
body { font: 15px/1.4 var(--font); font-family: var(--font), system-ui, Roboto, sans-serif; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--text); -webkit-user-select: text; user-select: text; }
@@ -55,7 +48,7 @@ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width:
.section .count { background: var(--surface2); border-radius: 8px; padding: 1px 7px; font-size: 11px; color: var(--faint); }
.section svg { width: 16px; height: 16px; }
.list { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.list { background: var(--surface); border-radius: var(--r); overflow: hidden; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 62px; position: relative; }
.item + .item::before { content: ''; position: absolute; top: 0; left: 64px; right: 0; border-top: 1px solid var(--line); }
.item:active { background: var(--surface2); }
@@ -80,11 +73,11 @@ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width:
.empty .avatar svg { width: 28px; height: 28px; }
.empty h3 { color: var(--text); margin: 0 0 6px; }
.fab { position: fixed; right: 18px; bottom: calc(76px + var(--bottom)); width: 58px; height: 58px; border-radius: 18px; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px #0008; }
.fab { position: fixed; right: 18px; bottom: calc(76px + var(--bottom)); width: 58px; height: 58px; border-radius: calc(var(--radius) + 8px); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 8px 24px #0008; }
.fab svg { width: 26px; height: 26px; }
/* ---------- Karten / Einstellungen ---------- */
.card { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.card { background: var(--surface); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; }
.card h3 { margin: 0 0 4px; font-size: 16px; }
.card p, .hint { color: var(--muted); font-size: 13.5px; margin: 4px 0 10px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
@@ -93,9 +86,9 @@ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width:
.row .sub { color: var(--muted); font-size: 13px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--surface2); font-weight: 600; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); font-weight: 600; }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.danger { color: var(--red); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; }
@@ -117,7 +110,7 @@ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width:
.switch span { position: absolute; inset: 0; background: var(--surface2); border-radius: 20px; transition: .2s; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); background: #fff; }
.switch input:checked + span::after { transform: translateX(20px); background: var(--on-accent); }
.warn-box { border: 1px solid #ffb34755; background: #ffb34712; border-radius: 12px; padding: 10px 12px; color: var(--orange); font-size: 13px; margin: 8px 0; }
@@ -185,7 +178,46 @@ svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width:
#keybar::-webkit-scrollbar { display: none; }
#keybar button { flex: none; min-width: 44px; height: 40px; padding: 0 10px; border-radius: 10px; background: var(--surface2); font: 600 14px ui-monospace, monospace; color: var(--text); display: grid; place-items: center; }
#keybar button svg { width: 18px; height: 18px; }
#keybar button.on { background: var(--accent); color: #fff; }
#keybar button.lock { box-shadow: inset 0 0 0 2px #fff; }
#keybar button.on { background: var(--accent); color: var(--on-accent); }
#keybar button.lock { box-shadow: inset 0 0 0 2px var(--on-accent); }
body.kbd-open #keybar { padding-bottom: 6px; }
body.kbd-open #tabs, body.kbd-open .fab { display: none; }
/* Design-Extras */
[data-theme='xp'] .page-head, [data-theme='xp'] .term-head { background: linear-gradient(#0a5fdc, #0846b8 55%, #0a3f9f); color: #fff; border-color: #0a3f9f; }
[data-theme='xp'] .page-head .icon, [data-theme='xp'] .term-head .icon, [data-theme='xp'] .term-title svg { color: #fff; }
[data-theme='xp'] #tabs { background: linear-gradient(#3168d5, #1d4fbf); border-color: #0a3f9f; }
[data-theme='xp'] #tabs button { color: #c7d8ff; }
[data-theme='xp'] #tabs button.active { color: #fff; }
[data-theme='xp'] .btn.primary, [data-theme='xp'] .fab { background: linear-gradient(#3d86e8, #2159b8); }
[data-theme='cyberpunk'] .btn.primary, [data-theme='cyberpunk'] .fab { clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 12px) 100%, 0 100%); }
[data-theme='cyberpunk'] .btn.primary { text-transform: uppercase; letter-spacing: .6px; }
[data-theme='cyberpunk'] .top h1 { text-transform: uppercase; letter-spacing: 1px; text-shadow: 2px 0 #ff003c88, -2px 0 #00f0ff88; }
[data-theme='cyberpunk'] .list, [data-theme='cyberpunk'] .card { border-left: 2px solid var(--accent); }
[data-theme='cyberpunk'] #tabs button.active { color: var(--accent); text-shadow: 0 0 8px #fcee0a88; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 14px; }
.theme-prev { border-radius: 12px; padding: 8px; border: 2px solid var(--line); font-size: 12px; font-weight: 600; text-align: left; }
.theme-prev.active { border-color: var(--accent); }
.theme-prev .dp { display: flex; gap: 4px; height: 40px; margin-bottom: 6px; }
.theme-prev .dp i { width: 12px; border-radius: 3px; }
.theme-prev .dp div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.theme-prev .dp b { flex: 1; border-radius: 3px; position: relative; }
.theme-prev .dp s { position: absolute; left: 4px; top: 4px; width: 14px; height: 6px; border-radius: 2px; }
.colors { display: flex; flex-wrap: wrap; gap: 10px; }
.colors button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; }
.colors button.active { border-color: var(--text); }
/* macOS Liquid Glass */
[data-theme='macos'] #main, [data-theme='macos'] #view { background: transparent; }
[data-theme='macos'] :is(.list, .card, .search, #tabs, .page-head, .term-head, .sheet, .dialog, .toast, .chip, .btn, .fab, .field input, .field select, .field textarea, #keybar) {
-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
[data-theme='macos'] :is(.list, .card, .search, .sheet, .dialog, .toast, .chip) { border: 1px solid var(--border); box-shadow: var(--glass-edge); }
[data-theme='macos'] .page, [data-theme='macos'] #lockScreen { background: var(--wallpaper); }
[data-theme='macos'] .page-body { background: transparent; }
[data-theme='macos'] #tabs, [data-theme='macos'] .page-head { background: rgba(255, 255, 255, .42); border-color: rgba(255, 255, 255, .7); }
[data-theme='macos'] .btn { border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
[data-theme='macos'] .btn.primary, [data-theme='macos'] .fab { background: linear-gradient(rgba(40, 145, 255, .92), rgba(0, 110, 240, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 18px rgba(0, 122, 255, .3); }
[data-theme='macos'] .fab { border-radius: 50%; }
[data-theme='macos'] .scrim { background: rgba(30, 40, 70, .18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
[data-theme='macos'] .sheet, [data-theme='macos'] .dialog { background: rgba(255, 255, 255, .62); }