MediaWiki:Timeless.css: Difference between revisions

From Ghost Theory Wiki
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 321: Line 321:




/* Mobile breakpoint – adjust if your wiki uses a different one */
/* MOBILE-ONLY: yellow border-based hamburger in Timeless */
@media (max-width: 720px) {
@media (max-width: 720px) {


     /* Base hamburger button in Timeless */
     /* Button shell */
     #mw-sidebar-button.mw-ui-icon-element {
     #mw-sidebar-button.mw-ui-icon-element {
         color: #ffd800;           /* sets icon color on many setups */
         width: 32px;
         background-color: transparent;
        height: 32px;
         background: transparent;
         border: none;
         border: none;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: none !important;
     }
     }


     /* Timeless icon element specifics (mask-based icons) */
     /* Three bars – all yellow */
     .skin-timeless #mw-sidebar-button.mw-ui-icon-element.mw-ui-icon {
     #mw-sidebar-button.mw-ui-icon-element::before,
         background-color: #ffd800; /* if Timeless uses background-color for icon fill */
    #mw-sidebar-button.mw-ui-icon-element::after,
         -webkit-mask-repeat: no-repeat;
    #mw-sidebar-button.mw-ui-icon-element span {
         mask-repeat: no-repeat;
         content: "";
         -webkit-mask-position: center;
        position: absolute;
         mask-position: center;
        left: 6px;
        right: 6px;
         height: 0;
         border-top: 3px solid #ffd800; /* YELLOW BARS */
         border-radius: 2px;
         display: block;
     }
     }


     /* Hover / active states (still mobile) */
     /* Top bar */
     .skin-timeless #mw-sidebar-button.mw-ui-icon-element:hover,
    #mw-sidebar-button.mw-ui-icon-element::before {
     .skin-timeless #mw-sidebar-button.mw-ui-icon-element:focus,
        top: 9px;
     .skin-timeless #mw-sidebar-button.mw-ui-icon-element:active {
    }
         background-color: rgba(255, 216, 0, 0.18); /* subtle yellow glow behind icon */
 
        color: #ffd800;
    /* Middle bar */
     #mw-sidebar-button.mw-ui-icon-element span {
        top: 15px;
    }
 
    /* Bottom bar */
    #mw-sidebar-button.mw-ui-icon-element::after {
        top: 21px;
    }
 
    /* Optional: hover tint behind the icon */
     #mw-sidebar-button.mw-ui-icon-element:hover,
    #mw-sidebar-button.mw-ui-icon-element:focus,
     #mw-sidebar-button.mw-ui-icon-element:active {
         background-color: rgba(255, 216, 0, 0.18);
     }
     }
}
}