themes/modern/css/screen.css in slideoff-0.2 vs themes/modern/css/screen.css in slideoff-0.3

- old
+ new

@@ -237,10 +237,19 @@ opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } +@keyframes blink { + 0% { + opacity: 1; } + 49% { + opacity: 1; } + 50% { + opacity: 0; } + 100% { + opacity: 0; } } body { font: 30px/2 'Open Sans', sans-serif; counter-reset: problem 0; } a { @@ -279,12 +288,12 @@ visibility: visible; background: #46413C; color: #FFF; text-align: center; -webkit-transform-origin: 50% 100%; + -moz-transform-origin: 50% 100%; transform-origin: 50% 100%; - -webkit-transform: rotate(45deg) translateY(-1em); transform: rotate(45deg) translateY(-1em); } .slide { position: relative; width: 1024px; @@ -360,11 +369,12 @@ line-height: 1; font-family: 'Inconsolata', monospace, sans-serif; } .slide kbd.inline, .slide code.inline, .slide samp.inline { padding: 2px 7px; } .slide blink { - -webkit-animation: blink 1.0s infinite; } + -webkit-animation: blink 1.0s infinite; + animation: blink 1.0s infinite; } .slide mark { padding-left: 5px; padding-right: 5px; color: #46413C; cursor: default; @@ -410,16 +420,16 @@ top: 0.75em; border-top: 2px solid #AAA5A0; color: #AAA5A0; padding-right: 20px; margin-right: 15px; } -.slide.cover figure, .slide.chapter figure, .slide.section figure { +.slide.cover figure, .slide.section figure { position: initial; max-height: initial; text-align: initial; vertical-align: initial; } - .slide.cover figure img, .slide.chapter figure img, .slide.section figure img { + .slide.cover figure img, .slide.section figure img { max-height: initial; } .slide figure { position: relative; max-height: 450px; text-align: right; @@ -571,11 +581,11 @@ .slide pre[data-lang]:after { content: attr(data-lang); } .slide table { left: 50%; position: relative; - -webkit-transform: translateX(-50%); + transform: translateX(-50%); margin: 0 0 28px; width: 100%; border-collapse: collapse; border-spacing: 0; } .slide table th, .slide table td { @@ -587,136 +597,143 @@ .slide table.striped tr:nth-child(even) { background: #f0efef; } .slide img, .slide iframe { position: absolute; left: 50%; - -webkit-transform: translateX(-50%); + transform: translateX(-50%); max-height: 580px; max-width: 850px; } .slide img.inline, .slide iframe.inline { position: initial; - -webkit-transform: none; } + transform: none; } .slide iframe { box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3); border: 1px solid #e6e6e6; width: 100%; height: 100%; } .slide iframe::-webkit-scrollbar { display: none; } -.slide.cover, .slide.chapter, .slide.section, .slide.shout, .slide.chapter, .slide.chapter-html, .slide.problem-solution, .slide.problem, .slide.solution { +.slide.cover, .slide.section, .slide.shout, .slide.chapter, .slide.chapter-html, .slide.problem-solution, .slide.problem, .slide.solution { z-index: 1; } - .slide.cover:after, .slide.chapter:after, .slide.section:after, .slide.shout:after, .slide.chapter:after, .slide.chapter-html:after, .slide.problem-solution:after, .slide.problem:after, .slide.solution:after { + .slide.cover:after, .slide.section:after, .slide.shout:after, .slide.chapter:after, .slide.chapter-html:after, .slide.problem-solution:after, .slide.problem:after, .slide.solution:after { content: ''; border: none; } - .slide.cover h1, .slide.chapter h1, .slide.section h1, .slide.shout h1, .slide.chapter h1, .slide.chapter-html h1, .slide.problem-solution h1, .slide.problem h1, .slide.solution h1 { + .slide.cover h1, .slide.section h1, .slide.shout h1, .slide.chapter h1, .slide.chapter-html h1, .slide.problem-solution h1, .slide.problem h1, .slide.solution h1 { display: none; } - .slide.cover h2, .slide.chapter h2, .slide.section h2, .slide.shout h2, .slide.chapter h2, .slide.chapter-html h2, .slide.problem-solution h2, .slide.problem h2, .slide.solution h2 { + .slide.cover h2, .slide.section h2, .slide.shout h2, .slide.chapter h2, .slide.chapter-html h2, .slide.problem-solution h2, .slide.problem h2, .slide.solution h2 { border: none; } - .slide.cover code, .slide.chapter code, .slide.section code, .slide.shout code, .slide.chapter code, .slide.chapter-html code, .slide.problem-solution code, .slide.problem code, .slide.solution code { + .slide.cover code, .slide.section code, .slide.shout code, .slide.chapter code, .slide.chapter-html code, .slide.problem-solution code, .slide.problem code, .slide.solution code { color: white; font-size: 0.8em; padding: 20px; background-color: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.33); text-shadow: 0 0 10px rgba(0, 0, 0, 0.33); } - .slide.cover footer, .slide.chapter footer, .slide.section footer, .slide.shout footer, .slide.chapter footer, .slide.chapter-html footer, .slide.problem-solution footer, .slide.problem footer, .slide.solution footer { + .slide.cover footer, .slide.section footer, .slide.shout footer, .slide.chapter footer, .slide.chapter-html footer, .slide.problem-solution footer, .slide.problem footer, .slide.solution footer { display: none; } -.slide.cover, .slide.chapter, .slide.section { +.slide.cover, .slide.section { background: #000; } - .slide.cover hgroup, .slide.chapter hgroup, .slide.section hgroup { + .slide.cover hgroup, .slide.section hgroup { background-color: transparent; } - .slide.cover > div, .slide.chapter > div, .slide.section > div { + .slide.cover > div, .slide.section > div { position: absolute; top: 0; left: 0; overflow: hidden; padding: 0; width: 1024px; height: 768px; } - .slide.cover .left-33, .slide.chapter .left-33, .slide.section .left-33 { + .slide.cover .border-info, .slide.section .border-info, .slide.cover .left-33, .slide.section .left-33, .slide.cover .right-33, .slide.section .right-33, .slide.cover .left-50, .slide.section .left-50, .slide.cover .right-50, .slide.section .right-50 { padding: 60px 0px; font: 38px/1 'Open Sans', sans-serif; font-weight: lighter; background-color: #46413C; color: white; width: 36%; height: 768px; position: relative; box-sizing: border-box; } - .slide.cover .left-33 h1, .slide.chapter .left-33 h1, .slide.section .left-33 h1 { + .slide.cover .border-info h1, .slide.section .border-info h1, .slide.cover .left-33 h1, .slide.section .left-33 h1, .slide.cover .right-33 h1, .slide.section .right-33 h1, .slide.cover .left-50 h1, .slide.section .left-50 h1, .slide.cover .right-50 h1, .slide.section .right-50 h1 { font: 500 46px/1 'Open Sans'; display: block; margin-bottom: 0.6em; } - .slide.cover .left-33 h2, .slide.chapter .left-33 h2, .slide.section .left-33 h2 { + .slide.cover .border-info h2, .slide.section .border-info h2, .slide.cover .left-33 h2, .slide.section .left-33 h2, .slide.cover .right-33 h2, .slide.section .right-33 h2, .slide.cover .left-50 h2, .slide.section .left-50 h2, .slide.cover .right-50 h2, .slide.section .right-50 h2 { font-size: 28px; margin-bottom: 0.6em; vertical-align: middle; line-height: 38px; } - .slide.cover .left-33 p, .slide.chapter .left-33 p, .slide.section .left-33 p { + .slide.cover .border-info p, .slide.section .border-info p, .slide.cover .left-33 p, .slide.section .left-33 p, .slide.cover .right-33 p, .slide.section .right-33 p, .slide.cover .left-50 p, .slide.section .left-50 p, .slide.cover .right-50 p, .slide.section .right-50 p { padding-left: 50px; padding-right: 50px; } - .slide.cover .left-33 .vcenter, .slide.chapter .left-33 .vcenter, .slide.section .left-33 .vcenter { + .slide.cover .border-info .vcenter, .slide.section .border-info .vcenter, .slide.cover .left-33 .vcenter, .slide.section .left-33 .vcenter, .slide.cover .right-33 .vcenter, .slide.section .right-33 .vcenter, .slide.cover .left-50 .vcenter, .slide.section .left-50 .vcenter, .slide.cover .right-50 .vcenter, .slide.section .right-50 .vcenter { height: 460px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; } - .slide.cover .left-33 ul, .slide.chapter .left-33 ul, .slide.section .left-33 ul { + .slide.cover .border-info ul, .slide.section .border-info ul, .slide.cover .left-33 ul, .slide.section .left-33 ul, .slide.cover .right-33 ul, .slide.section .right-33 ul, .slide.cover .left-50 ul, .slide.section .left-50 ul, .slide.cover .right-50 ul, .slide.section .right-50 ul { width: 100%; margin: 0; } - .slide.cover .left-33 ul li, .slide.chapter .left-33 ul li, .slide.section .left-33 ul li { + .slide.cover .border-info ul li, .slide.section .border-info ul li, .slide.cover .left-33 ul li, .slide.section .left-33 ul li, .slide.cover .right-33 ul li, .slide.section .right-33 ul li, .slide.cover .left-50 ul li, .slide.section .left-50 ul li, .slide.cover .right-50 ul li, .slide.section .right-50 ul li { padding: 0.5em 50px; } - .slide.cover img, .slide.chapter img, .slide.section img, .slide.cover svg, .slide.chapter svg, .slide.section svg, .slide.cover video, .slide.chapter video, .slide.section video, + .slide.cover .left-33, .slide.section .left-33 { + width: 36%; } + .slide.cover .right-33, .slide.section .right-33 { + width: 36%; + left: 64%; } + .slide.cover .left-50, .slide.section .left-50 { + width: 50%; } + .slide.cover .right-50, .slide.section .right-50 { + width: 50%; + left: 50%; } + .slide.cover img, .slide.section img, .slide.cover svg, .slide.section svg, .slide.cover video, .slide.section video, .slide.cover object, - .slide.chapter object, - .slide.section object, .slide.cover canvas, .slide.chapter canvas, .slide.section canvas, .slide.cover iframe, .slide.chapter iframe, .slide.section iframe { + .slide.section object, .slide.cover canvas, .slide.section canvas, .slide.cover iframe, .slide.section iframe { position: absolute; top: 0; left: 0; z-index: -1; } - .slide.cover iframe, .slide.chapter iframe, .slide.section iframe, .slide.cover img, .slide.chapter img, .slide.section img { + .slide.cover iframe, .slide.section iframe, .slide.cover img, .slide.section img { max-height: none; max-width: none; } - .slide.cover iframe, .slide.chapter iframe, .slide.section iframe { + .slide.cover iframe, .slide.section iframe { z-index: 0; } - .slide.cover.w img, .slide.chapter img, .slide.section img, .slide.cover.w svg, .slide.chapter svg, .slide.section svg, .slide.cover.w video, .slide.chapter video, .slide.section video, + .slide.cover.w img, .slide.cover.chapter img, .slide.chapter.section img, .slide.section img, .slide.cover.w svg, .slide.cover.chapter svg, .slide.chapter.section svg, .slide.section svg, .slide.cover.w video, .slide.cover.chapter video, .slide.chapter.section video, .slide.section video, .slide.cover.w object, - .slide.chapter object, - .slide.section object, .slide.cover.w canvas, .slide.chapter canvas, .slide.section canvas, .slide.cover.w iframe, .slide.chapter iframe, .slide.section iframe { + .slide.cover.chapter object, + .slide.chapter.section object, + .slide.section object, .slide.cover.w canvas, .slide.cover.chapter canvas, .slide.chapter.section canvas, .slide.section canvas, .slide.cover.w iframe, .slide.cover.chapter iframe, .slide.chapter.section iframe, .slide.section iframe { top: 50%; width: 100%; - -webkit-transform: translateY(-50%); transform: translateY(-50%); } - .slide.cover.w iframe, .slide.chapter iframe, .slide.section iframe, .slide.cover.w img, .slide.chapter img, .slide.section img { + .slide.cover.w iframe, .slide.cover.chapter iframe, .slide.chapter.section iframe, .slide.section iframe, .slide.cover.w img, .slide.cover.chapter img, .slide.chapter.section img, .slide.section img { max-height: none; max-width: none; } - .slide.cover.w iframe, .slide.chapter iframe, .slide.section iframe { + .slide.cover.w iframe, .slide.cover.chapter iframe, .slide.chapter.section iframe, .slide.section iframe { z-index: 0; } - .slide.cover.h img, .slide.h.chapter img, .slide.h.section img, .slide.cover.h svg, .slide.h.chapter svg, .slide.h.section svg, .slide.cover.h video, .slide.h.chapter video, .slide.h.section video, + .slide.cover.h img, .slide.h.section img, .slide.cover.h svg, .slide.h.section svg, .slide.cover.h video, .slide.h.section video, .slide.cover.h object, - .slide.h.chapter object, - .slide.h.section object, .slide.cover.h canvas, .slide.h.chapter canvas, .slide.h.section canvas, .slide.cover.h iframe, .slide.h.chapter iframe, .slide.h.section iframe { + .slide.h.section object, .slide.cover.h canvas, .slide.h.section canvas, .slide.cover.h iframe, .slide.h.section iframe { left: 50%; height: 100%; - -webkit-transform: translateX(-50%); transform: translateX(-50%); } - .slide.cover.h iframe, .slide.h.chapter iframe, .slide.h.section iframe, .slide.cover.h img, .slide.h.chapter img, .slide.h.section img { + .slide.cover.h iframe, .slide.h.section iframe, .slide.cover.h img, .slide.h.section img { max-height: none; max-width: none; } - .slide.cover.h iframe, .slide.h.chapter iframe, .slide.h.section iframe { + .slide.cover.h iframe, .slide.h.section iframe { z-index: 0; } - .slide.cover.w.h img, .slide.h.chapter img, .slide.h.section img, .slide.cover.w.h svg, .slide.h.chapter svg, .slide.h.section svg, .slide.cover.w.h video, .slide.h.chapter video, .slide.h.section video, + .slide.cover.w.h img, .slide.cover.h.chapter img, .slide.h.chapter.section img, .slide.h.section img, .slide.cover.w.h svg, .slide.cover.h.chapter svg, .slide.h.chapter.section svg, .slide.h.section svg, .slide.cover.w.h video, .slide.cover.h.chapter video, .slide.h.chapter.section video, .slide.h.section video, .slide.cover.w.h object, - .slide.h.chapter object, - .slide.h.section object, .slide.cover.w.h canvas, .slide.h.chapter canvas, .slide.h.section canvas, .slide.cover.w.h iframe, .slide.h.chapter iframe, .slide.h.section iframe { + .slide.cover.h.chapter object, + .slide.h.chapter.section object, + .slide.h.section object, .slide.cover.w.h canvas, .slide.cover.h.chapter canvas, .slide.h.chapter.section canvas, .slide.h.section canvas, .slide.cover.w.h iframe, .slide.cover.h.chapter iframe, .slide.h.chapter.section iframe, .slide.h.section iframe { top: 0; left: 0; - -webkit-transform: none; transform: none; } - .slide.cover.w.h iframe, .slide.h.chapter iframe, .slide.h.section iframe, .slide.cover.w.h img, .slide.h.chapter img, .slide.h.section img { + .slide.cover.w.h iframe, .slide.cover.h.chapter iframe, .slide.h.chapter.section iframe, .slide.h.section iframe, .slide.cover.w.h img, .slide.cover.h.chapter img, .slide.h.chapter.section img, .slide.h.section img { max-height: none; max-width: none; } - .slide.cover.w.h iframe, .slide.h.chapter iframe, .slide.h.section iframe { + .slide.cover.w.h iframe, .slide.cover.h.chapter iframe, .slide.h.chapter.section iframe, .slide.h.section iframe { z-index: 0; } .slide.noheader hgroup { display: none; } .slide.huge, .slide.shout, .slide.chapter, .slide.chapter-html, .slide.problem-solution, .slide.problem, .slide.solution { background: #46413C; } @@ -729,11 +746,10 @@ position: absolute; top: 50%; left: 128px; color: #FFF; font-size: 100px; - -webkit-transform: translateY(-50%); transform: translateY(-50%); border-bottom: none; z-index: 1; } .slide.shout h2 a, .slide.chapter h2 a, .slide.chapter-html h2 a, .slide.problem-solution h2 a, .slide.problem h2 a, .slide.solution h2 a { border-bottom: none; @@ -742,11 +758,10 @@ position: absolute; left: 0; right: 0; top: 50%; color: #FFF; - -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 100px; line-height: 1em; text-align: center; border: none; @@ -805,45 +820,37 @@ background-color: #46413C; } .slide.section h2 { background-color: rgba(70, 65, 60, 0.8); } .slide.img-place-middle img { margin-top: 50px; } -.slide .col2 { - position: relative; - -webkit-columns: 2; } - .slide .col2 li { +.slide .col, .slide .col2, .slide .col3, .slide .col4 { + position: relative; } + .slide .col li, .slide .col2 li, .slide .col3 li, .slide .col4 li { margin-left: 2em; text-indent: -2em; } + .slide .col img, .slide .col2 img, .slide .col3 img, .slide .col4 img { + position: initial; + transform: none; } +.slide .col2 { + -webkit-columns: 2; + -moz-columns: 2; } .slide .col3 { - position: relative; - -webkit-columns: 3; } - .slide .col3 li { - margin-left: 2em; - text-indent: -2em; } + -webkit-columns: 3; + -moz-columns: 3; } .slide .col4 { - position: relative; - -webkit-columns: 4; } - .slide .col4 li { - margin-left: 2em; - text-indent: -2em; } - .slide .col4 img { - position: initial; - -webkit-transform: none; } + -webkit-columns: 4; + -moz-columns: 4; } .slide .place, .slide.img-place-middle img { position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .slide .place.t.l, .slide.img-place-middle img.t.l, .slide .place.t.r, .slide.img-place-middle img.t.r, .slide .place.b.r, .slide.img-place-middle img.b.r, .slide .place.b.l, .slide.img-place-middle img.b.l { - -webkit-transform: none; transform: none; } .slide .place.t, .slide.img-place-middle img.t, .slide .place.b, .slide.img-place-middle img.b { - -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .slide .place.l, .slide.img-place-middle img.l, .slide .place.r, .slide.img-place-middle img.r { - -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .slide .place.t, .slide.img-place-middle img.t, .slide .place.t.l, .slide.img-place-middle img.t.l, .slide .place.t.r, .slide.img-place-middle img.t.r { top: 0; } .slide .place.r, .slide.img-place-middle img.r { right: 0; @@ -948,46 +955,46 @@ padding: 10px 96px 10px 78px; color: #46413C; line-height: 1; font-size: 17px; } -#slide-0-0 { +.slide.title { color: #46413C; font-size: 70px; font-weight: 700; font: 100 50px/1.4 'Open Sans',sans-serif; } - #slide-0-0 hgroup { + .slide.title hgroup { background-color: #46413C; } - #slide-0-0 dl { + .slide.title dl { font: 100 30px/1.6 'Open Sans', sans-serif; } - #slide-0-0 > div { + .slide.title > div { position: absolute; top: 0; left: 0; overflow: hidden; padding: 60px 96px 38px 78px; width: 850px; height: 670px; } - #slide-0-0 footer { + .slide.title footer { display: block; } - #slide-0-0 hgroup { + .slide.title hgroup { margin-bottom: 0; } - #slide-0-0 hgroup h1, #slide-0-0 hgroup h2 { + .slide.title hgroup h1, .slide.title hgroup h2 { text-transform: none; color: white; float: none; font: 300 59px/1.3 'PT Sans Narrow',sans-serif; visibility: visible; display: block; position: relative; left: 0; right: 0; } - #slide-0-0 p { + .slide.title p { font: 30px/1.6 'Open Sans', sans-serif; color: #46413C; margin: 30px 0; } - #slide-0-0 p.date { + .slide.title p.date { font-family: 'Open Sans', sans-serif; font-size: 16px; } @media screen { .list { @@ -1010,17 +1017,15 @@ display: inline-block; margin: -334px -462px 0 0; text-align: left; -webkit-transform-origin: 0 0; transform-origin: 0 0; - -webkit-transform: scale(0.5); transform: scale(0.5); } } @media screen and (max-width: 1180px) { .list .slide { top: 526px; margin: -526px -718px 0 0; - -webkit-transform: scale(0.25); transform: scale(0.25); } } @media screen { .list .slide:before { position: absolute; top: 0; @@ -1030,17 +1035,15 @@ height: 384px; box-shadow: 0 0 0 1px #DDD; content: ''; -webkit-transform-origin: 0 0; transform-origin: 0 0; - -webkit-transform: scale(2); transform: scale(2); } } @media screen and (max-width: 1180px) { .list .slide:before { width: 256px; height: 192px; - -webkit-transform: scale(4); transform: scale(4); } } @media screen { .list .slide:after { top: 100%; bottom: auto; @@ -1048,11 +1051,10 @@ @media screen and (max-width: 1180px) { .list .slide:after { width: 512px; -webkit-transform-origin: 0 0; transform-origin: 0 0; - -webkit-transform: scale(2); transform: scale(2); } } @media screen { .list .slide:hover:before { box-shadow: 0 0 0 1px #EEE, 0 0 0 12px rgba(255, 255, 255, 0.5); } .list .slide:target:before { @@ -1065,11 +1067,11 @@ right: 0; bottom: 0; left: 0; z-index: 2; content: ''; } - .list .slide.cover:after, .list .slide.chapter:after, .list .slide.section:after, .list .slide.shout:after, .list .slide.chapter:after, .list .slide.chapter-html:after, .list .slide.problem-solution:after, .list .slide.problem:after, .list .slide.solution:after { + .list .slide.cover:after, .list .slide.section:after, .list .slide.shout:after, .list .slide.chapter:after, .list .slide.chapter-html:after, .list .slide.problem-solution:after, .list .slide.problem:after, .list .slide.solution:after { content: attr(data-slide) "/" attr(data-slides); } .list .slide.disabled { opacity: 0.8; -webkit-filter: grayscale(100%); } .list .slide.disabled:before { @@ -1085,11 +1087,10 @@ line-height: 310px; font-size: 100px; color: #F5F5F5; background: rgba(255, 255, 255, 0.4); z-index: 1; - /* -webkit-transform: rotate(45deg); */ text-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5); text-transform: uppercase; } .full { position: absolute; @@ -1106,42 +1107,39 @@ height: 768px; } .full .slide { position: absolute; top: 0; left: 0; - margin-left: 150%; } + display: none; } .full .slide .next { visibility: hidden; } .full .slide .next.active { visibility: visible; } .full .slide:target { - margin: 0; } - .full .slide.shout.right h1, .full .slide.right.chapter h1, .full .slide.right.chapter-html h1, .full .slide.right.problem-solution h1, .full .slide.right.problem h1, .full .slide.right.solution h1, .full .slide.shout.right h2, .full .slide.right.chapter h2, .full .slide.right.chapter-html h2, .full .slide.right.problem-solution h2, .full .slide.right.problem h2, .full .slide.right.solution h2, .full .slide.shout.up h1, .full .slide.up.chapter h1, .full .slide.up.chapter-html h1, .full .slide.up.problem-solution h1, .full .slide.up.problem h1, .full .slide.up.solution h1, .full .slide.shout.up h2, .full .slide.up.chapter h2, .full .slide.up.chapter-html h2, .full .slide.up.problem-solution h2, .full .slide.up.problem h2, .full .slide.up.solution h2, .full .slide.shout.left h1, .full .slide.chapter h1, .full .slide.left.chapter-html h1, .full .slide.chapter-html.chapter h1, .full .slide.left.problem-solution h1, .full .slide.problem-solution.chapter h1, .full .slide.chapter.problem h1, .full .slide.chapter.solution h1, .full .slide.left.problem h1, .full .slide.left.solution h1, .full .slide.shout.left h2, .full .slide.chapter h2, .full .slide.left.chapter-html h2, .full .slide.chapter-html.chapter h2, .full .slide.left.problem-solution h2, .full .slide.problem-solution.chapter h2, .full .slide.chapter.problem h2, .full .slide.chapter.solution h2, .full .slide.left.problem h2, .full .slide.left.solution h2, .full .slide.shout.down h1, .full .slide.down.chapter h1, .full .slide.down.chapter-html h1, .full .slide.down.problem-solution h1, .full .slide.down.problem h1, .full .slide.down.solution h1, .full .slide.shout.down h2, .full .slide.down.chapter h2, .full .slide.down.chapter-html h2, .full .slide.down.problem-solution h2, .full .slide.down.problem h2, .full .slide.down.solution h2 { + display: block; } + .full .slide.shout.right h1, .full .slide.right.chapter h1, .full .slide.right.chapter-html h1, .full .slide.right.problem-solution h1, .full .slide.right.problem h1, .full .slide.right.solution h1, .full .slide.shout.right h2, .full .slide.right.chapter h2, .full .slide.right.chapter-html h2, .full .slide.right.problem-solution h2, .full .slide.right.problem h2, .full .slide.right.solution h2, .full .slide.shout.up h1, .full .slide.up.chapter h1, .full .slide.up.chapter-html h1, .full .slide.up.problem-solution h1, .full .slide.up.problem h1, .full .slide.up.solution h1, .full .slide.shout.up h2, .full .slide.up.chapter h2, .full .slide.up.chapter-html h2, .full .slide.up.problem-solution h2, .full .slide.up.problem h2, .full .slide.up.solution h2, .full .slide.shout.left h1, .full .slide.left.chapter h1, .full .slide.left.chapter-html h1, .full .slide.left.problem-solution h1, .full .slide.left.problem h1, .full .slide.left.solution h1, .full .slide.shout.left h2, .full .slide.left.chapter h2, .full .slide.left.chapter-html h2, .full .slide.left.problem-solution h2, .full .slide.left.problem h2, .full .slide.left.solution h2, .full .slide.shout.down h1, .full .slide.down.chapter h1, .full .slide.down.chapter-html h1, .full .slide.down.problem-solution h1, .full .slide.down.problem h1, .full .slide.down.solution h1, .full .slide.shout.down h2, .full .slide.down.chapter h2, .full .slide.down.chapter-html h2, .full .slide.down.problem-solution h2, .full .slide.down.problem h2, .full .slide.down.solution h2 { opacity: 0; - transition: all 0.7s ease-out; } - .full .slide.shout.right:target h2, .full .slide.right.chapter:target h2, .full .slide.right.chapter-html:target h2, .full .slide.right.problem-solution:target h2, .full .slide.right.problem:target h2, .full .slide.right.solution:target h2, .full .slide.shout.up:target h2, .full .slide.up.chapter:target h2, .full .slide.up.chapter-html:target h2, .full .slide.up.problem-solution:target h2, .full .slide.up.problem:target h2, .full .slide.up.solution:target h2, .full .slide.shout.left:target h2, .full .slide.chapter:target h2, .full .slide.left.chapter-html:target h2, .full .slide.chapter-html.chapter:target h2, .full .slide.left.problem-solution:target h2, .full .slide.problem-solution.chapter:target h2, .full .slide.chapter.problem:target h2, .full .slide.chapter.solution:target h2, .full .slide.left.problem:target h2, .full .slide.left.solution:target h2, .full .slide.shout.down:target h2, .full .slide.down.chapter:target h2, .full .slide.down.chapter-html:target h2, .full .slide.down.problem-solution:target h2, .full .slide.down.problem:target h2, .full .slide.down.solution:target h2 { + transition: all 0.5s ease-out; } + .full .slide.shout.right:target h2, .full .slide.right.chapter:target h2, .full .slide.right.chapter-html:target h2, .full .slide.right.problem-solution:target h2, .full .slide.right.problem:target h2, .full .slide.right.solution:target h2, .full .slide.shout.up:target h2, .full .slide.up.chapter:target h2, .full .slide.up.chapter-html:target h2, .full .slide.up.problem-solution:target h2, .full .slide.up.problem:target h2, .full .slide.up.solution:target h2, .full .slide.shout.left:target h2, .full .slide.left.chapter:target h2, .full .slide.left.chapter-html:target h2, .full .slide.left.problem-solution:target h2, .full .slide.left.problem:target h2, .full .slide.left.solution:target h2, .full .slide.shout.down:target h2, .full .slide.down.chapter:target h2, .full .slide.down.chapter-html:target h2, .full .slide.down.problem-solution:target h2, .full .slide.down.problem:target h2, .full .slide.down.solution:target h2 { opacity: 1; - -webkit-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); } .full .slide.shout.right h2, .full .slide.right.chapter h2, .full .slide.right.chapter-html h2, .full .slide.right.problem-solution h2, .full .slide.right.problem h2, .full .slide.right.solution h2 { - -webkit-transform: translateX(-100%) translateY(-50%); transform: translateX(-100%) translateY(-50%); } - .full .slide.shout.left h2, .full .slide.chapter h2, .full .slide.left.chapter-html h2, .full .slide.chapter-html.chapter h2, .full .slide.left.problem-solution h2, .full .slide.problem-solution.chapter h2, .full .slide.chapter.problem h2, .full .slide.chapter.solution h2, .full .slide.left.problem h2, .full .slide.left.solution h2 { - -webkit-transform: translateX(100%) translateY(-50%); + .full .slide.shout.left h2, .full .slide.left.chapter h2, .full .slide.left.chapter-html h2, .full .slide.left.problem-solution h2, .full .slide.left.problem h2, .full .slide.left.solution h2 { transform: translateX(100%) translateY(-50%); } .full .slide.shout.up h2, .full .slide.up.chapter h2, .full .slide.up.chapter-html h2, .full .slide.up.problem-solution h2, .full .slide.up.problem h2, .full .slide.up.solution h2 { - -webkit-transform: translateX(0) translateY(100%); transform: translateX(0) translateY(100%); } .full .slide.shout.down h2, .full .slide.down.chapter h2, .full .slide.down.chapter-html h2, .full .slide.down.problem-solution h2, .full .slide.down.problem h2, .full .slide.down.solution h2 { - -webkit-transform: translateX(0) translateY(-100%); transform: translateX(0) translateY(-100%); } .full .inactive, .full .current { - -webkit-transition: opacity 0.5s ease-in-out 0.0s; } + -webkit-transition: opacity 0.5s ease-in-out 0.0s; + -moz-transition: opacity 0.5s ease-in-out 0.0s; } .full .inactive { opacity: 0; } .full .visited { - -webkit-transition: opacity 0.5s ease-in-out 0.3s; } + -webkit-transition: opacity 0.5s ease-in-out 0.3s; + -moz-transition: opacity 0.5s ease-in-out 0.3s; } .full .visited .hide-visited { display: none; } .full .visited.hide-visited { display: none; } .full .hover li.visited { @@ -1149,11 +1147,12 @@ .full li.current { opacity: 1; } .full li.current:before { content: '\2023\00A0\00A0\2009'; } .full .border-separated li { - -webkit-transition: all 0.5s; } + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; } .full .border-separated li.inactive { margin-left: -400px; } .full .border-separated li.current, .full .border-separated li.visited { margin-left: 0; } .full .progress { @@ -1168,16 +1167,14 @@ bottom: 0; width: 0; height: 8px; padding-left: -10px; background: url(../images/progress-grayDark.svg) 100% 0 no-repeat; - -webkit-background-clip: content-box; background-clip: content-box; transition: width 0.3s linear; } .full .box.shadow { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25); border-radius: 3px; } .full .disabled { display: none; } } -@page { - margin: 0; - size: 1024px 768px; } + +/*# sourceMappingURL=screen.css.map */