1+ * {
2+ margin : 0 ;
3+ padding : 0 ;
4+ box-sizing : border-box;
5+ }
6+
7+ body {
8+ font-family : 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif, 'Microsoft YaHei' ;
9+ background : radial-gradient (circle at 20% 50% , rgba (120 , 200 , 255 , 0.3 ) 0% , transparent 50% ),
10+ radial-gradient (circle at 80% 80% , rgba (180 , 220 , 255 , 0.3 ) 0% , transparent 50% ),
11+ radial-gradient (circle at 40% 20% , rgba (200 , 230 , 255 , 0.2 ) 0% , transparent 50% ),
12+ linear-gradient (135deg , # e3f2fd 0% , # ffffff 50% , # f0f7ff 100% );
13+ padding : 16px ;
14+ }
15+
16+ .container {
17+ max-width : 1400px ;
18+ margin : 0 auto;
19+ background : rgba (255 , 255 , 255 , 0.96 );
20+ border-radius : 18px ;
21+ box-shadow : 0 18px 45px rgba (100 , 150 , 200 , 0.35 );
22+ overflow : hidden;
23+ }
24+
25+ .header {
26+ position : relative;
27+ padding : 30px ;
28+ color : # fff ;
29+ background : url ('../img/plugin.png' ) center/cover no-repeat,
30+ linear-gradient (135deg , # e3f2fd 0% , # bbdefb 100% );
31+ border-bottom : 1px solid rgba (255 , 255 , 255 , 0.2 );
32+ }
33+
34+ .header h1 {
35+ font-size : 32px ;
36+ margin-bottom : 15px ;
37+ font-weight : 600 ;
38+ text-shadow : 2px 2px 4px rgba (0 , 0 , 0 , 0.3 );
39+ }
40+
41+ .info {
42+ display : flex;
43+ gap : 20px ;
44+ font-size : 14px ;
45+ opacity : 0.95 ;
46+ }
47+
48+ .info span {
49+ background : rgba (255 , 255 , 255 , 0.2 );
50+ padding : 6px 12px ;
51+ border-radius : 6px ;
52+ backdrop-filter : blur (10px );
53+ }
54+
55+ .plugins-container {
56+ padding : 20px ;
57+ display : grid;
58+ grid-template-columns : repeat (auto-fill, minmax (350px , 1fr ));
59+ gap : 20px ;
60+ }
61+
62+ .plugin-card {
63+ background : # fff ;
64+ border-radius : 12px ;
65+ padding : 20px ;
66+ box-shadow : 0 4px 12px rgba (0 , 0 , 0 , 0.1 );
67+ border : 2px solid # e3f2fd ;
68+ display : flex;
69+ flex-direction : column;
70+ position : relative;
71+ }
72+
73+ .plugin-header {
74+ margin-bottom : 15px ;
75+ }
76+
77+ .plugin-name-row {
78+ display : flex;
79+ align-items : center;
80+ justify-content : space-between;
81+ gap : 10px ;
82+ margin-bottom : 8px ;
83+ }
84+
85+ .plugin-name {
86+ font-size : 18px ;
87+ font-weight : 600 ;
88+ color : # 1a202c ;
89+ word-break : break-word;
90+ flex : 1 ;
91+ line-height : 1.4 ;
92+ }
93+
94+ .platform-badge {
95+ display : inline-flex;
96+ align-items : center;
97+ gap : 4px ;
98+ padding : 4px 10px ;
99+ border-radius : 6px ;
100+ font-size : 11px ;
101+ font-weight : 600 ;
102+ text-transform : uppercase;
103+ white-space : nowrap;
104+ flex-shrink : 0 ;
105+ }
106+
107+ .platform-icon {
108+ font-size : 14px ;
109+ }
110+
111+ .platform-npm {
112+ background : linear-gradient (135deg , # cb3837 0% , # d63031 100% );
113+ color : white;
114+ }
115+
116+ .platform-git {
117+ background : linear-gradient (135deg , # f05032 0% , # ff6b35 100% );
118+ color : white;
119+ }
120+
121+ .platform-app {
122+ background : linear-gradient (135deg , # 66bb6a 0% , # 43a047 100% );
123+ color : white;
124+ }
125+
126+ .plugin-version {
127+ display : inline-block;
128+ padding : 3px 8px ;
129+ background : # e2e8f0 ;
130+ color : # 4a5568 ;
131+ border-radius : 4px ;
132+ font-size : 12px ;
133+ font-weight : 500 ;
134+ }
135+
136+ .plugin-body {
137+ flex : 1 ;
138+ display : flex;
139+ flex-direction : column;
140+ gap : 12px ;
141+ }
142+
143+ .plugin-description {
144+ font-size : 14px ;
145+ line-height : 1.6 ;
146+ color : # 4a5568 ;
147+ word-break : break-word;
148+ flex : 1 ;
149+ }
150+
151+ .no-description {
152+ color : # a0aec0 ;
153+ font-style : italic;
154+ }
155+
156+ .plugin-meta {
157+ display : flex;
158+ flex-direction : column;
159+ gap : 8px ;
160+ padding-top : 10px ;
161+ border-top : 1px solid # e2e8f0 ;
162+ }
163+
164+ .meta-item {
165+ display : flex;
166+ align-items : flex-start;
167+ gap : 8px ;
168+ font-size : 13px ;
169+ }
170+
171+ .meta-label {
172+ color : # 718096 ;
173+ font-weight : 500 ;
174+ white-space : nowrap;
175+ }
176+
177+ .meta-value {
178+ color : # 2d3748 ;
179+ word-break : break-all;
180+ flex : 1 ;
181+ }
182+
183+ .plugin-path {
184+ font-family : 'Consolas' , 'Monaco' , monospace;
185+ font-size : 11px ;
186+ color : # 42a5f5 ;
187+ }
188+
189+ .plugin-footer {
190+ margin-top : 12px ;
191+ padding-top : 12px ;
192+ border-top : 1px solid # e2e8f0 ;
193+ display : flex;
194+ justify-content : flex-end;
195+ }
196+
197+ .plugin-index {
198+ font-size : 12px ;
199+ color : # a0aec0 ;
200+ font-weight : 600 ;
201+ }
202+
203+ .footer {
204+ background : # f8f9fa ;
205+ padding : 15px 30px ;
206+ text-align : center;
207+ color : # 6c757d ;
208+ font-size : 12px ;
209+ border-top : 1px solid # dee2e6 ;
210+ }
0 commit comments