tuneit_demo / style.css
cryman38's picture
Upload style.css
3ba233d verified
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap');
:root {
--background-color-light: #ffffff;
--background-color-dark: #121212;
--text-color-light: #333333;
--text-color-dark: #ffffff;
--highlight-color-light: #f7f7f7;
--highlight-color-dark: #1e1e1e;
--header-color-light: #000000;
--header-color-dark: #ffffff;
--buy-color: #4caf50;
--sell-color: #f44336;
--highlight-edit-bg-color-light: #fff2cc;
--highlight-edit-text-color-light: #0000ff;
--highlight-edit-bg-color-dark: hsl(45, 100%, 70%);
--highlight-edit-text-color-dark: hsl(240, 100%, 50%);
--highlight-sky-bg-color-light: #ddf5fd;
--highlight-sky-bg-color-dark: #89c9e6;
--highlight-sky-text-color-light: #000000;
--highlight-sky-text-color-dark: #000000;
}
#col-container {
margin: 0 auto;
max-width: 100%;
font-family: 'Quicksand', 'ui-sans-serif', 'system-ui', 'sans-serif';
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}
.h3_title {
padding: .75rem;
font-weight: 700;
border-bottom: 1px solid rgb(229, 231, 235);
}
.content {
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-size: 1.125rem;
line-height: 1.75rem;
margin: 1.25em 0;
border: 0 solid #e5e7eb;
}
.code {
font-family: 'IBM Plex Mono', monospace;
}
.wrap-text {
margin: auto; /* 가운데 정렬 */
padding: 20px;
border: 1px solid #e5e5e5; /* 얇은 테두리 */
border-radius: 10px; /* 모서리 둥글게 */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 */
}
.buy-sell {
font-weight: bold !important;
}
.buy {
color: var(--buy-color) !important;
}
.sell {
color: var(--sell-color) !important;
}
.table-header-bg-before {
background-color: #e7f9ef !important;
color: #000;
}
.table-header-bg-after {
background-color: #d9d2e9 !important;
color: #000;
}
.table-container {
width: 100%;
overflow: auto;
margin-bottom: 20px;
position: relative;
max-height: 100%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 */
}
.table-container table {
width: 100%;
border-collapse: collapse;
}
.table-container td {
text-align: end !important;
}
.table-data-bg-sky {
background-color: #ddf5fd !important;
color: #000;
font-weight: bold;
}
.table-data-bg-edit {
background-color: #fff2cc !important;
color: #0000ff !important;
font-weight: bold;
}
.table-container th, .table-container td {
border: 1px solid #ddd !important;
padding: 8px;
background-color: var(--background-color-light);
}
.table-container th {
background-color: var(--highlight-color-light);
color: var(--header-color-light);
position: sticky;
top: 0;
z-index: 2;
}
.table-container td:first-child {
position: sticky;
left: 0;
z-index: 1;
text-align: left;
}
.table-container th:first-child {
position: sticky;
left: 0;
z-index: 3;
background-color: var(--highlight-color-light);
}
.table-container tr:hover td {
background: #f0f9ff;
color: #000;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s ease;
}
@media (prefers-color-scheme: dark) {
.table-data-bg-sky {
background-color: #89c9e6 !important;
color: #000 !important;
font-weight: bold;
}
.table-data-bg-edit {
background-color: hsl(45, 100%, 70%) !important;
color: #0000ff !important;
font-weight: bold;
}
.table-container {
border: 1px solid #444;
}
.table-container th, .table-container td {
border: 1px solid #444 !important;
background: #333;
color: #ccc;
}
.table-container thead {
background: #444;
}
.table-container th:first-child, .table-container td:first-child {
background: #444;
}
.table-container tr:hover td {
background-color: hsl(200, 30%, 30%) !important;
color: #fff !important;
}
.table-header-bg-before {
background-color: hsl(120, 60%, 80%) !important;
color: #000 !important;
}
.table-header-bg-dividend {
background-color: hsl(200, 60%, 70%) !important;
color: #000 !important;
}
.table-header-bg-required {
background-color: hsl(45, 100%, 70%) !important;
color: #000 !important;
}
.table-header-bg-after {
background-color: hsl(270, 30%, 80%) !important;
color: #000 !important;
}
}