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: #f3f3f3;
  20 }
  21
  22 .mw-widget-mediaResultWidget-thumbnail {
  23         opacity: 0;
  24         display: inline-block;
  25         /* stylelint-disable no-unsupported-browser-features */
  26         -webkit-transition: opacity 400ms;
  27         -moz-transition: opacity 400ms;
  28         transition: opacity 400ms;
  29         /* stylelint-enable no-unsupported-browser-features */
  30 }
  31
  32 .mw-widget-mediaResultWidget-done .mw-widget-mediaResultWidget-thumbnail,
  33 .mw-widget-mediaResultWidget-error .mw-widget-mediaResultWidget-thumbnail {
  34         opacity: 1;
  35 }
  36
  37 .mw-widget-mediaResultWidget-crop {
  38         background-size: cover; /* stylelint-disable-line no-unsupported-browser-features */
  39         background-position: center center;
  40 }
  41
  42 .mw-widget-mediaResultWidget-overlay {
  43         position: absolute;
  44         top: 0;
  45         bottom: 0;
  46         left: 0;
  47         right: 0;
  48         box-shadow: inset 0 0 0 1px #ccc;
  49 }
  50
  51 .mw-widget-mediaResultWidget.oo-ui-optionWidget-highlighted,
  52 .mw-widget-mediaResultWidget.oo-ui-optionWidget-selected {
  53         box-shadow: 0 0 0.3em #a7dcff, 0 0 0 #fff;
  54 }
  55
  56 .mw-widget-mediaResultWidget-error .mw-widget-mediaResultWidget-thumbnail {
  57         /* @embed */
  58         background-image: url( broken-image.png );
  59         background-size: auto; /* stylelint-disable-line no-unsupported-browser-features */
  60         background-position: center center;
  61         background-repeat: no-repeat;
  62 }
  63
  64 .mw-widget-mediaResultWidget .mw-widget-mediaResultWidget-nameLabel {
  65         position: absolute;
  66         bottom: 0;
  67         left: 0;
  68         right: 0;
  69         overflow: hidden;
  70         padding: 0.5em;
  71         color: #fff;
  72         text-shadow: 1px 1px #000; /* stylelint-disable-line no-unsupported-browser-features */
  73         line-height: 1.125em;
  74         background-color: rgba( 0, 0, 0, 0.5 );
  75         text-overflow: ellipsis;
  76         text-align: left;
  77 }
  78
  79 .mw-widget-mediaResultWidget.oo-ui-optionWidget-highlighted .mw-widget-mediaResultWidget-nameLabel {
  80         background-color: rgba( 0, 0, 0, 0.75 );
  81 }
  82
  83 .mw-widget-mediaResultWidget.oo-ui-optionWidget-selected .mw-widget-mediaResultWidget-nameLabel {
  84         background-color: #000;
  85 }
  86
  87 .mw-widget-mediaSearchWidget-noresults {
  88         padding-top: 1em;
  89 }