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

431 lines
7.7 KiB
CSS
Raw Normal View History

/*
Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower
Copyright © 20102011 Vadim Makeev, http://pepelsbey.net/
Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License
*/
2011-07-12 15:08:29 +04:00
@import url(fonts.css);
@import url(reset.css);
2011-07-12 15:08:29 +04:00
BODY {
font:25px/1.8 'PT Sans', sans-serif;
counter-reset:paging;
2011-07-12 15:08:29 +04:00
}
/* Slide
---------------------------------------- */
.slide:after {
counter-increment:paging;
content:counter(paging, decimal-leading-zero);
2011-07-12 15:08:29 +04:00
}
.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;
2011-11-29 13:31:53 +04:00
background:url(../images/ribbon.svg) no-repeat;
content:'';
2011-07-12 15:08:29 +04:00
}
/* Header */
.slide header {
2011-07-12 15:08:29 +04:00
margin:0 0 58px;
color:#666;
font:bold 40px/1.13 'PT Sans Narrow', sans-serif;
}
/* Elements */
.slide p {
2011-07-12 15:08:29 +04:00
margin:0 0 45px;
}
.slide p.note {
color:#888;
}
.slide a {
2011-07-12 15:08:29 +04:00
border-bottom:0.1em solid;
color:#0174A7;
text-decoration:none;
}
.slide a[target=_blank] {
2011-07-12 15:08:29 +04:00
margin-right:22px;
}
.slide a[target=_blank]:after {
2011-07-12 15:08:29 +04:00
position:absolute;
margin-left:7px;
font-family:'Target Blank';
content:'\005E';
}
.slide b,
.slide strong {
2011-07-12 15:08:29 +04:00
font-weight:bold;
}
.slide i,
.slide em {
2011-07-12 15:08:29 +04:00
font-style:italic;
}
.slide kbd,
.slide code {
2011-07-12 15:08:29 +04:00
padding:3px 8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#FAFAA2;
color:#000;
2011-07-12 15:08:29 +04:00
-webkit-tab-size:4;
-moz-tab-size:4;
-o-tab-size:4;
tab-size:4;
2012-01-02 02:56:16 +04:00
font-family:'PT Mono', monospace;
2011-07-12 15:08:29 +04:00
}
/* Quote */
.slide blockquote {
2011-07-12 15:08:29 +04:00
font-style:italic;
}
.slide blockquote:before {
2011-07-12 15:08:29 +04:00
position:absolute;
margin:-15px 0 0 -80px;
color:#CCC;
font:200px/1 'PT Sans', sans-serif;
content:'\201C'; /* ldquo */
}
/* Lists */
.slide ol,
.slide ul {
2011-07-12 15:08:29 +04:00
margin:0 0 45px;
counter-reset:list;
}
.slide ul ul,
.slide ol ul,
.slide ol ol,
.slide ul ol {
2011-07-12 15:08:29 +04:00
margin:0 0 0 38px;
}
.slide ol > li:before,
.slide ul > li:before {
2011-07-12 15:08:29 +04:00
position:absolute;
margin-left:-120px;
width:100px;
color:#BBB;
text-align:right;
}
.slide ul > li:before {
2011-07-12 15:08:29 +04:00
content:'\2022'; /* bull */
line-height:1.1;
font-size:40px;
}
.slide ol > li:before {
2011-07-12 15:08:29 +04:00
counter-increment:list;
content:counter(list)'.';
}
/* Code */
.slide pre {
2011-07-12 15:08:29 +04:00
margin:0 0 45px;
counter-reset:code;
white-space:normal;
}
.slide pre code {
2011-07-12 15:08:29 +04:00
display:block;
padding:0;
background:none;
white-space:pre;
}
.slide pre code:before {
2011-07-12 15:08:29 +04:00
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 {
2011-07-12 15:08:29 +04:00
padding:3px 8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#FAFAA2;
color:#000;
font-style:normal;
}
.slide pre .important {
2011-07-12 15:08:29 +04:00
background:#C00;
color:#FFF;
font-weight:normal;
}
.slide pre .comment {
padding:0;
background:none;
color:#888;
}
2011-07-12 15:08:29 +04:00
/* Cover */
.slide.cover section {
background:#000;
overflow:hidden;
2011-07-12 15:08:29 +04:00
}
.slide.cover section:before {
2011-11-29 13:31:53 +04:00
display:none;
2011-07-12 15:08:29 +04:00
}
.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%);
}
2011-07-12 15:08:29 +04:00
/* Shout */
.slide.shout section:before {
2011-07-17 23:12:53 +04:00
display:none;
2011-07-12 15:08:29 +04:00
}
.slide.shout h2 {
2011-07-17 23:12:53 +04:00
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%);
2011-07-17 23:12:53 +04:00
}
.slide.shout h2 a[target=_blank] {
2011-07-17 23:12:53 +04:00
margin:0;
2011-07-12 15:08:29 +04:00
}
.slide.shout h2 a[target=_blank]:after {
2011-07-17 23:12:53 +04:00
content:'';
2011-07-12 15:08:29 +04:00
}
/* 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 {
2011-11-29 13:31:53 +04:00
color:#4B86C2;
text-shadow:0 -1px 1px #1F3F60;
text-decoration:none;
}
.list .caption a:hover {
2011-11-29 13:31:53 +04:00
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;
2012-01-08 13:57:08 +04:00
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;
2011-07-16 20:19:37 +04:00
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:'';
}
2012-01-08 13:57:08 +04:00
/* Small */
@media all and (max-width:1274px) {
.list .slide:after {
left:30px;
}
.list .slide > div {
2012-01-08 13:57:08 +04:00
width:256px;
height:160px;
}
.list .slide section {
2012-01-08 13:57:08 +04:00
-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 {
2011-07-20 03:04:13 +04:00
position:absolute;
2011-07-17 23:12:53 +04:00
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:'';
}
/* Inner Navigation */
.full .inner > * {
opacity:0;
2012-01-08 13:57:48 +04:00
}
.full .inner > .active {
opacity:1;
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}
/* 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;
}