MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
body {
    background-color: black;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size:22px;
    word-wrap: break-word;
}
.content {
    margin:10px;
    margin-top:20px;
    overflow-wrap: break-word;
}

a {color: rgb(255, 0, 255);text-decoration: none;cursor:pointer}
a:active, a:hover:active {color: rgb(255, 179, 255);}
a:hover {color: rgb(255, 121, 255);}



.pagetitle, .backbutton, .R74nicon {display: inline-block;margin:0px;vertical-align: middle;margin-left:10px}
.pagetitle, .R74nicon {font-size:4.5vw; }
.backbutton {font-size:60px}

.pagetitle {margin-left: 10px;}
.R74nicon {height:50px;width:50px;transition:3s;}
.iconimg {height:50px;width:50px;}

b {font-weight:bold;}
i {font-style:italic;}

img, audio, video {vertical-align:middle;max-width:100%}

.vertical {font-family:'Mongolian Baiti','Noto Sans Mongolian',sans-serif;font-size:140%;-webkit-writing-mode:vertical-lr;-moz-writing-mode:vertical-lr;writing-mode:vertical-lr;writing-mode:vertical-ideographic;layout-flow:vertical-ideographic;}


.R74nicon:hover {
    filter:hue-rotate(3600deg);
    transition:30s;
}

textarea, button, input, .checkmark {
    vertical-align: middle;
    color-scheme: dark;
}
input[type=submit] {background-color: rgb(126, 126, 126)!important;}
input[type=reset] {background-color: rgb(111, 79, 79)!important;}
input[type=button], button, input[type=submit], input[type=reset], .checkmark {
    background-color: rgb(107,107,107);
    color: rgb(255,255,255);
    box-shadow: 0em -0.1em 0em inset rgb(0,0,0,0.5);
    font-size: 20px;
    border-radius: 7px;
    border-style: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 7px;
    padding-right: 7px;
    min-width: 30px;
    max-height: 40px;
    vertical-align: middle;
    line-height: 22px;
    cursor: pointer;
    outline: 0;
    margin: 4px 0;
    line-height: 1;
    /* color transition */
    transition: filter 0.2s;
}
input[type=button][selected=true] {
    filter: brightness(150%);
}
input[disabled], textarea[disabled], button[disabled], select[disabled] {filter:brightness(50%);cursor:not-allowed}
input[type=button]:hover, button:hover, input[type=submit]:hover, .checkmark:hover {
    filter: brightness(125%);
}
input[type=button][disabled]:hover, button[disabled]:hover, input[type=submit][disabled]:hover {
    filter: brightness(75%);
}
input[type=button]:active, button:active, input[type=submit]:active, .checkmark:active {
    filter: brightness(50%);
}

textarea, input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=month], input[type=week], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=time], input[type=url] {
    background-color: rgb(107,107,107);
    color: rgb(255,255,255);
    border-radius: 15px;
    border-style: none;
    outline: 0;
    padding: 10px;
}
input[type=number] {width:100px}
textarea:focus {
    box-shadow: 0 0 3pt 2pt rgb(31, 31, 31);
}
textarea {
    max-width:80%;
}
select {
    background-color: rgb(107,107,107);
    color: rgb(255,255,255);
    border-radius: 15px;
    border-style: none;
    outline: 0;
    padding: 10px;
}
meter, progress {
    height: 1.5em;
    vertical-align: middle;
}
input[type="color"] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: rgb(107,107,107);
    border: 0;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
    height: 1.75em;
}


ul, dl {
    list-style: none; /* Remove default bullets */
}
ul li::before, dl dt::before {
    content: "\003E\00A0";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: lime; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    /*width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: 0.5em; /* Also needed for space (tweak if needed) */
}
li.redbullet::before, dt.redbullet::before {color:red;}
li.cyanbullet::before, dt.cyanbullet::before {color:#00ffff;}
li.glowbullet::before, dt.glowbullet::before, .glowtext {text-shadow: 0px 0px 20px,0px 0px 20px,0px 0px 20px,0px 0px 20px,0px 0px 20px,0px 0px 20px,0px 0px 20px;}
li.graybullet::before, dt.graybullet::before {color:gray;}
li.yellowbullet::before, dt.yellowbullet::before {color:yellow;}
ol {list-style: none; counter-reset: li}
ol li::before {content: counter(li); color: lime;display: inline-block; width: 1em;margin-left: -1.25em}
ol li {counter-increment: li}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: lightgray;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: lightgray;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: lightgray;
}



.checkbox {
    position: absolute;
    opacity: 0;
}
.checkbox + label {
    position: relative;
    cursor: pointer;
    padding: 0;
}
.checkbox + label:before {
    content: '';
    margin-right: 5px;
    margin-top: 2.5px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: rgb(107,107,107);
    border-radius: 5px;
    border-style: none;
}
.checkbox:hover + label:before {
    filter: brightness(150%)
}
.checkbox:focus + label:before {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.checkbox:checked + label:before {
    background: white;
}
.checkbox:disabled + label {
    color: #b8b8b8;
    cursor: auto;
}
.checkbox:disabled + label:before {
    box-shadow: none;
    background: #ddd;
}
.checkbox:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 9px;
    background: black;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 black, 4px 0 0 black, 4px -2px 0 black, 4px -4px 0 black, 4px -6px 0 black, 4px -8px 0 black;
    transform: rotate(45deg);
    margin-top: 2.5px;
}

hr {
    border: 1px solid rgb(53, 53, 53);
    margin-left:50px;
    margin-right:50px;
    margin-bottom:30px;
    margin-top:30px;
}

/*.lidesc {margin-left:10px;}*/
.lidesc, dd {font-style:italic;}
dd {margin-inline-end: 20px;}
.lidesc::before, dd::before {content:"↳ "}
.cw[open="false"] {cursor:pointer;background-color:rgb(39, 39, 39);padding:5px;border-radius:20px;line-height:2;}
.cw[open="false"]:active {background-color:rgb(61, 61, 61);}
.cw[open="true"] {transition:0.5s;}
.desc {display:block;margin-left:10px;}
.desc::before {content:"↳ "}
/*.wordtxt {}*/
.wordsep {color:rgb(85, 85, 85);}
.wordcom {color:lightgray}
.worddef {color:lightgray;font-style:italic;}
.wordlist {white-space:pre-wrap;margin-left:10px;margin-left:40px;}
.wordline {margin-left: -20px;text-indent: 10px;}
.toc {margin:0px;}

.divblock {display:inline-block;margin:0.4rem;padding:0.4rem;vertical-align:middle;max-width:500px;}
.homediv {display:inline-block;vertical-align:top;}
.homefundiv, .homefundivtop {display:block;padding-bottom:1em;padding-top:1em;margin-bottom:1em;text-align: center; border-radius: 30px; border:solid white}
.homefundivtop {margin-top:1em}

table {border-collapse:collapse;margin-left: 2em;overflow-wrap: anywhere;}
td, th {border:0.5px solid gray;padding:5px;padding-left:10px;padding-right:10px}
th {background-color:#00ffff;color:black}
tr:nth-child(odd){background-color: #272727;}
.fullTable {margin-left:0;min-width:100%;max-width:unset;overflow-wrap:unset}
.imgtext { height:1em }

.linkcategory {color:yellow}
#newsheader {color:white;background-color:darkred;padding:0.25em;border-radius:10px;}
#newsheader a {color:lime;}
#newsheader a:hover {color:rgb(117, 255, 117);}
#newsheader a:active {color:yellow;}

.pixelart, .pixelflag {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.grayimg {background-color:gray;padding:5px;}

kbd {background-color:rgb(59, 59, 59);color:white;border-radius:5px;padding:2px;padding-left:5px;padding-right:5px;margin-left:3px;margin-right:3px;line-height:1.5;}

/* Mobile styles */
@media only screen and (max-width: 700px) {
    table {margin-left: 0em}
}