Add new .icon-white and .icon-shadow classes, add toggle-background icon

Signed-off-by: Marin Treselj <marin@pixelipo.com>

3 files changed, 39 insertions, 11 deletions

diff --git a/core/css/icons.scss b/core/css/icons.scss
index 87fb835f677..5f1d8af7899 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -90,7 +90,14 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 }
 
 .icon-shadow {
-	filter: drop-shadow(0 1px 3px $color-box-shadow);
+	filter: drop-shadow(1px 1px 4px $color-box-shadow);
+	&.icon-white {
+		filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
+	}
+}
+
+.icon-white {
+	filter: invert(100%);
 }
 
 /* ICONS -------------------------------------------------------------------- */
@@ -106,16 +113,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 	background-image: url('../img/actions/audio.svg?v=1');
 }
 
+/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */
 .icon-audio-white {
-	background-image: url('../img/actions/audio-white.svg?v=2');
+	background-image: url('../img/actions/audio.svg?v=2');
+	filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
 }
 
 .icon-audio-off {
 	background-image: url('../img/actions/audio-off.svg?v=1');
 }
 
+/* TODO: to be deprecated; use .icon-audio-off.icon-white.icon-shadow */
 .icon-audio-off-white {
-	background-image: url('../img/actions/audio-off-white.svg?v=1');
+	background-image: url('../img/actions/audio-off.svg?v=1');
+	filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
 }
 
 .icon-caret {
@@ -171,6 +182,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 	}
 	&:hover, &:focus {
 		background-image: url('../img/actions/delete-hover.svg?v=1');
+		filter: initial;
 	}
 }
 
@@ -222,8 +234,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 	background-image: url('../img/actions/fullscreen.svg?v=1');
 }
 
+/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */
 .icon-fullscreen-white {
-	background-image: url('../img/actions/fullscreen-white.svg?v=2');
+	background-image: url('../img/actions/fullscreen.svg?v=1');
+	filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
 }
 
 .icon-history {
@@ -294,16 +308,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 	background-image: url('../img/actions/screen.svg?v=1');
 }
 
+/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */
 .icon-screen-white {
-	background-image: url('../img/actions/screen-white.svg?v=1');
+	background-image: url('../img/actions/screen.svg?v=1');
+	filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
 }
 
 .icon-screen-off {
 	background-image: url('../img/actions/screen-off.svg?v=1');
 }
 
+/* TODO: to be deprecated; use .icon-screen-off.icon-white.icon-shadow */
 .icon-screen-off-white {
-	background-image: url('../img/actions/screen-off-white.svg?v=1');
+	background-image: url('../img/actions/screen-off.svg?v=1');
+	filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
 }
 
 .icon-search {
@@ -373,6 +391,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 	background-image: url('../img/actions/toggle.svg?v=1');
 }
 
+.icon-toggle-background {
+	background-image: url('../img/actions/toggle-background.svg?v=1');
+}
+
 .icon-toggle-pictures {
 	background-image: url('../img/actions/toggle-pictures.svg?v=1');
 }
@@ -405,16 +427,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 	background-image: url('../img/actions/video.svg?v=1');
 }
 
+/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
 .icon-video-white {
-	background-image: url('../img/actions/video-white.svg?v=2');
+	background-image: url('../img/actions/video.svg?v=2');
+	filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
 }
 
 .icon-video-off {
 	background-image: url('../img/actions/video-off.svg?v=1');
 }
 
+/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
 .icon-video-off-white {
-	background-image: url('../img/actions/video-off-white.svg?v=1');
+	background-image: url('../img/actions/video-off.svg?v=1');
+	filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
 }
 
 .icon-view-close {
@@ -426,7 +452,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 }
 
 .icon-view-next {
-	background-image: url('../img/actions/view-next.svg?v=1');
+	background-image: url('../img/actions/arrow-right.svg?v=1');
 }
 
 .icon-view-pause {
@@ -438,13 +464,14 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 }
 
 .icon-view-previous {
-	background-image: url('../img/actions/view-previous.svg?v=1');
+	background-image: url('../img/actions/arrow-left.svg?v=1');
 }
 
 /* PLACES ------------------------------------------------------------------- */
 .icon-calendar {
 	background-image: url('../img/places/calendar.svg?v=1');
 }
+
 .icon-calendar-dark {
 	background-image: url('../img/places/calendar-dark.svg?v=1');
 }
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 86a348c24f7..edeebd5403f 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -20,6 +20,6 @@ $image-login-background: '../img/background.png?v=2';
 
 $color-loading: #969696;
 $color-loading-dark: #bbbbbb;
-$color-box-shadow: rgba(nc-darken($color-main-background, 30%), 0.75);
+$color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
 $color-border: nc-darken($color-main-background, 8%);
 $border-radius: 3px;
diff --git a/core/img/actions/toggle-background.svg b/core/img/actions/toggle-background.svg
new file mode 100644
index 00000000000..9b56627e394
--- /dev/null
+++ b/core/img/actions/toggle-background.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" height="16" width="16" version="1.1"><path d="m8 1c-3.85 0-7 3.15-7 7s3.15 7 7 7 7-3.15 7-7-3.15-7-7-7zm0 2v10a5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5z"/></svg>