MediaWiki:Common.css: Difference between revisions

Revision as of 22:52, 8 July 2023

/* 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
=================================
*/

/*
=================================
	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 */

/*
=================================
	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: #fff;

--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 */

/*
=================================
	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;
}

.funeral th {
    background: var(--funeral);
}

.pinkhouse th {
    background: var(--pinkhouse);
}

.upper th {
    background: var(--upper);
}

.mamiya th {
    background: var(--mamiya);
}

.sidechar th {
    background: var(--sidechar);
}

.funeral {
    background: var(--funeral-light);
    border: 1px solid var(--funeral);
}

.pinkhouse {
    background: var(--pinkhouse-light);
    border: 1px solid var(--pinkhouse);
}

.upper {
    background: var(--upper-light);
    border: 1px solid var(--upper);
}

.mamiya {
    background: var(--mamiya-light);
    border: 1px solid var(--mamiya);
}

.sidechar {
    background: var(--sidechar-light);
    border: 1px solid var(--sidechar);
}

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

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

/*
=================================
	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);
}

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

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

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

.tabs-label {
    background-color: #22292E; 
    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: #22292E;
    border: 1px solid #000;
}

/* END CUSTOM CSS FOR MAMIYA WIKI */