Refine global topbar integration (#7)
## Summary - capture the post-review topbar refinements and implementation plan - simplify the topbar brand to one SHADOWS OVER WESTGATE lockup - remove the redundant desktop Forums dropdown and its custom panel handling - give topbar dropdown and drawer surfaces an opaque local panel base ## Tests - node --test tests/*.test.js Reviewed-on: #7 Reviewed-by: xtul <mpiasecki720@protonmail.com> Co-authored-by: vickydotbat <vickydotbat@tutamail.com> Co-committed-by: vickydotbat <vickydotbat@tutamail.com>
This commit was merged in pull request #7.
This commit is contained in:
+14
-75
@@ -1,3 +1,11 @@
|
||||
$wg-topbar-panel-bg: linear-gradient(
|
||||
100deg,
|
||||
#2a1222 0%,
|
||||
#19161f 23%,
|
||||
#121017 62%,
|
||||
#0d0c11 100%
|
||||
);
|
||||
|
||||
.wg-layout-container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -17,7 +25,7 @@
|
||||
|
||||
.wg-topbar__inner {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto auto;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
width: min(100%, 1420px);
|
||||
@@ -60,35 +68,16 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wg-topbar__brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wg-topbar__brand-name {
|
||||
max-width: 22ch;
|
||||
overflow: hidden;
|
||||
color: var(--wg-text);
|
||||
font-family: var(--wg-font-display);
|
||||
font-size: 0.96rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wg-topbar__brand-subtitle {
|
||||
margin-top: 0.28rem;
|
||||
color: var(--wg-gold-soft);
|
||||
font-family: var(--wg-font-code);
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wg-topbar__nav {
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -104,8 +93,7 @@
|
||||
}
|
||||
|
||||
.wg-topbar .nav-link,
|
||||
.wg-topbar__nav-link,
|
||||
.wg-topbar__forums-toggle {
|
||||
.wg-topbar__nav-link {
|
||||
min-height: 2.35rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
@@ -122,8 +110,6 @@
|
||||
.wg-topbar .nav-link:focus,
|
||||
.wg-topbar__nav-link:hover,
|
||||
.wg-topbar__nav-link:focus,
|
||||
.wg-topbar__forums-toggle:hover,
|
||||
.wg-topbar__forums-toggle:focus,
|
||||
.wg-topbar .nav-item.active > .nav-link,
|
||||
.wg-topbar .nav-item.active > .navigation-link {
|
||||
color: #f3ede4;
|
||||
@@ -132,16 +118,6 @@
|
||||
box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
|
||||
}
|
||||
|
||||
.wg-topbar__forums {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wg-topbar__forums-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.wg-topbar__utilities {
|
||||
justify-self: end;
|
||||
}
|
||||
@@ -187,8 +163,7 @@
|
||||
.wg-topbar .notifications-dropdown,
|
||||
.wg-topbar .chats-dropdown,
|
||||
.wg-topbar .drafts-dropdown,
|
||||
.wg-topbar .user-dropdown,
|
||||
.wg-topbar__panel {
|
||||
.wg-topbar .user-dropdown {
|
||||
min-width: min(22rem, calc(100vw - 1.5rem));
|
||||
max-width: calc(100vw - 1.5rem);
|
||||
border: 1px solid rgba(194, 163, 90, 0.22) !important;
|
||||
@@ -196,7 +171,7 @@
|
||||
color: var(--wg-text-soft) !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 244, 221, 0.028), transparent 36%),
|
||||
var(--wg-velvet-panel) !important;
|
||||
$wg-topbar-panel-bg !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 244, 221, 0.035),
|
||||
0 18px 42px rgba(0, 0, 0, 0.42) !important;
|
||||
@@ -258,36 +233,6 @@
|
||||
background: rgba(194, 163, 90, 0.1);
|
||||
}
|
||||
|
||||
.wg-topbar__panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.45rem);
|
||||
right: 0;
|
||||
display: none;
|
||||
padding: 0.42rem;
|
||||
}
|
||||
|
||||
.wg-topbar__panel.is-open {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.wg-topbar__panel--forums a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2.25rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.35rem 0.55rem;
|
||||
color: var(--wg-text-soft);
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wg-topbar__panel--forums a:hover,
|
||||
.wg-topbar__panel--forums a:focus {
|
||||
color: var(--wg-text);
|
||||
background: rgba(194, 163, 90, 0.08);
|
||||
}
|
||||
|
||||
.wg-topbar__burger {
|
||||
display: none;
|
||||
align-items: center;
|
||||
@@ -310,7 +255,8 @@
|
||||
display: none;
|
||||
border-top: 1px solid rgba(194, 163, 90, 0.12);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(42, 18, 34, 0.98), rgba(12, 10, 15, 0.99));
|
||||
linear-gradient(180deg, rgba(255, 244, 221, 0.025), transparent 38%),
|
||||
$wg-topbar-panel-bg;
|
||||
}
|
||||
|
||||
.wg-topbar.is-drawer-open .wg-topbar__drawer {
|
||||
@@ -389,12 +335,6 @@
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.wg-topbar__brand-name {
|
||||
max-width: 16ch;
|
||||
}
|
||||
|
||||
.wg-topbar__brand-subtitle,
|
||||
.wg-topbar__forums,
|
||||
.wg-topbar__utilities {
|
||||
display: none;
|
||||
}
|
||||
@@ -411,7 +351,6 @@
|
||||
}
|
||||
|
||||
.wg-topbar__brand-name {
|
||||
max-width: 13ch;
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user