라우팅 추가 및 CSS 구성
- 개인 블로그 - 로또 - 여행 로고 이미지 추가 및 변경
This commit is contained in:
278
src/App.css
278
src/App.css
@@ -1,250 +1,64 @@
|
||||
:root {
|
||||
--bg: #0b0f17;
|
||||
--card: #121a2a;
|
||||
--card2: #0f1626;
|
||||
--text: #e8edf6;
|
||||
--muted: #a7b2c7;
|
||||
--line: rgba(255,255,255,0.08);
|
||||
--accent: #7dd3fc;
|
||||
--good: #34d399;
|
||||
--warn: #fbbf24;
|
||||
--danger: #fb7185;
|
||||
--bg: #0f0d12;
|
||||
--surface: rgba(26, 23, 32, 0.88);
|
||||
--text: #f4efe9;
|
||||
--muted: #b6b1a9;
|
||||
--line: rgba(255, 255, 255, 0.12);
|
||||
--accent: #f7a8a5;
|
||||
--accent-strong: #fdd4b1;
|
||||
--font-display: "DM Serif Display", "Noto Serif KR", serif;
|
||||
--font-body: "Manrope", "Noto Sans KR", sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: radial-gradient(1200px 800px at 20% 0%, rgba(125,211,252,0.13), transparent 60%),
|
||||
radial-gradient(900px 650px at 80% 20%, rgba(52,211,153,0.10), transparent 55%),
|
||||
var(--bg);
|
||||
color: var(--text);
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page { max-width: 1100px; margin: 0 auto; padding: 20px; }
|
||||
|
||||
.topbar {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(18,26,42,0.7);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(8px);
|
||||
.site-main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px 80px;
|
||||
}
|
||||
|
||||
.brand { display: flex; gap: 12px; align-items: center; }
|
||||
.logo { width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px;
|
||||
background: rgba(125,211,252,0.12); border: 1px solid var(--line); border-radius: 12px;
|
||||
}
|
||||
.title { font-weight: 800; letter-spacing: 0.2px; }
|
||||
.sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
|
||||
|
||||
.topRight { display: flex; gap: 10px; align-items: center; }
|
||||
.latestChip {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(0,0,0,0.25);
|
||||
padding: 8px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.site-main > * {
|
||||
animation: fadeUp 0.6s ease both;
|
||||
}
|
||||
|
||||
.tab {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(18,26,42,0.35);
|
||||
color: var(--text);
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab.on {
|
||||
background: rgba(125,211,252,0.14);
|
||||
border-color: rgba(125,211,252,0.35);
|
||||
.button {
|
||||
border: 1px solid var(--line);
|
||||
padding: 10px 18px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.main { margin-top: 14px; display: grid; gap: 14px; }
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(18,26,42,0.5);
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cardHead {
|
||||
display: flex; justify-content: space-between; align-items: flex-start;
|
||||
padding: 14px 14px 10px 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(15,22,38,0.35);
|
||||
}
|
||||
.cardTitle { font-size: 15px; font-weight: 800; }
|
||||
.cardSub { color: var(--muted); font-size: 13px; margin-top: 4px; }
|
||||
.cardBody { padding: 14px; }
|
||||
|
||||
.muted { color: var(--muted); }
|
||||
|
||||
.btn {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
background: rgba(125,211,252,0.12);
|
||||
}
|
||||
.btn.secondary { background: rgba(255,255,255,0.06); }
|
||||
.btn.ghost { background: transparent; }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.input, .select {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(0,0,0,0.25);
|
||||
color: var(--text);
|
||||
border-radius: 12px;
|
||||
padding: 10px 10px;
|
||||
min-width: 120px;
|
||||
.button:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 64px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(0,0,0,0.25);
|
||||
color: var(--text);
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
.button.primary {
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
|
||||
color: #1a1414;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.params { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.paramLabel { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
|
||||
.param { display: flex; flex-direction: column; }
|
||||
|
||||
.rowInline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
||||
.chip {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: var(--text);
|
||||
border-radius: 999px;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
.button.ghost {
|
||||
background: transparent;
|
||||
}
|
||||
.chip.on { border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.12); }
|
||||
|
||||
.pillRow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
|
||||
.pill {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-radius: 999px;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.pill.ok { border-color: rgba(52,211,153,0.45); background: rgba(52,211,153,0.12); }
|
||||
.pill.warn { border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.12); }
|
||||
|
||||
.bigNums {
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1px;
|
||||
padding: 12px 14px;
|
||||
border: 1px dashed rgba(125,211,252,0.25);
|
||||
border-radius: 16px;
|
||||
background: rgba(0,0,0,0.20);
|
||||
}
|
||||
|
||||
.details { margin-top: 12px; }
|
||||
.pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(0,0,0,0.25);
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--muted);
|
||||
padding: 16px;
|
||||
border: 1px dashed rgba(255,255,255,0.12);
|
||||
border-radius: 14px;
|
||||
background: rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.batchGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.batchItem {
|
||||
text-align: left;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(0,0,0,0.22);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.batchItem.on {
|
||||
border-color: rgba(52,211,153,0.55);
|
||||
background: rgba(52,211,153,0.10);
|
||||
}
|
||||
.batchIdx { color: var(--muted); font-size: 12px; }
|
||||
.batchNums { font-weight: 900; font-size: 18px; margin-top: 8px; }
|
||||
.batchHint { color: var(--muted); font-size: 12px; margin-top: 6px; }
|
||||
|
||||
.pager { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
|
||||
.pagerText { color: var(--muted); }
|
||||
|
||||
.historyList { display: grid; gap: 10px; }
|
||||
|
||||
.row {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(0,0,0,0.18);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
.rowTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
|
||||
.rowMeta { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
|
||||
.rowId { font-weight: 900; }
|
||||
.rowDate, .rowBased { color: var(--muted); font-size: 12px; }
|
||||
|
||||
.rowActions { display: flex; gap: 8px; }
|
||||
.iconBtn {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: var(--text);
|
||||
border-radius: 12px;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.iconBtn.on { border-color: rgba(251,191,36,0.6); background: rgba(251,191,36,0.14); }
|
||||
.iconBtn.danger { border-color: rgba(251,113,133,0.45); background: rgba(251,113,133,0.12); }
|
||||
|
||||
.rowNums { font-size: 18px; font-weight: 900; margin-top: 10px; }
|
||||
|
||||
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
|
||||
.tag {
|
||||
border: 1px solid rgba(125,211,252,0.25);
|
||||
background: rgba(125,211,252,0.10);
|
||||
border-radius: 999px;
|
||||
padding: 5px 9px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.rowEdit {
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 2fr 1fr;
|
||||
gap: 10px;
|
||||
align-items: end;
|
||||
}
|
||||
.editLabel { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
|
||||
.editButtons { display: flex; justify-content: flex-end; }
|
||||
|
||||
.tips { margin: 0; padding-left: 18px; color: var(--muted); }
|
||||
.footer { margin-top: 14px; display: flex; justify-content: center; }
|
||||
|
||||
Reference in New Issue
Block a user