RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 02:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve image card style

Browse Source
This commit is contained in:
SrGooglo 2025-05-15 09:59:42 +00:00
parent 8af5c324b6
commit 82e2b1742f
1 changed files with 116 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
packages/app/src/pages/auth/index.less
View File

@ -1,137 +1,162 @@
.login-page { .login-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
font-family: "Space Grotesk", sans-serif; font-family: "Space Grotesk", sans-serif;
.background { .background {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
svg { svg {
margin: 0; margin: 0;
opacity: 0; opacity: 0;
animation: opacityIn 3s ease-in-out 0s forwards; animation: opacityIn 3s ease-in-out 0s forwards;
} }
background-image: radial-gradient(rgba(var(--layout-background-contrast), 0.3) 1px, transparent 0), background-image:
radial-gradient(rgba(var(--layout-background-contrast), 0.3) 1px, transparent 0); radial-gradient(
rgba(var(--layout-background-contrast), 0.3) 1px,
transparent 0
),
radial-gradient(
rgba(var(--layout-background-contrast), 0.3) 1px,
transparent 0
);
background-position: 0 0, background-position:
25px 25px; 0 0,
background-size: 50px 50px; 25px 25px;
} background-size: 50px 50px;
}
}
.wrapper { @wrapper-img-width: 250px;
position: relative;
z-index: 15;
display: flex; .wrapper {
flex-direction: row; position: relative;
z-index: 15;
width: 55vw; display: flex;
min-width: 700px; flex-direction: row;
max-width: 800px;
overflow: hidden; width: 55vw;
min-width: 700px;
max-width: 800px;
height: 50vh; height: 50vh;
min-height: 500px; min-height: 500px;
max-height: 500px; max-height: 500px;
transition: all 250ms ease-in-out; background-color: var(--background-color-accent);
border: 3px solid var(--border-color);
background-color: var(--background-color-accent); border-radius: 12px;
border: 1px solid var(--border-color); transition: all 250ms ease-in-out;
border-radius: 12px; overflow: hidden;
.wrapper_background { .wrapper_background {
height: 100%; position: absolute;
min-width: 250px; left: 0;
width: 250px; top: 0;
border-radius: 12px; height: 100%;
background-position: center; width: calc(@wrapper-img-width + 10px);
background-size: cover; min-width: calc(@wrapper-img-width + 10px);
background-repeat: no-repeat;
}
.content { background-position: center;
display: flex; background-size: cover;
flex-direction: column; background-repeat: no-repeat;
align-items: center; z-index: 1;
justify-content: center; }
width: 100%; .content {
position: absolute;
display: flex;
flex-direction: column;
min-width: 420px; right: 0;
gap: 20px; align-items: center;
justify-content: center;
padding: 40px; width: calc(100% - @wrapper-img-width);
min-width: 420px;
.content_header { height: 100%;
height: 70px;
img { gap: 20px;
width: 100%; padding: 40px;
height: 100%;
}
}
.actions { outline: 3px solid var(--border-color-solid);
display: flex; border-radius: 12px;
flex-direction: column;
align-items: center; background-color: var(--background-color-accent);
justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
width: 100%; z-index: 2;
gap: 15px; .content_header {
height: 70px;
.ant-btn { img {
width: 100%; width: 100%;
height: 100%;
}
}
font-weight: 500; .actions {
letter-spacing: -0.6px; display: flex;
flex-direction: column;
&:last-child { align-items: center;
margin-bottom: 0; justify-content: center;
}
} width: 100%;
}
} gap: 15px;
}
.ant-btn {
width: 100%;
font-weight: 500;
letter-spacing: -0.6px;
&:last-child {
margin-bottom: 0;
}
}
}
}
} }
@keyframes opacityIn { @keyframes opacityIn {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }