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