filipriec/universal_web_loco_rewrite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

catppucin latte

Browse Source
This commit is contained in:
Priec
2026-05-19 20:09:03 +02:00
parent c1db8358c4
commit b86aa60dfe
3 changed files with 78 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
assets/static/css/theme.css
View File

@@ -1,11 +1,12 @@
/* ============================================================ /* ============================================================
* Gruvbox terminal theme * Terminal theme
* ------------------------------------------------------------ * ------------------------------------------------------------
* Project-owned styling. The vendored `app.css` (a pre-compiled * Project-owned styling. The vendored `app.css` (a pre-compiled
* Tailwind + DaisyUI bundle) is NOT edited. This file loads * Tailwind + DaisyUI bundle) is NOT edited. This file loads
* after it (see base.html / admin/base.html) and provides: * after it (see base.html / admin/base.html) and provides:
* *
* 1. the Gruvbox palette for DaisyUI's `dark` theme * 1. Catppuccin Latte for DaisyUI's `light` theme
* and Gruvbox for DaisyUI's `dark` theme
* 2. square corners (terminals have none) * 2. square corners (terminals have none)
* 3. a terminal look & feel: monospace, window chrome, * 3. a terminal look & feel: monospace, window chrome,
* vim-style statusline, CRT scanlines * vim-style statusline, CRT scanlines
@@ -17,12 +18,41 @@
* (card/btn/badge/menu/...) do exist and are reused; everything * (card/btn/badge/menu/...) do exist and are reused; everything
* else is defined here as real, themeable CSS. * else is defined here as real, themeable CSS.
* *
* Palette: https://github.com/morhetz/gruvbox (dark, bright) * Palettes:
* - https://github.com/catppuccin/catppuccin (Latte)
* - https://github.com/morhetz/gruvbox (dark, bright)
* DaisyUI color vars are OKLch "L% C H" triplets; this file can * DaisyUI color vars are OKLch "L% C H" triplets; this file can
* therefore tint anything with `oklch(var(--x) / <alpha>)`. * therefore tint anything with `oklch(var(--x) / <alpha>)`.
* ============================================================ */ * ============================================================ */
/* === 1. Gruvbox dark palette ================================ */ /* === 1. Theme palettes ====================================== */
/* Catppuccin Latte. */
[data-theme="light"] {
--b1: 95.78% 0.006 264.5; /* #eff1f5 base */
--b2: 93.35% 0.009 264.5; /* #e6e9ef mantle */
--b3: 90.60% 0.012 264.5; /* #dce0e8 crust */
--bc: 43.55% 0.043 279.3; /* #4c4f69 text */
--n: 80.83% 0.017 271.2; /* #bcc0cc surface1 */
--nc: 43.55% 0.043 279.3; /* #4c4f69 text */
--p: 55.86% 0.226 262.1; /* #1e66f5 blue primary */
--pc: 95.78% 0.006 264.5; /* #eff1f5 text on primary */
--s: 55.47% 0.250 297.0; /* #8839ef mauve secondary */
--sc: 95.78% 0.006 264.5; /* #eff1f5 text on secondary */
--a: 60.23% 0.098 201.1; /* #179299 teal accent */
--ac: 95.78% 0.006 264.5; /* #eff1f5 text on accent */
--in: 68.20% 0.145 235.4; /* #04a5e5 sky info */
--su: 62.50% 0.177 140.4; /* #40a02b green success */
--wa: 71.40% 0.149 67.8; /* #df8e1d yellow warning */
--er: 55.05% 0.216 19.8; /* #d20f39 red error */
--inc: 43.55% 0.043 279.3; /* #4c4f69 text on status */
--suc: 95.78% 0.006 264.5;
--wac: 95.78% 0.006 264.5;
--erc: 95.78% 0.006 264.5;
}
/* Source hex noted per line. To retune: change hex, reconvert /* Source hex noted per line. To retune: change hex, reconvert
* to OKLch, update the value. */ * to OKLch, update the value. */
[data-theme="dark"] { [data-theme="dark"] {
@@ -72,7 +102,16 @@ body {
line-height: 1.6; line-height: 1.6;
} }
/* Gruvbox text selection + scrollbars (dark only) */ /* Text selection + scrollbars */
[data-theme="light"] ::selection { background: #acb0be; color: #4c4f69; }
[data-theme="light"] { scrollbar-color: #bcc0cc #eff1f5; }
[data-theme="light"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #eff1f5; }
[data-theme="light"] ::-webkit-scrollbar-thumb {
background: #bcc0cc; border: 3px solid #eff1f5;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #acb0be; }
[data-theme="dark"] ::selection { background: #fe8019; color: #282828; } [data-theme="dark"] ::selection { background: #fe8019; color: #282828; }
[data-theme="dark"] { scrollbar-color: #504945 #282828; } [data-theme="dark"] { scrollbar-color: #504945 #282828; }
[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }

36
assets/views/admin/base.html
View File

@@ -117,33 +117,31 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg> </svg>
</div> </div>
<ul tabindex="0" class="menu dropdown-content z-50 mt-3 w-56 border border-base-300 bg-base-200 p-2 shadow-lg"> <form method="post" action="/lang" hx-boost="false">
<li class="menu-title">{{ t(key="settings-language", lang=lang | default(value='sk')) }}</li> <ul tabindex="0" class="menu dropdown-content z-50 mt-3 w-56 border border-base-300 bg-base-200 p-2 shadow-lg">
<li> <li class="menu-title">{{ t(key="settings-language", lang=lang | default(value='sk')) }}</li>
<form method="post" action="/lang" hx-boost="false"> <li>
<button type="submit" name="lang" value="en" class="btn btn-ghost btn-sm w-full justify-start"> <button type="submit" name="lang" value="en" class="{% if lang | default(value='sk') == 'en' %}active{% endif %}">
<span>English</span> English
{% if lang | default(value='sk') == 'en' %} {% if lang | default(value='sk') == 'en' %}
<span class="ml-auto">✓</span> <span class="ml-auto">✓</span>
{% endif %} {% endif %}
</button> </button>
</form> </li>
</li> <li>
<li> <button type="submit" name="lang" value="sk" class="{% if lang | default(value='sk') == 'sk' %}active{% endif %}">
<form method="post" action="/lang" hx-boost="false"> Slovenčina
<button type="submit" name="lang" value="sk" class="btn btn-ghost btn-sm w-full justify-start">
<span>Slovenčina</span>
{% if lang | default(value='sk') == 'sk' %} {% if lang | default(value='sk') == 'sk' %}
<span class="ml-auto">✓</span> <span class="ml-auto">✓</span>
{% endif %} {% endif %}
</button> </button>
</form> </li>
</li> <li class="menu-title">:set theme</li>
<li class="menu-title">:set theme</li> <li><button type="button" data-theme-opt="system" onclick="setTheme('system')">system <span class="opt-check ml-auto hidden">✓</span></button></li>
<li><button type="button" data-theme-opt="system" onclick="setTheme('system')">system <span class="opt-check ml-auto hidden">✓</span></button></li> <li><button type="button" data-theme-opt="light" onclick="setTheme('light')">light <span class="opt-check ml-auto hidden">✓</span></button></li>
<li><button type="button" data-theme-opt="light" onclick="setTheme('light')">light <span class="opt-check ml-auto hidden">✓</span></button></li> <li><button type="button" data-theme-opt="dark" onclick="setTheme('dark')">dark <span class="opt-check ml-auto hidden">✓</span></button></li>
<li><button type="button" data-theme-opt="dark" onclick="setTheme('dark')">dark <span class="opt-check ml-auto hidden">✓</span></button></li> </ul>
</ul> </form>
</div> </div>
</div> </div>
</nav> </nav>

36
assets/views/base.html
View File

@@ -313,33 +313,31 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg> </svg>
</div> </div>
<ul tabindex="0" class="menu dropdown-content z-50 mt-3 w-56 border border-base-300 bg-base-200 p-2 shadow-lg"> <form method="post" action="/lang" hx-boost="false">
<li class="menu-title">{{ t(key="settings-language", lang=lang | default(value='sk')) }}</li> <ul tabindex="0" class="menu dropdown-content z-50 mt-3 w-56 border border-base-300 bg-base-200 p-2 shadow-lg">
<li> <li class="menu-title">{{ t(key="settings-language", lang=lang | default(value='sk')) }}</li>
<form method="post" action="/lang" hx-boost="false"> <li>
<button type="submit" name="lang" value="en" class="btn btn-ghost btn-sm w-full justify-start"> <button type="submit" name="lang" value="en" class="{% if lang | default(value='sk') == 'en' %}active{% endif %}">
<span>English</span> English
{% if lang | default(value='sk') == 'en' %} {% if lang | default(value='sk') == 'en' %}
<span class="ml-auto">✓</span> <span class="ml-auto">✓</span>
{% endif %} {% endif %}
</button> </button>
</form> </li>
</li> <li>
<li> <button type="submit" name="lang" value="sk" class="{% if lang | default(value='sk') == 'sk' %}active{% endif %}">
<form method="post" action="/lang" hx-boost="false"> Slovenčina
<button type="submit" name="lang" value="sk" class="btn btn-ghost btn-sm w-full justify-start">
<span>Slovenčina</span>
{% if lang | default(value='sk') == 'sk' %} {% if lang | default(value='sk') == 'sk' %}
<span class="ml-auto">✓</span> <span class="ml-auto">✓</span>
{% endif %} {% endif %}
</button> </button>
</form> </li>
</li> <li class="menu-title">{{ t(key="settings-theme", lang=lang | default(value='sk')) }}</li>
<li class="menu-title">{{ t(key="settings-theme", lang=lang | default(value='sk')) }}</li> <li><button type="button" data-theme-opt="system" onclick="setTheme('system')">{{ t(key="theme-system", lang=lang | default(value='sk')) }} <span class="opt-check ml-auto hidden">✓</span></button></li>
<li><button type="button" data-theme-opt="system" onclick="setTheme('system')">{{ t(key="theme-system", lang=lang | default(value='sk')) }} <span class="opt-check ml-auto hidden">✓</span></button></li> <li><button type="button" data-theme-opt="light" onclick="setTheme('light')">{{ t(key="theme-light", lang=lang | default(value='sk')) }} <span class="opt-check ml-auto hidden">✓</span></button></li>
<li><button type="button" data-theme-opt="light" onclick="setTheme('light')">{{ t(key="theme-light", lang=lang | default(value='sk')) }} <span class="opt-check ml-auto hidden">✓</span></button></li> <li><button type="button" data-theme-opt="dark" onclick="setTheme('dark')">{{ t(key="theme-dark", lang=lang | default(value='sk')) }} <span class="opt-check ml-auto hidden">✓</span></button></li>
<li><button type="button" data-theme-opt="dark" onclick="setTheme('dark')">{{ t(key="theme-dark", lang=lang | default(value='sk')) }} <span class="opt-check ml-auto hidden">✓</span></button></li> </ul>
</ul> </form>
</div> </div>
</div> </div>
</nav> </nav>