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