MediaWiki:Homepage.css: Difference between revisions

From Galaxypedia
imported>Smallketchup82
No edit summary
(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.)
Line 17: Line 17:
border-radius: 10px;
border-radius: 10px;
}
}
/* Homepage Animation | Disable if its causing performance issues
I am seeing some lag/performance issues with the current version. A more subtle animation that applies only to certain elements (images, titles, etc.) may perform better
-Explodabat
@keyframes animtest {
from {
opacity: 0;
transform: scale(1.25);
}
to {
opacity: 1;
transform: scale(1);
}
}
*/
div.TDiv.home {
will-change: transform;
animation: animtest 2s 0.1s;
animation-timing-function: ease;
animation-fill-mode: both;
}
/* End of homepage animation */


/*Homepage Button Gallery*/
/*Homepage Button Gallery*/
Line 87: Line 62:


/*Homepage Galaxy Play Button*/
/*Homepage Galaxy Play Button*/
/* Roblox Interwiki template styling*/
.RobloxWikis {
border-radius: 10px;
}
.RobloxWikis-HeadButton {
transition: all 0.5s;
background-color: rgba(0, 0, 0, 0);
border-radius: 5px;
}
.RobloxWikis-HeadButton:hover {
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
user-select: none;
}
.RobloxWikis {
opacity: 0.5;
transition: all 1s 1s;
}
.RobloxWikis:hover {
transition: all 1s;
opacity: 1;
}
/* End of roblox interwiki template styling*/
/*Right-side button containers*/
/*Right-side button containers*/
#discordPlayGroup{
#discordPlayGroup{
Line 305: Line 253:
will-change: transform;
will-change: transform;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
will-change: transform;
}
.HomeButton p {
align-self: center;
height: 100%;
width: 100%;
}
}
.HomeButton a{
.HomeButton a {
     color: white !important;;
     color: white !important;;
     text-decoration: none;
     text-decoration: none;
    vertical-align: middle;
background-image: none !important;
background-image: none !important;
padding-right: 0 !important;;
  padding-right: 0 !important;;
height: 100%;
width: 100%;
display: block;
will-change: transform;
}
}
.HomeButton a.external:after{
/*.HomeButton a.external:after{
     display: none !important;
     display: none !important;
}
}*/
.HomeButton p{
align-self: center;
}
.is-content-expanded .HomeButton{
.is-content-expanded .HomeButton{
width: 17%;
width: 17%;

Revision as of 21:29, 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*/
div.TDiv.home .wikia-gallery-item{
    padding: 9px;
}

.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*/

.activityfeed > li{
    margin-bottom: -6px;
}

/*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;
}
*/
Retrieved from "https://robloxgalaxy.wiki/index.php?title=MediaWiki:Homepage.css&oldid=94035"