├── LICENSE
├── README.md
├── assets
├── bg.png
├── cursors
│ ├── colorpicker.png
│ ├── default.png
│ ├── grab.png
│ ├── open.png
│ ├── pointer.png
│ └── text.png
├── discord.png
├── favicon.png
├── fonts
│ └── SF-Pro.ttf
├── github.png
├── loading.png
├── loadspinner.png
├── script.js
├── twitter.png
└── youtube.png
├── fonts
└── SF-Pro.ttf
├── icon.png
├── index.html
├── manifest.json
└── style.css
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 BrocoDev
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | VisionTab - VisionOS NewTab for Chromium
6 |
7 |
8 | Download Discord BrocoDev's Twitter KewlAid's Twitter
16 |
17 | ## Overview
18 |
19 | VisionTab is a VisionOS styled New Tab for Chromium based web browsers. It's sleek, customizable, and recognizable.
20 |
21 | **VisionTab Safari Port**
22 | https://github.com/ntcrft/VisionTab-safari
23 |
24 | ## How to Install:
25 | 1. Download the .zip file frm the latest/preferred release.
26 | 2. Extract the .zip file.
27 | 3. On the top right of chrome, click the puzzle icon
28 | 4. Select 'Manage Extensions'
29 | 5. Enable Developer Mode on the top right of the newly opened page.
30 | 6. Select 'Load Unpacked'
31 | 7. Select the extracted folder. If there are subfolders, keep opening them until you reach the folder that contains the source code.
32 | 8. Enjoy!
33 |
34 | ## Credits
35 |
150 |
152 |
153 | `;
154 |
155 | addShortcutsContainer.appendChild(shortcutWrapper);
156 |
157 | let actionIcon = document.createElement('a');
158 | actionIcon.href = shortcut.url;
159 | actionIcon.classList.add('action-icon');
160 | actionIcon.innerHTML = `Unable to fetch weather information
';
277 | });
278 | }, error => {
279 | console.error('Error getting location:', error);
280 | document.getElementById('weather-info').innerHTML = 'Unable to retrieve your location
';
281 | });
282 | } else {
283 | console.error('Geolocation is not supported by this browser');
284 | document.getElementById('weather-info').innerHTML = 'Geolocation is not supported by this browser
';
285 | }
286 | }
287 |
288 | function displayCurrentWeather(data) {
289 | const temperature = data.current_weather.temperature;
290 | const weatherCode = data.current_weather.weathercode;
291 |
292 | const high = Math.max(...data.hourly.temperature_2m.slice(0, 24));
293 | const low = Math.min(...data.hourly.temperature_2m.slice(0, 24));
294 |
295 | const weatherDescription = getWeatherDescription(weatherCode);
296 |
297 | const weatherHTML = `
298 | Weather
299 |
300 |
301 |
${temperature}°
302 |
303 |
304 |
${weatherDescription}
305 |
H: ${high}° L: ${low}°
306 |
307 |
336 |
${hour}${is24HourFormat ? ':00' : period}
337 |
${weatherDescription.icon}
338 |
${temperature}°
339 |
345 | ${forecastHTML.join('')}
346 |
347 | `;
348 |
349 | const weatherInfoElement = document.getElementById('weather-info');
350 | weatherInfoElement.innerHTML += hourlyForecastHTML;
351 |
352 | const forecastHourElements = document.querySelectorAll('.forecast-hour');
353 | forecastHourElements.forEach((element) => {
354 | element.classList.remove('fade-in');
355 | setTimeout(() => {
356 | element.classList.remove('fade-in');
357 | }, 500);
358 | });
359 | }
360 |
361 |
362 |
363 | function getWeatherIcon(code) {
364 | const weatherDetails = {
365 | 0: { icon: '', color: '#ffcc00' },
366 | 1: { icon: '', color: '#999999' },
367 | 2: { icon: '', color: '#999999' },
368 | 3: { icon: '', color: '#999999' },
369 | 45: { icon: '', color: '#999999' },
370 | 48: { icon: '', color: '#999999' },
371 | 51: { icon: '', color: '#009dff' },
372 | 53: { icon: '', color: '#009dff' },
373 | 55: { icon: '', color: '#009dff' },
374 | 61: { icon: '', color: '#009dff' },
375 | 63: { icon: '', color: '#009dff' },
376 | 65: { icon: '', color: '#009dff' },
377 | 71: { icon: '', color: '#ffffff' },
378 | 73: { icon: '', color: '#ffffff' },
379 | 75: { icon: '', color: '#ffffff' },
380 | 95: { icon: '', color: '#b88400' },
381 | };
382 |
383 | return weatherDetails[code] || { icon: 'Unknown', color: '#ffcc00' };
384 | }
385 |
386 |
387 | function getWeatherDescription(code) {
388 | const weatherCodes = {
389 | 0: 'Clear sky',
390 | 1: 'Mainly clear',
391 | 2: 'Partly cloudy',
392 | 3: 'Overcast',
393 | 45: 'Fog',
394 | 48: 'Depositing rime fog',
395 | 51: 'Light drizzle',
396 | 53: 'Moderate drizzle',
397 | 55: 'Dense drizzle',
398 | 61: 'Slight rain',
399 | 63: 'Moderate rain',
400 | 65: 'Heavy rain',
401 | 71: 'Slight snow fall',
402 | 73: 'Moderate snow fall',
403 | 75: 'Heavy snow fall',
404 | 95: 'Thunderstorm',
405 | };
406 |
407 | return weatherCodes[code] || 'Unknown';
408 | }
409 |
410 | document.addEventListener('DOMContentLoaded', function() {
411 | var settingsButton = document.querySelector('#settings-button');
412 | var settingsMenu = document.querySelector('#settings-menu');
413 | var closeButton = settingsMenu.querySelector('#settings-close');
414 |
415 | settingsButton.onclick = function() {
416 | settingsMenu.classList.toggle('open');
417 | }
418 |
419 | closeButton.onclick = function() {
420 | settingsMenu.classList.toggle('open');
421 | }
422 |
423 | window.onclick = function(event) {
424 | if (event.target == settingsMenu) {
425 | settingsMenu.classList.toggle('open');
426 | }
427 | }
428 | });
429 |
430 | updateDateTime();
431 | setInterval(updateDateTime, 1000);
432 | fetchWeather();
433 |
434 |
435 | document.addEventListener('DOMContentLoaded', () => {
436 | const elements = {
437 | 'clock-color': document.getElementById('clock-color'),
438 | 'clock-color-alpha': document.getElementById('clock-alpha'),
439 | 'clock-stretch': document.getElementById('clock-stretch'),
440 | 'clock-sizevalue': document.getElementById('clock-sizevalue'),
441 | 'clock-colon': document.getElementById('clock-colon'),
442 | 'clock-colon-alpha': document.getElementById('clock-colon-alpha'),
443 |
444 | 'date-color': document.getElementById('date-color'),
445 | 'date-color-alpha': document.getElementById('date-alpha'),
446 | 'date-sizevalue': document.getElementById('date-sizevalue'),
447 |
448 | 'base-background': document.getElementById('base-background'),
449 | 'base-background-alpha': document.getElementById('base-alpha'),
450 |
451 | 'baseborder-color': document.getElementById('baseborder-color'),
452 | 'baseborder-color-alpha': document.getElementById('baseborder-color-alpha'),
453 | 'baseborder-widthvalue': document.getElementById('baseborder-widthvalue'),
454 | 'base-roundvalue': document.getElementById('base-roundvalue'),
455 |
456 | 'baseshadow-hoz': document.getElementById('baseshadow-hoz'),
457 | 'baseshadow-ver': document.getElementById('baseshadow-ver'),
458 | 'baseshadow-blur': document.getElementById('baseshadow-blur'),
459 | 'baseshadow-color': document.getElementById('baseshadow-color'),
460 | 'baseshadow-color-alpha': document.getElementById('baseshadow-color-alpha'),
461 |
462 | 'base-blurvalue': document.getElementById('base-blurvalue'),
463 |
464 | 'sc-roundness': document.getElementById('sc-roundness'),
465 | 'sb-background': document.getElementById('sb-background'),
466 | 'sb-background-alpha': document.getElementById('sb-alpha'),
467 |
468 | 'resetButton': document.getElementById('reset-settings')
469 | };
470 |
471 | const cssVars = [
472 | 'clock-color', 'clock-colon', 'clock-sizevalue', 'clock-stretch',
473 | 'date-color', 'date-sizevalue',
474 | 'base-background', 'baseborder-color', 'baseborder-widthvalue',
475 | 'baseshadow-hoz', 'baseshadow-ver', 'baseshadow-blur', 'baseshadow-color', 'baseshadow-color-alpha',
476 | 'base-roundvalue',
477 | 'base-blurvalue',
478 | 'sc-roundness', 'sb-background'
479 | ];
480 |
481 | // Store default CSS values
482 | const defaultCssValues = {};
483 | cssVars.forEach(cssVar => {
484 | defaultCssValues[cssVar] = getComputedStyle(document.documentElement).getPropertyValue(`--${cssVar}`).trim();
485 | });
486 |
487 | // Load saved settings
488 | chrome.storage.local.get(cssVars, (result) => {
489 | cssVars.forEach(cssVar => {
490 | if (result[cssVar]) {
491 | applyAndSaveSetting(cssVar, result[cssVar]);
492 | }
493 | });
494 | });
495 |
496 | // Add event listeners for real-time updates
497 | cssVars.forEach(cssVar => {
498 | const element = elements[cssVar];
499 | const alphaElement = elements[`${cssVar}-alpha`];
500 |
501 | if (element) {
502 | element.addEventListener('input', () => updateSetting(cssVar));
503 | }
504 | if (alphaElement) {
505 | alphaElement.addEventListener('input', () => updateSetting(cssVar));
506 | }
507 | });
508 |
509 | elements.resetButton.addEventListener('click', () => {
510 | chrome.storage.local.clear();
511 | location.reload();
512 | });
513 |
514 | function updateSetting(cssVar) {
515 | const element = elements[cssVar];
516 | const alphaElement = elements[`${cssVar}-alpha`];
517 | let value;
518 |
519 | if (element && element.value === '') {
520 | // If input is empty, use the default value
521 | value = defaultCssValues[cssVar];
522 | } else if (element && alphaElement) {
523 | const alpha = alphaElement.value;
524 | value = hexToRGBA(element.value, alpha);
525 | } else if (element) {
526 | value = element.value;
527 | }
528 |
529 | if (value) {
530 | applyAndSaveSetting(cssVar, value);
531 | }
532 | }
533 |
534 | function applyAndSaveSetting(cssVar, value) {
535 | document.documentElement.style.setProperty(`--${cssVar}`, value);
536 | const element = elements[cssVar];
537 | if (element) {
538 | if (element.type === 'color') {
539 | // Convert RGBA to HEX
540 | let rgba = value.match(/\d+/g);
541 | if (rgba && rgba.length >= 3) {
542 | let hex = '#' + ((1 << 24) + (parseInt(rgba[0]) << 16) + (parseInt(rgba[1]) << 8) + parseInt(rgba[2])).toString(16).slice(1);
543 | element.value = hex;
544 | }
545 | } else {
546 | element.value = value !== defaultCssValues[cssVar] ? value : '';
547 | }
548 | }
549 | // Save to storage only if it's different from the default
550 | if (value !== defaultCssValues[cssVar]) {
551 | chrome.storage.local.set({ [cssVar]: value });
552 | } else {
553 | chrome.storage.local.remove(cssVar);
554 | }
555 | }
556 |
557 | // Debugging logs
558 | console.log('Customization menu loaded.');
559 | console.log('Default CSS values:', defaultCssValues);
560 | cssVars.forEach(cssVar => {
561 | const element = elements[cssVar];
562 | if (element) {
563 | console.log(`Current ${cssVar}:`, element.value);
564 | } else {
565 | console.warn(`Element for ${cssVar} not found`);
566 | }
567 | });
568 | });
569 |
570 | function hexToRGBA(hex, alpha) {
571 | let r = parseInt(hex.slice(1, 3), 16),
572 | g = parseInt(hex.slice(3, 5), 16),
573 | b = parseInt(hex.slice(5, 7), 16);
574 | return `rgba(${r}, ${g}, ${b}, ${alpha})`;
575 | }
576 |
577 |
578 | // Function to get and display the CSS variable value from the or :root element
579 | function updateSliderValues() {
580 | // Get the current value of the --clock-size variable from the or :root element
581 | const rootElement = document.documentElement;
582 | const clockStretch = getComputedStyle(rootElement).getPropertyValue('--clock-stretch').trim();
583 | const clockSize = getComputedStyle(rootElement).getPropertyValue('--clock-sizevalue').trim();
584 | const dateSize = getComputedStyle(rootElement).getPropertyValue('--date-sizevalue').trim();
585 | const baseBlur = getComputedStyle(rootElement).getPropertyValue('--base-blurvalue').trim();
586 | const borderWidth = getComputedStyle(rootElement).getPropertyValue('--baseborder-widthvalue').trim();
587 | const shadowBlur = getComputedStyle(rootElement).getPropertyValue('--baseshadow-blur').trim();
588 | const shadowHoz = getComputedStyle(rootElement).getPropertyValue('--baseshadow-hoz').trim();
589 | const shadowVer = getComputedStyle(rootElement).getPropertyValue('--baseshadow-ver').trim();
590 |
591 | // Update the element with the clock size
592 | document.getElementById('clock-stretch-value').textContent = clockStretch + "%";
593 | document.getElementById('clocksize-value').textContent = clockSize + "px";
594 | document.getElementById('datesize-value').textContent = dateSize + "px";
595 | document.getElementById('base-blur-value').textContent = baseBlur + "px";
596 | document.getElementById('baseborder-width-value').textContent = borderWidth + "px";
597 | document.getElementById('baseshadow-blur-value').textContent = shadowBlur + "px";
598 | document.getElementById('baseshadow-hoz-value').textContent = shadowHoz + "px";
599 | document.getElementById('baseshadow-ver-value').textContent = shadowVer + "px";
600 | }
601 |
602 | // Call the function initially to display the current clock size
603 | updateSliderValues();
604 |
605 | // Set up an interval to continuously check and update the clock size every 100ms
606 | setInterval(updateSliderValues, 100);
607 |
608 |
609 |
610 | window.onload = function() {
611 | document.getElementById("loadingscreen").classList.add("loaded");
612 | };
613 |
--------------------------------------------------------------------------------
/assets/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/twitter.png
--------------------------------------------------------------------------------
/assets/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/youtube.png
--------------------------------------------------------------------------------
/fonts/SF-Pro.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/fonts/SF-Pro.ttf
--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/icon.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | VisionTab
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 | :
20 |
22 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
90 |
91 |
92 |
351 |
352 |
353 |
357 |
416 |
417 |
418 |
419 |
420 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "VisionTab",
3 | "description": "A customizable new-tab page based on Apple's VisionOS",
4 | "version": "1.3",
5 | "manifest_version": 3,
6 | "chrome_url_overrides": { "newtab": "index.html" },
7 | "permissions": ["storage"],
8 | "content_scripts": [
9 | {
10 | "matches": [""],
11 | "js": ["assets/script.js"]
12 | }
13 | ]
14 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'SF Pro';
3 | src: url('assets/fonts/SF-Pro.ttf') format('truetype');
4 | font-stretch: 0 1000;
5 | font-weight: 100 900;
6 | font-style: normal;
7 | }
8 |
9 | * {
10 | cursor: url(assets/cursors/default.png) 5 0, auto;
11 | font-family: 'SF Pro', sans-serif;
12 | color: white;
13 | margin: 0;
14 | transition: all 0.3s cubic-bezier(0.29, -0.03, 0.16, 0.96);
15 | animation: auto;
16 | text-decoration: none;
17 | cursor: inherit;
18 | }
19 |
20 | :root {
21 | /* BACKGROUND */
22 | /* background */
23 | --bg-img: url(bg.png);
24 |
25 |
26 | /* CLOCK */
27 | /* color of the clock */
28 | --clock-color: rgba(255, 255, 255, 1.00);
29 | --clock-stretch: 132;
30 |
31 | /* color of the clock's colon */
32 | --clock-colon: rgba(255, 255, 255, 0.50);
33 |
34 | /* size of the clock */
35 | --clock-sizevalue: 100;
36 | --clock-size: calc(var(--clock-sizevalue) * 1px);
37 |
38 |
39 | /* DATE */
40 | /* color of the date */
41 | --date-color: rgba(255, 255, 255, 0.75);
42 |
43 | /* size of the date */
44 | --date-sizevalue: 25;
45 | --date-size: calc(var(--date-sizevalue) * 1px);
46 |
47 |
48 |
49 | /* BASES ; more menu and main menu */
50 | /* color of the base */
51 | --base-background: rgba(255, 255, 255, 0);
52 |
53 | /* border of the base;
54 | - width *SOLID* color */
55 | --baseborder-widthvalue: 1;
56 | --baseborder-width: calc(var(--baseborder-widthvalue) * 1px);
57 | --baseborder-color: rgba(255, 255, 255, 0.10);
58 | --base-border: var(--baseborder-width) solid var(--baseborder-color);
59 |
60 | /* roundness of the base */
61 | --base-roundvalue: 24;
62 | --base-roundness: calc(var(--base-roundvalue) * 1px);
63 |
64 | /* shadow of the base;
65 | - hoz-offset ver-offset blur-strength color*/
66 | --baseshadow-hoz: 0;
67 | --baseshadow-ver: 0;
68 | --baseshadow-blur: 20;
69 | --baseshadow-color: rgba(0, 0, 0, 0.5);
70 | --base-shadow: calc(var(--baseshadow-hoz) * 1px) calc(var(--baseshadow-ver) * 1px) calc(var(--baseshadow-blur) * 1px) var(--baseshadow-color);
71 |
72 | /* blur of the base */
73 | --base-blurvalue: 20;
74 | --base-blur: calc(var(--base-blurvalue) * 1px);
75 |
76 |
77 |
78 | /* SHORTCUTS */
79 | /* show the shortcut label (edited in html file);
80 | - set to auto if yes, set to none if no */
81 | --show-label: none;
82 |
83 | /* roundness of shortcut icons*/
84 | --sc-roundness: 21%;
85 |
86 |
87 |
88 | /* SEARCH BAR */
89 | /* color of the searchbar */
90 | --sb-background: rgba(0, 0, 0, 0.45);
91 | }
92 |
93 | @keyframes bg-load {
94 | 0% {
95 | background-size: 110%;
96 | }
97 | 50% {
98 | background-size: 110%;
99 | }
100 | 100% {
101 | background-size: 100%;
102 | }
103 | }
104 |
105 | body, html {
106 | background-color: #000;
107 | background-size: cover;
108 | background-position: center;
109 | background-repeat: no-repeat;
110 | background-attachment: fixed;
111 | animation: bg-load 1s cubic-bezier(0.29, -0.03, 0.16, 0.96);
112 |
113 | cursor: url(assets/cursors/default.png) 0 0, auto;
114 | height: 100%;
115 | width: 100%;
116 | margin: 0;
117 | padding: 0;
118 | display: flex;
119 | justify-content: space-evenly;
120 | flex-direction: row;
121 | align-items: center;
122 | user-select: none;
123 | }
124 |
125 | @keyframes loadspinner {
126 | 0% { transform: translateX(-50%) rotate(0deg); }
127 | 12.5% { transform: translateX(-50%) rotate(45deg); }
128 | 25% { transform: translateX(-50%) rotate(90deg); }
129 | 37.5% { transform: translateX(-50%) rotate(135deg); }
130 | 50% { transform: translateX(-50%) rotate(180deg); }
131 | 62.5% { transform: translateX(-50%) rotate(225deg); }
132 | 75% { transform: translateX(-50%) rotate(270deg); }
133 | 100% { transform: translateX(-50%) rotate(360deg); }
134 | }
135 |
136 | #loadingscreen.loaded {
137 | opacity: 0;
138 | width: 120vw;
139 | height: 120vh;
140 | filter: blur(var(--base-blur));
141 |
142 | #loadspinner {
143 | position: fixed;
144 | top: 75%;
145 | left: 50%;
146 | width: 25px;
147 | animation: none;
148 | transition: none;
149 | transform: translateX(-50%);
150 | }
151 | }
152 |
153 | #loadingscreen {
154 | z-index: 1000;
155 | width: 100%;
156 | height: 100%;
157 | position: fixed;
158 | top: 50%;
159 | left: 50%;
160 | transform: translate(-50%, -50%);
161 | background-image: url(assets/loading.png), radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.47) 32.69%, rgba(0, 0, 0, 0.65) 51.37%, rgba(0, 0, 0, 0.83) 72.55%, #000 100%);
162 | background-position: center;
163 | background-size: cover;
164 | opacity: 1;
165 | pointer-events: none;
166 | backdrop-filter: blur(var(--base-blur));
167 | filter: blur(0);
168 |
169 | #loadspinner {
170 | position: fixed;
171 | top: 75%;
172 | left: 50%;
173 | width: 25px;
174 | animation: loadspinner 1s steps(1) infinite;
175 | transition: none;
176 | }
177 | }
178 |
179 | .slider-snapper {
180 | position: absolute;
181 | top: 4px;
182 |
183 | transform: translateX(-50%);
184 |
185 | width: 4px;
186 | height: 26px;
187 |
188 | background: rgba(255, 255, 255, 0.1);
189 | border-radius: 2px;
190 | mix-blend-mode: difference;
191 |
192 | pointer-events: none;
193 | }
194 |
195 | input[type="range"] {
196 | width: calc(100% - 5px);
197 | -webkit-appearance: none;
198 | appearance: none;
199 | cursor: url(assets/cursors/open.png) 0 0, auto;
200 | outline: none;
201 | overflow: hidden;
202 | border-radius: calc(var(--base-roundness) - 12px);
203 | background: none;
204 | box-shadow: 1px 1.5px 4px 0px rgba(0, 0, 0, 0.08) inset, 1px 1.5px 4px 0px rgba(0, 0, 0, 0.10) inset;
205 | }
206 | input[type="range"]:active {
207 | cursor: url(assets/cursors/grab.png) 0 0, auto;
208 | }
209 |
210 | input[type="range"]::-webkit-slider-runnable-track {
211 | height: 34px;
212 | border-radius: 12px;
213 | background: var(--sb-background);
214 | background-blend-mode: luminosity, color-burn;
215 | background-blend-mode: luminosity;
216 | }
217 |
218 | input[type="range"]::-webkit-slider-thumb {
219 | -webkit-appearance: none;
220 | appearance: none;
221 |
222 | height: 0px;
223 | width: 0px;
224 | background-color: transparent;
225 |
226 | box-shadow: -400px 0 0 400px rgba(255, 255, 255, 0.23);
227 | }
228 |
229 | input::-webkit-autofill {
230 | display: none;
231 | }
232 |
233 | .color-wheel {
234 | -webkit-appearance: none;
235 | -moz-appearance: none;
236 | appearance: none;
237 | width: 22px;
238 | min-width: 22px;
239 | height: 22px !important;
240 | min-height: 22px;
241 | background-color: transparent;
242 | border: none;
243 | cursor: url(assets/cursors/colorpicker.png) 0 0, auto;
244 | padding: 0px;
245 | opacity: 1;
246 | box-shadow: none;
247 | text-shadow: none;
248 | outline: none;
249 | }
250 |
251 | .color-wheel:hover {
252 | transform: scale(1.1);
253 | }
254 |
255 | .color-wheel:active {
256 | transform: scale(0.8);
257 | }
258 |
259 | .color-wheel::-webkit-color-swatch-wrapper {
260 | padding: 0;
261 | }
262 |
263 | .color-wheel::-webkit-color-swatch {
264 | border: 2px solid rgba(96, 96, 96, 0.674);
265 | border-radius: 50%;
266 | }
267 |
268 | .color-wheel::-webkit-color-swatch {
269 | border-radius: 50%;
270 | box-shadow: inset 0px 3px 5px rgba(0, 0, 0, 0.514);
271 | }
272 |
273 | .color-wheel::-webkit-color-picker {
274 | width: 200px;
275 | height: 200px;
276 | border: 10px solid red;
277 | border-radius: 10px;
278 | padding: 5px;
279 | background-color: transparent;
280 | }
281 |
282 | #clock-container {
283 | display: flex;
284 | flex-direction: column;
285 | justify-content: center;
286 | align-items: center;
287 | text-align: center;
288 | margin-right: 150px;
289 | }
290 |
291 | #date {
292 | font-size: var(--date-size);
293 | color: var(--date-color);
294 | font-size: var(--date-size);
295 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
296 | }
297 |
298 | #clock {
299 | font-family: 'SF Pro';
300 | font-size: var(--clock-size);
301 | font-stretch: calc(var(--clock-stretch) * 1%);
302 | color: var(--clock-color);
303 | font-weight: 600;
304 | display: flex;
305 | transition: font-stretch 0s;
306 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
307 | }
308 |
309 | #hours {
310 | font: inherit;
311 | color: var(--clock-color);
312 | }
313 |
314 | #minutes {
315 | font: inherit;
316 | color: var(--clock-color);
317 | }
318 |
319 | #colon {
320 | font: inherit;
321 | color: var(--clock-colon);
322 | }
323 |
324 | #quick-actions {
325 | width: 100%;
326 | padding: 12px;
327 | box-sizing: border-box;
328 | display: flex;
329 | flex-direction: column;
330 | justify-content: center;
331 | align-content: center;
332 | border-radius: var(--base-roundness);
333 | border: var(--base-border);
334 | background: var(--base-background);
335 | box-shadow: var(--base-shadow);
336 | background-blend-mode: luminosity;
337 | backdrop-filter: blur(var(--base-blur));
338 | gap: 20px;
339 | transition: all 0.3s cubic-bezier(0.29, -0.03, 0.16, 0.96);
340 | }
341 |
342 | .section-label {
343 | font-size: 16px;
344 | color: rgba(255, 255, 255, 0.8);
345 | font-weight: 500;
346 | text-align: center;
347 | width: 100%;
348 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
349 | }
350 |
351 | #actions-grid {
352 | display: flex;
353 | flex-direction: row;
354 | gap: 30px;
355 | justify-content: center;
356 | flex-wrap: wrap;
357 | width: 100%;
358 | transition: all 0.3s cubic-bezier(0.29, -0.03, 0.16, 0.96);
359 | }
360 |
361 | .action-icon {
362 | background-image: url(assets/loadingicon.png);
363 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
364 | width: 60px;
365 | height: 60px;
366 | border-radius: var(--sc-roundness);
367 | display: flex;
368 | justify-content: center;
369 | align-items: center;
370 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.217);
371 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
372 | }
373 |
374 | .action-icon:active {
375 | transform: scale(0.8);
376 | background-color: rgba(255, 255, 255, 0.142);
377 | }
378 |
379 | .action-icon:hover {
380 | background-color: rgba(255, 255, 255, 0.3);
381 | scale: 1.1;
382 | }
383 |
384 | .action-icon img {
385 | width: 60px;
386 | border-radius: var(--sc-roundness);
387 | height: 60px;
388 | object-fit:cover;
389 | }
390 |
391 |
392 |
393 | #searchbar {
394 | width: 100%;
395 | padding: 12px;
396 | box-sizing: border-box;
397 | display: flex;
398 | flex-direction: row;
399 | justify-content: center;
400 | align-content: center;
401 | border-radius: calc(var(--base-roundness) - 12px);
402 | background: var(--sb-background);
403 | box-shadow: 1px 1.5px 4px 0px rgba(0, 0, 0, 0.08) inset, 1px 1.5px 4px 0px rgba(0, 0, 0, 0.10) inset;
404 | background-blend-mode: luminosity;
405 | backdrop-filter: blur(var(--base-blur));
406 | font-size: 18px;
407 | font-weight: 500;
408 | color: rgba(255, 255, 255, 0.23);
409 | gap: 5px;
410 | transition: all 0.0.3s cubic-bezier(0.68, 0.12, 0.15, 1.07);
411 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
412 |
413 | p{
414 | color: inherit;
415 | font: inherit;
416 | }
417 | form{
418 | width: 60px;
419 | color: inherit;
420 | display: flex;
421 | justify-content: center;
422 | align-content: center;
423 | align-items: center;
424 | }
425 | input{
426 | color: inherit;
427 | font:inherit;
428 | width: 64px;
429 | display: flex;
430 | justify-content: center;
431 | align-content: center;
432 | align-items: center;
433 | background: transparent;
434 | border: transparent;
435 | outline: none;
436 | }
437 | ::placeholder {
438 | color: inherit;
439 | }
440 | }
441 | #searchbar:focus-within {
442 | color: white;
443 |
444 | input {
445 | width: 100%;
446 | }
447 | form {
448 | width: 100%;
449 | }
450 | }
451 |
452 | #weather-info {
453 | width: 100%;
454 | height: 178px;
455 | padding: 12px;
456 | box-sizing: border-box;
457 | display: none;
458 | flex-direction: column;
459 | justify-content: space-around;
460 | align-content: center;
461 | border-radius: var(--base-roundness);
462 | border: var(--base-border);
463 | background: var(--base-background);
464 | box-shadow: var(--base-shadow);
465 | background-blend-mode: luminosity;
466 | backdrop-filter: blur(var(--base-blur));
467 | }
468 |
469 | #weather-info.active {
470 | display: flex;
471 | }
472 |
473 | #weather-desc {
474 | margin-bottom: 0;
475 | height: 10px;
476 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
477 | }
478 |
479 | #weather-margin {
480 | margin-top: 0;
481 | opacity: 0.7;
482 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
483 | }
484 |
485 | .weather-hstack {
486 | display: flex;
487 | flex-direction: row;
488 | justify-content: center;
489 | align-items: center;
490 |
491 | }
492 |
493 | .weather-vstack {
494 | margin-left: auto;
495 | text-align: right;
496 | display: flex;
497 | flex-direction: column;
498 | gap: 5px;
499 | }
500 |
501 | .weather-hstack h1 {
502 | font-weight: 300;
503 | font-size: 50px;
504 | margin-top: 0;
505 | margin-bottom: 0;
506 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
507 | }
508 |
509 | #hourly-forecast {
510 | align-items: flex-start;
511 | display: flex;
512 | flex-direction: row;
513 | justify-content: space-between;
514 | width: 100%;
515 | }
516 |
517 | .forecast-hour {
518 | display: flex;
519 | flex-direction: column;
520 | justify-content: center;
521 | align-items: center;
522 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
523 | }
524 |
525 | #forecast-icon {
526 | text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.201);
527 | font-size: 18px;
528 | }
529 |
530 | #widgets {
531 | width: calc(356px + var(--baseborder-width) * 2 - 1px);
532 | display: flex;
533 | flex-direction: column;
534 | gap: 20px;
535 | }
536 |
537 | #settings-button {
538 | position: fixed;
539 | top: 20px;
540 | right: 20px;
541 |
542 | height: 40px;
543 | width: 40px;
544 | box-sizing: border-box;
545 | display: flex;
546 | justify-content: center;
547 | align-items: center;
548 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
549 | gap: 20px;
550 |
551 | border-radius: var(--base-roundness);
552 | border: var(--base-border);
553 | background: var(--base-background);
554 | box-shadow: var(--base-shadow);
555 | background-blend-mode: luminosity;
556 | backdrop-filter: blur(var(--base-blur));
557 | outline:none;
558 | font-size: 16px;
559 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
560 | }
561 |
562 | #settings-button:hover {
563 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
564 | scale: 1.1;
565 |
566 | * {
567 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
568 | }
569 | }
570 |
571 | #settings-button:active {
572 | transform: scale(0.8);
573 | background-color: rgba(255, 255, 255, 0.142);
574 | }
575 |
576 | #plus-button {
577 | position: fixed;
578 | top: 20px;
579 | right: 70px;
580 | height: 40px;
581 | width: 40px;
582 | box-sizing: border-box;
583 | display: flex;
584 | justify-content: center;
585 | align-items: center;
586 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
587 | gap: 20px;
588 |
589 | border-radius: var(--base-roundness);
590 | border: var(--base-border);
591 | background: var(--base-background);
592 | box-shadow: var(--base-shadow);
593 | background-blend-mode: luminosity;
594 | backdrop-filter: blur(var(--base-blur));
595 | outline:none;
596 | font-size: 16px;
597 | animation: fade-in 0.8s cubic-bezier(0.29, -0.03, 0.16, 0.96);
598 | }
599 |
600 | #plus-button:hover {
601 | scale: 1.1;
602 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
603 |
604 | * {
605 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
606 | }
607 | }
608 |
609 | #plus-button:active {
610 | transform: scale(0.8);
611 | background-color: rgba(255, 255, 255, 0.142);
612 | }
613 |
614 | #plus-button h1 {
615 | font-size: 20px;
616 | color: rgba(255, 255, 255, 0.543);
617 | }
618 |
619 |
620 | #settings-button h1 {
621 | font-size: 20px;
622 | color: rgba(255, 255, 255, 0.543);
623 | }
624 |
625 | .close-button {
626 | height: 20px;
627 | width: 20px;
628 | padding: 5px;
629 | display: flex;
630 | justify-content: center;
631 | align-items: center;
632 | border-radius: var(--base-roundness);
633 | outline: none;
634 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
635 | border: none;
636 | background: none;
637 | font-size: 12px;
638 | font-weight: 600;
639 | color: rgba(255, 255, 255, 0.5);
640 | }
641 |
642 |
643 |
644 | .close-button:hover {
645 | background-color: rgba(255, 255, 255, 0.05);
646 | }
647 |
648 | .close-button:active {
649 | transform: scale(0.5);
650 | background-color: rgba(255, 255, 255, 0.142);
651 | }
652 |
653 | #add-menu {
654 | pointer-events: none;
655 | position: fixed;
656 | top: 20px;
657 | right: 70px;
658 | width: 40px;
659 | height: 40px;
660 | opacity: 0;
661 | display: flex;
662 | box-sizing: border-box;
663 | padding: 12px 12px;
664 | gap: 10px;
665 | justify-content: flex-start;
666 | align-items: center;
667 | flex-direction: column;
668 | z-index: 100;
669 | border-radius: var(--base-roundness);
670 | border: var(--base-border);
671 | background: var(--base-background);
672 | box-shadow: var(--base-shadow);
673 | background-blend-mode: luminosity;
674 | backdrop-filter: blur(var(--base-blur));
675 | outline:none;
676 | overflow-x: hidden;
677 |
678 |
679 | -moz-transition: all 0.2s cubic-bezier(0, 0, 1, 0);
680 | -webkit-transition: all 0.2s cubic-bezier(0, 0, 1, 0);
681 | -o-transition: all 0.2s cubic-bezier(0, 0, 1, 0);
682 | transition: all 0.2s cubic-bezier(0, 0, 1, 0);
683 |
684 | opacity: 0;
685 | filter: blur(50px);
686 | user-select: none;
687 | cursor: url(assets/cursors/default.png) 0 0, auto;
688 |
689 | #menu-header, #settings-list {
690 | * {
691 | margin-left: -100%;
692 | scale: 0.8;
693 | opacity: 0;
694 | }
695 |
696 | .setting:nth-child(1) {transition-delay: calc(100ms * 1);}
697 | .setting:nth-child(2) {transition-delay: calc(100ms * 2);}
698 | .setting:nth-child(3) {transition-delay: calc(100ms * 3);}
699 | .setting:nth-child(4) {transition-delay: calc(100ms * 4);}
700 | .setting:nth-child(5) {transition-delay: calc(100ms * 5);}
701 | .setting:nth-child(6) {transition-delay: calc(100ms * 6);}
702 | .setting:nth-child(7) {transition-delay: calc(100ms * 7);}
703 | .setting:nth-child(8) {transition-delay: calc(100ms * 8);}
704 | .setting:nth-child(9) {transition-delay: calc(100ms * 9);}
705 | .setting:nth-child(10) {transition-delay: calc(100ms * 10);}
706 | .setting:nth-child(11) {transition-delay: calc(100ms * 11);}
707 | .setting:nth-child(12) {transition-delay: calc(100ms * 12);}
708 | .setting:nth-child(13) {transition-delay: calc(100ms * 13);}
709 | .setting:nth-child(14) {transition-delay: calc(100ms * 14);}
710 | .setting:nth-child(15) {transition-delay: calc(100ms * 15);}
711 | }
712 | }
713 |
714 |
715 |
716 | #add-shortcut-panel {
717 | width: 100%;
718 | height: 100px;
719 | align-items: center;
720 | justify-content: center;
721 | }
722 |
723 | @keyframes fadeIn {
724 | 0% {
725 | opacity: 0;
726 | }
727 | 100% {
728 | opacity: 1;
729 | }
730 | }
731 |
732 | @keyframes fade-out {
733 | 0% {
734 | opacity: 1;
735 | }
736 | 100% {
737 | opacity: 0;
738 | }
739 | }
740 |
741 | .shortcut-wrapper.visible {
742 | opacity: 1;
743 | }
744 |
745 | #add-shortcut-panel input {
746 | margin-bottom: 10px;
747 | }
748 |
749 | #add-shortcut {
750 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
751 | }
752 |
753 | #shortcuts-add {
754 | display: grid;
755 | grid-template-columns: repeat(5, 1fr);
756 | width: 100%;
757 | height: 100%;
758 | gap: 10px;
759 | border-radius: calc(var(--base-roundness) - 12px);
760 | }
761 |
762 | #add-menu.show {
763 | pointer-events: all;
764 | position: fixed;
765 | top: 20px;
766 | right: 20px;
767 | width: 400px;
768 | height: calc(100vh - 40px);
769 |
770 | display: flex;
771 | box-sizing: border-box;
772 | padding: 12px 12px;
773 | gap: 10px;
774 | justify-content: flex-start;
775 | align-items: center;
776 | flex-direction: column;
777 | z-index: 100;
778 | border-radius: var(--base-roundness);
779 | border: var(--base-border);
780 | background: var(--base-background);
781 | box-shadow: var(--base-shadow);
782 | background-blend-mode: luminosity;
783 | backdrop-filter: blur(var(--base-blur));
784 | outline:none;
785 | overflow-x: hidden;
786 |
787 | opacity: 1;
788 | filter: blur(0px);
789 |
790 |
791 | -moz-transition: all 0.4s cubic-bezier(0, 0, 0, 1);
792 | -webkit-transition: all 0.4s cubic-bezier(0, 0, 0, 1);
793 | -o-transition: all 0.4s cubic-bezier(0, 0, 0, 1);
794 | transition: all 0.4s cubic-bezier(0, 0, 0, 1);
795 |
796 | #menu-header, #settings-list {
797 | * {
798 | margin-left: 0;
799 | scale: 1;
800 | opacity: 1;
801 | }
802 | }
803 | }
804 |
805 |
806 | #settings-menu {
807 | pointer-events: none;
808 | position: fixed;
809 | top: 20px;
810 | right: 20px;
811 | width: 40px;
812 | height: 40px;
813 |
814 | box-sizing: border-box;
815 | padding: 12px 12px;
816 | padding-bottom: none;
817 | gap: 10px;
818 | display: flex;
819 | justify-content: center;
820 | align-items: center;
821 | flex-direction: column;
822 | z-index: 100;
823 | border-radius: var(--base-roundness);
824 | border: var(--base-border);
825 | background: var(--base-background);
826 | box-shadow: var(--base-shadow);
827 | background-blend-mode: luminosity;
828 | backdrop-filter: blur(var(--base-blur));
829 | outline:none;
830 | overflow-x: hidden;
831 |
832 | opacity: 0;
833 | filter: blur(50px);
834 | user-select: none;
835 |
836 |
837 | -moz-transition: all 0.4s cubic-bezier(0, 0, 1, 0);
838 | -webkit-transition: all 0.4s cubic-bezier(0, 0, 1, 0);
839 | -o-transition: all 0.4s cubic-bezier(0, 0, 1, 0);
840 | transition: all 0.4s cubic-bezier(0, 0, 1, 0);
841 | pointer-events: none;
842 |
843 | #menu-header, #settings-list, #setting-applyreset {
844 | * {
845 | margin-left: -100%;
846 | scale: 0.8;
847 | opacity: 0;
848 | }
849 |
850 | .setting:nth-child(1) {transition-delay: calc(100ms * 1);}
851 | .setting:nth-child(2) {transition-delay: calc(100ms * 2);}
852 | .setting:nth-child(3) {transition-delay: calc(100ms * 3);}
853 | .setting:nth-child(4) {transition-delay: calc(100ms * 4);}
854 | .setting:nth-child(5) {transition-delay: calc(100ms * 5);}
855 | .setting:nth-child(6) {transition-delay: calc(100ms * 6);}
856 | .setting:nth-child(7) {transition-delay: calc(100ms * 7);}
857 | .setting:nth-child(8) {transition-delay: calc(100ms * 8);}
858 | .setting:nth-child(9) {transition-delay: calc(100ms * 9);}
859 | .setting:nth-child(10) {transition-delay: calc(100ms * 10);}
860 | .setting:nth-child(11) {transition-delay: calc(100ms * 11);}
861 | .setting:nth-child(12) {transition-delay: calc(100ms * 12);}
862 | .setting:nth-child(13) {transition-delay: calc(100ms * 13);}
863 | .setting:nth-child(14) {transition-delay: calc(100ms * 14);}
864 | .setting:nth-child(15) {transition-delay: calc(100ms * 15);}
865 | }
866 | }
867 |
868 | #settings-menu.open {
869 | pointer-events: all;
870 | position: fixed;
871 | top: 20px;
872 | right: 20px;
873 | width: 400px;
874 | height: calc(100vh - 40px);
875 |
876 | box-sizing: border-box;
877 | padding: 12px 12px;
878 | gap: 10px;
879 | display: flex;
880 | justify-content: center;
881 | align-items: center;
882 | flex-direction: column;
883 | z-index: 100;
884 |
885 | border-radius: var(--base-roundness);
886 | border: var(--base-border);
887 | background: var(--base-background);
888 | box-shadow: var(--base-shadow);
889 | background-blend-mode: luminosity;
890 | backdrop-filter: blur(var(--base-blur));
891 | outline:none;
892 |
893 | opacity: 1;
894 | filter: blur(0px);
895 |
896 |
897 | -moz-transition: all 0.2s cubic-bezier(0, 0, 0, 1);
898 | -webkit-transition: all 0.2s cubic-bezier(0, 0, 0, 1);
899 | -o-transition: all 0.2s cubic-bezier(0, 0, 0, 1);
900 | transition: all 0.2s cubic-bezier(0, 0, 0, 1);
901 |
902 | #menu-header, #settings-list, #setting-applyreset {
903 | * {
904 | margin-left: 0;
905 | scale: 1;
906 | opacity: 1;
907 | }
908 |
909 | .setting-slider-label {
910 | position: absolute;
911 | left: 8px;
912 | top: 50%;
913 | transform: translateY(-50%);
914 |
915 | width: 100%;
916 | height: 5px;
917 | line-height: 0px;
918 | font-size: 14px;
919 | font-weight: 600;
920 | font-weight: 400;
921 | color: white;
922 | z-index: 100;
923 | pointer-events: none;
924 | }
925 |
926 | .slider-value {
927 | position: absolute;
928 | right: 13px;
929 | top: 50%;
930 | transform: translateY(-50%);
931 |
932 | height: 6px;
933 | line-height: 0px;
934 | font-size: 14px;
935 | font-weight: 600;
936 | font-weight: 400;
937 | color: var(--date-color);
938 | z-index: 100;
939 | pointer-events: none;
940 | text-align: right;
941 | }
942 | }
943 | }
944 |
945 | #menu-header {
946 | width: 100%;
947 | display: flex;
948 | flex-direction: row;
949 |
950 | h2 {
951 | width: 100%;
952 | }
953 | }
954 |
955 | #settings-list {
956 | overflow-x: hidden;
957 | overflow-y: scroll;
958 | width: 100%;
959 | height: 100%;
960 | max-height: 100%;
961 | display: flex;
962 | gap: 20px;
963 | flex-direction: column;
964 | align-content: flex-start;
965 | justify-content: flex-start;
966 | align-items: flex-start;
967 | border-radius: 6px;
968 | }
969 |
970 | .setting {
971 | width: calc(100% - 5px);
972 | display: flex;
973 | gap: 10px;
974 | flex-direction: column;
975 | }
976 |
977 | .setting > .setting-label {
978 | display: flex;
979 | justify-content: start;
980 | align-items: center;
981 | width: 100%;
982 | font-size: 14px;
983 | font-weight: 600;
984 | padding-left: 10px;
985 | padding-bottom: 0px !important;
986 |
987 | color: var(--date-color);
988 | }
989 |
990 | .toggle-setting > .setting-label {
991 | display: flex;
992 | justify-content: start;
993 | align-items: center;
994 | width: 100%;
995 | height: 34px;
996 | font-size: 14px;
997 | font-weight: 600;
998 |
999 | color: var(--date-color);
1000 | }
1001 |
1002 | .toggle-setting {
1003 | border-radius: calc(var(--base-roundness) - 12px);
1004 | background: var(--sb-background);
1005 | background-blend-mode: luminosity, color-burn;
1006 | box-shadow: 1px 1.5px 4px 0px rgba(0, 0, 0, 0.08) inset, 1px 1.5px 4px 0px rgba(0, 0, 0, 0.10) inset;
1007 | backdrop-filter: blur(var(--base-blur));
1008 | width: calc(100% - 10px);
1009 | height: fit-content;
1010 | display: none;
1011 | gap: 10px;
1012 | padding: 2px 5px 2px 9px;
1013 | box-sizing: border-box;
1014 | flex-direction: row;
1015 | justify-content: center;
1016 | align-items: center;
1017 | }
1018 |
1019 | .toggle-setting.active {
1020 | display: flex;
1021 | }
1022 |
1023 | .toggle-setting:has(.color-wheel):not(.toggle-setting:has(.toggle-switch)) {
1024 | width: calc(100% - 5px);
1025 | height: 34px;
1026 | }
1027 |
1028 | .slider-container {
1029 | height: fit-content;
1030 | width: 100%;
1031 | }
1032 |
1033 | input::-webkit-outer-spin-button,
1034 | input::-webkit-inner-spin-button {
1035 | -webkit-appearance: none;
1036 | margin: 0;
1037 | }
1038 |
1039 | input[type=number] {
1040 | -moz-appearance: textfield;
1041 | }
1042 |
1043 | .setting-input {
1044 | width: calc(100% - 5px);
1045 | height: 34px;
1046 | padding: 2px 6px 2px 9px;
1047 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
1048 | box-sizing: border-box;
1049 | display: flex;
1050 | flex-direction: row;
1051 | justify-content: center;
1052 | align-content: center;
1053 | border-radius: calc(var(--base-roundness) - 12px);
1054 | background: var(--sb-background);
1055 | background-blend-mode: luminosity, color-burn;
1056 | box-shadow: 1px 1.5px 4px 0px rgba(0, 0, 0, 0.08) inset, 1px 1.5px 4px 0px rgba(0, 0, 0, 0.10) inset;
1057 | background-blend-mode: luminosity;
1058 | backdrop-filter: blur(var(--base-blur));
1059 | border: none;
1060 | transition: all 0.5s ease;
1061 | font-size: 14px;
1062 | font-weight: 500;
1063 | color: rgba(255, 255, 255, 1);
1064 | gap: 0px;
1065 | border: none;
1066 | outline: none;
1067 | overflow: visible;
1068 |
1069 |
1070 | ::placeholder {
1071 | color: var(--date-color);
1072 | }
1073 |
1074 | label, p {
1075 | width: fit-content;
1076 | min-width: fit-content;
1077 | height: 100%;
1078 |
1079 | appearance: none;
1080 | background: transparent;
1081 | border: none;
1082 | outline: none;
1083 |
1084 | display: flex;
1085 | justify-content: center;
1086 | align-items: center;
1087 |
1088 | font: inherit;
1089 | color: white;
1090 | }
1091 |
1092 | input {
1093 | width: 100%;
1094 | height: 100%;
1095 |
1096 | appearance: none;
1097 | background: transparent;
1098 | border: none;
1099 | outline: none;
1100 |
1101 | display: flex;
1102 | justify-content: flex-end;
1103 | text-align: end;
1104 | align-items: center;
1105 | padding: 0;
1106 |
1107 | font: inherit;
1108 | color: var(--date-color);
1109 | }
1110 | input:focus, input:enabled {
1111 | color: white;
1112 | }
1113 |
1114 | p {
1115 | color: var(--date-color);
1116 | }
1117 | }
1118 |
1119 | #setting-applyreset {
1120 | width: 100%;
1121 | display: flex;
1122 | flex-direction: row;
1123 | gap: 10px;
1124 | }
1125 |
1126 | #uploadDiv {
1127 | width: calc(100% - 10px);
1128 | height: 34px;
1129 | justify-content: space-between;
1130 | color: rgba(255, 255, 255, 0.623);
1131 | padding-right: 2px;
1132 |
1133 | span {
1134 | display: flex;
1135 | align-items: center;
1136 | justify-content: center;
1137 | transition: none;
1138 | color: inherit;
1139 | }
1140 |
1141 | span[name=icon] {
1142 | width: 30px;
1143 | height: 30px;
1144 | }
1145 | }
1146 |
1147 | #uploadDiv:hover {
1148 | color: white;
1149 | background-color: var(--sb-background);
1150 | }
1151 |
1152 | #uploadDiv:active{
1153 | transform: scale(0.8);
1154 | background-color: rgba(255, 255, 255, 0.142);
1155 | }
1156 |
1157 |
1158 |
1159 | #save-settings {
1160 | width: 100%;
1161 | min-height: 35px;
1162 | box-sizing: border-box;
1163 | display: flex;
1164 | flex-direction: row;
1165 | justify-content: center;
1166 | align-items: center;
1167 | border-radius: calc(var(--base-roundness) - 12px);
1168 | background: var(--sb-background);
1169 | background-blend-mode: luminosity, color-burn;
1170 | box-shadow: 1px -1.5px 4px 0px rgba(0, 0, 0, 0.08) inset, 1px -1.5px 4px 0px rgba(0, 0, 0, 0.10) inset;
1171 | background-blend-mode: luminosity;
1172 | backdrop-filter: blur(var(--base-blur));
1173 | border: none;
1174 | font-size: 13.5px;
1175 | font-weight: 500;
1176 | color: rgba(255, 255, 255, 0.5);
1177 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
1178 | }
1179 |
1180 | .remove-shortcut {
1181 | width: 20px;
1182 | height: 20px;
1183 |
1184 | justify-content: center;
1185 | align-items: center;
1186 | display: flex;
1187 | border-radius: 50%;
1188 | border: var(--base-border);
1189 | background: rgba(255, 255, 255, 0.749);
1190 | box-shadow: var(--base-shadow);
1191 | background-blend-mode: luminosity;
1192 | color: black;
1193 | font-weight: 800;
1194 | text-align: center;
1195 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
1196 | outline:none;
1197 | font-size: 10px;
1198 | position: fixed;
1199 | top: -5px;
1200 | left: -5px;
1201 | backdrop-filter: blur(var(--base-blur));
1202 | }
1203 |
1204 | .remove-shortcut:hover {
1205 | width: 23px;
1206 | height: 23px;
1207 | }
1208 |
1209 | #add-button {
1210 | width: 100%;
1211 | min-height: 35px;
1212 | box-sizing: border-box;
1213 | display: flex;
1214 | flex-direction: row;
1215 | justify-content: center;
1216 | align-items: center;
1217 | border-radius: calc(var(--base-roundness) - 12px);
1218 | background: var(--sb-background);
1219 | background-blend-mode: luminosity, color-burn;
1220 | box-shadow: 1px -1.5px 4px 0px rgba(0, 0, 0, 0.08) inset, 1px -1.5px 4px 0px rgba(0, 0, 0, 0.10) inset;
1221 | background-blend-mode: luminosity;
1222 | backdrop-filter: blur(var(--base-blur));
1223 | border: none;
1224 | font-size: 13.5px;
1225 | font-weight: 500;
1226 | color: rgba(255, 255, 255, 0.5);
1227 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
1228 | }
1229 |
1230 | #reset-settings {
1231 | min-width: 68px;
1232 | height: 20px;
1233 |
1234 | box-sizing: border-box;
1235 | display: flex;
1236 | flex-direction: row;
1237 | justify-content: center;
1238 | align-items: center;
1239 |
1240 | border-radius: calc(var(--base-roundness) - 12px);
1241 | background: none;
1242 | border: none;
1243 |
1244 | font-size: 13.5px;
1245 | font-weight: 500;
1246 | color: rgba(255, 255, 255, 0.5);
1247 |
1248 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
1249 | }
1250 |
1251 | #reset-settings:hover{
1252 | background-color: rgba(255, 255, 255, 0.05);
1253 | }
1254 |
1255 | #save-settings:hover {
1256 | font-size: 15px;
1257 | color: white;
1258 | }
1259 |
1260 | #save-settings:active{
1261 | transform: scale(0.8);
1262 | background-color: rgba(255, 255, 255, 0.142);
1263 | }
1264 |
1265 | #reset-settings:active{
1266 | transform: scale(0.8);
1267 | background-color: rgba(255, 255, 255, 0.142);
1268 | }
1269 |
1270 | ::-webkit-scrollbar {
1271 | background-color: transparent;
1272 | display: block;
1273 | width: 6px;
1274 | }
1275 | ::-webkit-scrollbar-thumb {
1276 | background-color: rgba(255, 255, 255, 0.2);
1277 | border-radius: 10px;
1278 | }
1279 |
1280 |
1281 | .toggle-switch, .toggle-switch .toggle-knob {
1282 | -moz-transition: all 0.2s ease;
1283 | -webkit-transition: all 0.2s ease;
1284 | -o-transition: all 0.2s ease;
1285 | transition: all 0.2s ease;
1286 | }
1287 |
1288 | .toggle-knob {
1289 | transform: translateX(5px);
1290 | }
1291 |
1292 | .toggle-switch {
1293 | cursor: url(assets/cursors/pointer.png) 5 0, auto;
1294 | height: 27px;
1295 | width: 45px !important;
1296 | min-width: 45px !important;
1297 | display: inline-block;
1298 | border-radius: 15px;
1299 | background: var(--sb-background);
1300 | background-blend-mode: luminosity, color-burn;
1301 | box-shadow: 1px 1.5px 4px 0px rgba(0, 0, 0, 0.08) inset, 1px 1.5px 4px 0px rgba(0, 0, 0, 0.10) inset;
1302 | background-blend-mode: luminosity;
1303 | backdrop-filter: blur(var(--base-blur));
1304 | border: none;
1305 | }
1306 |
1307 | @keyframes fade-in {
1308 | 0% {
1309 | opacity: 1;
1310 | filter: blur(0);
1311 | scale: 1;
1312 | }
1313 |
1314 | 50% {
1315 | opacity: 1;
1316 | filter: blur(0);
1317 | scale: 1;
1318 | }
1319 |
1320 | 100% {
1321 | opacity: 1;
1322 | filter: blur(0);
1323 | scale: 1;
1324 | }
1325 | }
1326 |
1327 | .hidden {
1328 | opacity: 0;
1329 | position: fixed;
1330 |
1331 | }
1332 |
1333 | #fileInput {
1334 | display: none;
1335 | }
1336 |
1337 | .settings-center {
1338 | width: 100%;
1339 | }
1340 |
1341 | .toggle-knob {
1342 | width: 19px;
1343 | height: 19px;
1344 | display: inline-block;
1345 | background-color: rgba(255, 255, 255, 0.9);
1346 |
1347 | border-radius: 26px;
1348 | margin: 4px 4px;
1349 | }
1350 |
1351 | .toggle-switch.active {
1352 | background-color: #32d74b;
1353 | }
1354 |
1355 | .toggle-switch.active > .toggle-knob {
1356 | margin: 4px 17px !important;
1357 | }
1358 |
1359 | input[type=number]:autofill,
1360 | input[type=text]:autofill {
1361 | background: inherit;
1362 | }
--------------------------------------------------------------------------------
3 | 
36 | 
37 |
--------------------------------------------------------------------------------
/assets/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/bg.png
--------------------------------------------------------------------------------
/assets/cursors/colorpicker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/cursors/colorpicker.png
--------------------------------------------------------------------------------
/assets/cursors/default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/cursors/default.png
--------------------------------------------------------------------------------
/assets/cursors/grab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/cursors/grab.png
--------------------------------------------------------------------------------
/assets/cursors/open.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/cursors/open.png
--------------------------------------------------------------------------------
/assets/cursors/pointer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/cursors/pointer.png
--------------------------------------------------------------------------------
/assets/cursors/text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/cursors/text.png
--------------------------------------------------------------------------------
/assets/discord.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/discord.png
--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/favicon.png
--------------------------------------------------------------------------------
/assets/fonts/SF-Pro.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/fonts/SF-Pro.ttf
--------------------------------------------------------------------------------
/assets/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/github.png
--------------------------------------------------------------------------------
/assets/loading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/loading.png
--------------------------------------------------------------------------------
/assets/loadspinner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Broco8Dev/VisionTab/4921877d5cd87ead44483e22610c77a7b0c2bd68/assets/loadspinner.png
--------------------------------------------------------------------------------
/assets/script.js:
--------------------------------------------------------------------------------
1 | let is24HourFormat = localStorage.getItem('is24HourFormat') === 'true' || false;
2 | let isCelsius = localStorage.getItem('isCelsius') === 'true' || false;
3 | let isWeatherVisible = localStorage.getItem('isWeatherVisible') === 'true' || false;
4 | // localStorage = new LocalStorage('./scratch', Number.MAX_VALUE);
5 |
6 | var toggler_24h = document.querySelector('.toggle-24h');
7 | var toggler_celsius = document.querySelector('.toggle-celsius');
8 | var toggler_weather = document.querySelector('.toggle-weather');
9 | var toggler_celsiusContainer = document.querySelector('.toggle-setting[name=toggle-celsius]');
10 | var weatherInfo = document.getElementById('weather-info');
11 |
12 | if (is24HourFormat) {
13 | toggler_24h.classList.add('active');
14 | }
15 | if (isCelsius) {
16 | toggler_celsius.classList.add('active');
17 | }
18 | if (isWeatherVisible) {
19 | toggler_celsiusContainer.classList.add('active');
20 | toggler_weather.classList.add('active');
21 | weatherInfo.classList.add('active');
22 | }
23 |
24 | toggler_24h.onclick = function() {
25 | toggler_24h.classList.toggle('active');
26 | is24HourFormat = !is24HourFormat;
27 | localStorage.setItem('is24HourFormat', is24HourFormat);
28 | updateDateTime();
29 | }
30 |
31 | toggler_celsius.onclick = function() {
32 | toggler_celsius.classList.toggle('active');
33 | isCelsius = !isCelsius;
34 | localStorage.setItem('isCelsius', isCelsius);
35 | fetchWeather();
36 | }
37 |
38 | toggler_weather.onclick = function() {
39 | toggler_weather.classList.toggle('active');
40 | isWeatherVisible = !isWeatherVisible;
41 | localStorage.setItem('isWeatherVisible', isWeatherVisible);
42 | weatherInfo.classList.toggle('active');
43 | toggler_celsiusContainer.classList.toggle('active');
44 | }
45 |
46 | document.getElementById('fileInput').addEventListener('change', function(event) {
47 | const file = event.target.files[0];
48 | if (file && file.type.startsWith('image/')) {
49 | const reader = new FileReader();
50 | reader.onload = function(e) {
51 | const img = new Image();
52 | img.onload = function() {
53 | const canvas = document.createElement('canvas');
54 | const ctx = canvas.getContext('2d');
55 |
56 | const maxWidth = 3200;
57 | const maxHeight = 2400;
58 | let width = img.width;
59 | let height = img.height;
60 |
61 | if (width > maxWidth || height > maxHeight) {
62 | if (width / height > maxWidth / maxHeight) {
63 | width = maxWidth;
64 | height = Math.round(maxWidth * img.height / img.width);
65 | } else {
66 | height = maxHeight;
67 | width = Math.round(maxHeight * img.width / img.height);
68 | }
69 | }
70 |
71 | canvas.width = width;
72 | canvas.height = height;
73 |
74 | ctx.drawImage(img, 0, 0, width, height);
75 |
76 | const base64Image = canvas.toDataURL('image/jpeg', 3.0);
77 | localStorage.setItem('bgImage', base64Image);
78 | alert('Background saved! Please refresh the page.');
79 | };
80 | img.src = e.target.result;
81 | };
82 | reader.readAsDataURL(file);
83 | } else {
84 | alert('Please select a valid image file.');
85 | }
86 | });
87 |
88 | document.addEventListener('DOMContentLoaded', function() {
89 |
90 | document.getElementById('settings-button').addEventListener('click', function() { togglePanel('settings-popup'); });
91 | document.getElementById('plus-button').addEventListener('click', function() { togglePanel('add-menu'); });
92 | document.getElementById('add-close').addEventListener('click', function() { togglePanel('add-menu'); });
93 |
94 | document.getElementById('add-button').addEventListener('click', function() { addShortcut(); });
95 | initializeShortcuts();
96 | loadShortcutsFromLocalStorage();
97 | fetchAndSetBackgroundImage();
98 | });
99 |
100 |
101 | function addShortcut() {
102 | var shortcutUrl = document.getElementById('shortcut-url-field').value;
103 | var iconUrl = document.getElementById('icon-url-field').value;
104 | var shortcuts = document.getElementById('actions-grid');
105 |
106 | if (shortcutUrl && iconUrl) {
107 | shortcuts.innerHTML += `
13 |