Difference between revisions of "Template:SZU China/Playground/Introduction/CSS"

 
Line 133: Line 133:
 
     border-collapse:collapse;
 
     border-collapse:collapse;
 
     border-spacing:0;
 
     border-spacing:0;
 +
}
 +
 +
 +
@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);
 +
@font-face {
 +
    font-family:'icomoon';
 +
    src:url('../fonts/icomoon.eot?yrquyl');
 +
    src:url('../fonts/icomoon.eot?#iefixyrquyl') format('embedded-opentype'), url('../fonts/icomoon.woff?yrquyl') format('woff'), url('../fonts/icomoon.ttf?yrquyl') format('truetype'), url('../fonts/icomoon.svg?yrquyl#icomoon') format('svg');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 +
[class^="icon-"], [class*=" icon-"] {
 +
    font-family:'icomoon';
 +
    speak: none;
 +
    font-style: normal;
 +
    font-weight: normal;
 +
    font-variant: normal;
 +
    text-transform: none;
 +
    line-height: 1;
 +
    /* Better Font Rendering =========== */
 +
    -webkit-font-smoothing: antialiased;
 +
    -moz-osx-font-smoothing: grayscale;
 +
}
 +
body, html {
 +
    font-size: 100%;
 +
    padding: 0;
 +
    margin: 0;
 +
}
 +
/* Reset */
 +
*, *:after, *:before {
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
}
 +
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
 +
.clearfix:before, .clearfix:after {
 +
    content:" ";
 +
    display: table;
 +
}
 +
.clearfix:after {
 +
    clear: both;
 +
}
 +
body {
 +
    background: #f9f7f6;
 +
    color: #404d5b;
 +
    font-weight: 500;
 +
    font-size: 1.05em;
 +
    font-family:"Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
 +
}
 +
a {
 +
    color: #2fa0ec;
 +
    text-decoration: none;
 +
    outline: none;
 +
}
 +
a:hover, a:focus {
 +
    color:#74777b;
 +
}
 +
;
 +
.htmleaf-container {
 +
    margin: 0 auto;
 +
    text-align: center;
 +
    overflow: hidden;
 +
}
 +
.htmleaf-content {
 +
    font-size: 150%;
 +
    padding: 1em 0;
 +
}
 +
.htmleaf-content h2 {
 +
    margin: 0 0 2em;
 +
    opacity: 0.1;
 +
}
 +
.htmleaf-content p {
 +
    margin: 1em 0;
 +
    padding: 5em 0 0 0;
 +
    font-size: 0.65em;
 +
}
 +
.bgcolor-1 {
 +
    background: #f0efee;
 +
}
 +
.bgcolor-2 {
 +
    background: #f9f9f9;
 +
}
 +
.bgcolor-3 {
 +
    background: #e8e8e8;
 +
}
 +
/*light grey*/
 +
.bgcolor-4 {
 +
    background: #2f3238;
 +
    color: #fff;
 +
}
 +
/*Dark grey*/
 +
.bgcolor-5 {
 +
    background: #df6659;
 +
    color: #521e18;
 +
}
 +
/*pink1*/
 +
.bgcolor-6 {
 +
    background: #2fa8ec;
 +
}
 +
/*sky blue*/
 +
.bgcolor-7 {
 +
    background: #d0d6d6;
 +
}
 +
/*White tea*/
 +
.bgcolor-8 {
 +
    background: #3d4444;
 +
    color: #fff;
 +
}
 +
/*Dark grey2*/
 +
.bgcolor-9 {
 +
    background: #ef3f52;
 +
    color: #fff;
 +
}
 +
/*pink2*/
 +
.bgcolor-10 {
 +
    background: #64448f;
 +
    color: #fff;
 +
}
 +
/*Violet*/
 +
.bgcolor-11 {
 +
    background: #3755ad;
 +
    color: #fff;
 +
}
 +
/*dark blue*/
 +
.bgcolor-12 {
 +
    background: #3498DB;
 +
    color: #fff;
 +
}
 +
/*light blue*/
 +
 +
/* Header */
 +
.htmleaf-header {
 +
    padding: 1em 190px 1em;
 +
    letter-spacing: -1px;
 +
    text-align: center;
 +
}
 +
.htmleaf-header h1 {
 +
    font-weight: 600;
 +
    font-size: 2em;
 +
    line-height: 1;
 +
    margin-bottom: 0;
 +
    font-family:"Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
 +
}
 +
.htmleaf-header h1 span {
 +
    font-family:"Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
 +
    display: block;
 +
    font-size: 60%;
 +
    font-weight: 400;
 +
    padding: 0.8em 0 0.5em 0;
 +
    color: #c3c8cd;
 +
}
 +
/*nav*/
 +
.htmleaf-demo a {
 +
    color: #1d7db1;
 +
    text-decoration: none;
 +
}
 +
.htmleaf-demo {
 +
    width: 100%;
 +
    padding-bottom: 1.2em;
 +
}
 +
.htmleaf-demo a {
 +
    display: inline-block;
 +
    margin: 0.5em;
 +
    padding: 0.6em 1em;
 +
    border: 3px solid #1d7db1;
 +
    font-weight: 700;
 +
}
 +
.htmleaf-demo a:hover {
 +
    opacity: 0.6;
 +
}
 +
.htmleaf-demo a.current {
 +
    background:#1d7db1;
 +
    color: #fff;
 +
}
 +
/* Top Navigation Style */
 +
.htmleaf-links {
 +
    position: relative;
 +
    display: inline-block;
 +
    white-space: nowrap;
 +
    font-size: 1.5em;
 +
    text-align: center;
 +
}
 +
.htmleaf-links::after {
 +
    position: absolute;
 +
    top: 0;
 +
    left: 50%;
 +
    margin-left: -1px;
 +
    width: 2px;
 +
    height: 100%;
 +
    background: #dbdbdb;
 +
    content:'';
 +
    -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
 +
    transform: rotate3d(0, 0, 1, 22.5deg);
 +
}
 +
.htmleaf-icon {
 +
    display: inline-block;
 +
    margin: 0.5em;
 +
    padding: 0em 0;
 +
    width: 1.5em;
 +
    text-decoration: none;
 +
}
 +
.htmleaf-icon span {
 +
    display: none;
 +
}
 +
.htmleaf-icon:before {
 +
    margin: 0 5px;
 +
    text-transform: none;
 +
    font-weight: normal;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-family:'icomoon';
 +
    line-height: 1;
 +
    speak: none;
 +
    -webkit-font-smoothing: antialiased;
 +
}
 +
/* footer */
 +
.htmleaf-footer {
 +
    width: 100%;
 +
    padding-top: 10px;
 +
}
 +
.htmleaf-small {
 +
    font-size: 0.8em;
 +
}
 +
.center {
 +
    text-align: center;
 +
}
 +
/****/
 +
.related {
 +
    color: #fff;
 +
    background: #333;
 +
    text-align: center;
 +
    font-size: 1.25em;
 +
    padding: 0.5em 0;
 +
    overflow: hidden;
 +
}
 +
.related > a {
 +
    vertical-align: top;
 +
    width: calc(100% - 20px);
 +
    max-width: 340px;
 +
    display: inline-block;
 +
    text-align: center;
 +
    margin: 20px 10px;
 +
    padding: 25px;
 +
    font-family:"Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
 +
}
 +
.related a {
 +
    display: inline-block;
 +
    text-align: left;
 +
    margin: 20px auto;
 +
    padding: 10px 20px;
 +
    opacity: 0.8;
 +
    -webkit-transition: opacity 0.3s;
 +
    transition: opacity 0.3s;
 +
    -webkit-backface-visibility: hidden;
 +
}
 +
.related a:hover, .related a:active {
 +
    opacity: 1;
 +
}
 +
.related a img {
 +
    max-width: 100%;
 +
    opacity: 0.8;
 +
    border-radius: 4px;
 +
}
 +
.related a:hover img, .related a:active img {
 +
    opacity: 1;
 +
}
 +
.related h3 {
 +
    font-family:"Microsoft YaHei", sans-serif;
 +
}
 +
.related a h3 {
 +
    font-weight: 300;
 +
    margin-top: 0.15em;
 +
    color: #fff;
 +
}
 +
/* icomoon */
 +
.icon-home:before {
 +
    content:"\e600";
 +
}
 +
.icon-pacman:before {
 +
    content:"\e623";
 +
}
 +
.icon-users2:before {
 +
    content:"\e678";
 +
}
 +
.icon-bug:before {
 +
    content:"\e699";
 +
}
 +
.icon-eye:before {
 +
    content:"\e610";
 +
}
 +
.icon-eye-blocked:before {
 +
    content:"\e611";
 +
}
 +
.icon-eye2:before {
 +
    content:"\e612";
 +
}
 +
.icon-arrow-up-left3:before {
 +
    content:"\e72f";
 +
}
 +
.icon-arrow-up3:before {
 +
    content:"\e730";
 +
}
 +
.icon-arrow-up-right3:before {
 +
    content:"\e731";
 +
}
 +
.icon-arrow-right3:before {
 +
    content:"\e732";
 +
}
 +
.icon-arrow-down-right3:before {
 +
    content:"\e733";
 +
}
 +
.icon-arrow-down3:before {
 +
    content:"\e734";
 +
}
 +
.icon-arrow-down-left3:before {
 +
    content:"\e735";
 +
}
 +
.icon-arrow-left3:before {
 +
    content:"\e736";
 +
}
 +
@media screen and (max-width: 50em) {
 +
    .htmleaf-header {
 +
        padding: 3em 10% 4em;
 +
    }
 +
    .htmleaf-header h1 {
 +
        font-size:2em;
 +
    }
 +
}
 +
@media screen and (max-width: 40em) {
 +
    .htmleaf-header h1 {
 +
        font-size: 1.5em;
 +
    }
 +
}
 +
@media screen and (max-width: 30em) {
 +
    .htmleaf-header h1 {
 +
        font-size:1.2em;
 +
    }
 
}
 
}

Latest revision as of 07:11, 17 September 2015

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { 

   display:block;

} audio, canvas, video { 

   display:inline-block;

} audio:not([controls]) { 

   display:none;
   height:0;

} [hidden] { 

   display:none;

} html { 

   font-family:sans-serif;
   -ms-text-size-adjust:100%;
   -webkit-text-size-adjust:100%;

} body { 

   margin:0;

} a:focus { 

   outline:thin dotted;

} a:active, a:hover { 

   outline:0;

} h1 { 

   font-size:2em;
   margin:0.67em 0;

} abbr[title] { 

   border-bottom:1px dotted;

} b, strong { 

   font-weight:bold;

} dfn { 

   font-style:italic;

} hr { 

   -moz-box-sizing:content-box;
   box-sizing:content-box;
   height:0;

} mark { 

   background:#ff0;
   color:#000;

} code, kbd, pre, samp { 

   font-family:monospace, serif;
   font-size:1em;

} pre { 

   white-space:pre-wrap;

} q { 

   quotes:"\201C""\201D""\2018""\2019";

} small { 

   font-size:80%;

} sub, sup { 

   font-size:75%;
   line-height:0;
   position:relative;
   vertical-align:baseline;

} sup { 

   top:-0.5em;

} sub { 

   bottom:-0.25em;

} img { 

   border:0;

} svg:not(:root) { 

   overflow:hidden;

} figure { 

   margin:0;

} fieldset { 

   border:1px solid #c0c0c0;
   margin:0 2px;
   padding:0.35em 0.625em 0.75em;

} legend { 

   border:0;
   padding:0;

} button, input, select, textarea { 

   font-family:inherit;
   font-size:100%;
   margin:0;

} button, input { 

   line-height:normal;

} button, select { 

   text-transform:none;

} button, html input[type="button"], input[type="reset"], input[type="submit"] { 

   -webkit-appearance:button;
   cursor:pointer;

} button[disabled], html input[disabled] { 

   cursor:default;

} input[type="checkbox"], input[type="radio"] { 

   box-sizing:border-box;
   padding:0;

} input[type="search"] { 

   -webkit-appearance:textfield;
   -moz-box-sizing:content-box;
   -webkit-box-sizing:content-box;
   box-sizing:content-box;

} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { 

   -webkit-appearance:none;

} button::-moz-focus-inner, input::-moz-focus-inner { 

   border:0;
   padding:0;

} textarea { 

   overflow:auto;
   vertical-align:top;

} table { 

   border-collapse:collapse;
   border-spacing:0;

}


@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800); 

@font-face {
   font-family:'icomoon';
   src:url('../fonts/icomoon.eot?yrquyl');
   src:url('../fonts/icomoon.eot?#iefixyrquyl') format('embedded-opentype'), url('../fonts/icomoon.woff?yrquyl') format('woff'), url('../fonts/icomoon.ttf?yrquyl') format('truetype'), url('../fonts/icomoon.svg?yrquyl#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;

} [class^="icon-"], [class*=" icon-"] { 

   font-family:'icomoon';
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

} body, html { 

   font-size: 100%;
   padding: 0;
   margin: 0;

} /* Reset */ 

*, *:after, *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

} /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 

.clearfix:before, .clearfix:after {
   content:" ";
   display: table;

} .clearfix:after { 

   clear: both;

} body { 

   background: #f9f7f6;
   color: #404d5b;
   font-weight: 500;
   font-size: 1.05em;
   font-family:"Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;

} a { 

   color: #2fa0ec;
   text-decoration: none;
   outline: none;

} a:hover, a:focus { 

   color:#74777b;

} 

.htmleaf-container {
   margin: 0 auto;
   text-align: center;
   overflow: hidden;

} .htmleaf-content { 

   font-size: 150%;
   padding: 1em 0;

} .htmleaf-content h2 { 

   margin: 0 0 2em;
   opacity: 0.1;

} .htmleaf-content p { 

   margin: 1em 0;
   padding: 5em 0 0 0;
   font-size: 0.65em;

} .bgcolor-1 { 

   background: #f0efee;

} .bgcolor-2 { 

   background: #f9f9f9;

} .bgcolor-3 { 

   background: #e8e8e8;

} /*light grey*/ 

.bgcolor-4 {
   background: #2f3238;
   color: #fff;

} /*Dark grey*/ 

.bgcolor-5 {
   background: #df6659;
   color: #521e18;

} /*pink1*/ 

.bgcolor-6 {
   background: #2fa8ec;

} /*sky blue*/ 

.bgcolor-7 {
   background: #d0d6d6;

} /*White tea*/ 

.bgcolor-8 {
   background: #3d4444;
   color: #fff;

} /*Dark grey2*/ 

.bgcolor-9 {
   background: #ef3f52;
   color: #fff;

} /*pink2*/ 

.bgcolor-10 {
   background: #64448f;
   color: #fff;

} /*Violet*/ 

.bgcolor-11 {
   background: #3755ad;
   color: #fff;

} /*dark blue*/ 

.bgcolor-12 {
   background: #3498DB;
   color: #fff;

} /*light blue*/

/* Header */ 

.htmleaf-header {
   padding: 1em 190px 1em;
   letter-spacing: -1px;
   text-align: center;

} .htmleaf-header h1 { 

   font-weight: 600;
   font-size: 2em;
   line-height: 1;
   margin-bottom: 0;
   font-family:"Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;

} .htmleaf-header h1 span { 

   font-family:"Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
   display: block;
   font-size: 60%;
   font-weight: 400;
   padding: 0.8em 0 0.5em 0;
   color: #c3c8cd;

} /*nav*/ 

.htmleaf-demo a {
   color: #1d7db1;
   text-decoration: none;

} .htmleaf-demo { 

   width: 100%;
   padding-bottom: 1.2em;

} .htmleaf-demo a { 

   display: inline-block;
   margin: 0.5em;
   padding: 0.6em 1em;
   border: 3px solid #1d7db1;
   font-weight: 700;

} .htmleaf-demo a:hover { 

   opacity: 0.6;

} .htmleaf-demo a.current { 

   background:#1d7db1;
   color: #fff;

} /* Top Navigation Style */ 

.htmleaf-links {
   position: relative;
   display: inline-block;
   white-space: nowrap;
   font-size: 1.5em;
   text-align: center;

} .htmleaf-links::after { 

   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #dbdbdb;
   content:;
   -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
   transform: rotate3d(0, 0, 1, 22.5deg);

} .htmleaf-icon { 

   display: inline-block;
   margin: 0.5em;
   padding: 0em 0;
   width: 1.5em;
   text-decoration: none;

} .htmleaf-icon span { 

   display: none;

} .htmleaf-icon:before { 

   margin: 0 5px;
   text-transform: none;
   font-weight: normal;
   font-style: normal;
   font-variant: normal;
   font-family:'icomoon';
   line-height: 1;
   speak: none;
   -webkit-font-smoothing: antialiased;

} /* footer */ 

.htmleaf-footer {
   width: 100%;
   padding-top: 10px;

} .htmleaf-small { 

   font-size: 0.8em;

} .center { 

   text-align: center;

} /****/ 

.related {
   color: #fff;
   background: #333;
   text-align: center;
   font-size: 1.25em;
   padding: 0.5em 0;
   overflow: hidden;

} .related > a { 

   vertical-align: top;
   width: calc(100% - 20px);
   max-width: 340px;
   display: inline-block;
   text-align: center;
   margin: 20px 10px;
   padding: 25px;
   font-family:"Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;

} .related a { 

   display: inline-block;
   text-align: left;
   margin: 20px auto;
   padding: 10px 20px;
   opacity: 0.8;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   -webkit-backface-visibility: hidden;

} .related a:hover, .related a:active { 

   opacity: 1;

} .related a img { 

   max-width: 100%;
   opacity: 0.8;
   border-radius: 4px;

} .related a:hover img, .related a:active img { 

   opacity: 1;

} .related h3 { 

   font-family:"Microsoft YaHei", sans-serif;

} .related a h3 { 

   font-weight: 300;
   margin-top: 0.15em;
   color: #fff;

} /* icomoon */ 

.icon-home:before {
   content:"\e600";

} .icon-pacman:before { 

   content:"\e623";

} .icon-users2:before { 

   content:"\e678";

} .icon-bug:before { 

   content:"\e699";

} .icon-eye:before { 

   content:"\e610";

} .icon-eye-blocked:before { 

   content:"\e611";

} .icon-eye2:before { 

   content:"\e612";

} .icon-arrow-up-left3:before { 

   content:"\e72f";

} .icon-arrow-up3:before { 

   content:"\e730";

} .icon-arrow-up-right3:before { 

   content:"\e731";

} .icon-arrow-right3:before { 

   content:"\e732";

} .icon-arrow-down-right3:before { 

   content:"\e733";

} .icon-arrow-down3:before { 

   content:"\e734";

} .icon-arrow-down-left3:before { 

   content:"\e735";

} .icon-arrow-left3:before { 

   content:"\e736";

} @media screen and (max-width: 50em) { 

   .htmleaf-header {
       padding: 3em 10% 4em;
   }
   .htmleaf-header h1 {
       font-size:2em;
   }

} @media screen and (max-width: 40em) { 

   .htmleaf-header h1 {
       font-size: 1.5em;
   }

} @media screen and (max-width: 30em) { 

   .htmleaf-header h1 {
       font-size:1.2em;
   }

}