/* Font Imports (via Google Fonts or local files) */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); /* Base Theme Variables */ :root { --bg: #1a0d2b; --panel: #0e1627; --card: #2b1a47; --muted: #b8a4d2; --accent: #a100a1; --glass: rgba(161, 0, 161, 0.1); --text-color: #e6eef6; /* Kept, high contrast (~12:1) */ --font-family: 'Inter', ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial; --repeat-gradient: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px ); /* Adjusted opacity for dark theme */ } /* Theme Overrides */ [data-theme="dark"] { --bg: #071021; /* Default dark background */ --panel: #0e1627; /* Slightly lighter for subtle contrast */ --card: #0e1627; /* Match panel for consistency */ --muted: #b0b8c4; /* Lighter gray for better contrast (~7:1) */ --accent: #36b37e; /* Kept, contrasts well */ --glass: rgba(255, 255, 255, 0.1); /* Increased opacity for visibility */ --text-color: #e6eef6; /* Kept, high contrast (~12:1) */ --repeat-gradient: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px); } [data-theme="light"] { --bg: #fff; --panel: #f0f0f0; --card: #f0f0f0; /* Match panel */ --muted: #666; --glass: rgba(0, 0, 0, 0.1); --text-color: #000; --repeat-gradient: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 48px ); } [data-theme="grass"] { --bg: #6AA84F; --panel: #5a8a40; --card: #5a8a40; /* Match panel */ --muted: #fff; --glass: rgba(255, 255, 255, 0.15); --text-color: #fff; /* Added for consistency */ } [data-theme="dirt"] { --bg: #7B5A35; --panel: #6a4e2d; --card: #6a4e2d; /* Match panel */ --muted: #fff; --glass: rgba(255, 255, 255, 0.15); --text-color: #fff; /* Added */ } [data-theme="sky"] { --bg: #3C9EE7; --panel: #2f87c4; --card: #2f87c4; /* Match panel */ --muted: #fff; --glass: rgba(255, 255, 255, 0.15); --text-color: #fff; /* Added */ } /* Font Family Classes */ .font-default { font-family: var(--font-family); } .font-minecraft { font-family: 'Minecraft Ten', var(--font-family); } .font-minecrafter { font-family: 'Minecrafter', var(--font-family); } .font-pressstart { font-family: 'Press Start 2P', cursive; font-size: 16px; } .font-vt323 { font-family: 'VT323', monospace; font-size: 16px; } /* Apply to Body and Overrides */ body { background: var(--bg); /* Solid background for consistency */ color: var(--text-color); font-family: var(--font-family); transition: all 0.3s ease; margin: 0; padding: 0; } a { text-decoration: none; } .card, .viewer, input, select, button { background: var(--card); color: var(--text-color); border-color: var(--glass); } .muted { color: var(--muted); } /* === Layout === */ .app { display: grid; grid-template-columns: 0.1fr 1fr auto; grid-template-areas: "left main right" "status status status"; gap: 14px; padding: 14px; padding-top: 5px; height: 100vh; box-sizing: border-box; background: var(--bg); /* Ensure app matches root background */ } main { grid-area: main; background: var(--bg); /* Remove gradient for consistency */ } #customize-content { margin: 0 15px; } .left { grid-area: left; overflow-y: auto; overflow-x: hidden; transition: width 0.3s ease; background: var(--panel); } .left .aside-content { display: none; } .left .aside-content.active { display: block; } .right { grid-area: right; width: 300px; background: var(--card); border-radius: 12px; padding: 12px; overflow: auto; } .ad-space { min-height: 250px; color: var(--text-color); text-align: center; padding: 20px; border: 1px solid var(--glass); border-radius: 8px; background: var(--card); } header { grid-area: header; } .statusbar { grid-area: status; background: var(--card); padding: 8px 12px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; } /* === Cards & Containers === */ .card { background: var(--card); border-radius: 12px; padding: 12px; border: 1px solid var(--glass); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); /* Darker shadow for depth */ } /* === Controls === */ .controls h3 { margin: 8px 0 6px; color: var(--text-color); /* Changed for visibility */ font-size: 13px; } label { display: block; font-size: 13px; color: var(--text-color); /* Changed for visibility */ margin-bottom: 6px; } .row { display: flex; gap: 8px; align-items: center; } .controls-section { margin-bottom: 10px; } /* === Inputs & Buttons === */ input[type=range] { width: 100%; accent-color: var(--accent); /* Ensure slider thumb is visible */ } input[type=number], select, input[type=text] { background: var(--card); /* Solid background for inputs */ border: 1px solid var(--glass); padding: 8px; border-radius: 8px; color: var(--text-color); width: 100%; } input:focus, select:focus { outline: none; border-color: var(--accent); /* Highlight focus state */ } button { background: linear-gradient(180deg, var(--accent), #2e9b67); /* Darker accent for gradient */ color: #fff; border: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 600; } button.secondary { background: var(--card); border: 1px solid var(--glass); /* Changed for visibility */ color: var(--text-color); } button.small { padding: 6px 8px; font-size: 13px; border-radius: 8px; } /* === Viewer & Canvas === */ .canvas-wrap { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 124px); } .viewer { flex: 1; background: var(--bg); /* Match root background */ display: flex; align-items: center; justify-content: center; border-radius: 10px; position: relative; overflow: hidden; } canvas#grid { touch-action: none; display: block; background: #ffffff; /* Keep white for SVG grid visibility */ } /* === Toolbar & Palette === */ .tool-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; } .palette { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; } .color-swatch { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--glass); cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; } /* === Misc UI Elements === */ .muted { color: var(--muted); font-size: 13px; } .builder-count { font-size: 12px; color: var(--muted); } .ghost { opacity: 0.9; background: var(--card); color: var(--text-color); padding: 8px; border-radius: 8px; position: absolute; right: 10px; top: 10px; } .center-handle { position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-color); /* Changed for theme cohesion */ background: var(--accent); /* Use accent for visibility */ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); touch-action: none; } .mini-controls { display: flex; gap: 6px; flex-direction: column; position: absolute; right: 10px; bottom: 10px; } .small-ghost { background: var(--card); padding: 6px; border-radius: 8px; color: var(--text-color); } .toggle { display: inline-flex; align-items: center; gap: 8px; } .checkbox { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--glass); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .kbd { background: var(--card); border-radius: 6px; padding: 4px 6px; font-weight: 600; color: var(--text-color); border: 1px solid var(--glass); } /* Toggle Button */ .toggle-btn { display: block; width: 100%; padding: 10px; font-size: 15px; background: var(--accent); /* Use accent for visibility */ color: #fff; border: none; border-radius: 4px; cursor: pointer; text-align: left; margin-bottom: 8px; } .toggle-btn:hover { opacity: 0.95; transform: scale(1.01); } /* SEO Section */ #description-module { width: 80vw; margin: auto; background: var(--bg); } #description-module h2, h1 { text-align: center; color: var(--text-color); } #description-module .guide-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; margin: 24px 0; } #description-module .tutorial-section, #description-module .usage-section, #description-module .faq-section { margin: 24px 0; } #description-module .tutorial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .description-subhead { text-align: center; margin-top: 10px; color: var(--text-color); } #description-module .tutorial-card { background: var(--card); border: 1px solid var(--glass); border-radius: 8px; padding: 16px; text-align: center; } #description-module .tutorial-card h4 { margin: 0 0 12px; color: var(--text-color); } #description-module .tutorial-card img { max-width: 100%; height: auto; border-radius: 4px; } #description-module .tip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } #description-module .tip-card { background: var(--card); border: 1px solid var(--glass); border-radius: 8px; padding: 12px; color: var(--text-color); font-size: 0.95rem; } #description-module .usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #description-module .usage-column, #description-module .faq-column { display: flex; flex-direction: column; gap: 8px; } #description-module .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Icon placeholders */ /* .icon-shapes { background-image: url('/images/icons/shapes.svg'); } .icon-style { background-image: url('/images/icons/style.svg'); } .icon-draw { background-image: url('/images/icons/draw.svg'); } .icon-export { background-image: url('/images/icons/export.svg'); } .icon-save { background-image: url('/images/icons/save.svg'); } .icon-mobile { background-image: url('/images/icons/mobile.svg'); } .icon-print { background-image: url('/images/icons/print.svg'); } */ #description-module .guide-column { display: flex; flex-direction: column; } #description-module .guide-section { margin: 16px 0; border: 1px solid var(--glass); border-radius: 8px; transition: box-shadow 0.3s ease; } #description-module .guide-section:hover { box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2); } #description-module summary { padding: 16px; font-size: 1.2rem; font-weight: 600; color: var(--text-color); background: var(--card); /* Match card for consistency */ cursor: pointer; border-radius: 8px; transition: background 0.3s ease; } #description-module summary:hover { background: #1a263a; /* Slightly lighter for hover */ } #description-module .guide-content { padding: 20px; background: var(--card); border-radius: 0 0 8px 8px; color: var(--text-color); } #description-module .guide-content ul { margin-left: 32px; } #description-module .guide-content ul li { margin-bottom: 10px; color: var(--text-color); } #description-module .guide-content ul ul { list-style: circle; margin-left: 36px; } #description-module .guide-image { margin: 20px 0; text-align: center; } #description-module .guide-image img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #description-module .guide-image figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 8px; } #description-module .cta-buttons { display: flex; gap: 16px; justify-content: center; margin-top: 24px; } #description-module .cta-button { padding: 12px 24px; font-size: 1.1rem; font-weight: 600; color: #ffffff; background: var(--accent); /* Use accent for consistency */ border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s ease; } #description-module .cta-button:hover { background: #2e9b67; /* Darker accent */ } /* Desktop Adjustments */ @media (min-width: 769px) { .left { width: 320px; } .left.active { width: 320px; } .toggle-btn { display: block; } .right { display: block; } } /* Mobile and Small Screen Tweaks */ @media (max-width: 768px) { body, html { font-size: 15px; margin: 0; padding: 0; overflow-x: hidden; background: var(--bg); } .app { display: flex; flex-direction: column; min-height: 100vh; height: auto; } header .tool-bar { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px; } header .tool-bar button { flex: 1 1 45%; font-size: 14px; padding: 8px; } .canvas-wrap { order: 1; height: 70vh; min-height: 400px; overflow: auto; padding: 10px; box-sizing: border-box; } .viewer { height: 100%; position: relative; background: var(--bg); } #grid { width: 100%; height: 100%; max-width: 100%; } .left { order: 2; width: 100%; padding: 10px; margin-top: 10px; background: var(--panel); } .right { display: none; } .statusbar { order: 3; flex-direction: column; gap: 4px; font-size: 13px; padding: 10px; } .controls-section { margin-bottom: 16px; } button, .small { padding: 10px; font-size: 15px; width: 100%; } .color-swatch { width: 32px; height: 32px; } } /* Tablet tweak */ @media (min-width: 769px) and (max-width: 1024px) { #description-module .guide-grid { grid-template-columns: 1fr; } #description-module .tutorial-grid { grid-template-columns: 1fr; } #description-module .tip-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile tweaks for SEO section */ @media (max-width: 768px) { #description-module { padding: 16px; background: var(--bg); } #description-module .guide-container { max-width: 100%; } #description-module h2 { font-size: 1.4rem; } #description-module h3 { font-size: 1.2rem; } #description-module p, #description-module ul li { font-size: 0.95rem; color: var(--text-color); } #description-module .icon { width: 20px; height: 20px; } #description-module .guide-grid, #description-module .usage-grid, #description-module .faq-grid, #description-module .tutorial-grid, #description-module .tip-grid { grid-template-columns: 1fr; } #description-module .tutorial-card, #description-module .tip-card { margin-bottom: 16px; } #description-module summary { font-size: 1.1rem; padding: 12px; } #description-module .guide-content { padding: 12px; } #description-module .cta-button { padding: 10px 20px; font-size: 1rem; } }