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: $-l;

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-expansion-toggle {

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

61 padding: $-xs $-m;

62 width: 100%;

63 text-align: start;

64 }

65 .chapter-expansion-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 position: relative;

161

162 &:after, .sub-menu:after {

163 content: '';

164 display: block;

165 position: absolute;

166 left: $-m;

167 top: 1rem;

168 bottom: 1rem;

169 border-inline-start: 4px solid rgba(0, 0, 0, 0.1);

170 z-index: 0;

171 @include rtl {

172 left: auto;

173 right: $-m;

174 }

175 }

176

177 ul {

178 list-style: none;

179 padding-inline-start: 1rem;

180 padding-inline-end: 0;

181 }

182

183 .entity-list-item {

184 padding-top: $-xxs;

185 padding-bottom: $-xxs;

186 background-clip: content-box;

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

188 padding-inline-end: 0;

189 .content {

190 padding-top: $-xs;

191 padding-bottom: $-xs;

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

193 }

194 }

195 .entity-list-item.selected {

196 background-color: rgba(0, 0, 0, 0.08);

197 }

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

199 margin-top: -$-xs;

200 padding-inline-end: 0;

201 }

202 .entity-list-item-name {

203 font-size: 1em;

204 margin: 0;

205 margin-inline-end: $-m;

206 }

207 .chapter-child-menu {

208 font-size: .8rem;

209 margin-top: -.2rem;

210 margin-inline-start: -1rem;

211 }

212 [chapter-toggle] {

213 padding-inline-start: .7rem;

214 padding-bottom: .2rem;

215 }

216 .entity-list-item .icon {

217 z-index: 2;

218 width: 4px;

219 height: auto;

220 align-self: stretch;

221 flex-shrink: 0;

222 border-radius: 1px;

223 opacity: 0.6;

224 }

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

226 opacity: 1;

227 }

228 .entity-list-item .icon svg {

229 display: none;

230 }

231 }

232

233 .chapter-child-menu {

234 ul.sub-menu {

235 display: none;

236 padding-inline-start: 0;

237 position: relative;

238 }

239 [chapter-toggle].open + .sub-menu {

240 display: block;

241 }

242 }

243

244 // Sortable Lists

245 .sortable-page-list, .sortable-page-list ul {

246 list-style: none;

247 }

248 .sort-box {

249 margin-bottom: $-m;

250 padding: $-m $-xl;

251 position: relative;

252 &::before {

253 pointer-events: none;

254 content: '';

255 border-radius: 4px;

256 opacity: 0.5;

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

258 display: block;

259 top: 0;

260 bottom: 0;

261 left: 0;

262 right: 0;

263 position: absolute;

264 }

265 }

266 .sort-box-options {

267 display: flex;

268 flex-wrap: wrap;

269 justify-content: space-between;

270 }

271 .sort-box-options .button {

272 margin-inline-start: 0;

273 }

274 .sortable-page-list {

275 margin-inline-start: 0;

276 padding: 0;

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

278 align-self: flex-start;

279 }

280 .sortable-selected .entity-list-item, .sortable-selected .entity-list-item:hover {

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

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

283 }

284 .entity-list-item > div {

285 display: block;

286 flex: 1;

287 }

288 > ul {

289 margin-inline-start: 0;

290 }

291 ul {

292 margin-bottom: $-m;

293 margin-top: 0;

294 padding-inline-start: $-m;

295 }

296 li {

297 border: 1px solid #DDD;

298 margin-top: -1px;

299 min-height: 38px;

300 }

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

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

303 }

304 li:first-child {

305 margin-top: $-xs;

306 }

307 }

308 .sortable-page-list li.placeholder {

309 position: relative;

310 }

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

312 position: absolute;

313 }

314

315 .activity-list-item {

316 padding: $-s 0;

317 display: grid;

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

319 grid-column-gap: $-m;

320 font-size: 0.9em;

321 }

322 .card .activity-list-item {

323 padding: $-s $-m;

324 }

325

326 .user-list-item {

327 display: inline-grid;

328 padding: $-s;

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

330 grid-column-gap: $-m;

331 font-size: 0.9em;

332 align-items: center;

333 > div:first-child {

334 line-height: 0;

335 }

336 }

337

338 ul.pagination {

339 display: inline-block;

340 list-style: none;

341 margin: $-m 0;

342 padding-inline-start: 1px;

343 li {

344 float: left;

345 }

346 li:first-child {

347 a, span {

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

349 }

350 }

351 li:last-child {

352 a, span {

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

354 }

355 }

356 a, span {

357 display: block;

358 padding: $-xxs $-s;

359 border: 1px solid #CCC;

360 margin-inline-start: -1px;

361 user-select: none;

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

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

364 }

365 li.disabled {

366 cursor: not-allowed;

367 }

368 li.active span {

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

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

371 }

372 }

373

374 .compact ul.pagination {

375 margin: 0;

376 }

377

378 .entity-list, .icon-list {

379 margin: 0 (-$-m);

380 h4 {

381 margin: 0;

382 }

383 hr {

384 margin: 0;

385 }

386 .text-small.text-muted {

387 color: #AAA;

388 font-size: 0.75em;

389 margin-top: $-xs;

390 }

391 .text-muted p.text-muted {

392 margin-top: 0;

393 }

394 .page.draft .text-page {

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

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

397 }

398 > .dropdown-container {

399 display: block;

400 }

401 }

402

403 .icon-list hr {

404 margin: $-s $-m;

405 max-width: 140px;

406 opacity: 0.25;

407 height: 1.1px;

408 }

409

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

411 display: none;

412 }

413

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

415 padding: $-s $-m;

416 display: flex;

417 align-items: center;

418 background-color: transparent;

419 border: 0;

420 width: 100%;

421 position: relative;

422 word-break: break-word;

423 h4 a {

424 color: #666;

425 }

426 > span:first-child {

427 margin-inline-end: $-m;

428 flex-basis: 1.88em;

429 flex: none;

430 }

431 > span:last-child {

432 flex: 1;

433 text-align: start;

434 }

435 > .content {

436 min-width: 0;

437 }

438 &:not(.no-hover) {

439 cursor: pointer;

440 }

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

442 text-decoration: none;

443 background-color: rgba(0, 0, 0, 0.1);

444 border-radius: 4px;

445 }

446 &.outline-hover:hover {

447 background-color: transparent;

448 }

449 &:focus {

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

451 outline: 1px dotted #666;

452 outline-offset: -2px;

453 }

454 }

455

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

457 display: inline-block;

458 vertical-align: top;

459 position: relative;

460 top: 1px;

461 svg {

462 margin-inline-end: 0;

463 }

464 }

465

466 .card .entity-list-item:not(.no-hover):hover {

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

468 }

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

470 background-color: #EEEEEE;

471 }

472

473 .entity-list-item-children {

474 padding: $-m;

475 > div {

476 overflow: hidden;

477 padding: $-xs 0;

478 margin-top: -$-xs;

479 }

480 .entity-chip {

481 text-overflow: ellipsis;

482 height: 2.5em;

483 overflow: hidden;

484 text-align: start;

485 display: block;

486 white-space: nowrap;

487 }

488 }

489

490 .entity-list-item-image {

491 align-self: stretch;

492 width: 140px;

493 flex: none;

494 background-size: cover;

495 background-position: 50% 50%;

496 border-radius: 3px;

497 position: relative;

498 margin-inline-end: $-l;

499

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

501 width: 220px;

502 }

503

504 .svg-icon {

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

506 font-size: 1.66rem;

507 margin-inline-end: 0;

508 position: absolute;

509 bottom: $-xs;

510 left: $-xs;

511 }

512

513 @include smaller-than($m) {

514 width: 80px;

515 }

516 }

517

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

519 width: 60px;

520 }

521

522 .entity-list.compact {

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

524 h4, a {

525 line-height: 1.2;

526 }

527 .entity-item-snippet {

528 display: none;

529 }

530 .entity-list-item p {

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

532 padding-top: $-xs;

533 }

534 p {

535 margin: 0;

536 }

537 > p.empty-text {

538 display: block;

539 font-size: $fs-m;

540 }

541 hr {

542 margin: 0;

543 }

544 @include smaller-than($m) {

545 h4 {

546 font-size: 1.666em;

547 }

548 }

549 }

550

551 .entity-item-tags {

552 font-size: .75rem;

553 opacity: 1;

554 .primary-background-light {

555 background: transparent;

556 }

557 .tag-name {

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

559 }

560 }

561

562 .dropdown-container {

563 display: inline-block;

564 vertical-align: top;

565 position: relative;

566 }

567

568 .dropdown-menu {

569 display: none;

570 position: absolute;

571 z-index: 999;

572 top: 0;

573 list-style: none;

574 right: 0;

575 margin: $-m 0;

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

577 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);

578 border-radius: 1px;

579 min-width: 180px;

580 padding: $-xs 0;

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

582 fill: currentColor;

583 text-align: start !important;

584 max-height: 500px;

585 overflow-y: auto;

586 &.wide {

587 min-width: 220px;

588 }

589 .text-muted {

590 color: #999;

591 fill: #999;

592 }

593 li.active a {

594 font-weight: 600;

595 }

596 a, button {

597 display: block;

598 padding: $-xs $-m;

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

600 fill: currentColor;

601 white-space: nowrap;

602 line-height: 1.6;

603 cursor: pointer;

604 &:hover, &:focus {

605 text-decoration: none;

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

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

608 }

609 &:focus {

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

611 outline-offset: -2px;

612 }

613 svg {

614 margin-inline-end: $-s;

615 display: inline-block;

616 width: 16px;

617 }

618 }

619 button {

620 width: 100%;

621 text-align: start;

622 }

623 li.border-bottom {

624 border-bottom: 1px solid #DDD;

625 }

626 li hr {

627 margin: $-xs 0;

628 }

629 }

630

631 // Books grid view

632 .featured-image-container {

633 position: relative;

634 overflow: hidden;

635 min-height: 140px;

636 background-size: cover;

637 background-position: 50% 50%;

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

639 a {

640 display: block;

641 }

642 img {

643 display: block;

644 width: 100%;

645 max-width: 100%;

646 height: auto;

647 }

648 }

649 .featured-image-container-wrap {

650 position: relative;

651 .svg-icon {

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

653 font-size: 2rem;

654 margin-inline-end: 0;

655 position: absolute;

656 bottom: 10px;

657 left: 6px;

658 }

659 }

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

661 opacity: .5;

662 }

663

664 .action-link-list {

665 //padding: $-s 0;

666 }

667 .action-link {

668 background: transparent;

669 border: none;

670 color: currentColor;

671 padding: $-m 0;

672 }

673

674 .active-link-list {

675 a {

676 display: inline-block;

677 padding: $-s;

678 }

679 a:not(.active) {

680 @include lightDark(color, #444, #666);

681 }

682 a:hover {

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

684 border-radius: 3px;

685 text-decoration: none;

686 }

687 }