milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

move buttons to top right for custom scroll element

Browse source
This commit is contained in:
dkanada 2019-05-09 17:55:00 -07:00
parent b592abbeff
commit 976ec25e3b
9 changed files with 102 additions and 280 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/emby-scrollbuttons/emby-scrollbuttons.css
View file

@ -1,60 +1,20 @@
.emby-scrollbuttons-scroller {
.emby-scroller-container {
position: relative;
}
.scrollbuttoncontainer {
.emby-scroller {
margin-left: 3.3%;
margin-right: 3.3%;
}
.emby-scrollbuttons {
position: absolute;
top: 10%;
bottom: 35%;
top: 0;
right: 0;
align-items: center;
justify-content: center;
z-index: 1;
font-size: 3em;
color: #fff;
display: none;
overflow: hidden;
}
.scrollbuttoncontainer-left {
background: rgba(20, 20, 20, .5);
background: -moz-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);
background: linear-gradient(to right,#000,rgba(0,0,0,0));
}
.scrollbuttoncontainer-right {
background: rgba(20, 20, 20, .5);
background: -moz-linear-gradient(right,#000 0,rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right,#000 0,rgba(0,0,0,0) 100%);
background: linear-gradient(to left,#000,rgba(0,0,0,0));
}
.emby-scrollbuttons-scroller:hover .scrollbuttoncontainer {
color: #ffffff;
display: flex;
}
.scrollbuttoncontainer-left {
left: 0;
}
.scrollbuttoncontainer-right {
right: 0;
}
.emby-scrollbuttons-scrollbutton {
margin: 0 -.2em;
transition: transform 160ms ease-out;
}
.scrollbuttoncontainer:hover > .emby-scrollbuttons-scrollbutton {
transform: scale(1.3, 1.3);
}
.emby-scrollbuttons-scrollbutton:after {
content: '';
display: none !important;
}
.emby-scrollbuttons-scrollbutton:focus {
color: inherit !important;
}
overflow: hidden;
}