|
|
@@ -1,25 +1,26 @@
|
|
|
#loginPage{
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 45% 55%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
height: 100%;
|
|
|
+ padding: 40px 24px;
|
|
|
background: var(--bg-base);
|
|
|
|
|
|
form{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- align-self: center;
|
|
|
- padding: 0 64px;
|
|
|
- gap: 22px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 380px;
|
|
|
+ gap: 20px;
|
|
|
}
|
|
|
|
|
|
h1{
|
|
|
position: relative;
|
|
|
- font-size: 28px;
|
|
|
+ font-size: 26px;
|
|
|
font-weight: 700;
|
|
|
letter-spacing: -0.02em;
|
|
|
color: var(--text-primary);
|
|
|
padding-left: 16px;
|
|
|
- margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
h1::before{
|
|
|
@@ -82,54 +83,3 @@
|
|
|
transform: translateY(1px);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-#loginPage::before{
|
|
|
- content: "\2302";
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 100%;
|
|
|
- font-size: 260px;
|
|
|
- color: var(--accent-muted);
|
|
|
- background:
|
|
|
- radial-gradient(circle at 32% 28%, var(--accent-muted) 0%, transparent 55%),
|
|
|
- var(--bg-surface);
|
|
|
- border-right: 1px solid var(--border-subtle);
|
|
|
-}
|
|
|
-
|
|
|
-@media (max-width: 720px){
|
|
|
- #loginPage{
|
|
|
- grid-template-columns: 1fr;
|
|
|
- min-height: 100%;
|
|
|
- height: auto;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 40px 0;
|
|
|
- }
|
|
|
-
|
|
|
- #loginPage::before{
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- #loginPage form{
|
|
|
- padding: 0 24px;
|
|
|
- }
|
|
|
-
|
|
|
- #loginPage h1{
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media (max-width: 400px){
|
|
|
- #loginPage form{
|
|
|
- padding: 0 16px;
|
|
|
- gap: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- #loginPage h1{
|
|
|
- font-size: 21px;
|
|
|
- }
|
|
|
-
|
|
|
- #loginPage button{
|
|
|
- padding: 12px 16px;
|
|
|
- }
|
|
|
-}
|
