2020-10-20 01:31:06 +05:30
: root {
2022-10-12 21:56:27 +05:30
/* fonts */
2023-05-01 00:28:32 +05:30
--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-19 05:13:43 +05:30
--fonts-emoji : "Apple Color Emoji" , "Segoe UI Emoji" , "Noto Color Emoji" , "Twemoji Mozilla" ;
2023-05-22 14:17:33 +05:30
/* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
2023-05-22 05:07:32 +05:30
--font-weight-light : 300 ;
--font-weight-normal : 400 ;
--font-weight-medium : 500 ;
--font-weight-semibold : 600 ;
2023-05-25 08:01:26 +05:30
--font-weight-bold : 700 ;
2023-08-18 03:20:32 +05:30
/* line-height: use the default value as "modules/normalize.css" */
2023-08-22 15:49:15 +05:30
--line-height-default : normal ;
2023-10-06 13:16:36 +05:30
/* images */
2022-10-12 21:56:27 +05:30
--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 08:19:48 +05:30
--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 13:16:36 +05:30
/* other variables */
2023-08-29 01:13:59 +05:30
--border-radius : 4px ;
--border-radius-medium : 6px ;
2023-08-29 19:33:34 +05:30
--border-radius-circle : 50 % ;
2023-03-15 07:50:19 +05:30
--opacity-disabled : 0 . 55 ;
2023-04-17 15:40:22 +05:30
--height-loading : 16rem ;
2024-02-18 20:21:21 +05:30
--min-height-textarea : 132px ; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
2023-05-28 23:34:35 +05:30
--tab-size : 4 ;
2020-10-20 01:31:06 +05:30
}
2021-03-19 05:13:43 +05:30
: root * {
2021-05-16 05:42:55 +05:30
--fonts-regular : var ( --fonts-override , var ( --fonts-proportional ) ) , "Noto Sans" , "Liberation Sans" , sans-serif , var ( --fonts-emoji ) ;
2019-03-18 18:19:01 +05:30
}
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 22:16:46 +05:30
* , :: 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 17:17:50 +05:30
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 23:31:38 +05:30
textarea {
2020-10-20 01:31:06 +05:30
font-family : var ( --fonts-regular ) ;
}
2019-03-18 18:19:01 +05:30
2020-12-19 01:30:07 +05:30
pre ,
2020-11-06 22:46:21 +05:30
code ,
kbd ,
samp {
2023-03-15 07:50:19 +05:30
font-size : 0 . 9em ; /* compensate for monospace fonts being usually slightly larger */
2020-11-06 22:46:21 +05:30
font-family : var ( --fonts-monospace ) ;
}
2020-11-16 02:28:16 +05:30
b ,
2020-12-05 16:30:36 +05:30
strong ,
2020-11-25 16:50:40 +05:30
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 {
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-semibold ) ;
2020-11-25 16:50:40 +05:30
}
2024-03-22 17:17:50 +05:30
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 02:20:05 +05:30
}
2019-03-18 18:19:01 +05:30
2018-09-09 23:41:49 +05:30
table {
2020-08-26 01:18:53 +05:30
border-collapse : collapse ;
2018-09-09 23:41:49 +05:30
}
2019-05-13 11:56:32 +05:30
2023-03-30 17:36:10 +05:30
button {
cursor : pointer ;
}
2021-05-23 06:15:39 +05:30
details summary {
cursor : pointer ;
}
details summary > * {
display : inline ;
}
2022-05-20 08:34:45 +05:30
progress {
2022-06-15 09:58:24 +05:30
background : var ( --color-secondary-dark-1 ) ;
2023-08-29 01:13:59 +05:30
border-radius : var ( --border-radius ) ;
2022-05-20 08:34:45 +05:30
border : none ;
overflow : hidden ;
}
2023-03-15 07:50:19 +05:30
2022-05-20 08:34:45 +05:30
progress :: -webkit-progress-bar {
2022-06-15 09:58:24 +05:30
background : var ( --color-secondary-dark-1 ) ;
2022-05-20 08:34:45 +05:30
}
2023-03-15 07:50:19 +05:30
2022-05-20 08:34:45 +05:30
progress :: -webkit-progress-value {
2022-10-23 09:35:20 +05:30
background-color : var ( --color-accent ) ;
2022-05-20 08:34:45 +05:30
}
2023-03-15 07:50:19 +05:30
2022-05-20 08:34:45 +05:30
progress :: -moz-progress-bar {
2022-10-23 09:35:20 +05:30
background-color : var ( --color-accent ) ;
2022-05-20 08:34:45 +05:30
}
2024-02-25 16:29:12 +05:30
h1 . error-code {
font-size : 15em ;
2024-02-26 04:14:00 +05:30
font-weight : var ( --font-weight-bold ) ;
2024-02-25 16:29:12 +05:30
color : transparent ;
--error-code-color-1 : # a2a2a2 ;
--error-code-color-2 : # 797979 ;
2024-02-26 04:14:00 +05:30
--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 16:29:12 +05:30
background-clip : text ;
}
2020-10-31 09:22:10 +05:30
* {
2021-05-05 23:44:04 +05:30
caret-color : var ( --color-caret ) ;
2020-10-31 09:22:10 +05:30
}
2022-10-23 09:35:20 +05:30
:: 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 07:50:19 +05:30
2022-10-23 09:35:20 +05:30
:: file-selector-button : hover {
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
}
2021-12-21 01:37:49 +05:30
:: selection {
2024-03-22 17:17:50 +05:30
background : var ( --color-primary-light-1 ) ;
color : var ( --color-white ) ;
2020-10-31 09:22:10 +05:30
}
2020-11-05 07:21:17 +05:30
:: placeholder ,
2021-04-03 14:07:32 +05:30
. ui . dropdown : not ( . button ) > . default . text ,
. ui . default . dropdown : not ( . button ) > . text {
color : var ( --color-placeholder-text ) ! important ;
2020-11-05 07:21:17 +05:30
opacity : 1 ! important ;
}
2023-03-15 07:50:19 +05:30
. 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 21:10:02 +05:30
a {
2020-10-31 09:22:10 +05:30
color : var ( --color-primary ) ;
2020-08-26 01:18:53 +05:30
cursor : pointer ;
2024-03-22 17:17:50 +05:30
text-decoration : none ;
2021-12-18 10:59:00 +05:30
text-decoration-skip-ink : all ;
2019-02-06 03:29:26 +05:30
}
2019-05-13 11:56:32 +05:30
2024-03-16 22:28:58 +05:30
/* 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 04:16:51 +05:30
2022-11-19 09:32:30 +05:30
a . muted ,
2024-03-16 22:28:58 +05:30
a . suppressed ,
2023-05-16 04:16:51 +05:30
a . silenced ,
2022-11-19 09:32:30 +05:30
. muted-links a {
2020-11-29 11:52:04 +05:30
color : inherit ;
}
2020-10-31 09:22:10 +05:30
a : hover ,
2024-03-16 22:28:58 +05:30
a . suppressed : hover ,
2020-11-29 11:52:04 +05:30
a . muted : hover ,
2022-07-22 16:19:24 +05:30
a . muted : hover [ class * = "color-text" ] ,
2023-05-01 21:10:02 +05:30
. muted-links a : hover {
2021-12-18 10:59:00 +05:30
color : var ( --color-primary ) ;
}
2024-03-16 22:28:58 +05:30
a . silenced : hover ,
a . suppressed : hover {
2023-05-16 04:16:51 +05:30
color : inherit ;
2024-03-16 22:28:58 +05:30
}
a . silenced : hover {
2023-05-25 08:01:26 +05:30
text-decoration : none ;
2023-05-16 04:16:51 +05:30
}
2021-12-18 10:59:00 +05:30
a . label ,
. ui . search . results a ,
. ui . menu a ,
2022-01-13 20:03:04 +05:30
. ui . cards a . card ,
2023-02-20 14:13:04 +05:30
. issue-keyword a {
2021-12-18 10:59:00 +05:30
text-decoration : none ! important ;
}
2022-09-23 08:30:29 +05:30
. ui . search > . results {
background : var ( --color-body ) ;
border-color : var ( --color-secondary ) ;
2024-02-01 22:40:16 +05:30
overflow-wrap : anywhere ; /* allow text to wrap as fomantic limits this to 18em width */
2022-09-23 08:30:29 +05:30
}
. ui . search > . results . result {
background : var ( --color-body ) ;
2024-02-01 22:40:16 +05:30
border-color : var ( --color-secondary ) ;
display : flex ;
align-items : center ;
2022-09-23 08:30:29 +05:30
}
. ui . search > . results . result . title {
color : var ( --color-text-dark ) ;
}
2023-02-15 00:35:19 +05:30
. ui . search > . results . result . description {
color : var ( --color-text-light-2 ) ;
}
2022-09-23 08:30:29 +05:30
. 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 10:31:01 +05:30
. inline-code-block {
2022-10-15 23:54:41 +05:30
padding : 2px 4px ;
2023-08-29 01:13:59 +05:30
border-radius : var ( --border-radius-medium ) ;
2022-10-15 23:54:41 +05:30
background-color : var ( --color-markup-code-block ) ;
}
2023-03-15 07:50:19 +05:30
2022-10-12 21:56:27 +05:30
. ui . dividing . header {
border-bottom-color : var ( --color-secondary ) ;
}
2023-06-27 14:15:43 +05:30
/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
. ui . input > input {
2023-08-28 19:44:51 +05:30
line-height : var ( --line-height-default ) ;
2023-09-07 13:30:20 +05:30
text-align : start ; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
2023-06-27 14:15:43 +05:30
}
2023-09-13 14:38:45 +05:30
/* 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-08 02:34:40 +05:30
. ui . input . focus > input ,
. ui . input > input : focus {
border-color : var ( --color-primary ) ;
}
2023-09-04 15:52:46 +05:30
. ui . action . input . ui . ui . button {
2023-04-30 09:03:25 +05:30
border-color : var ( --color-input-border ) ;
2023-09-04 15:52:46 +05:30
padding-top : 0 ; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
padding-bottom : 0 ;
2023-04-30 09:03:25 +05:30
}
2021-04-10 02:23:16 +05:30
/* 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-15 07:50:19 +05:30
}
2024-03-15 04:54:59 +05:30
. 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-10 02:23:16 +05:30
}
2023-06-09 14:07:47 +05:30
. ui . action . input : not ( [ class * = "left action" ] ) > input ,
2023-04-30 09:03:25 +05:30
. ui . action . input : not ( [ class * = "left action" ] ) > input : hover {
2024-03-15 04:54:59 +05:30
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 16:06:54 +05:30
. 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-15 04:54:59 +05:30
border-left-color : var ( --color-primary ) ;
2023-04-30 09:03:25 +05:30
}
2020-11-08 02:34:40 +05:30
. ui . action . input : not ( [ class * = "left action" ] ) > input : focus {
border-right-color : var ( --color-primary ) ;
}
2020-12-10 00:33:19 +05:30
. ui . menu ,
. ui . vertical . menu {
2020-11-29 11:52:04 +05:30
background : var ( --color-menu ) ;
border-color : var ( --color-secondary ) ;
}
. ui . menu . item {
color : var ( --color-text ) ;
2023-03-15 07:50:19 +05:30
user-select : auto ;
2023-08-18 03:20:32 +05:30
line-height : var ( --line-height-default ) ; /* fomantic uses "1" which causes overflow problems because "1" doesn't consider the descent part */
2023-03-15 07:50:19 +05:30
}
2021-02-14 22:19:22 +05:30
2023-03-15 07:50:19 +05:30
. ui . menu . item > . svg {
margin-right : 0 . 35em ;
2020-11-29 11:52:04 +05:30
}
. ui . menu . dropdown . item : hover ,
2023-06-07 08:19:48 +05:30
. ui . menu a . item : hover ,
. ui . menu details . item summary : hover {
2020-11-29 11:52:04 +05:30
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
}
. ui . menu . active . item ,
. ui . menu . active . item : hover ,
2020-12-10 00:33:19 +05:30
. ui . vertical . menu . active . item ,
2020-11-29 11:52:04 +05:30
. 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 16:48:37 +05:30
. ui . ui . menu . item . disabled {
2020-12-20 23:30:03 +05:30
color : var ( --color-text-light-3 ) ;
}
2023-05-31 03:58:25 +05:30
. ui . menu . item :: before , . ui . vertical . menu . item :: before {
2023-04-30 09:03:25 +05:30
background : var ( --color-secondary ) ;
}
2023-04-28 05:38:47 +05:30
/* 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 23:30:03 +05:30
/* slightly more contrast for filters on issue list */
. ui . ui . menu . dropdown . item . disabled {
2020-12-04 16:48:37 +05:30
color : var ( --color-text-light-2 ) ;
}
2020-11-29 11:52:04 +05:30
. 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-28 07:04:18 +05:30
. ui . dropdown . menu > . item : active {
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
2020-11-29 11:52:04 +05:30
. ui . dropdown . menu . active . item {
2020-12-04 16:48:37 +05:30
color : var ( --color-text ) ;
background : var ( --color-active ) ;
2023-05-31 03:58:25 +05:30
border-radius : 0 ;
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-normal ) ;
2020-11-29 11:52:04 +05:30
}
2020-12-09 05:42:15 +05:30
/* fix misaligned images in webhook dropdown */
. ui . dropdown . menu > . item > img {
2023-03-15 07:50:19 +05:30
margin-top : -0 . 25rem ;
margin-bottom : -0 . 25rem ;
2020-12-09 05:42:15 +05:30
}
2023-04-25 17:04:37 +05:30
. ui . dropdown . menu > . item > svg {
margin-right : . 78rem ; /* use the same margin as for <img> */
}
2023-03-15 07:50:19 +05:30
2020-11-29 11:52:04 +05:30
. 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-10 00:33:19 +05:30
. 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 19:29:48 +05:30
/* 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-29 00:48:12 +05:30
. ui . dropdown > . text > . description ,
. ui . dropdown . menu > . item > . description {
color : var ( --color-text-light-2 ) ;
}
2022-09-28 18:49:22 +05:30
. ui . list . list > . item . header ,
. ui . list > . item . header {
color : var ( --color-text-dark ) ;
}
2022-09-23 08:30:29 +05:30
. ui . list . list > . item > . content ,
. ui . list > . item > . content {
color : var ( --color-text ) ;
}
2022-09-28 18:49:22 +05:30
. ui . list . list > . item . description ,
. ui . list > . item . description {
color : var ( --color-text ) ;
}
2023-08-14 20:44:30 +05:30
/ * 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 11:52:04 +05:30
. 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 22:19:22 +05:30
. ui . secondary . menu . tight . item {
2023-03-15 07:50:19 +05:30
padding-left : 0 . 85714286em ;
padding-right : 0 . 85714286em ;
2021-02-14 22:19:22 +05:30
}
2023-08-14 20:44:30 +05:30
/* remove the menu clearfix so that it won't add undesired gaps when using "gap" */
. ui . menu :: after {
content : normal ;
}
2020-11-29 11:52:04 +05:30
. ui . menu . dropdown . item . menu {
2023-06-09 14:07:47 +05:30
background : var ( --color-body ) ;
2020-11-29 11:52:04 +05:30
}
. 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 20:21:21 +05:30
. 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 03:42:40 +05:30
/* styles from removed fomantic transition module */
. hidden . transition {
visibility : hidden ;
display : none ;
}
. visible . transition {
display : block ! important ;
visibility : visible ! important ;
}
2021-12-06 21:19:30 +05:30
. ui . error . header {
background : var ( --color-error-bg ) ! important ;
color : var ( --color-error-text ) ! important ;
border-color : var ( --color-error-border ) ! important ;
}
. ui . error . segment {
border-color : var ( --color-error-border ) ! important ;
}
. ui . warning . header {
background : var ( --color-warning-bg ) ! important ;
color : var ( --color-warning-text ) ! important ;
border-color : var ( --color-warning-border ) ! important ;
}
. ui . warning . segment {
border-color : var ( --color-warning-border ) ! important ;
}
2020-11-08 02:34:40 +05:30
. ui . selection . active . dropdown ,
. ui . selection . active . dropdown : hover ,
. ui . selection . active . dropdown . menu ,
. ui . selection . active . dropdown : hover . menu {
2023-08-17 03:42:40 +05:30
border-color : var ( --color-primary ) ;
2020-11-08 02:34:40 +05:30
}
2020-11-27 01:03:28 +05:30
. ui . pointing . dropdown > . menu : not ( . hidden ) :: after {
2023-05-28 07:04:18 +05:30
background : var ( --color-menu ) ;
2020-11-27 01:03:28 +05:30
box-shadow : -1px -1px 0 0 var ( --color-secondary ) ;
2020-12-05 15:39:09 +05:30
}
2023-05-28 07:04:18 +05:30
. 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 20:58:25 +05:30
. ui . comments . comment . text {
margin : 0 ;
}
2020-12-17 21:22:58 +05:30
. 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 ) ;
}
2020-11-12 21:29:33 +05:30
. ui . attached . table {
border-color : var ( --color-secondary ) ;
}
2020-11-13 07:01:25 +05:30
. ui . table {
color : var ( --color-text ) ;
2022-09-23 08:30:29 +05:30
background : var ( --color-box-body ) ;
2020-11-25 00:57:10 +05:30
border-color : var ( --color-secondary ) ;
2023-05-21 02:32:52 +05:30
text-align : start ; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
2020-11-13 07:01:25 +05:30
}
2022-09-23 08:30:29 +05:30
. ui . table th ,
. ui . table td {
transition : none ;
}
. ui . table > tr > td ,
. ui . table > tbody > tr > td {
border-top-color : var ( --color-secondary-alpha-50 ) ;
}
2023-05-11 03:29:58 +05:30
. ui . striped . table > tr : nth-child ( 2n ) ,
. ui . striped . table > tbody > tr : nth-child ( 2n ) ,
. ui . basic . striped . table > tbody > tr : nth-child ( 2n ) {
background : var ( --color-light ) ;
}
2022-09-28 18:49:22 +05:30
. ui . ui . ui . ui . table tr . active ,
. ui . ui . table td . active {
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
2020-11-13 07:01:25 +05:30
. ui . ui . selectable . table > tbody > tr : hover ,
. ui . table tbody tr td . selectable : hover {
color : var ( --color-text ) ;
background-color : var ( --color-secondary-alpha-40 ) ;
}
2020-11-25 00:57:10 +05:30
. ui . ui . ui . ui . table tr . grey : not ( . marked ) ,
. ui . ui . table td . grey : not ( . marked ) {
background : var ( --color-body ) ;
color : var ( --color-text ) ;
}
2022-09-23 08:30:29 +05:30
. ui . table > thead > tr > th {
background : var ( --color-box-header ) ;
2023-05-31 03:58:25 +05:30
border-color : var ( --color-secondary ) ;
2022-09-23 08:30:29 +05:30
color : var ( --color-text ) ;
}
2020-11-13 07:01:25 +05:30
. ui . basic . table > tbody > tr {
border-color : var ( --color-secondary ) ;
}
2023-06-22 07:29:49 +05:30
. ui . table > tfoot > tr > th ,
. ui . table > tfoot > tr > td {
border-color : var ( --color-secondary ) ;
background : var ( --color-box-body ) ;
color : var ( --color-text ) ;
}
2023-06-29 10:10:03 +05:30
/* reduce table padding, needed especially for dense admin tables */
. ui . table > thead > tr > th ,
. ui . table > tbody > tr > td ,
. ui . table > tr > td {
2023-07-26 03:24:20 +05:30
padding : 6px 5px ;
2023-06-29 10:10:03 +05:30
}
/* use more horizontal padding on first and last items for visuals */
. ui . table > thead > tr > th : first-of-type ,
. ui . table > tbody > tr > td : first-of-type ,
. ui . table > tr > td : first-of-type {
padding-left : 10px ;
}
. ui . table > thead > tr > th : last-of-type ,
. ui . table > tbody > tr > td : last-of-type ,
. ui . table > tr > td : last-of-type {
padding-right : 10px ;
}
2023-04-05 06:14:52 +05:30
img . ui . avatar ,
2022-09-12 14:38:46 +05:30
. ui . avatar img ,
2023-05-14 00:29:11 +05:30
. ui . avatar svg {
2020-12-04 00:16:11 +05:30
border-radius : var ( --border-radius ) ;
2023-05-14 00:29:11 +05:30
object-fit : contain ;
aspect-ratio : 1 ;
2020-12-04 00:16:11 +05:30
}
2020-12-20 08:43:12 +05:30
. ui . divided . list > . item {
border-color : var ( --color-secondary ) ;
}
2022-01-07 06:48:52 +05:30
. ui . error . message . header ,
. ui . warning . message . header {
color : inherit ;
filter : saturate ( 2 ) ;
}
2015-03-08 01:42:13 +05:30
. full . height {
2020-08-26 01:18:53 +05:30
flex-grow : 1 ;
padding-bottom : 80px ;
2015-03-08 01:42:13 +05:30
}
2019-05-13 11:56:32 +05:30
2024-03-23 05:24:09 +05:30
/* 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 16:51:18 +05:30
}
2023-04-26 21:29:08 +05:30
/* overwrite semantic width of containers inside the main page content div (div with class "page-content") */
. page-content . ui . ui . ui . container : not ( . fluid ) {
width : 1280px ;
2023-06-14 00:47:14 +05:30
max-width : calc ( 100 % - 64px ) ;
2023-06-01 16:17:28 +05:30
margin-left : auto ;
margin-right : auto ;
}
. ui . container . fluid . padded {
padding : 0 32px ;
2023-04-26 21:29:08 +05:30
}
2022-09-19 18:20:15 +05:30
/* enable fluid page widths for medium size viewports */
2023-03-15 07:50:19 +05:30
@ media ( min-width : 768px ) and ( max-width : 1200px ) {
2023-06-01 16:17:28 +05:30
. page-content . ui . ui . ui . container : not ( . fluid ) {
2023-06-14 00:47:14 +05:30
max-width : calc ( 100 % - 32px ) ;
2023-06-01 16:17:28 +05:30
}
. ui . container . fluid . padded {
padding : 0 16px ;
2022-09-19 18:20:15 +05:30
}
}
2023-06-09 14:40:51 +05:30
@ media ( max-width : 767 . 98px ) {
2023-04-26 21:29:08 +05:30
. page-content . ui . ui . ui . container : not ( . fluid ) {
2023-06-14 00:47:14 +05:30
max-width : calc ( 100 % - 16px ) ;
2023-06-01 16:17:28 +05:30
}
. ui . container . fluid . padded {
padding : 0 8px ;
2023-04-26 21:29:08 +05:30
}
}
2020-12-04 16:48:37 +05:30
. ui . pagination . menu . active . item {
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
2022-10-25 09:38:54 +05:30
. 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 18:45:46 +05:30
. 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-25 09:38:54 +05:30
. 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 18:45:46 +05:30
border-color : var ( --color-error-border ) ;
2022-10-25 09:38:54 +05:30
color : var ( --color-error-text ) ;
}
2022-12-06 18:45:46 +05:30
. 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 17:44:42 +05:30
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 16:36:23 +05:30
}
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-19 00:47:39 +05:30
. ui . form . field . muted {
opacity : var ( --opacity-disabled ) ;
}
2023-03-15 07:50:19 +05:30
. text . primary {
color : var ( --color-primary ) ! important ;
}
2019-05-13 11:56:32 +05:30
2023-03-15 07:50:19 +05:30
. text . red {
color : var ( --color-red ) ! important ;
}
2017-10-27 10:00:54 +05:30
2023-03-15 07:50:19 +05:30
. text . orange {
color : var ( --color-orange ) ! important ;
}
2017-10-27 10:00:54 +05:30
2023-03-15 07:50:19 +05:30
. text . yellow {
color : var ( --color-yellow ) ! important ;
}
2017-10-27 10:00:54 +05:30
2023-03-15 07:50:19 +05:30
. text . olive {
color : var ( --color-olive ) ! important ;
}
2017-10-27 10:00:54 +05:30
2023-03-15 07:50:19 +05:30
. text . green {
color : var ( --color-green ) ! important ;
}
2018-05-11 08:58:26 +05:30
2023-03-15 07:50:19 +05:30
. text . teal {
color : var ( --color-teal ) ! important ;
}
2018-09-07 08:02:46 +05:30
2023-03-15 07:50:19 +05:30
. text . blue {
color : var ( --color-blue ) ! important ;
}
2017-12-05 12:01:33 +05:30
2023-03-15 07:50:19 +05:30
. text . violet {
color : var ( --color-violet ) ! important ;
}
2019-05-13 11:56:32 +05:30
2023-03-15 07:50:19 +05:30
. text . purple {
color : var ( --color-purple ) ! important ;
}
2019-05-13 11:56:32 +05:30
2023-03-15 07:50:19 +05:30
. text . pink {
color : var ( --color-pink ) ! important ;
}
2017-12-03 04:46:35 +05:30
2023-03-15 07:50:19 +05:30
. text . brown {
color : var ( --color-brown ) ! important ;
}
2019-04-12 02:39:41 +05:30
2023-03-15 07:50:19 +05:30
. text . black {
color : var ( --color-text ) ! important ;
}
2018-05-11 08:58:26 +05:30
2023-03-15 07:50:19 +05:30
. text . grey {
color : var ( --color-text-light ) ! important ;
}
2018-05-11 08:58:26 +05:30
2023-05-25 08:01:26 +05:30
. 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 07:50:19 +05:30
. text . light . grey {
color : var ( --color-grey-light ) ! important ;
}
2019-12-18 03:04:11 +05:30
2023-03-15 07:50:19 +05:30
. text . gold {
color : var ( --color-gold ) ! important ;
}
2019-11-20 04:14:58 +05:30
2023-08-30 16:07:17 +05:30
. text . small {
font-size : 0 . 75em ;
}
2023-03-15 07:50:19 +05:30
. ui . form . ui . button {
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-normal ) ;
2023-03-15 07:50:19 +05:30
}
2017-10-27 10:00:54 +05:30
2023-03-15 07:50:19 +05:30
. ui . floating . label {
z-index : 10 ;
}
2017-10-27 10:00:54 +05:30
2023-03-15 07:50:19 +05:30
. ui . transparent . label {
background-color : transparent ;
}
2017-10-27 10:00:54 +05:30
2023-03-15 07:50:19 +05:30
. ui . menu ,
. ui . vertical . menu ,
. ui . segment {
box-shadow : none ;
}
2019-10-29 00:01:55 +05:30
2023-08-21 16:19:49 +05:30
/* replace fomantic popover box shadows */
2023-08-17 03:42:40 +05:30
. 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 16:19:49 +05:30
. ui . floating . dropdown . menu {
box-shadow : 0 6px 18px var ( --color-shadow ) ! important ;
}
2023-08-17 03:42:40 +05:30
. ui . dimmer {
background : var ( --color-overlay-backdrop ) ;
}
2023-03-15 07:50:19 +05:30
/* 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 08:14:10 +05:30
2023-03-15 07:50:19 +05:30
. ui . menu : not ( . vertical ) . item > . button . small {
font-size : 0 . 92857143rem ;
}
2017-10-27 10:00:54 +05:30
2023-03-15 07:50:19 +05:30
. ui . menu . ui . dropdown . item . menu . item {
width : 100 % ;
}
2017-10-27 10:00:54 +05:30
2023-03-15 07:50:19 +05:30
. ui . dropdown . menu > . item > . floating . label {
z-index : 11 ;
}
2019-05-13 11:56:32 +05:30
2023-03-15 07:50:19 +05:30
. ui . dropdown . menu . menu > . item > . floating . label {
z-index : 21 ;
}
2019-05-13 11:56:32 +05:30
2023-03-15 07:50:19 +05:30
. ui . dropdown . menu > . header {
font-size : 0 . 8em ;
}
2019-05-13 11:56:32 +05:30
2023-03-15 07:50:19 +05:30
. ui . text . left {
text-align : left ! important ;
}
2019-05-13 11:56:32 +05:30
2023-03-15 07:50:19 +05:30
. ui . text . right {
text-align : right ! important ;
}
2019-05-13 11:56:32 +05:30
2023-03-15 07:50:19 +05:30
. ui . text . normal {
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-normal ) ;
2023-03-15 07:50:19 +05:30
}
2019-05-13 11:56:32 +05:30
2023-03-15 07:50:19 +05:30
. ui . text . italic {
font-style : italic ;
}
2020-02-28 00:50:55 +05:30
2023-03-15 07:50:19 +05:30
. ui . text . truncate {
2023-08-15 18:53:51 +05:30
overflow-x : hidden ;
2023-03-15 07:50:19 +05:30
text-overflow : ellipsis ;
white-space : nowrap ;
display : inline-block ;
}
2017-10-27 10:00:54 +05:30
2023-03-15 07:50:19 +05:30
. ui . text . thin {
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-normal ) ;
2023-03-15 07:50:19 +05:30
}
2019-07-08 07:44:12 +05:30
2023-03-15 07:50:19 +05:30
. ui . text . middle {
vertical-align : middle ;
}
2019-07-08 07:44:12 +05:30
2023-05-04 00:02:10 +05:30
. ui . message . flash-message {
2023-03-15 07:50:19 +05:30
text-align : center ;
}
2021-09-18 21:52:51 +05:30
2023-03-15 07:50:19 +05:30
. ui . message > ul {
margin-left : auto ;
margin-right : auto ;
display : table ;
text-align : left ;
}
2019-09-16 14:33:22 +05:30
2023-03-15 07:50:19 +05:30
. ui . header > i + . content {
padding-left : 0 . 75rem ;
vertical-align : middle ;
}
2019-09-16 14:33:22 +05:30
2023-03-15 07:50:19 +05:30
. ui . info . segment . top h3 ,
. ui . info . segment . top h4 {
margin-top : 0 ;
}
2019-09-16 14:33:22 +05:30
2023-03-15 07:50:19 +05:30
. ui . info . segment . top h3 : last-child {
margin-top : 4px ;
}
2019-09-16 14:33:22 +05:30
2023-03-15 07:50:19 +05:30
. ui . info . segment . top > : last-child {
margin-bottom : 0 ;
}
2019-09-16 14:33:22 +05:30
2023-03-15 07:50:19 +05:30
. ui . normal . header {
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-normal ) ;
2023-03-15 07:50:19 +05:30
}
2019-09-16 14:33:22 +05:30
2023-03-15 07:50:19 +05:30
. ui . form . autofill-dummy {
position : absolute ;
width : 1px ;
height : 1px ;
overflow : hidden ;
z-index : -10000 ;
}
2019-09-16 14:33:22 +05:30
2023-03-15 07:50:19 +05:30
. ui . form . sub . field {
margin-left : 25px ;
}
2019-09-16 14:33:22 +05:30
2023-03-15 07:50:19 +05:30
. ui . sha . label {
font-family : var ( --fonts-monospace ) ;
font-size : 13px ;
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-normal ) ;
2023-03-15 07:50:19 +05:30
margin : 0 6px ;
2023-09-03 08:28:52 +05:30
padding : 5px 10px ;
}
. ui . sha . label . shortsha {
display : inline-block ; /* not sure whether it is still needed */
2023-03-15 07:50:19 +05:30
}
2020-02-28 00:50:55 +05:30
2023-03-15 07:50:19 +05:30
. 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 12:01:54 +05:30
2023-03-15 07:50:19 +05:30
. ui . status . buttons . svg {
margin-right : 4px ;
}
2020-08-26 01:18:53 +05:30
2023-03-15 07:50:19 +05:30
. ui . inline . delete-button {
padding : 8px 15px ;
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-normal ) ;
2023-03-15 07:50:19 +05:30
}
2020-08-26 01:18:53 +05:30
2023-03-15 07:50:19 +05:30
. ui . background . red {
background-color : var ( --color-red ) ! important ;
}
2020-10-22 02:37:33 +05:30
2023-03-15 07:50:19 +05:30
. ui . background . blue {
background-color : var ( --color-blue ) ! important ;
}
2020-10-22 02:37:33 +05:30
2023-03-15 07:50:19 +05:30
. 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-08 01:42:13 +05:30
}
2015-08-12 15:42:06 +05:30
2023-03-15 07:50:19 +05:30
. 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 14:40:51 +05:30
@ media ( max-width : 767 . 98px ) {
2023-03-15 07:50:19 +05:30
. ui . pagination . menu . item : not ( . active , . navigation ) ,
. ui . pagination . menu . item . navigation span . navigation_label {
display : none ;
2020-08-26 01:18:53 +05:30
}
2015-08-26 10:09:32 +05:30
}
2023-03-15 07:50:19 +05:30
. 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 . icon . header svg {
width : 3em ;
height : 3em ;
float : none ;
display : block ;
2023-08-18 03:20:32 +05:30
line-height : var ( --line-height-default ) ;
2023-03-15 07:50:19 +05:30
padding : 0 ;
margin : 0 auto 0 . 5rem ;
opacity : 1 ;
}
. 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-28 02:28:38 +05:30
. user-menu > . item {
2020-08-26 01:18:53 +05:30
width : 100 % ;
border-radius : 0 ! important ;
2018-09-28 02:28:38 +05:30
}
2023-03-15 07:50:19 +05:30
. scrolling . menu . item . selected {
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-semibold ) ! important ;
2015-08-31 13:40:28 +05:30
}
2020-12-10 00:33:19 +05:30
. ui . dropdown . scrolling . menu {
border-color : var ( --color-secondary ) ;
}
2022-10-21 17:30:53 +05:30
. color-preview {
display : inline-block ;
2023-03-15 07:50:19 +05:30
margin-left : 0 . 4em ;
height : 0 . 67em ;
width : 0 . 67em ;
2023-08-29 01:13:59 +05:30
border-radius : var ( --border-radius ) ;
2022-10-21 17:30:53 +05:30
}
2024-03-16 17:04:38 +05:30
. attention-header {
padding : 0 . 5em 0 . 75em ! important ;
2024-02-11 00:13:09 +05:30
color : var ( --color-text ) ! important ;
2022-11-09 05:41:26 +05:30
}
2024-03-23 23:12:38 +05:30
. attention-header : first-child {
display : flex ;
}
2024-03-16 17:04:38 +05:30
. attention-icon {
2024-03-23 23:12:38 +05:30
margin : auto 0 . 5em auto 0 ;
2024-03-16 17:04:38 +05:30
}
2024-02-11 00:13:09 +05:30
blockquote . attention-note {
border-left-color : var ( --color-blue-dark-1 ) ;
}
2024-03-16 17:04:38 +05:30
strong . attention-note , svg . attention-note {
2024-02-11 00:13:09 +05:30
color : var ( --color-blue-dark-1 ) ;
}
blockquote . attention-tip {
border-left-color : var ( --color-success-text ) ;
}
2024-03-16 17:04:38 +05:30
strong . attention-tip , svg . attention-tip {
2024-02-11 00:13:09 +05:30
color : var ( --color-success-text ) ;
2022-11-09 05:41:26 +05:30
}
2024-02-11 00:13:09 +05:30
blockquote . attention-important {
border-left-color : var ( --color-violet-dark-1 ) ;
}
2024-03-16 17:04:38 +05:30
strong . attention-important , svg . attention-important {
2024-02-11 00:13:09 +05:30
color : var ( --color-violet-dark-1 ) ;
}
blockquote . attention-warning {
border-left-color : var ( --color-warning-text ) ;
}
2024-03-16 17:04:38 +05:30
strong . attention-warning , svg . attention-warning {
2022-11-09 05:41:26 +05:30
color : var ( --color-warning-text ) ;
}
2024-02-11 00:13:09 +05:30
blockquote . attention-caution {
border-left-color : var ( --color-red-dark-1 ) ;
}
2024-03-16 17:04:38 +05:30
strong . attention-caution , svg . attention-caution {
2024-02-11 00:13:09 +05:30
color : var ( --color-red-dark-1 ) ;
}
2020-12-20 08:43:12 +05:30
. center : not ( . popup ) {
2020-08-26 01:18:53 +05:30
text-align : center ;
2015-07-08 17:17:56 +05:30
}
2024-03-15 07:35:31 +05:30
overflow-menu {
2020-11-27 01:03:28 +05:30
border-bottom : 1px solid var ( --color-secondary ) ! important ;
2024-03-15 07:35:31 +05:30
display : flex ;
2017-03-16 04:09:38 +05:30
}
2017-05-24 11:30:40 +05:30
2024-03-15 07:35:31 +05:30
overflow-menu . overflow-menu-items {
2020-11-27 01:03:28 +05:30
display : flex ;
2024-03-15 07:35:31 +05:30
flex : 1 ;
2020-11-29 21:22:11 +05:30
}
2024-03-15 07:35:31 +05:30
overflow-menu . overflow-menu-items . item {
2023-05-01 21:38:37 +05:30
margin-bottom : 0 ! important ; /* reset fomantic's margin, because the active menu has special bottom border */
2020-11-27 01:03:28 +05:30
}
2019-05-13 11:56:32 +05:30
2024-03-23 05:24:09 +05:30
overflow-menu . ui . label {
margin-left : 7px ! important ; /* save some space */
}
2020-01-20 15:37:30 +05:30
. activity-bar-graph {
2020-11-08 02:34:40 +05:30
background-color : var ( --color-primary ) ;
2022-10-23 09:35:20 +05:30
color : var ( --color-primary-contrast ) ;
2020-01-20 15:37:30 +05:30
}
. activity-bar-graph-alt {
2022-10-23 09:35:20 +05:30
color : var ( --color-primary-contrast ) ;
2020-01-20 15:37:30 +05:30
}
2019-05-13 11:56:32 +05:30
. archived-icon {
2022-11-23 05:52:27 +05:30
color : var ( --color-secondary-dark-2 ) ! important ;
2019-01-24 00:28:38 +05:30
}
2019-03-08 22:12:50 +05:30
. oauth2-authorize-application-box {
2020-08-26 01:18:53 +05:30
margin-top : 3em ! important ;
2019-03-08 22:12:50 +05:30
}
2019-04-30 00:19:59 +05:30
2019-07-12 23:14:28 +05:30
/* multiple radio or checkboxes as inline element */
. inline-grouped-list {
2020-08-26 01:18:53 +05:30
display : inline-block ;
vertical-align : top ;
2023-03-15 07:50:19 +05:30
}
2019-07-12 23:14:28 +05:30
2023-03-15 07:50:19 +05:30
. inline-grouped-list > . ui {
display : block ;
margin-top : 5px ;
margin-bottom : 10px ;
}
2019-07-12 23:14:28 +05:30
2023-03-15 07:50:19 +05:30
. inline-grouped-list > . ui : first-child {
margin-top : 1px ;
2019-07-12 23:14:28 +05:30
}
2019-08-08 20:16:03 +05:30
2020-04-05 01:09:57 +05:30
. ui . label {
2023-03-15 07:50:19 +05:30
padding : 0 . 3em 0 . 5em ;
2023-07-04 15:29:47 +05:30
transition : none ;
2023-10-25 16:10:39 +05:30
white-space : nowrap ;
2023-05-19 22:00:24 +05:30
}
. ui . label ,
2024-03-08 15:12:12 +05:30
. ui . menu . item > . label ,
. ui . grey . labels . label ,
. ui . ui . ui . grey . label {
2023-05-19 22:00:24 +05:30
background : var ( --color-label-bg ) ;
color : var ( --color-label-text ) ;
}
2023-06-09 14:07:47 +05:30
. ui . label > a {
opacity : . 75 ; /* increase contrast over default fomantic .5 */
}
2023-05-19 22:00:24 +05:30
. ui . active . label {
background : var ( --color-label-active-bg ) ;
border-color : var ( --color-label-active-bg ) ;
color : var ( --color-label-text ) ;
2020-11-29 11:52:04 +05:30
}
. ui . labels a . label : hover ,
a . ui . label : hover {
2023-05-19 22:00:24 +05:30
background : var ( --color-label-hover-bg ) ;
border-color : var ( --color-label-hover-bg ) ;
color : var ( --color-label-text ) ;
2020-11-29 11:52:04 +05:30
}
2023-05-01 15:05:02 +05:30
. ui . labels a . active . label : hover ,
a . ui . active . label : hover {
2023-05-19 22:00:24 +05:30
background : var ( --color-label-active-bg ) ;
border-color : var ( --color-label-active-bg ) ;
color : var ( --color-label-text ) ;
2023-05-01 15:05:02 +05:30
}
2021-06-28 04:43:20 +05:30
. lines-blame-btn {
padding-left : 10px ;
padding-right : 10px ;
text-align : right ! important ;
background-color : var ( --color-code-sidebar-bg ) ;
width : 2 % ;
}
2019-08-08 20:16:03 +05:30
. lines-num {
2020-08-26 01:18:53 +05:30
padding-left : 10px ;
padding-right : 10px ;
text-align : right ! important ;
2022-09-28 18:49:22 +05:30
color : var ( --color-text-light-1 ) ;
2020-08-26 01:18:53 +05:30
width : 1 % ;
2020-10-20 01:31:06 +05:30
font-family : var ( --fonts-monospace ) ;
2023-03-15 07:50:19 +05:30
}
2020-08-26 01:18:53 +05:30
2023-03-15 07:50:19 +05:30
. 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 20:16:03 +05:30
}
2020-07-01 03:04:03 +05:30
. lines-type-marker {
2020-08-26 01:18:53 +05:30
vertical-align : top ;
2020-07-01 03:04:03 +05:30
}
2019-08-08 20:16:03 +05:30
. lines-num ,
. lines-code {
2020-12-20 23:30:03 +05:30
font-size : 12px ;
font-family : var ( --fonts-monospace ) ;
line-height : 20px ;
2020-08-26 01:18:53 +05:30
padding-top : 0 ;
padding-bottom : 0 ;
vertical-align : top ;
2023-03-15 07:50:19 +05:30
}
2019-08-08 20:16:03 +05:30
2023-03-15 07:50:19 +05:30
. 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 20:16:03 +05:30
}
2022-01-07 06:48:52 +05:30
. lines-escape {
width : 0 ;
}
2020-11-01 03:45:11 +05:30
. lines-code {
2020-12-11 22:08:47 +05:30
background-color : var ( --color-code-bg ) ;
2020-11-01 03:45:11 +05:30
padding-left : 5px ;
}
2020-10-05 02:24:22 +05:30
. lines-code . active ,
. lines-code . active {
2022-10-12 21:56:27 +05:30
background : var ( --color-active-line ) ! important ;
2020-10-05 02:24:22 +05:30
}
2020-07-01 03:04:03 +05:30
. blame . lines-num {
2020-08-26 01:18:53 +05:30
padding : 0 ! important ;
2021-06-28 04:43:20 +05:30
background-color : var ( --color-code-sidebar-bg ) ;
2020-07-01 03:04:03 +05:30
}
. blame . lines-code {
2020-08-26 01:18:53 +05:30
padding : 0 ! important ;
2020-07-01 03:04:03 +05:30
}
2020-11-04 12:44:07 +05:30
. code-inner {
font : 12px var ( --fonts-monospace ) ;
white-space : pre-wrap ;
word-break : break-all ;
2023-03-04 10:18:59 +05:30
overflow-wrap : anywhere ;
2020-11-04 12:44:07 +05:30
}
. blame . code-inner {
white-space : pre ;
2020-11-13 23:57:36 +05:30
word-break : normal ;
2021-05-15 06:45:53 +05:30
word-wrap : normal ; /* not using overflow-wrap because safari does not treat is an an alias */
2020-11-04 12:44:07 +05:30
}
2019-08-08 20:16:03 +05:30
. lines-commit {
2020-08-26 01:18:53 +05:30
vertical-align : top ;
2024-02-29 07:30:33 +05:30
color : var ( --color-text-light-2 ) ;
2020-08-26 01:18:53 +05:30
padding : 0 ! important ;
2021-06-28 04:43:20 +05:30
background : var ( --color-code-sidebar-bg ) ;
2020-08-26 01:18:53 +05:30
width : 1 % ;
2023-03-15 07:50:19 +05:30
}
2020-08-26 01:18:53 +05:30
2023-03-15 07:50:19 +05:30
. lines-commit . blame-info {
width : 350px ;
max-width : 350px ;
display : block ;
padding : 0 0 0 10px ;
line-height : 20px ;
box-sizing : content-box ;
}
2020-08-26 01:18:53 +05:30
2023-03-15 07:50:19 +05:30
. 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 ;
}
. lines-commit . ui . avatar {
height : 18px ;
width : 18px ;
display : block ;
margin-top : 1px ;
2019-08-08 20:16:03 +05:30
}
2021-06-28 04:43:20 +05:30
. top-line-blame {
border-top : 1px solid var ( --color-secondary ) ;
}
2024-02-29 07:30:33 +05:30
. code-view tr . top-line-blame : first-of-type {
border-top : none ;
}
2023-03-15 07:50:19 +05:30
. lines-code . bottom-line ,
. lines-commit . bottom-line {
border-bottom : 1px solid var ( --color-secondary ) ;
2019-08-08 20:16:03 +05:30
}
2023-03-15 07:50:19 +05:30
2021-05-19 08:46:02 +05:30
. code-view table {
width : 100 % ;
2019-08-08 20:16:03 +05:30
}
2019-12-12 18:48:07 +05:30
2020-11-02 01:34:26 +05:30
. ui . primary . label ,
2023-04-19 21:43:00 +05:30
. ui . primary . labels . label ,
2023-04-09 15:45:43 +05:30
. ui . ui . ui . primary . label {
background-color : var ( --color-primary ) ;
border-color : var ( --color-primary-dark-2 ) ;
2020-01-01 10:36:15 +05:30
}
2020-01-05 10:26:06 +05:30
2020-11-02 01:34:26 +05:30
. ui . basic . labels . primary . label ,
. ui . ui . ui . basic . primary . label {
2023-03-29 08:28:31 +05:30
background : transparent ;
border-color : var ( --color-primary ) ;
color : var ( --color-primary ) ;
}
2023-04-21 07:23:17 +05:30
. 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-29 08:28:31 +05:30
. 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 17:47:32 +05:30
}
2020-12-20 23:30:03 +05:30
. ui . basic . labels . label ,
2023-09-18 10:24:05 +05:30
. ui . basic . label ,
. ui . secondary . labels . ui . basic . label {
2023-06-09 14:07:47 +05:30
background : var ( --color-button ) ;
2020-12-27 16:23:53 +05:30
border-color : var ( --color-light-border ) ;
color : var ( --color-text-light ) ;
2020-12-20 23:30:03 +05:30
}
. ui . basic . labels a . label : hover ,
a . ui . basic . label : hover {
color : var ( --color-text ) ;
2020-12-27 16:23:53 +05:30
border-color : var ( --color-light-border ) ;
background : var ( --color-hover ) ;
2020-12-20 23:30:03 +05:30
}
2020-01-05 10:26:06 +05:30
. ui . label > img {
2020-08-26 01:18:53 +05:30
width : auto ! important ;
vertical-align : middle ;
height : 2 . 1666em ! important ;
2020-01-05 10:26:06 +05:30
}
2020-01-20 10:09:21 +05:30
2021-09-18 21:52:51 +05:30
. migrate . svg . gitea-git {
2022-11-23 05:52:27 +05:30
color : var ( --color-git ) ;
2021-09-18 21:52:51 +05:30
}
2020-02-11 15:04:17 +05:30
. color-icon {
2020-08-26 01:18:53 +05:30
display : inline-block ;
2023-08-29 01:13:59 +05:30
border-radius : var ( --border-radius-circle ) ;
2020-08-26 01:18:53 +05:30
height : 14px ;
width : 14px ;
2020-02-11 15:04:17 +05:30
}
2020-02-11 22:32:41 +05:30
2020-02-21 01:23:55 +05:30
. ui . label > . color-icon {
2020-08-26 01:18:53 +05:30
margin-left : 0 ;
2020-02-21 01:23:55 +05:30
}
2020-11-08 21:59:18 +05:30
. ui . segment ,
. ui . segments ,
. ui . attached . segment {
background : var ( --color-box-body ) ;
color : var ( --color-text ) ;
border-color : var ( --color-secondary ) ;
}
2020-12-17 21:22:58 +05:30
. ui . segments > . segment {
border-color : var ( --color-secondary ) ;
}
2020-12-10 08:29:05 +05:30
. ui . secondary . segment {
background : var ( --color-secondary-bg ) ;
color : var ( --color-text-light ) ;
}
2020-11-08 21:59:18 +05:30
. ui . attached . header {
2020-12-04 16:48:37 +05:30
position : relative ;
2020-11-08 21:59:18 +05:30
background : var ( --color-box-header ) ;
border-color : var ( --color-secondary ) ;
2023-03-15 07:50:19 +05:30
}
2020-11-08 21:59:18 +05:30
2020-12-04 16:48:37 +05:30
/* fix misaligned right buttons on box headers */
2023-09-04 15:52:46 +05:30
. ui . attached . header > . ui . right {
2020-12-04 16:48:37 +05:30
position : absolute ;
2023-03-15 07:50:19 +05:30
right : 0 . 78571429rem ;
2020-12-11 02:09:09 +05:30
top : 0 ;
bottom : 0 ;
2023-04-29 16:14:52 +05:30
display : flex ;
2023-09-06 12:30:45 +05:30
align-items : center ;
2024-01-12 20:13:40 +05:30
gap : 0 . 25em ;
2023-09-04 15:52:46 +05:30
}
2024-01-12 20:13:40 +05:30
/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
. ui . attached . header > . ui . right . ui . tiny . button {
padding : 6px 10px ;
2023-09-04 15:52:46 +05:30
font-weight : var ( --font-weight-normal ) ;
2020-12-04 16:48:37 +05:30
}
2023-04-29 16:14:52 +05:30
/* if a .top.attached.header is followed by a .segment, add some margin */
2023-06-15 20:42:08 +05:30
. ui . segments + . ui . top . attached . header ,
. ui . attached . segment + . ui . top . attached . header {
2020-08-26 01:18:53 +05:30
margin-top : 1rem ;
2020-02-12 09:08:32 +05:30
}
2020-04-05 02:59:15 +05:30
2023-05-12 15:53:53 +05:30
. rss-icon {
display : inline-flex ;
color : var ( --color-text-light-1 ) ;
}
2023-03-15 07:50:19 +05:30
table th [ data-sortt-asc ] : hover ,
table th [ data-sortt-desc ] : hover {
2023-10-13 13:49:21 +05:30
background : var ( --color-hover ) ! important ;
2023-03-15 07:50:19 +05:30
cursor : pointer ! important ;
}
table th [ data-sortt-asc ] . svg ,
table th [ data-sortt-desc ] . svg {
margin-left : 0 . 25rem ;
2020-06-25 03:53:05 +05:30
}
2020-10-25 00:45:29 +05:30
. 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 13:54:47 +05:30
. ui . multiple . dropdown > . label {
box-shadow : 0 0 0 1px var ( --color-secondary ) inset ;
}
2020-04-28 23:35:39 +05:30
. emoji ,
. reaction {
2020-08-26 01:18:53 +05:30
font-size : 1 . 25em ;
2023-08-18 03:20:32 +05:30
line-height : var ( --line-height-default ) ;
2020-08-26 01:18:53 +05:30
font-style : normal ! important ;
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-normal ) ! important ;
2023-03-15 07:50:19 +05:30
vertical-align : -0 . 075em ;
}
2020-04-28 23:35:39 +05:30
. emoji img ,
. reaction img {
2020-08-26 01:18:53 +05:30
border-width : 0 ! important ;
margin : 0 ! important ;
width : 1em ! important ;
height : 1em ! important ;
2023-03-15 07:50:19 +05:30
vertical-align : -0 . 15em ;
2020-04-28 23:35:39 +05:30
}
2020-05-21 01:57:14 +05:30
2023-09-01 12:29:38 +05:30
/* for the jquery.minicolors plugin */
2022-10-12 21:56:27 +05:30
. minicolors-panel {
background : var ( --color-secondary-dark-1 ) ! important ;
}
2020-05-21 01:57:14 +05:30
/* https://github.com/go-gitea/gitea/pull/11486 */
. ui . sub . header {
2020-08-26 01:18:53 +05:30
text-transform : none ;
2020-05-21 01:57:14 +05:30
}
2020-06-22 22:14:06 +05:30
. ui . tabular . menu {
2020-11-27 01:03:28 +05:30
border-color : var ( --color-secondary ) ;
}
2020-06-22 22:14:06 +05:30
2020-11-27 01:03:28 +05:30
. 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 21:22:58 +05:30
. ui . segment . ui . tabular . menu . active . item ,
. ui . segment . ui . tabular . menu . active . item : hover {
background : var ( --color-box-body ) ;
}
2020-11-27 01:03:28 +05:30
. ui . secondary . pointing . menu {
border-color : var ( --color-secondary ) ;
2020-06-22 22:14:06 +05:30
}
2024-03-20 22:30:35 +05:30
. ui . tabular . menu . item ,
2020-06-22 22:14:06 +05:30
. ui . secondary . pointing . menu . item {
2024-03-20 22:30:35 +05:30
padding : 11px 12px ! important ;
2020-12-17 21:22:58 +05:30
color : var ( --color-text-light-2 ) ;
2020-11-27 01:03:28 +05:30
}
2024-03-20 22:30:35 +05:30
. 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-27 01:03:28 +05:30
. ui . secondary . pointing . menu . active . item ,
2024-02-18 21:58:35 +05:30
. ui . secondary . pointing . menu . active . item : hover , . ui . secondary . pointing . menu . active . item : focus ,
2024-03-20 22:30:35 +05:30
. ui . secondary . pointing . menu . dropdown . item : hover , . ui . secondary . pointing . menu . dropdown . item : focus {
2021-04-03 14:07:32 +05:30
color : var ( --color-text-dark ) ;
2020-06-22 22:14:06 +05:30
}
2020-06-26 05:37:15 +05:30
2024-03-20 22:30:35 +05:30
. 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 ;
}
2020-11-29 21:22:11 +05:30
. ui . header {
color : var ( --color-text ) ;
}
2020-11-02 01:34:26 +05:30
. ui . header . ui . label {
2023-03-15 07:50:19 +05:30
margin-left : 0 . 25rem ;
2020-11-02 01:34:26 +05:30
}
2020-06-26 05:37:15 +05:30
. ui . header > . ui . label . compact {
2020-08-26 01:18:53 +05:30
margin-top : inherit ;
2020-06-26 05:37:15 +05:30
}
2020-10-21 05:20:10 +05:30
2022-10-12 21:56:27 +05:30
. ui . header . sub . header {
color : var ( --color-text-light-1 ) ;
}
2022-09-02 13:28:49 +05:30
. flash-error details code ,
. flash-warning details code {
2020-10-21 05:20:10 +05:30
display : block ;
text-align : left ;
}
2021-02-12 06:59:07 +05:30
. truncated-item-container {
display : flex ! important ;
2022-11-22 04:40:42 +05:30
align-items : center ;
2021-02-12 06:59:07 +05:30
}
2021-11-23 08:14:38 +05:30
. ellipsis-button {
padding : 0 5px 8px ! important ;
display : inline-block ! important ;
2023-05-22 05:07:32 +05:30
font-weight : var ( --font-weight-semibold ) ! important ;
2021-11-23 08:14:38 +05:30
line-height : 6px ! important ;
vertical-align : middle ! important ;
}
2021-02-12 06:59:07 +05:30
. truncated-item-name {
2023-06-28 01:14:17 +05:30
line-height : 2 ;
2021-02-12 06:59:07 +05:30
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
2023-03-15 07:50:19 +05:30
margin-top : -0 . 5em ;
margin-bottom : -0 . 5em ;
2021-02-12 06:59:07 +05:30
}
2021-09-30 02:23:12 +05:30
. precolors {
2023-08-28 19:44:51 +05:30
display : flex ;
flex-direction : column ;
justify-content : center ;
margin-left : 1em ;
2023-03-15 07:50:19 +05:30
}
2021-09-30 02:23:12 +05:30
2023-03-15 07:50:19 +05:30
. precolors . color {
2023-08-28 19:44:51 +05:30
display : inline-block ;
2023-03-15 07:50:19 +05:30
width : 15px ;
height : 15px ;
2021-09-30 02:23:12 +05:30
}
2023-06-14 22:10:15 +05:30
2023-10-16 12:56:08 +05:30
. ui . dropdown : not ( . button ) {
2023-08-18 03:20:32 +05:30
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 22:10:15 +05:30
}
/ * 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 08:10:41 +05:30
. 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 22:10:15 +05:30
/* 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 09:34:32 +05:30
. btn ,
2023-06-14 22:10:15 +05:30
. ui . ui . button ,
. ui . ui . dropdown ,
2023-08-28 19:44:51 +05:30
. ui . ui . label ,
2023-06-14 22:10:15 +05:30
. 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 19:44:51 +05:30
. ui . ui . circular . label {
justify-content : center ;
}
2023-06-14 22:10:15 +05:30
. 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 16:06:54 +05:30
. ui . icon . input > i . icon {
transition : none ;
}
2023-06-14 22:10:15 +05:30
. flex-items-block > . item ,
. flex-text-block {
display : flex ;
align-items : center ;
gap : . 25rem ;
}
