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

246 pointer-events: none;

247 content: '';

248 border-radius: 4px;

249 opacity: 0.5;

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

251 display: block;

252 top: 0;

253 bottom: 0;

254 left: 0;

255 right: 0;

256 position: absolute;

257 }

258 }

259 .sort-box-options {

260 display: flex;

261 flex-wrap: wrap;

262 justify-content: space-between;

263 }

264 .sort-box-options .button {

265 margin-inline-start: 0;

266 }

267 .sortable-page-list {

268 margin-inline-start: 0;

269 padding: 0;

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

271 align-self: flex-start;

272 }

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

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

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

276 }

277 .entity-list-item > div {

278 display: block;

279 flex: 1;

280 }

281 > ul {

282 margin-inline-start: 0;

283 }

284 .sortable-page-sublist {

285 margin-bottom: vars.$m;

286 margin-top: 0;

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

288 }

289 li {

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

291 border: 1px solid;

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

293 margin-top: -1px;

294 min-height: 38px;

295 }

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

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

298 }

299 li:first-child {

300 margin-top: vars.$xs;

301 }

302 }

303 .sortable-page-list li.placeholder {

304 position: relative;

305 }

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

307 position: absolute;

308 }

309 .sort-box summary {

310 list-style: none;

311 font-size: .9rem;

312 cursor: pointer;

313 }

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

315 display: none;

316 }

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

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

319 }

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

321 transform: rotate(90deg);

322 }

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

324 opacity: .6;

325 }

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

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

328 opacity: 1;

329 }

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

331 visibility: hidden;

332 }

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

334 display: none;

335 }

336 .sort-list-handle {

337 cursor: grab;

338 }

339

340 .activity-list-item {

341 padding: vars.$s 0;

342 display: grid;

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

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

345 font-size: 0.9em;

346 }

347 .card .activity-list-item {

348 padding-block: vars.$s;

349 }

350

351 .user-list-item {

352 display: inline-grid;

353 padding: vars.$s;

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

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

356 font-size: 0.9em;

357 align-items: center;

358 > div:first-child {

359 line-height: 0;

360 }

361 }

362

363 ul.pagination {

364 display: inline-flex;

365 list-style: none;

366 margin: vars.$m 0;

367 padding-inline-start: 1px;

368 li:first-child {

369 a, span {

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

371 }

372 }

373 li:last-child {

374 a, span {

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

376 }

377 }

378 a, span {

379 display: block;

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

381 border: 1px solid #CCC;

382 margin-inline-start: -1px;

383 user-select: none;

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

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

386 }

387 li.disabled {

388 cursor: not-allowed;

389 }

390 li.active span {

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

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

393 }

394 }

395

396 .compact ul.pagination {

397 margin: 0;

398 }

399

400 .entity-list, .icon-list {

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

402 h4 {

403 margin: 0;

404 }

405 hr {

406 margin: 0;

407 }

408 .text-small.text-muted {

409 color: #AAA;

410 font-size: 0.75em;

411 margin-top: vars.$xs;

412 }

413 .text-muted p.text-muted {

414 margin-top: 0;

415 }

416 .page.draft .text-page {

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

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

419 }

420 > .dropdown-container {

421 display: block;

422 }

423 }

424

425 .icon-list hr {

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

427 max-width: 140px;

428 opacity: 0.25;

429 height: 1.1px;

430 }

431

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

433 display: none;

434 }

435

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

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

438 display: flex;

439 align-items: center;

440 gap: vars.$m;

441 background-color: transparent;

442 border: 0;

443 width: 100%;

444 position: relative;

445 word-break: break-word;

446 h4 a {

447 color: #666;

448 }

449 > span:first-child {

450 flex-basis: 1.88em;

451 flex: none;

452 }

453 > span:last-child {

454 flex: 1;

455 text-align: start;

456 }

457 > .content {

458 min-width: 0;

459 }

460 &:not(.no-hover) {

461 cursor: pointer;

462 }

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

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

465 text-decoration: none;

466 border-radius: 4px;

467 }

468 &.outline-hover:hover {

469 background-color: transparent;

470 }

471 &:focus {

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

473 outline: 1px dotted #666;

474 outline-offset: -2px;

475 }

476 }

477

478 .entity-list-item.disabled {

479 pointer-events: none;

480 cursor: not-allowed;

481 opacity: 0.8;

482 user-select: none;

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

484 }

485

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

487 display: inline-block;

488 vertical-align: top;

489 position: relative;

490 top: 1px;

491 svg {

492 margin-inline-end: 0;

493 }

494 }

495

496 .split-icon-list-item {

497 display: flex;

498 align-items: center;

499 gap: vars.$m;

500 background-color: transparent;

501 border: 0;

502 width: 100%;

503 position: relative;

504 word-break: break-word;

505 border-radius: 4px;

506 > a {

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

508 display: flex;

509 align-items: center;

510 gap: vars.$m;

511 flex: 1;

512 }

513 > a:hover {

514 text-decoration: none;

515 }

516 .icon {

517 flex-basis: 1.88em;

518 flex: none;

519 }

520 &:hover {

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

522 }

523 }

524

525 .icon-list-item-dropdown {

526 margin-inline-start: auto;

527 align-self: stretch;

528 display: flex;

529 align-items: stretch;

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

531 visibility: hidden;

532 }

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

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

535 visibility: visible;

536 }

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

538 padding: vars.$xs;

539 display: flex;

540 align-items: center;

541 cursor: pointer;

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

543 svg {

544 margin: 0;

545 }

546 &:hover {

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

548 }

549 }

550

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

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

553 border-radius: 0;

554 }

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

556 background-color: #EEEEEE;

557 }

558

559 .entity-list-item-children {

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

561 > div {

562 overflow: hidden;

563 padding: 0 0 vars.$xs 0;

564 }

565 .entity-chip {

566 text-overflow: ellipsis;

567 height: 2.5em;

568 overflow: hidden;

569 text-align: start;

570 display: block;

571 white-space: nowrap;

572 }

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

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

575 }

576 }

577

578 .entity-list-item-image {

579 align-self: stretch;

580 width: 140px;

581 flex: none;

582 background-size: cover;

583 background-position: 50% 50%;

584 border-radius: 3px;

585 position: relative;

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

587

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

589 width: 220px;

590 }

591

592 .svg-icon {

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

594 font-size: 1.66rem;

595 margin-inline-end: 0;

596 position: absolute;

597 bottom: vars.$xs;

598 left: vars.$xs;

599 }

600

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

602 width: 80px;

603 }

604 }

605

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

607 width: 60px;

608 }

609

610 .entity-list.compact {

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

612 h4, a {

613 line-height: 1.2;

614 }

615 .entity-item-snippet {

616 display: none;

617 }

618 .entity-list-item p {

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

620 padding-top: vars.$xs;

621 }

622 .entity-list-item p:empty {

623 padding-top: 0;

624 }

625 p {

626 margin: 0;

627 }

628 > p.empty-text {

629 display: block;

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

631 }

632 hr {

633 margin: 0;

634 }

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

636 h4 {

637 font-size: 1.666em;

638 }

639 }

640 }

641

642 .entity-item-tags {

643 font-size: .75rem;

644 opacity: 1;

645 .primary-background-light {

646 background: transparent;

647 }

648 .tag-name {

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

650 }

651 }

652

653 .dropdown-container {

654 display: inline-block;

655 vertical-align: top;

656 position: relative;

657 }

658

659 .dropdown-menu {

660 display: none;

661 position: absolute;

662 z-index: 999;

663 top: 0;

664 list-style: none;

665 inset-inline-end: 0;

666 margin: vars.$m 0;

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

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

669 border-radius: 3px;

670 min-width: 180px;

671 padding: vars.$xs 0;

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

673 fill: currentColor;

674 text-align: start !important;

675 max-height: 500px;

676 overflow-y: auto;

677 &.anchor-left {

678 inset-inline-end: auto;

679 inset-inline-start: 0;

680 }

681 &.wide {

682 min-width: 220px;

683 }

684 &.xl-limited {

685 width: 280px;

686 max-width: 100%;

687 }

688 .text-muted {

689 color: #999;

690 fill: #999;

691 }

692 li.active a {

693 font-weight: 600;

694 }

695 button {

696 width: 100%;

697 text-align: start;

698 }

699 li.border-bottom {

700 border-bottom: 1px solid #DDD;

701 }

702 li hr {

703 margin: vars.$xs 0;

704 }

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

706 padding: 8px vars.$m;

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

708 fill: currentColor;

709 white-space: nowrap;

710 line-height: 1.4;

711 cursor: pointer;

712 &.break-text {

713 white-space: normal;

714 word-wrap: break-word;

715 overflow-wrap: break-word;

716 }

717 &:hover, &:focus {

718 text-decoration: none;

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

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

721 }

722 &:focus {

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

724 outline-offset: -2px;

725 }

726 svg {

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

728 display: inline-block;

729 width: 16px;

730 }

731 }

732 .text-item {

733 display: block;

734 }

735 .label-item {

736 display: grid;

737 align-items: center;

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

739 gap: vars.$m;

740 }

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

742 opacity: 0.7;

743 &:hover {

744 opacity: 1;

745 }

746 }

747 .icon-item {

748 display: grid;

749 align-items: start;

750 grid-template-columns: 16px auto;

751 gap: vars.$m;

752 svg {

753 margin-inline-end: 0;

754 margin-block-start: 1px;

755 }

756 }

757 }

758

759 // Shift in sidebar dropdown menus to prevent shadows

760 // being cut by scrollable container.

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

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

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

764 }

765

766 // Books grid view

767 .featured-image-container {

768 position: relative;

769 overflow: hidden;

770 min-height: 140px;

771 background-size: cover;

772 background-position: 50% 50%;

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

774 a {

775 display: block;

776 }

777 img {

778 display: block;

779 width: 100%;

780 max-width: 100%;

781 height: auto;

782 }

783 }

784 .featured-image-container-wrap {

785 position: relative;

786 .svg-icon {

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

788 font-size: 2rem;

789 margin-inline-end: 0;

790 position: absolute;

791 bottom: 10px;

792 left: 6px;

793 }

794 }

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

796 opacity: .5;

797 }

798

799 .action-link-list {

800 //padding: $-s 0;

801 }

802 .action-link {

803 background: transparent;

804 border: none;

805 color: currentColor;

806 padding: vars.$m 0;

807 }

808

809 .active-link-list {

810 a {

811 display: inline-block;

812 padding: vars.$s;

813 }

814 a:not(.active) {

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

816 }

817 a:hover {

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

819 border-radius: 4px;

820 text-decoration: none;

821 }

822 &.in-sidebar {

823 a {

824 display: block;

825 margin-bottom: vars.$xs;

826 }

827 a.active {

828 border-radius: 4px;

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

830 }

831 }

832 }

833

834 .entity-meta-item {

835 display: flex;

836 line-height: 1.2;

837 margin: 0.6em 0;

838 align-content: start;

839 gap: vars.$s;

840 a {

841 line-height: 1.2;

842 }

843 svg {

844 flex-shrink: 0;

845 width: 1em;

846 margin: 0;

847 }

848 }