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

1 .overlay {

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

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 display: flex;

14 align-items: center;

15 justify-content: center;

16 display: none;

17 }

19 .popup-body-wrap {

20 display: flex;

21 }

23 .popup-body {

24 background-color: #FFF;

25 max-height: 90%;

26 width: 1200px;

27 height: auto;

28 margin: 2% 5%;

29 border-radius: 4px;

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

31 overflow: hidden;

32 z-index: 999;

33 display: flex;

34 flex-direction: column;

35 &.small {

36 margin: 2% auto;

37 width: 800px;

38 max-width: 90%;

39 }

40 &:before {

41 display: flex;

42 align-self: flex-start;

43 }

44 }

46 .corner-button {

47 position: absolute;

48 top: 0;

49 right: 0;

50 margin: 0;

51 height: 40px;

52 border-radius: 0;

53 box-shadow: none;

54 }

56 .popup-header, .popup-footer {

57 display: block !important;

58 position: relative;

59 height: 40px;

60 flex: none !important;

61 .popup-title {

62 color: #FFF;

63 padding: 8px $-m;

64 }

65 }

66 body.flexbox-support #entity-selector-wrap .popup-body .form-group {

67 height: 444px;

68 min-height: 444px;

69 }

70 #entity-selector-wrap .popup-body .form-group {

71 margin: 0;

72 }

73 //body.ie #entity-selector-wrap .popup-body .form-group {

74 // min-height: 60vh;

75 //}

77 .image-manager-body {

78 min-height: 70vh;

79 }

81 .dropzone-container {

82 position: relative;

83 border: 3px dashed #DDD;

84 }

86 .image-manager-list .image {

87 display: block;

88 position: relative;

89 border-radius: 0;

90 float: left;

91 margin: 0;

92 cursor: pointer;

93 width: (100%/6);

94 height: auto;

95 border: 1px solid #DDD;

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

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

98 overflow: hidden;

99 &.selected {

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

101 border: 1px solid #444;

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

103 }

104 img {

105 width: 100%;

106 max-width: 100%;

107 display: block;

108 }

109 .image-meta {

110 position: absolute;

111 width: 100%;

112 bottom: 0;

113 left: 0;

114 color: #EEE;

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

116 font-size: 10px;

117 padding: 3px 4px;

118 span {

119 display: block;

120 }

121 }

122 @include smaller-than($xl) {

123 width: (100%/4);

124 }

125 @include smaller-than($m) {

126 .image-meta {

127 display: none;

128 }

129 }

130 }

131

132 #image-manager .load-more {

133 display: block;

134 text-align: center;

135 background-color: #EEE;

136 padding: $-s $-m;

137 color: #AAA;

138 clear: both;

139 font-size: 20px;

140 cursor: pointer;

141 font-style: italic;

142 }

143

144 .image-manager-sidebar {

145 width: 300px;

146 margin-left: 1px;

147 padding: $-m $-l;

148 overflow-y: auto;

149 border-left: 1px solid #DDD;

150 .dropzone-container {

151 margin-top: $-m;

152 }

153 }

154

155 .image-manager-list {

156 overflow-y: scroll;

157 flex: 1;

158 }

159

160 .image-manager-content {

161 display: flex;

162 flex-direction: column;

163 flex: 1;

164 .container {

165 width: 100%;

166 }

167 .full-tab {

168 text-align: center;

169 }

170 }

171

172 // Dropzone

173 /*

174 * The MIT License

176 */

177 .dz-message {

178 font-size: 1.2em;

179 line-height: 1.1;

180 font-style: italic;

181 color: #aaa;

182 text-align: center;

183 cursor: pointer;

184 padding: $-l $-m;

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

186 }

187

188 .dz-drag-hover .dz-message {

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

190 color: #EEE;

191 }

192

193 @keyframes passing-through {

194 0% {

195 opacity: 0;

196 transform: translateY(40px);

197 }

198 30%, 70% {

199 opacity: 1;

200 transform: translateY(0px);

201 }

202 100% {

203 opacity: 0;

204 transform: translateY(-40px);

205 }

206 }

207

208 @keyframes slide-in {

209 0% {

210 opacity: 0;

211 transform: translateY(40px);

212 }

213 30% {

214 opacity: 1;

215 transform: translateY(0px);

216 }

217 }

218

219 @keyframes pulse {

220 0% {

221 transform: scale(1);

222 }

223 10% {

224 transform: scale(1.1);

225 }

226 20% {

227 transform: scale(1);

228 }

229 }

230

231 .dropzone, .dropzone * {

232 box-sizing: border-box;

233 }

234

235 .dz-preview {

236 position: relative;

237 display: inline-block;

238 vertical-align: top;

239 margin: 12px;

240 min-height: 80px;

241 }

242

243 .dz-preview:hover {

244 z-index: 1000;

245 }

246

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

248 opacity: 1;

249 }

250

251 .dz-preview.dz-file-preview .dz-image {

252 border-radius: 4px;

253 background: #999;

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

255 }

256

257 .dz-preview.dz-file-preview .dz-details {

258 opacity: 1;

259 }

260

261 .dz-preview.dz-image-preview {

262 background: white;

263 }

264

265 .dz-preview.dz-image-preview .dz-details {

266 transition: opacity 0.2s linear;

267 }

268

269 .dz-preview .dz-remove {

270 font-size: 14px;

271 text-align: center;

272 display: block;

273 cursor: pointer;

274 border: none;

275 }

276

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

278 text-decoration: underline;

279 }

280

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

282 opacity: 1;

283 }

284

285 .dz-preview .dz-details {

286 z-index: 20;

287 position: absolute;

288 top: 0;

289 left: 0;

290 opacity: 0;

291 font-size: 10px;

292 min-width: 100%;

293 max-width: 100%;

294 padding: 6px 3px;

295 text-align: center;

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

297 line-height: 150%;

298 }

299

300 .dz-preview .dz-details .dz-size {

301 margin-bottom: 0.5em;

302 font-size: 12px;

303 }

304

305 .dz-preview .dz-details .dz-filename {

306 white-space: nowrap;

307 }

308

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

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

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

312 }

313

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

315 overflow: hidden;

316 text-overflow: ellipsis;

317 }

318

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

320 border: 1px solid transparent;

321 }

322

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

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

325 padding: 0 0.4em;

326 border-radius: 3px;

327 }

328

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

330 filter: blur(8px);

331 }

332

333 .dz-preview .dz-image {

334 border-radius: 4px;

335 overflow: hidden;

336 width: 80px;

337 height: 80px;

338 position: relative;

339 display: block;

340 z-index: 10;

341 }

342

343 .dz-preview .dz-image img {

344 display: block;

345 }

346

347 .dz-preview.dz-success .dz-success-mark {

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

349 }

350

351 .dz-preview.dz-error .dz-error-mark {

352 opacity: 1;

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

354 }

355

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

357 pointer-events: none;

358 opacity: 0;

359 z-index: 500;

360 position: absolute;

361 display: block;

362 top: 50%;

363 left: 50%;

364 margin-left: -27px;

365 margin-top: -27px;

366 }

367

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

369 display: block;

370 width: 54px;

371 height: 54px;

372 }

373

374 .dz-preview.dz-processing .dz-progress {

375 opacity: 1;

376 transition: all 0.2s linear;

377 }

378

379 .dz-preview.dz-complete .dz-progress {

380 opacity: 0;

381 transition: opacity 0.4s ease-in;

382 }

383

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

385 animation: pulse 6s ease infinite;

386 }

387

388 .dz-preview .dz-progress {

389 opacity: 1;

390 z-index: 1000;

391 pointer-events: none;

392 position: absolute;

393 height: 16px;

394 left: 50%;

395 top: 50%;

396 margin-top: -8px;

397 width: 80px;

398 margin-left: -40px;

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

400 transform: scale(1);

401 border-radius: 8px;

402 overflow: hidden;

403 }

404

405 .dz-preview .dz-progress .dz-upload {

406 background: #333;

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

408 position: absolute;

409 top: 0;

410 left: 0;

411 bottom: 0;

412 width: 0;

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

414 }

415

416 .dz-preview.dz-error .dz-error-message {

417 display: block;

418 }

419

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

421 opacity: 1;

422 pointer-events: auto;

423 }

424

425 .dz-preview .dz-error-message {

426 pointer-events: none;

427 z-index: 1000;

428 position: absolute;

429 display: block;

430 display: none;

431 opacity: 0;

432 transition: opacity 0.3s ease;

433 border-radius: 4px;

434 font-size: 11.5px;

435 line-height: 1.2;

436 top: 88px;

437 left: -26px;

438 width: 148px;

439 background: $negative;

440 padding: $-xs;

441 color: white;

442 }

443

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

445 content: '';

446 position: absolute;

447 top: -6px;

448 left: 64px;

449 width: 0;

450 height: 0;

451 border-left: 6px solid transparent;

452 border-right: 6px solid transparent;

453 border-bottom: 6px solid $negative;

454 }

455

456

457 [tab-container] .nav-tabs {

458 text-align: left;

459 border-bottom: 1px solid #DDD;

460 margin-bottom: $-m;

461 .tab-item {

462 padding: $-s;

463 color: #666;

464 &.selected {

465 border-bottom-width: 3px;

466 }

467 }

468 }