finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
forgejo/web_src/css/helpers.css

86 lines
2.6 KiB
CSS
Raw Normal View History

Improve some modal action buttons (#24289) Follow #24097 and #24285 And add a devtest page for modal action button testing. http://localhost:3000/devtest/fomantic-modal Now the `modal_actions_confirm.tmpl` could support: green / blue / yellow positive buttons, the negative button is "secondary". ps: this PR is only a small improvement, there are still a lot of buttons not having proper colors. In the future these buttons could be improved by this approach. These buttons could also be improved according to the conclusion of #24285 in the future. ![image](https://user-images.githubusercontent.com/2114189/233847773-a6d6b29b-7b5c-490e-8425-40dfd0ad2529.png) And add GitHub-like single danger button (context: https://github.com/go-gitea/gitea/issues/24285#issuecomment-1519100312) ![image](https://user-images.githubusercontent.com/2114189/233891566-055d7611-894d-4d5a-baf5-f6369180bf8d.png) --------- Co-authored-by: silverwind <me@silverwind.io>
2023-04-24 11:08:59 +00:00
/*
Gitea's tailwind-style CSS helper classes have `gt-` prefix.
Gitea's private styles use `g-` prefix.
*/
Fix tooltips and issue dependency styles (#13458) - Convert all tooltips to JS-based ones, fixing overflow issues - Restyle issue dependencies/dependants - Move popup styles to base style - CSS Helper tweaks - Unify pseudo element selectors and lint for it Fixes: https://github.com/go-gitea/gitea/issues/13400
2020-11-10 18:28:07 +00:00
Move helpers to be prefixed with `gt-` (#22879) As discussed in #22847 the helpers in helpers.less need to have a separate prefix as they are causing conflicts with fomantic styles This will allow us to have the `.gt-hidden { display:none !important; }` style that is needed to for the reverted PR. Of note in doing this I have noticed that there was already a conflict with at least one chroma style which this PR now avoids. I've also added in the `gt-hidden` style that matches the tailwind one and switched the code that needed it to use that. Signed-off-by: Andrew Thornton <art27@cantab.net> --------- Signed-off-by: Andrew Thornton <art27@cantab.net> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-02-13 17:59:59 +00:00
.gt-word-break {
Fix tooltips and issue dependency styles (#13458) - Convert all tooltips to JS-based ones, fixing overflow issues - Restyle issue dependencies/dependants - Move popup styles to base style - CSS Helper tweaks - Unify pseudo element selectors and lint for it Fixes: https://github.com/go-gitea/gitea/issues/13400
2020-11-10 18:28:07 +00:00
word-wrap: break-word !important;
Fix Pull Request comment filename word breaks (#19535) * Fix word breaks in Chrome This fixes word wrapping on the filename for a comment on a PR. A previous commit fixed this problem in Firefox, but not Chrome. Fixes #16248 * Don't break Outdated badge This prevents the Outdated badge on a PR from wrapping in the middle of the word for a comment on a long filename. * Move word break to recommended element * Add overflow-wrap per PR review * Update web_src/less/helpers.less Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2022-04-29 09:30:54 +00:00
word-break: break-word; /* compat: Safari */
overflow-wrap: anywhere;
Fix tooltips and issue dependency styles (#13458) - Convert all tooltips to JS-based ones, fixing overflow issues - Restyle issue dependencies/dependants - Move popup styles to base style - CSS Helper tweaks - Unify pseudo element selectors and lint for it Fixes: https://github.com/go-gitea/gitea/issues/13400
2020-11-10 18:28:07 +00:00
}
File header tweaks, add CSS helpers (#12635) - replace two instances of fontawesome with octicons - add new "class" optional argument to "svg" helper - add many new CSS helpers and move their import to the end for increaseed precedence Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2020-09-08 17:17:56 +00:00
Move helpers to be prefixed with `gt-` (#22879) As discussed in #22847 the helpers in helpers.less need to have a separate prefix as they are causing conflicts with fomantic styles This will allow us to have the `.gt-hidden { display:none !important; }` style that is needed to for the reverted PR. Of note in doing this I have noticed that there was already a conflict with at least one chroma style which this PR now avoids. I've also added in the `gt-hidden` style that matches the tailwind one and switched the code that needed it to use that. Signed-off-by: Andrew Thornton <art27@cantab.net> --------- Signed-off-by: Andrew Thornton <art27@cantab.net> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-02-13 17:59:59 +00:00
.gt-ellipsis {
Fix overflow in commit graph (#17947) * Fix overflow in commit graph Limit commit message to 50% width. This is rather crude but should work for common use cases with not too-long author names. Fixes: https://github.com/go-gitea/gitea/issues/17944 * Make it work with dynamic width * use span * use explicit none Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2021-12-11 14:12:18 +00:00
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
Modify width of ui container, fine tune css for settings pages and org header (#24315) Close #24302 Part of #24229, Follows #24246 This PR focused on CSS style fine-tune, main changes: 1. Give `.ui.ui.ui.container` a width of `1280px` with a max-width of `calc(100vw - 64px)`, so the main contents looks better on large devices. 2. Share styles for table elements in all levels settings pages to fix overflow of runners table on mobile and for consistency (The headers on mobile can be further improved, but haven't found a proper way yet). 3. Use [stackable grid](https://fomantic-ui.com/collections/grid.html#stackable) and [device column width](https://fomantic-ui.com/examples/responsive.html) for responsiveness for some pages (repo/org collaborators settings pages, org teams related page) 4. Fixed #24302 by sharing label related CSS in reporg.css 5. Fine tune repo tags settings page --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-04-26 15:59:08 +00:00
.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;
}
Button and color enhancements (#24989) - Various corrections to button styles, especially secondary - Remove focus highlight, it's annoying when it stays on button after press - Clearly define ghost and link buttons with demos in devtest - Remove black, grey and tertiary buttons, they should not be used - Make `arc-green` slightly darker <img width="1226" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/8d89786a-01ab-40f8-ae5a-e17f40e35084"> <img width="1249" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/83651e6d-3c27-46ff-b8bd-ff344d70e949"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-06-09 08:37:47 +00:00
.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; }
Refactor hiding-methods, remove jQuery show/hide, remove `.hide` class, remove inline style=display:none (#22950) Close #22847 This PR: * introduce Gitea's own `showElem` and related functions * remove jQuery show/hide * remove .hide class * remove inline style=display:none From now on: 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 ".gt-hidden" class * showElem/hideElem/toggleElem functions in "utils/dom.js" cc: @silverwind , this is the all-in-one PR
2023-02-19 04:06:14 +00:00
/*
Migrate `gt-hidden` to `tw-hidden` (#30046) We have to define this one in helpers.css because tailwind only generates a single class but certain things rely on this being double-class. Command ran: ```sh perl -p -i -e 's#gt-hidden#tw-hidden#g' web_src/js/**/* templates/**/* models/**/* web_src/css/**/* --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> (cherry picked from commit ec3d467f15a683b305ac165c3eba6683628dcb25) Conflicts: templates/install.tmpl templates/repo/diff/conversation.tmpl templates/repo/issue/view_content/conversation.tmpl templates/repo/issue/view_content/sidebar.tmpl templates/repo/issue/view_title.tmpl resolved by prefering Forgejo version and applying the commands to all files
2024-03-24 18:23:38 +00:00
tw-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
Refactor hiding-methods, remove jQuery show/hide, remove `.hide` class, remove inline style=display:none (#22950) Close #22847 This PR: * introduce Gitea's own `showElem` and related functions * remove jQuery show/hide * remove .hide class * remove inline style=display:none From now on: 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 ".gt-hidden" class * showElem/hideElem/toggleElem functions in "utils/dom.js" cc: @silverwind , this is the all-in-one PR
2023-02-19 04:06:14 +00:00
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:
Migrate `gt-hidden` to `tw-hidden` (#30046) We have to define this one in helpers.css because tailwind only generates a single class but certain things rely on this being double-class. Command ran: ```sh perl -p -i -e 's#gt-hidden#tw-hidden#g' web_src/js/**/* templates/**/* models/**/* web_src/css/**/* --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> (cherry picked from commit ec3d467f15a683b305ac165c3eba6683628dcb25) Conflicts: templates/install.tmpl templates/repo/diff/conversation.tmpl templates/repo/issue/view_content/conversation.tmpl templates/repo/issue/view_content/sidebar.tmpl templates/repo/issue/view_title.tmpl resolved by prefering Forgejo version and applying the commands to all files
2024-03-24 18:23:38 +00:00
* this ".tw-hidden" class
Refactor hiding-methods, remove jQuery show/hide, remove `.hide` class, remove inline style=display:none (#22950) Close #22847 This PR: * introduce Gitea's own `showElem` and related functions * remove jQuery show/hide * remove .hide class * remove inline style=display:none From now on: 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 ".gt-hidden" class * showElem/hideElem/toggleElem functions in "utils/dom.js" cc: @silverwind , this is the all-in-one PR
2023-02-19 04:06:14 +00:00
* showElem/hideElem/toggleElem functions in "utils/dom.js"
*/
Migrate `gt-hidden` to `tw-hidden` (#30046) We have to define this one in helpers.css because tailwind only generates a single class but certain things rely on this being double-class. Command ran: ```sh perl -p -i -e 's#gt-hidden#tw-hidden#g' web_src/js/**/* templates/**/* models/**/* web_src/css/**/* --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> (cherry picked from commit ec3d467f15a683b305ac165c3eba6683628dcb25) Conflicts: templates/install.tmpl templates/repo/diff/conversation.tmpl templates/repo/issue/view_content/conversation.tmpl templates/repo/issue/view_content/sidebar.tmpl templates/repo/issue/view_title.tmpl resolved by prefering Forgejo version and applying the commands to all files
2024-03-24 18:23:38 +00:00
.tw-hidden.tw-hidden { display: none !important; }
Refactor repo header/list (#29969) 1. Use general "mobile-only" and "not-mobile" CSS styles, remove some`@media (max-width: 767.98px)` tricks 2. Use `CountFmt` for repo list, just like the repo header (and it matches GitHub, to avoid big numbers bloat the page) (cherry picked from commit bfa160fc98a23923b6ce1cd4d99e8970d937d6ec) Conflicts: templates/explore/repo_list.tmpl templates/repo/header.tmpl web_src/css/repo/header.css Resolved the template conflicts by porting the changes to Forgejo (in case of `header.tmpl`, applying the changes in `header_fork.tmpl). In case of the CSS change, opted to take Gitea's version and drop the entire media query.
2024-03-21 17:04:03 +00:00
Add class tw-break-anywhere very partial port of https://github.com/go-gitea/gitea/commit/99463532820d7a88cdea88e66e0606b996cc9fc7#diff-38f10be6b48c74bcacbf9f6e15cc8582a45b7a6cbd1cdd8efec8e592575290c5 to fix a few picked areas where lack of it causes bugs.
2024-05-11 13:15:29 +00:00
/* proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128 */
.tw-break-anywhere { overflow-wrap: anywhere !important; }
Refactor repo header/list (#29969) 1. Use general "mobile-only" and "not-mobile" CSS styles, remove some`@media (max-width: 767.98px)` tricks 2. Use `CountFmt` for repo list, just like the repo header (and it matches GitHub, to avoid big numbers bloat the page) (cherry picked from commit bfa160fc98a23923b6ce1cd4d99e8970d937d6ec) Conflicts: templates/explore/repo_list.tmpl templates/repo/header.tmpl web_src/css/repo/header.css Resolved the template conflicts by porting the changes to Forgejo (in case of `header.tmpl`, applying the changes in `header_fork.tmpl). In case of the CSS change, opted to take Gitea's version and drop the entire media query.
2024-03-21 17:04:03 +00:00
@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;
}
}
Move and simplify tab-size helpers (#30196) Tailwind does not support. Dropped the vendor-prefix. Co-authored-by: Giteabot <teabot@gitea.io> (cherry picked from commit 44dd6d6927180a4d36b3811fd2fb7557d0b44adb)
2024-03-31 11:22:28 +00:00
.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; }
Reference in a new issue Copy permalink