data model refinement

static/css/main.css

@@ -581,30 +581,6 @@ input[type="text"]:focus, select:focus {
     color: #555;
 }
 
-/* Modal */
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
-    animation: fadeIn 0.3s ease-out;
-}
-
-.modal-content {
-    background-color: #2a2a2a;
-    border: 1px solid #444;
-    margin: 5% auto;
-    width: 80%;
-    max-width: 600px;
-    max-height: 80vh;
-    overflow-y: auto;
-    animation: slideInDown 0.3s ease-out;
-}
-
 @keyframes slideInDown {
     from {
         opacity: 0;
@@ -616,43 +592,6 @@ input[type="text"]:focus, select:focus {
     }
 }
 
-.modal-header {
-    background-color: #1a1a1a;
-    padding: 1rem;
-    border-bottom: 1px solid #444;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.modal-header h3 {
-    color: #00ff41;
-    font-size: 1.1rem;
-}
-
-.modal-close {
-    background: transparent;
-    border: none;
-    color: #c7c7c7;
-    font-size: 1.2rem;
-    cursor: pointer;
-    font-family: 'Roboto Mono', monospace;
-}
-
-.modal-close:hover {
-    color: #ff9900;
-}
-
-.modal-body {
-    padding: 1.5rem;
-}
-
-.modal-description {
-    color: #999;
-    margin-bottom: 1.5rem;
-    line-height: 1.6;
-}
-
 .detail-row {
     display: flex;
     justify-content: space-between;
@@ -801,12 +740,6 @@ input[type="text"]:focus, select:focus {
     color: #00ff41 !important;
 }
 
-/* Animations */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
 .fade-in {
     animation: fadeIn 0.3s ease-out;
 }
@@ -970,4 +903,104 @@ input[type="text"]:focus, select:focus {
 .large-entity-node-details .detail-section-header {
     margin-left: 1rem;
     margin-right: 1rem;
+}
+
+/* dnsrecon/static/css/main.css */
+
+/* --- Add these styles for the modal --- */
+
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1000; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
+    backdrop-filter: blur(5px);
+}
+
+.modal-content {
+    background-color: #1e1e1e;
+    margin: 10% auto;
+    padding: 20px;
+    border: 1px solid #444;
+    width: 60%;
+    max-width: 800px;
+    border-radius: 5px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+    animation: fadeIn 0.3s;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #444;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+}
+
+.modal-header h3 {
+    margin: 0;
+    font-family: 'Special Elite', monospace;
+    color: #00ff41;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    color: #c7c7c7;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0 10px;
+}
+.modal-close:hover {
+    color: #ff6b6b;
+}
+
+.modal-body {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+/* Styles for the new data model display */
+.modal-details-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+}
+
+.modal-section h4 {
+    font-family: 'Special Elite', monospace;
+    color: #ff9900;
+    border-bottom: 1px dashed #555;
+    padding-bottom: 5px;
+    margin-top: 0;
+}
+
+.modal-section ul {
+    list-style-type: none;
+    padding-left: 15px;
+}
+
+.modal-section li {
+    margin-bottom: 8px;
+}
+
+.modal-section li > ul {
+    padding-left: 20px;
+    margin-top: 5px;
+}
+
+.description-text, .no-data {
+    color: #aaa;
+    font-style: italic;
+}
+
+@keyframes fadeIn {
+    from {opacity: 0; transform: scale(0.95);}
+    to {opacity: 1; transform: scale(1);}
 }