Difference between revisions of "Team:SYSU CHINA"
Line 4: | Line 4: | ||
#mainContainer { | #mainContainer { | ||
display: none; | display: none; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <style> | ||
+ | /* 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; | ||
+ | } | ||
+ | |||
+ | html, body { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | cursor: pointer; | ||
+ | text-decoration: none; | ||
+ | color: rgba(50, 132, 252, 1); | ||
+ | } | ||
+ | |||
+ | a:hover {text-decoration: underline; } | ||
+ | |||
+ | h2, h3, h4, h5 {margin-bottom: 20px; } | ||
+ | |||
+ | 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: #323232; | ||
+ | } | ||
+ | .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% / 6); | ||
+ | text-align: center; | ||
+ | height: 60px; | ||
+ | line-height: 60px; | ||
+ | margin: 0; | ||
+ | background-color: #505050; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .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/logo.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 { | ||
+ | top: 50%; | ||
+ | -webkit-transform: translate3D(0, -50%, 0); | ||
+ | -ms-transform: translate3D(0, -50%, 0); | ||
+ | -o-transform: translate3D(0, -50%, 0); | ||
+ | transform: translate3D(0, -50%, 0); | ||
+ | width: 30%; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .cell { | ||
+ | width: 35%; | ||
+ | left: 30px; | ||
+ | } | ||
+ | |||
+ | .clock { | ||
+ | left: 1900px; | ||
} | } | ||
</style> | </style> |
Revision as of 07:54, 29 August 2015