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