Difference between revisions of "Template:BNU-CHINA/CSS/main"

Latest revision as of 01:46, 19 September 2015

/*****

   Background
           *****/

body {

   background-color: #E9DCBA

}

.content.container {

   margin-top: 24px;
   padding-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 {

   padding: 12px 0px 0px;
   border-top: 1px solid #eee;

}

.reference:before {

   color: #278A75;
   font-family: "Computer Modern Bright Semibold",sans-serif;
   font-size: 18px;
   line-height: 16px;
   content: "References:";

}

globalWrapper .reference > ol, .reference > ol {

   margin: 0;
   padding: 0;
   list-style-type: none;
   counter-reset: counter;

}

.reference > ol li {

   font-family: 'Computer Modern Sans', sans-serif  !important;
   font-size: 12px;
   line-height: 16px;
   color: rgb(102, 102, 102);
   margin: 6px 0;

}

.reference > ol li::before {

   margin-right: 4px;
   letter-spacing: 2px;
   display: inline-block;
   font-family: 'Computer Modern Sans', sans-serif  !important;
   content: '[' counter(counter) ']';
   counter-increment: counter;

}

/*****

   Article: header
                *****/

.page-header {

   margin: 40px 0 0;

}

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 a, article h3 a, article h4 a, article h5 a{

   font-size: 14px;
   padding: 8px 12px;

}

article h2 {

   font-size: 26px;
   border-bottom: 1px solid #eee;

}

article h2:first-child {

   margin-top: 0;

}

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: 16px;
   line-height: 22px;
   margin-bottom: 16px;
   word-spacing: 2px;

}

/*****

   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;

}

.filter-button-group li {

   display: inline-block;
   margin: 0 2px;
   padding: 0 8px 0 0;
   border-right: 1px solid #278A75;

}

.sub-nav li {

   display: inline-block;
   margin: 0;
   padding: 4px 8px;
   border-right: 1px solid #e9e9e9;

}

.sub-nav li:last-child, .filter-button-group li:last-child {

   border-right: none;

}

.sub-header {

   box-shadow: 0 1px 6px rgba(120, 120, 120, .5);

}

.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 {

   transition: all 0.25s ease-in-out;

}

.sub-header {

   position: fixed;
   background-color: #fff;
   width: 100%;
   top: -120px;
   z-index: 999;

}

.sub-header .sub-nav {

   margin: 0;

}

.sub-nav a:visited {

   color: #278A75;

}

.box-content p {

   font-family: 'Computer Modern Sans', sans-serif;

}

ul.filter-button-group {

   margin: 0 0 8px 0 !important;

}

.filter-button-group li.checked a {

   color: #D3853D;

}

/*****

   Responsive: iPad
              *****/

@media screen and (max-width: 1024px) {

   .sub-header .sub-nav li a.btn-filter {
       font-size: 18px;
       padding: 4px 2px;
   }

   #mw-content-text, body {
       background: #f9f9f9;
   }

   .container {
       width: 100%;
       margin: 0;
       padding: 0;
   }

   .content.container {
       margin: 0;
   }

   .navbar-siren {
       box-shadow: 0 4px 0 black;
       background-color: #f9f9f9;
       z-index: 999;
   }

   .navbar-siren .container {
       padding: 0;
       margin: 0 0 0 0;
   }

   .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) {

   .navbar-siren .container {
       text-align: center;
   }

   .navbar-siren .navbar-right {
       display: inline-block;
       float: none !important;
       margin: auto;
   }

   .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) {

   .navbar-siren .container {
       background-image: url("");
       background-size: auto 80%;
       background-position: left center;
       background-repeat: no-repeat;
       width: 100% !important;
   }

   .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;
   }

}