sensivity 2.5.16 → 2.5.18

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 +43 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sensivity",
3
- "version": "2.5.16",
3
+ "version": "2.5.18",
4
4
  "description": "Sensivity Control Panel",
5
5
  "main": "launcher.js",
6
6
  "bin": {
package/public/css/style.css CHANGED
@@ -112,35 +112,49 @@ 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: 3px; top: 50%;
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
+ transform: translateY(-50%);
145
+ z-index: 1; box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
146
+ }
147
+ .tgl:hover .track { border-color: #343852; }
148
+ .tgl input:checked + .track {
149
+ background: #19180f; border-color: #d4a00c;
150
+ box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px #f0b90b20, 0 4px 12px #f0b90b18;
139
151
  }
140
- .tgl input:checked + .track { border-color: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
141
152
  .tgl input:checked + .track::before { opacity: 1; }
142
153
  .tgl input:checked + .track .knob,
143
- .tgl input:checked ~ .knob { transform: translateX(22px); background: #1a1a0a; }
154
+ .tgl input:checked ~ .knob {
155
+ transform: translate(18px, -50%); background: var(--gold);
156
+ box-shadow: 0 2px 8px #0009, 0 0 10px #f0b90b55, inset 0 1px 0 rgba(255,255,255,.35);
157
+ }
144
158
  .tgl input:disabled + .track { opacity: 0.4; cursor: not-allowed; }
145
159
 
146
160
  /* ===== PREMIUM SLIDER ===== */
@@ -314,19 +328,23 @@ body {
314
328
  #topbar select { max-width: 90px; font-size: 10px; padding: 3px 6px; }
315
329
 
316
330
  #pages {
317
- padding: 8px; grid-template-columns: 1fr; gap: 8px;
331
+ padding: 10px; grid-template-columns: 1fr; gap: 10px;
318
332
  }
319
333
 
320
- .child { padding: 12px 10px; border-radius: 8px; }
321
- .child h3 { font-size: 8px; margin-bottom: 10px; }
334
+ .child { padding: 13px 12px; border-radius: 8px; }
335
+ .child h3 { font-size: 9px; margin-bottom: 12px; letter-spacing: 1.4px; }
322
336
 
323
- .ctrl { margin-bottom: 6px; min-height: 30px; gap: 6px; }
324
- .ctrl label { font-size: 11px; }
337
+ .ctrl { margin-bottom: 8px; min-height: 38px; gap: 10px; }
338
+ .ctrl > label:not(.tgl) {
339
+ font-size: 12px; white-space: normal; overflow: visible;
340
+ text-overflow: clip; word-break: break-word;
341
+ }
325
342
 
326
- .tgl { width: 48px; height: 26px; }
327
- .tgl .knob { height: 20px; width: 20px; }
343
+ .tgl { width: 50px; height: 34px; flex-basis: 50px; }
344
+ .tgl .track { top: 4px; left: 3px; right: 3px; bottom: 4px; }
345
+ .tgl .knob { height: 20px; width: 20px; left: 3px; top: 50%; }
328
346
  .tgl input:checked + .track .knob,
329
- .tgl input:checked ~ .knob { transform: translateX(24px); }
347
+ .tgl input:checked ~ .knob { transform: translate(18px, -50%); }
330
348
 
331
349
  .rng input[type=range] { width: 70px; height: 6px; }
332
350
  .rng input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
@@ -351,4 +369,7 @@ body {
351
369
  #sidebar .tab-btn { width: 34px; height: 36px; min-width: 34px; }
352
370
  #sidebar .tab-btn svg { width: 15px; height: 15px; }
353
371
  .rng input[type=range] { width: 56px; }
372
+ .ctrl { gap: 8px; }
373
+ .ctrl > label:not(.tgl) { font-size: 11px; }
374
+ .tgl { width: 48px; flex-basis: 48px; }
354
375
  }