2020-10-19 22:01:06 +02:00
: root {
2022-10-12 18:26:27 +02:00
/* fonts */
2025-10-17 14:40:51 +02:00
--fonts-proportional : -apple-system , "Segoe UI" , system-ui , "Noto Sans" , "Noto Sans Hebrew" , Roboto , "Helvetica Neue" , Arial ;
2023-04-30 20:58:32 +02:00
--fonts-monospace : ui-monospace , SFMono-Regular , "SF Mono" , Menlo , Monaco , Consolas , "Liberation Mono" , "Courier New" , monospace , var ( --fonts-emoji ) ;
2021-03-19 00:43:43 +01:00
--fonts-emoji : "Apple Color Emoji" , "Segoe UI Emoji" , "Noto Color Emoji" , "Twemoji Mozilla" ;
2023-05-22 16:47:33 +08:00
/* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
2023-05-22 01:37:32 +02:00
--font-weight-light : 300 ;
--font-weight-normal : 400 ;
--font-weight-medium : 500 ;
--font-weight-semibold : 600 ;
2023-05-25 04:31:26 +02:00
--font-weight-bold : 700 ;
2023-08-18 05:50:32 +08:00
/* line-height: use the default value as "modules/normalize.css" */
2023-08-22 18:19:15 +08:00
--line-height-default : normal ;
2023-10-06 09:46:36 +02:00
/* images */
2022-10-12 18:26:27 +02:00
--checkbox-mask-checked : url ( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>' ) ;
--checkbox-mask-indeterminate : url ( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>' ) ;
2023-06-07 10:49:48 +08:00
--octicon-chevron-right : url ( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>' ) ;
2023-10-06 09:46:36 +02:00
/* other variables */
2023-08-28 21:43:59 +02:00
--border-radius : 4px ;
--border-radius-medium : 6px ;
2025-04-19 13:51:35 +00:00
--border-radius-large : 25px ;
2024-05-27 16:09:52 +05:00
--border-radius-full : 99999px ; /* TODO: use calc(infinity * 1px) */
2023-03-15 03:20:19 +01:00
--opacity-disabled : 0 . 55 ;
2023-04-17 12:10:22 +02:00
--height-loading : 16rem ;
2024-03-28 18:23:57 +05:00
--repo-header-issue-min-height : 41px ;
2024-02-18 15:51:21 +01:00
--min-height-textarea : 132px ; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
2023-05-28 20:04:35 +02:00
--tab-size : 4 ;
2024-04-09 05:09:43 +02:00
--checkbox-size : 15px ; /* height and width of checkbox and radio inputs */
2024-04-07 17:45:36 +02:00
--page-spacing : 16px ; /* space between page elements */
2024-04-10 08:13:22 +02:00
--page-margin-x : 32px ; /* minimum space on left and right side of page */
2025-03-27 21:01:29 +00:00
--button-spacing : 0 . 33rem ;
2024-04-10 08:13:22 +02:00
}
@ media ( min-width : 768px ) and ( max-width : 1200px ) {
: root {
--page-margin-x : 16px ;
}
}
@ media ( max-width : 767 . 98px ) {
: root {
--page-margin-x : 8px ;
}
2020-10-19 22:01:06 +02:00
}
2025-03-27 21:01:29 +00:00
@ media ( pointer : coarse ) {
: root {
--button-spacing : 0 . 5rem ;
}
}
2021-03-19 00:43:43 +01:00
: root * {
2025-10-17 14:40:51 +02:00
--fonts-regular : var ( --fonts-override , var ( --fonts-proportional ) ) , "Liberation Sans" , sans-serif , var ( --fonts-emoji ) ;
2019-03-18 12:49:01 +00:00
}
Add tailwindcss (#29357)
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>
(cherry picked from commit f4b92578b4601bc6e9b631b9a5a5f3766c27b0cb)
2024-02-25 17:46:46 +01:00
* , :: before , :: after {
/ * these are needed for tailwind borders to work because we do not load tailwind ' s base
https : / / github . com / tailwindlabs / tailwindcss / blob / master / src / css / preflight . css * /
border-width : 0 ;
border-style : solid ;
border-color : currentcolor ;
}
2024-03-22 12:47:50 +01:00
html , body {
height : 100 % ;
font-size : 14px ;
}
body {
2024-04-06 23:33:45 +02:00
line-height : 20px ;
2024-03-22 12:47:50 +01:00
font-family : var ( --fonts-regular ) ;
color : var ( --color-text ) ;
background-color : var ( --color-body ) ;
tab-size : var ( --tab-size ) ;
display : flex ;
flex-direction : column ;
overflow-x : visible ;
overflow-wrap : break-word ;
2026-02-18 18:58:16 +01:00
text-autospace : normal ;
text-spacing-trim : normal ;
2024-03-22 12:47:50 +01:00
}
2020-11-08 19:01:38 +01:00
textarea {
2020-10-19 22:01:06 +02:00
font-family : var ( --fonts-regular ) ;
}
2019-03-18 12:49:01 +00:00
2020-12-18 21:00:07 +01:00
pre ,
2020-11-06 18:16:21 +01:00
code ,
kbd ,
samp {
font-family : var ( --fonts-monospace ) ;
}
2026-02-18 18:58:16 +01:00
pre ,
code ,
kbd ,
samp ,
tt {
text-spacing : none ;
text-autospace : initial ;
text-spacing-trim : initial ;
}
2024-03-28 09:31:07 +01:00
pre ,
code ,
kbd ,
samp ,
. tw-font-mono {
font-size : 0 . 95em ; /* compensate for monospace fonts being usually slightly larger */
}
2025-06-10 22:59:24 +02:00
kbd {
padding : 0 . 15em 0 . 35em ;
line-height : 10px ;
color : var ( --color-text-light ) ;
vertical-align : middle ;
background-color : var ( --color-markup-code-inline ) ;
border : 1px solid var ( --color-secondary ) ;
border-radius : var ( --border-radius ) ;
box-shadow : inset 0 -1px 0 var ( --color-secondary ) ;
}
2020-11-15 21:58:16 +01:00
b ,
2020-12-05 12:00:36 +01:00
strong ,
2020-11-25 12:20:40 +01:00
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 {
2023-05-22 01:37:32 +02:00
font-weight : var ( --font-weight-semibold ) ;
2020-11-25 12:20:40 +01:00
}
2024-03-22 12:47:50 +01:00
h1 ,
h2 ,
h3 ,
h4 ,
h5 {
line-height : 1 . 28571429 ;
margin : calc ( 2rem - 0 . 1428571428571429em ) 0 1rem ;
font-weight : var ( --font-weight-medium ) ;
padding : 0 ;
}
h1 {
min-height : 1rem ;
font-size : 2rem ;
}
h2 {
font-size : 1 . 71428571rem ;
}
h3 {
font-size : 1 . 28571429rem ;
}
h4 {
font-size : 1 . 07142857rem ;
}
h5 {
font-size : 1rem ;
}
h1 : first-child ,
h2 : first-child ,
h3 : first-child ,
h4 : first-child ,
h5 : first-child {
margin-top : 0 ;
}
h1 : last-child ,
h2 : last-child ,
h3 : last-child ,
h4 : last-child ,
h5 : last-child {
margin-bottom : 0 ;
}
p {
margin : 0 0 1em ;
line-height : 1 . 4285 ;
}
p : first-child {
margin-top : 0 ;
}
p : last-child {
margin-bottom : 0 ;
2015-07-24 04:50:05 +08:00
}
2019-03-18 12:49:01 +00:00
2018-09-09 20:11:49 +02:00
table {
2020-08-25 21:48:53 +02:00
border-collapse : collapse ;
2018-09-09 20:11:49 +02:00
}
2019-05-13 08:26:32 +02:00
2023-03-30 14:06:10 +02:00
button {
cursor : pointer ;
}
2021-05-23 02:45:39 +02:00
details summary {
cursor : pointer ;
}
details summary > * {
display : inline ;
}
2022-05-20 05:04:45 +02:00
progress {
2022-06-15 06:28:24 +02:00
background : var ( --color-secondary-dark-1 ) ;
2023-08-28 21:43:59 +02:00
border-radius : var ( --border-radius ) ;
2022-05-20 05:04:45 +02:00
border : none ;
overflow : hidden ;
}
2023-03-15 03:20:19 +01:00
2022-05-20 05:04:45 +02:00
progress :: -webkit-progress-bar {
2022-06-15 06:28:24 +02:00
background : var ( --color-secondary-dark-1 ) ;
2022-05-20 05:04:45 +02:00
}
2023-03-15 03:20:19 +01:00
2022-05-20 05:04:45 +02:00
progress :: -webkit-progress-value {
2022-10-23 06:05:20 +02:00
background-color : var ( --color-accent ) ;
2022-05-20 05:04:45 +02:00
}
2023-03-15 03:20:19 +01:00
2022-05-20 05:04:45 +02:00
progress :: -moz-progress-bar {
2022-10-23 06:05:20 +02:00
background-color : var ( --color-accent ) ;
2022-05-20 05:04:45 +02:00
}
2024-02-25 15:59:12 +05:00
h1 . error-code {
font-size : 15em ;
2024-02-25 23:44:00 +01:00
font-weight : var ( --font-weight-bold ) ;
2024-02-25 15:59:12 +05:00
color : transparent ;
--error-code-color-1 : # a2a2a2 ;
--error-code-color-2 : # 797979 ;
2024-02-25 23:44:00 +01:00
--gradient : repeating-linear-gradient ( 45deg , var ( --error-code-color-1 ) , var ( --error-code-color-1 ) 10px , var ( --error-code-color-2 ) 10px , var ( --error-code-color-2 ) 20px ) ;
background : var ( --gradient ) ;
2024-02-25 15:59:12 +05:00
background-clip : text ;
}
2020-10-31 04:52:10 +01:00
* {
2021-05-05 20:14:04 +02:00
caret-color : var ( --color-caret ) ;
2020-10-31 04:52:10 +01:00
}
2022-10-23 06:05:20 +02:00
:: file-selector-button {
border : 1px solid var ( --color-light-border ) ;
color : var ( --color-text-light ) ;
background : var ( --color-light ) ;
border-radius : var ( --border-radius ) ;
}
2023-03-15 03:20:19 +01:00
2022-10-23 06:05:20 +02:00
:: file-selector-button : hover {
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
}
2026-02-11 15:34:31 +01:00
:: selection ,
relative-time :: part ( relative-time ) :: selection {
background : var ( --color-selection-bg ) ;
color : var ( --color-selection-fg ) ;
2020-10-31 04:52:10 +01:00
}
2020-11-05 02:51:17 +01:00
:: placeholder ,
2021-04-03 10:37:32 +02:00
. ui . dropdown : not ( . button ) > . default . text ,
. ui . default . dropdown : not ( . button ) > . text {
color : var ( --color-placeholder-text ) ! important ;
2020-11-05 02:51:17 +01:00
opacity : 1 ! important ;
}
2023-03-15 03:20:19 +01:00
. unselectable ,
. button ,
. lines-num ,
. lines-commit ,
. lines-commit . blame-info ,
. ellipsis-button {
-webkit-touch-callout : none ;
-webkit-user-select : none ;
user-select : none ;
}
2024-04-11 23:02:27 +05:00
. ui . partial . secondary . menu {
margin-bottom : 0 ;
}
2023-05-01 17:40:02 +02:00
a {
2020-10-31 04:52:10 +01:00
color : var ( --color-primary ) ;
2020-08-25 21:48:53 +02:00
cursor : pointer ;
2024-03-24 13:14:03 +01:00
text-decoration-line : none ;
2021-12-17 21:29:00 -08:00
text-decoration-skip-ink : all ;
2019-02-05 22:59:26 +01:00
}
2019-05-13 08:26:32 +02:00
2024-03-24 13:14:03 +01:00
a : hover {
text-decoration-line : underline ;
}
2024-03-16 17:58:58 +01:00
/* a = always colored, underlined on hover */
/* a.muted = colored on hover, underlined on hover */
/* a.suppressed = never colored, underlined on hover */
/* a.silenced = never colored, never underlined */
2023-05-16 00:46:51 +02:00
2022-11-19 05:02:30 +01:00
a . muted ,
2024-03-16 17:58:58 +01:00
a . suppressed ,
2023-05-16 00:46:51 +02:00
a . silenced ,
2022-11-19 05:02:30 +01:00
. muted-links a {
2020-11-29 07:22:04 +01:00
color : inherit ;
}
2020-10-31 04:52:10 +01:00
a : hover ,
2024-03-16 17:58:58 +01:00
a . suppressed : hover ,
2020-11-29 07:22:04 +01:00
a . muted : hover ,
2022-07-22 07:49:24 -03:00
a . muted : hover [ class * = "color-text" ] ,
2023-05-01 17:40:02 +02:00
. muted-links a : hover {
2021-12-17 21:29:00 -08:00
color : var ( --color-primary ) ;
}
2024-03-16 17:58:58 +01:00
a . silenced : hover ,
a . suppressed : hover {
2023-05-16 00:46:51 +02:00
color : inherit ;
2024-03-16 17:58:58 +01:00
}
a . silenced : hover {
2024-03-24 13:14:03 +01:00
text-decoration-line : none ;
2023-05-16 00:46:51 +02:00
}
2021-12-17 21:29:00 -08:00
a . label ,
. ui . search . results a ,
. ui . menu a ,
2022-01-13 06:33:04 -08:00
. ui . cards a . card ,
2023-02-20 09:43:04 +01:00
. issue-keyword a {
2024-03-24 13:14:03 +01:00
text-decoration-line : none ! important ;
2021-12-17 21:29:00 -08:00
}
2022-09-23 05:00:29 +02:00
. ui . search > . results {
background : var ( --color-body ) ;
border-color : var ( --color-secondary ) ;
2024-02-01 18:10:16 +01:00
overflow-wrap : anywhere ; /* allow text to wrap as fomantic limits this to 18em width */
2022-09-23 05:00:29 +02:00
}
. ui . search > . results . result {
background : var ( --color-body ) ;
2024-02-01 18:10:16 +01:00
border-color : var ( --color-secondary ) ;
display : flex ;
align-items : center ;
2022-09-23 05:00:29 +02:00
}
. ui . search > . results . result . title {
color : var ( --color-text-dark ) ;
}
2023-02-15 03:05:19 +08:00
. ui . search > . results . result . description {
color : var ( --color-text-light-2 ) ;
}
2022-09-23 05:00:29 +02:00
. ui . search > . results . result . image {
width : auto ;
height : auto ;
}
. ui . search > . results . result : hover ,
. ui . category . search > . results . category . result : hover {
background : var ( --color-hover ) ;
}
feat: "Add member" button in org members list (#11848)
Fixes #1529.
This adds an "Add member" button to the list of members of an organization, offering a more intuitive way to add a user to an organization (instead of going through the list of teams).
This follows the design proposed in #1529. This PR can already be reviewed as such, but I plan to work on follow-up improvements:
- adding a confirmation dialog when adding the new member to the "Owners" team, since they get absolute rights on the org
- adding a text input to filter the list of teams, making it easier to select the desired teams when there are many of them
- potentially, improving the team creation link so that it brings the user back to the modal dialog once the team is created (but I'm not sure there's a ton of value behind this added complexity, since currently, creating a team will lead the user to the team page, which is a good place to add the member to the team)
This new way of adding members does not support issuing email invites, since we decided in #9884 that the invite feature hasn't got good enough of a UX to advertise it yet. Following [this discussion](https://codeberg.org/forgejo/discussions/issues/441), I am planning to work on enabling invites everywhere (potentially even making it the default).
## Checklist
### Tests for Go changes
- I added test coverage for Go changes...
- [ ] in their respective `*_test.go` for unit tests.
- [x] in the `tests/integration` directory if it involves interactions with a live Forgejo server.
- I ran...
- [x] `make pr-go` before pushing
### Tests for JavaScript changes
- I added test coverage for JavaScript changes...
- [ ] in `web_src/js/*.test.js` if it can be unit tested.
- [x] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)).
### Documentation
I plan to update https://docs.codeberg.org/collaborating/create-organization/#people once we are ready to take final screenshots of the feature.
### Release notes
- [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change.
- [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change.
### Screenshots
<!--start release-notes-assistant-->
## Release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- Features
- [PR](https://codeberg.org/forgejo/forgejo/pulls/11848): <!--number 11848 --><!--line 0 --><!--description IkFkZCBtZW1iZXIiIGJ1dHRvbiBpbiBvcmcgbWVtYmVycyBsaXN0-->"Add member" button in org members list<!--description-->
<!--end release-notes-assistant-->
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11848
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Mathieu Fenniak <mfenniak@noreply.codeberg.org>
Co-authored-by: Antonin Delpeuch <antonin@delpeuch.eu>
Co-committed-by: Antonin Delpeuch <antonin@delpeuch.eu>
2026-03-31 02:56:12 +02:00
. ui . search > . results . content {
padding : 0 ;
background : none ;
}
2023-08-31 07:01:01 +02:00
. inline-code-block {
2022-10-15 21:24:41 +03:00
padding : 2px 4px ;
2024-03-28 11:42:31 +01:00
border-radius : . 24em ;
background-color : var ( --color-label-bg ) ;
2022-10-15 21:24:41 +03:00
}
2023-03-15 03:20:19 +01:00
2024-03-24 15:04:18 +01:00
. ui . menu {
display : flex ;
}
2020-12-09 20:03:19 +01:00
. ui . menu ,
. ui . vertical . menu {
2020-11-29 07:22:04 +01:00
background : var ( --color-menu ) ;
border-color : var ( --color-secondary ) ;
2024-03-24 17:48:06 +01:00
box-shadow : none ;
2020-11-29 07:22:04 +01:00
}
. ui . menu . item {
color : var ( --color-text ) ;
2023-03-15 03:20:19 +01:00
user-select : auto ;
2023-08-18 05:50:32 +08:00
line-height : var ( --line-height-default ) ; /* fomantic uses "1" which causes overflow problems because "1" doesn't consider the descent part */
2023-03-15 03:20:19 +01:00
}
2021-02-14 11:49:22 -05:00
2023-03-15 03:20:19 +01:00
. ui . menu . item > . svg {
margin-right : 0 . 35em ;
2020-11-29 07:22:04 +01:00
}
. ui . menu . dropdown . item : hover ,
2023-06-07 10:49:48 +08:00
. ui . menu a . item : hover ,
. ui . menu details . item summary : hover {
2020-11-29 07:22:04 +01:00
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
}
. ui . menu . active . item ,
. ui . menu . active . item : hover ,
2020-12-09 20:03:19 +01:00
. ui . vertical . menu . active . item ,
2020-11-29 07:22:04 +01:00
. ui . vertical . menu . active . item : hover {
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
. ui . menu a . item : active {
color : var ( --color-text ) ;
background : none ;
}
2020-12-04 12:18:37 +01:00
. ui . ui . menu . item . disabled {
2020-12-20 19:00:03 +01:00
color : var ( --color-text-light-3 ) ;
}
2023-05-31 00:28:25 +02:00
. ui . menu . item :: before , . ui . vertical . menu . item :: before {
2023-04-30 05:33:25 +02:00
background : var ( --color-secondary ) ;
}
2023-04-28 08:08:47 +08:00
/* sub menu of vertical menu */
. ui . vertical . menu . item . menu . item {
color : var ( --color-text-light-2 ) ;
text-indent : 16px ;
}
. ui . vertical . menu . item . menu . item : hover ,
. ui . vertical . menu . item . menu a . item : hover {
color : var ( --color-text-light-1 ) ;
}
. ui . vertical . menu . item . menu . active . item {
color : var ( --color-text ) ;
}
2020-12-20 19:00:03 +01:00
/* slightly more contrast for filters on issue list */
. ui . ui . menu . dropdown . item . disabled {
2020-12-04 12:18:37 +01:00
color : var ( --color-text-light-2 ) ;
}
2020-11-29 07:22:04 +01:00
. ui . dropdown . menu {
background : var ( --color-menu ) ;
border-color : var ( --color-secondary ) ;
}
. ui . dropdown . menu > . header : not ( . ui ) {
color : var ( --color-text ) ;
}
. ui . dropdown . menu > . item {
color : var ( --color-text ) ;
2024-04-16 10:52:45 +02:00
overflow : hidden ;
text-overflow : ellipsis ;
2020-11-29 07:22:04 +01:00
}
. ui . dropdown . menu > . item : hover {
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
}
2023-05-28 03:34:18 +02:00
. ui . dropdown . menu > . item : active {
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
2020-11-29 07:22:04 +01:00
. ui . dropdown . menu . active . item {
2020-12-04 12:18:37 +01:00
color : var ( --color-text ) ;
background : var ( --color-active ) ;
2023-05-31 00:28:25 +02:00
border-radius : 0 ;
2023-05-22 01:37:32 +02:00
font-weight : var ( --font-weight-normal ) ;
2020-11-29 07:22:04 +01:00
}
2020-12-09 01:12:15 +01:00
/* fix misaligned images in webhook dropdown */
. ui . dropdown . menu > . item > img {
2023-03-15 03:20:19 +01:00
margin-top : -0 . 25rem ;
margin-bottom : -0 . 25rem ;
2020-12-09 01:12:15 +01:00
}
2023-04-25 19:34:37 +08:00
. ui . dropdown . menu > . item > svg {
margin-right : . 78rem ; /* use the same margin as for <img> */
}
2023-03-15 03:20:19 +01:00
2020-11-29 07:22:04 +01:00
. ui . selection . dropdown . menu > . item {
border-color : var ( --color-secondary ) ;
2024-04-18 21:31:53 +02:00
white-space : nowrap ;
2020-11-29 07:22:04 +01:00
}
. ui . selection . visible . dropdown > . text : not ( . default ) {
color : var ( --color-text ) ;
}
. ui . dropdown . selected ,
. ui . dropdown . menu . selected . item {
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
}
2020-12-09 20:03:19 +01:00
. ui . menu . ui . dropdown . menu > . selected . item {
color : var ( --color-text ) ! important ;
background : var ( --color-hover ) ! important ;
}
. ui . dropdown . menu > . message : not ( . ui ) {
color : var ( --color-text-light-2 ) ;
}
2024-02-15 14:59:48 +01:00
/* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
. ui . dropdown > . text > . img {
margin-left : 0 ;
float : none ;
margin-right : 0 . 78571429rem ;
}
2023-07-28 21:18:12 +02:00
. ui . dropdown > . text > . description ,
. ui . dropdown . menu > . item > . description {
color : var ( --color-text-light-2 ) ;
}
2023-08-14 23:14:30 +08:00
/ * replace item margin on secondary menu items with gap and remove both the
negative margins on the menu as well as margin on the items * /
. ui . secondary . menu {
margin-left : 0 ;
margin-right : 0 ;
gap : . 35714286em ;
}
. ui . secondary . menu . item {
margin-left : 0 ;
margin-right : 0 ;
}
2020-11-29 07:22:04 +01:00
. ui . secondary . menu . dropdown . item : hover ,
. ui . secondary . menu a . item : hover {
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
}
. ui . secondary . menu . active . item ,
. ui . secondary . menu . active . item : hover {
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
2023-08-14 23:14:30 +08:00
/* remove the menu clearfix so that it won't add undesired gaps when using "gap" */
. ui . menu :: after {
content : normal ;
}
2020-11-29 07:22:04 +01:00
. ui . menu . dropdown . item . menu {
2023-06-09 10:37:47 +02:00
background : var ( --color-body ) ;
2020-11-29 07:22:04 +01:00
}
. ui . menu . ui . dropdown . menu > . item {
color : var ( --color-text ) ! important ;
}
. ui . menu . ui . dropdown . menu > . item : hover {
color : var ( --color-text ) ! important ;
background : var ( --color-hover ) ! important ;
}
. ui . menu . ui . dropdown . menu > . active . item {
color : var ( --color-text ) ! important ;
background : var ( --color-active ) ! important ;
}
2024-02-18 15:51:21 +01:00
. ui . form textarea : not ( [ rows ] ) {
height : var ( --min-height-textarea ) ; /* override fomantic default 12em */
min-height : var ( --min-height-textarea ) ; /* override fomantic default 8em */
}
2023-08-17 00:12:40 +02:00
/* styles from removed fomantic transition module */
. hidden . transition {
visibility : hidden ;
display : none ;
}
. visible . transition {
display : block ! important ;
visibility : visible ! important ;
}
2020-11-07 22:04:40 +01:00
. ui . selection . active . dropdown ,
. ui . selection . active . dropdown : hover ,
. ui . selection . active . dropdown . menu ,
. ui . selection . active . dropdown : hover . menu {
2023-08-17 00:12:40 +02:00
border-color : var ( --color-primary ) ;
2020-11-07 22:04:40 +01:00
}
2020-11-26 20:33:28 +01:00
. ui . pointing . dropdown > . menu : not ( . hidden ) :: after {
2023-05-28 03:34:18 +02:00
background : var ( --color-menu ) ;
2020-11-26 20:33:28 +01:00
box-shadow : -1px -1px 0 0 var ( --color-secondary ) ;
2020-12-05 11:09:09 +01:00
}
2023-05-28 03:34:18 +02:00
. ui . pointing . upward . dropdown . menu :: after ,
. ui . top . pointing . upward . dropdown . menu :: after {
box-shadow : 1px 1px 0 0 var ( --color-secondary ) ;
}
2021-05-08 17:28:25 +02:00
. ui . comments . comment . text {
margin : 0 ;
}
2020-12-17 16:52:58 +01:00
. ui . comments . comment . text ,
. ui . comments . comment . author {
color : var ( --color-text ) ;
}
. ui . comments . comment a . author : hover {
color : var ( --color-primary ) ;
}
. ui . comments . comment . metadata {
color : var ( --color-text-light-2 ) ;
}
. ui . comments . comment . actions a {
color : var ( --color-text-light ) ;
}
. ui . comments . comment . actions a . active ,
. ui . comments . comment . actions a : hover {
color : var ( --color-primary ) ;
}
2023-04-05 08:44:52 +08:00
img . ui . avatar ,
2022-09-12 11:08:46 +02:00
. ui . avatar img ,
2023-05-14 02:59:11 +08:00
. ui . avatar svg {
2020-12-03 19:46:11 +01:00
border-radius : var ( --border-radius ) ;
2023-05-14 02:59:11 +08:00
object-fit : contain ;
aspect-ratio : 1 ;
2020-12-03 19:46:11 +01:00
}
2022-01-07 01:18:52 +00:00
. ui . error . message . header ,
. ui . warning . message . header {
color : inherit ;
filter : saturate ( 2 ) ;
}
2015-03-07 15:12:13 -05:00
. full . height {
2020-08-25 21:48:53 +02:00
flex-grow : 1 ;
padding-bottom : 80px ;
2015-03-07 15:12:13 -05:00
}
2019-05-13 08:26:32 +02:00
2024-03-23 00:54:09 +01:00
/* add margin below .secondary nav when it is the first child */
. page-content > : first-child . secondary-nav {
margin-bottom : 14px ;
}
2024-04-07 17:45:36 +02:00
/* add margin to all pages when there is no .secondary.nav */
2024-03-23 00:54:09 +01:00
. page-content > : first-child : not ( . secondary-nav ) {
2024-04-07 17:45:36 +02:00
margin-top : var ( --page-spacing ) ;
}
/ * if . ui . grid is the first child the first grid-column has 'padding-top: 1rem' which we need
to compensate here * /
. page-content > : first-child . ui . grid {
margin-top : calc ( var ( --page-spacing ) - 1rem ) ;
2024-03-20 12:21:18 +01:00
}
2020-12-04 12:18:37 +01:00
. ui . pagination . menu . active . item {
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
2023-03-15 03:20:19 +01:00
. text . primary {
color : var ( --color-primary ) ! important ;
}
2019-05-13 08:26:32 +02:00
2023-03-15 03:20:19 +01:00
. text . red {
2025-10-12 10:01:24 +02:00
color : var ( --color-thin-red , var ( --color-red ) ) ! important ;
2023-03-15 03:20:19 +01:00
}
2017-10-27 07:30:54 +03:00
2023-03-15 03:20:19 +01:00
. text . orange {
2025-10-12 10:01:24 +02:00
color : var ( --color-thin-orange , var ( --color-orange ) ) ! important ;
2023-03-15 03:20:19 +01:00
}
2017-10-27 07:30:54 +03:00
2023-03-15 03:20:19 +01:00
. text . yellow {
color : var ( --color-yellow ) ! important ;
}
2017-10-27 07:30:54 +03:00
2023-03-15 03:20:19 +01:00
. text . green {
2025-10-12 10:01:24 +02:00
color : var ( --color-thin-green , var ( --color-green ) ) ! important ;
2023-03-15 03:20:19 +01:00
}
2018-05-11 05:28:26 +02:00
2023-03-15 03:20:19 +01:00
. text . teal {
color : var ( --color-teal ) ! important ;
}
2018-09-07 05:32:46 +03:00
2023-03-15 03:20:19 +01:00
. text . blue {
color : var ( --color-blue ) ! important ;
}
2017-12-05 07:31:33 +01:00
2023-03-15 03:20:19 +01:00
. text . purple {
2025-10-12 10:01:24 +02:00
color : var ( --color-thin-purple , var ( --color-purple ) ) ! important ;
2023-03-15 03:20:19 +01:00
}
2019-05-13 08:26:32 +02:00
2023-03-15 03:20:19 +01:00
. text . brown {
color : var ( --color-brown ) ! important ;
}
2019-04-11 16:09:41 -05:00
2023-03-15 03:20:19 +01:00
. text . black {
color : var ( --color-text ) ! important ;
}
2018-05-11 05:28:26 +02:00
2023-03-15 03:20:19 +01:00
. text . grey {
color : var ( --color-text-light ) ! important ;
}
2018-05-11 05:28:26 +02:00
2023-05-25 04:31:26 +02:00
. text . light {
color : var ( --color-text-light ) ! important ;
}
. text . light-2 {
color : var ( --color-text-light-2 ) ! important ;
}
. text . light-3 {
color : var ( --color-text-light-3 ) ! important ;
}
2023-03-15 03:20:19 +01:00
. text . light . grey {
color : var ( --color-grey-light ) ! important ;
}
2019-12-17 16:34:11 -05:00
2023-03-15 03:20:19 +01:00
. text . gold {
color : var ( --color-gold ) ! important ;
}
2019-11-19 19:44:58 -03:00
2023-08-30 12:37:17 +02:00
. text . small {
font-size : 0 . 75em ;
}
2023-03-15 03:20:19 +01:00
. ui . form . ui . button {
2023-05-22 01:37:32 +02:00
font-weight : var ( --font-weight-normal ) ;
2023-03-15 03:20:19 +01:00
}
2017-10-27 07:30:54 +03:00
2023-08-21 12:49:49 +02:00
/* replace fomantic popover box shadows */
2023-08-17 00:12:40 +02:00
. ui . dropdown . menu ,
. ui . upward . dropdown > . menu ,
. ui . menu . dropdown . item . menu ,
. ui . selection . active . dropdown . menu ,
. ui . upward . selection . dropdown . menu ,
. ui . selection . active . dropdown : hover . menu ,
. ui . upward . active . selection . dropdown : hover . menu {
box-shadow : 0 6px 18px var ( --color-shadow ) ;
}
2023-08-21 12:49:49 +02:00
. ui . floating . dropdown . menu {
box-shadow : 0 6px 18px var ( --color-shadow ) ! important ;
}
2023-08-17 00:12:40 +02:00
2023-03-15 03:20:19 +01:00
/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */
/* This fixes the commit graph button on the commits page */
/* modal svg icons, copied from fomantic except width and height */
/* center text in fomantic modal dialogs */
. ui . menu : not ( . vertical ) . item > . button . compact {
padding : 0 . 58928571em 1 . 125em ;
}
2021-11-23 11:44:10 +09:00
2023-03-15 03:20:19 +01:00
. ui . menu : not ( . vertical ) . item > . button . small {
font-size : 0 . 92857143rem ;
}
2017-10-27 07:30:54 +03:00
2023-03-15 03:20:19 +01:00
. ui . menu . ui . dropdown . item . menu . item {
width : 100 % ;
}
2017-10-27 07:30:54 +03:00
2023-03-15 03:20:19 +01:00
. ui . dropdown . menu > . header {
font-size : 0 . 8em ;
}
2019-05-13 08:26:32 +02:00
2023-03-15 03:20:19 +01:00
. ui . text . left {
text-align : left ! important ;
}
2019-05-13 08:26:32 +02:00
2023-03-15 03:20:19 +01:00
. ui . text . right {
text-align : right ! important ;
}
2019-05-13 08:26:32 +02:00
2023-03-15 03:20:19 +01:00
. ui . text . truncate {
2023-08-15 15:23:51 +02:00
overflow-x : hidden ;
2023-03-15 03:20:19 +01:00
text-overflow : ellipsis ;
white-space : nowrap ;
display : inline-block ;
}
2017-10-27 07:30:54 +03:00
2023-05-04 02:32:10 +08:00
. ui . message . flash-message {
2023-03-15 03:20:19 +01:00
text-align : center ;
}
2021-09-18 18:22:51 +02:00
2023-03-15 03:20:19 +01:00
. ui . message > ul {
margin-left : auto ;
margin-right : auto ;
display : table ;
text-align : left ;
}
2019-09-16 11:03:22 +02:00
2023-03-15 03:20:19 +01:00
. ui . header > i + . content {
padding-left : 0 . 75rem ;
vertical-align : middle ;
}
2019-09-16 11:03:22 +02:00
2023-03-15 03:20:19 +01:00
. ui . form . autofill-dummy {
position : absolute ;
width : 1px ;
height : 1px ;
overflow : hidden ;
z-index : -10000 ;
}
2019-09-16 11:03:22 +02:00
2023-03-15 03:20:19 +01:00
. ui . form . sub . field {
margin-left : 25px ;
}
2019-09-16 11:03:22 +02:00
2023-03-15 03:20:19 +01:00
. ui . button . truncate {
display : inline-block ;
max-width : 100 % ;
overflow : hidden ;
text-overflow : ellipsis ;
vertical-align : top ;
white-space : nowrap ;
margin-right : 6px ;
}
2019-04-08 08:31:54 +02:00
2023-03-15 03:20:19 +01:00
. ui . status . buttons . svg {
margin-right : 4px ;
}
2020-08-25 21:48:53 +02:00
2023-03-15 03:20:19 +01:00
. ui . inline . delete-button {
padding : 8px 15px ;
2023-05-22 01:37:32 +02:00
font-weight : var ( --font-weight-normal ) ;
2023-03-15 03:20:19 +01:00
}
2020-08-25 21:48:53 +02:00
2023-03-15 03:20:19 +01:00
. ui . migrate {
color : var ( --color-text-light-2 ) ! important ;
}
. ui . migrate a {
color : var ( --color-text-light ) ! important ;
}
. ui . migrate a : hover {
color : var ( --color-text ) ! important ;
}
. ui . border {
border : 1px solid ;
}
. ui . border . red {
border-color : var ( --color-red ) ! important ;
}
. ui . border . blue {
border-color : var ( --color-blue ) ! important ;
}
. ui . border . black {
border-color : var ( --color-black ) ! important ;
}
. ui . border . grey {
border-color : var ( --color-grey ) ! important ;
}
. ui . border . light . grey {
border-color : var ( --color-grey ) ! important ;
2015-03-07 15:12:13 -05:00
}
2015-08-12 12:12:06 +02:00
2023-03-15 03:20:19 +01:00
. ui . border . green {
border-color : var ( --color-green ) ! important ;
}
. ui . border . purple {
border-color : var ( --color-purple ) ! important ;
}
. ui . border . yellow {
border-color : var ( --color-yellow ) ! important ;
}
. ui . border . orange {
border-color : var ( --color-orange ) ! important ;
}
. ui . border . gold {
border-color : var ( --color-gold ) ! important ;
}
2023-06-09 11:10:51 +02:00
@ media ( max-width : 767 . 98px ) {
2023-03-15 03:20:19 +01:00
. ui . pagination . menu . item : not ( . active , . navigation ) ,
. ui . pagination . menu . item . navigation span . navigation_label {
2025-04-23 23:39:27 +02:00
position : absolute ;
width : 1px ;
height : 1px ;
padding : 0 ;
margin : -1px ;
overflow : hidden ;
clip : rect ( 0 , 0 , 0 , 0 ) ;
white-space : nowrap ;
border-width : 0 ;
2020-08-25 21:48:53 +02:00
}
2015-08-26 12:39:32 +08:00
}
2023-03-15 03:20:19 +01:00
. ui . pagination . menu . narrow . item {
padding-left : 8px ;
padding-right : 8px ;
min-width : 1em ;
text-align : center ;
}
. ui . pagination . menu . narrow . item . icon {
margin-right : 0 ;
}
. ui . floating . dropdown . overflow . menu . scrolling . menu . items {
border-radius : 0 ! important ;
box-shadow : none ! important ;
border-bottom : 1px solid var ( --color-secondary ) ;
}
2018-09-27 22:58:38 +02:00
. user-menu > . item {
2020-08-25 21:48:53 +02:00
width : 100 % ;
border-radius : 0 ! important ;
2018-09-27 22:58:38 +02:00
}
2023-03-15 03:20:19 +01:00
. scrolling . menu . item . selected {
2023-05-22 01:37:32 +02:00
font-weight : var ( --font-weight-semibold ) ! important ;
2015-08-31 17:10:28 +09:00
}
2020-12-09 20:03:19 +01:00
. ui . dropdown . scrolling . menu {
border-color : var ( --color-secondary ) ;
}
2022-10-21 15:00:53 +03:00
. color-preview {
display : inline-block ;
2023-03-15 03:20:19 +01:00
margin-left : 0 . 4em ;
height : 0 . 67em ;
width : 0 . 67em ;
2023-08-28 21:43:59 +02:00
border-radius : var ( --border-radius ) ;
2022-10-21 15:00:53 +03:00
}
2024-03-16 19:34:38 +08:00
. attention-icon {
2024-03-23 18:42:38 +01:00
margin : auto 0 . 5em auto 0 ;
2024-03-16 19:34:38 +08:00
}
2024-04-03 21:52:30 +02:00
. attention-title {
align-items : center ;
display : flex ;
}
2024-02-10 20:43:09 +02:00
blockquote . attention-note {
border-left-color : var ( --color-blue-dark-1 ) ;
}
2024-03-16 19:34:38 +08:00
strong . attention-note , svg . attention-note {
2024-02-10 20:43:09 +02:00
color : var ( --color-blue-dark-1 ) ;
}
blockquote . attention-tip {
border-left-color : var ( --color-success-text ) ;
}
2024-03-16 19:34:38 +08:00
strong . attention-tip , svg . attention-tip {
2024-02-10 20:43:09 +02:00
color : var ( --color-success-text ) ;
2022-11-09 02:11:26 +02:00
}
2024-02-10 20:43:09 +02:00
blockquote . attention-important {
border-left-color : var ( --color-violet-dark-1 ) ;
}
2024-03-16 19:34:38 +08:00
strong . attention-important , svg . attention-important {
2024-02-10 20:43:09 +02:00
color : var ( --color-violet-dark-1 ) ;
}
blockquote . attention-warning {
border-left-color : var ( --color-warning-text ) ;
}
2024-03-16 19:34:38 +08:00
strong . attention-warning , svg . attention-warning {
2022-11-09 02:11:26 +02:00
color : var ( --color-warning-text ) ;
}
2024-02-10 20:43:09 +02:00
blockquote . attention-caution {
border-left-color : var ( --color-red-dark-1 ) ;
}
2024-03-16 19:34:38 +08:00
strong . attention-caution , svg . attention-caution {
2024-02-10 20:43:09 +02:00
color : var ( --color-red-dark-1 ) ;
}
2020-12-20 04:13:12 +01:00
. center : not ( . popup ) {
2020-08-25 21:48:53 +02:00
text-align : center ;
2015-07-08 19:47:56 +08:00
}
2024-03-15 03:05:31 +01:00
overflow-menu {
2020-11-26 20:33:28 +01:00
border-bottom : 1px solid var ( --color-secondary ) ! important ;
2024-03-15 03:05:31 +01:00
display : flex ;
2026-03-17 23:03:17 +01:00
overflow-x : auto ;
2017-03-15 22:39:38 +00:00
}
2017-05-24 02:00:40 -04:00
2024-03-15 03:05:31 +01:00
overflow-menu . overflow-menu-items {
2020-11-26 20:33:28 +01:00
display : flex ;
2024-03-15 03:05:31 +01:00
flex : 1 ;
2020-11-29 16:52:11 +01:00
}
2024-03-15 03:05:31 +01:00
overflow-menu . overflow-menu-items . item {
2023-05-02 00:08:37 +08:00
margin-bottom : 0 ! important ; /* reset fomantic's margin, because the active menu has special bottom border */
2025-04-21 07:25:17 +00:00
height : 100 % ;
2020-11-26 20:33:28 +01:00
}
2019-05-13 08:26:32 +02:00
2025-03-28 11:47:58 +00:00
overflow-menu . overflow-menu-items . item > . svg {
2025-04-21 07:25:17 +00:00
align-self : center ;
2025-03-28 11:47:58 +00:00
}
2024-03-23 00:54:09 +01:00
overflow-menu . ui . label {
margin-left : 7px ! important ; /* save some space */
}
2020-01-20 12:07:30 +02:00
. activity-bar-graph {
2020-11-07 22:04:40 +01:00
background-color : var ( --color-primary ) ;
2022-10-23 06:05:20 +02:00
color : var ( --color-primary-contrast ) ;
2020-01-20 12:07:30 +02:00
}
2019-05-13 08:26:32 +02:00
. archived-icon {
2022-11-23 01:22:27 +01:00
color : var ( --color-secondary-dark-2 ) ! important ;
2019-01-23 19:58:38 +01:00
}
2019-03-08 17:42:50 +01:00
. oauth2-authorize-application-box {
2020-08-25 21:48:53 +02:00
margin-top : 3em ! important ;
2019-03-08 17:42:50 +01:00
}
2019-04-29 20:49:59 +02:00
2019-07-12 19:44:28 +02:00
/* multiple radio or checkboxes as inline element */
. inline-grouped-list {
2020-08-25 21:48:53 +02:00
display : inline-block ;
vertical-align : top ;
2023-03-15 03:20:19 +01:00
}
2019-07-12 19:44:28 +02:00
2023-03-15 03:20:19 +01:00
. inline-grouped-list > . ui {
display : block ;
margin-top : 5px ;
margin-bottom : 10px ;
}
2019-07-12 19:44:28 +02:00
2023-03-15 03:20:19 +01:00
. inline-grouped-list > . ui : first-child {
margin-top : 1px ;
2019-07-12 19:44:28 +02:00
}
2019-08-08 16:46:03 +02:00
2024-03-27 10:58:02 +01:00
. ui . menu . item > . label {
2023-05-19 18:30:24 +02:00
background : var ( --color-label-bg ) ;
color : var ( --color-label-text ) ;
}
2024-07-12 11:12:51 +00:00
. ui . menu . active . item > . label ,
. ui . menu . tabs-with-labels . item : hover > . label {
2024-03-31 21:26:06 +05:00
background : var ( --color-label-bg-alt , var ( --color-label-bg ) ) ;
}
2021-06-28 01:13:20 +02:00
. lines-blame-btn {
2024-03-24 13:14:03 +01:00
padding : 0 0 0 5px ;
display : flex ;
justify-content : center ;
2021-06-28 01:13:20 +02:00
}
2019-08-08 16:46:03 +02:00
. lines-num {
2024-03-24 13:14:03 +01:00
padding : 0 8px ;
2020-08-25 21:48:53 +02:00
text-align : right ! important ;
2024-03-24 13:14:03 +01:00
color : var ( --color-text-light-2 ) ;
2020-08-25 21:48:53 +02:00
width : 1 % ;
2020-10-19 22:01:06 +02:00
font-family : var ( --fonts-monospace ) ;
2023-03-15 03:20:19 +01:00
}
2020-08-25 21:48:53 +02:00
2023-03-15 03:20:19 +01:00
. lines-num span . bottom-line :: after {
border-bottom : 1px solid var ( --color-secondary ) ;
}
. lines-num span :: after {
content : attr ( data-line-number ) ;
line-height : 20px ! important ;
padding : 0 10px ;
cursor : pointer ;
display : block ;
2019-08-08 16:46:03 +02:00
}
2020-06-30 17:34:03 -04:00
. lines-type-marker {
2020-08-25 21:48:53 +02:00
vertical-align : top ;
2020-06-30 17:34:03 -04:00
}
2019-08-08 16:46:03 +02:00
. lines-num ,
. lines-code {
2020-12-20 19:00:03 +01:00
font-size : 12px ;
font-family : var ( --fonts-monospace ) ;
line-height : 20px ;
2020-08-25 21:48:53 +02:00
padding-top : 0 ;
padding-bottom : 0 ;
vertical-align : top ;
2023-03-15 03:20:19 +01:00
}
2019-08-08 16:46:03 +02:00
2023-03-15 03:20:19 +01:00
. lines-num pre ,
. lines-code pre ,
. lines-num ol ,
. lines-code ol {
background-color : inherit ;
margin : 0 ;
padding : 0 ! important ;
}
. lines-num pre li ,
. lines-code pre li ,
. lines-num ol li ,
. lines-code ol li {
display : block ;
width : calc ( 100 % - 1ch ) ;
padding-left : 1ch ;
2019-08-08 16:46:03 +02:00
}
2020-11-04 08:14:07 +01:00
. code-inner {
font : 12px var ( --fonts-monospace ) ;
white-space : pre-wrap ;
word-break : break-all ;
2023-03-04 12:48:59 +08:00
overflow-wrap : anywhere ;
2024-04-10 07:44:48 +02:00
line-height : inherit ; /* needed for inline code preview in markup */
2020-11-04 08:14:07 +01:00
}
. blame . code-inner {
2024-03-24 13:14:03 +01:00
white-space : pre-wrap ;
overflow-wrap : anywhere ;
2020-11-04 08:14:07 +01:00
}
2019-08-08 16:46:03 +02:00
. lines-commit {
2020-08-25 21:48:53 +02:00
vertical-align : top ;
2024-03-24 13:14:03 +01:00
color : var ( --color-text-light-1 ) ;
2020-08-25 21:48:53 +02:00
padding : 0 ! important ;
width : 1 % ;
2023-03-15 03:20:19 +01:00
}
2020-08-25 21:48:53 +02:00
2023-03-15 03:20:19 +01:00
. lines-commit . blame-info {
2024-03-24 13:14:03 +01:00
width : min ( 26vw , 300px ) ;
2023-03-15 03:20:19 +01:00
display : block ;
2024-03-24 13:14:03 +01:00
padding : 0 0 0 6px ;
2023-03-15 03:20:19 +01:00
line-height : 20px ;
box-sizing : content-box ;
}
2020-08-25 21:48:53 +02:00
2023-03-15 03:20:19 +01:00
. lines-commit . blame-info . blame-data {
display : flex ;
font-family : var ( --fonts-regular ) ;
}
. lines-commit . blame-info . blame-data . blame-message {
flex-grow : 2 ;
overflow : hidden ;
white-space : nowrap ;
text-overflow : ellipsis ;
}
. lines-commit . blame-info . blame-data . blame-time ,
. lines-commit . blame-info . blame-data . blame-avatar {
flex-shrink : 0 ;
}
2024-03-24 13:14:03 +01:00
. blame-avatar {
display : flex ;
align-items : center ;
margin-right : 4px ;
2019-08-08 16:46:03 +02:00
}
2021-06-28 01:13:20 +02:00
. top-line-blame {
border-top : 1px solid var ( --color-secondary ) ;
}
2024-02-29 03:00:33 +01:00
. code-view tr . top-line-blame : first-of-type {
border-top : none ;
}
2023-03-15 03:20:19 +01:00
. lines-code . bottom-line ,
. lines-commit . bottom-line {
border-bottom : 1px solid var ( --color-secondary ) ;
2019-08-08 16:46:03 +02:00
}
2023-03-15 03:20:19 +01:00
2024-03-24 13:14:03 +01:00
. code-view {
background : var ( --color-code-bg ) ;
border-radius : var ( --border-radius ) ;
}
2021-05-19 05:16:02 +02:00
. code-view table {
width : 100 % ;
2019-08-08 16:46:03 +02:00
}
2019-12-12 13:18:07 +00:00
2020-02-11 11:34:17 +02:00
. color-icon {
2020-08-25 21:48:53 +02:00
display : inline-block ;
2024-05-27 16:09:52 +05:00
border-radius : var ( --border-radius-full ) ;
2020-08-25 21:48:53 +02:00
height : 14px ;
width : 14px ;
2020-02-11 11:34:17 +02:00
}
2020-02-11 11:02:41 -06:00
2023-05-12 12:23:53 +02:00
. rss-icon {
display : inline-flex ;
color : var ( --color-text-light-1 ) ;
}
2023-03-15 03:20:19 +01:00
table th [ data-sortt-asc ] : hover ,
table th [ data-sortt-desc ] : hover {
2023-10-13 10:19:21 +02:00
background : var ( --color-hover ) ! important ;
2023-03-15 03:20:19 +01:00
cursor : pointer ! important ;
}
table th [ data-sortt-asc ] . svg ,
table th [ data-sortt-desc ] . svg {
margin-left : 0 . 25rem ;
2020-06-25 00:23:05 +02:00
}
2020-10-24 21:15:29 +02:00
. ui . dropdown . menu . item {
border-radius : 0 ;
}
. ui . dropdown . menu . item : first-of-type {
border-radius : var ( --border-radius ) var ( --border-radius ) 0 0 ;
}
. ui . dropdown . menu . item : last-of-type {
border-radius : 0 0 var ( --border-radius ) var ( --border-radius ) ;
}
2023-03-31 10:24:47 +02:00
. ui . multiple . dropdown > . label {
box-shadow : 0 0 0 1px var ( --color-secondary ) inset ;
}
2020-04-28 14:05:39 -04:00
. emoji ,
. reaction {
2020-08-25 21:48:53 +02:00
font-size : 1 . 25em ;
2023-08-18 05:50:32 +08:00
line-height : var ( --line-height-default ) ;
2020-08-25 21:48:53 +02:00
font-style : normal ! important ;
2023-05-22 01:37:32 +02:00
font-weight : var ( --font-weight-normal ) ! important ;
2023-03-15 03:20:19 +01:00
vertical-align : -0 . 075em ;
}
2020-04-28 14:05:39 -04:00
. emoji img ,
. reaction img {
2020-08-25 21:48:53 +02:00
border-width : 0 ! important ;
margin : 0 ! important ;
width : 1em ! important ;
height : 1em ! important ;
2023-03-15 03:20:19 +01:00
vertical-align : -0 . 15em ;
2020-04-28 14:05:39 -04:00
}
2020-05-20 22:27:14 +02:00
2020-06-22 18:44:06 +02:00
. ui . tabular . menu {
2020-11-26 20:33:28 +01:00
border-color : var ( --color-secondary ) ;
}
2020-06-22 18:44:06 +02:00
2020-11-26 20:33:28 +01:00
. ui . tabular . menu . active . item ,
. ui . tabular . menu . active . item : hover {
background : var ( --color-body ) ;
border-color : var ( --color-secondary ) ;
color : var ( --color-text ) ;
}
2020-12-17 16:52:58 +01:00
. ui . segment . ui . tabular . menu . active . item ,
. ui . segment . ui . tabular . menu . active . item : hover {
background : var ( --color-box-body ) ;
}
2020-11-26 20:33:28 +01:00
. ui . secondary . pointing . menu {
border-color : var ( --color-secondary ) ;
2020-06-22 18:44:06 +02:00
}
2024-03-20 18:00:35 +01:00
. ui . tabular . menu . item ,
2020-06-22 18:44:06 +02:00
. ui . secondary . pointing . menu . item {
2024-03-20 18:00:35 +01:00
padding : 11px 12px ! important ;
2020-12-17 16:52:58 +01:00
color : var ( --color-text-light-2 ) ;
2020-11-26 20:33:28 +01:00
}
2024-03-20 18:00:35 +01:00
. ui . tabular . menu . item : hover ,
. ui . secondary . pointing . menu a . item : hover , . ui . secondary . pointing . menu a . item : focus {
color : var ( --color-text ) ;
}
2020-11-26 20:33:28 +01:00
. ui . secondary . pointing . menu . active . item ,
2024-02-18 17:28:35 +01:00
. ui . secondary . pointing . menu . active . item : hover , . ui . secondary . pointing . menu . active . item : focus ,
2024-03-20 18:00:35 +01:00
. ui . secondary . pointing . menu . dropdown . item : hover , . ui . secondary . pointing . menu . dropdown . item : focus {
2021-04-03 10:37:32 +02:00
color : var ( --color-text-dark ) ;
2020-06-22 18:44:06 +02:00
}
2020-06-26 02:07:15 +02:00
2024-03-20 18:00:35 +01:00
. ui . tabular . menu . active . item ,
. ui . secondary . pointing . menu . active . item ,
. resize-for-semibold :: before {
font-weight : var ( --font-weight-semibold ) ;
}
. resize-for-semibold :: before {
content : attr ( data-text ) ;
visibility : hidden ;
display : block ;
height : 0 ;
}
2022-09-02 15:58:49 +08:00
. flash-error details code ,
. flash-warning details code {
2020-10-21 00:50:10 +01:00
display : block ;
text-align : left ;
}
2021-02-12 02:29:07 +01:00
. truncated-item-container {
display : flex ! important ;
2022-11-22 00:10:42 +01:00
align-items : center ;
2021-02-12 02:29:07 +01:00
}
2021-11-23 03:44:38 +01:00
. ellipsis-button {
padding : 0 5px 8px ! important ;
display : inline-block ! important ;
2023-05-22 01:37:32 +02:00
font-weight : var ( --font-weight-semibold ) ! important ;
2021-11-23 03:44:38 +01:00
line-height : 6px ! important ;
vertical-align : middle ! important ;
}
2021-02-12 02:29:07 +01:00
. truncated-item-name {
2023-06-27 21:44:17 +02:00
line-height : 2 ;
2021-02-12 02:29:07 +01:00
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
2023-03-15 03:20:19 +01:00
margin-top : -0 . 5em ;
margin-bottom : -0 . 5em ;
2021-02-12 02:29:07 +01:00
}
2021-09-29 22:53:12 +02:00
. precolors {
2023-08-28 22:14:51 +08:00
display : flex ;
flex-direction : column ;
justify-content : center ;
margin-left : 1em ;
2023-03-15 03:20:19 +01:00
}
2021-09-29 22:53:12 +02:00
2023-03-15 03:20:19 +01:00
. precolors . color {
2023-08-28 22:14:51 +08:00
display : inline-block ;
2023-03-15 03:20:19 +01:00
width : 15px ;
height : 15px ;
2021-09-29 22:53:12 +02:00
}
2023-06-15 00:40:15 +08:00
2023-10-16 15:26:08 +08:00
. ui . dropdown : not ( . button ) {
2023-08-18 05:50:32 +08:00
line-height : var ( --line-height-default ) ; /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
2023-06-15 00:40:15 +08:00
}
/ * dropdown has some kinds of icons :
- "> .dropdown.icon" : the arrow for opening the dropdown
- "> .remove.icon" : the "x" icon for clearing the dropdown , only used in selection dropdown
- "> .ui.label > .delete.icon" : the "x" icon for removing a label item in multiple selection dropdown
* /
2023-06-25 10:40:41 +08:00
. ui . dropdown . mini . button ,
. ui . dropdown . tiny . button {
padding-right : 20px ;
}
. ui . dropdown . button {
padding-right : 22px ;
}
. ui . dropdown . large . button {
padding-right : 24px ;
}
2023-06-15 00:40:15 +08:00
/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
. ui . ui . dropdown > . icon . icon {
position : initial ; /* plain dropdown and button dropdown use flex layout for icons */
padding : 0 ;
margin : 0 ;
height : auto ;
}
. ui . ui . dropdown > . icon . icon : hover {
opacity : 1 ;
}
. ui . ui . button . dropdown > . icon . icon ,
. ui . ui . selection . dropdown > . icon . icon {
position : absolute ; /* selection dropdown uses absolute layout for icons */
top : 50 % ;
transform : translateY ( -50 % ) ;
}
. ui . ui . dropdown > . dropdown . icon {
right : 0 . 5em ;
}
. ui . ui . dropdown > . remove . icon {
right : 2em ;
}
2023-09-28 12:04:32 +08:00
. btn ,
2023-06-15 00:40:15 +08:00
. ui . ui . button ,
. ui . ui . dropdown ,
. flex-items-inline > . item ,
. flex-text-inline {
display : inline-flex ;
align-items : center ;
gap : . 25rem ;
vertical-align : middle ;
2024-04-15 03:43:30 +08:00
min-width : 0 ;
2023-06-15 00:40:15 +08:00
}
. ui . ui . button {
justify-content : center ;
}
. ui . dropdown . ui . label . svg {
vertical-align : middle ;
}
. ui . ui . labeled . button {
gap : 0 ;
align-items : stretch ;
}
. flex-items-block > . item ,
. flex-text-block {
display : flex ;
align-items : center ;
gap : . 25rem ;
2024-04-15 03:43:30 +08:00
min-width : 0 ;
2023-06-15 00:40:15 +08:00
}
