BookStack Code Mirror - bookstack/blob - resources/assets/sass/_lists.scss

   1 .page-list {
   2   h4 {
   3     margin: $-l 0 $-xs 0;
   4     font-size: 1.666em;
   5   }
   6   a.chapter {
   7     color: $color-chapter;
   8   }
   9   .inset-list {
  10     display: none;
  11     overflow: hidden;
  12   }
  13   h5 {
  14     display: block;
  15     margin: $-s 0 0 0;
  16     border-left: 5px solid $color-page;
  17     padding: $-xs 0 $-xs $-m;
  18     font-size: 1.1em;
  19     font-weight: normal;
  20     &.draft {
  21       border-left-color: $color-page-draft;
  22     }
  23   }
  24   .entity-list-item {
  25     margin-bottom: $-m;
  26   }
  27   hr {
  28     margin-top: 0;
  29   }
  30   .page, .chapter, .book {
  31     padding-left: $-l;
  32   }
  33   .page {
  34     border-left: 5px solid $color-page;
  35   }
  36   .page.draft {
  37     border-left: 5px solid $color-page-draft;
  38     .text-page {
  39       color: $color-page-draft;
  40       fill: $color-page-draft;
  41     }
  42   }
  43   .chapter {
  44     border-left: 5px solid $color-chapter;
  45   }
  46   .book {
  47     border-left: 5px solid $color-book;
  48   }
  49   .meta {
  50     margin-top: -$-m;
  51     font-size: 0.95em;
  52   }
  53   .meta span {
  54     margin-right: $-s;
  55   }
  56 }
  57
  58 @include smaller-than($s) {
  59   .page-list h4 {
  60     font-size: 1.333em;
  61   }
  62 }
  63
  64 .sidebar-page-nav {
  65   $nav-indent: $-s;
  66   list-style: none;
  67   margin: $-s 0 $-m 2px;
  68   border-left: 2px dotted #BBB;
  69   li {
  70     padding-left: $-s;
  71     margin-bottom: 4px;
  72     font-size: 0.95em;
  73   }
  74   .h1 {
  75     margin-left: -2px;
  76   }
  77   .h2 {
  78     margin-left: -2px;
  79   }
  80   .h3 {
  81     margin-left: $nav-indent;
  82   }
  83   .h4 {
  84     margin-left: $nav-indent*2;
  85   }
  86   .h5 {
  87     margin-left: $nav-indent*3;
  88   }
  89   .h6 {
  90     margin-left: $nav-indent*4;
  91   }
  92   .current-heading {
  93     font-weight: bold;
  94   }
  95 }
  96
  97 // Sidebar list
  98 .book-tree {
  99   transition: ease-in-out 240ms;
 100   transition-property: right, border;
 101 }
 102 .book-tree h4 {
 103   padding: $-m $-s 0 $-s;
 104   i {
 105     padding-right: $-s;
 106   }
 107 }
 108 .book-tree .sidebar-page-list {
 109   list-style: none;
 110   margin: $-xs 0 0;
 111   padding-left: 0;
 112   border-left: 5px solid $color-book;
 113   li a {
 114     display: block;
 115     border-bottom: none;
 116     padding: $-xs 0 $-xs $-s;
 117     &:hover {
 118       text-decoration: none;
 119     }
 120   }
 121   li a i {
 122     padding-right: $-xs + 2px;
 123   }
 124   li, a {
 125     display: block;
 126   }
 127   a.bold {
 128     color: #EEE !important;
 129     fill: #EEE !important;
 130   }
 131   ul {
 132     list-style: none;
 133     margin: 0;
 134   }
 135   .book {
 136     color: $color-book !important;
 137     fill: $color-book !important;
 138     &.selected {
 139       background-color: rgba($color-book, 0.29);
 140     }
 141   }
 142   .chapter {
 143     color: $color-chapter !important;
 144     fill: $color-chapter !important;
 145     &.selected {
 146       background-color: rgba($color-chapter, 0.12);
 147     }
 148   }
 149   .page {
 150     color: $color-page !important;
 151     fill: $color-page !important;
 152     border-bottom: none;
 153     &.selected {
 154       background-color: rgba($color-page, 0.1);
 155     }
 156   }
 157   [chapter-toggle] {
 158     padding-left: $-s;
 159   }
 160   .list-item-chapter {
 161     border-left: 5px solid $color-chapter;
 162     margin: 10px 10px;
 163     display: block;
 164   }
 165   .list-item-page {
 166     border-bottom: none;
 167     border-left: 5px solid $color-page;
 168     margin: 10px 10px;
 169   }
 170   .list-item-page.draft {
 171     border-left: 5px solid $color-page-draft;
 172   }
 173   .page.draft .page, .list-item-page.draft a.page {
 174     color: $color-page-draft !important;
 175     fill: $color-page-draft !important;
 176   }
 177   .sub-menu {
 178     display: none;
 179     padding-left: 0;
 180   }
 181   .sub-menu.open {
 182     display: block;
 183   }
 184 }
 185
 186 // Sortable Lists
 187 .sortable-page-list, .sortable-page-list ul {
 188   list-style: none;
 189   background-color: #FFF;
 190 }
 191 .sort-box {
 192   margin-bottom: $-m;
 193   padding: 0 $-l 0 $-l;
 194   border-left: 4px solid $color-book;
 195 }
 196 .sortable-page-list {
 197   margin-left: 0;
 198   > ul {
 199     margin-left: 0;
 200   }
 201   ul {
 202     margin-bottom: 0;
 203     margin-top: 0;
 204     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
 205   }
 206   li {
 207     border: 1px solid #DDD;
 208     padding: $-xs $-s;
 209     margin-top: -1px;
 210     min-height: 38px;
 211     &.text-chapter {
 212       border-left: 2px solid $color-chapter;
 213     }
 214     &.text-page {
 215       border-left: 2px solid $color-page;
 216     }
 217   }
 218   li:first-child {
 219     margin-top: $-xs;
 220   }
 221 }
 222 .sortable-page-list li.placeholder {
 223   position: relative;
 224 }
 225 .sortable-page-list li.placeholder:before {
 226   position: absolute;
 227 }
 228
 229 .activity-list-item {
 230   padding: $-s 0;
 231   color: #888;
 232   fill: #888;
 233   border-bottom: 1px solid #EEE;
 234   font-size: 0.9em;
 235   .left {
 236     float: left;
 237   }
 238   .left + .right {
 239     margin-left: 30px + $-s;
 240   }
 241   &:last-of-type {
 242     border-bottom: 0;
 243   }
 244 }
 245
 246 ul.pagination {
 247   display: inline-block;
 248   list-style: none;
 249   margin: $-m 0;
 250   padding-left: 1px;
 251   li {
 252     float: left;
 253   }
 254   li:first-child {
 255     a, span {
 256       border-radius: 3px 0 0 3px;
 257     }
 258   }
 259   li:last-child {
 260     a, span {
 261       border-radius: 0 3px 3px 0;
 262     }
 263   }
 264   a, span {
 265     display: block;
 266     padding: $-xxs $-s;
 267     border: 1px solid #CCC;
 268     margin-left: -1px;
 269     color: #888;
 270     fill: #888;
 271     user-select: none;
 272     &.disabled {
 273       cursor: not-allowed;
 274     }
 275   }
 276   li.active span {
 277     background-color: rgba($primary, 0.8);
 278     color: #EEE;
 279     fill: #EEE;
 280     border-color: rgba($primary, 0.8);
 281   }
 282   a {
 283     color: $primary;
 284     fill: $primary;
 285   }
 286 }
 287
 288 .compact ul.pagination {
 289   margin: 0;
 290 }
 291
 292 .entity-list {
 293   > div {
 294     padding: $-m 0;
 295   }
 296   h4 {
 297     margin: 0;
 298   }
 299   hr {
 300     margin: 0;
 301   }
 302   .text-small.text-muted {
 303     color: #AAA;
 304     font-size: 0.75em;
 305     margin-top: $-xs;
 306   }
 307   .text-muted p.text-muted {
 308     margin-top: 0;
 309   }
 310   .page.draft .text-page {
 311     color: $color-page-draft;
 312     fill: $color-page-draft;
 313   }
 314 }
 315
 316 .card .entity-list-item, .card .activity-list-item {
 317   padding-left: $-m;
 318   padding-right: $-m;
 319 }
 320
 321 .entity-list.compact {
 322   font-size: 0.6em;
 323   h4, a {
 324     line-height: 1.2;
 325   }
 326   .entity-item-snippet {
 327     display: none;
 328   }
 329   .entity-list-item p {
 330     font-size: $fs-m * 0.8;
 331     padding-top: $-xs;
 332   }
 333   p {
 334     margin: 0;
 335   }
 336   > p.empty-text {
 337     display: block;
 338     font-size: $fs-m;
 339   }
 340   hr {
 341     margin: 0;
 342   }
 343 }
 344
 345 .dropdown-container {
 346   display: inline-block;
 347   vertical-align: top;
 348   position: relative;
 349 }
 350
 351 .dropdown-container ul {
 352   display: none;
 353   position: absolute;
 354   z-index: 999;
 355   top: 0;
 356   list-style: none;
 357   right: 0;
 358   margin: $-m 0;
 359   background-color: #FFFFFF;
 360   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 361   border-radius: 1px;
 362   border: 1px solid #EEE;
 363   min-width: 180px;
 364   padding: $-xs 0;
 365   color: #555;
 366   fill: #555;
 367   text-align: left !important;
 368   &.wide {
 369     min-width: 220px;
 370   }
 371   .text-muted {
 372     color: #999;
 373     fill: #999;
 374   }
 375   li.padded {
 376     padding: $-xs $-m;
 377     line-height: 1.2;
 378   }
 379   a {
 380     display: block;
 381     padding: $-xs $-m;
 382     color: #555;
 383     fill: #555;
 384     &:hover {
 385       text-decoration: none;
 386       background-color: #EEE;
 387     }
 388     svg {
 389       margin-right: $-s;
 390       display: inline-block;
 391       width: 16px;
 392     }
 393   }
 394   li.border-bottom {
 395     border-bottom: 1px solid #DDD;
 396   }
 397 }
 398
 399 // Books grid view
 400 .featured-image-container {
 401   position: relative;
 402   overflow: hidden;
 403   background: #F2F2F2;
 404   a {
 405     display: block;
 406   }
 407   img {
 408     display: block;
 409     width: 100%;
 410     max-width: 100%;
 411     height: auto;
 412     transition: all .5s ease-in-out;
 413   }
 414   img:hover {
 415     transform: scale(1.15);
 416     opacity: .5;
 417   }
 418 }
 419
 420 .book-grid-item .grid-card-content {
 421   border-top: 0;
 422   border-bottom-width: 2px;
 423   h2 {
 424     width: 100%;
 425     font-size: 1.5em;
 426     margin: 0 0 10px;
 427   }
 428   h2 a {
 429     display: block;
 430     width: 100%;
 431     line-height: 1.2;
 432     color: #009688;;
 433     fill: #009688;;
 434     text-decoration: none;
 435   }
 436   p {
 437     font-size: .85em;
 438     margin: 0;
 439     line-height: 1.6em;
 440   }
 441 }
 442
 443 .book-grid-item .grid-card-footer {
 444   p.small {
 445     font-size: .8em;
 446     margin: 0;
 447   }
 448 }