From c911122cea687083dbec84acada79abbd77d4913 Mon Sep 17 00:00:00 2001
From: Takashi Kato <tohosaku@users.osdn.me>
Date: Wed, 24 Jul 2024 13:55:55 +0000
Subject: [PATCH 2/4] Change Replace png icons with svg icons using mask
 attribute.

---
 app/assets/stylesheets/application.css | 231 ++++++++++++-------------
 app/assets/stylesheets/responsive.css  |   3 -
 2 files changed, 114 insertions(+), 120 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 8ab85f269..b41ce2481 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -4,6 +4,9 @@
  * This code is released under the GNU General Public License.
  */
 
+:root {
+  --color-icon: #169;
+}
 html, body { min-height: 100vh; }
 html {overflow-y:scroll;}
 body { font-family: Verdana, sans-serif; font-size: 12px; color:#333; margin: 0; padding: 0; min-width: 900px; }
@@ -11,7 +14,7 @@ body { font-family: Verdana, sans-serif; font-size: 12px; color:#333; margin: 0;
 h1, h2, h3, h4, h5, h6 {font-family: "Trebuchet MS", Verdana, sans-serif;padding: 2px 10px 1px 0px;margin: 0 0 10px 0;}
 #content h1, h2, h3, h4, h5, h6 {color: #555;}
 h2 {font-size: 20px;}
-h3 {font-size: 16px;}
+h3 {font-size: 16px;--icon-size:16px}
 h4 {font-size: 13px; border-bottom: 1px solid #ccc; font-weight:normal;}
 pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 .wiki h1 {font-size: 2em;}
@@ -238,8 +241,7 @@ div + .drdn-items {border-top:1px solid #ccc;}
 
 .contextual .drdn-content {top:18px;}
 .contextual .drdn-items {padding:2px; min-width: 160px;}
-.contextual .drdn-items>a {padding: 5px 8px;}
-.contextual .drdn-items>a.icon {padding-left: 24px; background-position-x: 4px;}
+.contextual .drdn-items>a.icon {display: flex}
 .contextual .drdn-items>a:hover {color:#2A5685; border:1px solid #628db6; background-color:#eef5fd; border-radius:3px;}
 
 #project-jump.drdn {width:200px;display:inline-block;}
@@ -499,7 +501,7 @@ div.square {
   width: .6em; height: .6em;
 }
 .contextual {float:right; white-space: nowrap; line-height:1.4em;margin:5px 0px; padding-left: 10px; font-size:0.9em;}
-.contextual .icon {padding-top: 2px; padding-bottom: 3px;}
+.contextual .icon,.contextual .icon-only {vertical-align: middle}
 .contextual input, .contextual select {font-size:0.9em;}
 .message .contextual { margin-top: 0; }
 
@@ -610,7 +612,7 @@ body.controller-issues h2.inline-flex {padding-right: 0}
 #issue-form .assign-to-me-link { padding-left: 5px; }
 
 fieldset.collapsible {border-width: 1px 0 0 0;}
-fieldset.collapsible>legend { cursor:pointer; padding-left: 18px; background-position: 4px;}
+fieldset.collapsible>legend { cursor:pointer; padding-left: 4px; }
 
 fieldset#date-range p { margin: 2px 0 2px 0; }
 
@@ -640,7 +642,7 @@ fieldset#date-range p { margin: 2px 0 2px 0; }
 #issue_is_private_wrap {float:right; margin-right:1em;}
 .toggle-multiselect { margin-right:5px; cursor:pointer;}
 .buttons { font-size: 0.9em; margin-bottom: 1.4em; margin-top: 1em; }
-.buttons .icon {padding-bottom:3px; padding-top:1px;}
+.buttons .icon {padding-bottom:3px; padding-top:1px;vertical-align: middle}
 
 div#issue-changesets {float:right; width:45%; margin-left: 1em; margin-bottom: 1em; background: #fff; padding-left: 1em; font-size: 90%;}
 div#issue-changesets div.changeset {border-bottom: 1px solid #ddd; padding: 4px;}
@@ -1622,127 +1624,122 @@ td.gantt_selected_column .gantt_hdr,.gantt_selected_column_container {
 }
 
 /***** Icons *****/
+.icon::before,.icon-only::before {
+  content: "";
+  display: flex;
+  height: var(--icon-size, 14px);
+  width: var(--icon-size, 14px);
+  background-color: var(--color-icon);
+  margin-right: 3px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-image: var(--icon-image);
+  mask-repeat: no-repeat;
+  mask-image: var(--icon-image);
+  mask-position: bottom;
+}
 .icon {
-  background-position: 0% 50%;
-  background-repeat: no-repeat;
-  padding-left: 20px;
+  display: inline-flex;
 }
 .icon-only {
-  background-position: 0% 50%;
-  background-repeat: no-repeat;
-  padding-left: 16px;
   display: inline-block;
-  width: 0;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   overflow: hidden;
-  padding-top: 0;
-  padding-bottom: 0;
-  font-size: 8px;
-  vertical-align: middle;
 }
 .icon-only::after {
   content: "\a0";
 }
 
-.icon-add { background-image: url(/add.png); }
-.icon-edit { background-image: url(/edit.png); }
-.icon-copy { background-image: url(/copy.png); }
-.icon-duplicate { background-image: url(/duplicate.png); }
-.icon-del { background-image: url(/delete.png); }
-.icon-move { background-image: url(/move.png); }
-.icon-save { background-image: url(/save.png); }
-.icon-download { background-image: url(/download.png); }
-.icon-cancel { background-image: url(/cancel.png); }
-.icon-multiple { background-image: url(/table_multiple.png); }
-.icon-folder { background-image: url(/folder.png); }
-.open .icon-folder { background-image: url(/folder_open.png); }
-.icon-package { background-image: url(/package.png); }
-.icon-user { background-image: url(/user.png); }
-.icon-project, .icon-projects { background-image: url(/projects.png); }
-.icon-help { background-image: url(/help.png); }
-.icon-attachment  { background-image: url(/attachment.png); }
-.icon-history  { background-image: url(/history.png); }
-.icon-time-entry, .icon-time  { background-image: url(/time.png); }
-.icon-time-add  { background-image: url(/time_add.png); }
-.icon-stats  { background-image: url(/stats.png); }
-.icon-warning  { background-image: url(/warning.png); }
-.icon-error { background-image: url(/exclamation.png); }
-.icon-fav  { background-image: url(/fav.png); }
-.icon-fav-off  { background-image: url(/fav_off.png); }
-.icon-reload  { background-image: url(/reload.png); }
-.icon-lock, .icon-locked  { background-image: url(/locked.png); }
-.icon-unlock  { background-image: url(/unlock.png); }
-.icon-checked  { background-image: url(/toggle_check.png); }
-.icon-report  { background-image: url(/report.png); }
-.icon-comment, .icon-comments  { background-image: url(/comment.png); }
-.icon-summary  { background-image: url(/lightning.png); }
-.icon-server-authentication { background-image: url(/server_key.png); }
-.icon-issue { background-image: url(/ticket.png); }
-.icon-zoom-in { background-image: url(/zoom_in.png); }
-.icon-zoom-out { background-image: url(/zoom_out.png); }
-.icon-magnifier { background-image: url(/magnifier.png); }
-.icon-passwd { background-image: url(/textfield_key.png); }
-.icon-arrow-right, .icon-test, .icon-sticky { background-image: url(/bullet_go.png); }
-.icon-email { background-image: url(/email.png); }
-.icon-email-disabled { background-image: url(/email_disabled.png); }
-.icon-email-add { background-image: url(/email_add.png); }
-.icon-ok { background-image: url(/true.png); }
-.icon-not-ok { background-image: url(/false.png); }
-.icon-link-break { background-image: url(/link_break.png); }
-.icon-list { background-image: url(/text_list_bullets.png); }
-.icon-close { background-image: url(/close.png); }
-.icon-close:hover { background-image: url(/close_hl.png); }
-.icon-settings { background-image: url(/changeset.png); }
-.icon-group, .icon-groupnonmember, .icon-groupanonymous { background-image: url(/group.png); }
-.icon-roles { background-image: url(/database_key.png); }
-.icon-issue-edit { background-image: url(/ticket_edit.png); }
-.icon-workflows { background-image: url(/ticket_go.png); }
-.icon-custom-fields { background-image: url(/textfield.png); }
-.icon-plugins { background-image: url(/plugin.png); }
-.icon-news { background-image: url(/news.png); }
-.icon-issue-closed { background-image: url(/ticket_checked.png); }
-.icon-issue-note { background-image: url(/ticket_note.png); }
-.icon-changeset { background-image: url(/changeset.png); }
-.icon-message { background-image: url(/message.png); }
-.icon-reply { background-image: url(/comments.png); }
-.icon-wiki-page { background-image: url(/wiki_edit.png); }
-.icon-document { background-image: url(/document.png); }
-.icon-project { background-image: url(/projects.png); }
-.icon-add-bullet { background-image: url(/bullet_add.png); }
-.icon-shared { background-image: url(/link.png); }
-.icon-actions { background-image: url(/3_bullets.png); }
-.icon-sort-handle { background-image: url(/reorder.png); }
-.icon-expanded { background-image: url(/arrow_down.png); }
-.icon-collapsed { background-image: url(/arrow_right.png); }
-.icon-bookmark { background-image: url(/tag_blue_delete.png); }
-.icon-bookmark-off { background-image: url(/tag_blue_add.png); }
-.icon-bookmarked-project { background-image: url(/tag_blue.png); }
-.icon-sorted-asc { background-image: url(/arrow_down.png); }
-.icon-sorted-desc { background-image: url(/arrow_up.png); }
-.icon-toggle-plus { background-image: url(/bullet_toggle_plus.png) }
-.icon-toggle-minus { background-image: url(/bullet_toggle_minus.png) }
-.icon-clear-query { background-image: url(/close_hl.png); }
-.icon-import { background-image: url(/database_go.png); }
-
-.icon-file { background-image: url(/files/default.png); }
-.icon-file.text-plain { background-image: url(/files/text.png); }
-.icon-file.text-x-c { background-image: url(/files/c.png); }
-.icon-file.text-x-csharp { background-image: url(/files/csharp.png); }
-.icon-file.text-x-java { background-image: url(/files/java.png); }
-.icon-file.application-javascript { background-image: url(/files/js.png); }
-.icon-file.text-x-php { background-image: url(/files/php.png); }
-.icon-file.text-x-ruby { background-image: url(/files/ruby.png); }
-.icon-file.text-xml { background-image: url(/files/xml.png); }
-.icon-file.text-css { background-image: url(/files/css.png); }
-.icon-file.text-html { background-image: url(/files/html.png); }
-.icon-file.image-gif { background-image: url(/files/image.png); }
-.icon-file.image-jpeg { background-image: url(/files/image.png); }
-.icon-file.image-png { background-image: url(/files/image.png); }
-.icon-file.image-tiff { background-image: url(/files/image.png); }
-.icon-file.application-pdf { background-image: url(/files/pdf.png); }
-.icon-file.application-zip { background-image: url(/files/zip.png); }
-.icon-file.application-gzip { background-image: url(/files/zip.png); }
-.icon-copy-link { background-image: url(/copy_link.png); }
+.icon-add::before, .icon-add-bullet::before { --icon-image: url(/icons/add.svg)}
+.icon-edit::before { --icon-image: url(/icons/edit.svg)}
+.icon-copy::before { --icon-image: url(/icons/copy.svg)}
+.icon-duplicate::before { --icon-image: url(/icons/duplicate.svg)}
+.icon-del::before { --icon-image: url(/icons/del.svg)}
+.icon-move::before { --icon-image: url(/icons/move.svg)}
+.icon-save::before { --icon-image: url(/icons/save.svg)}
+.icon-download::before { --icon-image: url(/icons/download.svg)}
+.icon-cancel::before { --icon-image: url(/icons/cancel.svg)}
+.icon-multiple::before { --icon-image: url(/icons/table-multiple.svg)}
+.icon-folder::before { --icon-image: url(/icons/folder.svg)}
+.open .icon-folder { --icon-image: url(/icons/folder-open.svg)}
+.icon-package::before { --icon-image: url(/icons/package.svg)}
+.icon-user::before { --icon-image: url(/icons/user.svg)}
+.icon-projects::before, .icon-project::before { --icon-image: url(/icons/projects.svg)}
+.icon-help::before { --icon-image: url(/icons/help.svg)}
+.icon-attachment::before { --icon-image: url(/icons/attachment.svg)}
+.icon-history::before { --icon-image: url(/icons/history.svg)}
+.icon-time::before, .icon-time-entry::before, .icon-time-add::before { --icon-image: url(/icons/time.svg)}
+.icon-stats::before { --icon-image: url(/icons/stats.svg)}
+.icon-warning::before { --icon-image: url(/icons/warning.svg)}
+.icon-error::before { --icon-image: url(/icons/error.svg)}
+.icon-fav::before { --icon-image: url(/icons/fav.svg)}
+.icon-fav-off::before { --icon-image: url(/icons/fav-off.svg)}
+.icon-reload::before { --icon-image: url(/icons/reload.svg)}
+.icon-lock::before, .icon-locked::before { --icon-image: url(/icons/lock.svg)}
+.icon-unlock::before { --icon-image: url(/icons/unlock.svg)}
+.icon-checked::before { --icon-image: url(/icons/checked.svg)}
+.icon-report::before { --icon-image: url(/icons/report.svg)}
+.icon-comment::before, .icon-comments::before, .icon-message::before, .icon-issue-note::before { --icon-image: url(/icons/comment.svg)}
+.icon-summary::before { --icon-image: url(/icons/summary.svg)}
+.icon-server-authentication::before { --icon-image: url(/icons/server-authentication.svg)}
+.icon-issue::before { --icon-image: url(/icons/issue.svg)}
+.icon-zoom-in::before { --icon-image: url(/icons/zoom-in.svg)}
+.icon-zoom-out::before { --icon-image: url(/icons/zoom-out.svg)}
+.icon-passwd::before { --icon-image: url(/icons/textfield-key.svg)}
+.icon-allow-right::before, .icon-test::before, .icon-sticky::before { --icon-image: url(/icons/arrow-right.svg)}
+.icon-email::before, .icon-email-add::before { --icon-image: url(/icons/email.svg)}
+.icon-email-disabled::before { --icon-image: url(/icons/email-disabled.svg)}
+.icon-ok::before { --icon-image: url(/icons/true.svg)}
+.icon-not-ok::before { --icon-image: url(/icons/false.svg)}
+.icon-link-break::before { --icon-image: url(/icons/link-break.svg)}
+.icon-list::before { --icon-image: url(/icons/text-list-bullets.svg)}
+.icon-close::before { --icon-image: url(/icons/close.svg)}
+.icon-settings::before { --icon-image: url(/icons/settings.svg)}
+.icon-group::before, .icon-groupnonmember::before, .icon-groupanonymous::before { --icon-image: url(/icons/group.svg)}
+.icon-roles::before { --icon-image: url(/icons/roles.svg)}
+.icon-issue-edit::before { --icon-image: url(/icons/issue-edit.svg)}
+.icon-workflows::before { --icon-image: url(/icons/workflows.svg)}
+.icon-custom-fields::before { --icon-image: url(/icons/textfield.svg)}
+.icon-plugins::before { --icon-image: url(/icons/plugin.svg)}
+.icon-news::before { --icon-image: url(/icons/news.svg)}
+.icon-issue-closed::before { --icon-image: url(/icons/issue-closed.svg)}
+.icon-changeset::before { --icon-image: url(/icons/changeset.svg)}
+.icon-reply::before { --icon-image: url(/icons/comments.svg)}
+.icon-wiki-page::before { --icon-image: url(/icons/wiki-edit.svg)}
+.icon-document::before { --icon-image: url(/icons/document.svg)}
+.icon-shared::before { --icon-image: url(/icons/link.svg)}
+.icon-actions::before { --icon-image: url(/icons/3-bullets.svg)}
+.icon-sort-handle::before { --icon-image: url(/icons/reorder.svg)}
+.icon-expanded::before { --icon-image: url(/icons/angle-down.svg)}
+.icon-collapsed::before { --icon-image: url(/icons/angle-right.svg)}
+.icon-bookmark::before, .icon-bookmarked-project::before { --icon-image: url(/icons/tag-blue-delete.svg)}
+.icon-bookmark-off::before { --icon-image: url(/icons/tag-blue-add.svg)}
+.icon-sorted-asc::before { --icon-image: url(/icons/angle-down.svg)}
+.icon-sorted-desc::before { --icon-image: url(/icons/angle-up.svg)}
+.icon-toggle-plus::before { --icon-image: url(/icons/toggle-plus.svg)}
+.icon-toggle-minus::before { --icon-image: url(/icons/toggle-minus.svg)}
+.icon-clear-query::before { --icon-image: url(/icons/clear-query.svg)}
+.icon-import::before { --icon-image: url(/icons/import.svg)}
+.icon-copy-link::before { --icon-image: url(/icons/copy-link.svg)}
+.icon-file::before { --icon-image: url(/icons/file.svg)}
+
+.icon-file.text-plain::before { --icon-image: url(/icons/file/text-plain.svg)}
+.icon-file.text-x-c::before { --icon-image: url(/icons/file/text-x-c.svg)}
+.icon-file.text-x-csharp::before { --icon-image: url(/icons/file/text-x-csharp.svg)}
+.icon-file.text-x-java::before { --icon-image: url(/icons/file/text-x-java.svg)}
+.icon-file.text-x-javascript::before { --icon-image: url(/icons/file/text-x-javascript.svg)}
+.icon-file.text-x-php::before { --icon-image: url(/icons/file/text-x-php.svg)}
+.icon-file.text-x-ruby::before { --icon-image: url(/icons/file/text-x-ruby.svg)}
+.icon-file.text-xml::before { --icon-image: url(/icons/file/text-xml.svg)}
+.icon-file.text-css::before { --icon-image: url(/icons/file/text-css.svg)}
+.icon-file.text-html::before { --icon-image: url(/icons/file/text-html.svg)}
+.icon-file.image-gif::before { --icon-image: url(/icons/file/image-gif.svg)}
+.icon-file.image-jpeg::before { --icon-image: url(/icons/file/image-jpeg.svg)}
+.icon-file.image-png::before { --icon-image: url(/icons/file/image-png.svg)}
+.icon-file.image-tiff::before { --icon-image: url(/icons/file/image-tiff.svg)}
+.icon-file.application-pdf::before { --icon-image: url(/icons/file/application-pdf.svg)}
+.icon-file.application-zip::before { --icon-image: url(/icons/file/application-zip.svg)}
+.icon-file.application-x-gzip::before { --icon-image: url(/icons/file/application-x-gzip.svg)}
 
 .sort-handle.ajax-loading { background-image: url(/loading.gif); }
 tr.ui-sortable-helper { border:1px solid #e4e4e4; }
diff --git a/app/assets/stylesheets/responsive.css b/app/assets/stylesheets/responsive.css
index 78c87ec70..bb1af4e98 100644
--- a/app/assets/stylesheets/responsive.css
+++ b/app/assets/stylesheets/responsive.css
@@ -604,8 +604,6 @@
   p.buttons a {
     font-weight: bold;
 
-    display: inline-block;
-
     margin: 5px 0;
     margin-right: 2px;
     padding: 9px 9px 9px 9px;
@@ -627,7 +625,6 @@
   #content>.contextual a.icon,
   p.buttons a.icon {
     background-position-x: 4px;
-    padding-left: 25px;
   }
 
   .flyout-menu .contextual {
-- 
2.39.2

