226 行
4.3 KiB
Plaintext
226 行
4.3 KiB
Plaintext
/*
|
|
* Citizen
|
|
*
|
|
* SkinStyles for Special:Search
|
|
* Module: mediawiki.special.search.styles
|
|
* Version: 1.39.0
|
|
*
|
|
* Date: 2022-10-20
|
|
*/
|
|
|
|
@import '../../../resources/mixins.less';
|
|
@import '../../../resources/variables.less';
|
|
|
|
// Disable default sticky header
|
|
#citizen-body-header-sticky-sentinel {
|
|
display: none;
|
|
}
|
|
|
|
// Sticky header
|
|
.mw-search-form-wrapper {
|
|
position: sticky;
|
|
z-index: @z-index-page-header;
|
|
top: ~'calc( var( --header-size ) - 1px )';
|
|
padding: var( --space-md ) 0;
|
|
border-bottom: 1px solid var( --border-color-base );
|
|
margin-top: ~'calc( var( --space-md ) * -1 )'; // counteract padding
|
|
background-color: transparent;
|
|
transition: @transition-transform; // Hide when scroll down
|
|
|
|
&:before {
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: 0;
|
|
right: ~'calc( var(--padding-page ) * -1 )';
|
|
left: ~'calc( var(--padding-page ) * -1 )';
|
|
height: 100%;
|
|
-webkit-backdrop-filter: saturate( 50% ) blur( 16px );
|
|
backdrop-filter: saturate( 50% ) blur( 16px );
|
|
background-color: var( --background-color-overlay );
|
|
content: '';
|
|
}
|
|
|
|
// Wrapper has a border bottom already
|
|
.mw-search-profile-tabs:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.citizen-scroll--down .mw-search-form-wrapper {
|
|
transform: ~'translateY( calc( -1 * var( --header-size ) ) )';
|
|
}
|
|
|
|
#mw-search-top-table {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: var( --space-xl );
|
|
|
|
// Fix weird space between input field and button
|
|
.oo-ui-actionFieldLayout .oo-ui-textInputWidget {
|
|
max-width: none;
|
|
}
|
|
|
|
.oo-ui-widget {
|
|
font-size: 1rem; // HACK: Override the 14px hack we use for OOUI
|
|
}
|
|
}
|
|
|
|
.mw-search-profile-tabs {
|
|
border: 0;
|
|
border-bottom: 1px solid var( --border-color-base );
|
|
margin-top: var( --space-xxs );
|
|
background-color: transparent;
|
|
}
|
|
|
|
.search-types {
|
|
padding-left: 0;
|
|
float: none;
|
|
|
|
ul {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
a {
|
|
padding: var( --space-xs ) var( --space-sm );
|
|
border-bottom: 2px solid transparent;
|
|
color: var( --color-base--emphasized );
|
|
font-weight: var( --font-weight-medium );
|
|
|
|
&:hover {
|
|
border-color: var( --color-primary--hover );
|
|
color: var( -color-primary--hover );
|
|
}
|
|
}
|
|
|
|
.current a {
|
|
border-color: var( --color-primary );
|
|
color: var( --color-primary );
|
|
}
|
|
}
|
|
|
|
.results-info {
|
|
color: var( --color-base--subtle );
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#mw-searchoptions {
|
|
border-color: transparent;
|
|
border-radius: 0;
|
|
background-color: var( --color-surface-1 );
|
|
|
|
h4 {
|
|
color: var( --color-base--subtle );
|
|
font-size: 0.875rem;
|
|
font-weight: var( --font-weight-normal );
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.divider {
|
|
border-color: var( --border-color-base );
|
|
}
|
|
}
|
|
|
|
#mw-search-interwiki {
|
|
border-color: var( --border-color-base );
|
|
}
|
|
|
|
.searchdidyoumean {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.mw-search-createlink,
|
|
.mw-search-exists {
|
|
// These can generate a empty card when there are no text content
|
|
// FIXME: re-enable when this is addressed in core
|
|
// padding: var( --space-sm ) var( --space-md );
|
|
// background: var( --color-surface-2 );
|
|
// border-radius: var( --border-radius--small );
|
|
margin-top: 0 !important;
|
|
color: var( --color-base--emphasized );
|
|
}
|
|
|
|
.mw-search-results {
|
|
max-width: 50em;
|
|
|
|
li {
|
|
padding: var( --space-md ) 0;
|
|
|
|
a {
|
|
font-size: var( --font-size-h3 );
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-search-result {
|
|
// padding: var( --space-md ) 0;
|
|
font-size: 0.875rem;
|
|
|
|
&-heading {
|
|
a {
|
|
// font-size: var( --font-size-h3 );
|
|
font-weight: var( --font-weight-semibold );
|
|
}
|
|
}
|
|
|
|
&-data {
|
|
color: var( --color-base--subtle );
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
.searchmatch {
|
|
color: var( --color-base--emphasized );
|
|
font-weight: var( --font-weight-semibold );
|
|
|
|
a & {
|
|
// If searchmatch is part of the link (usually title), use link color
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.searchresults {
|
|
h2 {
|
|
padding-bottom: var( --space-xs );
|
|
border-bottom: 1px solid var( --border-color-base );
|
|
margin-bottom: 0;
|
|
color: var( --color-base--subtle );
|
|
font-size: 0.875rem;
|
|
font-weight: var( --font-weight-normal );
|
|
letter-spacing: 0.05em;
|
|
}
|
|
}
|
|
|
|
// Somehow got overridden
|
|
.citizen-body {
|
|
.search-types {
|
|
ul {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.mw-search-results {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @width-breakpoint-tablet ) {
|
|
.results-info {
|
|
display: none;
|
|
}
|
|
|
|
// Not great but works for now
|
|
#mw-searchoptions {
|
|
overflow: auto;
|
|
max-height: 20vh;
|
|
}
|
|
|
|
.mw-search-createlink,
|
|
.mw-search-exists {
|
|
max-width: none;
|
|
float: none;
|
|
}
|
|
}
|