Skip to content

Commit c613e79

Browse files
mrin9mrin9
committed
style(docs): unify design palette, fix alignments, and enhance theme showcase with css parts
- Unify global button styles, cards, and accent glow tokens to emerald/cyan palette - Fix card alignments on Test Matrix and API vendor extension sections - Fix hover states on dry run and action buttons across site - Replace unicode characters with consistent outline SVG icons on Guides, Mini, CSS, Theme, and Mock pages - Overhaul /home hero interactive preview window to align with install pill and replace comparison slider with text card demo triggers - Fix path button styling in tests table - Add CSS shadow parts styling to theme-dark-contrast with Nuxt-style vertical fading border glow and frosted glass search panel
1 parent 6be172c commit c613e79

22 files changed

Lines changed: 3919 additions & 2997 deletions

‎docs/src/components/SiteNavbar.astro‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -156,13 +156,16 @@ const current = resolveActiveNavKey(pathname, activePage);
156156
border: none;
157157
}
158158
.rd-btn-primary {
159-
background: var(--rapidoc-gradient);
160-
color: var(--rd-text-bright);
161-
box-shadow: 0 4px 14px var(--rd-accent-glow);
159+
background: var(--rd-accent-dim);
160+
border: 1px solid var(--rd-accent-border);
161+
color: var(--rd-accent-light) !important;
162+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
162163
}
163164
.rd-btn-primary:hover {
164-
background: linear-gradient(135deg, var(--rd-accent-hover) 0%, #047857 100%);
165-
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
165+
background: rgba(16, 185, 129, 0.22);
166+
border-color: var(--rd-accent);
167+
color: #ffffff !important;
168+
box-shadow: 0 4px 16px var(--rd-accent-glow);
166169
transform: translateY(-1px);
167170
}
168171
.rd-btn-ghost {

‎docs/src/pages/api.astro‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -695,16 +695,16 @@ rapidoc.setApiKey('api_key_header', 'sk_live_9482910481029');`;
695695
<style>
696696
/* CSS Variables & Theme Foundations */
697697
:root {
698-
--rd-emerald: #10b981;
699-
--rd-emerald-glow: rgba(16, 185, 129, 0.25);
698+
--rd-emerald: var(--rd-accent);
699+
--rd-emerald-glow: var(--rd-accent-glow);
700700
--rd-cyan: #06b6d4;
701701
--rd-cyan-glow: rgba(6, 182, 212, 0.25);
702702
--rd-indigo: #6366f1;
703703
--rd-surface: rgba(15, 23, 42, 0.65);
704704
--rd-surface-card: rgba(11, 17, 33, 0.7);
705705
--rd-surface-hover: rgba(22, 32, 58, 0.85);
706706
--rd-glass-border: rgba(255, 255, 255, 0.08);
707-
--rd-glass-border-hover: rgba(16, 185, 129, 0.4);
707+
--rd-glass-border-hover: var(--rd-border-accent);
708708
--rd-text-primary: #f8fafc;
709709
--rd-text-secondary: #94a3b8;
710710
--rd-text-muted: #64748b;
@@ -725,21 +725,21 @@ rapidoc.setApiKey('api_key_header', 'sk_live_9482910481029');`;
725725
left: 15%;
726726
width: 500px;
727727
height: 500px;
728-
background: radial-gradient(circle, var(--rd-emerald) 0%, transparent 70%);
728+
background: radial-gradient(circle, var(--rd-accent) 0%, transparent 70%);
729729
}
730730
.glow-indigo {
731731
top: 600px;
732732
right: 15%;
733733
width: 550px;
734734
height: 550px;
735-
background: radial-gradient(circle, var(--rd-indigo) 0%, transparent 70%);
735+
background: radial-gradient(circle, var(--rd-logo-yellow, #f59e0b) 0%, transparent 70%);
736736
}
737737
.glow-cyan {
738738
top: 1400px;
739739
left: 20%;
740740
width: 600px;
741741
height: 600px;
742-
background: radial-gradient(circle, var(--rd-cyan) 0%, transparent 70%);
742+
background: radial-gradient(circle, var(--rd-logo-green, #84cc16) 0%, transparent 70%);
743743
}
744744

745745
/* Page Layout */
@@ -764,16 +764,16 @@ rapidoc.setApiKey('api_key_header', 'sk_live_9482910481029');`;
764764
gap: 8px;
765765
padding: 6px 14px;
766766
border-radius: 9999px;
767-
background: rgba(16, 185, 129, 0.1);
768-
border: 1px solid rgba(16, 185, 129, 0.3);
767+
background: var(--rd-accent-dim);
768+
border: 1px solid var(--rd-accent-border);
769769
margin-bottom: 20px;
770770
}
771771
.rd-badge-pulse {
772772
width: 8px;
773773
height: 8px;
774774
border-radius: 50%;
775-
background: var(--rd-emerald);
776-
box-shadow: 0 0 10px var(--rd-emerald);
775+
background: var(--rd-accent);
776+
box-shadow: 0 0 10px var(--rd-accent);
777777
animation: pulse-dot 2s infinite;
778778
}
779779
@keyframes pulse-dot {
@@ -783,7 +783,7 @@ rapidoc.setApiKey('api_key_header', 'sk_live_9482910481029');`;
783783
.rd-badge-text {
784784
font-size: 13px;
785785
font-weight: 600;
786-
color: #34d399;
786+
color: var(--rd-accent-light);
787787
letter-spacing: 0.02em;
788788
}
789789

@@ -796,7 +796,7 @@ rapidoc.setApiKey('api_key_header', 'sk_live_9482910481029');`;
796796
margin: 0 0 18px 0;
797797
}
798798
.text-gradient {
799-
background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #06b6d4 100%);
799+
background: var(--rapidoc-logo-gradient);
800800
-webkit-background-clip: text;
801801
-webkit-text-fill-color: transparent;
802802
}
@@ -831,6 +831,9 @@ rapidoc.setApiKey('api_key_header', 'sk_live_9482910481029');`;
831831
display: flex;
832832
flex-direction: column;
833833
align-items: center;
834+
justify-content: center;
835+
text-align: center;
836+
height: 100%;
834837
padding: 16px 12px;
835838
background: var(--rd-surface);
836839
border: 1px solid var(--rd-glass-border);
@@ -839,19 +842,20 @@ rapidoc.setApiKey('api_key_header', 'sk_live_9482910481029');`;
839842
-webkit-backdrop-filter: blur(12px);
840843
text-decoration: none;
841844
transition: all 0.2s ease;
845+
box-sizing: border-box;
842846
}
843847
.rd-stat-card:hover {
844848
transform: translateY(-2px);
845-
border-color: rgba(16, 185, 129, 0.4);
849+
border-color: var(--rd-accent-border);
846850
background: var(--rd-surface-hover);
847-
box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
851+
box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 16px var(--rd-accent-glow);
848852
}
849853
.rd-stat-value {
850854
font-size: 24px;
851855
font-weight: 800;
852856
color: #fff;
853857
font-family: var(--rd-font-mono);
854-
background: linear-gradient(135deg, #fff 0%, #34d399 100%);
858+
background: linear-gradient(135deg, #fff 0%, var(--rd-accent-light) 100%);
855859
-webkit-background-clip: text;
856860
-webkit-text-fill-color: transparent;
857861
}
@@ -1001,13 +1005,16 @@ rapidoc.setApiKey('api_key_header', 'sk_live_9482910481029');`;
10011005
border: none;
10021006
}
10031007
.rd-btn-primary {
1004-
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
1005-
color: #fff;
1006-
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
1008+
background: var(--rd-accent-dim);
1009+
border: 1px solid var(--rd-accent-border);
1010+
color: var(--rd-accent-light) !important;
1011+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
10071012
}
10081013
.rd-btn-primary:hover {
1009-
background: linear-gradient(135deg, #059669 0%, #047857 100%);
1010-
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
1014+
background: rgba(16, 185, 129, 0.22);
1015+
border-color: var(--rd-accent);
1016+
color: #fff !important;
1017+
box-shadow: 0 4px 16px var(--rd-accent-glow);
10111018
transform: translateY(-1px);
10121019
}
10131020

@@ -1256,9 +1263,9 @@ rapidoc.setApiKey('api_key_header', 'sk_live_9482910481029');`;
12561263
font-size: 12px;
12571264
padding: 2px 7px;
12581265
border-radius: 4px;
1259-
background: rgba(16, 185, 129, 0.12);
1260-
color: #34d399;
1261-
border: 1px solid rgba(16, 185, 129, 0.25);
1266+
background: var(--rd-accent-dim);
1267+
color: var(--rd-accent-light);
1268+
border: 1px solid var(--rd-accent-border);
12621269
}
12631270

12641271
/* Item Description (Increased font size & enhanced readability) */
@@ -1274,20 +1281,20 @@ rapidoc.setApiKey('api_key_header', 'sk_live_9482910481029');`;
12741281
margin-bottom: 0;
12751282
}
12761283
.rd-item-desc a {
1277-
color: #38bdf8;
1284+
color: var(--rd-accent-light);
12781285
text-decoration: underline;
12791286
text-underline-offset: 3px;
12801287
}
12811288
.rd-item-desc a:hover {
1282-
color: #7dd3fc;
1289+
color: #fdba74;
12831290
}
12841291
.rd-item-desc code, .rd-item-desc .mono {
12851292
font-family: var(--rd-font-mono);
12861293
font-size: 14px;
12871294
background: rgba(255, 255, 255, 0.08);
12881295
padding: 2px 6px;
12891296
border-radius: 4px;
1290-
color: #34d399;
1297+
color: var(--rd-accent-light);
12911298
}
12921299
.rd-item-desc ul {
12931300
margin: 8px 0;

0 commit comments

Comments
 (0)