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