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

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