From b214f38d2c24a890ce36512a0c8bab965e27a508 Mon Sep 17 00:00:00 2001 From: JinweiClarkChao Date: Tue, 23 Sep 2014 22:34:14 +0800 Subject: README --- Back/Blocks/Flipboard/css/style.css | 465 ------------------------------------ 1 file changed, 465 deletions(-) delete mode 100644 Back/Blocks/Flipboard/css/style.css (limited to 'Back/Blocks/Flipboard/css/style.css') diff --git a/Back/Blocks/Flipboard/css/style.css b/Back/Blocks/Flipboard/css/style.css deleted file mode 100644 index 577dc52..0000000 --- a/Back/Blocks/Flipboard/css/style.css +++ /dev/null @@ -1,465 +0,0 @@ -.container { - position: relative; - margin: 0 auto; - -webkit-perspective: 2200px; - -moz-perspective: 2200px; - perspective: 2200px; -} -.page { - width: 50%; - height: 100%; - position: absolute; - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -webkit-transform-origin: left center; - -moz-transform-origin: left center; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.page > div { - display: block; - height: 100%; - width: 100%; - position: absolute; - background: #fff; - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; -} -.page .back { - -webkit-transform: rotateY(-180deg); - -moz-transform: rotateY(-180deg); -} -.page .outer{ - width: 100%; - height: 100%; - position: absolute; - top: 0px; - left: 0px; - overflow: hidden; - z-index: 999; -} -.page .content{ - height: 100%; - position: absolute; - top: 0px; - left: 0px; -} -.overlay, .flipoverlay{ - background-color: rgba(0, 0, 0, 0.6); - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - opacity: 0; -} -.flipoverlay{ - background-color: rgba(0, 0, 0, 0.2); -} -.page .content .inner{ - padding: 50px 15px 10px; - height: 100%; -} -.page h1{ - text-align: center; -} -.page.cover .front .content, -.page.cover-back .back .content{ - width: 100% !important; -} -.page.cover .front .content:after, -.page.cover-back .back .content:after{ - position: absolute; - top: 0px; - left: 0px; - width: 10px; - height: 100%; - content: ''; - background: -webkit-linear-gradient(left, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.01) 16%,rgba(0,0,0,0) 17%,rgba(0,0,0,0) 44%,rgba(0,0,0,0.08) 60%,rgba(0,0,0,0.09) 61%,rgba(0,0,0,0.35) 100%); - opacity: 0.2; -} -.page.cover-back .back .content:after{ - left: auto; - right: 0px; - background:-webkit-linear-gradient(left, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.1) 10%,rgba(0,0,0,1) 100%); -} -.page.cover .front .content .inner{ - padding-top: 20px; -} -.page.cover .front .content{ - background: #ddd url(../images/cover1.jpg) no-repeat center center; - background-size: cover; -} -.page.cover-back .back .content{ - background: #B0D5FF; -} -.page.cover h1{ - color: rgba(255,255,255,0.9); - text-align: right; - font-weight: 300; - font-size: 34px; - text-transform: uppercase; - margin: 0 0 0 60%; - line-height: 34px; - padding-bottom: 10px; - cursor: default; -} -.page.cover h1 span{ - display: block; - font-weight: 300; - font-size: 15px; -} -.page.cover .f-cover-story{ - color: rgba(255,255,255,0.9); - font-weight: 600; - font-size: 50px; - line-height: 46px; - position: absolute; - bottom: 60px; - left: 40px; - margin: 0; - text-transform: uppercase; - cursor: default; -} -a.f-ref{ - line-height: 20px; - font-size: 16px; - position: absolute; - top: 252px; - font-weight: 300; - text-indent: 1px; -} -.page.cover .f-cover-story span{ - display: block; - font-size: 26px; - line-height: 26px; -} -.page a, -.page.cover .f-cover-story span{ - color: #F86738; -} -.page a:hover{ - color: #000; -} -.f-cover-flip{ - background: #000; - color: #ddd; - position: absolute; - right: 0px; - padding: 5px 30px 5px 20px; - font-size: 30px; - text-transform: uppercase; - font-weight: 500; - top: 50%; - margin-top: -25px; - cursor: default; -} -.logo{ - width: 180px; - height: 180px; - position: absolute; - top: 20px; - left: 30px; - line-height: 428px; - color: white; - font-size: 59px; - font-weight: bold; - text-indent: -3px; - cursor: default; -} -.logo:before{ - position: absolute; - width: 49%; - height: 50%; - content: ''; - top: 0px; - left: 0px; - background: rgba(255,255,255,0.4); - box-shadow: 0 95px 0px rgba(255,255,255,0.6); -} -.logo:after{ - position: absolute; - width: 49%; - height: 50%; - content: ''; - top: 0px; - right: 0px; - background: rgba(255,255,255,0.6); - box-shadow: 0 95px 0px rgba(255,255,255,0.4); -} -.f-title{ - position: absolute; - top: 0px; - left: 0px; - height: 50px; - text-align:center; - width: 100%; -} -.f-title h2{ - line-height: 50px; - margin: 0; - font-weight: 300; - font-size: 28px; - color: #aaa; - float: left; - width: 33%; -} -.f-title a{ - width: 33%; - float: left; - text-align: right; - overflow: hidden; - height: 50px; - font-size: 12px; - line-height: 50px; - padding: 0px 15px; - color: #777; - font-style: italic; - font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif; -} -.f-title a:first-child{ - text-align: left; -} -.f-title a:hover{ - color: #000; -} -.box{ - border-top: 1px solid #f2f2f2; - float: left; - padding: 20px; - overflow: hidden; - position: relative; - background: #fff; - cursor: pointer; -} -.img-cont{ - height: 40%; - width: 100%; - background-repeat: no-repeat; - background-position: top center; - background-size: cover; -} -.img-1{ - background-image: url(../images/1.gif); -} -.img-2{ - background-image: url(../images/beijing.png); - height: 60%; -} -.img-3{ - background-image: url(../images/31.png); -} -.img-4{ - background-image: url(../images/32.png); -} -.img-5{ - background-image: url(../images/33.png); -} -.img-6{ - background-image: url(../images/34.png); -} -.img-7{ - background-image: url(../images/44.jpg); -} -.img-8{ - background-image: url(../images/41.jpg); -} -.img-9{ - background-image: url(../images/43.jpg); -} -.box h3{ - padding: 10px 0px; - margin: 0; - font-size: 18px; -} -.box h3 span{ - display: block; - font-size: 11px; - font-weight: 300; - text-transform: uppercase; - letter-spacing: 2px; - color: #74726f; -} -.box:after{ - position: absolute; - background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.73) 22%, rgba(255,255,255,0.73) 23%, rgba(255,255,255,1) 91%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(22%,rgba(255,255,255,0.73)), color-stop(23%,rgba(255,255,255,0.73)), color-stop(91%,rgba(255,255,255,1))); - background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%); - background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%); - background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%); - background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); - height: 50px; - bottom: 0px; - left: 0px; - right: 0px; - content: ''; -} -.box p{ - margin: 0; - padding: 0; - text-align: justify; - font-family: Georgia; - font-size: 13px; - line-height: 20px; - display: block; - position: relative; - padding-bottom: 30px; -} -.w-25{ width: 25%; } -.w-30{ width: 30%; } -.w-40{ width: 40%; } -.w-50{ width: 50%; } -.w-60{ width: 60%; } -.w-70{ width: 70%; } -.w-75{ width: 75%; } -.w-100{ width: 100%; } - -.h-25{ height: 25%; } -.h-30{ height: 30%; } -.h-40{ height: 40%; } -.h-50{ height: 50%; } -.h-60{ height: 60%; } -.h-70{ height: 70%; } -.h-75{ height: 75%; } -.h-100{ height: 100%; } - -.box-expanded.box-img-left .img-cont, -.box-img-left .img-cont{ - float: left; - width: 40%; - height: 100%; - margin-right: 2%; -} -.box-img-left:after{ - left: 42%; -} -.box-img-left p{ - margin-left: 42%; -} -.box-img-right .img-cont{ - float: right; - width: 40%; - height: 100%; - margin-left: 2%; -} -.box-img-right:after{ - right: 42%; -} -.box-img-right p{ - margin-right: 42%; -} -.title-top h3{ - padding-top: 0px; -} -.box-b-r{ - border-right: 1px solid #f2f2f2; -} -.box-b-l{ - border-left: 1px solid #f2f2f2; -} -.box-expanded{ - border: none; - padding: 50px; -} -.box-expanded .img-cont{ - box-shadow: 1px 1px 2px rgba(0,0,0,0.1); - float: left; - width: 50%; - height: 50%; - margin-right: 20px; - box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -} -.box.box-expanded h3{ - font-size: 50px; - line-height: 50px; - padding-top: 0px; -} -.box.box-expanded h3 span{ - font-size: 14px; -} -.box.box-expanded p{ - font-size: 20px; - line-height: 30px; -} -.box.box-expanded:after{ - background: transparent; -} -.box-expanded .box-close{ - position: absolute; - top: 0px; - right: 20px; - width: 80px; - height: 30px; - background: #000; - color: #fff; - font-weight: bold; - font-size: 16px; - text-align: center; - line-height: 30px; -} -@media screen and (max-width: 760px){ - .f-title a { - height: 30px; - line-height: 14px; - margin-top: 10px; - } - .f-title h2{ - font-size: 18px; - line-height: 18px; - margin-top: 5px; - } -} -@media screen and (max-width: 690px){ - .page .box{ - width: 100%; - height: 20%; - padding: 5px; - border: none; - border-top: 1px solid #ddd; - } - .page .box h3{ - font-size: 16px; - } - .page .box h3 span, - .page .box .img-cont, - .page .box p, - .page .box:after{ - display: none; - } - .box.box-expanded h3{ - font-size: 26px; - line-height: 30px; - padding-top: 15px; - clear: both; - } - .box.box-expanded p{ - font-size: 16px; - line-height: 22px; - } - .box-img-left p, - .box-img-right p{ - margin: 0; - } - .box.box-expanded h3 span{ - font-size: 12px; - } - body .box-expanded{ - padding: 40px 20px 20px; - } - body .box-expanded .img-cont{ - width: 100% !important; - height: 50% !important; - margin: 0; - } - .cover-elements{ - display: none; - } - -} \ No newline at end of file -- cgit v1.2.3