catppucin latte
This commit is contained in:
Priec
@@ -1,11 +1,12 @@
|
||||
/* ============================================================
|
||||
* Gruvbox terminal theme
|
||||
* Terminal theme
|
||||
* ------------------------------------------------------------
|
||||
* Project-owned styling. The vendored `app.css` (a pre-compiled
|
||||
* Tailwind + DaisyUI bundle) is NOT edited. This file loads
|
||||
* 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)
|
||||
* 3. a terminal look & feel: monospace, window chrome,
|
||||
* vim-style statusline, CRT scanlines
|
||||
@@ -17,12 +18,41 @@
|
||||
* (card/btn/badge/menu/...) do exist and are reused; everything
|
||||
* 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
|
||||
* 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
|
||||
* to OKLch, update the value. */
|
||||
[data-theme="dark"] {
|
||||
@@ -72,7 +102,16 @@ body {
|
||||
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"] { scrollbar-color: #504945 #282828; }
|
||||
[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
|
||||
|
||||
@@ -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" />
|
||||
</svg>
|
||||
</div>
|
||||
<form method="post" action="/lang" hx-boost="false">
|
||||
<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 class="menu-title">{{ t(key="settings-language", lang=lang | default(value='sk')) }}</li>
|
||||
<li>
|
||||
<form method="post" action="/lang" hx-boost="false">
|
||||
<button type="submit" name="lang" value="en" class="btn btn-ghost btn-sm w-full justify-start">
|
||||
<span>English</span>
|
||||
<button type="submit" name="lang" value="en" class="{% if lang | default(value='sk') == 'en' %}active{% endif %}">
|
||||
English
|
||||
{% if lang | default(value='sk') == 'en' %}
|
||||
<span class="ml-auto">✓</span>
|
||||
{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
<form method="post" action="/lang" hx-boost="false">
|
||||
<button type="submit" name="lang" value="sk" class="btn btn-ghost btn-sm w-full justify-start">
|
||||
<span>Slovenčina</span>
|
||||
<button type="submit" name="lang" value="sk" class="{% if lang | default(value='sk') == 'sk' %}active{% endif %}">
|
||||
Slovenčina
|
||||
{% if lang | default(value='sk') == 'sk' %}
|
||||
<span class="ml-auto">✓</span>
|
||||
{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
</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="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>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -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" />
|
||||
</svg>
|
||||
</div>
|
||||
<form method="post" action="/lang" hx-boost="false">
|
||||
<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 class="menu-title">{{ t(key="settings-language", lang=lang | default(value='sk')) }}</li>
|
||||
<li>
|
||||
<form method="post" action="/lang" hx-boost="false">
|
||||
<button type="submit" name="lang" value="en" class="btn btn-ghost btn-sm w-full justify-start">
|
||||
<span>English</span>
|
||||
<button type="submit" name="lang" value="en" class="{% if lang | default(value='sk') == 'en' %}active{% endif %}">
|
||||
English
|
||||
{% if lang | default(value='sk') == 'en' %}
|
||||
<span class="ml-auto">✓</span>
|
||||
{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
<form method="post" action="/lang" hx-boost="false">
|
||||
<button type="submit" name="lang" value="sk" class="btn btn-ghost btn-sm w-full justify-start">
|
||||
<span>Slovenčina</span>
|
||||
<button type="submit" name="lang" value="sk" class="{% if lang | default(value='sk') == 'sk' %}active{% endif %}">
|
||||
Slovenčina
|
||||
{% if lang | default(value='sk') == 'sk' %}
|
||||
<span class="ml-auto">✓</span>
|
||||
{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
</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="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>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user