Refactored modules and updated loader.
This commit is contained in:
+124
-19
@@ -26,6 +26,20 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #000;
|
||||
font-family: 'EB Garamond', serif;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: 'EB Garamond', sans-serif;
|
||||
font-feature-settings: 'kern' on, 'liga' on, 'onum' on, 'dlig' on, 'clig' on, 'calt' on, 'hlig' off, 'swsh' on, 'locl' off;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.loading-overlay {
|
||||
font-family: 'EB Garamond', serif;
|
||||
@@ -77,30 +91,48 @@
|
||||
#modules-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
max-height: 300px; /* Increased height */
|
||||
overflow: hidden; /* Hide scrollbar */
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
.module-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
margin-bottom: 8px;
|
||||
color: #ccc;
|
||||
|
||||
.module-name, .module-status, .module-status-detail {
|
||||
font-size: 14px !important;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
|
||||
.module-status {
|
||||
text-align: center !important;
|
||||
font-size: 14px !important;
|
||||
grid-column: 2 !important;
|
||||
min-width: 80px !important;
|
||||
padding: 0 10px !important;
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
.module-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: var(--progress-width, 0%);
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
transition: width 0.3s ease-in-out;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* Fallback for browsers without CSS variable support */
|
||||
.module-item[data-progress] {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.module-name {
|
||||
text-align: left;
|
||||
padding-right: 10px;
|
||||
grid-column: 1;
|
||||
}
|
||||
.module-status {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
grid-column: 2;
|
||||
min-width: 80px; /* Ensure status has minimum width */
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.module-status-detail {
|
||||
grid-column: 3;
|
||||
@@ -109,12 +141,17 @@
|
||||
color: #aaa;
|
||||
font-style: italic;
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.status-pending {
|
||||
color: #ccc;
|
||||
}
|
||||
.status-loading {
|
||||
color: #FFC107;
|
||||
color: #07ffe6;
|
||||
}
|
||||
.status-fetching {
|
||||
color: #ff00dd;
|
||||
}
|
||||
.status-waiting {
|
||||
color: #FF9800;
|
||||
@@ -129,13 +166,43 @@
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
/* Module fade animations */
|
||||
@keyframes fadeInModule {
|
||||
0% { opacity: 0; transform: translateY(5px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeOutModule {
|
||||
0% { opacity: 1; height: 24px; margin-bottom: 8px; }
|
||||
60% { opacity: 0.4; height: 24px; margin-bottom: 8px; }
|
||||
100% { opacity: 0; height: 0; margin-bottom: 0; padding: 0; }
|
||||
}
|
||||
|
||||
.module-item {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr auto 1fr !important;
|
||||
margin-bottom: 8px !important;
|
||||
color: #ccc !important;
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
overflow: hidden !important;
|
||||
font-size: 14px !important;
|
||||
animation: fadeInModule 0.5s ease-in-out forwards !important;
|
||||
transition: height 0.5s ease-in-out, margin-bottom 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
|
||||
}
|
||||
|
||||
.module-finished {
|
||||
animation: fadeOutModule 1.5s ease-in-out forwards !important;
|
||||
animation-delay: 1s !important; /* Shorter delay so you can see it happen */
|
||||
}
|
||||
|
||||
/* Update loader module list scrolling */
|
||||
.loading-overlay #modules-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto; /* Enable vertical scrolling */
|
||||
width: 100%;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #555 #333;
|
||||
@@ -153,6 +220,29 @@
|
||||
background-color: #555;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Add scrollbar styles from main CSS */
|
||||
/* ===== Scrollbar CSS ===== */
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: #000000 rgba(255,255,255,0);
|
||||
}
|
||||
|
||||
/* Chrome, Edge, and Safari */
|
||||
*::-webkit-scrollbar {
|
||||
width: calc(1rem/4);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: rgba(255,255,255,0);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #000000;
|
||||
border-radius: 10px;
|
||||
border: 1px none rgba(255,255,255,0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -188,6 +278,21 @@
|
||||
console.log(message);
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
// Redefine console.log to expose browser logs to model
|
||||
const originalLog = console.log;
|
||||
console.log = function(message) {
|
||||
if (typeof debug !== 'undefined' && debug) {
|
||||
const debugContent = document.getElementById('debug-content');
|
||||
if (debugContent) {
|
||||
const logMsg = document.createElement('div');
|
||||
logMsg.textContent = message;
|
||||
debugContent.appendChild(logMsg);
|
||||
}
|
||||
}
|
||||
originalLog(message);
|
||||
};
|
||||
</script>
|
||||
<script type="module" src="/js/loader.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user