미디어위키:Vector.js

/* 이 자바스크립트 설정은 벡터 스킨을 사용하는 사용자에게 적용됩니다 */

/**
 * 반응형 디자인 추가
 * 단군조선의 홍익인간 정신을 본받아 모바일 사용자를 널리 이롭게 하고자 만든 백괴게임 반응형 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/8/8d/VisualEditor_-_Icon_-_Menu.svg) no-repeat center;
        left: 0;
        top: 0em;
        position: absolute;
        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: 1;
    }

    #mw-panel.visible{
        visibility: visible;
        height: 100%;
        position: fixed;
        transform: translate(0%);
    }

    #mw-panel, #p-logo{
        background: #f6f6f6;
    }    


    /* 검색바 가로폭 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(200,100%,50%);
    }

    .mw-dismissable-notice-close{
        background: hsl(200,100%,50%);
        right: 0;
        visibility: visible;
        position: relative;
        height: 2em;
        color: transparent!important;
    }

    .mw-dismissable-notice-close a{
        position: absolute;
        right: 0;
        background: hsl(200,100%,75%) url(https://upload.wikimedia.org/wikipedia/commons/c/c2/PlayStationX.svg) no-repeat center;
        color: transparent!important;
        font-size: 0em;
        height: 100%;
        width: 23px;
    }
}
/**
  * 사이드바 토글 버튼 추가
  * [[미디어위키:vector.css]]의 `반응형 디자인 추가` 모듈의 의존성 모듈입니다.
  * 모바일 환경에서 왼쪽 사이드바를 접었다 폈다 해주는 버튼을 추가합니다..
  * 작성자: [[사용자:BANIP|BANIP]]
*/
function addSideBarOpenButton(){
  var $btn = $("<button id='btn-panelopen'></button>");
  var $wrap = $("#mw-navigation");
  var $content = $("#content");
  var $sidebar = $("#mw-panel");

  $wrap.append($btn);
  $btn.on("click",function(){ $sidebar.addClass("visible") });
  $content.on("click",function(){ $sidebar.removeClass("visible") });
}
$( addSideBarOpenButton )