First Production Push
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -176,11 +176,15 @@ export default function DeviceForm() {
|
||||
device_stats: stats,
|
||||
events_on: eventsOn,
|
||||
device_location_coordinates: locationCoordinates,
|
||||
device_melodies_all: [],
|
||||
device_melodies_favorites: [],
|
||||
user_list: [],
|
||||
websocket_url: websocketUrl,
|
||||
churchAssistantURL,
|
||||
// device_melodies_all, device_melodies_favorites, user_list are managed
|
||||
// elsewhere and must NOT be sent here to avoid overwriting them on edit
|
||||
...(!isEdit && {
|
||||
device_melodies_all: [],
|
||||
device_melodies_favorites: [],
|
||||
user_list: [],
|
||||
}),
|
||||
};
|
||||
|
||||
let deviceId = id;
|
||||
|
||||
@@ -468,13 +468,6 @@ export default function DeviceList() {
|
||||
className="flex gap-2"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
onClick={() => navigate(`/devices/${device.id}/edit`)}
|
||||
className="hover:opacity-80 text-xs cursor-pointer"
|
||||
style={{ color: "var(--text-link)" }}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteTarget(device)}
|
||||
className="hover:opacity-80 text-xs cursor-pointer"
|
||||
|
||||
@@ -171,6 +171,940 @@ input[type="range"]::-moz-range-thumb {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.device-tabs-wrap {
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
padding: 0 0 0.6rem;
|
||||
}
|
||||
|
||||
.device-tabs-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.device-tab-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device-tab-divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background-color: var(--border-primary);
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
|
||||
.device-tab-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border-radius: 0.45rem;
|
||||
padding: 0.4rem 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
--tab-tone: rgba(116, 184, 22, 0.24);
|
||||
--tab-glow: rgba(116, 184, 22, 0.24);
|
||||
}
|
||||
|
||||
.device-tab-btn:hover {
|
||||
color: var(--text-primary);
|
||||
background: color-mix(in srgb, var(--tab-tone) 42%, transparent);
|
||||
}
|
||||
|
||||
.device-tab-btn--active {
|
||||
background-color: color-mix(in srgb, var(--tab-tone) 70%, transparent);
|
||||
color: var(--tab-text);
|
||||
box-shadow: 0 0 18px var(--tab-glow);
|
||||
}
|
||||
|
||||
.device-tab-btn--dashboard {
|
||||
--tab-tone: rgba(136, 201, 94, 0.34);
|
||||
--tab-glow: rgba(136, 201, 94, 0.32);
|
||||
--tab-text: #baff53;
|
||||
}
|
||||
|
||||
.device-tab-btn--general {
|
||||
--tab-tone: rgba(92, 158, 189, 0.34);
|
||||
--tab-glow: rgba(92, 161, 189, 0.32);
|
||||
--tab-text: #7dd6ff;
|
||||
}
|
||||
|
||||
.device-tab-btn--bells {
|
||||
--tab-tone: rgba(210, 218, 226, 0.34);
|
||||
--tab-glow: rgba(230, 236, 243, 0.28);
|
||||
--tab-text: #f3f9ff;
|
||||
}
|
||||
|
||||
.device-tab-btn--clock {
|
||||
--tab-tone: rgba(233, 199, 99, 0.34);
|
||||
--tab-glow: rgba(233, 199, 99, 0.3);
|
||||
--tab-text: #ffde4d;
|
||||
}
|
||||
|
||||
.device-tab-btn--warranty {
|
||||
--tab-tone: rgba(177, 94, 194, 0.33);
|
||||
--tab-glow: rgba(182, 98, 185, 0.29);
|
||||
--tab-text: rgba(214, 131, 253, 0.99);
|
||||
}
|
||||
|
||||
.device-tab-btn--control {
|
||||
--tab-tone: rgba(216, 106, 106, 0.34);
|
||||
--tab-glow: rgba(215, 105, 105, 0.28);
|
||||
--tab-text: #ff5353;
|
||||
}
|
||||
|
||||
.device-tab-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.device-tab-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.device-tab-grid--wide > * {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.device-dashboard-hero {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.device-dashboard-main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 1.1rem 1.4rem;
|
||||
}
|
||||
|
||||
.device-dashboard-subsection {
|
||||
padding-bottom: 0.2rem;
|
||||
border-bottom: 1px solid var(--border-secondary);
|
||||
}
|
||||
|
||||
/* ── Dashboard Hero Card ──────────────────────────────────────────── */
|
||||
|
||||
/*
|
||||
* Layout strategy (desktop):
|
||||
* Card is a flex row. Each section is a flex-column with
|
||||
* justify-content: space-between and padding: 10px 0, so the 3 rows
|
||||
* are evenly distributed top-to-bottom regardless of content height.
|
||||
* The card itself has a fixed min-height so all columns are the same.
|
||||
* Row alignment across columns is achieved by keeping the same
|
||||
* flex rhythm — each section always has exactly 3 flex children.
|
||||
* Sections with 2 logical items use a "grow" wrapper for the last one.
|
||||
*/
|
||||
|
||||
/* ── Outer row: main card + notes card, same height ── */
|
||||
.db-hero-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.db-hero-row {
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Main info card ── */
|
||||
.db-hero-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 10px;
|
||||
padding: 1.75rem 1.5rem;
|
||||
gap: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.db-hero-card {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
padding: 1.3rem 0;
|
||||
min-height: 320px;
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Notes sidebar card ── */
|
||||
.db-notes-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 10px;
|
||||
padding: 3.30rem 2.5rem 2.5rem;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.db-notes-card {
|
||||
width: 22%;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Vertical/horizontal divider between columns */
|
||||
.db-hero-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--border-primary);
|
||||
opacity: 0.6;
|
||||
margin: 1.25rem 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.db-hero-divider {
|
||||
width: 1px;
|
||||
height: auto;
|
||||
margin: 1.9rem 0.8rem;
|
||||
align-self: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Photo column ── */
|
||||
.db-hero-photo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2.5rem 4.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.db-hero-photo {
|
||||
padding: 0rem 2rem 0rem 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulsing glow animations */
|
||||
@keyframes glow-pulse-online {
|
||||
0%, 100% { opacity: 0.55; transform: translateX(-52%) scale(1); }
|
||||
50% { opacity: 1; transform: translateX(-52%) scale(1.12); }
|
||||
}
|
||||
|
||||
@keyframes glow-pulse-offline {
|
||||
0%, 100% { opacity: 0.45; transform: translateX(-52%) scale(1); }
|
||||
50% { opacity: 0.9; transform: translateX(-52%) scale(1.1); }
|
||||
}
|
||||
|
||||
/* Shared glow base */
|
||||
.db-hero-photo--online::before,
|
||||
.db-hero-photo--offline::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
border-radius: 50%;
|
||||
bottom: 10%;
|
||||
left: 53%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Green pulsing glow when online */
|
||||
.db-hero-photo--online::before {
|
||||
background: radial-gradient(ellipse at center, rgba(169, 247, 95, 0.7) 10%, transparent 55%);
|
||||
animation: glow-pulse-online 2.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Orange-red pulsing glow when offline */
|
||||
.db-hero-photo--offline::before {
|
||||
background: radial-gradient(ellipse at center, rgba(255, 120, 50, 0.65) 10%, transparent 55%);
|
||||
animation: glow-pulse-offline 3.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.db-hero-photo__img {
|
||||
position: relative; /* sits above the ::before glow */
|
||||
max-width: 160px;
|
||||
max-height: 210px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* ── Info sections ── */
|
||||
/*
|
||||
* Each section is a 3-row grid with fixed row height.
|
||||
* Every child lands in one row slot — identical height regardless of content
|
||||
* (text, progress bar, etc.) — so rows align perfectly across all sections.
|
||||
*/
|
||||
.db-hero-section {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, var(--hero-row-h, 65px));
|
||||
align-items: center; /* centers content within each row */
|
||||
align-content: space-between; /* ← centers the whole row group vertically in the section */
|
||||
padding: 1rem 1rem;
|
||||
flex-shrink: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.db-hero-section {
|
||||
padding: 1.5rem 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section 3 – Subscription: wide enough for both fields on one line */
|
||||
.db-hero-section--sub {
|
||||
min-width: 400px;
|
||||
max-width: 560px;
|
||||
flex: 1 1 400px;
|
||||
}
|
||||
|
||||
/* Section 4 – Uptime/Issue */
|
||||
.db-hero-section--uptime {
|
||||
min-width: 240px;
|
||||
max-width: 340px;
|
||||
flex: 1 1 240px;
|
||||
}
|
||||
|
||||
.db-uptime-issue {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Row wrappers ── */
|
||||
.db-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Subscription row 1: Tier left, Warranty right */
|
||||
.db-sub-header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Warranty column: pushed right by space-between, but its own content left-aligned */
|
||||
.db-sub-header-row .db-info-field:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ── Info field (label + value pair) ── */
|
||||
.db-info-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.db-info-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.75;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* All values use identical styling — no special mono variant */
|
||||
.db-info-value {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
/* ── Progress bars ── */
|
||||
.db-progress-track {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
background-color: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
|
||||
overflow: hidden;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.db-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
|
||||
/* ── Issue text ── */
|
||||
.db-issue-source {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 500;
|
||||
color: #63B3ED;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.db-issue-body {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: var(--text-muted);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
line-clamp: 4;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Admin Notes ── */
|
||||
.db-notes-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.db-notes-edit-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
opacity: 0.85;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.db-notes-edit-btn:hover {
|
||||
opacity: 1;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.db-notes-body {
|
||||
font-size: 0.80rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
padding: 0rem 0.5rem 0rem 0rem;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
min-height: 0; /* important — lets flex item shrink below content size */
|
||||
}
|
||||
|
||||
.db-notes-body:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.db-notes-textarea {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
padding: 0.3rem 0.65rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--border-input);
|
||||
background-color: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
resize: vertical;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ── Section cards (used in all tabs) ── */
|
||||
.device-section-card {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 0.75rem;
|
||||
background-color: var(--bg-card);
|
||||
padding: 2.25rem 2.5rem 2.5rem;
|
||||
}
|
||||
|
||||
.device-section-card__title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.device-section-card__title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Pencil edit button on section card titles */
|
||||
.section-edit-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
transition: color 0.15s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.section-edit-btn:hover {
|
||||
color: #ecc94b;
|
||||
}
|
||||
|
||||
/* ── Toggle Switch ── */
|
||||
.toggle-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.toggle-switch__track {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.5rem;
|
||||
height: 1.35rem;
|
||||
border-radius: 9999px;
|
||||
background-color: #374151;
|
||||
transition: background-color 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle-switch__track[data-on="true"] {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
.toggle-switch__thumb {
|
||||
position: absolute;
|
||||
top: 0.175rem;
|
||||
left: 0.175rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.toggle-switch__track[data-on="true"] .toggle-switch__thumb {
|
||||
transform: translateX(1.15rem);
|
||||
}
|
||||
.toggle-switch__label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.toggle-switch__label[data-on="true"] {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Leaflet map isolation — prevents map z-indices bleeding over modals ── */
|
||||
.device-map-wrap {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* ── Bell master strip (between Overview and bell cards) ── */
|
||||
.bell-master-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0.6rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
background-color: var(--bg-card);
|
||||
}
|
||||
.bell-master-strip__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.bell-master-strip__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.bell-master-strip__warning-badge {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(99, 179, 237, 0.1);
|
||||
color: #63b3ed;
|
||||
border: 1px solid rgba(99, 179, 237, 0.3);
|
||||
}
|
||||
|
||||
/* ── Status text warning tone (for voided warranty) ── */
|
||||
.device-status-text--warning {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.device-subtitle {
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.device-hero-image-wrap {
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 0.75rem;
|
||||
background: radial-gradient(circle at 20% 20%, rgba(116, 184, 22, 0.18), rgba(17, 24, 39, 0.6));
|
||||
min-height: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.device-hero-image-wrap--square {
|
||||
min-height: 280px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.device-hero-image {
|
||||
max-height: 280px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.device-snapshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem 1.2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.device-progress-track {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background-color: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.device-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
transition: width 0.35s ease;
|
||||
}
|
||||
|
||||
.device-field-row {
|
||||
display: grid;
|
||||
gap: 0 1.1rem; /* no vertical gap — row height handles spacing */
|
||||
margin-bottom: 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Each field is a fixed-height slot — same as --hero-row-h so tabs match the dashboard rhythm */
|
||||
.device-field {
|
||||
height: var(--field-row-h, 75px);
|
||||
padding-right: 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.device-field-value {
|
||||
margin-top: 0.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.device-value-secondary {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.device-status-text {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.device-status-text--positive {
|
||||
color: var(--success-text);
|
||||
text-shadow: 0 0 14px rgba(116, 184, 22, 0.28);
|
||||
}
|
||||
|
||||
.device-status-text--negative {
|
||||
color: #ff9e4a;
|
||||
text-shadow: 0 0 14px rgba(243, 75, 75, 0.25);
|
||||
}
|
||||
|
||||
.device-status-text--info {
|
||||
color: var(--badge-blue-text);
|
||||
text-shadow: 0 0 16px rgba(99, 179, 237, 0.28);
|
||||
}
|
||||
|
||||
.device-status-text--muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.device-empty-cell {
|
||||
height: var(--field-row-h, 65px);
|
||||
}
|
||||
|
||||
.device-inline-facts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6rem;
|
||||
padding: 1rem 0px 0rem 0px;
|
||||
}
|
||||
|
||||
.device-inline-facts > div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.device-inline-facts__label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.74rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.device-inline-facts--overview .device-inline-facts__label::after {
|
||||
content: "|";
|
||||
color: var(--border-primary);
|
||||
opacity: 0.65;
|
||||
margin: 0 0.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.device-inline-facts--overview > div {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.device-location-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dashboard-bottom-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bell-mechanism-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.bell-mechanism-card {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
background: #1F2937;
|
||||
padding: 2.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 160px;
|
||||
gap: 0 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bell-mechanism-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -160px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 330px;
|
||||
height: 330px;
|
||||
opacity: 0.02;
|
||||
pointer-events: none;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
|
||||
}
|
||||
|
||||
/* Left column: title at top, info at bottom */
|
||||
.bell-mechanism-card__left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__left-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: #63B3ED;
|
||||
text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.25);
|
||||
margin: 0 0 0.5rem 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__divider {
|
||||
border: none;
|
||||
border-top: 1px solid #374151;
|
||||
opacity: 0.5;
|
||||
width: 179px;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__info p {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
color: #9CA3AF;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__highlight {
|
||||
font-weight: 700;
|
||||
color: #74B816;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__highlight--strikes {
|
||||
color: #F97316;
|
||||
}
|
||||
|
||||
/* Right column: striker image at top, cert at bottom */
|
||||
.bell-mechanism-card__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__right-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__striker-img {
|
||||
width: 150px;
|
||||
height: 110px;
|
||||
object-fit: contain;
|
||||
object-position: top right;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__cert {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
opacity: 0.52;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__cert-text {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__cert-brand {
|
||||
color: #63B3ED;
|
||||
}
|
||||
|
||||
.bell-mechanism-card__cert-badge {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.device-tab-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.device-dashboard-main-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.device-location-grid {
|
||||
grid-template-columns: 1.3fr 1fr;
|
||||
column-gap: 2.5rem;
|
||||
}
|
||||
|
||||
.device-snapshot-grid {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.dashboard-bottom-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
.device-tab-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.device-dashboard-main-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.dashboard-bottom-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.dashboard-bottom-grid__notes {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.dashboard-bottom-grid__users {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* File input */
|
||||
input[type="file"]::file-selector-button {
|
||||
background-color: var(--bg-card) !important;
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function Header() {
|
||||
}}
|
||||
>
|
||||
<h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>
|
||||
BellSystems - Control Panel
|
||||
BellSystems - Control Panel
|
||||
</h2>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
|
||||
Reference in New Issue
Block a user