Skip to content

Commit 28cb8e6

Browse files
madebyankurmadebyankur
committed
fix: styling updates
1 parent 4a15fa4 commit 28cb8e6

3 files changed

Lines changed: 99 additions & 70 deletions

File tree

‎main/docs/css/styles.css‎

Lines changed: 89 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,17 @@ li {
377377
transition: box-shadow 0.15s ease-out;
378378
}
379379

380+
.dark #pagination a:hover {
381+
box-shadow: 0 0 0 4px oklch(from var(--shadow) l c h / 0.24),
382+
0 0 0 1px oklch(from var(--shadow) l c h / 0.24),
383+
0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06),
384+
0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06),
385+
0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06),
386+
0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06),
387+
0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06);
388+
transition: box-shadow 0.15s ease-out;
389+
}
390+
380391
#pagination a > div > div:first-child {
381392
font-size: 1rem;
382393
font-weight: 600;
@@ -468,55 +479,54 @@ li {
468479
========================================================================== */
469480
:root {
470481
/* Colors */
471-
--tooltip-link-color: oklch(50.99% 0.2119 287.99);
472-
--bg: oklch(100% 0 0);
473-
--text: oklch(26.86% 0 0);
474-
--text-secondary: oklch(45.12% 0.0123 264.12);
475-
--text-tertiary: oklch(61.18% 0.0175 262.96);
476-
--muted: oklch(55.1% 0.0234 264.36);
477-
--border: oklch(92.76% 0.0058 264.53);
478-
--border-secondary: oklch(95% 0.0087 260.89);
479-
--accent: oklch(55.63% 0.2368 288.08);
480-
482+
--tooltip-link-color: oklch(0.51 0.2119 287.99);
483+
--bg: oklch(1 0 0);
484+
--text: oklch(0.2686 0 0);
485+
--text-secondary: oklch(0.4512 0.0123 264.12);
486+
--text-tertiary: oklch(0.6118 0.0175 262.96);
487+
--muted: oklch(0.551 0.0234 264.36);
488+
--border: oklch(0.9276 0.0058 264.53);
489+
--border-secondary: oklch(0.95 0.0087 260.89);
490+
--accent: oklch(0.5563 0.2368 288.08);
481491
/* Component Colors */
482-
--section-icon-bg: #eef2ff;
483-
--card-bg: oklch(100% 0 0);
484-
--shadow: oklch(0% 0 0);
492+
--section-icon-bg: oklch(0.9619 0.0179 272.31);
493+
--card-bg: oklch(1 0 0);
494+
--shadow: oklch(0 0 0);
485495
--card-shadow: oklch(from var(--shadow) l c h / calc(alpha - 0.08));
486496

487497
/* Form Elements */
488-
--input-bg: oklch(100% 0 0);
489-
--input-border: oklch(87.17% 0.0093 258.34);
490-
--input-placeholder: oklch(71.37% 0.0192 261.32);
491-
--dash-color: oklch(93.68% 0.0029 264.54);
498+
--input-bg: oklch(1 0 0);
499+
--input-border: oklch(0.8717 0.0093 258.34);
500+
--input-placeholder: oklch(0.7137 0.0192 261.32);
501+
--dash-color: oklch(0.9368 0.0029 264.54);
492502

493503
/* Legacy filters - preserved for compatibility */
494504
--github-logo-filter: none;
495505
}
496506

497507
.dark {
498508
/* Dark Mode Colors */
499-
--tooltip-link-color: oklch(50.99% 0.2119 287.99);
500-
--bg: oklch(17.73% 0.0089 264.32);
501-
--text: oklch(92.76% 0.0058 264.53);
502-
--text-secondary: oklch(71.37% 0.0192 261.32);
503-
--text-tertiary: oklch(55.1% 0.0234 264.36);
504-
--muted: oklch(71.55% 0 0);
505-
--border: oklch(28.49% 0.0175 266.34);
506-
--border-secondary: oklch(36.4% 0.0293 266.43);
507-
--accent: oklch(50.99% 0.2119 287.99);
509+
--tooltip-link-color: oklch(0.5099 0.2119 287.99);
510+
--bg: oklch(0.0672 0 0);
511+
--text: oklch(0.9881 0 0);
512+
--text-secondary: oklch(0.7412 0 0);
513+
--text-tertiary: oklch(0.5999 0 0);
514+
--muted: oklch(0.7155 0 0);
515+
--border: oklch(0.2849 0.0175 266.34);
516+
--border-secondary: oklch(0.285 0 0);
517+
--accent: oklch(0.7521 0.1302 295.22);
508518

509519
/* Dark Mode Component Colors */
510-
--section-icon-bg: #1b1f2a;
511-
--card-bg: #151923;
512-
--shadow: #000000;
513-
--card-shadow: rgba(255, 255, 255, 0.06);
520+
--section-icon-bg: oklch(0.2404 0.022 269.15);
521+
--card-bg: oklch(0.2141 0.0207 267.68);
522+
--shadow: oklch(0.3 0 0);
523+
--card-shadow: oklch(1 0 0 / 6%);
514524

515525
/* Dark Mode Form Elements */
516-
--input-bg: #141825;
517-
--input-border: #2a3140;
518-
--input-placeholder: #6b7280;
519-
--dash-color: rgba(255, 255, 255, 0.14);
526+
--input-bg: oklch(0.2115 0.0266 270.84);
527+
--input-border: oklch(0.3131 0.0287 265.24);
528+
--input-placeholder: oklch(0.551 0.0234 264.36);
529+
--dash-color: oklch(1 0 0 / 14%);
520530
}
521531

522532
html[style*="color-scheme: dark"] {
@@ -595,7 +605,7 @@ html[style*="color-scheme: dark"] {
595605
margin: 20px 0;
596606
}
597607

598-
.frame > div > span[data-as=p] {
608+
.frame > div > span[data-as="p"] {
599609
margin-top: 0 !important;
600610
margin-bottom: 0 !important;
601611
}
@@ -1400,16 +1410,51 @@ ul.flex.items-center > li > a[href*="/u/login"] {
14001410
flex-direction: column;
14011411
justify-content: space-between;
14021412
transition: box-shadow 0.15s ease, transform 0.15s ease;
1413+
box-shadow: 0 0 0 1px var(--border-secondary),
1414+
0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06),
1415+
0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06),
1416+
0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06);
14031417
}
14041418

14051419
.libraries_card:hover {
1406-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
1407-
transform: translateY(-1px);
1420+
box-shadow: 0 0 0 1px oklch(from var(--accent) l c h / 0.25),
1421+
0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06),
1422+
0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06),
1423+
0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06),
1424+
0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06),
1425+
0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06),
1426+
0 8px 12px -8px oklch(from var(--shadow) l c h / 0.06);
1427+
transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
1428+
}
1429+
1430+
.libraries_card_divider {
1431+
border-top: 1px solid oklch(from var(--border) l c h / 0.24);
1432+
margin: 0 1rem;
1433+
}
1434+
1435+
.dark .libraries_card {
1436+
border: none;
1437+
background-color: oklch(from var(--bg) l c h / 1);
1438+
box-shadow: 0 0 0 1px oklch(from var(--border-secondary) l c h / 0.25),
1439+
0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06),
1440+
0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06),
1441+
0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06);
1442+
backdrop-filter: blur(4px);
1443+
--webkit-backdrop-filter: blur(4px);
1444+
transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
14081445
}
14091446

14101447
.dark .libraries_card:hover {
1411-
background-color: transparent;
1412-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
1448+
border: none;
1449+
background-color: oklch(from var(--bg) l c h / 0.6);
1450+
box-shadow: 0 0 0 1px oklch(from var(--accent) l c h / 0.2),
1451+
0 1px 1px -1px oklch(from var(--shadow) l c h / 0.06),
1452+
0 2px 2px -2px oklch(from var(--shadow) l c h / 0.06),
1453+
0 2px 4px -2px oklch(from var(--shadow) l c h / 0.06),
1454+
0 4px 6px -4px oklch(from var(--shadow) l c h / 0.06),
1455+
0 6px 8px -6px oklch(from var(--shadow) l c h / 0.06),
1456+
0 8px 12px -8px oklch(from var(--shadow) l c h / 0.06);
1457+
transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
14131458
}
14141459

14151460
.libraries_cards a svg {
@@ -1605,6 +1650,7 @@ a.card[href^="http"]::after {
16051650
}
16061651

16071652
.api_page_container .card {
1653+
background-color: transparent;
16081654
border: 0;
16091655
border-radius: 0;
16101656
border-bottom: 2px solid var(--text) !important;
@@ -1616,7 +1662,7 @@ a.card[href^="http"]::after {
16161662
}
16171663

16181664
.api_page_container .card:hover {
1619-
background-color: var(--bg);
1665+
background-color: transparent;
16201666
border-bottom: 2px solid var(--accent) !important;
16211667
box-shadow: none;
16221668
transition: all 0.15s ease-out;
@@ -1731,7 +1777,7 @@ a.card[href^="http"]::after {
17311777
}
17321778

17331779
/* FIXME: Temporary override for both the original SDK cards and the custom cards due to large margin in Mintlify's latest changes to their <CardGroup> component styling */
1734-
.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
1735-
margin-top: 0;
1736-
margin-bottom: 0;
1780+
.prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
1781+
margin-top: 0;
1782+
margin-bottom: 0;
17371783
}

‎main/snippets/BgImage.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const BgImage = () => {
1919
backgroundSize: "",
2020
backgroundPosition: "center 0",
2121
backgroundAttachment: "fixed",
22+
backgroundSize: "cover",
2223
}}
2324
/>
2425
</>

‎main/snippets/SectionsWithCards.jsx‎

Lines changed: 9 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,7 @@ export const SectionsWithCards = ({ sections }) => {
3232
: "";
3333

3434
return (
35-
<article
36-
className="
37-
libraries_card
38-
rounded-2xl border bg-white shadow-sm hover:shadow-md transition-shadow
39-
border-gray-200 dark:border-gray-800 dark:bg-black
40-
"
41-
>
35+
<article className="libraries_card rounded-3xl transition-shadow mb-4">
4236
<div className="px-5 md:px-6 pt-5 md:pt-6 pb-4">
4337
<div className="flex items-start justify-between gap-4">
4438
<div className="flex items-center gap-4 min-w-0">
@@ -85,9 +79,9 @@ export const SectionsWithCards = ({ sections }) => {
8579
</div>
8680
</div>
8781

88-
<div className="h-px w-full bg-gray-200 dark:bg-gray-800" />
82+
<div className="libraries_card_divider" />
8983

90-
<div className="px-5 md:px-6 py-4">
84+
<div className="px-5 md:px-6 pt-3 pb-4">
9185
<div className="libraries_cards flex items-center justify-between w-full">
9286
{github && (
9387
<a
@@ -261,13 +255,7 @@ export const LibrariesCards = ({ cards }) => {
261255
const tertiaryLabel = quickstart ? "Quickstart" : docs ? "Get started" : "";
262256

263257
return (
264-
<article
265-
className="
266-
libraries_card
267-
rounded-2xl border bg-white shadow-sm hover:shadow-md transition-shadow
268-
border-gray-200 dark:border-gray-800 dark:bg-black
269-
"
270-
>
258+
<article className="libraries_card rounded-2xl transition-shadow mb-4">
271259
<div className="px-5 md:px-6 pt-5 md:pt-6 pb-4">
272260
<div className="flex items-start justify-between gap-4">
273261
<div className="flex items-center gap-4 min-w-0">
@@ -314,9 +302,9 @@ export const LibrariesCards = ({ cards }) => {
314302
</div>
315303
</div>
316304

317-
<div className="h-px w-full bg-gray-200 dark:bg-gray-800" />
305+
<div className="libraries_card_divider" />
318306

319-
<div className="px-5 md:px-6 py-4">
307+
<div className="px-5 md:px-6 pt-3 pb-4">
320308
<div className="libraries_cards flex items-center justify-between w-full">
321309
{github && (
322310
<a
@@ -424,13 +412,7 @@ export const SectionCard = ({ item }) => {
424412
const tertiaryLabel = quickstart ? "Quickstart" : docs ? "Get started" : "";
425413

426414
return (
427-
<article
428-
className="
429-
libraries_card mb-[16px]
430-
rounded-xl border bg-white shadow-sm hover:shadow-md transition-shadow
431-
border-gray-200 dark:border-gray-800 dark:bg-black
432-
"
433-
>
415+
<article className="libraries_card rounded-2xl transition-shadow mb-4">
434416
<div className="px-4 md:px-5 pt-4 md:pt-5 pb-3">
435417
<div className="flex items-start justify-between gap-3">
436418
<div className="flex gap-3 min-w-0">
@@ -484,9 +466,9 @@ export const SectionCard = ({ item }) => {
484466
</div>
485467
</div>
486468

487-
<div className="h-px mx-3 bg-gray-200 dark:bg-gray-800" />
469+
<div className="libraries_card_divider" />
488470

489-
<div className="px-4 md:px-5 py-3">
471+
<div className="px-4 md:px-5 pt-3 pb-4">
490472
<div className="libraries_cards flex items-center justify-between w-full gap-3">
491473
{github && (
492474
<a

0 commit comments

Comments
 (0)