resources/src/mediawiki.widgets/mw.widgets.StashedFileWidget.less

   1 @import 'mediawiki.mixins';
   2
   3 .mw-widgets-stashedFileWidget {
   4         display: inline-block;
   5         vertical-align: middle;
   6         width: 100%;
   7         max-width: 50em;
   8         margin-right: 0.5em;
   9
  10         &:last-child {
  11                 margin-right: 0;
  12         }
  13
  14         &.oo-ui-iconElement .mw-widgets-stashedFileWidget-info .mw-widgets-stashedFileWidget-label {
  15                 left: 2.875em;
  16         }
  17
  18         &.oo-ui-indicatorElement .mw-widgets-stashedFileWidget-info .mw-widgets-stashedFileWidget-label {
  19                 right: 4.4625em;
  20         }
  21 }
  22
  23 .mw-widgets-stashedFileWidget-info {
  24         height: 2.4em;
  25         background-color: #fff;
  26         border: 1px solid #c8ccd1;
  27         border-radius: 2px;
  28         width: 100%;
  29         display: table-cell;
  30         vertical-align: middle;
  31         position: relative;
  32         overflow: hidden;
  33         .box-sizing( border-box );
  34
  35         > .mw-widgets-stashedFileWidget-label {
  36                 line-height: 2.3em;
  37                 margin: 0;
  38                 overflow: hidden;
  39                 white-space: nowrap;
  40                 .box-sizing( border-box );
  41                 text-overflow: ellipsis;
  42                 left: 0.5em;
  43                 right: 2.375em;
  44                 position: absolute;
  45                 top: 0;
  46                 bottom: 0;
  47
  48                 > .mw-widgets-stashedFileWidget-fileName {
  49                         float: left;
  50                 }
  51                 > .mw-widgets-stashedFileWidget-fileType {
  52                         color: #72777d;
  53                         float: right;
  54                 }
  55         }
  56
  57         > .oo-ui-indicatorElement-indicator,
  58         > .oo-ui-iconElement-icon {
  59                 position: absolute;
  60                 top: 0;
  61                 height: 2.3em;
  62         }
  63
  64         > .oo-ui-indicatorElement-indicator {
  65                 right: 0;
  66                 width: 0.9375em;
  67                 margin-right: 0.775em;
  68         }
  69
  70         > .oo-ui-iconElement-icon {
  71                 width: 1.875em;
  72                 margin-left: 0.5em;
  73         }
  74
  75         &.oo-ui-widget-disabled {
  76                 .mw-widgets-stashedFileWidget-info {
  77                         background-color: #eaecf0;
  78                         color: #72777d;
  79                         border-color: #c8ccd1;
  80                         text-shadow: 0 1px 1px #fff;
  81
  82                         > .oo-ui-iconElement-icon,
  83                         > .oo-ui-indicatorElement-indicator {
  84                                 opacity: 0.15;
  85                         }
  86                 }
  87         }
  88 }
  89
  90 .mw-widgets-stashedFileWidget-thumbnail-container {
  91         cursor: default;
  92         height: 5.5em;
  93         text-align: left;
  94         padding: 0;
  95         background-color: #fff;
  96         border: 1px solid #c8ccd1;
  97         margin-bottom: 0.5em;
  98         vertical-align: middle;
  99         overflow: hidden;
 100         border-radius: 2px;
 101
 102         .mw-widgets-stashedFileWidget-thumbnail {
 103                 height: 5.5em;
 104                 width: 5.5em;
 105                 position: absolute;
 106                 background-size: cover;
 107                 background-position: center center;
 108
 109                 &.oo-ui-pendingElement-pending {
 110                         background-size: auto;
 111                 }
 112
 113                 > .mw-widgets-stashedFileWidget-noThumbnail-icon {
 114                         opacity: 0.4;
 115                         background-color: #c8ccd1;
 116                         height: 5.5em;
 117                         width: 5.5em;
 118                 }
 119         }
 120
 121         .mw-widgets-stashedFileWidget-info {
 122                 border: 0;
 123                 background: none;
 124                 display: block;
 125                 height: 100%;
 126                 width: auto;
 127                 margin-left: 5.5em;
 128
 129                 > .mw-widgets-stashedFileWidget-label {
 130                         position: relative;
 131
 132                         > .mw-widgets-stashedFileWidget-fileName,
 133                         > .mw-widgets-stashedFileWidget-fileType {
 134                                 display: block;
 135                                 float: none;
 136                         }
 137                 }
 138         }
 139 }
 140
 141 .mw-widgets-stashedFileWidget-empty {
 142         .mw-widgets-stashedFileWidget-thumbnail-container {
 143                 text-align: center;
 144
 145                 .mw-widgets-stashedFileWidget-thumbnail,
 146                 .mw-widgets-stashedFileWidget-info {
 147                         margin: 0;
 148                         display: none;
 149                 }
 150         }
 151
 152         .mw-widgets-stashedFileWidget-label {
 153                 color: #c8ccd1;
 154                 right: 0.5em;
 155         }
 156
 157         &.oo-ui-indicatorElement {
 158                 .mw-widgets-stashedFileWidget-label {
 159                         right: 2em;
 160                 }
 161         }
 162 }