Difference between revisions of "Template:SYSU CHINA/MAINCSS"
Line 391: | Line 391: | ||
.element { | .element { | ||
− | width: | + | width: 230px; |
position: absolute; | position: absolute; | ||
+ | margin-left: -115px; | ||
+ | margin-top: -115px; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
} | } | ||
Line 465: | Line 469: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
.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 */
- 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;
}
- 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 {
}
- fullpage {
width: 100%; height: 100%; position: relative; overflow: hidden;
}
- fullpage .sui-l-fullpage {
width: 100%; height: 100%; display: none; position: absolute; top: 0; left: 0;
}
- arrow_right {
position: fixed; z-index: 1000; width: 2%; right: 2.5%; top: 50%; margin-top: -3.3%; cursor: pointer; opacity: 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);
}
- 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;
}
- 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);
}
- second-page {
background-color: rgba(0,0,0,.70);
}