diff options
Diffstat (limited to 'client/src/app/shared/shared-video-miniature/videos-list.component.scss')
-rw-r--r-- | client/src/app/shared/shared-video-miniature/videos-list.component.scss | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.scss b/client/src/app/shared/shared-video-miniature/videos-list.component.scss new file mode 100644 index 000000000..e82ef05ba --- /dev/null +++ b/client/src/app/shared/shared-video-miniature/videos-list.component.scss | |||
@@ -0,0 +1,104 @@ | |||
1 | @use '_bootstrap-variables'; | ||
2 | @use '_variables' as *; | ||
3 | @use '_mixins' as *; | ||
4 | @use '_miniature' as *; | ||
5 | |||
6 | .videos-header { | ||
7 | display: grid; | ||
8 | grid-template-columns: auto 1fr auto; | ||
9 | margin-bottom: 30px; | ||
10 | |||
11 | .title, | ||
12 | .title-subscription { | ||
13 | grid-column: 1; | ||
14 | } | ||
15 | |||
16 | .title { | ||
17 | font-size: 18px; | ||
18 | color: pvar(--mainForegroundColor); | ||
19 | display: inline-block; | ||
20 | font-weight: $font-semibold; | ||
21 | |||
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); | ||
30 | |||
31 | &.no-title { | ||
32 | margin-top: 10px; | ||
33 | } | ||
34 | } | ||
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 | } | ||
49 | } | ||
50 | |||
51 | .date-title { | ||
52 | font-size: 16px; | ||
53 | font-weight: $font-semibold; | ||
54 | margin-bottom: 20px; | ||
55 | |||
56 | // Make the element span a full grid row within .videos grid | ||
57 | grid-column: 1 / -1; | ||
58 | |||
59 | &:not(:first-child) { | ||
60 | margin-top: .5rem; | ||
61 | padding-top: 20px; | ||
62 | border-top: 1px solid $separator-border-color; | ||
63 | } | ||
64 | } | ||
65 | |||
66 | .margin-content { | ||
67 | @include grid-videos-miniature-layout-with-margins; | ||
68 | } | ||
69 | |||
70 | .display-as-row.videos { | ||
71 | @include margin-left(pvar(--horizontalMarginContent)); | ||
72 | @include margin-right(pvar(--horizontalMarginContent)); | ||
73 | |||
74 | .video-wrapper { | ||
75 | margin-bottom: 15px; | ||
76 | } | ||
77 | } | ||
78 | |||
79 | @media screen and (max-width: $mobile-view) { | ||
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 | |||
92 | .videos-header { | ||
93 | flex-direction: column; | ||
94 | align-items: center; | ||
95 | height: auto; | ||
96 | margin-bottom: 10px; | ||
97 | |||
98 | .title-page { | ||
99 | @include margin-right(0); | ||
100 | |||
101 | margin-bottom: 10px; | ||
102 | } | ||
103 | } | ||
104 | } | ||