MediaWiki:Homepage.css: Difference between revisions
(Fixed the centering on some of the homebuttons in hope that the link would encapsulate the entire div instead of just the text. Also removed the will-change on tdiv.home to improve performance & resource consumption on some browsers. Also removed a bit of unused code made for fandom to further minify the css and make page loading quicker. I feel like we should migrate a bit of the css rules from here to common.css and only load this page on the main page to improve loading times on other pages.) |
(Removing some unused CSS to lower file size) |
||
Line 21: | Line 21: | ||
/*Oasis or general styling*/ | /*Oasis or general styling*/ | ||
.TDiv .gallery-image-wrapper{ | .TDiv .gallery-image-wrapper{ | ||
opacity: 0.82; | opacity: 0.82; | ||
Line 56: | Line 52: | ||
/*End of Homepage Button Gallery*/ | /*End of Homepage Button Gallery*/ | ||
/*Homepage Galaxy Play Button*/ | /*Homepage Galaxy Play Button*/ |
Revision as of 23:40, 14 May 2022
/* Styles for the Homepage page of this page, the Homepage */ /* Created by: NHeoShadow for Galaxy Wiki | Edited by smallketchup82 for Galaxypedia*/ div.TDiv.home p{ line-height: 1.75; margin: 0; } div.Tdiv h1{ margin-bottom: 5px; margin-top: 5px; } div.TDiv.home{ line-height: 18px; margin-top: 8px; margin-bottom: 8px; border-radius: 10px; } /*Homepage Button Gallery*/ /*Oasis or general styling*/ .TDiv .gallery-image-wrapper{ opacity: 0.82; transition: 0.3s; box-shadow: 0px 2px 5px black; border: 3px solid var(--mainbordercolorP) !important; border-radius: 10px; } .TDiv .gallery-image-wrapper:hover{ opacity: 1; box-shadow: 0px 1px 2px black; border-color: #FFFFFF !important; } /*FandomDesktop styling*/ .is-content-expanded #homeGalleryNav{ min-height: 473px; } #homeGalleryNav{ display:flex; justify-content:center; flex-direction:column; } #homeGalleryNav h1{ padding-bottom: 10px; text-align: center; justify-content: center; } /*End of Homepage Button Gallery*/ /*Homepage Galaxy Play Button*/ /*Right-side button containers*/ #discordPlayGroup{ display:flex; flex-direction:column; justify-content:center; min-height:250px; } .is-content-expanded #discordPlayGroup{ min-height:200px; } #otherLinksGroup{ display:flex; flex-direction:column; justify-content:center; min-height: 375px; } .is-content-expanded #otherLinksGroup{ min-height: 200px; } #informationGroup{ text-align: center; justify-content: center; min-height: 200px; } .is-content-expanded #informationGroup{ min-height: 100px; } /*end of right-side button containers*/ /* Playbutton styling */ div.playbutton{ background-color: #02B757; text-align: center; font-size: 16px; line-height: 1.3em; font-weight: 300; color: white; transition: 0.5s; padding: 7px 4px; border-radius: 5px; margin-top: 5px; border: 2px solid black; } div.playbutton:hover{ background-color: #3FC679; cursor: pointer; border: 2px solid white; } .playbutton { transition: all 0.5s; background: url("https://static.wikia.nocookie.net/roblox-galaxy-official/images/3/3b/Galaxy_banner_but_its_transparent.png/revision/latest/scale-to-width-down/768?cb=20210102015103") no-repeat center; background-size: 100%; user-select: none; } .playbutton:hover { transition: all 0.5s; background: url("https://static.wikia.nocookie.net/roblox-galaxy-official/images/0/03/Galaxy_banner_30_opacity.png/revision/latest/scale-to-width-down/768?cb=20210102014420") no-repeat center; background-size: 110%; } .playbutton:active { transition: all 0.25s; background: url("https://static.wikia.nocookie.net/roblox-galaxy-official/images/4/46/Galaxy_banner_2_30_opacity.png/revision/latest/scale-to-width-down/768?cb=20210102015344") no-repeat center; background-size: 120%; } div.playbutton a{ display: block; color: white; text-decoration: none; transition: 0.5s; } div.playbutton a.external:after{ display: none !important; } /*End of playbutton styling*/ div.DiscordInvite{ background-color: var(--D-darkbutnotblack); display: block; border-radius: 5px; padding: 7px 4px; border-top: 8px solid var(--D-blurple); box-shadow: 0px 1px 3px #0B0B0B; margin-top: 9px; margin-bottom: 5px; } .InviteButton{ background-color: var(--D-blurple); opacity: 0.85; transition: 0.12s; width: 80%; border-radius: 3px; box-shadow: 0px 1px 3px black; margin: 0 auto; padding: 6px 8px; text-align: center; font-size: 14px; margin-top: 3px; margin-bottom: 3px; } .InviteButton:hover{ opacity: 1; cursor: pointer; } .InviteButton a{ display: block; color: white; text-decoration: none; } .InviteButton a.external:after{ display: none !important; } /*End of Homepage Galaxy Play Button CSS*/ /*Homepage Discord Server Buttons*/ .InviteButton { transition: all 0.5s; border: 2px solid black; border-radius: 5px; will-change: transform; } .InviteButton:hover { transform: scale(1.05); border: 2px solid white; } .InviteButton a{ transition: all 0.5s; color: white; } /*End of Homepage Discord Server Buttons*/ /*div on Homepage used for navigation buttons*/ .is-content-expanded #homeButtonNav{ display: flex; flex-direction: column; min-height: 250px; } #homeButtonNav{ text-align:center; border: 2px solid rgb(48, 52, 54) !important; padding: 10px; width: 90%; left: 50%; position: relative; transform: translate(-50%, 0); } .is-content-expanded #homeButtonNav hr{ width: 91%; } #homeButtonNav hr{ border: 1px solid white; border-radius: 5px; opacity: 0.5; width: 90%; } /*end of homeButtonNav*/ /*Group/wrapper div for HomeButton*/ .HomeGroup{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; flex-wrap: wrap; } /*Navigation Buttons inside #homeButtonNav div*/ .HomeButton{ display:flex; justify-content: center; background-color: transparent; transition: 0.5s; width: 15%; border-radius: 8px; box-shadow: 0px 0px 0px white; margin: 0 8px; padding: 6px 8px; text-align: center; font-size: 100%; font-family: 'Quicksand', Helvetica Neue, Helvetica, Arial, sans-serif; margin-top: 5px; margin-bottom: 10px; border: 1px solid white; opacity: 0.75; overflow: hidden; will-change: transform; -webkit-font-smoothing: antialiased; will-change: transform; } .HomeButton p { align-self: center; height: 100%; width: 100%; } .HomeButton a { color: white !important;; text-decoration: none; background-image: none !important; padding-right: 0 !important;; height: 100%; width: 100%; display: block; will-change: transform; } /*.HomeButton a.external:after{ display: none !important; }*/ .is-content-expanded .HomeButton{ width: 17%; height: 50px; } .HomeButton:hover { transform: scale(1.05, 1.05); box-shadow: 0px 0px 10px white; opacity: 1; } /*End of Navigation Buttons*/ /*Remove weird margin at the bottom of the columns div.mw-parser-output > p{ margin: 0px; } */