Merge branch 'master' of http://118.145.251.184:3000/OmniAI/omniai-web into feat/profile-ui-polish
This commit is contained in:
+310
-1
@@ -514,7 +514,7 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.omni-home__feature-page.is-token::before {
|
||||
.omni-home__feature-page.is-model::before {
|
||||
background:
|
||||
linear-gradient(90deg, rgb(5 8 13 / 96%) 0%, rgb(5 8 13 / 80%) 42%, rgb(5 8 13 / 48%) 100%),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 6%), transparent 34%);
|
||||
@@ -640,6 +640,258 @@
|
||||
filter: saturate(1.1) contrast(1.06) brightness(1.04);
|
||||
}
|
||||
|
||||
.omni-home__feature-page.is-model .omni-home__feature-visual {
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: clamp(360px, 36vw, 620px);
|
||||
max-height: min(68vh, 680px);
|
||||
border-color: rgb(255 255 255 / 14%);
|
||||
border-radius: 8px;
|
||||
background: #0a0b12;
|
||||
box-shadow:
|
||||
0 34px 90px rgb(0 0 0 / 42%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 7%);
|
||||
}
|
||||
|
||||
.omni-home__feature-page.is-ecommerce .omni-home__feature-visual {
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: clamp(360px, 36vw, 620px);
|
||||
max-height: min(68vh, 680px);
|
||||
border-color: rgb(255 255 255 / 14%);
|
||||
border-radius: 8px;
|
||||
background: #101214;
|
||||
box-shadow:
|
||||
0 34px 90px rgb(0 0 0 / 42%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 7%);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 0.86fr) minmax(360px, 1.14fr);
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: clamp(16px, 2vw, 28px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: clamp(22px, 3vw, 38px);
|
||||
background:
|
||||
linear-gradient(145deg, rgb(255 255 255 / 5%), transparent 28%),
|
||||
linear-gradient(180deg, #181b1d 0%, #0d0f10 100%);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__depth,
|
||||
.omni-home-ecommerce-showcase__grain {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__depth {
|
||||
z-index: -2;
|
||||
background:
|
||||
linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 4%) 1px, transparent 1px),
|
||||
radial-gradient(circle at 50% 50%, transparent 0 42%, rgb(0 0 0 / 36%) 78%),
|
||||
linear-gradient(140deg, rgb(0 255 136 / 10%), transparent 40%);
|
||||
background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__grain {
|
||||
z-index: -1;
|
||||
opacity: 0.22;
|
||||
background:
|
||||
repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 4px),
|
||||
repeating-linear-gradient(90deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 5px);
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__prompt {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 8px;
|
||||
min-height: 152px;
|
||||
border: 1px solid rgb(0 255 136 / 42%);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(135deg, rgb(0 255 136 / 12%), rgb(255 255 255 / 7%)),
|
||||
rgb(18 21 22 / 84%);
|
||||
padding: clamp(18px, 2.2vw, 26px);
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(0 255 136 / 10%),
|
||||
0 20px 58px rgb(0 255 136 / 10%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 10%);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__prompt span {
|
||||
color: rgb(0 255 136 / 86%);
|
||||
font-size: clamp(13px, 1vw, 16px);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__prompt strong {
|
||||
color: #f7faf8;
|
||||
font-size: clamp(26px, 2.5vw, 44px);
|
||||
font-weight: 950;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__prompt p {
|
||||
max-width: 420px;
|
||||
margin: 0;
|
||||
color: rgb(232 238 236 / 76%);
|
||||
font-size: clamp(14px, 1.18vw, 18px);
|
||||
font-weight: 700;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__tools {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
align-self: end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__tool {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-height: 92px;
|
||||
align-content: center;
|
||||
border: 1px solid rgb(255 255 255 / 12%);
|
||||
border-radius: 8px;
|
||||
background: rgb(255 255 255 / 7%);
|
||||
padding: 15px 16px;
|
||||
box-shadow: 0 18px 42px rgb(0 0 0 / 20%);
|
||||
backdrop-filter: blur(20px);
|
||||
transition:
|
||||
transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
|
||||
border-color 220ms ease,
|
||||
background 220ms ease;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__tool:hover {
|
||||
border-color: rgb(0 255 136 / 36%);
|
||||
background: rgb(0 255 136 / 9%);
|
||||
transform: translateY(-3px) scale(1.01);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__tool b {
|
||||
color: #ffffff;
|
||||
font-size: clamp(20px, 1.7vw, 28px);
|
||||
font-weight: 950;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__tool small {
|
||||
color: rgb(232 238 236 / 58%);
|
||||
font-size: clamp(12px, 1vw, 15px);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__gallery {
|
||||
position: relative;
|
||||
grid-row: 1 / 3;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(255 255 255 / 14%);
|
||||
border-radius: 8px;
|
||||
background: rgb(255 255 255 / 8%);
|
||||
box-shadow:
|
||||
0 24px 62px rgb(0 0 0 / 32%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 8%);
|
||||
backdrop-filter: blur(20px);
|
||||
transition:
|
||||
transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
|
||||
border-color 220ms ease,
|
||||
box-shadow 220ms ease;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot:hover {
|
||||
border-color: rgb(0 255 136 / 32%);
|
||||
box-shadow: 0 30px 76px rgb(0 0 0 / 40%);
|
||||
transform: translateY(-4px) scale(1.015);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot.is-1 {
|
||||
z-index: 3;
|
||||
top: 3%;
|
||||
left: 18%;
|
||||
width: 61%;
|
||||
height: 65%;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot.is-2 {
|
||||
z-index: 2;
|
||||
bottom: 2%;
|
||||
left: 0;
|
||||
width: 47%;
|
||||
height: 43%;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot.is-3 {
|
||||
z-index: 2;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 48%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
filter: saturate(0.96) contrast(1.02);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot:hover img {
|
||||
transform: none;
|
||||
filter: saturate(1.02) contrast(1.04);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot > div {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
border-top: 1px solid rgb(255 255 255 / 10%);
|
||||
background: rgb(12 14 15 / 88%);
|
||||
padding: 12px 14px 13px;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot span {
|
||||
justify-self: start;
|
||||
border: 1px solid rgb(0 255 136 / 30%);
|
||||
border-radius: 999px;
|
||||
background: rgb(0 255 136 / 10%);
|
||||
color: rgb(0 255 136 / 92%);
|
||||
padding: 3px 9px;
|
||||
font-size: 12px;
|
||||
font-weight: 950;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot strong {
|
||||
color: #f7faf8;
|
||||
font-size: clamp(15px, 1.15vw, 20px);
|
||||
font-weight: 950;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot small {
|
||||
color: rgb(232 238 236 / 58%);
|
||||
font-size: clamp(11px, 0.92vw, 14px);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
|
||||
.omni-home__feature-stats {
|
||||
position: absolute;
|
||||
right: clamp(22px, 7vw, 92px);
|
||||
@@ -887,6 +1139,21 @@
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.omni-home__feature-page.is-model .omni-home__feature-visual,
|
||||
.omni-home__feature-page.is-ecommerce .omni-home__feature-visual {
|
||||
min-height: 620px;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto minmax(360px, 1fr);
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__gallery {
|
||||
grid-row: auto;
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.omni-home__feature-stats {
|
||||
right: 22px;
|
||||
left: 22px;
|
||||
@@ -952,6 +1219,48 @@
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.omni-home__feature-page.is-ecommerce .omni-home__feature-visual {
|
||||
min-height: 0;
|
||||
aspect-ratio: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase {
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__prompt {
|
||||
min-height: 130px;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__tools {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__tool {
|
||||
min-height: 78px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__gallery {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.omni-home-ecommerce-showcase__shot,
|
||||
.omni-home-ecommerce-showcase__shot.is-1,
|
||||
.omni-home-ecommerce-showcase__shot.is-2,
|
||||
.omni-home-ecommerce-showcase__shot.is-3 {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
|
||||
.omni-home__feature-stats {
|
||||
bottom: 34px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user