2023-05-29 15:45:22 +03:00
/* this contains override styles for buttons and related elements */
2023-09-04 13:22:46 +03:00
/* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */
2024-02-18 19:28:35 +03:00
. ui . button {
2023-05-29 15:45:22 +03:00
background : var ( --color-button ) ;
border : 1px solid var ( --color-light-border ) ;
color : var ( --color-text ) ;
}
2024-02-18 19:28:35 +03:00
. ui . button : hover ,
. ui . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-hover ) ;
2023-06-09 11:37:47 +03:00
color : var ( --color-text ) ;
2023-05-29 15:45:22 +03:00
}
. page-content . ui . button {
box-shadow : none ! important ;
}
. ui . active . button ,
. ui . button : active ,
. ui . active . button : active ,
2024-02-18 19:28:35 +03:00
. ui . active . button : hover ,
. ui . active . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-active ) ;
color : var ( --color-text ) ;
}
2023-06-09 11:37:47 +03:00
. delete-button ,
2024-02-18 19:28:35 +03:00
. delete-button : hover ,
. delete-button : focus {
2023-06-09 11:37:47 +03:00
color : var ( --color-red ) ;
}
2023-09-28 07:04:32 +03:00
/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
2023-06-09 11:37:47 +03:00
. btn {
background : transparent ;
border-radius : var ( --border-radius ) ;
border : none ;
color : inherit ;
margin : 0 ;
padding : 0 ;
}
. btn : hover ,
. btn : active ,
. btn : focus {
background : none ;
border : none ;
}
a . btn ,
a . btn : hover {
color : inherit ;
}
2023-09-04 13:22:46 +03: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-06-09 11:37:47 +03:00
2023-09-04 13:22:46 +03:00
. ui . buttons . button {
border-right : none ;
2023-05-29 15:45:22 +03:00
}
2024-03-25 13:14:43 +03:00
. ui . buttons . button : hover {
border-color : var ( --color-secondary-dark-2 ) ;
}
2024-03-24 15:14:03 +03:00
. ui . buttons . button : hover + . button {
border-left : 1px solid var ( --color-secondary-dark-2 ) ;
}
2024-03-24 21:23:38 +03: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 */
2024-03-24 15:14:03 +03:00
. ui . buttons . button : first-child ,
2024-03-24 21:23:38 +03:00
. ui . buttons . button . tw-hidden : first-child + . button {
2023-09-04 13:22:46 +03:00
border-left : 1px solid var ( --color-light-border ) ;
2023-06-01 13:47:28 +03:00
}
2024-03-24 15:14:03 +03:00
. ui . buttons . button : last-child ,
2024-03-24 21:23:38 +03:00
. ui . buttons . button : nth-last-child ( 2 ) : has ( + . button . tw-hidden ) {
2023-09-04 13:22:46 +03:00
border-right : 1px solid var ( --color-light-border ) ;
2023-05-29 15:45:22 +03:00
}
2023-09-04 13:22:46 +03:00
. ui . buttons . button . active {
border-left : 1px solid var ( --color-light-border ) ;
border-right : 1px solid var ( --color-light-border ) ;
2023-05-29 15:45:22 +03:00
}
2023-09-04 13:22:46 +03:00
. ui . buttons . button . active + . button {
border-left : none ;
2023-05-29 15:45:22 +03:00
}
2023-09-19 01:05:31 +03:00
. ui . basic . buttons . button ,
. ui . basic . button ,
. ui . basic . buttons . button : hover ,
. ui . basic . button : hover {
box-shadow : none ;
}
2024-02-28 23:26:12 +03: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 15:45:22 +03:00
. ui . labeled . button . disabled > . button ,
. ui . basic . buttons . button ,
2024-02-18 19:28:35 +03:00
. ui . basic . button {
2023-05-29 15:45:22 +03:00
color : var ( --color-text-light ) ;
2023-06-09 11:37:47 +03:00
background : var ( --color-button ) ;
2023-05-29 15:45:22 +03:00
}
. ui . basic . buttons . button : hover ,
2024-02-18 19:28:35 +03:00
. ui . basic . button : hover ,
. ui . basic . buttons . button : focus ,
. ui . basic . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-text ) ;
background : var ( --color-hover ) ;
2024-03-24 15:14:03 +03:00
border-color : var ( --color-secondary-dark-2 ) ;
2023-05-29 15:45:22 +03: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 ,
2024-02-18 19:28:35 +03:00
. ui . basic . active . button : hover ,
. ui . basic . buttons . active . button : focus ,
. ui . basic . active . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-text ) ;
background : var ( --color-active ) ;
}
. ui . labeled . button > . label {
border-color : var ( --color-light-border ) ;
}
. ui . labeled . icon . buttons > . button > . icon ,
. ui . labeled . icon . button > . icon {
background : var ( --color-hover ) ;
}
/* primary */
. ui . primary . labels . label ,
. ui . ui . ui . primary . label ,
. ui . primary . button ,
2024-02-18 19:28:35 +03:00
. ui . primary . buttons . button {
2023-05-29 15:45:22 +03:00
background : var ( --color-primary ) ;
2023-10-16 10:26:08 +03:00
color : var ( --color-primary-contrast ) ;
2023-05-29 15:45:22 +03:00
}
. ui . primary . button : hover ,
2024-02-18 19:28:35 +03:00
. ui . primary . buttons . button : hover ,
. ui . primary . button : focus ,
. ui . primary . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-primary-hover ) ;
2023-10-16 10:26:08 +03:00
color : var ( --color-primary-contrast ) ;
2023-05-29 15:45:22 +03:00
}
. ui . primary . button : active ,
. ui . primary . buttons . button : active {
background : var ( --color-primary-active ) ;
}
. ui . basic . primary . buttons . button ,
2024-03-25 00:54:16 +03:00
. ui . basic . primary . button {
2023-05-29 15:45:22 +03:00
color : var ( --color-primary ) ;
border-color : var ( --color-primary ) ;
}
. ui . basic . primary . buttons . button : hover ,
2024-02-18 19:28:35 +03:00
. ui . basic . primary . button : hover ,
. ui . basic . primary . buttons . button : focus ,
. ui . basic . primary . button : focus {
2023-05-29 15:45:22 +03: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 ) ;
}
/* secondary */
. ui . secondary . labels . label ,
. ui . ui . ui . secondary . label ,
. ui . secondary . button ,
2023-06-09 11:37:47 +03:00
. ui . secondary . buttons . button ,
. ui . secondary . button : focus ,
. ui . secondary . buttons . button : focus {
background : var ( --color-secondary-button ) ;
2023-05-29 15:45:22 +03:00
}
. ui . secondary . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . secondary . buttons . button : hover {
background : var ( --color-secondary-hover ) ;
2023-05-29 15:45:22 +03:00
}
. ui . secondary . button : active ,
. ui . secondary . buttons . button : active {
2023-06-09 11:37:47 +03:00
background : var ( --color-secondary-active ) ;
2023-05-29 15:45:22 +03:00
}
. ui . basic . secondary . buttons . button ,
2024-02-18 19:28:35 +03:00
. ui . basic . secondary . button {
2023-06-09 11:37:47 +03:00
color : var ( --color-secondary-button ) ;
border-color : var ( --color-secondary-button ) ;
2023-05-29 15:45:22 +03:00
}
. ui . basic . secondary . buttons . button : hover ,
2024-02-18 19:28:35 +03:00
. ui . basic . secondary . button : hover ,
. ui . basic . secondary . button : focus ,
. ui . basic . secondary . buttons . button : focus {
2023-06-09 11:37:47 +03:00
color : var ( --color-secondary-hover ) ;
border-color : var ( --color-secondary-hover ) ;
2023-05-29 15:45:22 +03:00
}
2023-06-09 11:37:47 +03:00
. ui . basic . secondary . buttons . button : active ,
. ui . basic . secondary . button : active {
color : var ( --color-secondary-active ) ;
border-color : var ( --color-secondary-active ) ;
2023-05-29 15:45:22 +03:00
}
/* red */
. ui . red . labels . label ,
. ui . ui . ui . red . label ,
. ui . red . button ,
2024-02-18 19:28:35 +03:00
. ui . red . buttons . button {
2023-05-29 15:45:22 +03:00
background : var ( --color-red ) ;
}
. ui . red . button : hover ,
2024-02-18 19:28:35 +03:00
. ui . red . buttons . button : hover ,
. ui . red . button : focus ,
. ui . red . buttons . button : focus {
2023-05-29 15:45:22 +03: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-02-18 19:28:35 +03:00
. ui . basic . red . button {
2023-05-29 15:45:22 +03:00
color : var ( --color-red ) ;
border-color : var ( --color-red ) ;
}
. ui . basic . red . buttons . button : hover ,
2024-02-18 19:28:35 +03:00
. ui . basic . red . button : hover ,
. ui . basic . red . buttons . button : focus ,
. ui . basic . red . button : focus {
2023-05-29 15:45:22 +03: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 ) ;
}
/* orange */
. ui . orange . labels . label ,
. ui . ui . ui . orange . label ,
. ui . orange . button ,
2023-06-09 11:37:47 +03:00
. ui . orange . buttons . button ,
. ui . orange . button : focus ,
. ui . orange . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-orange ) ;
}
. ui . orange . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . orange . buttons . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-orange-dark-1 ) ;
}
. ui . orange . button : active ,
. ui . orange . buttons . button : active {
background : var ( --color-orange-dark-2 ) ;
}
. ui . basic . orange . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . orange . button ,
. ui . basic . orange . buttons . button : focus ,
. ui . basic . orange . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-orange ) ;
border-color : var ( --color-orange ) ;
}
. ui . basic . orange . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . orange . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-orange-dark-1 ) ;
border-color : var ( --color-orange-dark-1 ) ;
}
. ui . basic . orange . buttons . button : active ,
. ui . basic . orange . button : active {
color : var ( --color-orange-dark-2 ) ;
border-color : var ( --color-orange-dark-2 ) ;
}
/* yellow */
. ui . yellow . labels . label ,
. ui . ui . ui . yellow . label ,
. ui . yellow . button ,
2023-06-09 11:37:47 +03:00
. ui . yellow . buttons . button ,
. ui . yellow . button : focus ,
. ui . yellow . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-yellow ) ;
}
. ui . yellow . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . yellow . buttons . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-yellow-dark-1 ) ;
}
. ui . yellow . button : active ,
. ui . yellow . buttons . button : active {
background : var ( --color-yellow-dark-2 ) ;
}
. ui . basic . yellow . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . yellow . button ,
. ui . basic . yellow . buttons . button : focus ,
. ui . basic . yellow . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-yellow ) ;
border-color : var ( --color-yellow ) ;
}
. ui . basic . yellow . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . yellow . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-yellow-dark-1 ) ;
border-color : var ( --color-yellow-dark-1 ) ;
}
. ui . basic . yellow . buttons . button : active ,
. ui . basic . yellow . button : active {
color : var ( --color-yellow-dark-2 ) ;
border-color : var ( --color-yellow-dark-2 ) ;
}
/* olive */
. ui . olive . labels . label ,
. ui . ui . ui . olive . label ,
. ui . olive . button ,
2023-06-09 11:37:47 +03:00
. ui . olive . buttons . button ,
. ui . olive . button : focus ,
. ui . olive . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-olive ) ;
}
. ui . olive . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . olive . buttons . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-olive-dark-1 ) ;
}
. ui . olive . button : active ,
. ui . olive . buttons . button : active {
background : var ( --color-olive-dark-2 ) ;
}
. ui . basic . olive . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . olive . button ,
. ui . basic . olive . buttons . button : focus ,
. ui . basic . olive . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-olive ) ;
border-color : var ( --color-olive ) ;
}
. ui . basic . olive . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . olive . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-olive-dark-1 ) ;
border-color : var ( --color-olive-dark-1 ) ;
}
. ui . basic . olive . buttons . button : active ,
. ui . basic . olive . button : active {
color : var ( --color-olive-dark-2 ) ;
border-color : var ( --color-olive-dark-2 ) ;
}
/* green */
. ui . green . labels . label ,
. ui . ui . ui . green . label ,
. ui . green . button ,
2023-06-09 11:37:47 +03:00
. ui . green . buttons . button ,
. ui . green . button : focus ,
. ui . green . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-green ) ;
}
. ui . green . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . green . buttons . button : hover {
2023-05-29 15:45:22 +03: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 ,
2023-06-09 11:37:47 +03:00
. ui . basic . green . button ,
. ui . basic . green . buttons . button : focus ,
. ui . basic . green . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-green ) ;
border-color : var ( --color-green ) ;
}
. ui . basic . green . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . green . button : hover {
2023-05-29 15:45:22 +03: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 ) ;
}
/* teal */
. ui . teal . labels . label ,
. ui . ui . ui . teal . label ,
. ui . teal . button ,
2023-06-09 11:37:47 +03:00
. ui . teal . buttons . button ,
. ui . teal . button : focus ,
. ui . teal . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-teal ) ;
}
. ui . teal . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . teal . buttons . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-teal-dark-1 ) ;
}
. ui . teal . button : active ,
. ui . teal . buttons . button : active {
background : var ( --color-teal-dark-2 ) ;
}
. ui . basic . teal . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . teal . button ,
. ui . basic . teal . buttons . button : focus ,
. ui . basic . teal . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-teal ) ;
border-color : var ( --color-teal ) ;
}
. ui . basic . teal . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . teal . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-teal-dark-1 ) ;
border-color : var ( --color-teal-dark-1 ) ;
}
. ui . basic . teal . buttons . button : active ,
. ui . basic . teal . button : active {
color : var ( --color-teal-dark-2 ) ;
border-color : var ( --color-teal-dark-2 ) ;
}
/* blue */
. ui . blue . labels . label ,
. ui . ui . ui . blue . label ,
. ui . blue . button ,
2023-06-09 11:37:47 +03:00
. ui . blue . buttons . button ,
. ui . blue . button : focus ,
. ui . blue . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-blue ) ;
}
. ui . blue . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . blue . buttons . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-blue-dark-1 ) ;
}
. ui . blue . button : active ,
. ui . blue . buttons . button : active {
background : var ( --color-blue-dark-2 ) ;
}
. ui . basic . blue . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . blue . button ,
. ui . basic . blue . buttons . button : focus ,
. ui . basic . blue . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-blue ) ;
border-color : var ( --color-blue ) ;
}
. ui . basic . blue . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . blue . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-blue-dark-1 ) ;
border-color : var ( --color-blue-dark-1 ) ;
}
. ui . basic . blue . buttons . button : active ,
. ui . basic . blue . button : active {
color : var ( --color-blue-dark-2 ) ;
border-color : var ( --color-blue-dark-2 ) ;
}
/* violet */
. ui . violet . labels . label ,
. ui . ui . ui . violet . label ,
. ui . violet . button ,
2023-06-09 11:37:47 +03:00
. ui . violet . buttons . button ,
. ui . violet . button : focus ,
. ui . violet . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-violet ) ;
}
. ui . violet . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . violet . buttons . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-violet-dark-1 ) ;
}
. ui . violet . button : active ,
. ui . violet . buttons . button : active {
background : var ( --color-violet-dark-2 ) ;
}
. ui . basic . violet . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . violet . button ,
. ui . basic . violet . buttons . button : focus ,
. ui . basic . violet . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-violet ) ;
border-color : var ( --color-violet ) ;
}
. ui . basic . violet . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . violet . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-violet-dark-1 ) ;
border-color : var ( --color-violet-dark-1 ) ;
}
. ui . basic . violet . buttons . button : active ,
. ui . basic . violet . button : active {
color : var ( --color-violet-dark-2 ) ;
border-color : var ( --color-violet-dark-2 ) ;
}
/* purple */
. ui . purple . labels . label ,
. ui . ui . ui . purple . label ,
. ui . purple . button ,
2023-06-09 11:37:47 +03:00
. ui . purple . buttons . button ,
. ui . purple . button : focus ,
. ui . purple . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-purple ) ;
}
. ui . purple . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . purple . buttons . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-purple-dark-1 ) ;
}
. ui . purple . button : active ,
. ui . purple . buttons . button : active {
background : var ( --color-purple-dark-2 ) ;
}
. ui . basic . purple . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . purple . button ,
. ui . basic . purple . buttons . button : focus ,
. ui . basic . purple . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-purple ) ;
border-color : var ( --color-purple ) ;
}
. ui . basic . purple . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . purple . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-purple-dark-1 ) ;
border-color : var ( --color-purple-dark-1 ) ;
}
. ui . basic . purple . buttons . button : active ,
. ui . basic . purple . button : active {
color : var ( --color-purple-dark-2 ) ;
border-color : var ( --color-purple-dark-2 ) ;
}
/* pink */
. ui . pink . labels . label ,
. ui . ui . ui . pink . label ,
. ui . pink . button ,
2023-06-09 11:37:47 +03:00
. ui . pink . buttons . button ,
. ui . pink . button : focus ,
. ui . pink . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-pink ) ;
}
. ui . pink . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . pink . buttons . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-pink-dark-1 ) ;
}
. ui . pink . button : active ,
. ui . pink . buttons . button : active {
background : var ( --color-pink-dark-2 ) ;
}
. ui . basic . pink . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . pink . button ,
. ui . basic . pink . buttons . button : focus ,
. ui . basic . pink . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-pink ) ;
border-color : var ( --color-pink ) ;
}
. ui . basic . pink . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . pink . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-pink-dark-1 ) ;
border-color : var ( --color-pink-dark-1 ) ;
}
. ui . basic . pink . buttons . button : active ,
. ui . basic . pink . button : active {
color : var ( --color-pink-dark-2 ) ;
border-color : var ( --color-pink-dark-2 ) ;
}
/* brown */
. ui . brown . labels . label ,
. ui . ui . ui . brown . label ,
. ui . brown . button ,
2023-06-09 11:37:47 +03:00
. ui . brown . buttons . button ,
. ui . brown . button : focus ,
. ui . brown . buttons . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-brown ) ;
}
. ui . brown . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . brown . buttons . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-brown-dark-1 ) ;
}
. ui . brown . button : active ,
. ui . brown . buttons . button : active {
background : var ( --color-brown-dark-2 ) ;
}
. ui . basic . brown . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . brown . button ,
. ui . basic . brown . buttons . button : focus ,
. ui . basic . brown . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-brown ) ;
border-color : var ( --color-brown ) ;
}
. ui . basic . brown . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . brown . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-brown-dark-1 ) ;
border-color : var ( --color-brown-dark-1 ) ;
}
. ui . basic . brown . buttons . button : active ,
. ui . basic . brown . button : active {
color : var ( --color-brown-dark-2 ) ;
border-color : var ( --color-brown-dark-2 ) ;
}
2023-06-09 11:37:47 +03:00
/* negative */
2023-05-29 15:45:22 +03:00
. ui . negative . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . negative . button ,
. ui . negative . buttons . button : focus ,
. ui . negative . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-red ) ;
}
. ui . negative . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . negative . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-red-dark-1 ) ;
}
. ui . negative . buttons . button : active ,
. ui . negative . button : active {
background : var ( --color-red-dark-2 ) ;
}
. ui . basic . negative . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . negative . button ,
. ui . basic . negative . buttons . button : focus ,
. ui . basic . negative . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-red ) ;
border-color : var ( --color-red ) ;
}
. ui . basic . negative . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . negative . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-red-dark-1 ) ;
border-color : var ( --color-red-dark-1 ) ;
}
. ui . basic . negative . buttons . button : active ,
. ui . basic . negative . button : active {
color : var ( --color-red-dark-2 ) ;
border-color : var ( --color-red-dark-2 ) ;
}
/* positive */
. ui . positive . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . positive . button ,
. ui . positive . buttons . button : focus ,
. ui . positive . button : focus {
2023-05-29 15:45:22 +03:00
background : var ( --color-green ) ;
}
. ui . positive . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . positive . button : hover {
2023-05-29 15:45:22 +03:00
background : var ( --color-green-dark-1 ) ;
}
. ui . positive . buttons . button : active ,
. ui . positive . button : active {
background : var ( --color-green-dark-2 ) ;
}
. ui . basic . positive . buttons . button ,
2023-06-09 11:37:47 +03:00
. ui . basic . positive . button ,
. ui . basic . positive . buttons . button : focus ,
. ui . basic . positive . button : focus {
2023-05-29 15:45:22 +03:00
color : var ( --color-green ) ;
border-color : var ( --color-green ) ;
}
. ui . basic . positive . buttons . button : hover ,
2023-06-09 11:37:47 +03:00
. ui . basic . positive . button : hover {
2023-05-29 15:45:22 +03:00
color : var ( --color-green-dark-1 ) ;
border-color : var ( --color-green-dark-1 ) ;
}
. ui . basic . positive . buttons . button : active ,
. ui . basic . positive . button : active {
color : var ( --color-green-dark-2 ) ;
border-color : var ( --color-green-dark-2 ) ;
}