Backport https://github.com/go-gitea/gitea/pull/25652 This will prevent the most common cases of SVG shrinking because lack of space. I evaluated multiple options and this seems to be the one with the least impact in size and processing cost, so I went with it. Unfortunately, CSS can not dynamically convert `16` obtained from `attr()` to `16px`, or else a generic solution for all sizes would have been possible. But a solution is [in sight](https://developer.mozilla.org/en-US/docs/Web/CSS/attr#type-or-unit) with `attr(width px)` but no browser supports it currently.
This commit is contained in:
parent
1f90376041
commit
39fce5750d
3 changed files with 42 additions and 10 deletions
|
@ -358,16 +358,6 @@ progress::-moz-progress-bar {
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: text-top;
|
|
||||||
fill: currentcolor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.middle .svg {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unselectable,
|
.unselectable,
|
||||||
.button,
|
.button,
|
||||||
.lines-num,
|
.lines-num,
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
@import "./modules/breadcrumb.css";
|
@import "./modules/breadcrumb.css";
|
||||||
@import "./modules/card.css";
|
@import "./modules/card.css";
|
||||||
@import "./modules/comment.css";
|
@import "./modules/comment.css";
|
||||||
|
@import "./modules/svg.css";
|
||||||
|
|
||||||
@import "./shared/issuelist.css";
|
@import "./shared/issuelist.css";
|
||||||
@import "./shared/milestone.css";
|
@import "./shared/milestone.css";
|
||||||
|
|
41
web_src/css/modules/svg.css
Normal file
41
web_src/css/modules/svg.css
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
.svg {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: text-top;
|
||||||
|
fill: currentcolor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle .svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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; }
|
Loading…
Reference in a new issue