2 .book-contents .entity-list-item {
9 margin-inline-end: $-l;
26 .entity-list-item + .chapter-expansion {
28 padding: 0 $-m $-m $-m;
36 border-radius: 0 0 1px 1px;
45 background-color: currentColor;
59 .chapter-expansion-toggle {
60 border-radius: 0 4px 4px 0;
65 .chapter-expansion-toggle:hover {
66 background-color: rgba(0, 0, 0, 0.06);
70 .entity-list-item.has-children {
73 border-radius: 4px 4px 0 0;
79 .entity-list-item-name {
82 .entity-list-item-children {
91 @include margin($-s, 0, $-m, $-xs);
102 @include lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
114 padding-inline-start: $nav-indent;
117 padding-inline-start: $nav-indent * 1.5;
120 padding-inline-start: $nav-indent * 2;
123 padding-inline-start: $nav-indent * 2.5;
126 padding-inline-start: $nav-indent*3;
129 padding-inline-start: $nav-indent*3.5;
134 li:not(.current-heading) .sidebar-page-nav-bullet {
135 @include lightDark(background-color, #BBB, #666, true);
137 .sidebar-page-nav-bullet {
144 box-shadow: 0 0 0 6px #F2F2F2;
145 @include lightDark(box-shadow, 0 0 0 6px #F2F2F2, 0 0 0 6px #111);
155 .book-tree .sidebar-page-list {
157 @include margin($-xs, -$-s, 0, -$-s);
158 padding-inline-start: 0;
159 padding-inline-end: 0;
162 &:after, .sub-menu:after {
169 border-inline-start: 4px solid rgba(0, 0, 0, 0.1);
179 padding-inline-start: 1rem;
180 padding-inline-end: 0;
185 padding-bottom: $-xxs;
186 background-clip: content-box;
187 border-radius: 0 3px 3px 0;
188 padding-inline-end: 0;
191 padding-bottom: $-xs;
192 max-width: calc(100% - 20px);
195 .entity-list-item.selected {
196 @include lightDark(background-color, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
198 .entity-list-item.no-hover {
200 padding-inline-end: 0;
202 .entity-list-item-name {
205 margin-inline-end: $-m;
207 .chapter-child-menu {
210 margin-inline-start: -1rem;
213 padding-inline-start: .7rem;
214 padding-bottom: .2rem;
216 .entity-list-item .icon {
225 .entity-list-item .icon:after {
228 .entity-list-item .icon svg {
233 .chapter-child-menu {
236 padding-inline-start: 0;
240 [chapter-toggle].open + .sub-menu {
246 .sortable-page-list, .sortable-page-list ul {
254 pointer-events: none;
258 border: 2px solid var(--color-book);
270 justify-content: space-between;
272 .sort-box-options .button {
273 margin-inline-start: 0;
275 .sortable-page-list {
276 margin-inline-start: 0;
278 .entity-list-item > span:first-child {
279 align-self: flex-start;
281 .sortable-selected .entity-list-item, .sortable-selected .entity-list-item:hover {
282 outline: 1px dotted var(--color-primary);
283 background-color: var(--color-primary-light) !important;
285 .entity-list-item > div {
290 margin-inline-start: 0;
295 padding-inline-start: $-m;
298 border: 1px solid #DDD;
302 li.text-page, li.text-chapter {
303 border-inline-start: 2px solid currentColor;
309 .sortable-page-list li.placeholder {
312 .sortable-page-list li.placeholder:before {
316 .activity-list-item {
319 grid-template-columns: min-content 1fr;
320 grid-column-gap: $-m;
323 .card .activity-list-item {
328 display: inline-grid;
330 grid-template-columns: min-content 1fr;
331 grid-column-gap: $-m;
340 display: inline-block;
343 padding-inline-start: 1px;
349 border-radius: 3px 0 0 3px;
354 border-radius: 0 3px 3px 0;
360 border: 1px solid #CCC;
361 margin-inline-start: -1px;
363 @include lightDark(color, #555, #eee);
364 @include lightDark(border-color, #ccc, #666);
370 @include lightDark(color, #111, #eee);
371 @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
375 .compact ul.pagination {
379 .entity-list, .icon-list {
387 .text-small.text-muted {
392 .text-muted p.text-muted {
395 .page.draft .text-page {
396 color: var(--color-page-draft);
397 fill: var(--color-page-draft);
399 > .dropdown-container {
411 .icon-list hr + hr, .icon-list hr:first-child, .icon-list hr:last-child {
415 .entity-list-item, .icon-list-item {
419 background-color: transparent;
423 word-break: break-word;
428 margin-inline-end: $-m;
442 &:not(.no-hover):hover {
443 text-decoration: none;
444 background-color: rgba(0, 0, 0, 0.1);
447 &.outline-hover:hover {
448 background-color: transparent;
451 @include lightDark(background-color, #eee, #222);
452 outline: 1px dotted #666;
453 outline-offset: -2px;
457 .entity-list-item-path-sep {
458 display: inline-block;
463 margin-inline-end: 0;
467 .card .entity-list-item:not(.no-hover):hover {
468 @include lightDark(background-color, #F2F2F2, #2d2d2d)
470 .card .entity-list-item .entity-list-item:hover {
471 background-color: #EEEEEE;
474 .entity-list-item-children {
482 text-overflow: ellipsis;
489 > .entity-list > .entity-list-item:last-child {
490 margin-bottom: -$-xs;
494 .entity-list-item-image {
498 background-size: cover;
499 background-position: 50% 50%;
502 margin-inline-end: $-l;
504 &.entity-list-item-image-wide {
509 @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
511 margin-inline-end: 0;
517 @include smaller-than($m) {
522 .chapter > .entity-list-item-image {
526 .entity-list.compact {
527 font-size: 0.6 * $fs-m;
531 .entity-item-snippet {
534 .entity-list-item p {
535 font-size: $fs-m * 0.8;
548 @include smaller-than($m) {
558 .primary-background-light {
559 background: transparent;
562 background-color: rgba(0, 0, 0, 0.05);
566 .dropdown-container {
567 display: inline-block;
580 @include lightDark(background-color, #fff, #333);
581 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
585 @include lightDark(color, #555, #eee);
587 text-align: start !important;
605 border-bottom: 1px solid #DDD;
610 .icon-item, .text-item, .label-item {
612 @include lightDark(color, #555, #eee);
618 text-decoration: none;
619 background-color: var(--color-primary-light);
620 color: var(--color-primary);
623 outline: 1px solid var(--color-primary);
624 outline-offset: -2px;
627 margin-inline-end: $-s;
628 display: inline-block;
638 grid-template-columns: auto min-content;
641 .label-item > *:nth-child(2) {
650 grid-template-columns: 16px auto;
653 margin-inline-end: 0;
654 margin-block-start: 1px;
660 .featured-image-container {
664 background-size: cover;
665 background-position: 50% 50%;
666 transition: opacity ease-in-out 240ms;
677 .featured-image-container-wrap {
680 @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
682 margin-inline-end: 0;
688 .grid-card:hover .featured-image-container {
696 background: transparent;
704 display: inline-block;
708 @include lightDark(color, #444, #888);
711 @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
713 text-decoration: none;
722 @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));