:root { --color-accent-blue: #2196F3; --color-accent-blue-dark: #1976D2; --color-accent-orange: #FF9800; --color-accent-orange-dark: #F57C00; /* 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); } :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; } 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; } .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-collapse-btn:active { background: #5d5d5d; } .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; } .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: scroll; } .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: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; } .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; bottom: 8px; 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; } .properties-panel-header { padding: 16px; border-bottom: 1px solid #3d3d3d; background: #252525; flex-shrink: 0; } .properties-panel-title { font-size: 14px; font-weight: 600; color: #e0e0e0; } .properties-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1; } .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-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; align-items: flex-start; gap: 10px; } .properties-overclock-number { width: 56px; flex: 0 0 auto; -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: disc; margin: 1px 0 0; padding-left: 18px; color: #ccc; } .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; } /* 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. */ @media (max-width: 768px) { .sidebar { width: 80px; } .sidebar:not(.collapsed) { width: min(240px, calc(100vw - 32px)); } .properties-panel { left: 8px; right: 8px; bottom: 0; width: auto; height: 40vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } /* 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: center; 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: center; 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; } .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; } .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; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; min-width: 0; gap: 2px; 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-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 rather than the vertically-centered .share-modal-overlay, since a long result list should grow downward from a fixed search bar instead of re-centering the whole 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; }