MediaWiki:Gadget-oreuiTheme.css

In other languages

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

Google Chrome, Firefox, Microsoft Edge, and Safari: Hold down the key and click the Reload toolbar button.
For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/*
OreUI inspired Minecraft Wiki skin by mschae23 (Bedrock panels and buttons)
Version 3.1.0
Original source: https://code.mschae23.de/mschae23/userstyles/src/commit/dcb78da6568a8d63c1575bd1ef2419535f6ddd87/src/minecraft-wiki-bedrock.user.css
Current upstream source: https://code.mschae23.de/mschae23/userstyles/src/branch/master/src/minecraft-wiki-bedrock.user.css
Licensed as CC0 (https://creativecommons.org/public-domain/cc0/)
Minecraft Wiki specific changes:
Since gadgets are applied before vector.css is, all rules must have higher specificity than the vector rules.
This gadget solves this by putting "html" in front of all rules.
Changes to the original source are licensed as CC BY-NC-SA 3.0 as per the usual wiki license.
*/
/* Change background */
htmlbody:not(.mcw-theme-disable-oreui){
background-color:#94c1eb;
background-image:url(filepath://OreUI-background.png);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:topleft;
background-size:cover;
}
/* Remove 3D design of skin */
htmlbody:not(.mcw-theme-disable-oreui)#mw-page-base,
htmlbody:not(.mcw-theme-disable-oreui)div#mw-head{
background:none;
}
htmlbody:not(.mcw-theme-disable-oreui)#left-navigationnav.vector-menu-tabsli:first-child::before,
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli::before,
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-dropdown::before,
htmlbody:not(.mcw-theme-disable-oreui)#mw-page-base::after,
htmlbody:not(.mcw-theme-disable-oreui)div#mw-page-base::after,
htmlbody:not(.mcw-theme-disable-oreui)#p-searchform::after,
htmlbody:not(.mcw-theme-disable-oreui)#p-searchform::before,
htmlbody:not(.mcw-theme-disable-oreui)#p-search#searchform.cdx-search-input__input-wrapper::before,
htmlbody:not(.mcw-theme-disable-oreui)#p-search#searchform.cdx-search-input__input-wrapper::after{
display:none;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli.selected,
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli:hover,
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli:focus,
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-dropdown:hover,
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-dropdown:focus,
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli,
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-dropdown,
htmlbody:not(.mcw-theme-disable-oreui).vector-menu-tabs-legacyli{
background:none;
}
htmlbody:not(.mcw-theme-disable-oreui)div#content,
htmlbody:not(.mcw-theme-disable-oreui)div#content::before,
htmlbody:not(.mcw-theme-disable-oreui)#footer::before{
border-top:none;
border-left:none;
}
htmlbody:not(.mcw-theme-disable-oreui)#mw-head-base{
height:calc(89px+4px);
}
/* Style the search field */
htmlbody:not(.mcw-theme-disable-oreui)#p-search{
margin:0;
padding:0;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-search#searchform{
margin-top:4px;
padding:0;
height:36px;
border:2px#1e1e1fsolid;
}
/* Bedrock has a dark inset at the top of the search bar, but it doesn't really look good here */
/* html body:not(.mcw-theme-disable-oreui) #p-search #searchform::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 border-top: 4px #242425 solid;
} */
htmlbody:not(.mcw-theme-disable-oreui)#p-search#searchform.cdx-search-input{
height:36px;
}
htmlbody:not(.mcw-theme-disable-oreui).cdx-search-input__input-wrapper,
htmlbody:not(.mcw-theme-disable-oreui).cdx-search-input__input-wrapper:hover{
border-left:none!important;
border-top:none!important;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-search#searchform.cdx-search-input__input-wrapper{
top:0;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-search#searchform.cdx-search-input__input-wrapper,
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark#p-search#searchform.cdx-search-input__input-wrapper{
background:#313233;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-search#searchform.cdx-text-input__input,
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark#p-search#searchform.cdx-text-input__input{
background:unset;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-search#searchform.cdx-text-input__input{
color:white;
height:36px;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-search#searchform.cdx-text-input__input::placeholder{
color:lightgray;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-search.cdx-button{
filter:invert(1);
}
/* Style the page tabs as buttons */
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli,
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-dropdown{
margin-right:0;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli{
border:2px#1e1e1fsolid;
background-color:#cfd0d3;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli:hover{
background-color:#afb0b4;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli.selected{
background-color:#248529;
margin-bottom:0;
margin-top:4px;
height:36px;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli::after{
content:"";
position:absolute;
bottom:0px;
left:0;
right:0;
height:4px;
background-color:#59585a;
box-shadow:0-3px0px-1px#dfdfe1;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli.selected::after{
display:none;
background:none;
box-shadow:none;
}
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark#p-namespacesa,
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark#p-associated-pagesa,
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark#p-viewsa,
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark#p-sharingspan,
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark#p-cactions-labelspan,
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-darkdiv#mw-headdiv.vectorMenuh4,
htmlbody:not(.mcw-theme-disable-oreui)#p-cactions-labelspan{
color:#1e1e1f;
}
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark.vector-menu-dropdown.vector-menu-heading::after{
filter:unset;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli.selectedspan{
box-shadow:0px16.5px0pxcalc((2px-15px)/2)white;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsullia{
padding:7.5px17px7.5px17px;
color:#1e1e1f;
border:2px#dddee0solid;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabslia{
margin-right:0;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-tabsulli.selecteda{
padding-bottom:3.5px;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-namespacesli.selecteda,
htmlbody:not(.mcw-theme-disable-oreui)#p-associated-pagesli.selecteda,
htmlbody:not(.mcw-theme-disable-oreui)#p-viewsli.selecteda{
color:white;
border:2px#58ac56solid;
}
htmlbody:not(.mcw-theme-disable-oreui).vector-menu-tabs.mw-watchlink.icona::before{
left:1em;
top:0.5em;
}
htmlbody:not(.mcw-theme-disable-oreui)#ca-watch>a{
padding:18px0px18px0px;
}
@mediascreen{
htmlbody:not(.mcw-theme-disable-oreui)#ca-watch>a>span{
display:none;
}
htmlbody:not(.mcw-theme-disable-oreui)#ca-watch>a{
}
}
htmlbody:not(.mcw-theme-disable-oreui).vector-menu-tabs.mw-watchlink.icona{
margin-right:0;
margin-bottom:0;
}
/* Style the "More" dropdown next to the tabs */
htmlbody:not(.mcw-theme-disable-oreui)#p-views,
htmlbody:not(.mcw-theme-disable-oreui)#p-cactions{
margin-right:0;
padding-right:0;
}
htmlbody:not(.mcw-theme-disable-oreui).vector-menu-dropdown.vector-menu-heading{
margin-right:0;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-search{
margin-left:8px;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-dropdown{
border:2px#1e1e1fsolid;
background-color:#cfd0d3;
margin-right:0.5em;
margin-left:0;
height:40px;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-dropdown:hover{
background-color:#afb0b4;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-dropdown::after{
content:"";
position:absolute;
bottom:0px;
left:0;
right:0;
height:4px;
background-color:#59585a;
box-shadow:0-3px0px-1px#dfdfe1;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-dropdownlabel{
padding:7.5px17px7.5px17px!important;
color:#1e1e1f;
border:2px#dddee0solid;
}
/* Style the navigation side bar */
htmlbody:not(.mcw-theme-disable-oreui)#p-logo+.mw-portlet.vector-menu-heading{
/* Uncomment this line to unhide the "Navigation" header of the first sidebar box */
/* display: block; */
}
htmlbody:not(.mcw-theme-disable-oreui).vector-menu-portal{
margin-bottom:2px;
padding:0;
border:2px#1e1e1fsolid;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menu-portal{
margin-top:0.5em;
background-color:#232324;
}
htmlbody:not(.mcw-theme-disable-oreui).vector-menu-portal.vector-menu-content{
background-color:#232324;
border:2px#313233solid;
}
htmlbody:not(.mcw-theme-disable-oreui).vector-menu-portal.vector-menu-content{
margin-left:0;
padding-left:0.5em;
}
htmlbody:not(.mcw-theme-disable-oreui)div#mw-panelnav.vector-menu-portalh3{
background:none;
background-color:#494a4b;
padding:0.5em;
border:2px#686869solid;
}
htmlbody:not(.mcw-theme-disable-oreui)div#mw-panelnav.vector-menu-portal.collapsedh3{
background-image:unset;
border-bottom:2px#686869solid;
}
htmlbody:not(.mcw-theme-disable-oreui).vector-menu-portal.vector-menu-heading{
margin:0;
}
htmlbody:not(.mcw-theme-disable-oreui)nav.vector-menuh3span{
margin-right:0;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-personal{
right:10px;
top:10px;
margin-right:0;
margin-left:0;
/* min-width: 5em;
 width: 20vw;
 max-width: 20em; */
background-color:#494a4b;
border:2px#1e1e1fsolid;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-personalul{
padding-left:0;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-personal.vector-menu-content-list{
background-color:#232324;
border:2px#313233solid;
padding-right:0.5em;
padding-top:1px;
padding-bottom:2px;
}
htmlbody:not(.mcw-theme-disable-oreui).vector-user-menu-legacyli{
padding-top:0.3em;
padding-bottom:0.3em;
}
htmlbody:not(.mcw-theme-disable-oreui)pt-notifications-alert.vector-user-menu-legacyli,
htmlbody:not(.mcw-theme-disable-oreui)pt-notifications-notice.vector-user-menu-legacyli{
padding-bottom:0;
}
htmlbody:not(.mcw-theme-disable-oreui)#p-personala{
color:white;
}
htmlbody:not(.mcw-theme-disable-oreui).oo-ui-icon-bell,
htmlbody:not(.mcw-theme-disable-oreui).mw-ui-icon-bell::before,
htmlbody:not(.mcw-theme-disable-oreui).oo-ui-icon-tray,
htmlbody:not(.mcw-theme-disable-oreui).mw-ui-icon-tray::before{
filter:invert(1);
}
htmlbody:not(.mcw-theme-disable-oreui).vector-user-menu-legacy#pt-anonuserpage,
htmlbody:not(.mcw-theme-disable-oreui).vector-user-menu-legacy#pt-tmpuserpage,
htmlbody:not(.mcw-theme-disable-oreui).vector-user-menu-legacy#pt-userpagea{
filter:invert(1);
color:black;
}
htmlbody:not(.mcw-theme-disable-oreui)#pt-notifications-alert,
htmlbody:not(.mcw-theme-disable-oreui)#pt-notifications-notice{
padding-top:0;
padding-bottom:0;
}
htmlbody:not(.mcw-theme-disable-oreui)#pt-notifications-notice.mw-echo-notifications-badge,
htmlbody:not(.mcw-theme-disable-oreui)#pt-notifications-alert.mw-echo-notifications-badge{
top:0;
width:14px;
height:14px;
background-size:14px14px;
}
htmlbody:not(.mcw-theme-disable-oreui).vector-user-menu-legacy#pt-anonuserpage,
htmlbody:not(.mcw-theme-disable-oreui).vector-user-menu-legacy#pt-tmpuserpage,
htmlbody:not(.mcw-theme-disable-oreui).vector-user-menu-legacy#pt-userpagea{
padding-top:0;
background-size:14px;
background-position:unset;
}
/* Style page contents */
htmlbody:not(.mcw-theme-disable-oreui)div#content{
border:2px#1e1e1fsolid;
}
htmlbody:not(.mcw-theme-disable-oreui)#content::before,
htmlbody:not(.mcw-theme-disable-oreui)#content::after{
display:none;
}
htmlbody:not(.mcw-theme-disable-oreui)a:not(.new){
color:#27852b;
}
/* Change red links on page buttons to always use light mode color */
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark#p-namespaces.newa,
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark#p-associated-pages.newa,
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-dark#p-views.newa{
color:#BA0000;
}
htmlbody:not(.mcw-theme-disable-oreui).notaninfobox{
border:1px#a2a9b1solid;
padding:0;
}
htmlbody:not(.mcw-theme-disable-oreui).infobox-title{
background-color:#248529;
border:2px#58ac56solid;
color:white;
}
/* Style the table of contents (currently disabled) */
/* html body:not(.mcw-theme-disable-oreui) #toc {
 background-color: #343536;
 border: 2px #1e1e1f solid;
 padding: 0;
}
html body:not(.mcw-theme-disable-oreui) #toc > * {
 padding: 7px;
}
html body:not(.mcw-theme-disable-oreui) #toc > .toctitle {
 background-color: #494a4b;
 border: 2px #727273 solid;
}
html body:not(.mcw-theme-disable-oreui) .toctitle > h2 {
 color: white;
}
html body:not(.mcw-theme-disable-oreui) .toctogglelabel {
 color: #3177e8;
}
html body:not(.mcw-theme-disable-oreui) .tocnumber {
 color: white;
}
html body:not(.mcw-theme-disable-oreui) .toctext {
 color: #34b735;
}
html body:not(.mcw-theme-disable-oreui) #toc > ul {
 margin-top: 0;
 margin-bottom: 0;
 border: 2px #313233 solid;
 background-color: #232324;
} */
/* Style the footer */
htmlbody:not(.mcw-theme-disable-oreui)#footer{
padding:0;
margin-top:calc(0.75em+0px);
margin-left:calc(11em+0px);
margin-right:calc(10px+0px);
margin-bottom:calc(10px+0px);
background-color:#232324;
border:2px#313233solid;
/* box-shadow: 0 0 0 2px #1e1e1f; */
}
htmlbody:not(.mcw-theme-disable-oreui).mw-footer::after{
content:"";
display:block;
clear:both;
line-height:0;
width:100%;
}
htmlbody:not(.mcw-theme-disable-oreui)#footer-info{
padding:0;
padding-left:0.5em;
}
htmlbody:not(.mcw-theme-disable-oreui)#footer-places{
display:inline-block;
float:left;
padding:0;
padding-left:0.5em;
margin-top:0;
}
htmlbody:not(.mcw-theme-disable-oreui)#footer-places>li{
float:unset;
display:inline-block;
}
htmlbody:not(.mcw-theme-disable-oreui)#footer-icons{
margin-right:0.5rem;
}
htmlbody:not(.mcw-theme-disable-oreui)#footer-icons>li{
padding:0;
margin-top:0.5rem;
margin-bottom:0.5rem;
}
/*** START MCW FIXES ***/
/*** OreUI fixes by FireX420 ***/
/** OreUI theme + sticky header gadget fixes **/
/* change the sticky header background from the respective surface rule to the OreUI background image */
htmlbody:not(.mcw-theme-disable-oreui)#stickyTop.stick{
background-image:url(filepath://OreUI-background.png);
background-size:1920px;
background-position-y:52px;
}
@mediascreenand(min-width:720px){
htmlbody:not(.mcw-theme-disable-oreui)#stickyTop.stick{
background-position-x:-11em;
}
}
/* change the styles for the StickyTopBack element to account for OreUI theme changes */
htmlbody:not(.mcw-theme-disable-oreui)#stickyTop.stick#stickyTopBack{
width:calc(100%-var(--sticky-header-left-margin)-14px);
left:2px;
height:2px;
background:#1e1e1f;
}
/* get rid of the added after element since it's not needed with the OreUI theme */
htmlbody:not(.mcw-theme-disable-oreui)#stickyTop.stick#stickyTopBack::after{
display:none;
}
/* and finally a small fix for OreUI + sticky header + fixed width */
@mediascreenand(min-width:1200px){
htmlbody:not(.mcw-theme-disable-oreui)#stickyTop.stick.fixedWidth#stickyTopBack{
width:calc(100%-4px);
}
}
/** OreUI theme + dark mode fixes **/
/* change the link color to one that's more readable */
htmlbody:not(.mcw-theme-disable-oreui).wgl-theme-darka:not(.new){
color:#70dea0;
}