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
  52                 > .mw-widgets-stashedFileWidget-fileType {
  53                         color: #72777d;
  54                         float: right;
  55                 }
  56         }
  57
  58         > .oo-ui-indicatorElement-indicator,
  59         > .oo-ui-iconElement-icon {
  60                 position: absolute;
  61                 top: 0;
  62                 height: 2.3em;
  63         }
  64
  65         > .oo-ui-indicatorElement-indicator {
  66                 right: 0;
  67                 width: 0.9375em;
  68                 margin-right: 0.775em;
  69         }
  70
  71         > .oo-ui-iconElement-icon {
  72                 width: 1.875em;
  73                 margin-left: 0.5em;
  74         }
  75
  76         &.oo-ui-widget-disabled {
  77                 .mw-widgets-stashedFileWidget-info {
  78                         background-color: #eaecf0;
  79                         color: #72777d;
  80                         border-color: #c8ccd1;
  81                         text-shadow: 0 1px 1px #fff;
  82
  83                         > .oo-ui-iconElement-icon,
  84                         > .oo-ui-indicatorElement-indicator {
  85                                 opacity: 0.15;
  86                         }
  87                 }
  88         }
  89 }
  90
  91 .mw-widgets-stashedFileWidget-thumbnail-container {
  92         cursor: default;
  93         height: 5.5em;
  94         text-align: left;
  95         padding: 0;
  96         background-color: #fff;
  97         border: 1px solid #c8ccd1;
  98         margin-bottom: 0.5em;
  99         vertical-align: middle;
 100         overflow: hidden;
 101         border-radius: 2px;
 102
 103         .mw-widgets-stashedFileWidget-thumbnail {
 104                 height: 5.5em;
 105                 width: 5.5em;
 106                 position: absolute;
 107                 background-size: cover;
 108                 background-position: center center;
 109
 110                 &.oo-ui-pendingElement-pending {
 111                         background-size: auto;
 112                 }
 113
 114                 > .mw-widgets-stashedFileWidget-noThumbnail-icon {
 115                         opacity: 0.4;
 116                         background-color: #c8ccd1;
 117                         height: 5.5em;
 118                         width: 5.5em;
 119                 }
 120         }
 121
 122         .mw-widgets-stashedFileWidget-info {
 123                 border: 0;
 124                 background: none;
 125                 display: block;
 126                 height: 100%;
 127                 width: auto;
 128                 margin-left: 5.5em;
 129
 130                 > .mw-widgets-stashedFileWidget-label {
 131                         position: relative;
 132
 133                         > .mw-widgets-stashedFileWidget-fileName,
 134                         > .mw-widgets-stashedFileWidget-fileType {
 135                                 display: block;
 136                                 float: none;
 137                         }
 138                 }
 139         }
 140 }
 141
 142 .mw-widgets-stashedFileWidget-empty {
 143         .mw-widgets-stashedFileWidget-thumbnail-container {
 144                 text-align: center;
 145
 146                 .mw-widgets-stashedFileWidget-thumbnail,
 147                 .mw-widgets-stashedFileWidget-info {
 148                         margin: 0;
 149                         display: none;
 150                 }
 151         }
 152
 153         .mw-widgets-stashedFileWidget-label {
 154                 color: #c8ccd1;
 155                 right: 0.5em;
 156         }
 157
 158         &.oo-ui-indicatorElement {
 159                 .mw-widgets-stashedFileWidget-label {
 160                         right: 2em;
 161                 }
 162         }
 163 }