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-block-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 }
 167 .search-active .global-search-suggestions {
 168   display: block;
 169 }
 170 header .search-box.search-active input {
 171   background-color: #EEE;
 172   color: #444;
 173   border-color: #DDD;
 174 }
 175 header .search-box.search-active #header-search-box-button {
 176   color: #444;
 177 }
 178
 179 .logo {
 180   display: inline-flex;
 181   padding: ($-s - 6px) $-s;
 182   margin: 6px (-$-s);
 183   gap: $-s;
 184   align-items: center;
 185   border-radius: 4px;
 186   &:hover {
 187     color: #FFF;
 188     text-decoration: none;
 189     background-color: rgba(255, 255, 255, .15);
 190   }
 191 }
 192
 193 .logo-text {
 194   font-size: 1.8em;
 195   color: #fff;
 196   font-weight: 400;
 197   line-height: 1;
 198 }
 199 .logo-image {
 200   height: 43px;
 201 }
 202
 203 .mobile-menu-toggle {
 204   color: #FFF;
 205   fill: #FFF;
 206   font-size: 2em;
 207   border: 2px solid rgba(255, 255, 255, 0.8);
 208   border-radius: 4px;
 209   padding: 0 $-xs;
 210   position: absolute;
 211   right: $-m;
 212   top: 13px;
 213   line-height: 1;
 214   cursor: pointer;
 215   user-select: none;
 216   svg {
 217     margin: 0;
 218     bottom: -2px;
 219   }
 220   @include rtl() {
 221     left: $-m;
 222     right: auto;
 223   }
 224 }
 225
 226
 227
 228 @include smaller-than($l) {
 229   header .header-links {
 230     @include lightDark(background-color, #fff, #333);
 231     display: none;
 232     z-index: 10;
 233     right: $-m;
 234     border-radius: 4px;
 235     overflow: hidden;
 236     position: absolute;
 237     box-shadow: $bs-hover;
 238     margin-top: $-m;
 239     padding: $-xs 0;
 240     &.show {
 241       display: block;
 242     }
 243   }
 244   header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button {
 245     text-align: start;
 246     display: grid;
 247     align-items: center;
 248     padding: 8px $-m;
 249     gap: $-m;
 250     color: $text-dark;
 251     grid-template-columns: 16px auto;
 252     line-height: 1.4;
 253     @include lightDark(color, $text-dark, #eee);
 254     svg {
 255       margin-inline-end: $-s;
 256       width: 16px;
 257     }
 258     &:hover {
 259       background-color: var(--color-primary-light);
 260       color: var(--color-primary);
 261       text-decoration: none;
 262     }
 263     &:focus {
 264       @include lightDark(background-color, #eee, #333);
 265       outline-color: var(--color-primary);
 266       color: var(--color-primary);
 267     }
 268   }
 269   header .dropdown-container {
 270     display: block;
 271     padding-inline-start: 0;
 272   }
 273   header .links {
 274     display: block;
 275   }
 276   header .dropdown-container ul {
 277     display: block !important;
 278     position: relative;
 279     background-color: transparent;
 280     border: 0;
 281     padding: 0;
 282     margin: 0;
 283     box-shadow: none;
 284   }
 285 }
 286
 287 .tri-layout-mobile-tabs {
 288   position: sticky;
 289   top: 0;
 290   z-index: 5;
 291   background-color: #FFF;
 292   border-bottom: 1px solid #DDD;
 293   @include lightDark(border-bottom-color, #DDD, #333);
 294   box-shadow: $bs-card;
 295 }
 296 .tri-layout-mobile-tab {
 297   text-align: center;
 298   border-bottom: 3px solid #BBB;
 299   cursor: pointer;
 300   margin: 0;
 301   @include lightDark(background-color, #FFF, #222);
 302   @include lightDark(border-bottom-color, #BBB, #333);
 303   &:first-child {
 304     border-inline-end: 1px solid #DDD;
 305     @include lightDark(border-inline-end-color, #DDD, #000);
 306   }
 307   &[aria-selected="true"] {
 308     border-bottom-color: currentColor !important;
 309   }
 310 }
 311
 312 .breadcrumbs {
 313   display: flex;
 314   flex-direction: row;
 315   align-items: center;
 316   justify-content: flex-start;
 317   flex-wrap: wrap;
 318   opacity: 0.7;
 319   .icon-list-item {
 320     width: auto;
 321     padding-top: $-xs;
 322     padding-bottom: $-xs;
 323   }
 324   .separator {
 325     display: inline-block;
 326     fill: #aaa;
 327     font-size: 1.6em;
 328     line-height: 0.8;
 329     margin: -2px 0 0;
 330   }
 331   &:hover, &:focus-within {
 332     opacity: 1;
 333   }
 334   @media (prefers-contrast: more) {
 335     opacity: 1;
 336   }
 337 }
 338
 339 @include smaller-than($l) {
 340   .breadcrumbs .icon-list-item {
 341     padding: $-xs;
 342     > span + span {
 343       display: none;
 344     }
 345     > span:first-child {
 346       margin-inline-end: 0;
 347     }
 348   }
 349 }
 350
 351 .faded {
 352   a, button, span, span > div {
 353     color: #666;
 354     fill: #666;
 355   }
 356   .text-button {
 357     opacity: 0.5;
 358     transition: all ease-in-out 120ms;
 359     &:hover {
 360       opacity: 1;
 361       text-decoration: none;
 362     }
 363   }
 364 }
 365
 366 .faded span.faded-text {
 367   display: inline-block;
 368   padding: $-s;
 369 }
 370
 371 .action-buttons .text-button {
 372   display: inline-block;
 373   padding: $-xs $-s;
 374   &:last-child {
 375     padding-inline-end: 0;
 376   }
 377   &:first-child {
 378     padding-inline-start: 0;
 379   }
 380 }
 381
 382
 383 .action-buttons .dropdown-container:last-child a {
 384   padding-inline-end: 0;
 385   padding-inline-start: $-s;
 386 }
 387 .action-buttons {
 388   text-align: end;
 389   &.text-left {
 390     text-align: start;
 391     .text-button {
 392       padding-inline-end: $-m;
 393       padding-inline-start: 0;
 394     }
 395   }
 396   &.text-center {
 397     text-align: center;
 398   }
 399 }
 400
 401 @include smaller-than($m) {
 402   .action-buttons .text-button {
 403     padding: $-xs $-xs;
 404   }
 405   .action-buttons .dropdown-container:last-child a {
 406     padding-inline-start: $-xs;
 407   }
 408 }