* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; } #cesiumContainer { width: 100vw; height: 100vh; position: relative; } /* Панель инструментов */ .toolbar { position: absolute; top: 10px; left: 10px; background: rgba(42, 42, 42, 0.9); border-radius: 8px; padding: 10px; z-index: 1000; backdrop-filter: blur(10px); border: 1px solid #555; } .toolbar-section { margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; background: rgba(50, 50, 50, 0.7); border: 1px solid #444; } .section-title { font-size: 11px; color: #aaa; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; } /* Убираем лишние отступы внутри групп */ .toolbar-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .toolbar-group:last-child { margin-bottom: 0; } .tool-btn { background: #4a4a4a; border: 2px solid #666; color: white; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: all 0.2s ease; display: flex; align-items: center; gap: 5px; } .tool-btn:hover { background: #5a5a5a; border-color: #888; } .tool-btn.active { background: #2e6da4; border-color: #4a90d9; box-shadow: 0 0 10px rgba(74, 144, 217, 0.5); } .tool-btn.danger { background: #d9534f; border-color: #d43f3a; } .tool-btn.danger:hover { background: #c9302c; border-color: #ac2925; } .tool-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Строка состояния */ .status-bar { display: flex; flex-direction: column; gap: 4px; /* расстояние между строками */ color: white; font-size: 11px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #555; } #hint { color: #aaa; font-style: italic; } /* Модальное окно */ .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { background-color: #2b2b2b; margin: 15% auto; padding: 20px; border-radius: 8px; width: 400px; max-width: 90%; border: 1px solid #555; color: white; } .modal-content h3 { margin-bottom: 15px; color: #fff; } #descriptionInput { width: 100%; height: 100px; background: #3a3a3a; border: 1px solid #555; border-radius: 4px; color: white; padding: 10px; font-family: inherit; resize: vertical; } .modal-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 15px; } .modal-buttons button { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-family: inherit; } #confirmDescription { background: #5cb85c; color: white; } #cancelDescription { background: #6c757d; color: white; } /* Стили для выделенных объектов */ .selected-entity { outline: 2px solid #ffeb3b !important; outline-offset: 2px; } .edit-point { cursor: move; } /* Панель объектов из БД */ .db-objects-panel { position: absolute; top: calc(10px + 400px); /* под toolbar'ом (~300px — примерная высота toolbar) */ left: 10px; background: rgba(42, 42, 42, 0.9); border-radius: 8px; padding: 12px; z-index: 1000; backdrop-filter: blur(10px); border: 1px solid #555; display: flex; flex-direction: column; gap: 8px; width: 220px; } .panel-title { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; margin-bottom: 4px; } .object-select { background: #3a3a3a; color: white; border: 1px solid #555; border-radius: 4px; padding: 6px 8px; font-size: 12px; width: 100%; } .load-btn { background: #2e6da4; color: white; border: none; border-radius: 4px; padding: 6px 10px; font-size: 12px; cursor: pointer; transition: background 0.2s; } .load-btn:hover { background: #3a87ad; } .footprint-control { position: absolute; top: calc(10px + 400px + 120px); /* ниже блока с объектами */ left: 10px; background: rgba(42, 42, 42, 0.9); border-radius: 8px; padding: 12px; z-index: 1000; backdrop-filter: blur(10px); border: 1px solid #555; width: 220px; } .footprint-control .panel-title { font-size: 11px; color: #aaa; text-transform: uppercase; margin-bottom: 8px; } .footprint-control label { color: white; font-size: 12px; cursor: pointer; } .footprint-actions { display: flex; gap: 6px; margin-bottom: 8px; } .footprint-actions button { flex: 1; padding: 4px 6px; font-size: 11px; background: #4a4a4a; color: white; border: 1px solid #666; border-radius: 4px; cursor: pointer; } .footprint-actions button:hover { background: #5a5a5a; } /* Адаптивность */ @media (max-width: 768px) { .toolbar { left: 5px; right: 5px; top: 5px; } .toolbar-group { flex-wrap: wrap; } .tool-btn { flex: 1; min-width: 80px; font-size: 11px; padding: 6px 8px; } .status-bar { flex-direction: column; gap: 5px; } }