MediaWiki:Vector.css: Difference between revisions
Jump to navigation
Jump to search
| Line 7: | Line 7: | ||
} | } | ||
/* Use inline-block to ensure horizontal alignment */ | |||
li#n-discord::after, | li#n-discord::after, | ||
li#n-facebook::after { | li#n-facebook::after { | ||
| Line 13: | Line 14: | ||
width: 35px; | width: 35px; | ||
height: 35px; | height: 35px; | ||
background: | background-size: contain; /* Ensure the image scales correctly within its container */ | ||
vertical-align: middle; /* Vertically align the icons */ | vertical-align: middle; /* Vertically align the icons */ | ||
} | } | ||
/* Facebook icon uses | /* Facebook icon uses a different background image */ | ||
li#n-facebook::after { | li#n-facebook::after { | ||
background-image: url('https://certified.wiki/images/icons/facebook_logo_icon.png'); | background-image: url('https://certified.wiki/images/icons/facebook_logo_icon.png'); | ||
} | } | ||
/* Discord icon (default state) */ | |||
li#n-discord::after { | |||
background-image: url('https://certified.wiki/images/icons/discord_logo_icon.png'); | |||
} | |||
/* Hover state for both icons */ | |||
li#n-discord:hover::after, | li#n-discord:hover::after, | ||
li#n-facebook:hover::after { | li#n-facebook:hover::after { | ||
| Line 32: | Line 39: | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
Revision as of 21:37, 6 June 2025
/* All CSS here will be loaded for users of the Vector skin */
/* Make clickable text on links invisible. */
li#n-discord, li#n-facebook {
color: #f6f6f6;
font-size: 0; /* Hide the link text */
}
/* Use inline-block to ensure horizontal alignment */
li#n-discord::after,
li#n-facebook::after {
content: '';
display: inline-block;
width: 35px;
height: 35px;
background-size: contain; /* Ensure the image scales correctly within its container */
vertical-align: middle; /* Vertically align the icons */
}
/* Facebook icon uses a different background image */
li#n-facebook::after {
background-image: url('https://certified.wiki/images/icons/facebook_logo_icon.png');
}
/* Discord icon (default state) */
li#n-discord::after {
background-image: url('https://certified.wiki/images/icons/discord_logo_icon.png');
}
/* Hover state for both icons */
li#n-discord:hover::after,
li#n-facebook:hover::after {
background-image: url('https://certified.wiki/images/icons/discord_logo_icon.png'); /* Ensure hover works correctly */
}
/* Additional padding for both links */
#mw-panel .portal .body li#n-discord,
#mw-panel .portal .body li#n-facebook {
padding: 10px;
}
body { background-color: #e8e1d5; }
#p-navigation { background-color: #e8e1d5; }
#mw-head { background-color: #e8e1d5; }
#mw-head-base { 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; }