summaryrefslogtreecommitdiffstats
path: root/web_src/css/index.css
Commit message (Collapse)AuthorAgeFilesLines
* Remove fomantic menu module (#30325)silverwind2024-04-141-0/+1
| | | | | A lot of variants are in use, so the diff stat isn't so great. Co-authored-by: Giteabot <teabot@gitea.io>
* Rewrite and restyle reaction selector and enable no-sizzle eslint rule (#30453)silverwind2024-04-141-0/+1
| | | | | | | | | | | Enable `no-sizzle` lint rule, there was only one use in `initCompReactionSelector` and: - Remove all jQuery except the necessary fomantic dropdown init - Remove the recursion, instead bind event listeners to common parent container nodes --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
* Remove fomantic list module (#30281)silverwind2024-04-061-0/+1
| | | | | | | | Likely still some unnecessary CSS but any combinations with the `ui list` classes are covered. There was only on instance of `horizontal list` which I removed. It was this part of the commit page: <img width="396" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/c49ec4f5-93c3-41d6-a907-cdbedf8abc44">
* Render embedded code preview by permlink in markdown (#30234)wxiaoguang2024-04-021-0/+1
| | | | | The permlink in markdown will be rendered as a code preview block, like GitHub Co-authored-by: silverwind <me@silverwind.io>
* Remove fomantic input module (#30194)silverwind2024-03-311-0/+1
| | | | Another pure CSS module. Some styling is part of the `form` module which will likely follow next.
* Remove fomantic checkbox module (#30162)silverwind2024-03-291-0/+1
| | | | | | | | | | | | | | | | | | | CSS is pretty slim already and the `.ui.toggle.checkbox` sliders on admin page also still work. The only necessary JS is the one that links `input` and `label` so that it can be toggled via label. All checkboxes except the markdown ones render at `--checkbox-size: 16px` now. <img width="174" alt="Screenshot 2024-03-28 at 22 15 10" src="https://github.com/go-gitea/gitea/assets/115237/3455c1bb-166b-47e4-9847-2d20dd1f04db"> <img width="499" alt="Screenshot 2024-03-28 at 21 00 07" src="https://github.com/go-gitea/gitea/assets/115237/412be2b3-d5a0-478a-b17b-43e6bc12e8ce"> <img width="83" alt="Screenshot 2024-03-28 at 22 14 34" src="https://github.com/go-gitea/gitea/assets/115237/d8c89838-a420-4723-8c49-89405bb39474"> --------- Co-authored-by: delvh <dev.lh@web.de>
* Remove fomantic label module (#30081)silverwind2024-03-271-0/+1
| | | | | | | | | | | Of note is the CSS has references to "floating label" and "transparent label" but I could not find those anywhere in the code. They are related to https://github.com/go-gitea/gitea/pull/3939, but I think these have long been removed. --------- Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: Giteabot <teabot@gitea.io>
* Remove fomantic table module (#30047)silverwind2024-03-251-0/+1
| | | | | | | Big CSS module. I tested basic functionality on admin and commits table. --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Remove fomantic segment module (#30042)silverwind2024-03-241-7/+11
| | | | | Another CSS-only module. Also, I re-ordered the imports based on [original fomantic order](https://github.com/fomantic/Fomantic-UI/blob/2.8.7/src/semantic.less).
* Remove fomantic container module (#30036)silverwind2024-03-241-0/+1
| | | | | | | | | Small CSS module. There was a ordering conflict between `.ui.menu` and `.ui.container` which I've solved by adding the `.ui.menu` rule into base. --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Remove fomantic header module (#30033)silverwind2024-03-241-0/+1
| | | | | | | | | Likely still a few useless classes left, but I think I at least don't have missed any. --------- Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: Giteabot <teabot@gitea.io>
* Remove fomantic grid module (#29894)silverwind2024-03-201-0/+1
| | | | Removed the grid module and moved the used parts it into our own CSS, eliminating around 75% unused CSS in turn.
* Remove fomantic message module (#29856)silverwind2024-03-171-0/+1
| | | | Remove this CSS-only module, which gives a nice reduction in CSS size. Should look exactly like before.
* Add tailwindcss (#29357)silverwind2024-02-251-0/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | This will get tailwindcss working on a basic level. It provides only the utility classes, e.g. no tailwind base which we don't need because we have our own CSS reset. Without the base, we also do not have their CSS variables so a small amount of features do not work and I removed the generated classes for them. ***Note for future developers: This currently uses a `tw-` prefix, so we use it like `tw-p-3`.*** <details> <summary>Currently added CSS, all false-positives</summary> ``` .\!visible{ visibility: visible !important } .visible{ visibility: visible } .invisible{ visibility: hidden } .collapse{ visibility: collapse } .static{ position: static } .\!fixed{ position: fixed !important } .absolute{ position: absolute } .relative{ position: relative } .sticky{ position: sticky } .left-10{ left: 2.5rem } .isolate{ isolation: isolate } .float-right{ float: right } .float-left{ float: left } .mr-2{ margin-right: 0.5rem } .mr-3{ margin-right: 0.75rem } .\!block{ display: block !important } .block{ display: block } .inline-block{ display: inline-block } .inline{ display: inline } .flex{ display: flex } .inline-flex{ display: inline-flex } .\!table{ display: table !important } .inline-table{ display: inline-table } .table-caption{ display: table-caption } .table-cell{ display: table-cell } .table-column{ display: table-column } .table-column-group{ display: table-column-group } .table-footer-group{ display: table-footer-group } .table-header-group{ display: table-header-group } .table-row-group{ display: table-row-group } .table-row{ display: table-row } .flow-root{ display: flow-root } .inline-grid{ display: inline-grid } .contents{ display: contents } .list-item{ display: list-item } .\!hidden{ display: none !important } .hidden{ display: none } .flex-shrink{ flex-shrink: 1 } .shrink{ flex-shrink: 1 } .flex-grow{ flex-grow: 1 } .grow{ flex-grow: 1 } .border-collapse{ border-collapse: collapse } .select-all{ user-select: all } .resize{ resize: both } .flex-wrap{ flex-wrap: wrap } .overflow-visible{ overflow: visible } .rounded{ border-radius: 0.25rem } .border{ border-width: 1px } .text-justify{ text-align: justify } .uppercase{ text-transform: uppercase } .lowercase{ text-transform: lowercase } .capitalize{ text-transform: capitalize } .italic{ font-style: italic } .text-red{ color: var(--color-red) } .text-shadow{ color: var(--color-shadow) } .underline{ text-decoration-line: underline } .overline{ text-decoration-line: overline } .line-through{ text-decoration-line: line-through } .outline{ outline-style: solid } .ease-in{ transition-timing-function: cubic-bezier(0.4, 0, 1, 1) } .ease-in-out{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } .ease-out{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1) } ``` </details> --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Revamp repo header (#27760)Denys Konovalov2024-01-121-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Redesign repo header with following new aspects: - responsive & better-looking repo title - hide repo button text instead of icons in mobile view - use same tab style as on explore and org page <details> <summary>Before:</summary> ![grafik](https://github.com/go-gitea/gitea/assets/47871822/57360b77-d43c-49ac-b798-2363c03da7ec) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/d4117f79-a5f5-4f36-bf65-bbada3e7e73b) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/e26f967f-e264-4337-9925-3d942e04fd6d) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/b4683c8d-9c6a-4089-afa7-8dd219e43a46) </details> <details> <summary>After:</summary> ![grafik](https://github.com/go-gitea/gitea/assets/47871822/8ddbc9f6-53c7-4e4e-bea9-704fd93524ca) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/c0588aa9-788d-469c-98a0-81484fbd220c) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/206e931e-404d-4d1b-92ce-908698addfcc) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/a508f9c8-fadc-4a85-94ba-18796f77e07b)
* Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419)silverwind2023-10-061-4/+0
| | | | | | | | | | | | | | | | | | | | | | | | | Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
* Refactor project templates (#26448)Denys Konovalov2023-08-121-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | This PR refactors a bunch of projects-related code, mostly the templates. The following things were done: - rename boards to columns in frontend code - use the new `ctx.Locale.Tr` method - cleanup template, remove useless newlines, classes, comments - merge org-/user and repo level project template together - move "new column" button into project toolbar - move issue card (shared by projects and pinned issues) to shared template, remove useless duplicated styles - add search function to projects (to make the layout more similar to milestones list where it is inherited from :laughing:) - maybe more changes I forgot I've done :laughing: Closes #24893 After: ![Bildschirmfoto vom 2023-08-10 23-02-00](https://github.com/go-gitea/gitea/assets/47871822/cab61456-1d23-4373-8163-e567f1b3b5f9) ![Bildschirmfoto vom 2023-08-10 23-02-26](https://github.com/go-gitea/gitea/assets/47871822/94b55d60-5572-48eb-8111-538a52d8bcc6) ![Bildschirmfoto vom 2023-08-10 23-02-46](https://github.com/go-gitea/gitea/assets/47871822/a0358f4b-4e05-4194-a7bc-6e0ecba5a9b6) --------- Co-authored-by: silverwind <me@silverwind.io>
* Introduce `flex-list` & `flex-item` elements for Gitea UI (#25790)Denys Konovalov2023-08-011-1/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | This PR introduces a new UI element type for Gitea called `flex-item`. It consists of a horizontal card with a leading, main and trailing part: ![grafik](https://github.com/go-gitea/gitea/assets/47871822/395dd3f3-3906-4481-8f65-be6ac0acbe03) The idea behind it is that in Gitea UI, we have many cases where we use this kind of layout, but it is achieved in many different ways: - grid layout - `.ui.list` with additional hacky flexbox - `.ui.key.list` - looks to me like a style set originally created for ssh/gpg key list, was used in many other places - `.issue.list` - created for issue cards, used in many other places - ... This new style is based on `.issue.list`, specifically the refactoring of it done in #25750. In this PR, the new element is introduced and lots of templates are being refactored to use that style. This allows to remove a lot of page-specific css, makes many of the elements responsive or simply provides a cleaner/better-looking way to present information. A devtest section with the new style is also available. <details> <summary>Screenshots (left: before, right: after)</summary> ![Bildschirmfoto vom 2023-07-09 21-01-21](https://github.com/go-gitea/gitea/assets/47871822/545b7da5-b300-475f-bd6d-b7d836950bb5) ![Bildschirmfoto vom 2023-07-09 21-01-56](https://github.com/go-gitea/gitea/assets/47871822/b6f70415-6795-4f71-a5ea-117d56107ea1) ![Bildschirmfoto vom 2023-07-09 21-02-45](https://github.com/go-gitea/gitea/assets/47871822/47407121-3f2a-4778-8f6d-ad2687c2e7b3) ![Bildschirmfoto vom 2023-07-09 21-03-44](https://github.com/go-gitea/gitea/assets/47871822/76167aaf-c3b2-46f6-9ffd-709f20aa6a34) ![Bildschirmfoto vom 2023-07-09 21-04-52](https://github.com/go-gitea/gitea/assets/47871822/af8fdde5-711e-4524-99cf-fb5d68af85b9) ![Bildschirmfoto vom 2023-07-09 21-05-25](https://github.com/go-gitea/gitea/assets/47871822/ae406946-e3e4-4109-abfe-b3588a07b468) ![Bildschirmfoto vom 2023-07-09 21-06-35](https://github.com/go-gitea/gitea/assets/47871822/2dbacc04-24d6-4f91-9e42-e16d6e4b5f1f) ![Bildschirmfoto vom 2023-07-09 21-09-03](https://github.com/go-gitea/gitea/assets/47871822/d3ca4e56-a72f-4179-adc8-98bfd638025b) ![Bildschirmfoto vom 2023-07-09 21-09-44](https://github.com/go-gitea/gitea/assets/47871822/df1fa689-499c-4e54-b6fb-3b81644b725f) ![Bildschirmfoto vom 2023-07-09 21-10-27](https://github.com/go-gitea/gitea/assets/47871822/b21cac71-a85a-4c8c-bb99-ab90373d8e09) ![Bildschirmfoto vom 2023-07-09 21-11-12](https://github.com/go-gitea/gitea/assets/47871822/89be39cf-0af9-4f2d-9fca-42f9eb5e7824) ![Bildschirmfoto vom 2023-07-09 21-12-01](https://github.com/go-gitea/gitea/assets/47871822/079579ea-1ecb-49c0-b32b-b59ed957caec) ![Bildschirmfoto vom 2023-07-09 21-17-44](https://github.com/go-gitea/gitea/assets/47871822/61ac6ec4-a319-4d5c-9c99-2e02a77295ba) ![Bildschirmfoto vom 2023-07-09 21-18-27](https://github.com/go-gitea/gitea/assets/47871822/5b55b73f-6244-47f7-a3e6-c5e4a7474585) ![Bildschirmfoto vom 2023-07-09 21-19-18](https://github.com/go-gitea/gitea/assets/47871822/c1b7c22e-3e5a-46d4-b8d6-5560db478c0b) ![Bildschirmfoto vom 2023-07-09 21-29-13](https://github.com/go-gitea/gitea/assets/47871822/82ffca8d-ab2e-4a18-9954-5b685bf6a422) ![Bildschirmfoto vom 2023-07-09 21-30-11](https://github.com/go-gitea/gitea/assets/47871822/ad2fdccc-2be8-41bb-bfdc-a084aa387b61) ![Bildschirmfoto vom 2023-07-09 21-32-44](https://github.com/go-gitea/gitea/assets/47871822/2d298ba7-d084-48b5-a139-f86d56262110) ![Bildschirmfoto vom 2023-07-09 21-33-28](https://github.com/go-gitea/gitea/assets/47871822/4cbd838e-9de8-4ad0-8ed9-438da5c9a5cb) </details> --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Reduce margins on user settings page, introduce `flex-container` (#26046)silverwind2023-07-311-0/+1
| | | | | | | | | | | Same as https://github.com/go-gitea/gitea/pull/26026 but for the user settings page. It introduces a new `flex-container` class and shares it across both pages. Before and After: <img width="1264" alt="Screenshot 2023-07-21 at 19 35 57" src="https://github.com/go-gitea/gitea/assets/115237/1358dab4-55c0-40ce-a4d5-673099304f3d"> <img width="1269" alt="Screenshot 2023-07-21 at 19 35 42" src="https://github.com/go-gitea/gitea/assets/115237/34812f6d-dc65-4009-b977-90e03efdc6d1">
* Prevent SVG shrinking (#25652)silverwind2023-07-041-0/+1
| | | | | | | | | | | 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.
* Replace fomantic divider module with our own (#25539)silverwind2023-06-291-0/+1
| | | | | | | | | | | | | | | | | | | | | Should look exactly like before for normal dividers. "Horizontal" ones look better because they no longer use image backgrounds. <img width="917" alt="Screenshot 2023-06-27 at 19 07 56" src="https://github.com/go-gitea/gitea/assets/115237/d97d8dec-6859-44a8-85ba-e4549b4dd9df"> <img width="914" alt="Screenshot 2023-06-27 at 19 05 58" src="https://github.com/go-gitea/gitea/assets/115237/8bf98544-2d82-4ebf-ac68-d6dc237bd6b2"> <img width="1246" alt="Screenshot 2023-06-27 at 19 00 42" src="https://github.com/go-gitea/gitea/assets/115237/36a6bb21-6029-4f53-8bee-535f55c66fed"> <img width="344" alt="Screenshot 2023-06-27 at 18 58 15" src="https://github.com/go-gitea/gitea/assets/115237/a9e70aee-8e6b-4ea1-9e93-19c9f96aec6e"> <img width="823" alt="Screenshot 2023-06-27 at 18 56 22" src="https://github.com/go-gitea/gitea/assets/115237/e7a497cd-f262-4683-8872-23c3c8cce32f"> <img width="330" alt="Screenshot 2023-06-27 at 19 21 11" src="https://github.com/go-gitea/gitea/assets/115237/42f24149-a655-4c7e-bd26-8ab52db6446b">
* Add toasts to UI (#25449)silverwind2023-06-271-0/+1
| | | | | Fixes https://github.com/go-gitea/gitea/issues/24353 In some case like async success/error, it is useful to show toasts in UI.
* Improve wiki sidebar and TOC (#25460)wxiaoguang2023-06-231-0/+1
| | | | | | | | | | | | | | Close #20976 Close #20975 1. Fix the bug: the TOC in footer was incorrectly rendered as main content's TOC 2. Fix the layout: on mobile, the TOC is put above the main content, while the sidebar is put below the main content 3. Auto collapse the TOC on mobile ps: many styles of "wiki.css" are moved from old css files, so leave nits to following PRs.
* Navbar styling rework (#25343)silverwind2023-06-201-0/+1
| | | | | | | | | | | | | | | | | | | | | | | - Extract navbar CSS to own file - Reduce height from 52px to 50px - Give every item a hover effect of of 36px, including the logo and on mobile - Consistent horizontal padding of 10px left and right <img width="549" alt="Screenshot 2023-06-18 at 13 41 16" src="https://github.com/go-gitea/gitea/assets/115237/0b00d101-253e-4b1f-9ee2-322d60fb2e26"> <img width="98" alt="Screenshot 2023-06-18 at 14 03 43" src="https://github.com/go-gitea/gitea/assets/115237/4ef5d98b-4d1e-45de-822e-c2c844e19876"> <img width="234" alt="Screenshot 2023-06-18 at 14 03 18" src="https://github.com/go-gitea/gitea/assets/115237/a4d9b04b-83de-42aa-a9ce-f010a9690688"> <img width="873" alt="Screenshot 2023-06-18 at 13 58 28" src="https://github.com/go-gitea/gitea/assets/115237/8cb8e31e-2adf-40c8-ae3f-d00d011b4d1b"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
* Fix UI on mobile view (#25315)Denys Konovalov2023-06-181-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Various fixes to pages or elements which were looking ugly on mobile. <details> <summary>Screenshots</summary> ![Bildschirmfoto vom 2023-06-17 20-38-41](https://github.com/go-gitea/gitea/assets/47871822/30b5d3ce-df3b-43eb-a4c2-c3790667fb9d) ![Bildschirmfoto vom 2023-06-17 20-39-27](https://github.com/go-gitea/gitea/assets/47871822/27c07b25-3602-4fb2-b34d-d5e875e054e9) ![Bildschirmfoto vom 2023-06-17 20-41-27](https://github.com/go-gitea/gitea/assets/47871822/dacdbb4e-e3dd-4b94-abf0-c68e3d64bd3b) ![Bildschirmfoto vom 2023-06-17 20-41-48](https://github.com/go-gitea/gitea/assets/47871822/72432c35-7c4a-4c7f-a767-3562f26a5c14) ![Bildschirmfoto vom 2023-06-17 20-42-37](https://github.com/go-gitea/gitea/assets/47871822/737c26ed-1910-4467-98ef-e8769bbbe6f0) ![Bildschirmfoto vom 2023-06-17 20-42-52](https://github.com/go-gitea/gitea/assets/47871822/1813b4bc-43c0-4912-8acb-5d799c090bf3) ![Bildschirmfoto vom 2023-06-17 20-43-06](https://github.com/go-gitea/gitea/assets/47871822/136466e8-34e5-419d-97ec-5202ff819fd2) ![Bildschirmfoto vom 2023-06-17 20-43-42](https://github.com/go-gitea/gitea/assets/47871822/59270bb2-d661-4a84-8504-3e50f771f767) ![Bildschirmfoto vom 2023-06-17 20-44-44](https://github.com/go-gitea/gitea/assets/47871822/494e274d-3771-4141-9419-0a4bbd8b7f64) </details> Co-authored by @silverwind --------- Co-authored-by: silverwind <me@silverwind.io>
* Change access token UI to select dropdowns (#25109)Jonathan Tran2023-06-131-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | The current UI to create API access tokens uses checkboxes that have a complicated relationship where some need to be checked and/or disabled in certain states. It also requires that a user interact with it to understand what their options really are. This branch changes to use `<select>`s. It better fits the available options, and it's closer to [GitHub's UI](https://github.com/settings/personal-access-tokens/new), which is good, in my opinion. It's more mobile friendly since the tap-areas are larger. If we ever add more permissions, like Maintainer, there's a natural place that doesn't take up more screen real-estate. This branch also fixes a few minor issues: - Hide the error about selecting at least one permission after second submission - Fix help description to call it "authorization" since that's what permissions are about (not authentication) Related: #24767. <img width="883" alt="Screenshot 2023-06-07 at 5 07 34 PM" src="https://github.com/go-gitea/gitea/assets/10803/6b63d807-c9be-4a4b-8e53-ecab6cbb8f76"> --- When it's open: <img width="881" alt="Screenshot 2023-06-07 at 5 07 59 PM" src="https://github.com/go-gitea/gitea/assets/10803/2432c6d0-39c2-4ca4-820e-c878ffdbfb69">
* Add details summary for vertical menus in settings to allow toggling (#25098)HesterG2023-06-071-0/+1
| | | | | | | | | | | | | | | | | | | | | | Close #25051 [referenced answer](https://stackoverflow.com/questions/10813581/can-i-replace-the-expand-icon-of-the-details-element/69722686#69722686) for marker overwrite. One limitation is that fomantic does not have hover and active effects for the vertical submenu ([reference](https://fomantic-ui.com/collections/menu.html#sub-menu)). And we might need to overwrite some styles if hover and active effects are needed. Update: Used `data:image/svg` instead of `marker` content. And adjusted styles for hover effect. Take admin settings as an example: https://github.com/go-gitea/gitea/assets/17645053/63f69823-ef43-47d5-a518-544b5ea35ba6 --------- Co-authored-by: silverwind <me@silverwind.io>
* Rework button coloring, add focus and active colors (#24507)silverwind2023-05-291-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | We were missing overrides for `:focus` and `:active` styles which I've added here along with two new color variants `dark-1` and `dark-2` for them. Fomantic UI has 4 different colors but I think 3 are sufficient. I also changed it on arc-green so button goes darker when pressed. <img width="129" alt="Screenshot 2023-05-04 at 01 21 43" src="https://user-images.githubusercontent.com/115237/236072060-7389276a-275b-4d3e-aa52-20b37c6e6d92.png"> <img width="130" alt="Screenshot 2023-05-04 at 01 17 59" src="https://user-images.githubusercontent.com/115237/236071818-0e46414a-33db-4bb2-a3bd-35b514a8a2d0.png"> <img width="129" alt="Screenshot 2023-05-04 at 01 18 07" src="https://user-images.githubusercontent.com/115237/236071819-562b1e38-541f-432b-b3b6-48e6d7594d00.png"> <img width="131" alt="Screenshot 2023-05-04 at 01 18 13" src="https://user-images.githubusercontent.com/115237/236071820-89b7dba9-ce6c-48e5-a075-9053063e6ad3.png"> <img width="133" alt="Screenshot 2023-05-04 at 01 18 30" src="https://user-images.githubusercontent.com/115237/236071823-b6fe2df4-b3f0-4dc8-97a8-f90ba6d19bec.png"> <img width="133" alt="Screenshot 2023-05-04 at 01 18 40" src="https://user-images.githubusercontent.com/115237/236071824-b02ce61a-2367-4c29-8a25-45f231f5e5ee.png"> One misc change includes some fixes to editor and slightly darker selection. <img width="1245" alt="Screenshot 2023-05-28 at 19 16 19" src="https://github.com/go-gitea/gitea/assets/115237/1ea4a4b6-26ba-45af-9cbc-5b8c476c2338">
* Replace Fomantic reset module with our own (#24948)silverwind2023-05-281-0/+1
| | | | | | | | | | | | Replace the `reset` module with a modern version based on [modern-normalize](https://github.com/sindresorhus/modern-normalize). The only things I removed from that module are the `font-family` rules we don't need. Otherwise, it's similar to Fomantic's reset, but with the legacy IE stuff removed. I documented every change done to the module. Also this introduces a new `--tab-size` variable but it has no real effect on code yet.
* Reorganize CSS files (#24739)silverwind2023-05-161-18/+24
| | | | | Reorganize various CSS files for clarity, group together by subdirectory in `index.css`. This reorders some of the rules, but I don't think it should introduce any issues because of that.
* Remove Fomantic comment module (#24703)silverwind2023-05-141-0/+1
| | | | Remove the comment module and put the styles that we still need into a separate file, eliminating about 2/3 of the CSS in line count.
* Improve avatar uploading / resizing / compressing, remove Fomantic card ↵wxiaoguang2023-05-131-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | module (#24653) Fixes: #8972 Fixes: #24263 And I think it also (partially) fix #24263 (no need to convert) , because users could upload any supported image format if it isn't larger than AVATAR_MAX_ORIGIN_SIZE The main idea: * if the uploaded file size is not larger than AVATAR_MAX_ORIGIN_SIZE, use the origin * if the resized size is larger than the origin, use the origin Screenshots: JPG: <details> ![image](https://github.com/go-gitea/gitea/assets/2114189/70e98bb0-ecb9-4c4e-a89f-4a37d4e37f8e) </details> APNG: <details> ![image](https://github.com/go-gitea/gitea/assets/2114189/9055135b-5e2d-4152-bd72-596fcb7c6671) ![image](https://github.com/go-gitea/gitea/assets/2114189/50364caf-f7f6-4241-a289-e485fe4cd582) </details> WebP (animated) <details> ![image](https://github.com/go-gitea/gitea/assets/2114189/f642eb85-498a-49a5-86bf-0a7b04089ae0) </details> The only exception: if a WebP image is larger than MaxOriginSize and it is animated, then current `webp` package can't decode it, so only in this case it isn't supported. IMO no need to support such case: why a user would upload a 1MB animated webp as avatar? crazy ..... --------- Co-authored-by: silverwind <me@silverwind.io>
* Clean up polluted styles and remove dead CSS code (#24497)wxiaoguang2023-05-031-1/+0
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Follow #24393 The funny history: * At the beginning, `.ui.message` was polluted by `text-align: center` * Then people do `<div class="ui ... message text left">` * But `.ui.left` is polluted by `float: left` * Then people do `#xxx .ui.message { width: 100% !important;}` The code just becomes more and more hacky. After removing the pollution, everything becomes clear and straight. And, this PR also does: 1. Remove the `package.css`, its styles could be provided by `top aligned` 2. Remove `#avatar-arrow`, dead code Screenshot: ![image](https://user-images.githubusercontent.com/2114189/235862130-a9eb5d8f-7d01-457c-99f7-21d0abc3075e.png) ![image](https://user-images.githubusercontent.com/2114189/235862222-139709a7-95c2-4f89-a40f-100b2d76d9bb.png) Co-authored-by: Giteabot <teabot@gitea.io>
* Remove `font-awesome` and fomantic `icon` module (#24471)silverwind2023-05-011-2/+0
| | | | Fixes https://github.com/go-gitea/gitea/issues/10410. This PR removes around 120kB of CSS.
* Remove fomantic breadcrumb module (#24463)silverwind2023-05-011-0/+1
| | | | | | | | | | | | | | | | | | | | | | | ### File path before/after <img width="522" alt="Screenshot 2023-05-01 at 13 23 33" src="https://user-images.githubusercontent.com/115237/235445636-57776038-c98e-4cab-8abe-045138a76958.png"> <img width="522" alt="Screenshot 2023-05-01 at 13 24 08" src="https://user-images.githubusercontent.com/115237/235445638-70bef62a-1b70-41f8-ba51-728db4d54402.png"> ### File edit before/after <img width="499" alt="Screenshot 2023-05-01 at 13 24 46" src="https://user-images.githubusercontent.com/115237/235445676-7b3cc23e-289b-40a6-8d4f-0d7fb2efb55e.png"> <img width="497" alt="Screenshot 2023-05-01 at 13 24 52" src="https://user-images.githubusercontent.com/115237/235445677-db9f3974-8456-46de-a32b-9198110c0540.png"> ### Cherry-pick before/after <img width="590" alt="Screenshot 2023-05-01 at 13 25 30" src="https://user-images.githubusercontent.com/115237/235445717-99445024-1bb2-46d4-9bd8-8086bad57d34.png"> <img width="582" alt="Screenshot 2023-05-01 at 13 25 37" src="https://user-images.githubusercontent.com/115237/235445720-9c1dc497-eb23-4e10-a727-27f4d6df69e6.png">
* Improve issue list filter (#24425)wxiaoguang2023-04-301-0/+1
| | | | | | | | | | | | | | | | | | | | | | Partial regression of #24393, not only regression, but broken for long time, 24393 didn't really improve it but used wrong `overflow: scroll`. Actually, that "ui secondary filter menu labels" shouldn't be set as scrollable (I missed that at that time), the problem is: if a "ui menu" has "dropdown" items, then it should not be scrollable. Otherwise the dropdown menu can't be shown correctly. And there are more problems: * The "issue-filters" shouldn't be used anywhere else (copying&pasting problem again ....) * There is also an "issue-actions" container, it should also be fixed. * There are similar problems on the milestone page. * The old comment in code: "grid column" doesn't work well. The major changes of this PR are: use "flex: 1" instead of "ui grid column". After this PR, not 100% perfect but much better than before.
* Rework header bar on issue, pull requests and milestone (#24420)silverwind2023-04-291-0/+1
| | | | | | | | | | | | | | | | | | | | | - Make search bar dynamic full width via flexbox - Make all buttons `small` so font size is the same for all elements in the header - Remove primary color from search field, add SVG icon like on Code tab - Fix button vertical padding being enlarged by SVG icons [View diff without whitespace](https://github.com/go-gitea/gitea/pull/24420/files?diff=unified&w=1) <img width="1226" alt="Screenshot 2023-04-29 at 11 58 53" src="https://user-images.githubusercontent.com/115237/235296851-74848267-664f-4c1f-b94c-a1b94196ff75.png"> <img width="1219" alt="Screenshot 2023-04-29 at 11 59 39" src="https://user-images.githubusercontent.com/115237/235296852-bcfde5ed-8658-43c2-b7e5-3ad84611e76f.png"> Mobile: <img width="437" alt="Screenshot 2023-04-29 at 11 59 52" src="https://user-images.githubusercontent.com/115237/235296860-99263373-7b27-4540-868c-a93e70f281ca.png"> <img width="433" alt="Screenshot 2023-04-29 at 12 00 00" src="https://user-images.githubusercontent.com/115237/235296862-6cf64317-a864-405a-a00f-b5ab620349f5.png">
* Start cleaning the messy ".ui.left / .ui.right", improve label list page, ↵wxiaoguang2023-04-291-2/+3
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | fix stackable menu (#24393) Since 2015/2016, there is a global pollution: ".ui.left" / ".ui.right". Fomantic UI doesn't work this way, it just conflicts with many Fomantic definitions. This PR starts the cleaning work of such techinical debts. And, the "label list" page has been quite messy for long time, for example, why "li" appears in "div" ...... And fix #24296 <details> ![image](https://user-images.githubusercontent.com/2114189/235051281-54c5374c-b5fd-4b5f-9aa2-02d4bb2d9112.png) ![image](https://user-images.githubusercontent.com/2114189/235055703-2ba042e0-4db7-4e63-8646-02f390d496b5.png) ![image](https://user-images.githubusercontent.com/2114189/235056310-4f6ffdc2-5758-4927-8fb8-314d9fb72a6b.png) ![image](https://user-images.githubusercontent.com/2114189/235058400-dab1c9ec-3325-4671-8345-aee6b0b68042.png) ![image](https://user-images.githubusercontent.com/2114189/235058424-85509532-b9bc-43ad-b00f-a87184c60f22.png) </details>
* Add tags list for repos whose release setting is disabled (#23465)Zettat1232023-04-251-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Close #23427 Co-Author: @wxiaoguang If a repo's release setting is enabled, the logic has't changed. Clicking the "Tags" button will jump to `/{user}/{repo}/tags` and `templates/repo/release/list.tmpl` template will be used. <img src="https://user-images.githubusercontent.com/15528715/224939362-bd8974fd-08b0-4f79-a114-3389d15847ca.png" width="600px" /> If the release setting is disabled, clicking the "Tags" button will still jump to `/{user}/{repo}/tags` but a new template `templates/repo/tag/list.tmpl` will be used. <img src="https://user-images.githubusercontent.com/15528715/233834564-74741e49-f4e9-47c8-ac12-e306642798dc.png" width="600px" /> Since both templates above need to render the tags list, I moved the tags list to a shared template located in `templates/repo/tag/table.tmpl`. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
* Refactor delete_modal_actions template and use it for project column related ↵Hester Gong2023-04-231-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | actions (#24097) Co-Author: @wxiaoguang This PR is to fix https://github.com/go-gitea/gitea/issues/23318#issuecomment-1506275446 . The way to fix this in this PR is to use `delete_modal_actions.tmpl` here both to fix this issue and keep ui consistency (as suggested by [TODO here](https://github.com/go-gitea/gitea/blob/4299c3b7db61f8741eca0ba3d663bb65745a4acc/templates/projects/view.tmpl#L161)) And this PR also refactors `delete_modal_actions.tmpl` and its related styles, and use the template for more modal actions: 1. Added template attributes: * locale * ModalButtonStyle: "yes" (default) or "confirm" * ModalButtonCancelText * ModalButtonOkText 2. Rename `delete_modal_actions.tmpl` template to `modal_actions_confirm.tmpl` because it is not only used for action modals deletion now. 3. Refactored css related to modals into `web_src/css/modules/modal.css` and improved the styles. 4. Also use the template for PR deletion modal and remove issue dependency modal. 5. Some modals should also use the template, but not sure how to open them, so mark these modal actions by `{{/* TODO: Convert to base/modal_actions_confirm */}}` After (Also tested on arc green): Hovering on the left buttons <img width="711" alt="Screen Shot 2023-04-23 at 15 17 12" src="https://user-images.githubusercontent.com/17645053/233825650-76307e65-9255-44bb-80e8-7062f58ead1b.png"> <img width="786" alt="Screen Shot 2023-04-23 at 15 17 21" src="https://user-images.githubusercontent.com/17645053/233825652-4dc6f7d1-a180-49fb-a468-d60950eaee0d.png"> Test for functionalities: https://user-images.githubusercontent.com/17645053/233826857-76376fda-022c-42d0-b0f3-339c17ca4e59.mov --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Use secondary pointing menu for tabs on user/organization home page (#24162)Hester Gong2023-04-201-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Close #24108 Use secondary pointing menu for tabs on user/organization home page so the tabs look the same. Main changes: 1. modified a part of dom structure in `templates/user/overview/header.tmpl` to make it the same as `templates/org/header.tmpl` in order to produce the same ui. 2. Move some css to `web_src/css/shared/repoorgshared.css` to make them shareable between `templates/user/overview/header.tmpl` and `templates/org/header.tmpl` After: https://user-images.githubusercontent.com/17645053/232400617-2add5bec-d483-4ab1-b48d-eaee157f7b09.mov For further improvements. Need some thoughts: For [this TODO](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/user/overview/header.tmpl#L1), it is viable to make it a shared template for [this part](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/user/overview/header.tmpl#L2-L17) and [this part](https://github.com/HesterG/gitea/blob/729ad294cbec7a77623b2e3eab750ea7a20e8ee0/templates/org/header.tmpl#L1-L16) because they are the same except for the variable. But for the menu parts, they are quite different so might not be suitable to use a shared template. So need some thoughts and advice about extracting the shared template from these two headers. --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Introduce GitHub markdown editor, keep EasyMDE as fallback (#23876)wxiaoguang2023-04-031-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | The first step of the plan * #23290 Thanks to @silverwind for the first try in #15394 . Close #10729 and a lot of related issues. The EasyMDE is not removed, now it works as a fallback, users can switch between these two editors. Editor list: * Issue / PR comment * Issue / PR comment edit * Issue / PR comment quote reply * PR diff view, inline comment * PR diff view, inline comment edit * PR diff view, inline comment quote reply * Release editor * Wiki editor Some editors have attached dropzone Screenshots: <details> ![image](https://user-images.githubusercontent.com/2114189/229363558-7e44dcd4-fb6d-48a0-92f8-bd12f57bb0a0.png) ![image](https://user-images.githubusercontent.com/2114189/229363566-781489c8-5306-4347-9714-d71af5d5b0b1.png) ![image](https://user-images.githubusercontent.com/2114189/229363771-1717bf5c-0f2a-4fc2-ba84-4f5b2a343a11.png) ![image](https://user-images.githubusercontent.com/2114189/229363793-ad362d0f-a045-47bd-8f9d-05a9a842bb39.png) </details> --------- Co-authored-by: silverwind <me@silverwind.io>
* Replace Less with CSS (#23481)silverwind2023-03-141-0/+40
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