MediaWiki:Vector.css: Difference between revisions

Revision as of 20:48, 6 June 2025 view source Admin (talk | contribs) ← Older edit		Revision as of 20:52, 6 June 2025 view source Admin (talk | contribs) Newer edit →
Line 4:		Line 4:
	li#n-discord {		li#n-discord {
	color: #f6f6f6;		color: #f6f6f6;
	font-size: 0; /* Hide the text content */		visibility: visible;
	padding: 10px;		font-size: 0em;
	}		}
	/* Define the background for both hover and non-hover states in a single rule to avoid duplication */		/* Add a unique class for the first instance */
	#n-discord::after {		.n-discord-first::after {
	content: '';		content: '';
	display: inline-block;		display: inline-block;
	width: 36px;		width: 35px;
	height: 36px;		height: 35px;
	background: url('https://certified.wiki/images/icons/discord_logo_icon.png') no-repeat center / contain;
			background: url('https://certified.wiki/images/icons/discord_logo_icon.png');
			background-repeat: no-repeat;
			background-size: contain;
			}
			/* Every image need to have its own rule defined. */
			.n-discord-first::after {
			background: url('https://certified.wiki/images/icons/discord_logo_icon.png');
	}		}
	/* Style for hover state */		li#n-discord:hover::after,
	#n-discord:hover::after {		.n-discord-first::after {
	/* No need to redefine the entire rule, just ensure the style is correct */		display: inline-block; /* Ensure the image is displayed on hover as well */
			}
			/* Apply the unique class to the first occurrence of #n-discord */
			#n-discord:nth-of-type(1) .n-discord-first::after {
			content: '';
			width: 35px;
			height: 35px;
			background: url('https://certified.wiki/images/icons/discord_logo_icon.png');
			background-repeat: no-repeat;
			background-size: contain;
			}
			#mw-panel .portal .body li#n-discord {
			font-size: 0em;
			padding: 10px;
	}		}

Revision as of 20:52, 6 June 2025

/* All CSS here will be loaded for users of the Vector skin */

/* Make clickable text on links invisible. */
li#n-discord {
    color: #f6f6f6;
    visibility: visible;
    font-size: 0em;
}

/* Add a unique class for the first instance */
.n-discord-first::after {
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;

    background: url('https://certified.wiki/images/icons/discord_logo_icon.png');
    background-repeat: no-repeat;
    background-size: contain;
}

/* Every image need to have its own rule defined. */
.n-discord-first::after {
    background: url('https://certified.wiki/images/icons/discord_logo_icon.png');
}

li#n-discord:hover::after,
.n-discord-first::after {
    display: inline-block; /* Ensure the image is displayed on hover as well */
}

/* Apply the unique class to the first occurrence of #n-discord */
#n-discord:nth-of-type(1) .n-discord-first::after {
    content: '';
    width: 35px;
    height: 35px;

    background: url('https://certified.wiki/images/icons/discord_logo_icon.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#mw-panel .portal .body li#n-discord {
    font-size: 0em;
    padding: 10px;
}






/* Make clickable text on links invisible. */
li#n-facebook {
color:#f6f6f6;
visibility: visible;
font-size:0em;
}

#n-facebook:hover ::after, #n-facebook ::after {
content: '';
display: inline-block;
width: 35px;
height: 35px;

background: url('https://certified.wiki/images/icons/facebook_logo_icon.png');
}

/* Every image need to have its own rule defined. */
#n-facebook::after{
background: url('https://certified.wiki/images/icons/facebook_logo_icon.png');
}

#n-facebook:hover ::after {
background: url('https://certified.wiki/images/icons/facebook_logo_icon.png');
}


#n-facebook:hover ::after, #n-facebook ::after{
background-repeat: no-repeat;
background-size: contain;
}

#mw-panel .portal .body li#n-facebook {
font-size:0em;
padding:10px;
}




body { background-color: #e8e1d5; }

#p-navigation { background-color: #e8e1d5; }

#mw-head { background-color: #e8e1d5; }
#mw-head-base { background-color: #e8e1d5; }
#mw-panel { background-color: #e8e1d5; }
#p-logo { background-color: #e8e1d5; }

#p-tb { background-color: #e8e1d5; }
#p-tb-label { background-color: #e8e1d5; }

.mw-body { border: 1px solid #000000; }

#content { background-color: #ded5ba; }
#bodyContent { background-color: #ded5ba; }
#firstHeading { background-color: #ded5ba; }

#catlinks { background-color: #e8e1d5; }
#p-tb .body { background-color: #e8e1d5; }

#footer { 
 background-color: #ded5ba;
 min-height: 100px; 
 top: 10px;
 border-bottom: 1px solid #000000;
 border-left: 1px solid #000000;
 border-right: 1px solid #000000;
}


/* Top menu tabs */

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
    background-image: linear-gradient(to bottom,#ded5ba 0,#ded5ba 100%); }

.vector-menu-tabs li {
    background-image: linear-gradient(to top,#ded5ba 0,#ded5ba 1px,#ded5ba 100%); }

.vector-menu-tabs .selected {
    background: #ded5ba; }

.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
    color: #331c8c; }

.vector-menu-tabs { border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;}



/* Dropdown menu */

.vector-menu-dropdown .vector-menu-content {
    background-color: #e8e1d5;
    border: 1px solid #000000; }