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 background-color: rgba(0, 0, 0, 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 background-color: #BBB !important;

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 z-index: 1;

146 @include rtl {

147 left: auto;

148 right: -2px;

149 }

150 }

151 }

152

153 // Sidebar list

154 .book-tree .sidebar-page-list {

155 list-style: none;

156 @include margin($-xs, -$-s, 0, -$-s);

157 padding-inline-start: 0;

158 padding-inline-end: 0;

159 position: relative;

160

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

162 content: '';

163 display: block;

164 position: absolute;

165 left: $-m;

166 top: 1rem;

167 bottom: 1rem;

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

169 z-index: 0;

170 @include rtl {

171 left: auto;

172 right: $-m;

173 }

174 }

175

176 ul {

177 list-style: none;

178 padding-inline-start: 1rem;

179 padding-inline-end: 0;

180 }

181

182 .entity-list-item {

183 padding-top: $-xxs;

184 padding-bottom: $-xxs;

185 background-clip: content-box;

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

187 .content {

188 padding-top: $-xs;

189 padding-bottom: $-xs;

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

191 }

192 }

193 .entity-list-item.selected {

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

195 }

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

197 margin-top: -$-xs;

198 padding-inline-end: 0;

199 }

200 .entity-list-item-name {

201 font-size: 1em;

202 margin: 0;

203 }

204 .chapter-child-menu {

205 font-size: .8rem;

206 margin-top: -.2rem;

207 margin-inline-start: -1rem;

208 }

209 [chapter-toggle] {

210 padding-inline-start: .7rem;

211 padding-bottom: .2rem;

212 }

213 .entity-list-item .icon {

214 z-index: 2;

215 width: 4px;

216 height: auto;

217 align-self: stretch;

218 flex-shrink: 0;

219 border-radius: 1px;

220 opacity: 0.6;

221 }

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

223 opacity: 1;

224 }

225 .entity-list-item .icon svg {

226 display: none;

227 }

228 }

229

230 .chapter-child-menu {

231 ul.sub-menu {

232 display: none;

233 padding-inline-start: 0;

234 position: relative;

235 }

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

237 display: block;

238 }

239 }

240

241 // Sortable Lists

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

243 list-style: none;

244 }

245 .sort-box {

246 margin-bottom: $-m;

247 padding: $-m $-xl;

248 position: relative;

249 &::before {

250 pointer-events: none;

251 content: '';

252 border-radius: 4px;

253 opacity: 0.5;

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

255 display: block;

256 top: 0;

257 bottom: 0;

258 left: 0;

259 right: 0;

260 position: absolute;

261 }

262 }

263 .sort-box-options {

264 display: flex;

265 flex-wrap: wrap;

266 justify-content: space-between;

267 }

268 .sort-box-options .button {

269 margin-inline-start: 0;

270 }

271 .sortable-page-list {

272 margin-inline-start: 0;

273 padding: 0;

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

275 align-self: flex-start;

276 }

277 .entity-list-item > div {

278 display: block;

279 flex: 1;

280 }

281 > ul {

282 margin-inline-start: 0;

283 }

284 ul {

285 margin-bottom: $-m;

286 margin-top: 0;

287 padding-inline-start: $-m;

288 }

289 li {

290 border: 1px solid #DDD;

291 margin-top: -1px;

292 min-height: 38px;

293 }

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

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

296 }

297 li:first-child {

298 margin-top: $-xs;

299 }

300 }

301 .sortable-page-list li.placeholder {

302 position: relative;

303 }

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

305 position: absolute;

306 }

307

308 .activity-list-item {

309 padding: $-s 0;

310 display: grid;

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

312 grid-column-gap: $-m;

313 font-size: 0.9em;

314 }

315 .card .activity-list-item {

316 padding: $-s $-m;

317 }

318

319 .user-list-item {

320 display: inline-grid;

321 padding: $-s;

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

323 grid-column-gap: $-m;

324 font-size: 0.9em;

325 align-items: center;

326 > div:first-child {

327 line-height: 0;

328 }

329 }

330

331 ul.pagination {

332 display: inline-block;

333 list-style: none;

334 margin: $-m 0;

335 padding-inline-start: 1px;

336 li {

337 float: left;

338 }

339 li:first-child {

340 a, span {

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

342 }

343 }

344 li:last-child {

345 a, span {

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

347 }

348 }

349 a, span {

350 display: block;

351 padding: $-xxs $-s;

352 border: 1px solid #CCC;

353 margin-inline-start: -1px;

354 user-select: none;

355 &.disabled {

356 cursor: not-allowed;

357 }

358 }

359 li.active span {

360 color: #FFF;

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 background-color: transparent;

409 border: 0;

410 width: 100%;

411 position: relative;

412 word-break: break-word;

413 h4 a {

414 color: #666;

415 }

416 > span:first-child {

417 margin-inline-end: $-m;

418 flex-basis: 1.88em;

419 flex: none;

420 }

421 > span:last-child {

422 flex: 1;

423 text-align: start;

424 }

425 &:not(.no-hover) {

426 cursor: pointer;

427 }

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

429 text-decoration: none;

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

431 border-radius: 4px;

432 }

433 &.outline-hover {

434 border: 1px solid transparent;

435 }

436 &.outline-hover:hover {

437 background-color: transparent;

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

439 }

440 &:focus {

441 background-color: #eee;

442 outline: 1px dotted #666;

443 outline-offset: -2px;

444 }

445 }

446

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

448 display: inline-block;

449 vertical-align: top;

450 position: relative;

451 top: 1px;

452 svg {

453 margin-inline-end: 0;

454 }

455 }

456

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

458 background-color: #F2F2F2;

459 }

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

461 background-color: #EEEEEE;

462 }

463

464 .entity-list-item-children {

465 padding: $-m;

466 > div {

467 overflow: hidden;

468 padding: $-xs 0;

469 margin-top: -$-xs;

470 }

471 .entity-chip {

472 text-overflow: ellipsis;

473 height: 2.5em;

474 overflow: hidden;

475 text-align: start;

476 display: block;

477 white-space: nowrap;

478 }

479 }

480

481 .entity-list-item-image {

482 align-self: stretch;

483 width: 140px;

484 flex: none;

485 background-size: cover;

486 background-position: 50% 50%;

487 border-radius: 3px;

488 position: relative;

489 margin-inline-end: $-l;

490

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

492 width: 220px;

493 }

494

495 .svg-icon {

496 color: #FFF;

497 fill: #FFF;

498 font-size: 1.66rem;

499 margin-inline-end: 0;

500 position: absolute;

501 bottom: $-xs;

502 left: $-xs;

503 }

504

505 @include smaller-than($m) {

506 width: 80px;

507 }

508 }

509

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

511 width: 60px;

512 }

513

514 .entity-list.compact {

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

516 h4, a {

517 line-height: 1.2;

518 }

519 .entity-item-snippet {

520 display: none;

521 }

522 .entity-list-item p {

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

524 padding-top: $-xs;

525 }

526 p {

527 margin: 0;

528 }

529 > p.empty-text {

530 display: block;

531 font-size: $fs-m;

532 }

533 hr {

534 margin: 0;

535 }

536 @include smaller-than($m) {

537 h4 {

538 font-size: 1.666em;

539 }

540 }

541 }

542

543 .dropdown-container {

544 display: inline-block;

545 vertical-align: top;

546 position: relative;

547 }

548

549 .dropdown-menu {

550 display: none;

551 position: absolute;

552 z-index: 999;

553 top: 0;

554 list-style: none;

555 right: 0;

556 margin: $-m 0;

557 background-color: #FFFFFF;

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

559 border-radius: 1px;

560 border: 1px solid #EEE;

561 min-width: 180px;

562 padding: $-xs 0;

563 color: #555;

564 fill: #555;

565 text-align: start !important;

566 &.wide {

567 min-width: 220px;

568 }

569 .text-muted {

570 color: #999;

571 fill: #999;

572 }

573 li.active a {

574 font-weight: 600;

575 }

576 a, button {

577 display: block;

578 padding: $-xs $-m;

579 color: #555;

580 fill: currentColor;

581 white-space: nowrap;

582 &:hover, &:focus {

583 text-decoration: none;

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

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

586 }

587 &:focus {

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

589 outline-offset: -2px;

590 }

591 svg {

592 margin-inline-end: $-s;

593 display: inline-block;

594 width: 16px;

595 }

596 }

597 button {

598 width: 100%;

599 text-align: start;

600 }

601 li.border-bottom {

602 border-bottom: 1px solid #DDD;

603 }

604 }

605

606 // Books grid view

607 .featured-image-container {

608 position: relative;

609 overflow: hidden;

610 min-height: 140px;

611 background-size: cover;

612 background-position: 50% 50%;

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

614 a {

615 display: block;

616 }

617 img {

618 display: block;

619 width: 100%;

620 max-width: 100%;

621 height: auto;

622 }

623 }

624 .featured-image-container-wrap {

625 position: relative;

626 .svg-icon {

627 color: #FFF;

628 fill: #FFF;

629 font-size: 2rem;

630 margin-inline-end: 0;

631 position: absolute;

632 bottom: 10px;

633 left: 6px;

634 }

635 }

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

637 opacity: .5;

638 }

639

640 .action-link-list {

641 //padding: $-s 0;

642 }

643 .action-link {

644 background: transparent;

645 border: none;

646 color: currentColor;

647 padding: $-m 0;

648 }

649

650 .active-link-list {

651 a {

652 display: inline-block;

653 padding: $-s;

654 }

655 a:not(.active) {

656 color: #444;

657 fill: #444;

658 }

659 a:hover {

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

661 border-radius: 3px;

662 text-decoration: none;

663 }

664 }