+@use "mixins";
+@use "vars";
+
/**
* Includes the main navigation header and the faded toolbar.
*/
-header .grid {
- grid-template-columns: auto min-content auto;
+header.grid {
+ grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr);
}
-@include smaller-than($l) {
- header .grid {
+@include mixins.smaller-than(vars.$bp-l) {
+ header.grid {
grid-template-columns: 1fr;
grid-row-gap: 0;
}
top: 0;
color: rgb(250, 250, 250);
border-bottom: 1px solid #DDD;
- box-shadow: $bs-card;
- padding: $-xxs 0;
- @include lightDark(border-bottom-color, #DDD, #000);
- @include whenDark {
- filter: saturate(0.8) brightness(0.8);
+ box-shadow: vars.$bs-card;
+ @include mixins.lightDark(border-bottom-color, #DDD, #000);
+ .header-links {
+ display: flex;
+ align-items: center;
+ justify-content: end;
}
.links {
display: inline-block;
}
.links a {
display: inline-block;
- padding: $-m;
+ padding: 10px vars.$m;
color: #FFF;
+ border-radius: 3px;
+ }
+ .links a:hover {
+ text-decoration: none;
+ background-color: rgba(255, 255, 255, .15);
}
.dropdown-container {
- padding-inline-start: $-m;
+ padding-inline-start: vars.$m;
padding-inline-end: 0;
}
.avatar, .user-name {
.user-name {
vertical-align: top;
position: relative;
- display: inline-block;
+ display: inline-flex;
+ align-items: center;
cursor: pointer;
- > * {
- vertical-align: top;
- }
+ padding: vars.$s;
+ margin: 0 (-(vars.$s));
+ border-radius: 3px;
+ gap: vars.$xs;
> span {
- padding-inline-start: $-xs;
+ padding-inline-start: vars.$xs;
display: inline-block;
- padding-top: $-xxs;
+ line-height: 1;
}
> svg {
- padding-top: 4px;
font-size: 18px;
+ margin-top: -2px;
+ margin-inline-end: 0;
+ }
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.15);
}
- @include between($l, $xl) {
- padding-inline-start: $-xs;
+ @include mixins.between(vars.$bp-l, vars.$bp-xl) {
+ padding-inline-start: vars.$xs;
.name {
display: none;
}
}
-.header-search {
- display: inline-block;
-}
header .search-box {
display: inline-block;
- margin-top: 10px;
input {
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 40px;
color: #EEE;
z-index: 2;
+ height: auto;
+ padding: vars.$xs*1.5;
padding-inline-start: 40px;
&:focus {
outline: none;
- border: 1px solid rgba(255, 255, 255, 0.6);
+ border: 1px solid rgba(255, 255, 255, 0.4);
}
}
- button {
- z-index: 1;
- left: 16px;
- @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
- @include rtl {
- left: auto;
- right: 16px;
- }
- svg {
- margin-block-end: 0;
- }
+ input::placeholder {
+ color: #FFF;
+ opacity: 0.6;
}
- ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
- color: #DDD;
+ @include mixins.between(vars.$bp-l, vars.$bp-xl) {
+ max-width: 200px;
}
- ::-moz-placeholder { /* Firefox 19+ */
- color: #DDD;
+ &:focus-within #header-search-box-button {
+ opacity: 1;
}
- @include between($l, $xl) {
- max-width: 200px;
+}
+#header-search-box-button {
+ z-index: 1;
+ inset-inline-start: 16px;
+ top: 10px;
+ color: #FFF;
+ opacity: 0.6;
+ @include mixins.lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
+ svg {
+ margin-inline-end: 0;
+ }
+}
+
+.global-search-suggestions {
+ display: none;
+ position: absolute;
+ top: -(vars.$s);
+ left: 0;
+ right: 0;
+ z-index: -1;
+ margin-left: -(vars.$xxl);
+ margin-right: -(vars.$xxl);
+ padding-top: 56px;
+ border-radius: 3px;
+ box-shadow: vars.$bs-hover;
+ transform-origin: top center;
+ opacity: .5;
+ transform: scale(0.9);
+ .entity-item-snippet p {
+ display: none;
+ }
+ .entity-item-snippet {
+ font-size: .8rem;
+ }
+ .entity-list-item-name {
+ font-size: .9rem;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ }
+ .global-search-loading {
+ position: absolute;
+ width: 100%;
+ }
+}
+header .search-box.search-active:focus-within {
+ .global-search-suggestions {
+ display: block;
+ }
+ input {
+ @include mixins.lightDark(background-color, #EEE, #333);
+ @include mixins.lightDark(border-color, #DDD, #111);
+ }
+ #header-search-box-button, input {
+ @include mixins.lightDark(color, #444, #AAA);
}
}
.logo {
- display: inline-block;
+ display: inline-flex;
+ padding: (vars.$s - 6px) vars.$s;
+ margin: 6px (-(vars.$s));
+ gap: vars.$s;
+ align-items: center;
+ border-radius: 4px;
&:hover {
color: #FFF;
text-decoration: none;
+ background-color: rgba(255, 255, 255, .15);
}
}
+
.logo-text {
- display: inline-block;
font-size: 1.8em;
color: #fff;
font-weight: 400;
- @include padding(14px, $-l, 14px, 0);
- vertical-align: top;
line-height: 1;
}
.logo-image {
- @include margin($-xs, $-s, $-xs, 0);
- vertical-align: top;
height: 43px;
}
font-size: 2em;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 4px;
- padding: 0 $-xs;
- position: absolute;
- right: $-m;
- top: 13px;
+ padding: 0 vars.$xs;
line-height: 1;
cursor: pointer;
user-select: none;
margin: 0;
bottom: -2px;
}
- @include rtl() {
- left: $-m;
- right: auto;
- }
}
-
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
header .header-links {
- @include lightDark(background-color, #fff, #333);
+ @include mixins.lightDark(background-color, #fff, #333);
display: none;
z-index: 10;
- right: $-m;
+ inset-inline-end: vars.$m;
border-radius: 4px;
overflow: hidden;
position: absolute;
- box-shadow: $bs-hover;
- margin-top: -$-xs;
+ box-shadow: vars.$bs-hover;
+ margin-top: vars.$m;
+ padding: vars.$xs 0;
&.show {
display: block;
}
}
header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button {
text-align: start;
- display: block;
- padding: $-s $-m;
- color: $text-dark;
- @include lightDark(color, $text-dark, #eee);
+ display: grid;
+ align-items: center;
+ padding: 8px vars.$m;
+ gap: vars.$m;
+ color: vars.$text-dark;
+ grid-template-columns: 16px auto;
+ line-height: 1.4;
+ @include mixins.lightDark(color, vars.$text-dark, #eee);
svg {
- margin-inline-end: $-s;
+ margin-inline-end: vars.$s;
+ width: 16px;
}
&:hover {
- @include lightDark(background-color, #eee, #333);
- @include lightDark(color, #000, #fff);
+ background-color: var(--color-primary-light);
+ color: var(--color-primary);
text-decoration: none;
}
+ &:focus {
+ @include mixins.lightDark(background-color, #eee, #333);
+ outline-color: var(--color-primary);
+ color: var(--color-primary);
+ }
}
header .dropdown-container {
display: block;
z-index: 5;
background-color: #FFF;
border-bottom: 1px solid #DDD;
- box-shadow: $bs-card;
+ @include mixins.lightDark(border-bottom-color, #DDD, #333);
+ box-shadow: vars.$bs-card;
}
.tri-layout-mobile-tab {
text-align: center;
border-bottom: 3px solid #BBB;
cursor: pointer;
+ margin: 0;
+ @include mixins.lightDark(background-color, #FFF, #222);
+ @include mixins.lightDark(border-bottom-color, #BBB, #333);
&:first-child {
border-inline-end: 1px solid #DDD;
+ @include mixins.lightDark(border-inline-end-color, #DDD, #000);
}
- &.active {
- border-bottom-color: currentColor;
+ &[aria-selected="true"] {
+ border-bottom-color: currentColor !important;
}
}
opacity: 0.7;
.icon-list-item {
width: auto;
- padding-top: $-xs;
- padding-bottom: $-xs;
+ padding-top: vars.$xs;
+ padding-bottom: vars.$xs;
}
.separator {
display: inline-block;
&:hover, &:focus-within {
opacity: 1;
}
+ @media (prefers-contrast: more) {
+ opacity: 1;
+ }
}
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
.breadcrumbs .icon-list-item {
- padding: $-xs;
+ padding: vars.$xs;
> span + span {
display: none;
}
}
}
-.dropdown-search {
- position: relative;
- .dropdown-search-toggle {
- padding: 6px;
- border: 1px solid transparent;
- border-radius: 4px;
- &:hover {
- border-color: #DDD;
- }
- }
- .svg-icon {
- margin-inline-end: 0;
- }
-}
-
.faded {
a, button, span, span > div {
color: #666;
.faded span.faded-text {
display: inline-block;
- padding: $-s;
-}
-
-.action-buttons .text-button {
- display: inline-block;
- padding: $-xs $-s;
- &:last-child {
- padding-inline-end: 0;
- }
- &:first-child {
- padding-inline-start: 0;
- }
-}
-
-
-.action-buttons .dropdown-container:last-child a {
- padding-inline-end: 0;
- padding-inline-start: $-s;
-}
-.action-buttons {
- text-align: end;
- &.text-left {
- text-align: start;
- .text-button {
- padding-inline-end: $-m;
- padding-inline-start: 0;
- }
- }
- &.text-center {
- text-align: center;
- }
-}
-
-@include smaller-than($m) {
- .action-buttons .text-button {
- padding: $-xs $-xs;
- }
- .action-buttons .dropdown-container:last-child a {
- padding-inline-start: $-xs;
- }
+ padding: vars.$s;
}
\ No newline at end of file
projects / bookstack / blobdiff