mediawiki-skins-Citizen/skinStyles/extensions/MediaSearch/mediasearch.styles.less

1005 lines
21 KiB
Plaintext
Raw Normal View History

/*
* Citizen
*
* SkinStyles for Extension:MediaSearch
* Module: mediasearch.styles
* Version: REL1_39 (e0aa7bb)
*
* Date: 2022-12-09
*/
@import '../../../resources/variables.less';
// Disable sticky header
#citizen-body-header-sticky-sentinel {
display: none;
}
// Be extra safe
// MediaSearch uses indicators for associated pages
// So let's tweak the styles to make it look that way
.mw-special-MediaSearch {
.firstHeading-container {
flex-direction: column;
align-items: flex-start;
}
.mw-indicators {
padding-left: 0;
margin-top: var( --space-xs );
margin-left: 0;
border-left: 0;
}
}
// Missing from the original stylesheet
.searchmatch {
font-weight: var( --font-weight-semibold );
color: var( --color-base--emphasized );
}
/* AutocompleteSearchInput.less */
.sd-input {
&__icon {
opacity: var( --opacity-icon-base );
}
&__indicator {
color: var( --color-base-subtle );
}
&__input {
color: var( --color-base--emphasized );
background-color: transparent;
border-color: var( --border-color-base--darker );
border-radius: var( --border-radius--small );
&::placeholder {
color: var( --color-base-subtle );
}
&:hover {
background-color: var( --color-surface-0 );
border-color: var( --color-primary--hover );
}
&:focus {
background-color: var( --color-surface-0 );
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
}
&--pending .sd-input__input {
background-color: var( --color-surface-2 );
background-image: linear-gradient( 135deg, var( --color-surface-1 ) 25%, rgba( 255, 255, 255, 0 ) 25%, rgba( 255, 255, 255, 0 ) 50%, var( --color-surface-1 ) 50%, var( --color-surface-1 ) 75%, rgba( 255, 255, 255, 0 ) 75%, rgba( 255, 255, 255, 0 ) );
}
}
/* Button.less */
.sd-button {
font-family: var( --font-family-base );
font-weight: var( --font-weight-semibold );
color: var( --color-base--emphasized );
border-radius: var( --border-radius--small );
&:hover {
color: var( --color-base--emphasized );
background-color: var( --background-color-quiet--hover );
}
&:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
&--framed {
background-color: var( --color-surface-2 );
border-color: var( --border-color-base );
&:hover {
color: var( --color-base--emphasized );
background-color: var( --color-surface-2--hover );
}
// Add active state
&:active {
color: var( --color-base--subtle );
background-color: var( --color-surface-2--active );
}
}
&--progressive {
color: var( --color-primary );
&:hover {
color: var( --color-primary--hover );
}
// Add active state
&:active {
color: var( --color-primary--active );
}
&.sd-button--framed {
color: #fff;
&:hover {
border-color: var( --color-primary--hover );
}
// Add active state
&:active {
color: var( --color-primary--active );
}
}
}
&--destructive {
color: var( --color-destructive );
&:hover {
color: var( --color-destructive--hover );
}
// Add active state
&:active {
color: var( --color-destructive--active );
}
&:focus {
border-color: var( --color-destructive );
box-shadow: inset 0 0 0 1px var( --color-destructive );
}
&.sd-button--framed {
color: #fff;
&:hover {
border-color: var( --color-destructive--hover );
}
// Add active state
&:active {
color: var( --color-destructive--active );
}
&:focus {
box-shadow: inset 0 0 0 1px var( --color-destructive );
}
}
}
&--primary {
&.sd-button--framed {
background-color: var( --color-primary );
border-color: var( --color-primary );
&:hover {
background-color: var( --color-primary--hover );
border-color: var( --color-primary--hover );
}
// Add active state
&:active {
background-color: var( --color-primary--active );
border-color: var( --color-primary--active );
}
&:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
}
&.sd-button--destructive {
background-color: var( --color-destructive );
border-color: var( --color-destructive );
&:hover {
background-color: var( --color-destructive--hover );
border-color: var( --color-destructive--hover );
}
// Add active state
&:active {
background-color: var( --color-destructive--active );
border-color: var( --color-destructive--active );
}
&:focus {
border-color: var( --color-destructive );
box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px #fff;
}
}
}
}
&:disabled {
color: var( --color-base--subtle );
&:hover,
&:focus {
background-color: transparent;
}
&.sd-button--framed {
color: var( --color-base--subtle );
background-color: var( --color-surface-4 );
border-color: var( --color-surface-4 );
&:hover,
&:focus {
background-color: var( --color-surface-4 );
border-color: var( --color-surface-4 );
}
}
&:not( .sd-button--framed ) .sd-icon {
opacity: var( --opacity-base--disabled );
}
}
}
/* Checkbox.less */
.sd-checkbox {
&__icon {
// Show background when hovered
background-color: transparent;
border-color: var( --border-color-base--darker );
border-radius: var( --border-radius--small );
}
&__input {
&:focus + .sd-checkbox__icon {
background-color: var( --color-surface-0 );
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
&:hover + .sd-checkbox__icon {
background-color: var( --color-surface-0 );
border-color: var( --color-primary--hover );
}
&:active + .sd-checkbox__icon {
background-color: var( --color-primary--active );
border-color: var( --color-primary--active );
box-shadow: none;
}
// Set up check icon.
&:checked + .sd-checkbox__icon {
background-color: var( --color-primary );
border-color: var( --color-primary );
}
&:disabled {
& + .sd-checkbox__icon {
background-color: var( --color-surface-4 );
border-color: var( --color-surface-4 );
}
& ~ .sd-checkbox__label-text {
color: var( --color-base--subtle );
}
}
&:checked:enabled:focus + .sd-checkbox__icon {
background-color: var( --color-primary );
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
}
&:checked:enabled:hover + .sd-checkbox__icon {
background-color: var( --color-primary--hover );
border-color: var( --color-primary--hover );
}
&:checked:enabled:active + .sd-checkbox__icon {
background-color: var( --color-primary--active );
border-color: var( --color-primary--active );
box-shadow: none;
}
}
}
/* CopyTextLayout.less */
.sd-copy-text-layout {
&__text {
border-right-color: var( --border-color-base );
}
}
/* Dialog.less */
.sd-dialog {
// Align with Citizen and Codex
z-index: @z-index-overlay;
&__overlay {
background-color: var( --background-color-overlay );
}
&__shell {
background-color: var( --color-surface-1 );
border-color: transparent;
border-radius: var( --border-radius--medium );
box-shadow: var( --box-shadow-dialog );
}
&__header {
border-bottom-color: var( --border-color-base );
.sd-dialog__header-title {
font-weight: var( --font-weight-semibold );
color: var( --color-base--emphasized );
}
}
&__footer:not( :empty ) {
border-top-color: var( --border-color-base );
}
}
/* Message.less */
.sd-message {
font-weight: var( --font-weight-semibold );
color: var( --color-base--emphasized );
&--error {
color: var( --color-destructive );
}
&--success {
color: var( --color-success );
}
// Sync with message box styles
&--block {
font-weight: var( --font-weight-normal );
color: var( --color-base--emphasized );
border-radius: var( --border-radius--small );
&.sd-message--notice {
background-color: var( --color-surface-2 );
border-color: var( --color-surface-2 );
}
&.sd-message--error {
background-color: var( --background-color-destructive );
border-color: var( --background-color-destructive );
}
&.sd-message--warning {
background-color: var( --background-color-warning );
border-color: var( --background-color-warning );
}
&.sd-message--success {
background-color: var( --background-color-success );
border-color: var( --background-color-success );
}
}
// Cancel out default Citizen margin
&__content p {
margin: 0;
}
}
/* Radio.less */
.sd-radio {
&__icon {
// Show background when hovered
background-color: transparent;
border-color: var( --border-color-base--darker );
}
&__input {
&:hover + .sd-radio__icon {
background-color: var( --color-surface-0 );
border-color: var( --color-primary--hover );
}
&:active + .sd-radio__icon {
background-color: var( --color-primary--active );
border-color: var( --color-primary--active );
}
&:checked + .sd-radio__icon {
background-color: #fff;
border-color: var( --color-primary );
}
&:disabled {
& + .sd-radio__icon {
background-color: var( --color-surface-4 );
border-color: var( --color-surface-4 );
}
& ~ .sd-radio__label-text {
color: var( --color-base--subtle );
}
&:checked + .sd-radio__icon {
background-color: #fff;
}
}
&:checked:enabled {
&:focus + .sd-radio__icon {
&::before {
border-color: var( --color-primary--active );
}
}
&:hover + .sd-radio__icon {
border-color: var( --color-primary--hover );
}
&:active + .sd-radio__icon {
border-color: var( --color-primary--active );
box-shadow: none;
&::before {
border-color: var( --color-primary--active );
}
}
}
}
}
/* Select.less */
.sd-select {
&__handle {
color: var( --color-base );
}
&__content {
font-family: var( --font-family-base ); // Browser overrides button font
color: var( --color-base--emphasized );
// Show background when hovered
background-color: transparent;
border-color: var( --border-color-base--darker );
&:hover {
color: var( --color-base--emphasized );
background-color: var( --color-surface-1 );
border-color: var( --color-primary--hover );
.sd-select__handle {
color: var( --color-base );
}
}
&:focus {
background-color: var( --color-surface-1 );
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
&:active {
color: var( --color-base--subtle );
border-color: var( --border-color-base--darker );
}
}
&--open {
.sd-select__content {
background-color: var( --color-surface-1 );
}
.sd-select__handle {
color: var( --color-base );
}
}
&--disabled {
.sd-select__content {
color: var( --color-base--subtle );
background-color: var( --color-surface-4 );
border-color: var( --color-surface-4 );
&:hover {
.sd-select__handle {
color: var( --color-base--subtle );
}
}
&:focus {
border-color: var( --color-surface-4 );
}
}
.sd-select__handle {
color: var( --color-base--subtle );
}
}
}
/* SelectMenu.less */
.sd-select-menu {
background-color: var( --color-surface-1 );
border-color: var( --border-color-base--darker );
border-radius: 0 0 var( --border-radius--small ) var( --border-radius--small );
// box-shadow: var( --box-shadow-dialog );
&__list-item {
color: var( --color-base--emphasized );
&--active {
color: var( --color-base--emphasized );
background-color: var( --background-color-quiet--hover );
}
&--selected {
background-color: var( --background-color-primary--hover );
}
&--active.sd-select-menu__list-item--selected {
color: var( --color-primary );
}
}
}
/* Tabs.less */
.sd-tabs {
&__header {
// Use border instead of box-shadow to align with Citizen and Codex
border-bottom: 1px solid var( --border-color-base );
box-shadow: none;
&--gradient {
&::after {
// TODO: Should really make this into a LESS variable or mixin since it is useful
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ) 85%, var( --color-surface-0 ) 100% );
}
}
}
&__tabs-list {
// Should show a scroll bar on pointer device so user can scroll the tabs
@media ( hover: hover ) {
scrollbar-width: thin;
&::-webkit-scrollbar {
display: block;
-webkit-appearance: initial;
}
}
&__item {
font-weight: var( --font-weight-medium );
color: var( --color-base--emphasized );
&--current {
color: var( --color-primary );
box-shadow: inset 0 -2px var( --color-primary );
}
&:hover {
color: var( --color-primary--hover );
box-shadow: inset 0 -2px var( --color-primary--hover );
}
&:active {
color: var( --color-primary--active );
box-shadow: inset 0 -2px var( --color-primary--active );
}
&--disabled {
color: var( --color-base--subtle );
&--current,
&:hover,
&:active {
color: var( --color-base--subtle );
}
}
}
&:focus {
.sd-tabs__tabs-list__item--current {
border-radius: var( --border-radius--small );
box-shadow: inset 0 0 0 2px var( --color-primary );
}
}
}
}
/* ImageResult.less */
// Sync with Citizen image styles
.sdms-image-result {
overflow: hidden; // needed for transition and rounded corners
// Keep original light background so that transparent images are more legible
// background-color: var( --color-surface-2 );
border-radius: var( --border-radius--small );
&:hover,
&:focus {
box-shadow: none; // disable default style
img {
transform: scale( 1.1 );
}
}
&:focus {
outline: solid 2px var( --color-primary );
outline-offset: 0;
}
img {
transition: var( --transition-hover );
transition-property: transform;
}
}
/* VideoResult.less */
.sdms-video-result {
overflow: hidden; // Hide transition overflow
color: var( --color-primary );
border-color: transparent;
border-radius: var( --border-radius--small );
&__title {
color: var( --color-base--emphasized );
transition: none;
}
&__body {
z-index: 1;
padding: var( --space-sm ) 0 0 0;
// HACK: Hide thumbnail overflow
background-color: var( --color-surface-0 );
}
&__meta {
margin-top: var( --space-xxs );
font-size: 0.875rem;
}
&:hover &__title {
color: var( --color-base--emphasized );
}
&:hover,
&:focus {
box-shadow: none;
.sdms-video-result__thumbnail {
transform: scale( 1.1 );
}
}
&:focus {
outline: solid 2px var( --color-primary );
outline-offset: 0;
}
&__thumbnail {
border-radius: var( --border-radius--small );
transition: var( --transition-hover );
transition-property: transform;
}
&__duration {
padding: var( --space-xxs ) var( --space-xs );
font-weight: var( --font-weight-medium );
color: var( --color-base );
background-color: var( --color-surface-2 );
border-radius: var( --border-radius--small );
}
&__mime {
color: var( --color-base--subtle );
}
}
/* AudioResult.less */
.sdms-audio-result {
padding: var( --space-md ) 0;
font-size: 0.875rem;
border-bottom: 0;
&__title + &__meta {
margin-top: var( --space-xxs );
}
&__meta {
font-size: 0.875rem;
}
p {
margin: 0;
}
&__duration {
padding: var( --space-xxs ) var( --space-xs );
font-weight: var( --font-weight-medium );
color: var( --color-base );
background-color: var( --color-surface-2 );
border-radius: var( --border-radius--small );
}
&__mime {
color: var( --color-base--subtle );
}
}
/* PageResult.less */
.sdms-page-result {
padding: var( --space-md ) 0;
font-size: 0.875rem;
border-bottom: 0;
p {
font-size: 0.875rem;
color: var( --color-base--subtle );
}
// Sync with duration styles
&__namespace {
padding: var( --space-xxs ) var( --space-xs );
font-size: 0.875rem;
font-weight: var( --font-weight-medium );
color: var( --color-base );
background-color: var( --color-surface-2 );
border-radius: var( --border-radius--small );
}
}
/* OtherResult.less */
.sdms-other-result {
&__meta {
color: var( --color-base--subtle );
}
&__extension {
font-weight: var( --font-weight-semibold );
}
}
/* SearchResults.less */
.sdms-search-results {
&__details {
&--expanded {
top: var( --space-md );
height: ~'calc( 100vh - var( --space-md ) * 2 )';
background-color: var( --color-surface-2 );
border-radius: var( --border-radius--large );
// Responsive handling
@media screen and ( max-width: @max-width-breakpoint-tablet ) {
position: fixed;
top: unset;
bottom: 0;
left: 0;
width: 100%;
max-height: 40vh;
padding-bottom: var( --header-size ); // So that header won't hide the bottom
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
}
&__details-dialog {
background-color: var( --color-surface-1 );
}
.sdms-search-result--highlighted {
&.sdms-image-result,
&.sdms-video-result {
border-color: var( --color-primary );
}
}
&__list-wrapper--collapsed {
// Responsive handling
@media screen and ( max-width: @max-width-breakpoint-tablet ) {
// Since the quickview card is a modal, we don't need the right margin anymore
margin-right: 0;
}
}
}
/* QuickView.less */
.sdms-quick-view {
font-size: 0.875rem;
&__body {
.sd-icon {
color: var( --color-base--subtle );
}
}
&__cta {
font-weight: var( --font-weight-medium );
color: var( --color-primary );
background-color: var( --color-surface-2 );
border-color: var( --border-color-base );
border-radius: var( --border-radius--small );
&:hover {
color: var( --color-primary--hover );
background-color: var( --color-surface-2--hover );
border-color: var( --color-primary--hover );
}
&:active {
color: var( --color-primary--active );
background-color: var( --color-surface-2--active );
border-color: var( --color-primary--active );
}
&:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
}
&__button {
background-color: var( --color-surface-1 );
.sd-icon {
color: var( --color-base );
}
&:hover,
&:focus {
.sd-icon {
color: var( --color-base--emphasized );
}
}
&:focus {
border-color: var( --color-primary );
}
}
}
/* Spinner.less */
.sdms-spinner {
& .sdms-spinner-bounce,
&::before,
&::after {
background-color: var( --color-base--subtle );
}
}
/* EmptyState.less */
.sdms-empty-state {
font-size: var( --font-size-x-large );
}
/* NoResults.less */
.sdms-no-results {
font-size: var( --font-size-x-large );
font-weight: var( --font-weight-semibold );
}
/* EndOfResults.less */
.sdms-end-of-results {
font-size: var( --font-size-medium );
font-weight: var( --font-weight-semibold );
color: var( --color-base--emphasized );
}
/* SearchFilters.less */
.sdms-search-filters {
// Should show a scroll bar on pointer device so user can scroll the tabs
@media screen and ( hover: hover ) {
scrollbar-width: thin;
&::-webkit-scrollbar {
display: block;
-webkit-appearance: initial;
}
}
.sd-select {
&__content {
color: var( --color-base--emphasized );
border-radius: var( --border-radius--small );
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
font-size: 0.875rem;
}
&:hover {
background-color: var( --background-color-quiet--hover );
border-color: transparent;
}
&:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
&:active {
background-color: var( --color-surface-1 );
border-color: var( --border-color-base--darker );
}
}
&.sdms-search-filter--selected {
.sd-select__content {
font-weight: var( --font-weight-semibold );
color: var( --color-primary );
.sd-select__handle {
color: var( --color-primary );
}
}
}
}
&__namespace {
border-radius: var( --border-radius--small );
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
font-size: 0.875rem;
}
&--selected {
font-weight: var( --font-weight-semibold );
color: var( --color-primary );
&:hover {
color: var( --color-primary );
}
}
&:hover {
background-color: var( --background-color-quiet--hover );
}
&:focus {
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
&:active {
background-color: var( --color-surface-1 );
border-color: var( --border-color-base--darker );
}
}
.sdms-search-results-count {
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
font-size: 0.875rem;
}
}
&__clear {
&--no-js {
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
font-size: 0.875rem;
}
}
}
}
.sdms-search-filters-wrapper--gradient {
&::after {
// TODO: Should really make this into a LESS variable or mixin since it is useful
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ) 85%, var( --color-surface-0 ) 100% );
}
}
/* DidYouMean.less */
.sdms-did-you-mean a {
font-weight: var( --font-weight-semibold );
}
/* UserNotice.less */
.sdms-user-notice__title {
font-weight: var( --font-weight-semibold );
}
/* SearchError.less */
.sdms-error {
font-size: var( --font-size-x-large );
font-weight: var( --font-weight-semibold );
}