Jump to content

MediaWiki:Common.css: Difference between revisions

From SOJI ELECTRONICS
No edit summary
Tag: Reverted
No edit summary
Tags: Manual revert Reverted
Line 1: Line 1:
/* =========================================
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Oswald:400,700');
  SIDEBAR CATEGORY TREE
  ========================================= */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
body { font-family: "Open Sans", "Oswald", sans-serif; }


/* Font cho toàn tree */
@media screen and (max-width: 800px) {
.vector-main-menu #p-CATEGORIES,
    table.main-table {
.vector-main-menu .CategoryTreeTag,
        width:100% !important;
.mw-portlet-CATEGORIES,
        display: table !important;
.CategoryTreeTag {
        padding: 0px !important;
     font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif !important;
    }
     padding: 4px 0;
 
}
    .main-table td {
.vector-main-menu .CategoryTreeTag *,
        text-align: center;
.CategoryTreeTag * {
        display: block;
     font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif !important;
        margin-top: 10px
}
    }
    table.main-table.w-100 td {
        display: inline-block;
        width: 49.5% !important;
    }
    table.main-table.w-100 table {
        display: table;
    }
    table.main-table.w-100 table td {
        display: block;
        width: 100% !important;
    }
    .main-table td:nth-child(2n) {
        margin-bottom: 20px
    }
 
    #p-cactions-label {
        outline: 0
     }
 
    #p-logo {
        position: relative !important;
        top: 0px !important;
        left: 0
    }
 
    .mw-body {
        margin-left: 0 !important
    }
 
 
    #left-navigation {
        margin-left: 0 !important
     }
 
    #p-personal ul {
        padding-left: 50px !important
    }
 
    div#footer {
        margin-left: 0
    }
 
    #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
    }
 
 
    div.thumb.tright {
        float: none;
        display: block;
        width: 100%;
        max-width: 250px;
        margin: 0 !important;
    }
 
    #mw-imagepage-section-filehistory table{
        overflow: auto;
        border: 0;
        display: block;
    }


/* Parent — không clip */
.fullImageLink img {
.vector-main-menu,
        width:100%;
.vector-main-menu .mw-portlet-body,
        height: auto
.mw-portlet-CATEGORIES,
    }
.mw-portlet-CATEGORIES .mw-portlet-body,
#p-CATEGORIES {
    overflow: visible !important;
}


/* Section */
    p img {
.vector-main-menu .CategoryTreeSection,
        width: 100%;
.CategoryTreeSection {
        height: auto;
    list-style: none;
        margin: 0
    padding: 0;
    }
    margin: 0;
}


/* Item — flex row, mũi tên qua phải */
    div.thumbinner {
.vector-main-menu .CategoryTreeItem,
        width: 100% !important
#p-CATEGORIES .CategoryTreeItem,
     }
.CategoryTreeItem {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 6px 12px 6px 0 !important;
    margin: 0 !important;
     overflow: visible !important;
}


/* Không highlight nền khi hover */
    div.thumbinner img {
.vector-main-menu .CategoryTreeItem:hover,
        width: 100%;
.CategoryTreeItem:hover {
        height: auto
     background-color: transparent !important;
     }
}


/* Text label */
.vector-main-menu .CategoryTreeItem > bdi,
.CategoryTreeItem > bdi {
    flex: 1 !important;
    order: 1 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.vector-main-menu .CategoryTreeItem > bdi a,
.CategoryTreeItem > bdi a {
    color: #2c3993 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    word-wrap: break-word;
}
}


/* Hover — gạch dưới text */
.CategoryTreeItem > bdi a:hover {
    color: #2c3993 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}


/* Active page — gạch dưới */
@media screen and (max-width: 500px) {
.CategoryTreeItem > bdi a.selflink,
    table.main-table.w-100 td {
.CategoryTreeItem > bdi a.mw-selflink {
        display: block;
    text-decoration: underline !important;
        width: 100% !important;
    text-underline-offset: 3px !important;
     }
     font-weight: 400 !important;
}
}


/* Bullet container */
@media screen and (max-width: 450px) {
.vector-main-menu .CategoryTreeBullet,
    #mw_metadata {
.CategoryTreeBullet {
        width: 100% !important
    order: 2 !important;
     }
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    width: 20px !important;
     height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    position: relative !important;
}


/* Toggle */
    #p-namespaces #ca-talk {
.vector-main-menu .CategoryTreeToggle,
        display: none !important
.CategoryTreeToggle {
     }
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background: none !important;
    text-indent: -9999px !important;
    font-size: 0 !important;
    position: relative !important;
    cursor: pointer !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
     overflow: visible !important;
}


/* Ẩn content gốc */
    #p-cactions .menu ul > li:nth-last-child(1) {
.CategoryTreeToggle * {
        display: block !important
    display: none !important;
    }
}
}


/* Chevron > — collapsed: chỉ sang phải */
@media screen and (min-width: 801px) {
.CategoryTreeToggle::before {
     #p-cactions .menu li:nth-child(10),#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) {
     content: '' !important;
        display:none !important
    display: block !important;
     }
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 2px solid #2c3993 !important;
    border-bottom: 2px solid #2c3993 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    transform: translate(-65%, -50%) rotate(-45deg) !important;
     transition: transform 0.2s ease !important;
}
}


/* Chevron v — expanded: chỉ xuống */
@media screen and (max-width: 350px) {
.CategoryTreeToggle[aria-expanded="true"]::before {
    #left-navigation #p-namespaces ul li:first-of-type a:first-of-type {
    transform: translate(-50%, -65%) rotate(45deg) !important;
        display:none !important
    }
}
}


/* Children — indent + viền trái */
@media screen and (min-width: 351px) {
.vector-main-menu .CategoryTreeChildren,
     #left-navigation #p-namespaces ul li:first-of-type a:last-of-type {
.CategoryTreeChildren {
        display:none !important
     margin-left: 0 !important;
     }
    padding-left: 8px !important;
    padding-right: 0 !important;
    border-left: 1px solid #d4dae8 !important;
     overflow: visible !important;
}
}


/* Cấp sâu — chữ size đều, không nhỏ đi */
#ca-talk { display: none !important; }
.CategoryTreeChildren .CategoryTreeChildren .CategoryTreeItem > bdi a {
    font-size: 14px !important;
    font-weight: 400 !important;
}

Revision as of 04:32, 11 May 2026

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Oswald:400,700');

body { font-family: "Open Sans", "Oswald", sans-serif; }

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

    .main-table td {
        text-align: center;
        display: block;
        margin-top: 10px
    }
    table.main-table.w-100 td {
        display: inline-block;
        width: 49.5% !important;
    }
    table.main-table.w-100 table {
        display: table;
    }
    table.main-table.w-100 table td {
        display: block;
        width: 100% !important;
    }
    .main-table td:nth-child(2n) {
        margin-bottom: 20px
    }

    #p-cactions-label {
        outline: 0
    }

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

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


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

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

    div#footer {
        margin-left: 0
    }

    #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
    }


    div.thumb.tright {
        float: none;
        display: block;
        width: 100%;
        max-width: 250px;
        margin: 0 !important;
    }

    #mw-imagepage-section-filehistory table{
        overflow: auto;
        border: 0;
        display: block;
    }

.fullImageLink img {
        width:100%;
        height: auto
    }

    p img {
        width: 100%;
        height: auto;
        margin: 0
    }

    div.thumbinner {
        width: 100% !important
    }

    div.thumbinner img {
        width: 100%;
        height: auto
    }

}


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

@media screen and (max-width: 450px) {
     #mw_metadata {
        width: 100% !important
    }

    #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(10),#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
    }
}

#ca-talk { display: none !important; }
SOJI Electronics