Difference between revisions of "Template:BNU-CHINA/CSS/main"
Line 144: | Line 144: | ||
content: "❖"; | content: "❖"; | ||
background-color: red; | background-color: red; | ||
− | + | line-height: 24px; | |
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; |
Revision as of 04:14, 15 September 2015
- 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: "❖"; background-color: red; line-height: 24px; 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;
}