aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_miniature.scss95
1 files changed, 95 insertions, 0 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index b62187fd2..3afcca310 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -138,3 +138,98 @@ $play-overlay-width: 18px;
138 } 138 }
139 } 139 }
140} 140}
141
142@mixin miniature-rows {
143 max-height: 540px; // 2 rows max
144 overflow: hidden;
145 padding-top: 10px;
146
147 &:first-child {
148 padding-top: 30px;
149 }
150
151 my-video-miniature {
152 text-align: left;
153 }
154
155 .section-title {
156 font-size: 24px;
157 font-weight: $font-semibold;
158 margin-bottom: 30px;
159
160 a {
161 &:hover, &:focus:not(.focus-visible), &:active {
162 text-decoration: none;
163 outline: none;
164 }
165
166 color: var(--mainForegroundColor);
167 }
168 }
169
170 &.channel {
171 .section-title {
172 a {
173 display: flex;
174 width: fit-content;
175 align-items: center;
176
177 img {
178 @include avatar(28px);
179
180 margin-right: 8px;
181 }
182 }
183
184 .followers {
185 color: $grey-foreground-color;
186 font-weight: normal;
187 font-size: 14px;
188 margin-left: 10px;
189 position: relative;
190 top: 2px;
191 }
192 }
193 }
194
195 @media screen and (max-width: $mobile-view) {
196 max-height: initial;
197 overflow: initial;
198
199 @include video-miniature-small-screen;
200
201 .section-title {
202 font-size: 17px;
203 }
204 }
205}
206
207@mixin adapt-margin-content-width {
208 width: $video-miniature-width * 6;
209 margin: auto !important;
210
211 @media screen and (max-width: 1800px) {
212 width: $video-miniature-width * 5;
213 }
214
215 @media screen and (max-width: 1800px - $video-miniature-width) {
216 width: $video-miniature-width * 4;
217 }
218
219 @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
220 width: $video-miniature-width * 3;
221 }
222
223 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
224 width: $video-miniature-width * 2;
225 }
226
227 @media screen and (max-width: 500px) {
228 width: auto;
229 margin: 0 !important;
230
231 .videos {
232 @include video-miniature-small-screen;
233 }
234 }
235}