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

1 @use "mixins";

2 @use "vars";

5 .book-contents .entity-list-item {

6 .icon {

7 width: 4px;

8 border-radius: 1px;

9 justify-self: stretch;

10 align-self: stretch;

11 height: auto;

12 margin-inline-end: vars.$xs;

13 }

14 .icon:after {

15 opacity: 0.5;

16 }

17 .icon svg {

18 display: none;

19 }

20 p {

21 margin-bottom: 0;

22 }

23 .inner-page {

24 padding-top: 0;

25 padding-bottom: 0;

26 }

27 }

29 .entity-list-item + .chapter-expansion {

30 display: flex;

31 padding: 0 vars.$m vars.$m vars.$m;

32 align-items: center;

33 border: 0;

34 width: 100%;

35 position: relative;

36 > .icon {

37 width: 4px;

38 height: auto;

39 border-radius: 0 0 1px 1px;

40 align-self: stretch;

41 flex-shrink: 0;

42 &:before {

43 position: absolute;

44 top: 0;

45 left: 0;

46 width: 100%;

47 height: 1px;

48 background-color: currentColor;

49 content: '';

50 opacity: 0.5;

51 }

52 &:after {

53 opacity: 0.5;

54 }

55 }

56 .icon svg {

57 display: none;

58 }

59 > .content {

60 flex: 1;

61 }

62 .chapter-contents-toggle {

63 border-radius: 0 4px 4px 0;

64 padding: vars.$xs (vars.$m + vars.$xxs);

65 width: 100%;

66 text-align: start;

67 }

68 .chapter-contents-toggle:hover {

69 background-color: rgba(0, 0, 0, 0.06);

70 }

71 }

73 .entity-list-item.has-children {

74 padding-bottom: 0;

75 > .icon {

76 border-radius: 4px 4px 0 0;

77 }

78 }

80 .inset-list {

81 display: none;

82 .entity-list-item-name {

83 font-size: 1rem;

84 }

85 .entity-list-item-children {

86 padding-top: 0;

87 padding-bottom: 0;

88 }

89 }

91 .sidebar-page-nav {

92 $nav-indent: vars.$m;

93 list-style: none;

94 @include mixins.margin(vars.$s, 0, vars.$m, vars.$xs);

95 position: relative;

96 &:after {

97 content: '';

98 display: block;

99 position: absolute;

100 left: 0;

101 @include mixins.rtl {

102 left: auto;

103 right: 0;

104 }

105 @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));

106 width: 2px;

107 top: 5px;

108 bottom: 5px;

109 z-index: 0;

110 }

111 li {

112 margin-bottom: 4px;

113 font-size: 0.95em;

114 position: relative;

115 }

116 .h1 {

117 padding-inline-start: $nav-indent;

118 }

119 .h2 {

120 padding-inline-start: $nav-indent * 1.5;

121 }

122 .h3 {

123 padding-inline-start: $nav-indent * 2;

124 }

125 .h4 {

126 padding-inline-start: $nav-indent * 2.5;

127 }

128 .h5 {

129 padding-inline-start: $nav-indent*3;

130 }

131 .h6 {

132 padding-inline-start: $nav-indent*3.5;

133 }

134 .current-heading {

135 font-weight: bold;

136 }

137 li:not(.current-heading) .sidebar-page-nav-bullet {

138 @include mixins.lightDark(background-color, #BBB, #666, true);

139 }

140 .sidebar-page-nav-bullet {

141 width: 6px;

142 height: 6px;

143 position: absolute;

144 left: -2px;

145 top: 30%;

146 border-radius: 50%;

147 box-shadow: 0 0 0 6px #F2F2F2;

148 @include mixins.lightDark(box-shadow, 0 0 0 6px #F2F2F2, 0 0 0 6px #111);

149 z-index: 1;

150 @include mixins.rtl {

151 left: auto;

152 right: -2px;

153 }

154 }

155 }

156

157 // Sidebar list

158 .book-tree .sidebar-page-list {

159 list-style: none;

160 @include mixins.margin(vars.$xs, -(vars.$s), 0, -(vars.$s));

161 padding-inline-start: 0;

162 padding-inline-end: 0;

163

164 ul {

165 list-style: none;

166 padding-inline-start: 1rem;

167 padding-inline-end: 0;

168 }

169

170 .entity-list-item {

171 padding-top: 2px;

172 padding-bottom: 2px;

173 background-clip: content-box;

174 border-radius: 0 3px 3px 0;

175 padding-inline-end: 0;

176 .content {

177 width: 100%;

178 padding-top: vars.$xs;

179 padding-bottom: vars.$xs;

180 max-width: calc(100% - 20px);

181 }

182 }

183 .entity-list-item.selected {

184 @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));

185 }

186 .entity-list-item.no-hover {

187 margin-top: -(vars.$xs);

188 padding-inline-end: 0;

189 }

190 .entity-list-item-name {

191 font-size: 1em;

192 margin: 0;

193 margin-inline-end: vars.$m;

194 }

195 .chapter-child-menu {

196 font-size: .8rem;

197 margin-top: -.2rem;

198 margin-inline-start: -1rem;

199 }

200 .chapter-contents-toggle {

201 display: block;

202 width: 100%;

203 text-align: start;

204 padding: vars.$xxs vars.$s (vars.$xxs * 2) vars.$s;

205 border-radius: 0 3px 3px 0;

206 line-height: 1;

207 margin-top: -(vars.$xxs);

208 margin-bottom: -(vars.$xxs);

209 &:hover {

210 @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));

211 }

212 }

213 .entity-list-item .icon {

214 z-index: 2;

215 width: 4px;

216 height: auto;

217 align-self: stretch;

218 flex-shrink: 0;

219 border-radius: 1px;

220 opacity: 0.8;

221 }

222 .entity-list-item .icon:after {

223 opacity: 1;

224 }

225 .entity-list-item .icon svg {

226 display: none;

227 }

228 }

229

230 .chapter-child-menu ul.sub-menu {

231 display: none;

232 padding-inline-start: 0;

233 position: relative;

234 margin-bottom: 0;

235 }

236

237 // Sortable Lists

238 .sortable-page-list, .sortable-page-sublist {

239 list-style: none;

240 }

241 .sort-box {

242 margin-bottom: vars.$m;

243 padding: vars.$m vars.$xl;

244 position: relative;

245 summary:focus {

246 outline: 1px dashed var(--color-primary);

247 outline-offset: 5px;

248 }

249 &::before {

250 pointer-events: none;

251 content: '';

252 border-radius: 4px;

253 opacity: 0.5;

254 border: 2px solid var(--color-book);

255 display: block;

256 top: 0;

257 bottom: 0;

258 left: 0;

259 right: 0;

260 position: absolute;

261 }

262 }

263 .sort-box-options {

264 display: flex;

265 flex-wrap: wrap;

266 justify-content: space-between;

267 }

268 .sort-box-options .button {

269 margin-inline-start: 0;

270 }

271 .sortable-page-list {

272 margin-inline-start: 0;

273 padding: 0;

274 .entity-list-item > span:first-child {

275 align-self: flex-start;

276 }

277 .sortable-selected, .sortable-selected:hover {

278 outline: 1px dotted var(--color-primary);

279 background-color: var(--color-primary-light) !important;

280 }

281 .entity-list-item > div {

282 display: block;

283 flex: 1;

284 }

285 > ul {

286 margin-inline-start: 0;

287 }

288 .sortable-page-sublist {

289 margin-bottom: vars.$m;

290 margin-top: 0;

291 padding-inline-start: vars.$m;

292 }

293 li {

294 @include mixins.lightDark(background-color, #FFF, #222);

295 border: 1px solid;

296 @include mixins.lightDark(border-color, #DDD, #666);

297 margin-top: -1px;

298 min-height: 38px;

299 }

300 li.text-page, li.text-chapter {

301 border-inline-start: 2px solid currentColor;

302 }

303 li:first-child {

304 margin-top: vars.$xs;

305 }

306 }

307 .sortable-page-list li.placeholder {

308 position: relative;

309 }

310 .sortable-page-list li.placeholder:before {

311 position: absolute;

312 }

313 .sort-box summary {

314 list-style: none;

315 font-size: .9rem;

316 cursor: pointer;

317 }

318 .sort-box summary::-webkit-details-marker {

319 display: none;

320 }

321 details.sort-box summary .caret-container svg {

322 transition: transform ease-in-out 120ms;

323 }

324 details.sort-box[open] summary .caret-container svg {

325 transform: rotate(90deg);

326 }

327 .sort-box-actions .icon-button {

328 opacity: .6;

329 }

330 .sort-box .flex-container-row:hover .sort-box-actions .icon-button,

331 .sort-box .flex-container-row:focus-within .sort-box-actions .icon-button {

332 opacity: 1;

333 }

334 .sort-box-actions .icon-button[disabled] {

335 visibility: hidden;

336 }

337 .sort-box-actions .dropdown-menu button[disabled] {

338 display: none;

339 }

340 .sort-list-handle {

341 cursor: grab;

342 }

343

344 .activity-list-item {

345 padding: vars.$s 0;

346 display: grid;

347 grid-template-columns: min-content 1fr;

348 grid-column-gap: vars.$m;

349 font-size: 0.9em;

350 }

351 .card .activity-list-item {

352 padding-block: vars.$s;

353 }

354

355 .user-list-item {

356 display: inline-grid;

357 padding: vars.$s;

358 grid-template-columns: min-content 1fr;

359 grid-column-gap: vars.$m;

360 font-size: 0.9em;

361 align-items: center;

362 > div:first-child {

363 line-height: 0;

364 }

365 }

366

367 ul.pagination {

368 display: inline-flex;

369 list-style: none;

370 margin: vars.$m 0;

371 padding-inline-start: 1px;

372 li:first-child {

373 a, span {

374 border-radius: 3px 0 0 3px;

375 }

376 }

377 li:last-child {

378 a, span {

379 border-radius: 0 3px 3px 0;

380 }

381 }

382 a, span {

383 display: block;

384 padding: vars.$xxs vars.$s;

385 border: 1px solid #CCC;

386 margin-inline-start: -1px;

387 user-select: none;

388 @include mixins.lightDark(color, #555, #eee);

389 @include mixins.lightDark(border-color, #ccc, #666);

390 }

391 li.disabled {

392 cursor: not-allowed;

393 }

394 li.active span {

395 @include mixins.lightDark(color, #111, #eee);

396 @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));

397 }

398 }

399

400 .compact ul.pagination {

401 margin: 0;

402 }

403

404 .entity-list, .icon-list {

405 margin: 0 (-(vars.$m));

406 h4 {

407 margin: 0;

408 }

409 hr {

410 margin: 0;

411 }

412 .text-small.text-muted {

413 color: #AAA;

414 font-size: 0.75em;

415 margin-top: vars.$xs;

416 }

417 .text-muted p.text-muted {

418 margin-top: 0;

419 }

420 .page.draft .text-page {

421 color: var(--color-page-draft);

422 fill: var(--color-page-draft);

423 }

424 > .dropdown-container {

425 display: block;

426 }

427 }

428

429 .icon-list hr {

430 margin: vars.$s vars.$m;

431 max-width: 140px;

432 opacity: 0.25;

433 height: 1.1px;

434 }

435

436 .icon-list hr + hr, .icon-list hr:first-child, .icon-list hr:last-child {

437 display: none;

438 }

439

440 .entity-list-item, .icon-list-item {

441 padding: vars.$s vars.$m;

442 display: flex;

443 align-items: center;

444 gap: vars.$m;

445 background-color: transparent;

446 border: 0;

447 width: 100%;

448 position: relative;

449 word-break: break-word;

450 h4 a {

451 color: #666;

452 }

453 > span:first-child {

454 flex-basis: 1.88em;

455 flex: none;

456 }

457 > span:last-child {

458 flex: 1;

459 text-align: start;

460 }

461 > .content {

462 min-width: 0;

463 }

464 &:not(.no-hover) {

465 cursor: pointer;

466 }

467 &:not(.no-hover):hover {

468 @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));

469 text-decoration: none;

470 border-radius: 4px;

471 }

472 &.outline-hover:hover {

473 background-color: transparent;

474 }

475 &:focus {

476 @include mixins.lightDark(background-color, #eee, #222);

477 outline: 1px dotted #666;

478 outline-offset: -2px;

479 }

480 }

481

482 .entity-list-item.disabled {

483 pointer-events: none;

484 cursor: not-allowed;

485 opacity: 0.8;

486 user-select: none;

487 background: var(--bg-disabled);

488 }

489

490 .entity-list-item-path-sep {

491 display: inline-block;

492 vertical-align: top;

493 position: relative;

494 top: 1px;

495 svg {

496 margin-inline-end: 0;

497 }

498 }

499

500 .split-icon-list-item {

501 display: flex;

502 align-items: center;

503 gap: vars.$m;

504 background-color: transparent;

505 border: 0;

506 width: 100%;

507 position: relative;

508 word-break: break-word;

509 border-radius: 4px;

510 > a {

511 padding: vars.$s vars.$m;

512 display: flex;

513 align-items: center;

514 gap: vars.$m;

515 flex: 1;

516 }

517 > a:hover {

518 text-decoration: none;

519 }

520 .icon {

521 flex-basis: 1.88em;

522 flex: none;

523 }

524 &:hover {

525 @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));

526 }

527 }

528

529 .icon-list-item-dropdown {

530 margin-inline-start: auto;

531 align-self: stretch;

532 display: flex;

533 align-items: stretch;

534 border-inline-start: 1px solid rgba(0, 0, 0, .1);

535 visibility: hidden;

536 }

537 .split-icon-list-item:hover .icon-list-item-dropdown,

538 .split-icon-list-item:focus-within .icon-list-item-dropdown {

539 visibility: visible;

540 }

541 .icon-list-item-dropdown-toggle {

542 padding: vars.$xs;

543 display: flex;

544 align-items: center;

545 cursor: pointer;

546 @include mixins.lightDark(color, #888, #999);

547 svg {

548 margin: 0;

549 }

550 &:hover {

551 @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));

552 }

553 }

554

555 .card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover {

556 @include mixins.lightDark(background-color, #F2F2F2, #2d2d2d);

557 border-radius: 0;

558 }

559 .card .entity-list-item .entity-list-item:hover {

560 background-color: #EEEEEE;

561 }

562

563 .entity-list-item-children {

564 padding: vars.$m vars.$l;

565 > div {

566 overflow: hidden;

567 padding: 0 0 vars.$xs 0;

568 }

569 .entity-chip {

570 text-overflow: ellipsis;

571 height: 2.5em;

572 overflow: hidden;

573 text-align: start;

574 display: block;

575 white-space: nowrap;

576 }

577 > .entity-list > .entity-list-item:last-child {

578 margin-bottom: -(vars.$xs);

579 }

580 }

581

582 .entity-list-item-image {

583 align-self: stretch;

584 width: 140px;

585 flex: none;

586 background-size: cover;

587 background-position: 50% 50%;

588 border-radius: 3px;

589 position: relative;

590 margin-inline-end: vars.$l;

591

592 &.entity-list-item-image-wide {

593 width: 220px;

594 }

595

596 .svg-icon {

597 @include mixins.lightDark(color, #fff, rgba(255, 255, 255, 0.6));

598 font-size: 1.66rem;

599 margin-inline-end: 0;

600 position: absolute;

601 bottom: vars.$xs;

602 left: vars.$xs;

603 }

604

605 @include mixins.smaller-than(vars.$bp-m) {

606 width: 80px;

607 }

608 }

609

610 .chapter > .entity-list-item-image {

611 width: 60px;

612 }

613

614 .entity-list.compact {

615 font-size: 0.6 * vars.$fs-m;

616 h4, a {

617 line-height: 1.2;

618 }

619 .entity-item-snippet {

620 display: none;

621 }

622 .entity-list-item p {

623 font-size: vars.$fs-m * 0.8;

624 padding-top: vars.$xs;

625 }

626 .entity-list-item p:empty {

627 padding-top: 0;

628 }

629 p {

630 margin: 0;

631 }

632 > p.empty-text {

633 display: block;

634 font-size: vars.$fs-m;

635 }

636 hr {

637 margin: 0;

638 }

639 @include mixins.smaller-than(vars.$bp-m) {

640 h4 {

641 font-size: 1.666em;

642 }

643 }

644 }

645

646 .entity-item-tags {

647 font-size: .75rem;

648 opacity: 1;

649 .primary-background-light {

650 background: transparent;

651 }

652 .tag-name {

653 background-color: rgba(0, 0, 0, 0.05);

654 }

655 }

656

657 .dropdown-container {

658 display: inline-block;

659 vertical-align: top;

660 position: relative;

661 }

662

663 .dropdown-menu {

664 display: none;

665 position: absolute;

666 z-index: 999;

667 top: 0;

668 list-style: none;

669 inset-inline-end: 0;

670 margin: vars.$m 0;

671 @include mixins.lightDark(background-color, #fff, #333);

672 box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);

673 border-radius: 3px;

674 min-width: 180px;

675 padding: vars.$xs 0;

676 @include mixins.lightDark(color, #555, #eee);

677 fill: currentColor;

678 text-align: start !important;

679 max-height: 500px;

680 overflow-y: auto;

681 &.anchor-left {

682 inset-inline-end: auto;

683 inset-inline-start: 0;

684 }

685 &.wide {

686 min-width: 220px;

687 }

688 &.xl-limited {

689 width: 280px;

690 max-width: 100%;

691 }

692 .text-muted {

693 color: #999;

694 fill: #999;

695 }

696 li.active a {

697 font-weight: 600;

698 }

699 button {

700 width: 100%;

701 text-align: start;

702 }

703 li.border-bottom {

704 border-bottom: 1px solid #DDD;

705 }

706 li hr {

707 margin: vars.$xs 0;

708 }

709 .icon-item, .text-item, .label-item {

710 padding: 8px vars.$m;

711 @include mixins.lightDark(color, #555, #eee);

712 fill: currentColor;

713 white-space: nowrap;

714 line-height: 1.4;

715 cursor: pointer;

716 &.break-text {

717 white-space: normal;

718 word-wrap: break-word;

719 overflow-wrap: break-word;

720 }

721 &:hover, &:focus {

722 text-decoration: none;

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

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

725 }

726 &:focus {

727 outline: 1px solid var(--color-primary);

728 outline-offset: -2px;

729 }

730 svg {

731 margin-inline-end: vars.$s;

732 display: inline-block;

733 width: 16px;

734 }

735 }

736 .text-item {

737 display: block;

738 }

739 .label-item {

740 display: grid;

741 align-items: center;

742 grid-template-columns: auto min-content;

743 gap: vars.$m;

744 }

745 .label-item > *:nth-child(2) {

746 opacity: 0.7;

747 &:hover {

748 opacity: 1;

749 }

750 }

751 .icon-item {

752 display: grid;

753 align-items: start;

754 grid-template-columns: 16px auto;

755 gap: vars.$m;

756 svg {

757 margin-inline-end: 0;

758 margin-block-start: 1px;

759 }

760 }

761 }

762

763 // Shift in sidebar dropdown menus to prevent shadows

764 // being cut by scrollable container.

765 .tri-layout-right .dropdown-menu,

766 .tri-layout-left .dropdown-menu {

767 inset-inline-end: vars.$xs;

768 }

769

770 // Books grid view

771 .featured-image-container {

772 position: relative;

773 overflow: hidden;

774 min-height: 140px;

775 background-size: cover;

776 background-position: 50% 50%;

777 transition: opacity ease-in-out 240ms;

778 a {

779 display: block;

780 }

781 img {

782 display: block;

783 width: 100%;

784 max-width: 100%;

785 height: auto;

786 }

787 }

788 .featured-image-container-wrap {

789 position: relative;

790 .svg-icon {

791 @include mixins.lightDark(color, #fff, rgba(255, 255, 255, 0.6));

792 font-size: 2rem;

793 margin-inline-end: 0;

794 position: absolute;

795 bottom: 10px;

796 left: 6px;

797 }

798 }

799 .grid-card:hover .featured-image-container {

800 opacity: .5;

801 }

802

803 .action-link-list {

804 //padding: $-s 0;

805 }

806 .action-link {

807 background: transparent;

808 border: none;

809 color: currentColor;

810 padding: vars.$m 0;

811 }

812

813 .active-link-list {

814 a {

815 display: inline-block;

816 padding: vars.$s;

817 }

818 a:not(.active) {

819 @include mixins.lightDark(color, #444, #888);

820 }

821 a:hover {

822 @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));

823 border-radius: 4px;

824 text-decoration: none;

825 }

826 &.in-sidebar {

827 a {

828 display: block;

829 margin-bottom: vars.$xs;

830 }

831 a.active {

832 border-radius: 4px;

833 @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));

834 }

835 }

836 }

837

838 .entity-meta-item {

839 display: flex;

840 line-height: 1.2;

841 margin: 0.6em 0;

842 align-content: start;

843 gap: vars.$s;

844 a {

845 line-height: 1.2;

846 }

847 svg {

848 flex-shrink: 0;

849 width: 1em;

850 margin: 0;

851 }

852 }