/* * Citizen * * SkinStyles for Extension:MediaSearch * Module: mediasearch.styles * Version: REL1_39 (e0aa7bb) * * Date: 2022-12-09 */ @import '../../../resources/variables.less'; // Disable sticky header #citizen-page-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-emphasized ); } /* AutocompleteSearchInput.less */ .sd-input { &__icon { opacity: var( --opacity-icon-base ); } &__indicator { color: var( --color-base-subtle ); } &__input { color: var( --color-emphasized ); background-color: transparent; border-color: var( --border-color-interactive ); border-radius: var( --border-radius--small ); &::placeholder { color: var( --color-base-subtle ); } &:hover { background-color: var( --color-surface-0 ); border-color: var( --color-progressive--hover ); } &:focus { background-color: var( --color-surface-0 ); border-color: var( --color-progressive ); box-shadow: inset 0 0 0 1px var( --color-progressive ); } } &--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-emphasized ); border-radius: var( --border-radius--small ); &:hover { color: var( --color-emphasized ); background-color: var( --background-color-button-quiet--hover ); } &:focus { border-color: var( --color-progressive ); box-shadow: inset 0 0 0 1px var( --color-progressive ); } &--framed { background-color: var( --color-surface-2 ); border-color: var( --border-color-base ); &:hover { color: var( --color-subtle ); background-color: var( --color-surface-2--hover ); } // Add active state &:active { color: var( --color-emphasized ); background-color: var( --color-surface-2--active ); } } &--progressive { color: var( --color-progressive ); &:hover { color: var( --color-progressive--hover ); } // Add active state &:active { color: var( --color-progressive--active ); } &.sd-button--framed { color: var( --color-inverted-primary ); &:hover { border-color: var( --color-progressive--hover ); } // Add active state &:active { color: var( --color-progressive--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: var( --color-inverted-fixed ); &: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-progressive ); border-color: var( --color-progressive ); &:hover { background-color: var( --color-progressive--hover ); border-color: var( --color-progressive--hover ); } // Add active state &:active { background-color: var( --color-progressive--active ); border-color: var( --color-progressive--active ); } &:focus { border-color: var( --color-progressive ); box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary ); } &.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 var( --color-inverted-fixed ); } } } } &:disabled { color: var( --color-subtle ); &:hover, &:focus { background-color: transparent; } &.sd-button--framed { color: var( --color-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-interactive ); border-radius: var( --border-radius--small ); } &__input { &:focus + .sd-checkbox__icon { background-color: var( --color-surface-0 ); border-color: var( --color-progressive ); box-shadow: inset 0 0 0 1px var( --color-progressive ); } &:hover + .sd-checkbox__icon { background-color: var( --color-surface-0 ); border-color: var( --color-progressive--hover ); } &:active + .sd-checkbox__icon { background-color: var( --color-progressive--active ); border-color: var( --color-progressive--active ); box-shadow: none; } // Set up check icon. &:checked + .sd-checkbox__icon { background-color: var( --color-progressive ); border-color: var( --color-progressive ); } &:disabled { & + .sd-checkbox__icon { background-color: var( --color-surface-4 ); border-color: var( --color-surface-4 ); } & ~ .sd-checkbox__label-text { color: var( --color-subtle ); } } &:checked:enabled:focus + .sd-checkbox__icon { background-color: var( --color-progressive ); border-color: var( --color-progressive ); box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary ); } &:checked:enabled:hover + .sd-checkbox__icon { background-color: var( --color-progressive--hover ); border-color: var( --color-progressive--hover ); } &:checked:enabled:active + .sd-checkbox__icon { background-color: var( --color-progressive--active ); border-color: var( --color-progressive--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-backdrop-light ); } &__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-emphasized ); } } &__footer:not( :empty ) { border-top-color: var( --border-color-base ); } } /* Message.less */ .sd-message { font-weight: var( --font-weight-semibold ); color: var( --color-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-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-interactive ); } &__input { &:hover + .sd-radio__icon { background-color: var( --color-surface-0 ); border-color: var( --color-progressive--hover ); } &:active + .sd-radio__icon { background-color: var( --color-progressive--active ); border-color: var( --color-progressive--active ); } &:checked + .sd-radio__icon { background-color: var( --color-inverted-primary ); border-color: var( --color-progressive ); } &:disabled { & + .sd-radio__icon { background-color: var( --color-surface-4 ); border-color: var( --color-surface-4 ); } & ~ .sd-radio__label-text { color: var( --color-subtle ); } &:checked + .sd-radio__icon { background-color: var( --color-inverted-fixed ); } } &:checked:enabled { &:focus + .sd-radio__icon { &::before { border-color: var( --color-progressive--active ); } } &:hover + .sd-radio__icon { border-color: var( --color-progressive--hover ); } &:active + .sd-radio__icon { border-color: var( --color-progressive--active ); box-shadow: none; &::before { border-color: var( --color-progressive--active ); } } } } } /* Select.less */ .sd-select { &__handle { color: var( --color-base ); } &__content { font-family: var( --font-family-base ); // Browser overrides button font color: var( --color-emphasized ); // Show background when hovered background-color: transparent; border-color: var( --border-color-interactive ); &:hover { color: var( --color-emphasized ); background-color: var( --color-surface-1 ); border-color: var( --color-progressive--hover ); .sd-select__handle { color: var( --color-base ); } } &:focus { background-color: var( --color-surface-1 ); border-color: var( --color-progressive ); box-shadow: inset 0 0 0 1px var( --color-progressive ); } &:active { color: var( --color-emphasized ); border-color: var( --border-color-interactive ); } } &--open { .sd-select__content { background-color: var( --color-surface-1 ); } .sd-select__handle { color: var( --color-base ); } } &--disabled { .sd-select__content { color: var( --color-subtle ); background-color: var( --color-surface-4 ); border-color: var( --color-surface-4 ); &:hover { .sd-select__handle { color: var( --color-subtle ); } } &:focus { border-color: var( --color-surface-4 ); } } .sd-select__handle { color: var( --color-subtle ); } } } /* SelectMenu.less */ .sd-select-menu { background-color: var( --color-surface-1 ); border-color: var( --border-color-interactive ); border-radius: 0 0 var( --border-radius--small ) var( --border-radius--small ); // box-shadow: var( --box-shadow-dialog ); &__list-item { color: var( --color-emphasized ); &--active { color: var( --color-emphasized ); background-color: var( --background-color-button-quiet--hover ); } &--selected { background-color: var( --background-color-progressive-subtle ); } &--active.sd-select-menu__list-item--selected { color: var( --color-progressive ); } } } /* 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-emphasized ); &--current { color: var( --color-progressive ); box-shadow: inset 0 -2px var( --color-progressive ); } &:hover { color: var( --color-progressive--hover ); box-shadow: inset 0 -2px var( --color-progressive--hover ); } &:active { color: var( --color-progressive--active ); box-shadow: inset 0 -2px var( --color-progressive--active ); } &--disabled { color: var( --color-subtle ); &--current, &:hover, &:active { color: var( --color-subtle ); } } } &:focus { .sd-tabs__tabs-list__item--current { border-radius: var( --border-radius--small ); box-shadow: inset 0 0 0 2px var( --color-progressive ); } } } } /* 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-progressive ); outline-offset: 0; } img { transition: var( --transition-hover ); transition-property: transform; } } /* VideoResult.less */ .sdms-video-result { overflow: hidden; // Hide transition overflow color: var( --color-progressive ); border-color: transparent; border-radius: var( --border-radius--small ); &__title { color: var( --color-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: var( --font-size-small ); } &:hover &__title { color: var( --color-emphasized ); } &:hover, &:focus { box-shadow: none; .sdms-video-result__thumbnail { transform: scale( 1.1 ); } } &:focus { outline: solid 2px var( --color-progressive ); 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-subtle ); } } /* AudioResult.less */ .sdms-audio-result { padding: var( --space-md ) 0; font-size: var( --font-size-small ); border-bottom: 0; &__title + &__meta { margin-top: var( --space-xxs ); } &__meta { font-size: var( --font-size-small ); } 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-subtle ); } } /* PageResult.less */ .sdms-page-result { padding: var( --space-md ) 0; font-size: var( --font-size-small ); border-bottom: 0; p { font-size: var( --font-size-small ); color: var( --color-subtle ); } // Sync with duration styles &__namespace { padding: var( --space-xxs ) var( --space-xs ); font-size: var( --font-size-small ); 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-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-progressive ); } } &__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: var( --font-size-small ); &__body { .sd-icon { color: var( --color-subtle ); } } &__cta { font-weight: var( --font-weight-medium ); color: var( --color-progressive ); background-color: var( --color-surface-2 ); border-color: var( --border-color-base ); border-radius: var( --border-radius--small ); &:hover { color: var( --color-progressive--hover ); background-color: var( --color-surface-2--hover ); border-color: var( --color-progressive--hover ); } &:active { color: var( --color-progressive--active ); background-color: var( --color-surface-2--active ); border-color: var( --color-progressive--active ); } &:focus { border-color: var( --color-progressive ); box-shadow: inset 0 0 0 1px var( --color-progressive ); } } &__button { background-color: var( --color-surface-1 ); .sd-icon { color: var( --color-base ); } &:hover, &:focus { .sd-icon { color: var( --color-emphasized ); } } &:focus { border-color: var( --color-progressive ); } } } /* Spinner.less */ .sdms-spinner { & .sdms-spinner-bounce, &::before, &::after { background-color: var( --color-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-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-emphasized ); border-radius: var( --border-radius--small ); @media screen and ( min-width: @min-width-breakpoint-tablet ) { font-size: var( --font-size-small ); } &:hover { background-color: var( --background-color-button-quiet--hover ); border-color: transparent; } &:focus { border-color: var( --color-progressive ); box-shadow: inset 0 0 0 1px var( --color-progressive ); } &:active { background-color: var( --color-surface-1 ); border-color: var( --border-color-interactive ); } } &.sdms-search-filter--selected { .sd-select__content { font-weight: var( --font-weight-semibold ); color: var( --color-progressive ); .sd-select__handle { color: var( --color-progressive ); } } } } &__namespace { border-radius: var( --border-radius--small ); @media screen and ( min-width: @min-width-breakpoint-tablet ) { font-size: var( --font-size-small ); } &--selected { font-weight: var( --font-weight-semibold ); color: var( --color-progressive ); &:hover { color: var( --color-progressive ); } } &:hover { background-color: var( --background-color-button-quiet--hover ); } &:focus { border-color: var( --color-progressive ); box-shadow: inset 0 0 0 1px var( --color-progressive ); } &:active { background-color: var( --color-surface-1 ); border-color: var( --border-color-interactive ); } } .sdms-search-results-count { @media screen and ( min-width: @min-width-breakpoint-tablet ) { font-size: var( --font-size-small ); } } &__clear { &--no-js { @media screen and ( min-width: @min-width-breakpoint-tablet ) { font-size: var( --font-size-small ); } } } } .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 ); }