.emby-button { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; margin: 0 .29em; text-align: center; font-size: inherit; font-family: inherit; color: inherit; outline-width: 0; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; cursor: pointer; z-index: 0; padding: .86em 1em; vertical-align: middle; border: 0; vertical-align: middle; border-radius: .2em; /* These are getting an outline in opera tv browsers, which run chrome 30 */ outline: none !important; position: relative; font-weight: 600; /* Disable webkit tap highlighting */ -webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration: none; /* Not crazy about this but it normalizes heights between anchors and buttons */ line-height: 1.35; } .emby-button::-moz-focus-inner { border: 0; } .button-flat { background: transparent; } .button-flat:hover { opacity: .5; } .button-link { background: transparent; margin: 0; padding: 0; vertical-align: initial; } .button-link-inline { display: inline; } .button-link:hover { text-decoration: underline; } .emby-button-focusscale { transition: transform 180ms ease-out !important; -webkit-transform-origin: center center; transform-origin: center center; } .emby-button-focusscale:focus { transform: scale(1.16); z-index: 1; } .emby-button > i { /* For non-fab buttons that have icons */ font-size: 1.36em; } .button-link > i { font-size: 1em; } .fab { display: inline-flex; border-radius: 50%; padding: .6em; box-sizing: border-box; align-items: center; justify-content: center; text-align: center; } .emby-button.block { display: block; align-items: center; justify-content: center; margin: .25em 0; width: 100%; } .paper-icon-button-light { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; margin: 0 .29em; background: transparent; text-align: center; font-size: inherit; font-family: inherit; color: inherit; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; cursor: pointer; z-index: 0; min-width: initial; min-height: initial; width: auto; height: auto; padding: .556em; vertical-align: middle; border: 0; vertical-align: middle; /* These are getting an outline in opera tv browsers, which run chrome 30 */ outline: none !important; position: relative; overflow: hidden; border-radius: 50%; /* Disable webkit tap highlighting */ -webkit-tap-highlight-color: rgba(0,0,0,0); justify-content: center; } .paper-icon-button-light::-moz-focus-inner { border: 0; } .paper-icon-button-light[disabled] { opacity: .3; } .paper-icon-button-light > i { font-size: 1.66956521739130434em; /* Make sure its on top of the ripple */ position: relative; z-index: 1; vertical-align: middle; } .paper-icon-button-light > img { width: 1.72em; /* Can't use 100% height or it will stretch past the boundaries in safari */ /*height: 100%;*/ max-height: 100%; /* Make sure its on top of the ripple */ position: relative; z-index: 1; vertical-align: middle; } .emby-button-foreground { position: relative; z-index: 1; } .icon-button-focusscale { transition: transform 180ms ease-out !important; -webkit-transform-origin: center center; transform-origin: center center; } .icon-button-focusscale:focus { transform: scale(1.3); z-index: 1; } .btnFilterWithBubble { position: relative; } .filterButtonBubble { color: #fff; position: absolute; background: #444; top: 0; right: 0; /* padding: .5em; */ width: 1.6em; height: 1.6em; z-index: 100000000; display: flex; align-items: center; justify-content: center; font-size: 82%; border-radius: 100em; box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2); background: #03A9F4; font-weight: bold; }