Difference between revisions of "MediaWiki:Common.css"

From Dwaia Wiki
Jump to navigation Jump to search
Line 177: Line 177:
  
 
@keyframes vertical {
 
@keyframes vertical {
   0%  {transform: translate(0px, -5px)}
+
   0%  {transform: translate(0px, calc(-var(--intensity)) )}
   50%  {transform: translate(0px, 5px)}
+
   50%  {transform: translate(0px, calc( var(--intensity)))}
   100% {transform: translate(0px, -5px)}
+
   100% {transform: translate(0px, calc(-var(--intensity))}
 
}
 
}
 
@keyframes horizontal {
 
@keyframes horizontal {
   0%  {transform: translate(-5px, 0px)}
+
   0%  {transform: translate(calc(-var(--intensity)), 0px)}
   50%  {transform: translate( 5px, 0px)}
+
   50%  {transform: translate(calc( var(--intensity)), 0px)}
   100% {transform: translate(-5px, 0px)}
+
   100% {transform: translate(calc(-var(--intensity)), 0px)}
 
}
 
}

Revision as of 22:42, 26 March 2019

/* CSS placed here will be applied to all skins */

/*INFOBOX STUFF*/

/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
	font-size: 100%;
}



/* Infobox template style */
.infobox {
	border: 1px solid #a2a9b1;
	border-spacing: 3px;
	background-color: #f8f9fa;
	color: black;
	/* @noflip */
	margin: 0.5em 0 0.5em 1em;
	padding: 0.2em;
	/* @noflip */
	float: right;
	/* @noflip */
	clear: right;
	font-size: 88%;
	line-height: 1.5em;
}
.infobox caption {
	font-size: 125%;
	font-weight: bold;
	padding: 0.2em;
	text-align: center;
}
.infobox td,
.infobox th {
	vertical-align: top;
	/* @noflip */
	text-align: left;
}
.infobox.bordered {
	border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
	border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
	border: 0;
}

.infobox.sisterproject {
	width: 20em;
	font-size: 90%;
}

.infobox.standard-talk {
	border: 1px solid #c0c090;
	background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
	border: 1px solid #c0c090;
}

/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
	border: 0;
	border-top: 1px solid #a2a9b1;
	/* @noflip */
	border-right: 1px solid #a2a9b1;
}

.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
	border: 0;
	/* @noflip */
	border-right: 1px solid #a2a9b1;
}

/* Styles for geography infoboxes, eg countries,
   country subdivisions, cities, etc.            */
.infobox.geography {
	border-collapse: collapse;
	line-height: 1.2em;
	font-size: 90%;
}

.infobox.geography  td,
.infobox.geography  th {
	border-top: 1px solid #a2a9b1;
	padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
	border-top: 1px solid #a2a9b1;
	padding: 0.4em 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
	border: 0;
	padding: 0 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
	border-top: 0;
	border-bottom: 1px solid #a2a9b1;
	padding: 0 0.6em 0.4em 0.6em;
}

.infobox.geography .maptable td,
.infobox.geography .maptable th {
	border: 0;
	padding: 0;
}

/*Makes the property labels bold, with the exception of captions.*/
.infobox > * > tr > td:first-child {
    font-weight: bold;
}
/*Makes the property labels bold*/
.infobox > * > tr > td.caption {
    font-weight: normal;
}
/*Makes the headers in infoboxes more spacious.*/
.infobox > * > tr > th {
    padding: 10px !important;
}

table.infobox > * > tr > th {
    background-color: #232323;
    border: none;
}
table.infobox, table.wikitable > * > tr > td{
    background-color: #5B5760;
    border: none;
    width: 300px;
}

.infobox {
    padding: 0px;
    border-spacing: 0px;
}

/*Forum stuff:*/
tr.mw-wikiforum-title {
    background: #3E404F;
}
table.mw-wikiforum-frame {
    background: #423C49;
}

/*Spoiler text*/
.spoiler, .spoiler2{ 
    color: #271E27;
    background-color: #271E27;
    padding: 3px;
    border-radius: 6px;
}

.spoiler:hover{
    color: white;
}



/*Animations*/
@webkit-keyframes spin {
    from {} to {transform:rotate(360deg);}
}
@keyframes spin {
    from {} to {transform:rotate(360deg);}
}

@keyframes vertical {
  0%   {transform: translate(0px, calc(-var(--intensity)) )}
  50%  {transform: translate(0px, calc( var(--intensity)))}
  100% {transform: translate(0px, calc(-var(--intensity))}
}
@keyframes horizontal {
  0%   {transform: translate(calc(-var(--intensity)), 0px)}
  50%  {transform: translate(calc( var(--intensity)), 0px)}
  100% {transform: translate(calc(-var(--intensity)), 0px)}
}