refact!: prepare for transfer

apply @sgoudham's suggestions
ref https://github.com/catppuccin/catppuccin/issues/2696#issuecomment-2707252468

changes:
- removed every styling outside of the colors themselves (i.e. rounding,
  `text-shadow` & `padding`)
- changed the default accent color to `mauve`
- renamed flavour CSS filenames from `<f>.css` to `catppuccin-<f>.css`

Signed-off-by: Adam Perkowski <adas1per@protonmail.com>
This commit is contained in:
Adam Perkowski
2025-03-07 22:55:17 +01:00
parent 43ec38b80c
commit f3a5351eb3
15 changed files with 11 additions and 32 deletions
+5 -20
View File
@@ -44,13 +44,13 @@
3. Copy your preferred flavor's import rule and paste it **after** the theme import: 3. Copy your preferred flavor's import rule and paste it **after** the theme import:
```css ```css
/* 🌻 Latte */ /* 🌻 Latte */
@import url('https://adamperkowski.github.io/jellyfin/latte.css'); @import url('https://adamperkowski.github.io/jellyfin/catppuccin-latte.css');
/* 🪴 Frappé */ /* 🪴 Frappé */
@import url('https://adamperkowski.github.io/jellyfin/frappe.css'); @import url('https://adamperkowski.github.io/jellyfin/catppuccin-frappe.css');
/* 🌺 Macchiato */ /* 🌺 Macchiato */
@import url('https://adamperkowski.github.io/jellyfin/macchiato.css'); @import url('https://adamperkowski.github.io/jellyfin/catppuccin-macchiato.css');
/* 🌿 Mocha */ /* 🌿 Mocha */
@import url('https://adamperkowski.github.io/jellyfin/mocha.css'); @import url('https://adamperkowski.github.io/jellyfin/catppuccin-mocha.css');
``` ```
4. Press save and you're done! 4. Press save and you're done!
@@ -59,25 +59,10 @@
The accent color can be overrided by adding the following **after** the imports: The accent color can be overrided by adding the following **after** the imports:
```css ```css
:root { :root {
--main-color: var(--mauve); --main-color: var(--sapphire);
} }
``` ```
<details>
<summary>Preview</summary>
<img src="/assets/mauve.webp"/>
</details>
There is also an everything-rounded extension available:
```css
@import url('https://adamperkowski.github.io/jellyfin/rounding.css');
```
<details>
<summary>Preview</summary>
<img src="/assets/rounding0.webp"/>
<img src="/assets/rounding1.webp"/>
</details>
## 💝 Thanks to ## 💝 Thanks to
- [Adam](https://github.com/adamperkowski) - [Adam](https://github.com/adamperkowski)
Binary file not shown.

Before

Width:  |  Height:  |  Size: 196 KiB

After

Width:  |  Height:  |  Size: 255 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 197 KiB

After

Width:  |  Height:  |  Size: 255 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 197 KiB

After

Width:  |  Height:  |  Size: 256 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 202 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 193 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 199 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

+2 -2
View File
@@ -3,7 +3,7 @@ whiskers:
version: 2.5.1 version: 2.5.1
matrix: matrix:
- flavor - flavor
filename: 'themes/{{flavor.identifier}}.css' filename: 'themes/catppuccin-{{flavor.identifier}}.css'
--- ---
:root { :root {
--rosewater: #{{rosewater.hex}}; --rosewater: #{{rosewater.hex}};
@@ -21,7 +21,7 @@ whiskers:
--blue: #{{blue.hex}}; --blue: #{{blue.hex}};
--lavender: #{{lavender.hex}}; --lavender: #{{lavender.hex}};
--main-color: var(--sapphire); --main-color: var(--mauve);
--main-background: #{{base.hex}}; --main-background: #{{base.hex}};
--second-background: #{{mantle.hex}}; --second-background: #{{mantle.hex}};
--hover-background: #{{surface0.hex}}; --hover-background: #{{surface0.hex}};
@@ -14,7 +14,7 @@
--blue: #8caaee; --blue: #8caaee;
--lavender: #babbf1; --lavender: #babbf1;
--main-color: var(--sapphire); --main-color: var(--mauve);
--main-background: #303446; --main-background: #303446;
--second-background: #292c3c; --second-background: #292c3c;
--hover-background: #414559; --hover-background: #414559;
@@ -14,7 +14,7 @@
--blue: #1e66f5; --blue: #1e66f5;
--lavender: #7287fd; --lavender: #7287fd;
--main-color: var(--sapphire); --main-color: var(--mauve);
--main-background: #eff1f5; --main-background: #eff1f5;
--second-background: #e6e9ef; --second-background: #e6e9ef;
--hover-background: #ccd0da; --hover-background: #ccd0da;
@@ -14,7 +14,7 @@
--blue: #8aadf4; --blue: #8aadf4;
--lavender: #b7bdf8; --lavender: #b7bdf8;
--main-color: var(--sapphire); --main-color: var(--mauve);
--main-background: #24273a; --main-background: #24273a;
--second-background: #1e2030; --second-background: #1e2030;
--hover-background: #363a4f; --hover-background: #363a4f;
@@ -14,7 +14,7 @@
--blue: #89b4fa; --blue: #89b4fa;
--lavender: #b4befe; --lavender: #b4befe;
--main-color: var(--sapphire); --main-color: var(--mauve);
--main-background: #1e1e2e; --main-background: #1e1e2e;
--second-background: #181825; --second-background: #181825;
--hover-background: #313244; --hover-background: #313244;
-6
View File
@@ -5,13 +5,11 @@
::-moz-selection { ::-moz-selection {
background: var(--main-color); background: var(--main-color);
color: var(--main-background); color: var(--main-background);
text-shadow: none;
} }
::selection { ::selection {
background: var(--main-color); background: var(--main-color);
color: var(--main-background); color: var(--main-background);
text-shadow: none;
} }
.mdl-slider-background-upper { .mdl-slider-background-upper {
@@ -324,7 +322,3 @@ div[role=presentation].jstree-wholerow-clicked {
.itemProgressBar.backgroundProgress .itemProgressBarForeground { .itemProgressBar.backgroundProgress .itemProgressBarForeground {
background-color: var(--hover-background) !important; background-color: var(--hover-background) !important;
} }
.nowPlayingInfoControls {
padding-left: 10px;
}