UI: Archive-website web-assets v2 upgrade #1
378
index.html
378
index.html
@ -66,49 +66,47 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container-main">
|
<div class="container-main">
|
||||||
<style>
|
<style>
|
||||||
/* This style block is copied across all sites using the developer navbar.
|
|
||||||
* For custom styling on this website, add a <style> block after this one. */
|
|
||||||
|
|
||||||
/* Variables. */
|
/* Variables. */
|
||||||
.nav-global {
|
.nav-global {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|
||||||
--nav-global-color-bg: hsl(213, 10%, 14%);
|
/*
|
||||||
--nav-global-color-text: hsl(213, 5%, 64%);
|
*Variables come from, and match partial _variables, and are prefixed with 'bwa-'.
|
||||||
--nav-global-color-text-secondary: hsl(213, 5%, 44%);
|
*Sizes must be defined in pixels as default rem-sizing might vary in projects.
|
||||||
--nav-global-color-text-highlight: hsl(213, 5%, 84%);
|
*/
|
||||||
--nav-global-color-text-hover: white;
|
|
||||||
--nav-global-color-text-active: white;
|
|
||||||
|
|
||||||
--nav-global-color-primary: hsl(204, 98%, 54%);
|
--bwa-color-bg-primary: hsl(213, 10%, 21%);
|
||||||
--nav-global-color-primary-bg: hsla(204, 100%, 46%, .1);
|
--bwa-color-bg-tertiary: hsl(213, 10%, 14%);
|
||||||
|
|
||||||
--nav-global-color-button-bg-hover: hsl(213, 10%, 24%);
|
--bwa-color-text: hsl(213, 10%, 80%);
|
||||||
--nav-global-color-button-text: var(--nav-global-color-text);
|
--bwa-color-text-primary: hsl(213, 10%, 98%);
|
||||||
|
|
||||||
--nav-global-color-menu-bg: var(--nav-global-color-bg);
|
/* Colours Components. */
|
||||||
--nav-global-color-menu-border: hsl(213, 10%, 18%);
|
--bwa-border-color: hsla(213, 10%, 80%, .15);
|
||||||
|
|
||||||
--nav-global-color-menu-zindex: 1040;
|
--bwa-btn-color-bg-hover: hsl(213, 10%, 30%);
|
||||||
|
|
||||||
--nav-global-box-shadow-menu: 0px 5px 15px -2px rgba(0, 0, 0, 0.33), 0px 5px 15px -5px rgba(0, 0, 0, 0.33);
|
/* Colours Status. */
|
||||||
--nav-global-box-shadow-menu-item: 0px 1px 4px 0px rgba(0, 0, 0, 0.05), 0px 15px 20px -1px rgba(0, 0, 0, 0.025);
|
--bwa-color-accent: hsl(204deg, 100%, 50%);
|
||||||
|
--bwa-color-accent-bg: hsla(204deg, 100%, 50%, .1);
|
||||||
|
--bwa-color-accent-bg-hover: hsla(204deg, 100%, 50%, .2);
|
||||||
|
|
||||||
--nav-global-navbar-height: 45px;
|
--bwa-border-radius: 6px;
|
||||||
|
--bwa-border-radius-lg: 12px;
|
||||||
|
|
||||||
--nav-global-spacer: 15px;
|
--bwa-transition-speed: 150ms;
|
||||||
--nav-global-spacer-sm: 10px;
|
|
||||||
--nav-global-spacer-xs: 5px;
|
|
||||||
|
|
||||||
--nav-global-border-radius: 6px;
|
--bwa-zindex-fixed: 1030;
|
||||||
--nav-global-border-radius-lg: 10px;
|
--bwa-zindex-dropdown: 1040;
|
||||||
|
|
||||||
--nav-global-button-height: 35px;
|
/* Grid. */
|
||||||
--nav-global-link-padding-x: var(--nav-global-spacer);
|
--bwa-spacer: 16px;
|
||||||
--nav-global-link-padding-y: var(--nav-global-spacer-sm);
|
--bwa-spacer-1: calc(var(--bwa-spacer) * 0.25);
|
||||||
|
--bwa-spacer-2: calc(var(--bwa-spacer) * 0.5);
|
||||||
|
--bwa-spacer-3: var(--bwa-spacer);
|
||||||
|
|
||||||
--nav-global-font-size: 14px;
|
/* Type. */
|
||||||
--nav-global-transition-speed: 150ms;
|
--bwa-fs-base: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Reset. */
|
/* Reset. */
|
||||||
@ -117,8 +115,6 @@
|
|||||||
.nav-global :not(svg|*),
|
.nav-global :not(svg|*),
|
||||||
.nav-global *::before,
|
.nav-global *::before,
|
||||||
.nav-global *::after {
|
.nav-global *::after {
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
|
|
||||||
all: unset;
|
all: unset;
|
||||||
display: revert;
|
display: revert;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -131,15 +127,23 @@
|
|||||||
.nav-global * {
|
.nav-global * {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
|
|
||||||
font-family: 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
font-variation-settings: 'wght' 400;
|
font-variation-settings: 'wght' 400;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-global {
|
||||||
|
background-color: var(--bwa-color-bg-tertiary);
|
||||||
|
color: var(--bwa-color-text);
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
z-index: var(--zindex-fixed);
|
||||||
|
}
|
||||||
|
|
||||||
.nav-global h3,
|
.nav-global h3,
|
||||||
.nav-global h4,
|
.nav-global h4,
|
||||||
.nav-global strong {
|
.nav-global strong {
|
||||||
font-variation-settings: 'wght' 600;
|
font-variation-settings: 'wght' 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global figure,
|
.nav-global figure,
|
||||||
@ -149,12 +153,7 @@
|
|||||||
|
|
||||||
.nav-global svg:not(:root) {
|
.nav-global svg:not(:root) {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
vertical-align: middle;
|
||||||
|
|
||||||
.nav-global {
|
|
||||||
background-color: var(--nav-global-color-bg);
|
|
||||||
color: var(--nav-global-color-text);
|
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-container {
|
.nav-global .nav-global-container {
|
||||||
@ -166,78 +165,122 @@
|
|||||||
.nav-global nav {
|
.nav-global nav {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
line-height: 1.5rem;
|
line-height: var(--bwa-fs-base);
|
||||||
font-size: var(--nav-global-font-size);
|
font-size: var(--bwa-fs-base);
|
||||||
height: var(--nav-global-navbar-height);
|
justify-content: space-between;
|
||||||
|
min-height: calc(var(--bwa-spacer) * 4);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 var(--nav-global-spacer);
|
padding: 0 var(--bwa-spacer);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Links. */
|
/* Links. */
|
||||||
.nav-global a {
|
.nav-global a:not(.dropdown-item) {
|
||||||
color: var(--nav-global-color-text);
|
color: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: background-color var(--nav-global-transition-speed) ease-out, color var(--nav-global-transition-speed) ease-out;
|
transition: background-color var(--bwa-transition-speed) ease-out, color var(--bwa-transition-speed) ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global a:hover {
|
.nav-global-nav-links {
|
||||||
color: var(--nav-global-color-text-hover);
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-global-nav-links a:not(.dropdown-item) {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-global a:not(.dropdown-item):hover {
|
||||||
|
color: var(--bwa-color-text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation items. */
|
/* Navigation items. */
|
||||||
.nav-global nav>ul {
|
.nav-global nav>ul {
|
||||||
align-items: center;
|
flex-wrap: wrap;
|
||||||
display: flex;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global nav>ul>li {
|
.nav-global nav>ul,
|
||||||
|
.nav-global nav>ul>li,
|
||||||
|
.nav-global nav>ul>li>a,
|
||||||
|
.nav-global-apps-dropdown-container {
|
||||||
|
align-items: center;
|
||||||
|
display: inline-flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-global-apps-dropdown-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global nav>ul>li>a {
|
.nav-global nav>ul>li>a {
|
||||||
align-items: center;
|
padding: var(--bwa-spacer-2);
|
||||||
display: inline-flex;
|
|
||||||
padding: var(--nav-global-link-padding-y) var(--nav-global-link-padding-x);
|
|
||||||
position: relative;
|
|
||||||
top: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-link-active,
|
@media (min-width: 1320px) {
|
||||||
.nav-global .nav-global-link-active svg {
|
.nav-global nav>ul>li>a {
|
||||||
color: var(--nav-global-color-text-active);
|
padding-left: var(--bwa-spacer);
|
||||||
fill: var(--nav-global-color-text-active);
|
padding-right: var(--bwa-spacer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-global nav>a.is-active,
|
||||||
|
.nav-global nav>a.is-active svg,
|
||||||
|
.nav-global nav>ul>li>a.is-active {
|
||||||
|
color: var(--bwa-color-text-primary) !important;
|
||||||
|
fill: var(--bwa-color-text-primary);
|
||||||
|
font-variation-settings: 'wght', 500;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-links-right {
|
.nav-global .nav-global-links-right {
|
||||||
margin-left: auto;
|
flex-wrap: nowrap;
|
||||||
|
gap: 0 var(--bwa-spacer-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo. */
|
/* Logo. */
|
||||||
.nav-global a.nav-global-logo {
|
.nav-global a.nav-global-logo {
|
||||||
margin-right: var(--nav-global-spacer-sm);
|
margin-right: var(--bwa-spacer);
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-logo svg {
|
.nav-global a.nav-global-logo strong {
|
||||||
|
margin-inline: var(--bwa-spacer-2);
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-global .nav-global-logo svg,
|
||||||
|
.nav-global .nav-global-logo img {
|
||||||
height: 21px;
|
height: 21px;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global a.nav-global-logo svg {
|
.nav-global a.nav-global-logo svg {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: calc(var(--bwa-spacer-1) * -1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global svg {
|
.nav-global svg {
|
||||||
fill: var(--nav-global-color-text);
|
fill: var(--bwa-color-text);
|
||||||
transition: fill var(--nav-global-transition-speed) ease-out;
|
transition: fill var(--bwa-transition-speed) ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-logo:hover svg {
|
.nav-global .nav-global-logo:hover svg {
|
||||||
fill: white;
|
fill: var(--bwa-color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-global .nav-global-logo.is-active,
|
||||||
|
.nav-global .nav-global-logo.is-active svg,
|
||||||
|
// TODO: make classes 'is-active' and 'nav-global-btn-active' consistent
|
||||||
|
.nav-global button.nav-global-btn-active svg {
|
||||||
|
color: var(--bwa-color-text-primary);
|
||||||
|
fill: var(--bwa-color-text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Apps button. */
|
/* Apps button. */
|
||||||
@ -247,52 +290,66 @@
|
|||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-radius: var(--nav-global-border-radius);
|
border-radius: var(--bwa-border-radius);
|
||||||
border: 0;
|
border: 0;
|
||||||
color: var(--nav-global-color-button-text);
|
color: var(--bwa-btn-color-text);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
height: var(--nav-global-button-height);
|
height: calc(var(--bwa-spacer) * 2.25);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
padding: var(--nav-global-spacer-xs) var(--nav-global-spacer);
|
padding: var(--bwa-spacer-1) var(--bwa-spacer-2);
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
transition: background-color var(--nav-global-transition-speed) ease-out, color var(--nav-global-transition-speed) ease-out, transform var(--nav-global-transition-speed) ease-out;
|
transition: background-color var(--bwa-transition-speed) ease-out, color var(--bwa-transition-speed) ease-out, transform var(--bwa-transition-speed) ease-out;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-global .nav-global-btn.nav-global-btn-primary {
|
||||||
|
padding-left: var(--bwa-spacer);
|
||||||
|
padding-right: var(--bwa-spacer);
|
||||||
|
}
|
||||||
|
|
||||||
.nav-global button span,
|
.nav-global button span,
|
||||||
.nav-global .nav-global-btn span {
|
.nav-global .nav-global-btn span {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global button:hover,
|
.nav-global button:hover,
|
||||||
.nav-global .nav-global-btn:hover {
|
.nav-global .nav-global-btn:hover,
|
||||||
background-color: var(--nav-global-color-button-bg-hover);
|
.nav-global button.nav-global-btn-active,
|
||||||
color: var(--nav-global-color-text-hover);
|
.nav-global .nav-global-btn.nav-global-btn-active {
|
||||||
|
background-color: var(--bwa-btn-color-bg-hover);
|
||||||
|
color: var(--bwa-color-text-primary);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global button.nav-global-btn-active,
|
.nav-global .nav-global-btn span {
|
||||||
.nav-global .nav-global-btn.nav-global-btn-active {
|
margin-left: var(--bwa-spacer-2);
|
||||||
background-color: var(--nav-global-color-primary-bg);
|
|
||||||
color: var(--nav-global-color-primary);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global button.nav-global-btn-active svg,
|
.nav-global .nav-global-btn-primary {
|
||||||
.nav-global .nav-global-btn.nav-global-btn-active svg {
|
background-color: var(--bwa-color-accent-bg);
|
||||||
fill: var(--nav-global-color-primary);
|
color: var(--bwa-color-accent) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-global .nav-global-btn-primary:hover {
|
||||||
|
background-color: var(--bwa-color-accent-bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-icon {
|
.nav-global .nav-global-icon {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
pointer-events: none;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global-icon-dropdown-toggle {
|
.nav-global .nav-global-icon-alt {
|
||||||
margin-left: var(--nav-global-spacer-xs);
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-global .dropdown-toggle.active {
|
||||||
|
color: var(--bwa-color-text-primary)
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global button:hover svg,
|
.nav-global button:hover svg,
|
||||||
@ -302,18 +359,18 @@
|
|||||||
|
|
||||||
/* Apps dropdown menu. */
|
/* Apps dropdown menu. */
|
||||||
.nav-global .nav-global-apps-menu {
|
.nav-global .nav-global-apps-menu {
|
||||||
background-color: var(--nav-global-color-menu-bg);
|
background-color: var(--bwa-color-bg-tertiary);
|
||||||
border-radius: var(--nav-global-border-radius-lg);
|
border-radius: var(--bwa-border-radius-lg);
|
||||||
border: thin solid var(--nav-global-color-menu-border);
|
border: thin solid var(--bwa-border-color);
|
||||||
box-shadow: var(--nav-global-box-shadow-menu);
|
box-shadow: 0 var(--bwa-spacer-1) var(--bwa-spacer) -2px rgba(0, 0, 0, 0.33), 0px var(--bwa-spacer-1) var(--bwa-spacer) calc(var(--bwa-spacer-1) * -1) rgba(0, 0, 0, 0.33);
|
||||||
display: none;
|
display: none;
|
||||||
padding: var(--nav-global-spacer-sm);
|
padding: var(--bwa-spacer-2);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: calc(100% + 15px);
|
top: calc(100% + var(--bwa-spacer));
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
width: 640px;
|
width: 640px;
|
||||||
z-index: var(--nav-global-color-menu-zindex);
|
z-index: var(--bwa-zindex-dropdown);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-dropdown.is-visible {
|
.nav-global .nav-global-dropdown.is-visible {
|
||||||
@ -322,10 +379,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Tiny triangle in the corner. */
|
/* Tiny triangle in the corner. */
|
||||||
|
// TODO: consider removing for consistency
|
||||||
.nav-global .nav-global-apps-menu::before {
|
.nav-global .nav-global-apps-menu::before {
|
||||||
background-color: var(--nav-global-color-menu-bg);
|
background-color: var(--bwa-color-bg-tertiary);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 2px var(--nav-global-color-menu-bg) solid;
|
border: 2px var(--bwa-color-bg-tertiary) solid;
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
height: .85rem;
|
height: .85rem;
|
||||||
@ -338,22 +396,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-apps-menu ul {
|
.nav-global .nav-global-apps-menu ul {
|
||||||
|
border-bottom: 2px solid rgba(255, 255, 255, .05);
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--nav-global-spacer-sm);
|
gap: var(--bwa-spacer-2);
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0 0 var(--bwa-spacer-1) 0;
|
||||||
padding: 0;
|
padding: var(--bwa-spacer-1) 0 var(--bwa-spacer-2) 0;
|
||||||
}
|
|
||||||
|
|
||||||
.nav-global .nav-global-apps-menu ul {
|
|
||||||
border-bottom: 2px solid rgba(255, 255, 255, .05);
|
|
||||||
margin: 0 0 var(--nav-global-spacer-xs) 0;
|
|
||||||
padding: var(--nav-global-spacer-xs) 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-apps-menu ul>li>a {
|
.nav-global .nav-global-apps-menu ul>li>a {
|
||||||
border-radius: var(--nav-global-border-radius-lg);
|
border-radius: var(--bwa-border-radius-lg);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -361,45 +414,46 @@
|
|||||||
|
|
||||||
.nav-global .nav-global-apps-menu ul>li>a:hover {
|
.nav-global .nav-global-apps-menu ul>li>a:hover {
|
||||||
background-color: rgba(255, 255, 255, .05);
|
background-color: rgba(255, 255, 255, .05);
|
||||||
color: var(--nav-global-color-text-active);
|
color: var(--bwa-color-text-primary);
|
||||||
box-shadow: var(--nav-global-box-shadow-menu-item);
|
box-shadow: 0px 1px var(--bwa-spacer-1) 0 rgba(0, 0, 0, 0.05), 0 var(--bwa-spacer) 20px -1px rgba(0, 0, 0, 0.025);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-apps-menu ul>li>a:hover h4,
|
.nav-global .nav-global-apps-menu ul>li>a:hover h4,
|
||||||
.nav-global .nav-global-apps-menu ul>li>a:hover svg {
|
.nav-global .nav-global-apps-menu ul>li>a:hover svg {
|
||||||
color: var(--nav-global-color-primary);
|
color: var(--bwa-color-accent);
|
||||||
fill: var(--nav-global-color-primary);
|
fill: var(--bwa-color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-apps-menu h3 {
|
.nav-global .nav-global-apps-menu h3 {
|
||||||
color: white;
|
color: white;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 13px;
|
font-size: 12px;
|
||||||
line-height: 18px;
|
line-height: var(--bwa-spacer);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
margin-top: 2px;
|
||||||
opacity: .3;
|
opacity: .3;
|
||||||
padding-left: var(--nav-global-spacer);
|
padding-left: var(--bwa-spacer);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-apps-menu h4 {
|
.nav-global .nav-global-apps-menu h4 {
|
||||||
color: var(--nav-global-color-text-highlight);
|
color: var(--bwa-color-text-primary);
|
||||||
font-size: 17px;
|
font-size: 18px;
|
||||||
line-height: 18px;
|
line-height: 20px;
|
||||||
margin: var(--nav-global-spacer-xs) 0 0;
|
margin: var(--bwa-spacer-1) 0 0;
|
||||||
padding: var(--nav-global-spacer-sm) var(--nav-global-spacer) 0;
|
padding: var(--bwa-spacer-2) var(--bwa-spacer) 0;
|
||||||
transition: color var(--nav-global-transition-speed) ease-out;
|
transition: color var(--bwa-transition-speed) ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-apps-menu p {
|
.nav-global .nav-global-apps-menu p {
|
||||||
font-size: 15px;
|
font-size: var(--bwa-fs-base);
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
padding: var(--nav-global-spacer-xs) var(--nav-global-spacer) var(--nav-global-spacer-sm);
|
padding: var(--bwa-spacer-1) var(--bwa-spacer) var(--bwa-spacer-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-apps-menu figure {
|
.nav-global .nav-global-apps-menu figure {
|
||||||
margin: var(--nav-global-spacer) 0 0 var(--nav-global-spacer);
|
margin: var(--bwa-spacer) 0 0 var(--bwa-spacer);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-apps-menu ul>li>a svg {
|
.nav-global .nav-global-apps-menu ul>li>a svg {
|
||||||
@ -416,7 +470,7 @@
|
|||||||
|
|
||||||
.nav-global .nav-global-apps-menu-section-donate a svg {
|
.nav-global .nav-global-apps-menu-section-donate a svg {
|
||||||
fill: hsl(352, 90%, 62%) !important;
|
fill: hsl(352, 90%, 62%) !important;
|
||||||
transition: transform var(--nav-global-transition-speed) ease-out;
|
transition: transform var(--bwa-transition-speed) ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-apps-menu-section-donate ul>li:first-child>a {
|
.nav-global .nav-global-apps-menu-section-donate ul>li:first-child>a {
|
||||||
@ -443,65 +497,89 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
|
|
||||||
.nav-global-apps-dropdown-container,
|
.nav-global-apps-dropdown-container,
|
||||||
.nav-global a.nav-global-logo {
|
.nav-global a.nav-global-logo {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global button.nav-global-logo {
|
.nav-global button.nav-global-logo {
|
||||||
display: block;
|
display: flex;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-global button.nav-global-logo strong,
|
||||||
|
.nav-global button.nav-global-logo svg {
|
||||||
|
margin-right: var(--bwa-spacer-2)
|
||||||
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-nav-links {
|
.nav-global .nav-global-nav-links {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
background-color: var(--nav-global-color-menu-bg);
|
background-color: var(--bwa-color-bg-primary);
|
||||||
border-radius: var(--nav-global-border-radius-lg);
|
border-radius: 6px;
|
||||||
display: none;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
left: 1rem;
|
height: auto;
|
||||||
padding: 0 var(--nav-global-spacer-sm);
|
padding: var(--bwa-spacer-1);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(100% + .5rem);
|
top: 72px;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
width: 10rem;
|
z-index: var(--bwa-zindex-dropdown);
|
||||||
z-index: var(--nav-global-color-menu-zindex);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-nav-links.is-visible {
|
.nav-global .nav-global-nav-links.is-visible {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-nav-links::before {
|
.nav-global .nav-global-nav-links li {
|
||||||
background-color: var(--nav-global-color-menu-bg);
|
align-items: center;
|
||||||
border-radius: 3px;
|
display: flex;
|
||||||
border: 2px var(--nav-global-color-menu-bg) solid;
|
margin-bottom: var(--bwa-spacer-1);
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
height: 0.8rem;
|
|
||||||
position: absolute;
|
|
||||||
left: 1.5rem;
|
|
||||||
top: -0.133rem;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
width: 1rem;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-global .nav-global-nav-links>li {
|
|
||||||
border-bottom: 2px solid rgba(255, 255, 255, .05);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-nav-links>li:last-child {
|
.nav-global .nav-global-nav-links li:last-child {
|
||||||
border: none;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-global .nav-global-nav-links>li>a {
|
.nav-global .nav-global-nav-links li a {
|
||||||
padding-inline: 0;
|
border-radius: 6px;
|
||||||
|
color: var(--bwa-color-text);
|
||||||
|
display: inline-flex;
|
||||||
|
flex: 1;
|
||||||
|
line-height: initial;
|
||||||
|
padding: var(--bwa-spacer-2) var(--bwa-spacer);
|
||||||
|
transition: background-color var(--bwa-transition-speed) var(--bwa-transition-timing-fast), color var(--bwa-transition-speed) var(--bwa-transition-timing-fast);
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.nav-global .nav-global-nav-links li a:hover,
|
||||||
|
.nav-global .nav-global-nav-links li a.nav-global-link-active {
|
||||||
|
background-color: var(--bwa-color-accent-bg);
|
||||||
|
color: var(--bwa-color-accent);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-global .nav-global-nav-links li a.nav-global-link-active {
|
||||||
|
font-variation-settings: 'wght' 700;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Site-specific tweaks. */
|
||||||
|
/* Make sure to start every line with ".nav-global"
|
||||||
|
* so changes affect the developer navbar only. */
|
||||||
|
|
||||||
|
/* Limit navbar width on large screens (optional). */
|
||||||
|
/*
|
||||||
|
@media (min-width: 1380px) { // grid breakpoint 'xl'
|
||||||
|
.nav-global .nav-global-container {
|
||||||
|
max-width: var(--container-width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="nav-global">
|
<div class="nav-global">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user