View Code - 20260722

theme_preview_external.css | 20260722_120325.php Initial Domain Snapshot

:root{
  --primary: #34A853;
  --background: #F5FFF7;
  --secondary: #5F6368;
  --accent: #A7D8DE;
  --highlight: #FFF9C4;
  --subtle-accent: #D0E8D0;
  --neutral: #FAFAFA;
  --text: #202124;
  --muted: #6b7280;
  --border: #e7e7e7;
  --radius: 10px;
  --gap: 12px;
  --container: 1100px;
  --shadow-1: 0 6px 18px rgba(12,20,40,0.03);
  --shadow-2: 0 6px 14px rgba(52,168,83,0.12);
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--background);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.wrap{max-width:var(--container);margin:24px auto;padding:18px}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.brand h2{margin:0;font-size:16px}
.brand .muted-meta{font-size:12px;color:var(--muted)}
.nav{display:flex;gap:8px;align-items:center}
.nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--text);font-weight:600}
.nav a.active{color:var(--primary)}

/* Palette */
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.swatch{border-radius:10px;padding:12px;border:1px solid var(--border);background:var(--neutral);display:flex;align-items:center;gap:12px}
.color-box{width:56px;height:56px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.sw-label{font-size:13px}
.sw-hex{font-size:12px;color:var(--muted)}

/* Grid / cards */
.grid2{display:grid;grid-template-columns:1fr 360px;gap:12px}
.card{background:var(--neutral);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-1)}
.card h3{margin:0 0 12px;font-size:15px;color:var(--text)}

/* Buttons */
.btn{display:inline-block;padding:9px 14px;border-radius:10px;border:0;font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-2)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--primary)}
.btn-accent{background:var(--accent);color:var(--text)}
.btn-sm{padding:6px 10px;font-size:13px;border-radius:8px}

/* Badges */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid var(--border);background:#fff}
.badge.pending{background:var(--highlight);border-color:#f0e68c}
.badge.approved{background:#e8f5e9;border-color:#c8e6c9}
.badge.rejected{background:#ffebee;border-color:#ffcdd2}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{font-size:12px;color:var(--secondary);text-align:left;padding:8px 10px}
.table td{background:#fff;padding:10px;border-top:1px solid #eee;border-bottom:1px solid #eee}
.table tr td:first-child{border-left:1px solid #eee;border-top-left-radius:8px;border-bottom-left-radius:8px}
.table tr td:last-child{border-right:1px solid #eee;border-top-right-radius:8px;border-bottom-right-radius:8px}

/* Forms */
label{display:block;font-size:13px;color:var(--secondary);margin-bottom:6px}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.row .col{min-width:0}

/* Notice */
.notice{padding:10px 12px;border-radius:10px;background:var(--highlight);border:1px solid #ffe082;color:var(--text);margin-bottom:12px}

/* Utility helpers (to replace inline styles used earlier) */
.flex{display:flex;align-items:center}
.flex-wrap{flex-wrap:wrap}
.gap-8{gap:8px}
.gap-12{gap:12px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.small{font-size:12px;color:var(--muted)}
.hr{border:none;border-top:1px solid #eee;margin:14px 0}

/* Component samples */
.panel-subtle{padding:8px;border-radius:8px;background:var(--subtle-accent);border:1px solid #cfe7cf}
.panel-accent{padding:8px;border-radius:8px;background:var(--accent);border:1px solid rgba(0,0,0,0.02)}
.panel-neutral{padding:8px;border-radius:8px;background:var(--neutral);border:1px dashed var(--border)}

/* Responsive */
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .palette{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:1fr}
}