Difference between revisions of "MediaWiki:Common.css"

From Teltonika Networks Wiki
(Created page with "→‎CSS placed here will be applied to all skins: @media screen and (max-width: 800px){ table.main-table{ width: 100% !important; display: table !...")
 
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
+
/** Čia įdėtas CSS bus taikomas visoms išvaizdoms */
@media screen and (max-width: 800px){
+
 
    table.main-table{
+
@media screen and (max-width: 800px) {
            width: 100% !important;
+
    table.main-table {
            display: table !important;
+
        width:100% !important;
 +
        display: table !important  
 
     }
 
     }
    .main-table td{
+
    .main-table td {
        text-align: center;
+
        text-align: center;
        display: block;
+
        display: block;
        margin-top: 10px;
+
        margin-top: 10px  
 
     }
 
     }
    .main-table td:nth-child(2n){
+
    .main-table td:nth-child(2n) {
        margin-bottom: 20px;
+
        margin-bottom: 20px  
 +
    }
 +
    #p-cactions-label {
 +
        outline: 0
 +
    }
 +
    div#mw-panel {
 +
        position: fixed !important;
 +
        background-color: #f6f6f6 !important;
 +
        width: 11em !important;
 +
        height: 100% !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
 +
    }
 +
    .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
 +
    }
 +
}
 +
 
 +
 
 +
@media screen and (max-width: 350px){
 +
    #left-navigation #p-namespaces ul li:first-of-type a:first-of-type {
 +
        display: none !important;
 +
    }
 +
}
 +
 
 +
@media screen and (min-width: 351px){
 +
    #left-navigation #p-namespaces ul li:first-of-type a:last-of-type {
 +
        display: none !important;
 
     }
 
     }
 
}
 
}

Revision as of 08:52, 26 March 2018

/** Čia įdėtas CSS bus taikomas visoms išvaizdoms */

@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;
         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 
    }
     .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 
    }
}


@media screen and (max-width: 350px){
    #left-navigation #p-namespaces ul li:first-of-type a:first-of-type {
        display: none !important;
    }
}

@media screen and (min-width: 351px){
    #left-navigation #p-namespaces ul li:first-of-type a:last-of-type {
        display: none !important;
    }
}