Fixes #24450 by making the icon grey only on hover and white otherwise.

RafaOP · RafaOP · commit 8c5717fd09a0 · 2021-01-07T22:17:02.000-03:00
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
@@ -184,7 +184,9 @@ select {
 		border-color: var(--color-primary) !important;
 	}
 
-	&.icon-file {
+	&.icon-file,
+	&.icon-file-white
+	{
 		padding-left: 48px;
 		background-position: 24px;
 	}
diff --git a/apps/settings/templates/settings/personal/development.notice.php b/apps/settings/templates/settings/personal/development.notice.php
@@ -1,6 +1,6 @@
 <div class="section development-notice">
 	<p>
-		<a href="<?php p($_['reasons-use-nextcloud-pdf-link']); ?>" id="open-reasons-use-nextcloud-pdf" class="link-button icon-file" target="_blank"><?php p($l->t('Reasons to use Nextcloud in your organization'));?></a>
+		<a href="<?php p($_['reasons-use-nextcloud-pdf-link']); ?>" id="open-reasons-use-nextcloud-pdf" class="link-button icon-file-white" target="_blank"><?php p($l->t('Reasons to use Nextcloud in your organization'));?></a>
 	</p>
 	<p>
 		<?php print_unescaped(str_replace(
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
@@ -92,10 +92,14 @@ $invert: luma($color-primary) > 0.6;
 }
 
 /* Colorized svg images */
-.icon-file, .icon-filetype-text {
+.icon-file, .icon-filetype-text, .icon-file-white:hover {
 	background-image: url(./img/core/filetypes/text.svg?v=#{$theming-cachebuster});
 }
 
+.icon-file-white, .icon-filetype-text-white {
+	background-image: url(./img/core/filetypes/text-white.svg?v=#{$theming-cachebuster});
+}
+
 .icon-folder, .icon-filetype-folder {
 	background-image: url(./img/core/filetypes/folder.svg?v=#{$theming-cachebuster});
 }
diff --git a/core/css/icons.scss b/core/css/icons.scss
@@ -384,6 +384,8 @@ audio, canvas, embed, iframe, img, input, object, video {
 }
 
 .icon-file,
+.icon-file-white,
+.icon-filetype-text,
 .icon-filetype-text {
 	@include icon-color('text', 'filetypes', #969696, 1, true);
 }
diff --git a/core/img/filetypes/text-white.svg b/core/img/filetypes/text-white.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Karbon, part of Calligra: http://www.calligra.org/karbon -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.8pt" height="12.8pt">
+<defs/>
+<g id="layer0">
+  <path id="shape0" transform="translate(2, 1)" fill="#ffffff" d="M0.5 0C0.22 0 0 0.22 0 0.5L0 13.5C0 13.78 0.22 14 0.5 14L11.5 14C11.78 14 12 13.78 12 13.5L12 3L9 0ZM2 2L8 2L8 3L2 3ZM2 5L7 5L7 6L2 6ZM2 8L10 8L10 9L2 9ZM2 11L6 11L6 12L2 12Z"/>
+ </g>
+</svg>

Original file line number	Diff line number	Diff line change
`@@ -184,7 +184,9 @@ select {`
`184`	`184`	`border-color: var(--color-primary) !important;`
`185`	`185`	`}`
`186`	`186`
`187`		`- &.icon-file {`
	`187`	`+ &.icon-file,`
	`188`	`+ &.icon-file-white`
	`189`	`+ {`
`188`	`190`	`padding-left: 48px;`
`189`	`191`	`background-position: 24px;`
`190`	`192`	`}`
Original file line number	Diff line number	Diff line change
`@@ -92,10 +92,14 @@ $invert: luma($color-primary) > 0.6;`
`92`	`92`	`}`
`93`	`93`
`94`	`94`	`/* Colorized svg images */`
`95`		`-.icon-file, .icon-filetype-text {`
	`95`	`+.icon-file, .icon-filetype-text, .icon-file-white:hover {`
`96`	`96`	`background-image: url(./img/core/filetypes/text.svg?v=#{$theming-cachebuster});`
`97`	`97`	`}`
`98`	`98`
	`99`	`+.icon-file-white, .icon-filetype-text-white {`
	`100`	`+ background-image: url(./img/core/filetypes/text-white.svg?v=#{$theming-cachebuster});`
	`101`	`+}`
	`102`	`+`
`99`	`103`	`.icon-folder, .icon-filetype-folder {`
`100`	`104`	`background-image: url(./img/core/filetypes/folder.svg?v=#{$theming-cachebuster});`
`101`	`105`	`}`
Original file line number	Diff line number	Diff line change
`@@ -384,6 +384,8 @@ audio, canvas, embed, iframe, img, input, object, video {`
`384`	`384`	`}`
`385`	`385`
`386`	`386`	`.icon-file,`
	`387`	`+.icon-file-white,`
	`388`	`+.icon-filetype-text,`
`387`	`389`	`.icon-filetype-text {`
`388`	`390`	`@include icon-color('text', 'filetypes', #969696, 1, true);`
`389`	`391`	`}`