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'); }

/* h1-specific changes */ h1:not(.page-header__title) { font-family: Magic; }

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

/* 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; border: 1px solid #999; font-size: 90%; } .navbox-header { background: #bad5e7; padding: 0.2em 0.5em; } .navbox-label { background: #bad5e7; }

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

/* Legendary Card Glow */ .page-Princess .pi-image { animation: img-legendary 3s infinite; }

.page-Princess h2 { color: blue; }

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

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