Skip to content

Commit b3b0746

Browse files
sixlivesixlive
committed
docs: new theme
1 parent 2cacf40 commit b3b0746

File tree

3 files changed

+262
-0
lines changed

3 files changed

+262
-0
lines changed

‎docs/.vitepress/theme/custom.css

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
/* Vaporwave Theme for Prism PHP Documentation */
2+
3+
:root {
4+
/* Light mode colors */
5+
--vp-c-brand-1: #ff71ce;
6+
--vp-c-brand-2: #b967ff;
7+
--vp-c-brand-3: #01cdfe;
8+
9+
/* Base */
10+
--vp-c-bg: #f8f9fc;
11+
--vp-c-bg-soft: #f0f3f9;
12+
--vp-c-bg-mute: #e7ecf5;
13+
14+
/* Borders */
15+
--vp-c-border: #e5e9f0;
16+
--vp-c-divider: #e5e9f0;
17+
18+
/* Text */
19+
--vp-c-text-1: #2e3440;
20+
--vp-c-text-2: #434c5e;
21+
--vp-c-text-3: #4c566a;
22+
23+
/* Code blocks */
24+
--vp-code-block-bg: #f0f3f9;
25+
26+
/* Button */
27+
--vp-button-brand-bg: var(--vp-c-brand-1);
28+
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
29+
--vp-button-brand-active-bg: var(--vp-c-brand-3);
30+
31+
/* Custom vaporwave gradients */
32+
--vaporwave-gradient-1: linear-gradient(90deg, #ff71ce, #b967ff);
33+
--vaporwave-gradient-2: linear-gradient(90deg, #01cdfe, #05ffa1);
34+
}
35+
36+
.dark {
37+
/* Dark mode colors */
38+
--vp-c-brand-1: #ff71ce;
39+
--vp-c-brand-2: #b967ff;
40+
--vp-c-brand-3: #01cdfe;
41+
42+
/* Base */
43+
--vp-c-bg: #191b28;
44+
--vp-c-bg-soft: #222436;
45+
--vp-c-bg-mute: #2a2d45;
46+
47+
/* Borders */
48+
--vp-c-border: #373a54;
49+
--vp-c-divider: #373a54;
50+
51+
/* Text */
52+
--vp-c-text-1: #e4e9f7;
53+
--vp-c-text-2: #c7d0e2;
54+
--vp-c-text-3: #a3b0cc;
55+
56+
/* Code blocks */
57+
--vp-code-block-bg: #222436;
58+
59+
/* Button */
60+
--vp-button-brand-bg: var(--vp-c-brand-1);
61+
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
62+
--vp-button-brand-active-bg: var(--vp-c-brand-3);
63+
64+
/* Custom dark mode styling */
65+
--vp-c-glow: rgba(255, 113, 206, 0.15);
66+
}
67+
68+
/* Custom Vaporwave Styling */
69+
70+
/* Header styling */
71+
.VPNav {
72+
background-color: var(--vp-c-bg);
73+
box-shadow: 0 2px 12px 0 rgba(185, 103, 255, 0.1);
74+
}
75+
76+
/* Brand name with gradient */
77+
.VPNavBarTitle .title {
78+
background: var(--vaporwave-gradient-1);
79+
-webkit-background-clip: text;
80+
-webkit-text-fill-color: transparent;
81+
font-weight: bold;
82+
text-shadow: 0 0 8px rgba(255, 113, 206, 0.3);
83+
letter-spacing: 1px;
84+
}
85+
86+
/* Logo animation */
87+
.VPNavBarTitle .logo {
88+
transition: all 0.3s ease;
89+
}
90+
91+
.VPNavBarTitle:hover .logo {
92+
filter: drop-shadow(0 0 8px rgba(255, 113, 206, 0.5));
93+
transform: rotate(-5deg) scale(1.1);
94+
}
95+
96+
/* Links with hover effects */
97+
.VPLink:hover {
98+
color: var(--vp-c-brand-1);
99+
text-shadow: 0 0 8px rgba(255, 113, 206, 0.5);
100+
transition: all 0.3s ease;
101+
}
102+
103+
/* Disable hover effects for feature links on home page */
104+
.VPLink.no-icon.VPFeature:hover {
105+
color: inherit;
106+
text-shadow: none;
107+
}
108+
109+
/* Feature titles with gradient */
110+
.VPFeature .title {
111+
background: var(--vaporwave-gradient-1);
112+
-webkit-background-clip: text;
113+
-webkit-text-fill-color: transparent;
114+
display: inline-block;
115+
}
116+
117+
/* Special styling for sidebar */
118+
.VPSidebar {
119+
background-color: var(--vp-c-bg) !important;
120+
}
121+
122+
/* Sidebar elements */
123+
.VPSidebarNav {
124+
background-color: var(--vp-c-bg) !important;
125+
}
126+
127+
.VPSidebarItem .text,
128+
.VPSidebarItem .link {
129+
color: var(--vp-c-text-2);
130+
}
131+
132+
/* Active sidebar item with gradient and glow */
133+
.VPSidebarItem.is-active .link {
134+
color: var(--vp-c-brand-1) !important;
135+
font-weight: 600;
136+
}
137+
138+
/* Buttons with hover glow effect */
139+
.VPButton.brand {
140+
transition: all 0.3s ease;
141+
}
142+
143+
.VPButton.brand:hover {
144+
box-shadow: 0 0 12px rgba(255, 113, 206, 0.7);
145+
transform: translateY(-1px);
146+
}
147+
148+
/* Code blocks with custom styling */
149+
div[class*="language-"] {
150+
border: 1px solid var(--vp-c-divider);
151+
border-radius: 8px;
152+
overflow: hidden;
153+
}
154+
155+
/* Home hero section with retro feel */
156+
.VPHero .name,
157+
.VPHero .text {
158+
background: var(--vaporwave-gradient-2);
159+
-webkit-background-clip: text;
160+
-webkit-text-fill-color: transparent;
161+
}
162+
163+
/* Main content area styling */
164+
.VPContent {
165+
background-color: var(--vp-c-bg);
166+
}
167+
168+
.VPDoc {
169+
background-color: var(--vp-c-bg);
170+
}
171+
172+
/* Footer styling */
173+
.VPFooter {
174+
background-color: var(--vp-c-bg-soft);
175+
border-top: none !important;
176+
}
177+
178+
/* Header anchors with vaporwave color */
179+
.header-anchor:hover {
180+
color: var(--vp-c-brand-1);
181+
}
182+
183+
/* Tables with soft grid styling */
184+
.vp-doc table {
185+
border-collapse: separate;
186+
border-spacing: 0;
187+
border-radius: 8px;
188+
overflow: hidden;
189+
box-shadow: 0 0 10px rgba(185, 103, 255, 0.1);
190+
}
191+
192+
.vp-doc th {
193+
background-color: var(--vp-c-bg-soft);
194+
border-bottom: 2px solid var(--vp-c-border);
195+
}
196+
197+
/* Custom scrollbar */
198+
::-webkit-scrollbar {
199+
width: 10px;
200+
height: 10px;
201+
}
202+
203+
::-webkit-scrollbar-track {
204+
background: var(--vp-c-bg-soft);
205+
}
206+
207+
::-webkit-scrollbar-thumb {
208+
background-image: var(--vaporwave-gradient-1);
209+
border-radius: 5px;
210+
}
211+
212+
/* Removed page decorations */
213+
214+
/* Code block enhancements */
215+
div[class*="language-"] {
216+
box-shadow: 0 3px 15px rgba(185, 103, 255, 0.1);
217+
border-radius: 8px;
218+
margin: 1.5rem 0;
219+
}
220+
221+
.dark div[class*="language-"] {
222+
box-shadow: 0 3px 15px rgba(255, 113, 206, 0.1);
223+
}
224+
225+
/* Headings with subtle gradient */
226+
.vp-doc h1,
227+
.vp-doc h2 {
228+
background: var(--vaporwave-gradient-1);
229+
-webkit-background-clip: text;
230+
-webkit-text-fill-color: transparent;
231+
display: inline-block;
232+
}
233+
234+
.vp-doc h3,
235+
.vp-doc h4 {
236+
color: var(--vp-c-brand-1);
237+
}
238+
239+
/* Custom blockquote */
240+
.vp-doc blockquote {
241+
border-left: 3px solid var(--vp-c-brand-2);
242+
background-color: rgba(185, 103, 255, 0.05);
243+
border-radius: 0 8px 8px 0;
244+
padding: 16px 24px;
245+
}
246+
247+
/* Mobile responsiveness fixes - removing custom mobile sizing */
248+
@media (max-width: 768px) {
249+
.VPContent::before,
250+
.VPContent::after {
251+
display: none;
252+
}
253+
}
254+
255+
.VPNavBarTitle.has-sidebar .title {
256+
border-bottom: none;
257+
}
258+
259+
.VPNav .divider {
260+
display: none !important;
261+
}

‎docs/.vitepress/theme/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { h } from "vue";
22
import DefaultTheme from "vitepress/theme";
33
import HostedFooter from "./HostedFooter.vue";
4+
import "./custom.css";
45

56
export default {
67
extends: DefaultTheme,

‎docs/public/assets/og-image.png

2.97 KB
Loading

0 commit comments

Comments
 (0)