0.2.69 - Homepage loading improvements pass
This commit is contained in:
ponzischeme89
+69
-80
@@ -208,18 +208,17 @@ a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.topbar-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 4px 6px;
|
||||
border: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
flex: 0 0 38px;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
transition: background .16s ease, border-color .16s ease, color .16s ease;
|
||||
}
|
||||
.topbar-status:hover:not(:disabled),
|
||||
@@ -227,37 +226,32 @@ a {
|
||||
background: var(--surface-lift);
|
||||
}
|
||||
.topbar-status:disabled {
|
||||
cursor: wait;
|
||||
opacity: .65;
|
||||
cursor: default;
|
||||
opacity: 1;
|
||||
}
|
||||
.topbar-status .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--quiet);
|
||||
flex: 0 0 8px;
|
||||
box-shadow: 0 0 0 3px rgba(125, 133, 144, .12);
|
||||
}
|
||||
.topbar-status[data-tone="ok"] .dot {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 4px var(--accent-wash), 0 0 12px rgba(86, 211, 100, .34);
|
||||
background: var(--accent-ink);
|
||||
box-shadow: 0 0 0 3px var(--accent-wash), 0 0 9px rgba(86, 211, 100, .28);
|
||||
}
|
||||
.topbar-status[data-tone="bad"] .dot {
|
||||
background: var(--danger);
|
||||
}
|
||||
.topbar-status b {
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.topbar-status span {
|
||||
font-size: 11.5px;
|
||||
color: var(--quiet);
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 0 0 3px var(--danger-wash);
|
||||
}
|
||||
|
||||
/* The account is an identity first and an exit second. Keeping sign-out in this menu
|
||||
prevents an unexplained door icon from competing with the operational controls. */
|
||||
.account-menu {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.account-trigger {
|
||||
@@ -360,8 +354,7 @@ a {
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.topbar-version,
|
||||
.topbar-status span {
|
||||
.topbar-version {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -419,9 +412,10 @@ a {
|
||||
.omni-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
width: min(520px, 94vw);
|
||||
max-height: min(60vh, 520px);
|
||||
right: auto;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-height: min(50vh, 420px);
|
||||
overflow-y: auto;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--line);
|
||||
@@ -475,13 +469,16 @@ a {
|
||||
|
||||
.bell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
}
|
||||
.bell-button {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface);
|
||||
@@ -1165,20 +1162,8 @@ table {
|
||||
max-width: 640px;
|
||||
min-width: 0;
|
||||
}
|
||||
.omni-input {
|
||||
height: 36px;
|
||||
}
|
||||
.omni-panel {
|
||||
position: fixed;
|
||||
top: calc(var(--top) + 6px);
|
||||
right: 12px;
|
||||
left: 12px;
|
||||
width: auto;
|
||||
max-height: calc(100dvh - var(--top) - 18px);
|
||||
}
|
||||
.omni-key,
|
||||
.topbar-version,
|
||||
.topbar-status span {
|
||||
.topbar-version {
|
||||
display: none;
|
||||
}
|
||||
.topbar-tools {
|
||||
@@ -1190,21 +1175,19 @@ table {
|
||||
height: 40px;
|
||||
}
|
||||
.topbar-status {
|
||||
width: 40px;
|
||||
flex-basis: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
}
|
||||
.topbar-status[data-tone="ok"] {
|
||||
border-color: rgba(86, 211, 100, .38);
|
||||
background: var(--accent-wash);
|
||||
color: var(--accent-ink);
|
||||
}
|
||||
.topbar-status[data-tone="bad"] {
|
||||
border-color: rgba(229, 83, 75, .34);
|
||||
background: var(--danger-wash);
|
||||
color: var(--danger-ink);
|
||||
.omni-input,
|
||||
.bell,
|
||||
.bell-button,
|
||||
.account-menu,
|
||||
.account-trigger {
|
||||
height: 40px;
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
@@ -1236,8 +1219,7 @@ table {
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.brand-word,
|
||||
.topbar-status b {
|
||||
.brand-word {
|
||||
display: none;
|
||||
}
|
||||
.topbar-status {
|
||||
@@ -1266,40 +1248,43 @@ table {
|
||||
}
|
||||
}
|
||||
|
||||
/* A phone gets two deliberate rows: navigation and live controls above, search below.
|
||||
Compressing all six controls into one line made the search unusable at exactly the
|
||||
widths where it is the quickest way around a long navigation drawer. */
|
||||
/* A phone keeps every global control on one row. Search is the only flexible item: the
|
||||
navigation and identity controls retain useful targets while the field gives up width
|
||||
before the header can wrap. Its relative wrapper still anchors the results directly
|
||||
beneath the field at exactly the width available here. */
|
||||
@media (max-width: 680px) {
|
||||
:root {
|
||||
--top: calc(108px + var(--safe-top));
|
||||
--top: calc(60px + var(--safe-top));
|
||||
}
|
||||
.topbar {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: calc(var(--safe-top) + 8px) max(12px, var(--safe-right)) 8px max(12px, var(--safe-left));
|
||||
flex-wrap: nowrap;
|
||||
gap: clamp(4px, 1.5vw, 8px);
|
||||
padding: calc(var(--safe-top) + 8px) max(8px, var(--safe-right)) 8px max(8px, var(--safe-left));
|
||||
}
|
||||
.rail-toggle { order: 1; }
|
||||
.topbar-brand { order: 2; }
|
||||
.topbar-status {
|
||||
order: 3;
|
||||
margin-left: auto;
|
||||
.topbar-brand {
|
||||
order: 2;
|
||||
height: 40px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.bell { order: 4; }
|
||||
.account-menu { order: 5; }
|
||||
.topbar .omni {
|
||||
order: 6;
|
||||
flex: 1 0 100%;
|
||||
order: 3;
|
||||
flex: 1 1 96px;
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
.brand-mark {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-basis: 32px;
|
||||
.topbar-status {
|
||||
order: 4;
|
||||
margin-left: 0;
|
||||
}
|
||||
.omni-input {
|
||||
height: 38px;
|
||||
.bell { order: 5; }
|
||||
.account-menu { order: 6; }
|
||||
.brand-mark {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
flex-basis: 30px;
|
||||
}
|
||||
.account-panel,
|
||||
.bell-panel {
|
||||
@@ -3000,8 +2985,12 @@ details summary {
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
}
|
||||
.topbar-status b {
|
||||
margin-left: 1px;
|
||||
.topbar .bell,
|
||||
.topbar .account-menu {
|
||||
height: 44px;
|
||||
}
|
||||
.topbar .omni-input {
|
||||
height: 44px;
|
||||
}
|
||||
.rail a {
|
||||
min-height: 46px;
|
||||
|
||||
Reference in New Issue
Block a user