MediaWiki:Common.css: Difference between revisions

From Straftat Wiki
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
/* Reset italic styling set by user agent */
/* General reset for consistent box-sizing */
cite,
*,
dfn {
*::before,
font-style: inherit;
*::after {
    box-sizing: border-box;
}
}


/* Straight quote marks for <q> */
/* Center the entire page content */
q {
#mw-page-container {
quotes: '"' '"' '\'' '\'';
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    max-width: 1200px; /* Adjust this width as per your design */
    margin: 0 auto;
}
}


/* Avoid collision of blockquote with floating elements by swapping margin and padding */
/* Style for the header and ensure the logo is centered */
blockquote {
#mw-head-container {
 
    display: flex;
overflow: hidden;
    justify-content: center;
margin: 1em 0;
    align-items: center;
padding: 0 40px;
    width: 100%;
    padding: 10px 0;
    background: #f8f9fa; /* Light background for visibility */
}
}


/* Consistent size for <small>, <sub> and <sup> */
#p-logo {
small {
    display: flex;
font-size: 85%;
    justify-content: center;
    align-items: center;
    max-width: 200px;
}
}


.mw-body-content sub,
/* Center sidebar */
.mw-body-content sup {
#mw-navigation {
font-size: 80%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 10px 0;
}
}


/* Same spacing for indented and unindented paragraphs on talk pages */
/* Center main content */
.ns-talk .mw-body-content dd {
#mw-content-text {
margin-top: 0.4em;
    text-align: center;
margin-bottom: 0.4em;
    padding: 20px 10px;
}
 
/* Navigation bar adjustments */
#mw-navigation,
#p-cactions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
margin: 0 auto;
max-width: 100%;
}
 
#p-cactions a {
padding: 5px 8px;
margin-right: 5px;
text-decoration: none;
font-size: 90%;
}
 
#mw-navigation ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
justify-content: flex-start;
}
 
#mw-navigation ul li {
padding: 0 8px;
}
 
#mw-navigation ul li a {
text-decoration: none;
font-size: 90%;
}
}


/* Reduce page jumps by hiding collapsed/dismissed content */
/* Adjust styles for the sidebar scaling */
.client-js .collapsible:not(.mw-made-collapsible).collapsed > tbody > tr:not(:first-child),
#mw-sidebar {
.client-js .outercollapse .innercollapse.mw-collapsible:not(.mw-made-collapsible) > p,
    max-width: 300px;
.client-js .outercollapse .innercollapse.mw-collapsible:not(.mw-made-collapsible) > table,
    margin: 10px auto;
.client-js .outercollapse .innercollapse.mw-collapsible:not(.mw-made-collapsible) > thead + tbody,
.client-js .outercollapse .innercollapse.mw-collapsible:not(.mw-made-collapsible) tr:not(:first-child),
.client-js .outercollapse .innercollapse.mw-collapsible:not(.mw-made-collapsible) .mw-collapsible-content {
 
display: none;
}
}


/* Fix tab alignment */
/* Ensure responsiveness by making sidebar, header, and logo resize well */
.mw-collapsible-toggle:not(.mw-ui-button) {
@media (max-width: 768px) {
font-weight: normal;
    #mw-page-container {
padding-right: 0.2em;
        max-width: 100%;
padding-left: 0.2em;
    }
}


#content {
    #mw-navigation,
     max-width: 900px; /* Limit the max width of the entire content area */
     #mw-sidebar,
     margin: 0 auto; /* Centers the content horizontally */
     #mw-head-container {
     padding: 0 10px; /* Adds some internal padding */
        width: 100%;
}
     }


#mw-content-text {
    #mw-content-text {
    font-size: 0.9em; /* Optional: make text slightly smaller */
        padding: 10px;
    }
}
}

Revision as of 02:22, 10 December 2024

/* General reset for consistent box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Center the entire page content */
#mw-page-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    max-width: 1200px; /* Adjust this width as per your design */
    margin: 0 auto;
}

/* Style for the header and ensure the logo is centered */
#mw-head-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    background: #f8f9fa; /* Light background for visibility */
}

#p-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 200px;
}

/* Center sidebar */
#mw-navigation {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 10px 0;
}

/* Center main content */
#mw-content-text {
    text-align: center;
    padding: 20px 10px;
}

/* Adjust styles for the sidebar scaling */
#mw-sidebar {
    max-width: 300px;
    margin: 10px auto;
}

/* Ensure responsiveness by making sidebar, header, and logo resize well */
@media (max-width: 768px) {
    #mw-page-container {
        max-width: 100%;
    }

    #mw-navigation,
    #mw-sidebar,
    #mw-head-container {
        width: 100%;
    }

    #mw-content-text {
        padding: 10px;
    }
}