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: rgb(var(--wcfButtonPrimaryBackground-rgb) / 80%);
  33                                 color: var(--wcfButtonPrimaryText);
  34
  35                                 a {
  36                                         color: var(--wcfButtonPrimaryText);
  37                                 }
  38
  39                                 fa-icon {
  40                                         color: var(--wcfButtonPrimaryText);
  41                                         text-shadow: none;
  42                                 }
  43                         }
  44                 }
  45
  46                 &.jsSelected {
  47                         > .mediaInformation,
  48                         > .buttonGroupNavigation {
  49                                 background-color: rgb(0 128 0 / 80%);
  50                                 color: white;
  51
  52                                 a {
  53                                         color: white;
  54                                 }
  55
  56                                 fa-icon {
  57                                         color: white;
  58                                         text-shadow: none;
  59                                 }
  60                         }
  61                 }
  62
  63                 &.uploadFailed {
  64                         cursor: pointer;
  65
  66                         > .mediaInformation {
  67                                 background-color: var(--wcfStatusErrorBackground);
  68                                 color: var(--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                         @include screen-lg {
 108                                 fa-icon {
 109                                         color: #fff;
 110                                         @include textShadow(#000);
 111                                 }
 112                         }
 113                 }
 114
 115                 @include screen-md-down {
 116                         .buttonGroupNavigation {
 117                                 &.open {
 118                                         left: 0;
 119
 120                                         // dropdown is contained within this element, required to have it stand
 121                                         // above any succeeding siblings
 122                                         z-index: 10;
 123
 124                                         > .buttonList {
 125                                                 display: block;
 126                                                 visibility: visible;
 127                                         }
 128                                 }
 129
 130                                 > .dropdownLabel {
 131                                         left: calc(100% - 24px);
 132                                         position: relative;
 133
 134                                         fa-icon {
 135                                                 color: #fff;
 136                                                 @include textShadow(#000);
 137                                         }
 138                                 }
 139
 140                                 > .buttonList {
 141                                         @include dropdownMenu;
 142
 143                                         position: static !important;
 144                                         top: 0;
 145
 146                                         > li {
 147                                                 .invisible {
 148                                                         display: inline;
 149                                                         padding-left: 5px;
 150                                                 }
 151                                         }
 152                                 }
 153                         }
 154                 }
 155
 156                 @include screen-lg {
 157                         .buttonGroupNavigation {
 158                                 transition: opacity 0.12s;
 159
 160                                 > .dropdownLabel {
 161                                         display: none;
 162                                 }
 163                         }
 164                 }
 165
 166                 @include screen-md-up {
 167                         > .buttonGroupNavigation {
 168                                 height: 0;
 169                         }
 170
 171                         &:hover {
 172                                 > .buttonGroupNavigation {
 173                                         height: auto;
 174                                         padding: 10px;
 175                                 }
 176                         }
 177                 }
 178
 179                 @include screen-md-down {
 180                         > .buttonGroupNavigation .mediaCheckbox {
 181                                 display: none !important;
 182                         }
 183                 }
 184         }
 185 }
 186
 187 [id^="mediaEditor"] {
 188         .mediaEditorButtons {
 189                 margin-bottom: 20px;
 190         }
 191
 192         .mediaThumbnail {
 193                 text-align: center;
 194                 margin-bottom: 20px;
 195
 196                 + .box48 > dl {
 197                         font-size: var(--wcfFontSizeSmall);
 198                 }
 199         }
 200 }
 201
 202 .mediaManagerCategoryList {
 203         margin-bottom: 5px;
 204 }
 205
 206 .button.jsMediaSelectButton + .button {
 207         margin-left: 5px;
 208 }