snapshot: preserve role-aware notification preferences and operational alerts
This commit is contained in:
Md Bayazid Bostame
@@ -19,7 +19,7 @@ body {
|
||||
}
|
||||
|
||||
.account-shell-body {
|
||||
padding: 28px;
|
||||
padding: 24px;
|
||||
background:
|
||||
radial-gradient(90% 120% at 10% 0%, rgba(31, 79, 214, 0.06), rgba(31, 79, 214, 0)),
|
||||
linear-gradient(180deg, rgba(255,255,255,0.72), rgba(248,251,255,0.48));
|
||||
@@ -29,7 +29,7 @@ body {
|
||||
width: min(1120px, 100%);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.account-hero {
|
||||
@@ -37,13 +37,14 @@ body {
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
align-items: flex-start;
|
||||
padding: 26px 28px;
|
||||
padding: 22px 24px;
|
||||
border: 1px solid #d9e3f0;
|
||||
border-radius: 24px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(30, 64, 175, 0.1), transparent 24%),
|
||||
linear-gradient(135deg, rgba(255,255,255,0.96), rgba(244,248,255,0.9));
|
||||
box-shadow: 0 14px 34px rgba(28, 45, 79, 0.08);
|
||||
animation: accountFadeUp 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.account-kicker {
|
||||
@@ -72,6 +73,16 @@ body {
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.account-hero-submeta {
|
||||
margin-top: 14px !important;
|
||||
color: #6a7a8f;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.account-hero-submeta strong {
|
||||
color: #132238;
|
||||
}
|
||||
|
||||
.account-hero-badges {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@@ -111,12 +122,20 @@ body {
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: 0 14px 32px rgba(28, 45, 79, 0.09);
|
||||
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.account-profile-card {
|
||||
padding: 24px;
|
||||
padding: 20px;
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
animation: accountFadeUp 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.account-profile-card:hover,
|
||||
.account-panel:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 18px 34px rgba(28, 45, 79, 0.10);
|
||||
}
|
||||
|
||||
.account-avatar-form {
|
||||
@@ -205,30 +224,36 @@ body {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.account-profile-meta {
|
||||
.account-nav {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.account-profile-meta div {
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
background: #f7faff;
|
||||
.account-nav-item {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
text-align: left;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #dce6f2;
|
||||
background: #f7faff;
|
||||
color: #17345e;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.account-profile-meta span {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: #6b7a90;
|
||||
font-size: 12px;
|
||||
.account-nav-item:hover {
|
||||
border-color: #c5d5ea;
|
||||
background: #f3f8ff;
|
||||
}
|
||||
|
||||
.account-profile-meta strong {
|
||||
color: #132238;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
.account-nav-item.is-active {
|
||||
border-color: rgba(0, 0, 120, 0.18);
|
||||
background: linear-gradient(180deg, rgba(238,243,255,0.95), rgba(231,239,255,0.92));
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.account-main {
|
||||
@@ -236,8 +261,129 @@ body {
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.account-notification-pref-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.account-notification-group + .account-notification-group {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.account-notification-group h3 {
|
||||
margin: 0 0 10px;
|
||||
color: #17345e;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.account-notification-pref-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #dce6f2;
|
||||
border-radius: 16px;
|
||||
background: #f7faff;
|
||||
}
|
||||
|
||||
.account-notification-pref-item span {
|
||||
color: #17345e;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.account-notification-pref-item strong {
|
||||
color: #617389;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.account-notification-pref-grid-edit {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.account-notification-pref-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #dce6f2;
|
||||
border-radius: 16px;
|
||||
background: #f7faff;
|
||||
}
|
||||
|
||||
.account-notification-pref-copy {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.account-notification-pref-copy strong {
|
||||
color: #17345e;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.account-notification-pref-copy small {
|
||||
color: #617389;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.account-toggle-control {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.account-toggle-control input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.account-toggle-slider {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-radius: 999px;
|
||||
background: #d7e1ee;
|
||||
transition: background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.account-toggle-slider::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 10px rgba(18, 34, 56, 0.12);
|
||||
transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.account-toggle-control input:checked + .account-toggle-slider {
|
||||
background: #0f8f57;
|
||||
}
|
||||
|
||||
.account-toggle-control input:checked + .account-toggle-slider::after {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.account-panel {
|
||||
padding: 24px;
|
||||
animation: accountFadeUp 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.account-panel.is-entering {
|
||||
animation: accountPanelSwap 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.account-panel-head {
|
||||
@@ -299,7 +445,7 @@ body {
|
||||
}
|
||||
|
||||
.account-security-item {
|
||||
padding: 16px 18px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #dbe5f2;
|
||||
background:
|
||||
@@ -307,6 +453,13 @@ body {
|
||||
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.9));
|
||||
}
|
||||
|
||||
.account-security-item-active {
|
||||
border-color: rgba(34, 139, 86, 0.26);
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(34, 139, 86, 0.10), transparent 26%),
|
||||
linear-gradient(180deg, rgba(242,255,247,0.96), rgba(236,251,242,0.92));
|
||||
}
|
||||
|
||||
.account-security-item span {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
@@ -333,7 +486,7 @@ body {
|
||||
|
||||
.account-totp-card {
|
||||
margin-bottom: 18px;
|
||||
padding: 18px;
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #dbe5f2;
|
||||
background:
|
||||
@@ -356,7 +509,55 @@ body {
|
||||
}
|
||||
|
||||
.account-totp-form {
|
||||
margin-top: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.account-totp-action-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.account-totp-action-copy strong {
|
||||
display: block;
|
||||
color: #132238;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.account-totp-action-copy p {
|
||||
margin: 6px 0 0;
|
||||
color: #617389;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.account-totp-toggle-form {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.account-totp-status-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #dbe5f2;
|
||||
background: rgba(255,255,255,0.88);
|
||||
}
|
||||
|
||||
.account-totp-status-copy strong {
|
||||
display: block;
|
||||
color: #132238;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.account-totp-status-copy p {
|
||||
margin: 6px 0 0;
|
||||
color: #55718f;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.account-qr-card,
|
||||
@@ -456,6 +657,19 @@ body {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.account-form-field.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.account-totp-form.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.account-form-grid.is-hidden,
|
||||
.account-inline-actions.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.account-form-field label {
|
||||
color: #132238;
|
||||
font-size: 13px;
|
||||
@@ -506,6 +720,32 @@ body {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.account-recovery-toggle {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@keyframes accountFadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes accountPanelSwap {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px) scale(0.995);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.account-layout {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -540,10 +780,6 @@ body {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.account-hero-badges {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.account-detail-grid,
|
||||
.account-security-overview,
|
||||
.account-form-grid,
|
||||
@@ -558,4 +794,39 @@ body {
|
||||
.account-panel-head {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.account-totp-status-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.account-totp-status-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.account-totp-action-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.account-hero,
|
||||
.account-profile-card,
|
||||
.account-panel,
|
||||
.account-panel.is-entering {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.account-profile-card,
|
||||
.account-panel,
|
||||
.account-nav-item {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.account-profile-card:hover,
|
||||
.account-panel:hover,
|
||||
.account-nav-item.is-active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -180,10 +180,227 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-notification-menu,
|
||||
.app-user-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-notification-trigger {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--app-line);
|
||||
border-radius: 999px;
|
||||
background: rgba(248, 251, 255, 0.92);
|
||||
color: #1f3a5f;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color var(--motion-fast) var(--motion-ease),
|
||||
background-color var(--motion-fast) var(--motion-ease),
|
||||
transform var(--motion-fast) var(--motion-ease),
|
||||
box-shadow var(--motion-fast) var(--motion-ease);
|
||||
}
|
||||
|
||||
.app-notification-trigger::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-notification-trigger:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.app-notification-menu[open] .app-notification-trigger {
|
||||
border-color: rgba(0, 0, 120, 0.22);
|
||||
box-shadow: 0 0 0 4px rgba(0, 0, 120, 0.08);
|
||||
}
|
||||
|
||||
.app-notification-bell {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #28446e;
|
||||
}
|
||||
|
||||
.app-notification-bell svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-notification-count {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: #c0002b;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.app-notification-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
right: 0;
|
||||
width: min(380px, calc(100vw - 32px));
|
||||
max-height: min(70vh, 520px);
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(217, 227, 238, 0.96);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 24px 44px rgba(18, 34, 56, 0.16);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
z-index: 45;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-notification-panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 4px 6px 8px;
|
||||
border-bottom: 1px solid rgba(217, 227, 238, 0.85);
|
||||
}
|
||||
|
||||
.app-notification-panel-head strong {
|
||||
color: #132238;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.app-notification-panel-head form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-notification-panel-head button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--app-brand-blue);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-notification-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
overflow: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.app-notification-item {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(217, 227, 238, 0.92);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, rgba(249, 252, 255, 0.96), rgba(243, 248, 255, 0.92));
|
||||
}
|
||||
|
||||
.app-notification-item.is-unread {
|
||||
border-color: rgba(0, 0, 120, 0.22);
|
||||
box-shadow: inset 3px 0 0 rgba(0, 0, 120, 0.9);
|
||||
}
|
||||
|
||||
.app-notification-success {
|
||||
background: linear-gradient(180deg, #f4fcf7, #edf9f1);
|
||||
border-color: #cce9d5;
|
||||
}
|
||||
|
||||
.app-notification-error {
|
||||
background: linear-gradient(180deg, #fff7f7, #fff1f1);
|
||||
border-color: #f0c8c8;
|
||||
}
|
||||
|
||||
.app-notification-warning {
|
||||
background: linear-gradient(180deg, #fffaf0, #fff4dd);
|
||||
border-color: #f3d9a7;
|
||||
}
|
||||
|
||||
.app-notification-copy {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.app-notification-copy strong {
|
||||
color: #132238;
|
||||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.app-notification-copy p {
|
||||
margin: 0;
|
||||
color: #51657f;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.app-notification-copy span {
|
||||
color: #7a8ca3;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.app-notification-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-notification-actions a,
|
||||
.app-notification-actions button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(217, 227, 238, 0.92);
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
color: #1f3a5f;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color var(--motion-fast) var(--motion-ease),
|
||||
border-color var(--motion-fast) var(--motion-ease),
|
||||
color var(--motion-fast) var(--motion-ease);
|
||||
}
|
||||
|
||||
.app-notification-actions a:hover,
|
||||
.app-notification-actions button:hover,
|
||||
.app-notification-panel-head button:hover {
|
||||
color: var(--app-brand-blue);
|
||||
}
|
||||
|
||||
.app-notification-empty {
|
||||
padding: 14px 8px 8px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-user-trigger {
|
||||
list-style: none;
|
||||
display: inline-flex;
|
||||
@@ -330,6 +547,10 @@
|
||||
|
||||
.app-user-panel a:focus-visible,
|
||||
.app-user-panel button:focus-visible,
|
||||
.app-notification-trigger:focus-visible,
|
||||
.app-notification-actions a:focus-visible,
|
||||
.app-notification-actions button:focus-visible,
|
||||
.app-notification-panel-head button:focus-visible,
|
||||
.app-user-trigger:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(0, 0, 120, 0.10);
|
||||
|
||||
@@ -47,6 +47,26 @@ body {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.login-step-caption {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
margin: 0 0 14px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #d9e3f0;
|
||||
border-radius: 14px;
|
||||
background: #f7faff;
|
||||
}
|
||||
|
||||
.login-step-caption strong {
|
||||
color: #132238;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-step-caption span {
|
||||
color: #607086;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.account-card {
|
||||
width: min(560px, 100%);
|
||||
}
|
||||
@@ -138,6 +158,34 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-inline-toggle {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.login-recovery-toggle-row {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin: -2px 0 12px;
|
||||
}
|
||||
|
||||
.login-recovery-box.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-top: 14px;
|
||||
color: #36506e;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.login-card .app-alert {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user