daekuk
101 lines
1.6 KiB
CSS
101 lines
1.6 KiB
CSS
/* utils.css - 유틸리티 클래스 및 반응형 디자인 */
|
|
|
|
/* 텍스트 정렬 */
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
/* 반응형 디자인 */
|
|
@media (max-width: 1200px) {
|
|
.dashboard-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.dashboard-summary {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.batch-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.header-controls {
|
|
margin-top: 1rem;
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.server-metrics {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.metric-group {
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.server-filters {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.search-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.transaction-filters {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
header {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.header-title h1 {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.header-controls {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.transaction-table th,
|
|
.transaction-table td {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.metric-group {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
} |