From 07321e9a89550cb65695596bbdbd24990b1345f5 Mon Sep 17 00:00:00 2001 From: Ruud Date: Wed, 26 Aug 2015 23:39:33 +0200 Subject: [PATCH] Make sure movie detail element are put in GPU layer --- couchpotato/core/media/movie/_base/static/movie.scss | 6 +++--- couchpotato/static/style/combined.min.css | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss index d84f29a..e5a95ce 100644 --- a/couchpotato/core/media/movie/_base/static/movie.scss +++ b/couchpotato/core/media/movie/_base/static/movie.scss @@ -530,7 +530,6 @@ $mass_edit_height: 44px; border-radius: $border_radius 0 0 $border_radius; opacity: 0; transform: rotateY(360deg); - backface-visibility: hidden; transition: opacity 300ms ease 400ms; z-index: 1; @@ -552,7 +551,6 @@ $mass_edit_height: 44px; width: 100%; height: 100%; opacity: 0; - backface-visibility: hidden; transition: opacity 300ms ease 200ms; &:before { @@ -589,6 +587,7 @@ $mass_edit_height: 44px; padding: 0 $padding; position: relative; z-index: 2; + transform: rotateY(360deg); @include media-phablet { padding: 0; @@ -750,6 +749,7 @@ $mass_edit_height: 44px; .section { padding: $padding; border-top: 1px solid rgba(0,0,0,.1); + transform: rotateY(360deg); @include media-phablet { padding: $padding/2; @@ -772,7 +772,7 @@ $mass_edit_height: 44px; .scroll_content { transition-delay: 200ms; - transform: translateX(0); + transform: translateX(0) rotateY(360deg); } } diff --git a/couchpotato/static/style/combined.min.css b/couchpotato/static/style/combined.min.css index 1cea997..7802379 100644 --- a/couchpotato/static/style/combined.min.css +++ b/couchpotato/static/style/combined.min.css @@ -233,15 +233,15 @@ @media (max-width:480px){.thumb_list .movie:hover .actions{display:none} .page.movie_details{left:0} } -.page.movie_details .overlay{position:fixed;top:0;bottom:0;right:0;left:132px;background:rgba(0,0,0,.6);border-radius:3px 0 0 3px;opacity:0;-webkit-transform:rotateY(360deg);transform:rotateY(360deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity 300ms ease 400ms;z-index:1} +.page.movie_details .overlay{position:fixed;top:0;bottom:0;right:0;left:132px;background:rgba(0,0,0,.6);border-radius:3px 0 0 3px;opacity:0;-webkit-transform:rotateY(360deg);transform:rotateY(360deg);transition:opacity 300ms ease 400ms;z-index:1} .page.movie_details .overlay .ripple{background:#FFF} -.page.movie_details .overlay .close{display:inline-block;text-align:center;font-size:60px;line-height:80px;color:#FFF;width:100%;height:100%;opacity:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity 300ms ease 200ms} +.page.movie_details .overlay .close{display:inline-block;text-align:center;font-size:60px;line-height:80px;color:#FFF;width:100%;height:100%;opacity:0;transition:opacity 300ms ease 200ms} .page.movie_details .overlay .close:before{display:block;width:44px} @media (max-width:480px){.page.movie_details .overlay{left:0;border-radius:0} .page.movie_details .overlay .close{width:44px} } .page.movie_details .scroll_content{position:fixed;z-index:2;top:0;bottom:0;right:0;left:176px;background:#FFF;border-radius:3px 0 0 3px;overflow-y:auto;-webkit-transform:translateX(100%) rotateY(360deg);transform:translateX(100%) rotateY(360deg);transition:-webkit-transform 350ms cubic-bezier(.9,0,.1,1);transition:transform 350ms cubic-bezier(.9,0,.1,1)} -.page.movie_details .scroll_content>.head{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;padding:0 20px;position:relative;z-index:2} +.page.movie_details .scroll_content>.head{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;padding:0 20px;position:relative;z-index:2;-webkit-transform:rotateY(360deg);transform:rotateY(360deg)} .page.movie_details .scroll_content>.head h1{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;margin:0;font-size:24px;color:rgba(0,0,0,.5);font-weight:300;max-width:100%} @media (max-width:480px){.page.movie_details .scroll_content{left:44px} .page.movie_details .scroll_content>.head{padding:0;line-height:1em} @@ -271,7 +271,7 @@ .page.movie_details .scroll_content>.head .buttons{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap} .page.movie_details .scroll_content>.head .buttons>a{display:inline-block;padding:0 10px;color:#ac0000;line-height:80px} .page.movie_details .scroll_content>.head .buttons>a:hover{color:#000} -.page.movie_details .scroll_content .section{padding:20px;border-top:1px solid rgba(0,0,0,.1)} +.page.movie_details .scroll_content .section{padding:20px;border-top:1px solid rgba(0,0,0,.1);-webkit-transform:rotateY(360deg);transform:rotateY(360deg)} @media (max-width:480px){.page.movie_details .scroll_content>.head .more_menu.title .wrapper{top:30px;max-width:240px} .page.movie_details .scroll_content>.head .buttons{margin:0} .page.movie_details .scroll_content>.head .buttons>a{line-height:22px} @@ -281,7 +281,7 @@ .page.movie_details.show{pointer-events:auto} .page.movie_details.show .overlay{opacity:1;transition-delay:0s} .page.movie_details.show .overlay .close{opacity:1;transition-delay:300ms} -.page.movie_details.show .scroll_content{transition-delay:200ms;-webkit-transform:translateX(0);transform:translateX(0)} +.page.movie_details.show .scroll_content{transition-delay:200ms;-webkit-transform:translateX(0) rotateY(360deg);transform:translateX(0) rotateY(360deg)} .page.movie_details .section_description .meta{text-align:right;font-style:italic;font-size:.9em} .page.movie_details .section_description .meta span{display:inline-block;margin:10px 10px 0} .page.movie_details .section_description .meta span:last-child{margin-right:0}