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 &.disabled {

361 cursor: not-allowed;

362 }

363 }

364 li.active span {

365 @include lightDark(color, #444, #eee);

366 @include lightDark(background-color, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));

367 }

368 }

369

370 .compact ul.pagination {

371 margin: 0;

372 }

373

374 .entity-list, .icon-list {

375 margin: 0 (-$-m);

376 h4 {

377 margin: 0;

378 }

379 hr {

380 margin: 0;

381 }

382 .text-small.text-muted {

383 color: #AAA;

384 font-size: 0.75em;

385 margin-top: $-xs;

386 }

387 .text-muted p.text-muted {

388 margin-top: 0;

389 }

390 .page.draft .text-page {

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

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

393 }

394 > .dropdown-container {

395 display: block;

396 }

397 }

398

399 .icon-list hr {

400 margin: $-s $-m;

401 max-width: 140px;

402 opacity: 0.25;

403 height: 1.1px;

404 }

405

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

407 display: none;

408 }

409

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

411 padding: $-s $-m;

412 display: flex;

413 align-items: center;

414 background-color: transparent;

415 border: 0;

416 width: 100%;

417 position: relative;

418 word-break: break-word;

419 h4 a {

420 color: #666;

421 }

422 > span:first-child {

423 margin-inline-end: $-m;

424 flex-basis: 1.88em;

425 flex: none;

426 }

427 > span:last-child {

428 flex: 1;

429 text-align: start;

430 }

431 &:not(.no-hover) {

432 cursor: pointer;

433 }

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

435 text-decoration: none;

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

437 border-radius: 4px;

438 }

439 &.outline-hover {

440 border: 1px solid transparent;

441 }

442 &.outline-hover:hover {

443 background-color: transparent;

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

445 }

446 &:focus {

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

448 outline: 1px dotted #666;

449 outline-offset: -2px;

450 }

451 }

452

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

454 display: inline-block;

455 vertical-align: top;

456 position: relative;

457 top: 1px;

458 svg {

459 margin-inline-end: 0;

460 }

461 }

462

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

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

465 }

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

467 background-color: #EEEEEE;

468 }

469

470 .entity-list-item-children {

471 padding: $-m;

472 > div {

473 overflow: hidden;

474 padding: $-xs 0;

475 margin-top: -$-xs;

476 }

477 .entity-chip {

478 text-overflow: ellipsis;

479 height: 2.5em;

480 overflow: hidden;

481 text-align: start;

482 display: block;

483 white-space: nowrap;

484 }

485 }

486

487 .entity-list-item-image {

488 align-self: stretch;

489 width: 140px;

490 flex: none;

491 background-size: cover;

492 background-position: 50% 50%;

493 border-radius: 3px;

494 position: relative;

495 margin-inline-end: $-l;

496

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

498 width: 220px;

499 }

500

501 .svg-icon {

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

503 font-size: 1.66rem;

504 margin-inline-end: 0;

505 position: absolute;

506 bottom: $-xs;

507 left: $-xs;

508 }

509

510 @include smaller-than($m) {

511 width: 80px;

512 }

513 }

514

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

516 width: 60px;

517 }

518

519 .entity-list.compact {

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

521 h4, a {

522 line-height: 1.2;

523 }

524 .entity-item-snippet {

525 display: none;

526 }

527 .entity-list-item p {

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

529 padding-top: $-xs;

530 }

531 p {

532 margin: 0;

533 }

534 > p.empty-text {

535 display: block;

536 font-size: $fs-m;

537 }

538 hr {

539 margin: 0;

540 }

541 @include smaller-than($m) {

542 h4 {

543 font-size: 1.666em;

544 }

545 }

546 }

547

548 .dropdown-container {

549 display: inline-block;

550 vertical-align: top;

551 position: relative;

552 }

553

554 .dropdown-menu {

555 display: none;

556 position: absolute;

557 z-index: 999;

558 top: 0;

559 list-style: none;

560 right: 0;

561 margin: $-m 0;

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

563 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);

564 border-radius: 1px;

565 border: 1px solid #EEE;

566 @include lightDark(border-color, #eee, #000);

567 min-width: 180px;

568 padding: $-xs 0;

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

570 fill: currentColor;

571 text-align: start !important;

572 &.wide {

573 min-width: 220px;

574 }

575 .text-muted {

576 color: #999;

577 fill: #999;

578 }

579 li.active a {

580 font-weight: 600;

581 }

582 a, button {

583 display: block;

584 padding: $-xs $-m;

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

586 fill: currentColor;

587 white-space: nowrap;

588 line-height: 1.6;

589 cursor: pointer;

590 &:hover, &:focus {

591 text-decoration: none;

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

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

594 }

595 &:focus {

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

597 outline-offset: -2px;

598 }

599 svg {

600 margin-inline-end: $-s;

601 display: inline-block;

602 width: 16px;

603 }

604 }

605 button {

606 width: 100%;

607 text-align: start;

608 }

609 li.border-bottom {

610 border-bottom: 1px solid #DDD;

611 }

612 li hr {

613 margin: $-xs 0;

614 }

615 }

616

617 // Books grid view

618 .featured-image-container {

619 position: relative;

620 overflow: hidden;

621 min-height: 140px;

622 background-size: cover;

623 background-position: 50% 50%;

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

625 a {

626 display: block;

627 }

628 img {

629 display: block;

630 width: 100%;

631 max-width: 100%;

632 height: auto;

633 }

634 }

635 .featured-image-container-wrap {

636 position: relative;

637 .svg-icon {

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

639 font-size: 2rem;

640 margin-inline-end: 0;

641 position: absolute;

642 bottom: 10px;

643 left: 6px;

644 }

645 }

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

647 opacity: .5;

648 }

649

650 .action-link-list {

651 //padding: $-s 0;

652 }

653 .action-link {

654 background: transparent;

655 border: none;

656 color: currentColor;

657 padding: $-m 0;

658 }

659

660 .active-link-list {

661 a {

662 display: inline-block;

663 padding: $-s;

664 }

665 a:not(.active) {

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

667 }

668 a:hover {

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

670 border-radius: 3px;

671 text-decoration: none;

672 }

673 }