2020-10-19 15:01:06 -05:00
: root {
2022-10-12 11:26:27 -05:00
/* fonts */
2023-04-30 13:58:32 -05:00
--fonts-proportional : -apple-system , "Segoe UI" , system-ui , Roboto , "Helvetica Neue" , Arial ;
--fonts-monospace : ui-monospace , SFMono-Regular , "SF Mono" , Menlo , Monaco , Consolas , "Liberation Mono" , "Courier New" , monospace , var ( --fonts-emoji ) ;
2021-03-18 18:43:43 -05:00
--fonts-emoji : "Apple Color Emoji" , "Segoe UI Emoji" , "Noto Color Emoji" , "Twemoji Mozilla" ;
2023-05-22 03:47:33 -05:00
/* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
2023-05-21 18:37:32 -05:00
--font-weight-light : 300 ;
--font-weight-normal : 400 ;
--font-weight-medium : 500 ;
--font-weight-semibold : 600 ;
2023-05-24 21:31:26 -05:00
--font-weight-bold : 700 ;
2023-08-17 16:50:32 -05:00
/* line-height: use the default value as "modules/normalize.css" */
2023-08-22 05:19:15 -05:00
--line-height-default : normal ;
2023-10-06 02:46:36 -05:00
/* images */
2022-10-12 11:26:27 -05: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-06 21:49:48 -05: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 02:46:36 -05:00
/* other variables */
2023-08-28 14:43:59 -05:00
--border-radius : 4px ;
--border-radius-medium : 6px ;
2023-08-29 09:03:34 -05:00
--border-radius-circle : 50 % ;
2023-03-14 21:20:19 -05:00
--opacity-disabled : 0 . 55 ;
2023-04-17 05:10:22 -05:00
--height-loading : 16rem ;
2024-02-18 09:51:21 -05:00
--min-height-textarea : 132px ; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
2023-05-28 13:04:35 -05:00
--tab-size : 4 ;
2020-10-19 15:01:06 -05:00
}
2021-03-18 18:43:43 -05:00
: root * {
2021-05-15 19:12:55 -05:00
--fonts-regular : var ( --fonts-override , var ( --fonts-proportional ) ) , "Noto Sans" , "Liberation Sans" , sans-serif , var ( --fonts-emoji ) ;
2019-03-18 07:49:01 -05: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 11:46:46 -05: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 06:47:50 -05:00
html , body {
height : 100 % ;
font-size : 14px ;
}
body {
line-height : 1 . 4285rem ;
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 ;
}
2020-11-08 13:01:38 -05:00
textarea {
2020-10-19 15:01:06 -05:00
font-family : var ( --fonts-regular ) ;
}
2019-03-18 07:49:01 -05:00
2020-12-18 15:00:07 -05:00
pre ,
2020-11-06 12:16:21 -05:00
code ,
kbd ,
samp {
2023-03-14 21:20:19 -05:00
font-size : 0 . 9em ; /* compensate for monospace fonts being usually slightly larger */
2020-11-06 12:16:21 -05:00
font-family : var ( --fonts-monospace ) ;
}
2020-11-15 15:58:16 -05:00
b ,
2020-12-05 06:00:36 -05:00
strong ,
2020-11-25 06:20:40 -05:00
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 {
2023-05-21 18:37:32 -05:00
font-weight : var ( --font-weight-semibold ) ;
2020-11-25 06:20:40 -05:00
}
2024-03-22 06:47:50 -05: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-23 15:50:05 -05:00
}
2019-03-18 07:49:01 -05:00
2018-09-09 13:11:49 -05:00
table {
2020-08-25 14:48:53 -05:00
border-collapse : collapse ;
2018-09-09 13:11:49 -05:00
}
2019-05-13 01:26:32 -05:00
2023-03-30 07:06:10 -05:00
button {
cursor : pointer ;
}
2021-05-22 19:45:39 -05:00
details summary {
cursor : pointer ;
}
details summary > * {
display : inline ;
}
2022-05-19 22:04:45 -05:00
progress {
2022-06-14 23:28:24 -05:00
background : var ( --color-secondary-dark-1 ) ;
2023-08-28 14:43:59 -05:00
border-radius : var ( --border-radius ) ;
2022-05-19 22:04:45 -05:00
border : none ;
overflow : hidden ;
}
2023-03-14 21:20:19 -05:00
2022-05-19 22:04:45 -05:00
progress :: -webkit-progress-bar {
2022-06-14 23:28:24 -05:00
background : var ( --color-secondary-dark-1 ) ;
2022-05-19 22:04:45 -05:00
}
2023-03-14 21:20:19 -05:00
2022-05-19 22:04:45 -05:00
progress :: -webkit-progress-value {
2022-10-22 23:05:20 -05:00
background-color : var ( --color-accent ) ;
2022-05-19 22:04:45 -05:00
}
2023-03-14 21:20:19 -05:00
2022-05-19 22:04:45 -05:00
progress :: -moz-progress-bar {
2022-10-22 23:05:20 -05:00
background-color : var ( --color-accent ) ;
2022-05-19 22:04:45 -05:00
}
2024-02-25 05:59:12 -05:00
h1 . error-code {
font-size : 15em ;
2024-02-25 17:44:00 -05:00
font-weight : var ( --font-weight-bold ) ;
2024-02-25 05:59:12 -05:00
color : transparent ;
--error-code-color-1 : # a2a2a2 ;
--error-code-color-2 : # 797979 ;
2024-02-25 17:44:00 -05: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 05:59:12 -05:00
background-clip : text ;
}
2020-10-30 22:52:10 -05:00
* {
2021-05-05 13:14:04 -05:00
caret-color : var ( --color-caret ) ;
2020-10-30 22:52:10 -05:00
}
2022-10-22 23:05:20 -05: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-14 21:20:19 -05:00
2022-10-22 23:05:20 -05:00
:: file-selector-button : hover {
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
}
2021-12-20 15:07:49 -05:00
:: selection {
2024-03-22 06:47:50 -05:00
background : var ( --color-primary-light-1 ) ;
color : var ( --color-white ) ;
2020-10-30 22:52:10 -05:00
}
2020-11-04 20:51:17 -05:00
:: placeholder ,
2021-04-03 03:37:32 -05:00
. ui . dropdown : not ( . button ) > . default . text ,
. ui . default . dropdown : not ( . button ) > . text {
color : var ( --color-placeholder-text ) ! important ;
2020-11-04 20:51:17 -05:00
opacity : 1 ! important ;
}
2023-03-14 21:20:19 -05:00
. unselectable ,
. button ,
. lines-num ,
. lines-commit ,
. lines-commit . blame-info ,
. ellipsis-button {
-webkit-touch-callout : none ;
-webkit-user-select : none ;
user-select : none ;
}
2023-05-01 10:40:02 -05:00
a {
2020-10-30 22:52:10 -05:00
color : var ( --color-primary ) ;
2020-08-25 14:48:53 -05:00
cursor : pointer ;
2024-03-24 07:14:03 -05:00
text-decoration-line : none ;
2021-12-18 00:29:00 -05:00
text-decoration-skip-ink : all ;
2019-02-05 16:59:26 -05:00
}
2019-05-13 01:26:32 -05:00
2024-03-24 07:14:03 -05:00
a : hover {
text-decoration-line : underline ;
}
2024-03-16 11:58:58 -05: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-15 17:46:51 -05:00
2022-11-18 23:02:30 -05:00
a . muted ,
2024-03-16 11:58:58 -05:00
a . suppressed ,
2023-05-15 17:46:51 -05:00
a . silenced ,
2022-11-18 23:02:30 -05:00
. muted-links a {
2020-11-29 01:22:04 -05:00
color : inherit ;
}
2020-10-30 22:52:10 -05:00
a : hover ,
2024-03-16 11:58:58 -05:00
a . suppressed : hover ,
2020-11-29 01:22:04 -05:00
a . muted : hover ,
2022-07-22 05:49:24 -05:00
a . muted : hover [ class * = "color-text" ] ,
2023-05-01 10:40:02 -05:00
. muted-links a : hover {
2021-12-18 00:29:00 -05:00
color : var ( --color-primary ) ;
}
2024-03-16 11:58:58 -05:00
a . silenced : hover ,
a . suppressed : hover {
2023-05-15 17:46:51 -05:00
color : inherit ;
2024-03-16 11:58:58 -05:00
}
a . silenced : hover {
2024-03-24 07:14:03 -05:00
text-decoration-line : none ;
2023-05-15 17:46:51 -05:00
}
2021-12-18 00:29:00 -05:00
a . label ,
. ui . search . results a ,
. ui . menu a ,
2022-01-13 09:33:04 -05:00
. ui . cards a . card ,
2023-02-20 03:43:04 -05:00
. issue-keyword a {
2024-03-24 07:14:03 -05:00
text-decoration-line : none ! important ;
2021-12-18 00:29:00 -05:00
}
2022-09-22 22:00:29 -05:00
. ui . search > . results {
background : var ( --color-body ) ;
border-color : var ( --color-secondary ) ;
2024-02-01 12:10:16 -05:00
overflow-wrap : anywhere ; /* allow text to wrap as fomantic limits this to 18em width */
2022-09-22 22:00:29 -05:00
}
. ui . search > . results . result {
background : var ( --color-body ) ;
2024-02-01 12:10:16 -05:00
border-color : var ( --color-secondary ) ;
display : flex ;
align-items : center ;
2022-09-22 22:00:29 -05:00
}
. ui . search > . results . result . title {
color : var ( --color-text-dark ) ;
}
2023-02-14 14:05:19 -05:00
. ui . search > . results . result . description {
color : var ( --color-text-light-2 ) ;
}
2022-09-22 22:00:29 -05: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 ) ;
}
2023-08-31 00:01:01 -05:00
. inline-code-block {
2022-10-15 13:24:41 -05:00
padding : 2px 4px ;
2023-08-28 14:43:59 -05:00
border-radius : var ( --border-radius-medium ) ;
2022-10-15 13:24:41 -05:00
background-color : var ( --color-markup-code-block ) ;
}
2023-03-14 21:20:19 -05:00
2023-06-27 03:45:43 -05:00
/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
. ui . input > input {
2023-08-28 09:14:51 -05:00
line-height : var ( --line-height-default ) ;
2023-09-07 03:00:20 -05:00
text-align : start ; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
2023-06-27 03:45:43 -05:00
}
2023-09-13 04:08:45 -05:00
/* fix Fomantic's line-height causing vertical scrollbars to appear */
ul . ui . list li ,
ol . ui . list li ,
. ui . list > . item ,
. ui . list . list > . item {
line-height : var ( --line-height-default ) ;
}
2020-11-07 16:04:40 -05:00
. ui . input . focus > input ,
. ui . input > input : focus {
border-color : var ( --color-primary ) ;
}
2023-09-04 05:22:46 -05:00
. ui . action . input . ui . ui . button {
2023-04-29 22:33:25 -05:00
border-color : var ( --color-input-border ) ;
2023-09-04 05:22:46 -05:00
padding-top : 0 ; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
padding-bottom : 0 ;
2023-04-29 22:33:25 -05:00
}
2021-04-09 15:53:16 -05:00
/* currently used for search bar dropdowns in repo search and explore code */
. ui . action . input : not ( [ class * = "left action" ] ) > . ui . dropdown . selection {
min-width : 10em ;
2023-03-14 21:20:19 -05:00
}
2024-03-14 18:24:59 -05:00
. ui . action . input : not ( [ class * = "left action" ] ) > . ui . dropdown . selection : not ( : focus ) {
border-right : none ;
}
. ui . action . input : not ( [ class * = "left action" ] ) > . ui . dropdown . selection : not ( . active ) : hover {
border-color : var ( --color-input-border ) ;
}
. ui . action . input : not ( [ class * = "left action" ] ) . ui . dropdown . selection . upward . visible {
border-bottom-left-radius : 0 ! important ;
border-bottom-right-radius : 0 ! important ;
2021-04-09 15:53:16 -05:00
}
2023-06-09 03:37:47 -05:00
. ui . action . input : not ( [ class * = "left action" ] ) > input ,
2023-04-29 22:33:25 -05:00
. ui . action . input : not ( [ class * = "left action" ] ) > input : hover {
2024-03-14 18:24:59 -05:00
border-right : none ;
}
. ui . action . input : not ( [ class * = "left action" ] ) > input : focus + . ui . dropdown . selection ,
. ui . action . input : not ( [ class * = "left action" ] ) > input : focus + . ui . dropdown . selection : hover ,
. ui . action . input : not ( [ class * = "left action" ] ) > input : focus + . button ,
2024-03-19 05:36:54 -05:00
. ui . action . input : not ( [ class * = "left action" ] ) > input : focus + . button : hover ,
. ui . action . input : not ( [ class * = "left action" ] ) > input : focus + . icon + . button ,
. ui . action . input : not ( [ class * = "left action" ] ) > input : focus + . icon + . button : hover {
2024-03-14 18:24:59 -05:00
border-left-color : var ( --color-primary ) ;
2023-04-29 22:33:25 -05:00
}
2020-11-07 16:04:40 -05:00
. ui . action . input : not ( [ class * = "left action" ] ) > input : focus {
border-right-color : var ( --color-primary ) ;
}
2024-03-24 09:04:18 -05:00
. ui . menu {
display : flex ;
}
2020-12-09 14:03:19 -05:00
. ui . menu ,
. ui . vertical . menu {
2020-11-29 01:22:04 -05:00
background : var ( --color-menu ) ;
border-color : var ( --color-secondary ) ;
2024-03-24 11:48:06 -05:00
box-shadow : none ;
2020-11-29 01:22:04 -05:00
}
. ui . menu . item {
color : var ( --color-text ) ;
2023-03-14 21:20:19 -05:00
user-select : auto ;
2023-08-17 16:50:32 -05:00
line-height : var ( --line-height-default ) ; /* fomantic uses "1" which causes overflow problems because "1" doesn't consider the descent part */
2023-03-14 21:20:19 -05:00
}
2021-02-14 11:49:22 -05:00
2023-03-14 21:20:19 -05:00
. ui . menu . item > . svg {
margin-right : 0 . 35em ;
2020-11-29 01:22:04 -05:00
}
. ui . menu . dropdown . item : hover ,
2023-06-06 21:49:48 -05:00
. ui . menu a . item : hover ,
. ui . menu details . item summary : hover {
2020-11-29 01:22:04 -05:00
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
}
. ui . menu . active . item ,
. ui . menu . active . item : hover ,
2020-12-09 14:03:19 -05:00
. ui . vertical . menu . active . item ,
2020-11-29 01:22:04 -05: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 06:18:37 -05:00
. ui . ui . menu . item . disabled {
2020-12-20 13:00:03 -05:00
color : var ( --color-text-light-3 ) ;
}
2023-05-30 17:28:25 -05:00
. ui . menu . item :: before , . ui . vertical . menu . item :: before {
2023-04-29 22:33:25 -05:00
background : var ( --color-secondary ) ;
}
2023-04-27 19:08:47 -05: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 13:00:03 -05:00
/* slightly more contrast for filters on issue list */
. ui . ui . menu . dropdown . item . disabled {
2020-12-04 06:18:37 -05:00
color : var ( --color-text-light-2 ) ;
}
2020-11-29 01:22:04 -05: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 ) ;
}
. ui . dropdown . menu > . item : hover {
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
}
2023-05-27 20:34:18 -05:00
. ui . dropdown . menu > . item : active {
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
2020-11-29 01:22:04 -05:00
. ui . dropdown . menu . active . item {
2020-12-04 06:18:37 -05:00
color : var ( --color-text ) ;
background : var ( --color-active ) ;
2023-05-30 17:28:25 -05:00
border-radius : 0 ;
2023-05-21 18:37:32 -05:00
font-weight : var ( --font-weight-normal ) ;
2020-11-29 01:22:04 -05:00
}
2020-12-08 19:12:15 -05:00
/* fix misaligned images in webhook dropdown */
. ui . dropdown . menu > . item > img {
2023-03-14 21:20:19 -05:00
margin-top : -0 . 25rem ;
margin-bottom : -0 . 25rem ;
2020-12-08 19:12:15 -05:00
}
2023-04-25 06:34:37 -05:00
. ui . dropdown . menu > . item > svg {
margin-right : . 78rem ; /* use the same margin as for <img> */
}
2023-03-14 21:20:19 -05:00
2020-11-29 01:22:04 -05:00
. ui . selection . dropdown . menu > . item {
border-color : var ( --color-secondary ) ;
}
. 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 14:03:19 -05: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 08:59:48 -05: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 14:18:12 -05:00
. ui . dropdown > . text > . description ,
. ui . dropdown . menu > . item > . description {
color : var ( --color-text-light-2 ) ;
}
2022-09-28 08:19:22 -05:00
. ui . list . list > . item . header ,
. ui . list > . item . header {
color : var ( --color-text-dark ) ;
}
2022-09-22 22:00:29 -05:00
. ui . list . list > . item > . content ,
. ui . list > . item > . content {
color : var ( --color-text ) ;
}
2022-09-28 08:19:22 -05:00
. ui . list . list > . item . description ,
. ui . list > . item . description {
color : var ( --color-text ) ;
}
2023-08-14 10:14:30 -05: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 01:22:04 -05: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 ) ;
}
2021-02-14 11:49:22 -05:00
. ui . secondary . menu . tight . item {
2023-03-14 21:20:19 -05:00
padding-left : 0 . 85714286em ;
padding-right : 0 . 85714286em ;
2021-02-14 11:49:22 -05:00
}
2023-08-14 10:14:30 -05:00
/* remove the menu clearfix so that it won't add undesired gaps when using "gap" */
. ui . menu :: after {
content : normal ;
}
2020-11-29 01:22:04 -05:00
. ui . menu . dropdown . item . menu {
2023-06-09 03:37:47 -05:00
background : var ( --color-body ) ;
2020-11-29 01:22:04 -05: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 09:51:21 -05: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-16 17:12:40 -05:00
/* styles from removed fomantic transition module */
. hidden . transition {
visibility : hidden ;
display : none ;
}
. visible . transition {
display : block ! important ;
visibility : visible ! important ;
}
2020-11-07 16:04:40 -05:00
. ui . selection . active . dropdown ,
. ui . selection . active . dropdown : hover ,
. ui . selection . active . dropdown . menu ,
. ui . selection . active . dropdown : hover . menu {
2023-08-16 17:12:40 -05:00
border-color : var ( --color-primary ) ;
2020-11-07 16:04:40 -05:00
}
2020-11-26 14:33:28 -05:00
. ui . pointing . dropdown > . menu : not ( . hidden ) :: after {
2023-05-27 20:34:18 -05:00
background : var ( --color-menu ) ;
2020-11-26 14:33:28 -05:00
box-shadow : -1px -1px 0 0 var ( --color-secondary ) ;
2020-12-05 05:09:09 -05:00
}
2023-05-27 20:34:18 -05: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 10:28:25 -05:00
. ui . comments . comment . text {
margin : 0 ;
}
2020-12-17 10:52:58 -05: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-04 19:44:52 -05:00
img . ui . avatar ,
2022-09-12 04:08:46 -05:00
. ui . avatar img ,
2023-05-13 13:59:11 -05:00
. ui . avatar svg {
2020-12-03 13:46:11 -05:00
border-radius : var ( --border-radius ) ;
2023-05-13 13:59:11 -05:00
object-fit : contain ;
aspect-ratio : 1 ;
2020-12-03 13:46:11 -05:00
}
2020-12-19 22:13:12 -05:00
. ui . divided . list > . item {
border-color : var ( --color-secondary ) ;
}
2022-01-06 20:18:52 -05: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 14:48:53 -05:00
flex-grow : 1 ;
padding-bottom : 80px ;
2015-03-07 15:12:13 -05:00
}
2019-05-13 01:26:32 -05:00
2024-03-22 18:54:09 -05:00
/* add margin below .secondary nav when it is the first child */
. page-content > : first-child . secondary-nav {
margin-bottom : 14px ;
}
/ * add padding to all content when there is no . secondary . nav . this uses padding instead of
margin because with the negative margin on . ui . grid we would have to set margin-top : 0 ,
but that does not work universally for all pages * /
. page-content > : first-child : not ( . secondary-nav ) {
padding-top : 14px ;
2024-03-20 06:21:18 -05:00
}
2020-12-04 06:18:37 -05:00
. ui . pagination . menu . active . item {
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
2022-10-24 23:08:54 -05:00
. ui . form . fields . error . field textarea ,
. ui . form . fields . error . field select ,
. ui . form . fields . error . field input : not ( [ type ] ) ,
. ui . form . fields . error . field input [ type = "date" ] ,
. ui . form . fields . error . field input [ type = "datetime-local" ] ,
. ui . form . fields . error . field input [ type = "email" ] ,
. ui . form . fields . error . field input [ type = "number" ] ,
. ui . form . fields . error . field input [ type = "password" ] ,
. ui . form . fields . error . field input [ type = "search" ] ,
. ui . form . fields . error . field input [ type = "tel" ] ,
. ui . form . fields . error . field input [ type = "time" ] ,
. ui . form . fields . error . field input [ type = "text" ] ,
. ui . form . fields . error . field input [ type = "file" ] ,
. ui . form . fields . error . field input [ type = "url" ] ,
2022-12-06 08:15:46 -05:00
. ui . form . fields . error . field . ui . dropdown ,
. ui . form . fields . error . field . ui . dropdown . item ,
. ui . form . field . error . ui . dropdown ,
. ui . form . field . error . ui . dropdown . text ,
. ui . form . field . error . ui . dropdown . item ,
2022-10-24 23:08:54 -05:00
. ui . form . field . error textarea ,
. ui . form . field . error select ,
. ui . form . field . error input : not ( [ type ] ) ,
. ui . form . field . error input [ type = "date" ] ,
. ui . form . field . error input [ type = "datetime-local" ] ,
. ui . form . field . error input [ type = "email" ] ,
. ui . form . field . error input [ type = "number" ] ,
. ui . form . field . error input [ type = "password" ] ,
. ui . form . field . error input [ type = "search" ] ,
. ui . form . field . error input [ type = "tel" ] ,
. ui . form . field . error input [ type = "time" ] ,
. ui . form . field . error input [ type = "text" ] ,
. ui . form . field . error input [ type = "file" ] ,
. ui . form . field . error input [ type = "url" ] ,
. ui . form . field . error select : focus ,
. ui . form . field . error input : not ( [ type ] ) : focus ,
. ui . form . field . error input [ type = "date" ] : focus ,
. ui . form . field . error input [ type = "datetime-local" ] : focus ,
. ui . form . field . error input [ type = "email" ] : focus ,
. ui . form . field . error input [ type = "number" ] : focus ,
. ui . form . field . error input [ type = "password" ] : focus ,
. ui . form . field . error input [ type = "search" ] : focus ,
. ui . form . field . error input [ type = "tel" ] : focus ,
. ui . form . field . error input [ type = "time" ] : focus ,
. ui . form . field . error input [ type = "text" ] : focus ,
. ui . form . field . error input [ type = "file" ] : focus ,
. ui . form . field . error input [ type = "url" ] : focus {
background-color : var ( --color-error-bg ) ;
2022-12-06 08:15:46 -05:00
border-color : var ( --color-error-border ) ;
2022-10-24 23:08:54 -05:00
color : var ( --color-error-text ) ;
}
2022-12-06 08:15:46 -05:00
. ui . form . fields . error . field . ui . dropdown ,
. ui . form . field . error . ui . dropdown ,
. ui . form . fields . error . field . ui . dropdown : hover ,
. ui . form . field . error . ui . dropdown : hover {
border-color : var ( --color-error-border ) ! important ;
}
. ui . form . fields . error . field . ui . dropdown . menu . item : hover ,
. ui . form . field . error . ui . dropdown . menu . item : hover {
background-color : var ( --color-error-bg-hover ) ;
}
. ui . form . fields . error . field . ui . dropdown . menu . active . item ,
. ui . form . field . error . ui . dropdown . menu . active . item {
background-color : var ( --color-error-bg-active ) ! important ;
}
. ui . form . fields . error . dropdown . menu ,
. ui . form . field . error . dropdown . menu {
border-color : var ( --color-error-border ) ! important ;
}
2024-03-09 07:14:42 -05:00
input : -webkit-autofill ,
input : -webkit-autofill : focus ,
input : -webkit-autofill : hover ,
input : -webkit-autofill : active ,
. ui . form . field . field input : -webkit-autofill ,
. ui . form . field . field input : -webkit-autofill : focus ,
. ui . form . field . field input : -webkit-autofill : hover ,
. ui . form . field . field input : -webkit-autofill : active {
-webkit-background-clip : text ;
-webkit-text-fill-color : var ( --color-text ) ;
box-shadow : 0 0 0 100px var ( --color-primary-light-6 ) inset ! important ;
border-color : var ( --color-primary-light-4 ) ! important ;
2022-12-13 06:06:23 -05:00
}
Scoped labels (#22585)
Add a new "exclusive" option per label. This makes it so that when the
label is named `scope/name`, no other label with the same `scope/`
prefix can be set on an issue.
The scope is determined by the last occurence of `/`, so for example
`scope/alpha/name` and `scope/beta/name` are considered to be in
different scopes and can coexist.
Exclusive scopes are not enforced by any database rules, however they
are enforced when editing labels at the models level, automatically
removing any existing labels in the same scope when either attaching a
new label or replacing all labels.
In menus use a circle instead of checkbox to indicate they function as
radio buttons per scope. Issue filtering by label ensures that only a
single scoped label is selected at a time. Clicking with alt key can be
used to remove a scoped label, both when editing individual issues and
batch editing.
Label rendering refactor for consistency and code simplification:
* Labels now consistently have the same shape, emojis and tooltips
everywhere. This includes the label list and label assignment menus.
* In label list, show description below label same as label menus.
* Don't use exactly black/white text colors to look a bit nicer.
* Simplify text color computation. There is no point computing luminance
in linear color space, as this is a perceptual problem and sRGB is
closer to perceptually linear.
* Increase height of label assignment menus to show more labels. Showing
only 3-4 labels at a time leads to a lot of scrolling.
* Render all labels with a new RenderLabel template helper function.
Label creation and editing in multiline modal menu:
* Change label creation to open a modal menu like label editing.
* Change menu layout to place name, description and colors on separate
lines.
* Don't color cancel button red in label editing modal menu.
* Align text to the left in model menu for better readability and
consistent with settings layout elsewhere.
Custom exclusive scoped label rendering:
* Display scoped label prefix and suffix with slightly darker and
lighter background color respectively, and a slanted edge between them
similar to the `/` symbol.
* In menus exclusive labels are grouped with a divider line.
---------
Co-authored-by: Yarden Shoham <hrsi88@gmail.com>
Co-authored-by: Lauris BH <lauris@nix.lv>
2023-02-18 14:17:39 -05:00
. ui . form . field . muted {
opacity : var ( --opacity-disabled ) ;
}
2023-03-14 21:20:19 -05:00
. text . primary {
color : var ( --color-primary ) ! important ;
}
2019-05-13 01:26:32 -05:00
2023-03-14 21:20:19 -05:00
. text . red {
color : var ( --color-red ) ! important ;
}
2017-10-26 23:30:54 -05:00
2023-03-14 21:20:19 -05:00
. text . orange {
color : var ( --color-orange ) ! important ;
}
2017-10-26 23:30:54 -05:00
2023-03-14 21:20:19 -05:00
. text . yellow {
color : var ( --color-yellow ) ! important ;
}
2017-10-26 23:30:54 -05:00
2023-03-14 21:20:19 -05:00
. text . olive {
color : var ( --color-olive ) ! important ;
}
2017-10-26 23:30:54 -05:00
2023-03-14 21:20:19 -05:00
. text . green {
color : var ( --color-green ) ! important ;
}
2018-05-10 22:28:26 -05:00
2023-03-14 21:20:19 -05:00
. text . teal {
color : var ( --color-teal ) ! important ;
}
2018-09-06 21:32:46 -05:00
2023-03-14 21:20:19 -05:00
. text . blue {
color : var ( --color-blue ) ! important ;
}
2017-12-05 01:31:33 -05:00
2023-03-14 21:20:19 -05:00
. text . violet {
color : var ( --color-violet ) ! important ;
}
2019-05-13 01:26:32 -05:00
2023-03-14 21:20:19 -05:00
. text . purple {
color : var ( --color-purple ) ! important ;
}
2019-05-13 01:26:32 -05:00
2023-03-14 21:20:19 -05:00
. text . pink {
color : var ( --color-pink ) ! important ;
}
2017-12-02 18:16:35 -05:00
2023-03-14 21:20:19 -05:00
. text . brown {
color : var ( --color-brown ) ! important ;
}
2019-04-11 16:09:41 -05:00
2023-03-14 21:20:19 -05:00
. text . black {
color : var ( --color-text ) ! important ;
}
2018-05-10 22:28:26 -05:00
2023-03-14 21:20:19 -05:00
. text . grey {
color : var ( --color-text-light ) ! important ;
}
2018-05-10 22:28:26 -05:00
2023-05-24 21:31:26 -05: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-14 21:20:19 -05:00
. text . light . grey {
color : var ( --color-grey-light ) ! important ;
}
2019-12-17 16:34:11 -05:00
2023-03-14 21:20:19 -05:00
. text . gold {
color : var ( --color-gold ) ! important ;
}
2019-11-19 17:44:58 -05:00
2023-08-30 05:37:17 -05:00
. text . small {
font-size : 0 . 75em ;
}
2023-03-14 21:20:19 -05:00
. ui . form . ui . button {
2023-05-21 18:37:32 -05:00
font-weight : var ( --font-weight-normal ) ;
2023-03-14 21:20:19 -05:00
}
2017-10-26 23:30:54 -05:00
2023-03-14 21:20:19 -05:00
. ui . floating . label {
z-index : 10 ;
}
2017-10-26 23:30:54 -05:00
2023-03-14 21:20:19 -05:00
. ui . transparent . label {
background-color : transparent ;
}
2017-10-26 23:30:54 -05:00
2023-08-21 05:49:49 -05:00
/* replace fomantic popover box shadows */
2023-08-16 17:12:40 -05: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 05:49:49 -05:00
. ui . floating . dropdown . menu {
box-shadow : 0 6px 18px var ( --color-shadow ) ! important ;
}
2023-08-16 17:12:40 -05:00
. ui . dimmer {
background : var ( --color-overlay-backdrop ) ;
}
2023-03-14 21:20:19 -05: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-22 21:44:10 -05:00
2023-03-14 21:20:19 -05:00
. ui . menu : not ( . vertical ) . item > . button . small {
font-size : 0 . 92857143rem ;
}
2017-10-26 23:30:54 -05:00
2023-03-14 21:20:19 -05:00
. ui . menu . ui . dropdown . item . menu . item {
width : 100 % ;
}
2017-10-26 23:30:54 -05:00
2023-03-14 21:20:19 -05:00
. ui . dropdown . menu > . item > . floating . label {
z-index : 11 ;
}
2019-05-13 01:26:32 -05:00
2023-03-14 21:20:19 -05:00
. ui . dropdown . menu . menu > . item > . floating . label {
z-index : 21 ;
}
2019-05-13 01:26:32 -05:00
2023-03-14 21:20:19 -05:00
. ui . dropdown . menu > . header {
font-size : 0 . 8em ;
}
2019-05-13 01:26:32 -05:00
2023-03-14 21:20:19 -05:00
. ui . text . left {
text-align : left ! important ;
}
2019-05-13 01:26:32 -05:00
2023-03-14 21:20:19 -05:00
. ui . text . right {
text-align : right ! important ;
}
2019-05-13 01:26:32 -05:00
2023-03-14 21:20:19 -05:00
. ui . text . normal {
2023-05-21 18:37:32 -05:00
font-weight : var ( --font-weight-normal ) ;
2023-03-14 21:20:19 -05:00
}
2019-05-13 01:26:32 -05:00
2023-03-14 21:20:19 -05:00
. ui . text . italic {
font-style : italic ;
}
2020-02-27 14:20:55 -05:00
2023-03-14 21:20:19 -05:00
. ui . text . truncate {
2023-08-15 08:23:51 -05:00
overflow-x : hidden ;
2023-03-14 21:20:19 -05:00
text-overflow : ellipsis ;
white-space : nowrap ;
display : inline-block ;
}
2017-10-26 23:30:54 -05:00
2023-03-14 21:20:19 -05:00
. ui . text . thin {
2023-05-21 18:37:32 -05:00
font-weight : var ( --font-weight-normal ) ;
2023-03-14 21:20:19 -05:00
}
2019-07-07 21:14:12 -05:00
2023-03-14 21:20:19 -05:00
. ui . text . middle {
vertical-align : middle ;
}
2019-07-07 21:14:12 -05:00
2023-05-03 13:32:10 -05:00
. ui . message . flash-message {
2023-03-14 21:20:19 -05:00
text-align : center ;
}
2021-09-18 11:22:51 -05:00
2023-03-14 21:20:19 -05:00
. ui . message > ul {
margin-left : auto ;
margin-right : auto ;
display : table ;
text-align : left ;
}
2019-09-16 04:03:22 -05:00
2023-03-14 21:20:19 -05:00
. ui . header > i + . content {
padding-left : 0 . 75rem ;
vertical-align : middle ;
}
2019-09-16 04:03:22 -05:00
2023-03-14 21:20:19 -05:00
. ui . form . autofill-dummy {
position : absolute ;
width : 1px ;
height : 1px ;
overflow : hidden ;
z-index : -10000 ;
}
2019-09-16 04:03:22 -05:00
2023-03-14 21:20:19 -05:00
. ui . form . sub . field {
margin-left : 25px ;
}
2019-09-16 04:03:22 -05:00
2023-03-14 21:20:19 -05:00
. ui . sha . label {
font-family : var ( --fonts-monospace ) ;
font-size : 13px ;
2023-05-21 18:37:32 -05:00
font-weight : var ( --font-weight-normal ) ;
2023-03-14 21:20:19 -05:00
margin : 0 6px ;
2023-09-02 21:58:52 -05:00
padding : 5px 10px ;
}
. ui . sha . label . shortsha {
display : inline-block ; /* not sure whether it is still needed */
2023-03-14 21:20:19 -05:00
}
2020-02-27 14:20:55 -05:00
2023-03-14 21:20:19 -05: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 01:31:54 -05:00
2023-03-14 21:20:19 -05:00
. ui . status . buttons . svg {
margin-right : 4px ;
}
2020-08-25 14:48:53 -05:00
2023-03-14 21:20:19 -05:00
. ui . inline . delete-button {
padding : 8px 15px ;
2023-05-21 18:37:32 -05:00
font-weight : var ( --font-weight-normal ) ;
2023-03-14 21:20:19 -05:00
}
2020-08-25 14:48:53 -05:00
2023-03-14 21:20:19 -05:00
. ui . background . red {
background-color : var ( --color-red ) ! important ;
}
2020-10-21 16:07:33 -05:00
2023-03-14 21:20:19 -05:00
. ui . background . blue {
background-color : var ( --color-blue ) ! important ;
}
2020-10-21 16:07:33 -05:00
2023-03-14 21:20:19 -05:00
. ui . background . black {
background-color : var ( --color-black ) ! important ;
}
. ui . background . grey {
background-color : var ( --color-grey ) ! important ;
}
. ui . background . light . grey {
background-color : var ( --color-grey ) ! important ;
}
. ui . background . green {
background-color : var ( --color-green ) ! important ;
}
. ui . background . purple {
background-color : var ( --color-purple ) ! important ;
}
. ui . background . yellow {
background-color : var ( --color-yellow ) ! important ;
}
. ui . background . orange {
background-color : var ( --color-orange ) ! important ;
}
. ui . background . gold {
background-color : var ( --color-gold ) ! important ;
}
. 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 05:12:06 -05:00
2023-03-14 21:20:19 -05: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 04:10:51 -05:00
@ media ( max-width : 767 . 98px ) {
2023-03-14 21:20:19 -05:00
. ui . pagination . menu . item : not ( . active , . navigation ) ,
. ui . pagination . menu . item . navigation span . navigation_label {
display : none ;
2020-08-25 14:48:53 -05:00
}
2015-08-25 23:39:32 -05:00
}
2023-03-14 21:20:19 -05: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 15:58:38 -05:00
. user-menu > . item {
2020-08-25 14:48:53 -05:00
width : 100 % ;
border-radius : 0 ! important ;
2018-09-27 15:58:38 -05:00
}
2023-03-14 21:20:19 -05:00
. scrolling . menu . item . selected {
2023-05-21 18:37:32 -05:00
font-weight : var ( --font-weight-semibold ) ! important ;
2015-08-31 03:10:28 -05:00
}
2020-12-09 14:03:19 -05:00
. ui . dropdown . scrolling . menu {
border-color : var ( --color-secondary ) ;
}
2022-10-21 07:00:53 -05:00
. color-preview {
display : inline-block ;
2023-03-14 21:20:19 -05:00
margin-left : 0 . 4em ;
height : 0 . 67em ;
width : 0 . 67em ;
2023-08-28 14:43:59 -05:00
border-radius : var ( --border-radius ) ;
2022-10-21 07:00:53 -05:00
}
2024-03-16 06:34:38 -05:00
. attention-icon {
2024-03-23 12:42:38 -05:00
margin : auto 0 . 5em auto 0 ;
2024-03-16 06:34:38 -05:00
}
2024-02-10 13:43:09 -05:00
blockquote . attention-note {
border-left-color : var ( --color-blue-dark-1 ) ;
}
2024-03-16 06:34:38 -05:00
strong . attention-note , svg . attention-note {
2024-02-10 13:43:09 -05:00
color : var ( --color-blue-dark-1 ) ;
}
blockquote . attention-tip {
border-left-color : var ( --color-success-text ) ;
}
2024-03-16 06:34:38 -05:00
strong . attention-tip , svg . attention-tip {
2024-02-10 13:43:09 -05:00
color : var ( --color-success-text ) ;
2022-11-08 19:11:26 -05:00
}
2024-02-10 13:43:09 -05:00
blockquote . attention-important {
border-left-color : var ( --color-violet-dark-1 ) ;
}
2024-03-16 06:34:38 -05:00
strong . attention-important , svg . attention-important {
2024-02-10 13:43:09 -05:00
color : var ( --color-violet-dark-1 ) ;
}
blockquote . attention-warning {
border-left-color : var ( --color-warning-text ) ;
}
2024-03-16 06:34:38 -05:00
strong . attention-warning , svg . attention-warning {
2022-11-08 19:11:26 -05:00
color : var ( --color-warning-text ) ;
}
2024-02-10 13:43:09 -05:00
blockquote . attention-caution {
border-left-color : var ( --color-red-dark-1 ) ;
}
2024-03-16 06:34:38 -05:00
strong . attention-caution , svg . attention-caution {
2024-02-10 13:43:09 -05:00
color : var ( --color-red-dark-1 ) ;
}
2020-12-19 22:13:12 -05:00
. center : not ( . popup ) {
2020-08-25 14:48:53 -05:00
text-align : center ;
2015-07-08 06:47:56 -05:00
}
2024-03-14 21:05:31 -05:00
overflow-menu {
2020-11-26 14:33:28 -05:00
border-bottom : 1px solid var ( --color-secondary ) ! important ;
2024-03-14 21:05:31 -05:00
display : flex ;
2017-03-15 17:39:38 -05:00
}
2017-05-24 01:00:40 -05:00
2024-03-14 21:05:31 -05:00
overflow-menu . overflow-menu-items {
2020-11-26 14:33:28 -05:00
display : flex ;
2024-03-14 21:05:31 -05:00
flex : 1 ;
2020-11-29 10:52:11 -05:00
}
2024-03-14 21:05:31 -05:00
overflow-menu . overflow-menu-items . item {
2023-05-01 11:08:37 -05:00
margin-bottom : 0 ! important ; /* reset fomantic's margin, because the active menu has special bottom border */
2020-11-26 14:33:28 -05:00
}
2019-05-13 01:26:32 -05:00
2024-03-22 18:54:09 -05:00
overflow-menu . ui . label {
margin-left : 7px ! important ; /* save some space */
}
2020-01-20 05:07:30 -05:00
. activity-bar-graph {
2020-11-07 16:04:40 -05:00
background-color : var ( --color-primary ) ;
2022-10-22 23:05:20 -05:00
color : var ( --color-primary-contrast ) ;
2020-01-20 05:07:30 -05:00
}
. activity-bar-graph-alt {
2022-10-22 23:05:20 -05:00
color : var ( --color-primary-contrast ) ;
2020-01-20 05:07:30 -05:00
}
2019-05-13 01:26:32 -05:00
. archived-icon {
2022-11-22 19:22:27 -05:00
color : var ( --color-secondary-dark-2 ) ! important ;
2019-01-23 13:58:38 -05:00
}
2019-03-08 11:42:50 -05:00
. oauth2-authorize-application-box {
2020-08-25 14:48:53 -05:00
margin-top : 3em ! important ;
2019-03-08 11:42:50 -05:00
}
2019-04-29 13:49:59 -05:00
2019-07-12 12:44:28 -05:00
/* multiple radio or checkboxes as inline element */
. inline-grouped-list {
2020-08-25 14:48:53 -05:00
display : inline-block ;
vertical-align : top ;
2023-03-14 21:20:19 -05:00
}
2019-07-12 12:44:28 -05:00
2023-03-14 21:20:19 -05:00
. inline-grouped-list > . ui {
display : block ;
margin-top : 5px ;
margin-bottom : 10px ;
}
2019-07-12 12:44:28 -05:00
2023-03-14 21:20:19 -05:00
. inline-grouped-list > . ui : first-child {
margin-top : 1px ;
2019-07-12 12:44:28 -05:00
}
2019-08-08 09:46:03 -05:00
2020-04-04 14:39:57 -05:00
. ui . label {
2023-03-14 21:20:19 -05:00
padding : 0 . 3em 0 . 5em ;
2023-07-04 04:59:47 -05:00
transition : none ;
2023-10-25 05:40:39 -05:00
white-space : nowrap ;
2023-05-19 11:30:24 -05:00
}
. ui . label ,
2024-03-08 04:42:12 -05:00
. ui . menu . item > . label ,
. ui . grey . labels . label ,
. ui . ui . ui . grey . label {
2023-05-19 11:30:24 -05:00
background : var ( --color-label-bg ) ;
color : var ( --color-label-text ) ;
}
2023-06-09 03:37:47 -05:00
. ui . label > a {
opacity : . 75 ; /* increase contrast over default fomantic .5 */
}
2023-05-19 11:30:24 -05:00
. ui . active . label {
background : var ( --color-label-active-bg ) ;
border-color : var ( --color-label-active-bg ) ;
color : var ( --color-label-text ) ;
2020-11-29 01:22:04 -05:00
}
. ui . labels a . label : hover ,
a . ui . label : hover {
2023-05-19 11:30:24 -05:00
background : var ( --color-label-hover-bg ) ;
border-color : var ( --color-label-hover-bg ) ;
color : var ( --color-label-text ) ;
2020-11-29 01:22:04 -05:00
}
2023-05-01 04:35:02 -05:00
. ui . labels a . active . label : hover ,
a . ui . active . label : hover {
2023-05-19 11:30:24 -05:00
background : var ( --color-label-active-bg ) ;
border-color : var ( --color-label-active-bg ) ;
color : var ( --color-label-text ) ;
2023-05-01 04:35:02 -05:00
}
2021-06-27 18:13:20 -05:00
. lines-blame-btn {
2024-03-24 07:14:03 -05:00
padding : 0 0 0 5px ;
display : flex ;
justify-content : center ;
2021-06-27 18:13:20 -05:00
}
2019-08-08 09:46:03 -05:00
. lines-num {
2024-03-24 07:14:03 -05:00
padding : 0 8px ;
2020-08-25 14:48:53 -05:00
text-align : right ! important ;
2024-03-24 07:14:03 -05:00
color : var ( --color-text-light-2 ) ;
2020-08-25 14:48:53 -05:00
width : 1 % ;
2020-10-19 15:01:06 -05:00
font-family : var ( --fonts-monospace ) ;
2023-03-14 21:20:19 -05:00
}
2020-08-25 14:48:53 -05:00
2023-03-14 21:20:19 -05: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 09:46:03 -05:00
}
2020-06-30 16:34:03 -05:00
. lines-type-marker {
2020-08-25 14:48:53 -05:00
vertical-align : top ;
2020-06-30 16:34:03 -05:00
}
2019-08-08 09:46:03 -05:00
. lines-num ,
. lines-code {
2020-12-20 13:00:03 -05:00
font-size : 12px ;
font-family : var ( --fonts-monospace ) ;
line-height : 20px ;
2020-08-25 14:48:53 -05:00
padding-top : 0 ;
padding-bottom : 0 ;
vertical-align : top ;
2023-03-14 21:20:19 -05:00
}
2019-08-08 09:46:03 -05:00
2023-03-14 21:20:19 -05: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 09:46:03 -05:00
}
2022-01-06 20:18:52 -05:00
. lines-escape {
width : 0 ;
}
2020-10-31 17:15:11 -05:00
. lines-code {
padding-left : 5px ;
}
2024-03-24 07:14:03 -05:00
. file-view tr . active {
color : inherit ! important ;
background : inherit ! important ;
2020-10-04 15:54:22 -05:00
}
2024-03-24 07:14:03 -05:00
. file-view tr . active . lines-num ,
. file-view tr . active . lines-code {
background : var ( --color-highlight-bg ) ! important ;
2020-06-30 16:34:03 -05:00
}
2024-03-24 07:14:03 -05:00
. file-view tr . active : last-of-type . lines-code {
border-bottom-right-radius : var ( --border-radius ) ;
}
. file-view tr . active . lines-num {
position : relative ;
}
. file-view tr . active . lines-num :: before {
content : "" ;
position : absolute ;
left : 0 ;
width : 2px ;
height : 100 % ;
background : var ( --color-highlight-fg ) ;
2020-06-30 16:34:03 -05:00
}
2020-11-04 02:14:07 -05:00
. code-inner {
font : 12px var ( --fonts-monospace ) ;
white-space : pre-wrap ;
word-break : break-all ;
2023-03-03 23:48:59 -05:00
overflow-wrap : anywhere ;
2020-11-04 02:14:07 -05:00
}
. blame . code-inner {
2024-03-24 07:14:03 -05:00
white-space : pre-wrap ;
overflow-wrap : anywhere ;
2020-11-04 02:14:07 -05:00
}
2019-08-08 09:46:03 -05:00
. lines-commit {
2020-08-25 14:48:53 -05:00
vertical-align : top ;
2024-03-24 07:14:03 -05:00
color : var ( --color-text-light-1 ) ;
2020-08-25 14:48:53 -05:00
padding : 0 ! important ;
width : 1 % ;
2023-03-14 21:20:19 -05:00
}
2020-08-25 14:48:53 -05:00
2023-03-14 21:20:19 -05:00
. lines-commit . blame-info {
2024-03-24 07:14:03 -05:00
width : min ( 26vw , 300px ) ;
2023-03-14 21:20:19 -05:00
display : block ;
2024-03-24 07:14:03 -05:00
padding : 0 0 0 6px ;
2023-03-14 21:20:19 -05:00
line-height : 20px ;
box-sizing : content-box ;
}
2020-08-25 14:48:53 -05:00
2023-03-14 21:20:19 -05: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 07:14:03 -05:00
. blame-avatar {
display : flex ;
align-items : center ;
margin-right : 4px ;
2019-08-08 09:46:03 -05:00
}
2021-06-27 18:13:20 -05:00
. top-line-blame {
border-top : 1px solid var ( --color-secondary ) ;
}
2024-02-28 21:00:33 -05:00
. code-view tr . top-line-blame : first-of-type {
border-top : none ;
}
2023-03-14 21:20:19 -05:00
. lines-code . bottom-line ,
. lines-commit . bottom-line {
border-bottom : 1px solid var ( --color-secondary ) ;
2019-08-08 09:46:03 -05:00
}
2023-03-14 21:20:19 -05:00
2024-03-24 07:14:03 -05:00
. code-view {
background : var ( --color-code-bg ) ;
border-radius : var ( --border-radius ) ;
}
2021-05-18 22:16:02 -05:00
. code-view table {
width : 100 % ;
2019-08-08 09:46:03 -05:00
}
2019-12-12 08:18:07 -05:00
2020-11-01 15:04:26 -05:00
. ui . primary . label ,
2023-04-19 11:13:00 -05:00
. ui . primary . labels . label ,
2023-04-09 05:15:43 -05:00
. ui . ui . ui . primary . label {
background-color : var ( --color-primary ) ;
border-color : var ( --color-primary-dark-2 ) ;
2020-01-01 00:06:15 -05:00
}
2020-01-04 23:56:06 -05:00
2020-11-01 15:04:26 -05:00
. ui . basic . labels . primary . label ,
. ui . ui . ui . basic . primary . label {
2023-03-28 21:58:31 -05:00
background : transparent ;
border-color : var ( --color-primary ) ;
color : var ( --color-primary ) ;
}
2023-04-20 20:53:17 -05:00
. ui . basic . labels a . primary . label : hover ,
a . ui . ui . ui . basic . primary . label : hover {
background : var ( --color-hover ) ;
border-color : var ( --color-primary-dark-1 ) ;
color : var ( --color-primary-dark-1 ) ;
}
2023-03-28 21:58:31 -05:00
. ui . basic . labels . secondary . label ,
. ui . ui . ui . basic . secondary . label {
background : transparent ;
border-color : var ( --color-secondary ) ;
color : var ( --color-secondary ) ;
}
. ui . basic . labels . orange . label ,
. ui . ui . ui . basic . orange . label {
background : transparent ;
border-color : var ( --color-orange ) ;
color : var ( --color-orange ) ;
}
. ui . basic . labels . green . label ,
. ui . ui . ui . basic . green . label {
background : transparent ;
border-color : var ( --color-green ) ;
color : var ( --color-green ) ;
}
. ui . basic . labels . olive . label ,
. ui . ui . ui . basic . olive . label {
background : transparent ;
border-color : var ( --color-olive ) ;
color : var ( --color-olive ) ;
}
. ui . basic . labels . teal . label ,
. ui . ui . ui . basic . teal . label {
background : transparent ;
border-color : var ( --color-teal ) ;
color : var ( --color-teal ) ;
}
. ui . basic . labels . blue . label ,
. ui . ui . ui . basic . blue . label {
background : transparent ;
border-color : var ( --color-blue ) ;
color : var ( --color-blue ) ;
}
. ui . basic . labels . violet . label ,
. ui . ui . ui . basic . violet . label {
background : transparent ;
border-color : var ( --color-violet ) ;
color : var ( --color-violet ) ;
}
. ui . basic . labels . purple . label ,
. ui . ui . ui . basic . purple . label {
background : transparent ;
border-color : var ( --color-purple ) ;
color : var ( --color-purple ) ;
}
. ui . basic . labels . pink . label ,
. ui . ui . ui . basic . pink . label {
background : transparent ;
border-color : var ( --color-pink ) ;
color : var ( --color-pink ) ;
}
. ui . basic . labels . red . label ,
. ui . ui . ui . basic . red . label {
background : transparent ;
border-color : var ( --color-red ) ;
color : var ( --color-red ) ;
}
. ui . basic . labels . brown . label ,
. ui . ui . ui . basic . brown . label {
background : transparent ;
border-color : var ( --color-brown ) ;
color : var ( --color-brown ) ;
}
. ui . basic . labels . yellow . label ,
. ui . ui . ui . basic . yellow . label {
background : transparent ;
border-color : var ( --color-yellow ) ;
color : var ( --color-yellow ) ;
}
. ui . basic . labels . grey . label ,
. ui . ui . ui . basic . grey . label {
background : transparent ;
border-color : var ( --color-grey ) ;
color : var ( --color-grey ) ;
}
. ui . basic . labels . black . label ,
. ui . ui . ui . basic . black . label {
background : transparent ;
border-color : var ( --color-black ) ;
color : var ( --color-black ) ;
2020-10-31 07:17:32 -05:00
}
2020-12-20 13:00:03 -05:00
. ui . basic . labels . label ,
2023-09-17 23:54:05 -05:00
. ui . basic . label ,
. ui . secondary . labels . ui . basic . label {
2023-06-09 03:37:47 -05:00
background : var ( --color-button ) ;
2020-12-27 05:53:53 -05:00
border-color : var ( --color-light-border ) ;
color : var ( --color-text-light ) ;
2020-12-20 13:00:03 -05:00
}
. ui . basic . labels a . label : hover ,
a . ui . basic . label : hover {
color : var ( --color-text ) ;
2020-12-27 05:53:53 -05:00
border-color : var ( --color-light-border ) ;
background : var ( --color-hover ) ;
2020-12-20 13:00:03 -05:00
}
2020-01-04 23:56:06 -05:00
. ui . label > img {
2020-08-25 14:48:53 -05:00
width : auto ! important ;
vertical-align : middle ;
height : 2 . 1666em ! important ;
2020-01-04 23:56:06 -05:00
}
2020-01-19 23:39:21 -05:00
2021-09-18 11:22:51 -05:00
. migrate . svg . gitea-git {
2022-11-22 19:22:27 -05:00
color : var ( --color-git ) ;
2021-09-18 11:22:51 -05:00
}
2020-02-11 04:34:17 -05:00
. color-icon {
2020-08-25 14:48:53 -05:00
display : inline-block ;
2023-08-28 14:43:59 -05:00
border-radius : var ( --border-radius-circle ) ;
2020-08-25 14:48:53 -05:00
height : 14px ;
width : 14px ;
2020-02-11 04:34:17 -05:00
}
2020-02-11 12:02:41 -05:00
2020-02-20 14:53:55 -05:00
. ui . label > . color-icon {
2020-08-25 14:48:53 -05:00
margin-left : 0 ;
2020-02-20 14:53:55 -05:00
}
2023-05-12 05:23:53 -05:00
. rss-icon {
display : inline-flex ;
color : var ( --color-text-light-1 ) ;
}
2023-03-14 21:20:19 -05:00
table th [ data-sortt-asc ] : hover ,
table th [ data-sortt-desc ] : hover {
2023-10-13 03:19:21 -05:00
background : var ( --color-hover ) ! important ;
2023-03-14 21:20:19 -05:00
cursor : pointer ! important ;
}
table th [ data-sortt-asc ] . svg ,
table th [ data-sortt-desc ] . svg {
margin-left : 0 . 25rem ;
2020-06-24 17:23:05 -05:00
}
2020-10-24 14:15:29 -05: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 03:24:47 -05:00
. ui . multiple . dropdown > . label {
box-shadow : 0 0 0 1px var ( --color-secondary ) inset ;
}
2020-04-28 13:05:39 -05:00
. emoji ,
. reaction {
2020-08-25 14:48:53 -05:00
font-size : 1 . 25em ;
2023-08-17 16:50:32 -05:00
line-height : var ( --line-height-default ) ;
2020-08-25 14:48:53 -05:00
font-style : normal ! important ;
2023-05-21 18:37:32 -05:00
font-weight : var ( --font-weight-normal ) ! important ;
2023-03-14 21:20:19 -05:00
vertical-align : -0 . 075em ;
}
2020-04-28 13:05:39 -05:00
. emoji img ,
. reaction img {
2020-08-25 14:48:53 -05:00
border-width : 0 ! important ;
margin : 0 ! important ;
width : 1em ! important ;
height : 1em ! important ;
2023-03-14 21:20:19 -05:00
vertical-align : -0 . 15em ;
2020-04-28 13:05:39 -05:00
}
2020-05-20 15:27:14 -05:00
2023-09-01 01:59:38 -05:00
/* for the jquery.minicolors plugin */
2022-10-12 11:26:27 -05:00
. minicolors-panel {
background : var ( --color-secondary-dark-1 ) ! important ;
}
2020-06-22 11:44:06 -05:00
. ui . tabular . menu {
2020-11-26 14:33:28 -05:00
border-color : var ( --color-secondary ) ;
}
2020-06-22 11:44:06 -05:00
2020-11-26 14:33:28 -05: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 10:52:58 -05:00
. ui . segment . ui . tabular . menu . active . item ,
. ui . segment . ui . tabular . menu . active . item : hover {
background : var ( --color-box-body ) ;
}
2020-11-26 14:33:28 -05:00
. ui . secondary . pointing . menu {
border-color : var ( --color-secondary ) ;
2020-06-22 11:44:06 -05:00
}
2024-03-20 12:00:35 -05:00
. ui . tabular . menu . item ,
2020-06-22 11:44:06 -05:00
. ui . secondary . pointing . menu . item {
2024-03-20 12:00:35 -05:00
padding : 11px 12px ! important ;
2020-12-17 10:52:58 -05:00
color : var ( --color-text-light-2 ) ;
2020-11-26 14:33:28 -05:00
}
2024-03-20 12:00:35 -05: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 14:33:28 -05:00
. ui . secondary . pointing . menu . active . item ,
2024-02-18 11:28:35 -05:00
. ui . secondary . pointing . menu . active . item : hover , . ui . secondary . pointing . menu . active . item : focus ,
2024-03-20 12:00:35 -05:00
. ui . secondary . pointing . menu . dropdown . item : hover , . ui . secondary . pointing . menu . dropdown . item : focus {
2021-04-03 03:37:32 -05:00
color : var ( --color-text-dark ) ;
2020-06-22 11:44:06 -05:00
}
2020-06-25 19:07:15 -05:00
2024-03-20 12:00:35 -05: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 02:58:49 -05:00
. flash-error details code ,
. flash-warning details code {
2020-10-20 18:50:10 -05:00
display : block ;
text-align : left ;
}
2021-02-11 20:29:07 -05:00
. truncated-item-container {
display : flex ! important ;
2022-11-21 18:10:42 -05:00
align-items : center ;
2021-02-11 20:29:07 -05:00
}
2021-11-22 21:44:38 -05:00
. ellipsis-button {
padding : 0 5px 8px ! important ;
display : inline-block ! important ;
2023-05-21 18:37:32 -05:00
font-weight : var ( --font-weight-semibold ) ! important ;
2021-11-22 21:44:38 -05:00
line-height : 6px ! important ;
vertical-align : middle ! important ;
}
2021-02-11 20:29:07 -05:00
. truncated-item-name {
2023-06-27 14:44:17 -05:00
line-height : 2 ;
2021-02-11 20:29:07 -05:00
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
2023-03-14 21:20:19 -05:00
margin-top : -0 . 5em ;
margin-bottom : -0 . 5em ;
2021-02-11 20:29:07 -05:00
}
2021-09-29 15:53:12 -05:00
. precolors {
2023-08-28 09:14:51 -05:00
display : flex ;
flex-direction : column ;
justify-content : center ;
margin-left : 1em ;
2023-03-14 21:20:19 -05:00
}
2021-09-29 15:53:12 -05:00
2023-03-14 21:20:19 -05:00
. precolors . color {
2023-08-28 09:14:51 -05:00
display : inline-block ;
2023-03-14 21:20:19 -05:00
width : 15px ;
height : 15px ;
2021-09-29 15:53:12 -05:00
}
2023-06-14 11:40:15 -05:00
2023-10-16 02:26:08 -05:00
. ui . dropdown : not ( . button ) {
2023-08-17 16:50:32 -05: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-14 11:40:15 -05: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-24 21:40:41 -05: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-14 11:40:15 -05: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-27 23:04:32 -05:00
. btn ,
2023-06-14 11:40:15 -05:00
. ui . ui . button ,
. ui . ui . dropdown ,
2023-08-28 09:14:51 -05:00
. ui . ui . label ,
2023-06-14 11:40:15 -05:00
. flex-items-inline > . item ,
. flex-text-inline {
display : inline-flex ;
align-items : center ;
gap : . 25rem ;
vertical-align : middle ;
}
. ui . ui . button {
justify-content : center ;
}
. ui . dropdown . ui . label . svg {
vertical-align : middle ;
}
2023-08-28 09:14:51 -05:00
. ui . ui . circular . label {
justify-content : center ;
}
2023-06-14 11:40:15 -05:00
. ui . ui . labeled . button {
gap : 0 ;
align-items : stretch ;
}
. ui . ui . icon . input . icon {
display : flex ;
align-items : center ;
justify-content : center ;
}
2024-03-19 05:36:54 -05:00
. ui . icon . input > i . icon {
transition : none ;
}
2023-06-14 11:40:15 -05:00
. flex-items-block > . item ,
. flex-text-block {
display : flex ;
align-items : center ;
gap : . 25rem ;
}
