MediaWiki:Common.css: Difference between revisions

Revision as of 09:16, 26 March 2018

@media screen and (max-width: 800px) {
    table.main-table {
        width:100% !important;
        display: table !important
    }

    .main-table td {
        text-align: center;
        display: block;
        margin-top: 10px
    }

    .main-table td:nth-child(2n) {
        margin-bottom: 20px
    }

    #p-cactions-label {
        outline: 0
    }

    div#mw-panel {
        position: fixed !important;
        background-color: #f6f6f6 !important;
        width: 11em !important;
        height: 100% !important;
        top: 0 !important;
        z-index: 99999 !important;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
        transition: transform 0.2s
    }

#p-logo {
    position: relative !important;
    top: 0px !important;
    left: 0;
}


    .mw-body {
        margin-left: 0 !important
    }

    div#mw-panel {
        padding-top: 10px;
        transform: translateX(-100%)
    }

    div#mw-panel.open {
        transform: translateX(0%)
    }

    #left-navigation {
        margin-left: 0 !important
    }

    #p-personal ul {
        padding-left: 50px !important
    }

    div#footer {
        margin-left: 0
    }

    #menu-toggle {
        cursor: pointer;
        position: absolute;
        top: 10px;
        left: 15px;
        z-index: 99999
    }

    #menu-toggle .bar1,#menu-toggle .bar2,#menu-toggle .bar3 {
        width: 28px;
        height: 4px;
        background-color: #6c6c6c;
        margin: 5px 0;
        transition: 0.4s
    }

    div#mw-panel #menu-toggle .bar1,div#mw-panel #menu-toggle .bar2,div#mw-panel #menu-toggle .bar3 {
        width: 28px;
        height: 4px;
        background-color: #6c6c6c;
        margin: 7px 0;
        transition: 0.4s
    }

    div#mw-panel #menu-toggle .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px,6px);
        transform: rotate(-45deg) translate(-9px,6px)
    }

    div#mw-panel #menu-toggle .bar2 {
        opacity: 0
    }

    div#mw-panel #menu-toggle .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px,-8px);
        transform: rotate(45deg) translate(-8px,-8px)
    }

    #p-views {
        display: none !important
    }

    #p-cactions .menu ul {
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    #p-cactions .menu ul > li {
        -moz-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }

    #p-cactions .menu ul > li:nth-last-child(2),#p-cactions .menu ul > li:last-child {
        display: none !important
    }

    .thumb.tright {
        width: 100%;
        display: block;
        margin: 0 !important
    }
}

@media screen and (max-width: 450px) {
    #p-namespaces #ca-talk {
        display:none !important
    }

    #p-cactions .menu ul > li:nth-last-child(1) {
        display: block !important
    }
}

@media screen and (min-width: 801px) {
    #p-cactions .menu li:nth-child(4),#p-cactions .menu li:nth-child(5),#p-cactions .menu li:nth-child(6),#p-cactions .menu li:nth-child(7),#p-cactions .menu li:nth-child(8),#p-cactions .menu li:nth-child(9) {
        display:none !important
    }
}