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/_actor.scss2
-rw-r--r--client/src/sass/include/_bootstrap.scss2
-rw-r--r--client/src/sass/include/_fonts.scss4
-rw-r--r--client/src/sass/include/_miniature.scss14
-rw-r--r--client/src/sass/include/_mixins.scss116
-rw-r--r--client/src/sass/include/_variables.scss6
6 files changed, 81 insertions, 63 deletions
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index ccfd73ecd..38bd90ae6 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -17,7 +17,7 @@
17@mixin show-more-description { 17@mixin show-more-description {
18 color: pvar(--mainColor); 18 color: pvar(--mainColor);
19 cursor: pointer; 19 cursor: pointer;
20 margin: 10px auto 45px auto; 20 margin: 10px auto 45px;
21} 21}
22 22
23@mixin avatar-row-responsive ($img-margin, $grey-font-size) { 23@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index b1a23be6b..d9e5efc02 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -1,4 +1,4 @@
1@import "./_bootstrap-variables"; 1@import './_bootstrap-variables';
2 2
3@import '~bootstrap/scss/functions'; 3@import '~bootstrap/scss/functions';
4@import '~bootstrap/scss/variables'; 4@import '~bootstrap/scss/variables';
diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss
index 6313736e0..514261d01 100644
--- a/client/src/sass/include/_fonts.scss
+++ b/client/src/sass/include/_fonts.scss
@@ -1,4 +1,4 @@
1@font-face{ 1@font-face {
2 font-family: 'Source Sans Pro'; 2 font-family: 'Source Sans Pro';
3 font-weight: 200 900; 3 font-weight: 200 900;
4 font-style: normal; 4 font-style: normal;
@@ -7,7 +7,7 @@
7 src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2'); 7 src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2');
8} 8}
9 9
10@font-face{ 10@font-face {
11 font-family: 'Source Sans Pro'; 11 font-family: 'Source Sans Pro';
12 font-weight: 200 900; 12 font-weight: 200 900;
13 font-style: italic; 13 font-style: italic;
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 3b86f29b4..fb504906c 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -21,12 +21,12 @@
21} 21}
22 22
23@mixin miniature-thumbnail { 23@mixin miniature-thumbnail {
24 @include disable-outline;
25
26 $play-overlay-transition: 0.2s ease; 24 $play-overlay-transition: 0.2s ease;
27 $play-overlay-height: 26px; 25 $play-overlay-height: 26px;
28 $play-overlay-width: 18px; 26 $play-overlay-width: 18px;
29 27
28 @include disable-outline;
29
30 display: flex; 30 display: flex;
31 flex-direction: column; 31 flex-direction: column;
32 position: relative; 32 position: relative;
@@ -47,7 +47,8 @@
47 opacity: 0; 47 opacity: 0;
48 background-color: rgba(0, 0, 0, 0.3); 48 background-color: rgba(0, 0, 0, 0.3);
49 49
50 &, .icon { 50 &,
51 .icon {
51 transition: all $play-overlay-transition; 52 transition: all $play-overlay-transition;
52 } 53 }
53 54
@@ -79,7 +80,7 @@
79 80
80 &.blur-filter { 81 &.blur-filter {
81 filter: blur(20px); 82 filter: blur(20px);
82 transform : scale(1.03); 83 transform: scale(1.03);
83 } 84 }
84 } 85 }
85} 86}
@@ -129,10 +130,7 @@
129 column-gap: 30px; 130 column-gap: 30px;
130 grid-template-columns: repeat( 131 grid-template-columns: repeat(
131 auto-fill, 132 auto-fill,
132 minmax( 133 minmax(var(--miniatureMinWidth), 1fr)
133 var(--miniatureMinWidth),
134 1fr
135 )
136 ); 134 );
137 135
138 .video-wrapper, 136 .video-wrapper,
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index dc6ab8076..718e36f2c 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,7 +1,9 @@
1@import '_variables'; 1@import '_variables';
2 2
3@mixin disable-default-a-behaviour { 3@mixin disable-default-a-behaviour {
4 &:hover, &:focus, &:active { 4 &:hover,
5 &:focus,
6 &:active {
5 text-decoration: none !important; 7 text-decoration: none !important;
6 outline: none !important; 8 outline: none !important;
7 } 9 }
@@ -22,7 +24,7 @@
22@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) { 24@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
23 display: block; 25 display: block;
24 /* Fallback for non-webkit */ 26 /* Fallback for non-webkit */
25 display: -webkit-box; 27 display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
26 -webkit-line-clamp: $number-of-lines; 28 -webkit-line-clamp: $number-of-lines;
27 /* Fallback for non-webkit */ 29 /* Fallback for non-webkit */
28 font-size: $font-size; 30 font-size: $font-size;
@@ -36,7 +38,7 @@
36 position: relative; 38 position: relative;
37 overflow: hidden; 39 overflow: hidden;
38 40
39 &:after { 41 &::after {
40 content: ''; 42 content: '';
41 pointer-events: none; 43 pointer-events: none;
42 width: 100%; 44 width: 100%;
@@ -109,9 +111,9 @@
109 padding-bottom: 0; 111 padding-bottom: 0;
110 flex-wrap: nowrap; 112 flex-wrap: nowrap;
111 113
112 .input-group-text{ 114 .input-group-text {
113 font-size: 14px; 115 font-size: 14px;
114 color: gray; 116 color: #808080;
115 } 117 }
116} 118}
117 119
@@ -128,7 +130,9 @@
128@mixin orange-button { 130@mixin orange-button {
129 @include button-focus(pvar(--mainColorLightest)); 131 @include button-focus(pvar(--mainColorLightest));
130 132
131 &, &:active, &:focus { 133 &,
134 &:active,
135 &:focus {
132 color: #fff; 136 color: #fff;
133 background-color: pvar(--mainColor); 137 background-color: pvar(--mainColor);
134 } 138 }
@@ -138,14 +142,15 @@
138 background-color: pvar(--mainHoverColor); 142 background-color: pvar(--mainHoverColor);
139 } 143 }
140 144
141 &[disabled], &.disabled { 145 &[disabled],
146 &.disabled {
142 cursor: default; 147 cursor: default;
143 color: #fff; 148 color: #fff;
144 background-color: #C6C6C6; 149 background-color: #C6C6C6;
145 } 150 }
146 151
147 my-global-icon { 152 my-global-icon {
148 @include apply-svg-color(#fff) 153 @include apply-svg-color(#fff);
149 } 154 }
150} 155}
151 156
@@ -155,7 +160,9 @@
155 border: 2px solid pvar(--mainColor); 160 border: 2px solid pvar(--mainColor);
156 font-weight: $font-semibold; 161 font-weight: $font-semibold;
157 162
158 &, &:active, &:focus { 163 &,
164 &:active,
165 &:focus {
159 color: pvar(--mainColor); 166 color: pvar(--mainColor);
160 background-color: pvar(--mainBackgroundColor); 167 background-color: pvar(--mainBackgroundColor);
161 } 168 }
@@ -165,14 +172,15 @@
165 background-color: pvar(--mainColorLightest); 172 background-color: pvar(--mainColorLightest);
166 } 173 }
167 174
168 &[disabled], &.disabled { 175 &[disabled],
176 &.disabled {
169 cursor: default; 177 cursor: default;
170 color: pvar(--mainColor); 178 color: pvar(--mainColor);
171 background-color: #C6C6C6; 179 background-color: #C6C6C6;
172 } 180 }
173 181
174 my-global-icon { 182 my-global-icon {
175 @include apply-svg-color(pvar(--mainColor)) 183 @include apply-svg-color(pvar(--mainColor));
176 } 184 }
177} 185}
178 186
@@ -182,12 +190,13 @@
182 color: pvar(--greyForegroundColor); 190 color: pvar(--greyForegroundColor);
183 background-color: transparent; 191 background-color: transparent;
184 192
185 &[disabled], &.disabled { 193 &[disabled],
194 .disabled {
186 cursor: default; 195 cursor: default;
187 } 196 }
188 197
189 my-global-icon { 198 my-global-icon {
190 @include apply-svg-color(transparent) 199 @include apply-svg-color(transparent);
191 } 200 }
192} 201}
193 202
@@ -197,17 +206,22 @@
197 background-color: $grey-background-color; 206 background-color: $grey-background-color;
198 color: pvar(--greyForegroundColor); 207 color: pvar(--greyForegroundColor);
199 208
200 &:hover, &:active, &:focus, &[disabled], &.disabled { 209 &:hover,
210 &:active,
211 &:focus,
212 &[disabled],
213 &.disabled {
201 color: pvar(--greyForegroundColor); 214 color: pvar(--greyForegroundColor);
202 background-color: $grey-background-hover-color; 215 background-color: $grey-background-hover-color;
203 } 216 }
204 217
205 &[disabled], &.disabled { 218 &[disabled],
219 &.disabled {
206 cursor: default; 220 cursor: default;
207 } 221 }
208 222
209 my-global-icon { 223 my-global-icon {
210 @include apply-svg-color(pvar(--greyForegroundColor)) 224 @include apply-svg-color(pvar(--greyForegroundColor));
211 } 225 }
212} 226}
213 227
@@ -216,24 +230,30 @@
216 $text: #fff6f5; 230 $text: #fff6f5;
217 231
218 @include button-focus(scale-color($color, $alpha: -95%)); 232 @include button-focus(scale-color($color, $alpha: -95%));
233
219 background-color: $color; 234 background-color: $color;
220 color: $text; 235 color: $text;
221 236
222 &:hover, &:active, &:focus, &[disabled], &.disabled { 237 &:hover,
238 &:active,
239 &:focus,
240 &[disabled],
241 &.disabled {
223 background-color: lighten($color: $color, $amount: 10); 242 background-color: lighten($color: $color, $amount: 10);
224 } 243 }
225 244
226 &[disabled], &.disabled { 245 &[disabled],
246 &.disabled {
227 cursor: default; 247 cursor: default;
228 } 248 }
229 249
230 my-global-icon { 250 my-global-icon {
231 @include apply-svg-color($text) 251 @include apply-svg-color($text);
232 } 252 }
233} 253}
234 254
235@mixin peertube-button { 255@mixin peertube-button {
236 border: none; 256 border: 0;
237 font-weight: $font-semibold; 257 font-weight: $font-semibold;
238 font-size: 15px; 258 font-size: 15px;
239 height: $button-height; 259 height: $button-height;
@@ -246,18 +266,17 @@
246} 266}
247 267
248@mixin peertube-button-link { 268@mixin peertube-button-link {
249 display: inline-block;
250
251 @include disable-default-a-behaviour; 269 @include disable-default-a-behaviour;
252 @include peertube-button; 270 @include peertube-button;
253}
254 271
255@mixin peertube-button-outline {
256 display: inline-block; 272 display: inline-block;
273}
257 274
275@mixin peertube-button-outline {
258 @include disable-default-a-behaviour; 276 @include disable-default-a-behaviour;
259 @include peertube-button; 277 @include peertube-button;
260 278
279 display: inline-block;
261 border: 1px solid; 280 border: 1px solid;
262} 281}
263 282
@@ -291,17 +310,17 @@
291 filter: alpha(opacity=0); 310 filter: alpha(opacity=0);
292 opacity: 0; 311 opacity: 0;
293 outline: none; 312 outline: none;
294 background: white; 313 background: #fff;
295 cursor: inherit; 314 cursor: inherit;
296 display: block; 315 display: block;
297 } 316 }
298} 317}
299 318
300@mixin peertube-button-file ($width) { 319@mixin peertube-button-file ($width) {
301 width: $width;
302
303 @include peertube-file; 320 @include peertube-file;
304 @include peertube-button; 321 @include peertube-button;
322
323 width: $width;
305} 324}
306 325
307@mixin icon ($size) { 326@mixin icon ($size) {
@@ -317,7 +336,7 @@
317@mixin select-arrow-down { 336@mixin select-arrow-down {
318 top: 50%; 337 top: 50%;
319 right: calc(0% + 15px); 338 right: calc(0% + 15px);
320 content: " "; 339 content: ' ';
321 height: 0; 340 height: 0;
322 width: 0; 341 width: 0;
323 position: absolute; 342 position: absolute;
@@ -358,7 +377,7 @@
358 width: 100%; 377 width: 100%;
359 } 378 }
360 379
361 &:after { 380 &::after {
362 @include select-arrow-down; 381 @include select-arrow-down;
363 } 382 }
364 383
@@ -394,21 +413,21 @@
394 option { 413 option {
395 font-weight: $font-semibold; 414 font-weight: $font-semibold;
396 color: pvar(--greyForegroundColor); 415 color: pvar(--greyForegroundColor);
397 border: none; 416 border: 0;
398 } 417 }
399 } 418 }
400} 419}
401 420
402// Thanks: https://codepen.io/triss90/pen/XNEdRe/ 421// Thanks: https://codepen.io/triss90/pen/XNEdRe/
403@mixin peertube-radio-container { 422@mixin peertube-radio-container {
404 input[type="radio"] { 423 input[type=radio] {
405 display: none; 424 display: none;
406 425
407 & + label { 426 + label {
408 font-weight: $font-regular; 427 font-weight: $font-regular;
409 cursor: pointer; 428 cursor: pointer;
410 429
411 &:before { 430 &::before {
412 position: relative; 431 position: relative;
413 top: -2px; 432 top: -2px;
414 content: ''; 433 content: '';
@@ -425,12 +444,12 @@
425 } 444 }
426 } 445 }
427 446
428 &:checked + label:before { 447 &:checked + label::before {
429 background-color: #000; 448 background-color: #000;
430 box-shadow: inset 0 0 0 4px #fff; 449 box-shadow: inset 0 0 0 4px #fff;
431 } 450 }
432 451
433 &:focus + label:before { 452 &:focus + label::before {
434 outline: none; 453 outline: none;
435 border-color: #000; 454 border-color: #000;
436 } 455 }
@@ -445,7 +464,7 @@
445 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); 464 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
446 } 465 }
447 466
448 & + span { 467 + span {
449 position: relative; 468 position: relative;
450 width: 18px; 469 width: 18px;
451 min-width: 18px; 470 min-width: 18px;
@@ -455,7 +474,7 @@
455 vertical-align: middle; 474 vertical-align: middle;
456 cursor: pointer; 475 cursor: pointer;
457 476
458 &:after { 477 &::after {
459 content: ''; 478 content: '';
460 position: absolute; 479 position: absolute;
461 top: calc(2px - #{$border-width}); 480 top: calc(2px - #{$border-width});
@@ -474,13 +493,13 @@
474 background: pvar(--mainColor); 493 background: pvar(--mainColor);
475 animation: jelly 0.6s ease; 494 animation: jelly 0.6s ease;
476 495
477 &:after { 496 &::after {
478 opacity: 1; 497 opacity: 1;
479 transform: rotate(45deg) scale(1); 498 transform: rotate(45deg) scale(1);
480 } 499 }
481 } 500 }
482 501
483 & + span + span { 502 + span + span {
484 font-size: 15px; 503 font-size: 15px;
485 font-weight: $font-regular; 504 font-weight: $font-regular;
486 margin-left: 5px; 505 margin-left: 5px;
@@ -489,7 +508,7 @@
489 } 508 }
490 509
491 &[disabled] + span, 510 &[disabled] + span,
492 &[disabled] + span + span{ 511 &[disabled] + span + span {
493 opacity: 0.5; 512 opacity: 0.5;
494 cursor: default; 513 cursor: default;
495 } 514 }
@@ -685,13 +704,13 @@
685 color: pvar(--mainColor); 704 color: pvar(--mainColor);
686 } 705 }
687 706
688 & + .breadcrumb-item { 707 + .breadcrumb-item {
689 padding-left: 0.5rem; 708 padding-left: 0.5rem;
690 &::before { 709 &::before {
691 display: inline-block; 710 display: inline-block;
692 padding-right: 0.5rem; 711 padding-right: 0.5rem;
693 color: #6c757d; 712 color: #6c757d;
694 content: "/"; 713 content: '/';
695 } 714 }
696 } 715 }
697 716
@@ -706,13 +725,13 @@
706 flex-wrap: wrap; 725 flex-wrap: wrap;
707 margin: 0 -5px; 726 margin: 0 -5px;
708 727
709 & > div { 728 > div {
710 box-sizing: border-box; 729 box-sizing: border-box;
711 flex: 0 0 percentage(1/3); 730 flex: 0 0 percentage(1/3);
712 padding: 0 5px; 731 padding: 0 5px;
713 margin-bottom: 10px; 732 margin-bottom: 10px;
714 733
715 & > a { 734 > a {
716 @include disable-default-a-behaviour; 735 @include disable-default-a-behaviour;
717 736
718 text-decoration: none; 737 text-decoration: none;
@@ -727,8 +746,8 @@
727 } 746 }
728 } 747 }
729 748
730 & > a, 749 > a,
731 & > div { 750 > div {
732 padding: 20px; 751 padding: 20px;
733 background: pvar(--submenuBackgroundColor); 752 background: pvar(--submenuBackgroundColor);
734 border-radius: 4px; 753 border-radius: 4px;
@@ -737,7 +756,8 @@
737 } 756 }
738 } 757 }
739 758
740 .dashboard-num, .dashboard-text { 759 .dashboard-num,
760 .dashboard-text {
741 text-align: center; 761 text-align: center;
742 font-size: 130%; 762 font-size: 130%;
743 color: pvar(--mainForegroundColor); 763 color: pvar(--mainForegroundColor);
@@ -831,7 +851,7 @@
831 flex-direction: column; 851 flex-direction: column;
832 852
833 .form-sub-title { 853 .form-sub-title {
834 margin-right: 0px !important; 854 margin-right: 0 !important;
835 margin-bottom: 10px; 855 margin-bottom: 10px;
836 text-align: center; 856 text-align: center;
837 } 857 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d2a5d2bd9..d54563df6 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -60,7 +60,7 @@ $max-channels-width: 1200px;
60$footer-height: 30px; 60$footer-height: 30px;
61$footer-margin: 30px; 61$footer-margin: 30px;
62 62
63$separator-border-color: rgba(0, 0, 0, 0.10); 63$separator-border-color: rgba(0, 0, 0, 0.1);
64 64
65$video-miniature-margin-bottom: 15px; 65$video-miniature-margin-bottom: 15px;
66 66
@@ -90,7 +90,7 @@ $markdown-textarea-background-color: $grey-background-hover-color;
90$sub-menu-margin-bottom: 30px; 90$sub-menu-margin-bottom: 30px;
91$sub-menu-margin-bottom-small-view: 10px; 91$sub-menu-margin-bottom-small-view: 10px;
92 92
93$activated-action-button-color: black; 93$activated-action-button-color: #000;
94 94
95$focus-box-shadow-form: 0 0 0 .2rem; 95$focus-box-shadow-form: 0 0 0 .2rem;
96 96
@@ -147,7 +147,7 @@ $variables: (
147 @if map-has-key($variables, $variable) { 147 @if map-has-key($variables, $variable) {
148 @return map-get($variables, $variable); 148 @return map-get($variables, $variable);
149 } @else { 149 } @else {
150 @error "ERROR: Variable #{$variable} does not exist"; 150 @error 'ERROR: Variable #{$variable} does not exist';
151 } 151 }
152} 152}
153 153