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

1 // System wide notifications

2 [notification] {

3 position: fixed;

4 top: 0;

5 right: 0;

6 margin: $-xl;

7 padding: $-m $-l;

8 background-color: #FFF;

9 @include lightDark(background-color, #fff, #444);

10 border-radius: 4px;

11 border-inline-start: 6px solid currentColor;

12 box-shadow: $bs-large;

13 z-index: 999999;

14 cursor: pointer;

15 max-width: 360px;

16 transition: transform ease-in-out 280ms;

17 transform: translateX(580px);

18 display: grid;

19 grid-template-columns: 42px 1fr 12px;

20 color: #444;

21 font-weight: 700;

22 span, svg {

23 vertical-align: middle;

24 justify-self: center;

25 align-self: center;

26 }

27 svg {

28 width: 2.8rem;

29 height: 2.8rem;

30 padding-inline-end: $-s;

31 fill: currentColor;

32 }

33 .dismiss {

34 margin-top: -8px;

35 svg {

36 height: 1.0rem;

37 @include lightDark(color, #444, #888);

38 }

39 }

40 span {

41 vertical-align: middle;

42 line-height: 1.3;

43 @include whenDark {

44 color: #BBB;

45 }

46 }

47 &.pos {

48 color: $positive;

49 }

50 &.neg {

51 color: $negative;

52 }

53 &.warning {

54 color: $warning;

55 }

56 &.showing {

57 transform: translateX(0);

58 }

59 &.showing:hover {

60 transform: translate3d(0, -2px, 0);

61 }

62 }

64 .chapter-contents-toggle {

65 cursor: pointer;

66 margin: 0;

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

68 user-select: none;

69 svg[data-icon="caret-right"] {

70 margin-inline-end: 0;

71 font-size: 1rem;

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

73 transform: rotate(0deg);

74 transform-origin: 50% 50%;

75 }

76 &.open svg[data-icon="caret-right"] {

77 transform: rotate(90deg);

78 }

79 svg[data-icon="caret-right"] + * {

80 margin-inline-start: $-xxs;

81 }

82 }

84 [overlay], .popup-background {

85 @include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));

86 position: fixed;

87 z-index: 95536;

88 width: 100%;

89 height: 100%;

90 min-width: 100%;

91 min-height: 100%;

92 top: 0;

93 left: 0;

94 right: 0;

95 bottom: 0;

96 align-items: center;

97 justify-content: center;

98 display: none;

99 }

100

101 .popup-body-wrap {

102 display: flex;

103 }

104

105 .popup-body {

106 @include lightDark(background-color, #fff, #333);

107 max-height: 90%;

108 max-width: 1200px;

109 width: 90%;

110 height: auto;

111 margin: 2% auto;

112 border-radius: 4px;

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

114 overflow: hidden;

115 z-index: 999;

116 display: flex;

117 flex-direction: column;

118 &.small {

119 margin: 2% auto;

120 width: 800px;

121 max-width: 90%;

122 }

123 &.very-small {

124 margin: 2% auto;

125 width: 600px;

126 max-width: 90%;

127 }

128 &:before {

129 display: flex;

130 align-self: flex-start;

131 }

132 .popup-content {

133 overflow-y: auto;

134 }

135 &:focus {

136 outline: 0;

137 }

138 }

139

140 .popup-footer button, .popup-header-close {

141 position: absolute;

142 top: 0;

143 right: 0;

144 margin: 0;

145 height: 40px;

146 border-radius: 0;

147 box-shadow: none;

148 &:active {

149 outline: 0;

150 }

151 }

152 .popup-header-close {

153 background-color: transparent;

154 border: 0;

155 color: #FFF;

156 font-size: 16px;

157 padding: 0 $-m;

158 }

159

160 .popup-header, .popup-footer {

161 display: block !important;

162 position: relative;

163 height: 40px;

164 flex: none !important;

165 .popup-title {

166 color: #FFF;

167 padding: 8px $-m;

168 }

169 }

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

171 height: 444px;

172 min-height: 444px;

173 }

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

175 margin: 0;

176 }

177 .popup-body .entity-selector-container {

178 flex: 1;

179 }

180

181 .image-manager-body {

182 min-height: 70vh;

183 }

184

185 .dropzone-container {

186 position: relative;

187 @include lightDark(background-color, #eee, #222);

188 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a9a9a9' fill-opacity='0.52' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");

189 }

190

191 .image-manager-list .image {

192 display: block;

193 position: relative;

194 border-radius: 0;

195 float: left;

196 margin: 0;

197 cursor: pointer;

198 width: math.div(100%, 6);

199 height: auto;

200 @include lightDark(border-color, #ddd, #000);

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

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

203 overflow: hidden;

204 &.selected {

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

206 outline: currentColor 2px solid;

207 }

208 img {

209 width: 100%;

210 max-width: 100%;

211 display: block;

212 }

213 .image-meta {

214 position: absolute;

215 width: 100%;

216 bottom: 0;

217 left: 0;

218 color: #EEE;

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

220 font-size: 10px;

221 padding: 3px 4px;

222 span {

223 display: block;

224 }

225 }

226 @include smaller-than($xl) {

227 width: math.div(100%, 4);

228 }

229 @include smaller-than($m) {

230 .image-meta {

231 display: none;

232 }

233 }

234 }

235

236 .image-manager .load-more {

237 display: block;

238 text-align: center;

239 @include lightDark(background-color, #EEE, #444);

240 padding: $-s $-m;

241 color: #AAA;

242 clear: both;

243 font-size: 20px;

244 cursor: pointer;

245 font-style: italic;

246 }

247

248 .image-manager .loading-container {

249 text-align: center;

250 }

251

252 .image-manager-sidebar {

253 width: 300px;

254 overflow-y: auto;

255 overflow-x: hidden;

256 border-inline-start: 1px solid #DDD;

257 @include lightDark(border-color, #ddd, #000);

258 .inner {

259 min-height: auto;

260 padding: $-m;

261 }

262 img {

263 max-width: 100%;

264 max-height: 180px;

265 display: block;

266 margin: 0 auto $-m auto;

267 box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);

268 }

269 .image-manager-viewer {

270 height: 196px;

271 display: flex;

272 align-items: center;

273 justify-content: center;

274 a {

275 display: inline-block;

276 }

277 }

278 .dropzone-container {

279 border-bottom: 1px solid #DDD;

280 @include lightDark(border-color, #ddd, #000);

281 }

282 }

283

284 .image-manager-list {

285 overflow-y: scroll;

286 flex: 1;

287 }

288

289 .image-manager-content {

290 display: flex;

291 flex-direction: column;

292 flex: 1;

293 .container {

294 width: 100%;

295 }

296 .full-tab {

297 text-align: center;

298 }

299 }

300

301 .image-manager .corner-button {

302 margin: 0;

303 border-radius: 0;

304 padding: $-m;

305 }

306

307 // Dropzone

308 /*

309 * The MIT License

311 */

312 .dz-message {

313 font-size: 1em;

314 line-height: 2.85;

315 font-style: italic;

316 color: #888;

317 text-align: center;

318 cursor: pointer;

319 padding: $-l $-m;

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

321 }

322

323 .dz-drag-hover .dz-message {

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

325 color: #EEE;

326 }

327

328 @keyframes passing-through {

329 0% {

330 opacity: 0;

331 transform: translateY(40px);

332 }

333 30%, 70% {

334 opacity: 1;

335 transform: translateY(0px);

336 }

337 100% {

338 opacity: 0;

339 transform: translateY(-40px);

340 }

341 }

342

343 @keyframes slide-in {

344 0% {

345 opacity: 0;

346 transform: translateY(40px);

347 }

348 30% {

349 opacity: 1;

350 transform: translateY(0px);

351 }

352 }

353

354 @keyframes pulse {

355 0% {

356 transform: scale(1);

357 }

358 10% {

359 transform: scale(1.1);

360 }

361 20% {

362 transform: scale(1);

363 }

364 }

365

366 .dropzone, .dropzone * {

367 box-sizing: border-box;

368 }

369

370 .dz-preview {

371 position: relative;

372 display: inline-block;

373 vertical-align: top;

374 margin: 12px;

375 min-height: 80px;

376 }

377

378 .dz-preview:hover {

379 z-index: 1000;

380 }

381

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

383 opacity: 1;

384 }

385

386 .dz-preview.dz-file-preview .dz-image {

387 border-radius: 4px;

388 background: #e9e9e9;

389 }

390

391 .dz-preview.dz-file-preview .dz-details {

392 opacity: 1;

393 }

394

395 .dz-preview.dz-image-preview {

396 background: white;

397 }

398

399 .dz-preview.dz-image-preview .dz-details {

400 transition: opacity 0.2s linear;

401 }

402

403 .dz-preview .dz-remove {

404 font-size: 13px;

405 text-align: center;

406 display: block;

407 cursor: pointer;

408 border: none;

409 margin-top: 3px;

410 }

411

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

413 text-decoration: underline;

414 }

415

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

417 opacity: 1;

418 }

419

420 .dz-preview .dz-details {

421 z-index: 20;

422 position: absolute;

423 top: 0;

424 left: 0;

425 opacity: 0;

426 font-size: 10px;

427 min-width: 100%;

428 max-width: 100%;

429 padding: 6px 3px;

430 text-align: center;

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

432 line-height: 150%;

433 }

434

435 .dz-preview .dz-details .dz-size {

436 margin-bottom: 0.5em;

437 font-size: 12px;

438 }

439

440 .dz-preview .dz-details .dz-filename {

441 white-space: nowrap;

442 }

443

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

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

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

447 }

448

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

450 overflow: hidden;

451 text-overflow: ellipsis;

452 }

453

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

455 border: 1px solid transparent;

456 }

457

458 .dz-preview .dz-details .dz-filename span {

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

460 padding: 0 0.4em;

461 border-radius: 3px;

462 }

463

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

465 filter: blur(8px);

466 }

467

468 .dz-preview .dz-image {

469 border-radius: 4px;

470 overflow: hidden;

471 width: 80px;

472 height: 80px;

473 position: relative;

474 display: block;

475 z-index: 10;

476 }

477

478 .dz-preview .dz-image img {

479 display: block;

480 }

481

482 .dz-preview.dz-success .dz-success-mark {

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

484 }

485

486 .dz-preview.dz-error .dz-error-mark {

487 opacity: 1;

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

489 }

490

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

492 pointer-events: none;

493 opacity: 0;

494 z-index: 1001;

495 position: absolute;

496 display: block;

497 top: 50%;

498 left: 50%;

499 margin-inline-start: -27px;

500 margin-top: -35px;

501 }

502

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

504 display: block;

505 width: 54px;

506 height: 54px;

507 }

508

509 .dz-preview.dz-processing .dz-progress {

510 opacity: 1;

511 transition: all 0.2s linear;

512 }

513

514 .dz-preview.dz-complete .dz-progress {

515 opacity: 0;

516 transition: opacity 0.4s ease-in;

517 }

518

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

520 animation: pulse 6s ease infinite;

521 }

522

523 .dz-preview .dz-progress {

524 opacity: 1;

525 z-index: 1000;

526 pointer-events: none;

527 position: absolute;

528 height: 16px;

529 left: 50%;

530 top: 50%;

531 margin-top: -8px;

532 width: 80px;

533 margin-inline-start: -40px;

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

535 transform: scale(1);

536 border-radius: 8px;

537 overflow: hidden;

538 }

539

540 .dz-preview .dz-progress .dz-upload {

541 background: #333;

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

543 position: absolute;

544 top: 0;

545 left: 0;

546 bottom: 0;

547 width: 0;

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

549 }

550

551 .dz-preview.dz-error .dz-error-message {

552 display: block;

553 }

554

555 .dz-preview.dz-error {

556 .dz-image, .dz-details {

557 &:hover ~ .dz-error-message {

558 opacity: 1;

559 pointer-events: auto;

560 }

561 }

562 }

563

564 .dz-preview .dz-error-message {

565 pointer-events: none;

566 z-index: 1000;

567 position: absolute;

568 display: block;

569 display: none;

570 opacity: 0;

571 transition: opacity 0.3s ease;

572 border-radius: 4px;

573 font-size: 12px;

574 line-height: 1.2;

575 top: 88px;

576 left: -12px;

577 width: 160px;

578 background: $negative;

579 padding: $-xs;

580 color: white;

581 }

582

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

584 content: '';

585 position: absolute;

586 top: -6px;

587 left: 44px;

588 width: 0;

589 height: 0;

590 border-inline-start: 6px solid transparent;

591 border-inline-end: 6px solid transparent;

592 border-bottom: 6px solid $negative;

593 }

594

595

596 .tab-container .nav-tabs {

597 text-align: start;

598 border-bottom: 1px solid #DDD;

599 @include lightDark(border-color, #ddd, #444);

600 margin-bottom: $-m;

601 .tab-item {

602 padding: $-s;

603 @include lightDark(color, #666, #999);

604 &.selected {

605 border-bottom-width: 3px;

606 }

607 }

608 }

609

610 .nav-tabs {

611 text-align: center;

612 a, .tab-item {

613 padding: $-m;

614 display: inline-block;

615 @include lightDark(color, #666, #999);

616 cursor: pointer;

617 border-right: 1px solid rgba(0, 0, 0, 0.1);

618 border-bottom: 2px solid transparent;

619 &.selected {

620 border-bottom: 2px solid var(--color-primary);

621 }

622 &:last-child {

623 border-right: 0;

624 }

625 }

626 }

627

628 .image-picker .none {

629 display: none;

630 }

631

632 .code-editor .CodeMirror {

633 height: 400px;

634 }

635

636 .code-editor .lang-options {

637 max-width: 540px;

638 margin-bottom: $-s;

639 a {

640 margin-inline-end: $-xs;

641 text-decoration: underline;

642 }

643 }

644

645 @include smaller-than($m) {

646 .code-editor .lang-options {

647 max-width: 100%;

648 }

649 .code-editor .CodeMirror {

650 height: 200px;

651 }

652 }

653

654 .comment-box {

655 border-radius: 4px;

656 border: 1px solid #DDD;

657 @include lightDark(border-color, #ddd, #000);

658 @include lightDark(background-color, #FFF, #222);

659 .content {

660 font-size: 0.666em;

661 p, ul, ol {

662 font-size: $fs-m;

663 margin: .5em 0;

664 }

665 }

666 .actions {

667 opacity: 0;

668 transition: opacity ease-in-out 120ms;

669 }

670 &:hover .actions, &:focus-within .actions {

671 opacity: 1;

672 }

673 }

674

675 .comment-box .header {

676 .meta {

677 img, a, span {

678 display: inline-block;

679 vertical-align: top;

680 }

681 a, span {

682 padding: $-xxs 0 $-xxs 0;

683 line-height: 1.6;

684 }

685 a { color: #666; }

686 span {

687 padding-inline-start: $-xxs;

688 }

689 }

690 .text-muted {

691 color: #999;

692 }

693 }

694

695 #tag-manager .drag-card {

696 max-width: 500px;

697 }

698

699 .permissions-table [permissions-table-toggle-all-in-row] {

700 display: none;

701 }

702 .permissions-table tr:hover [permissions-table-toggle-all-in-row] {

703 display: inline;

704 }

705

706 .template-item {

707 cursor: pointer;

708 position: relative;

709 &:hover, .template-item-actions button:hover {

710 background-color: #F2F2F2;

711 }

712 .template-item-actions {

713 position: absolute;

714 top: 0;

715 right: 0;

716 width: 50px;

717 height: 100%;

718 display: flex;

719 flex-direction: column;

720 border-inline-start: 1px solid #DDD;

721 }

722 .template-item-actions button {

723 cursor: pointer;

724 flex: 1;

725 background: #FFF;

726 border: 0;

727 border-top: 1px solid #DDD;

728 }

729 .template-item-actions button:first-child {

730 border-top: 0;

731 }

732 }

733

734

735 .dropdown-search {

736 position: relative;

737 }

738 .dropdown-search-toggle-breadcrumb {

739 border: 1px solid transparent;

740 border-radius: 4px;

741 line-height: normal;

742 padding: $-xs;

743 &:hover {

744 border-color: #DDD;

745 }

746 .svg-icon {

747 margin-inline-end: 0;

748 }

749 }

750 .dropdown-search-toggle-select {

751 display: flex;

752 gap: $-s;

753 line-height: normal;

754 .svg-icon {

755 height: 16px;

756 margin: 0;

757 }

758 .avatar {

759 height: 22px;

760 width: 22px;

761 }

762 .avatar + span {

763 max-width: 100%;

764 overflow: hidden;

765 text-overflow: ellipsis;

766 white-space: nowrap;

767 }

768 .dropdown-search-toggle-caret {

769 font-size: 1.15rem;

770 }

771 }

772 .dropdown-search-toggle-select-label {

773 min-width: 0;

774 white-space: nowrap;

775 }

776 .dropdown-search-toggle-select-caret {

777 font-size: 1.5rem;

778 line-height: 0;

779 margin-left: auto;

780 margin-top: -2px;

781 }

782

783 .dropdown-search-dropdown {

784 box-shadow: $bs-med;

785 overflow: hidden;

786 min-height: 100px;

787 width: 240px;

788 display: none;

789 position: absolute;

790 z-index: 80;

791 right: 0;

792 top: 0;

793 margin-top: $-m;

794 @include rtl {

795 right: auto;

796 left: -$-m;

797 }

798 .dropdown-search-search .svg-icon {

799 position: absolute;

800 left: $-s;

801 @include rtl {

802 right: $-s;

803 left: auto;

804 }

805 top: 11px;

806 fill: #888;

807 pointer-events: none;

808 }

809 .dropdown-search-list {

810 max-height: 400px;

811 overflow-y: scroll;

812 text-align: start;

813 }

814 .dropdown-search-item {

815 padding: $-s $-m;

816 &:hover,&:focus {

817 background-color: #F2F2F2;

818 text-decoration: none;

819 }

820 }

821 input, input:focus {

822 padding-inline-start: $-xl;

823 border-radius: 0;

824 border: 0;

825 border-bottom: 1px solid #DDD;

826 }

827 input:focus {

828 outline: 0;

829 }

830 }

831

832 @include smaller-than($m) {

833 .dropdown-search-dropdown {

834 position: fixed;

835 right: auto;

836 left: $-m;

837 }

838 .dropdown-search-dropdown .dropdown-search-list {

839 max-height: 240px;

840 }

841 }