MediaWiki:Wikia.css

/* See Common.css for imports */

/* Supercell fonts */ @font-face { font-family: Magic; font-weight: normal; src: local('Supercell-Magic'), local('Supercell Magic'), url('http://images.wikia.com/clashofclans/images/0/0a/Supercell-magic-webfont.eot?#iefix') format('embedded-opentype'), url('http://images.wikia.com/clashofclans/images/f/ff/Supercell-magic-webfont.woff') format('woff'), url('http://images.wikia.com/clashofclans/images/a/a9/Supercell-magic-webfont.ttf') format('truetype'), url('http://www.supercell.net/assets/fonts/supercell-magic/supercell-magic-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.supercell.net/assets/fonts/supercell-magic/supercell-magic-webfont.woff') format('woff'), url('http://www.supercell.net/assets/fonts/supercell-magic/supercell-magic-webfont.ttf') format('truetype'); } @font-face { font-family: Magic; font-weight: bold; src: local('Supercell-Magic'), local('Supercell Magic'), url('http://images.wikia.com/clashofclans/images/0/0a/Supercell-magic-webfont.eot?#iefix') format('embedded-opentype'), url('http://images.wikia.com/clashofclans/images/f/ff/Supercell-magic-webfont.woff') format('woff'), url('http://images.wikia.com/clashofclans/images/a/a9/Supercell-magic-webfont.ttf') format('truetype'), url('http://www.supercell.net/assets/fonts/supercell-magic/supercell-magic-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.supercell.net/assets/fonts/supercell-magic/supercell-magic-webfont.woff') format('woff'), url('http://www.supercell.net/assets/fonts/supercell-magic/supercell-magic-webfont.ttf') format('truetype'); } @font-face { font-family: BackBeat; src: local('CCBackBeat-Light'), url('http://img4.wikia.nocookie.net/__cb20150113234615/clashofclans/images/9/9a/CCBackBeat-Light.ttf') format('truetype'); }

body.page-User_Banarama_Testing .WikiaArticle, body.page-User_Banarama_Testing .WikiaPage { font-family: 'Roboto Slab', sans-serif; color: #444; } body.page-User_Banarama_Testing .WikiaArticle h1, body.page-User_Banarama_Testing .WikiaArticle h2, body.page-User_Banarama_Testing .WikiaArticle h3, body.page-User_Banarama_Testing .WikiaArticle h4, body.page-User_Banarama_Testing .WikiaArticle h5, body.page-User_Banarama_Testing .WikiaArticle h6, body.page-User_Banarama_Testing .msg-title { color: #333; }   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; /*    This bit is super-important. It's explicitly stating the FANDOM font-stack, and !importanting it, so as to       make sure that we're in compliance with Sept 2017 guidelines about the header. The virtue of doing it this way is that we can make other changes without worrying if we're       falling out of sync with header guidelines. */ }
 * 1) PageHeader, #PageHeader * {

/* h1-specific changes */ h1 { font-family: Magic, sans-serif; }

/* Masthead heading changes */ .UserProfileMasthead .masthead-info h1 { font-size: 24px; font-weight: normal; }

/* Other headings */ h2, h3, h4, h5, h6, .msg-title { font-family: BackBeat, sans-serif; }

/* h3-specific code */ h3 { font-weight: bold; }

/* Big Buttons */ .bigButton { display: inline-block; background: #005e99; color: #fff; text-shadow: initial; font-size: 15px; font-weight: bold; height: 46px; line-height: 46px; padding: 0 30px; text-decoration: none; cursor: pointer; } .bigButton:hover { background-color: #007dcc; text-decoration: none; } .bigButton:active { background-color: #003f66; text-decoration: none; }

/* Fixing Variable Font Sizes */ font-size: 14px; line-height: 22px; }   font-size: 14px; line-height: 22px; }
 * 1) WikiaArticle {
 * 1) Wall .speech-bubble-message {

/* Wikitable */ .wikitable:not(.plain) th { background: #cde0ed !important; } .wikitable:not(.plain) tr:nth-child(odd) { background: #f0f0f0; }

.table-back { position: relative; margin: 30px 7px 15px 7px; border: none; padding: 10px; border-radius: 12px; background-color: #005e99; box-shadow: 0 2px 7px rgba(0,0,0,.4); clear: both; }

/* Navbox (Template:Navigation) */ .navbox { width: 100%; font-size: 100%; } .parent-navbox { width: calc(100% - 14px); margin: 2em 7px 1em 7px; font-size: 90%; border-radius: 12px; box-shadow: 0 2px 7px rgba(0,0,0,.4); background-color: #e6eaed; padding: 0.3em; } .navbox-header { margin: 0.5em 0.3em 0 0.3em; border-radius: 12px 12px 0 0; background: #005e99; padding: 0.2em 0.5em; color: white; } .navbox-header a { color: white; } .parent-navbox-header { border-radius: 12px; } .navbox-label { background: #005e99; color: white; padding-left: 0.5em; padding-right: 0.5em; } .mw-collapsed > tbody > tr > .navbox-header { border-radius: 12px; }

/* Infobox Styling */ .pi-europa { margin-right: 8px; box-shadow: 0 2px 7px rgba(0,0,0,.4); border-radius: 12px; overflow: hidden; } .pi-europa .pi-image { position: relative; padding: 10px 0 20px 0; } .pi-europa .pi-image img { -webkit-filter: drop-shadow(0 4px 5px rgba(0,0,0,.4)); filter: drop-shadow(0 4px 5px rgba(0,0,0,.4)); } .pi-europa .pi-data-value, .pi-europa .pi-data-label { font-size: 14px; } .pi-europa .pi-data { border-top: 1px solid #c9c9c9; }

.top-hat { font-size: 110%; text-align: center; border-width: 4px; border-style: solid; padding: 4px; margin-top: 5px; margin-bottom: 20px; } .card-box { border-radius: 12px; box-shadow: 0 2px 7px rgba(0,0,0,.4); margin-left: 7px; margin-right: 7px; clear: both; }

/* Protection image CSS */ div.protection-image { display: none; } div.protection-image-visible { display: inline; }

/* Poll Styling */ .pollAnswerVotes div { background: -ms-linear-gradient(left, #005e99 0%, #007dcc 100%) !important; background: -moz-linear-gradient(left, #005e99 0%, #007dcc 100%) !important; background: -o-linear-gradient(left, #005e99 0%, #007dcc 100%) !important; background: -webkit-gradient(linear, left top, right top, color-stop(0, #005e99), color-stop(1, #007dcc)) !important; background: -webkit-linear-gradient(left, #005e99 0%, #007dcc 100%) !important; background: linear-gradient(To Right, #005e99 0%, #007dcc 100%) !important; }

.pollAnswerVotes { color: white; }

/* Home Page Sidebar */ color: #a5c6db; }
 * 1) mainpage-sidebar a {

/* Wordmark */ .wds-community-header .wds-community-header__wordmark img { opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } .wds-community-header .wds-community-header__wordmark img:hover { opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ } /* Hover Class */ .hoverimage img { opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ } .hoverimage img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } /* Navigation Hover Class */ .hovernav img {opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } .hovernav img:hover {opacity: 0.55; filter: alpha(opacity=55); /* For IE8 and earlier */ }

a.new[href*="redlink=1"] { color: darkblue !important; }

.i18ndoc { background-color: #FFF77D; border-bottom: 1px solid lightgrey; font-family: monospace; font-size: 8pt; height: 140px; overflow: auto; padding: 3px; }

/* Clickable DIV elements with shading */ .clickable-div a { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; }

.clickable-div a > img { width: 100%; height: 100%; }

.clickable-div a > img:hover { background: rgba(0, 0, 0, 0.2); }

.card-box.clickable-div { overflow: hidden; }

/* Clickable DIV without shading */

.clickable-div-ns a { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; }

.clickable-div-ns a > img { width: 100%; height: 100%; }

/* End Clickable DIV elements */

.img-shadow-black img { -webkit-filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)); filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)); }

/* Template:NavButton */ .NavButton-Background-Image { background-image: url('"http://vignette4.wikia.nocookie.net/clashroyale/images/a/ae/NavButton-Background.jpg/revision/latest?cb=20160125234407"); background-repeat: no-repeat; background-origin: border-box; background-size: contain; }

/* Nav Button Class */ .nav-button a { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; } .nav-button a > img { width: 100%; height: 100%; }

.nav-button { background-color: #005e99; color: white; transition: background-color 1s, color 1s; -webkit-transition: background-color 1s, color 1s; -o-transition: background-color 1s, color 1s; -moz-transition: background-color 1s, color 1s; }

.nav-button:hover { background-color: white; color: #005e99; } .nav-button:active { background-color: #B2C2F0; color: #005e99; }

/* Text */ .text-border-black { text-shadow: 1px 1px 1px black, -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black; padding-left: 4px; padding-right: 4px; }

/* Legendary Card Text (Webkit only!) */ .text-legendary { background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #D68AB0), color-stop(0.25, #D8CE5D), color-stop(0.5, #6BD85D), color-stop(0.75, #5DB9D8), color-stop(1, #D85DCB)); background-image: -webkit-linear-gradient(left, #D68AB0 0%, #D8CE5D 25%, #6BD85D 50%, #5DB9D8 75%, #D85DCB 100%); background-size: 1000% 1000%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: Text-Legendary 6s infinite; color: #33cccc; /* Fallback color for non-webkit browsers */ white-space: nowrap; }

@-webkit-keyframes Text-Legendary { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} }

/* Legendary Card Glow */ .page-Bandit .pi-image-thumbnail, .page-Electro_Wizard .pi-image-thumbnail, .page-Graveyard .pi-image-thumbnail, .page-Ice_Wizard .pi-image-thumbnail, .page-Inferno_Dragon .pi-image-thumbnail, .page-Lava_Hound .pi-image-thumbnail, .page-Lumberjack .pi-image-thumbnail, .page-Mega_Knight .pi-image-thumbnail, .page-Miner .pi-image-thumbnail, .page-Night_Witch .pi-image-thumbnail, .page-Princess .pi-image-thumbnail, .page-Sparky .pi-image-thumbnail, .page-The_Log .pi-image-thumbnail, .img-legendary img { -webkit-animation: img-legendary 3s infinite; animation: img-legendary 3s infinite; }

@-webkit-keyframes img-legendary { 0% {filter: drop-shadow(0 0 5px #ff66d9); -webkit-filter: drop-shadow(0 0 5px #ff66d9);} 33% {filter: drop-shadow(0 0 5px #ffff33); -webkit-filter: drop-shadow(0 0 5px #ffff33);} 66% {filter: drop-shadow(0 0 5px #33ccff); -webkit-filter: drop-shadow(0 0 5px #33ccff);} 100% {filter: drop-shadow(0 0 5px #ff66d9); -webkit-filter: drop-shadow(0 0 5px #ff66d9);} } @keyframes img-legendary { 0% {filter: drop-shadow(0 0 5px #ff66d9); -webkit-filter: drop-shadow(0 0 5px #ff66d9);} 33% {filter: drop-shadow(0 0 5px #ffff33); -webkit-filter: drop-shadow(0 0 5px #ffff33);} 66% {filter: drop-shadow(0 0 5px #33ccff); -webkit-filter: drop-shadow(0 0 5px #33ccff);} 100% {filter: drop-shadow(0 0 5px #ff66d9); -webkit-filter: drop-shadow(0 0 5px #ff66d9);} }

/* Tabber Styling */ .tabberlive > .tabbernav > li > a { /* tabber tabs */ background-color: #005e99; color: #FFDA45 !important; font-family: Magic, sans-serif; } .tabberlive > .tabbernav > li > a:hover { /* tabber tabs when being hovered */ background-color: #FFDA45; color: #005e99 !important; } .tabberlive > .tabbernav > li > a:active { /* tabber tabs when being clicked */ } .tabberlive > .tabbernav > li.tabberactive > a { /* selected tabber tab */ background-color: white; color: #005e99 !important; border-color: #005e99; border-bottom-color: transparent; } .tabberlive > .tabbernav > li.tabberactive > a:hover { /* selected tabber tab when being hovered */ border-color: #005e99; border-bottom-color: transparent; color: #447eaa !important; } .tabberlive > .tabbernav > li.tabberactive > a:active { /* selected tabber tab when being clicked */ }

/* Tables */

/* Statistics section tables */ vertical-align: bottom; }
 * 1) unit-statistics #unit-attributes-table tr:nth-of-type(1), #unit-statistics #unit-attributes-table-secondary tr:nth-of-type(1), #unit-statistics #unit-statistics-table tr:nth-of-type(1) {

/* alternating-table */ table.alternating-table, table.alternating-table th, table.alternating-table td { border-collapse: collapse; border: 1px #cccccc solid; color: #3a3a3a; margin: 1em 1em 1em 0; } table.alternating-table th { background: #e1ffff; background: -moz-linear-gradient(top, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1ffff), color-stop(7%,#e1ffff), color-stop(12%,#e1ffff), color-stop(12%,#fdffff), color-stop(30%,#e6f8fd), color-stop(54%,#c8eefb), color-stop(75%,#bee4f8), color-stop(100%,#b1d8f5)); background: -webkit-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); background: -o-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); background: -ms-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); background: linear-gradient(to bottom, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); } table.alternating-table td:nth-of-type(odd) { background-color: rgba(255, 255, 255, .5); } table.alternating-table td:nth-of-type(even) { background-color: rgba(180, 180, 180, .5); } table.alternating-table tr.t-light { background-color: white; } table.alternating-table tr.t-dark { background-color: #CACACA; }

/* Blue gradient th table */ table.th-blue-table, table.th-blue-table th, table.th-blue-table td { border-collapse: collapse; border: 1px #cccccc solid; color: #3a3a3a; margin: 1em 1em 1em 0; } table.th-blue-table th { background: #e1ffff; background: -moz-linear-gradient(top, #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1ffff), color-stop(7%,#e1ffff), color-stop(12%,#e1ffff), color-stop(12%,#fdffff), color-stop(30%,#e6f8fd), color-stop(54%,#c8eefb), color-stop(75%,#bee4f8), color-stop(100%,#b1d8f5)); background: -webkit-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); background: -o-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); background: -ms-linear-gradient(top, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); background: linear-gradient(to bottom, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); }

/* Community Spotlight modules */ background: url(''http://vignette3.wikia.nocookie.net/clashroyale/images/c/c7/Cr-background.jpg/revision/latest?cb=20161203223634'); }   background-image: url(''https://vignette.wikia.nocookie.net/clashroyale/images/2/20/Pixel_Crux_Tile.jpg/revision/latest?cb=20170911023658'); }
 * 1) DoctorDecksModule {
 * 1) PixelCruxModule {

/* KD's text-ember class */ .page-Clash_Royale_Wiki_Staff_Members #kd-staff .text-ember, .page-User_King_Dragonhoff .text-ember { color: gold; -webkit-animation: text-ember 4s ease-in-out infinite; -moz-animation: text-ember 4s ease-in-out infinite; animation: text-ember 4s ease-in-out infinite; } @-webkit-keyframes text-ember { 0% {color: orange;} 50% {color: yellow;} 100% {color: orange;} } @-moz-keyframes text-ember { 0% {color: orange;} 50% {color: yellow;} 100% {color: orange;} } @keyframes text-ember { 0% {color: orange;} 50% {color: yellow;} 100% {color: orange;} } /* Style syntaxhighlight tags — all skins */ .mw-geshi { background: #f0f0f0; border: 1px solid #ddd; padding: 0.7em; } .source-css, #theme-solarized-light { font-family: Inconsolata, monospace !important; font-size: 105%; }