메뉴 여닫기
환경 설정 메뉴 여닫기
개인 메뉴 여닫기
로그인하지 않음
만약 지금 편집한다면 당신의 IP 주소가 공개될 수 있습니다.

미디어위키:Common.css: 두 판 사이의 차이

무림위키
(Restore full CSS with last-child)
(Complete design overhaul clean)
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/* ===== CSS Variables ===== */
:root {
  --murim-red: #8B0000;
  --murim-red-light: #a00000;
  --murim-red-hover: #c00000;
  --murim-gold: #c9aa71;
  --murim-gold-light: #e0c080;
  --murim-gold-dark: #a08050;
  --murim-bg-card: #141414;
  --murim-bg-surface: #1a1a1a;
  --murim-bg-elevated: #222;
  --murim-border: #333;
  --murim-text: #c8c8c8;
  --murim-text-em: #e8e8e8;
  --murim-text-subtle: #888;
  --murim-radius: 8px;
  --murim-radius-sm: 4px;
  --murim-transition: 0.2s ease;
}


/* ===== Primary Color Override ===== */
.home-header{position:relative;padding:3.5rem 1rem;text-align:center;line-height:1.1}
:root {
.home-header-pretitle{margin-bottom:.5rem;color:#888;font-size:.85rem;letter-spacing:.05em}
  --color-primary__h: 0;
.home-header-title{margin:0;font-size:clamp(2.5rem,calc(2rem + 4vw),4.5rem);text-transform:uppercase;line-height:.9;font-weight:600;color:#c9aa71}
  --color-primary__s: 70%;
.home-header-subtitle{margin-top:.5rem;color:#888;font-size:.9rem}
  --color-primary__l: 27%;
.home-header-subtitle em{font-style:italic;color:#ccc}
  --color-link: var(--murim-gold);
.home-gameinfo{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:.5rem 1rem;white-space:nowrap;font-size:.85rem;flex-wrap:wrap}
  --color-link--hover: var(--murim-gold-light);
.home-gameinfo-label{color:#888}
  --color-link--active: var(--murim-gold-dark);
.home-gameinfo-list{display:flex;align-items:center;gap:.5rem}
  --color-subtle: var(--murim-text-subtle);
.home-gameinfo-list-item{font-weight:600;color:#c9aa71}
  --color-placeholder: #666;
.t-badge{display:inline-flex;align-items:center;padding:.2rem .5rem;border:1px solid #2a6b2a;border-radius:4px;background:rgba(34,120,34,.15);color:#4caf50;font-size:.8rem;font-weight:600}
  --color-inverted-fixed: #fff;
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem;margin:1rem 0}
}
.home-card{position:relative;padding:1rem;border:1px solid #2a2b2e;background:#141518;border-radius:8px;font-size:.85rem;overflow:hidden;transition:border-color .2s,transform .2s}
.home-card:hover{border-color:#c9aa71;transform:translateY(-2px)}
.home-card-header{color:#c9aa71;font-size:.95rem;font-weight:600;margin-bottom:.5rem;padding-bottom:.3rem;border-bottom:1px solid #2a2b2e}
.home-card ul{list-style:none;margin:0;padding:0}
.home-card li{padding:.25rem 0;border-bottom:1px solid #2a2b2e}
.home-card li:last-child{border-bottom:none}
.home-card li a{color:#ccc;text-decoration:none}
.home-card li a:hover{color:#c9aa71}
.home-card-smw-ul-furtherresults{display:block;margin-top:.5rem;font-size:.8rem}
.home-card-smw-ul-furtherresults a{color:#888!important}
.home-nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin:1rem 0}
.home-nav-card{display:block;padding:1rem;text-align:center;border:1px solid #2a2b2e;border-radius:8px;background:#141518;text-decoration:none;color:#ccc;transition:all .2s}
.home-nav-card:hover{border-color:#8B0000;background:#1a1b1e;color:#c9aa71}
.home-nav-card .ico{font-size:2rem;display:block;margin-bottom:.3rem}
.home-nav-card h3{margin:0;font-size:.9rem;color:inherit}
.home-nav-card p{margin:.2rem 0 0;font-size:.75rem;color:#888}
.home-link{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.75rem}
.home-link-button a{display:flex;align-items:center;justify-content:center;padding:.5rem;border:1px solid #2a2b2e;border-radius:8px;background:#1a1b1e;color:#ccc!important;font-size:.85rem;font-weight:500;text-decoration:none!important;transition:background .2s}
.home-link-button a:hover{background:#2a2b2e}
.home-footer{text-align:center;padding:1rem 0;margin-top:1rem;border-top:1px solid #2a2b2e;font-size:.8rem;color:#888}
.home-footer a{color:#888;text-decoration:none;margin:0 .5rem}
.home-footer a:hover{color:#c9aa71}
.page-Main_Page #firstHeading{display:none}


body.skin-citizen-dark {
  --background-color-progressive-subtle: #2a0a0a;
  --color-link: var(--murim-gold);
  --color-link--visited: var(--murim-gold-dark);
  --color-link--active: var(--murim-gold-light);
  --color-base: var(--murim-text);
  --color-emphasized: var(--murim-text-em);
  --color-subtle: var(--murim-text-subtle);
  --border-color-base: var(--murim-border);
  --background-color-base: #0d0d0d;
  --background-color-page-container: #0d0d0d;
  --background-color-content: #111;
}
/* ===== Typography ===== */
body {
  font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  line-height: 1.6;
}
#mw-content-text h2 {
  border-bottom: 2px solid var(--murim-border);
  padding-bottom: 0.3em;
  color: var(--murim-text-em);
}
#mw-content-text h3 {
  color: var(--murim-gold);
}
/* ===== Featured Section ===== */
.mw-section-featured {
  text-align: left;
}
.mw-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2em;
  margin-top: 1.5em;
}
.mw-featured-card {
  padding: 1.5em;
  border: 1px solid var(--murim-border);
  border-radius: var(--murim-radius);
  background: var(--murim-bg-card);
  transition: border-color var(--murim-transition), box-shadow var(--murim-transition);
}
.mw-featured-card:hover {
  border-color: var(--murim-gold-dark);
  box-shadow: 0 2px 12px rgba(201,170,113,0.08);
}
.mw-featured-card h3 {
  margin: 0 0 0.8em;
  color: var(--murim-gold);
  font-size: 1em;
  border-bottom: 1px solid var(--murim-border);
  padding-bottom: 0.5em;
}
.mw-featured-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mw-featured-content li {
  padding: 0.3em 0;
}
.mw-featured-content li a {
  color: var(--murim-text);
  text-decoration: none;
}
.mw-featured-content li a:hover {
  color: var(--murim-gold);
}
.mw-featured-content .smw-ul-furtherresults a {
  font-size: 0.85em;
  color: var(--murim-text-subtle);
}
/* ===== Community Section ===== */
.mw-community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1em;
  margin-top: 1.5em;
}
.mw-community-card {
  padding: 1.2em;
  border: 1px solid var(--murim-border);
  border-radius: var(--murim-radius);
  background: var(--murim-bg-card);
  transition: all var(--murim-transition);
}
.mw-community-card:hover {
  border-color: var(--murim-gold-dark);
  transform: translateY(-2px);
}
.mw-community-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.mw-community-card h3 {
  margin: 0 0 0.3em;
  color: var(--murim-text-em);
  font-size: 1em;
}
.mw-community-card p {
  margin: 0;
  color: var(--murim-text-subtle);
  font-size: 0.85em;
}
/* ===== Main Page ===== */
.mw-mainpage-hero {
  text-align: center;
  padding: 4em 1em 2.5em;
  margin-bottom: 2em;
  border-bottom: 1px solid var(--murim-border);
  background: linear-gradient(180deg, rgba(139,0,0,0.08) 0%, transparent 100%);
  border-radius: var(--murim-radius);
}
.mw-mainpage-hero h1 {
  font-size: 3.5em;
  margin: 0 0 0.15em;
  color: var(--murim-gold);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.mw-mainpage-hero-desc {
  font-size: 1.15em;
  color: var(--murim-text-subtle);
  margin: 0 0 2em;
}
/* Stats */
.mw-mainpage-stats {
  display: flex;
  justify-content: center;
  gap: 2.5em;
  margin-bottom: 1.5em;
  flex-wrap: wrap;
}
.mw-stat {
  text-align: center;
  padding: 0.5em 1em;
  border-radius: var(--murim-radius);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--murim-border);
  min-width: 100px;
}
.mw-stat-value {
  display: block;
  font-size: 2em;
  font-weight: 700;
  color: var(--murim-gold);
}
.mw-stat-label {
  display: block;
  font-size: 0.75em;
  color: var(--murim-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 0.2em;
}
/* Card Grid */
.mw-mainpage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2em;
  margin: 2em 0;
}
.mw-mainpage-card {
  position: relative;
  padding: 1.8em 1.5em;
  border: 1px solid var(--murim-border);
  border-radius: var(--murim-radius);
  background: var(--murim-bg-card);
  transition: border-color var(--murim-transition), transform var(--murim-transition), box-shadow var(--murim-transition);
  overflow: hidden;
}
.mw-mainpage-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--murim-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.mw-mainpage-card:hover::before {
  transform: scaleX(1);
}
.mw-mainpage-card:hover {
  border-color: var(--murim-red);
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(139,0,0,0.15);
}
.mw-mainpage-card h3 {
  margin: 0.6em 0 0.3em;
  color: var(--murim-text-em);
  font-size: 1.15em;
}
.mw-mainpage-card p {
  margin: 0;
  color: var(--murim-text-subtle);
  font-size: 0.85em;
  line-height: 1.5;
}
.mw-card-icon {
  font-size: 2.2em;
  line-height: 1;
}
.mw-mainpage-card > a:last-child {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mw-mainpage-card > a:last-child:focus-visible {
  outline: 2px solid var(--murim-gold);
  outline-offset: -2px;
  border-radius: var(--murim-radius);
}
/* Section */
.mw-mainpage-section {
  text-align: center;
  padding: 2.5em 2em;
  margin: 2em 0;
  border: 1px solid var(--murim-border);
  border-radius: var(--murim-radius);
  background: var(--murim-bg-card);
}
.mw-mainpage-section h2 {
  color: var(--murim-gold);
  border: none;
  margin-top: 0;
  font-size: 1.5em;
}
.mw-mainpage-actions {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-top: 1.5em;
  flex-wrap: wrap;
}
.mw-mainpage-actions a {
  text-decoration: none;
}
.mw-mainpage-btn {
  display: inline-block;
  padding: 0.75em 1.8em;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--murim-transition);
}
.mw-mainpage-btn-primary {
  background: var(--murim-red);
  color: #fff;
  border: 1px solid var(--murim-red);
}
.mw-mainpage-btn-primary:hover {
  background: var(--murim-red-hover);
  border-color: var(--murim-red-hover);
  color: #fff;
}
.mw-mainpage-btn-secondary {
  border: 1px solid var(--murim-border);
  color: var(--murim-text);
}
.mw-mainpage-btn-secondary:hover {
  border-color: var(--murim-red);
  color: var(--murim-gold);
}
/* Footer links */
.mw-mainpage-footer-links {
  display: flex;
  justify-content: center;
  gap: 2em;
  padding: 2em 0;
  margin-top: 2em;
  border-top: 1px solid var(--murim-border);
  flex-wrap: wrap;
}
.mw-mainpage-footer-links a {
  color: var(--murim-text-subtle);
  text-decoration: none;
  font-size: 0.9em;
  transition: color var(--murim-transition);
}
.mw-mainpage-footer-links a:hover {
  color: var(--murim-gold);
}
/* ===== Infoboxes ===== */
.wikitable.infobox {
  background: var(--murim-bg-card);
  border-color: var(--murim-border);
  border-radius: var(--murim-radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.wikitable.infobox th,
.wikitable.infobox td {
  border-color: var(--murim-border);
  padding: 10px 14px;
  font-size: 0.95em;
}
.wikitable.infobox th {
  background: var(--murim-bg-surface);
  color: var(--murim-gold);
  font-weight: 600;
  text-align: left;
  width: 35%;
  white-space: nowrap;
}
.wikitable.infobox td {
  background: var(--murim-bg-card);
  color: var(--murim-text);
}
.wikitable.infobox tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}
/* Category pages */
#mw-pages h3 {
  color: var(--murim-gold);
}
/* ===== Search ===== */
.mw-search-createlink,
.mw-search-result-data {
  color: var(--murim-text-subtle);
}
.searchresults p {
  color: var(--murim-text);
}
/* ===== Navigation refinements ===== */
.skin-citizen .mw-indicators {
  color: var(--murim-text-subtle);
}
.skin-citizen .page-actions-menu {
  border-bottom-color: var(--murim-border);
}
.skin-citizen .mw-footer {
  border-top-color: var(--murim-border);
}
/* ===== TOC ===== */
#toc {
  background: var(--murim-bg-surface);
  border-color: var(--murim-border);
  border-radius: var(--murim-radius);
  padding: 1em;
}
#toc .toctitle h2 {
  color: var(--murim-gold);
  border: none;
}
#toc a {
  color: var(--murim-text-subtle);
}
#toc a:hover {
  color: var(--murim-gold);
}
/* ===== Make MP heading not show ===== */
.page-Main_Page #firstHeading {
  display: none;
}
/* ===== Page status indicators ===== */
.mw-body-header {
  border-bottom-color: var(--murim-border);
}
/* ===== Edit area ===== */
.skin-citizen .wikiEditor-ui .wikiEditor-ui-top {
  border-color: var(--murim-border);
}
.skin-citizen .wikiEditor-ui .wikiEditor-ui-controls {
  background: var(--murim-bg-surface);
}
/* ===== User links ===== */
.skin-citizen .mw-portlet .mw-list-item a {
  color: var(--murim-text);
}
.skin-citizen .mw-portlet .mw-list-item a:hover {
  color: var(--murim-gold);
}
/* ===== Portal/Sidebar ===== */
.skin-citizen .mw-portlet h3 {
  color: var(--murim-gold);
  border-bottom-color: var(--murim-border);
}
/* ===== Categories ===== */
.mw-normal-catlinks {
  background: var(--murim-bg-surface);
  border-color: var(--murim-border);
  border-radius: var(--murim-radius);
}
.mw-normal-catlinks a {
  color: var(--murim-gold);
}

2026년 5월 17일 (일) 06:51 기준 최신판

.home-header{position:relative;padding:3.5rem 1rem;text-align:center;line-height:1.1} .home-header-pretitle{margin-bottom:.5rem;color:#888;font-size:.85rem;letter-spacing:.05em} .home-header-title{margin:0;font-size:clamp(2.5rem,calc(2rem + 4vw),4.5rem);text-transform:uppercase;line-height:.9;font-weight:600;color:#c9aa71} .home-header-subtitle{margin-top:.5rem;color:#888;font-size:.9rem} .home-header-subtitle em{font-style:italic;color:#ccc} .home-gameinfo{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:.5rem 1rem;white-space:nowrap;font-size:.85rem;flex-wrap:wrap} .home-gameinfo-label{color:#888} .home-gameinfo-list{display:flex;align-items:center;gap:.5rem} .home-gameinfo-list-item{font-weight:600;color:#c9aa71} .t-badge{display:inline-flex;align-items:center;padding:.2rem .5rem;border:1px solid #2a6b2a;border-radius:4px;background:rgba(34,120,34,.15);color:#4caf50;font-size:.8rem;font-weight:600} .home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem;margin:1rem 0} .home-card{position:relative;padding:1rem;border:1px solid #2a2b2e;background:#141518;border-radius:8px;font-size:.85rem;overflow:hidden;transition:border-color .2s,transform .2s} .home-card:hover{border-color:#c9aa71;transform:translateY(-2px)} .home-card-header{color:#c9aa71;font-size:.95rem;font-weight:600;margin-bottom:.5rem;padding-bottom:.3rem;border-bottom:1px solid #2a2b2e} .home-card ul{list-style:none;margin:0;padding:0} .home-card li{padding:.25rem 0;border-bottom:1px solid #2a2b2e} .home-card li:last-child{border-bottom:none} .home-card li a{color:#ccc;text-decoration:none} .home-card li a:hover{color:#c9aa71} .home-card-smw-ul-furtherresults{display:block;margin-top:.5rem;font-size:.8rem} .home-card-smw-ul-furtherresults a{color:#888!important} .home-nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin:1rem 0} .home-nav-card{display:block;padding:1rem;text-align:center;border:1px solid #2a2b2e;border-radius:8px;background:#141518;text-decoration:none;color:#ccc;transition:all .2s} .home-nav-card:hover{border-color:#8B0000;background:#1a1b1e;color:#c9aa71} .home-nav-card .ico{font-size:2rem;display:block;margin-bottom:.3rem} .home-nav-card h3{margin:0;font-size:.9rem;color:inherit} .home-nav-card p{margin:.2rem 0 0;font-size:.75rem;color:#888} .home-link{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.75rem} .home-link-button a{display:flex;align-items:center;justify-content:center;padding:.5rem;border:1px solid #2a2b2e;border-radius:8px;background:#1a1b1e;color:#ccc!important;font-size:.85rem;font-weight:500;text-decoration:none!important;transition:background .2s} .home-link-button a:hover{background:#2a2b2e} .home-footer{text-align:center;padding:1rem 0;margin-top:1rem;border-top:1px solid #2a2b2e;font-size:.8rem;color:#888} .home-footer a{color:#888;text-decoration:none;margin:0 .5rem} .home-footer a:hover{color:#c9aa71} .page-Main_Page #firstHeading{display:none}