diff options
author | John Molakvoæ <skjnldsv@protonmail.com> | 2022-05-10 16:47:48 +0200 |
---|---|---|
committer | John Molakvoæ <skjnldsv@protonmail.com> | 2022-05-10 23:24:06 +0200 |
commit | c59c3b5c1f8fba38d6b2e4bfd19714cb1f75ba85 (patch) | |
tree | 5ce2d8e17a8eb39f4493714a178a9164ad961840 /core/css | |
parent | f0f2a07f850af1105e27be5bc9180500b1dbac39 (diff) | |
download | nextcloud-server-c59c3b5c1f8fba38d6b2e4bfd19714cb1f75ba85.tar.gz nextcloud-server-c59c3b5c1f8fba38d6b2e4bfd19714cb1f75ba85.zip |
Migrate to static icons colours
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Diffstat (limited to 'core/css')
-rw-r--r-- | core/css/apps.scss | 21 | ||||
-rw-r--r-- | core/css/functions.scss | 64 | ||||
-rw-r--r-- | core/css/icons.scss | 371 | ||||
-rw-r--r-- | core/css/styles.scss | 2 |
4 files changed, 56 insertions, 402 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss index 8d753eb8d23..a9b20cfec2b 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -721,20 +721,16 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; #app-settings-header .settings-button { - display: block; + display: flex; + align-items: center; height: 44px; width: 100%; padding: 0; margin: 0; - background-color: var(--color-main-background); - @include icon-color('settings-dark', 'actions', $color-black, 1, true); - background-position: 14px center; - background-repeat: no-repeat; box-shadow: none; border: 0; border-radius: 0; text-align: left; - padding-left: 44px; font-weight: normal; font-size: 100%; opacity: 0.8; @@ -750,6 +746,19 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; &:focus { background-color: var(--color-background-hover); } + + &::before { + background-image: var(--icon-settings-dark); + background-position: 14px center; + background-repeat: no-repeat; + content: ''; + width: 44px; + height: 44px; + top: 0; + left: 0; + display: block; + filter: var(--background-invert-if-dark); + } } /* GENERAL SECTION ------------------------------------------------------------ */ diff --git a/core/css/functions.scss b/core/css/functions.scss index 7489e574e97..3311ef06955 100644 --- a/core/css/functions.scss +++ b/core/css/functions.scss @@ -26,7 +26,7 @@ * @param string $color The color * @return string The color without # */ -@function remove-hash-from-color($color) { + @function remove-hash-from-color($color) { $color: unquote($color); $index: str-index(inspect($color), '#'); @if $index { @@ -36,22 +36,34 @@ } /** - * Calculates the URL to the svg under the SVG 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 int [$version] the version of the file - * @param bool [$core] search icon in core - * @return string The URL to the svg. + * @see core/src/icons.js */ -@function icon-color-path($icon, $dir, $color, $version: 1, $core: false) { - $color: remove-hash-from-color($color); - @if $core { - @return '#{$webroot}/svg/core/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}'; - } @else { - @return '#{$webroot}/svg/#{$dir}/#{$icon}?color=#{$color}&v=#{$version}'; +@function match-color-string($color) { + @if $color == #000 { + @return "dark"; + } + @if $color == #000 { + @return 'dark'; + } + @if $color == #fff { + @return 'white'; + } + @if $color == #FC0 { + @return 'yellow'; + } + @if $color == #e9322d { + @return 'red'; + } + @if $color == #eca700 { + @return 'orange'; } + @if $color == #46ba61 { + @return 'green'; + } + @if $color == #969696 { + @return 'grey'; + } + @return $color; } /** @@ -66,30 +78,12 @@ * @returns A background image with the url to the set to the requested icon. */ @mixin icon-color($icon, $dir, $color, $version: 1, $core: false) { - $color: remove-hash-from-color($color); + $color: match-color-string($color); /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ - $varName: "--icon-#{$dir}-#{$icon}-#{$color}"; - @if $core { - $varName: "--icon-#{$icon}-#{$color}"; - } - #{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core)); + $varName: "--icon-#{$icon}-#{$color}"; background-image: var(#{$varName}); } -/** - * Create black and white icons - * This will add a default black version of and an additional white version when .icon-white is applied - */ -@mixin icon-black-white($icon, $dir, $version, $core: false) { - .icon-#{$icon} { - @include icon-color($icon, $dir, $color-black, $version, $core); - } - .icon-#{$icon}-white, - .icon-#{$icon}.icon-white { - @include icon-color($icon, $dir, $color-white, $version, $core); - } -} - @mixin position($value) { @if $value == 'sticky' { position: -webkit-sticky; // Safari support diff --git a/core/css/icons.scss b/core/css/icons.scss index 78522895cf5..9acec4895be 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -123,393 +123,42 @@ audio, canvas, embed, iframe, img, input, object, video { } } -/* ICONS ------------------------------------------------------------------- - * These icon classes are generated automatically with the following pattern - * for icon-black-white('close', ...) - * .icon-close (black icon) - * .icon-close-white (white icon) - * .icon-close.icon-white (white icon) - * - * Some class definitions are kept as before, since they don't follow the pattern - * or have some additional styling like drop shadows - */ - -@include icon-black-white('add', 'actions', 1, true); -@include icon-black-white('address', 'actions', 1, true); - -@include icon-black-white('audio', 'actions', 2, true); .icon-audio-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('audio-off', 'actions', 1, true); .icon-audio-off-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -.icon-caret-white, -.icon-caret { - @include icon-color('caret', 'actions', $color-white, 1, true); -} - -.icon-caret-dark { - @include icon-color('caret', 'actions', $color-black, 1, true); -} - -@include icon-black-white('checkmark', 'actions', 1, true); -.icon-checkmark-color { - @include icon-color('checkmark', 'actions', $color-success, 1, true); -} - -@include icon-black-white('clippy', 'actions', 2, true); -@include icon-black-white('close', 'actions', 1, true); -@include icon-black-white('comment', 'actions', 1, true); -@include icon-black-white('confirm', 'actions', 2, true); -@include icon-black-white('download', 'actions', 1, true); - -.icon-confirm-fade { - @include icon-color('confirm-fade', 'actions', $color-black, 2, true); -} - -.icon-delete { - @include icon-color('delete', 'actions', $color-black, 1, true); - &.no-permission, - &.no-hover { - &:hover, - &:focus { - @include icon-color('delete', 'actions', $color-black, 1, true); - } - } - &:hover, - &:focus { - @include icon-color('delete', 'actions', $color-error, 1, true); - filter: initial; - } - - &.icon-white { - @include icon-color('delete', 'actions', $color-white, 1, true); - } -} - -.icon-delete-white { - @include icon-color('delete', 'actions', $color-white, 1, true); - &.no-permission { - &:hover, - &:focus { - @include icon-color('delete', 'actions', $color-white, 1, true); - } - } - &:hover, - &:focus { - @include icon-color('delete', 'actions', $color-error, 1, true); - } -} - -@include icon-black-white('details', 'actions', 1, true); -@include icon-black-white('edit', 'actions', 1, true); -@include icon-black-white('error', 'actions', 1, true); - -.icon-error-color { - @include icon-color('error', 'actions', $color-error, 1, true); -} -@include icon-black-white('external', 'actions', 1, true); -@include icon-black-white('fullscreen', 'actions', 1, true); - .icon-fullscreen-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('history', 'actions', 2, true); -@include icon-black-white('info', 'actions', 1, true); -@include icon-black-white('logout', 'actions', 1, true); -@include icon-black-white('mail', 'actions', 1, true); -@include icon-black-white('menu', 'actions', 1, true); -@include icon-black-white('menu-sidebar', 'actions', 1, true); -@include icon-black-white('more', 'actions', 1, true); -@include icon-black-white('password', 'actions', 1, true); -@include icon-black-white('pause', 'actions', 1, true); -@include icon-black-white('play', 'actions', 1, true); -@include icon-black-white('play-add', 'actions', 1, true); -@include icon-black-white('play-next', 'actions', 1, true); -@include icon-black-white('play-previous', 'actions', 1, true); -@include icon-black-white('projects', 'actions', 1, true); -@include icon-black-white('public', 'actions', 1, true); -@include icon-black-white('quota', 'actions', 1, true); -@include icon-black-white('rename', 'actions', 1, true); -@include icon-black-white('screen', 'actions', 1, true); -@include icon-black-white('template-add', 'actions', 1, true); - .icon-screen-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('screen-off', 'actions', 1, true); .icon-screen-off-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('search', 'actions', 1, true); - -/* default icon have a .5 opacity */ -.icon-settings { - @include icon-color('settings', 'actions', $color-black, 1, true); -} - -.icon-settings-dark { - @include icon-color('settings-dark', 'actions', $color-black, 1, true); -} - -.icon-settings-white { - @include icon-color('settings-dark', 'actions', $color-white, 1, true); -} - -/* always use icon-shared, AdBlock blocks icon-share */ -.icon-shared, -.icon-share { - @include icon-color('share', 'actions', $color-black, 1, true); - &.icon-white { - @include icon-color('share', 'actions', $color-white, 1, true); - } -} -.icon-shared-white, -.icon-share-white { - @include icon-color('share', 'actions', $color-white, 1, true); -} - -@include icon-black-white('sound', 'actions', 1, true); -@include icon-black-white('sound-off', 'actions', 1, true); - -.icon-favorite { - @include icon-color('star-dark', 'actions', $color-black, 1, true); -} - -@include icon-black-white('star', 'actions', 1, true); - -.icon-star-dark { - @include icon-color('star', 'actions', $color-black, 1, true); -} - -.icon-starred { - &:hover, - &:focus { - @include icon-color('star', 'actions', $color-black, 1, true); - } - @include icon-color('star-dark', 'actions', $color-yellow, 1, true); -} - -.icon-star { - &:hover, - &:focus { - @include icon-color('star-dark', 'actions', $color-yellow, 1, true); - } -} - -@include icon-black-white('tag', 'actions', 2, true); -@include icon-black-white('timezone', 'actions', 1, true); -@include icon-black-white('toggle', 'actions', 1, true); -@include icon-black-white('toggle-background', 'actions', 1, true); -@include icon-black-white('toggle-pictures', 'actions', 1, true); -@include icon-black-white('toggle-filelist', 'actions', 1, true); -@include icon-black-white('triangle-e', 'actions', 1, true); -@include icon-black-white('triangle-n', 'actions', 1, true); -@include icon-black-white('triangle-s', 'actions', 1, true); -@include icon-black-white('upload', 'actions', 1, true); -@include icon-black-white('user', 'actions', 1, true); -@include icon-black-white('group', 'actions', 1, true); -@include icon-black-white('filter', 'actions', 1, true); - -@include icon-black-white('video', 'actions', 2, true); .icon-video-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('video-off', 'actions', 1, true); .icon-video-off-white { filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } -@include icon-black-white('video-switch', 'actions', 1, true); - -/* SHADOW WHITE ICONS: white version only ----------------------------------- */ -.icon-view-close, -.icon-view-close-white { - @include icon-color('view-close', 'actions', $color-white, 1, true); -} -.icon-view-download, -.icon-view-download-white { - @include icon-color('view-download', 'actions', $color-white, 1, true); -} -.icon-view-pause, -.icon-view-pause-white { - @include icon-color('view-pause', 'actions', $color-white, 1, true); -} -.icon-view-play, -.icon-view-play-white { - @include icon-color('view-play', 'actions', $color-white, 1, true); -} -.icon-view-next { - @include icon-color('arrow-right', 'actions', $color-black, 1, true); - &.icon-white { - @include icon-color('arrow-right', 'actions', $color-white, 1, true); - } -} - - -.icon-view-previous { - @include icon-color('arrow-left', 'actions', $color-black, 1, true); - &.icon-white { - @include icon-color('arrow-left', 'actions', $color-white, 1, true); - } -} - - -@include icon-black-white('disabled-user', 'actions', 1, true); -@include icon-black-white('disabled-users', 'actions', 1, true); -@include icon-black-white('user-admin', 'actions', 1, true); - -@include icon-black-white('alert-outline', 'actions', 1, true); - -/* PLACES ------------------------------------------------------------------- */ -.icon-calendar { - @include icon-color('calendar', 'places', $color-white, 1, true); -} - -.icon-calendar-dark { - @include icon-color('calendar', 'places', $color-black, 1, true); -} - -.icon-contacts { - @include icon-color('contacts', 'places', $color-white, 1, true); -} - -.icon-contacts-dark { - @include icon-color('contacts', 'places', $color-black, 1, true); -} - -.icon-files { - @include icon-color('files', 'places', $color-white, 1, true); -} - -.icon-files-dark { - @include icon-color('files', 'places', $color-black, 1, true); -} - -.icon-file, -.icon-filetype-text { - @include icon-color('text', 'filetypes', #969696, 1, true); -} - -.icon-filetype-file { - @include icon-color('file', 'filetypes', #969696, 1, true); -} - -@include icon-black-white('folder', 'filetypes', 1, true); -.icon-filetype-folder { - @include icon-color('folder', 'filetypes', $color-primary, 1, true); -} - -.icon-filetype-folder-drag-accept { - @include icon-color('folder-drag-accept', 'filetypes', $color-primary, 1, true); -} - - -@include icon-black-white('home', 'places', 1, true); -@include icon-black-white('link', 'places', 1, true); -@include icon-black-white('music', 'places', 1, true); -@include icon-black-white('picture', 'places', 1, true); - - -/* CLIENTS ------------------------------------------------------------------- */ - -@include icon-black-white('desktop', 'clients', 1, true); -@include icon-black-white('phone', 'clients', 1, true); -@include icon-black-white('tablet', 'clients', 1, true); - -/* APP CATEGORIES ------------------------------------------------------------------- */ -.icon-category-installed { - @include icon-color('user', 'actions', $color-black, 1, true); -} - -.icon-category-enabled { - @include icon-color('checkmark', 'actions', $color-black, 1, true); -} - -.icon-category-disabled { - @include icon-color('close', 'actions', $color-black, 1, true); -} - -.icon-category-app-bundles { - @include icon-color('bundles', 'categories', $color-black, 1, true); -} - -.icon-category-updates { - @include icon-color('download', 'actions', $color-black, 1, true); -} - -.icon-category-files { - @include icon-color('files', 'categories', $color-black, 1, true); -} - -.icon-category-social { - @include icon-color('social', 'categories', $color-black, 1, true); -} - -.icon-category-office { - @include icon-color('office', 'categories', $color-black, 1, true); -} - -.icon-category-auth { - @include icon-color('auth', 'categories', $color-black, 1, true); -} - -.icon-category-monitoring { - @include icon-color('monitoring', 'categories', $color-black, 1, true); -} - -.icon-category-multimedia { - @include icon-color('multimedia', 'categories', $color-black, 1, true); -} - -.icon-category-organization { - @include icon-color('organization', 'categories', $color-black, 1, true); -} - -.icon-category-customization { - @include icon-color('customization', 'categories', $color-black, 1, true); -} - -.icon-category-integration { - @include icon-color('integration', 'categories', $color-black, 1, true); -} - -.icon-category-tools { - @include icon-color('settings-dark', 'actions', $color-black, 1, true); -} - -.icon-category-games { - @include icon-color('games', 'categories', $color-black, 1, true); -} - -.icon-category-security { - @include icon-color('password', 'actions', $color-black, 1, true); -} - -.icon-category-search { - @include icon-color('search', 'actions', $color-black, 1, true); -} - -.icon-category-workflow { - @include icon-color('workflow', 'categories', $color-black, 1, true); -} - -.icon-category-dashboard { - @include icon-color('dashboard', 'categories', $color-black, 1, true); -} - -.icon-talk { - @include icon-color('app-dark', 'spreed', $color-black, 1); -} +/* ICONS ------------------------------------------------------------------- + * These icon classes are generated automatically with the following pattern + * .icon-close (black icon) + * .icon-close-white (white icon) + * .icon-close.icon-white (white icon) + * + * Some class definitions are kept as before, since they don't follow the pattern + * or have some additional styling like drop shadows + */ -.nav-icon-systemtagsfilter { - @include icon-color('tag', 'actions', $color-black, 1, true); -} +@import url('../../dist/icons.css'); diff --git a/core/css/styles.scss b/core/css/styles.scss index f0c33a2037d..bd7e747169b 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -975,6 +975,8 @@ span.ui-icon { background-size: 20px 20px; padding: 14px; cursor: pointer; + // Force white + background-image: var(--original-icon-contacts-white); filter: var(--primary-invert-if-bright); &:hover, |