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

2 // System wide notifications

3 [notification] {

4 position: fixed;

5 top: 0;

6 right: 0;

7 margin: $-xl;

8 padding: $-m $-l;

9 background-color: #FFF;

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

11 border-radius: 4px;

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

13 box-shadow: $bs-large;

14 z-index: 999999;

15 cursor: pointer;

16 max-width: 360px;

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

18 transform: translateX(580px);

19 display: grid;

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

21 color: #444;

22 font-weight: 700;

23 span, svg {

24 vertical-align: middle;

25 justify-self: center;

26 align-self: center;

27 }

28 svg {

29 width: 2.8rem;

30 height: 2.8rem;

31 padding-inline-end: $-s;

32 fill: currentColor;

33 }

34 .dismiss {

35 margin-top: -8px;

36 svg {

37 height: 1.0rem;

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

39 }

40 }

41 span {

42 vertical-align: middle;

43 line-height: 1.3;

44 @include whenDark {

45 color: #BBB;

46 }

47 }

48 &.pos {

49 color: $positive;

50 }

51 &.neg {

52 color: $negative;

53 }

54 &.warning {

55 color: $warning;

56 }

57 &.showing {

58 transform: translateX(0);

59 }

60 &.showing:hover {

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

62 }

63 }

65 .chapter-contents-toggle {

66 cursor: pointer;

67 margin: 0;

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

69 user-select: none;

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

71 margin-inline-end: 0;

72 font-size: 1rem;

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

74 transform: rotate(0deg);

75 transform-origin: 50% 50%;

76 }

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

78 transform: rotate(90deg);

79 }

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

81 margin-inline-start: $-xxs;

82 }

83 }

85 [overlay], .popup-background {

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

87 position: fixed;

88 z-index: 95536;

89 width: 100%;

90 height: 100%;

91 min-width: 100%;

92 min-height: 100%;

93 top: 0;

94 left: 0;

95 right: 0;

96 bottom: 0;

97 align-items: center;

98 justify-content: center;

99 display: none;

100 }

101

102 .popup-body-wrap {

103 display: flex;

104 }

105

106 .popup-body {

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

108 max-height: 90%;

109 max-width: 1200px;

110 width: 90%;

111 height: auto;

112 margin: 2% auto;

113 border-radius: 4px;

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

115 overflow: hidden;

116 z-index: 999;

117 display: flex;

118 flex-direction: column;

119 &.small {

120 margin: 2% auto;

121 width: 800px;

122 max-width: 90%;

123 }

124 &.very-small {

125 margin: 2% auto;

126 width: 600px;

127 max-width: 90%;

128 }

129 &:before {

130 display: flex;

131 align-self: flex-start;

132 }

133 .popup-content {

134 overflow-y: auto;

135 }

136 &:focus {

137 outline: 0;

138 }

139 }

140

141 .popup-header button, .popup-footer button {

142 margin: 0;

143 border-radius: 0;

144 box-shadow: none;

145 color: #FFF;

146 padding: $-xs $-m;

147 }

148

149 .popup-header button:not(.popup-header-close) {

150 font-size: 0.8rem;

151 }

152

153 .popup-header button:hover {

154 background-color: rgba(255, 255, 255, 0.1);

155 }

156

157 .popup-footer {

158 justify-content: end;

159 background-color: var(--color-primary-light);

160 min-height: 41px;

161 button {

162 padding: 10px $-m;

163 }

164 }

165

166 .popup-header-close {

167 border: 0;

168 color: #FFF;

169 font-size: 16px;

170 cursor: pointer;

171 svg {

172 margin-right: 0;

173 }

174 }

175

176 .popup-header, .popup-footer {

177 display: flex;

178 position: relative;

179 height: 40px;

180 flex: 0;

181 .popup-title {

182 color: #FFF;

183 margin-right: auto;

184 padding: 8px $-m;

185 }

186 &.flex-container-row {

187 display: flex !important;

188 }

189 }

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

191 height: 444px;

192 min-height: 444px;

193 }

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

195 margin: 0;

196 }

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

198 flex: 1;

199 }

200

201 .image-manager-body {

202 min-height: 70vh;

203 }

204

205 .dropzone-container {

206 position: relative;

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

208 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");

209 }

210

211 .image-manager-list .image {

212 display: block;

213 position: relative;

214 border-radius: 0;

215 float: left;

216 margin: 0;

217 cursor: pointer;

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

219 height: auto;

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

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

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

223 overflow: hidden;

224 &.selected {

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

226 outline: currentColor 2px solid;

227 }

228 img {

229 width: 100%;

230 max-width: 100%;

231 display: block;

232 }

233 .image-meta {

234 position: absolute;

235 width: 100%;

236 bottom: 0;

237 left: 0;

238 color: #EEE;

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

240 font-size: 10px;

241 padding: 3px 4px;

242 span {

243 display: block;

244 }

245 }

246 @include smaller-than($xl) {

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

248 }

249 @include smaller-than($m) {

250 .image-meta {

251 display: none;

252 }

253 }

254 }

255

256 .image-manager .load-more {

257 display: block;

258 text-align: center;

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

260 padding: $-s $-m;

261 color: #AAA;

262 clear: both;

263 font-size: 20px;

264 cursor: pointer;

265 font-style: italic;

266 }

267

268 .image-manager .loading-container {

269 text-align: center;

270 }

271

272 .image-manager-sidebar {

273 width: 300px;

274 overflow-y: auto;

275 overflow-x: hidden;

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

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

278 .inner {

279 min-height: auto;

280 padding: $-m;

281 }

282 img {

283 max-width: 100%;

284 max-height: 180px;

285 display: block;

286 margin: 0 auto $-m auto;

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

288 }

289 .image-manager-viewer {

290 height: 196px;

291 display: flex;

292 align-items: center;

293 justify-content: center;

294 a {

295 display: inline-block;

296 }

297 }

298 .dropzone-container {

299 border-bottom: 1px solid #DDD;

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

301 }

302 }

303

304 .image-manager-list {

305 overflow-y: scroll;

306 flex: 1;

307 }

308

309 .image-manager-content {

310 display: flex;

311 flex-direction: column;

312 flex: 1;

313 .container {

314 width: 100%;

315 }

316 .full-tab {

317 text-align: center;

318 }

319 }

320

321 // Dropzone

322 /*

323 * The MIT License

325 */

326 .dz-message {

327 font-size: 1em;

328 line-height: 2.85;

329 font-style: italic;

330 color: #888;

331 text-align: center;

332 cursor: pointer;

333 padding: $-l $-m;

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

335 }

336

337 .dz-drag-hover .dz-message {

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

339 color: #EEE;

340 }

341

342 @keyframes passing-through {

343 0% {

344 opacity: 0;

345 transform: translateY(40px);

346 }

347 30%, 70% {

348 opacity: 1;

349 transform: translateY(0px);

350 }

351 100% {

352 opacity: 0;

353 transform: translateY(-40px);

354 }

355 }

356

357 @keyframes slide-in {

358 0% {

359 opacity: 0;

360 transform: translateY(40px);

361 }

362 30% {

363 opacity: 1;

364 transform: translateY(0px);

365 }

366 }

367

368 @keyframes pulse {

369 0% {

370 transform: scale(1);

371 }

372 10% {

373 transform: scale(1.1);

374 }

375 20% {

376 transform: scale(1);

377 }

378 }

379

380 .dropzone, .dropzone * {

381 box-sizing: border-box;

382 }

383

384 .dz-preview {

385 position: relative;

386 display: inline-block;

387 vertical-align: top;

388 margin: 12px;

389 min-height: 80px;

390 }

391

392 .dz-preview:hover {

393 z-index: 1000;

394 }

395

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

397 opacity: 1;

398 }

399

400 .dz-preview.dz-file-preview .dz-image {

401 border-radius: 4px;

402 background: #e9e9e9;

403 }

404

405 .dz-preview.dz-file-preview .dz-details {

406 opacity: 1;

407 }

408

409 .dz-preview.dz-image-preview {

410 background: white;

411 }

412

413 .dz-preview.dz-image-preview .dz-details {

414 transition: opacity 0.2s linear;

415 }

416

417 .dz-preview .dz-remove {

418 font-size: 13px;

419 text-align: center;

420 display: block;

421 cursor: pointer;

422 border: none;

423 margin-top: 3px;

424 }

425

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

427 text-decoration: underline;

428 }

429

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

431 opacity: 1;

432 }

433

434 .dz-preview .dz-details {

435 z-index: 20;

436 position: absolute;

437 top: 0;

438 left: 0;

439 opacity: 0;

440 font-size: 10px;

441 min-width: 100%;

442 max-width: 100%;

443 padding: 6px 3px;

444 text-align: center;

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

446 line-height: 150%;

447 }

448

449 .dz-preview .dz-details .dz-size {

450 margin-bottom: 0.5em;

451 font-size: 12px;

452 }

453

454 .dz-preview .dz-details .dz-filename {

455 white-space: nowrap;

456 }

457

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

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

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

461 }

462

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

464 overflow: hidden;

465 text-overflow: ellipsis;

466 }

467

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

469 border: 1px solid transparent;

470 }

471

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

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

474 padding: 0 0.4em;

475 border-radius: 3px;

476 }

477

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

479 filter: blur(8px);

480 }

481

482 .dz-preview .dz-image {

483 border-radius: 4px;

484 overflow: hidden;

485 width: 80px;

486 height: 80px;

487 position: relative;

488 display: block;

489 z-index: 10;

490 }

491

492 .dz-preview .dz-image img {

493 display: block;

494 }

495

496 .dz-preview.dz-success .dz-success-mark {

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

498 }

499

500 .dz-preview.dz-error .dz-error-mark {

501 opacity: 1;

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

503 }

504

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

506 pointer-events: none;

507 opacity: 0;

508 z-index: 1001;

509 position: absolute;

510 display: block;

511 top: 50%;

512 left: 50%;

513 margin-inline-start: -27px;

514 margin-top: -35px;

515 }

516

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

518 display: block;

519 width: 54px;

520 height: 54px;

521 }

522

523 .dz-preview.dz-processing .dz-progress {

524 opacity: 1;

525 transition: all 0.2s linear;

526 }

527

528 .dz-preview.dz-complete .dz-progress {

529 opacity: 0;

530 transition: opacity 0.4s ease-in;

531 }

532

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

534 animation: pulse 6s ease infinite;

535 }

536

537 .dz-preview .dz-progress {

538 opacity: 1;

539 z-index: 1000;

540 pointer-events: none;

541 position: absolute;

542 height: 16px;

543 left: 50%;

544 top: 50%;

545 margin-top: -8px;

546 width: 80px;

547 margin-inline-start: -40px;

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

549 transform: scale(1);

550 border-radius: 8px;

551 overflow: hidden;

552 }

553

554 .dz-preview .dz-progress .dz-upload {

555 background: #333;

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

557 position: absolute;

558 top: 0;

559 left: 0;

560 bottom: 0;

561 width: 0;

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

563 }

564

565 .dz-preview.dz-error .dz-error-message {

566 display: block;

567 }

568

569 .dz-preview.dz-error {

570 .dz-image, .dz-details {

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

572 opacity: 1;

573 pointer-events: auto;

574 }

575 }

576 }

577

578 .dz-preview .dz-error-message {

579 pointer-events: none;

580 z-index: 1000;

581 position: absolute;

582 display: block;

583 display: none;

584 opacity: 0;

585 transition: opacity 0.3s ease;

586 border-radius: 4px;

587 font-size: 12px;

588 line-height: 1.2;

589 top: 88px;

590 left: -12px;

591 width: 160px;

592 background: $negative;

593 padding: $-xs;

594 color: white;

595 }

596

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

598 content: '';

599 position: absolute;

600 top: -6px;

601 left: 44px;

602 width: 0;

603 height: 0;

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

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

606 border-bottom: 6px solid $negative;

607 }

608

609

610 .tab-container .nav-tabs {

611 text-align: start;

612 border-bottom: 1px solid #DDD;

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

614 margin-bottom: $-m;

615 .tab-item {

616 padding: $-s;

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

618 &.selected {

619 border-bottom-width: 3px;

620 }

621 }

622 }

623

624 .nav-tabs {

625 text-align: center;

626 a, .tab-item {

627 padding: $-m;

628 display: inline-block;

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

630 cursor: pointer;

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

632 border-bottom: 2px solid transparent;

633 &.selected {

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

635 }

636 &:last-child {

637 border-right: 0;

638 }

639 }

640 }

641

642 .image-picker .none {

643 display: none;

644 }

645

646 .code-editor .CodeMirror {

647 height: auto;

648 min-height: 50vh;

649 border-bottom: 0;

650 }

651

652 .code-editor .lang-options {

653 overflow-y: scroll;

654 flex-basis: 200px;

655 flex-grow: 1;

656 }

657

658 .code-editor .lang-options button {

659 display: block;

660 padding: $-xs $-m;

661 border-bottom: 1px solid;

662 @include lightDark(color, #333, #AAA);

663 @include lightDark(border-bottom-color, #EEE, #000);

664 cursor: pointer;

665 width: 100%;

666 text-align: left;

667 font-family: $mono;

668 font-size: 0.7rem;

669 &:hover, &.active {

670 background-color: var(--color-primary-light);

671 color: var(--color-primary);

672 }

673 }

674

675 .code-editor label {

676 background-color: var(--color-primary-light);

677 width: 100%;

678 color: var(--color-primary);

679 padding: $-xxs $-m;

680 margin-bottom: 0;

681 }

682

683 .code-editor-language-list {

684 position: relative;

685 width: 160px;

686 z-index: 2;

687 align-items: stretch;

688 }

689

690 .code-editor-language-list input {

691 border-radius: 0;

692 border: 0;

693 border-bottom: 1px solid #DDD;

694 padding: $-xs $-m;

695 }

696

697 .code-editor-main {

698 flex: 1;

699 min-width: 0;

700 .CodeMirror {

701 margin-bottom: 0;

702 z-index: 1;

703 max-width: 100%;

704 width: 100%;

705 }

706 }

707

708 @include smaller-than($s) {

709 .code-editor .lang-options {

710 display: none;

711 }

712 .code-editor-body-wrap {

713 flex-direction: column;

714 }

715 .code-editor-language-list, .code-editor-language-list input {

716 width: 100%;

717 }

718 }

719

720 .comment-box {

721 border-radius: 4px;

722 border: 1px solid #DDD;

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

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

725 .content {

726 font-size: 0.666em;

727 p, ul, ol {

728 font-size: $fs-m;

729 margin: .5em 0;

730 }

731 }

732 .actions {

733 opacity: 0;

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

735 }

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

737 opacity: 1;

738 }

739 }

740

741 .comment-box .header {

742 .meta {

743 img, a, span {

744 display: inline-block;

745 vertical-align: top;

746 }

747 a, span {

748 padding: $-xxs 0 $-xxs 0;

749 line-height: 1.6;

750 }

751 a { color: #666; }

752 span {

753 padding-inline-start: $-xxs;

754 }

755 }

756 .text-muted {

757 color: #999;

758 }

759 }

760

761 #tag-manager .drag-card {

762 max-width: 500px;

763 }

764

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

766 display: none;

767 }

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

769 display: inline;

770 }

771

772 .template-item {

773 cursor: pointer;

774 position: relative;

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

776 background-color: #F2F2F2;

777 }

778 .template-item-actions {

779 position: absolute;

780 top: 0;

781 right: 0;

782 width: 50px;

783 height: 100%;

784 display: flex;

785 flex-direction: column;

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

787 }

788 .template-item-actions button {

789 cursor: pointer;

790 flex: 1;

791 background: #FFF;

792 border: 0;

793 border-top: 1px solid #DDD;

794 }

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

796 border-top: 0;

797 }

798 }

799

800

801 .dropdown-search {

802 position: relative;

803 }

804 .dropdown-search-toggle-breadcrumb {

805 border: 1px solid transparent;

806 border-radius: 4px;

807 line-height: normal;

808 padding: $-xs;

809 &:hover {

810 border-color: #DDD;

811 }

812 .svg-icon {

813 margin-inline-end: 0;

814 }

815 }

816 .dropdown-search-toggle-select {

817 display: flex;

818 gap: $-s;

819 line-height: normal;

820 .svg-icon {

821 height: 16px;

822 margin: 0;

823 }

824 .avatar {

825 height: 22px;

826 width: 22px;

827 }

828 .avatar + span {

829 max-width: 100%;

830 overflow: hidden;

831 text-overflow: ellipsis;

832 white-space: nowrap;

833 }

834 .dropdown-search-toggle-caret {

835 font-size: 1.15rem;

836 }

837 }

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

839 min-width: 0;

840 white-space: nowrap;

841 }

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

843 font-size: 1.5rem;

844 line-height: 0;

845 margin-left: auto;

846 margin-top: -2px;

847 }

848

849 .dropdown-search-dropdown {

850 box-shadow: $bs-med;

851 overflow: hidden;

852 min-height: 100px;

853 width: 240px;

854 display: none;

855 position: absolute;

856 z-index: 80;

857 right: 0;

858 top: 0;

859 margin-top: $-m;

860 @include rtl {

861 right: auto;

862 left: -$-m;

863 }

864 .dropdown-search-search .svg-icon {

865 position: absolute;

866 left: $-s;

867 @include rtl {

868 right: $-s;

869 left: auto;

870 }

871 top: 11px;

872 fill: #888;

873 pointer-events: none;

874 }

875 .dropdown-search-list {

876 max-height: 400px;

877 overflow-y: scroll;

878 text-align: start;

879 }

880 .dropdown-search-item {

881 padding: $-s $-m;

882 &:hover,&:focus {

883 background-color: #F2F2F2;

884 text-decoration: none;

885 }

886 }

887 input, input:focus {

888 padding-inline-start: $-xl;

889 border-radius: 0;

890 border: 0;

891 border-bottom: 1px solid #DDD;

892 }

893 input:focus {

894 outline: 0;

895 }

896 }

897

898 @include smaller-than($m) {

899 .dropdown-search-dropdown {

900 position: fixed;

901 right: auto;

902 left: $-m;

903 }

904 .dropdown-search-dropdown .dropdown-search-list {

905 max-height: 240px;

906 }

907 }