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 border-top: 1px solid #ddd;

124 }

125

126 .image-manager-content {

127 display: flex;

128 flex-direction: column;

129 height: 100%;

130 flex: 1;

131 }

132

133 // Dropzone

134 /*

135 * The MIT License

137 */

138 .dz-message {

139 font-size: 1.4em;

140 font-style: italic;

141 color: #aaa;

142 text-align: center;

143 cursor: pointer;

144 padding: $-xl $-m;

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

146 }

147

148 .dz-drag-hover .dz-message {

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

150 color: #EEE;

151 }

152

153 @keyframes passing-through {

154 0% {

155 opacity: 0;

156 transform: translateY(40px);

157 }

158 30%, 70% {

159 opacity: 1;

160 transform: translateY(0px);

161 }

162 100% {

163 opacity: 0;

164 transform: translateY(-40px);

165 }

166 }

167

168 @keyframes slide-in {

169 0% {

170 opacity: 0;

171 transform: translateY(40px);

172 }

173 30% {

174 opacity: 1;

175 transform: translateY(0px);

176 }

177 }

178

179 @keyframes pulse {

180 0% {

181 transform: scale(1);

182 }

183 10% {

184 transform: scale(1.1);

185 }

186 20% {

187 transform: scale(1);

188 }

189 }

190

191 .dropzone, .dropzone * {

192 box-sizing: border-box;

193 }

194

195 .dz-preview {

196 position: relative;

197 display: inline-block;

198 vertical-align: top;

199 margin: 12px;

200 min-height: 80px;

201 }

202

203 .dz-preview:hover {

204 z-index: 1000;

205 }

206

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

208 opacity: 1;

209 }

210

211 .dz-preview.dz-file-preview .dz-image {

212 border-radius: 4px;

213 background: #999;

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

215 }

216

217 .dz-preview.dz-file-preview .dz-details {

218 opacity: 1;

219 }

220

221 .dz-preview.dz-image-preview {

222 background: white;

223 }

224

225 .dz-preview.dz-image-preview .dz-details {

226 transition: opacity 0.2s linear;

227 }

228

229 .dz-preview .dz-remove {

230 font-size: 14px;

231 text-align: center;

232 display: block;

233 cursor: pointer;

234 border: none;

235 }

236

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

238 text-decoration: underline;

239 }

240

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

242 opacity: 1;

243 }

244

245 .dz-preview .dz-details {

246 z-index: 20;

247 position: absolute;

248 top: 0;

249 left: 0;

250 opacity: 0;

251 font-size: 10px;

252 min-width: 100%;

253 max-width: 100%;

254 padding: 6px 3px;

255 text-align: center;

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

257 line-height: 150%;

258 }

259

260 .dz-preview .dz-details .dz-size {

261 margin-bottom: 0.5em;

262 font-size: 12px;

263 }

264

265 .dz-preview .dz-details .dz-filename {

266 white-space: nowrap;

267 }

268

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

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

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

272 }

273

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

275 overflow: hidden;

276 text-overflow: ellipsis;

277 }

278

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

280 border: 1px solid transparent;

281 }

282

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

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

285 padding: 0 0.4em;

286 border-radius: 3px;

287 }

288

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

290 filter: blur(8px);

291 }

292

293 .dz-preview .dz-image {

294 border-radius: 4px;

295 overflow: hidden;

296 width: 80px;

297 height: 80px;

298 position: relative;

299 display: block;

300 z-index: 10;

301 }

302

303 .dz-preview .dz-image img {

304 display: block;

305 }

306

307 .dz-preview.dz-success .dz-success-mark {

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

309 }

310

311 .dz-preview.dz-error .dz-error-mark {

312 opacity: 1;

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

314 }

315

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

317 pointer-events: none;

318 opacity: 0;

319 z-index: 500;

320 position: absolute;

321 display: block;

322 top: 50%;

323 left: 50%;

324 margin-left: -27px;

325 margin-top: -27px;

326 }

327

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

329 display: block;

330 width: 54px;

331 height: 54px;

332 }

333

334 .dz-preview.dz-processing .dz-progress {

335 opacity: 1;

336 transition: all 0.2s linear;

337 }

338

339 .dz-preview.dz-complete .dz-progress {

340 opacity: 0;

341 transition: opacity 0.4s ease-in;

342 }

343

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

345 animation: pulse 6s ease infinite;

346 }

347

348 .dz-preview .dz-progress {

349 opacity: 1;

350 z-index: 1000;

351 pointer-events: none;

352 position: absolute;

353 height: 16px;

354 left: 50%;

355 top: 50%;

356 margin-top: -8px;

357 width: 80px;

358 margin-left: -40px;

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

360 transform: scale(1);

361 border-radius: 8px;

362 overflow: hidden;

363 }

364

365 .dz-preview .dz-progress .dz-upload {

366 background: #333;

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

368 position: absolute;

369 top: 0;

370 left: 0;

371 bottom: 0;

372 width: 0;

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

374 }

375

376 .dz-preview.dz-error .dz-error-message {

377 display: block;

378 }

379

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

381 opacity: 1;

382 pointer-events: auto;

383 }

384

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

386 pointer-events: none;

387 z-index: 1000;

388 position: absolute;

389 display: block;

390 display: none;

391 opacity: 0;

392 transition: opacity 0.3s ease;

393 border-radius: 4px;

394 font-size: 11.5px;

395 line-height: 1.2;

396 top: 88px;

397 left: -26px;

398 width: 148px;

399 background: $negative;

400 padding: $-xs;

401 color: white;

402 }

403

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

405 content: '';

406 position: absolute;

407 top: -6px;

408 left: 64px;

409 width: 0;

410 height: 0;

411 border-left: 6px solid transparent;

412 border-right: 6px solid transparent;

413 border-bottom: 6px solid $negative;

414 }