Spaces:
Sleeping
Sleeping
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap'); | |
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap'); | |
#col-container { | |
margin: 0 auto; | |
max-width: 100%; | |
font-family: 'Montserrat', 'ui-sans-serif', 'system-ui', 'sans-serif'; | |
} | |
.code { | |
font-family: 'IBM Plex Mono', 'ui-monospace', 'Consolas', 'monospace'; | |
} | |
.wrap-text { | |
word-wrap: break-word; /* ์ค๋๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํด */ | |
overflow-wrap: break-word; /* ๊ธด ๋จ์ด๋ ์ ์ ํ ๋์ด์ ์ค๋ฐ๊ฟ */ | |
white-space: normal; /* ํ ์คํธ ๊ณต๊ฐ์ ๋ง๊ฒ ์ค๋ฐ๊ฟ */ | |
} | |
: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-yellow-bg-color-light: #ffeb3b; | |
--highlight-yellow-bg-color-dark: #ffca28; | |
--highlight-yellow-text-color-light: #000000; | |
--highlight-yellow-text-color-dark: #000000; | |
--highlight-sky-bg-color-light: #ddf5fd; | |
--highlight-sky-bg-color-dark: #89c9e6; | |
--highlight-sky-text-color-light: #000000; | |
--highlight-sky-text-color-dark: #000000; | |
--highlight-black-light: #000000; | |
--highlight-black-dark: #ffffff; | |
--total-value-color-light: #000000; | |
--total-value-color-dark: #ffeb3b; | |
} | |
body { | |
font-family: 'Roboto', sans-serif; | |
line-height: 1.6; | |
color: var(--text-color-light); | |
background-color: var(--background-color-light); | |
padding: 20px; | |
} | |
.buy-sell { | |
padding: 5px 10px; | |
border-radius: 5px; | |
font-weight: bold; | |
display: inline-block; | |
margin: 2px; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
.buy { | |
background-color: var(--buy-color); | |
color: white ; | |
} | |
.dashboard { | |
/* background-color: #f6fcfe; */ | |
/* border: 1px solid #89c9e6; */ | |
text-align: left; | |
padding: 10px; | |
font-size: 1rem; | |
border-radius: 18px; | |
box-shadow: 2px 4px 12px #00000014; | |
transition: all .3s cubic-bezier(0,0,.5,1); | |
} | |
.sell { | |
background-color: var(--sell-color); | |
color: white ; | |
} | |
.highlight-edit { | |
background-color: var(--highlight-edit-bg-color-light); | |
color: var(--highlight-edit-text-color-light) ; | |
padding: 5px 10px; | |
font-weight: bold; | |
border-radius: 5px; | |
display: inline-block; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
.highlight-black { | |
background-color: var(--highlight-black-light); | |
color: var(--text-color-dark) ; | |
padding: 5px 10px; | |
font-weight: bold; | |
border-radius: 5px; | |
display: inline-block; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
.highlight-yellow { | |
background-color: var(--highlight-yellow-bg-color-light); | |
color: var(--highlight-yellow-text-color-light) ; | |
padding: 5px 10px; | |
font-weight: bold; | |
border-radius: 5px; | |
display: inline-block; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
.highlight-sky { | |
background-color: var(--highlight-sky-bg-color-light); | |
color: var(--highlight-sky-text-color-light) ; | |
padding: 5px 10px; | |
font-weight: bold; | |
border-radius: 5px; | |
display: inline-block; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
} | |
.container { | |
font-size: 1.2rem; | |
margin-bottom: 15px; | |
padding: 20px; | |
border: 1px solid #ddd; | |
border-radius: 5px; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
background-color: var(--highlight-color-light); | |
} | |
.header { | |
font-size: 1.2rem; | |
font-weight: bold; | |
color: var(--header-color-light); | |
margin-top: 10px; | |
text-align: center; | |
} | |
.total-value { | |
color: var(--total-value-color-light); | |
font-size: 3rem; | |
} | |
.summary { | |
font-size: 1.2rem; | |
color: var(--text-color-light); | |
margin-top: 10px; | |
text-align: center; | |
} | |
.table-container { | |
width: 100%; | |
overflow: auto; | |
margin-bottom: 20px; | |
position: relative; | |
max-height: 600px; | |
border: 1px hidden #ddd; | |
overflow-y: auto; /* ๋ณ๊ฒฝ๋ ๋ถ๋ถ: ์ธ๋ก ์คํฌ๋กค ํ์ฉ */ | |
} | |
.table-container table { | |
width: 100%; | |
border-collapse: collapse; | |
} | |
.table-container th, .table-container td { | |
border: 1px hidden #ddd; | |
padding: 8px; | |
text-align: left; | |
background-color: var(--background-color-light); | |
} | |
.table-container th { | |
background-color: var(--highlight-color-light); | |
position: sticky; | |
top: 0; | |
z-index: 2; | |
} | |
.table-container td:first-child, .table-container th:first-child { | |
position: sticky; | |
left: 0; | |
z-index: 1; | |
} | |
.table-container th:first-child { | |
z-index: 3; | |
} | |
@media (prefers-color-scheme: dark) { | |
body { | |
color: var(--text-color-dark); | |
background-color: var(--background-color-dark); | |
} | |
.container { | |
background-color: var(--highlight-color-dark); | |
} | |
.header { | |
color: var(--header-color-dark); | |
} | |
.total-value { | |
color: var(--total-value-color-dark); | |
} | |
.table-container th, .table-container td { | |
background-color: var(--background-color-dark); | |
color: var(--text-color-dark); | |
} | |
.highlight-yellow { | |
background-color: var(--highlight-yellow-bg-color-dark); | |
color: var (--highlight-yellow-text-color-dark) ; | |
} | |
.highlight-black { | |
background-color: var(--highlight-black-dark); | |
color: var(--text-color-light) ; | |
} | |
.highlight-sky { | |
background-color: var(--highlight-sky-bg-color-dark); | |
color: var(--highlight-sky-text-color-dark) ; | |
} | |
.highlight-edit { | |
background-color: var(--highlight-edit-bg-color-dark); | |
color: var(--highlight-edit-text-color-dark) ; | |
} | |
.table-container th { | |
background-color: var(--highlight-color-dark); | |
} | |
.buy-sell, .highlight-black, .highlight-yellow, .highlight-sky, .highlight-edit { | |
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); | |
} | |
.dashboard { | |
background-color: #2b2b2b; /* ์ด๋์ด ๋ฐฐ๊ฒฝ์ */ | |
border: 1px solid #555555; /* ์ด๋์ด ํ ๋๋ฆฌ ์์ */ | |
color: #e0e0e0; /* ๋ฐ์ ๊ธ์ ์์ */ | |
text-align: left; | |
padding: 10px; | |
font-size: 1rem; | |
border-radius: 18px; | |
box-shadow: 2px 4px 12px #00000050; /* ๋คํฌ๋ชจ๋์ ์ด์ธ๋ฆฌ๋ ๊ทธ๋ฆผ์ ์์ */ | |
transition: all .3s cubic-bezier(0,0,.5,1); | |
} | |
} | |