YellowWarningTriangle.png This wiki is closed in favour of the new wiki. Information shown is likely to be very out of date.

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

From Discovery Wiki
Jump to navigationJump to search
m
m (Undo revision 94120 by Space (talk) - accidentally readded a section to opening comment.)
 
(18 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
CSS to a web page. Be aware of the @-moz-document selector if you're using something  
 
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  
 
else than Stylish and Firefox, though. You'll have to use something else to specify  
the domain name to apply the CSS on then.
+
the domain name to apply the CSS on then. Probably. I've got no idea, to be honest.
 
 
Main page preview: https://img.mrawr.net/dgcwiki/DGCWiki_test_v3.jpg
 
 
 
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 */
 
~Space */
Line 20: Line 12:
 
@-moz-document domain("discoverygc.com") {
 
@-moz-document domain("discoverygc.com") {
 
body.mediawiki {
 
body.mediawiki {
    /* The background image is open for free use (http://darkdissolution.deviantart.com/art/Blue-Space-With-Planets-267429077) */
+
/* The background image is open for 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.jpg") no-repeat fixed center center / cover  transparent !important;
+
     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 {
 
#globalWrapper {
 
     position: relative !important;
 
     position: relative !important;
     top: 20px !important;
+
     top: 5px !important;
}
+
    padding-left: 20px !important;
 +
    padding-right: 15px !important;
 +
    }
  
 
#content:nth-child(6) {
 
#content:nth-child(6) {
 
     background: transparent !important;
 
     background: transparent !important;
 
     border: none !important;
 
     border: none !important;
}
+
    }
  
 +
/* Adds a border to all sides of the content box, since the right border is going to be visible. */
 
#content {
 
#content {
 
     border-style: solid solid solid solid !important;
 
     border-style: solid solid solid solid !important;
 
     border-width: 1px 1px 1px 1px !important;
 
     border-width: 1px 1px 1px 1px !important;
 
     border-color: #202653 !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 {
 
div#globalWrapper {
     width: 1000px !important;
+
     width: 96% !important;
 +
    min-width: 1000px !important;
 
     margin: 0 auto !important;
 
     margin: 0 auto !important;
     padding-bottom: 30px !important;
+
     padding-bottom: 22px !important;
}
+
    }
 +
 
 +
/* Moves the sidebar down a bit */
 +
#column-one {
 +
    padding-top: 190px !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 {
 
#p-cactions {
     position: relative !important;
+
     padding-left: 2.6em !important;
    top: -143px !important;
 
    left: 3.20em !important;
 
 
     margin: 0 auto !important;
 
     margin: 0 auto !important;
     padding-left: 2em !important;
+
     width: 1px !important;
}
+
    }
  
 +
/* Not much has happened here except for some modifications to make it fit with the new layout. */
 
#p-personal {
 
#p-personal {
     position: relative !important;
+
     padding-left: 10.6em !important;
    top: -180px !important;
 
 
     margin: 0 auto !important;
 
     margin: 0 auto !important;
     left: 8.50em !important;
+
     width: 1px !important;
     padding-left: 2em !important;
+
     }
}
 
  
 +
/* Round border for the logo, moved a bit out instead of being squashed into the corner like before. */
 
#p-logo {
 
#p-logo {
 
     position: absolute !important;
 
     position: absolute !important;
 
     overflow: hidden !important;
 
     overflow: hidden !important;
 
     width: 155px !important;
 
     width: 155px !important;
     left: -20px !important;
+
     left: 4px !important;
     top: 25px !important;
+
     top: 20px !important;
 
     border-style: solid!important;
 
     border-style: solid!important;
 
     border-width: 2px !important;
 
     border-width: 2px !important;
Line 73: Line 85:
 
     border-radius: 6px;
 
     border-radius: 6px;
 
     z-index: 0 !important;
 
     z-index: 0 !important;
}
+
    }
  
 +
/* Sets a fixed width for the logo. */
 
#p-logo > a:nth-child(1) {
 
#p-logo > a:nth-child(1) {
     width: auto !important;
+
     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 {
 
div#footer {
 
     border: 1px solid #FABD23 !important;
 
     border: 1px solid #FABD23 !important;
 
     padding: 0.4em 0 1.7em !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 {
 
#f-poweredbyico, #f-copyrightico {
     padding-top: 5px !important;
+
     padding-top: 4px !important;
}
+
    }
  
 +
/* Removes the text background color from the Recent Changes page. */
 
table.mw-enhanced-rc {
 
table.mw-enhanced-rc {
 
     background-color: transparent !important;
 
     background-color: transparent !important;
}
+
    }
 +
 
 +
/* Embeds the user icon inside the css to save a http request */
 +
li#pt-userpage, li#pt-anonuserpage, li#pt-login {
 +
    background: url("data:image/gif;base64,R0lGODlhEAAQAKU5AFtJMlpJNFxIMU5OTm2XH3aIVJNkK5FmMJZnPbt6NIZzXId0XpVwQZRzR5p7VI1+baZ3Tdl+Kt1/LIO2JYe5K4q8M4idYZKBbJK/QLqddZfDR5rFTZ/HVqfMZanNacKVWuKVQ+ejVuelVu21bPC/e5+XjKOjo7rXhr3aiM+1kNi4icffm8rio83jqNHmrtXotOPEl/HDg/LKjvfaq/ngut3Z1Nvrwd/tx/vqz////////////////////////////yH5BAEAAD8ALAAAAAAQABAAAAZiwJ9wSCwafxfF5VhUNBgHAVO4cKRgHwNg+sjQZrFEYFpSyUihyGD6M4lAEgRbCKnPTaYRjjRYH00vLAUkFhoVfkQmNy4rJxYcGBQTiEImNi0TKB0bHgSTRX2hon1zpaanP0EAOw==") no-repeat scroll left top transparent !important;
 +
    }
 
}
 
}

Latest revision as of 11:54, 12 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. Probably. I've got no idea, to be honest.

~Space */

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

@-moz-document domain("discoverygc.com") {
body.mediawiki {
/* The background image is open for 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: 5px !important;
    padding-left: 20px !important;
    padding-right: 15px !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: 22px !important;
    }

/* Moves the sidebar down a bit */
#column-one {
    padding-top: 190px !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 {
    padding-left: 2.6em !important;
    margin: 0 auto !important;
    width: 1px !important;
    }

/* Not much has happened here except for some modifications to make it fit with the new layout. */
#p-personal {
    padding-left: 10.6em !important;
    margin: 0 auto !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: 4px !important;
    top: 20px !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;
    }

/* Embeds the user icon inside the css to save a http request */
li#pt-userpage, li#pt-anonuserpage, li#pt-login {
    background: url("data:image/gif;base64,R0lGODlhEAAQAKU5AFtJMlpJNFxIMU5OTm2XH3aIVJNkK5FmMJZnPbt6NIZzXId0XpVwQZRzR5p7VI1+baZ3Tdl+Kt1/LIO2JYe5K4q8M4idYZKBbJK/QLqddZfDR5rFTZ/HVqfMZanNacKVWuKVQ+ejVuelVu21bPC/e5+XjKOjo7rXhr3aiM+1kNi4icffm8rio83jqNHmrtXotOPEl/HDg/LKjvfaq/ngut3Z1Nvrwd/tx/vqz////////////////////////////yH5BAEAAD8ALAAAAAAQABAAAAZiwJ9wSCwafxfF5VhUNBgHAVO4cKRgHwNg+sjQZrFEYFpSyUihyGD6M4lAEgRbCKnPTaYRjjRYH00vLAUkFhoVfkQmNy4rJxYcGBQTiEImNi0TKB0bHgSTRX2hon1zpaanP0EAOw==") no-repeat scroll left top transparent !important;
    }
}