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 .content {

189 padding-top: $-xs;

190 padding-bottom: $-xs;

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

192 }

193 }

194 .entity-list-item.selected {

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

196 }

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

198 margin-top: -$-xs;

199 padding-inline-end: 0;

200 }

201 .entity-list-item-name {

202 font-size: 1em;

203 margin: 0;

204 margin-right: $-m;

205 }

206 .chapter-child-menu {

207 font-size: .8rem;

208 margin-top: -.2rem;

209 margin-inline-start: -1rem;

210 }

211 [chapter-toggle] {

212 padding-inline-start: .7rem;

213 padding-bottom: .2rem;

214 }

215 .entity-list-item .icon {

216 z-index: 2;

217 width: 4px;

218 height: auto;

219 align-self: stretch;

220 flex-shrink: 0;

221 border-radius: 1px;

222 opacity: 0.6;

223 }

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

225 opacity: 1;

226 }

227 .entity-list-item .icon svg {

228 display: none;

229 }

230 }

231

232 .chapter-child-menu {

233 ul.sub-menu {

234 display: none;

235 padding-inline-start: 0;

236 position: relative;

237 }

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

239 display: block;

240 }

241 }

242

243 // Sortable Lists

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

245 list-style: none;

246 }

247 .sort-box {

248 margin-bottom: $-m;

249 padding: $-m $-xl;

250 position: relative;

251 &::before {

252 pointer-events: none;

253 content: '';

254 border-radius: 4px;

255 opacity: 0.5;

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

257 display: block;

258 top: 0;

259 bottom: 0;

260 left: 0;

261 right: 0;

262 position: absolute;

263 }

264 }

265 .sort-box-options {

266 display: flex;

267 flex-wrap: wrap;

268 justify-content: space-between;

269 }

270 .sort-box-options .button {

271 margin-inline-start: 0;

272 }

273 .sortable-page-list {

274 margin-inline-start: 0;

275 padding: 0;

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

277 align-self: flex-start;

278 }

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

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

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

282 }

283 .entity-list-item > div {

284 display: block;

285 flex: 1;

286 }

287 > ul {

288 margin-inline-start: 0;

289 }

290 ul {

291 margin-bottom: $-m;

292 margin-top: 0;

293 padding-inline-start: $-m;

294 }

295 li {

296 border: 1px solid #DDD;

297 margin-top: -1px;

298 min-height: 38px;

299 }

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

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

302 }

303 li:first-child {

304 margin-top: $-xs;

305 }

306 }

307 .sortable-page-list li.placeholder {

308 position: relative;

309 }

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

311 position: absolute;

312 }

313

314 .activity-list-item {

315 padding: $-s 0;

316 display: grid;

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

318 grid-column-gap: $-m;

319 font-size: 0.9em;

320 }

321 .card .activity-list-item {

322 padding: $-s $-m;

323 }

324

325 .user-list-item {

326 display: inline-grid;

327 padding: $-s;

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

329 grid-column-gap: $-m;

330 font-size: 0.9em;

331 align-items: center;

332 > div:first-child {

333 line-height: 0;

334 }

335 }

336

337 ul.pagination {

338 display: inline-block;

339 list-style: none;

340 margin: $-m 0;

341 padding-inline-start: 1px;

342 li {

343 float: left;

344 }

345 li:first-child {

346 a, span {

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

348 }

349 }

350 li:last-child {

351 a, span {

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

353 }

354 }

355 a, span {

356 display: block;

357 padding: $-xxs $-s;

358 border: 1px solid #CCC;

359 margin-inline-start: -1px;

360 user-select: none;

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

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

363 }

364 li.disabled {

365 cursor: not-allowed;

366 }

367 li.active span {

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

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

370 }

371 }

372

373 .compact ul.pagination {

374 margin: 0;

375 }

376

377 .entity-list, .icon-list {

378 margin: 0 (-$-m);

379 h4 {

380 margin: 0;

381 }

382 hr {

383 margin: 0;

384 }

385 .text-small.text-muted {

386 color: #AAA;

387 font-size: 0.75em;

388 margin-top: $-xs;

389 }

390 .text-muted p.text-muted {

391 margin-top: 0;

392 }

393 .page.draft .text-page {

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

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

396 }

397 > .dropdown-container {

398 display: block;

399 }

400 }

401

402 .icon-list hr {

403 margin: $-s $-m;

404 max-width: 140px;

405 opacity: 0.25;

406 height: 1.1px;

407 }

408

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

410 display: none;

411 }

412

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

414 padding: $-s 0 $-s $-m;

415 display: flex;

416 align-items: center;

417 background-color: transparent;

418 border: 0;

419 width: 100%;

420 position: relative;

421 word-break: break-word;

422 h4 a {

423 color: #666;

424 }

425 > span:first-child {

426 margin-inline-end: $-m;

427 flex-basis: 1.88em;

428 flex: none;

429 }

430 > span:last-child {

431 flex: 1;

432 text-align: start;

433 }

434 > .content {

435 min-width: 0;

436 }

437 &:not(.no-hover) {

438 cursor: pointer;

439 }

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

441 text-decoration: none;

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

443 border-radius: 4px;

444 }

445 &.outline-hover:hover {

446 background-color: transparent;

447 }

448 &:focus {

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

450 outline: 1px dotted #666;

451 outline-offset: -2px;

452 }

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 .card .entity-list-item:not(.no-hover):hover {

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

467 }

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

469 background-color: #EEEEEE;

470 }

471

472 .entity-list-item-children {

473 padding: $-m;

474 > div {

475 overflow: hidden;

476 padding: $-xs 0;

477 margin-top: -$-xs;

478 }

479 .entity-chip {

480 text-overflow: ellipsis;

481 height: 2.5em;

482 overflow: hidden;

483 text-align: start;

484 display: block;

485 white-space: nowrap;

486 }

487 }

488

489 .entity-list-item-image {

490 align-self: stretch;

491 width: 140px;

492 flex: none;

493 background-size: cover;

494 background-position: 50% 50%;

495 border-radius: 3px;

496 position: relative;

497 margin-inline-end: $-l;

498

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

500 width: 220px;

501 }

502

503 .svg-icon {

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

505 font-size: 1.66rem;

506 margin-inline-end: 0;

507 position: absolute;

508 bottom: $-xs;

509 left: $-xs;

510 }

511

512 @include smaller-than($m) {

513 width: 80px;

514 }

515 }

516

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

518 width: 60px;

519 }

520

521 .entity-list.compact {

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

523 h4, a {

524 line-height: 1.2;

525 }

526 .entity-item-snippet {

527 display: none;

528 }

529 .entity-list-item p {

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

531 padding-top: $-xs;

532 }

533 p {

534 margin: 0;

535 }

536 > p.empty-text {

537 display: block;

538 font-size: $fs-m;

539 }

540 hr {

541 margin: 0;

542 }

543 @include smaller-than($m) {

544 h4 {

545 font-size: 1.666em;

546 }

547 }

548 }

549

550 .entity-item-tags {

551 font-size: .75rem;

552 opacity: 1;

553 .primary-background-light {

554 background: transparent;

555 }

556 .tag-name {

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

558 }

559 }

560

561 .dropdown-container {

562 display: inline-block;

563 vertical-align: top;

564 position: relative;

565 }

566

567 .dropdown-menu {

568 display: none;

569 position: absolute;

570 z-index: 999;

571 top: 0;

572 list-style: none;

573 right: 0;

574 margin: $-m 0;

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

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

577 border-radius: 1px;

578 min-width: 180px;

579 padding: $-xs 0;

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

581 fill: currentColor;

582 text-align: start !important;

583 max-height: 500px;

584 overflow-y: auto;

585 &.wide {

586 min-width: 220px;

587 }

588 .text-muted {

589 color: #999;

590 fill: #999;

591 }

592 li.active a {

593 font-weight: 600;

594 }

595 a, button {

596 display: block;

597 padding: $-xs $-m;

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

599 fill: currentColor;

600 white-space: nowrap;

601 line-height: 1.6;

602 cursor: pointer;

603 &:hover, &:focus {

604 text-decoration: none;

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

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

607 }

608 &:focus {

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

610 outline-offset: -2px;

611 }

612 svg {

613 margin-inline-end: $-s;

614 display: inline-block;

615 width: 16px;

616 }

617 }

618 button {

619 width: 100%;

620 text-align: start;

621 }

622 li.border-bottom {

623 border-bottom: 1px solid #DDD;

624 }

625 li hr {

626 margin: $-xs 0;

627 }

628 }

629

630 // Books grid view

631 .featured-image-container {

632 position: relative;

633 overflow: hidden;

634 min-height: 140px;

635 background-size: cover;

636 background-position: 50% 50%;

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

638 a {

639 display: block;

640 }

641 img {

642 display: block;

643 width: 100%;

644 max-width: 100%;

645 height: auto;

646 }

647 }

648 .featured-image-container-wrap {

649 position: relative;

650 .svg-icon {

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

652 font-size: 2rem;

653 margin-inline-end: 0;

654 position: absolute;

655 bottom: 10px;

656 left: 6px;

657 }

658 }

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

660 opacity: .5;

661 }

662

663 .action-link-list {

664 //padding: $-s 0;

665 }

666 .action-link {

667 background: transparent;

668 border: none;

669 color: currentColor;

670 padding: $-m 0;

671 }

672

673 .active-link-list {

674 a {

675 display: inline-block;

676 padding: $-s;

677 }

678 a:not(.active) {

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

680 }

681 a:hover {

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

683 border-radius: 3px;

684 text-decoration: none;

685 }

686 }