1 line
2.6 KiB
CSS
1 line
2.6 KiB
CSS
|
.scrollbuttoncontainer{background:0 0}.emby-scrollbuttons-scrollbutton{background:var(--win-ControlFillColorDefault);color:var(--win-TextFillColorPrimary);border:solid 1.5px var(--theme-control-border-color);border-bottom-color:var(--theme-control-border-bottom-color);transition:background 83ms}.emby-scrollbuttons-scrollbutton:hover{background:var(--win-ControlFillColorSecondary)}.emby-scrollbuttons-scrollbutton:active{background:var(--win-ControlFillColorTertiary);color:var(--win-TextFillColorSecondary);border-color:var(--theme-control-border-color);border-bottom-color:var(--theme-control-border-color)}.emby-scrollbuttons-scrollbutton:disabled{background:var(--button-background-disabled-color);color:var(--win-TextFillColorDisabled);border-color:var(--theme-control-border-color);border-bottom-color:var(--theme-control-border-color)}.emby-scrollbuttons-scrollbutton{border-radius:.15em;border:#80808059 1px solid;height:4rem;width:2.5rem;padding:0;display:flex;opacity:1;transition:height 180ms .5s ease-out,opacity 180ms .5s ease-out;align-items:center;flex-direction:column}.scrollbuttoncontainer:hover>.emby-scrollbuttons-scrollbutton{transform:none;backdrop-filter:blur(30px) saturate(3.0);height:7rem;opacity:.9;transition:height 180ms 0s ease-out,opacity 180ms 0s ease-out}.emby-scrollbuttons-scrollbutton .md-icon{opacity:.5;transition:opacity 180ms .5s ease-out}.scrollbuttoncontainer:hover>.emby-scrollbuttons-scrollbutton .md-icon{opacity:1;transition:opacity 180ms 0s ease-out}.emby-scrollbuttons-scroller .scrollbuttoncontainer.scrollbuttoncontainer-forwards{transform:translate(100%,0);margin-right:-4px}.emby-scrollbuttons-scroller .scrollbuttoncontainer.scrollbuttoncontainer-backwards{transform:translate(-100%,0);margin-left:3px}.emby-scrollbuttons-scroller .scrollbuttoncontainer{display:flex;transition:transform 250ms .5s cubic-bezier(.45, .05, .55, .95)}.emby-scrollbuttons-scroller:hover .scrollbuttoncontainer{display:flex;transform:translate(0,0)}.verticalSection:has(.emby-scrollbuttons) .emby-scroller.scrollX.hiddenScrollX.scrollFrameX{-webkit-mask-image:linear-gradient(to right,transparent 0.05rem,#00000030 0.5rem,black 1.5rem,black calc(100% - 1.5rem),#00000030 calc(100% - 0.5rem),transparent calc(100% - 0.05rem));transition:all 250ms .5s cubic-bezier(.45, .05, .55, .95);-webkit-mask-repeat:no-repeat;-webkit-mask-position-x:center;-webkit-mask-size:100% 100%}.verticalSection:has(.emby-scrollbuttons):hover .emby-scroller.scrollX.hiddenScrollX.scrollFrameX{}.verticalSection:has(.scrollbuttoncontainer:hover) .emby-scroller.scrollX.hiddenScrollX.scrollFrameX{-webkit-mask-size:94% 100%}
|