MediaWiki:Wikia.css

/*========= ROOT CLASSES TO BE USED FOR CSS VARIABLES ========= */
:root {
    font-size: 62.5%;
    --font: YakuHanJP, Emoji, Mont-Serrat, YasashisaGothic, Arial, icomoon, 'BIZ UDPGothic', sans-serif;
    --red1:      hsl(352, 70%, 94%);
    --red2:      hsl(352, 70%, 89%);
    --red3:      hsl(352, 70%, 84%);
    --red4:      hsl(352, 70%, 77%);
    --red5:      hsl(352, 70%, 72%);
    --red6:      hsl(352, 70%, 68%);
    --red7:      hsl(352, 70%, 63%);
    --red8:      hsl(352, 70%, 59%);
    --red9:      hsl(352, 70%, 57%);
    --green1:    hsl(151, 65%, 88%);
    --green2:    hsl(151, 65%, 77%);
    --green3:    hsl(151, 65%, 64%);
    --green4:    hsl(151, 65%, 51%);
    --green5:    hsl(151, 65%, 46%);
    --green6:    hsl(151, 65%, 42%);
    --green7:    hsl(151, 65%, 37%);
    --green8:    hsl(151, 65%, 33%);
    --green9:    hsl(151, 65%, 30%);
    --blue1:     #dceef7;
    --blue2:     #baddef;
    --blue3:     #9acde7;
    --blue4:     #7cbedf;
    --blue5:     #5fafd7;
    --blue6:     #45a1cf;
    --blue7:     #2c93c7;
    --blue8:     #1586bf;
    --blue9:     #007ab7;
    --cyan1:     hsl(197, 70%, 91%);
    --cyan2:     hsl(197, 70%, 82%);
    --cyan3:     hsl(197, 70%, 74%);
    --cyan4:     hsl(197, 70%, 65%);
    --cyan5:     hsl(197, 70%, 57%);
    --cyan6:     hsl(197, 70%, 49%);
    --cyan7:     hsl(197, 70%, 45%);
    --cyan8:     hsl(197, 70%, 41%);
    --cyan9:     hsl(197, 70%, 37%);
    --magenta1:  hsl(326, 70%, 94%);
    --magenta2:  hsl(326, 70%, 89%);
    --magenta3:  hsl(326, 70%, 84%);
    --magenta4:  hsl(326, 70%, 77%);
    --magenta5:  hsl(326, 70%, 72%);
    --magenta6:  hsl(326, 70%, 67%);
    --magenta7:  hsl(326, 70%, 61%);
    --magenta8:  hsl(326, 70%, 58%);
    --magenta9:  hsl(326, 70%, 53%);
    --yellow1:   hsl(58, 90%, 86%);
    --yellow2:   hsl(58, 90%, 63%);
    --yellow3:   hsl(58, 90%, 49%);
    --yellow4:   hsl(58, 90%, 45%);
    --yellow5:   hsl(58, 90%, 42%);
    --yellow6:   hsl(58, 90%, 39%);
    --yellow7:   hsl(58, 90%, 35%);
    --yellow8:   hsl(58, 90%, 31%);
    --yellow9:   hsl(58, 90%, 28%);
    --key0:      #ffffff;
    --key1:      hsl(0, 0%, 93%);
    --key2:      hsl(0, 0%, 85%);
    --key3:      hsl(0, 0%, 79%);
    --key4:      hsl(0, 0%, 69%);
    --key5:      hsl(0, 0%, 64%);
    --key6:      hsl(0, 0%, 57%);
    --key7:      hsl(0, 0%, 51%);
    --key8:      hsl(0, 0%, 46%);
    --key9:      hsl(0, 0%, 42%);
    --key10:     #3a3a3a;
    --leaf1:     hsl(72, 75%, 82%);
    --leaf2:     hsl(72, 75%, 67%);
    --leaf3:     hsl(72, 75%, 48%);
    --leaf4:     hsl(72, 75%, 44%);
    --leaf5:     hsl(72, 75%, 40%);
    --leaf6:     hsl(72, 75%, 37%);
    --leaf7:     hsl(72, 75%, 33%);
    --leaf8:     hsl(72, 75%, 29%);
    --leaf9:     hsl(72, 75%, 26%);
    --orange1:   hsl(44, 100%, 87%);
    --orange2:   hsl(44, 100%, 76%);
    --orange3:   hsl(44, 100%, 66%);
    --orange4:   hsl(44, 100%, 48%);
    --orange5:   hsl(44, 100%, 42%);
    --orange6:   hsl(44, 100%, 38%);
    --orange7:   hsl(44, 100%, 34%);
    --orange8:   hsl(44, 100%, 31%);
    --orange9:   hsl(44, 100%, 28%);
    --violet1:   hsl(245, 65%, 94%);
    --violet2:   hsl(245, 65%, 89%);
    --violet3:   hsl(245, 65%, 84%);
    --violet4:   hsl(245, 65%, 80%);
    --violet5:   hsl(245, 65%, 76%);
    --violet6:   hsl(245, 65%, 72%);
    --violet7:   hsl(245, 65%, 68%);
    --violet8:   hsl(245, 65%, 65%);
    --violet9:   hsl(245, 65%, 62%);
    --zchan_back:  #ffffee;
    --zchan_bubble:#f0e0d6;
    --zchan_button:#eeaa88;
    --zchan_border:#9a9a9a;
    --zchan_header:#e04000;
    --zchan_link:  #0000ee;
    --zchan_name:  #117743;
    --zchan_quote: #789922;
    --zchan_text:  #800000;
    --zchan_title: #cc1105;
}





/*======================== 文字修飾 ========================*/
body,
a,
button,
i,
inputn {
    font-family: var(--font);
}

#theme-solarized-light,
.EditPageEditor textarea {
    font-family: Menlo, Monaco, Consolas, var(--font) !important;
}

body.mediawiki:not([class*="page-MediaWiki"]):not([class*="page-モジュール"]):not([class*="_css"]):not([class*="_js"]) pre {
    font-family: 'IPA モナー Pゴシック', IPAMonaPGothic, Monapo, Mona, aahub_light, 'MS Pゴシック', 'MS PGothic';
    white-space: pre;
    font-size: 16px;
    line-height: 18px;
    background-color: transparent;
    border: none;
    padding: 0;
}

a,
a:hover,
a:active {
    text-decoration: none;
}
.WikiaMainContent a {
    transition: .3s;
}
.WikiaMainContent a:hover,
.WikiaMainContent a:active {
    text-shadow: 0 0 6px var(--blue6);
}
.WikiaMainContent a.new,
.WikiaMainContent a.new:visited {
    color: var(--red8);
}
.WikiaMainContent a.new:hover,
.WikiaMainContent a.new:active {
    text-shadow: 0 0 6px var(--red6);
}
.wds-is-secondary,
.tabs a:hover,
.tabs a:active,
.tabbernav a:hover,
.tabbernav a:active,
.tablike a:hover,
.tablike a:active {
    text-shadow: none !important;
}

q {
    color: var(--zchan_quote);
}
q::before {
    content: ">";
}


/*========== 文字色 ==========*/
.red {color: var(--red8);}
.green {color: var(--green6);}
.blue {color: var(--blue8);}
.cyan {color: var(--cyan5);}
.magenta {color: var(--magenta5);}
.yellow {color: var(--yellow4);}
.white {color: var(--key0);}
.gray {color: var(--key3);}
.black {color: var(--key10);}
.leaf {color: var(--leaf4);}
.orange {color: var(--orange4);}
.violet {color: var(--violet6);}


/*========== 縁取り ==========*/
.fuchidori {
    text-shadow: 0 0.1em #FFF,
                 0 -0.1em #FFF,
                 0.1em 0 #FFF,
                 -0.1em 0 #FFF,
                 0.1em 0.1em #FFF,
                 0.1em -0.1em #FFF,
                 -0.1em 0.1em #FFF,
                 -0.1em -0.1em #FFF;
}


/*========== ルビ ==========*/
[data-ruby] {
    position: relative;
}

[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    text-align: center;
    top: -1.25em;
    left: -3em;
    right: -3em;
    margin: auto;
    font-size: 0.7em;
}


/*========== 圏点 ==========*/
.kenten {
    padding: 0.15em 0;
    background-repeat: repeat-x;
    background-size: 1em 0.2em;
    background-position: top left;
    background-image: radial-gradient(0.1em 0.1em at center center, var(--key10), var(--key10) 95%, transparent);
}





/*========================== 外観 ==========================*/
/*========== 背景 ==========*/
body.skin-oasis {
    background-image: url("https://vignette.wikia.nocookie.net/kc-summary/images/5/50/Wiki-background/revision/latest?cb=20200508160508&path-prefix=ja")!important;
}


/*========== ヘッダー ==========*/
.WikiaSiteWrapper > header {
    background-image: url(https://vignette.wikia.nocookie.net/kc-summary/images/0/0e/Community-header-background/revision/latest?cb=20191219135922&path-prefix=ja);
}
.wds-community-header__counter-value {
    font-size: 15px;
    margin: 6px -5px 0 0;
}
.wds-community-header__counter-label {
    font-size: 11px;
    margin-right: -5px;
}

body.user-anon .wds-is-secondary.createpage span {
    font-size: 0;
    margin-bottom: -4px;
}
body.user-anon .wds-is-secondary.createpage span::before {
    font-size: 12px;
    content: "新規ページの作成";
}


/*========== メインコンテンツ ==========*/
@media only screen and (max-width: 1595px) {
    .WikiaPage .WikiaArticle {
        font-size: 13px;
        line-height: 21px;
    }
    table.wikitable {
        font-size: 12px;
    }
}
@media only screen and (min-width: 1596px) {
    .WikiaPage .WikiaArticle {
        font-size: 15px;
        line-height: 24px;
    }
    table.wikitable {
        font-size: 14px;
    }
}

.mediawiki p {
    margin: 0;
}

.WikiaPage {
    border-color: rgba(189,222,240,0.98);
}

.WikiaPage .WikiaPageBackground {
    opacity: 0.98;
}

.WikiaPage .WikiaArticle li {
    line-height: initial;
}

.WikiaArticle {
    min-height: 0;
    overflow: visible;
}
.WikiaArticle ul {
    list-style: circle;
}

.controls {
    list-style: none !important;
}

.editsection {
    transition: .3s;
    opacity: 0;
}
.editsection:hover {
    opacity: 1;
}

.WikiaArticle .floatleft,
.WikiaArticle .floatright {
    margin: 0;
}

a#ca-purge {
    font-size: 0;
}
a#ca-purge::before {
    font-size: 14px;
    content: "キャッシュクリア";
}


/*========== 目次 ==========*/
.WikiaArticle .toc {
    border: none;
    border-radius: 10px;
    background-color: var(--key0);
    margin: 0;
    padding: 5px 15px 0;
    box-shadow: 0 2px 2px 0 rgba(154, 205, 231, 0.7);
    z-index: 2;
}
.WikiaArticle #toctitle h2,
.toc a#togglelink {
    font-size: 0;
    background: none;
}
.WikiaArticle #toctitle h2::before {
    font-size: 14px;
    color: var(--leaf3);
    content: "\f4d8";
}
.WikiaArticle #toctitle h2::after {
    font-size: 14px;
    content: "もくじ";
}
.toc a#togglelink::before {
    font-size: 12px;
    font-weight: bold;
    content: "Open";
}
.toc.show a#togglelink::before {
    content: "Close";
}


/*========== グローバルヘッダー・フッター ==========*/
.wds-global-navigation,
.wds-global-footer {
    position: relative;
    opacity: 0.95;
    z-index: 100;
}


/*========== トップメニュー ==========*/
.wds-tabs__tab-label a::before {
    font-weight: normal;
    margin-right: 4px;
}
.wds-tabs__tab:nth-child(1) .wds-tabs__tab-label a::before {
    color: var(--red3);
    content: "\f6a1";
}
.wds-tabs__tab:nth-child(2) .wds-tabs__tab-label a::before {
    color: var(--cyan3);
    content: "\f13d";
}
.wds-tabs__tab:nth-child(3) .wds-tabs__tab-label a::before {
    color: var(--leaf3);
    content: "\f0f4";
}
.wds-tabs__tab:nth-child(4) .wds-tabs__tab-label a::before {
    color: var(--orange3);
    content: "\f14e";
}
.wds-tabs>li:nth-child(5),
.wds-tabs>li:nth-child(6) {
    display: none;
}
.wds-list.wds-is-linked>li {
    display: block !important;
}


/*========== 本文ヘッダー ==========*/
.page-header__categories,
.page-header__page-subtitle {
    display: none !important;
}
.WikiaPage .page-header__separator {
    background-color: transparent;
}

body[class*="page-テンプレート"] .page-header__title::before {
    content: "テンプレート:";
}

#WikiaPage h1 {
    font-weight: normal;
}
.WikiaPage h1::before {
    color: var(--red8);
    content: "\f1cd";
    padding-right: 0.25em;
}

.WikiaArticle h2 {
    color: var(--blue8);
    border-color: transparent;
    background-image: url(https://vignette.wikia.nocookie.net/kc-summary/images/8/88/Underline_wave.png/revision/latest?cb=20200502155723&path-prefix=ja);
    background-repeat: repeat-x;
    background-position: 0 100%;
    margin-bottom: 0.5em;
}
.WikiaArticle h2::before {
    color: var(--cyan5);
    content: "\f13d";
    padding-right: 0.25em;
}

.WikiaArticle h3 {
    color: var(--orange6);
}
.WikiaArticle h3::before {
    color: var(--orange3);
    content: "\f655";
    padding-right: 0.25em;
}


/*========== フッター/ファン・フィード ==========*/
body:not([class*="テンプレート"]):not([class*="ファイル"]) nav#articleCategories,
#article-comments-counter-header,
.WikiaArticleComments .controls {
    display: none;
}

.license-description {
    position: absolute;
    bottom: 0;
    margin: -18px 12px;
}
.license-description::before {
    content: "※";
}

.WikiaArticleFooter {
    padding: 0 0 30px;
}

#mixed-content-footer {
    background-color: rgba(10,136,196,0.25);
}

/*.mcf-header::after {
    font-size: 0.6em;
    content: "　（マウスオーバーまたはタップで表示されます）";
}
.mcf-mosaic {
    height: 4px;
    transform: translateY(-50%) scaleY(0.02);
    opacity: 0;
}
.mcf-mosaic:hover {
    height: initial;
    transform: initial;
    opacity: 1;
}*/


/*========== WikiaBar（最下部の青い細長い部分） ==========*/
.WikiaBarWrapper {
    opacity: 0.95;
    z-index: 101;
}

.WikiaBarWrapper,
.WikiaNotifications li div {
    box-shadow: none;
    background-image: none;
}

.WikiaBarWrapper .wikia-bar {
    background-image: none;
}

.WikiaBarWrapper .toolbar .tools > li {
    border-right: 1px solid #cce4f1;
}

.WikiaBarWrapper ul li a:hover {
    color: #cce4f1 !important;
    /*text-decoration: none !important;*/
}

.WikiaBarWrapper .tools-menu > li > a:hover {
    color: var(--key10) !important;
}

a.global-shortcuts-help-entry-point::after {
    content: "一覧";
}


/*========== ウィキテーブル ==========*/
.mw-content-ltr .wikitable {
    background-color: rgba(255,255,255,0.6);
}

table.wikitable {
    margin: auto;
    border: medium var(--blue3) solid;
    border-collapse: collapse;
}

table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
    padding: 3px 0;
    text-align: center;
    border-color: var(--blue3);
    border-bottom: none;
}

.wikitable tr th {
    line-height: 1.4em;
    background-color: var(--blue1);
}

.wikitable td {
    line-height: 1.2em;
}

/*table div.youtubeplayer.loaded {
    height: 119px;
}
table iframe {
    border: 1px solid;
}*/

table.tr-red,
table.tr-red > * > tr > th,
table.tr-red > * > tr > td {
    border-color: var(--red3);
}
table.tr-red tr th {
    background-color: var(--red1);
}
table.tr-green,
table.tr-green > * > tr > th,
table.tr-green > * > tr > td {
    border-color: var(--green3);
}
table.tr-green tr th {
    background-color: var(--green1);
}
table.tr-cyan,
table.tr-cyan > * > tr > th,
table.tr-cyan > * > tr > td {
    border-color: var(--cyan3);
}
table.tr-cyan tr th {
    background-color: var(--cyan1);
}
table.tr-magenta,
table.tr-magenta > * > tr > th,
table.tr-magenta > * > tr > td {
    border-color: var(--magenta3);
}
table.tr-magenta tr th {
    background-color: var(--magenta1);
}
table.tr-yellow,
table.tr-yellow > * > tr > th,
table.tr-yellow > * > tr > td {
    border-color: var(--yellow3);
}
table.tr-yellow tr th {
    background-color: var(--yellow1);
}
table.tr-key,
table.tr-key > * > tr > th,
table.tr-key > * > tr > td {
    border-color: var(--key3);
}
table.tr-key tr th {
    background-color: var(--key1);
}
table.tr-leaf,
table.tr-leaf > * > tr > th,
table.tr-leaf > * > tr > td {
    border-color: var(--leaf3);
}
table.tr-leaf tr th {
    background-color: var(--leaf1);
}
table.tr-orange,
table.tr-orange > * > tr > th,
table.tr-orange > * > tr > td {
    border-color: var(--orange3);
}
table.tr-orange tr th {
    background-color: var(--orange1);
}
table.tr-violet,
table.tr-violet > * > tr > th,
table.tr-violet > * > tr > td {
    border-color: var(--violet3);
}
table.tr-violet tr th {
    background-color: var(--violet1);
}


/*========== アバター ==========*/
.avatar {
    border-radius: 50%;
}

.masthead-info-lower::before,
.speech-bubble-message::after {
    display: none !important;
}

.UserProfileMasthead .masthead-info hgroup {
    background-color: var(--blue2) !important;
    background-image: none !important;
}

.WikiaUserPagesHeader {
    background-color: inherit;
    background-image: none;
}


/*========== スクロールバー ==========*/
::-webkit-scrollbar {
    width: 17px !important
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0,42,50,0.6) !important;
}
 
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,42,50,0.8) !important;
}
 
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0,42,50,0.95) !important;
}
::-webkit-scrollbar-track {
    background-color: transparent !important;
}





/*========================== 画像 ==========================*/
.WikiaArticle img {
    height: auto;
    max-width: 100%;
    vertical-align: text-bottom;
}

.wallfeed img {
    max-width: none !important;
}
 
.imagelink img:hover {
    /*animation: flash 1s;*/
    opacity: 0.7;
    filter: alpha(opacity=70);
}


/*========== 画像を丸くする ==========*/
.circular-image,
.circular-image img {
    border-radius: 50%;
}


/*========== 画像のグレースケール化 ==========*/
.grayscale {
    filter: grayscale(1);
}


/*========== ドット絵 ==========*/
.pixelart {
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}



/*========== ズーム ==========*/
.zoomheader img:hover {
    transform : scale(3);
    transform-origin: bottom;
    z-index: 1;
}
.zoomheader img {
    width : auto;
    max-height : 80px;
    transition : transform 0.1s linear;
    transform-origin: bottom;
    position : relative;
}

.zoomheader2 img:hover {
    transform : scale(1.712);
    transform-origin: bottom;
    z-index: 1;
}
.zoomheader2 img {
    width : auto;
    max-height : 80px;
    transition : transform 0.1s linear;
    transform-origin: bottom;
    position : relative;
}

.zoomicon img:hover {
    transform : scale(6);
    transform-origin: bottom;
    background: rgba(255,255,255,0.8);
    z-index: 1;
}
.zoomicon img {
    width : auto;
    max-width : 50px;
    max-height : 36px;
    transition : transform 0.1s linear;
    transform-origin: bottom;
    position : relative;
}


/*========== ligbox ==========*/
#ovray {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    z-index: 501200;
    display: none;
}
#ovray img {
    padding: 0;
    background-image: repeating-conic-gradient(#ccc 0, #ccc 25%, #fff 25%, #fff 50%);
    background-size: 16px 16px;
}
 
#imagebox {
    position: fixed;
    z-index: 501201;
    top: 50%;
    left: 50%;
}


/*========== イベントバナー ==========*/
div.EventBanner {
    max-width: 760px;
    margin: auto;
}

.EventBanner {
    position: relative;
    min-width: 600px;
    min-height: 79px;
}
 
.EventBannerOn {
    position: absolute;
    top: 0;
    opacity: 0;
}
 
.EventBannerOn:hover {
    opacity: 1;
}





/*============================== その他 ==============================*/
.thumbcaption {
    font-size: smaller;
}

.picture-attribution {
    display: none;
}

 
ul[id*="randomizer-"],
[id*="randomizer-"] li div {
    margin: 0;
}
[id*="randomizer-"] li {
    display: none;
    margin: 0;
}


#showmore:hover {
    cursor: pointer;
}


/*========== バルーン ==========*/
.balloon {
    position: relative;
}
.balloon span {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    padding: 15px 15px;
    border-radius: 15px;
    background: var(--cyan1);
    filter: drop-shadow(2px 2px 2px var(--cyan5));
    font-size: 1.6em;
    line-height: 1.6em;
    /*left: calc(50% - 2vw);*/
    left: 50%;
    bottom: 130%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 200px;
    transition: 0.15s ease;
}
.balloon span::before {
    content: '';
    position: absolute;
    background: transparent;
    border: 10px solid transparent;
    border-top-color: var(--cyan1);
    left: calc(50% - 10px);
    bottom: -20px;
    pointer-events: none;
}
.balloon:hover span {
    /*display: inline-block;*/
    transform: translate(-50%, -8px);
    visibility: visible;	
    opacity: 1;
}


/*========== ArticlePreview ==========*/
.article-preview {
    background-color: rgba(255, 255, 255, 0.95) !important;
}


/*========== CopyText ==========*/
.copy-to-clipboard-text {
    display: none;
}
.copy-to-clipboard-button.wds-button {
    cursor: pointer;
}


/*========== tooltips ==========*/
.main-tooltip {
    background-color: var(--key0) !important;
    border: 1px solid var(--blue6) !important;
    padding: 2px 5px;
    margin-bottom: 5px;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    font-size: 1.2rem;
}

#tooltip-wrapper {
    padding: 3px 7px 2px 3px;
}

.has-redlinks, .tooltip-loading, .advanced-tooltip .tooltip-contents {
    display: none;
}

.tooltips-init-complete {
    cursor: help;
}