hypermc/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update style and ss

Browse Source
This commit is contained in:
MCHost
2025-07-06 21:46:26 -04:00
parent 4fd52b75b8
commit ab5b0194eb
4 changed files with 220 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
public/css/main-site.min.css vendored
View File

@@ -222,6 +222,9 @@
}
}
@layer utilities {
.pointer-events-none {
pointer-events: none;
}
.absolute {
position: absolute;
}
@@ -237,12 +240,39 @@
.inset-0 {
inset: calc(var(--spacing) * 0);
}
.top-1 {
top: calc(var(--spacing) * 1);
}
.top-2 {
top: calc(var(--spacing) * 2);
}
.top-4 {
top: calc(var(--spacing) * 4);
}
.right-2 {
right: calc(var(--spacing) * 2);
}
.right-4 {
right: calc(var(--spacing) * 4);
}
.bottom-4 {
bottom: calc(var(--spacing) * 4);
}
.left-1 {
left: calc(var(--spacing) * 1);
}
.z-2 {
z-index: 2;
}
.z-50 {
z-index: 50;
}
.z-\[1000\] {
z-index: 1000;
}
.z-\[99998\] {
z-index: 99998;
}
.container {
width: 100%;
@media (width >= 40rem) {
@@ -330,18 +360,39 @@
.h-4 {
height: calc(var(--spacing) * 4);
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-10 {
height: calc(var(--spacing) * 10);
}
.h-24 {
height: calc(var(--spacing) * 24);
}
.h-28 {
height: calc(var(--spacing) * 28);
}
.h-32 {
height: calc(var(--spacing) * 32);
}
.h-48 {
height: calc(var(--spacing) * 48);
}
.h-\[30vh\] {
height: 30vh;
}
.h-\[35vh\] {
height: 35vh;
}
.h-\[40vh\] {
height: 40vh;
}
.h-full {
height: 100%;
}
.max-h-\[80vh\] {
max-height: 80vh;
}
.max-h-\[calc\(95vh-10rem\)\] {
max-height: calc(95vh - 10rem);
}
@@ -363,6 +414,9 @@
.w-10 {
width: calc(var(--spacing) * 10);
}
.w-16 {
width: calc(var(--spacing) * 16);
}
.w-20 {
width: calc(var(--spacing) * 20);
}
@@ -375,9 +429,18 @@
.max-w-7xl {
max-width: var(--container-7xl);
}
.max-w-\[150px\] {
max-width: 150px;
}
.max-w-full {
max-width: 100%;
}
.max-w-md {
max-width: var(--container-md);
}
.max-w-xl {
max-width: var(--container-xl);
}
.min-w-0 {
min-width: calc(var(--spacing) * 0);
}
@@ -390,9 +453,20 @@
.flex-grow {
flex-grow: 1;
}
.-translate-y-2 {
--tw-translate-y: calc(var(--spacing) * -2);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-2 {
--tw-translate-y: calc(var(--spacing) * 2);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.animate-spin {
animation: var(--animate-spin);
}
.cursor-not-allowed {
cursor: not-allowed;
}
@@ -414,6 +488,9 @@
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-row {
flex-direction: row;
}
@@ -435,6 +512,9 @@
.justify-end {
justify-content: flex-end;
}
.gap-1 {
gap: calc(var(--spacing) * 1);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
@@ -515,6 +595,18 @@
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-1 {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-2 {
border-style: var(--tw-border-style);
border-width: 2px;
}
.border-4 {
border-style: var(--tw-border-style);
border-width: 4px;
}
.border-t {
border-top-style: var(--tw-border-style);
border-top-width: 1px;
@@ -523,12 +615,25 @@
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.border-none {
--tw-border-style: none;
border-style: none;
}
.border-\[rgba\(255\,255\,255\,0\.12\)\] {
border-color: rgba(255,255,255,0.12);
}
.border-\[rgba\(255\,255\,255\,0\.15\)\] {
border-color: rgba(255,255,255,0.15);
}
.border-blue-400 {
border-color: var(--color-blue-400);
}
.border-gray-700 {
border-color: var(--color-gray-700);
}
.border-t-blue-600 {
border-top-color: var(--color-blue-600);
}
.bg-\[rgba\(10\,17\,40\,0\.3\)\] {
background-color: rgba(10,17,40,0.3);
}
@@ -538,9 +643,21 @@
.bg-black {
background-color: var(--color-black);
}
.bg-black\/75 {
background-color: color-mix(in srgb, #000 75%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
}
}
.bg-blue-400 {
background-color: var(--color-blue-400);
}
.bg-blue-600 {
background-color: var(--color-blue-600);
}
.bg-blue-800 {
background-color: var(--color-blue-800);
}
.bg-cyan-600 {
background-color: var(--color-cyan-600);
}
@@ -559,6 +676,9 @@
background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
}
}
.bg-gray-900 {
background-color: var(--color-gray-900);
}
.bg-green-600 {
background-color: var(--color-green-600);
}
@@ -574,13 +694,27 @@
.bg-teal-600 {
background-color: var(--color-teal-600);
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
background-color: var(--color-white);
}
.bg-yellow-500 {
background-color: var(--color-yellow-500);
}
.bg-gradient-to-r {
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-blue-600 {
--tw-gradient-from: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-700 {
--tw-gradient-from: var(--color-blue-700);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-teal-400 {
--tw-gradient-from: var(--color-teal-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -592,6 +726,9 @@
.bg-clip-text {
background-clip: text;
}
.p-1 {
padding: calc(var(--spacing) * 1);
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
@@ -616,12 +753,18 @@
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.py-0\.5 {
padding-block: calc(var(--spacing) * 0.5);
}
.py-1 {
padding-block: calc(var(--spacing) * 1);
}
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
@@ -637,6 +780,9 @@
.text-center {
text-align: center;
}
.font-\[Minecraft\] {
font-family: Minecraft;
}
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -731,6 +877,13 @@
.opacity-90 {
opacity: 90%;
}
.opacity-100 {
opacity: 100%;
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -833,6 +986,13 @@
}
}
}
.hover\:bg-yellow-600 {
&:hover {
@media (hover: hover) {
background-color: var(--color-yellow-600);
}
}
}
.hover\:bg-gradient-to-r {
&:hover {
@media (hover: hover) {
@@ -1467,6 +1627,21 @@ footer a:hover {
padding: 0.75rem 1.5rem;
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
@@ -1726,6 +1901,9 @@ footer a:hover {
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;

18
public/css/style.css
View File

@@ -206,25 +206,37 @@
}
[role="switch"]>div:first-child {
@apply block w-full h-full rounded-full bg-gray-700 transition-colors duration-200;
@apply block w-full h-full rounded-full bg-gray-600 transition-colors duration-200;
}
[role="switch"]>div:last-child {
@apply absolute w-4 h-4 rounded-full bg-white top-1 transition-all duration-200;
@apply absolute w-4 h-4 rounded-full bg-white top-1 left-1 transition-all duration-200 shadow-sm;
}
[role="switch"][aria-checked="true"]>div:first-child {
@apply bg-blue-600;
@apply bg-gradient-to-r from-blue-600 to-blue-800;
}
[role="switch"][aria-checked="true"]>div:last-child {
@apply left-5;
}
[role="switch"][aria-checked="false"]>div:first-child {
@apply bg-gray-600;
}
[role="switch"][aria-checked="false"]>div:last-child {
@apply left-1;
}
[role="switch"]:hover:not([aria-disabled="true"])>div:first-child {
@apply bg-gradient-to-r from-blue-700 to-blue-900;
}
[role="switch"][aria-disabled="true"]>div:first-child {
@apply bg-gray-600 cursor-not-allowed opacity-50;
}
#sftpIframe {
@apply w-full rounded;
height: 50vh;

39
public/css/style.min.css vendored
View File

@@ -12,10 +12,8 @@
--color-red-700: oklch(50.5% 0.213 27.518);
--color-yellow-500: oklch(79.5% 0.184 86.047);
--color-yellow-600: oklch(68.1% 0.162 75.834);
--color-yellow-700: oklch(55.4% 0.135 66.442);
--color-green-600: oklch(62.7% 0.194 149.214);
--color-green-700: oklch(52.7% 0.154 150.069);
--color-teal-300: oklch(85.5% 0.138 181.071);
--color-teal-400: oklch(77.7% 0.152 181.912);
--color-teal-600: oklch(60% 0.118 184.704);
--color-teal-700: oklch(51.1% 0.096 186.391);
@@ -26,10 +24,9 @@
--color-blue-600: oklch(54.6% 0.245 262.881);
--color-blue-700: oklch(48.8% 0.243 264.376);
--color-blue-800: oklch(42.4% 0.199 265.638);
--color-blue-900: oklch(37.9% 0.146 265.522);
--color-purple-600: oklch(55.8% 0.288 302.321);
--color-purple-700: oklch(49.6% 0.265 301.924);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325);
--color-gray-500: oklch(55.1% 0.027 264.364);
@@ -42,8 +39,6 @@
--spacing: 0.25rem;
--container-md: 28rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-7xl: 80rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
@@ -59,21 +54,17 @@
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--tracking-tight: -0.025em;
--tracking-wide: 0.025em;
--leading-relaxed: 1.625;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--animate-spin: spin 1s linear infinite;
--blur-xl: 24px;
@@ -1216,7 +1207,7 @@
height: 100%;
width: 100%;
border-radius: calc(infinity * 1px);
background-color: var(--color-gray-700);
background-color: var(--color-gray-600);
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -1226,10 +1217,13 @@
[role="switch"]>div:last-child {
position: absolute;
top: calc(var(--spacing) * 1);
left: calc(var(--spacing) * 1);
height: calc(var(--spacing) * 4);
width: calc(var(--spacing) * 4);
border-radius: calc(infinity * 1px);
background-color: var(--color-white);
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -1237,14 +1231,35 @@
transition-duration: 200ms;
}
[role="switch"][aria-checked="true"]>div:first-child {
background-color: var(--color-blue-600);
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
--tw-gradient-from: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
--tw-gradient-to: var(--color-blue-800);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
[role="switch"][aria-checked="true"]>div:last-child {
left: calc(var(--spacing) * 5);
}
[role="switch"][aria-checked="false"]>div:first-child {
background-color: var(--color-gray-600);
}
[role="switch"][aria-checked="false"]>div:last-child {
left: calc(var(--spacing) * 1);
}
[role="switch"]:hover:not([aria-disabled="true"])>div:first-child {
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
--tw-gradient-from: var(--color-blue-700);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
--tw-gradient-to: var(--color-blue-900);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
[role="switch"][aria-disabled="true"]>div:first-child {
cursor: not-allowed;
background-color: var(--color-gray-600);
opacity: 50%;
}
#sftpIframe {
width: 100%;
border-radius: 0.25rem;

BIN
public/screenshots/panel.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 912 KiB

After

Width:  |  Height:  |  Size: 888 KiB