BookStack Code Mirror - bookstack/blob - resources/assets/sass/

1 .overlay {

2 background-color: rgba(0, 0, 0, 0.2);

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 }

15 .image-manager-body {

16 background-color: #FFF;

17 max-height: 90%;

18 width: 90%;

19 height: 90%;

20 margin: 2% 5%;

21 border-radius: 4px;

22 box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);

23 overflow: hidden;

24 position: fixed;

25 top: 0;

26 bottom: 0;

27 left: 0;

28 z-index: 999;

29 display: flex;

30 h1, h2, h3 {

31 font-weight: 300;

32 }

33 }

35 #image-manager .dropzone-container {

36 position: relative;

37 border: 3px dashed #DDD;

38 }

40 .image-manager-bottom {

41 position: absolute;

42 bottom: 0;

43 right: 0;

44 }

46 .image-manager-list .image {

47 display: block;

48 position: relative;

49 border-radius: 0;

50 float: left;

51 margin: 0;

52 cursor: pointer;

53 width: (100%/6);

54 height: auto;

55 border: 1px solid #DDD;

56 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

57 transition: all cubic-bezier(.4, 0, 1, 1) 160ms;

58 overflow: hidden;

59 &.selected {

60 transform: scale3d(0.92, 0.92, 0.92);

61 border: 1px solid #444;

62 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);

63 }

64 img {

65 width: 100%;

66 max-width: 100%;

67 display: block;

68 }

69 .image-meta {

70 position: absolute;

71 width: 100%;

72 bottom: 0;

73 left: 0;

74 color: #EEE;

75 background-color: rgba(0, 0, 0, 0.4);

76 font-size: 10px;

77 padding: 3px 4px;

78 span {

79 display: block;

80 }

81 }

82 @include smaller-than($xl) {

83 width: (100%/4);

84 }

85 @include smaller-than($m) {

86 .image-meta {

87 display: none;

88 }

89 }

90 }

92 #image-manager .load-more {

93 display: block;

94 text-align: center;

95 background-color: #EEE;

96 padding: $-s $-m;

97 color: #AAA;

98 clear: both;

99 font-size: 20px;

100 cursor: pointer;

101 font-style: italic;

102 }

103

104 .image-manager-sidebar {

105 width: 300px;

106 height: 100%;

107 margin-left: 1px;

108 padding: 0 $-l;

109 border-left: 1px solid #DDD;

110 }

111

112 .image-manager-close {

113 position: absolute;

114 top: 0;

115 right: 0;

116 margin: 0;

117 border-radius: 0;

118 }

119

120 .image-manager-list {

121 overflow-y: scroll;

122 flex: 1;

123 }

124

125 .image-manager-content {

126 display: flex;

127 flex-direction: column;

128 height: 100%;

129 flex: 1;

130 .container {

131 width: 100%;

132 }

133 .full-tab {

134 text-align: center;

135 }

136 }

137

138 // Dropzone

139 /*

140 * The MIT License

142 */

143 .dz-message {

144 font-size: 1.4em;

145 font-style: italic;

146 color: #aaa;

147 text-align: center;

148 cursor: pointer;

149 padding: $-xl $-m;

150 transition: all ease-in-out 120ms;

151 }

152

153 .dz-drag-hover .dz-message {

154 background-color: rgb(16, 126, 210);

155 color: #EEE;

156 }

157

158 @keyframes passing-through {

159 0% {

160 opacity: 0;

161 transform: translateY(40px);

162 }

163 30%, 70% {

164 opacity: 1;

165 transform: translateY(0px);

166 }

167 100% {

168 opacity: 0;

169 transform: translateY(-40px);

170 }

171 }

172

173 @keyframes slide-in {

174 0% {

175 opacity: 0;

176 transform: translateY(40px);

177 }

178 30% {

179 opacity: 1;

180 transform: translateY(0px);

181 }

182 }

183

184 @keyframes pulse {

185 0% {

186 transform: scale(1);

187 }

188 10% {

189 transform: scale(1.1);

190 }

191 20% {

192 transform: scale(1);

193 }

194 }

195

196 .dropzone, .dropzone * {

197 box-sizing: border-box;

198 }

199

200 .dz-preview {

201 position: relative;

202 display: inline-block;

203 vertical-align: top;

204 margin: 12px;

205 min-height: 80px;

206 }

207

208 .dz-preview:hover {

209 z-index: 1000;

210 }

211

212 .dz-preview:hover .dz-details {

213 opacity: 1;

214 }

215

216 .dz-preview.dz-file-preview .dz-image {

217 border-radius: 4px;

218 background: #999;

219 background: linear-gradient(to bottom, #eee, #ddd);

220 }

221

222 .dz-preview.dz-file-preview .dz-details {

223 opacity: 1;

224 }

225

226 .dz-preview.dz-image-preview {

227 background: white;

228 }

229

230 .dz-preview.dz-image-preview .dz-details {

231 transition: opacity 0.2s linear;

232 }

233

234 .dz-preview .dz-remove {

235 font-size: 14px;

236 text-align: center;

237 display: block;

238 cursor: pointer;

239 border: none;

240 }

241

242 .dz-preview .dz-remove:hover {

243 text-decoration: underline;

244 }

245

246 .dz-preview:hover .dz-details {

247 opacity: 1;

248 }

249

250 .dz-preview .dz-details {

251 z-index: 20;

252 position: absolute;

253 top: 0;

254 left: 0;

255 opacity: 0;

256 font-size: 10px;

257 min-width: 100%;

258 max-width: 100%;

259 padding: 6px 3px;

260 text-align: center;

261 color: rgba(0, 0, 0, 0.9);

262 line-height: 150%;

263 }

264

265 .dz-preview .dz-details .dz-size {

266 margin-bottom: 0.5em;

267 font-size: 12px;

268 }

269

270 .dz-preview .dz-details .dz-filename {

271 white-space: nowrap;

272 }

273

274 .dz-preview .dz-details .dz-filename:hover span {

275 border: 1px solid rgba(200, 200, 200, 0.8);

276 background-color: rgba(255, 255, 255, 0.8);

277 }

278

279 .dz-preview .dz-details .dz-filename:not(:hover) {

280 overflow: hidden;

281 text-overflow: ellipsis;

282 }

283

284 .dz-preview .dz-details .dz-filename:not(:hover) span {

285 border: 1px solid transparent;

286 }

287

288 .dz-preview .dz-details .dz-filename span, .dz-preview .dz-details .dz-size span {

289 background-color: rgba(255, 255, 255, 0.4);

290 padding: 0 0.4em;

291 border-radius: 3px;

292 }

293

294 .dz-preview:hover .dz-image img {

295 filter: blur(8px);

296 }

297

298 .dz-preview .dz-image {

299 border-radius: 4px;

300 overflow: hidden;

301 width: 80px;

302 height: 80px;

303 position: relative;

304 display: block;

305 z-index: 10;

306 }

307

308 .dz-preview .dz-image img {

309 display: block;

310 }

311

312 .dz-preview.dz-success .dz-success-mark {

313 animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

314 }

315

316 .dz-preview.dz-error .dz-error-mark {

317 opacity: 1;

318 animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

319 }

320

321 .dz-preview .dz-success-mark, .dz-preview .dz-error-mark {

322 pointer-events: none;

323 opacity: 0;

324 z-index: 500;

325 position: absolute;

326 display: block;

327 top: 50%;

328 left: 50%;

329 margin-left: -27px;

330 margin-top: -27px;

331 }

332

333 .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {

334 display: block;

335 width: 54px;

336 height: 54px;

337 }

338

339 .dz-preview.dz-processing .dz-progress {

340 opacity: 1;

341 transition: all 0.2s linear;

342 }

343

344 .dz-preview.dz-complete .dz-progress {

345 opacity: 0;

346 transition: opacity 0.4s ease-in;

347 }

348

349 .dz-preview:not(.dz-processing) .dz-progress {

350 animation: pulse 6s ease infinite;

351 }

352

353 .dz-preview .dz-progress {

354 opacity: 1;

355 z-index: 1000;

356 pointer-events: none;

357 position: absolute;

358 height: 16px;

359 left: 50%;

360 top: 50%;

361 margin-top: -8px;

362 width: 80px;

363 margin-left: -40px;

364 background: rgba(255, 255, 255, 0.9);

365 transform: scale(1);

366 border-radius: 8px;

367 overflow: hidden;

368 }

369

370 .dz-preview .dz-progress .dz-upload {

371 background: #333;

372 background: linear-gradient(to bottom, #666, #444);

373 position: absolute;

374 top: 0;

375 left: 0;

376 bottom: 0;

377 width: 0;

378 transition: width 300ms ease-in-out;

379 }

380

381 .dz-preview.dz-error .dz-error-message {

382 display: block;

383 }

384

385 .dz-preview.dz-error:hover .dz-error-message {

386 opacity: 1;

387 pointer-events: auto;

388 }

389

390 .dz-preview .dz-error-message {

391 pointer-events: none;

392 z-index: 1000;

393 position: absolute;

394 display: block;

395 display: none;

396 opacity: 0;

397 transition: opacity 0.3s ease;

398 border-radius: 4px;

399 font-size: 11.5px;

400 line-height: 1.2;

401 top: 88px;

402 left: -26px;

403 width: 148px;

404 background: $negative;

405 padding: $-xs;

406 color: white;

407 }

408

409 .dz-preview .dz-error-message:after {

410 content: '';

411 position: absolute;

412 top: -6px;

413 left: 64px;

414 width: 0;

415 height: 0;

416 border-left: 6px solid transparent;

417 border-right: 6px solid transparent;

418 border-bottom: 6px solid $negative;

419 }