미디어위키:Common.css

/** 이 CSS 설정은 모든 스킨에 적용됩니다 */
/* [[틀:아이콘]] 활성화 2023년 7월 17일 (월) 17:33 (KST) */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');

/**
 *
 * 특정 이름공간 문서의 배경을 하늘색, 토론 이름공간 문서의 배경을 노란색,
 * 프로젝트 이름공간 문서의 배경을 초록색으로 지정합니다.
 *
 * 하늘색 적용 대상: 특수기능(-1), 파일(6), 미디어위키(8)
 * 노란색 적용 대상:
 *     토론(1), 사용자토론(3), 리버티게임토론(5), 파일토론(7),
 *     미디어위키토론(9), 틀토론(11), 도움말토론(13), 분류토론(15), 모듈토론(829), 보존토론(3001)
 *     등 토론 이름공간
 * 초록색 적용 대상: 리버티게임(4), 도움말(12)
 * 진한 초록색 적용 대상: 틀(10), 분류(14), 모듈(828)
 * 연한 빨강색 적용 대상: 보존(3000)
 *
 **/
.ns-6 #content, .ns-6 #p-cactions li a:hover, .ns-6 #p-cactions li.selected a,
.ns-8 #content, .ns-8 #p-cactions li a:hover, .ns-8 #p-cactions li.selected a,
.ns--1 #content, .ns--1 #p-cactions li a:hover, .ns--1 #p-cactions li.selected a {
  background-color: #edf6fc;
}

/*.ns-1 #content, .ns-1 #p-cactions li a:hover, .ns-1 #p-cactions li.selected a,
.ns-3 #content, .ns-3 #p-cactions li a:hover, .ns-3 #p-cactions li.selected a,
.ns-5 #content, .ns-5 #p-cactions li a:hover, .ns-5 #p-cactions li.selected a,
.ns-7 #content, .ns-7 #p-cactions li a:hover, .ns-7 #p-cactions li.selected a,
.ns-9 #content, .ns-9 #p-cactions li a:hover, .ns-9 #p-cactions li.selected a,
.ns-11 #content, .ns-11 #p-cactions li a:hover, .ns-11 #p-cactions li.selected a,
.ns-13 #content, .ns-13 #p-cactions li a:hover, .ns-13 #p-cactions li.selected a,
.ns-15 #content, .ns-15 #p-cactions li a:hover, .ns-15 #p-cactions li.selected a,
.ns-829 #content, .ns-829 #p-cactions li a:hover, .ns-829 #p-cactions li.selected a,
.ns-3001 #content, .ns-3001 #p-cactions li a:hover, .ns-3001 #p-cactions li.selected a,*/
.ns-talk #content, .ns-talk #p-cactions li a:hover, .ns-talk #p-cactions li.selected a{
  background-color: #fafaee;
}

.ns-4 #content, .ns-4 #p-cactions li a:hover, .ns-4 #p-cactions li.selected a,
.ns-12 #content, .ns-12 #p-cactions li a:hover, .ns-12 #p-cactions li.selected a {
  background-color: #ededed; /* 구 #f5fff5; */
}

.ns-10 #content, .ns-10 #p-cactions li a:hover, .ns-10 #p-cactions li.selected a,
.ns-14 #content, .ns-14 #p-cactions li a:hover, .ns-14 #p-cactions li.selected a,
.ns-828 #content, .ns-828 #p-cactions li a:hover, .ns-828 #p-cactions li.selected a{
  background-color: #deffde;
}

.ns-3000 #content, .ns-3000 #p-cactions li a:hover, .ns-3000 #p-cactions li.selected a {
  background-color: #fff0f0;
}

/* 이름공간의 번호, 명칭
 '-2' : '미디어', '-1' : '특수기능'
 '0' : '게임', '1' : '토론'
 '2' : '사용자', '3' : '사용자토론'
 '4' : '백괴게임', '5' : '백괴게임토론'
 '6' : '파일', '7' : '파일토론'
 '8' : '미디어위키', '9' : '미디어위키토론'
 '10' : '틀', '11' : '틀토론'
 '12' : '도움말', '13' : '도움말토론'
 '14' : '분류', '15' : '분류토론'
 '828' : '모듈', '829' : '모듈토론'
 '3000': '보존', '3001' : '보존토론'
*/

/* 취소선. del은 하지 않겠음 */
s, strike{color:gray;}
s a, s a:visited{
    color: #7f7ff6;
    text-decoration: line-through;
}

/* 새내기들을 위해 윗부분 '편집' 버튼의 글씨를 언제나 굵게 */
#ca-edit a {
  font-weight: bold !important;
}

/*
 20230826 일반 문서 상단의 사이트 슬로건 삭제 [[리버티게임:오락실/2023년_8월#리버티게임 사이트 타이틀에 붙는 부제를 삭제하려고 합니다.]]
 문서 제목 밑 모양 조절 
#siteSub {
    display: inline;
    font-size: 100%;
    font-weight: normal;
}
*/
#bodyContent #siteSub a {
  color: #000;
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  padding-right: 0;
}

/* 2단계 글자를 굵게 */
h2 { 
    font-weight: bold;
}

/* 저장 글자를 굵게 */
#wpSave {
font-weight: bold;
}

/* 선택된 항목에 배경색 씌우기 */
ol.references > li:target, sup.reference:target {
  background-color: #DEF;
}

/* pre 상자 */
pre {
padding: 1em;
border: 1px solid #003399;
color: #003399;
background-color: #F4F6FE;
line-height: 1.1em;
overflow: auto;
}

/* 편집 요약, 이유의 모양 설정.
 (기울임 대신 글자 크기 약간 작게 하여 구별) */
.comment {
  font-style: normal !important;
  font-size: 9pt;
}

/* 최근 바뀜에서의 편집 관련 표시 */
.minor {
  color: gray;
}
.newpage {
  color: green;
}
.bot {
  color: #3CB371;
}

/* 최근 바뀜에서 문서 분량 변경에 색깔 넣기
 (증가는 초록색 감소는 빨간색) */
.mw-plusminus-pos {
  color:green;
}
.mw-plusminus-neg {
  color:red;
}

/* 문서 목록과 주시문서 목록에서 넘겨주기의 모양 설정
 (연한 회색) */
.allpagesredirect a,
.watchlistredir a  {
  color:#888888;
}

/* 차이 보기에서 변화한 부분 모양 조절.
  (회색 점선의 사각형으로 둘러쌈)  */ 
.diffchange {
  background-color: inherit;
  border: 1px dotted #888888;
}

/* toccolours 클래스: 일부 틀의 디자인에 사용됨 */
.toccolours {
   border:1px solid #aaaaaa;
   background-color: #f9f9f9;
   padding: 5px;
   font-size: 95%;
}

.collapseButton {      /* 'show'/'hide' buttons created dynamically */
  float: right;      /* by the CollapsibleTables javascript in  */
  font-weight: normal;   /* [[MediaWiki:Common.js]]are styled here  */
  text-align: right;   /* so they can be customised.        */
  width: auto;
}
/* 표 문법 (출처 : 한국어 위키백과) */
/* let's make a class that deals with tables better 
   Any complaints, please message Ta bu shi da yu */
table.wikitable,
table.prettytable {
  margin: 1em 1em 1em 0;
  background: #f9f9f9;
  border: 1px #aaaaaa solid;
  border-collapse: collapse;
}
 
table.wikitable th, table.wikitable td,
table.prettytable th, table.prettytable td {
  border: 1px #aaaaaa solid;
  padding: 0.2em;
}
 
table.wikitable th,
table.prettytable th {
  background: #f2f2f2;
  text-align: center;
}
 
table.wikitable caption,
table.prettytable caption {
  margin-left: inherit;
  margin-right: inherit;
  font-weight: bold;
}
 
/* Merge template style */
.messagebox {
   border: 1px solid #aaaaaa;
   background-color: #f9f9f9;
   width: 85%;
   margin: 0 auto 1em auto;
   padding: .2em;
   text-align: justify;
   font-size: 80%;
}
.messagebox.merge {
   border: 1px solid #cf9fff;
   background-color: #f5edf5;
   text-align: center;
}
.messagebox.cleanup {
   border: 1px solid #9f9fff;
   background-color: #efefff;
   text-align: center;
}
.messagebox.standard-talk {
   border: 1px solid #c0c090;
   background-color: #f8eaba;
}
 
.infobox {
   border: 1px solid #aaaaaa;
   background-color: #f9f9f9;
   margin-bottom: 0.5em;
   margin-left: 1em; 
   padding: .2em;
   float: right;
   clear: right;
}
.infobox td,
.infobox th {
   vertical-align: top;
}
.infobox caption {
   font-size: larger;
   margin-left: inherit;
}
.infobox.bordered {
   border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
   border: 1px solid #aaaaaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
   border: 0;
}
.infobox.sisterproject {
   width: 20em;
   font-size: 90%;
}
 
@media print {
    .infobox.sisterproject {
        display: none;
    }
}
 
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
   border: 0;
   border-top: 1px solid #aaa;
   border-right: 1px solid #aaa;
}
 
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
   border: 0;
   border-right: 1px solid #aaa;
}
 
/* "공지"용 스타일 */
.notice {
    margin: 1em;
    padding: 0.2em;
}

/* Removes useless links from printout */
@media print {
    #privacy, #about, #disclaimer {display:none;}
}

/* [[MediaWiki:Edittools]] 편집 입력 도구의 버튼 */
.my-buttons a {
  color: #005896;
  font-weight: bold;
  font-size: 0.9em;
  text-decoration: none;
  padding: 0 0.1em 0.1em 0.1em;
}
.my-buttons a:hover, .my-buttons a:active {
  background-color: #bbccdd !important;
}
#editpage-specialchars a {
  text-decoration: none;
}
#editpage-specialchars a:hover {
  text-decoration: underline;
}

.censored:hover {
	color: inherit;
	background-color: inherit !important;
}

/* 숨겨진 내용 보이기 -Dawg */
.sighidden { display: none; }
.sigexpand:hover .sighidden { display: inline; }
.sigclick:active .sighidden { display: inline; }

#embedFlashDoc { display: none; }

/* 최근 바뀜 등에서 태그를 눈에 띄게 표시 */
.mw-tag-markers {
  font-weight: bold;
}

.references-small { font-size: 70%;}

/* 모바일 환경에서 알림창 폭을 화면 폭에 맞추기 */
@media(max-width: 530px) {
    .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
        left: 0 !important;
    }
    .mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup {
        width: min(100vw, 500px) !important;
    }
    .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body {
        width: 100% !important;
    }
}

/* 모바일 환경에서 최근 바뀜의 들여쓰기 줄이기 */
@media(max-width: 520px) {
    table.mw-enhanced-rc td.mw-enhanced-rc-nested {
        padding-left: 0;
    }
    .client-js .mw-changeslist ul, .client-js .mw-changeslist table.mw-enhanced-rc {
        margin-left: 0;
    }
}
/* 문서 내부의 큰 이미지의 경우 모바일환경에서 화면밖을 삐져나가는 현상 수정 --[[사용자:BANIP|BANIP]] ([[사용자토론:BANIP|토론]]) 2023년 7월 8일 (토) 18:50 (KST) */
.mw-parser-output .image img{
    max-width:100%;
    height:auto;
}

/* 공지사항 스타일링 [[사용자:BANIP|BANIP]] ([[사용자토론:BANIP|토론]]) 2023년 7월 10일 (월) 22:10 (KST) */
#siteNotice{ 
	text-align:left;
    margin:0;
}

#siteNotice #localNotice{
	margin: 8px 0;
	padding-bottom: 1em;
	border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}
#siteNotice ul{	list-style: none; }
#siteNotice ul{	margin:0.3em 0 0 2em;}
#siteNotice ul li{ line-height: 1.4em; margin: 0.6em 0;}
#siteNotice ul li img{ position: absolute; left: 0px;}

/* DismissableSiteNotice(공지사항 숨기기 기능) 스타일링 2023년 7월 12일 (수) 10:54 (KST) */
.mw-dismissable-notice{ position: relative; }
.mw-dismissable-notice .mw-dismissable-notice-close{ bottom: 5px; position: absolute; right: 0; }
.mw-dismissable-notice .mw-dismissable-notice-body{ margin:0; }

/* 다크모드일시 굴림폰트 기본적용 --[[사용자:BANIP|BANIP]] ([[사용자토론:BANIP|토론]]) 2023년 7월 26일 (수) 17:52 (KST) */
html.client-darkmode, html.client-darkmode body{
    font-family: 굴림;
}

/* 자주 사용되는 애니메이션 추가 --[[사용자:BANIP|BANIP]] ([[사용자토론:BANIP|토론]]) 2023년 9월 5일 (화) 15:04 (KST) */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 반투명 로고 이미지 정의 */
.image > .logo-ht {
    opacity: 36%;
    filter: grayscale(1);
}

/* [[틀:알림 상자]] 재리뉴얼 — {{사용자:hsl0/서명}} 2024년 10월 22일 (화) 05:20 (KST) */
.ambox {
    width: clamp(80%, 40em, calc(100% - 10px));
    
    margin: 3px auto;
    padding: 5px;
    gap: 5px;
    
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "ambox-title      ambox-title  ambox-title"
        "ambox-image-left ambox-detail ambox-image-right";
    
    text-align: center;
    
    background-color: #f5f5f5;
    box-shadow: 0 0 6px 1px #c8ccd1;
}
.ambox:not(:has(.ambox-title)) {
    grid-template-areas:
        "ambox-image-left ambox-detail ambox-image-right";
}
.ambox-title {
    width: calc(100% - 10px);
    
    padding: 5px;
    
    grid-area: ambox-title;
    
    background-color: gray;
    color: white;
    font-weight: bold;
}
.ambox-title:empty {
    padding: 4px;
}
.ambox-detail {
    width: 100%;
    grid-area: ambox-detail;
    align-self: center;
}
.ambox-image {
    min-width: 60px;
    place-self: center;
}
.ambox-image-left {grid-area: ambox-image-left;}
.ambox-image-right {grid-area: ambox-image-right}