update styles for modals and notifs
This commit is contained in:
MCHost
@@ -40,30 +40,24 @@
|
||||
}
|
||||
|
||||
.xterm {
|
||||
/* Ensure terminal container respects parent dimensions */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
/* Add padding for better text spacing */
|
||||
box-sizing: border-box;
|
||||
/* Prevent padding from causing overflow */
|
||||
}
|
||||
|
||||
/* Viewport styling for scrollbars */
|
||||
.xterm .xterm-viewport {
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #4b5563 #1f2937;
|
||||
}
|
||||
|
||||
/* Webkit scrollbar styling */
|
||||
.xterm .xterm-viewport::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.xterm .xterm-viewport::-webkit-scrollbar-track {
|
||||
background: #1f2937;
|
||||
/* Match terminal background for consistency */
|
||||
}
|
||||
|
||||
.xterm .xterm-viewport::-webkit-scrollbar-thumb {
|
||||
@@ -73,28 +67,20 @@
|
||||
|
||||
.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
|
||||
background: #6b7280;
|
||||
/* Slightly lighter on hover for feedback */
|
||||
}
|
||||
|
||||
/* Ensure screen fits container */
|
||||
.xterm .xterm-screen {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
/* Ensure full height usage */
|
||||
}
|
||||
|
||||
/* Improve text rendering */
|
||||
.xterm .xterm-char {
|
||||
line-height: 1.2;
|
||||
/* Adjust line height for better text alignment */
|
||||
}
|
||||
|
||||
/* Prevent text overflow */
|
||||
.xterm .xterm-rows {
|
||||
overflow: hidden;
|
||||
/* Prevent horizontal overflow */
|
||||
white-space: pre-wrap;
|
||||
/* Allow text wrapping if needed */
|
||||
}
|
||||
|
||||
#app {
|
||||
@@ -138,19 +124,44 @@
|
||||
}
|
||||
|
||||
.modal {
|
||||
@apply fixed inset-0 bg-black/75 flex items-center justify-center z-[1000];
|
||||
@apply fixed inset-0 bg-black/30 flex items-center justify-center z-[1000] backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply bg-gray-800 p-6 rounded-lg w-full max-w-xl relative max-h-[80vh] overflow-y-auto;
|
||||
@apply bg-gray-800/60 p-6 rounded-2xl w-full max-w-xl relative max-h-[80vh] overflow-y-auto;
|
||||
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 {
|
||||
@apply bg-gray-800/50 text-white p-2 rounded-lg w-full;
|
||||
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 {
|
||||
@apply outline-none border-blue-400;
|
||||
box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
|
||||
.modal-content input::placeholder,
|
||||
.modal-content textarea::placeholder {
|
||||
@apply text-gray-300 opacity-70;
|
||||
}
|
||||
|
||||
.modal-content .item-entry input {
|
||||
@apply bg-gray-800/50 text-white p-2 rounded-lg w-full sm:w-auto;
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar {
|
||||
@@ -158,7 +169,7 @@
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar-track {
|
||||
@apply bg-gray-800;
|
||||
@apply bg-gray-800/40;
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar-thumb {
|
||||
@@ -170,7 +181,13 @@
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
@apply absolute top-2 right-2 bg-transparent border-none text-white text-xl cursor-pointer;
|
||||
@apply absolute top-2 right-2 bg-transparent border-none text-white text-xl cursor-pointer hover:text-gray-300 transition-colors;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.holesail-output-mobile-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
@@ -192,21 +209,67 @@
|
||||
}
|
||||
|
||||
#notificationContainer {
|
||||
@apply fixed bottom-4 right-4 z-[1000] flex flex-col-reverse gap-2;
|
||||
@apply fixed bottom-4 right-4 z-[1000] flex flex-col-reverse gap-3;
|
||||
}
|
||||
|
||||
.notification {
|
||||
@apply bg-gray-800 p-3 rounded-lg text-white flex items-center gap-2 shadow-lg;
|
||||
max-width: 90%;
|
||||
@apply bg-gray-800/70 text-white p-3 rounded-lg flex items-center gap-2 shadow-lg;
|
||||
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 {
|
||||
@apply transform scale-105;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
@apply bg-green-600;
|
||||
@apply bg-green-600/20;
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
@apply bg-red-600;
|
||||
@apply bg-red-600/20;
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.notification::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.notification::-webkit-scrollbar-track {
|
||||
@apply bg-gray-800/40;
|
||||
}
|
||||
|
||||
.notification::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-600 rounded;
|
||||
}
|
||||
|
||||
.notification::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-500;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#dockerLogsTerminal {
|
||||
@@ -426,7 +489,13 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply p-4 max-w-[95%];
|
||||
@apply p-4 max-w-[95%] rounded-xl;
|
||||
}
|
||||
|
||||
.modal-content input,
|
||||
.modal-content textarea,
|
||||
.modal-content select {
|
||||
@apply p-2 text-sm;
|
||||
}
|
||||
|
||||
.section-bg .grid {
|
||||
@@ -460,7 +529,7 @@
|
||||
}
|
||||
|
||||
.notification {
|
||||
@apply text-sm p-2 max-w-[80%];
|
||||
@apply p-2 text-sm max-w-[80%] min-h-[40px] max-h-[180px];
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -508,7 +577,13 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply p-3 max-w-[95%];
|
||||
@apply p-3 max-w-[95%] rounded-xl;
|
||||
}
|
||||
|
||||
.modal-content input,
|
||||
.modal-content textarea,
|
||||
.modal-content select {
|
||||
@apply p-1 text-xs;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@@ -534,7 +609,7 @@
|
||||
}
|
||||
|
||||
.notification {
|
||||
@apply text-xs p-1 max-w-[90%];
|
||||
@apply p-2 text-xs max-w-[85%] min-h-[36px] max-h-[160px];
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -560,13 +635,42 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
@apply p-2;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply p-2 max-w-[98%];
|
||||
@apply p-2 max-w-[98%] rounded-xl;
|
||||
}
|
||||
|
||||
.modal-content input,
|
||||
.modal-content textarea,
|
||||
.modal-content select {
|
||||
@apply p-1 text-xs;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@@ -592,7 +696,7 @@
|
||||
}
|
||||
|
||||
.notification {
|
||||
@apply text-xs p-1 max-w-[95%];
|
||||
@apply p-1.5 text-xs max-w-[90%] min-h-[32px] max-h-[140px];
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -616,4 +720,23 @@
|
||||
.control-btn {
|
||||
@apply px-2 py-1 text-xs;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user