wcfsetup/install/files/style/ui/media.scss

   1 .innerInfo + .mediaManagerMediaUploadButton {
   2         margin-top: 5px;
   3 }
   4
   5 .mediaManagerMediaUploadButton > .button {
   6         margin: 0;
   7         text-align: center;
   8         width: 100%;
   9
  10         > input {
  11                 width: 100%;
  12         }
  13 }
  14
  15 .mediaManagerMediaList {
  16         font-size: 0;
  17         margin-top: 5px;
  18
  19         @include clearfix;
  20
  21         > li {
  22                 float: left;
  23                 position: relative;
  24                 border: 1px solid #eee;
  25                 overflow: hidden;
  26                 font-size: 1rem;
  27                 margin: 0 10px 10px 0;
  28
  29                 &.jsMarked {
  30                         > .mediaInformation,
  31                         > .buttonGroupNavigation {
  32                                 background-color: transparentize($wcfButtonPrimaryBackground, 0.2);
  33                                 color: $wcfButtonPrimaryText;
  34
  35                                 a {
  36                                         color: $wcfButtonPrimaryText;
  37                                 }
  38
  39                                 .icon {
  40                                         color: $wcfButtonPrimaryText;
  41                                         text-shadow: none;
  42                                 }
  43                         }
  44                 }
  45
  46                 &.jsSelected {
  47                         > .mediaInformation,
  48                         > .buttonGroupNavigation {
  49                                 background-color: transparentize(green, 0.2);
  50                                 color: white;
  51
  52                                 a {
  53                                         color: white;
  54                                 }
  55
  56                                 .icon {
  57                                         color: white;
  58                                         text-shadow: none;
  59                                 }
  60                         }
  61                 }
  62
  63                 &.uploadFailed {
  64                         cursor: pointer;
  65
  66                         > .mediaInformation {
  67                                 background-color: $wcfStatusErrorBackground;
  68                                 color: $wcfStatusErrorText;
  69
  70                                 .mediaTitle {
  71                                         max-height: 144px;
  72                                         white-space: normal;
  73                                 }
  74                         }
  75                 }
  76
  77                 > .mediaThumbnail {
  78                         height: 144px;
  79                         width: 144px;
  80                 }
  81
  82                 > .mediaInformation {
  83                         position: absolute;
  84                         bottom: 0;
  85                         background: rgba(0, 0, 0, 0.6);
  86                         color: #fff;
  87                         width: 100%;
  88                         padding: 5px 10px;
  89                         box-sizing: border-box;
  90
  91                         @include wcfFontSmall;
  92
  93                         .mediaTitle {
  94                                 overflow: hidden;
  95                                 text-overflow: ellipsis;
  96                                 white-space: nowrap;
  97                         }
  98                 }
  99
 100                 > .buttonGroupNavigation {
 101                         position: absolute;
 102                         top: 0;
 103                         right: 0;
 104                         overflow: hidden;
 105                         background: rgba(0, 0, 0, 0.6);
 106
 107                         .icon {
 108                                 color: #fff;
 109                                 @include textShadow(#000);
 110                         }
 111                 }
 112
 113                 @include screen-md-down {
 114                         .buttonGroupNavigation {
 115                                 &.open {
 116                                         left: 0;
 117
 118                                         // dropdown is contained within this element, required to have it stand
 119                                         // above any succeeding siblings
 120                                         z-index: 10;
 121
 122                                         > .buttonList {
 123                                                 display: block;
 124                                                 visibility: visible;
 125                                         }
 126                                 }
 127
 128                                 > .dropdownLabel {
 129                                         left: calc(100% - 24px);
 130                                         position: relative;
 131                                 }
 132
 133                                 > .buttonList {
 134                                         @include dropdownMenu;
 135
 136                                         position: static !important;
 137                                         top: 0;
 138
 139                                         > li {
 140                                                 .invisible {
 141                                                         display: inline;
 142                                                         padding-left: 5px;
 143                                                 }
 144                                         }
 145                                 }
 146                         }
 147                 }
 148
 149                 @include screen-lg {
 150                         .buttonGroupNavigation {
 151                                 transition: opacity 0.12s;
 152
 153                                 > .dropdownLabel {
 154                                         display: none;
 155                                 }
 156                         }
 157                 }
 158
 159                 @include screen-md-up {
 160                         > .buttonGroupNavigation {
 161                                 height: 0;
 162                         }
 163
 164                         &:hover {
 165                                 > .buttonGroupNavigation {
 166                                         height: auto;
 167                                         padding: 10px;
 168                                 }
 169                         }
 170                 }
 171
 172                 @include screen-md-down {
 173                         > .buttonGroupNavigation .mediaCheckbox {
 174                                 display: none !important;
 175                         }
 176                 }
 177         }
 178 }
 179
 180 [id^="mediaEditor"] {
 181         .mediaEditorButtons {
 182                 margin-bottom: 20px;
 183         }
 184
 185         .mediaThumbnail {
 186                 text-align: center;
 187                 margin-bottom: 20px;
 188
 189                 + .box48 > dl {
 190                         font-size: $wcfFontSizeSmall;
 191                 }
 192         }
 193 }
 194
 195 .mediaManagerCategoryList {
 196         margin-bottom: 5px;
 197 }
 198
 199 .button.jsMediaSelectButton + .button {
 200         margin-left: 5px;
 201 }