-
Notifications
You must be signed in to change notification settings - Fork 2
/
stylesheet.css
71 lines (58 loc) · 1.57 KB
/
stylesheet.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
:root {
--nr-videos-per-row: 6; /* number of videos per row */
--grid-padding: 5vw; /* left and right padding of main grid */
--display-avatar: none; /* to enable: inline-block */
}
ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: var(--nr-videos-per-row)!important;
}
ytd-rich-grid-row {
width: unset;
}
ytd-rich-grid-row > #contents.ytd-rich-grid-row {
flex-direction: column;
margin: 0;
}
ytd-rich-grid-row > #contents > ytd-rich-item-renderer {
margin-right: 4px;
margin-left: 0;
display: inline-block;
width: calc((80vw - 2 * var(--grid-padding)) / var(--nr-videos-per-row));
height: calc((80vw - 2 * var(--grid-padding)) / var(--nr-videos-per-row));
margin-bottom: 24px;
}
ytd-rich-grid-renderer > div#contents.style-scope.ytd-rich-grid-renderer {
padding: 0 var(--grid-padding);
max-width: calc(100% - 2 * var(--grid-padding));
display: flex;
justify-content: start;
}
a#video-title.yt-simple-endpoint.style-scope.ytd-rich-grid-video-renderer {
font-size: 1.4rem;
}
div#metadata * {
font-size: 1.3rem!important;
}
a#avatar-link {
display: var(--display-avatar);
}
@media screen and (max-width: 768px) {
:root {
--nr-videos-per-row: 2;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
:root {
--nr-videos-per-row: 3;
}
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
:root {
--nr-videos-per-row: 4;
}
}
@media screen and (min-width: 1201px) and (max-width: 1600px) {
:root {
--nr-videos-per-row: 5;
}
}