diff options
| author | silverwind <me@silverwind.io> | 2023-07-04 04:15:06 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-07-04 02:15:06 +0000 |
| commit | 1195d66c15ad6ead1f464b5d7ae30308e1278780 (patch) | |
| tree | d727c8ac15282b6647a9231915a4d5885c7af3f6 /web_src | |
| parent | 0403bd989f60ab84497eb5e04366496b3c9d2534 (diff) | |
| download | gitea-1195d66c15ad6ead1f464b5d7ae30308e1278780.tar.gz gitea-1195d66c15ad6ead1f464b5d7ae30308e1278780.zip | |
Prevent SVG shrinking (#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.
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/css/base.css | 10 | ||||
| -rw-r--r-- | web_src/css/index.css | 1 | ||||
| -rw-r--r-- | web_src/css/modules/svg.css | 41 |
3 files changed, 42 insertions, 10 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css index 8b8d376c57..ca400f270b 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -375,16 +375,6 @@ progress::-moz-progress-bar { opacity: 1 !important; } -.svg { - display: inline-block; - vertical-align: text-top; - fill: currentcolor; -} - -.middle .svg { - vertical-align: middle; -} - .unselectable, .button, .lines-num, diff --git a/web_src/css/index.css b/web_src/css/index.css index 6a3e7d0dd5..fa918f49da 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -10,6 +10,7 @@ @import "./modules/navbar.css"; @import "./modules/toast.css"; @import "./modules/divider.css"; +@import "./modules/svg.css"; @import "./shared/issuelist.css"; @import "./shared/milestone.css"; diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css new file mode 100644 index 0000000000..b3060bddd6 --- /dev/null +++ b/web_src/css/modules/svg.css @@ -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; } |