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

   1 #image-manager {
   2   background-color: #EEE;
   3   max-width: 90%;
   4   max-height: 90%;
   5   width: 90%;
   6   height: 90%;
   7   margin: 2% 5%;
   8   //border: 2px solid $primary;
   9   border-radius: 4px;
  10   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
  11   overflow: hidden;
  12   .image-manager-display img {
  13     border-radius: 0;
  14     float: left;
  15     margin: 1px;
  16     cursor: pointer;
  17   }
  18 }
  19 #image-manager .dropzone {
  20   display: table;
  21   position: absolute;
  22   top: 10px;
  23   left: 300px;
  24   width: 480px;
  25   height: 60px;
  26   border: 4px dashed $primary;
  27   text-align: center;
  28   z-index: 900;
  29   .dz-message {
  30     display: table-cell;
  31     vertical-align: middle;
  32     color: $primary;
  33     font-size: 1.2em;
  34   }
  35   * {
  36     pointer-events: none;
  37   }
  38 }
  39 .image-manager-left {
  40   background-color: #FFF;
  41   height: 100%;
  42   width: 100%;
  43   text-align: left;
  44   position: relative;
  45   .image-manager-display-wrap {
  46     height: 100%;
  47     padding-top: 87px;
  48     position: absolute;
  49     top: 0;width: 100%;
  50   }
  51   .image-manager-display {
  52     height: 100%;
  53     width: 100%;
  54     text-align: left;
  55     overflow-y: scroll;
  56   }
  57   .image-manager-header {
  58     z-index: 50;
  59     position: relative;
  60   }
  61 }
  62
  63 #image-manager .load-more {
  64   width: 150px;
  65   height: 150px;
  66   display: none;
  67   float: left;
  68   text-align: center;
  69   background-color: #888;
  70   margin: 1px;
  71   color: #FFF;
  72   line-height: 140px;
  73   font-size: 20px;
  74   cursor: pointer;
  75 }
  76 .image-manager-title {
  77   font-size: 2em;
  78   text-align: left;
  79   margin: 0 $-m;
  80   padding: $-xl $-m;
  81   color: #666;
  82   border-bottom: 1px solid #DDD;
  83 }
  84
  85 .image-manager-dropzone {
  86   background-color: lighten($primary, 40%);
  87   height: 25%;
  88   text-align: center;
  89   font-size: 2em;
  90   line-height: 2em;
  91   padding-top: $-xl*1.2;
  92   color: #666;
  93   border-top: 2px solid $primary;
  94 }
  95
  96 // Dropzone
  97 /*
  98  * The MIT License
  99  * Copyright (c) 2012 Matias Meno <[email protected]>
 100  */
 101
 102 @keyframes passing-through {
 103   0% {
 104     opacity: 0;
 105     transform: translateY(40px); }
 106   30%, 70% {
 107     opacity: 1;
 108     transform: translateY(0px); }
 109   100% {
 110     opacity: 0;
 111     transform: translateY(-40px); } }
 112
 113 @keyframes slide-in {
 114   0% {
 115     opacity: 0;
 116     transform: translateY(40px); }
 117   30% {
 118     opacity: 1;
 119     transform: translateY(0px); } }
 120 @keyframes pulse {
 121   0% {
 122     -webkit-transform: scale(1);
 123     -moz-transform: scale(1);
 124     -ms-transform: scale(1);
 125     -o-transform: scale(1);
 126     transform: scale(1); }
 127   10% {
 128     -webkit-transform: scale(1.1);
 129     -moz-transform: scale(1.1);
 130     -ms-transform: scale(1.1);
 131     -o-transform: scale(1.1);
 132     transform: scale(1.1); }
 133   20% {
 134     -webkit-transform: scale(1);
 135     -moz-transform: scale(1);
 136     -ms-transform: scale(1);
 137     -o-transform: scale(1);
 138     transform: scale(1); } }
 139 .dropzone, .dropzone * {
 140   box-sizing: border-box; }
 141
 142 .dropzone {
 143   background: white;
 144   padding: 20px 20px; }
 145 .dropzone.dz-clickable {
 146   cursor: pointer; }
 147 .dropzone.dz-clickable * {
 148   cursor: default; }
 149 .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
 150   cursor: pointer; }
 151 .dropzone.dz-started .dz-message {
 152   display: none; }
 153 .dropzone.dz-drag-hover {
 154   border-style: solid; }
 155 .dropzone.dz-drag-hover .dz-message {
 156   opacity: 0.5; }
 157 .dropzone .dz-message {
 158   text-align: center;
 159   margin: 2em 0; }
 160 .dz-preview {
 161   position: relative;
 162   display: inline-block;
 163   vertical-align: top;
 164   margin: 16px;
 165   min-height: 100px; }
 166 .dz-preview:hover {
 167   z-index: 1000; }
 168 .dz-preview:hover .dz-details {
 169   opacity: 1; }
 170 .dz-preview.dz-file-preview .dz-image {
 171   border-radius: 4px;
 172   background: #999;
 173   background: linear-gradient(to bottom, #eee, #ddd); }
 174 .dz-preview.dz-file-preview .dz-details {
 175   opacity: 1; }
 176 .dz-preview.dz-image-preview {
 177   background: white; }
 178 .dz-preview.dz-image-preview .dz-details {
 179   -webkit-transition: opacity 0.2s linear;
 180   -moz-transition: opacity 0.2s linear;
 181   -ms-transition: opacity 0.2s linear;
 182   -o-transition: opacity 0.2s linear;
 183   transition: opacity 0.2s linear; }
 184 .dz-preview .dz-remove {
 185   font-size: 14px;
 186   text-align: center;
 187   display: block;
 188   cursor: pointer;
 189   border: none; }
 190 .dz-preview .dz-remove:hover {
 191   text-decoration: underline; }
 192 .dz-preview:hover .dz-details {
 193   opacity: 1; }
 194 .dz-preview .dz-details {
 195   z-index: 20;
 196   position: absolute;
 197   top: 0;
 198   left: 0;
 199   opacity: 0;
 200   font-size: 13px;
 201   min-width: 100%;
 202   max-width: 100%;
 203   padding: 2em 1em;
 204   text-align: center;
 205   color: rgba(0, 0, 0, 0.9);
 206   line-height: 150%; }
 207 .dz-preview .dz-details .dz-size {
 208   margin-bottom: 1em;
 209   font-size: 16px; }
 210 .dz-preview .dz-details .dz-filename {
 211   white-space: nowrap; }
 212 .dz-preview .dz-details .dz-filename:hover span {
 213   border: 1px solid rgba(200, 200, 200, 0.8);
 214   background-color: rgba(255, 255, 255, 0.8); }
 215 .dz-preview .dz-details .dz-filename:not(:hover) {
 216   overflow: hidden;
 217   text-overflow: ellipsis; }
 218 .dz-preview .dz-details .dz-filename:not(:hover) span {
 219   border: 1px solid transparent; }
 220 .dz-preview .dz-details .dz-filename span, .dz-preview .dz-details .dz-size span {
 221   background-color: rgba(255, 255, 255, 0.4);
 222   padding: 0 0.4em;
 223   border-radius: 3px; }
 224 .dz-preview:hover .dz-image img {
 225   -webkit-transform: scale(1.05, 1.05);
 226   -moz-transform: scale(1.05, 1.05);
 227   -ms-transform: scale(1.05, 1.05);
 228   -o-transform: scale(1.05, 1.05);
 229   transform: scale(1.05, 1.05);
 230   -webkit-filter: blur(8px);
 231   filter: blur(8px); }
 232 .dz-preview .dz-image {
 233   border-radius: 4px;
 234   overflow: hidden;
 235   width: 120px;
 236   height: 120px;
 237   position: relative;
 238   display: block;
 239   z-index: 10; }
 240 .dz-preview .dz-image img {
 241   display: block; }
 242 .dz-preview.dz-success .dz-success-mark {
 243   animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
 244 .dz-preview.dz-error .dz-error-mark {
 245   opacity: 1;
 246   animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
 247 .dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
 248   pointer-events: none;
 249   opacity: 0;
 250   z-index: 500;
 251   position: absolute;
 252   display: block;
 253   top: 50%;
 254   left: 50%;
 255   margin-left: -27px;
 256   margin-top: -27px; }
 257 .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
 258   display: block;
 259   width: 54px;
 260   height: 54px; }
 261 .dz-preview.dz-processing .dz-progress {
 262   opacity: 1;
 263   transition: all 0.2s linear; }
 264 .dz-preview.dz-complete .dz-progress {
 265   opacity: 0;
 266   transition: opacity 0.4s ease-in; }
 267 .dz-preview:not(.dz-processing) .dz-progress {
 268   animation: pulse 6s ease infinite; }
 269 .dz-preview .dz-progress {
 270   opacity: 1;
 271   z-index: 1000;
 272   pointer-events: none;
 273   position: absolute;
 274   height: 16px;
 275   left: 50%;
 276   top: 50%;
 277   margin-top: -8px;
 278   width: 80px;
 279   margin-left: -40px;
 280   background: rgba(255, 255, 255, 0.9);
 281   -webkit-transform: scale(1);
 282   border-radius: 8px;
 283   overflow: hidden; }
 284 .dz-preview .dz-progress .dz-upload {
 285   background: #333;
 286   background: linear-gradient(to bottom, #666, #444);
 287   position: absolute;
 288   top: 0;
 289   left: 0;
 290   bottom: 0;
 291   width: 0;
 292   transition: width 300ms ease-in-out; }
 293 .dz-preview.dz-error .dz-error-message {
 294   display: block; }
 295 .dz-preview.dz-error:hover .dz-error-message {
 296   opacity: 1;
 297   pointer-events: auto; }
 298 .dz-preview .dz-error-message {
 299   pointer-events: none;
 300   z-index: 1000;
 301   position: absolute;
 302   display: block;
 303   display: none;
 304   opacity: 0;
 305   transition: opacity 0.3s ease;
 306   border-radius: 8px;
 307   font-size: 13px;
 308   top: 130px;
 309   left: -10px;
 310   width: 140px;
 311   background: #be2626;
 312   background: linear-gradient(to bottom, #be2626, #a92222);
 313   padding: 0.5em 1.2em;
 314   color: white; }
 315 .dz-preview .dz-error-message:after {
 316   content: '';
 317   position: absolute;
 318   top: -6px;
 319   left: 64px;
 320   width: 0;
 321   height: 0;
 322   border-left: 6px solid transparent;
 323   border-right: 6px solid transparent;
 324   border-bottom: 6px solid #be2626; }