MediaWiki:Common.css: Difference between revisions

From the Audiovisual Identity Database, the motion graphics museum

Content deleted Content added
No edit summary
No edit summary
Line 681: Line 681:
}
}
}
.mw-wiki-logo {
width: 210px!important;
height: 36px!important;
position: absolute!important;
background-size: contain!important;
background-repeat: no-repeat!important;
}
}

Revision as of 06:50, 21 November 2020

/* CSS placed here will be applied to all skins */
/* Code copied from [[wikipedia:MediaWiki:Common.css]] */
.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;
}
.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;
}

/* END Infobox template style */

/* styles for bordered infobox with merged rows */
/* Code copied from [[wikipedia:MediaWiki:Common.css]] */
.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;
}
/* END styles for bordered infobox with merged rows */
/* Make Main Page title invisible */
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }

/* Make Images Work in Dark Mode. Particularly for Main Page icons.*/
@media (prefers-color-scheme: dark) {
  .image {
    background-image: url(<path>);
  }
}

/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
th.mbox-text, td.mbox-text {     /* The message body cell(s) */
    border: none;
    padding: 0.25em 0.9em;       /* 0.9em left/right */
    width: 100%;    /* Make all mboxes the same width regardless of text length */
}
td.mbox-image {                  /* The left image cell */
    border: none;
    padding: 2px 0 2px 0.9em;    /* 0.9em left, 0px right */
    text-align: center;
}
td.mbox-imageright {             /* The right image cell */
    border: none;
    padding: 2px 0.9em 2px 0;    /* 0px left, 0.9em right */
    text-align: center;
}
td.mbox-empty-cell {         /* An empty narrow cell */
    border: none;
    padding: 0;
    width: 1px;
}

/* Article message box styles */
table.ambox {
    margin: 0 10%;   /* 10% = Will not overlap with other elements */
    border: 1px solid #a2a9b1;
    border-left: 10px solid #36c;    /* Default "notice" blue */
    background: #fbfbfb;
}
table.ambox + table.ambox {   /* Single border between stacked boxes. */
    margin-top: -1px;
}
.ambox th.mbox-text,
.ambox td.mbox-text {            /* The message body cell(s) */
    padding: 0.25em 0.5em;       /* 0.5em left/right */
}
.ambox td.mbox-image {           /* The left image cell */
    padding: 2px 0 2px 0.5em;    /* 0.5em left, 0px right */
}
.ambox td.mbox-imageright {      /* The right image cell */
    padding: 2px 0.5em 2px 0;    /* 0px left, 0.5em right */
}

table.ambox-notice {
    border-left: 10px solid #36c;    /* Blue */
}
table.ambox-speedy {
    border-left: 10px solid #b32424;    /* Red */
    background: #fee7e6;                   /* Pink */
}
table.ambox-delete {
    border-left: 10px solid #b32424;    /* Red */
}
table.ambox-content {
    border-left: 10px solid #f28500;    /* Orange */
}
table.ambox-style {
    border-left: 10px solid #fc3;    /* Yellow */
}
table.ambox-move {
    border-left: 10px solid #9932cc;    /* Purple */
}
table.ambox-protection {
    border-left: 10px solid #a2a9b1;       /* Gray-gold */
}

/* Image message box styles */
table.imbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 3px solid #36c;    /* Default "notice" blue */
    background: #fbfbfb;
}
.imbox .mbox-text .imbox {    /* For imboxes inside imbox-text cells. */
    margin: 0 -0.5em;    /* 0.9 - 0.5 = 0.4em left/right. */
}
.mbox-inside .imbox {    /* For imboxes inside other templates. */
    margin: 4px;
}

table.imbox-notice {
    border: 3px solid #36c;    /* Blue */
}
table.imbox-speedy {
    border: 3px solid #b32424;    /* Red */
    background: #fee;             /* Pink */
}
table.imbox-delete {
    border: 3px solid #b32424;    /* Red */
}
table.imbox-content {
    border: 3px solid #f28500;    /* Orange */
}
table.imbox-style {
    border: 3px solid #fc3;    /* Yellow */
}
table.imbox-move {
    border: 3px solid #9932cc;    /* Purple */
}
table.imbox-protection {
    border: 3px solid #a2a9b1;       /* Gray-gold */
}
table.imbox-license {
    border: 3px solid #88a;       /* Dark gray */
    background: #f7f8ff;          /* Light gray */
}
table.imbox-featured {
    border: 3px solid #cba135;    /* Brown-gold */
}

/* Category message box styles */
table.cmbox {
    margin: 3px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1;
    background: #DFE8FF;    /* Default "notice" blue */
}

table.cmbox-notice {
    background: #D8E8FF;    /* Blue */
}
table.cmbox-speedy {
    margin-top: 4px;
    margin-bottom: 4px;
    border: 4px solid #b32424;    /* Red */
    background: #FFDBDB;          /* Pink */
}
table.cmbox-delete {
    background: #FFDBDB;    /* Red */
}
table.cmbox-content {
    background: #FFE7CE;    /* Orange */
}
table.cmbox-style {
    background: #FFF9DB;    /* Yellow */
}
table.cmbox-move {
    background: #E4D8FF;    /* Purple */
}
table.cmbox-protection {
    background: #EFEFE1;    /* Gray-gold */
}

/* Other pages message box styles */
table.ombox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1;       /* Default "notice" gray */
    background: #f8f9fa;
}

table.ombox-notice {
    border: 1px solid #a2a9b1;       /* Gray */
}
table.ombox-speedy {
    border: 2px solid #b32424;    /* Red */
    background: #fee;             /* Pink */
}
table.ombox-delete {
    border: 2px solid #b32424;    /* Red */
}
table.ombox-content {
    border: 1px solid #f28500;    /* Orange */
}
table.ombox-style {
    border: 1px solid #fc3;    /* Yellow */
}
table.ombox-move {
    border: 1px solid #9932cc;    /* Purple */
}
table.ombox-protection {
    border: 2px solid #a2a9b1;       /* Gray-gold */
}

/* Talk page message box styles */
table.tmbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #c0c090;    /* Default "notice" gray-brown */
    background: #f8eaba;
}
.mediawiki .mbox-inside .tmbox { /* For tmboxes inside other templates. The "mediawiki" */
    margin: 2px 0;               /* class ensures that this declaration overrides other */
    width: 100%;  /* For Safari and Opera */     /* styles (including mbox-small above) */
}
.mbox-inside .tmbox.mbox-small { /* "small" tmboxes should not be small when  */
    line-height: 1.5em;          /* also "nested", so reset styles that are   */
    font-size: 100%;             /* set in "mbox-small" above.                */
}

table.tmbox-speedy {
    border: 2px solid #b32424;    /* Red */
    background: #fee;             /* Pink */
}
table.tmbox-delete {
    border: 2px solid #b32424;    /* Red */
}
table.tmbox-content {
    border: 2px solid #f28500;    /* Orange */
}
table.tmbox-style {
    border: 2px solid #fc3;    /* Yellow */
}
table.tmbox-move {
    border: 2px solid #9932cc;    /* Purple */
}
table.tmbox-protection,
table.tmbox-notice {
    border: 1px solid #a2a9b1;    /* Gray-brown */
}

/* Footer and header message box styles */
table.fmbox {
    clear: both;
    margin: 0.2em 0;
    width: 100%;
    border: 1px solid #a2a9b1;
    background: #f8f9fa;     /* Default "system" gray */
}
table.fmbox-system {
    background: #f8f9fa;
}
table.fmbox-warning {
    border: 1px solid #bb7070;  /* Dark pink */
    background: #ffdbdb;        /* Pink */
}
table.fmbox-editnotice {
    background: transparent;
}

/* These mbox-small classes must be placed after all other
   ambox/tmbox/ombox etc classes. "html body.mediawiki" is so
   they override "table.ambox + table.ambox" above. */
html body.mediawiki .mbox-small {   /* For the "small=yes" option. */
	/* @noflip */
	clear: right;
	/* @noflip */
	float: right;
	/* @noflip */
	margin: 4px 0 4px 1em;
	box-sizing: border-box;
	width: 238px;
	font-size: 88%;
	line-height: 1.25em;
}
html body.mediawiki .mbox-small-left {   /* For the "small=left" option. */
	/* @noflip */
	margin: 4px 1em 4px 0;
	box-sizing: border-box;
	overflow: hidden;
	width: 238px;
	border-collapse: collapse;
	font-size: 88%;
	line-height: 1.25em;
}

/* Style for compact ambox */
/* Hide the images */
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell {
	display: none;
}
/* Remove borders, backgrounds, padding, etc. */
.compact-ambox table.ambox {
	border: none;
	border-collapse: collapse;
	background-color: transparent;
	margin: 0 0 0 1.6em !important;
	padding: 0 !important;
	width: auto;
	display: block;
}
body.mediawiki .compact-ambox table.mbox-small-left {
	font-size: 100%;
	width: auto;
	margin: 0;
}
/* Style the text cell as a list item and remove its padding */
.compact-ambox table .mbox-text {
	padding: 0 !important;
	margin: 0 !important;
}
.compact-ambox table .mbox-text-span {
	display: list-item;
	line-height: 1.5em;
	list-style-type: square;
	list-style-image: url(/w/skins/MonoBook/resources/images/bullet.svg);
}
.skin-vector .compact-ambox table .mbox-text-span {
	list-style-type: disc;
	list-style-image: url(/w/skins/Vector/resources/skins.vector.styles/images/bullet-icon.svg);
}
/* Allow for hiding text in compact form */
.compact-ambox .hide-when-compact {
	display: none;
}

/* Hide (formatting) elements from screen, but not from screenreaders */
.visualhide {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Remove underlines from certain links */
.nounderlines a,
.IPA a:link, .IPA a:visited {
	text-decoration: none !important;
}

/* Standard Navigationsleisten, aka box hiding thingy
   from .de.  Documentation at [[Wikipedia:NavFrame]]. */
div.NavFrame {
	margin: 0;
	padding: 4px;
	border: 1px solid #a2a9b1;
	text-align: center;
	border-collapse: collapse;
	font-size: 95%;
}
div.NavFrame + div.NavFrame {
	border-top-style: none;
	border-top-style: hidden;
}
div.NavFrame div.NavHead {
	line-height: 1.6em;
	font-weight: bold;
	background-color: #ccf;
	position: relative;
}
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
	font-size: 100%;
}
a.NavToggle {
	position: absolute;
	top: 0;
	/* @noflip */
	right: 3px;
	font-weight: normal;
	font-size: 90%;
}

/* Hatnotes and disambiguation notices */
.hatnote {
	font-style: italic;
}
.hatnote i {
	font-style: normal;
}
div.hatnote {
	/* @noflip */
	padding-left: 1.6em;
	margin-bottom: 0.5em;
}
div.hatnote + div.hatnote {
	margin-top: -0.5em;
}

/* Allow transcluded pages to display in lists rather than a table. */
.listify td {
	display: list-item;
}
.listify tr {
	display: block;
}
.listify table {
	display: block;
}
/* Interface Style (code by Hb1290) */
div#mw-panel div.portal h3{
   font-family:Century Gothic; font-weight:450; font-size: 14px;
}
div#mw-navigation  div#mw-head div#p-personal{
   font-family:Century Gothic;
}
div#mw-navigation div#mw-head div#right-navigation{
	font-family:Century Gothic;
}
div#mw-navigation div#mw-head div#left-navigation{
	font-family:Century Gothic;
}
/* keep hidden categories hidden (unless preferences set otherwise)  */
.mw-hidden-cats-ns-shown {display: none}
/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
	line-height: inherit;
	list-style: none none;
	margin: 0;
}
.plainlist ol li,
.plainlist ul li {
	margin-bottom: 0;
}
/***************************************
 * Carousel photo slider on main page
 ***************************************/
.banner-image {
    position: relative;
    overflow: hidden;
    max-width: 400px; 
    height: auto;
}
.banner-image img {
    max-width: 400px;
    height: auto;
    width: 400px
}
.banner-box-wide {
    width: 400px
}
.banner-box-left,
.banner-box-right {
	padding: 8px 7px;
	background: rgb(16,16,16);
	background: rgba(0,0,0,0.3);
	border-radius: 4px;
	width: 400px;
}
.banner-box-left {
    left: 3%;
    text-align: left;
}
.banner-box-right {
    right: 3%;
    text-align: right;
}
.mainpage-shadowbox {
	color: white;
	background: rgb(16,16,16);
	background: rgba(0,0,0,0.3);
	border-radius: 4px;
}
.mainpage-shadowbox h2, .mainpage-shadowbox h3 {
	color: white;
	border:none;
	font-family: sans-serif;
    line-height: 1.2em;
	margin:0;
}
.mainpage-shadowbox h2 {
	font-size: 190%;
}
.mainpage-shadowbox h3 {
	font-size: 150%;
	padding: 0;
}
#mainpage-maplinks a, .mainpage-shadowbox a {
	color: white;
	font-weight: bold;
}
.banner-box-2 {
    position: absolute;
    z-index: 2;
    margin-top: 2em;
    min-width: 20em;
}
.banner-box-2 .quote {
    font-size: 90%;
    line-height: 1.2em;
}
#mw-content-text > div > ul > li.gallerycarousel > div > div:nth-child(2) > div > a > img,
#wikiPreview > div.mw-content-ltr > div > ul > li.gallerycarousel > div > div:nth-child(2) > div > a > img {
	width: 400px;
}
#mw-content-text > ul > li.gallerycarousel > div > div:nth-child(2) > div > a > img {
	width:400px
}
/* Initializing the flex continer */
#mw-content-text > div > ul > li.gallerycarousel > div,
#wikiPreview > div.mw-content-ltr > div > ul > li.gallerycarousel > div {
	display: flex;
    flex-direction: column
}
/* Position of image */
#mw-content-text > div > ul > li.gallerycarousel > div > div:nth-child(2),
#wikiPreview > div.mw-content-ltr > div > ul > li.gallerycarousel > div > div:nth-child(2) {
	order: 1;
}
/* Position of image caption */
#mw-content-text > div > ul > li.gallerycarousel > div > div:nth-child(3),
#wikiPreview > div.mw-content-ltr > div > ul > li.gallerycarousel > div > div:nth-child(3) {
	order: 2;
}
/* Position of arrows and thumbnail icon */
#mw-content-text > div > ul > li.gallerycarousel > div > div.mw-gallery-slideshow-buttons.oo-ui-layout.oo-ui-panelLayout,
#wikiPreview > div.mw-content-ltr > div > ul > li.gallerycarousel > div > div.mw-gallery-slideshow-buttons.oo-ui-layout.oo-ui-panelLayout {
	order: 3;
}
/* CSS Sliding Image Gallery for Mediawiki
 * 
 * @author: Unknown
 * current version crafted together by [[User:Christharp]] from several CSS sites.
 */

.wrapper {
  position: absolute;
  top: 1%;
  width: 4000px;
-webkit-animation: 60s credits linear infinite;
-moz-animation: 60s credits linear infinite;
-ms-animation:60s credits linear infinite;
-o-animation: 60s credits linear infinite;
animation: 60s credits linear infinite;
-webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    -o-animation-direction: normal;
    -ms-animation-direction: normal;
    animation-direction:normal;
}

.wrapper img:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
    cursor: pointer;
}
@keyframes credits {
  0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -4000px;
 }
 
}

@-webkit-keyframes credits {
  0% {
   margin-left: 0px;
  }
100% {
    margin-left: -4000px;
  }

}
@-moz-keyframes credits {
  0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -4000px;
 }
 
}
@-o-keyframes credits {
  0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -4000px;
 }
 
}
.mw-wiki-logo {
    width: 210px!important;
    height: 36px!important;
    position: absolute!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.