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