Difference between revisions of "Template:SKLMT-China/template css"

Line 1: Line 1:
−
<html><style>
+
<html>
 +
<style>
 +
 
 +
*
 +
* SKLMT SYTLE
 +
* */
 +
 
 +
/* Basic Sytle */
 +
 
 +
html, body {
 +
    width:100%;
 +
    font-size: 100%;
 +
    font: inherit;
 +
    height: auto;
 +
    margin:0;
 +
    padding:0;
 +
    vertical-align: baseline;
 +
    overflow-x: hidden;
 +
}
 +
 
 +
body {
 +
    font-family: Lato, Roboto, Source Sans Pro, Helvetica, sans-serif;
 +
    position: relative;
 +
}
 +
 
 +
a,
 +
a:active,
 +
a:focus,
 +
a:hover{
 +
    outline:none;
 +
    -webkit-transition: all 0.3s ease-in-out;
 +
    -moz-transition: all 0.3s ease-in-out;
 +
    -o-transition: all 0.3s ease-in-out;
 +
    -ms-transition: all 0.3s ease-in-out;
 +
    transition: all 0.3s ease-in-out;
 +
}
 +
 
 +
a:hover{
 +
    text-decoration: none;
 +
    color: #00BFFF;
 +
}
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
    font-weight: 300;
 +
    line-height: 1.375;
 +
    letter-spacing: -0.05em;
 +
    margin: 0 0 1rem 0;
 +
}
 +
 
 +
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 +
    color: inherit;
 +
    text-decoration: none;
 +
}
 +
 
 +
h1 {
 +
    font-size: 3.5rem;
 +
    line-height: 1.2;
 +
}
 +
 
 +
h2 {
 +
    font-size: 2.25rem;
 +
}
 +
 
 +
h3 {
 +
    font-size: 1.5rem;
 +
}
 +
 
 +
h4 {
 +
    font-size: 1.1rem;
 +
}
 +
 
 +
h5 {
 +
    font-size: 0.9rem;
 +
}
 +
 
 +
h6 {
 +
    font-size: 0.7rem;
 +
}
 +
 
 +
sub {
 +
    font-size: 0.8rem;
 +
    position: relative;
 +
    top: 0.5rem;
 +
}
 +
 
 +
sup {
 +
    font-size: 0.8rem;
 +
    position: relative;
 +
    top: -0.5rem;
 +
}
 +
 
 +
p{
 +
    margin-bottom:20px;
 +
    font-size: 1.35em;
 +
    line-height: 1.65em;
 +
    font-weight: 250;
 +
}
 +
 
 +
.wrapper{
 +
    min-height: 800px;
 +
}
 +
 
 +
/* Header */
 +
 
 +
#page-footer {
 +
    margin-top: 6em;
 +
    background-color: #111;
 +
    text-align: center;
 +
    color: white;
 +
    border-top: 2em solid #222;
 +
    border-bottom: 6em solid #000;
 +
}
 +
 
 +
#page-footer strong {
 +
    font-family: Algerian;
 +
    color: #cf5e72;
 +
    font-size: 1.2em;
 +
}
 +
 
 +
#page-footer .row {
 +
    padding-bottom: 2.8em;
 +
}
 +
 
 +
 
 +
/*
 +
* Index Banner
 +
*/
 +
 
 +
.index-banner {
 +
    background-attachment: fixed;
 +
    background-color: #272833;
 +
    background-image: url("../images/8.jpg");
 +
    background-position: center center;
 +
    background-size: cover;
 +
    box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
 +
    min-height: 100vh;
 +
    position: relative;
 +
    text-align: center;
 +
    z-index: 8;
 +
}
 +
 
 +
@-moz-keyframes inner-animation {
 +
    0% {
 +
        opacity: 0;
 +
    }
 +
 
 +
    100% {
 +
        opacity: 1;
 +
    }
 +
}
 +
 
 +
@-webkit-keyframes inner-animation {
 +
    0% {
 +
        opacity: 0;
 +
    }
 +
 
 +
    100% {
 +
        opacity: 1;
 +
    }
 +
}
 +
 
 +
@-ms-keyframes inner-animation {
 +
    0% {
 +
        opacity: 0;
 +
    }
 +
 
 +
    100% {
 +
        opacity: 1;
 +
    }
 +
}
 +
 
 +
@keyframes inner-animation {
 +
    0% {
 +
        opacity: 0;
 +
    }
 +
 
 +
    100% {
 +
        opacity: 1;
 +
    }
 +
}
 +
 
 +
 
 +
.index-banner:before {
 +
    content: '';
 +
    display: inline-block;
 +
    height: 100vh;
 +
    vertical-align: middle;
 +
    width: 1%;
 +
}
 +
 
 +
.index-banner:after {
 +
    content: '';
 +
    display: block;
 +
    height: 100%;
 +
    left: 0;
 +
    top: 0;
 +
    position: absolute;
 +
    width: 100%;
 +
}
 +
 
 +
.index-banner .inner {
 +
    -moz-animation: inner-animation 2s 0.25s ease-in-out;
 +
    -webkit-animation: inner-animation 2s 0.25s ease-in-out;
 +
    -ms-animation: inner-animation 2s 0.25s ease-in-out;
 +
    animation: inner-animation 2s 0.25s ease-in-out;
 +
    -moz-animation-fill-mode: forwards;
 +
    -webkit-animation-fill-mode: forwards;
 +
    -ms-animation-fill-mode: forwards;
 +
    animation-fill-mode: forwards;
 +
    background: rgba(52, 27, 43, 0.5);
 +
    color: #fff;
 +
    display: inline-block;
 +
    max-width: 95%;
 +
    opacity: 0;
 +
    padding: 3em;
 +
    text-align: center;
 +
    font-size: 100%;
 +
    vertical-align: middle;
 +
    position: relative;
 +
    z-index: 1;
 +
}
 +
 
 +
.index-banner .inner header {
 +
    width: 100%;
 +
    display: inline-block;
 +
    border-bottom: solid 2px;
 +
    border-top: solid 2px;
 +
    margin: 0 0 2em 0;
 +
    padding: 3px 0 3px 0;
 +
}
 +
 
 +
.index-banner .inner .cd-intro {
 +
    width: 100%;
 +
    border-bottom: solid 2px;
 +
    border-top: solid 2px;
 +
}
 +
 
 +
.index-banner .inner header h2 {
 +
    font-size: 2.2em;
 +
    font-weight: 900;
 +
    letter-spacing: 0.2em;
 +
    margin: 0;
 +
    padding-left: 0.05em;
 +
    position: relative;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
.index-banner .inner p {
 +
    font-size: 1.5em;
 +
    letter-spacing: 0.1em;
 +
    margin: 0;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
.index-banner .inner p a {
 +
    color: inherit;
 +
    font-weight: 400;
 +
}
 +
 
 +
.index-banner .inner footer {
 +
    margin: 2em 0 0 0;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
    .index-banner .inner {
 +
        background: none;
 +
        margin-top: 3.5em;
 +
    }
 +
}
 +
 
 +
/* Button */
 +
 
 +
ul.buttons {
 +
    cursor: default;
 +
    list-style: none;
 +
    padding-left: 0;
 +
    margin-top: inherit;
 +
}
 +
 
 +
ul.buttons:last-child {
 +
    margin-bottom: 0;
 +
}
 +
 
 +
ul.buttons li {
 +
    display: inline-block;
 +
    padding: 0 0 0 1.5em;
 +
}
 +
 
 +
ul.buttons li:first-child {
 +
    padding: 0;
 +
}
 +
 
 +
ul.buttons.stacked li {
 +
    display: block;
 +
    padding: 1.5em 0 0 0;
 +
}
 +
 
 +
ul.buttons.stacked li:first-child {
 +
    padding: 0;
 +
}
 +
 
 +
ul.buttons li {
 +
    display: block;
 +
    padding: 1em 0 0 0;
 +
}
 +
ul.buttons {
 +
    text-align: center;
 +
}
 +
 
 +
input[type="button"],
 +
input[type="submit"],
 +
input[type="reset"],
 +
button,
 +
.button {
 +
    -moz-appearance: none;
 +
    -webkit-appearance: none;
 +
    -ms-appearance: none;
 +
    appearance: none;
 +
    -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 +
    -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 +
    -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 +
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 +
    background: none;
 +
    border: solid 1px;
 +
    border-radius: 20px;
 +
    color: inherit;
 +
    cursor: pointer;
 +
    display: inline-block;
 +
    font-size: 0.8em;
 +
    font-weight: 900;
 +
    letter-spacing: 2px;
 +
    min-width: 18em;
 +
    padding: 0 0.75em;
 +
    line-height: 3.75em;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
input[type="button"]:hover,
 +
button:hover,
 +
.button:hover {
 +
    background: rgba(188, 202, 206, 0.15);
 +
    border-color: inherit;
 +
}
 +
 
 +
input[type="button"].primary,
 +
button.primary,
 +
.button.primary {
 +
    background: #83d3c9;
 +
    border-color: #83d3c9;
 +
    color: #fff !important;
 +
}
 +
 
 +
input[type="button"].primary:hover,
 +
button.primary:hover,
 +
.button.primary:hover {
 +
    background: #96dad1 !important;
 +
    border-color: #96dad1 !important;
 +
}
 +
 
 +
input[type="button"].fit,
 +
button.fit,
 +
.button.fit {
 +
    width: 100%;
 +
}
 +
 
 +
input[type="button"].small,
 +
button.small,
 +
.button.small {
 +
    font-size: 0.7em;
 +
    min-width: 14em;
 +
    padding: 0.5em 0;
 +
}
 +
 
 +
/* Text Decoration */
 +
 
 
html {
 
html {
 
     font-size: 18pt;
 
     font-size: 18pt;

Revision as of 12:05, 4 October 2018