Plantilla:Toggle/styles.css

De Clash of Clans Wiki
Ir a la navegación Ir a la búsqueda
/*Hide when not active*/
.animated-auto > *:not(.active),
.animated > *:not(.active),
.toggle > *:not(.active) {
	display: none;
}
/*Right Align*/
.animation-button,
.animation-button-next,
.animation-button-back,
.toggle-button {
	float: right;
}
/*Auto Mode Button*/
.animation-button {
	background-size: 50px 50px;
	width:50px;
	height:50px;
}
.animation-button.paused {
	background-image: url(/es/images/3/32/AnimationPlay.png);
}
.animation-button:not(.paused) {
	background-image: url(/es/images/8/89/AnimationPause.png);
}
/*Prev/Next Mode Button*/
.animation-button-next,
.animation-button-back {
	background-size: 50px 50px;
	width:50px;
	height:50px;
}
.animation-button-next {
	background-image: url(/es/images/b/bd/AnimationNext.png);
     transition: all 0.1s;
}
.animation-button-back {
	background-image: url(/es/images/4/49/AnimationBack.png);
     transition: all 0.1s;
}
/*Toggle Mode Button*/
.toggle-button {
	background-image: url(/es/images/4/4a/Toggle.png);
	background-size: 50px 50px;
	width:50px;
	height:50px;
    transition: all 0.1s;
}
/*Hover*/
.toggle-button:hover,
.animation-button:hover,
.animation-button-back:hover,
.animation-button-next:hover {
	cursor:pointer;
}
/*Active*/
.toggle-button:active,
.animation-button:active,
.animation-button-back:active,
.animation-button-next:active {
	transform:scale(0.8);
}

.mode-toggle-button {
  background-image: url(/es/images/4/4a/Toggle.png);
  background-size: 50px 50px;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  padding: 17px;
  margin: 0px;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
  user-select: none;
}

.mode-toggle-button::after {
  display: inline-block;
  width: inherit;
  content: attr(data-mode-text);
  text-align: center;
}

.mode-toggle-button::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 12px;
  left: -8px;
  top: -8px;
  z-index: -1;
  border-radius: 5px;
}

.mode-toggle-button:active {
  background: url(/es/images/4/4a/Toggle.png);
  background-size: 40px 40px;
  background-repeat: no-repeat;
  padding: 12px;
  margin: 0px;
  top: 1px;
}

.mode-toggle-hidden {
  display: none;
}