From 70953fa7888165b8a6352b2eae6db0ecfd1d169e Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Tue, 28 Nov 2017 10:56:28 +0100 Subject: [PATCH] Add new .icon-white and .icon-shadow classes, add toggle-background icon Signed-off-by: Marin Treselj --- core/css/icons.scss | 47 ++++++++++++++++++++------ core/css/variables.scss | 2 +- core/img/actions/toggle-background.svg | 1 + 3 files changed, 39 insertions(+), 11 deletions(-) create mode 100644 core/img/actions/toggle-background.svg diff --git a/core/css/icons.scss b/core/css/icons.scss index 87fb835f67..5f1d8af789 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 86a348c24f..edeebd5403 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 0000000000..9b56627e39 --- /dev/null +++ b/core/img/actions/toggle-background.svg @@ -0,0 +1 @@ +