Difference between revisions of "User:Aemony/common.css"

Revision as of 18:00, 6 May 2018

/* ===== CHANGE : Some more spacing for paragraphs ================================================================================================================== */

/* Limit to mw-parser-output to not affect p's that might be used elsewhere */
.mw-parser-output p {
    margin: 0.5em 0;
}

/* ^- affects the p's on the frontpage negatively, let's fix that so it doesn't break spacing on buttons + featured article, which expects 0 margin */
.home-container p {
    margin: 0;
}




/* ===== CHANGE : Center the content ================================================================================================================================
 * 
 * This caps the max width of the content and aligns it all to the center. max-width 1600px because that seems like a good middle-ground.
 *
 */

/* Center stuff - Beautiful! */
#masthead {
    width: auto;
    max-width: 1600px;
}

body {
    justify-content: center;
    width: 100%;
}

/* Fixes the slightly off-putting ~70% width items in the Editing Guide. Let's have two items per row! */
/* Wrap it around a min width to not break mobile view */
@media only screen and (min-width : 801px) {
    .editing-guide-list-item-wrapper {
        max-width: 50%;
    }
}




/* ===== CHANGE : Allow left aligned tables =========================================================================================================================
 * 
 * This allows the use of style="text-align: center;" at the top of a table in an article to get all of its contents to align left.
 *
 */

/* This is currently set to Center, let's change that to Inherit */
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
    text-align: inherit;
}

/* Let's set the default align to Center, to reproduce the current look */
table.wikitable {
    text-align: center;
}




/* ===== CHANGE : Border to the left of H3s to make it easier to separate H3 sections from H4 sections ==============================================================
 * 
 * This is a change I'm somewhat conflicted about. It works, and it merges nice, and works in mobile as well, but it means the H3s are indented more than the H4s, and can give a minor conflicting look because of it.
 * 
 */

/* Add a border to H3s by default*/
h3 {
    border-left: 5px solid #7babde; /* 5px cuz visible, but not distracting */
    padding-left: 10px; /* need some air to breath */
}

/* Dunno why we're using padding-top when margin-top is more appropriate for this. Probably haven't found the edge case yet, I guess. */
/* This is mostly to remove the padding-top that makes the new border extend upwards above the text of the H3. */

h1, h2, h3, h4, h5 {
    margin-top: 10px; /* 10px for margin-top since padding-top: 5px results in about the same, for some weird reason */
    padding-top: 0; /* let's remove the current 5px default */
}




/* ===== BUG FIXES ================================================================================================================================================== */

/* Corrects hidden category on front page being offset -25px due to the padding on articles for #main-content being overwritten due to rule on .page-Home #main-content */
.page-Home #main-content div#body-content div#catlinks {
    margin-left: 0;
}


/* Fixes .project-intro from going off-screen on widths below 1000ish, but above 800ish */
/* Wrap it around a min width to not break mobile view */
@media only screen and (min-width : 801px) {
    .project-intro {
        max-width: 750px;
        width: auto;
    }
}


/* Fixes for the four SVG icons on the header, making them all #999 */

/* Icon 1 - Watchlist - Change fill color to #999, from #A1A1A0 */
#pt-watchlist a {
    background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 96%22%3E%3Cpath fill=%22%23999%22 d=%22M48 17 57 36 78 39 63 53 66 73 48 64 30 73 33 53 18 39 39 36Z%22/%3E%3C/svg%3E");
}

/* Icon 2 - My Talk - Change fill color to #999, from #A1A1A0 */
#pt-mytalk a {
    background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 96%22%3E%3Cpath fill=%22%23999%22 d=%22m34 33 26 0 0-13-39 0 0 31-7 9 20 0zM75.1 37.1 75 67l8 9-40 0c-3.3 0-5-2.4-5-5l0-34 37 0%22/%3E%3C/svg%3E");
}

/* Icon 3 - Notification Alert - Change fill color to white, from none. White becomes #999 due to some reason */
#pt-notifications-alert .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22utf-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%0A %3Cpath fill=%22white%22 d=%22M17.5 14V9c0-3-2.3-5-5.5-5S6.5 6 6.5 9v5c0 2 0 3-2 3v1h15v-1c-2 0-2-1-2-3zM12 20H9c0 1 1.6 2 3 2s3-1 3-2h-3z%22/%3E%0A%3C/svg%3E%0A");

}

/* Icon 4 - Notification Notice - Change fill color to white, from none. White becomes #999 due to some reason */
#pt-notifications-notice .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22utf-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%0A %3Cpath fill=%22white%22 d=%22M3 13.35l1.8-7.2c.2-.996.81-1.8 1.8-1.8h10.8c.99 0 1.6.867 1.8 1.8l1.8 7.2v4.5c0 .99-.81 1.8-1.8 1.8H4.8c-.99 0-1.8-.81-1.8-1.8v-4.5zm6.96 1.8h4.08c-.49.557-1.212.9-2.04.9a2.68 2.68 0 0 1-2.04-.9h4.08c.414-.472.66-1.098.66-1.8h4.14l-1.44-7.2H6.6l-1.44 7.2H9.3c0 .702.246 1.328.66 1.8z%22/%3E%0A%3C/svg%3E%0A");
}

/* White becomes #999 because of the 0.65 opacity on this CSS element: "pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read" */