1
1
mirror of https://github.com/go-gitea/gitea synced 2025-12-06 21:08:25 +00:00
Files
gitea/web_src/css/modules/svg.css
a1012112796 ee365f5100 fix some file icon ui (#36078)
fix #36071

looks that's because if an svg in hiden env, it's color added by
`fill="url(#a)"` will become not usefull. by ai helping, I think moving
it out of page by position is a good solution. fell free creat a new
pull request if you have a better soluton. Thanks.
<img width="2198" height="1120" alt="image"
src="https://github.com/user-attachments/assets/bbf7c171-0b7f-412a-a1bc-aea3f1629636"
/>

---------

Signed-off-by: a1012112796 <1012112796@qq.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2025-12-04 19:47:23 +01:00

53 lines
1.9 KiB
CSS

/* some material icons have "fill=none" (e.g.: ".txt -> document"), so the CSS styles shouldn't overwrite it,
and material icons should have no "fill" set explicitly, otherwise some like ".editorconfig" won't render correctly */
.svg:not(.git-entry-icon) {
display: inline-block;
vertical-align: text-top;
fill: currentcolor;
}
.middle .svg {
vertical-align: middle;
}
/* some browsers like Chrome have a bug: when a SVG is in a "display: none" container and referenced
somewhere else by `<use href="#id">`, it won't be rendered correctly. e.g.: ".kts -> kotlin" */
.svg-icon-container {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
/* prevent SVGs from shrinking, like in space-starved flexboxes. the sizes
here are cherry-picked for our use cases, feel free to add more. after
https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit is
supported in browsers, use `attr(width px)` instead for a generic
solution. */
.svg[height="12"] { min-height: 12px; }
.svg[height="13"] { min-height: 13px; }
.svg[height="14"] { min-height: 14px; }
.svg[height="15"] { min-height: 15px; }
.svg[height="16"] { min-height: 16px; }
.svg[height="18"] { min-height: 18px; }
.svg[height="20"] { min-height: 20px; }
.svg[height="22"] { min-height: 22px; }
.svg[height="24"] { min-height: 24px; }
.svg[height="36"] { min-height: 36px; }
.svg[height="48"] { min-height: 48px; }
.svg[height="56"] { min-height: 56px; }
.svg[width="12"] { min-width: 12px; }
.svg[width="13"] { min-width: 13px; }
.svg[width="14"] { min-width: 14px; }
.svg[width="15"] { min-width: 15px; }
.svg[width="16"] { min-width: 16px; }
.svg[width="18"] { min-width: 18px; }
.svg[width="20"] { min-width: 20px; }
.svg[width="22"] { min-width: 22px; }
.svg[width="24"] { min-width: 24px; }
.svg[width="36"] { min-width: 36px; }
.svg[width="48"] { min-width: 48px; }
.svg[width="56"] { min-width: 56px; }