aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss2
-rw-r--r--client/src/sass/bootstrap.scss17
-rw-r--r--client/src/sass/include/_mixins.scss87
-rw-r--r--client/src/sass/include/_variables.scss3
4 files changed, 101 insertions, 8 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 089a58009..c8966d22b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -25,6 +25,7 @@ body {
25 // for css custom properties #{$var} 25 // for css custom properties #{$var}
26 --mainColor: #{$main-color}; 26 --mainColor: #{$main-color};
27 --mainColorLighter: #{$main-color-lighter}; 27 --mainColorLighter: #{$main-color-lighter};
28 --mainColorLightest: #{$main-color-lightest};
28 --mainHoverColor: #{$main-hover-color}; 29 --mainHoverColor: #{$main-hover-color};
29 --mainBackgroundColor: #{$bg-color}; 30 --mainBackgroundColor: #{$bg-color};
30 --mainForegroundColor: #{$fg-color}; 31 --mainForegroundColor: #{$fg-color};
@@ -113,6 +114,7 @@ label {
113.main-col { 114.main-col {
114 margin-left: $menu-width; 115 margin-left: $menu-width;
115 width: calc(100% - #{$menu-width}); 116 width: calc(100% - #{$menu-width});
117 outline: none;
116 118
117 .margin-content { 119 .margin-content {
118 margin-left: $not-expanded-horizontal-margins; 120 margin-left: $not-expanded-horizontal-margins;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 297f1f18a..f0357b579 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -230,3 +230,20 @@ ngb-tooltip-window {
230 background-color: var(--secondaryColor); 230 background-color: var(--secondaryColor);
231 } 231 }
232} 232}
233
234// input box-shadow on focus
235.form-control {
236 font-size: 15px;
237 color: var(--mainForegroundColor);
238 background-color: var(--inputBackgroundColor);
239 outline: none;
240
241 &:focus-within,
242 &:focus {
243 box-shadow: 0 0 0 .2rem var(--mainColorLightest);
244
245 &.input-error {
246 box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)};
247 }
248 }
249}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index f96a43b34..76e3f3f97 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -80,9 +80,10 @@
80 } 80 }
81} 81}
82 82
83@mixin button-focus-visible-shadow($color) { 83@mixin button-focus($color) {
84 &:focus,
84 &.focus-visible { 85 &.focus-visible {
85 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color; 86 box-shadow: 0 0 0 .2rem $color;
86 } 87 }
87} 88}
88 89
@@ -127,7 +128,7 @@
127} 128}
128 129
129@mixin orange-button { 130@mixin orange-button {
130 @include button-focus-visible-shadow(var(--mainHoverColor)); 131 @include button-focus(var(--mainColorLightest));
131 132
132 &, &:active, &:focus { 133 &, &:active, &:focus {
133 color: #fff; 134 color: #fff;
@@ -151,6 +152,8 @@
151} 152}
152 153
153@mixin tertiary-button { 154@mixin tertiary-button {
155 @include button-focus($grey-button-outline-color);
156
154 color: $grey-foreground-color; 157 color: $grey-foreground-color;
155 background-color: transparent; 158 background-color: transparent;
156 159
@@ -164,6 +167,8 @@
164} 167}
165 168
166@mixin grey-button { 169@mixin grey-button {
170 @include button-focus($grey-button-outline-color);
171
167 &, &:active, &:focus { 172 &, &:active, &:focus {
168 background-color: $grey-background-color; 173 background-color: $grey-background-color;
169 color: $grey-foreground-color; 174 color: $grey-foreground-color;
@@ -274,10 +279,8 @@
274@mixin peertube-select-container ($width) { 279@mixin peertube-select-container ($width) {
275 padding: 0; 280 padding: 0;
276 margin: 0; 281 margin: 0;
277 border: 1px solid #C6C6C6;
278 width: $width; 282 width: $width;
279 border-radius: 3px; 283 border-radius: 3px;
280 overflow: hidden;
281 background: var(--inputBackgroundColor); 284 background: var(--inputBackgroundColor);
282 position: relative; 285 position: relative;
283 font-size: 15px; 286 font-size: 15px;
@@ -303,8 +306,7 @@
303 width: calc(100% + 2px); 306 width: calc(100% + 2px);
304 position: relative; 307 position: relative;
305 left: 1px; 308 left: 1px;
306 border: none; 309 border: 1px solid #C6C6C6;
307 box-shadow: none;
308 background: transparent none; 310 background: transparent none;
309 appearance: none; 311 appearance: none;
310 cursor: pointer; 312 cursor: pointer;
@@ -370,7 +372,7 @@
370 position: absolute; 372 position: absolute;
371 373
372 &:focus + span { 374 &:focus + span {
373 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); 375 box-shadow: 0 0 0 .2rem var(--mainColorLightest);
374 } 376 }
375 377
376 & + span { 378 & + span {
@@ -703,3 +705,72 @@
703 text-align: center; 705 text-align: center;
704 } 706 }
705} 707}
708
709@mixin ng2-tags {
710 ::ng-deep {
711 .ng2-tag-input {
712 border: none !important;
713 }
714
715 .ng2-tags-container {
716 display: flex;
717 align-items: center;
718 border: 1px solid #C6C6C6;
719 border-radius: 3px;
720 padding: 5px !important;
721 height: max-content;
722
723 &:focus-within {
724 box-shadow: 0 0 0 .2rem var(--mainColorLightest);
725 }
726 }
727
728 tag-input-form {
729 input {
730 height: 30px !important;
731 font-size: 12px !important;
732
733 background-color: var(--mainBackgroundColor) !important;
734 color: var(--mainForegroundColor) !important;
735 }
736 }
737
738 tag {
739 background-color: $grey-background-color !important;
740 color: #000 !important;
741 border-radius: 3px !important;
742 font-size: 12px !important;
743 height: 30px !important;
744 line-height: 30px !important;
745 margin: 0 5px 0 0 !important;
746 cursor: default !important;
747 padding: 0 8px 0 10px !important;
748
749 div {
750 height: 100% !important;
751 }
752 }
753
754 delete-icon {
755 cursor: pointer !important;
756 height: auto !important;
757 vertical-align: middle !important;
758 padding-left: 6px !important;
759
760 svg {
761 position: relative;
762 top: -1px;
763 height: auto !important;
764 vertical-align: middle !important;
765
766 path {
767 fill: $grey-foreground-color !important;
768 }
769 }
770
771 &:hover {
772 transform: none !important;
773 }
774 }
775 }
776}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 3c9fa5939..d0f1a3630 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -12,11 +12,13 @@ $grey-background-color: #E5E5E5;
12$grey-background-hover-color: #EFEFEF; 12$grey-background-hover-color: #EFEFEF;
13$grey-foreground-color: #585858; 13$grey-foreground-color: #585858;
14$grey-foreground-hover-color: #303030; 14$grey-foreground-hover-color: #303030;
15$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
15 16
16// Palette 17// Palette
17$main-color: hsl(24, 90%, 50%); 18$main-color: hsl(24, 90%, 50%);
18$main-hover-color: lighten($main-color, 5%); 19$main-hover-color: lighten($main-color, 5%);
19$main-color-lighter: lighten($main-color, 10%); 20$main-color-lighter: lighten($main-color, 10%);
21$main-color-lightest: lighten($main-color, 40%);
20$secondary-color: hsl(187, 77, 34); 22$secondary-color: hsl(187, 77, 34);
21// 23//
22 24
@@ -77,6 +79,7 @@ $activated-action-button-color: black;
77$variables: ( 79$variables: (
78 --mainColor: var(--mainColor), 80 --mainColor: var(--mainColor),
79 --mainColorLighter: var(--mainColorLighter), 81 --mainColorLighter: var(--mainColorLighter),
82 --mainColorLightest: var(--mainColorLightest),
80 --mainHoverColor: var(--mainHoverColor), 83 --mainHoverColor: var(--mainHoverColor),
81 --mainBackgroundColor: var(--mainBackgroundColor), 84 --mainBackgroundColor: var(--mainBackgroundColor),
82 --mainForegroundColor: var(--mainForegroundColor), 85 --mainForegroundColor: var(--mainForegroundColor),