RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +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

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

@ -30,15 +30,26 @@
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:
0 0,
25px 25px; 25px 25px;
background-size: 50px 50px; background-size: 50px 50px;
} }
}
.wrapper { @wrapper-img-width: 250px;
.wrapper {
position: relative; position: relative;
z-index: 15; z-index: 15;
@ -49,48 +60,63 @@
min-width: 700px; min-width: 700px;
max-width: 800px; max-width: 800px;
overflow: hidden;
height: 50vh; height: 50vh;
min-height: 500px; min-height: 500px;
max-height: 500px; max-height: 500px;
background-color: var(--background-color-accent);
border: 3px solid var(--border-color);
border-radius: 12px;
transition: all 250ms ease-in-out; transition: all 250ms ease-in-out;
background-color: var(--background-color-accent); overflow: hidden;
border: 1px solid var(--border-color);
border-radius: 12px;
.wrapper_background { .wrapper_background {
position: absolute;
left: 0;
top: 0;
height: 100%; height: 100%;
min-width: 250px; width: calc(@wrapper-img-width + 10px);
width: 250px; min-width: calc(@wrapper-img-width + 10px);
border-radius: 12px;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 1;
} }
.content { .content {
position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
right: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: calc(100% - @wrapper-img-width);
min-width: 420px; min-width: 420px;
gap: 20px; height: 100%;
gap: 20px;
padding: 40px; padding: 40px;
outline: 3px solid var(--border-color-solid);
border-radius: 12px;
background-color: var(--background-color-accent);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
z-index: 2;
.content_header { .content_header {
height: 70px; height: 70px;
@ -123,7 +149,6 @@
} }
} }
} }
}
} }
@keyframes opacityIn { @keyframes opacityIn {