미디어위키:Vector.css
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* <pre><nowiki>*/
/**
*
* 특정 이름공간 문서의 배경을 하늘색, 토론 이름공간 문서의 배경을 노란색,
* 프로젝트 이름공간 문서의 배경을 초록색으로 지정합니다.
*
* 하늘색 적용 대상: 특수기능(-1), 파일(6), 미디어위키(8)
* 노란색 적용 대상: 토론(1), 사용자토론(3), 백괴게임토론(5), 파일토론(7),
* 미디어위키토론(9), 틀토론(11), 도움말토론(13), 분류토론(15)
* 초록색 적용 대상: 백괴게임(4), 도움말(12)
* 진한 초록색 적용 대상: 틀(10), 분류(14)
*
**/
.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 {
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: #f5fff5;
}
.ns-10 #content, .ns-9 #p-cactions li a:hover, .ns-9 #p-cactions li.selected a,
.ns-14 #content, .ns-14 #p-cactions li a:hover, .ns-14 #p-cactions li.selected a {
background-color: #deffde;
}
/* 이름공간의 번호, 명칭
'-2' : '미디어', '-1' : '특수기능'
'0' : '게임', '1' : '토론'
'2' : '사용자', '3' : '사용자토론'
'4' : '백괴게임', '5' : '백괴게임토론'
'6' : '파일', '7' : '파일토론'
'8' : '미디어위키', '9' : '미디어위키토론'
'10' : '틀', '11' : '틀토론'
'12' : '도움말', '13' : '도움말토론'
'14' : '분류', '15' : '분류토론'
*/
/* 인쇄용 문서에서 일부 객체를 숨김 */
@media print {
.editlink, .noprint, .metadata, .dablink {
display: none;
}
}
/* 로그인 상자의 모양 조절. */
form#userlogin {
float: left;
padding: 1em 1em .7em 1em;
background-color: #ffffe6;
border: 2px solid #fc6;
color: #000;
margin-right: 2em;
}
form#userlogin table {
background-color: #ffffe6;
color: #000;
}
form#userlogin2 {
float: left;
padding: 1em 1em .7em 1em;
background-color: #ffffe6;
border: 2px solid #fc6;
color: #000;
margin-right: 2em;
}
form#userlogin2 table {
background-color: #ffffe6;
color: #000;
}
/*</nowiki></pre>*/
/**
* 반응형 디자인 추가
* 단군조선의 홍익인간 정신을 본받아 모바일 사용자를 널리 이롭게 하고자 만든 백괴게임 반응형 css모듈입니다.
* 이 모듈을 삭제할 때 [[미디어위키:vector.js]]의 "사이드바 토글 버튼 추가" 모듈을 함께 삭제 해 주세요.
* 작성자: [[사용자:BANIP|BANIP]]
*/
@media (max-width: 800px) {
body{
overflow-x:hidden;
}
#content{
margin-left:0;
width:100%;
box-sizing: border-box;
}
/* 사용자 메뉴 레이아웃 조정 */
#p-personal > ul > li{
}
/* 사이드 바 */
#btn-panelopen{
height: 2.4em;
background: hsl(200,100%,50%) url(https://upload.wikimedia.org/wikipedia/commons/2/27/Menu%2C_Web_Fundamentals_%28White%29.svg) no-repeat center;
background-size:1.8em;
left: 0;
top: 0em;
position: absolute;
display: block!important;
border: 0;
margin: 0;
padding: 0em 0.2em;
color: #fff;
font-weight: bold;
width: 2.5em;
}
#mw-panel{
visibility: hidden;
transform: translate(-100%);
transition:0.2s transform cubic-bezier(0.55, 0.06, 0.68, 0.19);
z-index: 200;
top: 0!important;
padding-top: 0important;
overflow-y: auto;
overflow-x: hidden;
}
#mw-panel.visible{
visibility: visible;
height: 100%;
position: fixed;
transform: translate(0%);
}
#mw-panel, #p-logo{
background: #f6f6f6;
position: relative;
top: 0;
}
/* 사이드바 스크롤바 */
#mw-panel::-webkit-scrollbar{
background:hsl(220, 60%, 80%);
width:0.4em;
height:0.3em;
border-radius:50%;
}
#mw-panel::-webkit-scrollbar-thumb {
background:hsl(220, 60%, 50%);
}
#p-tb{
padding-bottom: 2em!important;
}
/* 검색바 가로폭 max로 설정 */
#right-navigation{
width: 100%;
float: unset;
}
#p-search{
background: hsl(200,100%,50%);
display: flex;
justify-content: center;
align-content: center;
display: block;
position: absolute;
width: 100%;
padding: 0.2em 0.2em;
margin: 0 auto;
left: 0;
float: unset;
box-sizing: border-box;
}
#simpleSearch{
margin-top: 0!important;
width: 100%!important;
float: unset;
margin: 0;
min-width: unset!important;
max-width: unset!important;
box-sizing: border-box;
padding: 1em;
background: #fff;
}
#searchform{
margin-top: 0!important;
flex: 1;
}
#searchInput{
top: 0;
width: 100%;
height: 100%;
padding: 0 0 0 1em!important;
position: absolute;
left: 0;
background: #fff!important;
}
/* 네비게이터 top 설정 */
#right-navigation, #left-navigation {
margin-top: 3.9em;
}
/* 검색바 top 설정 */
#p-search{
top:2em;
}
/* content top 설정 */
#content{
margin-top:1.35em;
}
/* 네비게이터 위치 상세 조정*/
#left-navigation {
float:unset;
margin-left:0;
}
#mw-head, #left-naviation, #p-namespaces > ul{
display:flex;
}
/* 공지사항 위치 조율 */
.mw-dismissable-notice-body{
margin:0!important;
}
.mw-dismissable-notice-close{
float:unset!important;
}
#localNotice > ul > li {
text-align: initial;
}
/* 사용자 전용 메뉴 화면 가로폭 좁으면 흘러넘치는 현상 수정 */
#p-personal > ul{
padding: 0;
width: 100%;
}
/* 공지사항 스타일링 */
#siteNotice{
position: relative;
border: 2px solid hsl(220, 60%, 50%);
border-radius: 0.6em 0.6em 0 0;
}
.mw-dismissable-notice-close{
background: hsl(220, 60%, 50%);
right: 0;
visibility: visible;
position: relative;
height: 2em;
color: transparent!important;
}
.mw-dismissable-notice-close a{
position: absolute;
right: 0;
background: hsl(220, 60%, 50%) url(https://upload.wikimedia.org/wikipedia/commons/c/c2/PlayStationX.svg) no-repeat center;
border-radius: 0 0.6em 0 0;
color: transparent!important;
font-size: 0em;
height: 100%;
width: 23px;
}
}
#btn-panelopen{
display:none;
}