Spaces:
Build error
Build error
| @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); | |
| } | |
| } | |