iobroker.staticsfilefolder 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/www/style.css ADDED
@@ -0,0 +1,265 @@
1
+ :root {
2
+ --bg-color: #f4f6f8;
3
+ --card-bg: #ffffff;
4
+ --text-color: #333333;
5
+ --text-muted: #888888;
6
+ --primary-color: #007bff;
7
+ --hover-color: #e9ecef;
8
+ --border-color: #dddddd;
9
+ --today-bg: #e3f2fd;
10
+ --today-border: #90caf9;
11
+ --danger: #dc3545;
12
+ }
13
+
14
+ [data-theme="dark"] {
15
+ --bg-color: #121212;
16
+ --card-bg: #1e1e1e;
17
+ --text-color: #e0e0e0;
18
+ --text-muted: #a0a0a0;
19
+ --primary-color: #bb86fc;
20
+ --hover-color: #333333;
21
+ --border-color: #444444;
22
+ --today-bg: #1f1b24;
23
+ --today-border: #332940;
24
+ --danger: #cf6679;
25
+ }
26
+
27
+ /* Base Styles */
28
+ * {
29
+ box-sizing: border-box;
30
+ font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
31
+ }
32
+
33
+ body {
34
+ margin: 0;
35
+ padding: 0;
36
+ background-color: var(--bg-color);
37
+ color: var(--text-color);
38
+ }
39
+
40
+ /* App Container */
41
+ .app-container {
42
+ display: flex;
43
+ flex-direction: column;
44
+ height: 100vh;
45
+ }
46
+
47
+ /* Header & Toolbar */
48
+ .app-header {
49
+ background: var(--card-bg);
50
+ padding: 15px 20px;
51
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
52
+ z-index: 10;
53
+ }
54
+
55
+ .header-title {
56
+ font-size: 1.5rem;
57
+ font-weight: 600;
58
+ margin-bottom: 15px;
59
+ color: var(--primary-color);
60
+ }
61
+
62
+ .toolbar {
63
+ display: flex;
64
+ flex-wrap: wrap;
65
+ align-items: center;
66
+ gap: 10px;
67
+ }
68
+
69
+ .nav-btn {
70
+ padding: 8px 12px;
71
+ background: var(--card-bg);
72
+ border: 1px solid var(--border-color);
73
+ border-radius: 4px;
74
+ cursor: pointer;
75
+ font-weight: 500;
76
+ transition: all 0.2s ease;
77
+ }
78
+
79
+ .nav-btn:disabled {
80
+ opacity: 0.5;
81
+ cursor: not-allowed;
82
+ }
83
+
84
+ .nav-btn:not(:disabled):hover {
85
+ background: var(--hover-color);
86
+ }
87
+
88
+ .breadcrumb {
89
+ flex-grow: 1;
90
+ font-size: 0.95rem;
91
+ padding: 0 10px;
92
+ color: var(--text-muted);
93
+ }
94
+
95
+ .breadcrumb span {
96
+ cursor: pointer;
97
+ color: var(--primary-color);
98
+ }
99
+ .breadcrumb span:hover {
100
+ text-decoration: underline;
101
+ }
102
+
103
+ .filters {
104
+ display: flex;
105
+ gap: 10px;
106
+ }
107
+
108
+ .filters input, .filters select {
109
+ padding: 8px;
110
+ border: 1px solid var(--border-color);
111
+ border-radius: 4px;
112
+ outline: none;
113
+ background: var(--card-bg);
114
+ color: var(--text-color);
115
+ }
116
+
117
+ .filters input:focus, .filters select:focus {
118
+ border-color: var(--primary-color);
119
+ }
120
+
121
+ /* Main Content */
122
+ .file-list-container {
123
+ flex-grow: 1;
124
+ overflow-y: auto;
125
+ padding: 20px;
126
+ }
127
+
128
+ .file-list {
129
+ display: grid;
130
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
131
+ gap: 15px;
132
+ }
133
+
134
+ /* File Items */
135
+ .file-item {
136
+ background: var(--card-bg);
137
+ border: 1px solid var(--border-color);
138
+ border-radius: 8px;
139
+ padding: 15px;
140
+ text-align: center;
141
+ cursor: pointer;
142
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
143
+ display: flex;
144
+ flex-direction: column;
145
+ align-items: center;
146
+ gap: 10px;
147
+ }
148
+
149
+ .file-item:hover {
150
+ transform: translateY(-2px);
151
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
152
+ }
153
+
154
+ .file-item.is-today {
155
+ background: var(--today-bg);
156
+ border-color: var(--today-border);
157
+ }
158
+
159
+ .file-icon {
160
+ font-size: 3rem;
161
+ }
162
+
163
+ .file-name {
164
+ font-size: 0.9rem;
165
+ font-weight: 500;
166
+ word-break: break-all;
167
+ width: 100%;
168
+ }
169
+
170
+ .file-meta {
171
+ font-size: 0.75rem;
172
+ color: var(--text-muted);
173
+ }
174
+
175
+ .today-badge {
176
+ background: var(--primary-color);
177
+ color: white;
178
+ font-size: 0.65rem;
179
+ padding: 2px 6px;
180
+ border-radius: 12px;
181
+ margin-top: 5px;
182
+ }
183
+
184
+ .empty-state {
185
+ text-align: center;
186
+ padding: 50px;
187
+ color: var(--text-muted);
188
+ font-size: 1.2rem;
189
+ }
190
+
191
+ /* Modal Viewer */
192
+ .modal {
193
+ display: none;
194
+ position: fixed;
195
+ z-index: 1000;
196
+ left: 0;
197
+ top: 0;
198
+ width: 100%;
199
+ height: 100%;
200
+ overflow: auto;
201
+ background-color: rgba(0,0,0,0.8);
202
+ }
203
+
204
+ .modal-content {
205
+ background-color: var(--card-bg);
206
+ margin: 2% auto;
207
+ padding: 20px;
208
+ border: 1px solid var(--border-color);
209
+ width: 90%;
210
+ height: 90%;
211
+ position: relative;
212
+ border-radius: 8px;
213
+ overflow: hidden;
214
+ display: flex;
215
+ flex-direction: column;
216
+ }
217
+
218
+ .close-button {
219
+ color: var(--text-muted);
220
+ align-self: flex-end;
221
+ font-size: 28px;
222
+ font-weight: bold;
223
+ cursor: pointer;
224
+ margin-bottom: 10px;
225
+ }
226
+
227
+ .close-button:hover,
228
+ .close-button:focus {
229
+ color: var(--danger);
230
+ text-decoration: none;
231
+ cursor: pointer;
232
+ }
233
+
234
+ #viewer-body {
235
+ flex-grow: 1;
236
+ overflow: auto;
237
+ background: var(--hover-color);
238
+ display: flex;
239
+ justify-content: center;
240
+ color: var(--text-color);
241
+ }
242
+
243
+ #viewer-body canvas {
244
+ max-width: 100%;
245
+ margin: 10px auto;
246
+ display: block;
247
+ box-shadow: 0 2px 5px rgba(0,0,0,0.3);
248
+ }
249
+
250
+ /* Table styles for excel */
251
+ table.sheetjs-table {
252
+ border-collapse: collapse;
253
+ width: 100%;
254
+ background: var(--card-bg);
255
+ }
256
+
257
+ table.sheetjs-table th, table.sheetjs-table td {
258
+ border: 1px solid var(--border-color);
259
+ padding: 8px;
260
+ text-align: left;
261
+ }
262
+
263
+ table.sheetjs-table th {
264
+ background-color: var(--hover-color);
265
+ }