mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #7319 from nextcloud/remove-svg-shadows 

Remove svg shadows
This commit is contained in:
Morris Jobke 2017-12-04 22:40:07 +01:00 committed by GitHub
parent 567757c793 a62cc27058
commit 41c1f862f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
core/css/icons.scss
View File

@ -89,8 +89,11 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-size: 32px !important; background-size: 32px !important;
} }
.icon-shadow { .icon-white {
filter: drop-shadow(0 1px 3px $color-box-shadow); filter: invert(100%);
&.icon-shadow {
filter: invert(100%) drop-shadow(1px 1px 4px $color-box-shadow);
}
} }
/* ICONS -------------------------------------------------------------------- */ /* ICONS -------------------------------------------------------------------- */
@ -106,16 +109,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/audio.svg?v=1'); background-image: url('../img/actions/audio.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */
.icon-audio-white { .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 { .icon-audio-off {
background-image: url('../img/actions/audio-off.svg?v=1'); 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 { .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 { .icon-caret {
@ -171,6 +178,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
} }
&:hover, &:focus { &:hover, &:focus {
background-image: url('../img/actions/delete-hover.svg?v=1'); background-image: url('../img/actions/delete-hover.svg?v=1');
filter: initial;
} }
} }
@ -222,8 +230,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/fullscreen.svg?v=1'); background-image: url('../img/actions/fullscreen.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */
.icon-fullscreen-white { .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 { .icon-history {
@ -294,16 +304,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/screen.svg?v=1'); background-image: url('../img/actions/screen.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */
.icon-screen-white { .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 { .icon-screen-off {
background-image: url('../img/actions/screen-off.svg?v=1'); 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 { .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 { .icon-search {
@ -373,6 +387,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/toggle.svg?v=1'); 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 { .icon-toggle-pictures {
background-image: url('../img/actions/toggle-pictures.svg?v=1'); background-image: url('../img/actions/toggle-pictures.svg?v=1');
} }
@ -405,16 +423,20 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/video.svg?v=1'); background-image: url('../img/actions/video.svg?v=1');
} }
/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */
.icon-video-white { .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 { .icon-video-off {
background-image: url('../img/actions/video-off.svg?v=1'); 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 { .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 { .icon-view-close {
@ -426,7 +448,7 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
} }
.icon-view-next { .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 { .icon-view-pause {
@ -438,13 +460,14 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
} }
.icon-view-previous { .icon-view-previous {
background-image: url('../img/actions/view-previous.svg?v=1'); background-image: url('../img/actions/arrow-left.svg?v=1');
} }
/* PLACES ------------------------------------------------------------------- */ /* PLACES ------------------------------------------------------------------- */
.icon-calendar { .icon-calendar {
background-image: url('../img/places/calendar.svg?v=1'); background-image: url('../img/places/calendar.svg?v=1');
} }
.icon-calendar-dark { .icon-calendar-dark {
background-image: url('../img/places/calendar-dark.svg?v=1'); background-image: url('../img/places/calendar-dark.svg?v=1');
} }

2
core/css/variables.scss
View File

@ -20,6 +20,6 @@ $image-login-background: '../img/background.png?v=2';
$color-loading: #969696; $color-loading: #969696;
$color-loading-dark: #bbbbbb; $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%); $color-border: nc-darken($color-main-background, 8%);
$border-radius: 3px; $border-radius: 3px;

1
core/img/actions/toggle-background.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 212 B