MediaWiki:Vector.css: Difference between revisions

From Ricochet Wiki
Content added Content deleted
(fix sidebar link color on legacy Vector)
(fix invisible footer text)
 
(4 intermediate revisions by the same user not shown)
Line 10: Line 10:
}
}


#mw-page-base {
#mw-page-base,
.vector-feature-zebra-design-disabled .vector-header-container {
background: none;
background: none;
}

@media screen and (min-width: 1000px) {
.vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header-container {
background: #fff;
padding-top: 0;
}
}
}


Line 17: Line 25:
.mw-echo-notifications-badge,
.mw-echo-notifications-badge,
#mw-sidebar-button:before, /* new Vector */
#mw-sidebar-button:before, /* new Vector */
.vector-user-links .uls-trigger, /* new Vector */
.vector-user-links .uls-trigger, /* language selector on new Vector */
.vector-user-links .mw-ui-button, /* new Vector */
.vector-menu-content-list .vector-icon, /* new Vector */
#vector-main-menu-dropdown-label > .mw-ui-icon /* new Vector */ {
#vector-user-links-dropdown-label, /* new Vector */
#vector-main-menu-dropdown-label, /* new Vector */
.mw-header .search-toggle /* new Vector */ {
filter: invert(1);
filter: invert(1);
}

.vector-user-links .uls-trigger > .vector-icon /* language selector on new Vector */ {
filter: none;
}
}


Line 36: Line 50:


#mw-navigation,
#mw-navigation,
.skin-vector-legacy .mw-footer li {
#footer,
#footer li {
color: #fff;
color: #fff;
}
}


@media print {
@media print {
.skin-vector-legacy .mw-footer li {
#footer,
#footer li {
color: #000;
color: #000;
}
}
Line 65: Line 77:
#pt-userpage-2 a:not(.mw-selflink), /* new Vector */
#pt-userpage-2 a:not(.mw-selflink), /* new Vector */
#mw-head #p-personal a,
#mw-head #p-personal a,
#footer a {
.skin-vector-legacy .mw-footer a {
color: #00fffe;
color: #00fffe;
}
}
Line 71: Line 83:
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover,
#mw-head #p-personal a:hover,
#mw-head #p-personal a:hover,
#footer a:hover {
.skin-vector-legacy .mw-footer a:hover {
color: #fff;
color: #fff;
}
}
Line 97: Line 109:
}
}


.client-js .mw-page-container-inner {
.client-js .vector-header-container {
padding-top: 56px;
padding-top: 56px;
}
}
Line 129: Line 141:
display: flex;
display: flex;
flex-direction: row;
flex-direction: row;
}

#ricochet-top-nav-logo#ricochet-top-nav-logo {
margin-right: 0.5rem;
padding: 0.3125rem 0 0.3125rem;
}
}



Latest revision as of 14:08, 8 February 2024

/* CSS placed here will affect users of the Vector skin */
body {
	background: #000 url('https://static.miraheze.org/ricochetwiki/2/22/Stars_background.jpg');
}

@media print {
	body {
		background: none;
	}
}

#mw-page-base,
.vector-feature-zebra-design-disabled .vector-header-container {
	background: none;
}

@media screen and (min-width: 1000px) {
	.vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header-container {
		background: #fff;
		padding-top: 0;
	}
}

#pt-uls .uls-trigger:before,
.mw-echo-notifications-badge,
#mw-sidebar-button:before, /* new Vector */
.vector-user-links .uls-trigger, /* language selector on new Vector */
.vector-menu-content-list .vector-icon, /* new Vector */
#vector-user-links-dropdown-label, /* new Vector */
#vector-main-menu-dropdown-label, /* new Vector */
.mw-header .search-toggle /* new Vector */ {
	filter: invert(1);
}

.vector-user-links .uls-trigger > .vector-icon /* language selector on new Vector */ {
	filter: none;
}

.mw-body, /* new Vector */
#p-cactions,
#simpleSearch input {
	background-color: #fff;
}

.vector-page-titlebar,
.vector-page-toolbar,
.vector-body {
	margin: 0 0.5em;
}

#mw-navigation,
.skin-vector-legacy .mw-footer li {
	color: #fff;
}

@media print {
	.skin-vector-legacy .mw-footer li {
		color: #000;
	}
}

.mw-notification,
.oo-ui-window-frame {
	color: #000;
}

.vector-limited-width-toggle:not(:hover) {
	background: #f8f9fa;
}

/* links */
.mw-header .mw-logo, /* new Vector */
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited,
#mw-panel .mw-sidebar-action-link, /* new Vector */
.mw-sidebar-action-content a, /* new Vector */
#pt-userpage-2 a:not(.mw-selflink), /* new Vector */
#mw-head #p-personal a,
.skin-vector-legacy .mw-footer a {
	color: #00fffe;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover,
#mw-head #p-personal a:hover,
.skin-vector-legacy .mw-footer a:hover {
	color: #fff;
}

/* new Vector */
.mw-page-container {
	background: none;
	border-left: 0;
	border-right: 0;
}

/* new Vector */
#mw-panel {
	background: none;
	border: 0;
}

#p-Ricochet {
	display: none;
}

/* top nav */
.client-js #mw-page-base {
	height: calc(5em + 56px);
}

.client-js .vector-header-container {
	padding-top: 56px;
}

.client-js #mw-head,
.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-logo#ricochet-top-nav-logo {
	margin-right: 0.5rem;
    padding: 0.3125rem 0 0.3125rem;
}

#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;
	}
}