Project

General

Profile

Feature #23980 » 0002-Change-Replace-png-icons-with-svg-icons-using-mask-a.patch

Takashi Kato, 2024-07-28 18:35

View differences:

app/assets/stylesheets/application.css
4 4
 * This code is released under the GNU General Public License.
5 5
 */
6 6

  
7
:root {
8
  --color-icon: #169;
9
}
7 10
html, body { min-height: 100vh; }
8 11
html {overflow-y:scroll;}
9 12
body { font-family: Verdana, sans-serif; font-size: 12px; color:#333; margin: 0; padding: 0; min-width: 900px; }
......
11 14
h1, h2, h3, h4, h5, h6 {font-family: "Trebuchet MS", Verdana, sans-serif;padding: 2px 10px 1px 0px;margin: 0 0 10px 0;}
12 15
#content h1, h2, h3, h4, h5, h6 {color: #555;}
13 16
h2 {font-size: 20px;}
14
h3 {font-size: 16px;}
17
h3 {font-size: 16px;--icon-size:16px}
15 18
h4 {font-size: 13px; border-bottom: 1px solid #ccc; font-weight:normal;}
16 19
pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
17 20
.wiki h1 {font-size: 2em;}
......
238 241

  
239 242
.contextual .drdn-content {top:18px;}
240 243
.contextual .drdn-items {padding:2px; min-width: 160px;}
241
.contextual .drdn-items>a {padding: 5px 8px;}
242
.contextual .drdn-items>a.icon {padding-left: 24px; background-position-x: 4px;}
244
.contextual .drdn-items>a.icon {display: flex}
243 245
.contextual .drdn-items>a:hover {color:#2A5685; border:1px solid #628db6; background-color:#eef5fd; border-radius:3px;}
244 246

  
245 247
#project-jump.drdn {width:200px;display:inline-block;}
......
499 501
  width: .6em; height: .6em;
500 502
}
501 503
.contextual {float:right; white-space: nowrap; line-height:1.4em;margin:5px 0px; padding-left: 10px; font-size:0.9em;}
502
.contextual .icon {padding-top: 2px; padding-bottom: 3px;}
504
.contextual .icon,.contextual .icon-only {vertical-align: middle}
503 505
.contextual input, .contextual select {font-size:0.9em;}
504 506
.message .contextual { margin-top: 0; }
505 507

  
......
610 612
#issue-form .assign-to-me-link { padding-left: 5px; }
611 613

  
612 614
fieldset.collapsible {border-width: 1px 0 0 0;}
613
fieldset.collapsible>legend { cursor:pointer; padding-left: 18px; background-position: 4px;}
615
fieldset.collapsible>legend { cursor:pointer; padding-left: 4px; }
614 616

  
615 617
fieldset#date-range p { margin: 2px 0 2px 0; }
616 618

  
......
640 642
#issue_is_private_wrap {float:right; margin-right:1em;}
641 643
.toggle-multiselect { margin-right:5px; cursor:pointer;}
642 644
.buttons { font-size: 0.9em; margin-bottom: 1.4em; margin-top: 1em; }
643
.buttons .icon {padding-bottom:3px; padding-top:1px;}
645
.buttons .icon {padding-bottom:3px; padding-top:1px;vertical-align: middle}
644 646

  
645 647
div#issue-changesets {float:right; width:45%; margin-left: 1em; margin-bottom: 1em; background: #fff; padding-left: 1em; font-size: 90%;}
646 648
div#issue-changesets div.changeset {border-bottom: 1px solid #ddd; padding: 4px;}
......
1622 1624
}
1623 1625

  
1624 1626
/***** Icons *****/
1627
.icon::before,.icon-only::before {
1628
  content: "";
1629
  display: flex;
1630
  height: var(--icon-size, 14px);
1631
  width: var(--icon-size, 14px);
1632
  background-color: var(--color-icon);
1633
  margin-right: 3px;
1634
  -webkit-mask-repeat: no-repeat;
1635
  -webkit-mask-image: var(--icon-image);
1636
  mask-repeat: no-repeat;
1637
  mask-image: var(--icon-image);
1638
  mask-position: bottom;
1639
}
1625 1640
.icon {
1626
  background-position: 0% 50%;
1627
  background-repeat: no-repeat;
1628
  padding-left: 20px;
1641
  display: inline-flex;
1629 1642
}
1630 1643
.icon-only {
1631
  background-position: 0% 50%;
1632
  background-repeat: no-repeat;
1633
  padding-left: 16px;
1634 1644
  display: inline-block;
1635
  width: 0;
1636
  height: 16px;
1645
  width: 14px;
1646
  height: 14px;
1637 1647
  overflow: hidden;
1638
  padding-top: 0;
1639
  padding-bottom: 0;
1640
  font-size: 8px;
1641
  vertical-align: middle;
1642 1648
}
1643 1649
.icon-only::after {
1644 1650
  content: "\a0";
1645 1651
}
1646 1652

  
1647
.icon-add { background-image: url(/add.png); }
1648
.icon-edit { background-image: url(/edit.png); }
1649
.icon-copy { background-image: url(/copy.png); }
1650
.icon-duplicate { background-image: url(/duplicate.png); }
1651
.icon-del { background-image: url(/delete.png); }
1652
.icon-move { background-image: url(/move.png); }
1653
.icon-save { background-image: url(/save.png); }
1654
.icon-download { background-image: url(/download.png); }
1655
.icon-cancel { background-image: url(/cancel.png); }
1656
.icon-multiple { background-image: url(/table_multiple.png); }
1657
.icon-folder { background-image: url(/folder.png); }
1658
.open .icon-folder { background-image: url(/folder_open.png); }
1659
.icon-package { background-image: url(/package.png); }
1660
.icon-user { background-image: url(/user.png); }
1661
.icon-project, .icon-projects { background-image: url(/projects.png); }
1662
.icon-help { background-image: url(/help.png); }
1663
.icon-attachment  { background-image: url(/attachment.png); }
1664
.icon-history  { background-image: url(/history.png); }
1665
.icon-time-entry, .icon-time  { background-image: url(/time.png); }
1666
.icon-time-add  { background-image: url(/time_add.png); }
1667
.icon-stats  { background-image: url(/stats.png); }
1668
.icon-warning  { background-image: url(/warning.png); }
1669
.icon-error { background-image: url(/exclamation.png); }
1670
.icon-fav  { background-image: url(/fav.png); }
1671
.icon-fav-off  { background-image: url(/fav_off.png); }
1672
.icon-reload  { background-image: url(/reload.png); }
1673
.icon-lock, .icon-locked  { background-image: url(/locked.png); }
1674
.icon-unlock  { background-image: url(/unlock.png); }
1675
.icon-checked  { background-image: url(/toggle_check.png); }
1676
.icon-report  { background-image: url(/report.png); }
1677
.icon-comment, .icon-comments  { background-image: url(/comment.png); }
1678
.icon-summary  { background-image: url(/lightning.png); }
1679
.icon-server-authentication { background-image: url(/server_key.png); }
1680
.icon-issue { background-image: url(/ticket.png); }
1681
.icon-zoom-in { background-image: url(/zoom_in.png); }
1682
.icon-zoom-out { background-image: url(/zoom_out.png); }
1683
.icon-magnifier { background-image: url(/magnifier.png); }
1684
.icon-passwd { background-image: url(/textfield_key.png); }
1685
.icon-arrow-right, .icon-test, .icon-sticky { background-image: url(/bullet_go.png); }
1686
.icon-email { background-image: url(/email.png); }
1687
.icon-email-disabled { background-image: url(/email_disabled.png); }
1688
.icon-email-add { background-image: url(/email_add.png); }
1689
.icon-ok { background-image: url(/true.png); }
1690
.icon-not-ok { background-image: url(/false.png); }
1691
.icon-link-break { background-image: url(/link_break.png); }
1692
.icon-list { background-image: url(/text_list_bullets.png); }
1693
.icon-close { background-image: url(/close.png); }
1694
.icon-close:hover { background-image: url(/close_hl.png); }
1695
.icon-settings { background-image: url(/changeset.png); }
1696
.icon-group, .icon-groupnonmember, .icon-groupanonymous { background-image: url(/group.png); }
1697
.icon-roles { background-image: url(/database_key.png); }
1698
.icon-issue-edit { background-image: url(/ticket_edit.png); }
1699
.icon-workflows { background-image: url(/ticket_go.png); }
1700
.icon-custom-fields { background-image: url(/textfield.png); }
1701
.icon-plugins { background-image: url(/plugin.png); }
1702
.icon-news { background-image: url(/news.png); }
1703
.icon-issue-closed { background-image: url(/ticket_checked.png); }
1704
.icon-issue-note { background-image: url(/ticket_note.png); }
1705
.icon-changeset { background-image: url(/changeset.png); }
1706
.icon-message { background-image: url(/message.png); }
1707
.icon-reply { background-image: url(/comments.png); }
1708
.icon-wiki-page { background-image: url(/wiki_edit.png); }
1709
.icon-document { background-image: url(/document.png); }
1710
.icon-project { background-image: url(/projects.png); }
1711
.icon-add-bullet { background-image: url(/bullet_add.png); }
1712
.icon-shared { background-image: url(/link.png); }
1713
.icon-actions { background-image: url(/3_bullets.png); }
1714
.icon-sort-handle { background-image: url(/reorder.png); }
1715
.icon-expanded { background-image: url(/arrow_down.png); }
1716
.icon-collapsed { background-image: url(/arrow_right.png); }
1717
.icon-bookmark { background-image: url(/tag_blue_delete.png); }
1718
.icon-bookmark-off { background-image: url(/tag_blue_add.png); }
1719
.icon-bookmarked-project { background-image: url(/tag_blue.png); }
1720
.icon-sorted-asc { background-image: url(/arrow_down.png); }
1721
.icon-sorted-desc { background-image: url(/arrow_up.png); }
1722
.icon-toggle-plus { background-image: url(/bullet_toggle_plus.png) }
1723
.icon-toggle-minus { background-image: url(/bullet_toggle_minus.png) }
1724
.icon-clear-query { background-image: url(/close_hl.png); }
1725
.icon-import { background-image: url(/database_go.png); }
1726

  
1727
.icon-file { background-image: url(/files/default.png); }
1728
.icon-file.text-plain { background-image: url(/files/text.png); }
1729
.icon-file.text-x-c { background-image: url(/files/c.png); }
1730
.icon-file.text-x-csharp { background-image: url(/files/csharp.png); }
1731
.icon-file.text-x-java { background-image: url(/files/java.png); }
1732
.icon-file.application-javascript { background-image: url(/files/js.png); }
1733
.icon-file.text-x-php { background-image: url(/files/php.png); }
1734
.icon-file.text-x-ruby { background-image: url(/files/ruby.png); }
1735
.icon-file.text-xml { background-image: url(/files/xml.png); }
1736
.icon-file.text-css { background-image: url(/files/css.png); }
1737
.icon-file.text-html { background-image: url(/files/html.png); }
1738
.icon-file.image-gif { background-image: url(/files/image.png); }
1739
.icon-file.image-jpeg { background-image: url(/files/image.png); }
1740
.icon-file.image-png { background-image: url(/files/image.png); }
1741
.icon-file.image-tiff { background-image: url(/files/image.png); }
1742
.icon-file.application-pdf { background-image: url(/files/pdf.png); }
1743
.icon-file.application-zip { background-image: url(/files/zip.png); }
1744
.icon-file.application-gzip { background-image: url(/files/zip.png); }
1745
.icon-copy-link { background-image: url(/copy_link.png); }
1653
.icon-add::before, .icon-add-bullet::before { --icon-image: url(/icons/add.svg)}
1654
.icon-edit::before { --icon-image: url(/icons/edit.svg)}
1655
.icon-copy::before { --icon-image: url(/icons/copy.svg)}
1656
.icon-duplicate::before { --icon-image: url(/icons/duplicate.svg)}
1657
.icon-del::before { --icon-image: url(/icons/del.svg)}
1658
.icon-move::before { --icon-image: url(/icons/move.svg)}
1659
.icon-save::before { --icon-image: url(/icons/save.svg)}
1660
.icon-download::before { --icon-image: url(/icons/download.svg)}
1661
.icon-cancel::before { --icon-image: url(/icons/cancel.svg)}
1662
.icon-multiple::before { --icon-image: url(/icons/table-multiple.svg)}
1663
.icon-folder::before { --icon-image: url(/icons/folder.svg)}
1664
.open .icon-folder { --icon-image: url(/icons/folder-open.svg)}
1665
.icon-package::before { --icon-image: url(/icons/package.svg)}
1666
.icon-user::before { --icon-image: url(/icons/user.svg)}
1667
.icon-projects::before, .icon-project::before { --icon-image: url(/icons/projects.svg)}
1668
.icon-help::before { --icon-image: url(/icons/help.svg)}
1669
.icon-attachment::before { --icon-image: url(/icons/attachment.svg)}
1670
.icon-history::before { --icon-image: url(/icons/history.svg)}
1671
.icon-time::before, .icon-time-entry::before, .icon-time-add::before { --icon-image: url(/icons/time.svg)}
1672
.icon-stats::before { --icon-image: url(/icons/stats.svg)}
1673
.icon-warning::before { --icon-image: url(/icons/warning.svg)}
1674
.icon-error::before { --icon-image: url(/icons/error.svg)}
1675
.icon-fav::before { --icon-image: url(/icons/fav.svg)}
1676
.icon-fav-off::before { --icon-image: url(/icons/fav-off.svg)}
1677
.icon-reload::before { --icon-image: url(/icons/reload.svg)}
1678
.icon-lock::before, .icon-locked::before { --icon-image: url(/icons/lock.svg)}
1679
.icon-unlock::before { --icon-image: url(/icons/unlock.svg)}
1680
.icon-checked::before { --icon-image: url(/icons/checked.svg)}
1681
.icon-report::before { --icon-image: url(/icons/report.svg)}
1682
.icon-comment::before, .icon-comments::before, .icon-message::before, .icon-issue-note::before { --icon-image: url(/icons/comment.svg)}
1683
.icon-summary::before { --icon-image: url(/icons/summary.svg)}
1684
.icon-server-authentication::before { --icon-image: url(/icons/server-authentication.svg)}
1685
.icon-issue::before { --icon-image: url(/icons/issue.svg)}
1686
.icon-zoom-in::before { --icon-image: url(/icons/zoom-in.svg)}
1687
.icon-zoom-out::before { --icon-image: url(/icons/zoom-out.svg)}
1688
.icon-passwd::before { --icon-image: url(/icons/textfield-key.svg)}
1689
.icon-allow-right::before, .icon-test::before, .icon-sticky::before { --icon-image: url(/icons/arrow-right.svg)}
1690
.icon-email::before, .icon-email-add::before { --icon-image: url(/icons/email.svg)}
1691
.icon-email-disabled::before { --icon-image: url(/icons/email-disabled.svg)}
1692
.icon-ok::before { --icon-image: url(/icons/true.svg)}
1693
.icon-not-ok::before { --icon-image: url(/icons/false.svg)}
1694
.icon-link-break::before { --icon-image: url(/icons/link-break.svg)}
1695
.icon-list::before { --icon-image: url(/icons/text-list-bullets.svg)}
1696
.icon-close::before { --icon-image: url(/icons/close.svg)}
1697
.icon-settings::before { --icon-image: url(/icons/settings.svg)}
1698
.icon-group::before, .icon-groupnonmember::before, .icon-groupanonymous::before { --icon-image: url(/icons/group.svg)}
1699
.icon-roles::before { --icon-image: url(/icons/roles.svg)}
1700
.icon-issue-edit::before { --icon-image: url(/icons/issue-edit.svg)}
1701
.icon-workflows::before { --icon-image: url(/icons/workflows.svg)}
1702
.icon-custom-fields::before { --icon-image: url(/icons/textfield.svg)}
1703
.icon-plugins::before { --icon-image: url(/icons/plugin.svg)}
1704
.icon-news::before { --icon-image: url(/icons/news.svg)}
1705
.icon-issue-closed::before { --icon-image: url(/icons/issue-closed.svg)}
1706
.icon-changeset::before { --icon-image: url(/icons/changeset.svg)}
1707
.icon-reply::before { --icon-image: url(/icons/comments.svg)}
1708
.icon-wiki-page::before { --icon-image: url(/icons/wiki-edit.svg)}
1709
.icon-document::before { --icon-image: url(/icons/document.svg)}
1710
.icon-shared::before { --icon-image: url(/icons/link.svg)}
1711
.icon-actions::before { --icon-image: url(/icons/3-bullets.svg)}
1712
.icon-sort-handle::before { --icon-image: url(/icons/reorder.svg)}
1713
.icon-expanded::before { --icon-image: url(/icons/angle-down.svg)}
1714
.icon-collapsed::before { --icon-image: url(/icons/angle-right.svg)}
1715
.icon-bookmark::before, .icon-bookmarked-project::before { --icon-image: url(/icons/tag-blue-delete.svg)}
1716
.icon-bookmark-off::before { --icon-image: url(/icons/tag-blue-add.svg)}
1717
.icon-sorted-asc::before { --icon-image: url(/icons/angle-down.svg)}
1718
.icon-sorted-desc::before { --icon-image: url(/icons/angle-up.svg)}
1719
.icon-toggle-plus::before { --icon-image: url(/icons/toggle-plus.svg)}
1720
.icon-toggle-minus::before { --icon-image: url(/icons/toggle-minus.svg)}
1721
.icon-clear-query::before { --icon-image: url(/icons/clear-query.svg)}
1722
.icon-import::before { --icon-image: url(/icons/import.svg)}
1723
.icon-copy-link::before { --icon-image: url(/icons/copy-link.svg)}
1724
.icon-file::before { --icon-image: url(/icons/file.svg)}
1725

  
1726
.icon-file.text-plain::before { --icon-image: url(/icons/file/text-plain.svg)}
1727
.icon-file.text-x-c::before { --icon-image: url(/icons/file/text-x-c.svg)}
1728
.icon-file.text-x-csharp::before { --icon-image: url(/icons/file/text-x-csharp.svg)}
1729
.icon-file.text-x-java::before { --icon-image: url(/icons/file/text-x-java.svg)}
1730
.icon-file.text-x-javascript::before { --icon-image: url(/icons/file/text-x-javascript.svg)}
1731
.icon-file.text-x-php::before { --icon-image: url(/icons/file/text-x-php.svg)}
1732
.icon-file.text-x-ruby::before { --icon-image: url(/icons/file/text-x-ruby.svg)}
1733
.icon-file.text-xml::before { --icon-image: url(/icons/file/text-xml.svg)}
1734
.icon-file.text-css::before { --icon-image: url(/icons/file/text-css.svg)}
1735
.icon-file.text-html::before { --icon-image: url(/icons/file/text-html.svg)}
1736
.icon-file.image-gif::before { --icon-image: url(/icons/file/image-gif.svg)}
1737
.icon-file.image-jpeg::before { --icon-image: url(/icons/file/image-jpeg.svg)}
1738
.icon-file.image-png::before { --icon-image: url(/icons/file/image-png.svg)}
1739
.icon-file.image-tiff::before { --icon-image: url(/icons/file/image-tiff.svg)}
1740
.icon-file.application-pdf::before { --icon-image: url(/icons/file/application-pdf.svg)}
1741
.icon-file.application-zip::before { --icon-image: url(/icons/file/application-zip.svg)}
1742
.icon-file.application-x-gzip::before { --icon-image: url(/icons/file/application-x-gzip.svg)}
1746 1743

  
1747 1744
.sort-handle.ajax-loading { background-image: url(/loading.gif); }
1748 1745
tr.ui-sortable-helper { border:1px solid #e4e4e4; }
app/assets/stylesheets/responsive.css
604 604
  p.buttons a {
605 605
    font-weight: bold;
606 606

  
607
    display: inline-block;
608

  
609 607
    margin: 5px 0;
610 608
    margin-right: 2px;
611 609
    padding: 9px 9px 9px 9px;
......
627 625
  #content>.contextual a.icon,
628 626
  p.buttons a.icon {
629 627
    background-position-x: 4px;
630
    padding-left: 25px;
631 628
  }
632 629

  
633 630
  .flyout-menu .contextual {
(34-34/54)