|
|
@ -44,21 +44,21 @@ |
|
|
@media (prefers-color-scheme: dark) { |
|
|
@media (prefers-color-scheme: dark) { |
|
|
:root { |
|
|
:root { |
|
|
/* Base colors */ |
|
|
/* Base colors */ |
|
|
--bg-color: #121212; |
|
|
--bg-color: #1e1e2e; |
|
|
--text-color: #e5e7eb; |
|
|
--text-color: #e5e7eb; |
|
|
|
|
|
|
|
|
/* Dashboard items */ |
|
|
/* Dashboard items */ |
|
|
--dashboard-bg: #1e1e2e; |
|
|
--dashboard-bg: #2e2e42; |
|
|
--dashboard-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); |
|
|
--dashboard-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); |
|
|
--dashboard-header-color: #e2e8f0; |
|
|
--dashboard-header-color: #e2e8f0; |
|
|
|
|
|
|
|
|
/* Content panels */ |
|
|
/* Content panels */ |
|
|
--content-bg: #2a2a40; |
|
|
--content-bg: #3b3b53; |
|
|
--content-border: none; |
|
|
--content-border: none; |
|
|
--content-text: white; |
|
|
--content-text: white; |
|
|
|
|
|
|
|
|
/* Form elements */ |
|
|
/* Form elements */ |
|
|
--input-bg: #374151; |
|
|
--input-bg: #3b3b53; |
|
|
--input-border: 1px solid #4b5563; |
|
|
--input-border: 1px solid #4b5563; |
|
|
--input-text: white; |
|
|
--input-text: white; |
|
|
--label-color: #e2e8f0; |
|
|
--label-color: #e2e8f0; |
|
|
@ -290,7 +290,6 @@ html { |
|
|
margin-top: 1rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* Button styles */ |
|
|
|
|
|
.btn-primary { |
|
|
.btn-primary { |
|
|
background-color: var(--btn-primary-bg); |
|
|
background-color: var(--btn-primary-bg); |
|
|
color: white; |
|
|
color: white; |
|
|
@ -306,69 +305,6 @@ html { |
|
|
background-color: var(--btn-primary-hover); |
|
|
background-color: var(--btn-primary-hover); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.warning-button { |
|
|
|
|
|
background-color: var(--btn-warning-bg); |
|
|
|
|
|
color: white; |
|
|
|
|
|
border: none; |
|
|
|
|
|
padding: 0.5rem 1rem; |
|
|
|
|
|
border-radius: 0.25rem; |
|
|
|
|
|
font-size: 0.875rem; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
transition: background-color 0.2s; |
|
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.warning-button:hover { |
|
|
|
|
|
background-color: var(--btn-warning-hover); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.warning-button:disabled { |
|
|
|
|
|
background-color: var(--btn-disabled); |
|
|
|
|
|
cursor: not-allowed; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.caution-button { |
|
|
|
|
|
background-color: var(--btn-caution-bg); |
|
|
|
|
|
color: #1f2937; |
|
|
|
|
|
border: none; |
|
|
|
|
|
padding: 0.5rem 1rem; |
|
|
|
|
|
border-radius: 0.25rem; |
|
|
|
|
|
font-size: 0.875rem; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
transition: background-color 0.2s; |
|
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.caution-button:hover { |
|
|
|
|
|
background-color: var(--btn-caution-hover); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.caution-button:disabled { |
|
|
|
|
|
background-color: var(--btn-disabled); |
|
|
|
|
|
cursor: not-allowed; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.success-button { |
|
|
|
|
|
background-color: var(--btn-success-bg); |
|
|
|
|
|
color: white; |
|
|
|
|
|
border: none; |
|
|
|
|
|
padding: 0.5rem 1rem; |
|
|
|
|
|
border-radius: 0.25rem; |
|
|
|
|
|
font-size: 0.875rem; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
transition: background-color 0.2s; |
|
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.success-button:hover { |
|
|
|
|
|
background-color: var(--btn-success-hover); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.success-button:disabled { |
|
|
|
|
|
background-color: var(--btn-disabled); |
|
|
|
|
|
cursor: not-allowed; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.forgot-password { |
|
|
.forgot-password { |
|
|
color: var(--btn-primary-bg); |
|
|
color: var(--btn-primary-bg); |
|
|
font-size: 0.875rem; |
|
|
font-size: 0.875rem; |
|
|
@ -649,3 +585,67 @@ html { |
|
|
.highlight-change { |
|
|
.highlight-change { |
|
|
animation: highlightBackground 2s ease-in-out; |
|
|
animation: highlightBackground 2s ease-in-out; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Button styles */ |
|
|
|
|
|
.warning-button { |
|
|
|
|
|
background-color: var(--btn-warning-bg); |
|
|
|
|
|
color: white; |
|
|
|
|
|
border: none; |
|
|
|
|
|
padding: 0.5rem 1rem; |
|
|
|
|
|
border-radius: 0.25rem; |
|
|
|
|
|
font-size: 0.875rem; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
transition: background-color 0.2s; |
|
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.warning-button:hover { |
|
|
|
|
|
background-color: var(--btn-warning-hover); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.warning-button:disabled { |
|
|
|
|
|
background-color: var(--btn-disabled); |
|
|
|
|
|
cursor: not-allowed; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.caution-button { |
|
|
|
|
|
background-color: var(--btn-caution-bg); |
|
|
|
|
|
color: #1f2937; |
|
|
|
|
|
border: none; |
|
|
|
|
|
padding: 0.5rem 1rem; |
|
|
|
|
|
border-radius: 0.25rem; |
|
|
|
|
|
font-size: 0.875rem; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
transition: background-color 0.2s; |
|
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.caution-button:hover { |
|
|
|
|
|
background-color: var(--btn-caution-hover); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.caution-button:disabled { |
|
|
|
|
|
background-color: var(--btn-disabled); |
|
|
|
|
|
cursor: not-allowed; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.success-button { |
|
|
|
|
|
background-color: var(--btn-success-bg); |
|
|
|
|
|
color: white; |
|
|
|
|
|
border: none; |
|
|
|
|
|
padding: 0.5rem 1rem; |
|
|
|
|
|
border-radius: 0.25rem; |
|
|
|
|
|
font-size: 0.875rem; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
transition: background-color 0.2s; |
|
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.success-button:hover { |
|
|
|
|
|
background-color: var(--btn-success-hover); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.success-button:disabled { |
|
|
|
|
|
background-color: var(--btn-disabled); |
|
|
|
|
|
cursor: not-allowed; |
|
|
|
|
|
} |