nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: fix household management dark card surfaces

Browse Source
This commit is contained in:
Nico 2026-03-30 23:57:35 -07:00
parent ca0b4897cb
commit d31fb6c79f
1 changed files with 63 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/styles/components/manage/ManageHousehold.css
View File

@ -23,6 +23,14 @@
box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .manage-section,
body.dark-mode .manage-section {
background:
linear-gradient(180deg, rgba(26, 37, 52, 0.98), rgba(18, 27, 40, 0.94)),
var(--card-bg);
border-color: var(--color-border-medium);
}
.manage-section-header {
display: flex;
align-items: flex-start;
@ -116,6 +124,12 @@
color: var(--text-primary);
}
[data-theme="dark"] .edit-name-form input,
body.dark-mode .edit-name-form input {
background: rgba(12, 19, 30, 0.92);
border-color: var(--color-border-medium);
}
/* Invite Code Section */
.invite-actions {
display: flex;
@ -133,6 +147,12 @@
background: rgba(255, 255, 255, 1);
}
[data-theme="dark"] .invite-code-panel,
body.dark-mode .invite-code-panel {
background: rgba(12, 19, 30, 0.9);
border-color: var(--color-border-medium);
}
.invite-code-copy {
display: flex;
flex-direction: column;
@ -165,6 +185,12 @@
letter-spacing: 0.04em;
}
[data-theme="dark"] .invite-code,
body.dark-mode .invite-code {
background: rgba(8, 14, 24, 0.95);
border-color: var(--color-border-medium);
}
.invite-action-group {
display: flex;
flex-wrap: wrap;
@ -208,6 +234,12 @@
color: var(--text-primary);
}
[data-theme="dark"] .invite-controls select,
body.dark-mode .invite-controls select {
background: rgba(12, 19, 30, 0.92);
border-color: var(--color-border-medium);
}
.invite-links-list {
display: flex;
flex-direction: column;
@ -225,6 +257,12 @@
background: rgba(255, 255, 255, 1);
}
[data-theme="dark"] .invite-link-card,
body.dark-mode .invite-link-card {
background: rgba(12, 19, 30, 0.9);
border-color: var(--color-border-medium);
}
.invite-link-main {
min-width: 0;
}
@ -273,6 +311,12 @@
color: var(--color-gray-700);
}
[data-theme="dark"] .invite-status-badge.is-used,
body.dark-mode .invite-status-badge.is-used {
background: rgba(100, 116, 139, 0.22);
color: #d9e2ef;
}
.invite-status-badge.is-revoked {
background: var(--danger-light);
color: var(--danger);
@ -309,12 +353,23 @@
transition: all 0.2s;
}
[data-theme="dark"] .member-card,
body.dark-mode .member-card {
background: rgba(12, 19, 30, 0.9);
border-color: var(--color-border-medium);
}
.member-card:hover {
background: var(--card-hover);
border-color: var(--primary);
transform: translateY(-1px);
}
[data-theme="dark"] .member-card:hover,
body.dark-mode .member-card:hover {
background: rgba(20, 32, 48, 0.98);
}
.member-avatar {
width: 2.6rem;
height: 2.6rem;
@ -406,6 +461,14 @@
var(--card-bg);
}
[data-theme="dark"] .danger-zone,
body.dark-mode .danger-zone {
background:
linear-gradient(180deg, rgba(70, 26, 32, 0.92), rgba(28, 14, 19, 0.94)),
var(--card-bg);
border-color: color-mix(in srgb, var(--danger) 42%, transparent);
}
.danger-zone h2,
.danger-zone .manage-section-eyebrow {
color: var(--danger);