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         -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 #ccc;
  47 }
  48
  49 .mw-widget-mediaResultWidget.oo-ui-optionWidget-highlighted,
  50 .mw-widget-mediaResultWidget.oo-ui-optionWidget-selected {
  51         box-shadow: 0 0 0.3em #a7dcff, 0 0 0 #fff;
  52 }
  53
  54 .mw-widget-mediaResultWidget-error .mw-widget-mediaResultWidget-thumbnail {
  55         /* @embed */
  56         background-image: url( broken-image.png );
  57         background-size: auto;
  58         background-position: center center;
  59         background-repeat: no-repeat;
  60 }
  61
  62 .mw-widget-mediaResultWidget .mw-widget-mediaResultWidget-nameLabel {
  63         position: absolute;
  64         bottom: 0;
  65         left: 0;
  66         right: 0;
  67         overflow: hidden;
  68         padding: 0.5em;
  69         color: #fff;
  70         text-shadow: 1px 1px #000;
  71         line-height: 1.125em;
  72         background-color: rgba( 0, 0, 0, 0.5 );
  73         text-overflow: ellipsis;
  74         text-align: left;
  75 }
  76
  77 .mw-widget-mediaResultWidget.oo-ui-optionWidget-highlighted .mw-widget-mediaResultWidget-nameLabel {
  78         background-color: rgba( 0, 0, 0, 0.75 );
  79 }
  80
  81 .mw-widget-mediaResultWidget.oo-ui-optionWidget-selected .mw-widget-mediaResultWidget-nameLabel {
  82         background-color: #000;
  83 }
  84
  85 .mw-widget-mediaSearchWidget-noresults {
  86         padding-top: 1em;
  87 }