BookStack Code Mirror - bookstack/blob - resources/assets/sass/_components.scss

   1 .overlay {
   2   background-color: rgba(0, 0, 0, 0.333);
   3   position: fixed;
   4   z-index: 95536;
   5   width: 100%;
   6   height: 100%;
   7   min-width: 100%;
   8   min-height: 100%;
   9   top: 0;
  10   left: 0;
  11   right: 0;
  12   bottom: 0;
  13   display: flex;
  14   align-items: center;
  15   justify-content: center;
  16   display: none;
  17 }
  18
  19 .popup-body-wrap {
  20   display: flex;
  21 }
  22
  23 .popup-body {
  24   background-color: #FFF;
  25   max-height: 90%;
  26   width: 1200px;
  27   height: auto;
  28   margin: 2% 5%;
  29   border-radius: 4px;
  30   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
  31   overflow: hidden;
  32   z-index: 999;
  33   display: flex;
  34   flex-direction: column;
  35   &.small {
  36     margin: 2% auto;
  37     width: 800px;
  38     max-width: 90%;
  39   }
  40   &:before {
  41     display: flex;
  42     align-self: flex-start;
  43   }
  44 }
  45
  46 //body.ie .popup-body {
  47 //  min-height: 100%;
  48 //}
  49
  50 .corner-button {
  51   position: absolute;
  52   top: 0;
  53   right: 0;
  54   margin: 0;
  55   height: 40px;
  56   border-radius: 0;
  57   box-shadow: none;
  58 }
  59
  60 .popup-header, .popup-footer {
  61   display: block !important;
  62   position: relative;
  63   height: 40px;
  64   flex: none !important;
  65   .popup-title {
  66     color: #FFF;
  67     padding: 8px $-m;
  68   }
  69 }
  70 body.flexbox-support #entity-selector-wrap .popup-body .form-group {
  71   height: 444px;
  72   min-height: 444px;
  73 }
  74 #entity-selector-wrap .popup-body .form-group {
  75   margin: 0;
  76 }
  77 //body.ie #entity-selector-wrap .popup-body .form-group {
  78 //  min-height: 60vh;
  79 //}
  80
  81 .image-manager-body {
  82   min-height: 70vh;
  83 }
  84
  85 #image-manager .dropzone-container {
  86   position: relative;
  87   border: 3px dashed #DDD;
  88 }
  89
  90 .image-manager-list .image {
  91   display: block;
  92   position: relative;
  93   border-radius: 0;
  94   float: left;
  95   margin: 0;
  96   cursor: pointer;
  97   width: (100%/6);
  98   height: auto;
  99   border: 1px solid #DDD;
 100   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
 101   transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
 102   overflow: hidden;
 103   &.selected {
 104     transform: scale3d(0.92, 0.92, 0.92);
 105     border: 1px solid #444;
 106     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 107   }
 108   img {
 109     width: 100%;
 110     max-width: 100%;
 111     display: block;
 112   }
 113   .image-meta {
 114     position: absolute;
 115     width: 100%;
 116     bottom: 0;
 117     left: 0;
 118     color: #EEE;
 119     background-color: rgba(0, 0, 0, 0.4);
 120     font-size: 10px;
 121     padding: 3px 4px;
 122     span {
 123       display: block;
 124     }
 125   }
 126   @include smaller-than($xl) {
 127     width: (100%/4);
 128   }
 129   @include smaller-than($m) {
 130     .image-meta {
 131       display: none;
 132     }
 133   }
 134 }
 135
 136 #image-manager .load-more {
 137   display: block;
 138   text-align: center;
 139   background-color: #EEE;
 140   padding: $-s $-m;
 141   color: #AAA;
 142   clear: both;
 143   font-size: 20px;
 144   cursor: pointer;
 145   font-style: italic;
 146 }
 147
 148 .image-manager-sidebar {
 149   width: 300px;
 150   margin-left: 1px;
 151   padding: $-m $-l;
 152   overflow-y: auto;
 153   border-left: 1px solid #DDD;
 154   .dropzone-container {
 155     margin-top: $-m;
 156   }
 157 }
 158
 159 .image-manager-list {
 160   overflow-y: scroll;
 161   flex: 1;
 162 }
 163
 164 .image-manager-content {
 165   display: flex;
 166   flex-direction: column;
 167   flex: 1;
 168   .container {
 169     width: 100%;
 170   }
 171   .full-tab {
 172     text-align: center;
 173   }
 174 }
 175
 176 // Dropzone
 177 /*
 178  * The MIT License
 179  * Copyright (c) 2012 Matias Meno <[email protected]>
 180  */
 181 .dz-message {
 182   font-size: 1.2em;
 183   line-height: 1.1;
 184   font-style: italic;
 185   color: #aaa;
 186   text-align: center;
 187   cursor: pointer;
 188   padding: $-l $-m;
 189   transition: all ease-in-out 120ms;
 190 }
 191
 192 .dz-drag-hover .dz-message {
 193   background-color: rgb(16, 126, 210);
 194   color: #EEE;
 195 }
 196
 197 @keyframes passing-through {
 198   0% {
 199     opacity: 0;
 200     transform: translateY(40px);
 201   }
 202   30%, 70% {
 203     opacity: 1;
 204     transform: translateY(0px);
 205   }
 206   100% {
 207     opacity: 0;
 208     transform: translateY(-40px);
 209   }
 210 }
 211
 212 @keyframes slide-in {
 213   0% {
 214     opacity: 0;
 215     transform: translateY(40px);
 216   }
 217   30% {
 218     opacity: 1;
 219     transform: translateY(0px);
 220   }
 221 }
 222
 223 @keyframes pulse {
 224   0% {
 225     transform: scale(1);
 226   }
 227   10% {
 228     transform: scale(1.1);
 229   }
 230   20% {
 231     transform: scale(1);
 232   }
 233 }
 234
 235 .dropzone, .dropzone * {
 236   box-sizing: border-box;
 237 }
 238
 239 .dz-preview {
 240   position: relative;
 241   display: inline-block;
 242   vertical-align: top;
 243   margin: 12px;
 244   min-height: 80px;
 245 }
 246
 247 .dz-preview:hover {
 248   z-index: 1000;
 249 }
 250
 251 .dz-preview:hover .dz-details {
 252   opacity: 1;
 253 }
 254
 255 .dz-preview.dz-file-preview .dz-image {
 256   border-radius: 4px;
 257   background: #999;
 258   background: linear-gradient(to bottom, #eee, #ddd);
 259 }
 260
 261 .dz-preview.dz-file-preview .dz-details {
 262   opacity: 1;
 263 }
 264
 265 .dz-preview.dz-image-preview {
 266   background: white;
 267 }
 268
 269 .dz-preview.dz-image-preview .dz-details {
 270   transition: opacity 0.2s linear;
 271 }
 272
 273 .dz-preview .dz-remove {
 274   font-size: 14px;
 275   text-align: center;
 276   display: block;
 277   cursor: pointer;
 278   border: none;
 279 }
 280
 281 .dz-preview .dz-remove:hover {
 282   text-decoration: underline;
 283 }
 284
 285 .dz-preview:hover .dz-details {
 286   opacity: 1;
 287 }
 288
 289 .dz-preview .dz-details {
 290   z-index: 20;
 291   position: absolute;
 292   top: 0;
 293   left: 0;
 294   opacity: 0;
 295   font-size: 10px;
 296   min-width: 100%;
 297   max-width: 100%;
 298   padding: 6px 3px;
 299   text-align: center;
 300   color: rgba(0, 0, 0, 0.9);
 301   line-height: 150%;
 302 }
 303
 304 .dz-preview .dz-details .dz-size {
 305   margin-bottom: 0.5em;
 306   font-size: 12px;
 307 }
 308
 309 .dz-preview .dz-details .dz-filename {
 310   white-space: nowrap;
 311 }
 312
 313 .dz-preview .dz-details .dz-filename:hover span {
 314   border: 1px solid rgba(200, 200, 200, 0.8);
 315   background-color: rgba(255, 255, 255, 0.8);
 316 }
 317
 318 .dz-preview .dz-details .dz-filename:not(:hover) {
 319   overflow: hidden;
 320   text-overflow: ellipsis;
 321 }
 322
 323 .dz-preview .dz-details .dz-filename:not(:hover) span {
 324   border: 1px solid transparent;
 325 }
 326
 327 .dz-preview .dz-details .dz-filename span, .dz-preview .dz-details .dz-size span {
 328   background-color: rgba(255, 255, 255, 0.4);
 329   padding: 0 0.4em;
 330   border-radius: 3px;
 331 }
 332
 333 .dz-preview:hover .dz-image img {
 334   filter: blur(8px);
 335 }
 336
 337 .dz-preview .dz-image {
 338   border-radius: 4px;
 339   overflow: hidden;
 340   width: 80px;
 341   height: 80px;
 342   position: relative;
 343   display: block;
 344   z-index: 10;
 345 }
 346
 347 .dz-preview .dz-image img {
 348   display: block;
 349 }
 350
 351 .dz-preview.dz-success .dz-success-mark {
 352   animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 353 }
 354
 355 .dz-preview.dz-error .dz-error-mark {
 356   opacity: 1;
 357   animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 358 }
 359
 360 .dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
 361   pointer-events: none;
 362   opacity: 0;
 363   z-index: 500;
 364   position: absolute;
 365   display: block;
 366   top: 50%;
 367   left: 50%;
 368   margin-left: -27px;
 369   margin-top: -27px;
 370 }
 371
 372 .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
 373   display: block;
 374   width: 54px;
 375   height: 54px;
 376 }
 377
 378 .dz-preview.dz-processing .dz-progress {
 379   opacity: 1;
 380   transition: all 0.2s linear;
 381 }
 382
 383 .dz-preview.dz-complete .dz-progress {
 384   opacity: 0;
 385   transition: opacity 0.4s ease-in;
 386 }
 387
 388 .dz-preview:not(.dz-processing) .dz-progress {
 389   animation: pulse 6s ease infinite;
 390 }
 391
 392 .dz-preview .dz-progress {
 393   opacity: 1;
 394   z-index: 1000;
 395   pointer-events: none;
 396   position: absolute;
 397   height: 16px;
 398   left: 50%;
 399   top: 50%;
 400   margin-top: -8px;
 401   width: 80px;
 402   margin-left: -40px;
 403   background: rgba(255, 255, 255, 0.9);
 404   transform: scale(1);
 405   border-radius: 8px;
 406   overflow: hidden;
 407 }
 408
 409 .dz-preview .dz-progress .dz-upload {
 410   background: #333;
 411   background: linear-gradient(to bottom, #666, #444);
 412   position: absolute;
 413   top: 0;
 414   left: 0;
 415   bottom: 0;
 416   width: 0;
 417   transition: width 300ms ease-in-out;
 418 }
 419
 420 .dz-preview.dz-error .dz-error-message {
 421   display: block;
 422 }
 423
 424 .dz-preview.dz-error:hover .dz-error-message {
 425   opacity: 1;
 426   pointer-events: auto;
 427 }
 428
 429 .dz-preview .dz-error-message {
 430   pointer-events: none;
 431   z-index: 1000;
 432   position: absolute;
 433   display: block;
 434   display: none;
 435   opacity: 0;
 436   transition: opacity 0.3s ease;
 437   border-radius: 4px;
 438   font-size: 11.5px;
 439   line-height: 1.2;
 440   top: 88px;
 441   left: -26px;
 442   width: 148px;
 443   background: $negative;
 444   padding: $-xs;
 445   color: white;
 446 }
 447
 448 .dz-preview .dz-error-message:after {
 449   content: '';
 450   position: absolute;
 451   top: -6px;
 452   left: 64px;
 453   width: 0;
 454   height: 0;
 455   border-left: 6px solid transparent;
 456   border-right: 6px solid transparent;
 457   border-bottom: 6px solid $negative;
 458 }