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