mirror of
https://codeberg.org/forgejo/forgejo
synced 2024-11-28 04:36:11 +01:00
51f6c3a059
Forbid [deprecated](https://drafts.csswg.org/css-text-3/#word-break-property) `break-word` and fix all occurences. Regarding `overflow-wrap: break-word` vs `overflow-wrap: anywhere`: Example of difference: https://jsfiddle.net/silverwind/1va6972r/ [Here](https://stackoverflow.com/questions/77651244) it says: > The differences between normal, break-word and anywhere are only clear if you are using width: min-content on the element containing the text, and you also set a max-width. A pretty rare scenario. I don't think this difference will make any practical impact as we are not hitting this rare scenario. (cherry picked from commit 5556782ebeb1ca4d17e2fff434b11651887b9899)
85 lines
2.5 KiB
CSS
85 lines
2.5 KiB
CSS
/*
|
|
Gitea's tailwind-style CSS helper classes have `gt-` prefix.
|
|
Gitea's private styles use `g-` prefix.
|
|
*/
|
|
|
|
.gt-word-break {
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.gt-ellipsis {
|
|
overflow: hidden !important;
|
|
white-space: nowrap !important;
|
|
text-overflow: ellipsis !important;
|
|
}
|
|
|
|
.g-table-auto-ellipsis td.auto-ellipsis {
|
|
position: relative;
|
|
}
|
|
|
|
.g-table-auto-ellipsis td.auto-ellipsis span {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
padding: inherit;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.interact-fg { color: inherit !important; }
|
|
.interact-fg:hover { color: var(--color-primary) !important; }
|
|
.interact-fg:active { color: var(--color-primary-active) !important; }
|
|
|
|
.interact-bg { background: transparent !important; }
|
|
.interact-bg:hover { background: var(--color-hover) !important; }
|
|
.interact-bg:active { background: var(--color-active) !important; }
|
|
|
|
/*
|
|
tw-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
|
|
do not use:
|
|
* "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex"
|
|
* ".hidden" class: it has been polluted by Fomantic UI in many cases
|
|
* inline style="display: none": it's difficult to tweak
|
|
* jQuery's show/hide/toggle: it can not show/hide elements with "display: xxx !important"
|
|
only use:
|
|
* this ".tw-hidden" class
|
|
* showElem/hideElem/toggleElem functions in "utils/dom.js"
|
|
*/
|
|
.tw-hidden.tw-hidden { display: none !important; }
|
|
|
|
/* proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128 */
|
|
.tw-break-anywhere { overflow-wrap: anywhere !important; }
|
|
|
|
@media (max-width: 767.98px) {
|
|
/* double selector so it wins over .tw-flex (old .gt-df) etc */
|
|
.not-mobile.not-mobile {
|
|
display: none !important;
|
|
}
|
|
}
|
|
@media (min-width: 767.98px) {
|
|
.only-mobile.only-mobile {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.tab-size-1 { tab-size: 1 !important; }
|
|
.tab-size-2 { tab-size: 2 !important; }
|
|
.tab-size-3 { tab-size: 3 !important; }
|
|
.tab-size-4 { tab-size: 4 !important; }
|
|
.tab-size-5 { tab-size: 5 !important; }
|
|
.tab-size-6 { tab-size: 6 !important; }
|
|
.tab-size-7 { tab-size: 7 !important; }
|
|
.tab-size-8 { tab-size: 8 !important; }
|
|
.tab-size-9 { tab-size: 9 !important; }
|
|
.tab-size-10 { tab-size: 10 !important; }
|
|
.tab-size-11 { tab-size: 11 !important; }
|
|
.tab-size-12 { tab-size: 12 !important; }
|
|
.tab-size-13 { tab-size: 13 !important; }
|
|
.tab-size-14 { tab-size: 14 !important; }
|
|
.tab-size-15 { tab-size: 15 !important; }
|
|
.tab-size-16 { tab-size: 16 !important; }
|