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