82 lines
1.5 KiB
CSS
82 lines
1.5 KiB
CSS
.detail-overview {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.summary-card {
|
|
min-height: 149px;
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: rgba(10, 13, 18, 0.62);
|
|
}
|
|
|
|
.summary-card span {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.summary-card strong {
|
|
display: block;
|
|
margin-top: 18px;
|
|
font-size: clamp(1.5rem, 3vw, 2.3rem);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.detail-action-panel {
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: rgba(10, 13, 18, 0.58);
|
|
}
|
|
|
|
.detail-action-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.detail-action-grid button {
|
|
min-height: 92px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
border: 1px solid rgba(148, 163, 184, 0.16);
|
|
border-radius: var(--radius);
|
|
background: rgba(2, 6, 23, 0.28);
|
|
color: #cbd5e1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.detail-action-grid button:hover {
|
|
border-color: var(--line-strong);
|
|
background: rgba(201, 122, 61, 0.12);
|
|
color: var(--text);
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.summary-grid,
|
|
.detail-action-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.summary-grid,
|
|
.detail-action-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|