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

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