mediawiki-skins-Citizen/skinStyles/extensions/SemanticMediaWiki/ext.smw.vtabs.styles.less
alistair3149 00b2495c1a
feat(core): use px for border-radius
- Move border radius calculation to CSS variable instead of LESS
- Rename CSS variable according to Codex, soft-deprecating the existing border radius
2024-07-05 13:24:31 -04:00

88 lines
2.1 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Extension:SemanticMediaWiki
* Module: ext.smw.vtabs.styles
* Version: 4.0.2 (0fcdfce)
*
* Date: 2022-10-20
*/
/* smw/util/ext.smw.vertical.tabs.css */
/* Style the buttons inside the tab */
div.smw-vtab-nav button {
color: var( --color-progressive );
background-color: transparent;
}
div.smw-vtab-nav button a {
color: var( --color-progressive );
}
div.smw-vtab-nav.nav-right button {
border-left-color: var( --border-color-base );
}
div.smw-vtab-nav.nav-left button {
border-right-color: var( --border-color-base );
}
/* Change background color of buttons on hover */
div.smw-vtab-nav button:hover {
background-color: var( --background-color-button-quiet--hover );
border-color: var( --border-color-base );
border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;
}
div.smw-vtab-nav.nav-right button:hover {
border-color: var( --border-color-base );
border-left-color: var( --border-color-base );
}
div.smw-vtab-nav.nav-left button:hover {
border-color: var( --border-color-base );
border-right-color: var( --border-color-base );
}
/* Create an active/current "tab button" class */
div.smw-vtab-nav button.active {
color: var( --color-emphasized );
background-color: transparent;
border: var( --border-color-base );
}
div.smw-vtab-nav.nav-right button.active {
border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;
}
div.smw-vtab-nav.nav-left button.active {
border-radius: var( --border-radius-base ) 0 0 var( --border-radius-base );
}
div.smw-vtab-nav button.active a {
color: var( --color-emphasized );
}
div.smw-vtab-nav.nav-right button.active,
div.smw-vtab-nav.nav-right button.active a {
border-color: var( --border-color-base );
}
div.smw-vtab-nav.nav-left button.active,
div.smw-vtab-nav.nav-left button.active a {
border-color: var( --border-color-base );
}
/* Style the tab content */
.smw-vtab-content {
border-color: var( --border-color-base );
}
div.smw-vtab-nav .smw-vtab-warning a {
color: var( --color-warning );
}
div.smw-vtab-nav .smw-vtab-warning.active a {
color: var( --color-warning--active );
}