×
Create a new article
Write your page title here:
We currently have 2,649 articles on Yume Nikki Fangames Wiki. Type your article name above or click on one of the titles below and start writing!



Yume Nikki Fangames Wiki

MediaWiki:Common.css: Difference between revisions

(Created page with "→‎CSS placed here will be applied to all skins: @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) { .m...")
 
(copy from yume wiki, without ns-specific styling)
 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
@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;
color: #000000;
line-height: 14px;
word-break: break-word;
}
/*Main page styles*/
@media screen and (min-width: 1024px) and (max-width: 1279px) {
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .main-page__left-column .menu-icon-container {
.main-page__left-column .menu-icon-container {
        margin: 0 50px;
margin: 0 50px;
    }
}
}
}


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


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


@media screen and (min-width: 1280px) {
@media screen and (min-width: 1280px) {
    .main-page__column {
.main-page__column {
        display: inline-block;
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__left-column {
/*Main page headers*/
        width: 65%;
.front-page-heading {
    }
text-align:center;
font-weight:bold;
padding:1px;
}


    .main-page__right-column {
/*Search*/
        float: right;
#p-search .wvui-typeahead-search__suggestions {
        width: 310px;
top: auto;
    }
z-index: 999;
}
}


@media screen and (min-width: 1600px) {
/*Unknown what this does*/
    .main-page__left-column {
.author-jp-name {
        width: 75%;
display:none;
    }
}
 
/*Spoiler text*/
.spoiler, .spoiler a {
color: #000000!important;
background-color: #000000!important;
}
 
.spoiler:hover, .spoiler:hover a {
background-color:transparent
}
 
/*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: #505050;
color: #CCCCCC;
width: 100%;
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__header {
margin:1px;
background-color:#404040;
color:#CCCCCC;
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;
}
 
/*Source edit menu*/
.CodeMirror-sizer {
font-size: 15px;
}
 
/*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;
}
}
/* [END] Global styling */
 
/* Namespace specific styling */
 
/* [START] NS0-NS1: YNFG Wiki */
 
/*Background image light*/
body::after {
opacity: 0.5;
}
}


p {
body.ns-0 {
   margin: 8 0 8px 0;
   background: #A1A4D1;
}
}
/* [END] NS0-NS1: YNFG Wiki */

Latest revision as of 17:28, 28 October 2024

/* CSS placed here will be applied to all skins */
@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;
	color: #000000;
	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, .spoiler a {
	color: #000000!important;
	background-color: #000000!important;
}

.spoiler:hover, .spoiler:hover a {
	background-color:transparent
}

/*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: #505050;
	color: #CCCCCC;
	width: 100%;
	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__header {
	margin:1px;
	background-color:#404040;
	color:#CCCCCC;
	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;
}

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

/*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;
	}
}
/* [END] Global styling */

/* Namespace specific styling */

/* [START] NS0-NS1: YNFG Wiki */

/*Background image light*/
body::after {
	opacity: 0.5;
}

body.ns-0 {
  background: #A1A4D1;
}
/* [END] NS0-NS1: YNFG Wiki */