aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-15 14:59:25 +0200
committerChocobozzz <me@florianbigard.com>2022-06-16 11:37:08 +0200
commit5b0ec7cddb1ae6dbd2057f067382866f846b882c (patch)
tree5751d96ec4ab0d49b793c4ff1c8edbc8daeab6ac /client/src/sass/include
parentb13a0a48bacb53e65e665774e621326452045294 (diff)
downloadPeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.tar.gz
PeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.tar.zst
PeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.zip
Increase global font size
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_actor.scss8
-rw-r--r--client/src/sass/include/_mixins.scss28
-rw-r--r--client/src/sass/include/_nav.scss1
-rw-r--r--client/src/sass/include/_variables.scss3
4 files changed, 19 insertions, 21 deletions
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index aa2331efe..bf73b52dc 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -36,18 +36,16 @@
36 .actor-owner { 36 .actor-owner {
37 @include disable-default-a-behaviour; 37 @include disable-default-a-behaviour;
38 38
39 font-size: 13px;
40 color: pvar(--mainForegroundColor); 39 color: pvar(--mainForegroundColor);
40 display: flex;
41 align-items: center;
41 42
42 span:hover { 43 span:hover {
43 opacity: 0.8; 44 opacity: 0.8;
44 } 45 }
45 46
46 my-actor-avatar { 47 my-actor-avatar {
47 @include margin-left(7px); 48 @include margin-left(5px);
48
49 display: inline-block;
50 vertical-align: top;
51 } 49 }
52 } 50 }
53 51
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 565012717..1b460b723 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -94,7 +94,8 @@
94 background-color: pvar(--inputBackgroundColor); 94 background-color: pvar(--inputBackgroundColor);
95 border: 1px solid $input-border-color; 95 border: 1px solid $input-border-color;
96 border-radius: 3px; 96 border-radius: 3px;
97 font-size: 15px; 97 font-size: $form-input-font-size;
98 line-height: $form-input-line-height;
98 99
99 &::placeholder { 100 &::placeholder {
100 color: pvar(--inputPlaceholderColor); 101 color: pvar(--inputPlaceholderColor);
@@ -116,7 +117,6 @@
116 background-color: pvar(--textareaBackgroundColor) !important; 117 background-color: pvar(--textareaBackgroundColor) !important;
117 height: $height; 118 height: $height;
118 padding: 5px 15px; 119 padding: 5px 15px;
119 font-size: 15px;
120} 120}
121 121
122@mixin orange-button { 122@mixin orange-button {
@@ -249,7 +249,6 @@
249 249
250 border: 0; 250 border: 0;
251 font-weight: $font-semibold; 251 font-weight: $font-semibold;
252 font-size: 15px;
253 height: $button-height; 252 height: $button-height;
254 line-height: $button-height; 253 line-height: $button-height;
255 254
@@ -259,6 +258,8 @@
259 text-align: center; 258 text-align: center;
260 cursor: pointer; 259 cursor: pointer;
261 260
261 font-size: $button-font-size;
262
262 my-global-icon + * { 263 my-global-icon + * {
263 @include margin-right(4px); 264 @include margin-right(4px);
264 } 265 }
@@ -292,10 +293,6 @@
292} 293}
293 294
294@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) { 295@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
295 display: inline-flex;
296 align-items: center;
297 line-height: normal !important;
298
299 my-global-icon { 296 my-global-icon {
300 @include margin-right($margin-right); 297 @include margin-right($margin-right);
301 298
@@ -361,7 +358,6 @@
361 color: pvar(--inputForegroundColor); 358 color: pvar(--inputForegroundColor);
362 background: pvar(--inputBackgroundColor); 359 background: pvar(--inputBackgroundColor);
363 position: relative; 360 position: relative;
364 font-size: 15px;
365 height: min-content; 361 height: min-content;
366 362
367 &.disabled { 363 &.disabled {
@@ -403,6 +399,8 @@
403 height: $button-height; 399 height: $button-height;
404 text-overflow: ellipsis; 400 text-overflow: ellipsis;
405 color: pvar(--mainForegroundColor); 401 color: pvar(--mainForegroundColor);
402 font-size: $form-input-font-size;
403 line-height: $form-input-line-height;
406 404
407 &:focus { 405 &:focus {
408 outline: none; 406 outline: none;
@@ -435,6 +433,10 @@
435 433
436// Thanks: https://codepen.io/manabox/pen/raQmpL 434// Thanks: https://codepen.io/manabox/pen/raQmpL
437@mixin peertube-radio-container { 435@mixin peertube-radio-container {
436 label {
437 font-size: $form-input-font-size;
438 }
439
438 [type=radio]:checked, 440 [type=radio]:checked,
439 [type=radio]:not(:checked) { 441 [type=radio]:not(:checked) {
440 position: absolute; 442 position: absolute;
@@ -448,7 +450,6 @@
448 cursor: pointer; 450 cursor: pointer;
449 line-height: 20px; 451 line-height: 20px;
450 display: inline-block; 452 display: inline-block;
451 font-size: 15px;
452 font-weight: $font-regular; 453 font-weight: $font-regular;
453 } 454 }
454 455
@@ -540,7 +541,6 @@
540 + span + span { 541 + span + span {
541 @include margin-left(5px); 542 @include margin-left(5px);
542 543
543 font-size: 15px;
544 font-weight: $font-regular; 544 font-weight: $font-regular;
545 cursor: pointer; 545 cursor: pointer;
546 display: inline; 546 display: inline;
@@ -563,7 +563,6 @@
563 563
564@mixin actor-counters ($separator-margin: 10px) { 564@mixin actor-counters ($separator-margin: 10px) {
565 color: pvar(--greyForegroundColor); 565 color: pvar(--greyForegroundColor);
566 font-size: 16px;
567 display: flex; 566 display: flex;
568 align-items: center; 567 align-items: center;
569 568
@@ -585,7 +584,7 @@
585 text-transform: uppercase; 584 text-transform: uppercase;
586 color: pvar(--mainColor); 585 color: pvar(--mainColor);
587 font-weight: $font-bold; 586 font-weight: $font-bold;
588 font-size: 110%; 587 font-size: 1rem;
589 margin-bottom: 10px; 588 margin-bottom: 10px;
590} 589}
591 590
@@ -675,11 +674,10 @@
675@mixin breadcrumb { 674@mixin breadcrumb {
676 display: flex; 675 display: flex;
677 flex-wrap: wrap; 676 flex-wrap: wrap;
678 padding: 0.75rem 1rem; 677 padding: 0;
679 margin-bottom: 1rem; 678 margin-bottom: 1rem;
680 list-style: none; 679 list-style: none;
681 background-color: pvar(--submenuBackgroundColor); 680 font-weight: $font-semibold;
682 border-radius: 0.25rem;
683 681
684 .breadcrumb-item { 682 .breadcrumb-item {
685 display: flex; 683 display: flex;
diff --git a/client/src/sass/include/_nav.scss b/client/src/sass/include/_nav.scss
index d069ac9ae..5fd32df45 100644
--- a/client/src/sass/include/_nav.scss
+++ b/client/src/sass/include/_nav.scss
@@ -20,7 +20,6 @@
20 margin-bottom: -$border-width; 20 margin-bottom: -$border-width;
21 height: $nav-link-height !important; 21 height: $nav-link-height !important;
22 padding: 0 30px !important; 22 padding: 0 30px !important;
23 font-size: 15px;
24 23
25 border: $border-width $border-type transparent; 24 border: $border-width $border-type transparent;
26 25
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 476a4ee52..3fe1f74a2 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -39,6 +39,7 @@ $grey-actor-name: #777272;
39$expanded-horizontal-margins: 150px; 39$expanded-horizontal-margins: 150px;
40$not-expanded-horizontal-margins: 30px; 40$not-expanded-horizontal-margins: 30px;
41 41
42$button-font-size: 15px;
42$button-height: 30px; 43$button-height: 30px;
43 44
44$header-height: 50px; 45$header-height: 50px;
@@ -97,6 +98,8 @@ $sub-menu-margin-bottom-small-view: 10px;
97$activated-action-button-color: #212529; 98$activated-action-button-color: #212529;
98 99
99$focus-box-shadow-form: 0 0 0 .2rem; 100$focus-box-shadow-form: 0 0 0 .2rem;
101$form-input-font-size: 15px;
102$form-input-line-height: 1.4;
100 103
101$video-watch-player-factor: math.div(16, 9); 104$video-watch-player-factor: math.div(16, 9);
102$video-watch-info-margin-left: 44px; 105$video-watch-info-margin-left: 44px;