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