Difference between revisions of "Template:SYSU CHINA/MAINCSS"

Line 391: Line 391:
  
 
.element {
 
.element {
−
   width: 18%;
+
   width: 230px;
 
   position: absolute;
 
   position: absolute;
 +
  margin-left: -115px;
 +
  margin-top: -115px;
 +
  top: 50%;
 +
  left: 50%;
 
}
 
}
  
Line 465: Line 469:
 
}
 
}
  
−
.element {
 
−
  top: 16%;
 
−
  left: 35%;
 
−
}
 
 
.clock {
 
.clock {
 
   width: 20%;
 
   width: 20%;

Revision as of 01:41, 17 September 2015

/* SUI Config*/ /* hint-color: rgba(50, 132, 252, 1)*/


/* Reset default stylesheet. */

  • {
 margin: 0;
 padding: 0;
 box-shadow: none;
 outline: none;
 border: none;
 background-color: transparent;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-appearance: none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 color: #333;
 font-family: helvetica;

}

html, body { 

 width: 100%;
 height: 100%;

}

a { 

 cursor: pointer;
 text-decoration: none;
 color: #333;

}

a:hover {text-decoration: underline; }

h1, h2, h3, h4, h5 {margin-bottom: 20px; border-bottom: none;}

h2 {font-size: 30px; }

h3 {font-size: 24px; }

h4 {font-size: 20px; }

h5 {font-size: 16px; }

p { 

 font-weight: normal;
 font-size: 16px;
 margin-bottom: 20px;

}

ul, ol { 

 padding-left: 30px;
 margin-bottom: 20px;

}

li { 

 margin-bottom: 20px;

}

p, li { 

 line-height: 1.6;

}

img {display: block; }

/* SUI Components */

.sui-x-img { 

 background-position: center;
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 background-size: cover;

}

/* SUI Layout */ .sui-l-fullpage { 

 position: relative;
 height: 100%;
 width: 100%;
 overflow: hidden;

}

.sui-l-center-wrapper { 

 position: relative;
 width: 100%;
 height: 100%;

}

.sui-l-center-block { 

 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate3D(-50%, -50%, 0);
 -ms-transform: translate3D(-50%, -50%, 0);
 -o-transform: translate3D(-50%, -50%, 0);
 transform: translate3D(-50%, -50%, 0);

}

/* Simple Grid*/ .sui-row { 

 width: 100%;
 overflow: hidden;
 clear: both;

}

.sui-col-1-2 { 

 width: 50%;
 float: left;

}

.sui-col-2-3 { 

 width: 66.6%;
 float: left;

}

.sui-col-1-3 { 

 width: 33.3%;
 float: left;

}

.sui-avatar { 

 display: block;
 border-radius: 50%;

}

.sui-button { 

 cursor: pointer;
 text-transform: uppercase;
 font-weight: bold;
 border-radius: 4px;
 box-shadow: 0 1px 2px rgba(0,0,0,.4);
 display: inline-block;
 padding: 10px 20px;
 color: #fff;
 background-color: rgba(50, 132, 252, 1);
 border: 1px solid rgba(30, 112, 222, 1);

}

.sui-bordered-button { 

 cursor: pointer;
 background-color: transparent;
 border: 1px solid rgba(50, 132, 252, 1);
 color: rgba(50, 132, 252, 1);
 display: inline-block;
 padding: 10px 20px;
 border-radius: 4px;
 font-weight: bold;
 text-transform: uppercase;

}

.sui-bordered-button:hover { 

 background-color: rgba(50, 132, 252, 1);
 color: #fff;

}


.sui-paginator { 

 display: inline-block;
 padding: 0;
 margin: 0;

}

.sui-horizontal li { 

 display: inline-block;
 margin: 0 0 0 20px;

}

.sui-vertical li { 

 display: block;
 margin: 0 0 10px 0;

}

.sui-paginator li { 

 list-style: none;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 border: 1px solid #ccc;
 cursor: pointer;

}

.sui-paginator li:hover { 

 background-color: #ccc;

}

.sui-paginator li.current { 

 border: 1px solid rgba(50, 132, 252, 1);
 background-color: rgba(50, 132, 252, 1);

}

.sui-dropdown { 

 position: absolute;
 left: 0;
 display: block;
 /*border: 1px solid #1B1B1B;*/
 width: 120px;
 padding: 0;
 margin: 0;
 overflow: hidden;

}

.sui-dropdown li { 

 cursor: pointer;
 position: relative;
 background-color: #505050;
 margin-bottom: 0;
 padding: 10px 20px;
 height: 40px;
 line-height: 20px;
 list-style: none;
 color: #fff;
 border-left: 1px solid #1b1b1b;
 border-right: 1px solid #1b1b1b;

}

.sui-dropdown li:after { 

 content: " ";
 height: 1px;
 position: absolute;
 bottom: 0;
 left: 12px;
 right: 12px;
 background-color: #727272;

} .sui-dropdown li:first-child { 

 /*border-top-left-radius: 4px;*/
 /*border-top-right-radius: 4px;*/

} .sui-dropdown li:last-child { 

 border-bottom: 1px solid #1b1b1b;
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;

}

.sui-dropdown li:last-child:after { 

 display: none;

} .sui-dropdown li:hover { 

 background-color: rgba(50, 132, 252, 1);

}


.sui-loader { 

 display: none;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(49, 45, 63);

} .sui-dropdown li:hover:after { 

 display: none;

} .sui-menu { 

 display: block;
 width: 100%;
 padding: 0;
 border-bottom: 1px solid #1b1b1b;

}

.sui-menu>li { 

 cursor: pointer;
 position: relative;
 list-style: none;
 float: left;
 width: calc(100% / 7);
 text-align: center;
 height: 60px;
 line-height: 60px;
 margin: 0;
 background-color: #505050;
 color: #fff;
 text-transform: uppercase;
 font-size: 13px;

}

.sui-menu>li .sui-dropdown { 

 display: none;
 top: 60px;

}

.sui-menu>li:hover { 

 background-color: rgba(50, 132, 252, 1);

} .sui-menu>li:hover .sui-dropdown { 

 display: block;

}


/* custom */

  1. footer {
 position: fixed;
 width: 100%;
 bottom: 0;

} .footer-wrapper { 

 overflow: hidden;
 padding-bottom: 10px;
 font-size: 12px;
 width: 90%;
 margin: 0 auto;
 text-align: center;

}

.footer-left { 

 /*float: left;*/
 line-height: 1.5;
 border-top: 1px solid #555;
 padding-top: 10px;
 color: #aaa;

} .cover { 

 background-color: #323232;

}

.logo-wrapper { 

 height: 100%;
 width: 100%;
 background-image: url(../img/sui_logo_black.gif);
 -webkit-background-size: 340px;
 background-size: 340px;
 background-position: center;
 background-repeat: no-repeat;

} .cover-logo { 

 height: 150px;
 width: 150px;
 border-radius: 50%;
 background-color: #fff;
 color: #000;
 text-align: center;
 font-size: 30px;
 -webkit-transform-origin: center center;
 -moz-transform-origin: center center;
 -ms-transform-origin: center center;
 -o-transform-origin: center center;
 transform-origin: center center;

}

.cover-domino { 

 position: absolute;
 bottom: 0;
 width: 102%;
 padding: 0;
 margin: 0 0 0 -2%;

}

.cover-domino li { 

 list-style: none;
 display: inline-block;
 margin-left: 2%;
 margin-bottom: 0;
 border-radius: 4px;
 height: 280px;
 width: 4.25%;
 background-color: #fff;

 -webkit-transform-origin: bottom right;
 -moz-transform-origin: bottom right;
 -ms-transform-origin: bottom right;
 -o-transform-origin: bottom right;
 transform-origin: bottom right;

}


@media screen and (max-width: 1366px) { 

 .cover-domino li {
   height: 140px;
 }

}


.member-avatar { 

 width: 200px;
 height: 200px;
 float: left;
 background-color: #00c4cc;

}

  1. fp-nav ul li a span, .fp-slidesNav ul li a span {
 background-color: #fff;

}

.element { 

 width: 230px;
 position: absolute;
 margin-left: -115px;
 margin-top: -115px;
 top: 50%;
 left: 50%;

}

.cell {

}

.clock {

}

  1. fullpage {
 width: 100%;
 height: 100%;
 position: relative;
 overflow: hidden;

}

  1. fullpage .sui-l-fullpage {
 width: 100%;
 height: 100%;
 display: none;
 position: absolute;
 top: 0;
 left: 0;

}


  1. arrow_right {
 position: fixed;
 z-index: 1000;
 width: 2%;
 right: 2.5%;
 top: 50%;
 margin-top: -3.3%;
 cursor: pointer;
 opacity: 1;

}

  1. arrow_left {
 position: fixed;
 z-index: 1000;
 width: 2%;
 left: 2.5%;
 top: 50%;
 margin-top: -3.3%;
 cursor: pointer;
 display: none;
 -webkit-transform: scaleX(-1);
 -ms-transform: scaleX(-1);
 transform: scaleX(-1);

}

  1. arrow_left_height {
 background-image: url(../img/sui_arrow_left.png);
 background-repeat: no-repeat;
 -webkit-background-size: 20px;
 background-size: 20px;
 height: 100px;
 color: #fff;

}

  1. arrow_right_height {
 background-image: url(../img/sui_arrow_left.png);
 background-repeat: no-repeat;
 -webkit-background-size: 20px;
 background-size: 20px;
 height: 100px;
 color: #fff;
 -webkit-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);

}

.clock { 

 width: 20%;
 top: 20%;
 left: 40%;

} .cell-clock-res { 

 display: none;

}



.sui-top-banner { 

 position: relative;
 width: 100%;
 height: 200px;
 background-color: #fff;

} .sui-menu { 

 overflow: hidden;
 width: 100%;
 margin: 0 auto;
 border-bottom: 1px solid #000;

} .sui-menu li { 

 background-color: #fff;
 height: 40px;
 line-height: 40px;

} .sui-menu li { 

 color: #323232;
 -webkit-transition: -webkit-transform .4s;
 -o-transition: -o-transform .4s;
 transition: transform .4s;

} .sui-menu li:hover { 

 -webkit-transform: translate3D(0, -10px, 0);
 -ms-transform: translate3D(0, -10px, 0);
 -o-transform: translate3D(0, -10px, 0);
 transform: translate3D(0, -10px, 0);
 background-color: #fff;

} .sui-content { 

 width: 100%;
 margin: 60px auto;
 overflow: hidden;

} .sui-side-nav { 

 width: 24%;
 float: left;

} .sui-article { 

 width: 75%;
 float: right;

} .sui-article a { 

 color: #000;
 border-bottom: 1px dashed #000;

} .sui-article a:hover { 

 text-decoration: none;
 border-bottom: 1px dashed #000;

} .scrollto { 

 margin-bottom: 90px;

} .scrollto>.scrollto { 

 margin-bottom: 40px;

} .sui-article h1 { 

 margin-bottom: 30px;

} .sui-article h2 { 

 font-size: 18px;
 margin-bottom: 30px;

} .sui-article h3 { 

 font-size: 15px;
 margin-bottom: 30px;

} .sui-menu li.active { 

 border-top: 5px solid #000;

} .sui-side-nav>ul>li { 

 position: relative;
 /*width: 120px;*/
 /*border-radius: 50%;*/
 background: #fff;
 /*border: 1px solid #000;*/
 /*height: 120px;*/
 list-style: none;

} .sui-side-nav ul li.active { 

 text-decoration: underline;

} .to-top-btn { 

 position: fixed;
 bottom: 10px;
 right: 50px;
 width: 50px;
 height: 50px;
 color: #fff;

} .to-top-btn button { 

 font-size: 40px;
 width: 100%;
 color: #000;
 text-align: center;

} .mid-logo { 

 width: 140px;
 height: 140px;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 border-radius: 50%;
 background-image: url(../img/sui_logo_white.gif);
 -webkit-background-size: cover;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;

} .to-top-btn.down { 

 -webkit-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);

}

.animated.anim-slow { 

 -webkit-animation-duration: 2.8s;
 animation-duration: 2.8s;

}


.sui-carousel { 

 display: block;

}

.carousel-wrapper { 

 width: 3200px;

} .sui-carousel li { 

 display: inline-block;
 list-style: none;
 border-radius: 50%;
 background-color: #000;
 width: 200px;
 height: 200px;

}

.main-wrapper { 

 width: 1100px;
 margin: 0 auto;
 background-color: #fff;

}

.sticky { 

 top: 20px;
 width: 250px;
 overflow: hidden;

}

.sub-ul { 

 max-height: 0;
 overflow: hidden;
 opacity: .5;
 padding-left: 20px;
 margin-bottom: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

 -webkit-transition: max-height .3s;
 -o-transition: max-height .3s;
 transition: max-height .3s;

} .sub-ul li { 

 margin-bottom: 3px;
 list-style: none;
 color: #aaa;

}

.sub-ul li:first-child { 

 margin-top: 10px;

} .sui-side-nav a { 

 position: relative;

} .sui-side-nav a.active:before{ 

 content: " ";
 display: block;
 position: absolute;
 left: -12px;
 height: 15px;
 width: 4px;
 top: 1px;
 background-color: #000;

} .sui-side-nav a { 

 color: #000;

} .sui-side-nav>ul>li>a.active + ul { 

 max-height: 300px;

}

.svg-wrapper { 

 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate3D(-50%, -50%, 0);
 -ms-transform: translate3D(-50%, -50%, 0);
 -o-transform: translate3D(-50%, -50%, 0);
 transform: translate3D(-50%, -50%, 0);

}

  1. second-page {
 background-color: rgba(0,0,0,.70);

}