195 lines
5.0 KiB
CSS
195 lines
5.0 KiB
CSS
|
|
||
|
.mblDomButtonBlueMinus, .mblDomButtonBluePlus, .mblDomButtonDarkBlueMinus, .mblDomButtonDarkBluePlus, .mblDomButtonRedMinus, .mblDomButtonRedPlus {
|
||
|
position: relative;
|
||
|
width: 29px;
|
||
|
height: 29px;
|
||
|
}
|
||
|
.mblDomButtonBlueMinus > div, .mblDomButtonBluePlus > div, .mblDomButtonDarkBlueMinus > div, .mblDomButtonDarkBluePlus > div, .mblDomButtonRedMinus > div, .mblDomButtonRedPlus > div {
|
||
|
position: relative;
|
||
|
top: 4px;
|
||
|
left: 3px;
|
||
|
width: 22px;
|
||
|
height: 18px;
|
||
|
border-width: 1px 1px 1px 0px;
|
||
|
border-style: outset;
|
||
|
color: white;
|
||
|
-webkit-border-radius: 3px;
|
||
|
}
|
||
|
.mblDomButtonBlueMinus > div, .mblDomButtonBluePlus > div {
|
||
|
border-color: #6D89C7;
|
||
|
background-color: #366EDF;
|
||
|
background: -webkit-gradient(linear, left top, left bottom, from(#7A9DE9), to(#2362DD), color-stop(0.5, #366EDF), color-stop(0.5, #215FDC));
|
||
|
}
|
||
|
.mblDomButtonDarkBlueMinus > div, .mblDomButtonDarkBluePlus > div {
|
||
|
border-color: #6D89C7;
|
||
|
background-color: #5877A2;
|
||
|
background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999));
|
||
|
}
|
||
|
.mblDomButtonRedMinus > div, .mblDomButtonRedPlus > div {
|
||
|
border-color: #cc1122;
|
||
|
background-color: #C9404B;
|
||
|
background: -webkit-gradient(linear, left top, left bottom, from(#D3656D), to(#BC1320), color-stop(0.5, #C9404B), color-stop(0.5, #BC1421));
|
||
|
}
|
||
|
.mblDomButtonBlueMinus > div > div, .mblDomButtonBluePlus > div > div, .mblDomButtonDarkBlueMinus > div > div, .mblDomButtonDarkBluePlus > div > div, .mblDomButtonRedMinus > div > div, .mblDomButtonRedPlus > div > div {
|
||
|
position: absolute;
|
||
|
top: 7px;
|
||
|
left: 7px;
|
||
|
width: 8px;
|
||
|
height: 2px;
|
||
|
margin: 0px;
|
||
|
font-size: 1px;
|
||
|
border-style: none;
|
||
|
background: white;
|
||
|
border-top: 1px solid #4A5A71;
|
||
|
}
|
||
|
.mblDomButtonBluePlus > div > div > div, .mblDomButtonDarkBluePlus > div > div > div, .mblDomButtonRedPlus > div > div > div {
|
||
|
position: absolute;
|
||
|
top: -3px;
|
||
|
left: 3px;
|
||
|
width: 2px;
|
||
|
height: 8px;
|
||
|
margin: 0px;
|
||
|
font-size: 1px;
|
||
|
background-color: white;
|
||
|
}
|
||
|
@-webkit-keyframes mblVibrate{
|
||
|
0%{
|
||
|
-webkit-transform: rotate(-2deg);
|
||
|
bottom: -1px;
|
||
|
left: -1px;
|
||
|
}
|
||
|
25% {
|
||
|
-webkit-transform: rotate(1deg);
|
||
|
bottom: 2px;
|
||
|
left: 1px;
|
||
|
}
|
||
|
50% {
|
||
|
-webkit-transform: rotate(-1deg);
|
||
|
bottom: -2px;
|
||
|
left: -1px;
|
||
|
}
|
||
|
75% {
|
||
|
-webkit-transform: rotate(2deg);
|
||
|
bottom: 2px;
|
||
|
left: 1px;
|
||
|
}
|
||
|
100% {
|
||
|
-webkit-transform: rotate(-2deg);
|
||
|
bottom: -1px;
|
||
|
left: -1px;
|
||
|
}
|
||
|
}
|
||
|
@-webkit-keyframes mblShrink{
|
||
|
from { -webkit-transform: scale(1); }
|
||
|
to { -webkit-transform: scale(0.01); }
|
||
|
}
|
||
|
@-webkit-keyframes mblShrink0{
|
||
|
from { -webkit-transform: scale(1); }
|
||
|
to { -webkit-transform: translate(-40%,-70%) scale(0.01); }
|
||
|
}
|
||
|
@-webkit-keyframes mblShrink1{
|
||
|
from { -webkit-transform: scale(1); }
|
||
|
to { -webkit-transform: translate(-14%,-70%) scale(0.01); }
|
||
|
}
|
||
|
@-webkit-keyframes mblShrink2{
|
||
|
from { -webkit-transform: scale(1); }
|
||
|
to { -webkit-transform: translate(14%,-70%) scale(0.01); }
|
||
|
}
|
||
|
@-webkit-keyframes mblShrink3{
|
||
|
from { -webkit-transform: scale(1); }
|
||
|
to { -webkit-transform: translate(40%,-70%) scale(0.01); }
|
||
|
}
|
||
|
.mblIconContainer {
|
||
|
margin: 20px 0px 0px 10px;
|
||
|
padding: 0px 0px 40px 0px;
|
||
|
}
|
||
|
.mblIconItem {
|
||
|
list-style-type: none;
|
||
|
float: left;
|
||
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||
|
}
|
||
|
.mblIconItemTerminator {
|
||
|
list-style-type: none;
|
||
|
clear: both;
|
||
|
height: 20px;
|
||
|
}
|
||
|
.mblIconItemSub {
|
||
|
list-style-type: none;
|
||
|
margin-left: -10px;
|
||
|
background-color: white;
|
||
|
color: black;
|
||
|
}
|
||
|
.mblIconArea {
|
||
|
margin-bottom: 10px;
|
||
|
height: 78px;
|
||
|
width: 74px;
|
||
|
font-family: Helvetica;
|
||
|
font-size: 12px;
|
||
|
color: white;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.mblIconArea div {
|
||
|
position: relative;
|
||
|
height: 65px;
|
||
|
line-height: 65px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.mblIconArea img {
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
.mblIconItemSpriteIcon {
|
||
|
position: absolute;
|
||
|
}
|
||
|
.mblContent {
|
||
|
clear: both;
|
||
|
padding-bottom: 20px;
|
||
|
}
|
||
|
table.mblClose {
|
||
|
clear: both;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.mblVibrate {
|
||
|
position: relative;
|
||
|
-webkit-animation-duration: .5s;
|
||
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
-webkit-animation-iteration-count: 20;
|
||
|
-webkit-animation-name: mblVibrate;
|
||
|
-webkit-transform: rotate(0deg);
|
||
|
}
|
||
|
.mblCloseContent {
|
||
|
-webkit-animation-duration: .3s;
|
||
|
-webkit-animation-timing-function: ease-in-out;
|
||
|
-webkit-animation-name: mblShrink;
|
||
|
-webkit-transform: scale(0.01);
|
||
|
}
|
||
|
.mblCloseContent.mblShrink0 {
|
||
|
-webkit-animation-name: mblShrink0;
|
||
|
}
|
||
|
.mblCloseContent.mblShrink1 {
|
||
|
-webkit-animation-name: mblShrink1;
|
||
|
}
|
||
|
.mblCloseContent.mblShrink2 {
|
||
|
-webkit-animation-name: mblShrink2;
|
||
|
}
|
||
|
.mblCloseContent.mblShrink3 {
|
||
|
-webkit-animation-name: mblShrink3;
|
||
|
}
|
||
|
.mblIconContentHeading {
|
||
|
position: relative;
|
||
|
clear: both;
|
||
|
overflow: hidden;
|
||
|
white-space: nowrap;
|
||
|
text-overflow: ellipsis;
|
||
|
margin-top: 0px;
|
||
|
padding-left: 40px;
|
||
|
height: 25px;
|
||
|
border-top: 1px solid #F1F3F4;
|
||
|
border-bottom: 1px solid #717D85;
|
||
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e4e7), to(#b4bec6), color-stop(0.5, #c4ccd2), color-stop(0.5, #bfc8ce));
|
||
|
font-family: Helvetica;
|
||
|
font-size: 14px;
|
||
|
color: white;
|
||
|
line-height: 26px;
|
||
|
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0px;
|
||
|
}
|