MediaWiki:Common.css: Difference between revisions

m
oops
imported>Ttv pedro270707
m (Changed shadows too)
imported>Ttv pedro270707
m (oops)
 
(84 intermediate revisions by 2 users not shown)
Line 1: Line 1:
html {
--table-header-background: #eaecf0;
--table-border: #a2a9b1;
--table-background-color: #f8f9fa;
--code-background-color: #f8f9fa;
--code-border: #eaecf0;
--default-text-color: #000000;
--infobox-out-background: #c6c6c6;
--tooltip-background: rgba(0,0,0,0.7529411765);
}
html.client-darkmode {
--table-header-background: #444444;
--table-background-color: #222226;
--code-background-color: #000011;
--code-border: #222222;
--default-text-color: #dddddd;
--infobox-out-background: #222226;
}
@font-face {
@font-face {
font-family: 'Minecraft';
font-family: 'Minecraft';
Line 15: Line 35:
font-style: normal;
font-style: normal;
font-display: fallback;
font-display: fallback;
}
.vector-menu-portal .vector-menu-content li a:visited {
color: #69bad9;
}
.vector-menu-portal .vector-menu-content li a {
color: #aa69cf;
}
}


Line 24: Line 52:
background-image: none !important;
background-image: none !important;
padding-right: 0 !important;
padding-right: 0 !important;
}
/* Collapsible table button restyle */
.mw-collapsible-toggle {
margin-left: 0.8em;
}
.mw-collapsible-text::before {
content: "hide";
display: inline;
font-size: 14px;
}
.mw-collapsible-toggle-collapsed .mw-collapsible-text::before {
content: 'show';
}
.mw-collapsible-text {
font-size: 0;
}
/* Module:Sprite p.doc() */
.spritedoc-ul {
list-style-type: none;
display: flex;
align-items: stretch;
flex-wrap: wrap;
margin: 0 !important;
padding: 0 !important;
}
.spritedoc-cell {
display: flex;
align-items: center;
border: 1px solid var(--table-border);
background-color: var(--table-background-color);
padding: 5px;
width: 14em;
margin: 0 0 -1px -1px;
}
.spritedoc-image {
margin-right: 5px;
}
.spritedoc-names {
margin: 0 !important;
}
.spritedoc-name {
display: block;
}
}


/* Adds "BTA WIKI" overlay on wiki icon */
/* Adds "BTA WIKI" overlay on wiki icon */
.mw-wiki-logo::before {
/*.mw-wiki-logo::before {
     content: '';
     content: '';
     width: 160px;
     width: 160px;
Line 37: Line 116:
     position: absolute;
     position: absolute;
     image-rendering: pixelated;
     image-rendering: pixelated;
}
}*/


#mw-page-base {
#mw-page-base {
Line 67: Line 146:
.client-darkmode #content, .client-darkmode #content h1, .client-darkmode #content h2, .client-darkmode #content h3, .client-darkmode #content h4, .client-darkmode #content h5, .client-darkmode #content h6 {
.client-darkmode #content, .client-darkmode #content h1, .client-darkmode #content h2, .client-darkmode #content h3, .client-darkmode #content h4, .client-darkmode #content h5, .client-darkmode #content h6 {
     background-color: #111116;
     background-color: #111116;
     color: #ddd;
     color: var(--default-text-color);
}
}


Line 83: Line 162:
}
}


.client-darkmode .catlinks {
.catlinks {
     background-color: #222226;
     background-color: var(--table-background-color);
}
}


/* ignore the errors, this code is perfectly valid and compatible with most modern browsers */
/* ignore the errors, this code is perfectly valid and compatible with most modern browsers */
.client-darkmode pre:not(.documentation pre), .client-darkmode code:not(.documentation code), .client-darkmode .mw-code:not(.documentation .mw-code), .client-darkmode table code {
pre:not(.documentation pre), code:not(.documentation code), .mw-code:not(.documentation .mw-code), table code {
     filter: invert(1) hue-rotate(180deg);
     background-color: var(--code-background-color);
    color: var(--default-text-color);
    border: 1px solid var(--code-border);
}
}


.client-darkmode table, .client-darkmode table.ambox-content, .client-darkmode table.toccolours, .client-darkmode .mw-notification, .client-darkmode .mwe-popups, .client-darkmode .infobox, .client-darkmode .toc, .client-darkmode .thumbinner, .client-darkmode .wikitable, .client-darkmode .cbnnr-main, .client-darkmode .cx-callout, .client-darkmode #simpleSearch, .client-darkmode #searchInput, .client-darkmode #centralNotice .cnotice {
table, table.ambox-content, table.toccolours, .mw-notification, .mwe-popups, .infobox, .toc, .thumbinner, .wikitable, .cbnnr-main, .cx-callout, #simpleSearch, #searchInput, #centralNotice .cnotice {
background-color: #222226 !important;
background-color: var(--table-background-color) !important;
}
}


Line 100: Line 181:
}
}


.client-darkmode .wikitable > tr > th, .client-darkmode .wikitable > * > tr > th {
.wikitable > tr > th, .wikitable > * > tr > th {
     background-color: #444444;
     background-color: var(--table-header-background);
    border: 1px solid var(--table-border);
}
}


Line 110: Line 192:
.client-darkmode .tocnumber {
.client-darkmode .tocnumber {
     color: #aaa;
     color: #aaa;
}
.main-page-logo {
    display: inline-block;
    height: 110px;
    width: 548px;
}
.main-page-logo:hover .bta-logo {
    display: none;
}
.minecraft-retro-logo {
    display: none;
}
.main-page-logo:hover .minecraft-retro-logo {
    display: inline;
}
}


Line 168: Line 232:
.infobox {
.infobox {
padding: 8px;
padding: 8px;
min-width: 200px;
    min-width: 200px;
max-width: 300px;
    max-width: 300px;
text-align: center;
    text-align: center;
    box-sizing: border-box;
}
}


Line 186: Line 251:
image-rendering: pixelated;
image-rendering: pixelated;
image-rendering: crisp-edges;
image-rendering: crisp-edges;
background-color: #c6c6c6;
background-color: var(--infobox-out-background) !important;
}
}


Line 196: Line 261:
border-left: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-right: 2px solid black;
background-color: #555555;
background-color: #555555 !important;
}
}


Line 203: Line 268:
     width: 100%;
     width: 100%;
     text-align: left;
     text-align: left;
    background-color: transparent !important;
}
}


Line 266: Line 332:
/* Message boxes */
/* Message boxes */
.msgbox {
.msgbox {
width: 80%;
width: 70%;
padding: 5px;
padding: 5px;
box-sizing: border-box;
box-sizing: border-box;
Line 580: Line 646:
}
}


.c-n .c-1, .c-n .c-2, .c-n .c-3, .c-n .c-4, .c-n .c-5, .c-n .c-6, .c-n .c-7, .c-n .c-8, .c-n .c-9, .c-n .c-a, .c-n .c-b, .c-n .c-c, .c-n .c-d, .c-n .c-e, .c-n .c-f, .c-n .c-g, .c-n .c-h {
.c-n .c-0, .c-n .c-1, .c-n .c-2, .c-n .c-3, .c-n .c-4, .c-n .c-5, .c-n .c-6, .c-n .c-7, .c-n .c-8, .c-n .c-9, .c-n .c-a, .c-n .c-b, .c-n .c-c, .c-n .c-d, .c-n .c-e, .c-n .c-f, .c-n .c-g, .c-n .c-h {
text-decoration: underline 0.125em;
text-decoration: underline 0.125em;
}
}


.c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-a, .c-b, .c-c, .c-d, .c-e, .c-f, .c-g, .c-h {
.c-0, .c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-a, .c-b, .c-c, .c-d, .c-e, .c-f, .c-g, .c-h {
position: relative;
position: relative;
font-family: Minecraft;
font-family: Minecraft;
font-size: 16px;
font-size: 16px;
word-spacing: 0.25em;
word-spacing: 0.375em;
}
}


Line 596: Line 662:
border: 0.125em solid transparent;
border: 0.125em solid transparent;
background-color: #000000;
background-color: #000000;
background-color: rgba(0,0,0,0.7529411765);
background-color: var(--tooltip-background);
font-family: Minecraft,"WenQuanYi Bitmap Song",SimSun,Unifont,NISC18030,Beijing,Courier,sans-serif;
font-family: Minecraft,"WenQuanYi Bitmap Song",SimSun,Unifont,NISC18030,Beijing,Courier,sans-serif;
word-spacing: 0.25em;
word-spacing: 0.375em;
margin: 0.125em 0.125em;
margin: 0.125em 0.125em;
padding: 0 0.375em 0.375em 0.375em;
padding: 0 0.25em 0.375em 0.25em;
line-height: 1.125em;
line-height: 1.125em;
white-space: nowrap;
white-space: nowrap;
Line 633: Line 699:


.shadow-line {
.shadow-line {
position: absolute;
    left: 0.5em;
    top: 0.125em;
     z-index: -1;
     z-index: -1;
}
}
Line 660: Line 723:
display: inline-block;
display: inline-block;
top: 0.125em;
top: 0.125em;
left: 0.5em;
left: 0.375em;
}
}


Line 702: Line 765:
   100% {
   100% {
     transform: translate(-50%, -50%) scale(1.1) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.1) rotateZ(-20deg);
  }
}
/* Main page */
.page-Main_Page .firstHeading {
display: none;
}
.main-page-logo {
background-color: rgb(30,100,200);
background-color: rgba(80,150,255,0.4);
border: 1px solid rgb(100,100,160);
padding: 40px 15px;
display: flex;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
gap: 15px;
background-image: url(https://static.miraheze.org/btawiki/f/f5/BetterTownscreenshot1.png);
background-attachment: fixed;
background-size: 100vw;
background-size: 100svw;
}
.main-page-block {
position: relative;
border: 1px solid var(--table-border);
padding: 5px;
padding-top: 40px;
}
.main-page-blocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
grid-template-areas: 'a a d'
'b b d'
'c c e';
}
.main-page-block-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
background-image: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.6)), url(https://static.miraheze.org/btawiki/f/f5/BetterTownscreenshot1.png);
background-attachment: fixed;
image-rendering: pixelated;
box-shadow: rgb(0 0 0 / 10%) 0 0.25em;
display: flex;
align-items: center;
padding-left: 10px;
box-sizing: border-box;
background-size: 100vw;
background-size: 100svw;
}
@media only screen and (max-width: 900px) {
  .main-page-blocks {
  grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 'a a a'
'b b b'
'c c c'
'd d d'
'e e e';
   }
   }
}
}