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

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