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

update styles for modals and notifs

Browse Source
This commit is contained in:
MCHost
2025-07-10 03:19:43 -04:00
parent f11c2f96ba
commit d162b17dba
7 changed files with 1239 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -67,9 +67,11 @@
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--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-sm: 8px;
--blur-xl: 24px;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1070,10 +1072,13 @@
display: flex;
align-items: center;
justify-content: center;
background-color: color-mix(in srgb, #000 75%, transparent);
background-color: color-mix(in srgb, #000 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
}
--tw-backdrop-blur: blur(var(--blur-sm));
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.modal-content {
position: relative;
@@ -1081,22 +1086,65 @@
width: 100%;
max-width: var(--container-xl);
overflow-y: auto;
border-radius: var(--radius-lg);
background-color: var(--color-gray-800);
border-radius: var(--radius-2xl);
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-800) 60%, transparent);
}
padding: calc(var(--spacing) * 6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
scrollbar-width: thin;
scrollbar-color: #4B5563 #1F2937;
}
@media (max-width: 640px) {
.holesail-output-mobile-hidden {
display: none;
.modal-content input, .modal-content textarea, .modal-content select {
width: 100%;
border-radius: var(--radius-lg);
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
}
padding: calc(var(--spacing) * 2);
color: var(--color-white);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal-content input:focus, .modal-content textarea:focus, .modal-content select:focus {
border-color: var(--color-blue-400);
--tw-outline-style: none;
outline-style: none;
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}
.modal-content input::placeholder, .modal-content textarea::placeholder {
color: var(--color-gray-300);
opacity: 70%;
}
.modal-content .item-entry input {
width: 100%;
border-radius: var(--radius-lg);
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
}
padding: calc(var(--spacing) * 2);
color: var(--color-white);
@media (width >= 40rem) {
width: auto;
}
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.modal-content::-webkit-scrollbar {
width: calc(var(--spacing) * 2);
}
.modal-content::-webkit-scrollbar-track {
background-color: var(--color-gray-800);
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
}
}
.modal-content::-webkit-scrollbar-thumb {
border-radius: 0.25rem;
@@ -1116,6 +1164,19 @@
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
color: var(--color-white);
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));
&:hover {
@media (hover: hover) {
color: var(--color-gray-300);
}
}
}
@media (max-width: 640px) {
.holesail-output-mobile-hidden {
display: none;
}
}
.control-btn {
border-radius: 0.25rem;
@@ -1156,26 +1217,83 @@
z-index: 1000;
display: flex;
flex-direction: column-reverse;
gap: calc(var(--spacing) * 2);
gap: calc(var(--spacing) * 3);
}
.notification {
display: flex;
align-items: center;
gap: calc(var(--spacing) * 2);
border-radius: var(--radius-lg);
background-color: var(--color-gray-800);
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 70%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-800) 70%, transparent);
}
padding: calc(var(--spacing) * 3);
color: var(--color-white);
--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);
max-width: 90%;
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
max-width: min(90%, 400px);
min-height: 48px;
max-height: 200px;
overflow-y: auto;
white-space: normal;
word-break: break-word;
font-size: 0.875rem;
animation: slideIn 0.3s ease-out;
transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.notification:hover {
--tw-scale-x: 105%;
--tw-scale-y: 105%;
--tw-scale-z: 105%;
scale: var(--tw-scale-x) var(--tw-scale-y);
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.notification.success {
background-color: var(--color-green-600);
background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-green-600) 20%, transparent);
}
border: 1px solid rgba(34, 197, 94, 0.2);
backdrop-filter: blur(12px);
}
.notification.error {
background-color: var(--color-red-600);
background-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-red-600) 20%, transparent);
}
border: 1px solid rgba(239, 68, 68, 0.2);
backdrop-filter: blur(12px);
}
.notification::-webkit-scrollbar {
width: 6px;
}
.notification::-webkit-scrollbar-track {
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
}
}
.notification::-webkit-scrollbar-thumb {
border-radius: 0.25rem;
background-color: var(--color-gray-600);
}
.notification::-webkit-scrollbar-thumb:hover {
background-color: var(--color-gray-500);
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
#dockerLogsTerminal {
box-sizing: border-box;
@@ -1536,8 +1654,14 @@
}
.modal-content {
max-width: 95%;
border-radius: var(--radius-xl);
padding: calc(var(--spacing) * 4);
}
.modal-content input, .modal-content textarea, .modal-content select {
padding: calc(var(--spacing) * 2);
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.section-bg .grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@@ -1567,6 +1691,8 @@
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.notification {
max-height: 180px;
min-height: 40px;
max-width: 80%;
padding: calc(var(--spacing) * 2);
font-size: var(--text-sm);
@@ -1614,8 +1740,14 @@
}
.modal-content {
max-width: 95%;
border-radius: var(--radius-xl);
padding: calc(var(--spacing) * 3);
}
.modal-content input, .modal-content textarea, .modal-content select {
padding: calc(var(--spacing) * 1);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
canvas {
max-width: 100px;
}
@@ -1638,8 +1770,10 @@
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.notification {
max-width: 90%;
padding: calc(var(--spacing) * 1);
max-height: 160px;
min-height: 36px;
max-width: 85%;
padding: calc(var(--spacing) * 2);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
@@ -1666,14 +1800,40 @@
line-height: var(--tw-leading, var(--text-xs--line-height));
}
}
.bg-gray-700 {
background-color: #151d31;
}
#particles-js {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
}
#particles-js canvas {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
@media (max-width: 480px) {
.section-bg {
padding: calc(var(--spacing) * 2);
}
.modal-content {
max-width: 98%;
border-radius: var(--radius-xl);
padding: calc(var(--spacing) * 2);
}
.modal-content input, .modal-content textarea, .modal-content select {
padding: calc(var(--spacing) * 1);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
canvas {
max-width: 80px;
}
@@ -1696,8 +1856,10 @@
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.notification {
max-width: 95%;
padding: calc(var(--spacing) * 1);
max-height: 140px;
min-height: 32px;
max-width: 90%;
padding: calc(var(--spacing) * 1.5);
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
@@ -1723,6 +1885,23 @@
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
#particles-js {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
}
#particles-js canvas {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
@property --tw-rotate-x {
syntax: "*";
@@ -1975,6 +2154,21 @@
syntax: "*";
inherits: false;
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
@@ -2056,9 +2250,12 @@
--tw-backdrop-sepia: initial;
--tw-duration: initial;
--tw-ease: initial;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
}
}
}
}