폰트 변경
This commit is contained in:
Rinjae
@@ -1,4 +1,9 @@
|
||||
@charset "UTF-8";
|
||||
:root {
|
||||
--font-weight-primary-regular: 400;
|
||||
--font-weight-primary-bold: 700;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -13,7 +18,7 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #1A1A2E;
|
||||
background-color: #FFFFFF;
|
||||
@@ -557,6 +562,44 @@ hr {
|
||||
transform: translateX(200%) rotate(45deg);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Spoqa Han Sans Neo";
|
||||
font-weight: 700;
|
||||
src: local("Spoqa Han Sans Neo Bold"), url("/static/font/kjb/SpoqaHanSansNeo-Bold.woff2") format("woff2"), url("/static/font/kjb/SpoqaHanSansNeo-Bold.woff") format("woff"), url("/static/font/kjb/SpoqaHanSansNeo-Bold.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Spoqa Han Sans Neo";
|
||||
font-weight: 400;
|
||||
src: local("Spoqa Han Sans Neo Regular"), url("/static/font/kjb/SpoqaHanSansNeo-Regular.woff2") format("woff2"), url("/static/font/kjb/SpoqaHanSansNeo-Regular.woff") format("woff"), url("/static/font/kjb/SpoqaHanSansNeo-Regular.ttf") format("truetype");
|
||||
}
|
||||
@font-face {}
|
||||
/* SpoqaHanSans */
|
||||
@font-face {
|
||||
font-family: "SpoqaHanSans";
|
||||
font-weight: 400;
|
||||
src: url("/static/font/kjb/SpoqaHanSansRegular.woff") format("woff"), url("/static/font/kjb/SpoqaHanSansRegular.woff2") format("woff2"), url("/static/font/kjb/SpoqaHanSansRegular.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SpoqaHanSansBold";
|
||||
font-weight: 700;
|
||||
src: url("/static/font/kjb/SpoqaHanSansBold.woff") format("woff"), url("/static/font/kjb/SpoqaHanSansBold.woff2") format("woff2"), url("/static/font/kjb/SpoqaHanSansBold.ttf") format("truetype");
|
||||
}
|
||||
/* HGGGothicssi */
|
||||
@font-face {
|
||||
font-family: "HGGGothicssi";
|
||||
font-weight: 300;
|
||||
src: url("/static/font/kjb/HGGGothicssi40g.woff") format("woff"), url("/static/font/kjb/HGGGothicssi40g.woff2") format("woff2"), url("/static/font/kjb/HGGGothicssi40g.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "HGGGothicssi";
|
||||
font-weight: 400;
|
||||
src: url("/static/font/kjb/HGGGothicssi60g.woff") format("woff"), url("/static/font/kjb/HGGGothicssi60g.woff2") format("woff2"), url("/static/font/kjb/HGGGothicssi60g.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "HGGGothicssi";
|
||||
font-weight: 700;
|
||||
src: url("/static/font/kjb/HGGGothicssi80g.woff") format("woff"), url("/static/font/kjb/HGGGothicssi80g.woff2") format("woff2"), url("/static/font/kjb/HGGGothicssi80g.ttf") format("truetype");
|
||||
}
|
||||
:root {
|
||||
--primary-blue: #4B9BFF;
|
||||
--secondary-blue: #2E7FF7;
|
||||
@@ -3121,7 +3164,7 @@ body {
|
||||
}
|
||||
}
|
||||
.common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
@@ -3165,7 +3208,7 @@ body {
|
||||
justify-content: center;
|
||||
padding: 5px 14px;
|
||||
border-radius: 40px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
@@ -3276,14 +3319,14 @@ body {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.apikey-empty-state h3, .app-list-empty h3, .empty-state h3, .empty-api-state h3 {
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.apikey-empty-state p, .app-list-empty p, .empty-state p, .empty-api-state p {
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 16px;
|
||||
color: #6e7780;
|
||||
margin: 0;
|
||||
@@ -3297,7 +3340,7 @@ body {
|
||||
height: 60px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
@@ -3589,7 +3632,7 @@ body {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
color: #1A1A2E;
|
||||
background: #FFFFFF;
|
||||
border: 2px solid #E2E8F0;
|
||||
@@ -4156,7 +4199,7 @@ select.form-control {
|
||||
padding: 0 44px 0 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #1A1A2E;
|
||||
@@ -4477,7 +4520,7 @@ select.form-control {
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -4801,7 +4844,7 @@ select.form-control {
|
||||
text-decoration: none;
|
||||
border: 1px solid #212529;
|
||||
border-radius: 6px;
|
||||
font-family: "Noto Sans CJK KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Noto Sans CJK KR", "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
@@ -4826,7 +4869,7 @@ select.form-control {
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
.user-profile-dropdown .user-profile-btn .user-name {
|
||||
@@ -5336,9 +5379,10 @@ select.form-control {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
color: #515151;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.list-table .list-table-row .row-cell {
|
||||
@@ -5420,7 +5464,6 @@ select.form-control {
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
height: 40px;
|
||||
white-space: nowrap;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
@@ -6155,7 +6198,7 @@ select.form-control {
|
||||
justify-content: center;
|
||||
min-width: 10px;
|
||||
height: 21px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #5f666c;
|
||||
@@ -12449,7 +12492,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
|
||||
.app-list-title {
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
@@ -12536,7 +12579,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
|
||||
.app-list-name {
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
@@ -12549,7 +12592,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
|
||||
.app-list-description {
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #6e7780;
|
||||
@@ -12800,7 +12843,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
background: #E5E7EB;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #5F666C;
|
||||
@@ -13338,7 +13381,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
background: #E5E7EB;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #5F666C;
|
||||
@@ -13368,7 +13411,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
background: #0049b4;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
@@ -13398,7 +13441,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
background: #DC3545;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
@@ -13459,7 +13502,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
.file-upload-inline .file-display-text {
|
||||
flex: 1;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 16px;
|
||||
color: #94A3B8;
|
||||
overflow: hidden;
|
||||
@@ -13502,7 +13545,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
background: #3ba4ed;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
@@ -14125,7 +14168,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
|
||||
resize: vertical;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@@ -16193,399 +16236,6 @@ body.commission-print-page .btn-primary:hover {
|
||||
background: #c3dfea;
|
||||
}
|
||||
|
||||
.api-statistics-page {
|
||||
min-height: calc(100vh - 112px);
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.statistics-section {
|
||||
background-color: #F6F9FB;
|
||||
padding: 32px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.visually-hidden, .sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.statistics-title-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
background-color: #F6F9FB;
|
||||
border-radius: 12px;
|
||||
height: 70px;
|
||||
margin-top: 24px;
|
||||
padding: 0 32px;
|
||||
}
|
||||
.statistics-title-bar .page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.date-range-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 50px;
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
color: #1A1A2E;
|
||||
padding: 0;
|
||||
width: 110px;
|
||||
}
|
||||
.date-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
color: #64748B;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-search-circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #0049b4;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.btn-search-circle svg {
|
||||
stroke: #FFFFFF;
|
||||
}
|
||||
.btn-search-circle:hover {
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
}
|
||||
|
||||
.statistics-summary-section {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.statistics-summary-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-left-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
min-width: 280px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.statistics-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 8px 24px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
background: #E5E7EB;
|
||||
color: #64748B;
|
||||
}
|
||||
.tab-btn:hover {
|
||||
background: rgb(214.5869565217, 217.6956521739, 223.9130434783);
|
||||
}
|
||||
.tab-btn.active {
|
||||
background: #0049b4;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.total-api-text {
|
||||
font-size: 16px;
|
||||
color: #1A1A2E;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.total-api-text .highlight-count {
|
||||
color: #0049b4;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.stat-item .stat-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.stat-item .stat-label {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
min-width: 32px;
|
||||
}
|
||||
.stat-item .stat-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1A1A2E;
|
||||
}
|
||||
.stat-item .stat-percent {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.summary-chart-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.donut-chart-container {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.donut-chart-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.donut-labels {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.donut-labels .donut-label-success {
|
||||
font-size: 12px;
|
||||
color: #5B9BD5;
|
||||
font-weight: 500;
|
||||
}
|
||||
.donut-labels .donut-label-failed {
|
||||
font-size: 12px;
|
||||
color: #FFB6C1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.summary-rate-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.rate-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.rate-item .rate-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.rate-item .rate-dot.success {
|
||||
background: #5B9BD5;
|
||||
}
|
||||
.rate-item .rate-dot.fail {
|
||||
background: #FFB6C1;
|
||||
}
|
||||
.rate-item .rate-label {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
min-width: 40px;
|
||||
}
|
||||
.rate-item .rate-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.rate-item .rate-value .rate-unit {
|
||||
font-size: 20px;
|
||||
}
|
||||
.rate-item.success-rate .rate-value {
|
||||
color: #5B9BD5;
|
||||
}
|
||||
.rate-item.fail-rate .rate-value {
|
||||
color: #FFB6C1;
|
||||
}
|
||||
|
||||
.api-stats-table-section {
|
||||
background: #D6EAF8;
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.table-title h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1A1A2E;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 16px;
|
||||
background: #4A5568;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.btn-download svg {
|
||||
stroke: #FFFFFF;
|
||||
}
|
||||
.btn-download:hover {
|
||||
background: rgb(52.797752809, 60.6460674157, 74.202247191);
|
||||
}
|
||||
|
||||
.api-stats-table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.api-stats-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: transparent;
|
||||
}
|
||||
.api-stats-table th, .api-stats-table td {
|
||||
padding: 16px 24px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.api-stats-table th {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #64748B;
|
||||
background: transparent;
|
||||
}
|
||||
.api-stats-table td {
|
||||
font-size: 14px;
|
||||
color: #1A1A2E;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.api-stats-table tbody tr:first-child td:first-child {
|
||||
border-radius: 8px 0 0 0;
|
||||
}
|
||||
.api-stats-table tbody tr:first-child td:last-child {
|
||||
border-radius: 0 8px 0 0;
|
||||
}
|
||||
.api-stats-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.api-stats-table .total-row td {
|
||||
background: #E8F4FD;
|
||||
font-weight: 500;
|
||||
}
|
||||
.api-stats-table .total-row td:first-child {
|
||||
border-radius: 0 0 0 8px;
|
||||
}
|
||||
.api-stats-table .total-row td:last-child {
|
||||
border-radius: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.api-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.api-name .api-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.stacked-bar {
|
||||
display: flex;
|
||||
height: 12px;
|
||||
border-radius: 50px;
|
||||
overflow: hidden;
|
||||
background: #E5E7EB;
|
||||
}
|
||||
.stacked-bar .bar-success {
|
||||
background: #5B9BD5;
|
||||
height: 100%;
|
||||
}
|
||||
.stacked-bar .bar-fail {
|
||||
background: #C9A227;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.total-row .stacked-bar .bar-success {
|
||||
background: #5B9BD5;
|
||||
}
|
||||
.total-row .stacked-bar .bar-fail {
|
||||
background: #E5E7EB;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
|
||||
Reference in New Issue
Block a user