| /* Copyright 2018 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. */ |
| |
| video::-internal-media-interstitial { |
| width: inherit; |
| height: inherit; |
| position: relative; |
| direction: ltr; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-end; |
| align-items: center; |
| /* The font size is set to be proportional to the viewport width. |
| * Specifically, it is 15px for 400px width, and 36px for 1920px width. |
| * The full math expression is: |
| * 15px + (36 - 15) * ((100vw - 400px) / (1920 - 400)). |
| */ |
| font-size: calc(9.5px + 1.38vw); |
| background-color: transparent; |
| opacity: 0; |
| transition: opacity .3s ease-in-out; |
| } |
| |
| video::-internal-media-interstitial-background-image { |
| display: flex; |
| position: absolute; |
| margin: 0; |
| top: 0px; |
| left: 0px; |
| width: 100%; |
| height: 100%; |
| border: none; |
| border-width: 0px; |
| background-color: transparent; |
| padding: 0; |
| filter: grayscale(100%) blur(5px) opacity(40%); |
| } |
| |
| video::-internal-media-remoting-cast-icon { |
| -webkit-appearance: none; |
| background-size: 100% 100%; |
| background-repeat: no-repeat; |
| background-position: center center; |
| display: flex; |
| position: absolute; |
| margin: 0px; |
| border-width: 0px; |
| background-color: transparent; |
| height: 2.5vw; |
| width: 3vw; |
| padding: 0px; |
| left: calc(50% - 1.5vw); |
| top: calc(50% - 3vw); |
| } |
| |
| video::-internal-media-interstitial-message, |
| video::-internal-picture-in-picture-interstitial-message { |
| display: inline; |
| position: absolute; |
| top: calc(50% + 1vw); |
| border: none; |
| color: rgba(255,255,255,.54); |
| width: 100%; |
| text-wrap: none; |
| text-align: center; |
| background-color: transparent; |
| font-family: Roboto-Regular, Sans-serif, Segoe, Serif, Helvetica; |
| padding: 0px; |
| margin: 0px; |
| } |
| |
| video::-internal-media-interstitial-message { |
| font-size: 90%; |
| } |
| |
| video::-internal-picture-in-picture-interstitial-message { |
| top: 0; |
| left: 0; |
| width: auto; |
| |
| color: rgba(255,255,255,0.8); |
| text-align: left; |
| letter-spacing: 0.2px; |
| |
| /** default to small */ |
| font-size: 14px; |
| line-height: 20px; |
| margin: 8px 16px; |
| } |
| |
| video::-internal-media-remoting-toast-message { |
| display: inline; |
| position: absolute; |
| top: 16pt; |
| border: none; |
| border-radius: 2pt; |
| color: rgba(255,255,255, 1); |
| width: auto; |
| text-wrap: none; |
| text-align: center; |
| background-color: rgba(40, 44, 50, 0.7); |
| font-size: 90%; |
| font-family: Roboto-Regular, Sans-serif, Segoe, Serif, Helvetica; |
| padding: 10pt 24pt 10pt 24pt; |
| margin: 0px; |
| } |
| |
| video::-internal-media-remoting-cast-icon { |
| background-image: -webkit-image-set( |
| url(default_100_percent/mediaremoting_cast.png) 1x, |
| url(default_200_percent/mediaremoting_cast.png) 2x); |
| } |
| |
| video::-internal-picture-in-picture-interstitial-message.sizing-medium { |
| font-size: 24px; |
| line-height: 28px; |
| margin: 32px 64px; |
| } |
| |
| video::-internal-picture-in-picture-interstitial-message.sizing-large { |
| font-size: 40px; |
| line-height: 47px; |
| margin: 64px 96px; |
| } |