mediawiki-skins-Citizen/resources/skins.citizen.search/skins.citizen.search.less
alistair3149 969cd787d6
feat(core): use different font weight in different themes
The same font weight do not provide the same contrast in different themes.
We should be able to change the scaling
2022-11-21 17:42:26 -05:00

124 lines
2.3 KiB
Plaintext

@import '../variables.less';
@import '../mixins.less';
.citizen-typeahead {
position: absolute;
top: 100%;
overflow: auto;
width: 100%;
max-height: var( --header-card-maxheight );
box-sizing: border-box;
padding-top: 0.75rem;
margin-top: -0.75rem;
//border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
.citizen-card;
.citizen-card-hide( 50% 0, Y, false );
// Well this won't be loaded before .citizen-animation-ready anyways
.citizen-card-transition();
&-suggestion {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
&__thumbnail {
overflow: hidden;
height: 60px;
border-radius: var( --border-radius--medium );
background-color: #eaecf0;
img,
source {
object-fit: cover;
}
}
&__text {
overflow: hidden;
white-space: nowrap;
}
&__title {
color: var( --color-base--emphasized );
font-weight: var( --font-weight-semibold );
}
&__highlight {
color: var( --color-base--subtle );
font-weight: var( --font-weight-medium );
}
&__redirect {
margin-left: 0.25rem;
color: var( --color-base );
font-size: 0.8125rem;
}
&__description {
margin-top: 0.1rem;
color: var( --color-base--subtle );
font-size: @content-caption-size;
}
&__title,
&__description {
overflow: hidden;
text-overflow: ellipsis;
}
}
&-footer {
padding-top: var( --border-radius--large );
padding-bottom: var( --border-radius--large );
border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
border-top: 1px solid var( --border-color-base );
font-size: 0.8125rem;
font-weight: var( --font-weight-medium );
&__icon {
height: var( --size-icon );
}
&__text {
strong {
color: var( --color-base--emphasized );
}
}
}
&-option {
&--active {
background-color: var( --background-color-primary--hover );
}
}
a {
display: flex;
align-items: center;
padding-right: 0.75rem;
padding-left: 0.75rem;
color: var( --color-base );
}
picture {
width: 100%;
max-width: 70px;
margin-right: 0.75rem;
img,
source {
width: inherit;
height: inherit;
}
}
&--expanded {
.citizen-card-show( false );
}
}
// HACK: Hide default MW search suggestion if it somehow loaded
// This should be removed when we switch to vue search
.suggestions {
display: none !important;
}