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>
@@ -44,13 +44,13 @@
|
||||
3. Copy your preferred flavor's import rule and paste it **after** the theme import:
|
||||
```css
|
||||
/* 🌻 Latte */
|
||||
@import url('https://adamperkowski.github.io/jellyfin/latte.css');
|
||||
@import url('https://adamperkowski.github.io/jellyfin/catppuccin-latte.css');
|
||||
/* 🪴 Frappé */
|
||||
@import url('https://adamperkowski.github.io/jellyfin/frappe.css');
|
||||
@import url('https://adamperkowski.github.io/jellyfin/catppuccin-frappe.css');
|
||||
/* 🌺 Macchiato */
|
||||
@import url('https://adamperkowski.github.io/jellyfin/macchiato.css');
|
||||
@import url('https://adamperkowski.github.io/jellyfin/catppuccin-macchiato.css');
|
||||
/* 🌿 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!
|
||||
|
||||
@@ -59,25 +59,10 @@
|
||||
The accent color can be overrided by adding the following **after** the imports:
|
||||
```css
|
||||
: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
|
||||
|
||||
- [Adam](https://github.com/adamperkowski)
|
||||
|
||||
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 255 KiB |
|
Before Width: | Height: | Size: 197 KiB After Width: | Height: | Size: 255 KiB |
|
Before Width: | Height: | Size: 197 KiB After Width: | Height: | Size: 256 KiB |
|
Before Width: | Height: | Size: 202 KiB |
|
Before Width: | Height: | Size: 198 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 199 KiB |
|
Before Width: | Height: | Size: 13 KiB |
@@ -3,7 +3,7 @@ whiskers:
|
||||
version: 2.5.1
|
||||
matrix:
|
||||
- flavor
|
||||
filename: 'themes/{{flavor.identifier}}.css'
|
||||
filename: 'themes/catppuccin-{{flavor.identifier}}.css'
|
||||
---
|
||||
:root {
|
||||
--rosewater: #{{rosewater.hex}};
|
||||
@@ -21,7 +21,7 @@ whiskers:
|
||||
--blue: #{{blue.hex}};
|
||||
--lavender: #{{lavender.hex}};
|
||||
|
||||
--main-color: var(--sapphire);
|
||||
--main-color: var(--mauve);
|
||||
--main-background: #{{base.hex}};
|
||||
--second-background: #{{mantle.hex}};
|
||||
--hover-background: #{{surface0.hex}};
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
--blue: #8caaee;
|
||||
--lavender: #babbf1;
|
||||
|
||||
--main-color: var(--sapphire);
|
||||
--main-color: var(--mauve);
|
||||
--main-background: #303446;
|
||||
--second-background: #292c3c;
|
||||
--hover-background: #414559;
|
||||
@@ -14,7 +14,7 @@
|
||||
--blue: #1e66f5;
|
||||
--lavender: #7287fd;
|
||||
|
||||
--main-color: var(--sapphire);
|
||||
--main-color: var(--mauve);
|
||||
--main-background: #eff1f5;
|
||||
--second-background: #e6e9ef;
|
||||
--hover-background: #ccd0da;
|
||||
@@ -14,7 +14,7 @@
|
||||
--blue: #8aadf4;
|
||||
--lavender: #b7bdf8;
|
||||
|
||||
--main-color: var(--sapphire);
|
||||
--main-color: var(--mauve);
|
||||
--main-background: #24273a;
|
||||
--second-background: #1e2030;
|
||||
--hover-background: #363a4f;
|
||||
@@ -14,7 +14,7 @@
|
||||
--blue: #89b4fa;
|
||||
--lavender: #b4befe;
|
||||
|
||||
--main-color: var(--sapphire);
|
||||
--main-color: var(--mauve);
|
||||
--main-background: #1e1e2e;
|
||||
--second-background: #181825;
|
||||
--hover-background: #313244;
|
||||
@@ -5,13 +5,11 @@
|
||||
::-moz-selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--main-color);
|
||||
color: var(--main-background);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.mdl-slider-background-upper {
|
||||
@@ -324,7 +322,3 @@ div[role=presentation].jstree-wholerow-clicked {
|
||||
.itemProgressBar.backgroundProgress .itemProgressBarForeground {
|
||||
background-color: var(--hover-background) !important;
|
||||
}
|
||||
|
||||
.nowPlayingInfoControls {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||