Difference between revisions of "User:Space/dgcwiki wip.css"

Revision as of 16:47, 11 September 2013

/* Work in progress. 

Currently for use with Stylish for Firefox or anything else that can apply custom 
CSS to a web page. Be aware of the @-moz-document selector if you're using something 
else than Stylish and Firefox, though. You'll have to use something else to specify 
the domain name to apply the CSS on then.

Main page preview: https://img.mrawr.net/dgcwiki/DGCWiki_test_v3.jpg (outdated, 11.9.2013)

The current version has been tested with some degree of success. The most challenging
thing with a fixed-width layout like this is dealing with different zoom levels to a
certain degree, though the page layout will inevitably break at some point. I'm not
too worried about this, as testing side-by-side with the current layout shows that
it doesn't handle it all that much better and/or worse in some situations.

~Space */

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("discoverygc.com") {
body.mediawiki {
/* The background image is open for free use (http://darkdissolution.deviantart.com/art/Blue-Space-With-Planets-267429077) */
    background: url("https://googledrive.com/host/0B-jbiuTm6FjRVUdKSWRnRFlLS0k/mrawr/images/blue_space_with_planets_by_darkdissolution-lowq_AC_flip.jpg") no-repeat fixed center center / cover  transparent !important;
    padding-left: 10px !important;
    }

#globalWrapper {
    position: relative !important;
    top: 20px !important;
    padding-left: 20px !important;
    }

#content:nth-child(6) {
    background: transparent !important;
    border: none !important;
    }

/* Adds a border to all sides of the content box, since the right border is going to be visible. */
#content {
    border-style: solid solid solid solid !important;
    border-width: 1px 1px 1px 1px !important;
    border-color: #202653 !important;
    }

/* Adds a border to the left and right side and sets the minimum width for the layout to 1000px, which is about when the main page (11.9.2013) starts breaking the layout. */
div#globalWrapper {
    width: 96% !important;
    min-width: 1000px !important;
    margin: 0 auto !important;
    padding-bottom: 15px !important;
    }

/* Moves the headers for the sidebar boxes a bit down to merge the two together, and removes the bottom border. */
#column-one h5 {
    position: relative !important;
    bottom: -2px !important;
    z-index: 1 !important;
    border-style: solid solid none solid !important;
    border-width: 1px 1px 1px 1px !important;
    border-color: #202653 !important;
    }

/* Not much has happened here except for some modifications to make it fit with the new layout. */
#p-cactions {
    position: relative !important;
    top: -142px !important;
    margin: 0 auto !important;
    margin-left: 1em !important;
    width: 1px !important;
    }

/* Not much has happened here except for some modifications to make it fit with the new layout. */
#p-personal {
    position: relative !important;
    top: -181px !important;
    margin: 0 auto !important;
    left: 120px !important;
    margin-left: 1.3em !important;
    width: 1px !important;
    }

/* Round border for the logo, moved a bit out instead of being squashed into the corner like before. */
#p-logo {
    position: absolute !important;
    overflow: hidden !important;
    width: 155px !important;
    left: 0px !important;
    top: 25px !important;
    border-style: solid!important;
    border-width: 2px !important;
    border-color: #202653 !important;
    border-radius: 6px;
    z-index: 0 !important;
    }

/* Sets a fixed width for the logo. */
#p-logo > a:nth-child(1) {
    width: 155px !important;
    }

/* Moves the bullet point and text a bit out from the left side of the diff selection box. */
#pagehistory > li.selected {
    padding-left: 5px !important;
    }

/* Wider sidebar to match the slightly moved logo. */
.generated-sidebar, #p-search, #p-tb {
    position: relative !important;
    left: -16px !important;
    width: 12.2em !important;
    }

/* Adds a border to all sides of the footer box, and moves it a bit to the left to compensate for a wider sidebar. */
div#footer {
    border: 1px solid #FABD23 !important;
    padding: 0.4em 0 1.7em !important;
    margin-left: -16px !important;
    }

/* Moves the "Powered by" and Copyright icon a bit down. */
#f-poweredbyico, #f-copyrightico {
    padding-top: 4px !important;
    }

/* Removes the text background color from the Recent Changes page. */
table.mw-enhanced-rc {
    background-color: transparent !important;
    }
}