feat: aggiunta console giocosa all'interno del sistema. fix: correzione di un warning.
This commit is contained in:
Gabriele Cimaschi committed
1 parent
dcc0456070
commit
60259427d3
7 files changed
+805
-11
No files matched your search
@@ -2778,4 +2778,263 @@ body {
|
||||
background: rgba(59, 130, 246, 0.35) !important;
|
||||
color: transparent !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
}
|
||||
|
||||
/* ---- Linux Terminal Console ---- */
|
||||
.console-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-md);
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.console-window {
|
||||
width: 900px;
|
||||
max-width: 95vw;
|
||||
height: 600px;
|
||||
max-height: 85vh;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.console-header {
|
||||
height: 38px;
|
||||
background: #1e1e2e;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.console-window-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.console-btn {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.console-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.console-btn.btn-close { background: #ff5f56; border: 1px solid #e0443e; }
|
||||
.console-btn.btn-minimize { background: #ffbd2e; border: 1px solid #dea123; }
|
||||
.console-btn.btn-maximize { background: #27c93f; border: 1px solid #1aab29; }
|
||||
|
||||
.console-title {
|
||||
font-size: 0.8rem;
|
||||
color: #a6adc8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.console-badge {
|
||||
font-size: 0.7rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
color: #cdd6f4;
|
||||
}
|
||||
|
||||
.console-body {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.45;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Themes */
|
||||
.theme-dark .console-window { background: #0f1419; color: #e6edf3; }
|
||||
.theme-dark .console-prompt .user-part { color: #38bdf8; font-weight: bold; }
|
||||
.theme-dark .console-prompt .path-part { color: #818cf8; }
|
||||
.theme-dark .cmd-highlight { color: #38bdf8; font-weight: bold; }
|
||||
.theme-dark .cmd-executed { color: #f43f5e; font-weight: bold; }
|
||||
|
||||
.theme-green .console-window { background: #051a05; color: #4ade80; }
|
||||
.theme-green .console-prompt .user-part { color: #22c55e; font-weight: bold; }
|
||||
.theme-green .console-prompt .path-part { color: #86efac; }
|
||||
.theme-green .cmd-highlight { color: #4ade80; font-weight: bold; }
|
||||
.theme-green .cmd-executed { color: #a7f3d0; font-weight: bold; }
|
||||
.theme-green .console-header { background: #082808; }
|
||||
|
||||
.theme-amber .console-window { background: #1a1202; color: #fbbf24; }
|
||||
.theme-amber .console-prompt .user-part { color: #f59e0b; font-weight: bold; }
|
||||
.theme-amber .console-prompt .path-part { color: #fde68a; }
|
||||
.theme-amber .cmd-highlight { color: #fbbf24; font-weight: bold; }
|
||||
.theme-amber .cmd-executed { color: #fef08a; font-weight: bold; }
|
||||
.theme-amber .console-header { background: #2a1d04; }
|
||||
|
||||
.theme-cyber .console-window { background: #0d0221; color: #00f5d4; }
|
||||
.theme-cyber .console-prompt .user-part { color: #7b2cbf; font-weight: bold; }
|
||||
.theme-cyber .console-prompt .path-part { color: #f72585; }
|
||||
.theme-cyber .cmd-highlight { color: #7209b7; font-weight: bold; }
|
||||
.theme-cyber .cmd-executed { color: #4cc9f0; font-weight: bold; }
|
||||
.theme-cyber .console-header { background: #19053d; }
|
||||
|
||||
.console-banner {
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.1;
|
||||
color: var(--accent-primary);
|
||||
margin-bottom: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.console-welcome-text {
|
||||
margin-bottom: 16px;
|
||||
color: #94a3b8;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.console-line {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.console-output-line {
|
||||
margin-bottom: 8px;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.console-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.console-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 0.88rem;
|
||||
padding: 0;
|
||||
caret-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.text-success { color: #22c55e; }
|
||||
.text-danger { color: #ef4444; }
|
||||
.text-warning { color: #f59e0b; }
|
||||
.text-info { color: #3b82f6; }
|
||||
.text-muted { color: #64748b; }
|
||||
.text-accent { color: #38bdf8; font-weight: bold; }
|
||||
|
||||
.dir-item { color: #60a5fa; font-weight: bold; }
|
||||
.file-item { color: #e2e8f0; }
|
||||
|
||||
.console-help-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.console-help-table > div {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cmd-name {
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
color: #38bdf8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cmd-desc {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.neofetch-container {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
padding: 8px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.neofetch-logo {
|
||||
color: #38bdf8;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.15;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.neofetch-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.console-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.82rem;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.console-table th {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 4px 8px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.console-table td {
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.badge-mini {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.matrix-stream {
|
||||
color: #22c55e;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.sl-train-box {
|
||||
color: #f59e0b;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
Reference in new issue
Block a user