]> BookStack Code Mirror - bookstack/blob - resources/sass/_lists.scss
Reduced excess margin in chapter contents lists
[bookstack] / resources / sass / _lists.scss
1
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 }
25
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 }
69
70 .entity-list-item.has-children {
71   padding-bottom: 0;
72   > .icon {
73     border-radius: 4px 4px 0 0;
74   }
75 }
76
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 }
87
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     padding-inline-end: 0;
189     .content {
190       padding-top: $-xs;
191       padding-bottom: $-xs;
192       max-width: calc(100% - 20px);
193     }
194   }
195   .entity-list-item.selected {
196     @include lightDark(background-color, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
197   }
198   .entity-list-item.no-hover {
199     margin-top: -$-xs;
200     padding-inline-end: 0;
201   }
202   .entity-list-item-name {
203     font-size: 1em;
204     margin: 0;
205     margin-inline-end: $-m;
206   }
207   .chapter-child-menu {
208     font-size: .8rem;
209     margin-top: -.2rem;
210     margin-inline-start: -1rem;
211   }
212   [chapter-toggle] {
213     padding-inline-start: .7rem;
214     padding-bottom: .2rem;
215   }
216   .entity-list-item .icon {
217     z-index: 2;
218     width: 4px;
219     height: auto;
220     align-self: stretch;
221     flex-shrink: 0;
222     border-radius: 1px;
223     opacity: 0.6;
224   }
225   .entity-list-item .icon:after {
226     opacity: 1;
227   }
228   .entity-list-item .icon svg {
229     display: none;
230   }
231 }
232
233 .chapter-child-menu {
234   ul.sub-menu {
235     display: none;
236     padding-inline-start: 0;
237     position: relative;
238     margin-bottom: 0;
239   }
240   [chapter-toggle].open + .sub-menu {
241     display: block;
242   }
243 }
244
245 // Sortable Lists
246 .sortable-page-list, .sortable-page-list ul {
247   list-style: none;
248 }
249 .sort-box {
250   margin-bottom: $-m;
251   padding: $-m $-xl;
252   position: relative;
253   &::before {
254     pointer-events: none;
255     content: '';
256     border-radius: 4px;
257     opacity: 0.5;
258     border: 2px solid var(--color-book);
259     display: block;
260     top: 0;
261     bottom: 0;
262     left: 0;
263     right: 0;
264     position: absolute;
265   }
266 }
267 .sort-box-options {
268   display: flex;
269   flex-wrap: wrap;
270   justify-content: space-between;
271 }
272 .sort-box-options .button {
273   margin-inline-start: 0;
274 }
275 .sortable-page-list {
276   margin-inline-start: 0;
277   padding: 0;
278   .entity-list-item > span:first-child {
279     align-self: flex-start;
280   }
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;
284   }
285   .entity-list-item > div {
286     display: block;
287     flex: 1;
288   }
289   > ul {
290     margin-inline-start: 0;
291   }
292   ul {
293     margin-bottom: $-m;
294     margin-top: 0;
295     padding-inline-start: $-m;
296   }
297   li {
298     border: 1px solid #DDD;
299     margin-top: -1px;
300     min-height: 38px;
301   }
302   li.text-page, li.text-chapter {
303     border-inline-start: 2px solid currentColor;
304   }
305   li:first-child {
306     margin-top: $-xs;
307   }
308 }
309 .sortable-page-list li.placeholder {
310   position: relative;
311 }
312 .sortable-page-list li.placeholder:before {
313   position: absolute;
314 }
315
316 .activity-list-item {
317   padding: $-s 0;
318   display: grid;
319   grid-template-columns: min-content 1fr;
320   grid-column-gap: $-m;
321   font-size: 0.9em;
322 }
323 .card .activity-list-item {
324   padding: $-s $-m;
325 }
326
327 .user-list-item {
328   display: inline-grid;
329   padding: $-s;
330   grid-template-columns: min-content 1fr;
331   grid-column-gap: $-m;
332   font-size: 0.9em;
333   align-items: center;
334   > div:first-child {
335     line-height: 0;
336   }
337 }
338
339 ul.pagination {
340   display: inline-block;
341   list-style: none;
342   margin: $-m 0;
343   padding-inline-start: 1px;
344   li {
345     float: left;
346   }
347   li:first-child {
348     a, span {
349       border-radius: 3px 0 0 3px;
350     }
351   }
352   li:last-child {
353     a, span {
354       border-radius: 0 3px 3px 0;
355     }
356   }
357   a, span {
358     display: block;
359     padding: $-xxs $-s;
360     border: 1px solid #CCC;
361     margin-inline-start: -1px;
362     user-select: none;
363     @include lightDark(color, #555, #eee);
364     @include lightDark(border-color, #ccc, #666);
365   }
366   li.disabled {
367     cursor: not-allowed;
368   }
369   li.active span {
370     @include lightDark(color, #111, #eee);
371     @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
372   }
373 }
374
375 .compact ul.pagination {
376   margin: 0;
377 }
378
379 .entity-list, .icon-list {
380   margin: 0 (-$-m);
381   h4 {
382     margin: 0;
383   }
384   hr {
385     margin: 0;
386   }
387   .text-small.text-muted {
388     color: #AAA;
389     font-size: 0.75em;
390     margin-top: $-xs;
391   }
392   .text-muted p.text-muted {
393     margin-top: 0;
394   }
395   .page.draft .text-page {
396     color: var(--color-page-draft);
397     fill: var(--color-page-draft);
398   }
399   > .dropdown-container {
400     display: block;
401   }
402 }
403
404 .icon-list hr {
405   margin: $-s $-m;
406   max-width: 140px;
407   opacity: 0.25;
408   height: 1.1px;
409 }
410
411 .icon-list hr + hr, .icon-list hr:first-child, .icon-list hr:last-child {
412   display: none;
413 }
414
415 .entity-list-item, .icon-list-item {
416   padding: $-s $-m;
417   display: flex;
418   align-items: center;
419   background-color: transparent;
420   border: 0;
421   width: 100%;
422   position: relative;
423   word-break: break-word;
424   h4 a {
425     color: #666;
426   }
427   > span:first-child {
428     margin-inline-end: $-m;
429     flex-basis: 1.88em;
430     flex: none;
431   }
432   > span:last-child {
433     flex: 1;
434     text-align: start;
435   }
436   > .content {
437     min-width: 0;
438   }
439   &:not(.no-hover) {
440     cursor: pointer;
441   }
442   &:not(.no-hover):hover {
443     text-decoration: none;
444     background-color: rgba(0, 0, 0, 0.1);
445     border-radius: 4px;
446   }
447   &.outline-hover:hover {
448     background-color: transparent;
449   }
450   &:focus {
451     @include lightDark(background-color, #eee, #222);
452     outline: 1px dotted #666;
453     outline-offset: -2px;
454   }
455 }
456
457 .entity-list-item-path-sep {
458   display: inline-block;
459   vertical-align: top;
460   position: relative;
461   top: 1px;
462   svg {
463     margin-inline-end: 0;
464   }
465 }
466
467 .card .entity-list-item:not(.no-hover):hover {
468   @include lightDark(background-color, #F2F2F2, #2d2d2d)
469 }
470 .card .entity-list-item .entity-list-item:hover {
471   background-color: #EEEEEE;
472 }
473
474 .entity-list-item-children {
475   padding: $-m;
476   > div {
477     overflow: hidden;
478     padding: $-xs 0;
479     margin-top: -$-xs;
480   }
481   .entity-chip {
482     text-overflow: ellipsis;
483     height: 2.5em;
484     overflow: hidden;
485     text-align: start;
486     display: block;
487     white-space: nowrap;
488   }
489   > .entity-list > .entity-list-item:last-child {
490     margin-bottom: -$-xs;
491   }
492 }
493
494 .entity-list-item-image {
495   align-self: stretch;
496   width: 140px;
497   flex: none;
498   background-size: cover;
499   background-position: 50% 50%;
500   border-radius: 3px;
501   position: relative;
502   margin-inline-end: $-l;
503
504   &.entity-list-item-image-wide {
505     width: 220px;
506   }
507
508   .svg-icon {
509     @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
510     font-size: 1.66rem;
511     margin-inline-end: 0;
512     position: absolute;
513     bottom: $-xs;
514     left: $-xs;
515   }
516
517   @include smaller-than($m) {
518     width: 80px;
519   }
520 }
521
522 .chapter > .entity-list-item-image {
523   width: 60px;
524 }
525
526 .entity-list.compact {
527   font-size: 0.6 * $fs-m;
528   h4, a {
529     line-height: 1.2;
530   }
531   .entity-item-snippet {
532     display: none;
533   }
534   .entity-list-item p {
535     font-size: $fs-m * 0.8;
536     padding-top: $-xs;
537   }
538   p {
539     margin: 0;
540   }
541   > p.empty-text {
542     display: block;
543     font-size: $fs-m;
544   }
545   hr {
546     margin: 0;
547   }
548   @include smaller-than($m) {
549     h4 {
550       font-size: 1.666em;
551     }
552   }
553 }
554
555 .entity-item-tags {
556   font-size: .75rem;
557   opacity: 1;
558   .primary-background-light {
559     background: transparent;
560   }
561   .tag-name {
562     background-color: rgba(0, 0, 0, 0.05);
563   }
564 }
565
566 .dropdown-container {
567   display: inline-block;
568   vertical-align: top;
569   position: relative;
570 }
571
572 .dropdown-menu {
573   display: none;
574   position: absolute;
575   z-index: 999;
576   top: 0;
577   list-style: none;
578   right: 0;
579   margin: $-m 0;
580   @include lightDark(background-color, #fff, #333);
581   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
582   border-radius: 1px;
583   min-width: 180px;
584   padding: $-xs 0;
585   @include lightDark(color, #555, #eee);
586   fill: currentColor;
587   text-align: start !important;
588   max-height: 500px;
589   overflow-y: auto;
590   &.wide {
591     min-width: 220px;
592   }
593   .text-muted {
594     color: #999;
595     fill: #999;
596   }
597   li.active a {
598     font-weight: 600;
599   }
600   button {
601     width: 100%;
602     text-align: start;
603   }
604   li.border-bottom {
605     border-bottom: 1px solid #DDD;
606   }
607   li hr {
608     margin: $-xs 0;
609   }
610   .icon-item, .text-item, .label-item {
611     padding: 8px $-m;
612     @include lightDark(color, #555, #eee);
613     fill: currentColor;
614     white-space: nowrap;
615     line-height: 1.4;
616     cursor: pointer;
617     &:hover, &:focus {
618       text-decoration: none;
619       background-color: var(--color-primary-light);
620       color: var(--color-primary);
621     }
622     &:focus {
623       outline: 1px solid var(--color-primary);
624       outline-offset: -2px;
625     }
626     svg {
627       margin-inline-end: $-s;
628       display: inline-block;
629       width: 16px;
630     }
631   }
632   .text-item {
633     display: block;
634   }
635   .label-item {
636     display: grid;
637     align-items: center;
638     grid-template-columns: auto min-content;
639     gap: $-m;
640   }
641   .label-item > *:nth-child(2) {
642     opacity: 0.7;
643     &:hover {
644       opacity: 1;
645     }
646   }
647   .icon-item {
648     display: grid;
649     align-items: start;
650     grid-template-columns: 16px auto;
651     gap: $-m;
652     svg {
653       margin-inline-end: 0;
654       margin-block-start: 1px;
655     }
656   }
657 }
658
659 // Books grid view
660 .featured-image-container {
661   position: relative;
662   overflow: hidden;
663   min-height: 140px;
664   background-size: cover;
665   background-position: 50% 50%;
666   transition: opacity ease-in-out 240ms;
667   a {
668     display: block;
669   }
670   img {
671     display: block;
672     width: 100%;
673     max-width: 100%;
674     height: auto;
675   }
676 }
677 .featured-image-container-wrap {
678   position: relative;
679   .svg-icon {
680     @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
681     font-size: 2rem;
682     margin-inline-end: 0;
683     position: absolute;
684     bottom: 10px;
685     left: 6px;
686   }
687 }
688 .grid-card:hover .featured-image-container {
689   opacity: .5;
690 }
691
692 .action-link-list {
693   //padding: $-s 0;
694 }
695 .action-link {
696   background: transparent;
697   border: none;
698   color: currentColor;
699   padding: $-m 0;
700 }
701
702 .active-link-list {
703   a {
704     display: inline-block;
705     padding: $-s;
706   }
707   a:not(.active) {
708     @include lightDark(color, #444, #888);
709   }
710   a:hover {
711     @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
712     border-radius: 4px;
713     text-decoration: none;
714   }
715   &.in-sidebar {
716     a {
717       display: block;
718       margin-bottom: $-xs;
719     }
720     a.active {
721       border-radius: 4px;
722       @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
723     }
724   }
725 }