ivanch/vision-start
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

fixes and improvements

Browse Source
This commit is contained in:
Jose Henrique
2026-07-04 15:01:14 -03:00
parent 52d954d9ca
commit c59b7edd82
13 changed files with 213 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
index.css
View File

@@ -27,9 +27,9 @@ body {
isolation: isolate;
overflow-x: hidden;
background:
radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.16), transparent 28rem),
radial-gradient(circle at 82% 20%, rgba(34, 211, 238, 0.13), transparent 26rem),
linear-gradient(135deg, rgba(241, 245, 249, 0.1), rgba(15, 23, 42, 0.18) 52%, rgba(8, 13, 20, 0.34));
radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.06), transparent 28rem),
radial-gradient(circle at 82% 20%, rgba(34, 211, 238, 0.05), transparent 26rem),
linear-gradient(135deg, rgba(241, 245, 249, 0.04), rgba(15, 23, 42, 0.16) 52%, rgba(8, 13, 20, 0.32));
}
.vision-shell::before {
@@ -39,8 +39,8 @@ body {
z-index: -15;
pointer-events: none;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(2, 6, 23, 0.34) 100%),
radial-gradient(ellipse at center, transparent 0%, rgba(2, 6, 23, 0.2) 78%, rgba(2, 6, 23, 0.42) 100%);
linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(2, 6, 23, 0.3) 100%),
radial-gradient(ellipse at center, transparent 0%, rgba(2, 6, 23, 0.18) 78%, rgba(2, 6, 23, 0.36) 100%);
}
.wallpaper-transition {
@@ -65,24 +65,24 @@ body {
z-index: -25;
pointer-events: none;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 34%, rgba(5, 12, 20, 0.38)),
radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.16), transparent 28rem),
radial-gradient(circle at 50% 100%, rgba(8, 13, 24, 0.42), transparent 36rem);
linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 34%, rgba(5, 12, 20, 0.34)),
radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.05), transparent 28rem),
radial-gradient(circle at 50% 100%, rgba(8, 13, 24, 0.36), transparent 36rem);
}
.liquid-surface {
position: relative;
overflow: hidden;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07) 46%, rgba(15, 23, 42, 0.2)),
rgba(8, 13, 23, 0.22);
border: 1px solid rgba(255, 255, 255, 0.24);
linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04) 46%, rgba(15, 23, 42, 0.18)),
rgba(8, 13, 23, 0.3);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.34),
inset 0 -18px 30px rgba(2, 6, 23, 0.18),
0 18px 42px rgba(2, 6, 23, 0.24);
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -10px 20px rgba(2, 6, 23, 0.12),
0 12px 28px rgba(2, 6, 23, 0.2);
-webkit-backdrop-filter: blur(10px) saturate(112%);
backdrop-filter: blur(10px) saturate(112%);
}
.liquid-surface::before {
@@ -91,23 +91,23 @@ body {
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.36), transparent 34%),
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 42%);
opacity: 0.7;
linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 34%),
radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07), transparent 42%);
opacity: 0.28;
}
.liquid-panel {
position: relative;
overflow: hidden;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08) 48%, rgba(5, 12, 22, 0.36)),
rgba(8, 13, 23, 0.38);
border: 1px solid rgba(255, 255, 255, 0.22);
linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04) 48%, rgba(5, 12, 22, 0.34)),
rgba(8, 13, 23, 0.48);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 28px 80px rgba(2, 6, 23, 0.34);
backdrop-filter: blur(30px) saturate(155%);
-webkit-backdrop-filter: blur(30px) saturate(155%);
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 22px 56px rgba(2, 6, 23, 0.3);
-webkit-backdrop-filter: blur(14px) saturate(115%);
backdrop-filter: blur(14px) saturate(115%);
}
.liquid-control {
@@ -129,12 +129,12 @@ body {
.liquid-control:hover {
transform: translateY(-1px) scale(1.025);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)),
rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.36);
linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)),
rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.44),
0 18px 40px rgba(2, 6, 23, 0.28);
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 14px 30px rgba(2, 6, 23, 0.22);
}
.liquid-control:active {
@@ -153,8 +153,8 @@ body {
.liquid-input {
width: 100%;
color: white;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.075);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 0.875rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition:
@@ -168,8 +168,8 @@ body {
}
.liquid-input:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.18);
}
.liquid-input:focus {
@@ -223,65 +223,164 @@ body {
}
.liquid-range {
width: 12rem;
height: 1.25rem;
--range-progress: 50%;
width: clamp(10rem, 36vw, 13.5rem);
height: 1.6rem;
appearance: none;
background: transparent;
accent-color: #22d3ee;
cursor: pointer;
}
.liquid-range:focus {
outline: none;
}
.liquid-range:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.liquid-range::-webkit-slider-runnable-track {
height: 0.38rem;
height: 0.68rem;
border-radius: 999px;
background: linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(255, 255, 255, 0.7));
box-shadow: inset 0 1px 2px rgba(2, 6, 23, 0.24);
background:
linear-gradient(90deg, rgba(34, 211, 238, 0.92), rgba(103, 232, 249, 0.78)) 0 / var(--range-progress) 100% no-repeat,
linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)),
rgba(8, 13, 23, 0.4);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 2px rgba(2, 6, 23, 0.24),
0 8px 18px rgba(2, 6, 23, 0.14);
transition:
border-color 180ms var(--ease-ios),
box-shadow 180ms var(--ease-ios);
}
.liquid-range:hover::-webkit-slider-runnable-track {
border-color: rgba(255, 255, 255, 0.24);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 2px rgba(2, 6, 23, 0.2),
0 10px 22px rgba(2, 6, 23, 0.18);
}
.liquid-range::-webkit-slider-thumb {
width: 1rem;
height: 1rem;
width: 1.18rem;
height: 1.18rem;
margin-top: -0.31rem;
appearance: none;
border-radius: 999px;
background: white;
border: 2px solid rgba(34, 211, 238, 0.9);
box-shadow: 0 6px 16px rgba(2, 6, 23, 0.3);
background: linear-gradient(145deg, #ffffff, #e5fbff 48%, #a5f3fc);
border: 1px solid rgba(255, 255, 255, 0.86);
box-shadow:
0 0 0 4px rgba(34, 211, 238, 0.1),
0 8px 18px rgba(2, 6, 23, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition:
transform 180ms var(--ease-ios),
box-shadow 180ms var(--ease-ios),
border-color 180ms var(--ease-ios);
}
.liquid-range:hover::-webkit-slider-thumb {
transform: scale(1.06);
box-shadow:
0 0 0 5px rgba(34, 211, 238, 0.15),
0 10px 22px rgba(2, 6, 23, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.liquid-range:active::-webkit-slider-thumb {
transform: scale(0.94);
}
.liquid-range:focus-visible::-webkit-slider-thumb {
border-color: rgba(34, 211, 238, 0.9);
box-shadow:
0 0 0 4px rgba(34, 211, 238, 0.24),
0 0 0 7px rgba(255, 255, 255, 0.08),
0 10px 22px rgba(2, 6, 23, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.liquid-range::-moz-range-track {
height: 0.38rem;
height: 0.68rem;
border-radius: 999px;
background: linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(255, 255, 255, 0.7));
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)),
rgba(8, 13, 23, 0.4);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 2px rgba(2, 6, 23, 0.24),
0 8px 18px rgba(2, 6, 23, 0.14);
}
.liquid-range::-moz-range-progress {
height: 0.68rem;
border-radius: 999px;
background: linear-gradient(90deg, rgba(34, 211, 238, 0.92), rgba(103, 232, 249, 0.78));
}
.liquid-range::-moz-range-thumb {
width: 1rem;
height: 1rem;
width: 1.18rem;
height: 1.18rem;
border-radius: 999px;
background: white;
border: 2px solid rgba(34, 211, 238, 0.9);
background: linear-gradient(145deg, #ffffff, #e5fbff 48%, #a5f3fc);
border: 1px solid rgba(255, 255, 255, 0.86);
box-shadow:
0 0 0 4px rgba(34, 211, 238, 0.1),
0 8px 18px rgba(2, 6, 23, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition:
transform 180ms var(--ease-ios),
box-shadow 180ms var(--ease-ios),
border-color 180ms var(--ease-ios);
}
.liquid-range:hover::-moz-range-thumb {
transform: scale(1.06);
box-shadow:
0 0 0 5px rgba(34, 211, 238, 0.15),
0 10px 22px rgba(2, 6, 23, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.liquid-range:active::-moz-range-thumb {
transform: scale(0.94);
}
.liquid-range:focus-visible::-moz-range-thumb {
border-color: rgba(34, 211, 238, 0.9);
box-shadow:
0 0 0 4px rgba(34, 211, 238, 0.24),
0 0 0 7px rgba(255, 255, 255, 0.08),
0 10px 22px rgba(2, 6, 23, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.liquid-tile {
border-radius: 1.35rem;
transition:
transform 220ms var(--ease-liquid),
background 220ms var(--ease-ios),
border-color 220ms var(--ease-ios),
box-shadow 220ms var(--ease-liquid);
transform 240ms var(--ease-liquid),
background 260ms var(--ease-ios),
border-color 260ms var(--ease-ios),
box-shadow 340ms var(--ease-liquid);
will-change: transform, box-shadow;
}
.liquid-tile:hover {
transform: translateY(-4px) scale(1.035);
border-color: rgba(255, 255, 255, 0.42);
transform: translateY(-3px) scale(1.025);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08) 46%, rgba(34, 211, 238, 0.08)),
rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.24);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.42),
0 24px 46px rgba(2, 6, 23, 0.28),
0 0 34px rgba(34, 211, 238, 0.12);
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 18px 34px rgba(2, 6, 23, 0.24),
0 0 20px rgba(34, 211, 238, 0.04);
}
.liquid-tile:active {
@@ -294,16 +393,16 @@ body {
border-style: dashed;
border-color: rgba(255, 255, 255, 0.32);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
rgba(255, 255, 255, 0.04);
linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)),
rgba(255, 255, 255, 0.03);
}
.liquid-ghost-tile:hover {
color: white;
border-color: rgba(34, 211, 238, 0.62);
background:
linear-gradient(145deg, rgba(34, 211, 238, 0.18), rgba(255, 255, 255, 0.08)),
rgba(255, 255, 255, 0.08);
linear-gradient(145deg, rgba(34, 211, 238, 0.08), rgba(255, 255, 255, 0.04)),
rgba(255, 255, 255, 0.05);
}
.liquid-edit-toolbar {
@@ -358,22 +457,22 @@ body {
.liquid-drawer {
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 38%, rgba(7, 12, 22, 0.48)),
rgba(7, 12, 22, 0.54);
border-left: 1px solid rgba(255, 255, 255, 0.18);
linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03) 38%, rgba(7, 12, 22, 0.44)),
rgba(7, 12, 22, 0.68);
border-left: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
inset 1px 0 0 rgba(255, 255, 255, 0.14),
-32px 0 80px rgba(2, 6, 23, 0.32);
backdrop-filter: blur(34px) saturate(160%);
-webkit-backdrop-filter: blur(34px) saturate(160%);
inset 1px 0 0 rgba(255, 255, 255, 0.08),
-26px 0 64px rgba(2, 6, 23, 0.3);
-webkit-backdrop-filter: blur(16px) saturate(112%);
backdrop-filter: blur(16px) saturate(112%);
}
.liquid-modal-backdrop {
background:
radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.12), transparent 32rem),
radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.04), transparent 32rem),
rgba(3, 7, 18, 0.72);
backdrop-filter: blur(10px) saturate(130%);
-webkit-backdrop-filter: blur(10px) saturate(130%);
-webkit-backdrop-filter: blur(6px) saturate(108%);
backdrop-filter: blur(6px) saturate(108%);
}
.liquid-modal-card {
@@ -382,6 +481,9 @@ body {
}
.liquid-dropdown-list {
position: absolute;
top: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
animation: liquid-drop 150ms var(--ease-ios);
@@ -429,7 +531,19 @@ body {
.liquid-control:hover,
.liquid-tile:hover,
.liquid-button:hover,
.liquid-edit-action:hover {
.liquid-edit-action:hover,
.liquid-range:hover::-webkit-slider-thumb,
.liquid-range:active::-webkit-slider-thumb,
.liquid-range:hover::-moz-range-thumb,
.liquid-range:active::-moz-range-thumb {
transform: none;
}
.liquid-range::-webkit-slider-runnable-track,
.liquid-range::-webkit-slider-thumb,
.liquid-range::-moz-range-track,
.liquid-range::-moz-range-progress,
.liquid-range::-moz-range-thumb {
transition: none;
}
}