Change <a> elements to underline on hover

[silverwind]

Fomantic brings a opinionated style that removed underline on hovered links which I think is important UX to have.

This re-enables the underline in the Fomantic config and fixes a few cases where underline was deemed disruptive.

[zeripath]

not completely sure about the .tdn class. It seems a bit poorly named. I understand what the abbrev is standing for.

However, I think allowing the underline decoration back seems like a good thing.

[wxiaoguang]

I have a feeling that these helpers become more and more misleading.

dif = display: inline-block
fc = flex-direction: column // fdc ?
js = justify-content: flex-start // jcfs ?
tl = text-align: left // tal ?
tdn = text-decoration: none

[silverwind]

Don't think they are so bad, we can always refactor later but longer class names means more bytes to be transferred :)

[wxiaoguang]

Clarity is always the top priority for big projects in my mind, one or two bytes affect nothing.

Maybe we should refactor the CSS system as soon as possible (or now), just like the JS refactoring (still in progress). Otherwise the CSS files would become a second huge index.js.

[silverwind]

Any more feedback about the actual change here?

[lunny]

I agree we need underline on hover of a tag. And these short class names are really confusing but they could be another PRs.

[lunny]

If nobody against it, I think move it to v1.16 .

[wxiaoguang]

My concern is that we introduced too many unnecessary/confusing !important and too many confusing names.

We can have it in 1.16, and I hope this is the last !important and confusing name for general purpose.

[silverwind]

My concern is that we introduced too many unnecessary/confusing !important and too many confusing names.

Helper classes will always need !important to be able to outweight multi-class rules of our own or of 3rd-partty CSS of which fomantic-ui has many of. There is no way around this, CSS does not provide any alternatives to avoid !important.

I hope this is the last !important and confusing name for general purpose.

Nope, CSS is too inflexible to avoid !important and as long as we are not in complete control of all our CSS (e.g. not using any 3rd-party CSS), we will need it.

What's so confusing about the classnames? They are abbreviations what they do and while their general naming could be extended, I opted to transfer less HTML bytes for performance. I think they are easy to remember, and if not, a quick lookup in helper.css gives clarity. I would not oppose to a refactor for longer classnames.

[silverwind]

For reference, CSS does have the cascade which I think is their attempt at priorizing CSS of different sources, but as you see, it's one big horrible design, giving author-level CSS zero flexibilty and !important always wins. I've been long criticizing it but this stuff won't change any more in browsers for compat reasons.

[wxiaoguang]

In most cases, we just do wrong. For example:

• Fix position of label color picker colors #17866 (comment)

There are more examples I can not remember. The sure thing I know is that we didn't use Fomantic-UI correctly, didn't have unified frontend naming system and polluted CSS system heavily, then it leads to many new strange problems.

[wxiaoguang]

And we are all victims. Since the text-align was set in

gitea/web_src/less/_base.less

Line 1199 in 9296baf

text-align: center;

Then new problem comes:

• gitea/web_src/js/features/repo-issue-content.js

  Line 26 in 9296baf

  <!-- ".modal .content" style was polluted in "_base.less": "&.modal > .content" -->

• feature: custom repo buttons #15532 (comment)

Then some developers may want to bypass it by !important.

[silverwind]

Agree to removing fomantic classes wherever possible. Most stuff can be done solely with helpers.

Yes, text should use default alignment (left or right depending on language). Centered multi-line text is hard to read. We should fix that eventually and just use the helpers (long or short names).