Difference between revisions of "Template:BNU-CHINA/CSS/main"
Line 63: | Line 63: | ||
margin: 0; | margin: 0; | ||
background-color: rgba(255, 255, 255, .95); | background-color: rgba(255, 255, 255, .95); | ||
− | box-shadow: 0 4px 0 rgba(235, 151, 69, . | + | box-shadow: 0 4px 0 rgba(235, 151, 69, .75); |
} | } | ||
Line 81: | Line 81: | ||
font-family: "Raleway Thin", sans-serif; | font-family: "Raleway Thin", sans-serif; | ||
font-size: 18px; | font-size: 18px; | ||
+ | box-shadow: 0 4px 0 transparent; | ||
} | } | ||
.navbar-siren .navbar-nav > li:hover { | .navbar-siren .navbar-nav > li:hover { | ||
− | box-shadow: 0 4px 0 # | + | box-shadow: 0 4px 0 #fff; |
background-color: #D3853D; | background-color: #D3853D; | ||
} | } | ||
.navbar-siren .navbar-nav > li.active { | .navbar-siren .navbar-nav > li.active { | ||
− | box-shadow: 0 4px 0 # | + | box-shadow: 0 4px 0 #fff; |
} | } | ||
Revision as of 18:57, 16 September 2015
/*****
Background *****/
.content.container {
margin-top: 24px; margin-bottom: 32px;
}
/*****
Animation *****/
@-webkit-keyframes rotating /* Safari and Chrome */ {
from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotating {
from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
.rotating {
-webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -ms-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite;
}
/*****
Header *****/
.navbar-siren {
border: none; border-radius: 0; margin: 0; background-color: rgba(255, 255, 255, .95); box-shadow: 0 4px 0 rgba(235, 151, 69, .75);
}
/*****
Header: navigation *****/
.navbar-siren .navbar-nav {
display: table-row;
}
.navbar-siren .navbar-nav > li {
float: none; cursor: pointer; display: table-cell; vertical-align: middle; font-family: "Raleway Thin", sans-serif; font-size: 18px; box-shadow: 0 4px 0 transparent;
}
.navbar-siren .navbar-nav > li:hover {
box-shadow: 0 4px 0 #fff; background-color: #D3853D;
}
.navbar-siren .navbar-nav > li.active {
box-shadow: 0 4px 0 #fff;
}
.navbar-siren .navbar-nav > li > a {
text-align: center; color: #000;
}
.navbar-siren .navbar-nav > li:hover > a {
color: white;
}
.navbar-siren .navbar-nav > li > a:hover {
background-color: transparent; color: white;
}
.navbar-siren .navbar-nav > li svg {
margin: 0 auto 6px auto; display: block; width: 36px; height: 36px;
}
.navbar-siren .navbar-nav > li:hover svg * {
stroke: #fff; fill: #D3853D;
}
.navbar-siren .navbar-nav li .dropdown-menu {
min-width: 150%; text-align: left; padding: 0; border: 0; background-color: #D3853D; border-radius: 0; box-shadow: 1px 3px 2px rgba(120, 120, 120, .5); display: block; opacity: 0; visibility: hidden;
}
.navbar-siren .navbar-nav li:hover .dropdown-menu {
opacity: 1; visibility: visible;
}
.navbar-siren .navbar-nav li.open a.dropdown-toggle {
background: transparent;
}
.navbar-siren .navbar-nav li a.dropdown-toggle {
background: transparent;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a {
font-family: "Raleway Thin", sans-serif; font-size: 18px; padding: 16px; color: #fff;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a:hover {
background-color: #eb9745;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a:active {
background-color: #ffa44c;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a::after {
content: ""; display: block; width: 0; height: 1px; background-color: transparent;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a:hover::after {
content: ""; display: block; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .5);
}
/*****
Header: logo *****/
.navbar-siren .navbar-header {
display: inline-block;
}
.navbar-siren .navbar-logo {
height: auto;
}
.navbar-siren .navbar-logo img {
width: 240px;
}
/*****
Article *****/
.content > article {
opacity: .95; padding: 32px 64px; min-width: 640px; background-color: #fff; box-shadow: 0px 4px 6px rgba(75, 75, 75, 0.5);
}
/*****
Article: reference *****/
.reference {
margin: 48px 0 24px 0;
}
.reference:before {
color: #278A75; font-family: 'Computer Modern Bright Semibold', sans-serif; font-size: 24px; content: "Reference";
}
- globalWrapper .reference > ol, .reference > ol {
margin: 0; padding: 0; list-style-type: none; counter-reset: counter;
}
.reference > ol li {
font-family: 'Computer Modern Serif', serif; margin: 6px 0;
}
.reference > ol li::before {
margin-right: 4px; letter-spacing: 2px; display: inline-block; font-family: 'Computer Modern Serif', serif; content: '[' counter(counter) ']'; counter-increment: counter;
}
/*****
Article: header *****/
article > header.page-header {
text-align: center; font-family: 'Computer Modern Bright Semibold', sans-serif; letter-spacing: -1px; font-style: italic; border: none;
}
article > header.page-header::before {
-webkit-animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite; -o-animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite; animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite;
content: ""; display: block; border-radius: 24px; position: relative; width: 0; padding-left: 48px; margin: auto; height: 48px; background-image: url(""); background-size: 100%; background-repeat: no-repeat;
}
article > header.page-header h1 {
font-weight: 500; font-size: 48px;
}
article > header h1 > small {
display: block; margin: 12px 0; font-size: 24px; letter-spacing: 1px;
}
article h2, article h3, article h4, article h5 {
font-family: 'Computer Modern Bright Semibold', sans-serif; font-weight: 500; color: #a5682f;
}
article h2 {
font-size: 28px; border-bottom: 1px solid #eee;
}
article h3 {
font-size: 20px; word-spacing: -2px;
}
article h4 {
font-size: 16px;
}
article h5 {
color: #278A75; font-size: 16px;
}
/*****
Article: figure *****/
article figure {
padding: 16px 0;
}
article figure img {
max-width: 100%;
}
article figure figcaption {
text-align: center; font-family: 'Computer Modern Serif', serif; color: #278A75; padding: 8px;
}
/*****
Article: paragraph *****/
article p, article blockquote {
font-family: 'Computer Modern Serif', serif; font-size: 14px;
}
/*****
Article: link *****/
article a {
color: #278A75;
}
article a:hover {
color: #D3853D; text-decoration: none;
}
/*****
Team: people *****/
.people.container {
margin-bottom: 48px; padding: 0; width: 100%;
}
.people .people-figure {
border: 2px solid #fff; cursor: pointer; padding: 33.33% 0 0 0; margin: 0; position: relative; overflow: hidden;
}
.people .people-figure > p {
padding: 16px; font-size: 18px; font-family: 'Computer Modern Bright Semibold', sans-serif; font-weight: bold; background-color: transparent; position: absolute; height: 100%; color: transparent; top: 0; z-index: 101;
}
.people .people-figure > p:hover {
background-color: rgba(211, 133, 61, .5); color: #fff;
}
.people .people-avatar {
padding: 16px; font-size: 18px; font-family: serif; position: absolute; color: transparent; top: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; z-index: 100;
}
.people .people-figure p:hover + .people-avatar {
background-position: center;
}
.people .people-figure .people-intro {
padding: 16px; font-size: 18px; font-family: 'Dancing Script', cursive; font-weight: bold; background-color: transparent; position: absolute; height: 100%; top: 0; z-index: 101;
}
.people .people-figure .people-intro:hover {
background-color: rgba(211, 133, 61, .5);
}
.people .people-figure .people-intro:hover + .people-avatar {
background-position: center;
}
.people .people-figure .people-intro > h1 {
font-family: 'Dancing Script', cursive; font-weight: lighter; color: white; padding: 0 0 8px 0; margin: 0; font-size: 32px;
}
.people .people-figure .people-intro > p {
font-family: 'Computer Modern Bright Semibold', sans-serif; color: transparent; font-weight: normal; padding: 0; margin: 0; font-size: 16px; line-height: 20px;
}
.people .people-figure .people-intro:hover > p {
color: white;
}
/*****
Article: video *****/
article video {
width: 480px; height: 270px; background-color: #000; background-size: 100% 100%; display: block; margin: 25px auto;
}
/*****
Home: wrapper *****/
.wrapper {
position: relative;
}
.wrapper img {
width: 100%;
}
.wrapper .wrapper-text {
position: absolute; width: 100%; left: 0; top: 0; padding: 10% 20% 20% 20%; color: white;
}
.wrapper .wrapper-text h1 {
text-align: center; font-size: 72px; color: rgba(255, 255, 255, .75); font-family: 'Computer Modern Bright Semibold', sans-serif;
}
.wrapper .wrapper-text p {
padding: 24px 48px; font-size: 24px; line-height: 32px; font-family: "Raleway Thin", sans-serif; font-weight: 700; color: rgba(255, 255, 255, .9); background-color: rgba(41, 30, 21, .15); box-shadow: 0 0 24px rgba(0, 0, 0, .5); border: 1px solid rgba(180, 180, 180, .5); border-radius: 1px; cursor: default;
}
.wrapper .wrapper-text p:hover {
background-color: rgba(255, 255, 255, .15); color: #fff; border: 1px solid transparent; box-shadow: 0 0 24px rgba(0, 0, 0, .5);
}
.people .people-figure > p {
transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s;
}
.people .people-figure > p:hover {
transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s;
}
.people .people-avatar {
transition: all 0.6s ease-in-out;
}
.people .people-figure .people-intro {
transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s;
}
.people .people-figure .people-intro:hover {
transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s;
}
.people .people-figure .people-intro > p {
transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s;
}
.people .people-figure .people-intro:hover > p {
transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s;
}
/*****
Responsive: iPad *****/
@media screen and (max-width: 1024px) {
#mw-content-text, body { background: #f9f9f9; }
.container { width: 100%; margin: 0; padding: 0; }
.content.container { margin: 0; }
.navbar-siren { box-shadow: none; border-bottom: 4px solid black; background-color: #f9f9f9; }
.navbar-siren .container { padding: 0; margin: 0 0 0 -15px; }
.navbar-siren .navbar-header { text-align: center; }
.navbar-siren .navbar-nav > li { box-shadow: none; }
.navbar-siren .navbar-nav > li { font-size: 15px; }
.navbar-siren .navbar-nav > li.active { box-shadow: none; }
.navbar-siren .navbar-nav > li svg { margin: 8px auto 4px auto; width: 32px; height: 32px; }
article.col-md-12 { margin: 0; box-shadow: none; width: 100%; }
.wrapper .wrapper-text { padding: 10% 15%; }
.wrapper .wrapper-text h1 { font-size: 36px; }
.wrapper .wrapper-text p { font-size: 18px; line-height: 24px; padding: 12px 24px; }
.content > article { opacity: 1; background-color: #fff; }
article p { font-size: 18px; }
article h2 { font-size: 32px; }
article h3 { font-size: 24px; }
article h4 { font-size: 18px; }
article h5 { font-size: 18px; color: #278A75; }
}
@media screen and (min-width: 640px) and (max-width: 1024px) {
.navbar-siren .navbar-nav > li { vertical-align: top; }
.caret { font-size: 6px; }
}
@media screen and (max-width: 640px) {
.navbar-siren .navbar-nav > li { height: 50px; font-size: 14px; }
.navbar-siren .navbar-nav > li svg { display: none; }
.navbar-siren .navbar-nav > li a:first-child { padding-left: 15px; }
.navbar-siren .navbar-nav > li a { margin-top: 10px; padding: 10px 2px; }
.navbar-siren { height: auto; border-bottom: 1px solid black; }
.caret { display: none; }
}
/*****
Responsive: PC *****/
@media screen and (min-width: 1024px) {
.navbar-siren .navbar-nav > li { transition: box-shadow 2s, background-color 0.25s; }
.navbar-siren .navbar-nav > li:hover { transition: box-shadow 0.25s, background-color 0.25s; }
.navbar-siren .navbar-nav > li > a { transition: color 0.25s; }
.navbar-siren .navbar-nav > li svg * { transition: all 0.25s; }
.navbar-siren .navbar-nav li .dropdown-menu { transition: visibility 0s, opacity 0.25s; }
.navbar-siren .navbar-nav li .dropdown-menu li > a::after { transition: all 0.5s ease-out; }
.people .people-figure > p { transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s; }
.people .people-figure > p:hover { transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s; }
.people .people-avatar { transition: all 0.6s ease-in-out; }
.people .people-figure .people-intro { transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s; }
.people .people-figure .people-intro:hover { transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s; }
.people .people-figure .people-intro > p { transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s; }
.people .people-figure .people-intro:hover > p { transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s; }
.wrapper .wrapper-text p { transition: all 0.6s ease-in-out; }
}