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: left;

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-path-sep {

447 display: inline-block;

448 vertical-align: top;

449 position: relative;

450 top: 1px;

451 svg {

452 margin-inline-end: 0;

453 }

454 }

455

456 .split-icon-list-item {

457 display: flex;

458 align-items: center;

459 gap: $-m;

460 background-color: transparent;

461 border: 0;

462 width: 100%;

463 position: relative;

464 word-break: break-word;

465 border-radius: 4px;

466 > a {

467 padding: $-s $-m;

468 display: flex;

469 align-items: center;

470 gap: $-m;

471 flex: 1;

472 }

473 > a:hover {

474 text-decoration: none;

475 }

476 .icon {

477 flex-basis: 1.88em;

478 flex: none;

479 }

480 &:hover {

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

482 }

483 }

484

485 .icon-list-item-dropdown {

486 margin-inline-start: auto;

487 align-self: stretch;

488 display: flex;

489 align-items: stretch;

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

491 visibility: hidden;

492 }

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

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

495 visibility: visible;

496 }

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

498 padding: $-xs;

499 display: flex;

500 align-items: center;

501 cursor: pointer;

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

503 svg {

504 margin: 0;

505 }

506 &:hover {

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

508 }

509 }

510

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

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

513 border-radius: 0;

514 }

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

516 background-color: #EEEEEE;

517 }

518

519 .entity-list-item-children {

520 padding: $-m $-l;

521 > div {

522 overflow: hidden;

523 padding: 0 0 $-xs 0;

524 }

525 .entity-chip {

526 text-overflow: ellipsis;

527 height: 2.5em;

528 overflow: hidden;

529 text-align: start;

530 display: block;

531 white-space: nowrap;

532 }

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

534 margin-bottom: -$-xs;

535 }

536 }

537

538 .entity-list-item-image {

539 align-self: stretch;

540 width: 140px;

541 flex: none;

542 background-size: cover;

543 background-position: 50% 50%;

544 border-radius: 3px;

545 position: relative;

546 margin-inline-end: $-l;

547

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

549 width: 220px;

550 }

551

552 .svg-icon {

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

554 font-size: 1.66rem;

555 margin-inline-end: 0;

556 position: absolute;

557 bottom: $-xs;

558 left: $-xs;

559 }

560

561 @include smaller-than($m) {

562 width: 80px;

563 }

564 }

565

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

567 width: 60px;

568 }

569

570 .entity-list.compact {

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

572 h4, a {

573 line-height: 1.2;

574 }

575 .entity-item-snippet {

576 display: none;

577 }

578 .entity-list-item p {

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

580 padding-top: $-xs;

581 }

582 .entity-list-item p:empty {

583 padding-top: 0;

584 }

585 p {

586 margin: 0;

587 }

588 > p.empty-text {

589 display: block;

590 font-size: $fs-m;

591 }

592 hr {

593 margin: 0;

594 }

595 @include smaller-than($m) {

596 h4 {

597 font-size: 1.666em;

598 }

599 }

600 }

601

602 .entity-item-tags {

603 font-size: .75rem;

604 opacity: 1;

605 .primary-background-light {

606 background: transparent;

607 }

608 .tag-name {

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

610 }

611 }

612

613 .dropdown-container {

614 display: inline-block;

615 vertical-align: top;

616 position: relative;

617 }

618

619 .dropdown-menu {

620 display: none;

621 position: absolute;

622 z-index: 999;

623 top: 0;

624 list-style: none;

625 right: 0;

626 margin: $-m 0;

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

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

629 border-radius: 3px;

630 min-width: 180px;

631 padding: $-xs 0;

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

633 fill: currentColor;

634 text-align: start !important;

635 max-height: 500px;

636 overflow-y: auto;

637 &.wide {

638 min-width: 220px;

639 }

640 .text-muted {

641 color: #999;

642 fill: #999;

643 }

644 li.active a {

645 font-weight: 600;

646 }

647 button {

648 width: 100%;

649 text-align: start;

650 }

651 li.border-bottom {

652 border-bottom: 1px solid #DDD;

653 }

654 li hr {

655 margin: $-xs 0;

656 }

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

658 padding: 8px $-m;

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

660 fill: currentColor;

661 white-space: nowrap;

662 line-height: 1.4;

663 cursor: pointer;

664 &:hover, &:focus {

665 text-decoration: none;

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

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

668 }

669 &:focus {

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

671 outline-offset: -2px;

672 }

673 svg {

674 margin-inline-end: $-s;

675 display: inline-block;

676 width: 16px;

677 }

678 }

679 .text-item {

680 display: block;

681 }

682 .label-item {

683 display: grid;

684 align-items: center;

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

686 gap: $-m;

687 }

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

689 opacity: 0.7;

690 &:hover {

691 opacity: 1;

692 }

693 }

694 .icon-item {

695 display: grid;

696 align-items: start;

697 grid-template-columns: 16px auto;

698 gap: $-m;

699 svg {

700 margin-inline-end: 0;

701 margin-block-start: 1px;

702 }

703 }

704 }

705

706 // Shift in sidebar dropdown menus to prevent shadows

707 // being cut by scrollable container.

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

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

710 right: $-xs;

711 }

712

713 // Books grid view

714 .featured-image-container {

715 position: relative;

716 overflow: hidden;

717 min-height: 140px;

718 background-size: cover;

719 background-position: 50% 50%;

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

721 a {

722 display: block;

723 }

724 img {

725 display: block;

726 width: 100%;

727 max-width: 100%;

728 height: auto;

729 }

730 }

731 .featured-image-container-wrap {

732 position: relative;

733 .svg-icon {

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

735 font-size: 2rem;

736 margin-inline-end: 0;

737 position: absolute;

738 bottom: 10px;

739 left: 6px;

740 }

741 }

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

743 opacity: .5;

744 }

745

746 .action-link-list {

747 //padding: $-s 0;

748 }

749 .action-link {

750 background: transparent;

751 border: none;

752 color: currentColor;

753 padding: $-m 0;

754 }

755

756 .active-link-list {

757 a {

758 display: inline-block;

759 padding: $-s;

760 }

761 a:not(.active) {

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

763 }

764 a:hover {

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

766 border-radius: 4px;

767 text-decoration: none;

768 }

769 &.in-sidebar {

770 a {

771 display: block;

772 margin-bottom: $-xs;

773 }

774 a.active {

775 border-radius: 4px;

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

777 }

778 }

779 }

780

781 .entity-meta-item {

782 display: flex;

783 line-height: 1.2;

784 margin: 0.6em 0;

785 align-content: start;

786 gap: $-s;

787 a {

788 line-height: 1.2;

789 }

790 svg {

791 flex-shrink: 0;

792 width: 1em;

793 margin: 0;

794 }

795 }