| | |
| | | } |
| | | } |
| | | |
| | | .login-demo { |
| | | margin-top: 28px; |
| | | padding-top: 22px; |
| | | border-top: 1px dashed var(--app-border); |
| | | |
| | | &__title { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 7px; |
| | | margin-bottom: 12px; |
| | | font-size: 12px; |
| | | color: var(--app-text-secondary); |
| | | } |
| | | |
| | | &__accounts { |
| | | display: grid; |
| | | grid-template-columns: 1fr 1fr; |
| | | gap: 10px; |
| | | |
| | | button { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | gap: 4px; |
| | | padding: 10px 12px; |
| | | border: 1px solid var(--app-border); |
| | | border-radius: 9px; |
| | | background: #fafbff; |
| | | cursor: pointer; |
| | | text-align: left; |
| | | transition: |
| | | border-color 0.2s ease, |
| | | background 0.2s ease; |
| | | |
| | | &:hover { |
| | | border-color: #c7d2fe; |
| | | background: #f5f3ff; |
| | | } |
| | | |
| | | span { |
| | | font-size: 12px; |
| | | font-weight: 600; |
| | | color: var(--app-text); |
| | | } |
| | | |
| | | code { |
| | | font-size: 11px; |
| | | color: var(--app-text-secondary); |
| | | font-family: 'SFMono-Regular', Consolas, monospace; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | @media (max-width: 900px) { |
| | | .login-shell { |
| | | grid-template-columns: 1fr; |
| | |
| | | |
| | | .login-panel { |
| | | padding: 32px 24px; |
| | | } |
| | | |
| | | .login-demo__accounts { |
| | | grid-template-columns: 1fr; |
| | | } |
| | | } |