BookStack Code Mirror - bookstack/blob - 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: $-xs;
  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-contents-toggle {
  60     border-radius: 0 4px 4px 0;
  61     padding: $-xs ($-m + $-xxs);
  62     width: 100%;
  63     text-align: start;
  64   }
  65   .chapter-contents-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
 161   ul {
 162     list-style: none;
 163     padding-inline-start: 1rem;
 164     padding-inline-end: 0;
 165   }
 166
 167   .entity-list-item {
 168     padding-top: 2px;
 169     padding-bottom: 2px;
 170     background-clip: content-box;
 171     border-radius: 0 3px 3px 0;
 172     padding-inline-end: 0;
 173     .content {
 174       width: 100%;
 175       padding-top: $-xs;
 176       padding-bottom: $-xs;
 177       max-width: calc(100% - 20px);
 178     }
 179   }
 180   .entity-list-item.selected {
 181     @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
 182   }
 183   .entity-list-item.no-hover {
 184     margin-top: -$-xs;
 185     padding-inline-end: 0;
 186   }
 187   .entity-list-item-name {
 188     font-size: 1em;
 189     margin: 0;
 190     margin-inline-end: $-m;
 191   }
 192   .chapter-child-menu {
 193     font-size: .8rem;
 194     margin-top: -.2rem;
 195     margin-inline-start: -1rem;
 196   }
 197   .chapter-contents-toggle {
 198     display: block;
 199     width: 100%;
 200     text-align: start;
 201     padding: $-xxs $-s ($-xxs * 2) $-s;
 202     border-radius: 0 3px 3px 0;
 203     line-height: 1;
 204     margin-top: -$-xxs;
 205     margin-bottom: -$-xxs;
 206     &:hover {
 207       @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
 208     }
 209   }
 210   .entity-list-item .icon {
 211     z-index: 2;
 212     width: 4px;
 213     height: auto;
 214     align-self: stretch;
 215     flex-shrink: 0;
 216     border-radius: 1px;
 217     opacity: 0.8;
 218   }
 219   .entity-list-item .icon:after {
 220     opacity: 1;
 221   }
 222   .entity-list-item .icon svg {
 223     display: none;
 224   }
 225 }
 226
 227 .chapter-child-menu ul.sub-menu {
 228   display: none;
 229   padding-inline-start: 0;
 230   position: relative;
 231   margin-bottom: 0;
 232 }
 233
 234 // Sortable Lists
 235 .sortable-page-list, .sortable-page-sublist {
 236   list-style: none;
 237 }
 238 .sort-box {
 239   margin-bottom: $-m;
 240   padding: $-m $-xl;
 241   position: relative;
 242   &::before {
 243     pointer-events: none;
 244     content: '';
 245     border-radius: 4px;
 246     opacity: 0.5;
 247     border: 2px solid var(--color-book);
 248     display: block;
 249     top: 0;
 250     bottom: 0;
 251     left: 0;
 252     right: 0;
 253     position: absolute;
 254   }
 255 }
 256 .sort-box-options {
 257   display: flex;
 258   flex-wrap: wrap;
 259   justify-content: space-between;
 260 }
 261 .sort-box-options .button {
 262   margin-inline-start: 0;
 263 }
 264 .sortable-page-list {
 265   margin-inline-start: 0;
 266   padding: 0;
 267   .entity-list-item > span:first-child {
 268     align-self: flex-start;
 269   }
 270   .sortable-selected, .sortable-selected:hover {
 271     outline: 1px dotted var(--color-primary);
 272     background-color: var(--color-primary-light) !important;
 273   }
 274   .entity-list-item > div {
 275     display: block;
 276     flex: 1;
 277   }
 278   > ul {
 279     margin-inline-start: 0;
 280   }
 281   .sortable-page-sublist {
 282     margin-bottom: $-m;
 283     margin-top: 0;
 284     padding-inline-start: $-m;
 285   }
 286   li {
 287     @include lightDark(background-color, #FFF, #222);
 288     border: 1px solid;
 289     @include lightDark(border-color, #DDD, #666);
 290     margin-top: -1px;
 291     min-height: 38px;
 292   }
 293   li.text-page, li.text-chapter {
 294     border-inline-start: 2px solid currentColor;
 295   }
 296   li:first-child {
 297     margin-top: $-xs;
 298   }
 299 }
 300 .sortable-page-list li.placeholder {
 301   position: relative;
 302 }
 303 .sortable-page-list li.placeholder:before {
 304   position: absolute;
 305 }
 306 .sort-box summary {
 307   list-style: none;
 308   font-size: .9rem;
 309   cursor: pointer;
 310 }
 311 .sort-box summary::-webkit-details-marker {
 312   display: none;
 313 }
 314 details.sort-box summary .caret-container svg {
 315   transition: transform ease-in-out 120ms;
 316 }
 317 details.sort-box[open] summary .caret-container svg {
 318   transform: rotate(90deg);
 319 }
 320 .sort-box-actions .icon-button {
 321   opacity: .6;
 322 }
 323 .sort-box .flex-container-row:hover .sort-box-actions .icon-button,
 324 .sort-box .flex-container-row:focus-within .sort-box-actions .icon-button {
 325   opacity: 1;
 326 }
 327 .sort-box-actions .icon-button[disabled] {
 328   visibility: hidden;
 329 }
 330 .sort-box-actions .dropdown-menu button[disabled] {
 331   display: none;
 332 }
 333 .sort-list-handle {
 334   cursor: grab;
 335 }
 336
 337 .activity-list-item {
 338   padding: $-s 0;
 339   display: grid;
 340   grid-template-columns: min-content 1fr;
 341   grid-column-gap: $-m;
 342   font-size: 0.9em;
 343 }
 344 .card .activity-list-item {
 345   padding: $-s $-m;
 346 }
 347
 348 .user-list-item {
 349   display: inline-grid;
 350   padding: $-s;
 351   grid-template-columns: min-content 1fr;
 352   grid-column-gap: $-m;
 353   font-size: 0.9em;
 354   align-items: center;
 355   > div:first-child {
 356     line-height: 0;
 357   }
 358 }
 359
 360 ul.pagination {
 361   display: inline-block;
 362   list-style: none;
 363   margin: $-m 0;
 364   padding-inline-start: 1px;
 365   li {
 366     float: left;
 367   }
 368   li:first-child {
 369     a, span {
 370       border-radius: 3px 0 0 3px;
 371     }
 372   }
 373   li:last-child {
 374     a, span {
 375       border-radius: 0 3px 3px 0;
 376     }
 377   }
 378   a, span {
 379     display: block;
 380     padding: $-xxs $-s;
 381     border: 1px solid #CCC;
 382     margin-inline-start: -1px;
 383     user-select: none;
 384     @include lightDark(color, #555, #eee);
 385     @include lightDark(border-color, #ccc, #666);
 386   }
 387   li.disabled {
 388     cursor: not-allowed;
 389   }
 390   li.active span {
 391     @include lightDark(color, #111, #eee);
 392     @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
 393   }
 394 }
 395
 396 .compact ul.pagination {
 397   margin: 0;
 398 }
 399
 400 .entity-list, .icon-list {
 401   margin: 0 (-$-m);
 402   h4 {
 403     margin: 0;
 404   }
 405   hr {
 406     margin: 0;
 407   }
 408   .text-small.text-muted {
 409     color: #AAA;
 410     font-size: 0.75em;
 411     margin-top: $-xs;
 412   }
 413   .text-muted p.text-muted {
 414     margin-top: 0;
 415   }
 416   .page.draft .text-page {
 417     color: var(--color-page-draft);
 418     fill: var(--color-page-draft);
 419   }
 420   > .dropdown-container {
 421     display: block;
 422   }
 423 }
 424
 425 .icon-list hr {
 426   margin: $-s $-m;
 427   max-width: 140px;
 428   opacity: 0.25;
 429   height: 1.1px;
 430 }
 431
 432 .icon-list hr + hr, .icon-list hr:first-child, .icon-list hr:last-child {
 433   display: none;
 434 }
 435
 436 .entity-list-item, .icon-list-item {
 437   padding: $-s $-m;
 438   display: flex;
 439   align-items: center;
 440   gap: $-m;
 441   background-color: transparent;
 442   border: 0;
 443   width: 100%;
 444   position: relative;
 445   word-break: break-word;
 446   h4 a {
 447     color: #666;
 448   }
 449   > span:first-child {
 450     flex-basis: 1.88em;
 451     flex: none;
 452   }
 453   > span:last-child {
 454     flex: 1;
 455     text-align: start;
 456   }
 457   > .content {
 458     min-width: 0;
 459   }
 460   &:not(.no-hover) {
 461     cursor: pointer;
 462   }
 463   &:not(.no-hover):hover {
 464     @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
 465     text-decoration: none;
 466     border-radius: 4px;
 467   }
 468   &.outline-hover:hover {
 469     background-color: transparent;
 470   }
 471   &:focus {
 472     @include lightDark(background-color, #eee, #222);
 473     outline: 1px dotted #666;
 474     outline-offset: -2px;
 475   }
 476 }
 477
 478 .entity-list-item.disabled {
 479   pointer-events: none;
 480   cursor: not-allowed;
 481   opacity: 0.8;
 482   user-select: none;
 483   background: var(--bg-disabled);
 484 }
 485
 486 .entity-list-item-path-sep {
 487   display: inline-block;
 488   vertical-align: top;
 489   position: relative;
 490   top: 1px;
 491   svg {
 492     margin-inline-end: 0;
 493   }
 494 }
 495
 496 .split-icon-list-item {
 497   display: flex;
 498   align-items: center;
 499   gap: $-m;
 500   background-color: transparent;
 501   border: 0;
 502   width: 100%;
 503   position: relative;
 504   word-break: break-word;
 505   border-radius: 4px;
 506   > a {
 507     padding: $-s $-m;
 508     display: flex;
 509     align-items: center;
 510     gap: $-m;
 511     flex: 1;
 512   }
 513   > a:hover {
 514     text-decoration: none;
 515   }
 516   .icon {
 517     flex-basis: 1.88em;
 518     flex: none;
 519   }
 520   &:hover {
 521     @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
 522   }
 523 }
 524
 525 .icon-list-item-dropdown {
 526   margin-inline-start: auto;
 527   align-self: stretch;
 528   display: flex;
 529   align-items: stretch;
 530   border-inline-start: 1px solid rgba(0, 0, 0, .1);
 531   visibility: hidden;
 532 }
 533 .split-icon-list-item:hover .icon-list-item-dropdown,
 534 .split-icon-list-item:focus-within .icon-list-item-dropdown {
 535   visibility: visible;
 536 }
 537 .icon-list-item-dropdown-toggle {
 538   padding: $-xs;
 539   display: flex;
 540   align-items: center;
 541   cursor: pointer;
 542   @include lightDark(color, #888, #999);
 543   svg {
 544     margin: 0;
 545   }
 546   &:hover {
 547     @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
 548   }
 549 }
 550
 551 .card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover {
 552   @include lightDark(background-color, #F2F2F2, #2d2d2d);
 553   border-radius: 0;
 554 }
 555 .card .entity-list-item .entity-list-item:hover {
 556   background-color: #EEEEEE;
 557 }
 558
 559 .entity-list-item-children {
 560   padding: $-m $-l;
 561   > div {
 562     overflow: hidden;
 563     padding: 0 0 $-xs 0;
 564   }
 565   .entity-chip {
 566     text-overflow: ellipsis;
 567     height: 2.5em;
 568     overflow: hidden;
 569     text-align: start;
 570     display: block;
 571     white-space: nowrap;
 572   }
 573   > .entity-list > .entity-list-item:last-child {
 574     margin-bottom: -$-xs;
 575   }
 576 }
 577
 578 .entity-list-item-image {
 579   align-self: stretch;
 580   width: 140px;
 581   flex: none;
 582   background-size: cover;
 583   background-position: 50% 50%;
 584   border-radius: 3px;
 585   position: relative;
 586   margin-inline-end: $-l;
 587
 588   &.entity-list-item-image-wide {
 589     width: 220px;
 590   }
 591
 592   .svg-icon {
 593     @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
 594     font-size: 1.66rem;
 595     margin-inline-end: 0;
 596     position: absolute;
 597     bottom: $-xs;
 598     left: $-xs;
 599   }
 600
 601   @include smaller-than($m) {
 602     width: 80px;
 603   }
 604 }
 605
 606 .chapter > .entity-list-item-image {
 607   width: 60px;
 608 }
 609
 610 .entity-list.compact {
 611   font-size: 0.6 * $fs-m;
 612   h4, a {
 613     line-height: 1.2;
 614   }
 615   .entity-item-snippet {
 616     display: none;
 617   }
 618   .entity-list-item p {
 619     font-size: $fs-m * 0.8;
 620     padding-top: $-xs;
 621   }
 622   .entity-list-item p:empty {
 623     padding-top: 0;
 624   }
 625   p {
 626     margin: 0;
 627   }
 628   > p.empty-text {
 629     display: block;
 630     font-size: $fs-m;
 631   }
 632   hr {
 633     margin: 0;
 634   }
 635   @include smaller-than($m) {
 636     h4 {
 637       font-size: 1.666em;
 638     }
 639   }
 640 }
 641
 642 .entity-item-tags {
 643   font-size: .75rem;
 644   opacity: 1;
 645   .primary-background-light {
 646     background: transparent;
 647   }
 648   .tag-name {
 649     background-color: rgba(0, 0, 0, 0.05);
 650   }
 651 }
 652
 653 .dropdown-container {
 654   display: inline-block;
 655   vertical-align: top;
 656   position: relative;
 657 }
 658
 659 .dropdown-menu {
 660   display: none;
 661   position: absolute;
 662   z-index: 999;
 663   top: 0;
 664   list-style: none;
 665   inset-inline-end: 0;
 666   margin: $-m 0;
 667   @include lightDark(background-color, #fff, #333);
 668   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
 669   border-radius: 3px;
 670   min-width: 180px;
 671   padding: $-xs 0;
 672   @include lightDark(color, #555, #eee);
 673   fill: currentColor;
 674   text-align: start !important;
 675   max-height: 500px;
 676   overflow-y: auto;
 677   &.wide {
 678     min-width: 220px;
 679   }
 680   .text-muted {
 681     color: #999;
 682     fill: #999;
 683   }
 684   li.active a {
 685     font-weight: 600;
 686   }
 687   button {
 688     width: 100%;
 689     text-align: start;
 690   }
 691   li.border-bottom {
 692     border-bottom: 1px solid #DDD;
 693   }
 694   li hr {
 695     margin: $-xs 0;
 696   }
 697   .icon-item, .text-item, .label-item {
 698     padding: 8px $-m;
 699     @include lightDark(color, #555, #eee);
 700     fill: currentColor;
 701     white-space: nowrap;
 702     line-height: 1.4;
 703     cursor: pointer;
 704     &:hover, &:focus {
 705       text-decoration: none;
 706       background-color: var(--color-primary-light);
 707       color: var(--color-primary);
 708     }
 709     &:focus {
 710       outline: 1px solid var(--color-primary);
 711       outline-offset: -2px;
 712     }
 713     svg {
 714       margin-inline-end: $-s;
 715       display: inline-block;
 716       width: 16px;
 717     }
 718   }
 719   .text-item {
 720     display: block;
 721   }
 722   .label-item {
 723     display: grid;
 724     align-items: center;
 725     grid-template-columns: auto min-content;
 726     gap: $-m;
 727   }
 728   .label-item > *:nth-child(2) {
 729     opacity: 0.7;
 730     &:hover {
 731       opacity: 1;
 732     }
 733   }
 734   .icon-item {
 735     display: grid;
 736     align-items: start;
 737     grid-template-columns: 16px auto;
 738     gap: $-m;
 739     svg {
 740       margin-inline-end: 0;
 741       margin-block-start: 1px;
 742     }
 743   }
 744 }
 745
 746 // Shift in sidebar dropdown menus to prevent shadows
 747 // being cut by scrollable container.
 748 .tri-layout-right .dropdown-menu,
 749 .tri-layout-left .dropdown-menu {
 750   inset-inline-end: $-xs;
 751 }
 752
 753 // Books grid view
 754 .featured-image-container {
 755   position: relative;
 756   overflow: hidden;
 757   min-height: 140px;
 758   background-size: cover;
 759   background-position: 50% 50%;
 760   transition: opacity ease-in-out 240ms;
 761   a {
 762     display: block;
 763   }
 764   img {
 765     display: block;
 766     width: 100%;
 767     max-width: 100%;
 768     height: auto;
 769   }
 770 }
 771 .featured-image-container-wrap {
 772   position: relative;
 773   .svg-icon {
 774     @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
 775     font-size: 2rem;
 776     margin-inline-end: 0;
 777     position: absolute;
 778     bottom: 10px;
 779     left: 6px;
 780   }
 781 }
 782 .grid-card:hover .featured-image-container {
 783   opacity: .5;
 784 }
 785
 786 .action-link-list {
 787   //padding: $-s 0;
 788 }
 789 .action-link {
 790   background: transparent;
 791   border: none;
 792   color: currentColor;
 793   padding: $-m 0;
 794 }
 795
 796 .active-link-list {
 797   a {
 798     display: inline-block;
 799     padding: $-s;
 800   }
 801   a:not(.active) {
 802     @include lightDark(color, #444, #888);
 803   }
 804   a:hover {
 805     @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 806     border-radius: 4px;
 807     text-decoration: none;
 808   }
 809   &.in-sidebar {
 810     a {
 811       display: block;
 812       margin-bottom: $-xs;
 813     }
 814     a.active {
 815       border-radius: 4px;
 816       @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 817     }
 818   }
 819 }
 820
 821 .entity-meta-item {
 822   display: flex;
 823   line-height: 1.2;
 824   margin: 0.6em 0;
 825   align-content: start;
 826   gap: $-s;
 827   a {
 828     line-height: 1.2;
 829   }
 830   svg {
 831     flex-shrink: 0;
 832     width: 1em;
 833     margin: 0;
 834   }
 835 }