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

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