]>
Commit | Line | Data |
---|---|---|
8cbc40b2 C |
1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | |
3 | @use '_miniature' as *; | |
2d3741d6 | 4 | |
cf78883c C |
5 | .section-title { |
6 | // make the element span a full grid row within .videos grid | |
7 | grid-column: 1 / -1; | |
8 | } | |
9 | ||
c8487f3f | 10 | .margin-content { |
5d6395af | 11 | @include grid-videos-miniature-layout-with-margins; |
1a471091 C |
12 | } |
13 | ||
c8487f3f | 14 | .section { |
0f7407d9 C |
15 | &:first-child { |
16 | padding-top: 30px; | |
17 | ||
18 | .section-title { | |
931d3430 | 19 | border-top: 0 !important; |
0f7407d9 C |
20 | } |
21 | } | |
22 | ||
23 | .section-title { | |
24 | font-size: 24px; | |
25 | font-weight: $font-semibold; | |
26 | padding-top: 15px; | |
27 | margin-bottom: 15px; | |
28 | display: flex; | |
29 | justify-content: space-between; | |
30 | ||
31 | &:not(h2) { | |
32 | border-top: 1px solid $separator-border-color; | |
33 | } | |
34 | ||
35 | a { | |
931d3430 C |
36 | color: pvar(--mainForegroundColor); |
37 | ||
38 | &:hover, | |
39 | &:focus:not(.focus-visible), | |
40 | &:active { | |
0f7407d9 C |
41 | text-decoration: none; |
42 | outline: none; | |
43 | } | |
0f7407d9 C |
44 | } |
45 | } | |
46 | ||
47 | &.channel { | |
48 | .section-title { | |
49 | a { | |
50 | display: flex; | |
51 | width: fit-content; | |
52 | align-items: center; | |
53 | ||
746018f6 | 54 | my-actor-avatar { |
27bc9586 | 55 | @include margin-right(8px); |
0f7407d9 | 56 | |
746018f6 | 57 | font-size: initial; |
0f7407d9 C |
58 | } |
59 | } | |
60 | ||
61 | .followers { | |
27bc9586 C |
62 | @include margin-left(10px); |
63 | ||
0f7407d9 C |
64 | color: pvar(--greyForegroundColor); |
65 | font-weight: normal; | |
66 | font-size: 14px; | |
0f7407d9 C |
67 | position: relative; |
68 | top: 2px; | |
69 | } | |
70 | } | |
71 | } | |
72 | ||
73 | .show-more { | |
74 | position: relative; | |
75 | top: -5px; | |
76 | display: inline-block; | |
77 | font-size: 16px; | |
78 | text-transform: uppercase; | |
79 | color: pvar(--greyForegroundColor); | |
80 | margin-bottom: 10px; | |
81 | font-weight: $font-semibold; | |
82 | text-decoration: none; | |
83 | } | |
84 | ||
85 | @media screen and (max-width: $mobile-view) { | |
86 | max-height: initial; | |
87 | overflow: initial; | |
88 | ||
89 | .section-title { | |
27bc9586 C |
90 | @include margin-left(10px); |
91 | ||
0f7407d9 | 92 | font-size: 17px; |
0f7407d9 C |
93 | } |
94 | } | |
830b4faf | 95 | } |