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 }

205 .chapter-child-menu {

206 font-size: .8rem;

207 margin-top: -.2rem;

208 margin-inline-start: -1rem;

209 }

210 [chapter-toggle] {

211 padding-inline-start: .7rem;

212 padding-bottom: .2rem;

213 }

214 .entity-list-item .icon {

215 z-index: 2;

216 width: 4px;

217 height: auto;

218 align-self: stretch;

219 flex-shrink: 0;

220 border-radius: 1px;

221 opacity: 0.6;

222 }

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

224 opacity: 1;

225 }

226 .entity-list-item .icon svg {

227 display: none;

228 }

229 }

230

231 .chapter-child-menu {

232 ul.sub-menu {

233 display: none;

234 padding-inline-start: 0;

235 position: relative;

236 }

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

238 display: block;

239 }

240 }

241

242 // Sortable Lists

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

244 list-style: none;

245 }

246 .sort-box {

247 margin-bottom: $-m;

248 padding: $-m $-xl;

249 position: relative;

250 &::before {

251 pointer-events: none;

252 content: '';

253 border-radius: 4px;

254 opacity: 0.5;

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

256 display: block;

257 top: 0;

258 bottom: 0;

259 left: 0;

260 right: 0;

261 position: absolute;

262 }

263 }

264 .sort-box-options {

265 display: flex;

266 flex-wrap: wrap;

267 justify-content: space-between;

268 }

269 .sort-box-options .button {

270 margin-inline-start: 0;

271 }

272 .sortable-page-list {

273 margin-inline-start: 0;

274 padding: 0;

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

276 align-self: flex-start;

277 }

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

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

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

281 }

282 .entity-list-item > div {

283 display: block;

284 flex: 1;

285 }

286 > ul {

287 margin-inline-start: 0;

288 }

289 ul {

290 margin-bottom: $-m;

291 margin-top: 0;

292 padding-inline-start: $-m;

293 }

294 li {

295 border: 1px solid #DDD;

296 margin-top: -1px;

297 min-height: 38px;

298 }

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

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

301 }

302 li:first-child {

303 margin-top: $-xs;

304 }

305 }

306 .sortable-page-list li.placeholder {

307 position: relative;

308 }

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

310 position: absolute;

311 }

312

313 .activity-list-item {

314 padding: $-s 0;

315 display: grid;

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

317 grid-column-gap: $-m;

318 font-size: 0.9em;

319 }

320 .card .activity-list-item {

321 padding: $-s $-m;

322 }

323

324 .user-list-item {

325 display: inline-grid;

326 padding: $-s;

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

328 grid-column-gap: $-m;

329 font-size: 0.9em;

330 align-items: center;

331 > div:first-child {

332 line-height: 0;

333 }

334 }

335

336 ul.pagination {

337 display: inline-block;

338 list-style: none;

339 margin: $-m 0;

340 padding-inline-start: 1px;

341 li {

342 float: left;

343 }

344 li:first-child {

345 a, span {

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

347 }

348 }

349 li:last-child {

350 a, span {

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

352 }

353 }

354 a, span {

355 display: block;

356 padding: $-xxs $-s;

357 border: 1px solid #CCC;

358 margin-inline-start: -1px;

359 user-select: none;

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

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

362 }

363 li.disabled {

364 cursor: not-allowed;

365 }

366 li.active span {

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

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

369 }

370 }

371

372 .compact ul.pagination {

373 margin: 0;

374 }

375

376 .entity-list, .icon-list {

377 margin: 0 (-$-m);

378 h4 {

379 margin: 0;

380 }

381 hr {

382 margin: 0;

383 }

384 .text-small.text-muted {

385 color: #AAA;

386 font-size: 0.75em;

387 margin-top: $-xs;

388 }

389 .text-muted p.text-muted {

390 margin-top: 0;

391 }

392 .page.draft .text-page {

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

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

395 }

396 > .dropdown-container {

397 display: block;

398 }

399 }

400

401 .icon-list hr {

402 margin: $-s $-m;

403 max-width: 140px;

404 opacity: 0.25;

405 height: 1.1px;

406 }

407

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

409 display: none;

410 }

411

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

413 padding: $-s $-m;

414 display: flex;

415 align-items: center;

416 background-color: transparent;

417 border: 0;

418 width: 100%;

419 position: relative;

420 word-break: break-word;

421 h4 a {

422 color: #666;

423 }

424 > span:first-child {

425 margin-inline-end: $-m;

426 flex-basis: 1.88em;

427 flex: none;

428 }

429 > span:last-child {

430 flex: 1;

431 text-align: start;

432 }

433 &:not(.no-hover) {

434 cursor: pointer;

435 }

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

437 text-decoration: none;

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

439 border-radius: 4px;

440 }

441 &.outline-hover {

442 border: 1px solid transparent;

443 }

444 &.outline-hover:hover {

445 background-color: transparent;

446 border-color: rgba(0, 0, 0, 0.1);

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 .dropdown-container {

551 display: inline-block;

552 vertical-align: top;

553 position: relative;

554 }

555

556 .dropdown-menu {

557 display: none;

558 position: absolute;

559 z-index: 999;

560 top: 0;

561 list-style: none;

562 right: 0;

563 margin: $-m 0;

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

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

566 border-radius: 1px;

567 min-width: 180px;

568 padding: $-xs 0;

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

570 fill: currentColor;

571 text-align: start !important;

572 max-height: 500px;

573 overflow-y: auto;

574 &.wide {

575 min-width: 220px;

576 }

577 .text-muted {

578 color: #999;

579 fill: #999;

580 }

581 li.active a {

582 font-weight: 600;

583 }

584 a, button {

585 display: block;

586 padding: $-xs $-m;

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

588 fill: currentColor;

589 white-space: nowrap;

590 line-height: 1.6;

591 cursor: pointer;

592 &:hover, &:focus {

593 text-decoration: none;

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

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

596 }

597 &:focus {

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

599 outline-offset: -2px;

600 }

601 svg {

602 margin-inline-end: $-s;

603 display: inline-block;

604 width: 16px;

605 }

606 }

607 button {

608 width: 100%;

609 text-align: start;

610 }

611 li.border-bottom {

612 border-bottom: 1px solid #DDD;

613 }

614 li hr {

615 margin: $-xs 0;

616 }

617 }

618

619 // Books grid view

620 .featured-image-container {

621 position: relative;

622 overflow: hidden;

623 min-height: 140px;

624 background-size: cover;

625 background-position: 50% 50%;

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

627 a {

628 display: block;

629 }

630 img {

631 display: block;

632 width: 100%;

633 max-width: 100%;

634 height: auto;

635 }

636 }

637 .featured-image-container-wrap {

638 position: relative;

639 .svg-icon {

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

641 font-size: 2rem;

642 margin-inline-end: 0;

643 position: absolute;

644 bottom: 10px;

645 left: 6px;

646 }

647 }

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

649 opacity: .5;

650 }

651

652 .action-link-list {

653 //padding: $-s 0;

654 }

655 .action-link {

656 background: transparent;

657 border: none;

658 color: currentColor;

659 padding: $-m 0;

660 }

661

662 .active-link-list {

663 a {

664 display: inline-block;

665 padding: $-s;

666 }

667 a:not(.active) {

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

669 }

670 a:hover {

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

672 border-radius: 3px;

673 text-decoration: none;

674 }

675 }