:root { --color-accent-blue: #2196F3; --color-accent-blue-dark: #1976D2; --color-accent-blue-transparent: #2196F380; --color-accent-orange: #FF9800; --color-accent-orange-dark: #F57C00; --color-accent-orange-transparent: #F3973D80; /* App theme accent -- planner (blue) is the default; activateTab() in app-canvas.js sets [data-theme="blueprint"] on while the blueprints tab is active, which overrides these below. */ --color-accent: var(--color-accent-blue); --color-accent-dark: var(--color-accent-blue-dark); /* Flow-status colors -- match FLOW_SATISFIED_OVERLAY_COLOR/FLOW_THROTTLED_BORDER_COLOR/ FLOW_EXCESS_OVERLAY_COLOR in canvas-constants.js, which color the canvas's own efficiency borders/trails. */ --flow-good-color: #4caf50; --flow-bad-color: #fb8c00; --flow-excess-color: #1e88e5; --icon-background-color: #cbc9ca; } :root[data-theme="blueprint"] { --color-accent: var(--color-accent-orange); --color-accent-dark: var(--color-accent-orange-dark); } * { margin: 0; padding: 0; box-sizing: border-box; } * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: #1e1e1e; color: #e0e0e0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } .logo { background: url("../images/logo.png"); height: 100%; background-size: contain; margin: 0 10px; aspect-ratio: 581/208; } .hidden { display: none; } /* .tabs and the global .toolbar sit above this at their natural height (see index.html); .container fills whatever's left instead of assuming a fixed bar height. */ .container { display: flex; flex: 1; min-height: 0; } .sidebar { width: 240px; display: flex; flex-direction: column; transition: width 0.1s ease; left: 8px; } .sidebar.collapsed { width: 80px; } .sidebar > h2 { flex-shrink: 0; } .sidebar-collapse-btn { width: calc(100% + 24px); height: 40px; padding: 0; margin: -12px -12px -12px -12px; background: none; border: none; border-top: 1px solid #3d3d3d; border-radius: 0; cursor: pointer; color: #e0e0e0; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .sidebar-collapse-btn:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #fff; } .sidebar h2 { padding: 16px; font-size: 16px; border-bottom: 1px solid #3d3d3d; position: sticky; top: 0; color: #e0e0e0; } /* Extra-specific selector (not just .sidebar-title-icon) so this wins the cascade over Font Awesome's own base .fas/.far display rule -- fontawesome/css/all.min.css loads after this stylesheet, so an equal-specificity `display: none` here would lose. */ .sidebar h2 .sidebar-title-icon { display: none; } .sidebar.collapsed h2 { display: flex; align-items: center; justify-content: center; padding: 16px 8px; } .sidebar.collapsed .sidebar-title-icon { display: inline-block; font-size: 18px; } .sidebar.collapsed .sidebar-title-text { display: none; } .palette-search { display: block; width: calc(100% - 24px); margin: 12px 12px 0; padding: 6px 8px; border: 1px solid #4d4d4d; border-radius: 3px; font-size: 12px; background: #3d3d3d; color: #e0e0e0; flex-shrink: 0; } .sidebar.collapsed .palette-search { display: none; } .building-palette { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; } .palette-category { display: flex; flex-direction: column; } .palette-category[hidden] { display: none; } .palette-category-label { list-style: none; cursor: pointer; font-size: 11px; text-transform: uppercase; color: #999; font-weight: 600; letter-spacing: 0.5px; padding: 6px 4px; user-select: none; } .palette-category-label::-webkit-details-marker { display: none; } .palette-category-label::before { content: '\25b8'; display: inline-block; width: 1em; transition: transform 0.15s ease; } .palette-category[open] > .palette-category-label::before { transform: rotate(90deg); } .sidebar.collapsed .palette-category-label { display: none; } .palette-category-items { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; } .building-item.palette-item-hidden { display: none; } .building-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #3d3d3d; border-radius: 4px; cursor: grab; user-select: none; transition: all 0.2s ease; font-size: 13px; font-weight: 500; color: #e0e0e0; } .building-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar.collapsed .building-item { padding: 0; justify-content: center; } .sidebar.collapsed .building-item span { display: none; } .building-item:hover { background: #4d4d4d; border-color: #666; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .building-item:active { cursor: grabbing; background: #5d5d5d; } .building-item.paint-mode-active { background: var(--color-accent); color: #ffffff; box-shadow: 0 0 0 2px #6cbaff; } .palette-icon { width: 56px; height: 56px; flex-shrink: 0; border: 2px solid #333; border-radius: 2px; background-size: calc(100% - 8px); background-position: center; background-repeat: no-repeat; background-color: #4d4d4d; } /* Blueprint palette items (app-canvas.js's _createBlueprintPaletteItem) have no sprite asset -- a plain centered icon glyph in place of .palette-icon's background-image. */ .palette-icon-blueprint { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #999; } /* When a blueprint has its own composite icon set (see CompositeIconUI), it fills the 56px .palette-icon box in place of the fa-object-group fallback glyph above. */ .palette-icon-blueprint .composite-icon-container { width: 100%; height: 100%; } .sidebar-section { padding: 12px; border-top: 1px solid #3d3d3d; transition: opacity 0.3s ease, visibility 0.3s ease; flex-shrink: 0; } .sidebar-section:first-of-type h3, .sidebar-section:first-of-type label { display: none; } .sidebar.collapsed .sidebar-section:first-of-type { padding: 8px; } .sidebar-section h3 { font-size: 13px; text-transform: uppercase; color: #999; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.5px; } .sidebar-section label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; margin-bottom: 8px; color: #e0e0e0; } .sidebar-section input, .sidebar-section select { padding: 4px 8px; border: 1px solid #4d4d4d; border-radius: 3px; font-size: 12px; background: #3d3d3d; color: #e0e0e0; } .sidebar-section select { cursor: pointer; } .sidebar-section select option { background: #3d3d3d; color: #e0e0e0; } .sidebar-section p { font-size: 12px; line-height: 1.6; color: #999; margin-bottom: 4px; } .button-danger { width: 100%; padding: 8px 12px; background: #f44336; color: white; border: none; border-radius: 3px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; } .button-danger:hover { background: #d32f2f; } .button-danger:active { background: #c62828; } .button-danger:disabled { background: #6b3532; color: #aaa; cursor: not-allowed; } .saved-layouts-delete-actions .button-danger { width: auto; } .sidebar.collapsed .button-danger span { display: none; } .sidebar.collapsed .button-danger { padding: 8px; width: 100%; } .canvas-container { flex: 1; display: flex; flex-direction: column; background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); } .toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #2d2d2d; border-bottom: 1px solid #3d3d3d; box-shadow: 0 2px 4px rgba(0,0,0,0.3); overflow-x: auto; } .toolbar-tools { display: flex; align-items: center; gap: 8px; } .toolbar .label { font-weight: bold; font-size: 0.6rem; opacity: 0.6; text-transform: uppercase; margin: 0 4px; } .button-group { display: flex; border: 1px solid #4d4d4d; border-radius: 8px; overflow: hidden; } .button-group-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: #3d3d3d; border: none; border-right: 1px solid #4d4d4d; border-radius: 0; color: #999; font-size: 13px; cursor: pointer; transition: background 0.2s, color 0.2s; } .button-group-btn i { font-size: 1rem; } .button-group-btn:last-child { border-right: none; } .button-group-btn:hover { background: #4d4d4d; color: #e0e0e0; } .button-group-btn.active { background: var(--color-accent); color: white; } .button-group-btn.active:hover { background: var(--color-accent-dark); } .toolbar-tool-group { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #999; border-left: 2px solid #3d3d3d; padding-left: 8px; } .toolbar-number-input { width: 56px; padding: 5px 8px; background: #3d3d3d; border: 1px solid #4d4d4d; border-radius: 3px; color: #e0e0e0; font-family: inherit; font-size: 13px; color-scheme: dark; } .toolbar-number-input:focus { outline: none; border-color: var(--color-accent); } .coord-display { margin-left: auto; font-size: 12px; color: #999; min-width: 100px; text-align: right; } .canvas { flex: 1; /* Without these, a flex item's automatic min-size falls back to its intrinsic content size -- for a , that's literally its width/height attributes, which resizeCanvas() sets to devicePixelRatio-scaled device-pixel values. In a multi-item flex row (e.g. .editor-viewport-container) that inflated "minimum" can force the canvas to overflow its actual layout box; getBoundingClientRect() then reports the inflated size, resizeCanvas() multiplies it by dpr again on the next resize, and the canvas grows without bound across repeated tab switches until the tab crashes. Pinning min-width/min-height to 0 removes the intrinsic-size floor entirely. */ min-width: 0; min-height: 0; background: #1a1a1a; cursor: crosshair; display: block; } .canvas.dragging { cursor: grabbing; } .canvas.panning { cursor: grab; } svg.grid-line { pointer-events: none; } /* Selection box overlay */ svg.selection-box { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1000; } .tabs { display: flex; align-items: center; gap: 0; background: #2d2d2d; border-bottom: 1px solid #3d3d3d; padding: 0; } /* Left-hand group (tab buttons + the debug reload button, see app-canvas.js's addReloadButton) -- takes the remaining space next to the avatar (appended by auth-ui.js directly into .tabs) and scrolls horizontally instead of wrapping, so the header keeps a consistent height on narrow/mobile viewports. min-width: 0 lets it shrink below its content's natural width despite being a flex item. */ .tabs-scroll { display: flex; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; } .tab-btn { padding: 12px 20px; background: transparent; border: none; color: #999; cursor: pointer; font-size: 14px; font-weight: 600; border-bottom: 3px solid transparent; transition: all 0.2s; white-space: nowrap; flex-shrink: 0; } .tabs .tab-btn { overflow: hidden; text-overflow: ellipsis; max-width: 320px; } .tab-btn i { margin-right: 8px; } .tab-btn:hover { color: #e0e0e0; background: #3d3d3d; } .tab-btn-label.italic { font-style: italic; } .tab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); } .button-primary { padding: 8px 16px; background: var(--color-accent); color: white; border: none; border-radius: 3px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .button-primary:hover { background: var(--color-accent-dark); } .button-primary:active { background: #1565C0; } .editor-content { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 20px; gap: 20px; } .editor-controls { display: flex; gap: 16px; align-items: center; } .editor-controls label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e0e0e0; } .editor-controls select { padding: 6px 8px; border: 1px solid #4d4d4d; border-radius: 3px; background: #3d3d3d; color: #e0e0e0; font-size: 13px; min-width: 200px; } .editor-viewport-container { display: flex; gap: 20px; flex: 1; } .editor-info { display: flex; flex-direction: column; gap: 12px; width: 150px; padding: 12px; background: #2d2d2d; border-radius: 4px; font-size: 13px; } .editor-info div { color: #e0e0e0; } .editor-viewport { flex: 1; background: #1a1a1a; border: 1px solid #3d3d3d; border-radius: 4px; width: 100%; height: 100%; } .editor-bounding-box { fill: none; stroke: var(--color-accent); stroke-width: 2; cursor: se-resize; } .editor-bounding-box.resizing { stroke: #90CAF9; } .editor-image { cursor: move; opacity: 0.9; } .editor-image.dragging { opacity: 1; filter: drop-shadow(0 0 4px rgba(33, 150, 243, 0.5)); } /* Layer Panel */ #layer-panel { position: fixed; bottom: 20px; right: 20px; width: 200px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; padding: 12px; color: #fff; font-family: monospace; font-size: 12px; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } #layer-panel > div:first-child { font-weight: bold; margin-bottom: 8px; border-bottom: 1px solid #444; padding-bottom: 6px; } #layer-list { margin-bottom: 8px; max-height: 150px; overflow-y: auto; } .layer-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 2px 0; border-radius: 2px; cursor: pointer; user-select: none; background: #333; } .layer-item.active { background: #0066cc; } .layer-item-btn { background: none; border: none; color: white; cursor: pointer; padding: 0; max-width: 18px; flex-shrink: 0; } .layer-item-btn i { font-size: 0.8em; } .layer-item-btn.inactive { opacity: 0.4; } .layer-item-name { flex: 1; } .layer-panel-button-container { display: flex; gap: 4px; } .layer-panel-button-container button { flex: 1; padding: 4px 8px; border: none; color: white; border-radius: 2px; cursor: pointer; font-size: 11px; font-weight: 500; } .layer-panel-add-btn { background: #0066cc; } .layer-panel-add-btn:hover { background: #0052a3; } .layer-panel-remove-btn { background: #cc0000; } .layer-panel-remove-btn:hover { background: #990000; } .floating-panel { position: absolute; top: 104px; height: calc(100% - 112px); background: #2d2d2d; border: 1px solid transparent; border-radius: 16px; color: #e0e0e0; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } /* Properties Panel */ .properties-panel { right: 8px; width: 280px; overflow: hidden; display: flex; flex-direction: column; transition: width 0.1s ease; } .properties-panel-header { padding: 16px; border-bottom: 1px solid #3d3d3d; background: #252525; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .properties-panel-title { font-size: 14px; font-weight: 600; color: #e0e0e0; } .properties-panel-collapse-btn { background: none; border: none; color: #e0e0e0; cursor: pointer; padding: 4px; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease; } .properties-panel-collapse-btn:hover { color: #fff; background: #3d3d3d; } .properties-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1; } /* Collapsed: hide the title (the button's header sibling) and the body, leaving only the header -- now just the collapse button -- so the panel's flex column shrink-wraps down to that instead of leaving an empty panel behind. */ .properties-panel.collapsed { left: auto; width: 54px; height: auto; border-radius: 16px; } .properties-panel.collapsed .properties-panel-header { border-bottom: none; } .properties-panel.collapsed .properties-panel-title, .properties-panel.collapsed .properties-panel-body { display: none; } .properties-section { display: flex; flex-direction: column; gap: 8px; } .properties-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #999; font-weight: 600; } .properties-composite-icon-row { display: flex; gap: 8px; } .properties-composite-icon-field { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .properties-composite-icon-container { width: 96px; height: 96px; } .properties-notes-textarea { background: #3d3d3d; border: 1px solid #4d4d4d; border-radius: 3px; color: #e0e0e0; font-family: inherit; font-size: 13px; padding: 10px; min-height: 90px; resize: vertical; } .properties-notes-textarea::placeholder { color: #888; } .properties-notes-textarea:focus { outline: none; border-color: var(--color-accent); } .properties-autosuggest-select { position: relative; } .properties-autosuggest-input { width: 100%; background: #3d3d3d; border: 1px solid #4d4d4d; border-radius: 3px; color: #e0e0e0; font-family: inherit; font-size: 13px; padding: 8px 32px 8px 10px; } .properties-autosuggest-input-icon { background-size: 28px; background-position: 4px; background-repeat: no-repeat; background-color: #4d4d4d; padding-left: 36px; } .properties-autosuggest-icon-option { display: flex; flex-direction: row; gap: 8px; align-items: center; } .properties-autosuggest-input::placeholder { color: #888; } .properties-autosuggest-input:focus { outline: none; border-color: var(--color-accent); } .properties-autosuggest-chevron { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #999; font-size: 11px; pointer-events: none; } .properties-autosuggest-clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background: transparent; border: none; border-radius: 3px; color: #999; font-size: 11px; cursor: pointer; } .properties-autosuggest-clear:hover { background: #4d4d4d; color: #e0e0e0; } .properties-autosuggest-list { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 340px; overflow-y: auto; background: #3d3d3d; border: 1px solid #4d4d4d; border-radius: 3px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); z-index: 200; } .properties-autosuggest-option { padding: 8px 10px; font-size: 13px; color: #e0e0e0; cursor: pointer; } .properties-autosuggest-option:hover { background: #4d4d4d; } .properties-autosuggest-empty { padding: 8px 10px; font-size: 13px; color: #888; } .properties-checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: #e0e0e0; cursor: pointer; } .properties-checkbox-row input[type="checkbox"] { accent-color: var(--color-accent); cursor: pointer; } .properties-select { background: #3d3d3d; border: 1px solid #4d4d4d; border-radius: 3px; color: #e0e0e0; font-family: inherit; font-size: 13px; padding: 8px 10px; } .properties-select:focus { outline: none; border-color: var(--color-accent); } .properties-text-input { background: #3d3d3d; border: 1px solid #4d4d4d; border-radius: 3px; color: #e0e0e0; font-family: inherit; font-size: 13px; padding: 8px 10px; } .properties-text-input:focus { outline: none; border-color: var(--color-accent); } .properties-overclock-row { display: flex; gap: 16px; flex-direction: column; } .properties-overclock-number { -moz-appearance: textfield; } .properties-overclock-number::-webkit-outer-spin-button, .properties-overclock-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .properties-overclock-slider-column { flex: 1 1 auto; min-width: 0; } .properties-overclock-slider { width: 100%; accent-color: var(--color-accent); cursor: pointer; } .properties-overclock-ticks { position: relative; height: 14px; } .properties-overclock-tick { position: absolute; transform: translateX(-50%); font-size: 10px; color: #999; white-space: nowrap; } .properties-color-row { display: flex; gap: 10px; } .properties-color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #252525; padding: 0; cursor: pointer; } .properties-color-swatch.selected { border-color: #fff; } .properties-recipe-details { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .properties-recipe-items { display: flex; flex-direction: column; gap: 6px; } .properties-recipe-item-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #3d3d3d; border-radius: 3px; font-size: 13px; } .properties-recipe-item-icon { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid #4d4d4d; border-radius: 2px; background-size: calc(100% - 4px); background-position: center; background-repeat: no-repeat; background-color: #4d4d4d; } .properties-recipe-item-name { flex: 1; min-width: 0; color: #e0e0e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .properties-recipe-item-amount { color: #999; white-space: nowrap; } .properties-technical-info { margin-top: auto; } .properties-technical-info-name { color: #666; font-size: 13px; } /* Canvas Tooltip */ .canvas-tooltip { position: fixed; max-width: 280px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; padding: 12px 14px; color: #e0e0e0; font-size: 13px; line-height: 1.5; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); z-index: 5000; pointer-events: none; } .canvas-tooltip-title { font-size: 14px; font-weight: 700; /*margin-bottom: 6px;*/ color: #fff; } .canvas-tooltip-row { margin-top: 6px; } .canvas-tooltip-group { margin-top: 8px; } .canvas-tooltip-label { font-weight: 600; color: #e0e0e0; } .canvas-tooltip-list { list-style: none; margin: 4px 0 0; padding-left: 0; color: #ccc; } .canvas-tooltip-list-item { display: flex; align-items: center; gap: 6px; margin-top: 3px; } .canvas-tooltip-list-item:first-child { margin-top: 0; } .canvas-tooltip-item-icon { width: 24px; height: 24px; flex-shrink: 0; border-radius: 2px; background-color: var(--icon-background-color); background-size: calc(100% - 2px); background-position: center; background-repeat: no-repeat; } .canvas-tooltip-notes { padding-top: 4px; margin-top: 4px; border-top: 1px solid #444; } .canvas-tooltip-notes-text { color: #ccc; white-space: pre-wrap; } .canvas-tooltip-hotkey { display: inline-block; min-width: 1em; padding: 1px 5px; margin: 0 1px 0 8px; background: #fff; color: #222; font-size: 11px; font-weight: 700; line-height: 1.4; border-radius: 3px; text-align: center; } .canvas-tooltip-text { color: #e0e0e0; } .canvas-tooltip-value-good { color: var(--flow-good-color); } .canvas-tooltip-value-bad { color: var(--flow-bad-color); } .canvas-tooltip-value-excess { color: var(--flow-excess-color); } /* Context Menu */ .context-menu { position: fixed; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; padding: 4px 0; color: white; font-family: monospace; font-size: 12px; z-index: 10000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); min-width: 120px; } .context-menu-item { padding: 6px 12px; cursor: pointer; user-select: none; transition: background 0.1s; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .context-menu-item:hover { background: #0066cc; } .context-menu-label { flex: 1; } .context-menu-shortcut { font-size: 11px; color: #888; font-weight: normal; white-space: nowrap; } /* Toolbar layer-visibility pulldown */ .visibility-menu { position: fixed; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; padding: 4px 0; color: #e0e0e0; font-size: 13px; z-index: 10000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); min-width: 140px; } .visibility-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; user-select: none; } .visibility-menu-item:hover { background: #3d3d3d; } /* Mobile layout: sidebar defaults to its icon-only collapsed width (see setupSidebarCollapse's mobile default in app-canvas.js), and the properties panel docks as a full-width bottom sheet instead of a right-side overlay, so the canvas underneath stays reachable on narrow screens. --sidebar-width is the single source of truth for the sidebar's current width -- set here on body (toggled by body.sidebar-collapsed, which AppCanvas.setupSidebarCollapse always flips in lockstep with .sidebar.collapsed) and read by both .sidebar itself and .properties-panel, instead of each hardcoding its own hand-derived copy of the number (which drifted independently before and could silently fall out of sync). */ @media (max-width: 768px) { body { --sidebar-width: min(200px, calc(100vw - 32px)); } body.sidebar-collapsed { --sidebar-width: 80px; } .sidebar { width: 80px; } .sidebar:not(.collapsed) { width: var(--sidebar-width); } .properties-panel { /* 24px = sidebar's own 8px left offset + 8px gap to this panel + this panel's own 8px right-edge margin (see `right: 8px` below) -- the only place that relationship between the sidebar's width and this panel's left edge lives. */ width: calc(100% - var(--sidebar-width) - 24px); right: 8px; bottom: 8px; top: inherit; height: 40vh; } .properties-panel.collapsed { width: 54px !important; } } /* Sign-in modal (public/js/auth-ui.js) */ .auth-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: start; justify-content: center; padding: 1rem; box-sizing: border-box; z-index: 1000; } .auth-modal { position: relative; background: #2d2d2d; border-radius: 8px; padding: 2rem 2.5rem; min-width: 360px; max-width: 460px; box-sizing: border-box; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; gap: 0.75rem; } .auth-modal h2 { margin: 0 0 0.5rem; font-size: 1.2rem; text-align: center; } .auth-modal-message { margin: 0 0 0.5rem; color: #999; font-size: 0.85rem; text-align: center; line-height: 1.4; } .auth-modal-provider-form { display: flex; } .auth-modal-provider-btn { flex: 1; border: 1px solid #4d4d4d; border-radius: 4px; background: #3d3d3d; color: #e0e0e0; font-size: 0.9rem; cursor: pointer; display: flex; height: 40px; align-items: center; font-weight: bold; justify-content: center; gap: 4px; } .auth-modal-provider-btn i { width: 32px; font-size: 1.2rem; } .auth-modal-provider-btn:hover { background: #4d4d4d; } .auth-modal-provider-btn-google { background: #eef1f6; color: #4d525e; } .auth-modal-provider-btn-google:hover { background: #dcdee4; } .auth-modal-provider-btn-discord { color: #fff; background: #5865F2; } .auth-modal-provider-btn-discord:hover { background: hsl(232.9, 46.7%, 50%); } .auth-modal-provider-btn-twitch { color: #fff; background: #9147ff; } .auth-modal-provider-btn-twitch:hover { background: #772ce8; } .auth-modal-close { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; color: #e0e0e0; font-size: 1.4rem; line-height: 1; cursor: pointer; } .share-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: start; justify-content: center; padding: 1rem; box-sizing: border-box; z-index: 1000; } .share-modal { position: relative; background: #2d2d2d; border-radius: 8px; padding: 2rem 2.5rem; width: 480px; max-width: 100%; box-sizing: border-box; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; gap: 0.75rem; } .share-modal h2 { margin: 0 0 0.5rem; font-size: 1.2rem; text-align: center; } .share-modal-close { position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; color: #e0e0e0; font-size: 1.4rem; line-height: 1; cursor: pointer; } .share-modal-body { color: #999; font-size: 13px; text-align: center; } .share-modal-code-row { display: flex; align-items: center; justify-content: center; gap: 8px; background: #3d3d3d; border: 1px solid #4d4d4d; border-radius: 4px; padding: 10px 14px; } .share-modal-code { font-family: monospace; font-size: 15px; font-weight: 600; color: #e0e0e0; letter-spacing: 0.5px; } /* Placed after the base rule above (not inside the earlier mobile media-query block) so source order doesn't let that equal-specificity unconditional rule win the cascade over this one on mobile. */ @media (max-width: 768px) { .share-modal-code { font-size: 12px; } } .share-modal-copy-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: none; border: none; border-radius: 3px; color: #999; font-size: 13px; cursor: pointer; } .share-modal-copy-btn:hover { background: #4d4d4d; color: #e0e0e0; } /* Keyboard shortcuts modal (public/js/onboarding-ui.js) -- reuses .share-modal-overlay/ .share-modal/.share-modal-close for the shell (see above), just widened via .onboarding-shortcuts-modal below. */ .onboarding-shortcuts-modal { width: 420px; max-height: 80vh; overflow-y: auto; } .shortcuts-modal-list { display: flex; flex-direction: column; gap: 0.25rem; } .shortcuts-modal-category { margin-top: 0.75rem; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #999; } .shortcuts-modal-category:first-child { margin-top: 0; } .shortcuts-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; } .shortcuts-modal-label { color: #e0e0e0; font-size: 13px; } /* Icon picker modal (public/js/icon-modal-ui.js) -- reuses .share-modal-overlay/ .share-modal/.share-modal-close for the shell (see above), just widened via .icon-modal below. */ .icon-modal { width: 640px; max-height: 80vh; } .icon-modal-body { display: flex; flex-direction: column; min-height: 0; text-align: left; } .icon-modal-content { display: flex; flex-direction: column; gap: 0.75rem; min-height: 0; } .icon-modal-tabs { flex-wrap: wrap; } .icon-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; max-height: 50vh; overflow-y: auto; padding-right: 2px; } .icon-modal-swatch { width: 48px; height: 48px; padding: 0; border: 1px solid #4d4d4d; border-radius: 3px; background-color: #3d3d3d; background-size: calc(100% - 8px); background-position: center; background-repeat: no-repeat; cursor: pointer; } .icon-modal-swatch:hover { border-color: #999; background-color: #4d4d4d; } .icon-modal-swatch.selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); } .icon-modal-empty { color: #999; font-size: 13px; text-align: center; padding: 1rem 0; } .shortcuts-modal-keys { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .shortcuts-modal-key { background: #3d3d3d; border: 1px solid #4d4d4d; border-radius: 4px; padding: 2px 6px; font-family: monospace; font-size: 12px; color: #e0e0e0; } /* Same .tabs/.tab-btn markup as the top-level Planner/Edit Buildings tabs (see index.html) -- this just pulls the bar in from the modal's own padding and trims the gap before .saved-layouts-list below it. */ .saved-layouts-type-tabs { margin: -0.5rem -2.5rem 0.75rem; } .saved-layouts-type-tabs .tab-btn.layout.active { color: var(--color-accent-blue-dark); border-bottom-color: var(--color-accent-blue-dark); } .saved-layouts-type-tabs .tab-btn.blueprint.active { color: var(--color-accent-orange-dark); border-bottom-color: var(--color-accent-orange-dark); } .saved-layouts-list { display: flex; flex-direction: column; gap: 4px; min-height: 180px; max-height: 320px; overflow-y: auto; min-width: 280px; padding-right: 8px; } .saved-layouts-item { display: flex; align-items: stretch; border: 1px solid #4d4d4d; border-radius: 4px; } .saved-layouts-item-main { display: flex; align-items: center; justify-content: flex-start; flex: 1; min-width: 0; gap: 10px; padding: 10px 12px; background: #3d3d3d; border: none; border-right: 1px solid #4d4d4d; color: #e0e0e0; font-size: 13px; text-align: left; cursor: pointer; } .saved-layouts-item-main:hover { background: #4d4d4d; } .saved-layouts-item-icon { flex-shrink: 0; width: 36px; height: 36px; } .saved-layouts-item-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; min-width: 0; gap: 2px; } .saved-layouts-item-name-row { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; } .saved-layouts-item-name { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .saved-layouts-item-badge { flex-shrink: 0; margin-left: auto; padding: 1px 6px; background: var(--color-accent-blue-dark); color: #fff; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .saved-layouts-list.blueprint .saved-layouts-item-badge { background: var(--color-accent-orange-dark) } .saved-layouts-item-date { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #999; font-size: 10px; } .saved-layouts-item-menu-btn { display: flex; align-items: center; justify-content: center; width: 32px; flex-shrink: 0; padding: 0; background: #3d3d3d; border: none; color: #999; font-size: 13px; cursor: pointer; } .saved-layouts-item-menu-btn:hover { background: #4d4d4d; color: #e0e0e0; } .saved-layouts-item-menu { position: fixed; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; padding: 4px 0; min-width: 140px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); z-index: 1100; } .saved-layouts-item-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; background: none; border: none; color: #e0e0e0; font-size: 13px; text-align: left; cursor: pointer; } .saved-layouts-item-menu-item i { width: 14px; text-align: center; color: #999; } .saved-layouts-item-menu-item:hover { background: #3d3d3d; } .saved-layouts-item-menu-item:disabled { color: #666; cursor: not-allowed; } .saved-layouts-item-menu-item:disabled i { color: #555; } .saved-layouts-item-menu-item:disabled:hover { background: none; } .saved-layouts-delete-message { color: #e0e0e0; font-size: 13px; line-height: 1.5; min-width: 280px; } .saved-layouts-delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .button-secondary { padding: 8px 16px; background: #3d3d3d; color: #e0e0e0; border: 1px solid #4d4d4d; border-radius: 3px; font-size: 12px; font-weight: 600; cursor: pointer; } .button-secondary:hover { background: #4d4d4d; } .saved-layouts-save-form { display: flex; flex-direction: column; gap: 10px; min-width: 280px; } .saved-layouts-name-input { background: #3d3d3d; border: 1px solid #4d4d4d; border-radius: 3px; color: #e0e0e0; font-family: inherit; font-size: 13px; padding: 8px 10px; } .saved-layouts-name-input:focus { outline: none; border-color: var(--color-accent); } .saved-layouts-error { color: #f44336; font-size: 12px; min-height: 1em; } .auth-avatar { width: 32px; height: 32px; border: 1px solid #444; border-radius: 50%; background-color: #3d3d3d; background-size: contain; background-position: center; background-repeat: no-repeat; padding: 0; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; cursor: pointer; } .auth-avatar:hover { border-color: #666; } .auth-avatar-icon-dimmed { opacity: 0.4; } .auth-dropdown { position: absolute; top: calc(100% + 4px); right: 0.75rem; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; padding: 4px 0; min-width: 100px; max-width: 180px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); z-index: 1000; } .auth-dropdown-header { padding: 10px 14px 8px; border-bottom: 1px solid #444; margin-bottom: 4px; } .auth-dropdown-name { font-size: 13px; font-weight: 700; color: #e0e0e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auth-dropdown-email { font-size: 11px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auth-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; background: none; border: none; color: #e0e0e0; font-size: 13px; text-align: left; cursor: pointer; } .auth-dropdown-item i { width: 14px; text-align: center; color: #999; } /* Command palette (js/command-palette-ui.js) -- top-aligned like Spotlight/Cmd+K, further down than .share-modal-overlay's own top alignment (12vh vs. 1rem), since a long result list should grow downward from a fixed search bar instead of re-centering the modal. */ .command-palette-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 1000; } .command-palette { display: flex; flex-direction: column; width: 600px; max-width: 90vw; max-height: 70vh; background: #2d2d2d; border-radius: 8px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); overflow: hidden; } .command-palette-search-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #4d4d4d; flex-shrink: 0; } .command-palette-search-icon { color: #999; font-size: 14px; } .command-palette-search { flex: 1; background: none; border: none; outline: none; color: #e0e0e0; font-size: 15px; } .command-palette-search::placeholder { color: #777; } .command-palette-results { overflow-y: auto; padding: 6px 0; } .command-palette-empty { padding: 24px 18px; text-align: center; color: #999; font-size: 13px; } .command-palette-category-label { font-size: 11px; text-transform: uppercase; color: #999; font-weight: 600; letter-spacing: 0.5px; padding: 8px 18px 4px; } .command-palette-item { display: flex; align-items: center; gap: 10px; padding: 6px 18px; color: #e0e0e0; font-size: 13px; cursor: pointer; } .command-palette-item.active { background: #3d3d3d; } .command-palette-item-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; color: #999; font-size: 1.8rem; } /* Overrides .palette-icon's 56px sidebar sizing down to the compact list-row size above. */ .command-palette-item-icon.palette-icon { border: 1px solid #333; border-radius: 2px; background-color: #4d4d4d; } .auth-dropdown-item:hover { background: #3d3d3d; } .composite-icon-container { position: relative; background-color: var(--color-accent-blue-transparent); background-image: url(../images/layout-background-grid.png); background-size: contain; --composite-icon-gap: 6%; --composite-icon-size-2: 40%; } .composite-icon-container.blueprint { background-color: var(--color-accent-orange-transparent); } .composite-icon-container .composite-icon { position: absolute; background-size: contain; background-position: center; background-repeat: no-repeat; } .composite-icon-container.editable .composite-icon { cursor: pointer; } .composite-icon-container.editable .composite-icon:not([data-icon-class]) { border: 3px dashed #fff; } .composite-icon-container.editable .composite-icon:hover { background-color: #ffffff66; } .composite-icon-container.layout-none .composite-icon { display: none; } /* ---- "-1" family (and 4, which has only this variant): one big icon centered at 75%, remaining icons as 35% satellites inset from the container edge, starting bottom-right, going counter-clockwise: bottom-right -> top-right -> top-left -> bottom-left. ---- */ .composite-icon-container.layout-1 .composite-icon-1, .composite-icon-container.layout-2-1 .composite-icon-1, .composite-icon-container.layout-3-1 .composite-icon-1, .composite-icon-container.layout-4 .composite-icon-1 { width: 85%; height: 85%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .composite-icon-container.layout-1 .composite-icon-2, .composite-icon-container.layout-1 .composite-icon-3, .composite-icon-container.layout-1 .composite-icon-4 { display: none; } .composite-icon-container.layout-2-1 .composite-icon-2, .composite-icon-container.layout-3-1 .composite-icon-2, .composite-icon-container.layout-4 .composite-icon-2 { width: 35%; height: 35%; right: var(--composite-icon-gap); bottom: var(--composite-icon-gap); } .composite-icon-container.layout-2-1 .composite-icon-3, .composite-icon-container.layout-2-1 .composite-icon-4 { display: none; } .composite-icon-container.layout-3-1 .composite-icon-3, .composite-icon-container.layout-4 .composite-icon-3 { width: 35%; height: 35%; right: var(--composite-icon-gap); top: var(--composite-icon-gap); } .composite-icon-container.layout-3-1 .composite-icon-4 { display: none; } .composite-icon-container.layout-4 .composite-icon-4 { width: 35%; height: 35%; left: var(--composite-icon-gap); top: var(--composite-icon-gap); } /* ---- "-2" family: all icons equal size (40%), evenly distributed, no big/satellite distinction. 2-2 = side by side, vertically centered. 3-2 = two side by side on top, one centered below; the whole 2-row block is centered vertically in the container. ---- */ .composite-icon-container.layout-2-2 .composite-icon-1, .composite-icon-container.layout-2-2 .composite-icon-2 { width: var(--composite-icon-size-2); height: var(--composite-icon-size-2); top: 50%; transform: translateY(-50%); } .composite-icon-container.layout-2-2 .composite-icon-1 { left: var(--composite-icon-gap); } .composite-icon-container.layout-2-2 .composite-icon-2 { right: var(--composite-icon-gap); } .composite-icon-container.layout-2-2 .composite-icon-3, .composite-icon-container.layout-2-2 .composite-icon-4 { display: none; } .composite-icon-container.layout-3-2 .composite-icon-1, .composite-icon-container.layout-3-2 .composite-icon-2, .composite-icon-container.layout-3-2 .composite-icon-3 { width: var(--composite-icon-size-2); height: var(--composite-icon-size-2); } .composite-icon-container.layout-3-2 .composite-icon-1, .composite-icon-container.layout-3-2 .composite-icon-2 { top: calc((100% - (2 * var(--composite-icon-size-2) + var(--composite-icon-gap))) / 2); } .composite-icon-container.layout-3-2 .composite-icon-1 { left: var(--composite-icon-gap); } .composite-icon-container.layout-3-2 .composite-icon-2 { right: var(--composite-icon-gap); } .composite-icon-container.layout-3-2 .composite-icon-3 { top: calc((100% - (2 * var(--composite-icon-size-2) + var(--composite-icon-gap))) / 2 + var(--composite-icon-size-2) + var(--composite-icon-gap)); left: 50%; transform: translateX(-50%); } .composite-icon-container.layout-3-2 .composite-icon-4 { display: none; }