MediaWiki:ClanHouseGenerator.css

De Clash of Clans Wiki
Ir a la navegación Ir a la búsqueda

Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.

  • Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
  • Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
  • Internet Explorer/Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
  • Opera: Presiona Ctrl+F5.
/*
----------------------
 Clan House Generator
----------------------

-----------------------
 COMPLEMENTARY SCRIPTS
-----------------------
- ClanHouseGenerator.js

-----------------------
 AUTHORS & MAINTAINERS
-----------------------
- E12Dragon: current and orginal version
*/

.chg-mobile {
	display:none;
}
.chg-container {
	max-width:729px;
	height:400px;
	border-radius:14px;
	position:relative;
	overflow:hidden;
	margin:auto;
}
body.theme-fandomdesktop-light .chg-container {
	background-color:#e4e5da;
}
body.theme-fandomdesktop-dark .chg-container {
	background-color:#323c3c;
}
.chg-columns {
	width:100%;
	height:calc(100% - 4px);
	display:flex;
	flex-direction:row;
}
.chg-preview {
	width:240px;
	margin:8px;
	border-radius:10px;
	overflow:hidden;
	background-image: url(https://static.wikia.nocookie.net/e12dragon_testing/images/b/b2/CHG_Background.png);
	background-size:224px;
    border: 5px solid #bebebf;
}
body.theme-fandomdesktop-light .chg-preview {
	border: 5px solid #bebebf;
}
body.theme-fandomdesktop-dark .chg-preview {
	border: 5px solid black;
}
.chg-names {
	position: absolute;
    width: 220px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Clash';
    font-size:14px;
    color: white;
    text-shadow: 1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black, 1px 2px black;
}
.chg-names:not(.active) {
	animation-name:name;
	animation-duration:1s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes name {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.chg-controls {
	width:calc(100% - 240px);
	margin:8px 8px 8px 0;
	border-radius:10px;
	position:relative;
}
.chg-tabs {
	width: 100%;
	height:60px;
    display: flex;
    flex-direction: row;
    margin:0 0 -10px 0;
}
body.theme-fandomdesktop-light .chg-tabs > div.active {
	background-color:#ddd7c9;
}
body.theme-fandomdesktop-dark .chg-tabs > div.active {
	background-color:#706e6e;
}
.chg-tabs > div {
	display: flex;
    align-items: center;
    justify-content: center;
	width:25%;
	border-radius:10px 10px 0 0;
	background-color:#c1b9a6;
	font-family:Clash;
	color:white;
	/*font-size:14px;*/
	text-shadow:1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black, 1px 2px black;
	cursor:pointer;
}
body.theme-fandomdesktop-light .chg-tabs > div {
	background-color:#c1b9a6;
}
body.theme-fandomdesktop-dark .chg-tabs > div {
	background-color:#565656;
}
.chg-tabs > div:not(:last-child) {
	margin-right:5px;
}
.chg-tabs span {
	margin-top:-5px;
}
.chg-tabber {
	width: 100%;
    height: calc(100% - 50px);
    border-radius: 10px;
    padding:2px 4px 0 4px;
    overflow:hidden;
    position:absolute;
}
body.theme-fandomdesktop-light .chg-tabber {
    background-color:#bebebf;
}
body.theme-fandomdesktop-dark .chg-tabber {
    background-color:black;
}
.chg-tabber > div {
	height: 318px;
    margin:5px 3px 0 3px;
    border-radius: 10px;
    padding:5px 3px 0 3px;
}
body.theme-fandomdesktop-light .chg-tabber > div {
    background-color:#aea797;
}
body.theme-fandomdesktop-dark .chg-tabber > div {
    background-color:#333333;
}
.chg-tabber > div:not(.active) {
	display:none;
}
.container,
.container-values {
	height:100%;
}

/**********/
/* Canvas */
/**********/
#chg-mirror {
	display:none;
}
#chg-canvas {
	transform:scale(0.55) translate(-10px,80px);
}

/***********/
/* Buttons */
/***********/
.chg-container .container-values {
	display: flex;
	flex-wrap:wrap;
    flex-direction: row;
    overflow-y: scroll;
    scrollbar-width: none;
}
.chg-container .container-values::-webkit-scrollbar {
	display: none;
	overflow-x: hidden;
}
.chg-container .img-toggler-wrapper {
	width:105px;
	height:105px;
	margin:3px 4px 15px 4px;
	border-radius:20px;
	cursor:pointer;
}
.chg-container .img-toggler {
	width:95px;
	height:auto;
}
body.theme-fandomdesktop-light .chg-container .img-toggler-wrapper {
	border:5px solid white;
	box-shadow:0 6px 0 0 #bab8b9, 0 8px 0 0 #918d85;
	background-color:#a8aba8;
}
body.theme-fandomdesktop-dark .chg-container .img-toggler-wrapper {
    border:5px solid black;
	box-shadow:0 6px 0 0 #505050, 0 8px 0 0 black;
	background-color:#606060;
}
.chg-container .img-selected::after {
	content: '';
    background-image: url(https://static.wikia.nocookie.net/e12dragon_testing/images/4/4f/CHG_Selected.png);
    background-repeat: no-repeat;
    background-size: 25px;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: -23px;
    left: 38px;
}
body.theme-fandomdesktop-light .chg-container .img-selected {
	box-shadow:0 6px 0 0 #bab8b9, 0 8px 0 0 #918d85, 0 0 0 3px black, 3px 11px 0 0 black, -3px 11px 0 0 black;
}
body.theme-fandomdesktop-dark .chg-container .img-selected {
	box-shadow:0 6px 0 0 #505050, 0 8px 0 0 black, 0 0 0 3px white, 3px 11px 0 0 white, -3px 11px 0 0 white;
}

/************/
/* Download */
/************/
#dwn-clanhouse {
	text-decoration:none;
}
#dwn-clanhouse > div {
	background-image:url(https://static.wikia.nocookie.net/e12dragon_testing/images/9/9a/DownloadButton.png);
	background-size:115px;
	width:115px;
	height:56px;
	font-size: 15px;
	font-family:Clash;
    color: white;
    text-shadow:1px 1px black, 1px -1px black, -1px 1px black, -1px -1px black, 1px 2px black;
    cursor:pointer;
    text-align:center;
    padding-top:14px;
    transition:.3s;
}
.chg-preview center {
	margin-top:45px;
}
#dwn-clanhouse > div:hover {
	filter:brightness(1.5);
}
#dwn-clanhouse > div:active {
	transform:scale(0.8);
	transition:.3s;
}

/**********/
/* Author */
/**********/
.chg-container .author {
	text-align:right;
	font-size:8px;
	color:#8f8f8f;
	position: absolute;
    bottom: -1px;
    right: 12px;
    width: 100px;
}
.chg-container .author span {
	color:#8f8f8f;
	font-weight:normal;
}

/**********************/
/* Placeholder Layers */
/**********************/
.chg-container .chg-tabber > div .container-values > div::before { /*overlay*/
	content:'';
	background-repeat:no-repeat;
	background-size: 95px;
	position:absolute;
	width:95px;
	height:95px;
}
.chg-container .chg-tabber > div .container-values > div { /*underlay*/
	background-repeat:no-repeat;
	background-size: 95px;
	position:relative;
}
.chg-container .chg-tabber > div[data-type="roof"] .container-values > div {
	background-image: url(https://static.wikia.nocookie.net/e12dragon_testing/images/5/5a/Clan_House_Placeholder_Roof.png);
    background-position: -7px 8px;
}
.chg-container .chg-tabber > div[data-type="walls"] .container-values > div::before {
	background-image: url(https://static.wikia.nocookie.net/e12dragon_testing/images/0/08/Clan_House_Placeholder_Walls.png);
    background-position: -7px 8px;
}
.chg-container .chg-tabber > div[data-type="ground"] .container-values > div::before {
	background-image: url(https://static.wikia.nocookie.net/e12dragon_testing/images/c/c0/Clan_House_Placeholder_Ground.png);
    background-position: -7px 8px;
}
.chg-container .chg-tabber > div[data-type="decoration"] .container-values > div {
	background-image: url(https://static.wikia.nocookie.net/e12dragon_testing/images/1/1f/Clan_House_Placeholder_Decoration.png);
    background-position: -7px 8px;
}

/****************/
/* Hidden Parts */
/****************/
.chg-container:not(.all-parts) .container-values > div[title="Gingerbread Roof Type 2"], 
.chg-container:not(.all-parts) .container-values > div[title="White Chess Roof"], 
.chg-container:not(.all-parts) .container-values > div[title="Black Chess Roof"],
.chg-container:not(.all-parts) .container-values > div[title="Greenhouse Roof"], 
.chg-container:not(.all-parts) .container-values > div[title="Summer Roof"], 
.chg-container:not(.all-parts) .container-values > div[title="Black Chess Walls"], 
.chg-container:not(.all-parts) .container-values > div[title="Greenhouse Walls"], 
.chg-container:not(.all-parts) .container-values > div[title="Summer Walls"], 
.chg-container:not(.all-parts) .container-values > div[title="Greenhouse Ground"], 
.chg-container:not(.all-parts) .container-values > div[title="Sign"],
.chg-container:not(.all-parts) .container-values > div[title="Sword Statue"], 
.chg-container:not(.all-parts) .container-values > div[title="P.E.K.K.A Statue"], 
.chg-container:not(.all-parts) .container-values > div[title="Pebbles"], 
.chg-container:not(.all-parts) .container-values > div[title="Chocolate Tree"], 
.chg-container:not(.all-parts) .container-values > div[title="Chess Piece"], 
.chg-container:not(.all-parts) .container-values > div[title="Greenhouse Well"], 
.chg-container:not(.all-parts) .container-values > div[title="Summer Life Rings"], 
.chg-container:not(.all-parts) .container-values > div[title="Summer Bonfire"], 
.chg-container:not(.all-parts) .container-values > div[title="Laundry"], 
.chg-container:not(.all-parts) .container-values > div[title="Crystals"], 
.chg-container:not(.all-parts) .container-values > div[title="Cauldron"], 
.chg-container:not(.all-parts) .container-values > div[title="Log"] {
	display:none;
}
Obtenido de «https://clashofclans.wiki.gg/es/index.php?title=MediaWiki:ClanHouseGenerator.css&oldid=12346»