2024-04-14 13:53:52 -04:00
/ * based on Fomantic UI checkbox module , with just the parts extracted that we use . If you find any
unused rules here after refactoring , please remove them . * /
. ui . button {
cursor : pointer ;
display : inline-block ;
min-height : 1em ;
outline : none ;
vertical-align : baseline ;
font-family : var ( --fonts-regular ) ;
margin : 0 0 . 25em 0 0 ;
padding : 0 . 78571429em 1 . 5em ;
font-weight : var ( --font-weight-normal ) ;
text-align : center ;
text-decoration : none ;
line-height : 1 ;
border-radius : 0 . 28571429rem ;
user-select : none ;
-webkit-tap-highlight-color : transparent ;
justify-content : center ;
2023-05-29 08:45:22 -04:00
background : var ( --color-button ) ;
border : 1px solid var ( --color-light-border ) ;
color : var ( --color-text ) ;
2024-04-14 13:53:52 -04:00
white-space : nowrap ;
}
@ media ( max-width : 767 . 98px ) {
. ui . button {
white-space : normal ;
}
2023-05-29 08:45:22 -04:00
}
2023-06-09 04:37:47 -04:00
. ui . button : hover {
2023-05-29 08:45:22 -04:00
background : var ( --color-hover ) ;
2023-06-09 04:37:47 -04:00
color : var ( --color-text ) ;
2023-05-29 08:45:22 -04:00
}
. ui . active . button ,
. ui . button : active ,
. ui . active . button : active ,
. ui . active . button : hover {
background : var ( --color-active ) ;
color : var ( --color-text ) ;
}
2024-04-14 13:53:52 -04:00
. ui . buttons . disabled . button : not ( . basic ) ,
. ui . disabled . button ,
. ui . button : disabled ,
. ui . disabled . button : hover ,
. ui . disabled . active . button {
cursor : default ;
opacity : var ( --opacity-disabled ) ! important ;
background-image : none ;
pointer-events : none ! important ;
2023-06-09 04:37:47 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . labeled . button : not ( . icon ) {
display : inline-flex ;
flex-direction : row ;
background : none ;
padding : 0 ! important ;
2023-06-09 04:37:47 -04:00
border : none ;
2024-04-14 13:53:52 -04:00
}
. ui . labeled . button > . button {
2023-06-09 04:37:47 -04:00
margin : 0 ;
}
2024-04-14 13:53:52 -04:00
. ui . labeled . button > . label {
display : flex ;
align-items : center ;
margin : 0 0 0 -1px ! important ;
font-size : 1em ;
border-color : var ( --color-light-border ) ;
2023-06-09 04:37:47 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . button > . icon : not ( . button ) {
height : auto ;
opacity : 0 . 8 ;
2023-06-09 04:37:47 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . button : not ( . icon ) > . icon : not ( . button ) : not ( . dropdown ) ,
. ui . button : not ( . icon ) > . icons : not ( . button ) : not ( . dropdown ) {
margin : 0 0 . 42857143em 0 -0 . 21428571em ;
vertical-align : baseline ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . button : not ( . icon ) > . icons : not ( . button ) : not ( . dropdown ) > . icon {
vertical-align : baseline ;
2024-03-25 06:14:43 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . button : not ( . icon ) > . right . icon : not ( . button ) : not ( . dropdown ) {
margin : 0 -0 . 21428571em 0 0 . 42857143em ;
2024-03-24 08:14:03 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . compact . buttons . button ,
. ui . compact . button {
padding : 0 . 58928571em 1 . 125em ;
2023-06-01 06:47:28 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . compact . icon . buttons . button ,
. ui . compact . icon . button {
padding : 0 . 58928571em ;
}
. ui . compact . labeled . icon . button {
padding : 0 . 58928571em 3 . 69642857em ;
}
. ui . compact . labeled . icon . button > . icon {
padding : 0 . 58928571em 0 ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . buttons . button ,
. ui . button {
font-size : 1rem ;
}
. ui . mini . buttons . dropdown ,
. ui . mini . buttons . dropdown . menu > . item ,
. ui . mini . buttons . button ,
. ui . ui . ui . ui . mini . button {
font-size : 0 . 78571429rem ;
}
. ui . tiny . buttons . dropdown ,
. ui . tiny . buttons . dropdown . menu > . item ,
. ui . tiny . buttons . button ,
. ui . ui . ui . ui . tiny . button {
font-size : 0 . 85714286rem ;
}
. ui . small . buttons . dropdown ,
. ui . small . buttons . dropdown . menu > . item ,
. ui . small . buttons . button ,
. ui . ui . ui . ui . small . button {
font-size : 0 . 92857143rem ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . icon . buttons . button ,
. ui . icon . button : not ( . compact ) {
padding : 0 . 78571429em ;
}
. ui . icon . buttons . button > . icon ,
. ui . icon . button > . icon {
margin : 0 ! important ;
vertical-align : top ;
2023-05-29 08:45:22 -04:00
}
2023-09-18 18:05:31 -04:00
. ui . basic . buttons . button ,
2024-04-14 13:53:52 -04:00
. ui . basic . button {
border-radius : 0 . 28571429rem ;
background : none ;
2023-09-18 18:05:31 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . basic . buttons {
border : 1px solid var ( --color-secondary ) ;
border-radius : 0 . 28571429rem ;
}
. ui . basic . buttons . button {
border-radius : 0 ;
border-left : 1px solid var ( --color-secondary ) ;
2024-02-28 15:26:12 -05:00
}
2023-05-29 08:45:22 -04:00
. ui . labeled . button . disabled > . button ,
. ui . basic . buttons . button ,
2024-04-14 13:53:52 -04:00
. ui . basic . button {
2023-05-29 08:45:22 -04:00
color : var ( --color-text-light ) ;
2023-06-09 04:37:47 -04:00
background : var ( --color-button ) ;
2023-05-29 08:45:22 -04:00
}
. ui . basic . buttons . button : hover ,
. ui . basic . button : hover {
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
2024-03-24 08:14:03 -04:00
border-color : var ( --color-secondary-dark-2 ) ;
2023-05-29 08:45:22 -04:00
}
. ui . basic . buttons . button : active ,
. ui . basic . button : active ,
. ui . basic . buttons . active . button ,
. ui . basic . active . button ,
. ui . basic . buttons . active . button : hover ,
. ui . basic . active . button : hover {
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
2024-04-14 13:53:52 -04:00
. ui . labeled . icon . button {
position : relative ;
padding-left : 4 . 07142857em ! important ;
padding-right : 1 . 5em ! important ;
2023-05-29 08:45:22 -04:00
}
. ui . labeled . icon . button > . icon {
2024-04-14 13:53:52 -04:00
position : absolute ;
top : 0 ;
left : 0 ;
height : 100 % ;
line-height : 1 ;
border-radius : 0 ;
border-top-left-radius : inherit ;
border-bottom-left-radius : inherit ;
text-align : center ;
animation : none ;
padding : 0 . 78571429em 0 ;
margin : 0 ;
width : 2 . 57142857em ;
2023-05-29 08:45:22 -04:00
background : var ( --color-hover ) ;
}
2024-04-14 13:53:52 -04:00
. ui . button . toggle . active {
background-color : var ( --color-green ) ;
color : var ( --color-white ) ;
}
. ui . button . toggle . active : hover {
background-color : var ( --color-green-dark-1 ) ;
color : var ( --color-white ) ;
}
. ui . fluid . button {
width : 100 % ;
display : block ;
}
2023-05-29 08:45:22 -04:00
. ui . primary . button ,
2024-04-14 13:53:52 -04:00
. ui . primary . buttons . button {
2023-05-29 08:45:22 -04:00
background : var ( --color-primary ) ;
2023-10-16 03:26:08 -04:00
color : var ( --color-primary-contrast ) ;
2023-05-29 08:45:22 -04:00
}
. ui . primary . button : hover ,
2023-06-09 04:37:47 -04:00
. ui . primary . buttons . button : hover {
2023-05-29 08:45:22 -04:00
background : var ( --color-primary-hover ) ;
2023-10-16 03:26:08 -04:00
color : var ( --color-primary-contrast ) ;
2023-05-29 08:45:22 -04:00
}
. ui . primary . button : active ,
. ui . primary . buttons . button : active {
background : var ( --color-primary-active ) ;
}
. ui . basic . primary . buttons . button ,
2024-04-14 13:53:52 -04:00
. ui . basic . primary . button {
2023-05-29 08:45:22 -04:00
color : var ( --color-primary ) ;
border-color : var ( --color-primary ) ;
2024-04-14 13:53:52 -04:00
background : none ;
2023-05-29 08:45:22 -04:00
}
. ui . basic . primary . buttons . button : hover ,
2023-06-09 04:37:47 -04:00
. ui . basic . primary . button : hover {
2023-05-29 08:45:22 -04:00
color : var ( --color-primary-hover ) ;
border-color : var ( --color-primary-hover ) ;
}
. ui . basic . primary . buttons . button : active ,
. ui . basic . primary . button : active {
color : var ( --color-primary-active ) ;
border-color : var ( --color-primary-active ) ;
}
. ui . red . button ,
2024-04-14 13:53:52 -04:00
. ui . red . buttons . button {
2023-05-29 08:45:22 -04:00
background : var ( --color-red ) ;
}
. ui . red . button : hover ,
2023-06-09 04:37:47 -04:00
. ui . red . buttons . button : hover {
2023-05-29 08:45:22 -04:00
background : var ( --color-red-dark-1 ) ;
}
. ui . red . button : active ,
. ui . red . buttons . button : active {
background : var ( --color-red-dark-2 ) ;
}
. ui . basic . red . buttons . button ,
2024-04-14 13:53:52 -04:00
. ui . basic . red . button {
2023-05-29 08:45:22 -04:00
color : var ( --color-red ) ;
border-color : var ( --color-red ) ;
2024-04-14 13:53:52 -04:00
background : none ;
2023-05-29 08:45:22 -04:00
}
. ui . basic . red . buttons . button : hover ,
2023-06-09 04:37:47 -04:00
. ui . basic . red . button : hover {
2023-05-29 08:45:22 -04:00
color : var ( --color-red-dark-1 ) ;
border-color : var ( --color-red-dark-1 ) ;
}
. ui . basic . red . buttons . button : active ,
. ui . basic . red . button : active {
color : var ( --color-red-dark-2 ) ;
border-color : var ( --color-red-dark-2 ) ;
}
. ui . green . button ,
2024-04-14 13:53:52 -04:00
. ui . green . buttons . button {
2023-05-29 08:45:22 -04:00
background : var ( --color-green ) ;
}
. ui . green . button : hover ,
2023-06-09 04:37:47 -04:00
. ui . green . buttons . button : hover {
2023-05-29 08:45:22 -04:00
background : var ( --color-green-dark-1 ) ;
}
. ui . green . button : active ,
. ui . green . buttons . button : active {
background : var ( --color-green-dark-2 ) ;
}
. ui . basic . green . buttons . button ,
2024-04-14 13:53:52 -04:00
. ui . basic . green . button {
2023-05-29 08:45:22 -04:00
color : var ( --color-green ) ;
border-color : var ( --color-green ) ;
2024-04-14 13:53:52 -04:00
background : none ;
2023-05-29 08:45:22 -04:00
}
. ui . basic . green . buttons . button : hover ,
2023-06-09 04:37:47 -04:00
. ui . basic . green . button : hover {
2023-05-29 08:45:22 -04:00
color : var ( --color-green-dark-1 ) ;
border-color : var ( --color-green-dark-1 ) ;
}
. ui . basic . green . buttons . button : active ,
. ui . basic . green . button : active {
color : var ( --color-green-dark-2 ) ;
border-color : var ( --color-green-dark-2 ) ;
}
2024-04-14 13:53:52 -04:00
. ui . buttons {
display : inline-flex ;
flex-direction : row ;
font-size : 0 ;
vertical-align : baseline ;
margin : 0 0 . 25em 0 0 ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. delete-button ,
. delete-button : hover {
color : var ( --color-red ) ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
2023-05-29 08:45:22 -04:00
2024-04-14 13:53:52 -04:00
. btn {
background : transparent ;
border-radius : var ( --border-radius ) ;
border : none ;
color : inherit ;
margin : 0 ;
padding : 0 ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. btn : hover ,
. btn : active {
background : none ;
border : none ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
a . btn ,
a . btn : hover {
color : inherit ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
/ * By default , Fomantic UI doesn ' t support "bordered" buttons group , but Gitea would like to use it .
And the default buttons always have borders now ( not the same as Fomantic UI ' s default buttons , see above ) .
It needs some tricks to tweak the left / right borders with active state * /
2023-05-29 08:45:22 -04:00
2024-04-14 13:53:52 -04:00
. ui . buttons . button {
border-right : none ;
flex : 1 0 auto ;
border-radius : 0 ;
margin : 0 ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . buttons . button : first-child {
border-left : none ;
margin-left : 0 ;
border-top-left-radius : 0 . 28571429rem ;
border-bottom-left-radius : 0 . 28571429rem ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . buttons . button : last-child {
border-top-right-radius : 0 . 28571429rem ;
border-bottom-right-radius : 0 . 28571429rem ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . buttons . button : hover {
border-color : var ( --color-secondary-dark-2 ) ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . buttons . button : hover + . button {
border-left : 1px solid var ( --color-secondary-dark-2 ) ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
. ui . buttons . button : first-child ,
. ui . buttons . button . tw-hidden : first-child + . button {
border-left : 1px solid var ( --color-light-border ) ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . buttons . button : last-child ,
. ui . buttons . button : nth-last-child ( 2 ) : has ( + . button . tw-hidden ) {
border-right : 1px solid var ( --color-light-border ) ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . buttons . button . active {
border-left : 1px solid var ( --color-light-border ) ;
border-right : 1px solid var ( --color-light-border ) ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
. ui . buttons . button . active + . button {
border-left : none ;
2023-05-29 08:45:22 -04:00
}
2024-04-14 13:53:52 -04:00
/ * apply the vertical padding of . compact to non-compact buttons when they contain a svg as they
would otherwise appear too large . Seen on "RSS Feed" button on repo releases tab . * /
. ui . small . button : not ( . compact ) : has ( . svg ) {
padding-top : 0 . 58928571em ;
padding-bottom : 0 . 58928571em ;
2023-05-29 08:45:22 -04:00
}