BookStack Code Mirror - bookstack/blob - resources/sass/_header.scss

   1 /**
   2  * Includes the main navigation header and the faded toolbar.
   3  */
   4
   5 header .grid {
   6   grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr);
   7 }
   8
   9 @include smaller-than($l) {
  10   header .grid {
  11     grid-template-columns: 1fr;
  12     grid-row-gap: 0;
  13   }
  14 }
  15
  16 header {
  17   position: relative;
  18   display: block;
  19   z-index: 11;
  20   top: 0;
  21   color: rgb(250, 250, 250);
  22   border-bottom: 1px solid #DDD;
  23   box-shadow: $bs-card;
  24   @include lightDark(border-bottom-color, #DDD, #000);
  25   @include whenDark {
  26     filter: saturate(0.8) brightness(0.8);
  27   }
  28   .header-links {
  29     display: flex;
  30     align-items: center;
  31     justify-content: end;
  32   }
  33   .links {
  34     display: inline-block;
  35     vertical-align: top;
  36   }
  37   .links a {
  38     display: inline-block;
  39     padding: 10px $-m;
  40     color: #FFF;
  41     border-radius: 3px;
  42   }
  43   .links a:hover {
  44     text-decoration: none;
  45     background-color: rgba(255, 255, 255, .15);
  46   }
  47   .dropdown-container {
  48     padding-inline-start: $-m;
  49     padding-inline-end: 0;
  50   }
  51   .avatar, .user-name {
  52     display: inline-block;
  53   }
  54   .avatar {
  55     width: 30px;
  56     height: 30px;
  57   }
  58   .user-name {
  59     vertical-align: top;
  60     position: relative;
  61     display: inline-flex;
  62     align-items: center;
  63     cursor: pointer;
  64     padding: $-s;
  65     margin: 0 (-$-s);
  66     border-radius: 3px;
  67     gap: $-xs;
  68     > span {
  69       padding-inline-start: $-xs;
  70       display: inline-block;
  71       line-height: 1;
  72     }
  73     > svg {
  74       font-size: 18px;
  75       margin-top: -2px;
  76       margin-inline-end: 0;
  77     }
  78     &:hover {
  79       background-color: rgba(255, 255, 255, 0.15);
  80     }
  81     @include between($l, $xl) {
  82       padding-inline-start: $-xs;
  83       .name {
  84         display: none;
  85       }
  86     }
  87   }
  88 }
  89
  90 .header *, .primary-background * {
  91   outline-color: #FFF;
  92 }
  93
  94
  95 header .search-box {
  96   display: inline-block;
  97   input {
  98     background-color: rgba(0, 0, 0, 0.2);
  99     border: 1px solid rgba(255, 255, 255, 0.2);
 100     border-radius: 40px;
 101     color: #EEE;
 102     z-index: 2;
 103     height: auto;
 104     padding: $-xs*1.5;
 105     padding-inline-start: 40px;
 106     &:focus {
 107       outline: none;
 108       border: 1px solid rgba(255, 255, 255, 0.4);
 109     }
 110   }
 111   input::placeholder {
 112     color: #FFF;
 113     opacity: 0.6;
 114   }
 115   @include between($l, $xl) {
 116     max-width: 200px;
 117   }
 118   &:focus-within #header-search-box-button {
 119     opacity: 1;
 120   }
 121 }
 122 #header-search-box-button {
 123   z-index: 1;
 124   left: 16px;
 125   top: 10px;
 126   color: #FFF;
 127   opacity: 0.6;
 128   @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
 129   @include rtl {
 130     left: auto;
 131     right: 16px;
 132   }
 133   svg {
 134     margin-inline-end: 0;
 135   }
 136 }
 137
 138 .global-search-suggestions {
 139   display: none;
 140   position: absolute;
 141   top: -$-s;
 142   left: 0;
 143   right: 0;
 144   z-index: -1;
 145   margin-left: -$-xxl;
 146   margin-right: -$-xxl;
 147   padding-top: 56px;
 148   border-radius: 3px;
 149   box-shadow: $bs-hover;
 150   transform-origin: top center;
 151   opacity: .5;
 152   transform: scale(0.9);
 153   .entity-item-snippet p  {
 154     display: none;
 155   }
 156   .entity-item-snippet {
 157     font-size: .8rem;
 158   }
 159   .entity-list-item-name {
 160     font-size: .9rem;
 161     display: -webkit-box;
 162     -webkit-box-orient: vertical;
 163     -webkit-line-clamp: 2;
 164     overflow: hidden;
 165   }
 166   .global-search-loading {
 167     position: absolute;
 168     width: 100%;
 169   }
 170 }
 171 header .search-box.search-active:focus-within {
 172   .global-search-suggestions {
 173     display: block;
 174   }
 175   input {
 176     background-color: #EEE;
 177     color: #444;
 178     border-color: #DDD;
 179   }
 180   #header-search-box-button {
 181     color: #444;
 182   }
 183 }
 184
 185 .logo {
 186   display: inline-flex;
 187   padding: ($-s - 6px) $-s;
 188   margin: 6px (-$-s);
 189   gap: $-s;
 190   align-items: center;
 191   border-radius: 4px;
 192   &:hover {
 193     color: #FFF;
 194     text-decoration: none;
 195     background-color: rgba(255, 255, 255, .15);
 196   }
 197 }
 198
 199 .logo-text {
 200   font-size: 1.8em;
 201   color: #fff;
 202   font-weight: 400;
 203   line-height: 1;
 204 }
 205 .logo-image {
 206   height: 43px;
 207 }
 208
 209 .mobile-menu-toggle {
 210   color: #FFF;
 211   fill: #FFF;
 212   font-size: 2em;
 213   border: 2px solid rgba(255, 255, 255, 0.8);
 214   border-radius: 4px;
 215   padding: 0 $-xs;
 216   position: absolute;
 217   right: $-m;
 218   top: 13px;
 219   line-height: 1;
 220   cursor: pointer;
 221   user-select: none;
 222   svg {
 223     margin: 0;
 224     bottom: -2px;
 225   }
 226   @include rtl() {
 227     left: $-m;
 228     right: auto;
 229   }
 230 }
 231
 232
 233
 234 @include smaller-than($l) {
 235   header .header-links {
 236     @include lightDark(background-color, #fff, #333);
 237     display: none;
 238     z-index: 10;
 239     right: $-m;
 240     border-radius: 4px;
 241     overflow: hidden;
 242     position: absolute;
 243     box-shadow: $bs-hover;
 244     margin-top: $-m;
 245     padding: $-xs 0;
 246     &.show {
 247       display: block;
 248     }
 249   }
 250   header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button {
 251     text-align: start;
 252     display: grid;
 253     align-items: center;
 254     padding: 8px $-m;
 255     gap: $-m;
 256     color: $text-dark;
 257     grid-template-columns: 16px auto;
 258     line-height: 1.4;
 259     @include lightDark(color, $text-dark, #eee);
 260     svg {
 261       margin-inline-end: $-s;
 262       width: 16px;
 263     }
 264     &:hover {
 265       background-color: var(--color-primary-light);
 266       color: var(--color-primary);
 267       text-decoration: none;
 268     }
 269     &:focus {
 270       @include lightDark(background-color, #eee, #333);
 271       outline-color: var(--color-primary);
 272       color: var(--color-primary);
 273     }
 274   }
 275   header .dropdown-container {
 276     display: block;
 277     padding-inline-start: 0;
 278   }
 279   header .links {
 280     display: block;
 281   }
 282   header .dropdown-container ul {
 283     display: block !important;
 284     position: relative;
 285     background-color: transparent;
 286     border: 0;
 287     padding: 0;
 288     margin: 0;
 289     box-shadow: none;
 290   }
 291 }
 292
 293 .tri-layout-mobile-tabs {
 294   position: sticky;
 295   top: 0;
 296   z-index: 5;
 297   background-color: #FFF;
 298   border-bottom: 1px solid #DDD;
 299   @include lightDark(border-bottom-color, #DDD, #333);
 300   box-shadow: $bs-card;
 301 }
 302 .tri-layout-mobile-tab {
 303   text-align: center;
 304   border-bottom: 3px solid #BBB;
 305   cursor: pointer;
 306   margin: 0;
 307   @include lightDark(background-color, #FFF, #222);
 308   @include lightDark(border-bottom-color, #BBB, #333);
 309   &:first-child {
 310     border-inline-end: 1px solid #DDD;
 311     @include lightDark(border-inline-end-color, #DDD, #000);
 312   }
 313   &[aria-selected="true"] {
 314     border-bottom-color: currentColor !important;
 315   }
 316 }
 317
 318 .breadcrumbs {
 319   display: flex;
 320   flex-direction: row;
 321   align-items: center;
 322   justify-content: flex-start;
 323   flex-wrap: wrap;
 324   opacity: 0.7;
 325   .icon-list-item {
 326     width: auto;
 327     padding-top: $-xs;
 328     padding-bottom: $-xs;
 329   }
 330   .separator {
 331     display: inline-block;
 332     fill: #aaa;
 333     font-size: 1.6em;
 334     line-height: 0.8;
 335     margin: -2px 0 0;
 336   }
 337   &:hover, &:focus-within {
 338     opacity: 1;
 339   }
 340   @media (prefers-contrast: more) {
 341     opacity: 1;
 342   }
 343 }
 344
 345 @include smaller-than($l) {
 346   .breadcrumbs .icon-list-item {
 347     padding: $-xs;
 348     > span + span {
 349       display: none;
 350     }
 351     > span:first-child {
 352       margin-inline-end: 0;
 353     }
 354   }
 355 }
 356
 357 .faded {
 358   a, button, span, span > div {
 359     color: #666;
 360     fill: #666;
 361   }
 362   .text-button {
 363     opacity: 0.5;
 364     transition: all ease-in-out 120ms;
 365     &:hover {
 366       opacity: 1;
 367       text-decoration: none;
 368     }
 369   }
 370 }
 371
 372 .faded span.faded-text {
 373   display: inline-block;
 374   padding: $-s;
 375 }
 376
 377 .action-buttons .text-button {
 378   display: inline-block;
 379   padding: $-xs $-s;
 380   &:last-child {
 381     padding-inline-end: 0;
 382   }
 383   &:first-child {
 384     padding-inline-start: 0;
 385   }
 386 }
 387
 388
 389 .action-buttons .dropdown-container:last-child a {
 390   padding-inline-end: 0;
 391   padding-inline-start: $-s;
 392 }
 393 .action-buttons {
 394   text-align: end;
 395   &.text-left {
 396     text-align: start;
 397     .text-button {
 398       padding-inline-end: $-m;
 399       padding-inline-start: 0;
 400     }
 401   }
 402   &.text-center {
 403     text-align: center;
 404   }
 405 }
 406
 407 @include smaller-than($m) {
 408   .action-buttons .text-button {
 409     padding: $-xs $-xs;
 410   }
 411   .action-buttons .dropdown-container:last-child a {
 412     padding-inline-start: $-xs;
 413   }
 414 }