bmstu-mt-wp/themes/ribbon/styles/style.css

418 lines
7.5 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower
Copyright © 20102012 Vadim Makeev, http://pepelsbey.net/
Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License
*/
@import url(fonts.css);
@import url(reset.css);
BODY {
font:25px/1.8 'PT Sans', sans-serif;
counter-reset:paging;
}
/* Slide
---------------------------------------- */
.slide:after {
counter-increment:paging;
content:counter(paging, decimal-leading-zero);
}
.slide section {
padding:80px 120px 0;
width:784px;
height:560px;
background:#FFF;
color:#000;
}
.slide section:before {
position:absolute;
top:0;
right:120px;
width:40px;
height:120px;
background:url(../images/ribbon.svg) no-repeat;
content:'';
}
/* Header */
.slide header {
margin:0 0 58px;
color:#666;
font:bold 40px/1.13 'PT Sans Narrow', sans-serif;
}
/* Elements */
.slide p {
margin:0 0 45px;
}
.slide p.note {
color:#888;
}
.slide a {
border-bottom:0.1em solid;
color:#0174A7;
text-decoration:none;
}
.slide a[target=_blank] {
margin-right:22px;
}
.slide a[target=_blank]:after {
position:absolute;
margin-left:7px;
font-family:'Target Blank';
content:'\005E';
}
.slide b,
.slide strong {
font-weight:bold;
}
.slide i,
.slide em {
font-style:italic;
}
.slide kbd,
.slide code {
padding:3px 8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#FAFAA2;
color:#000;
-webkit-tab-size:4;
-moz-tab-size:4;
-o-tab-size:4;
tab-size:4;
font-family:'PT Mono', monospace;
}
/* Quote */
.slide blockquote {
font-style:italic;
}
.slide blockquote:before {
position:absolute;
margin:-15px 0 0 -80px;
color:#CCC;
font:200px/1 'PT Sans', sans-serif;
content:'\201C'; /* ldquo */
}
/* Lists */
.slide ol,
.slide ul {
margin:0 0 45px;
counter-reset:list;
}
.slide ul ul,
.slide ol ul,
.slide ol ol,
.slide ul ol {
margin:0 0 0 38px;
}
.slide ol > li:before,
.slide ul > li:before {
position:absolute;
margin-left:-120px;
width:100px;
color:#BBB;
text-align:right;
}
.slide ul > li:before {
content:'\2022'; /* bull */
line-height:1.1;
font-size:40px;
}
.slide ol > li:before {
counter-increment:list;
content:counter(list)'.';
}
/* Code */
.slide pre {
margin:0 0 45px;
counter-reset:code;
white-space:normal;
}
.slide pre code {
display:block;
padding:0;
background:none;
white-space:pre;
}
.slide pre code:before {
position:absolute;
margin:0 0 0 -120px;
width:110px;
color:#BBB;
text-align:right;
counter-increment:code;
content:counter(code, decimal-leading-zero)'.';
}
.slide pre mark {
padding:3px 8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#FAFAA2;
color:#000;
font-style:normal;
}
.slide pre .important {
background:#C00;
color:#FFF;
font-weight:normal;
}
.slide pre .comment {
padding:0;
background:none;
color:#888;
}
/* Cover */
.slide.cover section {
background:#000;
overflow:hidden;
}
.slide.cover section:before {
display:none;
}
.slide.cover img,
.slide.cover svg,
.slide.cover video,
.slide.cover object {
position:absolute;
top:0;
left:50%;
z-index:-1;
height:100%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
}
.slide.cover.w img,
.slide.cover.w svg,
.slide.cover.w video,
.slide.cover.w object {
top:50%;
left:0;
width:100%;
height:auto;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
/* Shout */
.slide.shout section:before {
display:none;
}
.slide.shout h2 {
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
line-height:1;
font-size:150px;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
.slide.shout h2 a[target=_blank] {
margin:0;
}
.slide.shout h2 a[target=_blank]:after {
content:'';
}
/* Middle */
.middle {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
/* List
---------------------------------------- */
.list {
float:left;
padding:80px 0 80px 100px;
background:#585A5E url(../images/linen.png);
}
/* Caption */
.list .caption {
color:#3C3D40;
text-shadow:0 1px 1px #8D8E90;
}
.list .caption h1 {
font:bold 50px/1 'PT Sans Narrow', sans-serif;
}
.list .caption a {
color:#4B86C2;
text-shadow:0 -1px 1px #1F3F60;
text-decoration:none;
}
.list .caption a:hover {
color:#5ca4ed;
}
/* Slide */
.list .slide {
position:relative;
float:left;
margin:0 50px 0 0;
padding:80px 0 0;
}
.list .slide:after {
position:absolute;
bottom:-45px;
left:60px;
color:#3C3D40;
text-shadow:0 1px 1px #8D8E90;
line-height:1;
font-weight:bold;
font-size:25px;
}
.list .slide:target:after {
text-shadow:0 -1px 1px #1F3F60;
color:#4B86C2;
}
.list .slide > div {
position:relative;
overflow:hidden;
width:512px;
height:320px;
box-shadow:0 0 50px #3C3D40;
border-radius:1px;
background:rgba(0, 0, 0, 0.3);
}
.list .slide > div:hover {
box-shadow:
0 0 0 10px rgba(60, 61, 64, 0.6),
0 0 50px #3C3D40;
}
.list .slide:target > div {
box-shadow:
0 0 0 1px #305F8D,
0 0 0 10px #3C7CBD,
0 0 50px #3C3D40;
}
.list .slide section {
-webkit-transform-origin:0 0;
-webkit-transform:scale(0.5);
-moz-transform-origin:0 0;
-moz-transform:scale(0.5);
-ms-transform-origin:0 0;
-ms-transform:scale(0.5);
-o-transform-origin:0 0;
-o-transform:scale(0.5);
transform-origin:0 0;
transform:scale(0.5);
}
.list .slide section:after {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
content:'';
}
/* Small */
@media all and (max-width:1274px) {
.list .slide:after {
left:30px;
}
.list .slide > div {
width:256px;
height:160px;
}
.list .slide section {
-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-ms-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);
}
}
/* Full
---------------------------------------- */
.full {
position:absolute;
top:50%;
left:50%;
overflow:hidden;
margin:-320px 0 0 -512px;
width:1024px;
height:640px;
background:#000;
}
.full .caption {
display:none;
}
.full .slide {
position:absolute;
visibility:hidden;
}
.full .slide:target {
visibility:visible;
}
.full .slide:after {
position:absolute;
bottom:85px;
left:120px;
color:#BBB;
line-height:1;
}
.full .slide section {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
.full .slide.cover {
z-index:1;
}
.full .slide.cover:after,
.full .slide.shout:after {
content:'';
}
/* Progress */
.full .progress {
position:absolute;
right:118px;
bottom:49px;
left:118px;
border-radius:7px;
border:2px solid rgba(255, 255, 255, 0.2);
}
.full .progress DIV {
width:0;
height:10px;
border-radius:5px;
background:rgba(177, 177, 177, 0.4);
-webkit-transition:width 0.2s linear;
-moz-transition:width 0.2s linear;
-ms-transition:width 0.2s linear;
-o-transition:width 0.2s linear;
transition:width 0.2s linear;
}
.full .progress-off {
z-index:1;
}