MediaWiki:Vector.css

From Ricochet Wiki
Revision as of 16:41, 13 April 2020 by Ngyikp (talk | contribs) (add top header)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will affect users of the Vector skin */
html:not(.darkmode) body {
	background: #000 url('https://static.miraheze.org/ricochetwiki/2/22/Stars_background.jpg');
	color: #fff;
}

html:not(.darkmode) #mw-page-base {
	background: none;
}

html:not(.darkmode) #pt-uls .uls-trigger:before,
html:not(.darkmode) .mw-echo-notifications-badge {
	filter: invert(1);
}

html:not(.darkmode) #p-cactions,
html:not(.darkmode) #simpleSearch input {
	background-color: #fff;
}

html:not(.darkmode) #footer li,
html:not(.darkmode) .mw-notification {
	color: #fff;
}

/* links */
html:not(.darkmode) #mw-panel .portal .body li a,
html:not(.darkmode) #mw-panel .portal .body li a:visited,
html:not(.darkmode) #p-personal a,
html:not(.darkmode) #footer a {
	color: #00fffe;
}

html:not(.darkmode) #mw-panel .portal .body li a:hover,
html:not(.darkmode) #p-personal a:hover,
html:not(.darkmode) #footer a:hover {
	color: #fff;
}

/* header */
#mw-page-base {
	height: calc(5em + 56px);
}

#mw-head, #mw-panel {
	top: 56px;
}

#p-ricochet#p-ricochet {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: .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;
    z-index: 101;
}

#p-ricochet-label {
	display: none;
}

#mw-panel #p-ricochet .body {
	margin: 0;
	background: none;
}

#mw-panel #p-ricochet .body ul {
	padding: 0;
	display: flex;
	flex-direction: row;
}

#mw-panel #p-ricochet .body li {
	padding: 0;
	font-size: 1rem;
	line-height: 1.5;
}

#mw-panel #p-ricochet a {
	display: block;
	padding: .5rem .5rem;
	color: #fff;
	opacity: .5;
}

#mw-panel #p-ricochet a:hover,
#mw-panel #p-ricochet a:focus {
	opacity: .75;
	text-decoration: none;
}