Skip to content

Commit 41dbedb

Browse files
adrighemadrighem
authored
Merge pull request #22 from MadPatrick/master
MadPatrick: Change layout to new Domoticz style
2 parents 13f0bf4 + c74b515 commit 41dbedb

1 file changed

Lines changed: 148 additions & 93 deletions

File tree

‎pypluginstore.html‎

Lines changed: 148 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,61 @@
11
<style>
22
:root {
3-
--bg-color: #f4f4f9;
4-
--text-color: #333;
5-
--card-bg: #fff;
6-
--border-color: #ddd;
7-
--primary: #007bff;
8-
--primary-hover: #0056b3;
9-
--danger: #dc3545;
10-
--danger-hover: #c82333;
11-
--success: #28a745;
12-
--muted: #6c757d;
13-
--muted-hover: #5a6268;
3+
--bg-color: #1a2035;
4+
--panel-bg: #1e2d45;
5+
--card-bg: #162035;
6+
--card-bg-hover: #1c2a42;
7+
--border-color: rgba(255,255,255,0.18);
8+
--text-color: #c8d6e8;
9+
--text-muted: #6b82a0;
10+
--text-heading: #e0eaf5;
11+
--primary: #4a9eda;
12+
--primary-hover: #5baee8;
13+
--danger: #e05c6a;
14+
--danger-hover: #f06878;
15+
--success: #3abf7e;
16+
--success-hover: #4acf8e;
17+
--accent: #4a9eda;
18+
--input-bg: #152032;
19+
--select-bg: #152032;
1420
}
1521

1622
#pypluginstore-container {
1723
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
1824
color: var(--text-color);
1925
padding: 20px;
26+
background: var(--bg-color);
27+
min-height: 100%;
28+
box-sizing: border-box;
2029
}
2130

2231
#pypluginstore-container .header {
2332
display: flex;
2433
justify-content: space-between;
2534
align-items: center;
26-
gap: 12px;
27-
margin-bottom: 20px;
28-
flex-wrap: wrap;
35+
margin-bottom: 24px;
36+
padding-bottom: 16px;
37+
border-bottom: 1px solid var(--border-color);
2938
}
3039

3140
#pypluginstore-container h1 {
3241
margin: 0;
33-
color: var(--primary);
34-
}
35-
36-
#PyPluginStore-status {
37-
font-weight: bold;
38-
color: #666;
39-
}
40-
41-
#pypluginstore-container .header-actions {
42+
font-size: 1.4em;
43+
font-weight: 600;
44+
color: var(--text-heading);
45+
letter-spacing: 0.02em;
46+
}
47+
48+
#pypluginstore-status {
49+
font-weight: 500;
50+
font-size: 0.85em;
51+
color: var(--text-muted);
52+
background: rgba(74, 158, 218, 0.1);
53+
border: 1px solid rgba(74, 158, 218, 0.2);
54+
padding: 5px 12px;
55+
border-radius: 20px;
56+
}
57+
58+
#pypluginstore-container .header-actions {
4259
display: flex;
4360
gap: 12px;
4461
align-items: center;
@@ -48,32 +65,48 @@
4865

4966
#pypluginstore-container .filters {
5067
display: flex;
51-
gap: 20px;
68+
gap: 14px;
5269
margin-bottom: 20px;
5370
align-items: center;
54-
background: var(--card-bg);
55-
padding: 15px;
56-
border-radius: 8px;
71+
background: var(--panel-bg);
72+
padding: 14px 18px;
73+
border-radius: 10px;
5774
border: 1px solid var(--border-color);
5875
flex-wrap: wrap;
76+
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
5977
}
6078

6179
#pypluginstore-container .filters input[type="text"] {
6280
flex-grow: 1;
63-
padding: 8px 12px;
64-
border: 1px solid var(--border-color);
65-
border-radius: 4px;
66-
font-size: 1em;
81+
padding: 8px 14px;
82+
border: 1px solid rgba(255,255,255,0.1);
83+
border-radius: 6px;
84+
font-size: 0.9em;
6785
min-width: 200px;
86+
background: var(--input-bg);
87+
color: var(--text-color);
88+
outline: none;
89+
transition: border-color 0.2s;
90+
}
91+
92+
#pypluginstore-container .filters input[type="text"]:focus {
93+
border-color: var(--primary);
94+
box-shadow: 0 0 0 3px rgba(74, 158, 218, 0.15);
95+
}
96+
97+
#pypluginstore-container .filters input[type="text"]::placeholder {
98+
color: var(--text-muted);
6899
}
69100

70101
#pypluginstore-container .filters label {
71102
display: flex;
72103
align-items: center;
73-
gap: 12px;
74-
font-weight: bold;
104+
gap: 10px;
105+
font-weight: 500;
106+
font-size: 0.9em;
75107
cursor: pointer;
76108
user-select: none;
109+
color: var(--text-color);
77110
}
78111

79112
#pypluginstore-container .sort-controls {
@@ -85,24 +118,32 @@
85118
#pypluginstore-container .sort-controls label {
86119
margin: 0;
87120
font-weight: normal;
88-
font-size: 0.95em;
121+
font-size: 0.85em;
122+
color: var(--text-muted);
89123
}
90124

91125
#pypluginstore-container .sort-controls select {
92126
padding: 8px 12px;
93-
border: 1px solid var(--border-color);
94-
border-radius: 4px;
95-
font-size: 1em;
96-
background: white;
127+
border: 1px solid rgba(255,255,255,0.1);
128+
border-radius: 6px;
129+
font-size: 0.88em;
130+
background: var(--select-bg);
131+
color: var(--text-color);
97132
cursor: pointer;
133+
outline: none;
134+
transition: border-color 0.2s;
135+
}
136+
137+
#pypluginstore-container .sort-controls select:focus {
138+
border-color: var(--primary);
98139
}
99140

100141
/* Switch styling */
101142
.switch {
102143
position: relative;
103144
display: inline-block;
104-
width: 50px;
105-
height: 24px;
145+
width: 46px;
146+
height: 22px;
106147
}
107148

108149
.switch input {
@@ -118,122 +159,136 @@
118159
left: 0;
119160
right: 0;
120161
bottom: 0;
121-
background-color: #ccc;
122-
transition: .4s;
123-
border-radius: 24px;
162+
background-color: rgba(255,255,255,0.1);
163+
transition: .3s;
164+
border-radius: 22px;
165+
border: 1px solid rgba(255,255,255,0.12);
124166
}
125167

126168
.slider:before {
127169
position: absolute;
128170
content: "";
129-
height: 18px;
130-
width: 18px;
131-
left: 3px;
132-
bottom: 3px;
133-
background-color: white;
134-
transition: .4s;
171+
height: 16px;
172+
width: 16px;
173+
left: 2px;
174+
bottom: 2px;
175+
background-color: #8ea8c0;
176+
transition: .3s;
135177
border-radius: 50%;
136178
}
137179

138180
input:checked + .slider {
139-
background-color: var(--success);
140-
}
141-
142-
input:focus + .slider {
143-
box-shadow: 0 0 1px var(--success);
181+
background-color: rgba(58, 191, 126, 0.3);
182+
border-color: var(--success);
144183
}
145184

146185
input:checked + .slider:before {
147-
transform: translateX(26px);
186+
transform: translateX(24px);
187+
background-color: var(--success);
148188
}
149189

150190
#pypluginstore-container .grid {
151191
display: grid;
152192
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
153-
gap: 20px;
193+
gap: 16px;
154194
}
155195

156196
#pypluginstore-container .card {
157197
background: var(--card-bg);
158198
border: 1px solid var(--border-color);
159-
border-radius: 8px;
160-
padding: 15px;
161-
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
199+
border-radius: 10px;
200+
padding: 18px;
201+
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
162202
display: flex;
163203
flex-direction: column;
204+
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
205+
}
206+
207+
#pypluginstore-container .card:hover {
208+
border-color: rgba(74, 158, 218, 0.65);
209+
background: var(--card-bg-hover);
210+
box-shadow: 0 6px 24px rgba(0,0,0,0.35);
164211
}
165212

166213
#pypluginstore-container .card-header {
167-
font-size: 1.1em;
168-
font-weight: bold;
214+
font-size: 1em;
215+
font-weight: 600;
169216
margin-bottom: 10px;
217+
color: var(--text-heading);
218+
display: flex;
219+
align-items: center;
220+
flex-wrap: wrap;
221+
gap: 6px;
170222
}
171223

172224
#pypluginstore-container .card-desc {
173-
font-size: 0.9em;
174-
color: #666;
175-
margin-bottom: 15px;
225+
font-size: 0.85em;
226+
color: var(--text-muted);
227+
margin-bottom: 14px;
176228
flex-grow: 1;
229+
line-height: 1.5;
177230
}
178231

179232
#pypluginstore-container .card-meta {
180-
font-size: 0.8em;
181-
color: #888;
182-
margin-bottom: 15px;
233+
font-size: 0.78em;
234+
color: var(--text-muted);
235+
margin-bottom: 14px;
236+
line-height: 1.7;
237+
padding-top: 10px;
238+
border-top: 1px solid var(--border-color);
183239
}
184240

185241
#pypluginstore-container .actions {
186242
display: flex;
187-
gap: 10px;
243+
gap: 8px;
188244
align-items: stretch;
189245
}
190246

191247
#pypluginstore-container button,
192248
#pypluginstore-container .btn-link {
193-
padding: 8px 12px;
249+
padding: 7px 12px;
194250
border: none;
195-
border-radius: 4px;
251+
border-radius: 6px;
196252
cursor: pointer;
197-
font-weight: bold;
253+
font-weight: 600;
198254
flex: 1;
199-
transition: background 0.2s;
200-
font-size: 13.3333px; /* Match default button font size */
255+
transition: background 0.2s, box-shadow 0.2s;
256+
font-size: 0.82em;
201257
font-family: inherit;
202258
display: flex;
203259
align-items: center;
204260
justify-content: center;
205261
text-decoration: none;
206262
box-sizing: border-box;
207-
min-height: 35px;
263+
min-height: 32px;
264+
letter-spacing: 0.02em;
208265
}
209266

210-
.btn-install { background: var(--primary); color: white; }
211-
.btn-install:hover { background: var(--primary-hover); }
212-
213-
.btn-remove { background: var(--danger); color: white; }
214-
.btn-remove:hover { background: var(--danger-hover); }
267+
#pypluginstore-container .btn-install { background: rgba(74, 158, 218, 0.25) !important; color: var(--primary) !important; border: 1px solid rgba(74, 158, 218, 0.65) !important; }
268+
#pypluginstore-container .btn-install:hover { background: rgba(74, 158, 218, 0.28) !important; }
215269

216-
.btn-update-current { background: var(--muted); color: white; }
217-
.btn-update-current:hover { background: var(--muted-hover); }
270+
#pypluginstore-container .btn-remove { background: rgba(224, 92, 106, 0.15) !important; color: var(--danger) !important; border: 1px solid rgba(224, 92, 106, 0.65) !important; }
271+
#pypluginstore-container .btn-remove:hover { background: rgba(224, 92, 106, 0.28) !important; }
218272

219-
.btn-update-available { background: var(--primary); color: white; }
220-
.btn-update-available:hover { background: var(--primary-hover); }
273+
#pypluginstore-container .btn-update { background: rgba(58, 191, 126, 0.15) !important; color: var(--success) !important; border: 1px solid rgba(58, 191, 126, 0.65) !important; }
274+
#pypluginstore-container .btn-update:hover { background: rgba(58, 191, 126, 0.28) !important; }
221275

222-
.btn-restart { background: #343a40; color: white; flex: 0 0 auto !important; }
223-
.btn-restart:hover { background: #23272b; }
224-
225-
.btn-info { background: #17a2b8; color: white; }
226-
.btn-info:hover { background: #138496; }
276+
#pypluginstore-container .btn-info { background: rgba(107, 130, 160, 0.15) !important; color: #8ea8c0 !important; border: 1px solid rgba(107,130,160,0.65) !important; text-decoration: none !important; }
277+
#pypluginstore-container .btn-info:hover { background: rgba(107, 130, 160, 0.28) !important; }
227278

279+
.btn-restart { background: #343a40; color: white; flex: 0 0 auto !important; }
280+
.btn-restart:hover { background: #23272b; }
281+
228282
.installed-badge {
229283
display: inline-block;
230-
background: var(--success);
231-
color: white;
232-
padding: 2px 6px;
284+
background: rgba(58, 191, 126, 0.18);
285+
color: var(--success);
286+
border: 1px solid rgba(58, 191, 126, 0.4);
287+
padding: 2px 8px;
233288
border-radius: 10px;
234289
font-size: 0.7em;
235-
margin-left: 10px;
236-
vertical-align: middle;
290+
font-weight: 600;
291+
letter-spacing: 0.03em;
237292
}
238293
</style>
239294

0 commit comments

Comments
 (0)