From 29ff7efe9a5be16b133a1ee4e43d6d2155b6a21c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 29 Jun 2018 16:10:53 +0200 Subject: [PATCH] Svg icon api sass function and upgrade of all styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/accessibility/css/themedark.scss | 3 - ...gs-personal.css => settings-personal.scss} | 2 +- apps/files/css/files.scss | 17 +- apps/files_external/css/settings.scss | 2 +- core/Controller/SvgController.php | 12 +- core/css/functions.scss | 43 +++ core/css/header.scss | 58 +++- core/css/icons.scss | 314 +++++++++--------- core/css/styles.scss | 53 --- core/css/variables.scss | 27 +- core/img/actions/audio-off-white.svg | 1 - core/img/actions/audio-white.svg | 1 - core/img/actions/caret-dark.svg | 1 - core/img/actions/caret.svg | 2 +- core/img/actions/checkmark-color.svg | 1 - core/img/actions/checkmark-white.svg | 1 - core/img/actions/close-white.svg | 1 - core/img/actions/confirm-white.svg | 1 - core/img/actions/delete-hover.svg | 1 - core/img/actions/delete-white.svg | 1 - core/img/actions/download-white.svg | 1 - core/img/actions/error-color.svg | 1 - core/img/actions/error-white.svg | 1 - core/img/actions/fullscreen-white.svg | 1 - core/img/actions/info-white.svg | 1 - core/img/actions/screen-off-white.svg | 1 - core/img/actions/screen-white.svg | 1 - core/img/actions/search-white.svg | 1 - core/img/actions/settings-white.svg | 1 - core/img/actions/upload-white.svg | 1 - core/img/actions/video-off-white.svg | 1 - core/img/actions/video-white.svg | 1 - core/img/places/calendar-dark.svg | 1 - core/img/places/calendar.svg | 2 +- core/img/places/contacts-dark.svg | 1 - core/img/places/contacts.svg | 2 +- core/img/places/default-app-icon.svg | 2 +- core/img/places/files-dark.svg | 1 - core/img/places/files.svg | 2 +- core/img/places/music.svg | 2 +- core/img/places/picture.svg | 2 +- core/routes.php | 3 +- core/templates/layout.user.php | 2 +- lib/private/Settings/Manager.php | 2 +- lib/private/Template/SCSSCacher.php | 1 + settings/css/settings.scss | 10 +- 46 files changed, 324 insertions(+), 263 deletions(-) rename apps/encryption/css/{settings-personal.css => settings-personal.scss} (83%) create mode 100644 core/css/functions.scss delete mode 100644 core/img/actions/audio-off-white.svg delete mode 100644 core/img/actions/audio-white.svg delete mode 100644 core/img/actions/caret-dark.svg delete mode 100644 core/img/actions/checkmark-color.svg delete mode 100644 core/img/actions/checkmark-white.svg delete mode 100644 core/img/actions/close-white.svg delete mode 100644 core/img/actions/confirm-white.svg delete mode 100644 core/img/actions/delete-hover.svg delete mode 100644 core/img/actions/delete-white.svg delete mode 100644 core/img/actions/download-white.svg delete mode 100644 core/img/actions/error-color.svg delete mode 100644 core/img/actions/error-white.svg delete mode 100644 core/img/actions/fullscreen-white.svg delete mode 100644 core/img/actions/info-white.svg delete mode 100644 core/img/actions/screen-off-white.svg delete mode 100644 core/img/actions/screen-white.svg delete mode 100644 core/img/actions/search-white.svg delete mode 100644 core/img/actions/settings-white.svg delete mode 100644 core/img/actions/upload-white.svg delete mode 100644 core/img/actions/video-off-white.svg delete mode 100644 core/img/actions/video-white.svg delete mode 100644 core/img/places/calendar-dark.svg delete mode 100644 core/img/places/contacts-dark.svg delete mode 100644 core/img/places/files-dark.svg diff --git a/apps/accessibility/css/themedark.scss b/apps/accessibility/css/themedark.scss index c0935165c7..9ff59df2b5 100644 --- a/apps/accessibility/css/themedark.scss +++ b/apps/accessibility/css/themedark.scss @@ -37,9 +37,6 @@ $color-border-dark: lighten($color-main-background, 14%); } } } -.federation-menu .icon-federation-menu { - filter: invert(100%); -} .bubble, .app-navigation-entry-menu, .popovermenu, diff --git a/apps/encryption/css/settings-personal.css b/apps/encryption/css/settings-personal.scss similarity index 83% rename from apps/encryption/css/settings-personal.css rename to apps/encryption/css/settings-personal.scss index 4bab1a8d46..29e81a9968 100644 --- a/apps/encryption/css/settings-personal.css +++ b/apps/encryption/css/settings-personal.scss @@ -11,5 +11,5 @@ /* icons for sidebar */ .nav-icon-basic-encryption-module { - background-image: url('../img/app.svg?v=1'); + background-image: icon-color('app', 'encryption', $color-black); } \ No newline at end of file diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 79dc2a26eb..a408776a30 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -84,27 +84,26 @@ /* icons for sidebar */ .nav-icon-files { - background-image: url('../img/folder.svg?v=1'); + background-image: icon-color(folder, 'files', $color-black); } .nav-icon-recent { - background-image: url('../img/recent.svg?v=1'); + background-image: icon-color(recent, 'files', $color-black); } .nav-icon-favorites { - background-image: url('../img/star.svg?v=1'); + background-image: icon-color(star, 'files', $color-black); } .nav-icon-sharingin, -.nav-icon-sharingout, -.nav-icon-shareoverview { - background-image: url('../img/share.svg?v=1'); +.nav-icon-sharingout { + background-image: icon-color(share, 'files', $color-black); } .nav-icon-sharinglinks { - background-image: url('../img/public.svg?v=1'); + background-image: icon-color(public, 'files', $color-black); } .nav-icon-extstoragemounts { - background-image: url('../img/external.svg?v=1'); + background-image: icon-color(external, 'files', $color-black); } .nav-icon-trashbin { - background-image: url('../img/delete.svg?v=1'); + background-image: icon-color(delete, 'files', $color-black); } .nav-icon-deletedshares { background-image: url('../img/unshare.svg?v=1'); diff --git a/apps/files_external/css/settings.scss b/apps/files_external/css/settings.scss index bd45b57f6d..7784134bcd 100644 --- a/apps/files_external/css/settings.scss +++ b/apps/files_external/css/settings.scss @@ -122,5 +122,5 @@ td.mountPoint, td.backend { width:160px; } } .nav-icon-external-storage { - background-image: url('../img/app-dark.svg?v=1'); + background-image: icon-color('app-dark', 'files_external', $color-black); } diff --git a/core/Controller/SvgController.php b/core/Controller/SvgController.php index 6fba2f050b..26cead8913 100644 --- a/core/Controller/SvgController.php +++ b/core/Controller/SvgController.php @@ -55,12 +55,13 @@ class SvgController extends Controller { * * Generate svg from filename with the requested color * + * @param string $folder * @param string $fileName * @param string $color * @return DataDisplayResponse|NotFoundException */ - public function getSvgFromCore(string $fileName, string $color = 'ffffff') { - $path = $this->serverRoot . "/core/img/actions/$fileName.svg"; + public function getSvgFromCore(string $folder, string $fileName, string $color = 'ffffff') { + $path = $this->serverRoot . "/core/img/$folder/$fileName.svg"; return $this->getSvg($path, $color); } @@ -70,11 +71,18 @@ class SvgController extends Controller { * * Generate svg from filename with the requested color * + * @param string $app * @param string $fileName * @param string $color * @return DataDisplayResponse|NotFoundException */ public function getSvgFromApp(string $app, string $fileName, string $color = 'ffffff') { + + if ($app === 'settings') { + $path = $this->serverRoot . "/settings/img/$fileName.svg"; + return $this->getSvg($path, $color); + } + $appPath = \OC_App::getAppWebPath($app); if (!$appPath) { return new NotFoundResponse(); diff --git a/core/css/functions.scss b/core/css/functions.scss new file mode 100644 index 0000000000..d7192ebe1c --- /dev/null +++ b/core/css/functions.scss @@ -0,0 +1,43 @@ +/** + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +/** + * SVG COLOR API + * + * @param string $icon the icon filename + * @param string $dir the icon folder within /core/img if $core or app name + * @param string $color the desired color in hexadecimal + * @param bool [$core] search icon in core + * + * @returns string the url to the svg api endpoint + */ + @function icon-color($icon, $dir, $color, $core: false) { + // remove # from color + $index: str-index($color, '#'); + @if $index { + $color: str-slice($color, 2); + } + @if $core { + @return url('#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=1'); + } + @return url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=1'); +} \ No newline at end of file diff --git a/core/css/header.scss b/core/css/header.scss index e218f86fa9..a3566f9a21 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -322,7 +322,6 @@ nav[role='navigation'] { } /* Apps management */ - #apps { max-height: calc(100vh - 100px); overflow: auto; @@ -336,7 +335,6 @@ nav[role='navigation'] { } /* USER MENU -----------------------------------------------------------------*/ - #settings { display: inline-block; height: 100%; @@ -405,6 +403,7 @@ nav[role='navigation'] { } } +/* Settings menu */ #expanddiv { &.menu { right: 17px; @@ -438,6 +437,7 @@ nav[role='navigation'] { } } +/* Apps menu */ #appmenu { display: inline-block; width: auto; @@ -585,3 +585,57 @@ nav[role='navigation'] { top: 50px; } } + +/* SEARCHBOX --------------------------------------------------------------- */ +.searchbox { + position: relative; + display: flex; + align-items: center; + input[type='search'] { + position: relative; + font-size: 1.2em; + padding: 3px; + padding-left: 25px; + padding-right: 20px; + background-color: transparent; + color: var(--color-primary-text); + border: 0; + border-radius: var(--border-radius); + height: 34px; + width: 0; + cursor: pointer; + -webkit-transition: all 100ms; + transition: all 100ms; + opacity: .6; + &:focus, &:active, &:valid { + background-position-x: 6px; + color: var(--color-primary-text); + width: 155px; + cursor: text; + background-color: var(--color-primary) !important; + border: 1px solid var(--color-primary-text-dark) !important; + } + &:hover, &:focus, &:active { + opacity: 1; + } + & ~ .icon-close-white { + display: inline; + position: absolute; + width: 30px; + height: 100%; + right: 0; + top: 0; + margin: 0; + &, &:focus, &:active, &:hover { + border: none; + background-color: transparent; + } + } + &:not(:valid) ~ .icon-close-white { + display: none; + } + &::-webkit-search-cancel-button { + -webkit-appearance: none; + } + } +} \ No newline at end of file diff --git a/core/css/icons.scss b/core/css/icons.scss index c78d8eba7c..6be063e2b3 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -1,15 +1,30 @@ /** - * @copyright Copyright (c) 2016, John Molakvoæ - * @copyright Copyright (c) 2016, Joas Schilling - * @copyright Copyright (c) 2016, Lukas Reschke - * @copyright Copyright (c) 2016, Roeland Jago Douma - * @copyright Copyright (c) 2016, Vincent Chan - * @copyright Copyright (c) 2015, Thomas Müller - * @copyright Copyright (c) 2015, Hendrik Leppelsack - * @copyright Copyright (c) 2015, Jan-Christoph Borchardt + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * @author Joas Schilling + * @author Lukas Reschke + * @author Roeland Jago Douma + * @author Vincent Chan + * @author Thomas Müller + * @author Hendrik Leppelsack + * @author Jan-Christoph Borchardt * * @license GNU AGPL version 3 or any later version * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * */ /* GLOBAL ------------------------------------------------------------------- */ @@ -101,549 +116,544 @@ img, object, video, button, textarea, input, select, div[contenteditable='true'] } } -/* ICONS -------------------------------------------------------------------- */ +/* ICONS ------------------------------------------------------------------- */ .icon-add { - background-image: url('../img/actions/add.svg?v=1'); + background-image: icon-color('add', 'actions', $color-black, 'core'); } .icon-address { - background-image: url('../img/actions/address.svg?v=1'); + background-image: icon-color('address', 'actions', $color-black, 'core'); } .icon-address-white { - background-image: url('#{$webroot}/svg/address/fff?v=1'); + background-image: icon-color('address', 'actions', $color-white, 'core'); } .icon-audio { - background-image: url('../img/actions/audio.svg?v=1'); + background-image: icon-color('audio', 'actions', $color-black, 'core'); } -/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */ .icon-audio-white { - background-image: url('../img/actions/audio.svg?v=2'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + background-image: icon-color('audio', 'actions', $color-white, 'core'); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-audio-off { - background-image: url('../img/actions/audio-off.svg?v=1'); + background-image: icon-color('audio-off', 'actions', $color-black, 'core'); } -/* TODO: to be deprecated; use .icon-audio-off.icon-white.icon-shadow */ .icon-audio-off-white { - background-image: url('../img/actions/audio-off.svg?v=1'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + background-image: icon-color('audio-off', 'actions', $color-white, 'core'); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } +.icon-caret-white, .icon-caret { - background-image: url('../img/actions/caret.svg?v=1'); + background-image: icon-color('caret', 'actions', $color-white, 'core'); } .icon-caret-dark { - background-image: url('../img/actions/caret-dark.svg?v=1'); + background-image: icon-color('caret', 'actions', $color-black, 'core'); } .icon-checkmark { - background-image: url('../img/actions/checkmark.svg?v=1'); + background-image: icon-color('checkmark', 'actions', $color-black, 'core'); } .icon-checkmark-white { - background-image: url('#{$webroot}/svg/icon-checkmark/fff?v=1'); + background-image: icon-color('checkmark', 'actions', $color-white, 'core'); } .icon-checkmark-color { - background-image: url('#{$webroot}/svg/icon-checkmark/#{$color-success}?v=1'); + background-image: icon-color('checkmark', 'actions', $color-success, 'core'); } .icon-clippy { - background-image: url('../img/actions/clippy.svg?v=2'); + background-image: icon-color('clippy', 'actions', $color-black, 'core'); } .icon-close { - background-image: url('../img/actions/close.svg?v=1'); + background-image: icon-color('close', 'actions', $color-black, 'core'); } .icon-close-white { - background-image: url('#{$webroot}/svg/close/fff?v=1'); + background-image: icon-color('close', 'actions', $color-white, 'core'); } .icon-comment { - background-image: url('../img/actions/comment.svg?v=1'); + background-image: icon-color('comment', 'actions', $color-black, 'core'); } .icon-confirm { - background-image: url('../img/actions/confirm.svg?v=2'); + background-image: icon-color('confirm', 'actions', $color-black, 'core'); } .icon-confirm-fade { - background-image: url('../img/actions/confirm-fade.svg?v=2'); + background-image: icon-color('confirm-fade', 'actions', $color-black, 'core'); } .icon-confirm-white { - background-image: url('#{$webroot}/svg/icon-confirm/fff?v=1'); + background-image: icon-color('confirm', 'actions', $color-white, 'core'); } .icon-delete { - background-image: url('../img/actions/delete.svg?v=1'); + background-image: icon-color('delete', 'actions', $color-black, 'core'); &.no-permission { &:hover, &:focus { - background-image: url('../img/actions/delete.svg?v=1'); + background-image: icon-color('delete', 'actions', $color-black, 'core'); } } &:hover, &:focus { - background-image: url('#{$webroot}/svg/icon-delete/d40000?v=1'); + background-image: icon-color('delete', 'actions', $color-error, 'core'); filter: initial; } } .icon-delete-white { - background-image: url('#{$webroot}/svg/icon-delete/fff?v=1'); + background-image: icon-color('delete', 'actions', $color-white, 'core'); &.no-permission { &:hover, &:focus { - background-image: url('#{$webroot}/svg/icon-delete/fff?v=1'); + background-image: icon-color('delete', 'actions', $color-white, 'core'); } } &:hover, &:focus { - background-image: url('#{$webroot}/svg/icon-delete/d40000?v=1'); + background-image: icon-color('delete', 'actions', $color-error, 'core'); } } .icon-details { - background-image: url('../img/actions/details.svg?v=1'); + background-image: icon-color('details', 'actions', $color-black, 'core'); } .icon-download { - background-image: url('../img/actions/download.svg?v=1'); + background-image: icon-color('download', 'actions', $color-black, 'core'); } .icon-download-white { - background-image: url('#{$webroot}/svg/icon-download/fff?v=1'); + background-image: icon-color('download', 'actions', $color-white, 'core'); } .icon-edit { - background-image: url('../img/actions/edit.svg?v=1'); + background-image: icon-color('edit', 'actions', $color-black, 'core'); } .icon-error { - background-image: url('../img/actions/error.svg?v=1'); + background-image: icon-color('error', 'actions', $color-black, 'core'); } .icon-error-white { - background-image: url('#{$webroot}/svg/icon-error/fff?v=1'); + background-image: icon-color('error', 'actions', $color-white, 'core'); } .icon-error-color { - background-image: url('#{$webroot}/svg/icon-error/d40000?v=1'); + background-image: icon-color('error', 'actions', $color-error, 'core'); } .icon-external { - background-image: url('../img/actions/external.svg?v=1'); + background-image: icon-color('external', 'actions', $color-black, 'core'); } .icon-fullscreen { - background-image: url('../img/actions/fullscreen.svg?v=1'); + background-image: icon-color('fullscreen', 'actions', $color-black, 'core'); } -/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */ .icon-fullscreen-white { - background-image: url('../img/actions/fullscreen.svg?v=1'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + background-image: icon-color('fullscreen', 'actions', $color-white, 'core'); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-history { - background-image: url('../img/actions/history.svg?v=1'); + background-image: icon-color('history', 'actions', $color-black, 'core'); } .icon-info { - background-image: url('../img/actions/info.svg?v=1'); + background-image: icon-color('info', 'actions', $color-black, 'core'); } .icon-info-white { - background-image: url('#{$webroot}/svg/icon-info/fff?v=1'); + background-image: icon-color('info', 'actions', $color-white, 'core'); } .icon-logout { - background-image: url('../img/actions/logout.svg?v=1'); + background-image: icon-color('logout', 'actions', $color-black, 'core'); } .icon-mail { - background-image: url('../img/actions/mail.svg?v=1'); + background-image: icon-color('mail', 'actions', $color-black, 'core'); } .icon-menu { - background-image: url('../img/actions/menu.svg?v=1'); + background-image: icon-color('menu', 'actions', $color-black, 'core'); } .icon-more { - background-image: url('../img/actions/more.svg?v=1'); + background-image: icon-color('more', 'actions', $color-black, 'core'); } .icon-more-white { - background-image: url('#{$webroot}/svg/more/fff?v=1'); + background-image: icon-color('more', 'actions', $color-white) } .icon-password { - background-image: url('../img/actions/password.svg?v=1'); + background-image: icon-color('password', 'actions', $color-black, 'core'); } .icon-pause { - background-image: url('../img/actions/pause.svg?v=1'); + background-image: icon-color('pause', 'actions', $color-black, 'core'); } .icon-play { - background-image: url('../img/actions/play.svg?v=1'); + background-image: icon-color('play', 'actions', $color-black, 'core'); } .icon-play-add { - background-image: url('../img/actions/play-add.svg?v=1'); + background-image: icon-color('play-add', 'actions', $color-black, 'core'); } .icon-play-next { - background-image: url('../img/actions/play-next.svg?v=1'); + background-image: icon-color('play-next', 'actions', $color-black, 'core'); } .icon-play-previous { - background-image: url('../img/actions/play-previous.svg?v=1'); + background-image: icon-color('play-previous', 'actions', $color-black, 'core'); } .icon-public { - background-image: url('../img/actions/public.svg?v=1'); + background-image: icon-color('public', 'actions', $color-black, 'core'); } .icon-quota { - background-image: url('../img/actions/quota.svg?v=1'); + background-image: icon-color('quota', 'actions', $color-black, 'core'); } .icon-rename { - background-image: url('../img/actions/rename.svg?v=1'); + background-image: icon-color('rename', 'actions', $color-black, 'core'); } .icon-screen { - background-image: url('../img/actions/screen.svg?v=1'); + background-image: icon-color('screen', 'actions', $color-black, 'core'); } -/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */ .icon-screen-white { - background-image: url('../img/actions/screen.svg?v=1'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + background-image: icon-color('screen', 'actions', $color-white, 'core'); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-screen-off { - background-image: url('../img/actions/screen-off.svg?v=1'); + background-image: icon-color('screen-off', 'actions', $color-black, 'core'); } -/* TODO: to be deprecated; use .icon-screen-off.icon-white.icon-shadow */ .icon-screen-off-white { - background-image: url('../img/actions/screen-off.svg?v=1'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + background-image: icon-color('screen-off', 'actions', $color-white, 'core'); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-search { - background-image: url('../img/actions/search.svg?v=1'); + background-image: icon-color('search', 'actions', $color-black, 'core'); } .icon-search-white { - background-image: url('#{$webroot}/svg/search/fff?v=1'); + background-image: icon-color('search', 'actions', $color-white, 'core'); } +/* default icon have a .5 opacity */ .icon-settings { - background-image: url('../img/actions/settings.svg?v=1'); + background-image: icon-color('settings', 'actions', $color-black, 'core'); } .icon-settings-dark { - background-image: url('../img/actions/settings-dark.svg?v=1'); + background-image: icon-color('settings-dark', 'actions', $color-black, 'core'); } .icon-settings-white { - background-image: url('#{$webroot}/svg/settings-dark/fff?v=1'); + background-image: icon-color('settings-dark', 'actions', $color-white, 'core'); } /* always use icon-shared, AdBlock blocks icon-share */ .icon-shared, .icon-share { - background-image: url('../img/actions/share.svg?v=1'); + background-image: icon-color('share', 'actions', $color-black, 'core'); } .icon-sound { - background-image: url('../img/actions/sound.svg?v=1'); + background-image: icon-color('sound', 'actions', $color-black, 'core'); } .icon-sound-off { - background-image: url('../img/actions/sound-off.svg?v=1'); + background-image: icon-color('sound-off', 'actions', $color-black, 'core'); } .icon-favorite { - background-image: url('../img/actions/star-dark.svg?v=1'); + background-image: icon-color('star-dark', 'actions', $color-black, 'core'); } .icon-star { - background-image: url('../img/actions/star.svg?v=1'); + background-image: icon-color('star', 'actions', $color-black, 'core'); } .icon-star-dark { - background-image: url('../img/actions/star-dark.svg?v=1'); + background-image: icon-color('star-dark', 'actions', $color-black, 'core'); } .icon-starred { &:hover, &:focus { - background-image: url('../img/actions/star.svg?v=1'); + background-image: icon-color('star', 'actions', $color-black, 'core'); } - background-image: url('../img/actions/starred.svg?v=1'); + background-image: icon-color('starred', 'actions', $color-black, 'core'); } .icon-star { &:hover, &:focus { - background-image: url('../img/actions/starred.svg?v=1'); + background-image: icon-color('starred', 'actions', $color-black, 'core'); } } .icon-tag { - background-image: url('../img/actions/tag.svg?v=1'); + background-image: icon-color('tag', 'actions', $color-black, 'core'); } .icon-timezone { - background-image: url('../img/actions/timezone.svg?v=1'); + background-image: icon-color('timezone', 'actions', $color-black, 'core'); } .icon-toggle { - background-image: url('../img/actions/toggle.svg?v=1'); + background-image: icon-color('toggle', 'actions', $color-black, 'core'); } .icon-toggle-background { - background-image: url('../img/actions/toggle-background.svg?v=1'); + background-image: icon-color('toggle-background', 'actions', $color-black, 'core'); } .icon-toggle-pictures { - background-image: url('../img/actions/toggle-pictures.svg?v=1'); + background-image: icon-color('toggle-pictures', 'actions', $color-black, 'core'); } .icon-triangle-e { - background-image: url('../img/actions/triangle-e.svg?v=1'); + background-image: icon-color('triangle-e', 'actions', $color-black, 'core'); } .icon-triangle-n { - background-image: url('../img/actions/triangle-n.svg?v=1'); + background-image: icon-color('triangle-n', 'actions', $color-black, 'core'); } .icon-triangle-s { - background-image: url('../img/actions/triangle-s.svg?v=1'); + background-image: icon-color('triangle-s', 'actions', $color-black, 'core'); } .icon-upload { - background-image: url('../img/actions/upload.svg?v=1'); + background-image: icon-color('upload', 'actions', $color-black, 'core'); } .icon-upload-white { - background-image: url('#{$webroot}/svg/upload/fff?v=1'); + background-image: icon-color('upload', 'actions', $color-white, 'core'); } .icon-user { - background-image: url('../img/actions/user.svg?v=1'); + background-image: icon-color('user', 'actions', $color-black, 'core'); } .icon-video { - background-image: url('../img/actions/video.svg?v=1'); + background-image: icon-color('video', 'actions', $color-black, 'core'); } -/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */ .icon-video-white { - background-image: url('../img/actions/video.svg?v=2'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + background-image: icon-color('video', 'actions', $color-white, 'core'); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-video-off { - background-image: url('../img/actions/video-off.svg?v=1'); + background-image: icon-color('video-off', 'actions', $color-black, 'core'); } -/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */ .icon-video-off-white { - background-image: url('../img/actions/video-off.svg?v=1'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + background-image: icon-color('video-off', 'actions', $color-white, 'core'); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-video-switch { - background-image: url('../img/actions/video-switch.svg?v=1'); + background-image: icon-color('video-switch', 'actions', $color-black, 'core'); } .icon-view-close { - background-image: url('../img/actions/view-close.svg?v=1'); + background-image: icon-color('view-close', 'actions', $color-black, 'core'); } .icon-view-download { - background-image: url('../img/actions/view-download.svg?v=1'); + background-image: icon-color('view-download', 'actions', $color-black, 'core'); } .icon-view-next { - background-image: url('../img/actions/arrow-right.svg?v=1'); + background-image: icon-color('arrow-right', 'actions', $color-black, 'core'); } .icon-view-pause { - background-image: url('../img/actions/view-pause.svg?v=1'); + background-image: icon-color('view-pause', 'actions', $color-black, 'core'); } .icon-view-play { - background-image: url('../img/actions/view-play.svg?v=1'); + background-image: icon-color('view-play', 'actions', $color-black, 'core'); } .icon-view-previous { - background-image: url('../img/actions/arrow-left.svg?v=1'); + background-image: icon-color('arrow-left', 'actions', $color-black, 'core'); } .icon-disabled-user { - background-image: url('../img/actions/disabled-user.svg?v=1'); + background-image: icon-color('disabled-user', 'actions', $color-black, 'core'); } .icon-disabled-users { - background-image: url('../img/actions/disabled-users.svg?v=1'); + background-image: icon-color('disabled-users', 'actions', $color-black, 'core'); } .icon-user-admin { - background-image: url('../img/actions/user-admin.svg?v=1'); + background-image: icon-color('user-admin', 'actions', $color-black, 'core'); } /* PLACES ------------------------------------------------------------------- */ .icon-calendar { - background-image: url('../img/places/calendar.svg?v=1'); + background-image: icon-color('calendar', 'places', $color-white, 'core'); } .icon-calendar-dark { - background-image: url('../img/places/calendar-dark.svg?v=1'); + background-image: icon-color('calendar', 'places', $color-black, 'core'); } .icon-contacts { - background-image: url('../img/places/contacts.svg?v=1'); + background-image: icon-color('contacts', 'places', $color-white, 'core'); } .icon-contacts-dark { - background-image: url('../img/places/contacts-dark.svg?v=1'); + background-image: icon-color('contacts', 'places', $color-black, 'core'); } .icon-files { - background-image: url('../img/places/files.svg?v=1'); + background-image: icon-color('files', 'places', $color-white, 'core'); } .icon-files-dark { - background-image: url('../img/places/files-dark.svg?v=1'); + background-image: icon-color('files', 'places', $color-black, 'core'); } .icon-file, .icon-filetype-text { - background-image: url('../img/filetypes/text.svg?v=1'); + background-image: icon-color('text', 'filetypes', $color-black, 'core'); } .icon-folder, .icon-filetype-folder { - background-image: url('../img/filetypes/folder.svg?v=1'); + background-image: icon-color('folder', 'filetypes', $color-black, 'core'); } .icon-filetype-folder-drag-accept { - background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important; + background-image: icon-color('folder-drag-accept', 'filetypes', $color-black) !important; } .icon-home { - background-image: url('../img/places/home.svg?v=1'); + background-image: icon-color('home', 'places', $color-black, 'core'); } .icon-link { - background-image: url('../img/places/link.svg?v=1'); + background-image: icon-color('link', 'places', $color-black, 'core'); } .icon-music { - background-image: url('../img/places/music.svg?v=1'); + background-image: icon-color('music', 'places', $color-black, 'core'); } .icon-picture { - background-image: url('../img/places/picture.svg?v=1'); + background-image: icon-color('picture', 'places', $color-black, 'core'); } /* CLIENTS ------------------------------------------------------------------- */ .icon-desktop { - background-image: url('../img/clients/desktop.svg?v=1'); + background-image: icon-color('desktop', 'clients', $color-black, 'core'); } .icon-phone { - background-image: url('../img/clients/phone.svg?v=1'); + background-image: icon-color('phone', 'clients', $color-black, 'core'); } .icon-tablet { - background-image: url('../img/clients/tablet.svg?v=1'); + background-image: icon-color('tablet', 'clients', $color-black, 'core'); } /* APP CATEGORIES ------------------------------------------------------------------- */ .icon-category-installed { - background-image: url('../img/actions/user.svg?v=1'); + background-image: icon-color('user', 'actions', $color-black, 'core'); } .icon-category-enabled { - background-image: url('../img/actions/checkmark.svg?v=1'); + background-image: icon-color('checkmark', 'actions', $color-black, 'core'); } .icon-category-disabled { - background-image: url('../img/actions/close.svg?v=1'); + background-image: icon-color('close', 'actions', $color-black, 'core'); } .icon-category-app-bundles { - background-image: url('../img/categories/bundles.svg?v=1'); + background-image: icon-color('bundles', 'categories', $color-black, 'core'); } .icon-category-updates { - background-image: url('../img/actions/download.svg?v=1'); + background-image: icon-color('download', 'actions', $color-black, 'core'); } .icon-category-files { - background-image: url('../img/categories/files.svg?v=1'); + background-image: icon-color('files', 'categories', $color-black, 'core'); } .icon-category-social { - background-image: url('../img/categories/social.svg?v=1'); + background-image: icon-color('social', 'categories', $color-black, 'core'); } .icon-category-office { - background-image: url('../img/categories/office.svg?v=1'); + background-image: icon-color('office', 'categories', $color-black, 'core'); } .icon-category-auth { - background-image: url('../img/categories/auth.svg?v=1'); + background-image: icon-color('auth', 'categories', $color-black, 'core'); } .icon-category-monitoring { - background-image: url('../img/categories/monitoring.svg?v=1'); + background-image: icon-color('monitoring', 'categories', $color-black, 'core'); } .icon-category-multimedia { - background-image: url('../img/categories/multimedia.svg?v=1'); + background-image: icon-color('multimedia', 'categories', $color-black, 'core'); } .icon-category-organization { - background-image: url('../img/categories/organization.svg?v=1'); + background-image: icon-color('organization', 'categories', $color-black, 'core'); } .icon-category-customization { - background-image: url('../img/categories/customization.svg?v=1'); + background-image: icon-color('customization', 'categories', $color-black, 'core'); } .icon-category-integration { - background-image: url('../img/categories/integration.svg?v=1'); + background-image: icon-color('integration', 'categories', $color-black, 'core'); } .icon-category-tools { - background-image: url('../img/actions/settings-dark.svg?v=1'); + background-image: icon-color('settings-dark', 'actions', $color-black, 'core'); } .icon-category-games { - background-image: url('../img/categories/games.svg?v=1'); + background-image: icon-color('games', 'categories', $color-black, 'core'); } .icon-category-security { - background-image: url('../img/actions/password.svg?v=1'); + background-image: icon-color('password', 'actions', $color-black, 'core'); } .icon-category-search { - background-image: url('../img/actions/search.svg?v=1'); + background-image: icon-color('search', 'actions', $color-black, 'core'); } diff --git a/core/css/styles.scss b/core/css/styles.scss index 6ff8d30a59..eac6af307a 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -160,59 +160,6 @@ body { border-radius: var(--border-radius); } -/* Searchbox */ - -.searchbox { - position: relative; - input[type='search'] { - position: relative; - font-size: 1.2em; - padding: 3px; - padding-left: 25px; - padding-right: 20px; - background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center; - color: var(--color-primary-text); - border: 0; - border-radius: var(--border-radius); - margin-top: 9px; - width: 0; - cursor: pointer; - -webkit-transition: all 100ms; - transition: all 100ms; - opacity: .6; - &:focus, &:active, &:valid { - background-position-x: 6px; - color: var(--color-primary-text); - width: 155px; - cursor: text; - background-color: var(--color-primary) !important; - border: 1px solid var(--color-primary-text-dark) !important; - } - &:hover, &:focus, &:active { - opacity: 1; - } - & ~ .icon-close-white { - display: inline; - position: absolute; - width: 30px; - height: 100%; - right: 0; - top: 0; - margin: 0; - &, &:focus, &:active, &:hover { - border: none; - background-color: transparent; - } - } - &:not(:valid) ~ .icon-close-white { - display: none; - } - &::-webkit-search-cancel-button { - -webkit-appearance: none; - } - } -} - /* CONTENT ------------------------------------------------------------------ */ #controls { diff --git a/core/css/variables.scss b/core/css/variables.scss index 43e3c6b97b..0207a82c4b 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -1,4 +1,26 @@ -// SCSS darken/lighten function override +/** + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + + // SCSS darken/lighten function override @function nc-darken($color, $value) { @return darken($color, $value); } @@ -27,6 +49,9 @@ $color-primary-element-light: lighten($color-primary-element, 15%) !default; $color-error: #e9322d; $color-warning: #eca700; $color-success: #46ba61; +// used for svg +$color-white: #000 !default; +$color-black: #fff !default; // rgb(118, 118, 118) / #767676 // min. color contrast for normal text on white background according to WCAG AA diff --git a/core/img/actions/audio-off-white.svg b/core/img/actions/audio-off-white.svg deleted file mode 100644 index d0699a959d..0000000000 --- a/core/img/actions/audio-off-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/audio-white.svg b/core/img/actions/audio-white.svg deleted file mode 100644 index 209177deb3..0000000000 --- a/core/img/actions/audio-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/caret-dark.svg b/core/img/actions/caret-dark.svg deleted file mode 100644 index 89ce37bc3e..0000000000 --- a/core/img/actions/caret-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/caret.svg b/core/img/actions/caret.svg index a7c34f699c..89ce37bc3e 100644 --- a/core/img/actions/caret.svg +++ b/core/img/actions/caret.svg @@ -1 +1 @@ - + diff --git a/core/img/actions/checkmark-color.svg b/core/img/actions/checkmark-color.svg deleted file mode 100644 index 89f6960834..0000000000 --- a/core/img/actions/checkmark-color.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/checkmark-white.svg b/core/img/actions/checkmark-white.svg deleted file mode 100644 index 6190902ea2..0000000000 --- a/core/img/actions/checkmark-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/close-white.svg b/core/img/actions/close-white.svg deleted file mode 100644 index f24a6914b0..0000000000 --- a/core/img/actions/close-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/confirm-white.svg b/core/img/actions/confirm-white.svg deleted file mode 100644 index 98a41adefe..0000000000 --- a/core/img/actions/confirm-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/delete-hover.svg b/core/img/actions/delete-hover.svg deleted file mode 100644 index 286f060d46..0000000000 --- a/core/img/actions/delete-hover.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/delete-white.svg b/core/img/actions/delete-white.svg deleted file mode 100644 index 15a364c100..0000000000 --- a/core/img/actions/delete-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/download-white.svg b/core/img/actions/download-white.svg deleted file mode 100644 index b6de799602..0000000000 --- a/core/img/actions/download-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/error-color.svg b/core/img/actions/error-color.svg deleted file mode 100644 index 19957ad7c7..0000000000 --- a/core/img/actions/error-color.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/error-white.svg b/core/img/actions/error-white.svg deleted file mode 100644 index 9558c998c3..0000000000 --- a/core/img/actions/error-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/fullscreen-white.svg b/core/img/actions/fullscreen-white.svg deleted file mode 100644 index c920885bf6..0000000000 --- a/core/img/actions/fullscreen-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/info-white.svg b/core/img/actions/info-white.svg deleted file mode 100644 index 92f6e44add..0000000000 --- a/core/img/actions/info-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/screen-off-white.svg b/core/img/actions/screen-off-white.svg deleted file mode 100644 index a022b93380..0000000000 --- a/core/img/actions/screen-off-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/screen-white.svg b/core/img/actions/screen-white.svg deleted file mode 100644 index e279dc4827..0000000000 --- a/core/img/actions/screen-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/search-white.svg b/core/img/actions/search-white.svg deleted file mode 100644 index 73aa5d3fa2..0000000000 --- a/core/img/actions/search-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/settings-white.svg b/core/img/actions/settings-white.svg deleted file mode 100644 index ba8d925d8a..0000000000 --- a/core/img/actions/settings-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/upload-white.svg b/core/img/actions/upload-white.svg deleted file mode 100644 index 3bd04bb8de..0000000000 --- a/core/img/actions/upload-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/video-off-white.svg b/core/img/actions/video-off-white.svg deleted file mode 100644 index 95e39de06d..0000000000 --- a/core/img/actions/video-off-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/video-white.svg b/core/img/actions/video-white.svg deleted file mode 100644 index f24bb373ad..0000000000 --- a/core/img/actions/video-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/places/calendar-dark.svg b/core/img/places/calendar-dark.svg deleted file mode 100644 index 020ae8fe6c..0000000000 --- a/core/img/places/calendar-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/places/calendar.svg b/core/img/places/calendar.svg index 0d6e85a3ac..020ae8fe6c 100644 --- a/core/img/places/calendar.svg +++ b/core/img/places/calendar.svg @@ -1 +1 @@ - + diff --git a/core/img/places/contacts-dark.svg b/core/img/places/contacts-dark.svg deleted file mode 100644 index 5bc91dc59a..0000000000 --- a/core/img/places/contacts-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/places/contacts.svg b/core/img/places/contacts.svg index 205224878e..5bc91dc59a 100644 --- a/core/img/places/contacts.svg +++ b/core/img/places/contacts.svg @@ -1 +1 @@ - + diff --git a/core/img/places/default-app-icon.svg b/core/img/places/default-app-icon.svg index ba8d925d8a..0db6804a92 100644 --- a/core/img/places/default-app-icon.svg +++ b/core/img/places/default-app-icon.svg @@ -1 +1 @@ - + diff --git a/core/img/places/files-dark.svg b/core/img/places/files-dark.svg deleted file mode 100644 index 1536502790..0000000000 --- a/core/img/places/files-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/places/files.svg b/core/img/places/files.svg index 003e8b3fb8..1536502790 100644 --- a/core/img/places/files.svg +++ b/core/img/places/files.svg @@ -1 +1 @@ - + diff --git a/core/img/places/music.svg b/core/img/places/music.svg index 26fe2017f1..5746247ea7 100644 --- a/core/img/places/music.svg +++ b/core/img/places/music.svg @@ -1 +1 @@ - + diff --git a/core/img/places/picture.svg b/core/img/places/picture.svg index 738f1b3b50..ffb0840ac0 100644 --- a/core/img/places/picture.svg +++ b/core/img/places/picture.svg @@ -1 +1 @@ - + diff --git a/core/routes.php b/core/routes.php index 9538a59160..4ac51dc236 100644 --- a/core/routes.php +++ b/core/routes.php @@ -61,7 +61,8 @@ $application->registerRoutes($this, [ ['name' => 'OCJS#getConfig', 'url' => '/core/js/oc.js', 'verb' => 'GET'], ['name' => 'Preview#getPreviewByFileId', 'url' => '/core/preview', 'verb' => 'GET'], ['name' => 'Preview#getPreview', 'url' => '/core/preview.png', 'verb' => 'GET'], - ['name' => 'Svg#getSvgFromCore', 'url' => '/svg/{fileName}/{color}', 'verb' => 'GET'], + ['name' => 'Svg#getSvgFromCore', 'url' => '/svg/core/{folder}/{fileName}/{color}', 'verb' => 'GET'], + ['name' => 'Svg#getSvgFromSettings', 'url' => '/svg/settings/{folder}/{fileName}/{color}', 'verb' => 'GET'], ['name' => 'Svg#getSvgFromApp', 'url' => '/svg/{app}/{fileName}/{color}', 'verb' => 'GET'], ['name' => 'Css#getCss', 'url' => '/css/{appName}/{fileName}', 'verb' => 'GET'], ['name' => 'Js#getJs', 'url' => '/js/{appName}/{fileName}', 'verb' => 'GET'], diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 3cac14b4ab..b9eab8f414 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -105,7 +105,7 @@ t('Search'));?> diff --git a/lib/private/Settings/Manager.php b/lib/private/Settings/Manager.php index 82cb223bb9..e9f2a6f597 100644 --- a/lib/private/Settings/Manager.php +++ b/lib/private/Settings/Manager.php @@ -231,7 +231,7 @@ class Manager implements IManager { 5 => [new Section('sharing', $this->l->t('Sharing'), 0, $this->url->imagePath('core', 'actions/share.svg'))], 10 => [new Section('security', $this->l->t('Security'), 0, $this->url->imagePath('core', 'actions/password.svg'))], 45 => [new Section('encryption', $this->l->t('Encryption'), 0, $this->url->imagePath('core', 'actions/password.svg'))], - 50 => [new Section('groupware', $this->l->t('Groupware'), 0, $this->url->imagePath('core', 'places/contacts-dark.svg'))], + 50 => [new Section('groupware', $this->l->t('Groupware'), 0, $this->url->imagePath('core', 'places/contacts.svg'))], 98 => [new Section('additional', $this->l->t('Additional settings'), 0, $this->url->imagePath('core', 'actions/settings-dark.svg'))], ]; diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index d7cea03228..0b214755af 100644 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -234,6 +234,7 @@ class SCSSCacher { try { $compiledScss = $scss->compile( '$webroot: \'' . \OC::$WEBROOT. '\';'. + '@import "functions.scss";' . '@import "variables.scss";' . $this->getInjectedVariables() . '@import "'.$fileNameSCSS.'";'); diff --git a/settings/css/settings.scss b/settings/css/settings.scss index 1ca14b8f1d..3526e322ac 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -15,23 +15,23 @@ input { /* icons for sidebar */ .nav-icon-personal-settings { - background-image: url('../img/personal.svg?v=1'); + background-image: icon-color('personal', 'settings', $color-black); } .nav-icon-security { - background-image: url('../img/toggle-filelist.svg?v=1'); + background-image: icon-color('toggle-filelist', 'settings', $color-black); } .nav-icon-clientsbox { - background-image: url('../img/change.svg?v=1'); + background-image: icon-color('change', 'settings', $color-black); } .nav-icon-federated-cloud { - background-image: url('../img/share.svg?v=1'); + background-image: icon-color('share', 'settings', $color-black); } .nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate { - background-image: url('../img/password.svg?v=1'); + background-image: icon-color('password', 'settings', $color-black); } #avatarform {