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-list ul {

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 .entity-list-item, .sortable-selected .entity-list-item: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 ul {

282 margin-bottom: $-m;

283 margin-top: 0;

284 padding-inline-start: $-m;

285 }

286 li {

287 border: 1px solid #DDD;

288 margin-top: -1px;

289 min-height: 38px;

290 }

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

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

293 }

294 li:first-child {

295 margin-top: $-xs;

296 }

297 }

298 .sortable-page-list li.placeholder {

299 position: relative;

300 }

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

302 position: absolute;

303 }

304

305 .activity-list-item {

306 padding: $-s 0;

307 display: grid;

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

309 grid-column-gap: $-m;

310 font-size: 0.9em;

311 }

312 .card .activity-list-item {

313 padding: $-s $-m;

314 }

315

316 .user-list-item {

317 display: inline-grid;

318 padding: $-s;

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

320 grid-column-gap: $-m;

321 font-size: 0.9em;

322 align-items: center;

323 > div:first-child {

324 line-height: 0;

325 }

326 }

327

328 ul.pagination {

329 display: inline-block;

330 list-style: none;

331 margin: $-m 0;

332 padding-inline-start: 1px;

333 li {

334 float: left;

335 }

336 li:first-child {

337 a, span {

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

339 }

340 }

341 li:last-child {

342 a, span {

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

344 }

345 }

346 a, span {

347 display: block;

348 padding: $-xxs $-s;

349 border: 1px solid #CCC;

350 margin-inline-start: -1px;

351 user-select: none;

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

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

354 }

355 li.disabled {

356 cursor: not-allowed;

357 }

358 li.active span {

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

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

361 }

362 }

363

364 .compact ul.pagination {

365 margin: 0;

366 }

367

368 .entity-list, .icon-list {

369 margin: 0 (-$-m);

370 h4 {

371 margin: 0;

372 }

373 hr {

374 margin: 0;

375 }

376 .text-small.text-muted {

377 color: #AAA;

378 font-size: 0.75em;

379 margin-top: $-xs;

380 }

381 .text-muted p.text-muted {

382 margin-top: 0;

383 }

384 .page.draft .text-page {

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

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

387 }

388 > .dropdown-container {

389 display: block;

390 }

391 }

392

393 .icon-list hr {

394 margin: $-s $-m;

395 max-width: 140px;

396 opacity: 0.25;

397 height: 1.1px;

398 }

399

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

401 display: none;

402 }

403

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

405 padding: $-s $-m;

406 display: flex;

407 align-items: center;

408 gap: $-m;

409 background-color: transparent;

410 border: 0;

411 width: 100%;

412 position: relative;

413 word-break: break-word;

414 h4 a {

415 color: #666;

416 }

417 > span:first-child {

418 flex-basis: 1.88em;

419 flex: none;

420 }

421 > span:last-child {

422 flex: 1;

423 text-align: start;

424 }

425 > .content {

426 min-width: 0;

427 }

428 &:not(.no-hover) {

429 cursor: pointer;

430 }

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

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

433 text-decoration: none;

434 border-radius: 4px;

435 }

436 &.outline-hover:hover {

437 background-color: transparent;

438 }

439 &:focus {

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

441 outline: 1px dotted #666;

442 outline-offset: -2px;

443 }

444 }

445

446 .entity-list-item.disabled {

447 pointer-events: none;

448 cursor: not-allowed;

449 opacity: 0.8;

450 user-select: none;

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

452 }

453

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

455 display: inline-block;

456 vertical-align: top;

457 position: relative;

458 top: 1px;

459 svg {

460 margin-inline-end: 0;

461 }

462 }

463

464 .split-icon-list-item {

465 display: flex;

466 align-items: center;

467 gap: $-m;

468 background-color: transparent;

469 border: 0;

470 width: 100%;

471 position: relative;

472 word-break: break-word;

473 border-radius: 4px;

474 > a {

475 padding: $-s $-m;

476 display: flex;

477 align-items: center;

478 gap: $-m;

479 flex: 1;

480 }

481 > a:hover {

482 text-decoration: none;

483 }

484 .icon {

485 flex-basis: 1.88em;

486 flex: none;

487 }

488 &:hover {

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

490 }

491 }

492

493 .icon-list-item-dropdown {

494 margin-inline-start: auto;

495 align-self: stretch;

496 display: flex;

497 align-items: stretch;

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

499 visibility: hidden;

500 }

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

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

503 visibility: visible;

504 }

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

506 padding: $-xs;

507 display: flex;

508 align-items: center;

509 cursor: pointer;

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

511 svg {

512 margin: 0;

513 }

514 &:hover {

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

516 }

517 }

518

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

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

521 border-radius: 0;

522 }

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

524 background-color: #EEEEEE;

525 }

526

527 .entity-list-item-children {

528 padding: $-m $-l;

529 > div {

530 overflow: hidden;

531 padding: 0 0 $-xs 0;

532 }

533 .entity-chip {

534 text-overflow: ellipsis;

535 height: 2.5em;

536 overflow: hidden;

537 text-align: start;

538 display: block;

539 white-space: nowrap;

540 }

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

542 margin-bottom: -$-xs;

543 }

544 }

545

546 .entity-list-item-image {

547 align-self: stretch;

548 width: 140px;

549 flex: none;

550 background-size: cover;

551 background-position: 50% 50%;

552 border-radius: 3px;

553 position: relative;

554 margin-inline-end: $-l;

555

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

557 width: 220px;

558 }

559

560 .svg-icon {

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

562 font-size: 1.66rem;

563 margin-inline-end: 0;

564 position: absolute;

565 bottom: $-xs;

566 left: $-xs;

567 }

568

569 @include smaller-than($m) {

570 width: 80px;

571 }

572 }

573

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

575 width: 60px;

576 }

577

578 .entity-list.compact {

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

580 h4, a {

581 line-height: 1.2;

582 }

583 .entity-item-snippet {

584 display: none;

585 }

586 .entity-list-item p {

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

588 padding-top: $-xs;

589 }

590 .entity-list-item p:empty {

591 padding-top: 0;

592 }

593 p {

594 margin: 0;

595 }

596 > p.empty-text {

597 display: block;

598 font-size: $fs-m;

599 }

600 hr {

601 margin: 0;

602 }

603 @include smaller-than($m) {

604 h4 {

605 font-size: 1.666em;

606 }

607 }

608 }

609

610 .entity-item-tags {

611 font-size: .75rem;

612 opacity: 1;

613 .primary-background-light {

614 background: transparent;

615 }

616 .tag-name {

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

618 }

619 }

620

621 .dropdown-container {

622 display: inline-block;

623 vertical-align: top;

624 position: relative;

625 }

626

627 .dropdown-menu {

628 display: none;

629 position: absolute;

630 z-index: 999;

631 top: 0;

632 list-style: none;

633 inset-inline-end: 0;

634 margin: $-m 0;

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

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

637 border-radius: 3px;

638 min-width: 180px;

639 padding: $-xs 0;

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

641 fill: currentColor;

642 text-align: start !important;

643 max-height: 500px;

644 overflow-y: auto;

645 &.wide {

646 min-width: 220px;

647 }

648 .text-muted {

649 color: #999;

650 fill: #999;

651 }

652 li.active a {

653 font-weight: 600;

654 }

655 button {

656 width: 100%;

657 text-align: start;

658 }

659 li.border-bottom {

660 border-bottom: 1px solid #DDD;

661 }

662 li hr {

663 margin: $-xs 0;

664 }

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

666 padding: 8px $-m;

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

668 fill: currentColor;

669 white-space: nowrap;

670 line-height: 1.4;

671 cursor: pointer;

672 &:hover, &:focus {

673 text-decoration: none;

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

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

676 }

677 &:focus {

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

679 outline-offset: -2px;

680 }

681 svg {

682 margin-inline-end: $-s;

683 display: inline-block;

684 width: 16px;

685 }

686 }

687 .text-item {

688 display: block;

689 }

690 .label-item {

691 display: grid;

692 align-items: center;

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

694 gap: $-m;

695 }

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

697 opacity: 0.7;

698 &:hover {

699 opacity: 1;

700 }

701 }

702 .icon-item {

703 display: grid;

704 align-items: start;

705 grid-template-columns: 16px auto;

706 gap: $-m;

707 svg {

708 margin-inline-end: 0;

709 margin-block-start: 1px;

710 }

711 }

712 }

713

714 // Shift in sidebar dropdown menus to prevent shadows

715 // being cut by scrollable container.

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

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

718 inset-inline-end: $-xs;

719 }

720

721 // Books grid view

722 .featured-image-container {

723 position: relative;

724 overflow: hidden;

725 min-height: 140px;

726 background-size: cover;

727 background-position: 50% 50%;

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

729 a {

730 display: block;

731 }

732 img {

733 display: block;

734 width: 100%;

735 max-width: 100%;

736 height: auto;

737 }

738 }

739 .featured-image-container-wrap {

740 position: relative;

741 .svg-icon {

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

743 font-size: 2rem;

744 margin-inline-end: 0;

745 position: absolute;

746 bottom: 10px;

747 left: 6px;

748 }

749 }

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

751 opacity: .5;

752 }

753

754 .action-link-list {

755 //padding: $-s 0;

756 }

757 .action-link {

758 background: transparent;

759 border: none;

760 color: currentColor;

761 padding: $-m 0;

762 }

763

764 .active-link-list {

765 a {

766 display: inline-block;

767 padding: $-s;

768 }

769 a:not(.active) {

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

771 }

772 a:hover {

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

774 border-radius: 4px;

775 text-decoration: none;

776 }

777 &.in-sidebar {

778 a {

779 display: block;

780 margin-bottom: $-xs;

781 }

782 a.active {

783 border-radius: 4px;

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

785 }

786 }

787 }

788

789 .entity-meta-item {

790 display: flex;

791 line-height: 1.2;

792 margin: 0.6em 0;

793 align-content: start;

794 gap: $-s;

795 a {

796 line-height: 1.2;

797 }

798 svg {

799 flex-shrink: 0;

800 width: 1em;

801 margin: 0;

802 }

803 }