diff --git a/static/dashboard.css b/static/dashboard.css index dbb9601..3d97583 100644 --- a/static/dashboard.css +++ b/static/dashboard.css @@ -3,20 +3,62 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace; background: #0a0a0a; color: #ffffff; - padding: 20px; + padding: 0 10px; line-height: 1.6; } h1 { color: #ffffff; margin-bottom: 20px; font-size: 24px; } -h2 { color: #ffffff; margin: 20px 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; } +h2 { color: #ffffff; margin: 4px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; } +h2:first-child { margin-top: 0; } +#topSection { + background: #0a0a0a; + padding: 0 0 4px 0; +} +#topSection.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + padding: 0 10px 4px 10px; + transform: translateY(0); + transition: transform 0.3s ease; +} +#topSection.fixed.hidden { + transform: translateY(-100%); +} +#topSectionSpacer { + display: none; +} +#topSectionSpacer.active { + display: block; +} +#inputCard { margin: 10px 0; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; } +.grid-narrow { display: inline-grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 110px; gap: 10px; margin-bottom: 0; } .card { background: #151515; border: 1px solid #252525; border-radius: 8px; padding: 15px; } -.stat-value { font-weight: bold; color: #ffffff; } -.stat-label { color: #888; text-transform: uppercase; } +.card.clickable { + cursor: pointer; + transition: background 0.2s, border-color 0.2s, transform 0.1s; +} +.card.clickable:hover { + background: #1a1a1a; + border-color: #0af; +} +.card.clickable:active { + transform: scale(0.98); +} +.card.clickable.active { + background: #1a1a1a; + border-color: #0af; + box-shadow: 0 0 10px rgba(0, 170, 255, 0.3); +} +.stat-value { font-weight: bold; color: #ffffff; text-align: center; } +.stat-label { color: #888; text-transform: uppercase; text-align: center; } .stat-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #202020; color: #ffffff; } .stat-row:last-child { border-bottom: none; } .progress-bar { @@ -81,3 +123,63 @@ td { font-size: 13px; color: #ffffff; } .visit-link:hover { color: #0af !important; } + +/* TLD Grid */ +.domain-list { + display: flex; + flex-wrap: wrap; + gap: 10px; +} +.tld-section { + width: 135px; + background: #151515; + border: 1px solid #252525; + border-radius: 8px; + cursor: pointer; + transition: background 0.2s, border-color 0.2s; +} +.tld-section:hover { + background: #1a1a1a; + border-color: #0af; +} +.tld-section.expanded { + background: #1a1a1a; + border-color: #0af; + box-shadow: 0 0 10px rgba(0, 170, 255, 0.3); +} +.tld-section .tld-header { + padding: 4px; + text-align: center; +} +.tld-section .tld-name { + color: #0af; + font-weight: normal; + font-size: 10pt; +} +.tld-section .tld-content { + display: none; +} +/* Expanded content shown in separate container */ +#expandedTLDContent { + margin-top: 10px; + background: #151515; + border: 1px solid #0af; + border-radius: 8px; +} +#expandedTLDContent .tld-header { + display: flex; + align-items: center; + padding: 10px; + background: #1a1a1a; + border-bottom: 1px solid #333; + cursor: pointer; +} +#expandedTLDContent .tld-toggle { + color: #666; + margin-right: 10px; +} +#expandedTLDContent .tld-name { + color: #0af; + font-weight: bold; + font-size: 1.1em; +}