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   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 }