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

   1 @use "mixins";
   2 @use "vars";
   3
   4 /**
   5  * Includes the main navigation header and the faded toolbar.
   6  */
   7
   8 header.grid {
   9   grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr);
  10 }
  11
  12 @include mixins.smaller-than(vars.$bp-l) {
  13   header.grid {
  14     grid-template-columns: 1fr;
  15     grid-row-gap: 0;
  16   }
  17 }
  18
  19 header {
  20   position: relative;
  21   display: block;
  22   z-index: 11;
  23   top: 0;
  24   color: rgb(250, 250, 250);
  25   border-bottom: 1px solid #DDD;
  26   box-shadow: vars.$bs-card;
  27   @include mixins.lightDark(border-bottom-color, #DDD, #000);
  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 vars.$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: vars.$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: vars.$s;
  65     margin: 0 (-(vars.$s));
  66     border-radius: 3px;
  67     gap: vars.$xs;
  68     > span {
  69       padding-inline-start: vars.$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 mixins.between(vars.$bp-l, vars.$bp-xl) {
  82       padding-inline-start: vars.$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: vars.$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 mixins.between(vars.$bp-l, vars.$bp-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   inset-inline-start: 16px;
 125   top: 10px;
 126   color: #FFF;
 127   opacity: 0.6;
 128   @include mixins.lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
 129   svg {
 130     margin-inline-end: 0;
 131   }
 132 }
 133
 134 .global-search-suggestions {
 135   display: none;
 136   position: absolute;
 137   top: -(vars.$s);
 138   left: 0;
 139   right: 0;
 140   z-index: -1;
 141   margin-left: -(vars.$xxl);
 142   margin-right: -(vars.$xxl);
 143   padding-top: 56px;
 144   border-radius: 3px;
 145   box-shadow: vars.$bs-hover;
 146   transform-origin: top center;
 147   opacity: .5;
 148   transform: scale(0.9);
 149   .entity-item-snippet p  {
 150     display: none;
 151   }
 152   .entity-item-snippet {
 153     font-size: .8rem;
 154   }
 155   .entity-list-item-name {
 156     font-size: .9rem;
 157     display: -webkit-box;
 158     -webkit-box-orient: vertical;
 159     -webkit-line-clamp: 2;
 160     overflow: hidden;
 161   }
 162   .global-search-loading {
 163     position: absolute;
 164     width: 100%;
 165   }
 166 }
 167 header .search-box.search-active:focus-within {
 168   .global-search-suggestions {
 169     display: block;
 170   }
 171   input {
 172     @include mixins.lightDark(background-color, #EEE, #333);
 173     @include mixins.lightDark(border-color, #DDD, #111);
 174   }
 175   #header-search-box-button, input {
 176     @include mixins.lightDark(color, #444, #AAA);
 177   }
 178 }
 179
 180 .logo {
 181   display: inline-flex;
 182   padding: (vars.$s - 6px) vars.$s;
 183   margin: 6px (-(vars.$s));
 184   gap: vars.$s;
 185   align-items: center;
 186   border-radius: 4px;
 187   &:hover {
 188     color: #FFF;
 189     text-decoration: none;
 190     background-color: rgba(255, 255, 255, .15);
 191   }
 192 }
 193
 194 .logo-text {
 195   font-size: 1.8em;
 196   color: #fff;
 197   font-weight: 400;
 198   line-height: 1;
 199 }
 200 .logo-image {
 201   height: 43px;
 202 }
 203
 204 .mobile-menu-toggle {
 205   color: #FFF;
 206   fill: #FFF;
 207   font-size: 2em;
 208   border: 2px solid rgba(255, 255, 255, 0.8);
 209   border-radius: 4px;
 210   padding: 0 vars.$xs;
 211   line-height: 1;
 212   cursor: pointer;
 213   user-select: none;
 214   svg {
 215     margin: 0;
 216     bottom: -2px;
 217   }
 218 }
 219
 220
 221 @include mixins.smaller-than(vars.$bp-l) {
 222   header .header-links {
 223     @include mixins.lightDark(background-color, #fff, #333);
 224     display: none;
 225     z-index: 10;
 226     inset-inline-end: vars.$m;
 227     border-radius: 4px;
 228     overflow: hidden;
 229     position: absolute;
 230     box-shadow: vars.$bs-hover;
 231     margin-top: vars.$m;
 232     padding: vars.$xs 0;
 233     &.show {
 234       display: block;
 235     }
 236   }
 237   header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button {
 238     text-align: start;
 239     display: grid;
 240     align-items: center;
 241     padding: 8px vars.$m;
 242     gap: vars.$m;
 243     color: vars.$text-dark;
 244     grid-template-columns: 16px auto;
 245     line-height: 1.4;
 246     @include mixins.lightDark(color, vars.$text-dark, #eee);
 247     svg {
 248       margin-inline-end: vars.$s;
 249       width: 16px;
 250     }
 251     &:hover {
 252       background-color: var(--color-primary-light);
 253       color: var(--color-primary);
 254       text-decoration: none;
 255     }
 256     &:focus {
 257       @include mixins.lightDark(background-color, #eee, #333);
 258       outline-color: var(--color-primary);
 259       color: var(--color-primary);
 260     }
 261   }
 262   header .dropdown-container {
 263     display: block;
 264     padding-inline-start: 0;
 265   }
 266   header .links {
 267     display: block;
 268   }
 269   header .dropdown-container ul {
 270     display: block !important;
 271     position: relative;
 272     background-color: transparent;
 273     border: 0;
 274     padding: 0;
 275     margin: 0;
 276     box-shadow: none;
 277   }
 278 }
 279
 280 .tri-layout-mobile-tabs {
 281   position: sticky;
 282   top: 0;
 283   z-index: 5;
 284   background-color: #FFF;
 285   border-bottom: 1px solid #DDD;
 286   @include mixins.lightDark(border-bottom-color, #DDD, #333);
 287   box-shadow: vars.$bs-card;
 288 }
 289 .tri-layout-mobile-tab {
 290   text-align: center;
 291   border-bottom: 3px solid #BBB;
 292   cursor: pointer;
 293   margin: 0;
 294   @include mixins.lightDark(background-color, #FFF, #222);
 295   @include mixins.lightDark(border-bottom-color, #BBB, #333);
 296   &:first-child {
 297     border-inline-end: 1px solid #DDD;
 298     @include mixins.lightDark(border-inline-end-color, #DDD, #000);
 299   }
 300   &[aria-selected="true"] {
 301     border-bottom-color: currentColor !important;
 302   }
 303 }
 304
 305 .breadcrumbs {
 306   display: flex;
 307   flex-direction: row;
 308   align-items: center;
 309   justify-content: flex-start;
 310   flex-wrap: wrap;
 311   opacity: 0.7;
 312   .icon-list-item {
 313     width: auto;
 314     padding-top: vars.$xs;
 315     padding-bottom: vars.$xs;
 316   }
 317   .separator {
 318     display: inline-block;
 319     fill: #aaa;
 320     font-size: 1.6em;
 321     line-height: 0.8;
 322     margin: -2px 0 0;
 323   }
 324   &:hover, &:focus-within {
 325     opacity: 1;
 326   }
 327   @media (prefers-contrast: more) {
 328     opacity: 1;
 329   }
 330 }
 331
 332 @include mixins.smaller-than(vars.$bp-l) {
 333   .breadcrumbs .icon-list-item {
 334     padding: vars.$xs;
 335     > span + span {
 336       display: none;
 337     }
 338     > span:first-child {
 339       margin-inline-end: 0;
 340     }
 341   }
 342 }
 343
 344 .faded {
 345   a, button, span, span > div {
 346     color: #666;
 347     fill: #666;
 348   }
 349   .text-button {
 350     opacity: 0.5;
 351     transition: all ease-in-out 120ms;
 352     &:hover {
 353       opacity: 1;
 354       text-decoration: none;
 355     }
 356   }
 357 }
 358
 359 .faded span.faded-text {
 360   display: inline-block;
 361   padding: vars.$s;
 362 }