Fixes: https://github.com/go-gitea/gitea/issues/35863
The old code had a conflict between using HTML attributes vs. style
properties where the style was overriding the previously set HTML
attributes:
```html
<img width="300" height="277.02439470988946" style="width: 275px; height: 0px;">
```
I made it so in all cases only `style` properties are used and the
previous width/height values are now set via `style`. Also I did a
number of much-needed typescript improvements to the file.
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
1. Use `is-loading` instead of `ui loader`
2. Introduce class name `image-diff-tabs`, instead of searching `gt-hidden`, which is fragile
3. Align the UI elements, see the screenshots.
There was some recent discussion about this in Discord `ui-design`
channel and the conclusion was that
https://github.com/go-gitea/gitea/issues/24305 should have fixed their
OS font installation to have semibold weights.
I have now tested this 601 weight on a Windows 10 machine on Firefox
myself, and I immediately noticed that bold was excessivly bold and
rendering as 700 because browsers are biased towards bolder fonts. So
revert this back to the previous value.
Ran most of the Less files through the Less compiler and Prettier and
then followed up with a round of manual fixes.
The Less compiler had unfortunately stripped all `//` style comments
that I had to restore (It did preserve `/* */` comments). Other fixes
include duplicate selector removal which were revealed after the
transpilation and which weren't caught by stylelint before but now are.
Fixes: https://github.com/go-gitea/gitea/issues/15565
