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