]>
Commit | Line | Data |
---|---|---|
fa12eacc | 1 | @use '_bootstrap-variables'; |
8cbc40b2 C |
2 | @use '_variables' as *; |
3 | @use '_mixins' as *; | |
4 | @use '_miniature' as *; | |
244e76a5 | 5 | |
1b206245 C |
6 | // Cannot set margin top to videos-header because of the main header fixed position |
7 | $margin-top: 30px; | |
8 | ||
017c3dca | 9 | .videos-header { |
dd24f1bb C |
10 | display: grid; |
11 | grid-template-columns: auto 1fr auto; | |
12 | margin-bottom: 30px; | |
017c3dca | 13 | |
dd24f1bb C |
14 | .title, |
15 | .title-subscription { | |
16 | grid-column: 1; | |
017c3dca C |
17 | } |
18 | ||
dd24f1bb C |
19 | .title { |
20 | font-size: 18px; | |
21 | color: pvar(--mainForegroundColor); | |
22 | display: inline-block; | |
23 | font-weight: $font-semibold; | |
27bc9586 | 24 | |
1b206245 | 25 | margin-top: $margin-top; |
dd24f1bb C |
26 | margin-bottom: 0; |
27 | } | |
28 | ||
29 | .title-subscription { | |
30 | grid-row: 2; | |
31 | font-size: 14px; | |
32 | color: pvar(--greyForegroundColor); | |
931d3430 | 33 | |
dd24f1bb C |
34 | &.no-title { |
35 | margin-top: 10px; | |
931d3430 | 36 | } |
017c3dca | 37 | } |
dd24f1bb C |
38 | |
39 | .action-block { | |
40 | grid-column: 3; | |
1b206245 C |
41 | grid-row: 1/3; |
42 | margin-top: $margin-top; | |
dd24f1bb C |
43 | } |
44 | ||
45 | my-feed { | |
46 | @include margin-left(5px); | |
47 | ||
48 | display: inline-block; | |
49 | width: 16px; | |
50 | color: pvar(--mainColor); | |
51 | position: relative; | |
52 | top: -2px; | |
53 | } | |
244e76a5 RK |
54 | } |
55 | ||
34c7f429 | 56 | .date-title { |
34c7f429 C |
57 | font-weight: $font-semibold; |
58 | margin-bottom: 20px; | |
5b0ec7cd | 59 | font-size: 1rem; |
34c7f429 | 60 | |
dd24f1bb | 61 | // Make the element span a full grid row within .videos grid |
e66883b3 RK |
62 | grid-column: 1 / -1; |
63 | ||
34c7f429 | 64 | &:not(:first-child) { |
d840487f RK |
65 | margin-top: .5rem; |
66 | padding-top: 20px; | |
34c7f429 C |
67 | border-top: 1px solid $separator-border-color; |
68 | } | |
69 | } | |
70 | ||
cf78883c | 71 | .margin-content { |
5d6395af | 72 | @include grid-videos-miniature-layout-with-margins; |
7193ad10 | 73 | } |
11dd0c2e | 74 | |
4d5e572f | 75 | .display-as-row.videos { |
27bc9586 C |
76 | @include margin-left(pvar(--horizontalMarginContent)); |
77 | @include margin-right(pvar(--horizontalMarginContent)); | |
4d5e572f C |
78 | |
79 | .video-wrapper { | |
80 | margin-bottom: 15px; | |
81 | } | |
82 | } | |
83 | ||
4682468d | 84 | @media screen and (max-width: $mobile-view) { |
dd24f1bb C |
85 | .videos-header, |
86 | my-video-filters-header { | |
87 | @include margin-left(15px); | |
88 | @include margin-right(15px); | |
89 | ||
90 | display: inline-block; | |
91 | } | |
92 | ||
93 | .date-title { | |
94 | text-align: center; | |
95 | } | |
96 | ||
4682468d K |
97 | .videos-header { |
98 | flex-direction: column; | |
99 | align-items: center; | |
100 | height: auto; | |
cf78883c | 101 | margin-bottom: 10px; |
4682468d K |
102 | } |
103 | } |