|
|
| 1번째 줄: |
1번째 줄: |
| /* ===== CSS Variables ===== */
| | .mw-mainpage-card > a:last-child { |
| :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 ===== */
| |
| :root {
| |
| --color-primary__h: 0;
| |
| --color-primary__s: 70%;
| |
| --color-primary__l: 27%;
| |
| --color-link: var(--murim-gold);
| |
| --color-link--hover: var(--murim-gold-light);
| |
| --color-link--active: var(--murim-gold-dark);
| |
| --color-subtle: var(--murim-text-subtle);
| |
| --color-placeholder: #666;
| |
| --color-inverted-fixed: #fff;
| |
| }
| |
| | |
| 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:first-child { | |
| position: absolute; | | position: absolute; |
| inset: 0; | | inset: 0; |
| z-index: 1; | | z-index: 1; |
| | text-indent: -9999px; |
| | overflow: hidden; |
| } | | } |
| .mw-mainpage-card > a:first-child:focus-visible { | | .mw-mainpage-card > a:last-child:focus-visible { |
| outline: 2px solid var(--murim-gold); | | outline: 2px solid var(--murim-gold); |
| outline-offset: -2px; | | outline-offset: -2px; |
| border-radius: var(--murim-radius); | | 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);
| |
| } | | } |
