Spaces:
Running
Running
@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 ; | |
} | |
.buy { | |
color: var(--buy-color) ; | |
} | |
.sell { | |
color: var(--sell-color) ; | |
} | |
.table-header-bg-before { | |
background-color: #e7f9ef ; | |
color: #000; | |
} | |
.table-header-bg-after { | |
background-color: #d9d2e9 ; | |
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 ; | |
} | |
.table-data-bg-sky { | |
background-color: #ddf5fd ; | |
color: #000; | |
font-weight: bold; | |
} | |
.table-data-bg-edit { | |
background-color: #fff2cc ; | |
color: #0000ff ; | |
font-weight: bold; | |
} | |
.table-container th, .table-container td { | |
border: 1px solid #ddd ; | |
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 ; | |
color: #000 ; | |
font-weight: bold; | |
} | |
.table-data-bg-edit { | |
background-color: hsl(45, 100%, 70%) ; | |
color: #0000ff ; | |
font-weight: bold; | |
} | |
.table-container { | |
border: 1px solid #444; | |
} | |
.table-container th, .table-container td { | |
border: 1px solid #444 ; | |
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%) ; | |
color: #fff ; | |
} | |
.table-header-bg-before { | |
background-color: hsl(120, 60%, 80%) ; | |
color: #000 ; | |
} | |
.table-header-bg-dividend { | |
background-color: hsl(200, 60%, 70%) ; | |
color: #000 ; | |
} | |
.table-header-bg-required { | |
background-color: hsl(45, 100%, 70%) ; | |
color: #000 ; | |
} | |
.table-header-bg-after { | |
background-color: hsl(270, 30%, 80%) ; | |
color: #000 ; | |
} | |
} | |