sensivity 2.5.16 → 2.5.17

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/public/css/style.css +42 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sensivity",
3
- "version": "2.5.16",
3
+ "version": "2.5.17",
4
4
  "description": "Sensivity Control Panel",
5
5
  "main": "launcher.js",
6
6
  "bin": {
package/public/css/style.css CHANGED
@@ -112,35 +112,48 @@ body {
112
112
  /* ===== CONTROL ===== */
113
113
  .ctrl {
114
114
  margin-bottom: 8px; display: flex; align-items: center;
115
- justify-content: space-between; gap: 10px; min-height: 32px;
115
+ justify-content: space-between; gap: 10px; min-height: 34px;
116
116
  }
117
- .ctrl label { font-size: 12px; color: var(--text2); flex: 1; transition: color 0.15s; }
118
- .ctrl:hover label { color: var(--text); }
117
+ .ctrl > label:not(.tgl) {
118
+ font-size: 12px; color: var(--text2); flex: 1 1 auto;
119
+ min-width: 0; line-height: 1.3; transition: color 0.15s;
120
+ overflow: hidden; text-overflow: ellipsis;
121
+ }
122
+ .ctrl:hover > label:not(.tgl) { color: var(--text); }
119
123
 
120
124
  /* ===== PREMIUM TOGGLE ===== */
121
125
  .tgl {
122
- position: relative; width: 44px; height: 24px; flex-shrink: 0;
126
+ position: relative; width: 46px; height: 28px; flex: 0 0 46px;
127
+ display: inline-flex; align-items: center; justify-content: center;
123
128
  }
124
129
  .tgl input { opacity: 0; width: 0; height: 0; }
125
130
  .tgl .track {
126
- position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
127
- background: var(--bg4); border-radius: 12px; transition: all 0.3s ease;
128
- border: 1px solid var(--border); overflow: hidden;
131
+ position: absolute; cursor: pointer; top: 2px; left: 2px; right: 2px; bottom: 2px;
132
+ background: #151625; border-radius: 999px; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
133
+ border: 1px solid #262942; overflow: hidden;
134
+ box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
129
135
  }
130
136
  .tgl .track::before {
131
137
  content: ''; position: absolute; inset: 0;
132
- background: linear-gradient(135deg, var(--gold), var(--gold2));
133
- opacity: 0; transition: opacity 0.3s;
138
+ background: radial-gradient(circle at 80% 50%, #f0b90b55, transparent 55%);
139
+ opacity: 0; transition: opacity 0.2s ease;
134
140
  }
135
141
  .tgl .knob {
136
- position: absolute; height: 18px; width: 18px; left: 2px; bottom: 2px;
137
- background: var(--text3); border-radius: 50%; transition: all 0.3s cubic-bezier(.4,0,.2,1);
138
- z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,.3);
142
+ position: absolute; height: 18px; width: 18px; left: 5px; top: 5px;
143
+ background: #767b94; border-radius: 50%; transition: transform 0.22s cubic-bezier(.4,0,.2,1), background 0.2s ease, box-shadow 0.2s ease;
144
+ z-index: 1; box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
145
+ }
146
+ .tgl:hover .track { border-color: #343852; }
147
+ .tgl input:checked + .track {
148
+ background: #19180f; border-color: #d4a00c;
149
+ box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px #f0b90b20, 0 4px 12px #f0b90b18;
139
150
  }
140
- .tgl input:checked + .track { border-color: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
141
151
  .tgl input:checked + .track::before { opacity: 1; }
142
152
  .tgl input:checked + .track .knob,
143
- .tgl input:checked ~ .knob { transform: translateX(22px); background: #1a1a0a; }
153
+ .tgl input:checked ~ .knob {
154
+ transform: translateX(18px); background: var(--gold);
155
+ box-shadow: 0 2px 8px #0009, 0 0 10px #f0b90b55, inset 0 1px 0 rgba(255,255,255,.35);
156
+ }
144
157
  .tgl input:disabled + .track { opacity: 0.4; cursor: not-allowed; }
145
158
 
146
159
  /* ===== PREMIUM SLIDER ===== */
@@ -314,19 +327,23 @@ body {
314
327
  #topbar select { max-width: 90px; font-size: 10px; padding: 3px 6px; }
315
328
 
316
329
  #pages {
317
- padding: 8px; grid-template-columns: 1fr; gap: 8px;
330
+ padding: 10px; grid-template-columns: 1fr; gap: 10px;
318
331
  }
319
332
 
320
- .child { padding: 12px 10px; border-radius: 8px; }
321
- .child h3 { font-size: 8px; margin-bottom: 10px; }
333
+ .child { padding: 13px 12px; border-radius: 8px; }
334
+ .child h3 { font-size: 9px; margin-bottom: 12px; letter-spacing: 1.4px; }
322
335
 
323
- .ctrl { margin-bottom: 6px; min-height: 30px; gap: 6px; }
324
- .ctrl label { font-size: 11px; }
336
+ .ctrl { margin-bottom: 8px; min-height: 38px; gap: 10px; }
337
+ .ctrl > label:not(.tgl) {
338
+ font-size: 12px; white-space: normal; overflow: visible;
339
+ text-overflow: clip; word-break: break-word;
340
+ }
325
341
 
326
- .tgl { width: 48px; height: 26px; }
327
- .tgl .knob { height: 20px; width: 20px; }
342
+ .tgl { width: 50px; height: 34px; flex-basis: 50px; }
343
+ .tgl .track { top: 4px; left: 3px; right: 3px; bottom: 4px; }
344
+ .tgl .knob { height: 20px; width: 20px; left: 6px; top: 7px; }
328
345
  .tgl input:checked + .track .knob,
329
- .tgl input:checked ~ .knob { transform: translateX(24px); }
346
+ .tgl input:checked ~ .knob { transform: translateX(18px); }
330
347
 
331
348
  .rng input[type=range] { width: 70px; height: 6px; }
332
349
  .rng input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
@@ -351,4 +368,7 @@ body {
351
368
  #sidebar .tab-btn { width: 34px; height: 36px; min-width: 34px; }
352
369
  #sidebar .tab-btn svg { width: 15px; height: 15px; }
353
370
  .rng input[type=range] { width: 56px; }
371
+ .ctrl { gap: 8px; }
372
+ .ctrl > label:not(.tgl) { font-size: 11px; }
373
+ .tgl { width: 48px; flex-basis: 48px; }
354
374
  }