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;

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

289 margin-top: -1px;

290 min-height: 38px;

291 }

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

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

294 }

295 li:first-child {

296 margin-top: $-xs;

297 }

298 }

299 .sortable-page-list li.placeholder {

300 position: relative;

301 }

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

303 position: absolute;

304 }

305

306 .activity-list-item {

307 padding: $-s 0;

308 display: grid;

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

310 grid-column-gap: $-m;

311 font-size: 0.9em;

312 }

313 .card .activity-list-item {

314 padding: $-s $-m;

315 }

316

317 .user-list-item {

318 display: inline-grid;

319 padding: $-s;

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

321 grid-column-gap: $-m;

322 font-size: 0.9em;

323 align-items: center;

324 > div:first-child {

325 line-height: 0;

326 }

327 }

328

329 ul.pagination {

330 display: inline-block;

331 list-style: none;

332 margin: $-m 0;

333 padding-inline-start: 1px;

334 li {

335 float: left;

336 }

337 li:first-child {

338 a, span {

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

340 }

341 }

342 li:last-child {

343 a, span {

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

345 }

346 }

347 a, span {

348 display: block;

349 padding: $-xxs $-s;

350 border: 1px solid #CCC;

351 margin-inline-start: -1px;

352 user-select: none;

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

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

355 }

356 li.disabled {

357 cursor: not-allowed;

358 }

359 li.active span {

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

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

362 }

363 }

364

365 .compact ul.pagination {

366 margin: 0;

367 }

368

369 .entity-list, .icon-list {

370 margin: 0 (-$-m);

371 h4 {

372 margin: 0;

373 }

374 hr {

375 margin: 0;

376 }

377 .text-small.text-muted {

378 color: #AAA;

379 font-size: 0.75em;

380 margin-top: $-xs;

381 }

382 .text-muted p.text-muted {

383 margin-top: 0;

384 }

385 .page.draft .text-page {

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

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

388 }

389 > .dropdown-container {

390 display: block;

391 }

392 }

393

394 .icon-list hr {

395 margin: $-s $-m;

396 max-width: 140px;

397 opacity: 0.25;

398 height: 1.1px;

399 }

400

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

402 display: none;

403 }

404

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

406 padding: $-s $-m;

407 display: flex;

408 align-items: center;

409 gap: $-m;

410 background-color: transparent;

411 border: 0;

412 width: 100%;

413 position: relative;

414 word-break: break-word;

415 h4 a {

416 color: #666;

417 }

418 > span:first-child {

419 flex-basis: 1.88em;

420 flex: none;

421 }

422 > span:last-child {

423 flex: 1;

424 text-align: start;

425 }

426 > .content {

427 min-width: 0;

428 }

429 &:not(.no-hover) {

430 cursor: pointer;

431 }

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

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

434 text-decoration: none;

435 border-radius: 4px;

436 }

437 &.outline-hover:hover {

438 background-color: transparent;

439 }

440 &:focus {

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

442 outline: 1px dotted #666;

443 outline-offset: -2px;

444 }

445 }

446

447 .entity-list-item.disabled {

448 pointer-events: none;

449 cursor: not-allowed;

450 opacity: 0.8;

451 user-select: none;

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

453 }

454

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

456 display: inline-block;

457 vertical-align: top;

458 position: relative;

459 top: 1px;

460 svg {

461 margin-inline-end: 0;

462 }

463 }

464

465 .split-icon-list-item {

466 display: flex;

467 align-items: center;

468 gap: $-m;

469 background-color: transparent;

470 border: 0;

471 width: 100%;

472 position: relative;

473 word-break: break-word;

474 border-radius: 4px;

475 > a {

476 padding: $-s $-m;

477 display: flex;

478 align-items: center;

479 gap: $-m;

480 flex: 1;

481 }

482 > a:hover {

483 text-decoration: none;

484 }

485 .icon {

486 flex-basis: 1.88em;

487 flex: none;

488 }

489 &:hover {

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

491 }

492 }

493

494 .icon-list-item-dropdown {

495 margin-inline-start: auto;

496 align-self: stretch;

497 display: flex;

498 align-items: stretch;

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

500 visibility: hidden;

501 }

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

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

504 visibility: visible;

505 }

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

507 padding: $-xs;

508 display: flex;

509 align-items: center;

510 cursor: pointer;

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

512 svg {

513 margin: 0;

514 }

515 &:hover {

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

517 }

518 }

519

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

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

522 border-radius: 0;

523 }

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

525 background-color: #EEEEEE;

526 }

527

528 .entity-list-item-children {

529 padding: $-m $-l;

530 > div {

531 overflow: hidden;

532 padding: 0 0 $-xs 0;

533 }

534 .entity-chip {

535 text-overflow: ellipsis;

536 height: 2.5em;

537 overflow: hidden;

538 text-align: start;

539 display: block;

540 white-space: nowrap;

541 }

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

543 margin-bottom: -$-xs;

544 }

545 }

546

547 .entity-list-item-image {

548 align-self: stretch;

549 width: 140px;

550 flex: none;

551 background-size: cover;

552 background-position: 50% 50%;

553 border-radius: 3px;

554 position: relative;

555 margin-inline-end: $-l;

556

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

558 width: 220px;

559 }

560

561 .svg-icon {

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

563 font-size: 1.66rem;

564 margin-inline-end: 0;

565 position: absolute;

566 bottom: $-xs;

567 left: $-xs;

568 }

569

570 @include smaller-than($m) {

571 width: 80px;

572 }

573 }

574

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

576 width: 60px;

577 }

578

579 .entity-list.compact {

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

581 h4, a {

582 line-height: 1.2;

583 }

584 .entity-item-snippet {

585 display: none;

586 }

587 .entity-list-item p {

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

589 padding-top: $-xs;

590 }

591 .entity-list-item p:empty {

592 padding-top: 0;

593 }

594 p {

595 margin: 0;

596 }

597 > p.empty-text {

598 display: block;

599 font-size: $fs-m;

600 }

601 hr {

602 margin: 0;

603 }

604 @include smaller-than($m) {

605 h4 {

606 font-size: 1.666em;

607 }

608 }

609 }

610

611 .entity-item-tags {

612 font-size: .75rem;

613 opacity: 1;

614 .primary-background-light {

615 background: transparent;

616 }

617 .tag-name {

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

619 }

620 }

621

622 .dropdown-container {

623 display: inline-block;

624 vertical-align: top;

625 position: relative;

626 }

627

628 .dropdown-menu {

629 display: none;

630 position: absolute;

631 z-index: 999;

632 top: 0;

633 list-style: none;

634 inset-inline-end: 0;

635 margin: $-m 0;

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

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

638 border-radius: 3px;

639 min-width: 180px;

640 padding: $-xs 0;

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

642 fill: currentColor;

643 text-align: start !important;

644 max-height: 500px;

645 overflow-y: auto;

646 &.wide {

647 min-width: 220px;

648 }

649 .text-muted {

650 color: #999;

651 fill: #999;

652 }

653 li.active a {

654 font-weight: 600;

655 }

656 button {

657 width: 100%;

658 text-align: start;

659 }

660 li.border-bottom {

661 border-bottom: 1px solid #DDD;

662 }

663 li hr {

664 margin: $-xs 0;

665 }

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

667 padding: 8px $-m;

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

669 fill: currentColor;

670 white-space: nowrap;

671 line-height: 1.4;

672 cursor: pointer;

673 &:hover, &:focus {

674 text-decoration: none;

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

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

677 }

678 &:focus {

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

680 outline-offset: -2px;

681 }

682 svg {

683 margin-inline-end: $-s;

684 display: inline-block;

685 width: 16px;

686 }

687 }

688 .text-item {

689 display: block;

690 }

691 .label-item {

692 display: grid;

693 align-items: center;

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

695 gap: $-m;

696 }

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

698 opacity: 0.7;

699 &:hover {

700 opacity: 1;

701 }

702 }

703 .icon-item {

704 display: grid;

705 align-items: start;

706 grid-template-columns: 16px auto;

707 gap: $-m;

708 svg {

709 margin-inline-end: 0;

710 margin-block-start: 1px;

711 }

712 }

713 }

714

715 // Shift in sidebar dropdown menus to prevent shadows

716 // being cut by scrollable container.

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

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

719 inset-inline-end: $-xs;

720 }

721

722 // Books grid view

723 .featured-image-container {

724 position: relative;

725 overflow: hidden;

726 min-height: 140px;

727 background-size: cover;

728 background-position: 50% 50%;

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

730 a {

731 display: block;

732 }

733 img {

734 display: block;

735 width: 100%;

736 max-width: 100%;

737 height: auto;

738 }

739 }

740 .featured-image-container-wrap {

741 position: relative;

742 .svg-icon {

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

744 font-size: 2rem;

745 margin-inline-end: 0;

746 position: absolute;

747 bottom: 10px;

748 left: 6px;

749 }

750 }

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

752 opacity: .5;

753 }

754

755 .action-link-list {

756 //padding: $-s 0;

757 }

758 .action-link {

759 background: transparent;

760 border: none;

761 color: currentColor;

762 padding: $-m 0;

763 }

764

765 .active-link-list {

766 a {

767 display: inline-block;

768 padding: $-s;

769 }

770 a:not(.active) {

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

772 }

773 a:hover {

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

775 border-radius: 4px;

776 text-decoration: none;

777 }

778 &.in-sidebar {

779 a {

780 display: block;

781 margin-bottom: $-xs;

782 }

783 a.active {

784 border-radius: 4px;

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

786 }

787 }

788 }

789

790 .entity-meta-item {

791 display: flex;

792 line-height: 1.2;

793 margin: 0.6em 0;

794 align-content: start;

795 gap: $-s;

796 a {

797 line-height: 1.2;

798 }

799 svg {

800 flex-shrink: 0;

801 width: 1em;

802 margin: 0;

803 }

804 }