mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-01 01:16:38 +00:00
c1370e95f0
* Tokenize shadow vertical distance * Rename CSS variables to match Codex counterpart * Reduce the vertical distance for all box shadow
290 lines
6 KiB
Plaintext
290 lines
6 KiB
Plaintext
/*
|
|
* 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-drop-xx-large );
|
|
}
|
|
|
|
.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 );
|
|
}
|