Difference between revisions of "Template:BNU-CHINA/CSS/main"
Line 452: | Line 452: | ||
} | } | ||
− | .filter-button-group li { | + | .sub-nav li, .filter-button-group li { |
display: inline-block; | display: inline-block; | ||
margin: 0 2px; | margin: 0 2px; | ||
Line 459: | Line 459: | ||
} | } | ||
− | .filter-button-group li:last-child { | + | .sub-nav li, .filter-button-group li:last-child { |
border-right: none; | border-right: none; | ||
} | } | ||
Line 667: | Line 667: | ||
.dl-horizontal dd { | .dl-horizontal dd { | ||
font-family: 'Computer Modern Serif', serif; | font-family: 'Computer Modern Serif', serif; | ||
+ | } | ||
+ | |||
+ | .sub-header.hidden { | ||
+ | transform: translate3D(0px, -100%, 0); | ||
+ | } | ||
+ | |||
+ | .sub-header { | ||
+ | transition: all 0.25s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .sub-header { | ||
+ | position: fixed; | ||
+ | background-color: #fff; | ||
+ | width: 100%; | ||
+ | top: 0; | ||
+ | z-index: 999; | ||
+ | } | ||
+ | |||
+ | .sub-header .sub-nav { | ||
+ | margin: 2px 0; | ||
+ | } | ||
+ | |||
+ | .sub-header .sub-nav li a{ | ||
+ | font-size: 16px; | ||
} | } | ||
Revision as of 19:55, 17 September 2015
/*****
Background *****/
body {
background-color: #E9DCBA
}
.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 6px 0 rgba(255, 255, 255, .95);
}
/*****
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 6px 0 transparent;
}
.navbar-siren .navbar-nav > li:hover {
box-shadow: 0 6px 0 #D3853D; background-color: #D3853D;
}
.navbar-siren .navbar-nav > li.active {
box-shadow: 0 6px 0 #D3853D;
}
.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: 8px 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 {
padding: 32px 64px; 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 {
font-family: 'Computer Modern Sans', sans-serif; color: #278A75; text-decoration: none;
}
article a:hover {
color: #D3853D; text-decoration: none;
}
article a:visited {
color: #278A75;
}
article a:visited:hover {
color: #D3853D;
}
/*****
Article: table *****/
article table th {
font-family: 'Computer Modern Bright Semibold', sans-serif;
}
article table td {
font-family: 'Computer Modern Sans', sans-serif;
}
/*****
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-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; width: 100%; 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 Sans', 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;
}
.sub-nav li, .filter-button-group li {
display: inline-block; margin: 0 2px; padding: 0 8px 0 0; border-right: 1px solid #278A75;
}
.sub-nav li, .filter-button-group li:last-child {
border-right: none;
}
.btn-filter {
font-family: 'Computer Modern Sans', sans-serif; color: #278A75; border-radius: 0; font-size: 18px; padding: 0;
}
.btn-filter:active {
box-shadow: none; background-color: rgba(211, 133, 61, .1);
}
.btn-filter::after {
content: ""; display: block; width: 0; height: 1px; background-color: #D3853D;
}
/*****
Article: video *****/
article video {
max-width: 100% !important; height: auto !important; 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% 15% 20% 15%; color: white;
}
.wrapper .wrapper-text h1 {
text-align: center; color: rgba(255, 255, 255, 0.75); font-family: 'Computer Modern Bright Semibold', sans-serif; font-size: 72px; letter-spacing: 2px;
}
.wrapper .wrapper-text a{
text-decoration: none; cursor: pointer;
}
.wrapper .wrapper-text a:hover,.wrapper .wrapper-text a:active,.wrapper .wrapper-text a:focus {
outline: 0 !important;
}
.wrapper .wrapper-text p {
border: 1px solid rgba(180, 180, 180, .5); padding: 24px 48px; font-size: 24px; line-height: 32px; font-family: 'Computer Modern Sans', sans-serif; font-weight: normal; color: rgba(255, 255, 255, 0.9); background-color: rgba(41, 30, 21, 0.15); box-shadow: 0 0 24px rgba(0, 0, 0, 0.5); border-radius: 1px;
}
.wrapper:first-child .wrapper-text p:hover {
text-decoration: none;
}
.wrapper .wrapper-text p:hover {
text-decoration: underline; 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;
}
.panel-group .panel {
border-radius: 0; margin: 0 0 16px 0; font-family: 'Computer Modern Serif', serif; word-spacing: -1px; line-height: 24px;
}
.panel-group .panel strong {
font-family: "Computer Modern Bright Semibold", sans-serif; font-weight: normal;
}
.panel-info {
border-radius: 0; border-color: #EDD5B1;
}
.panel-info > .panel-heading {
border-radius: 0; background-color: rgb(237, 213, 177); border-color: rgb(237, 213, 177); color: rgb(164, 109, 49);
}
.panel-info.gold {
border-color: rgb(255, 219, 118);
}
.panel-info.gold > .panel-heading {
background-color: rgb(255, 219, 118); border-color: rgb(255, 219, 118); color: #816515;
}
.panel-info.silver {
border-color: rgb(222, 222, 222);
}
.panel-info.silver > .panel-heading {
color: #808080; background-color: rgb(222, 222, 222); border-color: rgb(222, 222, 222);
}
.panel-info.bronze {
border-color: #DA8D41;
}
.panel-info.bronze > .panel-heading {
background-color: #DA8D41; border-color: #DA8D41; color: #6E451D;
}
.dl-horizontal dt {
font-family: "Computer Modern Bright Semibold", sans-serif;
}
.dl-horizontal dd {
font-family: 'Computer Modern Serif', serif;
}
.sub-header.hidden {
transform: translate3D(0px, -100%, 0);
}
.sub-header {
transition: all 0.25s ease-in-out;
}
.sub-header {
position: fixed; background-color: #fff; width: 100%; top: 0; z-index: 999;
}
.sub-header .sub-nav {
margin: 2px 0;
}
.sub-header .sub-nav li a{ font-size: 16px; }
/*****
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 {
font-size: 15px; box-shadow: none; }
.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-text h1 { font-family: "Raleway Thin", sans-serif; }
.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) {
.content article { min-width: 640px; padding: 32px 64px; }
.navbar-siren .navbar-nav > li { vertical-align: top; }
.caret { font-size: 6px; }
}
@media screen and (max-width: 640px) {
.content article { padding: 0 16px; }
article p, article blockquote { font-size: 14px; }
.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) {
.btn-filter:hover { color: #D3853D; }
.btn-filter:hover::after { content: ""; width: 100%; height: 1px; }
.btn-filter::after { transition: all 0.5s ease-out; }
.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; }
}