feat: rounding

README.md

@@ -1,7 +1,7 @@
 <h3 align="center">
 	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
 	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
-	Catppuccin for <a href="https://jellyfin.org">jellyfin</a>
+	Catppuccin for <a href="https://jellyfin.org">Jellyfin</a>
 	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
 </h3>
 
@@ -69,6 +69,21 @@ The accent color can be overrided by adding the following **after** the imports:
 }
 ```
 
+<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
 
 - [Isabel](https://github.com/isabelroses)

src/rounding.css

@@ -0,0 +1,22 @@
+.cardContent-button,
+.cardContent-shadow,
+.itemDetailImage,
+.cardOverlayButton-hover,
+.cardOverlayContainer,
+.cardImageContainer,
+.cardPadder,
+.paperList,
+.listItem,
+.listItemImage,
+.listItemImageButton,
+.listItemButton,
+.headerButton,
+.emby-button,
+.cardBox,
+.paper-icon-button-light,
+.innerCardFooter,
+.blurhash-canvas,
+.actionSheetMenuItem:hover,
+.dialog {
+  border-radius: 8px !important;
+}

src/theme.css

@@ -211,8 +211,6 @@ html {
   color: var(--dimmer-text);
 }
 
-/* General focus element color */
-
 .layout-tv .paper-icon-button-light.show-focus:focus {
   color: var(--main-color) !important;
 }