custom.css (1376B)
1 * {
2 scroll-behavior: smooth;
3 }
4
5 .preview, .player, .player_container {
6 height: auto;
7 width: 100%;
8 aspect-ratio: 16/9 !important;
9 margin-top: 1em;
10 margin-bottom: 1em;
11 border: 0;
12 }
13
14 /* Put animated play button on top of thumbnails */
15 .preview {
16 position: relative;
17 }
18 .preview > image {
19 display: block;
20 }
21 .play_button {
22 position: absolute;
23 top: 25%;
24 left: 25%;
25 height: 50%;
26 width: 50%;
27 background: url("/assets/motion-play.svg") #cccccc;
28 background-size: 100% 100%;
29 border: 2px solid;
30 border-radius: 25px;
31 opacity: 0.5;
32 }
33 .play_button:hover {
34 filter: invert(100%);
35 opacity: 1;
36 }
37
38 #searchbar {
39 width: 100%;
40 margin-top: 2em;
41 }
42 .chat_container, .chat_container > iframe {
43 width: 100%;
44 height:100%;
45 min-height: 800px;
46 border: 0;
47 margin: 0px;
48 background-color: var(--bg);
49 }
50 details {
51 width: 100% !important;
52 }
53
54 a.button:visited,
55 a.button:hover
56 {
57 color: var(--bg) !important;
58 }
59
60 .hidden {
61 display: none;
62 }
63
64 textarea[name=streams] {
65 width: 100%;
66 min-height: 400px;
67 }
68
69 .loading_indicator {
70 color: white;
71 font-size: 75%;
72 }
73 .loading_indicator.online {
74 color: var(--accent);
75 }
76 .loading_indicator.offline {
77 color: #898ea4;
78 }
79
80 @media only screen and (width<=720px) {
81 button, .button {
82 width: 100%;
83 align-content: center;
84 text-align: center;
85 }
86 }
87
88 a[href^="https"]:where([href*="www.twitch.tv"])::after {
89 content: " \2197";
90 }
