Template:Mainpage/styles.css

/** This page contains the CSS code for the Main Page. Code here will only load on the Main Page. **/ /* ATTENTION: ALL CSS BEYOND THIS LINE IS FOR THE MAIN PAGE DESIGN CURRENTLY UNDER DEVELOPMENT BY THETIMMAN. AT THIS MOMENT ALL OF THIS CSS IS TEMPORARY, AND WILL ONLY BE PERMANENTLY IMPLEMENTED ONCE THE DESIGN IS APPROVED. */

/* -- Game Button (WIP) - Derived from CSS on https://zelda.gamepedia.org -- */

.gamebutton { box-shadow: 1px 1px 3px #AAA; width: 230px; height: 125px; display: inline-block; position: relative; font-size: 0; margin: 2px; }

/* "Stretches" the button link over the tile image. * Relying on pixel sizes is not ideal and makes the design very delicate. * It will have to do until a more elegant solution arises. */ .gamebutton a { width: 100%; height: 101%; clip: rect(0px, 230px, 125px, 0px); /* Overdoing the height by 1% and clipping it off prevents the bug on    certain browsers/OSes/screen-zoom-ins where the shadow falls short by a     few pixels and doesn't cover the whole image. */ display: inline-block; font-style: normal; color: white; position: absolute; line-height: 29px; font-size: 25px; text-decoration: none; background-color: rgba(0, 0, 0, 0.6);

/* Vertically centres upper layer. Flex boxes are not compatible with IE. */ display: flex; flex-direction: column; justify-content: center; }

.gamebutton a:hover{ background-color: rgba(0, 0, 0, 0.3); }

.gamebutton-container { margin-top: 3em; margin-bottom: 3em; /* Mainly to add space below the games, above the categories */ }

/* MP Button */ .mpbutton { box-shadow: 1px 1px 3px #AAA; display: inline-block; width: 144px; height: 108px; margin: 3px 5px; overflow: hidden; text-decoration: none; color: white; } .mpbutton:hover { opacity: 0.7; box-shadow: 1px 1px 3px #7A7A7A; text-decoration: none; color: white; } .mpbutton a{   text-decoration: none; color: white; }

/*New header green and blue bars*/ .greenbar { margin: 5px; padding: 5px; color: white; font-size: 110%; font-weight: bold; text-shadow: 1px 1px 2px #222; background: linear-gradient(to right, #4CAD40, #96CF24); box-shadow: 1px 1px 3px #777777; } .bluebar { margin: 5px; padding: 5px; color: white; font-size: 110%; font-weight: bold; text-shadow: 1px 1px 2px #222; background: linear-gradient(to right, #2E70B7, #25A8E0); box-shadow: 1px 1px 3px #777777; }