MediaWiki:Wikia.css

@import "//dev.wikia.com/index.php?title=FontAwesome/code.css&action=raw&ctype=text/css"; @import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url("/load.php?mode=articles&articles=MediaWiki:Usernames.css&only=styles"); @import "/index.php?title=MediaWiki:Mainpage.css&action=raw&ctype=text/css&cb=2";

/* Supercell fonts */ @font-face { font-family: Magic; src: local('Supercell-Magic'), local('Supercell Magic'), url(https://images.wikia.nocookie.net/clashofclans/images/0/0a/Supercell-magic-webfont.eot#iefix) format('embedded-opentype'), url(https://images.wikia.nocookie.net/clashofclans/images/f/ff/Supercell-magic-webfont.woff) format('woff'), url(https://images.wikia.nocookie.net/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(https://images.wikia.nocookie.net/__cb20150113234615/clashofclans/images/9/9a/CCBackBeat-Light.ttf) format('truetype'); }

/* Hover Class */ .hoverimage img { opacity: 0.75; filter: alpha(opacity=75); /* 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 */ } /* Fixing Variable Font Sizes */ font-size: 14px; line-height: 22px; } /* Poll Styling */ .pollAnswerVotes div { background: -ms-linear-gradient(left, #FF6633 0%, #FF6666 100%) !important; background: -moz-linear-gradient(left, #FF6633 0%, #FF6666 100%) !important; background: -o-linear-gradient(left, #FF6633 0%, #FF6666 100%) !important; background: -webkit-gradient(linear, left top, right top, color-stop(0, #FF6633), color-stop(1, #FF6666)) !important; background: -webkit-linear-gradient(left, #FF6633 0%, #FF6666 100%) !important; background: linear-gradient(To Right, #FF6633 0%, #FF6666 100%) !important; }
 * 1) WikiaArticle {

/* 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 */ .table-back { margin-top: 30px; margin-bottom: 15px; border: 0px ridge silver; padding: 10px; border-radius:15px; -moz-border-radius: 15px; -webkit-border-radius:15px; background-color: gainsboro; } /* 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; }

/* Main page */ /** General **/ .mainpage-box { font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; margin: 20px 0px 30px; } .mainpage-box h2 { border: medium none; color: #656e78; font-size: 26px; font-weight: bold; line-height: normal; margin: 85px 0 20px; overflow: hidden; padding: 0; text-align: center; text-transform: uppercase; } .mainpage-box h2::before, .mainpage-box h2::after { background-color: #707070; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } .mainpage-box h2::before { margin-left: -50%; right: 0.5em; } .mainpage-box h2::after { left: 0.5em; margin-right: -50%; } .mainpage-box h3 { color: #333333; font-weight: bold; font-size: 22px; line-height: normal; margin: 15px 0px 20px; } .mainpage-more { margin-top: 20px; } .mainpage-more a, .mainpage-more .recent a:active, .mainpage-more .recent a:visited { color: #4a90e2; font-size: 18px; text-decoration: none; } .mainpage-more a:hover { color: #6aaefc; } .mainpage-more a::after { background-size: cover; background-image: url("https://vignette.wikia.nocookie.net/central/images/4/45/Mainpage_Arrows.png/revision/latest?cb=20160711222557"); background-position: 0px 0px; background-repeat: no-repeat; content: ""; display: inline-block; height: 16px; left: 8px; position: relative; top: 3px; width: 22px; } .mainpage-more a:hover::after { background-position: -23px 0px; } /** Blogs **/ .mainpage-blogs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mainpage-blogs .blog { margin: 10px 0px; width: calc(50% - 10px); } .mainpage-blogs .blog.featured { width: 100%; } .mainpage-blogs .hero-image img { height: auto; width: 100%; } .mainpage-blogs .blog-info { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; border-bottom: 1px solid #e5e9f4; border-left: 1px solid #e5e9f4; border-radius: 0px 0px 4px 4px; border-right: 1px solid #e5e9f4; display: -webkit-box; display: -ms-flexbox; display: flex; height: 64px; } .mainpage-blogs .blog .blog-info { padding: 15px 15px 10px 10px; } .mainpage-blogs .blog.featured .blog-info { padding-bottom: 10px; } .mainpage-blogs .details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 18px; } .mainpage-blogs .blog-info .avatar { height: 55px; margin: 0px 20px 0px 0px; } .mainpage-blogs .blog-info .avatar img { border-radius: 50%; height: 100%; width: auto; } .mainpage-blogs .blog-info .author a, .mainpage-blogs .blog-info .author a:active, .mainpage-blogs .blog-info .author a:visited { color: #000000 !important; text-decoration: none; font-weight:normal !important; } .mainpage-blogs .blog-info .author a:hover { color: #545454 !important;; } .mainpage-blogs .blog-info .timestamp { color: #999999; font-size: 14px; } .mainpage-blogs .blog-info .timestamp::before { content: "\00a0\00a0•\00a0"; font-size: 10px; } .mainpage-blogs .blog .blog-info .title { font-size: 18px; font-weight: bold; margin-top: 4px; } .mainpage-blogs .blog.featured .blog-info .title { font-size: 23px; } .mainpage-blogs .blog-info .title a, .mainpage-blogs .blog-info .title a:active, .mainpage-blogs .blog-info .title a:visited { color: #4a90e2; text-decoration: none; } .mainpage-blogs .blog .title a:hover { color: #6aaefc; } .mainpage-blogs1 .blog { width:100%; } /** FAQ **/ .mainpage-faq .faqs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mainpage-faq .faq-section { margin: 10px 0px; width: calc(50% - 10px); } .mainpage-faq h4 { background: #f2f6fa none repeat scroll 0% 0%; color: #656e78; font-size: 18px; font-weight: bold; line-height: normal; margin: 0px; padding: 20px 10px 15px; } .mainpage-faq .faq-list { background-color: #fcfdff; border-bottom: 1px solid #e5e9f4; border-left: 1px solid #e5e9f4; border-right: 1px solid #e5e9f4; padding: 10px; } .mainpage-faq .faq-list a, .mainpage-faq .faq-list a:active, .mainpage-faq .faq-list a:visited { color: #4a90e2; text-decoration: none; } .mainpage-faq .faq-list a:hover { color: #6aaefc; } .mainpage-faq ul { list-style: outside none none; margin: 0px; } .mainpage-faq li { margin: 0px 0px 10px; } .mainpage-faq .faq-section .mainpage-more { font-weight: bold; } /** Social **/ .mainpage-social { background: transparent none repeat scroll 0% 0%; order-radius: 4px; border: 1px solid #B6B6B6; padding: 30px 0px 35px; text-align: center; } .mainpage-social h3 { font-size: 25px; font-weight: bold; margin: 0px 0px 15px; } .mainpage-social .social-button { display: inline-block; vertical-align: top; } .mainpage-social .social-button.facebook span { vertical-align: top ! important; } .mainpage-social .twitter-follow-button { height: 20px ! important; position: static ! important; visibility: visible ! important; width: 64px ! important; } .mainpage-blogs {margin:0px;} /** Connect **/ .mainpage-connect .staff { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; list-style: outside none none; margin: 0px; } .mainpage-connect .staff li { border-radius: 4px; border: 1px solid #e5e9f4; box-sizing: border-box; margin: 0px 0px 20px; padding: 15px 20px; text-align: center; width: calc(50% - 10px); } .mainpage-connect .staff img { border-radius: 50%; height: auto; width: 95px; } .mainpage-connect .staff .name { line-height: 18px; margin-top: 10px; } .mainpage-connect .staff .name a, .mainpage-connect .staff .name a:active, .mainpage-connect .staff .name a:visited { color: #000000; font-weight: bold; text-decoration: none; } .mainpage-connect .staff .name a:hover { color: #545454; } .mainpage-connect .mainpage-more { margin-top: 10px; } @media screen and (max-width: 1023px) { .mainpage-connect .staff li { width: auto; }    .mainpage-connect .staff .notablet { display: none; } }

.mainpage-blogs {margin:0px;} /**Mainpage news**/ .mainpage-news a { font-weight:bold; } .mainpage-news { border:1px solid #e5e9f4; } .mainpage-news .timestamp { color: #999999; font-size: 14px; } .page-Castle_Crush_Wiki .module.WikiaActivityModule.ForumActivityModule { border:1px solid #e5e9f4; box-shadow:none; } a.tag { color: inherit; }

/*Administration*/ .hsb { display:flex; box-sizing:border-box; width:100%; flex-wrap:wrap; background-color:#ECF6CE; border:.5px solid #000000; justify-content:space-around; margin-bottom:1em; }

.hsb.hsb-rang-admin { background-color: rgba(187,187,187,.25); border:.5px solid #000000; color: #7D7D7D; }

.hsb.hsb-rang-supermod { background-color: rgba(189,34,255,.25); border:.5px solid #000000; color: #9400D3; }

.hsb.hsb-rang-diskussionsmod { background-color: rgba(255,167,59,.25); border:.5px solid #000000; color: #FF8C00; }

.hsb.hsb-rang-chatmod { background-color: rgba(0,148,0,.25); border:.5px solid #000000; color: #008000; }

.hsb.hsb-rang-rollback { background-color: rgba(255,255,118,.25); border:.5px solid #000000; color: #D5A01B; }

.hsb > .hsb__entry { flex-basis:auto; max-width:50%; box-sizing:border-box; text-align:center; padding:1.5em; border-color:transparent; display:flex; flex-direction:column; align-items:center } .hsb > .hsb__entry > .hsb__entry__image { background-color:white; border:.5px solid #000000; border-radius:50%; padding:0em; } .hsb > .hsb__entry > .hsb__entry__name:hover + .hsb__entry__image,.hsb > .hsb__entry > .hsb__entry__image:hover { opacity:.8; transition:opacity 100ms linear; } .hsb > .hsb__entry > .hsb__entry__name { margin-bottom:.2em; } .hsb > .hsb__entry > .hsb__entry__name a { text-decoration:none; color:inherit; font-weight:bold; } .hsb > .hsb__entry > .hsb__entry__image img { width:auto; height:auto; max-height:75px; border-radius:50%; border:.5px transparent; }