mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-12-02 15:39:57 +00:00
Kevin Veen-Birkenbach
6fda85788a
This update introduces full JavaScript-based nested submenu handling for the Apps menu, enabling reliable click-based toggling without interference from Bootstrap’s native dropdown logic. Submenus now expand to the left via custom CSS and no longer require dropstart or data-bs-toggle attributes. Changes include: - Add javascript feature flag and enable inline eval in CSP - Add javascript.js implementing custom submenu toggle logic - Add CSS rules for left-expanding nested dropdown menus - Replace hardcoded headline with LITTLEJS_HEADLINE variable - Modernize “Play” → “Start” labels in cards - Remove unused/legacy examples from examples.yml (commented out, not deleted) - Cleanup nav_top.html.j2 to remove conflicting Bootstrap attributes Conversation reference: https://chatgpt.com/share/6928b4c7-19ec-800f-a087-9af304ef4ed9
68 lines
1.5 KiB
CSS
68 lines
1.5 KiB
CSS
/* Global Base Styling */
|
|
body {
|
|
/* Use Infinito.Nexus color scheme variables */
|
|
background-color: var(--color-01-90);
|
|
color: var(--color-01-05);
|
|
min-height: 100vh;
|
|
padding-bottom: 4rem; /* Space for footer bar */
|
|
}
|
|
|
|
/* Card Styling (Infinito.Nexus Homepage Style) */
|
|
.app-card {
|
|
border-radius: 1rem;
|
|
background: radial-gradient(
|
|
circle at top left,
|
|
rgba(var(--color-rgb-01-10), 0.95),
|
|
rgba(var(--color-rgb-01-20), 0.90)
|
|
);
|
|
border: 1px solid rgba(var(--color-rgb-01-40), 0.35);
|
|
box-shadow: 0 18px 45px rgba(var(--color-rgb-01-90), 0.65);
|
|
transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s ease-out;
|
|
}
|
|
|
|
.app-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 22px 60px rgba(var(--color-rgb-01-90), 0.90);
|
|
border-color: rgba(var(--color-rgb-01-30), 0.70);
|
|
}
|
|
|
|
.app-icon {
|
|
font-size: 2.6rem;
|
|
}
|
|
|
|
.app-badge {
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: .12em;
|
|
}
|
|
|
|
/* Footer Bar */
|
|
.footer-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1030;
|
|
}
|
|
|
|
.footer-bar .btn-link {
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.footer-bar .btn-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Nested dropdown - open to the left */
|
|
.dropdown-menu .dropdown-submenu {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-menu .dropdown-submenu > .dropdown-menu {
|
|
top: 0;
|
|
right: 100%; /* statt left:100%; */
|
|
left: auto; /* überschreibt Bootstrap default */
|
|
margin-right: .1rem;
|
|
}
|