2620227
da1653a8ea
등록 모달의 '한 줄 설명' input 을 여러 줄 textarea 로 바꾸고, 설명을 markdown-it 로 렌더링한다(html:false 로 raw HTML 이스케이프·javascript: 링크 차단 — XSS 안전). 상세 화면은 마크다운으로, 카드 미리보기는 기호를 걷어낸 순수 텍스트(mdPlain) + 3줄 클램프로 표시. '저장소 README 가져오기' 버튼과 GET /api/readme 라우트를 추가해 repo_url 의 Gitea README 를 설명란으로 불러올 수 있다(gitea.js fetchReadme). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
142 lines
12 KiB
CSS
142 lines
12 KiB
CSS
/* 콘텐츠 컴포넌트 — 개발 도구 · 내 프로젝트 · 공유 피드 카드. */
|
|
|
|
/* ===================== ① 개발 도구 ===================== */
|
|
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
|
|
.tool-card {
|
|
position: relative; text-align: left; background: var(--card); border: 1px solid var(--border-soft);
|
|
border-radius: 12px; padding: 16px; cursor: pointer; font-family: inherit; display: block;
|
|
transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
|
|
}
|
|
.tool-card:hover { border-color: var(--link); box-shadow: 0 6px 18px var(--shadow-hover); transform: translateY(-3px); }
|
|
.tool-card.admin { border-color: var(--admin-bd); }
|
|
.tool-icon {
|
|
width: 44px; height: 44px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
|
|
font-size: 24px; background: var(--tile); border: 1px solid var(--tile-bd);
|
|
}
|
|
.tool-card.admin .tool-icon { background: var(--admin-bg); border-color: var(--admin-bd); }
|
|
.tool-name { display: block; margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--fg); }
|
|
.tool-desc { display: block; margin-top: 3px; font-size: 12.5px; color: var(--fg2); line-height: 1.45; }
|
|
.sso-badge {
|
|
position: absolute; top: 13px; right: 13px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
|
|
color: var(--accent-fg); background: var(--accent-bg); border: 1px solid var(--accent-bd); border-radius: 4px; padding: 2px 6px;
|
|
}
|
|
.tool-admin-badge {
|
|
display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; font-size: 11px; font-weight: 600;
|
|
color: var(--admin-fg); background: var(--admin-bg); border: 1px solid var(--admin-bd); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
|
|
}
|
|
|
|
/* ===================== ② 내 프로젝트 ===================== */
|
|
.myproj { position: relative; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px 22px 24px; }
|
|
.myproj-accent { position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--link); }
|
|
.myproj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-left: 8px; flex-wrap: wrap; }
|
|
.myproj-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
.filter-tabs { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; }
|
|
.filter-tab {
|
|
display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; border-radius: 6px; padding: 5px 11px;
|
|
cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg2); white-space: nowrap;
|
|
transition: background .14s ease, color .14s ease;
|
|
}
|
|
.filter-tab.on { background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border); }
|
|
.new-proj-btn {
|
|
display: inline-flex; align-items: center; gap: 6px; background: var(--success);
|
|
border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 8px; padding: 7px 13px;
|
|
cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; transition: background .14s ease;
|
|
}
|
|
.new-proj-btn:hover { background: var(--success-hover); }
|
|
.myproj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-left: 8px; }
|
|
|
|
/* 프로젝트 카드 (내 프로젝트 / 피드 공용 베이스) */
|
|
.pcard {
|
|
background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 15px 16px 14px;
|
|
cursor: pointer; transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; display: flex; flex-direction: column;
|
|
}
|
|
.pcard:hover { border-color: var(--link); box-shadow: 0 6px 18px var(--shadow); transform: translateY(-2px); }
|
|
.pcard.private { background: var(--bg); border: 1.5px dashed var(--border); }
|
|
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
.pcard-titlewrap { display: flex; align-items: center; gap: 7px; min-width: 0; }
|
|
.pcard-repoico { display: inline-flex; color: var(--fg2); flex: 0 0 auto; }
|
|
.pcard-title { font-size: 14px; font-weight: 700; color: var(--link); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.pcard-desc { margin-top: 8px; font-size: 12.5px; color: var(--fg2); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
|
|
.pcard-tags { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.pcard-foot { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
.pcard-stats { display: flex; align-items: center; gap: 13px; font-size: 12px; color: var(--fg2); }
|
|
.pcard-stats .stat { display: inline-flex; align-items: center; gap: 4px; }
|
|
.lang-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
|
|
.ico-heart { display: inline-flex; color: var(--heart); }
|
|
.ico-star { display: inline-flex; color: var(--attn); }
|
|
.ico-comment { display: inline-flex; color: var(--fg2); }
|
|
.vis-badge {
|
|
display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 11px; font-weight: 600;
|
|
border-radius: 999px; padding: 1px 8px 1px 7px; white-space: nowrap;
|
|
}
|
|
.vis-badge.public { color: var(--success-fg); background: var(--success-bg); border: 1px solid var(--success-bd); }
|
|
.vis-badge.private { color: var(--fg2); background: var(--panel); border: 1px solid var(--border); }
|
|
.toggle-share-btn {
|
|
display: inline-flex; align-items: center; gap: 5px; background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 4px 10px;
|
|
cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--fg2); white-space: nowrap; transition: background .14s ease, color .14s ease, border-color .14s ease;
|
|
}
|
|
.toggle-share-btn:hover { background: var(--btn-hover); color: var(--fg); border-color: var(--border); }
|
|
.private-note { font-size: 11.5px; color: var(--fg3); }
|
|
.share-mini-btn {
|
|
display: inline-flex; align-items: center; gap: 5px; background: var(--success);
|
|
border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 7px; padding: 4px 10px;
|
|
cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; transition: background .14s ease;
|
|
}
|
|
.share-mini-btn:hover { background: var(--success-hover); }
|
|
.add-card {
|
|
background: transparent; border: 1.5px dashed var(--border); border-radius: 12px; padding: 16px; cursor: pointer; font-family: inherit;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg2); min-height: 158px; width: 100%;
|
|
transition: border-color .16s ease, color .16s ease, background .16s ease;
|
|
}
|
|
.add-card:hover { border-color: var(--success); color: var(--success); background: var(--card); }
|
|
.add-card-plus { width: 38px; height: 38px; border-radius: 50%; background: var(--success-bg); border: 1px solid var(--success-bd); display: inline-flex; align-items: center; justify-content: center; color: var(--success); }
|
|
.add-card-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
|
|
.add-card-sub { font-size: 11.5px; text-align: center; line-height: 1.4; }
|
|
.empty { grid-column: 1 / -1; text-align: center; padding: 30px; color: var(--fg2); font-size: 13px; border: 1px dashed var(--border); border-radius: 12px; }
|
|
|
|
/* ===================== ③ 공유 피드 ===================== */
|
|
.feed-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
|
|
.feed-head .section-titlewrap { padding-bottom: 14px; }
|
|
.feed-head-right { display: flex; align-items: flex-end; gap: 14px; }
|
|
.feed-star-btn {
|
|
display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--btn-bd); border-radius: 7px;
|
|
padding: 6px 12px; margin-bottom: 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--fg2); white-space: nowrap;
|
|
transition: background .14s ease, border-color .14s ease, color .14s ease;
|
|
}
|
|
.feed-star-btn:hover { border-color: var(--attn-bd); color: var(--attn-fg); }
|
|
.feed-star-btn.on { background: var(--attn-bg); border-color: var(--attn-bd); color: var(--attn-fg); }
|
|
.feed-star-btn .ico { display: inline-flex; }
|
|
.sort-tabs { display: flex; gap: 2px; }
|
|
.sort-tab { background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px 14px; color: var(--fg2); transition: color .14s ease; }
|
|
.sort-tab.on { color: var(--fg); box-shadow: inset 0 -2px 0 var(--tab-underline); }
|
|
.feed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
|
|
|
.fcard { background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px; cursor: pointer; transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; display: flex; flex-direction: column; }
|
|
.fcard:hover { border-color: var(--link); box-shadow: 0 6px 18px var(--shadow); transform: translateY(-2px); }
|
|
.fcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
.fcard-titlewrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.fcard-title { font-size: 15px; font-weight: 700; color: var(--link); line-height: 1.3; }
|
|
.react-btns { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
|
|
.react-btn {
|
|
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; background: var(--btn-bg); border: 1px solid var(--btn-bd);
|
|
border-radius: 7px; padding: 4px 9px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--fg);
|
|
transition: background .14s ease, border-color .14s ease, color .14s ease;
|
|
}
|
|
.react-btn .count { font-variant-numeric: tabular-nums; }
|
|
.react-btn.heart.on { background: var(--heart-bg); border-color: var(--heart-bd); color: var(--heart-fg); }
|
|
.react-btn.star.on { background: var(--attn-bg); border-color: var(--attn-bd); color: var(--attn-fg); }
|
|
/* 채움(on) / 외곽선(off) 아이콘 토글 — JS 가 .on 클래스만 바꾸면 됨 */
|
|
.react-btn .ico, .modal-action .ico { display: inline-flex; }
|
|
.react-btn .ico-on, .modal-action .ico-on { display: none; }
|
|
.react-btn.on .ico-on, .modal-action.on .ico-on { display: inline-flex; }
|
|
.react-btn.on .ico-off, .modal-action.on .ico-off { display: none; }
|
|
.fcard-desc { margin-top: 8px; font-size: 13px; color: var(--fg2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
|
|
.fcard-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.fcard-foot { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
|
|
.fcard-author { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.fcard-author .sabun { font-size: 12.5px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
|
|
.fcard-author .date { font-size: 11.5px; color: var(--fg3); }
|
|
.fcard-meta { display: flex; align-items: center; gap: 13px; font-size: 12px; color: var(--fg2); }
|
|
.fcard-meta .stat { display: inline-flex; align-items: center; gap: 5px; }
|
|
.bara-link { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--link); white-space: nowrap; }
|