Jump to content

MediaWiki:Vector.css: Difference between revisions

print styles
(new top nav implementation, uses JS to create the nav instead of hacky CSS)
(print styles)
Line 2:
body {
background: #000 url('https://static.miraheze.org/ricochetwiki/2/22/Stars_background.jpg');
}
 
@media print {
body {
background: none;
}
}
 
Line 26 ⟶ 32:
#footer li {
color: #fff;
}
 
@media print {
#footer,
#footer li {
color: #000;
}
}
 
Line 68 ⟶ 81:
/* top nav */
.client-js #mw-page-base {
height: calc(5em + 56px);
}
 
.client-js .mw-page-container-inner {
padding-top: 56px;
}
 
Line 78 ⟶ 91:
.client-js #mw-panel,
.client-js .ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
top: 56px;
}
 
#ricochet-top-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0.5rem 1rem;
background: #343a40;
box-sizing: border-box;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: left;
z-index: 101;
}
 
#ricochet-top-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
}
 
#ricochet-top-nav-list a {
display: block;
padding: 0.5rem 0.5rem;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
 
#ricochet-top-nav-list a:hover,
#ricochet-top-nav-list a:focus {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
 
#ricochet-top-nav-list svg {
width: 20px;
height: 20px;
fill: hsla(0, 0%, 100%, 0.5);
vertical-align: middle;
}
 
#ricochet-top-nav-list a[href="https://wiki.ricochetuniverse.com"]
{
color: #fff; /* active */
}
 
#ricochet-top-nav-list a[href$='/discord']:hover > svg,
#ricochet-top-nav-list a[href$='/discord']:focus > svg {
fill: #5865f2;
}
 
@media print {
#ricochet-top-nav {
display: none;
}
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.