MediaWiki:Common.css: Difference between revisions

Latest revision as of 15:18, 11 April 2026

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

/* GO TO: http://mamiyawiki.com/index.php?title=MediaWiki:Timeless.css
TO DO THINGS REGARDING BOOTSTRAP, MOBILE VIEW, MEDIA QUERIES, RESPONSIVE DESIGN, ETC. */

/* BEGIN CUSTOM CSS FOR MAMIYA WIKI */

/* Table of Contents
=================================
	1. COMMON
	2. COLOR STYLES
	3. INFOBOX STYLES
	4. QUOTE STYLES
	5. DIV STYLES
	6. TAB STYLES
	7. RESPONSIVE STYLES
    8. COMMENTSTREAM
    9. SPOILER STYLES
    10. HEADER TABS
    11. IMAGE VIEWER
=================================
*/

/*
=================================
	1. COMMON
=================================
*/

/* Custom Fonts */
@import url('https://fonts.googleapis.com/css?family=Arvo:400,700');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese');
@import url("https://use.fontawesome.com/releases/v5.0.4/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Over+the+Rainbow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Slackside+One&display=swap');

/* [begin] KozGoPro */
/* =================================================== */
@font-face {
  font-family: 'KozGoPro';
  font-style: normal;
  src: url(../fonts/KozGoProRegular.otf);
}
/* [end] KozGoPro */

/* [begin] YAKUHAN */
/* ===================================================
*
*  Webfonts Title: Yaku Han JP ver.Small Amount
*  Author: Qrac
*  URL: https://twitter.com/Qrac_jp
*  "Noto Sans CJK JP" licensed under the SIL Open Font License
*  https://www.google.com/get/noto/#/
*
=================================================== */

@font-face {
  font-family: 'YakuHanJPs';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/YakuHanJPs/YakuHanJPs-Thin.woff2) format('woff2'),
  url(../fonts/YakuHanJPs/YakuHanJPs-Thin.woff) format('woff'),
  url(../fonts/YakuHanJPs/YakuHanJPs-Thin.eot);
}
@font-face {
  font-family: 'YakuHanJPs';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/YakuHanJPs/YakuHanJPs-Regular.woff2) format('woff2'),
  url(../fonts/YakuHanJPs/YakuHanJPs-Regular.woff) format('woff'),
  url(../fonts/YakuHanJPs/YakuHanJPs-Regular.eot);
}
@font-face {
  font-family: 'YakuHanJPs';
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/YakuHanJPs/YakuHanJPs-Black.woff2) format('woff2'),
  url(../fonts/YakuHanJPs/YakuHanJPs-Black.woff) format('woff'),
  url(../fonts/YakuHanJPs/YakuHanJPs-Black.eot);
}

/* [end] YAKUHAN */

/* Media Queries */

@media only screen and (max-width:92em) {
    .musicinfo {
        width: 18rem;
    }
}


@media only screen and (max-width: 62em) {
    .musicinfo {
        float:none;
        width:100%;
    }
}

/* [end] Media Queries */

/* [begin] Homepage Styles */
h2.welcomeheader {
    font-family: KozGoPro;
    font-weight: normal;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-size: 1.8rem;
    border-bottom: none;
}
/* [end] Homepage Styles */

/* Custom Cursor */
/* Cute Red Pencil - https://www.cursors-4u.com/cursor/cute-red-pencil */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/cute-red-pencil-96245e89-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */

/*
=================================
	2. COLOR STYLES
=================================
*/

/* [begin] Common Color Palette */

:root {
--darkmode: #1B1F1E;
--precolor: #263238;
--precolorText: #94a1bb;
--border-dark: #1d1404;
}

/* [end] Common Color Palette */

/* [begin] Custom Variables */

:root {

--thin: 62em;
--mid: 92em;

--font-xlarge: 1.5em;
--font-large: 1.2em;
--font-small: 0.9em;

--ryou: #B05B0B;
--minato: #35764E; 
--haruki: #5F5B8E; 
--keito: #385773; 

--yumehisa: #16bf41; 
--protag: #F22323; 
--librarian: #865C3A; 
--senior: #423676; 

--touma: #6988F0; 
--arisugawa: #AE1505; 
--niigaki: #BE2C4B; 
--samejima: #4B0895; 

--natsume: #f0c610;
--midori: #B05B0B;
--mina: #a63838;

--ryou-light: #E27A0A;
--minato-light: #48A064; 
--haruki-light: #64589A; 
--keito-light: #365693; 

--yumehisa-light: #16bf41; 
--protag-light: #fff; 
--librarian-light: #fff; 
--senior-light: #fff; 

--touma-light: #fff; 
--arisugawa-light: #fff; 
--niigaki-light: #fff; 
--samejima-light: #fff; 

--natsume-light: #fff;
--midori-light: #fff;
--mina-light: #EF4B67;

--funeral: #9E794C;
--pinkhouse: #FF8DCA;
--upper: #221f13;
--upper-light: #453F27;
--mamiya: #778756;
--sidechar: #979B8F;
}

/* [end] Custom Variables */

/* [begin] Character Background Color */

.ryou-bg, .Ryou-bg      { background-color: #E27A0A; }
.minato-bg, .Minato-bg      { background-color: #48A064; }
.haruki-bg, Haruki-bg      { background-color: #64589A; }
.keito-bg, Keito-bg      { background-color: #365693; }

/* [end] Character Background Color */

table.cargoTable.noMerge tr:nth-child(2n+1) {
	background: var(--precolor);
}

table.cargoTable.noMerge tr:nth-child(2n) {
	background: var(--precolor);
}

/*
=================================
	3. INFOBOX STYLES
=================================
*/

.infobox {
    width: 28em;
    text-align: center;
    border: 1px solid #000;
    border-radius: 15px;
    padding: 1em;
    margin-top: 1em;
    margin-left: 1em;
    margin-bottom: 1em;
    background-color: #22292E;
    color: #d1d6ca;
}

.infobox tr td table {
    border-collapse:collapse;
}
.infobox tr td table tr {
    border-bottom: 1px solid #000;
}
.infobox tr td table tr:last-child {
    border:0;
}
.infobox tr td table tr td:first-child {
    vertical-align:top;
}

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

.ui-tabs-panel {
    margin-top: 1em;
}

@media only screen and (max-width: 600px) {
    .infobox {width: 100%; margin-left: 0;}
}

:root {
--pi-secondary-background: var(--mamiya);
}

.portable-infobox {
    width: 30em;
    text-align: center;
    border: 1px solid #000;
    border-radius: 15px;
    background-color: #22292E;
    color: #d1d6ca;
}

.pi-title {
	color: #202122 !important;
	background-color: var(--natsume) !important;
    font-family: inherit !important;
    font-size: 2em;
	font-weight: bold;
    border-radius: 15px 15px 0px 0px;
}

.skin-timeless #mw-content-text .pi-title {
	line-height: 0.75;
}

.pi-title::after {
    border-bottom: solid 0px var(--darkmode) !important;
}

.pi-header {
    color: #202122;
}

.pi-header::after {
    border-bottom: solid 0px var(--darkmode) !important;
}

.pi-section-navigation .pi-section-tab.pi-section-active, .pi-section-navigation .pi-section-tab.current, .pi-media-collection .pi-tab-link.current {
    color: #202122;
}

.portable-infobox .pi-section-navigation, .portable-infobox .pi-media-collection-tabs {
	margin: 5px -1px 10px;
}

.portable-infobox .pi-data-value {
    display: flex;
    justify-content: center;
    align-items: center;
}

.portable-infobox tr td table {
    border-collapse:collapse;
}
.portable-infobox tr td table tr {
    border-bottom: 1px solid #000;
}
.portable-infobox tr td table tr:last-child {
    border:0;
}

.pi-group {
    border-bottom: none;
}

/*
=================================
	4. QUOTE STYLES
=================================
*/

.kikuchiQuote {
    border-left: 3px solid var(--ryou-light);
}

.minatoQuote {
    border-left: 3px solid var(--minato-light);
}

.harukiQuote {
    border-left: 3px solid var(--haruki-light);
}

.keitoQuote {
    border-left: 3px solid var(--keito-light);
}

.natsumeQuote {
    border-left: 3px solid var(--natsume);
}

.minaQuote {
    border-left: 3px solid var(--mina-light);
}

/*
=================================
	5. DIV STYLES
=================================
*/

/*
=================================
	6. TAB STYLES
=================================
*/

.tabs-label {
    background-color: var(--precolor); 
    border: 1px solid #000;
}

.tabs-label:hover {
    background-color: var(--mamiya); 
    border: 1px solid #000;
}

.tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label {
    background-color: var(--mamiya);
    border: 1px solid #000;
}

.tabs-tabbox > .tabs-container {
    background-color: var(--precolor);
    border: 1px solid #000;
}

/*
=================================
	7. TABLE STYLES
=================================
*/

/* [start] NEW TABLES */

.table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    text-align: left;
}

.table th {
    color: #495057;
    background-color: #dee2e6;
    border-bottom: 2px solid #dee2e6;
}

.table td, .table th {
    padding: .70rem;
    border-top: 1px solid #dee2e6;
}

.table th {
    text-align: inherit;
}

.table-bordered {
    border: 1px solid #dee2e6;
}

.table caption {
    font-weight: bold;
    font-size: 1.2em;
}

/* Table colours */

.mamiyatable th {
    background: var(--yumehisa);
    border-color: var(--yumehisa);
    border-bottom: 1px solid var(--yumehisa);
    color: #000;
}

.mamiyatable td {
    border-top: 1px solid var(--yumehisa);
}

.natsumetable th {
    background: var(--natsume);
    border-color: var(--natsume);
    border-bottom: 1px solid var(--natsume);
    color: #000;
}

.natsumetable td {
    border-top: 1px solid var(--natsume);
}

/*
=================================
	8. COMMENTSTREAM
=================================
*/

.cs-expanded .cs-comment-header {
	background-color: var(--darkmode);
}

.cs-head-comment > .cs-comment-header {
	border-top: 3px dotted white;
}

.cs-comment-details {
	font-size: 0.86em;
	opacity: 0.8;
	color: var(--yumehisa);
}

.cs-comment-body {
	margin-bottom: 5px;
	font-size: 1em;
	background-color: var(--precolor);
	color: var(--precolorText);
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
	color: var(--natsume);
}

/*
=================================
	9. SPOILER STYLES
=================================
*/

.spoilers-button {
    background: var(--natsume);
    border: 0px;
}

.spoilers-button:hover {
    background: var(--protag); 
}

.spoilers-body {
	background-color: var(--precolor);
	padding-left: 1em; 
	display: flex; 
	color: #d1d6ca; 
}

/* HOVER SPOILER TEXT */

.sblock {
	color: #d1d6ca;
	background-color: #d1d6ca;
	transition: 2s;
	text-decoration: none;
}

.sblock a {
    color: #d1d6ca;
}

.sblock:hover {
	background-color: transparent;
	text-decoration: none;
}

.sblock a:hover {
    color: var(--natsume);
}

.sblock a:visited {
    color: #d1d6ca;
}

.sblock a:visited:hover {
    color: #dcb71c;
}

/*
=================================
       10. HEADER TABS
=================================
*/
.oo-ui-tabOptionWidget {
    font-size: larger;
    color: var(--natsume);
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
	border-width: 0px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.oo-ui-panelLayout-framed {
    border-width: 0px !important;
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    color: #d1d6ca;
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    background-color: var(--darkmode);
}

.oo-ui-tabSelectWidget-framed {
    background-color: transparent;
}

.oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout {
	padding: 20px 0px !important;
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
	background-color: var(--darkmode);
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
	color: #d1d6ca;
    background-color: rgba(255,255,255,0.3);
}

/*
=================================
	11. IMAGE VIEWER
=================================
*/

.mw-mmv-post-image, .mw-mmv-image-metadata {
	color: var(--precolorText);
	background-color: var(--precolor);
}

/* END CUSTOM CSS FOR MAMIYA WIKI */