StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-15 10:38:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): ✨ redesign search page

Browse source
This commit is contained in:
alistair3149 2022-10-20 16:36:35 -04:00
parent 80d3a0acbc
commit 0bf4b4555c
No known key found for this signature in database
1 changed files with 136 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

169
skinStyles/mediawiki/special/mediawiki.special.search.styles.less
View file

@ -1,46 +1,155 @@
/* /*
* Citizen - Search Page Styles * Citizen
* https://starcitizen.tools *
* SkinStyles for Special:Search
* Module: mediawiki.special.search.styles
* Version: 1.39.0
*
* Date: 2022-10-20
*/ */
@import '../../../resources/variables.less'; @import '../../../resources/variables.less';
/* Special:Search */ // Disable default sticky header
#citizen-body-header-sticky-sentinel {
display: none;
}
// Sticky header
.mw-search-form-wrapper {
position: sticky;
top: 0;
padding-top: var( --space-md );
border-bottom: 1px solid var( --border-color-base );
margin-top: ~'calc( var( --space-md ) * -1 )'; // counteract padding
background-color: var( --color-surface-0 );
// Wrapper has a border bottom already
.mw-search-profile-tabs:last-child {
border-bottom: 0;
}
}
#mw-search-top-table {
display: flex;
justify-content: space-between;
gap: var( --space-lg );
// Fix weird space between input field and button
.oo-ui-actionFieldLayout .oo-ui-textInputWidget {
max-width: none;
}
}
.mw-search-profile-tabs {
border-color: transparent;
border-bottom: 1px solid var( --border-color-base );
margin-top: var( --space-xs );
background-color: transparent;
font-size: 0.875rem;
}
.search-types { .search-types {
a {
border-bottom: 2px solid transparent;
color: var( --color-base--subtle );
font-weight: 500;
&: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.8125rem;
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: normal;
letter-spacing: 0.75px;
}
.divider {
border-color: var( --border-color-base );
}
}
#mw-search-interwiki {
border-color: var( --border-color-base );
}
.mw-search-results {
li {
a {
font-size: 1rem;
}
}
}
.mw-search-result {
&-data {
margin-top: var( --space-xs );
color: var( --color-base--subtle );
font-size: 0.8125rem;
}
}
.mw-search-createlink,
.mw-search-exists {
padding: var( --space-md );
border-radius: var( --border-radius--small );
background: var( --color-surface-2 );
font-size: 0.875rem;
}
.searchdidyoumean {
font-size: 1rem;
}
// Somehow got overridden
.citizen-body {
.search-types {
ul { ul {
margin: 0 !important; // Cancel out ul margin from common margin: 0;
}
}
.searchresults {
h2 {
margin-bottom: var( --space-md );
font-size: 1rem;
}
}
.mw-search-results {
margin: 0;
} }
} }
.skin-citizen-dark { @media ( max-width: @width-breakpoint-tablet ) {
.mw-search-profile-tabs {
border: 1px solid @dark-bg-30;
background-color: @dark-bg-10;
}
.search-types .current a {
color: @dark-text-90;
}
.results-info { .results-info {
color: @dark-text-80; display: none;
} }
// Not great but works for now
#mw-searchoptions { #mw-searchoptions {
border: 1px solid @dark-bg-30; overflow: auto;
background-color: @dark-bg-10; max-height: 20vh;
}
#mw-searchoptions .divider {
border-bottom: 1px solid @dark-bg-20;
}
#mw-search-interwiki {
border: 1px solid @dark-bg-50;
}
.mw-search-interwiki-project {
border-top: 1px solid @dark-bg-30;
background-color: @dark-bg-20;
} }
} }