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-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: $-xs;

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 &:before {

124 display: flex;

125 align-self: flex-start;

126 }

127 .popup-content {

128 overflow-y: auto;

129 }

130 &:focus {

131 outline: 0;

132 }

133 }

134

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

136 position: absolute;

137 top: 0;

138 right: 0;

139 margin: 0;

140 height: 40px;

141 border-radius: 0;

142 box-shadow: none;

143 &:active {

144 outline: 0;

145 }

146 }

147 .popup-header-close {

148 background-color: transparent;

149 border: 0;

150 color: #FFF;

151 font-size: 16px;

152 padding: 0 $-m;

153 }

154

155 .popup-header, .popup-footer {

156 display: block !important;

157 position: relative;

158 height: 40px;

159 flex: none !important;

160 .popup-title {

161 color: #FFF;

162 padding: 8px $-m;

163 }

164 }

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

166 height: 444px;

167 min-height: 444px;

168 }

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

170 margin: 0;

171 }

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

173 flex: 1;

174 }

175

176 .image-manager-body {

177 min-height: 70vh;

178 }

179

180 .dropzone-container {

181 position: relative;

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

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

184 }

185

186 .image-manager-list .image {

187 display: block;

188 position: relative;

189 border-radius: 0;

190 float: left;

191 margin: 0;

192 cursor: pointer;

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

194 height: auto;

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

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

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

198 overflow: hidden;

199 &.selected {

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

201 outline: currentColor 2px solid;

202 }

203 img {

204 width: 100%;

205 max-width: 100%;

206 display: block;

207 }

208 .image-meta {

209 position: absolute;

210 width: 100%;

211 bottom: 0;

212 left: 0;

213 color: #EEE;

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

215 font-size: 10px;

216 padding: 3px 4px;

217 span {

218 display: block;

219 }

220 }

221 @include smaller-than($xl) {

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

223 }

224 @include smaller-than($m) {

225 .image-meta {

226 display: none;

227 }

228 }

229 }

230

231 .image-manager .load-more {

232 display: block;

233 text-align: center;

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

235 padding: $-s $-m;

236 color: #AAA;

237 clear: both;

238 font-size: 20px;

239 cursor: pointer;

240 font-style: italic;

241 }

242

243 .image-manager .loading-container {

244 text-align: center;

245 }

246

247 .image-manager-sidebar {

248 width: 300px;

249 overflow-y: auto;

250 overflow-x: hidden;

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

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

253 .inner {

254 min-height: auto;

255 padding: $-m;

256 }

257 img {

258 max-width: 100%;

259 max-height: 180px;

260 display: block;

261 margin: 0 auto $-m auto;

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

263 }

264 .image-manager-viewer {

265 height: 196px;

266 display: flex;

267 align-items: center;

268 justify-content: center;

269 a {

270 display: inline-block;

271 }

272 }

273 .dropzone-container {

274 border-bottom: 1px solid #DDD;

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

276 }

277 }

278

279 .image-manager-list {

280 overflow-y: scroll;

281 flex: 1;

282 }

283

284 .image-manager-content {

285 display: flex;

286 flex-direction: column;

287 flex: 1;

288 .container {

289 width: 100%;

290 }

291 .full-tab {

292 text-align: center;

293 }

294 }

295

296 .image-manager .corner-button {

297 margin: 0;

298 border-radius: 0;

299 padding: $-m;

300 }

301

302 // Dropzone

303 /*

304 * The MIT License

306 */

307 .dz-message {

308 font-size: 1em;

309 line-height: 2.85;

310 font-style: italic;

311 color: #888;

312 text-align: center;

313 cursor: pointer;

314 padding: $-l $-m;

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

316 }

317

318 .dz-drag-hover .dz-message {

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

320 color: #EEE;

321 }

322

323 @keyframes passing-through {

324 0% {

325 opacity: 0;

326 transform: translateY(40px);

327 }

328 30%, 70% {

329 opacity: 1;

330 transform: translateY(0px);

331 }

332 100% {

333 opacity: 0;

334 transform: translateY(-40px);

335 }

336 }

337

338 @keyframes slide-in {

339 0% {

340 opacity: 0;

341 transform: translateY(40px);

342 }

343 30% {

344 opacity: 1;

345 transform: translateY(0px);

346 }

347 }

348

349 @keyframes pulse {

350 0% {

351 transform: scale(1);

352 }

353 10% {

354 transform: scale(1.1);

355 }

356 20% {

357 transform: scale(1);

358 }

359 }

360

361 .dropzone, .dropzone * {

362 box-sizing: border-box;

363 }

364

365 .dz-preview {

366 position: relative;

367 display: inline-block;

368 vertical-align: top;

369 margin: 12px;

370 min-height: 80px;

371 }

372

373 .dz-preview:hover {

374 z-index: 1000;

375 }

376

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

378 opacity: 1;

379 }

380

381 .dz-preview.dz-file-preview .dz-image {

382 border-radius: 4px;

383 background: #e9e9e9;

384 }

385

386 .dz-preview.dz-file-preview .dz-details {

387 opacity: 1;

388 }

389

390 .dz-preview.dz-image-preview {

391 background: white;

392 }

393

394 .dz-preview.dz-image-preview .dz-details {

395 transition: opacity 0.2s linear;

396 }

397

398 .dz-preview .dz-remove {

399 font-size: 13px;

400 text-align: center;

401 display: block;

402 cursor: pointer;

403 border: none;

404 margin-top: 3px;

405 }

406

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

408 text-decoration: underline;

409 }

410

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

412 opacity: 1;

413 }

414

415 .dz-preview .dz-details {

416 z-index: 20;

417 position: absolute;

418 top: 0;

419 left: 0;

420 opacity: 0;

421 font-size: 10px;

422 min-width: 100%;

423 max-width: 100%;

424 padding: 6px 3px;

425 text-align: center;

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

427 line-height: 150%;

428 }

429

430 .dz-preview .dz-details .dz-size {

431 margin-bottom: 0.5em;

432 font-size: 12px;

433 }

434

435 .dz-preview .dz-details .dz-filename {

436 white-space: nowrap;

437 }

438

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

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

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

442 }

443

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

445 overflow: hidden;

446 text-overflow: ellipsis;

447 }

448

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

450 border: 1px solid transparent;

451 }

452

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

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

455 padding: 0 0.4em;

456 border-radius: 3px;

457 }

458

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

460 filter: blur(8px);

461 }

462

463 .dz-preview .dz-image {

464 border-radius: 4px;

465 overflow: hidden;

466 width: 80px;

467 height: 80px;

468 position: relative;

469 display: block;

470 z-index: 10;

471 }

472

473 .dz-preview .dz-image img {

474 display: block;

475 }

476

477 .dz-preview.dz-success .dz-success-mark {

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

479 }

480

481 .dz-preview.dz-error .dz-error-mark {

482 opacity: 1;

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

484 }

485

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

487 pointer-events: none;

488 opacity: 0;

489 z-index: 1001;

490 position: absolute;

491 display: block;

492 top: 50%;

493 left: 50%;

494 margin-inline-start: -27px;

495 margin-top: -35px;

496 }

497

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

499 display: block;

500 width: 54px;

501 height: 54px;

502 }

503

504 .dz-preview.dz-processing .dz-progress {

505 opacity: 1;

506 transition: all 0.2s linear;

507 }

508

509 .dz-preview.dz-complete .dz-progress {

510 opacity: 0;

511 transition: opacity 0.4s ease-in;

512 }

513

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

515 animation: pulse 6s ease infinite;

516 }

517

518 .dz-preview .dz-progress {

519 opacity: 1;

520 z-index: 1000;

521 pointer-events: none;

522 position: absolute;

523 height: 16px;

524 left: 50%;

525 top: 50%;

526 margin-top: -8px;

527 width: 80px;

528 margin-inline-start: -40px;

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

530 transform: scale(1);

531 border-radius: 8px;

532 overflow: hidden;

533 }

534

535 .dz-preview .dz-progress .dz-upload {

536 background: #333;

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

538 position: absolute;

539 top: 0;

540 left: 0;

541 bottom: 0;

542 width: 0;

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

544 }

545

546 .dz-preview.dz-error .dz-error-message {

547 display: block;

548 }

549

550 .dz-preview.dz-error {

551 .dz-image, .dz-details {

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

553 opacity: 1;

554 pointer-events: auto;

555 }

556 }

557 }

558

559 .dz-preview .dz-error-message {

560 pointer-events: none;

561 z-index: 1000;

562 position: absolute;

563 display: block;

564 display: none;

565 opacity: 0;

566 transition: opacity 0.3s ease;

567 border-radius: 4px;

568 font-size: 12px;

569 line-height: 1.2;

570 top: 88px;

571 left: -12px;

572 width: 160px;

573 background: $negative;

574 padding: $-xs;

575 color: white;

576 }

577

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

579 content: '';

580 position: absolute;

581 top: -6px;

582 left: 44px;

583 width: 0;

584 height: 0;

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

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

587 border-bottom: 6px solid $negative;

588 }

589

590

591 .tab-container .nav-tabs {

592 text-align: start;

593 border-bottom: 1px solid #DDD;

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

595 margin-bottom: $-m;

596 .tab-item {

597 padding: $-s;

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

599 &.selected {

600 border-bottom-width: 3px;

601 }

602 }

603 }

604

605 .nav-tabs {

606 text-align: center;

607 a, .tab-item {

608 padding: $-m;

609 display: inline-block;

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

611 cursor: pointer;

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

613 border-bottom: 2px solid transparent;

614 &.selected {

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

616 }

617 &:last-child {

618 border-right: 0;

619 }

620 }

621 }

622

623 .image-picker .none {

624 display: none;

625 }

626

627 .code-editor .CodeMirror {

628 height: 400px;

629 }

630

631 .code-editor .lang-options {

632 max-width: 540px;

633 margin-bottom: $-s;

634 a {

635 margin-inline-end: $-xs;

636 text-decoration: underline;

637 }

638 }

639

640 @include smaller-than($m) {

641 .code-editor .lang-options {

642 max-width: 100%;

643 }

644 .code-editor .CodeMirror {

645 height: 200px;

646 }

647 }

648

649 .comment-box {

650 border-radius: 4px;

651 border: 1px solid #DDD;

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

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

654 .content {

655 font-size: 0.666em;

656 p, ul, ol {

657 font-size: $fs-m;

658 margin: .5em 0;

659 }

660 }

661 .actions {

662 opacity: 0;

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

664 }

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

666 opacity: 1;

667 }

668 }

669

670 .comment-box .header {

671 .meta {

672 img, a, span {

673 display: inline-block;

674 vertical-align: top;

675 }

676 a, span {

677 padding: $-xxs 0 $-xxs 0;

678 line-height: 1.6;

679 }

680 a { color: #666; }

681 span {

682 padding-inline-start: $-xxs;

683 }

684 }

685 .text-muted {

686 color: #999;

687 }

688 }

689

690 #tag-manager .drag-card {

691 max-width: 500px;

692 }

693

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

695 display: none;

696 }

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

698 display: inline;

699 }

700

701 .template-item {

702 cursor: pointer;

703 position: relative;

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

705 background-color: #F2F2F2;

706 }

707 .template-item-actions {

708 position: absolute;

709 top: 0;

710 right: 0;

711 width: 50px;

712 height: 100%;

713 display: flex;

714 flex-direction: column;

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

716 }

717 .template-item-actions button {

718 cursor: pointer;

719 flex: 1;

720 background: #FFF;

721 border: 0;

722 border-top: 1px solid #DDD;

723 }

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

725 border-top: 0;

726 }

727 }

728

729 .dropdown-search-dropdown {

730 box-shadow: $bs-med;

731 overflow: hidden;

732 min-height: 100px;

733 width: 240px;

734 display: none;

735 position: absolute;

736 z-index: 80;

737 right: -$-m;

738 @include rtl {

739 right: auto;

740 left: -$-m;

741 }

742 .dropdown-search-search .svg-icon {

743 position: absolute;

744 left: $-s;

745 @include rtl {

746 right: $-s;

747 left: auto;

748 }

749 top: 11px;

750 fill: #888;

751 pointer-events: none;

752 }

753 .dropdown-search-list {

754 max-height: 400px;

755 overflow-y: scroll;

756 text-align: start;

757 }

758 .dropdown-search-item {

759 padding: $-s $-m;

760 &:hover,&:focus {

761 background-color: #F2F2F2;

762 text-decoration: none;

763 }

764 }

765 input {

766 padding-inline-start: $-xl;

767 border-radius: 0;

768 border: 0;

769 border-bottom: 1px solid #DDD;

770 }

771 }

772

773 @include smaller-than($m) {

774 .dropdown-search-dropdown {

775 position: fixed;

776 right: auto;

777 left: $-m;

778 }

779 .dropdown-search-dropdown .dropdown-search-list {

780 max-height: 240px;

781 }

782 }

783

784 .custom-select-input {

785 max-width: 280px;

786 border: 1px solid #D4D4D4;

787 border-radius: 3px;

788 }