MediaWiki:Vector.css: Difference between revisions
Content added Content deleted
(fix missing invisible footer text) |
(fix invisible footer text) |
||
(22 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will affect users of the Vector skin */ |
/* CSS placed here will affect users of the Vector skin */ |
||
body { |
|||
background: #000 url('https://static.miraheze.org/ricochetwiki/2/22/Stars_background.jpg'); |
background: #000 url('https://static.miraheze.org/ricochetwiki/2/22/Stars_background.jpg'); |
||
color: #fff; |
|||
} |
} |
||
@media print { |
|||
html:not(.darkmode) #mw-page-base { |
|||
body { |
|||
background: none; |
|||
} |
|||
} |
|||
#mw-page-base, |
|||
.vector-feature-zebra-design-disabled .vector-header-container { |
|||
background: none; |
background: none; |
||
} |
} |
||
@media screen and (min-width: 1000px) { |
|||
html:not(.darkmode) #pt-uls .uls-trigger:before, |
|||
.vector-feature-zebra-design-disabled.client-js.vector-sticky-header-enabled .vector-sticky-header-visible .vector-sticky-header-container { |
|||
html:not(.darkmode) .mw-echo-notifications-badge { |
|||
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); |
filter: invert(1); |
||
} |
} |
||
.vector-user-links .uls-trigger > .vector-icon /* language selector on new Vector */ { |
|||
html:not(.darkmode) #p-cactions, |
|||
filter: none; |
|||
html:not(.darkmode) #simpleSearch input { |
|||
} |
|||
.mw-body, /* new Vector */ |
|||
#p-cactions, |
|||
#simpleSearch input { |
|||
background-color: #fff; |
background-color: #fff; |
||
} |
} |
||
.vector-page-titlebar, |
|||
#footer li { |
|||
.vector-page-toolbar, |
|||
.vector-body { |
|||
margin: 0 0.5em; |
|||
} |
|||
#mw-navigation, |
|||
.skin-vector-legacy .mw-footer li { |
|||
color: #fff; |
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 */ |
/* links */ |
||
.mw-header .mw-logo, /* new Vector */ |
|||
html:not(.darkmode) #mw-panel .portal .body li a, |
|||
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a, |
|||
html:not(.darkmode) #mw-panel .portal .body li a:visited, |
|||
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited, |
|||
html:not(.darkmode) #p-personal a, |
|||
#mw-panel .mw-sidebar-action-link, /* new Vector */ |
|||
html:not(.darkmode) #footer a { |
|||
.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; |
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; |
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; |
|||
} |
|||
} |
} |
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;
}
}