MediaWiki:Common.css: Difference between revisions

Latest revision as of 22:10, 31 March 2026

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:GlitchText.css&only=styles";
:root {
    --pull-quote-max-width: 80%;
    --pull-quote-text-color:  rgb(255,255,255);
    --pull-quote-mark-color: rgb(255,255,255);
    --pull-quote-mark-font: serif;
    --pull-quote-hyphens: auto;
    --pull-quote-frame-color: #bbb;
}

/* #content added as a parent selector to the following in order to override default blockquote styles. */

#content .pull-quote {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--pull-quote-max-width);
    margin: 1em auto;
    font-size: 1em;
    line-height: 1.8;
    overflow: hidden;
}

#content .pull-quote__text {
    flex-basis: 100%;
    position: relative;
    padding: 0 2em;
    hyphens: var(--pull-quote-hyphens);
    color: var(--pull-quote-text-color);
    font-size: inherit;
}

#content .pull-quote__text::before, #content .pull-quote__text::after {
    display: inline;
    position: absolute;
    font-size: 3em;
    font-family: var(--pull-quote-mark-font);
    font-weight: 700;
    color: var(--pull-quote-mark-color);
    pointer-events: none;
}

#content .pull-quote__text::before {
    content: "“";
    top: 0;
    left: 0;
    line-height: 1;
}

#content .pull-quote__text::after {
    content: "”";
    bottom: 0;
    right: 0.1em; /* avoid clipping to edge due to italics */
    line-height: 0.2;
}

#content .pull-quote__text p:last-child {
    margin-bottom: 0;
}

/* render newline (\n) characters inside quote contents */
#content .pull-quote__text p {
    white-space: pre-line;
}
#content .pull-quote__line p {
    display: inline;
    white-space: pre-line;
}

#content .pull-quote__source {
    margin-left: auto;
}

#content .pull-quote__source cite {
    display: inline;
}

#content .pull-quote__source::before {
    content: "—"; 
}

#content .pull-quote--right, #content .pull-quote--left {
    border: 1px solid var(--pull-quote-frame-color);
    border-left: 0;
    border-right: 0;
    padding: 1em 0;
    text-align: justify;
}

#content .pull-quote--right {
    float: right;
    margin: 1em 0 1em 2em;
}

#content .pull-quote--left {
    float: left;
    margin: 1em 2em 1em 0;
}

@font-face {
  font-family: 'csfont';
  src: url('/fonts/cs_regular.ttf'),
  font-weight: normal;
  font-style: normal;
}
.mw-wiki-title{
    font-family:"csfont" !important;
}

#mw-content-container{
background:none !important;}




/* untouchables smh */

@media screen and (prefers-color-scheme: dark) {

.skin-theme-clientpref-night .infobox {
    background: #333 !important;
    border: 1px solid #aaa;
}


.skin-theme-clientpref-night .tabs-label {
   background: #959595 !important;
}

}

.color-bar{
display:none;}

.infobox td, th {
     font-size: 0.75rem;
}

.infobox {
    background: #eee;
    border: 1px solid #aaa;
    float: right;
    margin: 0 0 .5em .5em;
    padding: 1em;
    width: 15rem;
}
.infobox-title {
    font-size: 1.5em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}


.infobox-image img {
   max-width: 100%;
   height: auto;
}

.infobox-table th {
    text-align: left;
    vertical-align: top;
    width: 1rem;
}
.infobox-table td {
    vertical-align: top;
}

@media screen and (max-width: 600px) {
  .infobox{
      float:none;
  }
  .mbox-w {
      flex-direction:column !important;
   }
}

.sitenotice img{
object-fit: scale-down;
width: 100%;
}
.sitenotice p{
display:flex !important;
align-items:center;
justify-content:center;
}
.sitenotice b{
height:fit-content;
}

body.cat-Corrupted_Characters {
background-image:url(https://www.wiki.zeebawx.com/images/1/14/VoidBackground.png);
background-color:black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
img
{
background-color: transparent !important;
}

body.page-Void_Rift {
background-image:url(https://www.wiki.zeebawx.com/images/1/14/VoidBackground.png);
background-color:black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
img
{
background-color: transparent !important;
}

body.page-Corrotaev {
background-image:url(https://www.wiki.zeebawx.com/images/1/14/VoidBackground.png);
background-color:black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
img
{
background-color: transparent !important;
}

body.page-Corruption_Event {
background-image:url(https://www.wiki.zeebawx.com/images/1/14/VoidBackground.png);
background-color:black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
img
{
background-color: transparent !important;
}

body.page-THEM{
background-color:black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
img
{
background-color: transparent !important;
}

body.page-Djinn {
background-image:url(https://www.wiki.zeebawx.com/images/9/97/DjinnBackground.png);
background-color:black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
img
{
background-color: transparent !important;
}

body.page-Z2{
background-image:url(https://www.wiki.zeebawx.com/images/8/8f/Z2Background.png);
background-color:black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
img
{
background-color: transparent !important;
}

body {
background-image:url(https://www.wiki.zeebawx.com/images/b/bf/ZBWikiBG.png);
background-color:black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: top;
}
img
{
background-color: transparent !important;
}

.mbox-w {
    /*
    * ||| Mbox 
    * The base styling of mbox
    */
    --pre: #f2f2f29a;
    
    --mbox-w-basic-border: #36c;
    --mbox-w-background: #ffffff1a;
    --mbox-w-background--speedy: #fee7e6;
    --mbox-w-border--speedy: #b32424;
    
    --mbox-w-border--delete: #b32424;
    
    --mbox-w-border--content: #f28500;
    
    --mbox-w-border--style: #fc3;
    
    --mbox-w-border--move: #93c;
    
    --mbox-w-border--protection: #a2a9b1;
    
    --mbox-w-border--license: #88a;
    
    --mbox-w-border--featured: #cba135;
    
    /* 
    *  Ambox
    * Article Message BOX
    */
    --ambox-w-border: #a2a9b1;
    --ambox-w-border-left: #36c;
    
    --ambox-w-border-left--speedy: #b32424;
    
    --ambox-w-border-left--delete: #b32424;
    
    --ambox-w-border-left--content: #f28500;
    
    --ambox-w-border-left--style: #fc3;
    
    --ambox-w-border-left--notice: #36c;
    
    --ambox-w-border-left--move: #93c;
    
    --ambox-w-border-left--protection: #a2a9b1;
    
    /* Featured Mbox */
    --ambox-w-border-left--featured: #cba135;
    
    /* 
    * ||| Cmbox
    * Category Message BOX
    */
    --cmbox-w-border: #a2a9b1;
    --cmbox-w-background: #dfe8ff;
    
    /* No speedy, default mbox speedy */
    
    --cmbox-w-background--delete: #fee7e6;
    
    --cmbox-w-background--content: #ffe7ce;
    
    --cmbox-w-background--style:  #fff9db;
    
    --cmbox-w-background--notice: #d8e8ff;
    
    --cmbox-w-background--move: #e4d8ff;
    
    --cmbox-w-background--protection: #efefe1;
    
    /* */
    --tmbox-w-background: #f8eaba;
    
    /*
    * ||| Other mboxes
    * Uses the default styling
    */
}

/* 
* ||- CSS Vars (dark)
*/
.theme-fandomdesktop-dark .mbox-w {
    /*
    * ||| Mbox 
    * The base styling of mbox
    */
    --pre: #585858b5;
    
    --mbox-w-basic-border: #183266;
    --mbox-w-background--speedy: #231515;
    --mbox-w-border--speedy: #661414;
    
    --mbox-w-border--delete: #661414;
    
    --mbox-w-border--content: #ab6005;
    
    --mbox-w-border--style: #ba9422;
    
    --mbox-w-border--notice: #183266;
    --mbox-w-border--move: #6a248c;
    
    --mbox-w-border--protection: #5e6369;
    
    --mbox-w-border--license: #505063;
    
    --mbox-w-border--featured: #9c7b27;
    
    /* 
    *  Ambox
    * Article Message BOX
    */
    --ambox-w-border: #474e57;
    --ambox-w-border-left: #21448a;
    
    --ambox-w-border-left--speedy: #661414;
    
    --ambox-w-border-left--delete: #661414;
    
    --ambox-w-border-left--content: #ab6005;
    
    --ambox-w-border-left--style: #ba9422;
    
    --ambox-w-border-left--notice: #21448a;
    
    --ambox-w-border-left--move: #6a248c;
    
    --ambox-w-border-left--protection: #474e57;
    
    /* Featured Mbox */
    --ambox-w-border-left--featured: #cba135;
    
    /* 
    * ||| Cmbox
    * Category Message BOX
    */
    --cmbox-w-border: #474e57;
    --cmbox-w-background: #363228;
    
    /* No speedy, default mbox speedy */
    
    --cmbox-w-background--delete: #422d2c;
    
    --cmbox-w-background--content: #4f4336;
    
    --cmbox-w-background--style:  #4a4630;
    
    --cmbox-w-background--notice: #252f3d;
    
    --cmbox-w-background--move: #392f4f;
    
    --cmbox-w-background--protection: #3d3d23;
    
    /* |||Tmbox */
    --tmbox-w-background: #3d3003;
    
    /*
    * ||| Other mboxes
    * Uses the default styling
    */
}

/* 
* ||- Main mbox styling
*
*/
.mbox-w {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: auto;
    box-sizing: border-box;
    margin: 4px 5%;
    border-width: 1px;
    border-style: solid;
    background: transparent;
    padding: 0.25em;
    font-size: 95%;
}
 
.mbox-w-small {
    clear: right;
    float: right;
    margin: 4px 0 2px 1em;
    box-sizing: border-box;
    width: 238px;
    font-size: 88%;
    line-height: 1.25em;
}
 
.mbox-w-small.ambox-w {
    clear: left;
    float: left;
    margin: 4px 1em 2px 0;
}
 
.mbox-w pre {
    background-color: var(--pre);
}
 
.mbox-w div.mbox-w-message {
    flex-basis: 100%;
    padding: 0.25em;
    text-align: left;
}
 
.mbox-w .mbox-w-date,
.mbox-w .mbox-w-info {
    font-size:85%;
}
 
.mbox-w div.mbox-w-image {
    padding: 0.25em;
}
 
.ambox-w {
    margin: 0 5%;
    border-color: var(--ambox-w-border);
    border-left: 10px solid var(--ambox-w-border-left);
    background-color: var(--mbox-w-background);
}
 
.cmbox-w {
    border-color: var(--cmbox-w-border);
    background-color: var(--cmbox-w-border);
}
 
.imbox-w {
    border-width: 3px;
    border-color: var(--mbox-w-basic-border);
    background-color: var(--mbox-w-background);
}
 
.xmbox-w {
    border-width: 2px;
    border-color: var(--mbox-w-basic-border);
    border-style: dotted;
    background-color: var(--mbox-w-background);
}
 
.tmbox-w {
    border-width: 2px;
    border-color: var(--mbox-w-basic-border);
    background: var(--tmbox-w-background);
}
 
.ombox-w {
    border-color: var(--mbox-w-basic-border);
    background-color: var(--mbox-w-background);
}
 
.fmbox-w {
    margin: 4px 0;
    background-color: var(--mbox-w-background);
}
 
.mbox-w-small.imbox-w,
.mbox-w-small.xmbox-w,
.mbox-w-small.tmbox-w {
    border-width: 1px;
}
 
.mbox-w-speedy,
.mbox-w-warning {
    border-color: var(--mbox-w-border--speedy);
}
 
.ambox-w.mbox-w-speedy {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--speedy);
}
 
.cmbox-w.mbox-w-speedy,
.xmbox-w.mbox-w-speedy,
.xmbox-w.mbox-w-delete,
.ombox-w.mbox-w-speedy,
.ombox-w.mbox-w-delete {
    border-width: 3px;
}
 
.mbox-w-delete {
    border-color: var(--mbox-w-border--delete);
}
 
.ambox-w.mbox-w-delete {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--delete);
}
 
.cmbox-w.mbox-w-delete {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--delete);
}
 
.mbox-w-content {
    border-color: var(--mbox-w-border--content);
}
 
.ambox-w.mbox-w-content {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--content);
}
 
.cmbox-w.mbox-w-content {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--content);
}
 
.mbox-w-style {
    border-color: var(--mbox-w-border--style);
}
 
.ambox-w.mbox-w-style {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--style);
}
 
.cmbox-w.mbox-w-style {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--style);
}
 
.mbox-w-notice {
    border-color: var(--mbox-w-border--notice);
}
 
.ambox-w.mbox-w-notice {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--notice);
}
 
.cmbox-w.mbox-w-notice {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--notice);
}
 
.mbox-w-move {
    border-color: var(--mbox-w-border--move);
}
 
.ambox-w.mbox-w-move {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--move);
}
 
.cmbox-w.mbox-w-move {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--move);
}
 
.mbox-w-protection {
    border-color: var(--mbox-w-border--protection);
}
 
.ambox-w.mbox-w-protection {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--protection);
}
 
.cmbox-w.mbox-w-protection {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--protection);
}
 
.mbox-w-license {
    border-color: var(--mbox-w-border--license);
}
 
.mbox-w-featured {
    border-color: var(--mbox-w-border--featured);
}
 
.ambox-w.mbox-w-featured {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-color--featured);
}
 
.ambox-w + .ambox-w {
    margin-top: -1px;
}

@media print {
    .mbox-w { 
        display: none;
    }
} /* no mbox when printing */

.rainbow {
  font-size: 32px;
  animation: color-change 6s infinite;
}
@keyframes color-change {
  0%   { color: red; }
  12%  { color: orange; }
  24%  { color: yellow; }
  36%  { color: green; }
  48%  { color: cyan; }
  60%  { color: blue; }
  72%  { color: indigo; }
  84% { color: violet; }
  100% { color: red; }
}

:root {
  --glitch-text-offset: 3px;
  --glitch-text-offset--neg: -3px;
  --glitch-text-color-1: cyan;
  --glitch-text-color-2: fuchsia;
}

.glitch-text {
  text-shadow: var(--glitch-text-offset) var(--glitch-text-offset--neg) 0 var(--glitch-text-color-1), var(--glitch-text-offset--neg) var(--glitch-text-offset) 0 var(--glitch-text-color-2);
  animation: glitch-text 250ms linear infinite;
}

@keyframes glitch-text {
  0% {
    --glitch-text-offset: -3px;
    --glitch-text-offset--neg: 3px;
  }
  
  25% {
    --glitch-text-offset: 3px;
    --glitch-text-offset--neg: -3px;
  }
  
  50% {
    --glitch-text-offset: -3px;
    --glitch-text-offset--neg: -3px;
  }
  
  75% {
    --glitch-text-offset: 3px;
    --glitch-text-offset--neg: 3px;
  }
  
  100% {
    --glitch-text-offset: 0;
    --glitch-text-offset--neg: 0;
  }
}
.mainpagebox h2{
border:0 !important;
margin:0 !important;
font-weight:900 !important;
}

.mainpage{
display:grid;
 grid-template-areas:
    "welcome welcome welcome"
    "about about links"
    "disclaimer other other "
gap:10px;
}


.mainpagebox .title{
	border: 1px solid var(--border-color-base,#a2a9b1) !important;
	padding: 0.2em 0.4em;
}

.mainpagebox .content{
	border: 1px solid var(--border-color-base,#a2a9b1) !important;
   border-top: 0 !important;
	padding: 0.2em 0.4em;
}

@media (prefers-reduced-motion) {
	.glitch-text { animation: none; }
}