편집토론문서 역사

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

편집 요약 없음
편집 요약 없음
 
(같은 사용자의 중간 판 293개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/* =========================================
/* =========================================
   COASTLINE: BLACK ICE - Global CSS
   COASTLINE: BLACK ICE - Common (Entry Point)
   ========================================= */
   ========================================= */


/* 네비게이션 */
/*
.Liberty .nav-wrapper { background: linear-gradient(to bottom, #171114 0%, #0a0909 100%) !important; border-bottom: 2px solid #854369 !important; }
Common.css는 CSS 로더 역할만 한다.


/* 제목 테마 */
정리 원칙
.mw-page-title-main {
-----------------------------------------
    border-radius: 5px !important;
- 공통 토큰과 전역 테마: Theme.css
    padding: 5px !important;
- 틀과 문서 컴포넌트: Template.css, Components.css
    border: 2px solid #B45C8F !important;
- 아이콘: Icons.css
    background: #171717 !important;
- 레이아웃: Layout.css
    color: #ffffff !important;
- 편집기: Editor.css
    display: inline-block !important;
- 다이얼로그: Dialogs.css
}
- 좌측 언어 다이얼: Layout.css + Common.js
- 대문 전용: MainPage.css
- 테스트 전용: Test.css


/* 폰트 */
주의:
@font-face {
Test.css는 실험용이다.
font-family: 'ThinRounded';
*/
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-1@1.0/ThinDungGeunMo.woff2') format('woff2');
font-weight: normal;
font-display: swap;
}


body, .liberty-content-main, .nav-wrapper {
@import url('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css');
    font-family: 'ThinRounded', sans-serif !important;
@import url('/index.php?title=MediaWiki:Template.css&action=raw&ctype=text/css');
}
@import url('/index.php?title=MediaWiki:Icons.css&action=raw&ctype=text/css');
 
@import url('/index.php?title=MediaWiki:Layout.css&action=raw&ctype=text/css');
@font-face {
@import url('/index.php?title=MediaWiki:Theme.css&action=raw&ctype=text/css');
    font-family: 'BoldRound';
@import url('/index.php?title=MediaWiki:Editor.css&action=raw&ctype=text/css');
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/BoldDungGeunMo.woff2') format('woff2');
@import url('/index.php?title=MediaWiki:Components.css&action=raw&ctype=text/css');
    font-weight: normal;
@import url('/index.php?title=MediaWiki:Dialogs.css&action=raw&ctype=text/css');
    font-display: swap;
@import url('/index.php?title=MediaWiki:MainPage.css&action=raw&ctype=text/css');
}
@import url('/index.php?title=MediaWiki:DevTools.css&action=raw&ctype=text/css');
 
@import url('/index.php?title=MediaWiki:AnecdoteViewer.css&action=raw&ctype=text/css');
.mw-page-title-main, .mw-page-title-namespace,
.liberty-content-main h1, .liberty-content-main h2,
.liberty-content-main h3, .liberty-content-main h4,
.liberty-content-main h5, .liberty-content-main h6 {
    font-family: 'BoldRound', sans-serif !important;
}
 
/* 더 넓은 본문 영역 */
.liberty-sidebar { display: none !important; }
.container-fluid.liberty-content { padding-bottom: 0 !important; }
.content-wrapper { max-width: 1300px !important; margin: 0 auto !important; padding: 16px !important; padding-top: 60px !important; margin-left: auto !important; margin-right: auto !important; }
.container-fluid.liberty-content { padding-bottom: 0 !important; margin: 0 auto !important; }
 
/* 배경 */
.WW-bg {
  position: fixed;
  overflow: hidden;
  pointer-events: none;
  z-index: -3;
  background: #000;
}
.WW-bg::before {
  content: "";
  position: absolute;
  top: -256px;
  left: -256px;
  width: calc(100% + 512px);
  height: calc(100% + 512px);
  background-image:
    linear-gradient(rgba(85,10,63,0.75) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85,10,63,0.75) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: WWGridLarge 18s linear infinite;
  opacity: .9;
  filter: drop-shadow(0 0 4px rgba(99,27,83,0.45));
}
@keyframes WWGridLarge {
  from { transform: translate(0,0) }
  to { transform: translate(72px,72px) }
}
 
/* 툴팁 */
.tooltip-template-trigger {
  cursor: pointer;
  color: #722f37;
  user-select: none;
}
.tooltip-template {
  display: none;
  margin: 5px 0;
  border: 1px solid #854369;
  background: #1a1a1a;
  color: #000;
  padding: 12px;
  border-radius: 3px;
  text-align: left;
  user-select: text;
  position: absolute;
  z-index: 5;
}
.tooltip-template-trigger:hover { text-decoration: underline; }
.tooltip-template-trigger:hover + .tooltip-template { display: block; user-select: none; }
.tooltip-template-trigger:active + .tooltip-template { display: block; user-select: none; }
.tooltip-template:hover { display: block; }
 
/* 제목 */
.mw-page-title-namespace { color: #437abc !important; }
.mw-page-title-separator { color: #e2e2e2 !important; }
.mw-page-title-main { color: #e2e2e2 !important; }
 
/* 헤더 */
.liberty-content-header { background-color: #0a0909 !important; border-bottom: 2px solid #854369 !important; border-top: 2px solid transparent !important; border-right: none !important; border-left: none !important; box-shadow: 0px 0px 3px #61304c; }
.subpages { color: #fdecec !important; }
.subpages a { color: #854369 !important; }
.subpages a:active { color: #854369 !important; }
 
/* 편집 버튼 */
.btn-secondary { color: #e2e2e2 !important; background-color: #171717 !important; border: 1px solid #854369 !important; }
.btn-secondary:hover { color: #d46262 !important; background-color: #171717 !important; border: 1px solid #854369 !important; }
.dropdown-item { color: #e2e2e2 !important; background-color: #171717 !important; border: 1px solid #854369 !important; }
.dropdown-item:hover { color: #d46262 !important; background-color: #171717 !important; border: 1px solid #854369 !important; }
.dropdown-menu { color: #e2e2e2 !important; background-color: #171717 !important; border: 1px solid #854369 !important; }
 
/* 분류 문서 */
.mw-category-generated { color: #e2e2e2 !important; }
.mw-category-generated a { color: #854369 !important; }
.CategoryTreeToggle { color: #854369 !important; }
.number-link { color: #854369 !important; }
 
/* 공지사항 */
.external { color: #33b733 !important; }
.external:before { color: #33b733 !important; }
.alert-info { background-color: #171717 !important; border: 2px solid #854369 !important; box-shadow: 0px 0px 3px #000000; }
 
/* 하단 푸터 */
.liberty-footer { background-color: #0a0909 !important; border-top: 2px solid #854369 !important; border-bottom: none !important; border-right: none !important; border-left: none !important; }
.footer-info-lastmod { color: #e2e2e2 !important; }
.footer-info-copyright { color: #e2e2e2 !important; }
.footer-places-privacy a { color: #c95197 !important; }
.footer-places-privacy a:active { color: #e2e2e2 !important; }
.footer-places-about a { color: #c95197 !important; }
.footer-places-about a:active { color: #e2e2e2 !important; }
.footer-places-disclaimers a { color: #c95197 !important; }
.footer-places-disclaimers a:active { color: #e2e2e2 !important; }
 
/* 넘겨주기 */
.mw-redirectedfrom { color: #854369 !important; }
.mw-redirectedfrom a { color: #854369 !important; }
 
/* 문단 보더 */
.Liberty .content-wrapper .liberty-content .liberty-content-main h1,
.Liberty .content-wrapper .liberty-content .liberty-content-main h2,
.Liberty .content-wrapper .liberty-content .liberty-content-main h3,
.Liberty .content-wrapper .liberty-content .liberty-content-main h4,
.Liberty .content-wrapper .liberty-content .liberty-content-main h5,
.Liberty .content-wrapper .liberty-content .liberty-content-main h6 {
  margin-top: 1rem;
  border-bottom: 1px solid #414141 !important;
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  overflow-wrap: break-word;
  overflow: hidden;
}
 
/* 본문 */
.liberty-content { border: 2px solid #854369 !important; box-shadow: 0px 0px 3px #361427; border-radius: 0.35rem; }
.Liberty .content-wrapper .liberty-content .liberty-content-main,
.mw-datatable th, .mw-datatable tr:hover td, textarea,
div.mw-warning-with-logexcerpt, div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon { background: #171717; color: #ffffff; }
.Liberty .content-wrapper .liberty-content .liberty-content-main { border-left: none; border-right: none; }
.mw-references-columns { border-top: 1px solid #414141 !important; }
 
/* 링크 색상 */
a { color: #d45aa2 !important; }
a:hover { color: #fdecf9 !important; }
a:active { color: #b3337d !important; }
a.new { color: #ba0000 !important; }
a.new:hover { color: #fe5757 !important; }
a.new:active { color: #ba0000 !important; }
a.external { color: #33b733 !important; }
a.external:hover { color: #95ed95 !important; }
a.external:active { color: #33b733 !important; }
a.external:before { display: none !important; }
a.external { text-decoration: underline !important; }
 
/* CLBI 템플릿 링크 */
.CLBI-template a { color: #d45aa2 !important; }
.CLBI-template a:hover { color: #fdecf9 !important; }
.CLBI-template a:active { color: #b3337d !important; }
.CLBI-template a.new { color: #ba0000 !important; }
.CLBI-template a.new:hover { color: #fe5757 !important; }
.CLBI-template a.new:active { color: #ba0000 !important; }
.CLBI-template a.external { color: #33b733 !important; }
.CLBI-template a.external:hover { color: #95ed95 !important; }
.CLBI-template a.external:active { color: #33b733 !important; }
 
/* 목차 */
#mw-toc-heading { color: #ffffff; }
.toctogglelabel:after { color: #b45c8f !important; }
.tocnumber { color: #b45c8f !important; }
.toctogglespan { color: #b45c8f !important; }
.toctext { color: #e4e4e4 !important; }
.toctitle { background-color: #101010 !important; border: 1.5px solid #101010 !important; border-radius: 5px 5px 0 0; box-shadow: inset 1px 0 0 #1A1A1A, inset 0 -1px 0 #525252, 0 0 0 3px #1A1A1A, 0 0 0 5px #854369, 0 4px 12px #000; border-top-right-radius: 8px !important; border-top-left-radius: 8px !important; }
.toc ul { background-color: #1A1A1A !important; border: 1.5px solid #1A1A1A !important; box-shadow: inset 1px 0 0 #1A1A1A, inset 0 -1px 0 #525252, 0 0 0 3px #1A1A1A, 0 0 0 5px #854369, 0 4px 12px #000; border-bottom-right-radius: 8px !important; border-bottom-left-radius: 8px !important; }
.toc li { background-color: transparent !important; }
.toc ul ul { border: none !important; box-shadow: none !important; }
 
/* 분류 칸 */
.catlinks { background: #1A1A1A !important; border: 2px solid #1A1A1A !important; font-size: 9pt !important; box-shadow: inset 1px 0 0 #1A1A1A, inset 0 -1px 0 #000, 0 0 0 3px #1A1A1A, 0 0 0 5px #1A1A1A, 0 4px 12px #000; border-radius: 5px; padding: 0 !important; }
.catlinks ul { padding: 3px 7.5px !important; background-color: #1A1A1A !important; }
 
/* 편집 섹션 */
.mw-editsection { color: #b45c8f !important; float: right; font-weight: bold; }
 
/* 리스트 */
.liberty-content-main ul:not(#toc) { list-style-type: disc; list-style-image: none; }
.liberty-content-main ul ul:not(#toc) { list-style-type: circle; list-style-image: none; }
.liberty-content-main ul ul ul:not(#toc) { list-style-type: square; list-style-image: none; }
 
/* 반전 */
.invert { filter: invert(1); }
 
/* 외부링크 심볼 제거 */
a.external:before { display: none !important; }
 
/* 호버 애니메이션 */
.hover-gif-btn .gif-static,
.hover-gif-btn .gif-animated { transition: opacity 0.3s ease; }
.hover-gif-btn:not(:hover) .gif-animated { opacity: 0 !important; }
.hover-gif-btn:hover .gif-static { opacity: 0 !important; }
.hover-gif-btn:hover .gif-animated { opacity: 0.25 !important; }
.hover-gif-btn:hover .hover-flash-effect { animation: fast-flash 0.4s ease-out forwards; }
@keyframes fast-flash { 0% { opacity: 0.8; } 100% { opacity: 0; } }
.hover-new-img-layer { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1); opacity: 0; }
.hover-gif-btn:hover .hover-new-img-layer { transform: translateX(0); opacity: 0.25; }
 
/* drift 애니메이션 */
.drift-btn .drift-img-1 { opacity: 0.3; }
.drift-btn .drift-img-2 { opacity: 0; }
.drift-btn:hover .drift-img-1 { animation: driftLeftFade 12s linear infinite; }
.drift-btn:hover .drift-img-2 { animation: driftRightFade 12s linear infinite; }
@keyframes driftLeftFade {
  0%  { opacity: 0.3; transform: scale(1.15) translateX(15px); }
  40%  { opacity: 0.3; transform: scale(1.15) translateX(-15px); }
  50%  { opacity: 0;  transform: scale(1.15) translateX(-20px); }
  90%  { opacity: 0;  transform: scale(1.15) translateX(20px); }
  100% { opacity: 0.3; transform: scale(1.15) translateX(15px); }
}
@keyframes driftRightFade {
  0%  { opacity: 0;  transform: scale(1.15) translateX(-20px); }
  40%  { opacity: 0;  transform: scale(1.15) translateX(-20px); }
  50%  { opacity: 0.3; transform: scale(1.15) translateX(-15px); }
  90%  { opacity: 0.3; transform: scale(1.15) translateX(15px); }
  100% { opacity: 0;  transform: scale(1.15) translateX(20px); }
}

2026년 6월 3일 (수) 17:13 기준 최신판

/* =========================================
   COASTLINE: BLACK ICE - Common (Entry Point)
   ========================================= */

/*
Common.css는 CSS 로더 역할만 한다.

정리 원칙
-----------------------------------------
- 공통 토큰과 전역 테마: Theme.css
- 틀과 문서 컴포넌트: Template.css, Components.css
- 아이콘: Icons.css
- 레이아웃: Layout.css
- 편집기: Editor.css
- 다이얼로그: Dialogs.css
- 좌측 언어 다이얼: Layout.css + Common.js
- 대문 전용: MainPage.css
- 테스트 전용: Test.css

주의:
Test.css는 실험용이다.
*/

@import url('https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css');
@import url('/index.php?title=MediaWiki:Template.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:Icons.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:Layout.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:Theme.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:Editor.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:Components.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:Dialogs.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:MainPage.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:DevTools.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:AnecdoteViewer.css&action=raw&ctype=text/css');