chef 3745 Posted July 26, 2017 Share Posted July 26, 2017 (edited) Some of these might be annoying some are not! I don't pretend to be an expert here, but I do like some of the subtle effects added through CSS. Let's have all the user login images grey scale, and when a cursor hovers over them, use a shine animation to show them in color! #loginPage .card{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } #loginPage .card:hover{ -webkit-filter: grayscale(0); filter: grayscale(0); } /*cancels the pulse in animation attached to cardImageContainers HACK */ #loginPage .cardImageContainer{ animation-name:pulsein; animation-duration:4s; } .cardImageContainer.coveredImage:after { content: ""; position: absolute; top: 0px; left: 0px; width: 0%; height: 100%; background-color: rgba(255,255,255,0.4); -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .cardImageContainer.coveredImage:hover:after { width: 120%; background-color: rgba(255,255,255,0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } Let's change the logo on the login page and fade it in: #loginPage .header:before{ content: "YOUR_NEW_HEADER" !important; visibility: visible !important; font-size: 350%; font-weight:lighter; background-color: rgba(0,0,0,0.5); border-left: 3px solid rgba(82,181,75,225); padding-left:10px; animation-name: fadein; animation-duration: 2s; } Fade in: @keyframes fadein { from { visibility:visible; opacity: 0;} to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } Although Luke uses "Lazy load' on the details screen to make things look smooth, we can add these 'fadein' animation to help it along, use the 'fadein' effects from the post above: .cardText{ animation-duration: 4s; animation-name:fadein; } .textlink{ animation-duration: 3s; animation-name:fadein; } .itemGenres{ animation-duration: 4s; animation-name:fadein; } .itemMiscInfo{ animation-duration: 2s; animation-name:fadein; } .itemName{ animation-duration: 2.5s; animation-name:omgwtfbbq; } .tagline{ animation-duration: 4s; animation-name:fadein; } .mediaInfoIcons{ animation-duration: 5s; animation-name:fadein; } You can make the primary image of your media items grow inside their container when you cursor over them: This needs some work (it's not going to work on all browsers) but has a nice effect. Whats cool about this one is that when you use CoverArt Plugin, the image grows to the size of the border of the treated cover. .cardImageContainer:hover{ animation-duration: 0.5s; animation-name:pulseIn; } @keyframes pulseIn { from { transform: scale3d(1, 1, 1); } to { transform: scale3d(1.15, 1.15, 1.15); } } Let's make the 'played indicator' on your movies just a little bit transparent, and fade it in after all the primary images have loaded... Cool!: .playedIndicator{ opacity:0.8; animation-duration: 7s; animation-name:fadein; } Alright! that was fun! Edited July 26, 2017 by chef 4 Link to comment Share on other sites More sharing options...
chef 3745 Posted July 26, 2017 Author Share Posted July 26, 2017 This one is really neat... if you like over the top animations! It starts by making all your login user images black and white, and when you hover over them, they spin 360 degrees and become in color #loginPage .card{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } #loginPage .card:hover{ -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; -webkit-filter: grayscale(0); filter: grayscale(0); position: relative; } 2 Link to comment Share on other sites More sharing options...
chef 3745 Posted July 26, 2017 Author Share Posted July 26, 2017 Let's make the primary image grow in its container, have a quick shine across it on mouse over! I like this one the best: .cardImageContainer.coveredImage:after { content: ""; position: absolute; top: 0px; left: 0px; width: 0%; height: 100%; background-color: rgba(255,255,255,0.4); -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .cardImageContainer.coveredImage:hover:after { width: 120%; background-color: rgba(255,255,255,0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .cardImageContainer.coveredImage:hover{ animation-duration: 0.5s; animation-name:pulseIn; } Link to comment Share on other sites More sharing options...
chef 3745 Posted July 26, 2017 Author Share Posted July 26, 2017 (edited) This is my favorite so far! If you use the above-mentioned shine effect on your primary images, the login page will also have the shine and 'grow effect'. However, the 'grow effect' doesn't want to 'stick' on the login page, making it quickly jump back to its original size. This looks hacky... In order to fix this, we can add the following, and with the code mentioned above, the login Page images end up with a really nice 'grey-scale' image which, when a cursor runs across it, uses the shine animation revealing the image in color! Let's add grey scale login page images which change to color with a shine animation when a cursor hovers over it. #loginPage .card{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } #loginPage .card:hover{ -webkit-filter: grayscale(0); filter: grayscale(0); } /*cancels the pulse in animation attached to cardImageContainers HACK */ #loginPage .cardImageContainer{ animation-name:pulsein; animation-duration:4s; } .cardImageContainer.coveredImage:after { content: ""; position: absolute; top: 0px; left: 0px; width: 0%; height: 100%; background-color: rgba(255,255,255,0.4); -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .cardImageContainer.coveredImage:hover:after { width: 120%; background-color: rgba(255,255,255,0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } Edited July 26, 2017 by chef 1 Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted July 26, 2017 Share Posted July 26, 2017 somebody has too much time on their hands 2 Link to comment Share on other sites More sharing options...
chef 3745 Posted July 26, 2017 Author Share Posted July 26, 2017 somebody has too much time on their hands Just wait for my theatre skin to be finished 1 Link to comment Share on other sites More sharing options...
Smaky 131 Posted August 3, 2017 Share Posted August 3, 2017 Based on these scripts I modified them to provide a highlight while hovering over cards and episodes. A bit subtle, however I believe it looks elegant. I added the listitemImage to allow for the same effect on episodes. #loginPage .card{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } #loginPage .card:hover{ -webkit-filter: grayscale(0); filter: grayscale(0); } /*cancels the pulse in animation attached to cardImageContainers HACK */ #loginPage .cardImageContainer{ animation-name:pulsein; animation-duration:4s; } .cardImageContainer:hover { -webkit-filter: brightness(120%) grayscale(20%) contrast(80%); filter: brightness(120%) grayscale(20%) contrast(80%); } .cardImageContainer:hover:after { -webkit-filter: brightness(0) grayscale(0) contrast(0); filter: brightness(0) grayscale(0) contrast(0); } .listItemImage:hover { -webkit-filter: brightness(120%) grayscale(20%) contrast(80%); filter: brightness(120%) grayscale(20%) contrast(80%); } .listItemImage:hover:after { -webkit-filter: brightness(0) grayscale(0) contrast(0); filter: brightness(0) grayscale(0) contrast(0); } 2 Link to comment Share on other sites More sharing options...
Luke 36999 Posted August 3, 2017 Share Posted August 3, 2017 well done ! Link to comment Share on other sites More sharing options...
Smaky 131 Posted August 3, 2017 Share Posted August 3, 2017 adding these to the previous script provides a similar effect on the Live TV guide: .guide-channelHeaderCell.itemAction:hover { -webkit-filter: brightness(120%) grayscale(20%) contrast(80%); filter: brightness(120%) grayscale(20%) contrast(80%); } .guide-channelHeaderCell.itemAction:hover:after { -webkit-filter: brightness(0) grayscale(0) contrast(0); filter: brightness(0) grayscale(0) contrast(0); } .programCellInner:hover { -webkit-filter: brightness(120%) grayscale(20%) contrast(80%); filter: brightness(120%) grayscale(20%) contrast(80%); } .programCellInner:hover:after { -webkit-filter: brightness(0) grayscale(0) contrast(0); filter: brightness(0) grayscale(0) contrast(0); } Link to comment Share on other sites More sharing options...
chef 3745 Posted August 3, 2017 Author Share Posted August 3, 2017 Based on these scripts I modified them to provide a highlight while hovering over cards and episodes. A bit subtle, however I believe it looks elegant. I added the listitemImage to allow for the same effect on episodes. #loginPage .card{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } #loginPage .card:hover{ -webkit-filter: grayscale(0); filter: grayscale(0); } /*cancels the pulse in animation attached to cardImageContainers HACK */ #loginPage .cardImageContainer{ animation-name:pulsein; animation-duration:4s; } .cardImageContainer:hover { -webkit-filter: brightness(120%) grayscale(20%) contrast(80%); filter: brightness(120%) grayscale(20%) contrast(80%); } .cardImageContainer:hover:after { -webkit-filter: brightness(0) grayscale(0) contrast(0); filter: brightness(0) grayscale(0) contrast(0); } .listItemImage:hover { -webkit-filter: brightness(120%) grayscale(20%) contrast(80%); filter: brightness(120%) grayscale(20%) contrast(80%); } .listItemImage:hover:after { -webkit-filter: brightness(0) grayscale(0) contrast(0); filter: brightness(0) grayscale(0) contrast(0); } This one is great! thanks for sharing it. Adding the brightness during the shiny animation is a nice touch! Link to comment Share on other sites More sharing options...
daedalus 430 Posted March 9, 2020 Share Posted March 9, 2020 #loginPage .card{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } #loginPage .card:hover{ -webkit-filter: grayscale(0); filter: grayscale(0); } /*cancels the pulse in animation attached to cardImageContainers HACK */ #loginPage .cardImageContainer{ animation-name:pulsein; animation-duration:4s; } seems not to work anymore, could someone please update this? Link to comment Share on other sites More sharing options...
chef 3745 Posted March 9, 2020 Author Share Posted March 9, 2020 (edited) seems not to work anymore, could someone please update this?The login page doesn't have the 'loginPage' ID anymore. I have been able to target the page with JavaScript, and I also wrote a plugin which adds custom JavaScript to emby, and monitors the file. So if an update removed the custom scripts the plugin puts it back. But inorder to customize the cards on the login it was the only way. Edited March 9, 2020 by chef Link to comment Share on other sites More sharing options...
daedalus 430 Posted March 9, 2020 Share Posted March 9, 2020 oh ok these got removed, that explains i also ran into problems while i tried to update some other old css snippets, with my poor understanding of css seems to get harder and harder to customize emby to our liking Link to comment Share on other sites More sharing options...
chef 3745 Posted March 9, 2020 Author Share Posted March 9, 2020 You could add the id back to the login page html file. Then all your css would work again Link to comment Share on other sites More sharing options...
daedalus 430 Posted March 9, 2020 Share Posted March 9, 2020 what then had to be redone on every update Link to comment Share on other sites More sharing options...
chef 3745 Posted March 9, 2020 Author Share Posted March 9, 2020 what then had to be redone on every update Yes, I am working on that plugin which allows for styles to be set, and items to be targeted in JavaScript without edits being removed on update. It's working quite well for me. But, it's needs some more work to allow for the JavaScript file to be updated and loaded independently from the plugin. The plugin page will have a textbox much like the custom css page that will allow JavaScript to be saved and side loaded. It's quite the undertaking. But it's not css. Link to comment Share on other sites More sharing options...
PrincessClevage 173 Posted March 10, 2020 Share Posted March 10, 2020 Will this plugin work with ET? Link to comment Share on other sites More sharing options...
chef 3745 Posted March 10, 2020 Author Share Posted March 10, 2020 Will this plugin work with ET? Hi Princess! No, it's just for the web client. But, word on the street is the theater is about to have a big overhaul in it's UI. Which is very exciting! Link to comment Share on other sites More sharing options...
PrincessClevage 173 Posted March 10, 2020 Share Posted March 10, 2020 Nice, probably due for it Link to comment Share on other sites More sharing options...
daedalus 430 Posted March 11, 2020 Share Posted March 11, 2020 But, word on the street is the theater is about to have a big overhaul in it's UI. Which is very exciting! i won't believe it until it's here and good on the first transition we also were very excited and it leads us to what we have now Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now