benmichael/gods-eye-view
1
0 Fork 0
mirror of https://github.com/bilawalsidhu/gods-eye-view.git synced 2026-11-05 10:53:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(cockpit): share one header frame between the Cockpit cards

Browse Source 
The Contact and briefing cards' headers repeated the same frame: the title
grid over a hairline, the accent kicker and the square action buttons. It
lives in cockpit-card-header, cockpit-card-kicker and cockpit-card-actions
now, beside each card's own classes, which keep only their spacing and
sizes; the cyber theme targets the shared classes. The computed styles of
every header element are unchanged in the default and cyber themes,
expanded and collapsed.
This commit is contained in:
Sameh Khamis committed 2026-11-01 13:13:55 -08:00
1 parent 2e43bd9985
commit f269f5be4f
5 files changed
+42 -60
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/ui/styles/cockpit.css
+33 -49
View File
@@ -969,23 +969,50 @@ body.cockpit-mode #view-switcher button {
.cockpit-context-window[data-state='lost'] {
border-top-color: rgba(213, 168, 99, 0.72);
}
.cockpit-context-header {
/* The Cockpit cards' headers (Contact, the briefing) share their frame: a
title column over a hairline, a kicker in the accent, and a row of square
actions. Each card sets only its spacing and sizes. */
.cockpit-card-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 5px 10px;
padding: 0 5px 7px;
border-bottom: 1px solid
color-mix(in srgb, var(--cockpit-accent) 22%, transparent);
}
.cockpit-context-header > div {
.cockpit-card-header > div {
display: grid;
gap: 2px;
}
.cockpit-context-kicker {
.cockpit-card-kicker {
color: var(--cockpit-accent);
font-size: 8px;
font-weight: 700;
}
.cockpit-card-actions {
display: flex;
}
.cockpit-card-actions button {
display: grid;
height: 24px;
place-items: center;
padding: 0;
border: 1px solid color-mix(in srgb, var(--cockpit-accent) 30%, transparent);
border-radius: 5px;
background: rgba(0, 7, 12, 0.72);
color: color-mix(in srgb, var(--cockpit-accent) 82%, white);
cursor: pointer;
}
.cockpit-card-actions button:hover,
.cockpit-card-actions button:focus-visible {
border-color: var(--cockpit-accent);
color: #fff;
outline: none;
}
.cockpit-context-header {
gap: 5px 10px;
padding: 0 5px 7px;
}
.cockpit-context-kicker {
font-size: 8px;
letter-spacing: 0.2em;
}
#cockpit-context-subject {
@@ -1041,26 +1068,10 @@ body.cockpit-mode #view-switcher button {
outline: none;
}
.cockpit-context-actions {
display: flex;
gap: 4px;
}
.cockpit-context-actions button {
display: grid;
width: 28px;
height: 24px;
place-items: center;
padding: 0;
border: 1px solid color-mix(in srgb, var(--cockpit-accent) 30%, transparent);
border-radius: 5px;
background: rgba(0, 7, 12, 0.72);
color: color-mix(in srgb, var(--cockpit-accent) 82%, white);
cursor: pointer;
}
.cockpit-context-actions button:hover,
.cockpit-context-actions button:focus-visible {
border-color: var(--cockpit-accent);
color: #fff;
outline: none;
}
.cockpit-context-actions button:disabled {
border-color: rgba(244, 251, 255, 0.1);
@@ -1500,17 +1511,8 @@ body.cockpit-mode #view-switcher button {
width: 100%;
}
.cockpit-signal-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 0 4px 7px 8px;
border-bottom: 1px solid
color-mix(in srgb, var(--cockpit-accent) 22%, transparent);
}
.cockpit-signal-header > div {
display: grid;
gap: 2px;
}
html:not([lang='en']) .cockpit-signal-header > div {
min-width: 0;
@@ -1526,9 +1528,7 @@ html:not([lang='en']) .cockpit-signal-kicker {
letter-spacing: 0.1em;
}
.cockpit-signal-kicker {
color: var(--cockpit-accent);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.18em;
}
.cockpit-signal-kicker i {
@@ -1542,7 +1542,6 @@ html:not([lang='en']) .cockpit-signal-kicker {
animation: cockpit-live 1.6s ease-in-out infinite;
}
.cockpit-brief-actions {
display: flex;
align-items: center;
gap: 3px;
}
@@ -1552,22 +1551,7 @@ html:not([lang='en']) .cockpit-brief-actions > * {
flex-shrink: 0;
}
.cockpit-brief-actions button {
display: grid;
width: 23px;
height: 24px;
place-items: center;
padding: 0;
border: 1px solid color-mix(in srgb, var(--cockpit-accent) 30%, transparent);
border-radius: 5px;
background: rgba(0, 7, 12, 0.72);
color: color-mix(in srgb, var(--cockpit-accent) 82%, white);
cursor: pointer;
}
.cockpit-brief-actions button:hover,
.cockpit-brief-actions button:focus-visible {
border-color: var(--cockpit-accent);
color: #fff;
outline: none;
}
.cockpit-brief-actions .material-symbols-outlined {
font-size: 14px;