-
Notifications
You must be signed in to change notification settings - Fork 20
/
Copy pathalternate_style.css
116 lines (85 loc) · 4.98 KB
/
alternate_style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
# Kaleidochromic
A custom theme for Jellyfin mediaserver created using CSS overrides. While a separate theme, it is built on top other theme, Monochromic. Therefore, please open any issues over there. Kaleidochromic is essentially Monochromic, but with yet another layer of overrides. This makes maintenance easier.
To use the theme copy paste the line below into "Dashboard>General>Custom CSS" and click save, it will apply immediately server-wide to all users on top of any theme they may be using. To remove the theme, clear the "Custom CSS" field and then click save. **NOTE: Theme may not work when using reverse proxy**, check the bottom section of this readme for more info.
```css
@import url('https://ctalvio.github.io/Kaleidochromic/default_style.css');
```
## Features
- Themes **EVERYTHING**
- Bright, Transparent, Minimalistic
- Uses the same font as the JF logo everywhere
- Add-ons for an easy personal touch
- Customizable accent color
- Blurred backdrops
- Rounded look (optionally sharp)
- Two options for progress bars
- Works well on mobile
- More compact
- Smaller and squared cast info
## Add-ons
This theme has some additional options, they can allow the use of a custom accent color, and more. These are added immediately after the default import line.
### Improve performance
The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default.
```css
@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');
```
### Restore bottom bar style episode progress
Don't like my transparent view progress overlay? Use this to go back to the old style.
```css
@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');
```
### Accent color presets
Blue restores some of the default jellyfin blue accenting, while purple uses... Well, purple, in a Jellyfin shade of course.
```css
@import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');
@import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css');
```
### Modify rounding
By adding this variable at the bottom, after the import lines, the rounding can be removed, reduced or increased. **Variables should always be last**.
```css
:root {--rounding: 12px;}
```
### Define your own accent color
This is now integrated into the theme and requires no additional import line, and uses a variable same as rounding. Use any RGB color picker to find the value for any given color and enter it. **Variables should always be last**.
:root {--accent: R, G, B;}
```
## Screenshots
## Using with reverse proxy
When using the Nginx Reverse proxy config from the [Jellyfin docs](https://jellyfin.org/docs/general/networking/nginx.html) the theme will not work by default. (If you are using the subpath config, you can ignore all this.)
Because the config includes Content-Security-Policy which reduces risk of XSS, you need to add the URL from this repo and the fonts to the list of allowed external sources.
In the nginx config you should change the
```
add_header Content-Security-Policy ....
```
to:
```
add_header Content-Security-Policy "default-src https: data: blob:; style-src 'self' 'unsafe-inline'
https://ctalvio.github.io/Monochromic/default_style.css
https://ctalvio.github.io/Monochromic/jfblue_style.css
https://ctalvio.github.io/Monochromic/jfpurple_style.css
https://ctalvio.github.io/Monochromic/bottom-progress_style.css.css
https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css
https://ctalvio.github.io/Monochromic/improve-performance_style.css
https://ctalvio.github.io/Kaleidochromic/default_style.css
https://fonts.googleapis.com/css2;
script-src 'self' 'unsafe-inline'
https://www.gstatic.com/cv/js/sender/v1/cast_sender.js
https://www.youtube.com/iframe_api https://s.ytimg.com
https://ctalvio.github.io/Monochromic/default_style.css
https://ctalvio.github.io/Monochromic/jfblue_style.css
https://ctalvio.github.io/Monochromic/jfpurple_style.css
https://ctalvio.github.io/Monochromic/bottom-progress_style.css
https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css
https://ctalvio.github.io/Monochromic/improve-performance_style.css
https://ctalvio.github.io/Kaleidochromic/default_style.css
worker-src 'self' blob:; connect-src 'self'; object-src 'none'; frame-ancestors 'self'";
```
If you don't do this the theme will simply not load (reverts back to default theme) and the browser console will spit out an error. Even if you paste in all the CSS, the font will still not load since it is loaded from an external source.
Thanks to [LickABrick](https://github.com/LickABrick) for discovering this, and submitting instructions on how to fix.