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   padding: $-xxs 0;
  25   @include lightDark(border-bottom-color, #DDD, #000);
  26   @include whenDark {
  27     filter: saturate(0.8) 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-box {
  81   display: inline-block;
  82   margin-top: 10px;
  83   input {
  84     background-color: rgba(0, 0, 0, 0.2);
  85     border: 1px solid rgba(255, 255, 255, 0.2);
  86     border-radius: 40px;
  87     color: #EEE;
  88     z-index: 2;
  89     height: auto;
  90     padding: $-xs*1.5;
  91     padding-inline-start: 40px;
  92     &:focus {
  93       outline: none;
  94       border: 1px solid rgba(255, 255, 255, 0.6);
  95     }
  96   }
  97   button {
  98     z-index: 1;
  99     left: 16px;
 100     @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
 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     @include lightDark(background-color, #fff, #333);
 170     display: none;
 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, header .dropdown-container ul li button {
 183     text-align: start;
 184     display: block;
 185     padding: $-s $-m;
 186     color: $text-dark;
 187     @include lightDark(color, $text-dark, #eee);
 188     svg {
 189       margin-inline-end: $-s;
 190     }
 191     &:hover {
 192       @include lightDark(background-color, #eee, #333);
 193       @include lightDark(color, #000, #fff);
 194       text-decoration: none;
 195     }
 196     &:focus {
 197       @include lightDark(background-color, #eee, #333);
 198       outline-color: var(--color-primary);
 199       color: var(--color-primary);
 200     }
 201   }
 202   header .dropdown-container {
 203     display: block;
 204     padding-inline-start: 0;
 205   }
 206   header .links {
 207     display: block;
 208   }
 209   header .dropdown-container ul {
 210     display: block !important;
 211     position: relative;
 212     background-color: transparent;
 213     border: 0;
 214     padding: 0;
 215     margin: 0;
 216     box-shadow: none;
 217   }
 218 }
 219
 220 .tri-layout-mobile-tabs {
 221   position: sticky;
 222   top: 0;
 223   z-index: 5;
 224   background-color: #FFF;
 225   border-bottom: 1px solid #DDD;
 226   @include lightDark(border-bottom-color, #DDD, #333);
 227   box-shadow: $bs-card;
 228 }
 229 .tri-layout-mobile-tab {
 230   text-align: center;
 231   border-bottom: 3px solid #BBB;
 232   cursor: pointer;
 233   margin: 0;
 234   @include lightDark(background-color, #FFF, #222);
 235   @include lightDark(border-bottom-color, #BBB, #333);
 236   &:first-child {
 237     border-inline-end: 1px solid #DDD;
 238     @include lightDark(border-inline-end-color, #DDD, #000);
 239   }
 240   &[aria-selected="true"] {
 241     border-bottom-color: currentColor !important;
 242   }
 243 }
 244
 245 .breadcrumbs {
 246   display: flex;
 247   flex-direction: row;
 248   align-items: center;
 249   justify-content: flex-start;
 250   flex-wrap: wrap;
 251   opacity: 0.7;
 252   .icon-list-item {
 253     width: auto;
 254     padding-top: $-xs;
 255     padding-bottom: $-xs;
 256   }
 257   .separator {
 258     display: inline-block;
 259     fill: #aaa;
 260     font-size: 1.6em;
 261     line-height: 0.8;
 262     margin: -2px 0 0;
 263   }
 264   &:hover, &:focus-within {
 265     opacity: 1;
 266   }
 267   @media (prefers-contrast: more) {
 268     opacity: 1;
 269   }
 270 }
 271
 272 @include smaller-than($l) {
 273   .breadcrumbs .icon-list-item {
 274     padding: $-xs;
 275     > span + span {
 276       display: none;
 277     }
 278     > span:first-child {
 279       margin-inline-end: 0;
 280     }
 281   }
 282 }
 283
 284 .faded {
 285   a, button, span, span > div {
 286     color: #666;
 287     fill: #666;
 288   }
 289   .text-button {
 290     opacity: 0.5;
 291     transition: all ease-in-out 120ms;
 292     &:hover {
 293       opacity: 1;
 294       text-decoration: none;
 295     }
 296   }
 297 }
 298
 299 .faded span.faded-text {
 300   display: inline-block;
 301   padding: $-s;
 302 }
 303
 304 .action-buttons .text-button {
 305   display: inline-block;
 306   padding: $-xs $-s;
 307   &:last-child {
 308     padding-inline-end: 0;
 309   }
 310   &:first-child {
 311     padding-inline-start: 0;
 312   }
 313 }
 314
 315
 316 .action-buttons .dropdown-container:last-child a {
 317   padding-inline-end: 0;
 318   padding-inline-start: $-s;
 319 }
 320 .action-buttons {
 321   text-align: end;
 322   &.text-left {
 323     text-align: start;
 324     .text-button {
 325       padding-inline-end: $-m;
 326       padding-inline-start: 0;
 327     }
 328   }
 329   &.text-center {
 330     text-align: center;
 331   }
 332 }
 333
 334 @include smaller-than($m) {
 335   .action-buttons .text-button {
 336     padding: $-xs $-xs;
 337   }
 338   .action-buttons .dropdown-container:last-child a {
 339     padding-inline-start: $-xs;
 340   }
 341 }