MediaWiki:Themes.css

/* Infobox */ /** Main **/ .portable-infobox { border-radius: 8px; border: 2px solid var(--theme-link-color); padding: 2px; background: transparent; } .portable-infobox .pi-title { background-color: var(--theme-link-color); color: #fff; line-height: 20px; text-align: center; background-image: url('https://static.wikia.nocookie.net/aestrol-walrus/images/e/e0/Great_Sage_Abstract.png/revision/latest?cb=20220603034055&format=original') !important; background-size: cover; background-position: center; font-weight: bold; border-radius: 8px 8px 0 0; } .portable-infobox .pi-header { background-color: var(--theme-link-color); color: #fff; font-size: 16px; font-weight: normal; text-align: center; background-image: url('https://static.wikia.nocookie.net/aestrol-walrus/images/7/7b/Great_Sage_Abstract_2.png/revision/latest?cb=20220603014358&format=original') !important;c background-size: cover; background-position: center; font-weight: bold; } .portable-infobox .pi-data { flex-basis: 60%; } .pi-border-color { border-color: var(--theme-link-color); }

/** Gallery **/ .portable-infobox .wds-tabs__tab, .pi-section-tab { flex: 1 auto; text-align: center; height: 40px; font-weight: 500; color: var(--theme-link-color); font-size: 80%; cursor: pointer; } .portable-infobox .wds-tabs__tab.wds-is-current .wds-tabs__tab-label.wds-is-current, .pi-section-tab { border: 0; cursor: default; } .portable-infobox .wds-tabs__tab:not(.wds-is-current) .wds-tabs__tab-label:not(.wds-is-current), .pi-section-tab { color: var(--theme-page-text-color); font-weight: 400; }

/* Home Page */ /** Main **/ .main-page { margin-bottom: 0.8em; border-radius: 12px; text-align: center; width: 100%; } .main-page a:hover, .main-page a:active { text-decoration: none; } .main-page_head { background-color: var(--theme-link-color); color: #fff; border-radius: 12px 12px 0 0; padding: 0.4em; font-size: 140%; font-weight: bold; margin-bottom: 0.08em; } .main-page_subhead { background-color: var(--theme-link-color); color: #fff; padding: 0.2em; font-size: 100%; font-weight: bold; } .main-page_body { padding: 0.2em; } .main-page_foot { background-color: var(--theme-link-color); color: #fff; border-radius: 0 0 12px 12px; padding: 0.4em; font-size: 90%; color: #fff !important; } .main-page_foot a { color: #fff; } .theme-fandomdesktop-light .main-page { background: url('https://sp.ten-sura.com/quiz/assets/img/illust_bg_.png') repeat center; background-color: #CBDBFB; } .theme-fandomdesktop-dark .main-page { background: url('https://sp.ten-sura.com/quiz/assets/img/illust_bg_.png') repeat center; background-color: #0B1836; }

/*** Countdown ***/ .count { border-radius: 12px; width: 100%; margin-bottom: 0.4em; height: 60px; background: var(--theme-link-color); --bg: #fff; --hover-bg: var(--theme-link-color); --hover-text: #fff; border: 1px solid var(--theme-link-color); color: #fff; transition: 0.4s; } .count:hover { color: var(--hover-text); transform: translate(-0.25rem,-0.25rem); background: var(--hover-bg); box-shadow: 0.25rem 0.25rem var(--bg); } .count a { color: #fff !important; } .count th { padding: 0 6px; pointer-events: none; } .count td { padding: 0.8em; width: 100%; } .count b { font-size: 100%; } .count div { float: right; font-size: 80%; font-variant: small-caps; font-weight: bold; }

/*** Welcome ***/ .welcome { padding-top: 2em; pointer-events: none; } .theme-fandomdesktop-light .w_logo-dark { display: none; } .theme-fandomdesktop-dark .w_logo-light { display: none; } .welcome_title { font-size: 200%; font-variant: small-caps; padding: 0.25em 0em 0.75em; 0em; color: var(--theme-page-text-color); } .welcome_nav { margin: auto; font-variant: small-caps; color: var(--theme-page-text-color); } .welcome_nav td a { color: var(--theme-page-text-color); transition: 0.4s; } .welcome_nav a:hover { transform: scale(1.2); color: var(--theme-link-color); }

/*** Featured ***/ .featured_content { text-align: center; color: #fff; } .featured_content a { color: #fff !important; } .featured_content th { padding: 15px 20px; } .featured_content td { background-color: var(--theme-link-color); border: 1px solid var(--theme-link-color); border-radius: 12px; padding: 15px 20px; width: 75%; vertical-align: top; } .featured_content span { font-size: 120%; } .featured_content b { font-size: 120%; }

/*** Affiliates ***/ padding: 0.5em; }   max-width: 100%; margin: auto; display: inline-block; transition: 0.4s; }   transform: scale(1.025); } .affiliates { height: 275px; overflow: auto; margin-bottom: 3px; } .affiliates-table { width: 100%; text-align: center; padding: 2.5px; } .affiliates-table td { width: calc(100% * 1/3) } .affiliates-table tr:nth-child(odd) td:nth-child(odd), .affiliates-table tr:nth-child(even) td:nth-child(even) { background-color: var(--theme-link-color); }
 * 1) wmDiv {
 * 1) wmDiv img {
 * 1) wmDiv img:hover {

/*** Tally ***/ .mp-tally { border-radius: 12px; width: 200px; margin-bottom: 0.2em; background-color: var(--theme-link-color); border: 1px solid var(--theme-link-color); color: #fff; transition: 0.4s; padding: 0.4em; } .mp-tally:hover { transform: scale(0.985); } .mp-tally a { color: #fff !important; } .mp-tally b { float: left; font-size: 100%; } .mp-tally div { float: right; font-size: 80%; font-variant: small-caps; font-weight: bold; }

/*** External Links ***/ .e-links { width: 100%; text-align: center; padding: 2.5px; font-size: 80%; transition: 0.2s; } .e-links th { background-color: var(--theme-link-color); color: #fff; font-size: 120%; padding: 5px } .e-links td { width: calc(100% * 1/3); color: var(--theme-link-color) !important; border: 1px solid var(--theme-link-color); padding: 5px border-radius: 7.5px; } .e-links td a, .e-links td a.new { display: block; color: inherit; } .e-links td > .selflink, .e-links td > span, .e-links td a > span { display: block; padding: 2.5px; } .e-links td:hover { background-color: var(--theme-link-color); color: #fff !important; text-shadow: 0px; }

/*** Line ***/ .line-solid { border-top: 1px solid var(--theme-link-color); } .line-dashed { border-top: 1px dashed var(--theme-link-color); }

/*** Alert ***/ .alert { padding: 8px; border: 1px solid var(--theme-link-color); background-color: var(--theme-link-color); border-radius: 12px; color: #fff; text-align: center; transition: 0.4s; } .alert:hover { transform: scale(0.985); } .alert a { color: #fff !important; }

/*** "More" Button ***/ .more { border-radius: 12px; cursor: pointer; background-color: var(--theme-link-color); font-weight: bold; text-decoration: none; transition: 0.4s; padding: 0 0.5em; } .more:hover { transform: scale(0.985); } .more a { color: #fff !important; padding: 0 0.5em; }

/*** Discord Widget ***/ .discord-widget .widget-header { background-color: var(--theme-link-color); } .discord-widget .widget-footer { background-color: var(--theme-link-color); } .discord-widget .widget-body { background: linear-gradient(to right, rgba(000, 000, 000, 0.25), rgba(000, 000, 000, 0.25)), url(https://static.wikia.nocookie.net/tensei-shitara-slime-datta-ken/images/a/a9/Rimuru_rest.jpg/revision/latest?cb=20190313063419&format=original) top / cover; } .discord-widget .widget-member-avatar img { border: 2px solid var(--theme-link-color); background-color: var(--theme-link-color); } .discord-widget .widget-member .widget-member-name { background-color: var(--theme-link-color); } .discord-widget .widget-btn-connect { color: var(--theme-link-color) !important; background-color: #FFFFFF; border: 1px solid var(--theme-link-color); } .discord-widget .widget-btn-connect:hover { opacity: 1; background: #EEEEEE; color: var(--theme-link-color--hover) !important; border: 1px solid var(--theme-link-color); text-decoration: none; text-shadow: none; } .discord-widget .widget-role-name { color: #FFFFFF !important; background: var(--theme-link-color); background-size: 20px; padding: 5px; border-radius: 5px; } .discord-widget .widget-body::-webkit-scrollbar { width: 5px; } .discord-widget .widget-body::-webkit-scrollbar-track { background: transparent; margin: 1px 0; } .discord-widget .widget-body::-webkit-scrollbar-thumb { background: var(--theme-link-color); }

/*** Releases ***/ .releases { margin: auto; } .releases tr { vertical-align: top; } .releases td { padding: 5px; width: calc(100% * 1/3); transition: 0.4s; } .release_type div:before, .release_type div:after { font-weight: normal; display: inline-block; background: var(--theme-link-color); position: relative; vertical-align: middle; content: ""; width: 7.5%; height: 1px; } .release_type div:before { right: 12px; } .release_type div:after { left: 12px; } .release_type { padding: 0 200px; margin: 1em 0 0.25em 0; text-align: center; } .release_type div { color: var(--theme-link-color); font-weight: bold; } .release_content { width: auto; margin: auto; text-align: center; padding: 0.5em 0; width: 200px; } .release_content a:active { text-decoration: none; } .release_content td { padding-top: 0.5em; padding: 8px; color: var(--theme-link-color); } .release_content td a { color: var(--theme-link-color); } .release_content div { font-size: 75%; margin-top: -0.25em; font-style: normal; font-weight: 300; }

/* Page Tabs — One Piece Wiki*/ .article-tabs { margin-bottom: 10px; } .article-tabs-bottomline { border-top: 2px solid var(--theme-link-color); width: 100%; }

/** List **/ .article-tabs ul { display: flex; flex-wrap: wrap; position: relative; list-style-type: none; list-style-image: none; margin: 0; padding: 0; }

/** Default Style **/ .article-tabs li { margin: 0; min-width: 100px; border: 2px solid var(--theme-link-color); background-color: transparent; color: var(--theme-link-color); font-size: 15px; font-weight: bold; text-align: center; border-bottom-color: transparent; } .article-tabs li:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 0px; } .article-tabs li:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 0px; }

/** Link **/ .article-tabs li a, .article-tabs li a.new { display: block; color: inherit !important; } .article-tabs li > .selflink, .article-tabs li > span, .article-tabs li a > span { display: block; padding: 5px 10px; }

/** Active and Hover Style **/ .article-tabs .at-selected, .article-tabs li:hover { background-color: var(--theme-link-color); color: #fff; text-shadow: 0px; }

/* Activity Tabs */ .activity-tabs { border: none !important; border: 0 !important; } .activity-tabs .wds-tabs { justify-content: center; } .activity-tabs .wds-tabs a { font-size: 85%; text-align: center; text-transform: uppercase; font-weight: bold !important; color: var(--theme-link-color) !important; cursor: pointer; } .activity-tabs .wds-tabs a { text-shadow: none !important; color: inherit; }

/* Gallerylink */ .gallerylink { display: inline-block; color: #fff; transition: all 0.5s; cursor: pointer; margin: auto; background-color: var(--theme-link-color); width: 80%; clear: both; padding: 0.5em; color: #fff; border-radius: 12px; font-weight: bold; font-size: 80%; } .gallerylink td { width: 100%; } .gallerylink:hover { background-color: var(--theme-accent-color); transform: scale(0.985); } .gallerylink a { color: #fff; } .gallerylink b { font-size: 160%; } .gallerylink span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; float: right; font-weight: bold; font-size: 160%; } .gallerylink span:after { content: '\00bb'; opacity: 0; transition: 0.5s; } .gallerylink:hover span { padding-right: 10px; } .gallerylink:hover span:after { opacity: 1; right: 0; } .gallerylink td a, .gallerylink td a.new { display: block; color: inherit; } .gallerylink td > .selflink, .gallerylink td > span, .gallerylink td a > span { display: block; padding: 0.5em; }

/* Gallery */ .gallery { color: var(--theme-link-color) !important; text-align: center; font-size: 95%; } .gallery-line h3 { padding: 7.5px; border-bottom: 1px solid var(--theme-link-color); width: 50%; margin-bottom: -5px; } .gallery .mw-editsection a { display: none; }

/** Border **/ .gallery-border { width: 100%; margin-top: 1.30em; border: 2px solid; padding: 5px; border-image: linear-gradient(to bottom, var(--theme-link-color), transparent) 10; } .gallery-border-wide { width: 100%; border: 2px solid; padding: 2.5px; border-image: linear-gradient(to bottom, var(--theme-link-color), transparent) 10; }

/** Head **/ .gallery_head { background-color: var(--theme-link-color); border-radius: 20px 20px 0px 0px; padding: 2.5px; width: 100%; } .gallery_head h1 { color: #fff; font-weight: bold; font-size: 150%; } .gallery_head h1 a { color: #fff !important; }

/** Subhead **/ .gallery_subhead { width: auto; } .gallery_subhead h3 { background-color: var(--theme-link-color); color: #fff; font-size: 125%; font-weight: bold; position: top-absolute; } .gallery_subhead h3 a { color: #fff !important; display: initial; }

/** Body **/ .gallery_body h3 { font-weight: bold; margin-top: 5px; margin-bottom: 0px; } .gallery_body a { color: var(--theme-link-color) !important; } .gallery_body h4:before, .gallery_body h4:after { font-weight: normal; background: var(--theme-link-color); display: inline-block; position: relative; vertical-align: middle; content: ""; width: 7.5%; height: 1px; } .gallery_body h4:before { right: 12px; } .gallery_body h4:after { left: 12px; }

/** Tabber **/ .gallery .tabber .wds-tabs__wrapper { border: none; margin-bottom: 10px; } .gallery .tabber .wds-tabs__wrapper .wds-tabs { background: transparent; padding: 3px 0; text-align: center; margin: 0 0 -10px 0; flex-wrap: wrap; justify-content: center; } .gallery .tabber .wds-tabs .wds-tabs__tab-label { margin: 0; height: auto; } .gallery .tabber .wds-tabs__tab a { border: none; color: var(--theme-page-text-color) !important; font-size: 14px; font-weight: 450; margin: 0; padding: 4px 14px; cursor: pointer; text-decoration: gold; transition: 0.2s; } .gallery .tabber .wds-tabs__tab a:hover { border: none; color: #fff !important; background: var(--theme-link-color); font-size: 14px; font-weight: 450; margin: 0; padding: 4px 14px; cursor: pointer; text-decoration: gold; } .gallery .tabber .wds-tabs__tab:first-child a { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .gallery .tabber .wds-tabs__tab:last-child a { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .gallery .tabber .wds-tabs__tab a:active { text-decoration: gold; cursor: default; } .gallery .tabber .wds-tabs__tab.wds-is-current a { background: var(--theme-link-color); color: #fff !important; text-decoration: gold; cursor: default; } .gallery .tabber .wds-tabs__tab.wds-is-current a:active { background: var(--theme-link-color); cursor: default; }

/** Thumb **/ .gallery .gallerybox div.thumb { width: 130px; } .article-thumb, .gallerybox, .gallerybox div.thumb, .activityfeed-inserted-media li { -moz-border-radius: 1ex; border-radius: 1ex; border: none; overflow: hidden; } figcaption { margin: 0px; } .article-thumb figcaption .caption { margin: 8px; font-size: 12px; } .WikiaArticle .article-thumb p:last-child, .WikiaArticle .article-thumb p + p:last-child { padding: 0; } .article-thumb:hover, .gallerybox:hover { box-shadow: none; } .gallerybox div.thumb { width: 140px; } .wikia-gallery-item .thumb .gallery-image-wrapper.accent { background-color: transparent; border-color: transparent; } .wikia-gallery-border-small .thumb .gallery-image-wrapper { border-radius: 1ex !important; } .picture-attribution { display: none !important; } div.picture-attribution { display: none !important; }

/** Link **/ .poll-banner { background-image: url('https://vignette.wikia.nocookie.net/justiceleagues/images/8/8e/Summer-anime-wallpaper.jpg/revision/latest?cb=20190222075752&format=original'); background-size: cover; }

/** Navigation **/ .topbox { background: rgba(132, 170, 180, 0.06) !important; border: 1px solid #84aab4; font-size: 85%; width: 100%; } .topbox-top { border-bottom: 0 solid transparent; border-radius: 0px 0px 0 0; } .topbox-alone { border-radius: 0px; } .topbox-bottom { border-radius: 0 0 0px 0px; text-align: center; } .topbox-bottom td { width: 50%; }

/* Cover Hover — Loving Yamada at Lv999! Wiki*/ .book-container, .book-container-comic { -moz-perspective: 1200px; -webkit-perspective: 1200px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -webkit-user-drag: none; user-drag: none; display: block; margin: 0 auto; perspective: 1200px; width: 250px; }

.book, .book-comic { -moz-transform-origin: 125px 0; -moz-transform-style: preserve-3d; -moz-transition: 0.75s; -webkit-transform-origin: 125px 0; -webkit-transform-style: preserve-3d; -webkit-transition: 0.75s; box-shadow: 0 2px 4px rgba(227, 109, 118, 0.25); transform-origin: 125px 0; transform-style: preserve-3d; transition: 0.75s; z-index: 5; } .book:after, .book-comic:after { bottom: 0; content: ""; left: 3px; position: absolute; top: 0; width: 7px; z-index: 20; } .book:hover { -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); } .book-comic:hover { -moz-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); } .book-container { width: 250px; } .book-container-comic { width: 150px; } .book-cover { position: relative; z-index: 10; } .book-cover img { height: auto; max-width: 100%; vertical-align: bottom; } .book-spine { background: url(https://i.imgur.com/Mshm8sZ.png); } .book-spine-comic1 { background: #FFFFFF; } .book-spine-comic2 { background: #FFFFFF; } .book-spine-comic3 { background: #FFFFFF; } .book-spine-comic1, .book-spine-comic2, .book-spine-comic3, .book-spine { -moz-transform-origin: 0; -moz-transform: rotateY(-90deg) translateX(-49px); -webkit-transform-origin: 0; -webkit-transform: rotateY(-90deg) translateX(-49px); background-size: auto 100%; bottom: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); color: #FFFFFF; smargin-left: 5px; overflow: hidden; position: absolute; top: 0; transform-origin: 0; z-index: 5; } .book-spine { transform: rotateY(-90deg) translateX(-30px); width: 30px; } .book-spine-comic1, .book-spine-comic2, .book-spine-comic3 { transform: rotateY(-90deg) translateX(-20px); width: 20px; } .book-spine-comic1 h1, .book-spine-comic2 h1, .book-spine-comic3 h1, .book-spine h1 { -moz-transform-origin: 0; -moz-transform: rotateZ(90deg); -webkit-font-smoothing: antialiased; -webkit-transform-origin: 0; -webkit-transform: rotateZ(90deg); color: #FFFFFF; display: block; font-size: 2em; font-weight: normal; left: 39px; opacity: 0.75; position: absolute; text-align: left; text-indent: 43px; text-transform: uppercase; top: 0; transform-origin: 0; transform: rotateZ(90deg); width: 250px; } .book-spine-comic1:before, .book-spine-comic2:before, .book-spine-comic3:before, .book-spine:before { content: ""; display: block; height: 100%; width: 100%; }