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

Revision as of 04:09, 15 September 2015 (view source) Happlex (Talk | contribs) ← Older edit		Revision as of 04:10, 15 September 2015 (view source) Happlex (Talk | contribs) Newer edit →
Line 148:		Line 148:
	user-select: none;		user-select: none;
	transform:rotate(0deg);		transform:rotate(0deg);
−	transform-origin: center center;	+	transform-origin: top left;
	transition: all 0.5s linear;		transition: all 0.5s linear;
	}		}
Line 154:		Line 154:
	article h2:hover::before {		article h2:hover::before {
	transform:rotate(405deg);		transform:rotate(405deg);
−	transform-origin: center center;	+	transform-origin: top left;
	}		}

---

Revision as of 04:10, 15 September 2015

1. mw-content-text {

   background-color: rgb(248, 250, 238);
   background-image: url("");

}

body {

   -webkit-font-smoothing: antialiased;

}

.navbar-siren {

   border: none;
   border-radius: 0;
   background-color: rgba(255, 255, 255, .95);
   box-shadow: 0 4px 0 #eb9745;

}

.navbar-siren .navbar-nav {

   display: table-row;

}

.navbar-siren .navbar-nav > li {

   transition: box-shadow 2s, background-color 0.25s;

   float: none;
   cursor: pointer;
   display: table-cell;
   vertical-align: middle;
   font-family: "Raleway Thin", sans-serif;
   font-size: 1.2em;
   box-shadow: 0 4px 0 #eb9745;
   /*border-bottom: 4px solid transparent;*/

}

.navbar-siren .navbar-nav > li.active {

   box-shadow: 0 4px 0 #D3853D;
   /*border-bottom: 4px solid #eb9745;*/

}

.navbar-siren .navbar-nav > li > a {

   transition: color 0.25s;
   color: #1e0501;

}

.navbar-siren .navbar-nav > li:hover > a {

   color: white;

}

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

}

.navbar-siren .navbar-nav li.dropdown .dropdown-menu {

   transition: visibility 0s, opacity 0.25s;
   display: block;
   opacity: 0;
   visibility: hidden;

}

.navbar-siren .navbar-nav li.dropdown:hover .dropdown-menu {

   opacity: 1;
   visibility: visible;

}

.navbar-siren .navbar-nav li.dropdown .dropdown-menu li > a {

   font-family: "Raleway Thin", sans-serif;
   font-size: 1.2em;
   padding: 1em;
   color: #fff;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a:hover {

   background-color: #eb9745;

}

.navbar-siren .navbar-nav li .dropdown-menu li:hover {

   /*box-shadow: 0 1px 6px rgba(120,120,120,.15);*/

}

.navbar-siren .navbar-nav li .dropdown-menu li > a::after {

   content: "";
   display: block;
   width: 0;
   height: 1px;
   transition: all 0.5s ease-out;
   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);

}

.navbar-siren .navbar-nav > li:hover {

   /*border-bottom: 4px solid #D3853D;*/
   box-shadow: 0 4px 0 #D3853D;

   transition: box-shadow 0.25s, background-color 0.25s;
   background-color: #D3853D;

}

.navbar-siren .navbar-nav > li > a:hover {

   background-color: transparent;
   color: white;

}

.content > article {

   opacity: .95;
   padding: 2em 5em;
   min-width: 640px;
   background-color: #fff;
   box-shadow: 0px 4px 6px rgba(75, 75, 75, 0.5);

}

article h2, article h3, article h4, article h5 {

   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-weight: bolder;
   color: #278A75;

}

article h2 {

   font-size: 24px;
   padding-left: 8px;
   border-bottom: 1px solid #eee;
   cursor: pointer;

}

article h2::before {

   content: "❖";
   padding-right: 8px;
   position: relative;
   display: inline-block;
   user-select: none;
   transform:rotate(0deg);
 transform-origin: top left;
   transition: all 0.5s linear;

}

article h2:hover::before {

   transform:rotate(405deg);
 transform-origin: top left;

}

article h3 {

   font-size: 18px;
   word-spacing: -2px;

}

article figure {

   padding: 1em 0;

}

article figure img {

   max-width: 100%;

}

article figure figcaption {

   text-align: center;
   font-family: 'Computer Modern Serif', serif;
   color: #278A75;
   padding: 0.5em;

}

article p, article blockquote {

   font-family: 'Computer Modern Serif', serif;
   font-size: 1em;

}

article a {

   color: #278A75;

}

article a:hover {

   color: #D3853D;
   text-decoration: none;

}

article > header.page-header {

   font-family: 'Dancing Script', cursive;
   /*font-family: "Georgia", serif;*/
   margin:0;
   border: none;

}

article > header.page-header h1 {

   font-weight: normal;
   font-size: 48px;
   margin: 0;

}

article > header h1>small {

   font-size: 24px;

}

.people {

   background-color: #fff;

}

.people .people-figure {

   border: 3px solid #fff;
   cursor: pointer;
   padding: 33.33% 0 0 0;
   margin: 0;
   position: relative;
   overflow: hidden;

}

.people .people-figure>p {

   padding: 1em;
   font-size: 1.2em;
   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;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure>p:hover {

   background-color: rgba(211, 133, 61, .5);
   color: #fff;
   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;
   padding: 1em;
   font-size: 1.2em;
   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: 1em;
   font-size: 1.2em;
   font-family: 'Dancing Script', cursive;
   font-weight: bold;
   background-color: transparent;
   position: absolute;
   height: 100%;
   top: 0;
   z-index: 101;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure .people-intro:hover {

   background-color: rgba(211, 133, 61, .5);
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}

.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;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;
   line-height: 28px;

}

.people .people-figure .people-intro:hover > p {

   color: white;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}