MediaWiki:Vector.css: Difference between revisions

From Ricochet Wiki
Content added Content deleted
(fix sidebar link color on new Vector)
(fix invisible footer text)
 
(7 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-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 26: Line 41:
#simpleSearch input {
#simpleSearch input {
background-color: #fff;
background-color: #fff;
}

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


#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 44: Line 63:
.oo-ui-window-frame {
.oo-ui-window-frame {
color: #000;
color: #000;
}

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


/* links */
/* links */
.mw-header .mw-logo, /* new Vector */
.mw-header .mw-logo, /* new Vector */
#mw-panel .vector-menu-content li a,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a,
#mw-panel .vector-menu-content li a:visited,
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited,
#mw-panel .mw-sidebar-action-link, /* new Vector */
#mw-panel .mw-sidebar-action-link, /* new Vector */
.mw-sidebar-action-content a, /* new Vector */
.mw-sidebar-action-content a, /* 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;
}
}


#mw-panel .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 85: Line 109:
}
}


.client-js .mw-page-container-inner {
.client-js .vector-header-container {
padding-top: 56px;
padding-top: 56px;
}
}
Line 117: 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;
	}
}