×
Create a new article
Write your page title here:
We currently have 3,083 articles on YumeWiki. Type your article name above or click on one of the titles below and start writing!



YumeWiki
3,083Articles

MediaWiki:Common.css: Difference between revisions

(change colours of listloc to be much lighter, and fix weird width issue at small screen width)
(simplify spoiler class and fix vector skin)
 
(6 intermediate revisions by the same user not shown)
Line 105: Line 105:


/*Spoiler text*/
/*Spoiler text*/
.spoiler, .spoiler a {
.spoiler:not(:hover,:active),
color: #000000!important;
.spoiler:not(:hover,:active) a,
background-color: #000000!important;
#mw-content .spoiler:not(:hover,:active) a {
}
  color:#000;
 
  background-color:#000
.spoiler:hover, .spoiler:hover a {
background-color:transparent
}
}


Line 249: Line 247:
word-wrap: break-word;
word-wrap: break-word;
margin-top: -15px;
margin-top: -15px;
}
/*gallery or image class for sprites*/
.pixel-perfect {
image-rendering: pixelated;
}
}


Line 254: Line 257:
.CodeMirror-sizer {
.CodeMirror-sizer {
font-size: 15px;
font-size: 15px;
}
/*Try to fix dancing loading icon*/
#mw-indicator-smw-entity-examiner {
line-height: 0px;
}
}


Line 318: Line 326:
}
}
}
}
.front-page-heading {
border: 5px solid #1A1A1A
}
/* [END] Global styling */
/* [END] Global styling */


Line 325: Line 338:
.ns-0 .front-page-heading {
.ns-0 .front-page-heading {
background: #510b17;
background: #510b17;
border: 5px solid #8c516b;
border-color: #8c516b;
}
}


Line 350: Line 363:
.ns-3000 .front-page-heading {
.ns-3000 .front-page-heading {
background:#320f13;
background:#320f13;
border:5px solid #b393a3;
border-color: #b393a3;
}
}


Line 361: Line 374:
.ns-3002 .front-page-heading {
.ns-3002 .front-page-heading {
background:#43353A;
background:#43353A;
border:5px solid #59474E;
border-color: #59474E;
}
}


Line 372: Line 385:
.ns-3004 .front-page-heading {
.ns-3004 .front-page-heading {
background:#111111;
background:#111111;
border:5px solid #bdbdbd;
border-color: #bdbdbd;
}
}


Line 383: Line 396:
.ns-3006 .front-page-heading {
.ns-3006 .front-page-heading {
background: #000000;
background: #000000;
border: 5px solid #178152;
border-color: #178152;
}
}


Line 394: Line 407:
.ns-3008 .front-page-heading {
.ns-3008 .front-page-heading {
background: #423341;
background: #423341;
border: 5px solid #939393;
border-color: #939393;
}
}


Line 409: Line 422:
.ns-3012 .front-page-heading {
.ns-3012 .front-page-heading {
background: #5c462a;
background: #5c462a;
border: 5px solid #c2ba4c;
border-color: #c2ba4c;
}
}


Line 421: Line 434:
.ns-3014 .front-page-heading {
.ns-3014 .front-page-heading {
background:#6f027c;
background:#6f027c;
border:5px solid #49007c;
border-color: #49007c;
}
}


Line 432: Line 445:
.ns-3016 .front-page-heading {
.ns-3016 .front-page-heading {
background:#180C29;
background:#180C29;
border:5px solid #E8D4B1;
border-color: #E8D4B1;
}
}


Line 443: Line 456:
.ns-3018 .front-page-heading {
.ns-3018 .front-page-heading {
background: #161124;
background: #161124;
border: 5px solid #69a6ca;
border-color: #69a6ca;
}
}


Line 452: Line 465:


/* [START] NS3020-3021: Cerasus Wiki */
/* [START] NS3020-3021: Cerasus Wiki */
/* customizes header fonts (THIS DOESNT WORK IF YOU USE WIKI SYNTAX LIKE "  ' ' ' EXAMPLE ' ' '  ", USE HEADER TAGS <H1>-<H6>) */
/* customizes header fonts */
.ns-3020 .mw-headline, .ns-3021 .mw-headline {
.ns-3020 .mw-headline, .ns-3021 .mw-headline {
font-family: 'Gentium Plus', serif;
font-family: 'Gentium Plus', serif;
Line 462: Line 475:


/*Divider Styling */
/*Divider Styling */
/*IF YOU USE H2'S WITH THIS: add in inline style "style="border-bottom: none; border bottom: #fa6e79;" " in the article's source to get rid of the gray lower border */
.ns-3020 .CDivider, .ns3021 .CDivider {
.ns-3020 .CDivider, .ns3021 .CDivider {
background: #ac2847;
background: #ac2847;
border:2px solid #fa6e79;
border:2px solid #fa6e79 !important;
border-radius: 5px;
border-radius: 5px;
padding-top: 1px;
padding-top: 1px;
Line 474: Line 486:


/* styling for menu buttons, also renders them differently so they don't look blurry during animations */
/* styling for menu buttons, also renders them differently so they don't look blurry during animations */
.CNavBut{
.CNavBut {
height: auto;
height: auto;
overflow: hidden;
overflow: hidden;
Line 582: Line 594:
.ns-3022 .front-page-heading {
.ns-3022 .front-page-heading {
background:#000000;
background:#000000;
border:5px solid #ff14c0;
border-color: #ff14c0;
}
}


Line 593: Line 605:
.ns-3024 .front-page-heading {
.ns-3024 .front-page-heading {
background:#ffffff;
background:#ffffff;
border:5px solid #eeeeee;
border-color: #eeeeee;
}
}


Line 604: Line 616:
.ns-3026 .front-page-heading {
.ns-3026 .front-page-heading {
background: #000000;
background: #000000;
border: 5px solid #f7e7ad;
border-color: #f7e7ad;
}
}


Line 615: Line 627:
.ns-3028 .front-page-heading {
.ns-3028 .front-page-heading {
background:#2e3131;
background:#2e3131;
border:5px solid #7c878a;
border-color: #7c878a;
}
}


Line 626: Line 638:
.ns-3030 .front-page-heading {
.ns-3030 .front-page-heading {
background: #291f37;
background: #291f37;
border: 5px solid #5334ba;
border-color: #5334ba;
}
}


Line 637: Line 649:
.ns-3032 .front-page-heading {
.ns-3032 .front-page-heading {
background: #797cd9;
background: #797cd9;
border: 5px solid #ffffff;
border-color: #ffffff;
}
}


Line 648: Line 660:
.ns-3034 .front-page-heading {
.ns-3034 .front-page-heading {
background: #210f1a;
background: #210f1a;
border: 5px solid #ad8b72;
border-color: #ad8b72;
}
}


Line 659: Line 671:
.ns-3036 .front-page-heading {
.ns-3036 .front-page-heading {
background: #1e000a;
background: #1e000a;
border: 5px solid #ff3e56;
border-color: #ff3e56;
}
}


Line 670: Line 682:
.ns-3038 .front-page-heading {
.ns-3038 .front-page-heading {
background: #1f303d;
background: #1f303d;
border: 5px solid #7e7d78;
border-color: #7e7d78;
}
}


Line 681: Line 693:
.ns-3040 .front-page-heading {
.ns-3040 .front-page-heading {
background: #a5a9fc;
background: #a5a9fc;
border: 5px solid #8080ff;
border-color: #8080ff;
}
}


Line 692: Line 704:
.ns-3042 .front-page-heading {
.ns-3042 .front-page-heading {
background: #000000;
background: #000000;
border: 5px solid #ffffff;
border-color: #ffffff;
}
}



Latest revision as of 21:50, 18 December 2024

/**
	*  CSS placed here will be applied to all skins, note that the
	*  setup has been organized for different custom namespaces.
**/

/* [START] Global styling */
@import url('https://fonts.googleapis.com/css?family=Rubik:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gentium+Plus&display=swap');

body * {
	font-family: 'Rubik';
}

body pre {
	overflow: hidden;
	padding-bottom: 5px;
	line-height: 14px;
	word-break: break-word;
}

/*Main page styles*/
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.main-page__left-column .menu-icon-container {
		margin: 0 50px;
	}
}

@media screen and (min-width: 1024px) {
	.menu-icon-container--single-column {
		margin: 0 50px;
	}
}

@media screen and (min-width: 1600px) {
	.menu-icon-container--single-column {
		margin: 0 100px;
	}
}

@media screen and (min-width: 1280px) {
	.main-page__column {
		display: inline-block;
	}

	.main-page__left-column {
		width: calc(100% - 310px - 2em);
	}

	.main-page__right-column {
		float: right;
		width: 310px;
	}
}

/*Main page banner icons*/
.MenuIcon {
	height: auto;
	overflow: hidden;
	display: inline-block;
}

.MenuIcon img {
	transition: transform .5s ease;
}

.MenuIcon:hover img {
	transform: scale(0.95);
}


/*Main page small icons*/
#icon-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.icon-container__item {
    min-width: 120px;
    max-width: 128px;
    margin-right: 5px;
}

.icon-container__item-link {
    text-align: center;
}

/*Main page headers*/
.front-page-heading {
	text-align:center;
	font-weight:bold;
	padding:1px;
}

/*Search*/
#p-search .wvui-typeahead-search__suggestions {
	top: auto;
	z-index: 999;
}

/*Unknown what this does*/
.author-jp-name {
	display:none;
}

/*Spoiler text*/
.spoiler:not(:hover,:active),
.spoiler:not(:hover,:active) a,
#mw-content .spoiler:not(:hover,:active) a {
  color:#000;
  background-color:#000 
}

/*Center text convenience class*/
.center-text {
	text-align: center;
}

/*Infobox styling*/
.infobox {
	display: table;
	background-color: #f4f4f4; /** temp */
	border: 1px solid #888888; /** temp */
	-moz-border-radius: 6px;
	border-radius: 6px;
	font-size: 69%;
	position: relative;
	float: right;
	clear: right;
	margin-bottom: 0.5em;
	margin-left: 1em;
	padding: 0.2em;
	width: 100%;
}

@media only screen and (min-width: 768px) {
	.infobox {
		width: 275px;
	}
}

.infobox p {
	margin: 0;
}

.infobox a {
	word-break: break-word;
}

.infobox td:first-child {
	vertical-align: top;
}

/*Listbox styling*/
.listloc {
	border: 1px solid #303030;
	margin: 0 0 5px 5px;
	font-size: 80%;
	background-color: #bdbdbd;
	min-height: 225px;
	padding: 0;
	text-align: center;
	display: inline-table;
}

.listchar {
	display: inline-table;
}

@media only screen and (min-width: 768px) {
	.listchar, .listloc {
		width: 225px;
		height: 275px;
	}
}

.listloc h3 {
	margin:1px;
	font-size:150%;
}

/** Portable infobox styling */
@media only screen and (min-width: 768px) {
	.portable-infobox {
		width: 275px;
	}
}

.pi-title {
	padding-bottom: 15px !important; /** TODO: Improve this so that !important won't be used */
	padding-top: 15px;
	border-radius: 6px 6px 0 0;
	font-size: 200%;
	font-weight: bold;
}

.portable-infobox {
	border-radius: 6px 6px 6px 6px;
	font-size: 11px;
}

.portable-infobox .pi-header, .portable-infobox .pi-title {
	font-weight: bold !important; /** TODO: Improve this so that !important won't be used */
	border-bottom: none;
}

.pi-data-label {
	vertical-align: top;
	min-width: 30%;
}

.pi-data-value {
	min-width: 70%;
}

.portable-infobox .pi-image-thumbnail {
	max-width: -webkit-fill-available;
}

.portable-infobox .pi-header {
	font-style: italic;
	font-size: 115%;
}

.pi-group[data-item-name="hidden-metadata"] {
	display: none;
}

/*Gallery*/
li.gallerybox {
	vertical-align: top;
	display: inline-block;
}

li.gallerybox div.thumb {
	background: none;
	border: 0;
}

li.gallerybox div.thumb img {
	display: block;
}

div.gallerytext {
	overflow: hidden;
	font-size: 9pt;
	word-wrap: break-word;
	margin-top: -15px;
}

/*gallery or image class for sprites*/
.pixel-perfect {
	image-rendering: pixelated;
}

/*Source edit menu*/
.CodeMirror-sizer {
	font-size: 15px;
}

/*Try to fix dancing loading icon*/
#mw-indicator-smw-entity-examiner {
	line-height: 0px;
}

/*article-table*/
.article-table tr:nth-child(even) {background: #E4E4E4}
.article-table tr:nth-child(odd) {background: #F3F3F3}
.article-table {
	border: 1px solid #000000;
	border-collapse:collapse;
}

/*Table captions*/
.wikitable > caption,
.article-table > caption {
	margin: auto;
	width: fit-content;
}

/*Keep collapsible table captions left*/
.wikitable.mw-collapsible > caption,
.article-table.mw-collapsible > caption {
	margin: 0;
}

/*Empty table cells*/
.empty {
	background-color: #CCCCCC !important;
}

/*Tooltip icons*/
.infoicon {
	font-size: 125%;
	line-height: 1em;
	cursor: help;
}

/*Tooltip text*/
.explain {
	cursor: help;
	text-decoration: underline;
	text-decoration-style: dotted;
}

/*Mobile tooltips support*/
@media (pointer: coarse), (hover: none) {
	span[title] {
		position: relative;
		display: inline-flex;
		justify-content: center;
	}
	span[title]:focus::after {
		content: attr(title);
		position: absolute;
		top: 90%;
		color: #000;
		background-color: #fff;
		border: 1px solid;
		width: fit-content;
		padding: 3px;
		z-index:999;
		font-size:9pt;
		min-width:105px;
		right:-7px;
	}
}

.front-page-heading {
	border: 5px solid #1A1A1A
}

/* [END] Global styling */

/* Namespace specific styling */

/* [START] NS0-NS1: Meta namespace */
.ns-0 .front-page-heading {
	background: #510b17;
	border-color: #8c516b;
}

.ns-0 .front-page-heading__text {
	color: #b582bd;
}

#welcome-banner {
	padding-bottom: 10px;
	margin-bottom: 5px;
	border: 1px solid #9b7d9f;
	background: #ead5ed;
}

#welcome-banner__welcome-text {
	border: none;
	margin: 0;
	text-align: center;
}

/* [END] NS0-NS1: Meta namespace */

/* [START] NS3000-3001: Yume Nikki */
.ns-3000 .front-page-heading {
	background:#320f13;
	border-color: #b393a3;
}

.ns-3000 .front-page-heading__text {
	color: #b393a3;
}
/* [END] NS3000-3001: Yume Nikki */

/* [START] NS3002-3003: Yume 2kki */
.ns-3002 .front-page-heading {
	background:#43353A;
	border-color: #59474E;
}

.ns-3002 .front-page-heading__text {
	color: #A28DA5;
}
/* [END] NS3002-3003: Yume 2kki */

/* [START] NS3004-3005: .flow */
.ns-3004 .front-page-heading {
	background:#111111;
	border-color: #bdbdbd;
}

.ns-3004 .front-page-heading__text {
	color: #bdbdbd;
}
/* [END] NS3004-3005: .flow */

/* [START] NS3006-3007: Someday */
.ns-3006 .front-page-heading {
	background: #000000;
	border-color: #178152;
}

.ns-3006 .front-page-heading__text {
	color: #b1e4bf;
}
/* [END] NS3006-3007: Someday */

/* [START] NS3008-3009: Deep Dreams */
.ns-3008 .front-page-heading {
	background: #423341;
	border-color: #939393;
}

.ns-3008 .front-page-heading__text {
	color: #a793a5;
}
/* [END] NS3008-3009: Deep Dreams */

/* [START] NS3010-3011: Answered Prayers */

/* [END] NS3010-3011: Answered Prayers */

/* [START] NS3012-3013: Amillusion */
.ns-3012 .front-page-heading {
	background: #5c462a;
	border-color: #c2ba4c;
}

.ns-3012 .front-page-heading__text {
	color: #c2ba4c;
}
/* [END] NS3012-3013: Amillusion */

/* [START] NS3014-3015: Uneven Dream */
/* Front page customizations */
.ns-3014 .front-page-heading {
	background:#6f027c;
	border-color: #49007c;
}

.ns-3014 .front-page-heading__text {
	color: #ffffff;
}
/* [END] NS3014-3015: Uneven Dream */

/* [START] NS3016-3017: Braingirl */
.ns-3016 .front-page-heading {
	background:#180C29;
	border-color: #E8D4B1;
}

.ns-3016 .front-page-heading__text {
	color: #E8D4B1;
}
/* [END] NS3016-3017: Braingirl */

/* [START] NS3018-3019: Collective Unconscious */
.ns-3018 .front-page-heading {
	background: #161124;
	border-color: #69a6ca;
}

.ns-3018 .front-page-heading__text {
	color: #ffffff;
}
/* [END] NS3018-3019: Collective Unconscious */

/* [START] NS3020-3021: Cerasus Wiki */
/* customizes header fonts */
.ns-3020 .mw-headline, .ns-3021 .mw-headline {
	font-family: 'Gentium Plus', serif;
}

.ns-3020 h1, .ns-3021 h1, .ns-3020 h2, .ns-3021 h2, .ns-3020 h3, .ns-3021 h3, .ns-3020 h4, .ns-3021 h4, .ns3020 h5, .ns-3021 h5, .ns3020 h6, .ns3021 h6  {
	font-family: 'Gentium Plus', serif;
}

/*Divider Styling */
.ns-3020 .CDivider, .ns3021 .CDivider {
	background: #ac2847;
	border:2px solid #fa6e79 !important;
	border-radius: 5px;
	padding-top: 1px;
	width: 98%;
	color: #ffd1d5;
	font-weight: bold;
}

/* styling for menu buttons, also renders them differently so they don't look blurry during animations */
.CNavBut {
	height: auto;
	overflow: hidden;
	display: inline-block;
	image-rendering: crisp-edges;
}

/* adds background color to table */
.ns-3020 table, .ns-3021 table {
	background-color: #00000005;
}

/* adds background color and changes margin of table headers */
.ns-3020 th, .ns-3021 th {
	background-color: #00000005;
	margin: 0;
}

/* adds lower border to table rows */
.ns-3020 tr, .ns-3021 tr {
	border-bottom: solid 1px #000080;
}

/* animations */

/*button animation */
@keyframes CButtons {
	0% {
		transform: scale(1);
	}
	50%{
		transform: scale(.95);
	}
	100% {
		transform: scale(1);
	}
}

/* main page flashing spoiler warning animation*/
@keyframes warnflash {
	0% {
		color: red;
		text-shadow: 0 0 3px red;
	}

	50% {
		color: #850900;
		text-shadow: 0 0 3px #000000;
	}

	100% {
		color: red;
		text-shadow: 0 0 3px red;
	}
}

@keyframes warnflashtrang {
	0% {
		text-shadow: 0 0 3px orange;
	}

	50% {
		text-shadow: 0 0 3px #000000;
	}

	100% {
		text-shadow: 0 0 3px orange;
	}
}

/* sets animation for main page nav buttons */
.CNavBut:hover {
	animation: CButtons 1.5s infinite;
}

/* sets animations for spoiler line*/
#warn {
	animation: warnflash 1s infinite;
}

#warntrang {
	animation: warnflashtrang 1s infinite;
}

/*Cherry's Custom Text (cherry blossom scented) */
.CAdmin {
	color: #fa6e79;
	text-shadow: 0 0 3px #fa6e79;
	font-family: 'Courier New', monospace;
	animation: cherry 5s infinite;
}

@keyframes cherry {
	0% {
		text-shadow: 0 0 5px #fa6e79;
	}
	50% {
		text-shadow: 0 0 3px #000000;
	}
	100% {
		text-shadow: 0 0 5px #fa6e79;
	}
}
/* [END] NS3020-3021: Cerasus Wiki */

/* [START] NS3022-3023: Muma|Rope Wiki */
.ns-3022 .front-page-heading {
	background:#000000;
	border-color: #ff14c0;
}

.ns-3022 .front-page-heading__text {
	color: #ff14c0;
}
/* [END] NS3022-3023: Muma|Rope Wiki */

/* [START] NS3024-3025: YNOproject Wiki */
.ns-3024 .front-page-heading {
	background:#ffffff;
	border-color: #eeeeee;
}

.ns-3024 .front-page-heading__text {
	color: #000000;
}
/* [END] NS3024-3025: YNOproject Wiki */

/* [START] NS3026-3027: Dream Genie Wiki */
.ns-3026 .front-page-heading {
	background: #000000;
	border-color: #f7e7ad;
}

.ns-3026 .front-page-heading__text {
	color: #d6b6b5;
}
/* [END] NS3026-3027: Dream Genie Wiki */

/* [START] NS3028-3029: Mikan Muzou Wiki */
.ns-3028 .front-page-heading {
	background:#2e3131;
	border-color: #7c878a;
}

.ns-3028 .front-page-heading__text {
	color: #7c878a;
}
/* [END] NS3028-3029: Mikan Muzou Wiki */

/* [START] NS3030-3031: Ultra Violet Wiki */
.ns-3030 .front-page-heading {
	background: #291f37;
	border-color: #5334ba;
}

.ns-3030 .front-page-heading__text {
	color: #866ed6;
}
/* [END] NS3030-3031: Ultra Violet Wiki */

/* [START] NS3032-3033: She Awaits Wiki */
.ns-3032 .front-page-heading {
	background: #797cd9;
	border-color: #ffffff;
}

.ns-3032 .front-page-heading__text {
	color: #ffffff;
}
/* [END] NS3032-3033: She Awaits Wiki */

/* [START] NS3034-3035: Oversomnia Wiki */
.ns-3034 .front-page-heading {
	background: #210f1a;
	border-color: #ad8b72;
}

.ns-3034 .front-page-heading__text {
	color: #ffe7ad;
}
/* [END] NS3034-3035: Oversomnia Wiki */

/* [START] NS3036-3037: Yume Tagai Wiki */
.ns-3036 .front-page-heading {
	background: #1e000a;
	border-color: #ff3e56;
}

.ns-3036 .front-page-heading__text {
	color: #ffffff;
}
/* [END] NS3036-3037: Yume Tagai Wiki */

/* [START] NS3038-3039: Yume Tsushin Wiki */
.ns-3038 .front-page-heading {
	background: #1f303d;
	border-color: #7e7d78;
}

.ns-3038 .front-page-heading__text {
	color: #33ff00;
}
/* [END] NS3038-3039: Yume Tsushin Wiki */

/* [START] NS3040-3041: nostAlgic Wiki */
.ns-3040 .front-page-heading {
	background: #a5a9fc;
	border-color: #8080ff;
}

.ns-3040 .front-page-heading__text {
	color: #ebebeb;
}
/* [END] NS3040-3041: nostAlgic Wiki */

/* [START] NS3042-3043: If Wiki */
.ns-3042 .front-page-heading {
	background: #000000;
	border-color: #ffffff;
}

.ns-3042 .front-page-heading__text {
	color: #ff82ff;
}
/* [END] NS3042-3043: If Wiki */