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

편집 요약 없음
편집 요약 없음
 
(같은 사용자의 중간 판 38개는 보이지 않습니다)
52번째 줄: 52번째 줄:
}
}


/* =========================================================
.mw-custom-collapse-viewport {
  사용자 정의 펼치기 · 접기
overflow: hidden;
  ========================================================= */
width: 100%;
}


/* =========================================================
.mw-custom-collapse-viewport-inner {
  Animated Collapse / Expand
width: 100%;
  MediaWiki:Common.css
}
  ========================================================= */


/* 부드러운 접기/펼치기 */
.smooth-collapse {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s ease;
}


/* ---------------------------------------------------------
.smooth-collapse > .smooth-collapse-inner {
  1. 펼치기 / 접기 버튼
    overflow: hidden;
  --------------------------------------------------------- */
    min-height: 0;
}


.animated-toggle {
.smooth-collapse.is-collapsed {
     display: block;
     grid-template-rows: 0fr;
    width: 100%;
}


     box-sizing: border-box;
/* 선택사항: 내용도 살짝 페이드 */
.smooth-collapse > .smooth-collapse-inner {
     opacity: 1;
    transition: opacity 0.25s ease;
}


     cursor: pointer;
.smooth-collapse.is-collapsed > .smooth-collapse-inner {
    user-select: none;
     opacity: 0;
}


     text-align: center;
/* 펼치기 · 접기 내부 표의 좌우 외곽선 제거 */
.mw-collapsible-content > table {
    border-left: none !important;
     border-right: none !important;
}


     outline: none;
.mw-collapsible-content > table > tbody > tr > :first-child {
     border-left: none !important;
}


    transition:
.mw-collapsible-content > table > tbody > tr > :last-child {
        opacity 0.2s ease,
    border-right: none !important;
        background-color 0.2s ease;
}
}


:root {
--fbnw-theme-010: #101012;
--fbnw-theme-020: #202022;
--fbnw-theme-030: #303032;
--fbnw-theme-040: #404042;
--fbnw-theme-050: #505052;
}


/* 마우스 오버 */
html.liberty-dark-mode .dark\:fbnw-theme-010,
.animated-toggle:hover {
body.liberty-dark-mode .dark\:fbnw-theme-010 {
    opacity: 0.75;
background: var(--fbnw-theme-010) !important;
}
}


html.liberty-dark-mode .dark\:fbnw-theme-020,
body.liberty-dark-mode .dark\:fbnw-theme-020 {
background: var(--fbnw-theme-020) !important;
}


/* 키보드 접근성 */
html.liberty-dark-mode .dark\:fbnw-theme-030,
.animated-toggle:focus-visible {
body.liberty-dark-mode .dark\:fbnw-theme-030 {
    outline: 2px solid currentColor;
background: var(--fbnw-theme-030) !important;
    outline-offset: 2px;
}
}


html.liberty-dark-mode .dark\:fbnw-theme-040,
body.liberty-dark-mode .dark\:fbnw-theme-040 {
background: var(--fbnw-theme-040) !important;
}


/* ---------------------------------------------------------
html.liberty-dark-mode .dark\:fbnw-theme-050,
  2. 펼쳐지는 전체 영역
body.liberty-dark-mode .dark\:fbnw-theme-050 {
  --------------------------------------------------------- */
background: var(--fbnw-theme-050) !important;
}
/* 실제 문서에서 사용하는 유틸리티 */
.inline-block {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}


.animated-content {
.flex {
    display: grid;
display: flex;
}


    /*
.flex-col {
    * 닫힌 상태
flex-direction: column;
    *
}
    * 0fr → 높이 0
    */
    grid-template-rows: 0fr;


    opacity: 0;
.w-screen {
 
width: 100%;
    transform: translateY(-8px);
}


    visibility: hidden;


    /*
/* 접혀 있을 때는 2개가 좌우로 */
    * 애니메이션
.inline-block {
    */
width: 49%;
    transition:
        grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.4s;
}
}




/* ---------------------------------------------------------
/* 자기 안의 접기 영역이 펼쳐지면 전체 폭 */
  3. 실제 내용 영역
.inline-block:has(
  --------------------------------------------------------- */
.mw-collapsible:not(.mw-collapsed)
 
) {
.animated-content-inner {
width: 100%;
    min-height: 0;
}


    overflow: hidden;


    /*
/* 첫 번째 영역이 펼쳐졌을 경우,
    * 일부 브라우저에서 큰 표 / 이미지가
  바로 뒤의 두 번째 영역도 다음 줄 전체 폭으로 */
    * 펼쳐질 때 생기는 레이아웃 문제 방지
.inline-block:has(
    */
.mw-collapsible:not(.mw-collapsed)
    min-width: 0;
) + .inline-block {
width: 100%;
}
}




/* ---------------------------------------------------------
/* 펼쳐지는 실제 내용도 전체 폭 */
  4. 열린 상태
.inline-block .mw-collapsible,
  --------------------------------------------------------- */
.inline-block .mw-collapsible-content {
width: 100%;
box-sizing: border-box;
}


.animated-content.is-open {
/* dark:!border-y-[색상] 형태 전부 */
    /*
html.liberty-dark-mode [class*="dark:!border-y-["],
    * 0fr → 1fr
body.liberty-dark-mode [class*="dark:!border-y-["] {
    *
border-top-color: #444444 !important;
    * 내용의 실제 높이에 맞춰 자동으로 펼쳐짐
border-bottom-color: #444444 !important;
    */
}
    grid-template-rows: 1fr;


    opacity: 1;
/* dark:!border-r-[색상] 형태 전부 */
html.liberty-dark-mode [class*="dark:!border-r-["],
body.liberty-dark-mode [class*="dark:!border-r-["] {
border-right-color: #444444 !important;
}


    transform: translateY(0);
/* 기본 표시 상태 */
.inline {
display: inline;
}


    visibility: visible;
.hidden {
display: none;
}


    transition:
/* Liberty 다크모드 */
        grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
html.liberty-dark-mode .dark\:hidden,
        opacity 0.3s ease,
body.liberty-dark-mode .dark\:hidden {
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
display: none !important;
        visibility 0s linear 0s;
}
}


html.liberty-dark-mode .dark\:inline,
body.liberty-dark-mode .dark\:inline {
display: inline !important;
}


/* ---------------------------------------------------------
/* 접이식 영역 내부 표의 맨 아래 선 제거 */
  5. 펼치기 안에 들어가는 이미지
.mw-collapsible-content > table.wikitable {
  --------------------------------------------------------- */
border-bottom: 0 !important;
 
.animated-content img {
    max-width: 100%;
}
}


 
.mw-collapsible-content > table.wikitable > tbody > tr:last-child > th,
/* ---------------------------------------------------------
.mw-collapsible-content > table.wikitable > tbody > tr:last-child > td {
  6. 펼치기 안에 들어가는 표
border-bottom: 0 !important;
  --------------------------------------------------------- */
 
.animated-content table {
    max-width: 100%;
}
}


 
.fbn-terms li {
/* ---------------------------------------------------------
     margin-bottom: 0.2em;
  7. 중앙 정렬 유틸리티
  --------------------------------------------------------- */
 
.text-center {
     text-align: center;
}
}


 
.fbn-terms > ul > li > ol {
/* ---------------------------------------------------------
     margin-top: 0.2em;
  8. 사용자가 OS에서 애니메이션 감소를 설정한 경우
  --------------------------------------------------------- */
 
@media (prefers-reduced-motion: reduce) {
 
     .animated-toggle,
    .animated-content {
        transition: none !important;
    }
 
}
}

2026년 8월 22일 (토) 17:12 기준 최신판

.wikitable td {
    position: relative !important; /* 내부 요소 정렬 기준 */
    max-width: 100% !important;
    overflow: hidden !important;
    table-layout: fixed
}

.wikitable td table {
    width: 100% !important; /* 부모 td의 크기에 맞춤 */
    max-width: 100% !important;
}

.nob {
	margin-top: 4px;
	margin-bottom: 4px;
}

.ind {
	font-size: 14px;
	color : #4a4a4a;
	margin-left: 18px;
	margin-top: 4px;
	margin-bottom: 4px;
}

.nob2 {
	margin-top: -3px;
}

.mw-headline  #toc a {
  margin-right: 6px;
}

li > ul {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

li > ul > li {
	  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.mw-parser-output > h2, h3 {
  margin-top: 32px !important;
}

h2 .mw-headline a[href="#toc"],
h3 .mw-headline a[href="#toc"],
h4 .mw-headline a[href="#toc"] {
  margin-right: 5px;
}

.mw-custom-collapse-viewport {
	overflow: hidden;
	width: 100%;
}

.mw-custom-collapse-viewport-inner {
	width: 100%;
}

/* 부드러운 접기/펼치기 */
.smooth-collapse {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s ease;
}

.smooth-collapse > .smooth-collapse-inner {
    overflow: hidden;
    min-height: 0;
}

.smooth-collapse.is-collapsed {
    grid-template-rows: 0fr;
}

/* 선택사항: 내용도 살짝 페이드 */
.smooth-collapse > .smooth-collapse-inner {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.smooth-collapse.is-collapsed > .smooth-collapse-inner {
    opacity: 0;
}

/* 펼치기 · 접기 내부 표의 좌우 외곽선 제거 */
.mw-collapsible-content > table {
    border-left: none !important;
    border-right: none !important;
}

.mw-collapsible-content > table > tbody > tr > :first-child {
    border-left: none !important;
}

.mw-collapsible-content > table > tbody > tr > :last-child {
    border-right: none !important;
}

:root {
	--fbnw-theme-010: #101012;
	--fbnw-theme-020: #202022;
	--fbnw-theme-030: #303032;
	--fbnw-theme-040: #404042;
	--fbnw-theme-050: #505052;
}

html.liberty-dark-mode .dark\:fbnw-theme-010,
body.liberty-dark-mode .dark\:fbnw-theme-010 {
	background: var(--fbnw-theme-010) !important;
}

html.liberty-dark-mode .dark\:fbnw-theme-020,
body.liberty-dark-mode .dark\:fbnw-theme-020 {
	background: var(--fbnw-theme-020) !important;
}

html.liberty-dark-mode .dark\:fbnw-theme-030,
body.liberty-dark-mode .dark\:fbnw-theme-030 {
	background: var(--fbnw-theme-030) !important;
}

html.liberty-dark-mode .dark\:fbnw-theme-040,
body.liberty-dark-mode .dark\:fbnw-theme-040 {
	background: var(--fbnw-theme-040) !important;
}

html.liberty-dark-mode .dark\:fbnw-theme-050,
body.liberty-dark-mode .dark\:fbnw-theme-050 {
	background: var(--fbnw-theme-050) !important;
}
/* 실제 문서에서 사용하는 유틸리티 */
.inline-block {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.w-screen {
	width: 100%;
}


/* 접혀 있을 때는 2개가 좌우로 */
.inline-block {
	width: 49%;
}


/* 자기 안의 접기 영역이 펼쳐지면 전체 폭 */
.inline-block:has(
	.mw-collapsible:not(.mw-collapsed)
) {
	width: 100%;
}


/* 첫 번째 영역이 펼쳐졌을 경우,
   바로 뒤의 두 번째 영역도 다음 줄 전체 폭으로 */
.inline-block:has(
	.mw-collapsible:not(.mw-collapsed)
) + .inline-block {
	width: 100%;
}


/* 펼쳐지는 실제 내용도 전체 폭 */
.inline-block .mw-collapsible,
.inline-block .mw-collapsible-content {
	width: 100%;
	box-sizing: border-box;
}

/* dark:!border-y-[색상] 형태 전부 */
html.liberty-dark-mode [class*="dark:!border-y-["],
body.liberty-dark-mode [class*="dark:!border-y-["] {
	border-top-color: #444444 !important;
	border-bottom-color: #444444 !important;
}

/* dark:!border-r-[색상] 형태 전부 */
html.liberty-dark-mode [class*="dark:!border-r-["],
body.liberty-dark-mode [class*="dark:!border-r-["] {
	border-right-color: #444444 !important;
}

/* 기본 표시 상태 */
.inline {
	display: inline;
}

.hidden {
	display: none;
}

/* Liberty 다크모드 */
html.liberty-dark-mode .dark\:hidden,
body.liberty-dark-mode .dark\:hidden {
	display: none !important;
}

html.liberty-dark-mode .dark\:inline,
body.liberty-dark-mode .dark\:inline {
	display: inline !important;
}

/* 접이식 영역 내부 표의 맨 아래 선 제거 */
.mw-collapsible-content > table.wikitable {
	border-bottom: 0 !important;
}

.mw-collapsible-content > table.wikitable > tbody > tr:last-child > th,
.mw-collapsible-content > table.wikitable > tbody > tr:last-child > td {
	border-bottom: 0 !important;
}

.fbn-terms li {
    margin-bottom: 0.2em;
}

.fbn-terms > ul > li > ol {
    margin-top: 0.2em;
}