103 lines
2.4 KiB
CSS
103 lines
2.4 KiB
CSS
.main-canvas {
|
|
outline: 1px solid #dddddd;;
|
|
width: 500px;
|
|
height: 220px;
|
|
margin: 50px auto 0;
|
|
position: relative;
|
|
}
|
|
|
|
.register {
|
|
outline: 3px dashed #dddddd;;
|
|
width: 120px;
|
|
height: 240px;
|
|
margin: 0px auto 0;
|
|
position: relative;
|
|
}
|
|
|
|
.box{
|
|
width: 62px;
|
|
height: 100px;
|
|
position: absolute;
|
|
top: 100px;
|
|
font-size: 15px;
|
|
color: #ffffff;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
cursor: move;
|
|
}
|
|
|
|
.robotOrientation {
|
|
width: 75px;
|
|
height: 75px;
|
|
}
|
|
|
|
.robotOrientation90 {
|
|
width: 75px;
|
|
height: 75px;
|
|
-webkit-transform: rotate(90deg);
|
|
-moz-transform: rotate(90deg);
|
|
-o-transform: rotate(90deg);
|
|
-ms-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.robotOrientation180 {
|
|
width: 75px;
|
|
height: 75px;
|
|
-webkit-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
-ms-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.robotOrientation270 {
|
|
width: 75px;
|
|
height: 75px;
|
|
-webkit-transform: rotate(270deg);
|
|
-moz-transform: rotate(270deg);
|
|
-o-transform: rotate(270deg);
|
|
-ms-transform: rotate(270deg);
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
.rotate90 {
|
|
width: 100px;
|
|
height: 100px;
|
|
-webkit-transform: rotate(90deg);
|
|
-moz-transform: rotate(90deg);
|
|
-o-transform: rotate(90deg);
|
|
-ms-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.rotate180 {
|
|
-webkit-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
-ms-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.rotate270 {
|
|
-webkit-transform: rotate(270deg);
|
|
-moz-transform: rotate(270deg);
|
|
-o-transform: rotate(270deg);
|
|
-ms-transform: rotate(270deg);
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
.top-buffer { margin-top:20px; }
|
|
|
|
|
|
.card0 { left: 0; top: 0; background-color: #E74C3C; }
|
|
.card1 { left: 100px; top: 0; background-color: #8E44AD; }
|
|
.card2 { left: 200px; top: 0; background-color: #5DADE2; }
|
|
.card3 { left: 300px; top: 0; background-color: #1ABC9C; }
|
|
.card4 { left: 400px; top: 0; background-color: #F1C40F; }
|
|
.card5 { left: 50px; top: 120px; background-color: #F39C12; }
|
|
.card6 { left: 150px; top: 120px; background-color: #34495E; }
|
|
.card7 { left: 250px; top: 120px; background-color: #FF00FF; }
|
|
.card8 { left: 350px; top: 120px; background-color: #008080; }
|
|
|
|
.card_hidden { background-color: #dddddd; } |