Merge pull request #16556 from overleaf/mf-fix-info-cards

Website-redesign - Update `info-cards` according to design (change border top & icon color to #4354a3; change box shadow)

GitOrigin-RevId: 6f7a3fd5b456a699a09196a9663f310acddacd56
This commit is contained in:
M Fahru 2024-01-17 09:34:21 -07:00 committed by Copybot
parent 19f53e1823
commit 0a8b79e519
3 changed files with 16 additions and 14 deletions

View file

@ -96,18 +96,12 @@
border: 2px solid var(--neutral-20);
}
// workaround for border that contains both linear-gradient and border radius
// https://stackoverflow.com/a/53037637
&.blue-gradient-highlighted {
border: double 2px transparent;
&.blue-border {
border: solid 2px var(--sapphire-blue);
border-radius: 8px;
background-image: linear-gradient(var(--white), var(--white)),
var(--premium-gradient);
background-origin: border-box;
background-clip: content-box, border-box;
.plans-card-inner-title {
color: var(--blue-60);
color: var(--sapphire-blue);
}
}
}
@ -129,8 +123,8 @@
.info-card {
border-radius: 8px;
height: 100%;
box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
border-top: 8px solid #2f4858;
box-shadow: 0px 2px 4px 0px #1e253014, 0px 4px 12px 0px #1e25301f;
border-top: 8px solid var(--sapphire-blue);
padding: 32px 40px 32px 40px;
&.info-card-big-text {
@ -144,6 +138,10 @@
line-height: 1.333;
}
}
i.material-symbols {
color: var(--sapphire-blue);
}
}
}
}
@ -567,12 +565,12 @@
color: white;
}
.btn-blue-gradient {
background: var(--premium-gradient);
.btn-blue {
background: var(--sapphire-blue);
color: var(--white);
&:hover {
background: var(--blue-70);
background: var(--sapphire-blue-dark);
}
}

View file

@ -94,6 +94,8 @@
// == website-redesign
@emerald-green: #098842;
@sapphire-blue: #4354a3;
@sapphire-blue-dark: #3c4c93;
// == ol-* legacy variables ==
// These will eventually be removed and replaced with above names

View file

@ -82,4 +82,6 @@
// website-redesign
--emerald-green: @emerald-green;
--sapphire-blue: @sapphire-blue;
--sapphire-blue-dark: @sapphire-blue-dark;
}