Difference between revisions of "MediaWiki:Common.css"

From WebDisplays
Jump to: navigation, search
(Created page with "CSS placed here will be applied to all skins: .responsive-1 { width: 320px; height: 50px; } @media(min-width: 500px) { .responsive-1 { width: 468px; height: 60px; } } @me...")
 
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
.responsive-1 { width: 320px; height: 50px; }
+
@keyframes wd-cube-rot {
@media(min-width: 500px) { .responsive-1 { width: 468px; height: 60px; } }
+
0% { transform: rotateX(-20deg) rotateY(40deg); }
@media(min-width: 768px) { .responsive-1 { width: 728px; height: 90px; } }
+
90% { transform: rotateX(-20deg) rotateY(40deg); }
 +
100% { transform: rotateX(-20deg) rotateY(400deg); }
 +
}
 +
 
 +
#wd-cube-3d {
 +
padding: 20px;
 +
perspective: 800px;
 +
perspective-origin: 50px 50px;
 +
}
 +
 
 +
#wd-cube {
 +
position: relative;
 +
width: 100px;
 +
height: 100px;
 +
transform-style: preserve-3d;
 +
animation: wd-cube-rot 10s infinite linear;
 +
}
 +
 
 +
#wd-cube div {
 +
position: absolute;
 +
width: 100px;
 +
height: 100px;
 +
background-image: url("/ShareX/wdcube-side.png");
 +
}
 +
 
 +
#wdcube-front {
 +
transform: translateZ(50px);
 +
background-image: url("/ShareX/wdcube-front.png") !important;
 +
}
 +
 
 +
#wdcube-back {
 +
transform: translateZ(-50px) rotateY(180deg);
 +
}
 +
 
 +
#wdcube-left {
 +
transform: translateX(-50px) rotateY(-90deg);
 +
}
 +
 
 +
#wdcube-right {
 +
transform: translateX(50px) rotateY(90deg);
 +
}
 +
 
 +
#wdcube-top {
 +
transform: translateY(-50px) rotateX(-90deg);
 +
}
 +
 
 +
#wdcube-wd {
 +
padding-left: 20px;
 +
}

Latest revision as of 00:27, 16 February 2018

/* CSS placed here will be applied to all skins */
@keyframes wd-cube-rot {
	0% { transform: rotateX(-20deg) rotateY(40deg); }
	90% { transform: rotateX(-20deg) rotateY(40deg); }
	100% { transform: rotateX(-20deg) rotateY(400deg); }
}

#wd-cube-3d {
	padding: 20px;
	perspective: 800px;
	perspective-origin: 50px 50px;
}

#wd-cube {
	position: relative;
	width: 100px;
	height: 100px;
	transform-style: preserve-3d;
	animation: wd-cube-rot 10s infinite linear;
}

#wd-cube div {
	position: absolute;
	width: 100px;
	height: 100px;
	background-image: url("/ShareX/wdcube-side.png");
}

#wdcube-front {
	transform: translateZ(50px);
	background-image: url("/ShareX/wdcube-front.png") !important;
}

#wdcube-back {
	transform: translateZ(-50px) rotateY(180deg);
}

#wdcube-left {
	transform: translateX(-50px) rotateY(-90deg);
}

#wdcube-right {
	transform: translateX(50px) rotateY(90deg);
}

#wdcube-top {
	transform: translateY(-50px) rotateX(-90deg);
}

#wdcube-wd {
	padding-left: 20px;
}