.menuIconButton{ color: var(--theme-text-color); background-color: var(--card-background); border-radius: 8px; padding-top: 3px; padding-bottom: 3px; padding-right: 8px; padding-left: 8px; } .menuSection{ min-width: inherit; font-size: 1.7em; background: var(--card-background); border: 3px inset var(--docked-drawer-background); display: inline-flex; vertical-align: top; } .menuSection:hover{ opacity: 0.5; } .menuButton{ padding: 8px 8px; padding-right: 1em; width: 100%; text-align: left; display: flex; align-items: center; position: relative; background-color: inherit; color: var(--theme-text-color); border: 0; } .menuButton:hover { background-color: var(--theme-button-hover-color); cursor: pointer; } .menuItem:{ position: relative; } .menuList{ margin: 0; display: block; padding: 0; list-style-type: none; } .menuList + .menuList{ border-top: 1px solid #ddd; } .menuPanel{ display: flex; flex-direction: column; } .menuCanvas{ position: absolute; padding-top: 13px; padding-bottom: 13px; top: 0px; left:0px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background-color: var(--drawer-background); opacity: 1.0; border: var(--line-size) solid var(--line-background) } .listItemHide{ display: none; } .listItemShow{ display: flex; } .listItem{ background:0 0; border:0; outline:0!important; color:inherit; vertical-align:middle; font-family:inherit; font-size:inherit; margin:0; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; text-align:left; padding:.25em 0; overflow:hidden; -webkit-flex-shrink:0; flex-shrink:0; text-decoration:none; line-height:inherit } .listItem.dragging-over{ position:relative } .dragging-over-top:before{ content:' '; height:.1em; width:100%; position:absolute; top:0; z-index:99999; -webkit-border-radius:100em; border-radius:100em } .dragging-over-bottom:after{ content:' '; height:.1em; width:100%; position:absolute; bottom:0; z-index:99999; -webkit-border-radius:100em; border-radius:100em } .listItem-noverticalpadding{ padding-top:0; padding-bottom:0 } .listItemCursor{ cursor:pointer } @media (pointer:coarse){ .listItem-touchzoom-transition{ -webkit-transition:-webkit-transform .1s ease-in-out; -o-transition:transform .1s ease-in-out; transition:transform .1s ease-in-out; -webkit-transition-delay:80ms; -o-transition-delay:80ms; transition-delay:80ms } .listItem-touchzoom:active{ -webkit-transform:scale(.94); transform:scale(.94) } } .listItem-largeImage{ padding:1em 0 } .listItem-withContentWrapper{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; flex-direction:column; -webkit-box-align:start; -webkit-align-items:flex-start; align-items:flex-start } .listItem-content{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; width:100% } .listItem-indexnumberleft{ margin-right:1em; margin-left:.5em } .listItem-border{ border-bottom-width:.08em; border-bottom-style:solid } .paperListItem:last-child{ border-bottom-style:none } .listItemAside,.listItemIcon,.listItemImageContainer{ -webkit-flex-shrink:0; flex-shrink:0 } .listItemButton{ margin:0; -webkit-flex-shrink:0; flex-shrink:0; contain:layout style } @media (pointer:coarse){ .listItemContextMenuButton{ display:none } } .listItemBody{ -webkit-box-flex:1; -webkit-flex-grow:1; flex-grow:1; padding:.35em .75em; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; flex-direction:column; vertical-align:middle; -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; text-align:left; -webkit-box-align:initial; -webkit-align-items:initial; align-items:initial; margin:0 } .listItemBody-noleftpadding{ padding-left:0!important } .listItemBody-code{ font-family:monospace } .listItemBody-noverticalpadding{ padding-top:0; padding-bottom:0 } .listItemBodyText{ margin:0; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis } .listItemBodyText-nowrap{ white-space:nowrap } .listItemImageContainer{ width:3.26em; height:3.26em; position:relative; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-border-radius:.3em; border-radius:.3em } .listItemImage{ -webkit-border-radius:.3em; border-radius:.3em; width:100%; height:100%; -o-object-fit:contain; object-fit:contain } .listItemImage-round,.listItemImageContainer-round{ -webkit-border-radius:100em; border-radius:100em } .listItemImageContainer-large{ width:20vw; height:11.25vw; margin-right:.35em } .listItemImageButton{ margin:0; color:rgba(255,255,255,.6); font-size:1.5em; background:0 0; -webkit-transition:-webkit-transform .2s ease-in-out; -o-transition:transform .2s ease-in-out; transition:transform .2s ease-in-out; display:-webkit-box; display:-webkit-flex; display:flex; position:absolute; top:50%; left:50%; margin-left:-2em; margin-top:-2em } @media(hover:hover) and (pointer:fine){ .listItemImageButton:hover{ -webkit-transform:scale(1.2,1.2); transform:scale(1.2,1.2) } } .listItemImageButton-icon{ background:rgba(0,0,0,.4); border:.08em solid currentColor; -webkit-border-radius:100em; border-radius:100em; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -webkit-align-items:center; align-items:center; padding:.21em } @media all and (max-width:64em){ .listItemImageContainer-large{ width:33.75vw; height:18.984375vw } .listItemImageButton{ font-size:1.02em!important } } .listItemImageContainer-large-tv{ width:30vw!important; height:16.875vw!important } .listItemIcon{ width:1em!important; height:1em!important; font-size:163%; padding:0 .25em } .listItemImageContainer>.listItemIcon{ margin:0 } .listViewDragHandle{ touch-action:none; padding:1em } .listItemProgressBar{ position:absolute!important; bottom:0; left:0; right:0 } .listItem:focus{ -webkit-border-radius:.42em; border-radius:.42em } .listItem:focus .secondary{ color:inherit!important } .listItem-focusscale{ -webkit-transition:-webkit-transform .2s ease-out; -o-transition:transform .2s ease-out; transition:transform .2s ease-out } .listItem-focusscale:focus{ -webkit-transform:scale(1.025,1.025); transform:scale(1.025,1.025) } .paperList{ margin:.5em auto; -webkit-border-radius:.3em; border-radius:.3em } .paperList-clear{ background-color:transparent!important } .paperList .listItemImageContainer{ margin:0 .25em 0 1em } .listItemMediaInfo{ display:none; -webkit-box-align:center; -webkit-align-items:center; align-items:center; margin-right:1em; -webkit-flex-shrink:0; flex-shrink:0 } .listGroupHeader-first{ margin-top:0 } .listItemIndicators{ right:.324em; top:.324em; position:absolute; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center } .listItem,.listItemBody,.listItemMediaInfo{ display:-webkit-box; display:-webkit-flex; display:flex; contain:layout style } .listItem-bottomoverview{ font-size:88%; margin-top:.2em } @media not all and (min-width:50em){ .listItem-overview{ display:none!important } } @media all and (min-width:50em){ .listItem-bottomoverview{ display:none!important } } .listItemCheckboxContainer{ width:auto!important } @media all and (max-width:75em){ .listViewUserDataButtons{ display:none!important } } .listItemPlayedIndicator{ font-size:1.6em } .listItem .mediaStreamAttribute{ padding-left:2.3em } @media(pointer:coarse){ .listItem-textActionButton{ pointer-events:none!important } }