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

   1 /* ImageViewer for WCF */
   2 $wcfImageViewerBorderColor: rgba(51, 51, 51, 1);
   3 $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
   4
   5 .wcfImageViewer {
   6         background-color: rgba(0, 0, 0, 1);
   7         bottom: 0;
   8         display: none;
   9         left: 0;
  10         opacity: 0;
  11         position: fixed;
  12         right: 0;
  13         top: 0;
  14         z-index: 399;
  15
  16         .icon {
  17                 color: rgb(158, 158, 158);
  18         }
  19
  20         &.open {
  21                 display: block;
  22                 opacity: 1;
  23         }
  24
  25         &.maximized:not(.wcfImageViewerMobile) {
  26                 > header {
  27                         top: -100px;
  28                 }
  29
  30                 > div {
  31                         bottom: 0;
  32                         border-color: fade($wcfImageViewerBorderColor, 0%);
  33                         top: 0;
  34                 }
  35
  36                 > footer {
  37                         bottom: -100px;
  38                 }
  39         }
  40
  41         &.wcfImageViewerMobile {
  42                 > header,
  43                 > footer {
  44                         background-color: rgba(0, 0, 0, 1);
  45                         opacity: 1;
  46                         position: absolute;
  47                         visibility: visible;
  48                         z-index: 402;
  49                 }
  50
  51                 &.maximized {
  52                         > header,
  53                         > footer {
  54                                 opacity: 0;
  55                                 visibility: hidden;
  56
  57                                 transition: visibility 0s linear 0.24s, opacity 0.24s linear;
  58                         }
  59
  60                         > div > ul > li.pointer {
  61                                 opacity: 0;
  62                         }
  63                 }
  64
  65                 > div {
  66                         bottom: 0;
  67                         top: 0;
  68
  69                         > ul {
  70                                 > li {
  71                                         background-color: rgba(224, 224, 224, 1);
  72                                         border-radius: 30px;
  73                                         margin-top: -24px;
  74                                         opacity: 0;
  75                                         position: absolute;
  76                                         top: 50%;
  77                                         transition: opacity 0.24s;
  78
  79                                         &.pointer {
  80                                                 opacity: 1;
  81                                         }
  82
  83                                         &.wcfImageViewerSlideshowButtonFull,
  84                                         &.wcfImageViewerSlideshowButtonNext,
  85                                         &.wcfImageViewerSlideshowButtonPrevious {
  86                                                 /* places buttons above images at all times */
  87                                                 z-index: 30;
  88                                         }
  89
  90                                         &.wcfImageViewerSlideshowButtonPrevious {
  91                                                 left: 10px;
  92
  93                                                 > span {
  94                                                         left: -3px;
  95                                                         position: relative;
  96                                                         top: 2px;
  97                                                 }
  98                                         }
  99
 100                                         &.wcfImageViewerSlideshowButtonNext {
 101                                                 right: 10px;
 102
 103                                                 > span {
 104                                                         position: relative;
 105                                                         right: -1px;
 106                                                         top: 2px;
 107                                                 }
 108                                         }
 109
 110                                         &.wcfImageViewerSlideshowButtonFull {
 111                                                 bottom: 80px;
 112                                                 left: 50%;
 113                                                 top: auto;
 114                                                 transform: translateX(-50%);
 115
 116                                                 > span {
 117                                                         font-size: 32px;
 118                                                         left: 2px;
 119                                                         position: relative;
 120                                                         top: 3px;
 121                                                 }
 122                                         }
 123
 124                                         &.wcfImageViewerSlideshowButtonToggle,
 125                                         &.wcfImageViewerSlideshowButtonEnlarge {
 126                                                 display: none;
 127                                         }
 128                                 }
 129                         }
 130                 }
 131
 132                 > footer {
 133                         > .wcfImageViewerButtonPrevious,
 134                         > .wcfImageViewerButtonNext {
 135                                 display: none;
 136                         }
 137
 138                         > div {
 139                                 margin: 0;
 140                         }
 141                 }
 142         }
 143
 144         > header,
 145         > div,
 146         > footer {
 147                 box-sizing: border-box;
 148                 -moz-box-sizing: border-box;
 149                 left: 0;
 150                 position: fixed;
 151                 right: 0;
 152                 z-index: 400;
 153         }
 154
 155         > header {
 156                 height: 100px;
 157                 overflow: hidden;
 158                 padding: 1rem;
 159                 top: 0;
 160
 161                 > div {
 162                         > a > img {
 163                                 height: 64px;
 164                                 width: 64px;
 165                         }
 166                 }
 167
 168                 h1,
 169                 h2,
 170                 h3 {
 171                         color: $wcfImageViewerFontColor;
 172
 173                         > a {
 174                                 color: $wcfImageViewerFontColor;
 175                         }
 176                 }
 177
 178                 h1 {
 179                         font-size: 1.75rem;
 180                 }
 181
 182                 h2 {
 183                         font-size: 1.25rem;
 184                 }
 185
 186                 h3 {
 187                         color: $wcfImageViewerFontColor;
 188                         font-size: 0.85rem;
 189                         margin-top: 0.25rem;
 190                 }
 191
 192                 > .wcfImageViewerButtonClose {
 193                         position: absolute;
 194                         right: 26px;
 195                         top: 26px;
 196                 }
 197         }
 198
 199         > div {
 200                 background-color: rgba(0, 0, 0, 1);
 201                 border-bottom: 1px solid $wcfImageViewerBorderColor;
 202                 border-top: 1px solid $wcfImageViewerBorderColor;
 203                 bottom: 100px;
 204                 top: 100px;
 205                 transition-property: top, bottom, border-color;
 206                 transition-timing-function: linear;
 207                 transition-duration: 0.24s;
 208                 z-index: 401;
 209
 210                 &.loading:before {
 211                         @extend .icon48;
 212                         @extend .fa-spinner;
 213
 214                         content: "" !important;
 215                         display: block;
 216                         left: calc(50% - 34px);
 217                         position: absolute;
 218                         top: calc(50% - 34px);
 219                 }
 220
 221                 > img {
 222                         opacity: 0;
 223                         position: absolute;
 224                         top: 50%;
 225                         transition: opacity 0.24s linear;
 226                         z-index: 10;
 227
 228                         &.animateTransformation {
 229                                 transition: left 0.24s, margin-top 0.24s, height 0.24s, width 0.24s, opacity 0.24s;
 230                         }
 231
 232                         &.active {
 233                                 opacity: 1;
 234                                 z-index: 20;
 235                         }
 236                 }
 237         }
 238
 239         &:not(.wcfImageViewerMobile) {
 240                 .icon:hover {
 241                         color: rgb(255, 255, 255);
 242                 }
 243
 244                 > header {
 245                         transition: top 0.24s linear;
 246                 }
 247
 248                 > footer {
 249                         transition: bottom 0.24s linear;
 250                 }
 251
 252                 > div {
 253                         cursor: pointer;
 254
 255                         > img,
 256                         > ul {
 257                                 cursor: default;
 258                         }
 259
 260                         > ul {
 261                                 background-color: rgba(0, 0, 0, 0.9);
 262                                 border: 1px solid $wcfImageViewerBorderColor;
 263                                 border-bottom-width: 0;
 264                                 border-radius: 2px 2px 0 0;
 265                                 display: flex;
 266                                 bottom: 0;
 267                                 left: 50%;
 268                                 position: absolute;
 269                                 transform: translateX(-50%);
 270                                 z-index: 30;
 271
 272                                 > li {
 273                                         flex: 0 0 auto;
 274
 275                                         &:not(.pointer) > .icon {
 276                                                 color: rgb(66, 66, 66) !important;
 277                                         }
 278
 279                                         &.pointer > span.icon {
 280                                                 cursor: pointer;
 281                                         }
 282
 283                                         &.wcfImageViewerSlideshowButtonToggle > span,
 284                                         &.wcfImageViewerSlideshowButtonEnlarge > span,
 285                                         &.wcfImageViewerSlideshowButtonFull > span {
 286                                                 font-size: 28px;
 287                                                 /*
 288                                                 &:before {
 289                                                         left: 2px;
 290                                                         position: relative;
 291                                                         top: 9px;
 292                                                 }
 293                                                 */
 294                                         }
 295
 296                                         &.wcfImageViewerSlideshowButtonEnlarge,
 297                                         &.wcfImageViewerSlideshowButtonFull {
 298                                                 border-left: 1px solid $wcfImageViewerBorderColor;
 299                                                 box-sizing: border-box;
 300                                         }
 301
 302                                         > span {
 303                                                 vertical-align: middle;
 304                                         }
 305                                 }
 306                         }
 307                 }
 308         }
 309
 310         > footer {
 311                 bottom: 0;
 312                 height: 100px;
 313                 padding: 10px;
 314
 315                 &:hover > div > ul > li > img {
 316                         filter: none;
 317                         -webkit-filter: none;
 318                 }
 319
 320                 > span {
 321                         bottom: 0;
 322                         font-size: 48px;
 323                         padding-top: 26px;
 324                         opacity: 0;
 325                         position: absolute;
 326                         top: 0;
 327                         transition: opacity 0.24s;
 328                         width: 30px;
 329                         z-index: 2;
 330
 331                         &.pointer {
 332                                 opacity: 0.6;
 333
 334                                 &:hover {
 335                                         opacity: 1;
 336                                 }
 337                         }
 338
 339                         &.wcfImageViewerButtonPrevious {
 340                                 left: 5px;
 341                         }
 342
 343                         &.wcfImageViewerButtonNext {
 344                                 right: 5px;
 345                         }
 346                 }
 347
 348                 > div {
 349                         height: 80px;
 350                         margin: 0 35px;
 351                         overflow: hidden;
 352                         white-space: nowrap;
 353
 354                         > ul {
 355                                 display: flex;
 356                                 font-size: 0;
 357                                 height: 80px;
 358                                 z-index: 1;
 359
 360                                 transition: margin-left cubic-bezier(0.5, 1.595, 0.56, 0.98) 0.24s;
 361
 362                                 > li {
 363                                         align-items: center;
 364                                         display: flex;
 365                                         flex: 0 0 80px;
 366                                         opacity: 0.6;
 367                                         position: relative;
 368                                         transition: opacity 0.24s;
 369
 370                                         &.active,
 371                                         &:hover {
 372                                                 opacity: 1;
 373                                         }
 374
 375                                         &:not(:last-child) {
 376                                                 margin-right: 10px;
 377                                         }
 378
 379                                         &.active > img {
 380                                                 filter: none;
 381                                                 -webkit-filter: none;
 382                                         }
 383
 384                                         &.loading {
 385                                                 &:before {
 386                                                         @extend .icon48;
 387                                                         @extend .fa-spinner;
 388                                                 }
 389
 390                                                 > img {
 391                                                         opacity: 0;
 392                                                 }
 393                                         }
 394
 395                                         > img {
 396                                                 max-height: 80px;
 397                                                 max-width: 80px;
 398                                         }
 399                                 }
 400                         }
 401                 }
 402         }
 403 }
 404
 405 @media only screen and (max-width: 800px) {
 406         .wcfImageViewer {
 407                 > header {
 408                         height: 80px;
 409
 410                         > .wcfImageViewerButtonClose {
 411                                 right: 16px;
 412                                 top: 16px;
 413                         }
 414                 }
 415
 416                 > footer {
 417                         height: 80px;
 418
 419                         > div {
 420                                 height: 60px;
 421
 422                                 > ul {
 423                                         height: 60px;
 424
 425                                         > li {
 426                                                 height: 60px;
 427                                         }
 428                                 }
 429                         }
 430                 }
 431         }
 432 }