Sửa callout hiển thị scene và click vào scene để vào thẳng xem ảnh

2026-06-08 07:58:46 +07:00
parent 5ba6e37039
commit 81de520071
4 changed files with 227 additions and 33 deletions
@@ -213,3 +213,97 @@ html, body {

 .save-btn { background: #28a745; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
 .cancel-btn { background: #6c757d; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
+
+/* Action Modal Specifics */
+.action-modal-content {
+    text-align: center;
+    max-width: 400px;
+}
+.action-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 20px;
+}
+.edit-btn-large, .delete-btn-large {
+    padding: 15px;
+    border: none;
+    border-radius: 6px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    transition: opacity 0.2s;
+}
+.edit-btn-large { background: #007bff; color: white; }
+.delete-btn-large { background: #dc3545; color: white; }
+.edit-btn-large:hover, .delete-btn-large:hover { opacity: 0.9; }
+.action-modal-content p { color: #666; margin-top: 5px; }
+
+/* Scene Callout Bubble Marker */
+.scene-callout {
+    background: white;
+    border: 3px solid #007bff;
+    border-radius: 10px;
+    width: 64px;
+    height: 64px;
+    position: relative;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s ease-in-out;
+    display: flex; /* Căn giữa nội dung bên trong */
+    cursor: pointer;
+}
+
+.scene-img-wrapper {
+    width: 100%;
+    height: 100%;
+    overflow: hidden; /* Cắt ảnh nếu tràn ra ngoài border-radius */
+    border-radius: 7px; /* Bo góc (10px - 3px border) */
+    padding: 2px; /* Tạo khoảng hở giữa ảnh và viền xanh */
+}
+
+.scene-callout:hover {
+    transform: scale(1.1);
+    border-color: #0056b3;
+    z-index: 1000;
+}
+
+.scene-callout img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 5px; /* Bo góc ảnh nhẹ hơn wrapper một chút */
+    display: block;
+}
+
+.scene-callout::after {
+    content: '';
+    position: absolute;
+    bottom: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 12px 8px 0;
+    border-style: solid;
+    border-color: #007bff transparent transparent;
+}
+
+/* Custom Tooltip Styling */
+.custom-scene-tooltip {
+    background: rgba(0, 0, 0, 0.8) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 4px !important;
+    padding: 8px 12px !important;
+    font-size: 13px !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
+}
+
+.custom-scene-tooltip .scene-hover-info strong {
+    font-size: 15px;
+    color: #ffd700; /* Màu vàng cho tiêu đề */
+    display: block;
+    margin-bottom: 3px;
+}