commit 394f86ca875226cc065826c3ab3156504ca036d8
Author: Marius BĂLTEANU <marius.balteanu@zitec.com>
Date:   Sun Jul 14 18:05:45 2024 +0300

    Replace png icons with svg icons using mask attribute.

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 721aa6288..2e134d36f 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -4,6 +4,88 @@
  * This code is released under the GNU General Public License.
  */
 
+ :root {
+  --icon-add: url(/icons/add.svg);
+  --icon-edit: url(/icons/edit.svg);
+  --icon-copy: url(/icons/copy.svg);
+  --icon-duplicate: url(/icons/duplicate.svg);
+  --icon-delete: url(/icons/del.svg);
+  --icon-move: url(/icons/move.svg);
+  --icon-save: url(/icons/save.svg);
+  --icon-download: url(/icons/download.svg);
+  --icon-cancel: url(/icons/cancel.svg);
+  --icon-multiple: url(/icons/table-multiple.svg);
+  --icon-folder: url(/icons/folder.svg);
+  --icon-folder-open: url(/icons/folder-open.svg);
+  --icon-package: url(/icons/package.svg);
+  --icon-user: url(/icons/user.svg);
+  --icon-project: url(/icons/projects.svg);
+  --icon-help: url(/icons/help.svg);
+  --icon-attachment: url(/icons/attachment.svg);
+  --icon-history: url(/icons/history.svg);
+  --icon-time-entry: url(/icons/time.svg);
+  --icon-time-add: url(/icons/time-add.svg);
+  --icon-stats: url(/icons/stats.svg);
+  --icon-warning: url(/icons/warning.svg);
+  --icon-error: url(/icons/exclamation.svg);
+  --icon-fav: url(/icons/fav.svg);
+  --icon-fav-off: url(/icons/fav-off.svg);
+  --icon-reload: url(/icons/reload.svg);
+  --icon-lock: url(/icons/locked.svg);
+  --icon-unlock: url(/icons/unlock.svg);
+  --icon-checked: url(/icons/checked.svg);
+  --icon-report: url(/icons/report.svg);
+  --icon-comment: url(/icons/comment.svg);
+  --icon-summary: url(/icons/lightning.svg);
+  --icon-server-authentication: url(/icons/server-key.svg);
+  --icon-issue: url(/icons/issue.svg);
+  --icon-zoom-in: url(/icons/zoom-in.svg);
+  --icon-zoom-out: url(/icons/zoom-out.svg);
+  --icon-magnifier: url(/icons/magnifier.svg);
+  --icon-passwd: url(/icons/textfield-key.svg);
+  --icon-arrow-right: url(/icons/bullet-go.svg);
+  --icon-email: url(/icons/email.svg);
+  --icon-email-disabled: url(/icons/email-disabled.svg);
+  --icon-email-add: url(/icons/email-add.svg);
+  --icon-ok: url(/icons/true.svg);
+  --icon-not-ok: url(/icons/false.svg);
+  --icon-link-break: url(/icons/link-break.svg);
+  --icon-list: url(/icons/text-list-bullets.svg);
+  --icon-close: url(/icons/close.svg);
+  --icon-close-hover: url(/icons/close-hl.svg);
+  --icon-settings: url(/icons/settings.svg);
+  --icon-group: url(/icons/group.svg);
+  --icon-roles: url(/icons/database-key.svg);
+  --icon-issue-edit: url(/icons/issue-edit.svg);
+  --icon-workflows: url(/icons/workflows.svg);
+  --icon-custom-fields: url(/icons/textfield.svg);
+  --icon-plugins: url(/icons/plugin.svg);
+  --icon-news: url(/icons/news.svg);
+  --icon-issue-closed: url(/icons/issue-closed.svg);
+  --icon-issue-note: url(/icons/issue-note.svg);
+  --icon-changeset: url(/icons/changeset.svg);
+  --icon-message: url(/icons/message.svg);
+  --icon-reply: url(/icons/comments.svg);
+  --icon-wiki-page: url(/icons/wiki-edit.svg);
+  --icon-document: url(/icons/document.svg);
+  --icon-add-bullet: url(/icons/bullet-add.svg);
+  --icon-shared: url(/icons/link.svg);
+  --icon-actions: url(/icons/3-bullets.svg);
+  --icon-sort-handle: url(/icons/reorder.svg);
+  --icon-expanded: url(/icons/arrow-down.svg);
+  --icon-collapsed: url(/icons/arrow-right.svg);
+  --icon-bookmark: url(/icons/tag-blue-delete.svg);
+  --icon-bookmark-off: url(/icons/tag-blue-add.svg);
+  --icon-bookmarked-project: url(/icons/tag-blue.svg);
+  --icon-sorted-asc: url(/icons/arrow-down.svg);
+  --icon-sorted-desc: url(/icons/arrow-up.svg);
+  --icon-toggle-plus: url(/icons/bullet-toggle-plus.svg);
+  --icon-toggle-minus: url(/icons/bullet-toggle-minus.svg);
+  --icon-clear-query: url(/icons/close-hl.svg);
+  --icon-import: url(/icons/import.svg);
+  --icon-copy-link: url(/icons/copy-link.svg);
+}
+
 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; }
@@ -238,8 +320,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;}
@@ -609,7 +690,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; }
 
@@ -1621,7 +1702,7 @@ td.gantt_selected_column .gantt_hdr,.gantt_selected_column_container {
 }
 
 /***** Icons *****/
-.icon {
+.icon, .icon-only {
   display: inline-flex;
 
   &::before {
@@ -1636,101 +1717,95 @@ td.gantt_selected_column .gantt_hdr,.gantt_selected_column_container {
 }
 
 .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::before { mask-image: url(/icons/icon-add.svg); }
-.icon-edit::before { mask-image: url(/icons/icon-edit.svg); }
-.icon-copy::before { mask-image: url(/icons/icon-copy.svg); }
-.icon-duplicate::before { mask-image: url(/icons/icon-duplicate.svg); }
-.icon-del::before { mask-image: url(/icons/icon-del.svg); }
-.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::before { mask-image: url(/icons/icon-fav.svg);  }
-.icon-fav-off::before { mask-image: url(/icons/icon-fav-off.svg); }
-.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-add::before { mask-image: var(--icon-add); }
+.icon-edit::before { mask-image: var(--icon-edit); }
+.icon-copy::before { mask-image: var(--icon-copy); }
+.icon-duplicate::before { mask-image: var(--icon-duplicate); }
+.icon-del::before { mask-image: var(--icon-delete); }
+.icon-move::before { mask-image: var(--icon-move); }
+.icon-save::before { mask-image: var(--icon-save); }
+.icon-download::before { mask-image: var(--icon-download); }
+.icon-cancel::before { mask-image: var(--icon-cancel); }
+.icon-multiple::before { mask-image: var(--icon-multiple); }
+.icon-folder::before { mask-image: var(--icon-folder); }
+.open .icon-folder::before { mask-image: var(--icon-folder-open); }
+.icon-package::before { mask-image: var(--icon-package); }
+.icon-user::before { mask-image: var(--icon-user); }
+.icon-project::before, .icon-projects::before { mask-image: var(--icon-project); }
+.icon-help::before { mask-image: var(--icon-help); }
+.icon-attachment::before { mask-image: var(--icon-attachment); }
+.icon-history::before { mask-image: var(--icon-history); }
+.icon-time-entry::before, .icon-time::before { mask-image: var(--icon-time-entry); }
+.icon-time-add::before { mask-image: var(--icon-time-add); }
+.icon-stats::before { mask-image: var(--icon-stats); }
+.icon-warning::before { mask-image: var(--icon-warning); }
+.icon-error::before { mask-image: var(--icon-error); }
+.icon-fav::before { mask-image: var(--icon-fav); }
+.icon-fav-off::before { mask-image: var(--icon-fav-off); }
+.icon-reload::before { mask-image: var(--icon-reload); }
+.icon-lock::before, .icon-locked::before { mask-image: var(--icon-lock); }
+.icon-unlock::before { mask-image: var(--icon-unlock); }
+.icon-checked::before { mask-image: var(--icon-checked); }
+.icon-report::before { mask-image: var(--icon-report); }
+.icon-comment::before, .icon-comments::before { mask-image: var(--icon-comment); }
+.icon-summary::before { mask-image: var(--icon-summary); }
+.icon-server-authentication::before { mask-image: var(--icon-server-authentication); }
+.icon-issue::before { mask-image: var(--icon-issue); }
+.icon-zoom-in::before { mask-image: var(--icon-zoom-in); }
+.icon-zoom-out::before { mask-image: var(--icon-zoom-out); }
+.icon-magnifier::before { mask-image: var(--icon-magnifier); }
+.icon-passwd::before { mask-image: var(--icon-passwd); }
+.icon-arrow-righ::before, .icon-test::before, .icon-sticky::before { mask-image: var(--icon-arrow-right); }
+.icon-email::before { mask-image: var(--icon-email); }
+.icon-email-disabled::before { mask-image: var(--icon-email-disabled); }
+.icon-email-add::before { mask-image: var(--icon-email-add); }
+.icon-ok::before { mask-image: var(--icon-ok); }
+.icon-not-ok::before { mask-image: var(--icon-not-ok); }
+.icon-link-break::before { mask-image: var(--icon-link-break); }
+.icon-list::before { mask-image: var(--icon-list); }
+.icon-close::before { mask-image: var(--icon-close); }
+.icon-close:hover::before { mask-image: var(--icon-close-hover); }
+.icon-settings::before { mask-image: var(--icon-settings); }
+.icon-group::before, .icon-groupnonmember::before, .icon-groupanonymous::before { mask-image: var(--icon-group); }
+.icon-roles::before { mask-image: var(--icon-roles); }
+.icon-issue-edit::before { mask-image: var(--icon-issue-edit); }
+.icon-workflows::before { mask-image: var(--icon-workflows); }
+.icon-custom-fields::before { mask-image: var(--icon-custom-fields); }
+.icon-plugins::before { mask-image: var(--icon-plugins); }
+.icon-news::before { mask-image: var(--icon-news); }
+.icon-issue-closed::before { mask-image: var(--icon-issue-closed); }
+.icon-issue-note::before { mask-image: var(--icon-issue-note); }
+.icon-changeset::before { mask-image: var(--icon-changeset); }
+.icon-message::before { mask-image: var(--icon-message); }
+.icon-reply::before { mask-image: var(--icon-reply); }
+.icon-wiki-page::before { mask-image: var(--icon-wiki-page); }
+.icon-document::before { mask-image: var(--icon-document); }
+.icon-project::before { mask-image: var(--icon-project); }
+.icon-add-bullet::before { mask-image: var(--icon-add-bullet); }
+.icon-shared::before { mask-image: var(--icon-shared); }
+.icon-actions::before { mask-image: var(--icon-actions); }
+.icon-sort-handle::before { mask-image: var(--icon-sort-handle); }
+.icon-expanded::before { mask-image: var(--icon-expanded); }
+.icon-collapsed::before { mask-image: var(--icon-collapsed); }
+.icon-bookmark::before { mask-image: var(--icon-bookmark); }
+.icon-bookmark-off::before { mask-image: var(--icon-bookmark-off); }
+.icon-bookmarked-project::before { mask-image: var(--icon-bookmarked-project); }
+.icon-sorted-asc::before { mask-image: var(--icon-sorted-asc); }
+.icon-sorted-desc::before { mask-image: var(--icon-sorted-desc); }
+.icon-toggle-plus::before { mask-image: var(--icon-toggle-plus); }
+.icon-toggle-minus::before { mask-image: var(--icon-toggle-minus); }
+.icon-clear-query::before { mask-image: var(--icon-clear-query); }
+.icon-import::before { mask-image: var(--icon-import); }
+.icon-copy-link::before { mask-image: var(--icon-copy-link); }
 
 .icon-file { background-image: url(/files/default.png); }
 .icon-file.text-plain { background-image: url(/files/text.png); }
@@ -1750,7 +1825,6 @@ td.gantt_selected_column .gantt_hdr,.gantt_selected_column_container {
 .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); }
 
 .sort-handle.ajax-loading { background-image: url(/loading.gif); }
 tr.ui-sortable-helper { border:1px solid #e4e4e4; }