Difference between revisions of "MediaWiki:Common.css"

From Johnisdead Wiki
Jump to navigation Jump to search
Line 1: Line 1:
 +
.expand-button {
 +
cursor: pointer;
 +
display: block;
 +
width: 50%;
 +
margin-top: 1rem;
 +
margin-left: auto;
 +
margin-right: auto;
 +
border: 4px solid darken(darkcyan, 10%);
 +
border-radius: 3px;
 +
background-color: darkcyan;
 +
color: white;
 +
font-size: 1rem;
 +
padding: 0.5rem;
 +
 +
&:hover, &:active, &:focus {
 +
background-color: darken(darkcyan, 5%);
 +
}
 +
}
 +
 +
.special-text {
 +
position: relative;
 +
max-height: 100px;
 +
overflow: hidden;
 +
transition: max-height 1s ease;
 +
 +
&.-expanded {
 +
max-height: 100vh;
 +
}
 +
}
 +
 +
.special-text:not(.-expanded)::after {
 +
content: '';
 +
position: absolute;
 +
top: 0;
 +
bottom: 0;
 +
left: 0;
 +
right: 0;
 +
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
 +
}
 +
 +
 +
 +
 +
 
.mw-collapsible-toggle {
 
.mw-collapsible-toggle {
 
float:left;
 
float:left;

Revision as of 15:57, 28 December 2019

.expand-button {
cursor: pointer;
display: block;
width: 50%;
margin-top: 1rem;
margin-left: auto;
margin-right: auto;
border: 4px solid darken(darkcyan, 10%);
border-radius: 3px;
background-color: darkcyan;
color: white;
font-size: 1rem;
padding: 0.5rem;

&:hover, &:active, &:focus {
background-color: darken(darkcyan, 5%);
}
}

.special-text {
position: relative;
max-height: 100px;
overflow: hidden;
transition: max-height 1s ease;

&.-expanded {
max-height: 100vh;
}
}

.special-text:not(.-expanded)::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}





.mw-collapsible-toggle {
float:left;
margin-left:0;
margin-right:1em;
}

.mw-content-ltr .mw-collapsible:not(.mw-made-collapsible) th:before, .mw-content-rtl .mw-content-ltr .mw-collapsible:not(.mw-made-collapsible) th:before, .mw-content-ltr .mw-collapsible:not(.mw-made-collapsible):before, .mw-content-rtl .mw-content-ltr .mw-collapsible:not(.mw-made-collapsible):before, .mw-content-ltr .mw-collapsible-toggle, .mw-content-rtl .mw-content-ltr .mw-collapsible-toggle {
float: none;
}

.mw-collapsible {
background-color: #0d1c00;
border: 2px solid #1b3d00;
padding: 0.7em;
}

.mw-collapsible-text {
color: gold;
font-weight: bold;
}

.infobox {
background-color: #0d1c00;
border: 3px solid #1b3d00;
float: right;
margin: 0 0 1em 1em;
padding: 0.7em;
padding-top: 0px;
padding-bottom: 0px;
width: 33%;
max-width: 300px;
border-radius: 10px;
}

.infobox img {
max-width: 95%;
height: auto;
margin-left: auto;
margin-right: auto;
border: 2px solid #1b3d00;
border-top: 1px solid #1b3d00;
border-radius: 15px;
}

.infobox-title {
font-size: 1.5em;
background-color: #1b3d00;
border-top: 1px solid #1b3d00;
border-bottom: 1px solid #1b3d00;
padding-left: 0.4em;
padding-right: 0.4em;
}

.infobox-title p {
margin: 0px;
text-align: center;
background-color: #0d1c00;
border: 1px solid #1b3d00;
border-radius: 10px;
}

.infobox-image {
text-align: center;
background-color: #1b3d00;
border: 2px solid #1b3d00;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

.infobox-image p {
text-align: left;
font-style: italic;
opacity: 0.5;
margin-left: 0.7em;
}

.infobox table {
width: 100%;
background-color: #081200;
border: 2px solid #081200;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
margin-top: 1em;
}

.infobox th {
vertical-align: top;
width: 100px;
text-align: left;
}

.infobox td {
vertical-align: top;
}

.infobox tr {
display: block;
border-bottom: 2px solid #1b3d00;
}

.infobox-title h2 {
margin: 0px;
padding: 0px;
margin-top: 10px;
font-size: 0.5em;
}

.nodivider tr {
border-bottom: none;
}

#mw-panel {
background-color:black;
border: 3px solid #112600;
padding-bottom: 20px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

#mw-panel .portal h3 {
color:white;
}

#mw-panel .portal .body li a {
color:#337800;
}

#mw-panel .portal .body li a:hover {
color:gold;
}

#mw-panel .portal .body li a:visited {
color:#285e00;
}

#mw-head {
background-color:black;
}

body {
background-image: url(https://vignette.wikia.nocookie.net/johnisdead/images/5/50/Wiki-background/revision/latest?cb=20181031082134);
}

.mw-body, .parsoid-body {
background-color: black;
border: 3px solid #112600;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
color: white;
}

.mw-body-content p {
color:white;
}

.mw-body h1, .mw-body-content h1 {
color:white;
}

.mw-body-content h2 {
color:white
}

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
color:white;
}

.mw-parser-output a.external {
color:#337800;
}

.mw-parser-output a.external:hover {
color:gold;
}

.mw-parser-output a.external:visited {
color:#285e00;
}

a {
color:#337800;
}

a.new {
color:#d33;
}

a:hover {
color:gold;
}

a:visited {
color:#285e00;
}

.vectorTabs {
background-color: #112600;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
background-image: none;
}

.vectorTabs ul {
background-image: none;
}

.vectorTabs li {
background-image: none;
padding: 0px 5px 0px 5px;
}

.vectorTabs li.selected {
background-image: none;
}

.vectorTabs span {
background-image: none;
}

.vectorTabs li.selected a, .vectorTabs li.selected a:visited {
color: white;
font-weight: normal;
margin-top: 5px;
background-color: black;
border: 3px solid black;
border-bottom: none;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}

.vectorTabs li a, .vectorTabs li a:visited {
color: gold;
font-weight: bold;
}

.vectorTabs li a:hover, .vectorTabs li a:hover {
color: gold;
text-shadow: 0px 0px 2px gold;
text-decoration: none;
font-weight: bold;
}

.vectorMenu h3 span {
color:#337800;
padding-top: 1.5em;
}

.vectorMenu li a {
color:#337800;
}

.vectorMenu .menu {
background-color: black;
border: 2px solid #112600;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

#editform, #toolbar, #wpTextbox1 {
background-color: #060d00;
color:white;
}

.editOptions {
background-color: #0d1c00;
color:white;
border: 1px solid #112600;
}

textarea {
border: 1px solid #112600;
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: black;
color: white;
border: 1px solid #112600;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
background-color: #1b3d00;
color: gold;
border-color: #1b3d00;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
background-color: #337800;
color: gold;
border-color: #337800;
box-shadow: 0px 0px 4px gold;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: #1b3d00;
color: #a55858;
border-color: #1b3d00;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: #337800;
color: gold;
border-color: #337800;
box-shadow: 0px 0px 4px gold;
}

pre, .mw-code {
background-color: black;
color: white;
}