Resize small cards to 110px

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
primal
2026-02-01 17:27:56 -05:00
parent dd17889695
commit 58bb560ae6
+106 -4
View File
@@ -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;
}