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