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

1 // System wide notifications

2 [notification] {

3 position: fixed;

4 top: 0;

5 right: 0;

6 margin: $-xl*2 $-xl;

7 padding: $-l $-xl;

8 background-color: #EEE;

9 border-radius: 3px;

10 box-shadow: $bs-med;

11 z-index: 999999;

12 display: block;

13 cursor: pointer;

14 max-width: 480px;

15 transition: transform ease-in-out 360ms;

16 transform: translate3d(580px, 0, 0);

17 i, span {

18 display: table-cell;

19 }

20 i {

21 font-size: 2em;

22 padding-right: $-l;

23 }

24 span {

25 vertical-align: middle;

26 }

27 &.pos {

28 background-color: $positive;

29 color: #EEE;

30 }

31 &.neg {

32 background-color: $negative;

33 color: #EEE;

34 }

35 &.warning {

36 background-color: $secondary;

37 color: #EEE;

38 }

39 &.showing {

40 transform: translate3d(0, 0, 0);

41 }

42 }

44 [chapter-toggle] {

45 cursor: pointer;

46 margin: 0;

47 transition: all ease-in-out 180ms;

48 user-select: none;

49 i.zmdi-caret-right {

50 transition: all ease-in-out 180ms;

51 transform: rotate(0deg);

52 transform-origin: 25% 50%;

53 }

54 &.open {

55 //margin-bottom: 0;

56 }

57 &.open i.zmdi-caret-right {

58 transform: rotate(90deg);

59 }

60 }

62 [overlay] {

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

64 position: fixed;

65 z-index: 95536;

66 width: 100%;

67 height: 100%;

68 min-width: 100%;

69 min-height: 100%;

70 top: 0;

71 left: 0;

72 right: 0;

73 bottom: 0;

74 display: flex;

75 align-items: center;

76 justify-content: center;

77 display: none;

78 }

80 .popup-body-wrap {

81 display: flex;

82 }

84 .popup-body {

85 background-color: #FFF;

86 max-height: 90%;

87 width: 1200px;

88 height: auto;

89 margin: 2% 5%;

90 border-radius: 4px;

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

92 overflow: hidden;

93 z-index: 999;

94 display: flex;

95 flex-direction: column;

96 &.small {

97 margin: 2% auto;

98 width: 800px;

99 max-width: 90%;

100 }

101 &:before {

102 display: flex;

103 align-self: flex-start;

104 }

105

106 .popup-content {

107 overflow-y: auto;

108 }

109 }

110

111 .corner-button {

112 position: absolute;

113 top: 0;

114 right: 0;

115 margin: 0;

116 height: 40px;

117 border-radius: 0;

118 box-shadow: none;

119 }

120

121 .popup-header, .popup-footer {

122 display: block !important;

123 position: relative;

124 height: 40px;

125 flex: none !important;

126 .popup-title {

127 color: #FFF;

128 padding: 8px $-m;

129 }

130 }

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

132 height: 444px;

133 min-height: 444px;

134 }

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

136 margin: 0;

137 }

138

139 .image-manager-body {

140 min-height: 70vh;

141 }

142

143 .dropzone-container {

144 position: relative;

145 border: 3px dashed #DDD;

146 }

147

148 .image-manager-list .image {

149 display: block;

150 position: relative;

151 border-radius: 0;

152 float: left;

153 margin: 0;

154 cursor: pointer;

155 width: (100%/6);

156 height: auto;

157 border: 1px solid #DDD;

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

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

160 overflow: hidden;

161 &.selected {

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

163 border: 1px solid #444;

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

165 }

166 img {

167 width: 100%;

168 max-width: 100%;

169 display: block;

170 }

171 .image-meta {

172 position: absolute;

173 width: 100%;

174 bottom: 0;

175 left: 0;

176 color: #EEE;

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

178 font-size: 10px;

179 padding: 3px 4px;

180 span {

181 display: block;

182 }

183 }

184 @include smaller-than($xl) {

185 width: (100%/4);

186 }

187 @include smaller-than($m) {

188 .image-meta {

189 display: none;

190 }

191 }

192 }

193

194 #image-manager .load-more {

195 display: block;

196 text-align: center;

197 background-color: #EEE;

198 padding: $-s $-m;

199 color: #AAA;

200 clear: both;

201 font-size: 20px;

202 cursor: pointer;

203 font-style: italic;

204 }

205

206 .image-manager-sidebar {

207 width: 300px;

208 margin-left: 1px;

209 padding: $-m $-l;

210 overflow-y: auto;

211 border-left: 1px solid #DDD;

212 .dropzone-container {

213 margin-top: $-m;

214 }

215 }

216

217 .image-manager-list {

218 overflow-y: scroll;

219 flex: 1;

220 }

221

222 .image-manager-content {

223 display: flex;

224 flex-direction: column;

225 flex: 1;

226 .container {

227 width: 100%;

228 }

229 .full-tab {

230 text-align: center;

231 }

232 }

233

234 // Dropzone

235 /*

236 * The MIT License

238 */

239 .dz-message {

240 font-size: 1.2em;

241 line-height: 1.1;

242 font-style: italic;

243 color: #aaa;

244 text-align: center;

245 cursor: pointer;

246 padding: $-l $-m;

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

248 }

249

250 .dz-drag-hover .dz-message {

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

252 color: #EEE;

253 }

254

255 @keyframes passing-through {

256 0% {

257 opacity: 0;

258 transform: translateY(40px);

259 }

260 30%, 70% {

261 opacity: 1;

262 transform: translateY(0px);

263 }

264 100% {

265 opacity: 0;

266 transform: translateY(-40px);

267 }

268 }

269

270 @keyframes slide-in {

271 0% {

272 opacity: 0;

273 transform: translateY(40px);

274 }

275 30% {

276 opacity: 1;

277 transform: translateY(0px);

278 }

279 }

280

281 @keyframes pulse {

282 0% {

283 transform: scale(1);

284 }

285 10% {

286 transform: scale(1.1);

287 }

288 20% {

289 transform: scale(1);

290 }

291 }

292

293 .dropzone, .dropzone * {

294 box-sizing: border-box;

295 }

296

297 .dz-preview {

298 position: relative;

299 display: inline-block;

300 vertical-align: top;

301 margin: 12px;

302 min-height: 80px;

303 }

304

305 .dz-preview:hover {

306 z-index: 1000;

307 }

308

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

310 opacity: 1;

311 }

312

313 .dz-preview.dz-file-preview .dz-image {

314 border-radius: 4px;

315 background: #999;

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

317 }

318

319 .dz-preview.dz-file-preview .dz-details {

320 opacity: 1;

321 }

322

323 .dz-preview.dz-image-preview {

324 background: white;

325 }

326

327 .dz-preview.dz-image-preview .dz-details {

328 transition: opacity 0.2s linear;

329 }

330

331 .dz-preview .dz-remove {

332 font-size: 14px;

333 text-align: center;

334 display: block;

335 cursor: pointer;

336 border: none;

337 }

338

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

340 text-decoration: underline;

341 }

342

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

344 opacity: 1;

345 }

346

347 .dz-preview .dz-details {

348 z-index: 20;

349 position: absolute;

350 top: 0;

351 left: 0;

352 opacity: 0;

353 font-size: 10px;

354 min-width: 100%;

355 max-width: 100%;

356 padding: 6px 3px;

357 text-align: center;

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

359 line-height: 150%;

360 }

361

362 .dz-preview .dz-details .dz-size {

363 margin-bottom: 0.5em;

364 font-size: 12px;

365 }

366

367 .dz-preview .dz-details .dz-filename {

368 white-space: nowrap;

369 }

370

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

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

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

374 }

375

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

377 overflow: hidden;

378 text-overflow: ellipsis;

379 }

380

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

382 border: 1px solid transparent;

383 }

384

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

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

387 padding: 0 0.4em;

388 border-radius: 3px;

389 }

390

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

392 filter: blur(8px);

393 }

394

395 .dz-preview .dz-image {

396 border-radius: 4px;

397 overflow: hidden;

398 width: 80px;

399 height: 80px;

400 position: relative;

401 display: block;

402 z-index: 10;

403 }

404

405 .dz-preview .dz-image img {

406 display: block;

407 }

408

409 .dz-preview.dz-success .dz-success-mark {

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

411 }

412

413 .dz-preview.dz-error .dz-error-mark {

414 opacity: 1;

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

416 }

417

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

419 pointer-events: none;

420 opacity: 0;

421 z-index: 500;

422 position: absolute;

423 display: block;

424 top: 50%;

425 left: 50%;

426 margin-left: -27px;

427 margin-top: -27px;

428 }

429

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

431 display: block;

432 width: 54px;

433 height: 54px;

434 }

435

436 .dz-preview.dz-processing .dz-progress {

437 opacity: 1;

438 transition: all 0.2s linear;

439 }

440

441 .dz-preview.dz-complete .dz-progress {

442 opacity: 0;

443 transition: opacity 0.4s ease-in;

444 }

445

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

447 animation: pulse 6s ease infinite;

448 }

449

450 .dz-preview .dz-progress {

451 opacity: 1;

452 z-index: 1000;

453 pointer-events: none;

454 position: absolute;

455 height: 16px;

456 left: 50%;

457 top: 50%;

458 margin-top: -8px;

459 width: 80px;

460 margin-left: -40px;

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

462 transform: scale(1);

463 border-radius: 8px;

464 overflow: hidden;

465 }

466

467 .dz-preview .dz-progress .dz-upload {

468 background: #333;

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

470 position: absolute;

471 top: 0;

472 left: 0;

473 bottom: 0;

474 width: 0;

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

476 }

477

478 .dz-preview.dz-error .dz-error-message {

479 display: block;

480 }

481

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

483 opacity: 1;

484 pointer-events: auto;

485 }

486

487 .dz-preview .dz-error-message {

488 pointer-events: none;

489 z-index: 1000;

490 position: absolute;

491 display: block;

492 display: none;

493 opacity: 0;

494 transition: opacity 0.3s ease;

495 border-radius: 4px;

496 font-size: 11.5px;

497 line-height: 1.2;

498 top: 88px;

499 left: -26px;

500 width: 148px;

501 background: $negative;

502 padding: $-xs;

503 color: white;

504 }

505

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

507 content: '';

508 position: absolute;

509 top: -6px;

510 left: 64px;

511 width: 0;

512 height: 0;

513 border-left: 6px solid transparent;

514 border-right: 6px solid transparent;

515 border-bottom: 6px solid $negative;

516 }

517

518

519 .tab-container .nav-tabs {

520 text-align: left;

521 border-bottom: 1px solid #DDD;

522 margin-bottom: $-m;

523 .tab-item {

524 padding: $-s;

525 color: #666;

526 &.selected {

527 border-bottom-width: 3px;

528 }

529 }

530 }

531

532 .image-picker .none {

533 display: none;

534 }

535

536 #code-editor .CodeMirror {

537 height: 400px;

538 }

539

540 #code-editor .lang-options {

541 max-width: 400px;

542 margin-bottom: $-s;

543 a {

544 margin-right: $-xs;

545 text-decoration: underline;

546 }

547 }

548

549 .comment-box {

550 border: 1px solid #DDD;

551 margin-bottom: $-s;

552 border-radius: 3px;

553 .content {

554 padding: $-s;

555 font-size: 0.666em;

556 p, ul, ol {

557 font-size: $fs-m;

558 margin: .5em 0;

559 }

560 }

561 .reply-row {

562 padding: $-xs $-s;

563 }

564 }

565

566 .comment-box .header {

567 padding: $-xs $-s;

568 background-color: #f8f8f8;

569 border-bottom: 1px solid #DDD;

570 .meta {

571 img, a, span {

572 display: inline-block;

573 vertical-align: top;

574 }

575 a, span {

576 padding: $-xxs 0 $-xxs 0;

577 line-height: 1.6;

578 }

579 a { color: #666; }

580 span {

581 color: #888;

582 padding-left: $-xxs;

583 }

584 }

585 .text-muted {

586 color: #999;

587 }

588 }