mediawiki-skins-Citizen/skinStyles/extensions/SemanticMediaWiki/smw.ui.styles.less

/*
 * Citizen
 *
 * SkinStyles for Extension:SemanticMediaWiki
 * Module: smw.ui.styles
 * Version: 4.0.2 (0fcdfce)
 *
 * Date: 2022-10-20
*/

/* jquery/jquery.selectmenu.css */
/* Sub menus */
.sm_sub_header:hover {
	color: var( --color-emphasized ) !important;
}

.sm_sub_header button {
	color: var( --color-emphasized );
}

/**
 * Container
 */
.sm_container {
	background-color: var( --color-surface-1 );
	border: 0;
	box-shadow: var( --box-shadow-dialog );
}

.sm_header > h3 {
	margin: var( --space-md );
	font-family: inherit;
	color: var( --color-emphasized );
}

.sm_header button {
	top: 12px;
	color: var( --background-color-icon );
}

.sm_header button:hover {
	color: var( --background-color-icon--hover );
}

.sm_header button.sm_close_button {
	right: var( --space-md );
}

.sm_input {
	background-color: var( --color-surface-1 );
	border-color: var( --border-color-base );
	border-radius: var( --border-radius-base );
}

.sm_input:focus {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive );
}

/**
 * "Get all" button
 */
div.sm_clear_btn {
	font-family: inherit;
	color: var( --color-subtle );
}

div.sm_clear_btn:hover {
	color: var( --color-base );
}

/**
 * Results
 */
.sm_result_area {
	background-color: transparent;
}

.sm_result_area.sm_list_mode {
	border-top-color: var( --border-color-base );
}

.sm_result_tabs {
	border-bottom-color: var( --border-color-base );
}

.sm_result_tabs ul li a {
	font-family: inherit;
	color: var( --color-base );
	border-radius: var( --border-radius-base ) var( --border-radius-base ) 0 0;
}

.sm_result_tabs ul li a.active {
	color: var( --color-emphasized );
	background-color: transparent;
	border-color: var( --border-color-base );
	border-bottom-color: transparent;
}

/* menu arrow */
.sm_arrow_bottom > .sm_arrow {
	border-bottom-color: var( --color-surface-1 );
}

.sm_arrow_bottom > .sm_arrow::after {
	border-bottom-color: var( --color-surface-1 );
}

.sm_arrow_bottom > .sm_arrow.sm_have_title::after {
	border-bottom-color: var( --color-surface-1 );
}

.sm_arrow_top > .sm_arrow {
	border-top-color: var( --color-surface-1 );
}

.sm_arrow_top > .sm_arrow::after {
	border-top-color: var( --color-surface-1 );
}
/* menu arrow */

.sm_results {
	background-color: var( --color-surface-1 );
}

/* regular menu item style */
.sm_regular .sm_results > li:hover {
	background-color: var( --color-progressive--hover );
}

.sm_regular .sm_results > li.sm_disabled,
.sm_regular .sm_results > li.sm_disabled:hover,
.sm_regular .sm_results > li.sm_disabled a {
	color: var( --color-subtle );
	background-color: var( --color-surface-1 );
}

.sm_regular .sm_results > li.sm_header,
.sm_regular .sm_results > li.sm_header:hover,
.sm_regular .sm_results > li.sm_header a {
	color: var( --color-emphasized );
	background-color: transparent;
}

/* regular menu item style */
.sm_results > li {
	font-family: inherit;
	color: var( --color-base );
}

.sm_results > li > a {
	color: var( --color-base );
}

.sm_results > li.sm_divider {
	border-bottom-color: var( --border-color-base );
}

ul.sm_results > li.sm_over {
	background-color: var( --color-progressive--hover ) !important;
}

.sm_control_box {
	background-color: var( --color-surface-1 );
	border-top-color: var( --border-color-base );
}

.sm_control_box button {
	color: var( --background-color-icon );
	background-color: var( --color-surface-2 );
}

.sm_control_box button:hover {
	color: var( --background-color-icon--hover );
	background-color: var( --color-surface-2--hover );
}

div.sm_container_combo {
	border-color: var( --border-color-base );
	border-radius: var( --border-radius-base );
}

div.sm_container_combo.sm_disabled,
div.sm_container_combo.sm_disabled ul.sm_element_box,
div.sm_container_combo.sm_disabled .sm_input {
	background-color: var( --color-surface-2 );
}

div.sm_container_combo.sm_container_open {
	border-color: var( --color-progressive );
	box-shadow: inset 0 1px 1px rgba( 0, 0, 0, 0.075 ), 0 0 8px var( --color-progressive );
}

input.sm_combo_input[ readonly ],
input.sm_combo_input[ disabled ] {
	background-color: var( --color-surface-2 );
}

ul.sm_element_box li.selected_tag {
	background-color: var( --color-surface-2 );
	border-color: var( --border-color-base );
	border-radius: var( --border-radius-base );
	box-shadow: 0 0 2px var( --color-surface-1 ) inset, 0 1px 0 rgba( 0, 0, 0, 0.05 );
}

ul.sm_element_box li.selected_tag span.tag_close {
	font-family: inherit;
}

.sm_input_off {
	color: var( --color-base );
	background: var( --color-surface-2 );
}

/**
 * Navi
 */
.sm_navi {
	background: var( --color-surface-2 );
	border-bottom-color: var( --color-progressive );
}

.sm_navi > p > a:link,
.sm_navi > p > a:visited,
.sm_navi > p > a:hover,
.sm_navi > p > a:active {
	color: var( --color-progressive );
}

.sm_navi > p {
	color: var( --color-base );
}

.sm_navi > p > a > .current {
	color: var( --color-progressive--active );
}

.sm_navi > p > .page_end {
	color: var( --color-subtle );
}

.sm_container > .sm_select_ng {
	background: var( --color-warning );
}

div.sm_result_area div.pagination > ul > li > a {
	color: var( --color-base );
	background-color: transparent;
}

div.sm_result_area div.pagination > ul > li > a:hover {
	color: var( --color-emphasized );
	background-color: var( --background-color-button-quiet--hover );
}

div.sm_result_area div.pagination > ul > li.disabled > a {
	color: var( --color-subtle );
}

div.sm_result_area div.pagination > ul > li.disabled > a:hover {
	color: var( --color-subtle );
	background-color: transparent;
}

div.sm_result_area div.pagination > ul > li.pageInfoBox > a {
	color: var( --color-subtle );
}

div.sm_result_area div.pagination > ul > li.pageInfoBox > a:hover {
	color: var( --color-base );
}

/* smw/smw.selectmenu.css */
.smw-selectmenu-button {
	color: var( --color-base );
}

.smw-selectmenu-label {
	color: var( --color-subtle );
}

.sm_result_area,
.sm_results {
	border-radius: 0 0 var( --border-radius-medium ) var( --border-radius-medium );
}

ul.sm_results > li.sm_over:last-child {
	border-radius: 0 0 var( --border-radius-medium ) var( --border-radius-medium );
}