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