railwaysystem/build_ui/static/css/mobi-lh.css

/* FONT PATH
 * -------------------------- */
 @font-face {
  font-family: 'FontAwesome';
  src: url('static/font/fontawesome-webfont.eot?v=3.2.1');
  src: url('static/font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('static/font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('static/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('static/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}

.mobi{width: 100%; height: 100%;}
/*.art
  存放页面动画效果的模块
  1、light 光划过效果 鼠标划过光线区
  2、 ... 其他动画效果可以在这里继续扩展
*/
.art{ width: 100%; height: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow: hidden; }
.art .light {display: block; width: 100%; height: 100%; position: absolute; top: 0; left:-100%;  }
.art .light:before {
    content: "";
    display: block; width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    overflow: hidden;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
}
.art.active .light{ left:100%; transition: left 1s ease 0s; }

/*动画区
1、animated 总控
2、.loader-15 上下手风琴拉动Loading
3、.rotate 旋转360度
4、.rotateF 反向360度
5、.flashPD 一闪一闪
*/
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animated.infinite {
  animation-iteration-count: infinite;
}

/*上下手风琴拉动*/
[class*="loader-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    color: inherit;
    vertical-align: middle;
    pointer-events: none;
}
.loader-15 {
    background: currentcolor;
    position: relative;
    -webkit-animation: loader-15 1s ease-in-out infinite;
    animation: loader-15 1s ease-in-out infinite;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    width: .25em;
    height: .5em;
}
.loader-15:after,
.loader-15:before {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background: inherit;
    -webkit-animation: inherit;
    animation: inherit;
}
.loader-15:before {
    right: .5em;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.loader-15:after {
    left: .5em;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
@-webkit-keyframes loader-15 {
    0%, 100% {
        box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
    }
    50% {
        box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
    }
}
@keyframes loader-15 {
    0%, 100% {
        box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
    }
    50% {
        box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor;
    }
}


@keyframes rotate {
  0% {
         transform-origin: center;
         transform: rotate(0deg);
  }
  100% {
         transform-origin: center;
         transform: rotate(360deg);
  }
}
.rotate {
       animation-name: rotate;
       animation-timing-function: linear;
}

@keyframes rotateF {
  100% {
         transform-origin: center;
         transform: rotate(-360deg);
  }
}
.rotateF {
    animation-name: rotateF;
    animation-timing-function: linear;
}

@keyframes flashPD {
  0%,90% {
    opacity: 1;
  }
  92%,98% {
    opacity: 0;
  }
  96%,100% {
    opacity: 1;
  }
}
.flashPD {
       animation-name: flashPD;
}

/*地球仪*/
.ball {
  position: absolute; top:-4%; left: 50%;
  width:80%; height: 100%;
  margin-left:-40%; opacity: .6;
  background:url(static/images/theme/darkblue/ball.png) center center no-repeat;
  background-size:auto 100%;
  animation-duration: 120s;
  animation-delay: 3s;
}

/* 当浏览器可视区域小于2000px*/
@media screen and (max-width:2000px){
.logo{font-size:28px;  line-height:2;}
.ftext20{ font-size:14px;}
.ftext{ font-size:16px;}
.ftext_xl{ font-size: 20px;}
.layer-body{ width: 92%; }
.layer-body .ftext{ font-size:22px;  }
.layer-body .ftext_xl{ font-size: 26px;}
.fnum_xl{ font-size: 26px;}
.layer-body .fnum_xl{ font-size: 30px;}
.tooltip{ width:260px;}
.tb-custom-01 tr .tbname { width:36vh; }
.layer-body .grid-custom{  padding:9.4vh 1vh 0 1vh; }
.custom-15 .div15-right{ margin-left:0px;}
.layui-form-radio>div{font-size:20px}
}

/* 当浏览器可视区域小于1366px*/
@media screen and (max-width:1367px){
.ftext20{ font-size:12px;}
.ftext{ font-size:14px;}
.ftext_xl{ font-size: 16px;}
.layer-body .ftext{ font-size:14px;  }
.layer-body .ftext_xl{ font-size: 16px;}
.custom-15 .div15-right{margin-left:0px;}
.layui-form-radio>div{font-size:16px}
}