mytest2_app / style.css
cryman38's picture
Upload 14 files
aaa66d0 verified
@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 !important;
}
.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 !important;
}
.highlight-edit {
background-color: var(--highlight-edit-bg-color-light);
color: var(--highlight-edit-text-color-light) !important;
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) !important;
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) !important;
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) !important;
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) !important;
}
.highlight-black {
background-color: var(--highlight-black-dark);
color: var(--text-color-light) !important;
}
.highlight-sky {
background-color: var(--highlight-sky-bg-color-dark);
color: var(--highlight-sky-text-color-dark) !important;
}
.highlight-edit {
background-color: var(--highlight-edit-bg-color-dark);
color: var(--highlight-edit-text-color-dark) !important;
}
.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);
}
}