snapshot: preserve app-wide alert standardization
This commit is contained in:
@@ -2,9 +2,7 @@ body { margin: 0; font-family: Arial, sans-serif; background: #f4f8ff; color: #0
|
||||
.shell { max-width: 1100px; margin: 0 auto; background: #fff; border: 1px solid #d8e3f0; border-radius: 14px; padding: 16px; }
|
||||
h1 { margin: 12px 0 6px; color: #000078; }
|
||||
.sub { margin: 0 0 12px; color: #54657c; }
|
||||
.flash, .msg { border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; border: 1px solid #d6e1ef; background: #f8fbff; color: #1f3a5f; }
|
||||
.flash.error, .msg.error { border-color: #fecaca; background: #fff1f2; color: #991b1b; }
|
||||
.flash.success { border-color: #bfe6c9; background: #edf9f1; color: #116634; }
|
||||
.app-messages { margin-bottom: 12px; }
|
||||
.card { border: 1px solid #d8e3f0; border-radius: 12px; background: #fbfdff; padding: 12px; margin-bottom: 14px; transition: border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
|
||||
.grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 10px; }
|
||||
label { display: block; margin-bottom: 4px; font-size: 12px; color: #334155; font-weight: 700; }
|
||||
|
||||
@@ -134,6 +134,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
.app-messages {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.app-alert {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #d6e1ef;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, rgba(248,251,255,0.98), rgba(241,247,255,0.94));
|
||||
color: #1f3a5f;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
|
||||
transition:
|
||||
border-color var(--motion-fast) var(--motion-ease),
|
||||
background-color var(--motion-fast) var(--motion-ease),
|
||||
box-shadow var(--motion-fast) var(--motion-ease);
|
||||
}
|
||||
|
||||
.app-alert-body {
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.app-alert-success {
|
||||
border-color: #bfe6c9;
|
||||
background: linear-gradient(180deg, #f3fcf6, #ecf9f0);
|
||||
color: #116634;
|
||||
}
|
||||
|
||||
.app-alert-warning {
|
||||
border-color: #f3d9a7;
|
||||
background: linear-gradient(180deg, #fffaf0, #fff4dd);
|
||||
color: #8a5a00;
|
||||
}
|
||||
|
||||
.app-alert-error {
|
||||
border-color: #f0c8c8;
|
||||
background: linear-gradient(180deg, #fff7f7, #fff1f1);
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.app-alert-info,
|
||||
.app-alert-debug {
|
||||
border-color: #d6e1ef;
|
||||
background: linear-gradient(180deg, rgba(248,251,255,0.98), rgba(241,247,255,0.94));
|
||||
color: #1f3a5f;
|
||||
}
|
||||
|
||||
.confirm-modal[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -71,20 +71,8 @@ body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.flash {
|
||||
.app-messages {
|
||||
margin-top: 10px;
|
||||
border: 1px solid #bbf7d0;
|
||||
background: #f0fdf4;
|
||||
color: #166534;
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.flash.error {
|
||||
border-color: #fecaca;
|
||||
background: #fff1f2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
|
||||
@@ -563,20 +563,8 @@
|
||||
max-width: 26ch;
|
||||
}
|
||||
|
||||
.msg {
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
.app-messages {
|
||||
margin: 0 0 14px;
|
||||
border: 1px solid #d6e1ef;
|
||||
background: #f8fbff;
|
||||
color: #1f3a5f;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.msg.error {
|
||||
border-color: #fecaca;
|
||||
background: #fff1f2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.footer-note {
|
||||
|
||||
@@ -86,33 +86,20 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-alert {
|
||||
.login-card .app-alert {
|
||||
margin: 0 0 12px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #d6e1ef;
|
||||
background: #f8fbff;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-alert strong {
|
||||
.login-card .app-alert strong {
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.login-alert span {
|
||||
.login-card .app-alert span {
|
||||
color: #5f6f85;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.login-alert-error {
|
||||
color: #991b1b;
|
||||
border-color: #f0c8c8;
|
||||
background: linear-gradient(180deg, #fff7f7, #fff1f1);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
body {
|
||||
padding: 14px;
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
.hero h1 { margin: 0; font-size: 32px; line-height: 1.08; color: var(--brand-blue); }
|
||||
.sub { margin: 8px 0 0; color: var(--muted); max-width: 780px; }
|
||||
.content { padding: 20px 22px 24px; }
|
||||
.flash { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid #bfe6c9; background: var(--ok-bg); color: var(--ok-ink); }
|
||||
.app-messages { margin: 0 0 12px; }
|
||||
.meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
|
||||
.card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px; }
|
||||
.card h2 { margin: 0 0 10px; font-size: 16px; color: #1b3764; }
|
||||
|
||||
@@ -872,18 +872,10 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.flash {
|
||||
.app-messages {
|
||||
margin: 0 24px 14px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(217, 227, 238, 0.9);
|
||||
background: rgba(248, 251, 255, 0.95);
|
||||
}
|
||||
|
||||
.flash.success { border-color: #bfe6c9; background: #edf9f1; color: #116634; }
|
||||
.flash.warning { border-color: #f5d8a8; background: #fff8ea; color: #8a5a00; }
|
||||
.flash.error { border-color: #f4c7c7; background: #fff1f1; color: #8e1e1e; }
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
|
||||
Reference in New Issue
Block a user