]>
Commit | Line | Data |
---|---|---|
2d3741d6 C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
830b4faf | 3 | @import '_miniature'; |
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 { |
0f7407d9 | 11 | @include grid-videos-miniature-layout; |
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 C |
54 | my-actor-avatar { |
55 | @include actor-avatar-size(28px); | |
27bc9586 | 56 | @include margin-right(8px); |
0f7407d9 | 57 | |
746018f6 | 58 | font-size: initial; |
0f7407d9 C |
59 | } |
60 | } | |
61 | ||
62 | .followers { | |
27bc9586 C |
63 | @include margin-left(10px); |
64 | ||
0f7407d9 C |
65 | color: pvar(--greyForegroundColor); |
66 | font-weight: normal; | |
67 | font-size: 14px; | |
0f7407d9 C |
68 | position: relative; |
69 | top: 2px; | |
70 | } | |
71 | } | |
72 | } | |
73 | ||
74 | .show-more { | |
75 | position: relative; | |
76 | top: -5px; | |
77 | display: inline-block; | |
78 | font-size: 16px; | |
79 | text-transform: uppercase; | |
80 | color: pvar(--greyForegroundColor); | |
81 | margin-bottom: 10px; | |
82 | font-weight: $font-semibold; | |
83 | text-decoration: none; | |
84 | } | |
85 | ||
86 | @media screen and (max-width: $mobile-view) { | |
87 | max-height: initial; | |
88 | overflow: initial; | |
89 | ||
90 | .section-title { | |
27bc9586 C |
91 | @include margin-left(10px); |
92 | ||
0f7407d9 | 93 | font-size: 17px; |
0f7407d9 C |
94 | } |
95 | } | |
830b4faf | 96 | } |