mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-27 15:50:34 +00:00
37cdf91257
background-color-framed can be replaced with color-surface-2 most of the time. input is not used. They are both deprecated in favor of the simpler color-surface system
318 lines
6.2 KiB
Plaintext
318 lines
6.2 KiB
Plaintext
/*
|
|
* Citizen
|
|
*
|
|
* SkinStyles for Extension:WSSearch
|
|
* Module: ext.WSSearchFront.module
|
|
* Version: 3.5.4 c27ebcb5
|
|
*
|
|
* Date: 2021-11-23
|
|
*/
|
|
|
|
:root {
|
|
--tint-1: var( --color-surface-2 );
|
|
--border-1: 1px solid var( --color-surface-2--active );
|
|
}
|
|
|
|
.wssearch--filter-options-search,
|
|
.wssearch--search-input {
|
|
border: 1px solid var( --border-color-base );
|
|
background-color: var( --color-surface-2 );
|
|
color: var( --color-base );
|
|
|
|
&:hover {
|
|
border-color: #72777d;
|
|
}
|
|
|
|
&:focus {
|
|
border-color: var( --color-base );
|
|
box-shadow: inset 0 0 0 1px var( --base-color );
|
|
}
|
|
}
|
|
|
|
.wssearch--search-button {
|
|
border: 1px solid var( --border-color-input );
|
|
background-color: var( --base-color );
|
|
color: var( --color-base );
|
|
|
|
&:hover {
|
|
border-color: var( --border-color-input--hover );
|
|
background-color: var( --base-color-lighter );
|
|
}
|
|
|
|
&:focus {
|
|
border-color: var( --color-base );
|
|
box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 );
|
|
}
|
|
|
|
&:active {
|
|
border-color: var( --base-color-darker );
|
|
background-color: var( --base-color-darker );
|
|
color: var( --color-base );
|
|
}
|
|
}
|
|
|
|
.wssearch--selected-filter {
|
|
background-color: var( --color-surface-2 );
|
|
transition: background-color 0.1s, color 0.1s, border-color 0.1s, box-shadow 0.1s;
|
|
|
|
&:hover {
|
|
border-color: var( --base-color-lighter );
|
|
background-color: var( --color-surface-2--hover );
|
|
}
|
|
|
|
&:after {
|
|
color: var( --color-base );
|
|
}
|
|
}
|
|
|
|
.wssearch--checkbox-input-checkbox {
|
|
&:checked {
|
|
+ .wssearch--checkbox-input-icon {
|
|
border-color: var( --color-base );
|
|
background-color: var( --color-primary--active );
|
|
}
|
|
|
|
&:hover {
|
|
border-color: var( --base-color-lighter );
|
|
background-color: var( --base-color-lighter );
|
|
}
|
|
|
|
&:focus {
|
|
border-color: var( --color-base );
|
|
background-color: var( --color-base );
|
|
box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 );
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
+ .wssearch--checkbox-input-icon {
|
|
border-color: var( --base-color-lighter );
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
+ .wssearch--checkbox-input-icon {
|
|
border-color: var( --color-base );
|
|
box-shadow: inset 0 0 0 1px var( --base-color );
|
|
}
|
|
}
|
|
}
|
|
|
|
.wssearch--checkbox-input-icon {
|
|
border-color: #72777d;
|
|
background-color: var( --color-surface-0 );
|
|
}
|
|
|
|
.wssearch--selected-clear {
|
|
color: var( --color-link );
|
|
|
|
&:hover {
|
|
color: var( --color-link--hover );
|
|
}
|
|
}
|
|
|
|
.wssearch--order__sortorder {
|
|
border: 1px solid #a2a9b1;
|
|
background-color: var( --color-surface-0 );
|
|
color: var( --color-base );
|
|
|
|
&:active,
|
|
&:focus {
|
|
border-color: var( --color-base );
|
|
box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 );
|
|
}
|
|
}
|
|
|
|
.wssearch--size__select,
|
|
.wssearch--order__select {
|
|
border: 1px solid #a2a9b1;
|
|
background-color: var( --color-surface-0 );
|
|
color: var( --color-base );
|
|
|
|
&:hover {
|
|
border-color: #72777d;
|
|
}
|
|
|
|
&:focus {
|
|
border-color: var( --color-base );
|
|
box-shadow: inset 0 0 0 1px var( --base-color );
|
|
}
|
|
}
|
|
|
|
.wssearch--order__label,
|
|
.wssearch--size__label {
|
|
color: var( --color-base );
|
|
}
|
|
|
|
.wssearch--order__option,
|
|
.wssearch--size__option {
|
|
background-color: var( --color-surface-2 );
|
|
color: var( --color-base--emphasized );
|
|
}
|
|
|
|
.wssearch-hit-prop-loading-bg {
|
|
background: linear-gradient( 135deg, var( --color-surface-2 ) 25%, transparent 0, transparent 50%, var( --color-surface-2 ) 0, var( --color-surface-2 ) 75%, transparent 0, transparent );
|
|
background-color: var( --color-surface-2--active );
|
|
}
|
|
|
|
.wssearch--hit-pill {
|
|
background-color: var( --color-surface-0 );
|
|
|
|
a {
|
|
color: var( --color-link );
|
|
|
|
&:hover {
|
|
color: var( --base-color-lighter );
|
|
}
|
|
}
|
|
}
|
|
|
|
.wssearch--hit__date,
|
|
.wssearch--hit__namespace,
|
|
.wssearch--hit__pagetitle {
|
|
color: var( --color-success );
|
|
}
|
|
|
|
.wssearch--pagers {
|
|
.wssearch--pager {
|
|
&.active {
|
|
background-color: var( --color-primary );
|
|
color: var( --color-base );
|
|
}
|
|
|
|
&:hover {
|
|
color: var( --color-base );
|
|
}
|
|
}
|
|
|
|
.wssearch--pager-back-icon {
|
|
background-image: var( --back-icon );
|
|
|
|
&:hover {
|
|
background-color: var( --tint-1 );
|
|
}
|
|
}
|
|
|
|
.wssearch--pager-forward-icon {
|
|
background-image: var( --next-icon );
|
|
|
|
&:hover {
|
|
background-color: var( --tint-1 );
|
|
}
|
|
}
|
|
|
|
.wssearch--pager-hide {
|
|
color: var( --color-base );
|
|
|
|
.wssearch--pager-back-icon,
|
|
.wssearch--pager-forward-icon {
|
|
color: var( --color-base );
|
|
}
|
|
}
|
|
}
|
|
|
|
.wssearch--slider-input-icon {
|
|
border: 2px solid #a2a9b1;
|
|
}
|
|
|
|
.wssearch--selected-filters__combobox {
|
|
&:not( :empty ) {
|
|
border: var( --border-1 );
|
|
background: var( --tint-1 );
|
|
}
|
|
|
|
.wssearch--checkbox {
|
|
background-color: var( --color-surface-2 );
|
|
color: var( --color-base--emphasized );
|
|
|
|
&:hover {
|
|
background-color: var( --tint-1 );
|
|
}
|
|
|
|
&-selected {
|
|
background-color: var( --color-surface-3 );
|
|
color: #36c;
|
|
}
|
|
|
|
&.wssearch--checkbox-selected:hover {
|
|
background-color: var( --color-surface-2 );
|
|
}
|
|
|
|
&:not( :last-child ) {
|
|
border-bottom: 1px solid var( --color-surface-2--active );
|
|
}
|
|
|
|
&-count {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
}
|
|
}
|
|
|
|
.wssearch--facetsearch-input {
|
|
border: 1px solid #a2a9b1;
|
|
background-color: var( --color-surface-0 );
|
|
color: var( --color-base );
|
|
|
|
&:hover {
|
|
border-color: #72777d;
|
|
}
|
|
|
|
&:focus {
|
|
border-color: var( --color-base );
|
|
box-shadow: inset 0 0 0 1px var( --base-color );
|
|
}
|
|
}
|
|
|
|
.wssearch--filter-showmore {
|
|
border: var( --border-1 );
|
|
background-color: var( --tint-1 );
|
|
|
|
&:hover {
|
|
border-color: var( --color-base );
|
|
background-color: var( --color-surface-0 );
|
|
color: var( --color-base );
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
border-color: var( --color-base );
|
|
box-shadow: inset 0 0 0 1px var( --base-color ), inset 0 0 0 2px var( --color-surface-2 );
|
|
}
|
|
}
|
|
|
|
.wssearch--table {
|
|
.wssearch--hits {
|
|
background-color: #a2a9b1;
|
|
}
|
|
|
|
.wssearch--hit > * {
|
|
background-color: var( --color-surface-0 );
|
|
}
|
|
|
|
&__header > * {
|
|
background-color: var( --color-surface-2--active );
|
|
}
|
|
}
|
|
|
|
.skin-citizen-dark {
|
|
.wssearch--filter-icon__more,
|
|
.wssearch--search-icon,
|
|
.wssearch--search-clear,
|
|
.wssearch--pager-back-icon,
|
|
.wssearch--pager-forward-icon {
|
|
filter: invert( 1 ) hue-rotate( 180deg );
|
|
}
|
|
}
|
|
|
|
@media ( max-width: 500px ) {
|
|
.wssearch--filters {
|
|
background: var( --color-surface-0 );
|
|
|
|
&__open {
|
|
border: 1px solid var( --base-color );
|
|
background-color: var( --color-base );
|
|
color: var( --color-base );
|
|
}
|
|
}
|
|
}
|