resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaResultWidget.less

   1 /*!
   2  * MediaWiki Widgets - MediaResultWidget styles.
   3  *
   4  * @copyright 2011-2024 VisualEditor Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7
   8 @import 'mediawiki.skin.variables.less';
   9
  10 .mw-widget-mediaResultWidget {
  11         display: inline-block;
  12         position: relative;
  13         padding: 0;
  14         margin: 2px;
  15         overflow: hidden;
  16         box-sizing: border-box;
  17         text-align: center;
  18
  19         &-error {
  20                 background-color: @background-color-disabled-subtle;
  21         }
  22
  23         &-thumbnail {
  24                 opacity: 0;
  25                 display: inline-block;
  26                 transition: opacity 400ms;
  27         }
  28
  29         &-done &-thumbnail,
  30         &-error &-thumbnail {
  31                 opacity: 1;
  32         }
  33
  34         &-crop {
  35                 background-size: cover;
  36                 background-position: center center;
  37         }
  38
  39         &-overlay {
  40                 position: absolute;
  41                 top: 0;
  42                 bottom: 0;
  43                 left: 0;
  44                 right: 0;
  45                 box-shadow: inset 0 0 0 1px #c8ccd1;
  46         }
  47
  48         &.oo-ui-optionWidget-highlighted,
  49         &.oo-ui-optionWidget-selected {
  50                 box-shadow: 0 0 2px #36c;
  51         }
  52
  53         &.oo-ui-optionWidget-highlighted &-overlay,
  54         &.oo-ui-optionWidget-selected &-overlay {
  55                 box-shadow: inset 0 0 0 1px #36c;
  56         }
  57
  58         &-error &-thumbnail {
  59                 background-image: url( broken-image.png );
  60                 background-size: auto;
  61                 background-position: center center;
  62                 background-repeat: no-repeat;
  63         }
  64
  65         .mw-widget-mediaResultWidget-nameLabel {
  66                 position: absolute;
  67                 bottom: 0;
  68                 left: 0;
  69                 right: 0;
  70                 overflow: hidden;
  71                 padding: 0.5em;
  72                 color: #fff;
  73                 text-shadow: 1px 1px #000;
  74                 line-height: 1.125em;
  75                 background-color: rgba( 0, 0, 0, 0.5 );
  76                 text-overflow: ellipsis;
  77                 text-align: left;
  78         }
  79
  80         &.oo-ui-optionWidget-highlighted &-nameLabel {
  81                 background-color: rgba( 0, 0, 0, 0.75 );
  82         }
  83
  84         &.oo-ui-optionWidget-selected &-nameLabel {
  85                 background-color: #000;
  86         }
  87 }
  88
  89 .mw-widget-mediaSearchWidget-noresults {
  90         padding-top: 1em;
  91 }