aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-02-28 13:52:21 +0100
committerGitHub <noreply@github.com>2020-02-28 13:52:21 +0100
commitd3217560a611b94f888ecf3de93b428a7521d4de (patch)
tree26fc984f351afb994dc13c94e138476ded50c76a /client/src/sass
parent64645512b08875c18ebdc009a550cdfa69def955 (diff)
downloadPeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.tar.gz
PeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.tar.zst
PeerTube-d3217560a611b94f888ecf3de93b428a7521d4de.zip
Add visitor settings, rework logged-in dropdown (#2514)
* Add visitor settings, rework logged-in dropdown * Make user dropdown P2P switch functional * Fix lint * Fix unnecessary notification when user logs out * Simplify visitor settings code and remove unnecessary icons * Catch parsing errors and reindent menu styles
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss1
-rw-r--r--client/src/sass/bootstrap.scss8
-rw-r--r--client/src/sass/include/_mixins.scss8
-rw-r--r--client/src/sass/include/_variables.scss7
-rw-r--r--client/src/sass/primeng-custom.scss27
5 files changed, 49 insertions, 2 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 560414e90..046368c8b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -24,6 +24,7 @@ body {
24 // now beware node-sass requires interpolation 24 // now beware node-sass requires interpolation
25 // for css custom properties #{$var} 25 // for css custom properties #{$var}
26 --mainColor: #{$orange-color}; 26 --mainColor: #{$orange-color};
27 --mainColorLighter: #{$orange-color-lighter};
27 --mainHoverColor: #{$orange-hover-color}; 28 --mainHoverColor: #{$orange-hover-color};
28 --mainBackgroundColor: #{$bg-color}; 29 --mainBackgroundColor: #{$bg-color};
29 --mainForegroundColor: #{$fg-color}; 30 --mainForegroundColor: #{$fg-color};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 6cced995e..bb7b21274 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -13,6 +13,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
13 flex: auto; 13 flex: auto;
14} 14}
15 15
16.c-hand {
17 cursor: pointer;
18}
19
16@keyframes spin { 20@keyframes spin {
17 from { 21 from {
18 transform: scale(1) rotate(0deg); 22 transform: scale(1) rotate(0deg);
@@ -41,6 +45,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
41 background-color: var(--mainHoverColor); 45 background-color: var(--mainHoverColor);
42 opacity: .9; 46 opacity: .9;
43 } 47 }
48
49 &::after {
50 display: none;
51 }
44 } 52 }
45 53
46 button { 54 button {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 4766e4490..bafc82d7d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -72,6 +72,14 @@
72 } 72 }
73} 73}
74 74
75@mixin fill-svg-color ($color) {
76 ::ng-deep svg {
77 path {
78 fill: $color;
79 }
80 }
81}
82
75@mixin button-focus-visible-shadow($color) { 83@mixin button-focus-visible-shadow($color) {
76 &.focus-visible { 84 &.focus-visible {
77 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color; 85 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 4ef8e17b9..91229cee0 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -14,6 +14,7 @@ $grey-foreground-color: #585858;
14$grey-foreground-hover-color: #303030; 14$grey-foreground-hover-color: #303030;
15 15
16$orange-color: #F1680D; 16$orange-color: #F1680D;
17$orange-color-lighter: rgb(233, 159, 110);
17$orange-hover-color: #F97D46; 18$orange-hover-color: #F97D46;
18 19
19$cyan-color: hsl(187, 77%, 34%); 20$cyan-color: hsl(187, 77%, 34%);
@@ -74,6 +75,7 @@ $activated-action-button-color: black;
74// to be warned of non-existing variables 75// to be warned of non-existing variables
75$variables: ( 76$variables: (
76 --mainColor: var(--mainColor), 77 --mainColor: var(--mainColor),
78 --mainColorLighter: var(--mainColorLighter),
77 --mainHoverColor: var(--mainHoverColor), 79 --mainHoverColor: var(--mainHoverColor),
78 --mainBackgroundColor: var(--mainBackgroundColor), 80 --mainBackgroundColor: var(--mainBackgroundColor),
79 --mainForegroundColor: var(--mainForegroundColor), 81 --mainForegroundColor: var(--mainForegroundColor),
@@ -112,8 +114,9 @@ $zindex: (
112 tooltip : 14000, 114 tooltip : 14000,
113 loadbar : 15000, 115 loadbar : 15000,
114 modal : 16000, 116 modal : 16000,
115 notification : 17000, 117 help-popover : 17000,
116 hotkeys : 18000 118 notification : 18000,
119 hotkeys : 19000
117); 120);
118 121
119@function z($label) { 122@function z($label) {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 4d2d6cb67..e2c453228 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -274,6 +274,15 @@ p-multiselect {
274 // left: -2px !important; 274 // left: -2px !important;
275 //} 275 //}
276 } 276 }
277
278 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
279 background-color: var(--mainColorLighter);
280 }
281
282 .ui-inputtext:enabled:focus:not(.ui-state-error) {
283 border-color: var(--mainColorLighter) !important;
284 box-shadow: none;
285 }
277} 286}
278 287
279// PrimeNG calendar tweaks 288// PrimeNG calendar tweaks
@@ -379,6 +388,24 @@ p-inputswitch {
379 .ui-inputswitch-checked .ui-inputswitch-slider { 388 .ui-inputswitch-checked .ui-inputswitch-slider {
380 background-color: var(--mainColor) !important; 389 background-color: var(--mainColor) !important;
381 } 390 }
391
392 &.small {
393 height: 20px;
394
395 .ui-inputswitch {
396 width: 2.5em !important;
397 height: 1.45em !important;
398
399 .ui-inputswitch-slider::before {
400 height: 1em !important;
401 width: 1em !important;
402 }
403 }
404
405 .ui-inputswitch-checked .ui-inputswitch-slider::before {
406 transform: translateX(1em) !important;
407 }
408 }
382} 409}
383 410
384p-toast { 411p-toast {