0.2.68
This commit is contained in:
ponzischeme89
+202
-3
@@ -220,6 +220,7 @@ a {
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
transition: background .16s ease, border-color .16s ease, color .16s ease;
|
||||
}
|
||||
.topbar-status:hover:not(:disabled),
|
||||
.topbar-status:focus-visible {
|
||||
@@ -238,6 +239,7 @@ a {
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.topbar-status[data-tone="bad"] .dot {
|
||||
background: var(--danger);
|
||||
@@ -252,6 +254,111 @@ a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.account-trigger {
|
||||
max-width: 190px;
|
||||
height: 38px;
|
||||
padding: 0 9px 0 5px;
|
||||
border-color: var(--line);
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
}
|
||||
.account-trigger:hover:not(:disabled),
|
||||
.account-menu[data-open="true"] .account-trigger {
|
||||
border-color: rgba(86, 211, 100, .5);
|
||||
background: var(--surface-hi);
|
||||
color: var(--text);
|
||||
}
|
||||
.account-avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
flex: 0 0 27px;
|
||||
border: 1px solid rgba(86, 211, 100, .36);
|
||||
border-radius: 50%;
|
||||
background: var(--accent-wash);
|
||||
color: var(--accent-ink);
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
}
|
||||
.account-name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.account-caret {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transition: transform .16s ease;
|
||||
}
|
||||
.account-menu[data-open="true"] .account-caret {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.account-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
width: min(280px, calc(100vw - 24px));
|
||||
padding: 7px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
|
||||
z-index: 40;
|
||||
}
|
||||
.account-identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
min-width: 0;
|
||||
padding: 9px 10px 12px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
.account-avatar-large {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex-basis: 34px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.account-identity span:last-child {
|
||||
min-width: 0;
|
||||
}
|
||||
.account-identity small,
|
||||
.account-identity b {
|
||||
display: block;
|
||||
}
|
||||
.account-identity small {
|
||||
color: var(--quiet);
|
||||
font-size: 11px;
|
||||
}
|
||||
.account-identity b {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.account-panel form {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.account-panel form button {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
}
|
||||
.account-panel form button:hover:not(:disabled) {
|
||||
background: var(--surface-hi);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.topbar-version,
|
||||
.topbar-status span {
|
||||
@@ -575,6 +682,7 @@ a {
|
||||
|
||||
.page {
|
||||
width: min(calc(100vw - var(--rail)), 1920px);
|
||||
min-width: 0;
|
||||
margin: var(--top) 0 0 calc(var(--rail) + max(0px, (100vw - var(--rail) - 1920px) / 2));
|
||||
padding: clamp(24px, 2.4vw, 44px) clamp(22px, 3vw, 56px) 80px;
|
||||
}
|
||||
@@ -1088,6 +1196,16 @@ table {
|
||||
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);
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
padding: clamp(24px, 3vw, 34px) max(24px, calc(var(--safe-right) + 10px)) max(64px, calc(var(--safe-bottom) + 36px)) max(24px, calc(var(--safe-left) + 10px));
|
||||
@@ -1106,6 +1224,17 @@ table {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.account-trigger {
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
.account-name,
|
||||
.account-caret {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.brand-word,
|
||||
.topbar-status b {
|
||||
@@ -1136,6 +1265,57 @@ table {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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. */
|
||||
@media (max-width: 680px) {
|
||||
:root {
|
||||
--top: calc(108px + 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));
|
||||
}
|
||||
.rail-toggle { order: 1; }
|
||||
.topbar-brand { order: 2; }
|
||||
.topbar-status {
|
||||
order: 3;
|
||||
margin-left: auto;
|
||||
}
|
||||
.bell { order: 4; }
|
||||
.account-menu { order: 5; }
|
||||
.topbar .omni {
|
||||
order: 6;
|
||||
flex: 1 0 100%;
|
||||
max-width: none;
|
||||
}
|
||||
.brand-mark {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-basis: 32px;
|
||||
}
|
||||
.omni-input {
|
||||
height: 38px;
|
||||
}
|
||||
.account-panel,
|
||||
.bell-panel {
|
||||
position: fixed;
|
||||
top: calc(var(--top) + 8px);
|
||||
}
|
||||
.account-panel {
|
||||
right: max(12px, var(--safe-right));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 370px) {
|
||||
.tiles {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
th {
|
||||
padding: 0 12px 8px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
@@ -2610,7 +2790,7 @@ details summary {
|
||||
/* iPad is an operating surface, not a large phone. Cards gain enough separation to be
|
||||
parsed at arm's length, but data remains dense and two-column where portrait width can
|
||||
genuinely support it. */
|
||||
@media (min-width: 821px) and (max-width: 1400px) {
|
||||
@media (pointer: coarse) and (min-width: 821px) and (max-width: 1400px) {
|
||||
.page-head {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@@ -2718,7 +2898,7 @@ details summary {
|
||||
}
|
||||
.card-head-actions {
|
||||
width: 100%;
|
||||
margin-left: 41px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.card-foot > button,
|
||||
.card-foot > .btn {
|
||||
@@ -2815,7 +2995,7 @@ details summary {
|
||||
.topbar .rail-toggle,
|
||||
.topbar .bell-button,
|
||||
.topbar .topbar-status,
|
||||
.topbar form button {
|
||||
.topbar .account-trigger {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
@@ -2885,6 +3065,25 @@ details summary {
|
||||
}
|
||||
}
|
||||
|
||||
/* Short laptop screens benefit from vertical density, while retaining the same readable
|
||||
widths and full-size pointer targets. */
|
||||
@media (pointer: fine) and (min-width: 821px) and (max-height: 800px) {
|
||||
.page {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
.page-head {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.card-head {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
tbody tr:hover td,
|
||||
.list-row:hover,
|
||||
|
||||
Reference in New Issue
Block a user