custom.css (1057B)
1 * {
2 scroll-behavior: smooth;
3 }
4
5 .preview, .player, .player_container {
6 height: auto;
7 width: 100%;
8 aspect-ratio: 4/3;
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 details {
43 width: 100% !important;
44 }
45
46 a.button:visited,
47 a.button:hover
48 {
49 color: var(--bg) !important;
50 }
51
52 .hidden {
53 display: none;
54 }
55
56 input {
57 width: 100%;
58 }
59
60 @media only screen and (width<=720px) {
61 button, .button {
62 width: 100%;
63 align-content: center;
64 text-align: center;
65 }
66 }
67
68 a[href^="https"]:where([href*="www.youtube.com"])::after {
69 content: " \2197";
70 }
71
72 .error {
73 background-color: red;
74 }
