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