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

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

3 .icon {

4 width: 4px;

5 border-radius: 1px;

6 justify-self: stretch;

7 align-self: stretch;

8 height: auto;

9 margin-inline-end: $-xs;

10 }

11 .icon:after {

12 opacity: 0.5;

13 }

14 .icon svg {

15 display: none;

16 }

17 p {

18 margin-bottom: 0;

19 }

20 .inner-page {

21 padding-top: 0;

22 padding-bottom: 0;

23 }

24 }

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

27 display: flex;

28 padding: 0 $-m $-m $-m;

29 align-items: center;

30 border: 0;

31 width: 100%;

32 position: relative;

33 > .icon {

34 width: 4px;

35 height: auto;

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

37 align-self: stretch;

38 flex-shrink: 0;

39 &:before {

40 position: absolute;

41 top: 0;

42 left: 0;

43 width: 100%;

44 height: 1px;

45 background-color: currentColor;

46 content: '';

47 opacity: 0.5;

48 }

49 &:after {

50 opacity: 0.5;

51 }

52 }

53 .icon svg {

54 display: none;

55 }

56 > .content {

57 flex: 1;

58 }

59 .chapter-contents-toggle {

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

61 padding: $-xs ($-m + $-xxs);

62 width: 100%;

63 text-align: start;

64 }

65 .chapter-contents-toggle:hover {

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

67 }

68 }

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

71 padding-bottom: 0;

72 > .icon {

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

74 }

75 }

77 .inset-list {

78 display: none;

79 .entity-list-item-name {

80 font-size: 1rem;

81 }

82 .entity-list-item-children {

83 padding-top: 0;

84 padding-bottom: 0;

85 }

86 }

88 .sidebar-page-nav {

89 $nav-indent: $-m;

90 list-style: none;

91 @include margin($-s, 0, $-m, $-xs);

92 position: relative;

93 &:after {

94 content: '';

95 display: block;

96 position: absolute;

97 left: 0;

98 @include rtl {

99 left: auto;

100 right: 0;

101 }

102 @include lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));

103 width: 2px;

104 top: 5px;

105 bottom: 5px;

106 z-index: 0;

107 }

108 li {

109 margin-bottom: 4px;

110 font-size: 0.95em;

111 position: relative;

112 }

113 .h1 {

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

115 }

116 .h2 {

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

118 }

119 .h3 {

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

121 }

122 .h4 {

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

124 }

125 .h5 {

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

127 }

128 .h6 {

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

130 }

131 .current-heading {

132 font-weight: bold;

133 }

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

135 @include lightDark(background-color, #BBB, #666, true);

136 }

137 .sidebar-page-nav-bullet {

138 width: 6px;

139 height: 6px;

140 position: absolute;

141 left: -2px;

142 top: 30%;

143 border-radius: 50%;

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

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

146 z-index: 1;

147 @include rtl {

148 left: auto;

149 right: -2px;

150 }

151 }

152 }

153

154 // Sidebar list

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

156 list-style: none;

157 @include margin($-xs, -$-s, 0, -$-s);

158 padding-inline-start: 0;

159 padding-inline-end: 0;

160

161 ul {

162 list-style: none;

163 padding-inline-start: 1rem;

164 padding-inline-end: 0;

165 }

166

167 .entity-list-item {

168 padding-top: 2px;

169 padding-bottom: 2px;

170 background-clip: content-box;

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

172 padding-inline-end: 0;

173 .content {

174 width: 100%;

175 padding-top: $-xs;

176 padding-bottom: $-xs;

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

178 }

179 }

180 .entity-list-item.selected {

181 @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));

182 }

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

184 margin-top: -$-xs;

185 padding-inline-end: 0;

186 }

187 .entity-list-item-name {

188 font-size: 1em;

189 margin: 0;

190 margin-inline-end: $-m;

191 }

192 .chapter-child-menu {

193 font-size: .8rem;

194 margin-top: -.2rem;

195 margin-inline-start: -1rem;

196 }

197 .chapter-contents-toggle {

198 display: block;

199 width: 100%;

200 text-align: start;

201 padding: $-xxs $-s ($-xxs * 2) $-s;

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

203 line-height: 1;

204 margin-top: -$-xxs;

205 margin-bottom: -$-xxs;

206 &:hover {

207 @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));

208 }

209 }

210 .entity-list-item .icon {

211 z-index: 2;

212 width: 4px;

213 height: auto;

214 align-self: stretch;

215 flex-shrink: 0;

216 border-radius: 1px;

217 opacity: 0.8;

218 }

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

220 opacity: 1;

221 }

222 .entity-list-item .icon svg {

223 display: none;

224 }

225 }

226

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

228 display: none;

229 padding-inline-start: 0;

230 position: relative;

231 margin-bottom: 0;

232 }

233

234 // Sortable Lists

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

236 list-style: none;

237 }

238 .sort-box {

239 margin-bottom: $-m;

240 padding: $-m $-xl;

241 position: relative;

242 &::before {

243 pointer-events: none;

244 content: '';

245 border-radius: 4px;

246 opacity: 0.5;

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

248 display: block;

249 top: 0;

250 bottom: 0;

251 left: 0;

252 right: 0;

253 position: absolute;

254 }

255 }

256 .sort-box-options {

257 display: flex;

258 flex-wrap: wrap;

259 justify-content: space-between;

260 }

261 .sort-box-options .button {

262 margin-inline-start: 0;

263 }

264 .sortable-page-list {

265 margin-inline-start: 0;

266 padding: 0;

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

268 align-self: flex-start;

269 }

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

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

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

273 }

274 .entity-list-item > div {

275 display: block;

276 flex: 1;

277 }

278 > ul {

279 margin-inline-start: 0;

280 }

281 .sortable-page-sublist {

282 margin-bottom: $-m;

283 margin-top: 0;

284 padding-inline-start: $-m;

285 }

286 li {

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

288 border: 1px solid;

289 @include lightDark(border-color, #DDD, #666);

290 margin-top: -1px;

291 min-height: 38px;

292 }

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

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

295 }

296 li:first-child {

297 margin-top: $-xs;

298 }

299 }

300 .sortable-page-list li.placeholder {

301 position: relative;

302 }

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

304 position: absolute;

305 }

306 .sort-box summary {

307 list-style: none;

308 font-size: .9rem;

309 cursor: pointer;

310 }

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

312 display: none;

313 }

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

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

316 }

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

318 transform: rotate(90deg);

319 }

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

321 opacity: .6;

322 }

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

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

325 opacity: 1;

326 }

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

328 visibility: hidden;

329 }

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

331 display: none;

332 }

333 .sort-list-handle {

334 cursor: grab;

335 }

336

337 .activity-list-item {

338 padding: $-s 0;

339 display: grid;

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

341 grid-column-gap: $-m;

342 font-size: 0.9em;

343 }

344 .card .activity-list-item {

345 padding-block: $-s;

346 }

347

348 .user-list-item {

349 display: inline-grid;

350 padding: $-s;

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

352 grid-column-gap: $-m;

353 font-size: 0.9em;

354 align-items: center;

355 > div:first-child {

356 line-height: 0;

357 }

358 }

359

360 ul.pagination {

361 display: inline-flex;

362 list-style: none;

363 margin: $-m 0;

364 padding-inline-start: 1px;

365 li:first-child {

366 a, span {

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

368 }

369 }

370 li:last-child {

371 a, span {

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

373 }

374 }

375 a, span {

376 display: block;

377 padding: $-xxs $-s;

378 border: 1px solid #CCC;

379 margin-inline-start: -1px;

380 user-select: none;

381 @include lightDark(color, #555, #eee);

382 @include lightDark(border-color, #ccc, #666);

383 }

384 li.disabled {

385 cursor: not-allowed;

386 }

387 li.active span {

388 @include lightDark(color, #111, #eee);

389 @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));

390 }

391 }

392

393 .compact ul.pagination {

394 margin: 0;

395 }

396

397 .entity-list, .icon-list {

398 margin: 0 (-$-m);

399 h4 {

400 margin: 0;

401 }

402 hr {

403 margin: 0;

404 }

405 .text-small.text-muted {

406 color: #AAA;

407 font-size: 0.75em;

408 margin-top: $-xs;

409 }

410 .text-muted p.text-muted {

411 margin-top: 0;

412 }

413 .page.draft .text-page {

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

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

416 }

417 > .dropdown-container {

418 display: block;

419 }

420 }

421

422 .icon-list hr {

423 margin: $-s $-m;

424 max-width: 140px;

425 opacity: 0.25;

426 height: 1.1px;

427 }

428

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

430 display: none;

431 }

432

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

434 padding: $-s $-m;

435 display: flex;

436 align-items: center;

437 gap: $-m;

438 background-color: transparent;

439 border: 0;

440 width: 100%;

441 position: relative;

442 word-break: break-word;

443 h4 a {

444 color: #666;

445 }

446 > span:first-child {

447 flex-basis: 1.88em;

448 flex: none;

449 }

450 > span:last-child {

451 flex: 1;

452 text-align: start;

453 }

454 > .content {

455 min-width: 0;

456 }

457 &:not(.no-hover) {

458 cursor: pointer;

459 }

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

461 @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));

462 text-decoration: none;

463 border-radius: 4px;

464 }

465 &.outline-hover:hover {

466 background-color: transparent;

467 }

468 &:focus {

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

470 outline: 1px dotted #666;

471 outline-offset: -2px;

472 }

473 }

474

475 .entity-list-item.disabled {

476 pointer-events: none;

477 cursor: not-allowed;

478 opacity: 0.8;

479 user-select: none;

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

481 }

482

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

484 display: inline-block;

485 vertical-align: top;

486 position: relative;

487 top: 1px;

488 svg {

489 margin-inline-end: 0;

490 }

491 }

492

493 .split-icon-list-item {

494 display: flex;

495 align-items: center;

496 gap: $-m;

497 background-color: transparent;

498 border: 0;

499 width: 100%;

500 position: relative;

501 word-break: break-word;

502 border-radius: 4px;

503 > a {

504 padding: $-s $-m;

505 display: flex;

506 align-items: center;

507 gap: $-m;

508 flex: 1;

509 }

510 > a:hover {

511 text-decoration: none;

512 }

513 .icon {

514 flex-basis: 1.88em;

515 flex: none;

516 }

517 &:hover {

518 @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));

519 }

520 }

521

522 .icon-list-item-dropdown {

523 margin-inline-start: auto;

524 align-self: stretch;

525 display: flex;

526 align-items: stretch;

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

528 visibility: hidden;

529 }

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

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

532 visibility: visible;

533 }

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

535 padding: $-xs;

536 display: flex;

537 align-items: center;

538 cursor: pointer;

539 @include lightDark(color, #888, #999);

540 svg {

541 margin: 0;

542 }

543 &:hover {

544 @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));

545 }

546 }

547

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

549 @include lightDark(background-color, #F2F2F2, #2d2d2d);

550 border-radius: 0;

551 }

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

553 background-color: #EEEEEE;

554 }

555

556 .entity-list-item-children {

557 padding: $-m $-l;

558 > div {

559 overflow: hidden;

560 padding: 0 0 $-xs 0;

561 }

562 .entity-chip {

563 text-overflow: ellipsis;

564 height: 2.5em;

565 overflow: hidden;

566 text-align: start;

567 display: block;

568 white-space: nowrap;

569 }

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

571 margin-bottom: -$-xs;

572 }

573 }

574

575 .entity-list-item-image {

576 align-self: stretch;

577 width: 140px;

578 flex: none;

579 background-size: cover;

580 background-position: 50% 50%;

581 border-radius: 3px;

582 position: relative;

583 margin-inline-end: $-l;

584

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

586 width: 220px;

587 }

588

589 .svg-icon {

590 @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));

591 font-size: 1.66rem;

592 margin-inline-end: 0;

593 position: absolute;

594 bottom: $-xs;

595 left: $-xs;

596 }

597

598 @include smaller-than($m) {

599 width: 80px;

600 }

601 }

602

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

604 width: 60px;

605 }

606

607 .entity-list.compact {

608 font-size: 0.6 * $fs-m;

609 h4, a {

610 line-height: 1.2;

611 }

612 .entity-item-snippet {

613 display: none;

614 }

615 .entity-list-item p {

616 font-size: $fs-m * 0.8;

617 padding-top: $-xs;

618 }

619 .entity-list-item p:empty {

620 padding-top: 0;

621 }

622 p {

623 margin: 0;

624 }

625 > p.empty-text {

626 display: block;

627 font-size: $fs-m;

628 }

629 hr {

630 margin: 0;

631 }

632 @include smaller-than($m) {

633 h4 {

634 font-size: 1.666em;

635 }

636 }

637 }

638

639 .entity-item-tags {

640 font-size: .75rem;

641 opacity: 1;

642 .primary-background-light {

643 background: transparent;

644 }

645 .tag-name {

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

647 }

648 }

649

650 .dropdown-container {

651 display: inline-block;

652 vertical-align: top;

653 position: relative;

654 }

655

656 .dropdown-menu {

657 display: none;

658 position: absolute;

659 z-index: 999;

660 top: 0;

661 list-style: none;

662 inset-inline-end: 0;

663 margin: $-m 0;

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

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

666 border-radius: 3px;

667 min-width: 180px;

668 padding: $-xs 0;

669 @include lightDark(color, #555, #eee);

670 fill: currentColor;

671 text-align: start !important;

672 max-height: 500px;

673 overflow-y: auto;

674 &.anchor-left {

675 inset-inline-end: auto;

676 inset-inline-start: 0;

677 }

678 &.wide {

679 min-width: 220px;

680 }

681 &.xl-limited {

682 width: 280px;

683 max-width: 100%;

684 }

685 .text-muted {

686 color: #999;

687 fill: #999;

688 }

689 li.active a {

690 font-weight: 600;

691 }

692 button {

693 width: 100%;

694 text-align: start;

695 }

696 li.border-bottom {

697 border-bottom: 1px solid #DDD;

698 }

699 li hr {

700 margin: $-xs 0;

701 }

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

703 padding: 8px $-m;

704 @include lightDark(color, #555, #eee);

705 fill: currentColor;

706 white-space: nowrap;

707 line-height: 1.4;

708 cursor: pointer;

709 &.break-text {

710 white-space: normal;

711 word-wrap: break-word;

712 overflow-wrap: break-word;

713 }

714 &:hover, &:focus {

715 text-decoration: none;

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

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

718 }

719 &:focus {

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

721 outline-offset: -2px;

722 }

723 svg {

724 margin-inline-end: $-s;

725 display: inline-block;

726 width: 16px;

727 }

728 }

729 .text-item {

730 display: block;

731 }

732 .label-item {

733 display: grid;

734 align-items: center;

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

736 gap: $-m;

737 }

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

739 opacity: 0.7;

740 &:hover {

741 opacity: 1;

742 }

743 }

744 .icon-item {

745 display: grid;

746 align-items: start;

747 grid-template-columns: 16px auto;

748 gap: $-m;

749 svg {

750 margin-inline-end: 0;

751 margin-block-start: 1px;

752 }

753 }

754 }

755

756 // Shift in sidebar dropdown menus to prevent shadows

757 // being cut by scrollable container.

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

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

760 inset-inline-end: $-xs;

761 }

762

763 // Books grid view

764 .featured-image-container {

765 position: relative;

766 overflow: hidden;

767 min-height: 140px;

768 background-size: cover;

769 background-position: 50% 50%;

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

771 a {

772 display: block;

773 }

774 img {

775 display: block;

776 width: 100%;

777 max-width: 100%;

778 height: auto;

779 }

780 }

781 .featured-image-container-wrap {

782 position: relative;

783 .svg-icon {

784 @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));

785 font-size: 2rem;

786 margin-inline-end: 0;

787 position: absolute;

788 bottom: 10px;

789 left: 6px;

790 }

791 }

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

793 opacity: .5;

794 }

795

796 .action-link-list {

797 //padding: $-s 0;

798 }

799 .action-link {

800 background: transparent;

801 border: none;

802 color: currentColor;

803 padding: $-m 0;

804 }

805

806 .active-link-list {

807 a {

808 display: inline-block;

809 padding: $-s;

810 }

811 a:not(.active) {

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

813 }

814 a:hover {

815 @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));

816 border-radius: 4px;

817 text-decoration: none;

818 }

819 &.in-sidebar {

820 a {

821 display: block;

822 margin-bottom: $-xs;

823 }

824 a.active {

825 border-radius: 4px;

826 @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));

827 }

828 }

829 }

830

831 .entity-meta-item {

832 display: flex;

833 line-height: 1.2;

834 margin: 0.6em 0;

835 align-content: start;

836 gap: $-s;

837 a {

838 line-height: 1.2;

839 }

840 svg {

841 flex-shrink: 0;

842 width: 1em;

843 margin: 0;

844 }

845 }