aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-28 11:29:54 +0200
committerChocobozzz <me@florianbigard.com>2022-06-28 11:29:54 +0200
commita334597283a3384fa4df7b6b25fd2a9ff9221467 (patch)
tree1125357d4486d8b9a52750f44697cae607e217da /client/src
parent4c8a099198cd3af049847df91140735354b85a92 (diff)
downloadPeerTube-a334597283a3384fa4df7b6b25fd2a9ff9221467.tar.gz
PeerTube-a334597283a3384fa4df7b6b25fd2a9ff9221467.tar.zst
PeerTube-a334597283a3384fa4df7b6b25fd2a9ff9221467.zip
Theme fixes
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+signup/+register/steps/register-step-user.component.html2
-rw-r--r--client/src/app/+videos/+video-edit/video-add-components/video-send.scss2
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss6
-rw-r--r--client/src/app/shared/shared-forms/markdown-textarea.component.scss10
-rw-r--r--client/src/assets/images/misc/language.svg8
-rw-r--r--client/src/sass/application.scss1
-rw-r--r--client/src/sass/bootstrap.scss10
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss9
-rw-r--r--client/src/sass/include/_mixins.scss14
-rw-r--r--client/src/sass/include/_variables.scss2
-rw-r--r--client/src/sass/primeng-custom.scss6
11 files changed, 42 insertions, 28 deletions
diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.html b/client/src/app/+signup/+register/steps/register-step-user.component.html
index 3e0d35006..e978caea8 100644
--- a/client/src/app/+signup/+register/steps/register-step-user.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.html
@@ -15,7 +15,7 @@
15 <div class="input-group"> 15 <div class="input-group">
16 <input 16 <input
17 type="text" id="displayName" i18n-placeholder placeholder="Example: John Doe" 17 type="text" id="displayName" i18n-placeholder placeholder="Example: John Doe"
18 formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }" 18 formControlName="displayName" class="form-control" [ngClass]="{ 'input-error': formErrors['displayName'] }"
19 > 19 >
20 </div> 20 </div>
21 21
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index 594999d66..ed46fefb0 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -17,7 +17,7 @@ $width-size: 250px;
17 align-items: center; 17 align-items: center;
18 18
19 .upload-icon { 19 .upload-icon {
20 @include apply-svg-color($input-border-color); 20 @include apply-svg-color(pvar(--inputBorderColor));
21 21
22 width: 90px; 22 width: 90px;
23 margin-bottom: 25px; 23 margin-bottom: 25px;
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
index 023d625e9..ac228bafa 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
@@ -56,8 +56,8 @@ form {
56 width: $markdown-icon-width; 56 width: $markdown-icon-width;
57 57
58 svg { 58 svg {
59 color: $input-border-color; 59 color: pvar(--inputBorderColor);
60 fill: $input-border-color; 60 fill: pvar(--inputBorderColor);
61 border-radius: 3px; 61 border-radius: 3px;
62 } 62 }
63 } 63 }
@@ -66,7 +66,7 @@ form {
66 &:active, 66 &:active,
67 &:hover { 67 &:hover {
68 my-global-icon svg { 68 my-global-icon svg {
69 background-color: $input-border-color; 69 background-color: pvar(--inputBorderColor);
70 color: pvar(--mainBackgroundColor); 70 color: pvar(--mainBackgroundColor);
71 fill: pvar(--mainBackgroundColor); 71 fill: pvar(--mainBackgroundColor);
72 } 72 }
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index c68c2c241..bbb266448 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -25,8 +25,8 @@ $input-border-radius: 3px;
25 .nav-preview { 25 .nav-preview {
26 padding: 10px; 26 padding: 10px;
27 27
28 border: 1px solid $input-border-color; 28 border: 1px solid pvar(--inputBorderColor);
29 border-top: 1px dashed $input-border-color; 29 border-top: 1px dashed pvar(--inputBorderColor);
30 30
31 border-bottom-right-radius: $input-border-radius; 31 border-bottom-right-radius: $input-border-radius;
32 border-bottom-left-radius: $input-border-radius; 32 border-bottom-left-radius: $input-border-radius;
@@ -72,7 +72,7 @@ $input-border-radius: 3px;
72 overflow-y: auto; 72 overflow-y: auto;
73 word-wrap: break-word; 73 word-wrap: break-word;
74 74
75 border: 1px solid $input-border-color; 75 border: 1px solid pvar(--inputBorderColor);
76 border-top: 0; 76 border-top: 0;
77 77
78 border-bottom-left-radius: $input-border-radius; 78 border-bottom-left-radius: $input-border-radius;
@@ -115,7 +115,7 @@ $input-border-radius: 3px;
115 grid-column: 1; 115 grid-column: 1;
116 116
117 border: 0; 117 border: 0;
118 border-right: 1px dashed $input-border-color; 118 border-right: 1px dashed pvar(--inputBorderColor);
119 119
120 resize: none; 120 resize: none;
121 } 121 }
@@ -155,7 +155,7 @@ $input-border-radius: 3px;
155 grid-row: 2; 155 grid-row: 2;
156 grid-column: 1; 156 grid-column: 1;
157 border: 0; 157 border: 0;
158 border-bottom: 1px dashed $input-border-color;; 158 border-bottom: 1px dashed pvar(--inputBorderColor);;
159 } 159 }
160 160
161 ::ng-deep .tab-content { 161 ::ng-deep .tab-content {
diff --git a/client/src/assets/images/misc/language.svg b/client/src/assets/images/misc/language.svg
index 204136f0b..7ac185269 100644
--- a/client/src/assets/images/misc/language.svg
+++ b/client/src/assets/images/misc/language.svg
@@ -1,7 +1,7 @@
1<svg xmlns="http://www.w3.org/2000/svg" transform="scale(1.2)" viewBox="0 0 200 200"> 1<svg xmlns="http://www.w3.org/2000/svg" transform="scale(1.2)" viewBox="0 0 200 200">
2 <defs/> 2 <defs/>
3 <path stroke="currentColor" stroke-width="3" d="M93 155H42a18 18 0 01-18-18V29a5 5 0 015-5h89a5 5 0 015 6L98 151a5 5 0 01-5 4zM34 34v103a8 8 0 008 8h47l22-111z"/> 3 <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M93 155H42a18 18 0 01-18-18V29a5 5 0 015-5h89a5 5 0 015 6L98 151a5 5 0 01-5 4zM34 34v103a8 8 0 008 8h47l22-111z"/>
4 <path stroke="currentColor" stroke-width="3" d="M171 176H75a5 5 0 01-5-6l4-21a5 5 0 0110 2l-3 15h85V63a8 8 0 00-8-8h-45a5 5 0 010-10h45a18 18 0 0118 18v108a5 5 0 01-5 5zM50 92h0a5 5 0 01-5-5V63a17 17 0 0135 0v24a5 5 0 01-10 0V62a7 7 0 00-15 0v25a5 5 0 01-5 5z"/> 4 <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M171 176H75a5 5 0 01-5-6l4-21a5 5 0 0110 2l-3 15h85V63a8 8 0 00-8-8h-45a5 5 0 010-10h45a18 18 0 0118 18v108a5 5 0 01-5 5zM50 92h0a5 5 0 01-5-5V63a17 17 0 0135 0v24a5 5 0 01-10 0V62a7 7 0 00-15 0v25a5 5 0 01-5 5z"/>
5 <path stroke="currentColor" stroke-width="3" d="M75 76H50a5 5 0 010-10h25a5 5 0 010 10zM120 155a5 5 0 01-3-9l21-21h-18a5 5 0 010-10h30a5 5 0 014 9l-30 30a5 5 0 01-4 1z"/> 5 <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M75 76H50a5 5 0 010-10h25a5 5 0 010 10zM120 155a5 5 0 01-3-9l21-21h-18a5 5 0 010-10h30a5 5 0 014 9l-30 30a5 5 0 01-4 1z"/>
6 <path stroke="currentColor" stroke-width="3" d="M150 155a5 5 0 01-4-1l-14-15a5 5 0 017-7l15 14a5 5 0 01-4 9zM143 110h-15a5 5 0 110-10h15a5 5 0 010 10z"/> 6 <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M150 155a5 5 0 01-4-1l-14-15a5 5 0 017-7l15 14a5 5 0 01-4 9zM143 110h-15a5 5 0 110-10h15a5 5 0 010 10z"/>
7</svg> 7</svg>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index add01fb71..224efbffd 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -43,6 +43,7 @@ body {
43 --inputForegroundColor: #{$input-foreground-color}; 43 --inputForegroundColor: #{$input-foreground-color};
44 --inputBackgroundColor: #{$input-background-color}; 44 --inputBackgroundColor: #{$input-background-color};
45 --inputPlaceholderColor: #{$input-placeholder-color}; 45 --inputPlaceholderColor: #{$input-placeholder-color};
46 --inputBorderColor: #{$input-border-color};
46 47
47 --textareaForegroundColor: #{$textarea-foreground-color}; 48 --textareaForegroundColor: #{$textarea-foreground-color};
48 --textareaBackgroundColor: #{$textarea-background-color}; 49 --textareaBackgroundColor: #{$textarea-background-color};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 688407683..eed6abe41 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -42,14 +42,12 @@
42// --------------------------------------------------------------------------- 42// ---------------------------------------------------------------------------
43 43
44.dropdown-menu { 44.dropdown-menu {
45 color: pvar(--mainForegroundColor);
46 background-color: pvar(--mainBackgroundColor);
47
48 .dropdown-header { 45 .dropdown-header {
49 @include padding-left(1rem); 46 @include padding-left(1rem);
50 } 47 }
51 48
52 .dropdown-item { 49 .dropdown-item {
50 color: pvar(--mainForegroundColor);
53 padding: 3px 15px; 51 padding: 3px 15px;
54 52
55 &.active { 53 &.active {
@@ -271,7 +269,7 @@
271} 269}
272 270
273.btn-outline-secondary { 271.btn-outline-secondary {
274 border-color: $input-border-color; 272 border-color: pvar(--inputBorderColor);
275 273
276 &:focus-within, 274 &:focus-within,
277 &:focus, 275 &:focus,
@@ -342,7 +340,6 @@
342 } 340 }
343 341
344 .form-control-clear { 342 .form-control-clear {
345 color: rgba(0, 0, 0, 0.4);
346 display: flex; 343 display: flex;
347 justify-content: center; 344 justify-content: center;
348 align-items: center; 345 align-items: center;
@@ -350,9 +347,10 @@
350 font-size: 14px; 347 font-size: 14px;
351 position: absolute; 348 position: absolute;
352 right: .5rem; 349 right: .5rem;
350 opacity: 0.4;
353 351
354 &:hover { 352 &:hover {
355 color: rgba(0, 0, 0, 0.7); 353 opacity: 0.7;
356 cursor: pointer; 354 cursor: pointer;
357 } 355 }
358 } 356 }
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 3e461dbef..5c6a56283 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -46,8 +46,17 @@ $dropdown-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0,
46$dropdown-border-radius: 3px; 46$dropdown-border-radius: 3px;
47$dropdown-link-active-color: pvar(--mainForegroundColor); 47$dropdown-link-active-color: pvar(--mainForegroundColor);
48$dropdown-link-active-bg: pvar(--mainBackgroundHoverColor); 48$dropdown-link-active-bg: pvar(--mainBackgroundHoverColor);
49$dropdown-link-hover-color: pvar(--mainForegroundColor);
50$dropdown-link-hover-bg: pvar(--mainBackgroundHoverColor);
51$dropdown-color: pvar(--mainForegroundColor);
52$dropdown-bg: pvar(--mainBackgroundColor);
49 53
54$accordion-color: pvar(--mainForegroundColor);
55$accordion-bg: pvar(--mainBackgroundColor);
50$accordion-button-active-bg: pvar(--mainColorVeryLight); 56$accordion-button-active-bg: pvar(--mainColorVeryLight);
51$accordion-button-active-color: pvar(--mainForegroundColor); 57$accordion-button-active-color: pvar(--mainForegroundColor);
52$accordion-button-focus-border-color: pvar(--mainColorLightest); 58$accordion-button-focus-border-color: pvar(--mainColorLightest);
53$accordion-button-focus-box-shadow: 0 0 0 .15rem pvar(--mainColorLightest); 59$accordion-button-focus-box-shadow: 0 0 0 .15rem pvar(--mainColorLightest);
60$accordion-border-color: pvar(--inputBorderColor);
61
62$input-group-addon-color: pvar(--mainForegroundColor);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 1b460b723..6b93a5728 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -92,7 +92,7 @@
92 max-width: $width; 92 max-width: $width;
93 color: pvar(--inputForegroundColor); 93 color: pvar(--inputForegroundColor);
94 background-color: pvar(--inputBackgroundColor); 94 background-color: pvar(--inputBackgroundColor);
95 border: 1px solid $input-border-color; 95 border: 1px solid pvar(--inputBorderColor);
96 border-radius: 3px; 96 border-radius: 3px;
97 font-size: $form-input-font-size; 97 font-size: $form-input-font-size;
98 line-height: $form-input-line-height; 98 line-height: $form-input-line-height;
@@ -138,7 +138,7 @@
138 &.disabled { 138 &.disabled {
139 cursor: default; 139 cursor: default;
140 color: #fff; 140 color: #fff;
141 background-color: $input-border-color; 141 background-color: pvar(--inputBorderColor);
142 } 142 }
143 143
144 my-global-icon { 144 my-global-icon {
@@ -168,7 +168,7 @@
168 &.disabled { 168 &.disabled {
169 cursor: default; 169 cursor: default;
170 color: pvar(--mainColor); 170 color: pvar(--mainColor);
171 background-color: $input-border-color; 171 background-color: pvar(--inputBorderColor);
172 } 172 }
173 173
174 my-global-icon { 174 my-global-icon {
@@ -393,7 +393,7 @@
393 select { 393 select {
394 padding: 0 35px 0 12px; 394 padding: 0 35px 0 12px;
395 position: relative; 395 position: relative;
396 border: 1px solid $input-border-color; 396 border: 1px solid pvar(--inputBorderColor);
397 background: transparent none; 397 background: transparent none;
398 appearance: none; 398 appearance: none;
399 height: $button-height; 399 height: $button-height;
@@ -461,7 +461,7 @@
461 top: 0; 461 top: 0;
462 width: 18px; 462 width: 18px;
463 height: 18px; 463 height: 18px;
464 border: 1px solid $input-border-color; 464 border: 1px solid pvar(--inputBorderColor);
465 border-radius: 100%; 465 border-radius: 100%;
466 background: #fff; 466 background: #fff;
467 } 467 }
@@ -508,7 +508,7 @@
508 width: 18px; 508 width: 18px;
509 min-width: 18px; 509 min-width: 18px;
510 height: 18px; 510 height: 18px;
511 border: $border-width solid $input-border-color; 511 border: $border-width solid pvar(--inputBorderColor);
512 border-radius: 3px; 512 border-radius: 3px;
513 vertical-align: middle; 513 vertical-align: middle;
514 cursor: pointer; 514 cursor: pointer;
@@ -601,7 +601,7 @@
601 margin-bottom: 20px; 601 margin-bottom: 20px;
602 602
603 @if $separator { 603 @if $separator {
604 border-bottom: 1px solid $input-border-color; 604 border-bottom: 1px solid pvar(--inputBorderColor);
605 } 605 }
606 606
607 @media screen and (max-width: $small-view) { 607 @media screen and (max-width: $small-view) {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 2b893a62b..225cad9c2 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -48,7 +48,6 @@ $search-input-width: 375px;
48 48
49$menu-background: #000; 49$menu-background: #000;
50$menu-color: #fff; 50$menu-color: #fff;
51$menu-bottom-color: #C6C6C6;
52$menu-width: 240px; 51$menu-width: 240px;
53$menu-lateral-padding: 26px; 52$menu-lateral-padding: 26px;
54 53
@@ -135,6 +134,7 @@ $variables: (
135 --inputForegroundColor: var(--inputForegroundColor), 134 --inputForegroundColor: var(--inputForegroundColor),
136 --inputBackgroundColor: var(--inputBackgroundColor), 135 --inputBackgroundColor: var(--inputBackgroundColor),
137 --inputPlaceholderColor: var(--inputPlaceholderColor), 136 --inputPlaceholderColor: var(--inputPlaceholderColor),
137 --inputBorderColor: var(--inputBorderColor),
138 138
139 --textareaForegroundColor: var(--textareaForegroundColor), 139 --textareaForegroundColor: var(--textareaForegroundColor),
140 --textareaBackgroundColor: var(--textareaBackgroundColor), 140 --textareaBackgroundColor: var(--textareaBackgroundColor),
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 37e7a4275..a82cdbbb9 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -623,6 +623,12 @@ p-table {
623 } 623 }
624 } 624 }
625 625
626 .p-dropdown,
627 .p-dropdown-trigger {
628 color: pvar(--mainForegroundColor);
629 background-color: pvar(--mainBackgroundColor);
630 }
631
626 .p-paginator-current { 632 .p-paginator-current {
627 position: absolute; 633 position: absolute;
628 right: 0; 634 right: 0;