revert: rollback Fluent UI and Blazor homepage to last successful state (3be3794)
This commit is contained in:
+160
-108
@@ -221,111 +221,126 @@ textarea:focus-visible {
|
||||
Login Page Styles
|
||||
============================================================================ */
|
||||
|
||||
.admin-login-page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(200, 157, 110, 0.18), transparent 36%),
|
||||
radial-gradient(circle at bottom right, rgba(46, 92, 78, 0.12), transparent 32%),
|
||||
linear-gradient(180deg, #f9f7f3 0%, #f3ede2 100%);
|
||||
}
|
||||
|
||||
html.admin-login-route body {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(200, 157, 110, 0.18), transparent 36%),
|
||||
radial-gradient(circle at bottom right, rgba(46, 92, 78, 0.12), transparent 32%),
|
||||
linear-gradient(180deg, #f9f7f3 0%, #f3ede2 100%);
|
||||
}
|
||||
|
||||
.admin-login-card {
|
||||
width: min(440px, 100%);
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.admin-login-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.admin-brand-mark {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.admin-brand-title {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-text);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.admin-brand-subtitle {
|
||||
margin-top: 2px;
|
||||
color: var(--color-text-light);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.admin-login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.admin-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.admin-field-label {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.admin-login-remember {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.admin-inline-alert {
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(198, 40, 40, 0.2);
|
||||
background: rgba(198, 40, 40, 0.08);
|
||||
color: var(--color-danger);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.admin-login-submit {
|
||||
.admin-login-page.mud-container {
|
||||
width: 100%;
|
||||
margin-top: 6px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.admin-login-submit:disabled {
|
||||
opacity: 0.7;
|
||||
.admin-login-page.mud-container-maxwidth-small {
|
||||
max-width: 480px !important;
|
||||
}
|
||||
|
||||
.admin-login-page .mud-paper {
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: var(--space-8);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-paper.elevation-3 {
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-typography {
|
||||
color: var(--text-primary);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-typography--h4 {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--primary-color);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-typography--body1 {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.admin-login-page input[type="text"],
|
||||
.admin-login-page input[type="password"] {
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: inherit;
|
||||
font-size: var(--font-size-base);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.admin-login-page input[type="text"]:focus,
|
||||
.admin-login-page input[type="password"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px var(--primary-light);
|
||||
}
|
||||
|
||||
.admin-login-page label {
|
||||
display: block;
|
||||
margin-bottom: var(--space-2);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.admin-login-page button {
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
margin-top: var(--space-4);
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-contrast);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.admin-login-page button:hover {
|
||||
background-color: var(--primary-dark);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.admin-login-page button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.admin-login-page button:disabled {
|
||||
background-color: var(--text-disabled);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.admin-login-page .mud-alert {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
.admin-login-page .mud-alert--error {
|
||||
background-color: var(--error-light);
|
||||
color: var(--error-dark);
|
||||
border-left-color: var(--error-color);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-alert--success {
|
||||
background-color: var(--success-light);
|
||||
color: var(--success-dark);
|
||||
border-left-color: var(--success-color);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-alert--info {
|
||||
background-color: var(--info-light);
|
||||
color: var(--info-dark);
|
||||
border-left-color: var(--info-color);
|
||||
}
|
||||
|
||||
/* Reconnect Modal */
|
||||
@@ -392,8 +407,7 @@ html.admin-login-route body {
|
||||
.admin-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
height: 100vh;
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
@@ -564,17 +578,12 @@ html.admin-login-route body {
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
padding: 12px;
|
||||
padding: 16px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-main {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Dashboard Page Styles
|
||||
============================================================================ */
|
||||
@@ -834,6 +843,11 @@ html.admin-login-route body {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.admin-table .mud-chip {
|
||||
font-size: 0.68rem;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.admin-table tbody a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
@@ -851,6 +865,16 @@ html.admin-login-route body {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.admin-table .mud-chip-small {
|
||||
height: 24px !important;
|
||||
font-size: var(--font-size-xs) !important;
|
||||
font-weight: var(--font-weight-medium);
|
||||
min-width: 60px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Loading States */
|
||||
.admin-skeleton {
|
||||
background: linear-gradient(90deg, var(--bg-overlay) 0%, var(--bg-overlay-strong) 50%, var(--bg-overlay) 100%);
|
||||
@@ -1246,6 +1270,15 @@ html.admin-login-route body {
|
||||
|
||||
/* Mobile S: <480px */
|
||||
@media (max-width: 479px) {
|
||||
.admin-login-page.mud-container-maxwidth-small {
|
||||
max-width: 100% !important;
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.admin-login-page .mud-typography--h4 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.admin-shell {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
@@ -1294,6 +1327,11 @@ html.admin-login-route body {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.admin-nav .mud-nav-link {
|
||||
min-width: 100px;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.admin-drawer-footer {
|
||||
display: none;
|
||||
}
|
||||
@@ -1355,6 +1393,10 @@ html.admin-login-route body {
|
||||
font-size: var(--font-size-base) !important;
|
||||
}
|
||||
|
||||
.admin-section-header .mud-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
@@ -1374,6 +1416,8 @@ html.admin-login-route body {
|
||||
}
|
||||
|
||||
/* Touch Target Sizing (WCAG 2.5.5) */
|
||||
.mud-button,
|
||||
.mud-icon-button,
|
||||
a,
|
||||
input,
|
||||
select,
|
||||
@@ -1578,6 +1622,10 @@ html.admin-login-route body {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.admin-footer-item .mud-icon {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Responsive Topbar */
|
||||
@media (max-width: 600px) {
|
||||
.admin-topbar-action {
|
||||
@@ -1588,4 +1636,8 @@ html.admin-login-route body {
|
||||
.admin-topbar-title {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.mud-toolbar > :last-child {
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user