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