generated from ttipo/project-base
Merge branch 'style/admin-brand-colors'
This commit is contained in:
+40
-36
@@ -11,25 +11,31 @@
|
||||
<div id="mg-members">
|
||||
<style>
|
||||
#mg-members {
|
||||
--mgm-bg: #f3f5f8;
|
||||
/* 자본주의가이드 색 — 블랙 + 골드 (사이트 신청 완료 위젯 imweb-free-apply.html 과 같은 값) */
|
||||
--mgm-bg: #f5f4f1;
|
||||
--mgm-surface: #ffffff;
|
||||
--mgm-border: #e3e7ec;
|
||||
--mgm-border-strong: #cfd5dd;
|
||||
--mgm-text: #1b1f27;
|
||||
--mgm-muted: #6b7380;
|
||||
--mgm-faint: #9aa1ad;
|
||||
--mgm-side: #141922;
|
||||
--mgm-side-text: #a9b1bf;
|
||||
--mgm-accent: #2f6fed;
|
||||
--mgm-accent-soft: #eaf1ff;
|
||||
--mgm-warn: #b45309;
|
||||
--mgm-warn-soft: #fff4e5;
|
||||
--mgm-hover: #faf9f6;
|
||||
--mgm-border: #e7e4dd;
|
||||
--mgm-border-strong: #d4d0c6;
|
||||
--mgm-text: #1a1a1a;
|
||||
--mgm-muted: #6b6760;
|
||||
--mgm-faint: #a19d95;
|
||||
--mgm-side: #141414;
|
||||
--mgm-side-text: #a8a8a8;
|
||||
/* 골드는 채우는 색(버튼·막대·배지)으로 쓴다 — 흰 배경 위 글자로는 대비가 부족하다 */
|
||||
--mgm-accent: #f5b727;
|
||||
--mgm-accent-hover: #e3a614;
|
||||
--mgm-on-accent: #1a1200; /* 골드 위 글자 */
|
||||
--mgm-accent-text: #8a5d00; /* 흰 배경 위 골드 계열 글자·테두리 (링크·선택 표시·포커스) */
|
||||
--mgm-accent-soft: #fdf3d8;
|
||||
--mgm-warn: #c2410c;
|
||||
--mgm-warn-soft: #fff0e6;
|
||||
--mgm-danger: #c62828;
|
||||
--mgm-danger-soft: #fdecec;
|
||||
--mgm-ok: #1b7f4b;
|
||||
--mgm-ok-soft: #e7f6ee;
|
||||
--mgm-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
|
||||
--mgm-shadow-lg: 0 12px 32px rgba(16, 24, 40, .18);
|
||||
--mgm-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 1px 3px rgba(20, 20, 20, .06);
|
||||
--mgm-shadow-lg: 0 12px 32px rgba(20, 20, 20, .18);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
@@ -58,13 +64,13 @@
|
||||
padding: 7px 12px; border-radius: 8px; white-space: nowrap;
|
||||
transition: background-color .12s, border-color .12s, color .12s;
|
||||
}
|
||||
#mg-members button:hover { border-color: var(--mgm-border-strong); background: #fafbfc; }
|
||||
#mg-members button:focus-visible { outline: 2px solid var(--mgm-accent); outline-offset: 2px; }
|
||||
#mg-members button:hover { border-color: var(--mgm-border-strong); background: var(--mgm-hover); }
|
||||
#mg-members button:focus-visible { outline: 2px solid var(--mgm-accent-text); outline-offset: 2px; }
|
||||
#mg-members button:disabled { opacity: .5; cursor: default; }
|
||||
#mg-members button.mgm-primary { background: var(--mgm-accent); border-color: var(--mgm-accent); color: #fff; font-weight: 600; }
|
||||
#mg-members button.mgm-primary:hover { background: #255ed1; }
|
||||
#mg-members button.mgm-primary { background: var(--mgm-accent); border-color: var(--mgm-accent); color: var(--mgm-on-accent); font-weight: 700; }
|
||||
#mg-members button.mgm-primary:hover { background: var(--mgm-accent-hover); border-color: var(--mgm-accent-hover); }
|
||||
#mg-members button.mgm-danger { background: var(--mgm-danger); border-color: var(--mgm-danger); color: #fff; font-weight: 600; }
|
||||
#mg-members button.mgm-link { border: 0; background: none; color: var(--mgm-accent); padding: 4px 6px; }
|
||||
#mg-members button.mgm-link { border: 0; background: none; color: var(--mgm-accent-text); padding: 4px 6px; font-weight: 600; }
|
||||
#mg-members button.mgm-link:hover { text-decoration: underline; background: none; }
|
||||
#mg-members button.mgm-link.is-danger { color: var(--mgm-danger); }
|
||||
#mg-members button.mgm-sm { padding: 4px 9px; font-size: 12px; }
|
||||
@@ -73,7 +79,7 @@
|
||||
border-radius: 8px; background: #fff; color: var(--mgm-text); min-width: 0; width: 100%;
|
||||
}
|
||||
#mg-members input, #mg-members select { height: 36px; }
|
||||
#mg-members input:focus, #mg-members select:focus, #mg-members textarea:focus { outline: none; border-color: var(--mgm-accent); box-shadow: 0 0 0 3px var(--mgm-accent-soft); }
|
||||
#mg-members input:focus, #mg-members select:focus, #mg-members textarea:focus { outline: none; border-color: var(--mgm-accent-text); box-shadow: 0 0 0 3px var(--mgm-accent-soft); }
|
||||
#mg-members select {
|
||||
appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
|
||||
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7380' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
|
||||
@@ -88,7 +94,7 @@
|
||||
#mg-members .mgm-badge.is-ok { background: var(--mgm-ok-soft); color: var(--mgm-ok); border-color: transparent; }
|
||||
#mg-members .mgm-badge.is-warn { background: var(--mgm-warn-soft); color: var(--mgm-warn); border-color: transparent; }
|
||||
#mg-members .mgm-badge.is-danger { background: var(--mgm-danger-soft); color: var(--mgm-danger); border-color: transparent; }
|
||||
#mg-members .mgm-badge.is-accent { background: var(--mgm-accent-soft); color: var(--mgm-accent); border-color: transparent; }
|
||||
#mg-members .mgm-badge.is-accent { background: var(--mgm-accent); color: var(--mgm-on-accent); border-color: transparent; font-weight: 600; }
|
||||
#mg-members .mgm-trace { font-size: 11px; opacity: .7; }
|
||||
|
||||
#mg-members .mgm-card {
|
||||
@@ -104,8 +110,8 @@
|
||||
#mg-members .mgm-seg { display: inline-flex; border: 1px solid var(--mgm-border); border-radius: 9px; overflow: hidden; background: var(--mgm-surface); flex: none; }
|
||||
#mg-members .mgm-seg button { border: 0; border-radius: 0; padding: 7px 12px; background: none; color: var(--mgm-muted); }
|
||||
#mg-members .mgm-seg button + button { border-left: 1px solid var(--mgm-border); }
|
||||
#mg-members .mgm-seg button:hover { background: #f7f9fc; color: var(--mgm-text); }
|
||||
#mg-members .mgm-seg button.is-active { background: var(--mgm-accent-soft); color: var(--mgm-accent); font-weight: 600; }
|
||||
#mg-members .mgm-seg button:hover { background: var(--mgm-hover); color: var(--mgm-text); }
|
||||
#mg-members .mgm-seg button.is-active { background: var(--mgm-accent-soft); color: var(--mgm-accent-text); font-weight: 600; }
|
||||
/* 큰 전환 버튼 (상품별 / 업체별) */
|
||||
#mg-members .mgm-seg.is-large button { padding: 8px 16px; font-size: 14px; }
|
||||
|
||||
@@ -121,13 +127,13 @@
|
||||
#mg-members .mgm-chiprow-label { font-size: 12px; color: var(--mgm-muted); margin-right: 4px; font-weight: 600; }
|
||||
#mg-members .mgm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; }
|
||||
#mg-members .mgm-chip em { font-style: normal; font-size: 12px; color: var(--mgm-muted); font-variant-numeric: tabular-nums; }
|
||||
#mg-members .mgm-chip.is-active { background: var(--mgm-accent); border-color: var(--mgm-accent); color: #fff; }
|
||||
#mg-members .mgm-chip.is-active em { color: rgba(255,255,255,.85); }
|
||||
#mg-members .mgm-chip.is-active { background: var(--mgm-accent); border-color: var(--mgm-accent); color: var(--mgm-on-accent); font-weight: 600; }
|
||||
#mg-members .mgm-chip.is-active em { color: rgba(26, 18, 0, .7); }
|
||||
#mg-members .mgm-chip.is-empty { opacity: .45; }
|
||||
#mg-members .mgm-active-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--mgm-accent-soft); color: var(--mgm-accent); font-size: 12px; }
|
||||
#mg-members .mgm-active-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--mgm-accent-soft); color: var(--mgm-accent-text); font-size: 12px; }
|
||||
#mg-members .mgm-active-chip b { font-weight: 600; }
|
||||
#mg-members .mgm-active-chip button { border: 0; background: none; color: inherit; padding: 0 6px; font-size: 14px; line-height: 1; }
|
||||
#mg-members .mgm-group-badge { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: #eef1f6; color: #3b4352; white-space: nowrap; }
|
||||
#mg-members .mgm-group-badge { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: #f0eee9; color: #3d3a35; white-space: nowrap; }
|
||||
|
||||
/* ---------- 로그인 ---------- */
|
||||
#mg-members .mgm-login-wrap { background: var(--mgm-bg); border-radius: 14px; padding: 64px 16px; }
|
||||
@@ -155,8 +161,8 @@
|
||||
height: calc(100vh - var(--mgm-sticky-top, 0px)); overflow-y: auto;
|
||||
}
|
||||
#mg-members .mgm-brand { display: flex; align-items: center; gap: 10px; color: #fff; padding: 0 8px; }
|
||||
#mg-members .mgm-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--mgm-accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex: none; }
|
||||
#mg-members .mgm-brand strong { display: block; font-size: 14px; }
|
||||
#mg-members .mgm-brand strong { display: block; font-size: 15px; letter-spacing: -.01em; }
|
||||
#mg-members .mgm-side .mgm-brand strong { color: var(--mgm-accent); }
|
||||
#mg-members .mgm-brand span { font-size: 12px; color: var(--mgm-side-text); }
|
||||
#mg-members .mgm-account {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 4px;
|
||||
@@ -166,13 +172,13 @@
|
||||
#mg-members .mgm-account button { flex: none; background: none; border-color: rgba(255,255,255,.18); color: var(--mgm-side-text); padding: 3px 9px; font-size: 12px; }
|
||||
#mg-members .mgm-account button:hover { color: #fff; border-color: rgba(255,255,255,.4); background: none; }
|
||||
#mg-members .mgm-nav { display: flex; flex-direction: column; gap: 2px; }
|
||||
#mg-members .mgm-nav-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #6c7584; padding: 12px 10px 4px; }
|
||||
#mg-members .mgm-nav-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #7a7a7a; padding: 12px 10px 4px; }
|
||||
#mg-members .mgm-nav button {
|
||||
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
|
||||
background: none; border: 0; color: var(--mgm-side-text); padding: 9px 10px; border-radius: 8px; font-size: 14px;
|
||||
}
|
||||
#mg-members .mgm-nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
|
||||
#mg-members .mgm-nav button.is-active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
|
||||
#mg-members .mgm-nav button.is-active { background: rgba(245, 183, 39, .14); color: var(--mgm-accent); font-weight: 600; }
|
||||
#mg-members .mgm-nav svg { width: 18px; height: 18px; flex: none; }
|
||||
#mg-members .mgm-main { padding: 24px 26px 32px; min-width: 0; }
|
||||
#mg-members .mgm-topbar { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
@@ -216,12 +222,12 @@
|
||||
#mg-members .mgm-table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
|
||||
#mg-members table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
#mg-members th, #mg-members td { padding: 10px 10px; border-bottom: 1px solid var(--mgm-border); text-align: left; white-space: nowrap; vertical-align: top; }
|
||||
#mg-members th { font-size: 12px; color: var(--mgm-muted); font-weight: 600; background: #fafbfc; position: sticky; top: 0; z-index: 1; }
|
||||
#mg-members th { font-size: 12px; color: var(--mgm-muted); font-weight: 600; background: var(--mgm-hover); position: sticky; top: 0; z-index: 1; }
|
||||
#mg-members tbody tr:last-child td { border-bottom: 0; }
|
||||
#mg-members th.mgm-r, #mg-members td.mgm-r { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
#mg-members td.mgm-wrap { white-space: normal; min-width: 140px; }
|
||||
#mg-members tr.is-clickable { cursor: pointer; }
|
||||
#mg-members tr.is-clickable:hover td { background: #f7f9fc; }
|
||||
#mg-members tr.is-clickable:hover td { background: var(--mgm-hover); }
|
||||
#mg-members tr.is-selected td { background: var(--mgm-accent-soft); }
|
||||
#mg-members .mgm-cell-main { display: block; font-weight: 600; }
|
||||
#mg-members .mgm-cell-sub { display: block; font-size: 12px; color: var(--mgm-muted); margin-top: 1px; }
|
||||
@@ -302,7 +308,7 @@
|
||||
#mg-members .mgm-opt span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#mg-members .mgm-opt span + span { flex: none; color: var(--mgm-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
|
||||
#mg-members .mgm-opt.is-active, #mg-members .mgm-opt:hover { background: var(--mgm-bg); }
|
||||
#mg-members .mgm-opt.is-selected span:first-child { color: var(--mgm-accent); font-weight: 600; }
|
||||
#mg-members .mgm-opt.is-selected span:first-child { color: var(--mgm-accent-text); font-weight: 600; }
|
||||
#mg-members .mgm-opt-empty { padding: 8px 10px; font-size: 13px; color: var(--mgm-muted); }
|
||||
#mg-members .mgm-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
|
||||
#mg-members .mgm-divider { border-top: 1px dashed var(--mgm-border); margin: 14px 0 0; padding-top: 14px; }
|
||||
@@ -389,7 +395,6 @@
|
||||
<div class="mgm-login-wrap" data-role="login" hidden>
|
||||
<section class="mgm-card mgm-login">
|
||||
<div class="mgm-brand" style="padding:0;color:var(--mgm-text)">
|
||||
<span class="mgm-logo" style="color:#fff">₩</span>
|
||||
<div><strong>자본주의가이드 관리자</strong><span class="mgm-muted">신청·업체 링크·회원 유입경로</span></div>
|
||||
</div>
|
||||
<div class="mgm-login-notice" data-role="login-notice" hidden></div>
|
||||
@@ -405,7 +410,6 @@
|
||||
<div class="mgm-shell" data-role="app" hidden>
|
||||
<aside class="mgm-side">
|
||||
<div class="mgm-brand">
|
||||
<span class="mgm-logo">₩</span>
|
||||
<div><strong>자본주의가이드</strong><span>관리자 대시보드</span></div>
|
||||
</div>
|
||||
<!-- 위젯 위에 사이트 헤더가 있어도 항상 보이도록 위쪽에 둔다 -->
|
||||
|
||||
Reference in New Issue
Block a user