Revision control
Copy as Markdown
/* To hide the "Download Vimeo app for Android" toast message,
which doesn't make sense to appear on Firefox Reality (but does make sense for Firefox for Android). */
.app_banner_container,
.app_banner {
display: none !important;
}
/* To properly overlay the canvas video from `?canvas=1` on a video-detail page.
html[data-fxr-is-360="true"][data-fxr-video-page-layout~="detail"],
html[data-fxr-is-360="true"][data-fxr-video-page-layout~="detail"] body,
html[data-fxr-is-360="true"][data-fxr-video-page-layout~="detail"] .player,
html[data-fxr-is-360="true"][data-fxr-video-page-layout~="detail"] .fallback {
background-color: transparent !important;
}
.player.loading {
opacity: 0;
}
/* Fix black screen issue.
.vp-canvas-effect {
display:none;
}
/* To properly overlay the canvas video from `?canvas=1` on a video-embed page.
html[data-fxr-is-360="true"][data-fxr-video-page-layout="embed"] .vp-placeholder {
background: transparent !important;
}
/* These styles are useful for visually debugging the elements. Can be toggled by adding `debug=1` to the current URL's query-string. */
html[data-fxr-debug="true"],
html[data-fxr-debug="true"] .outer_wrap {
background-color: yellow;
}
html[data-fxr-debug="true"][data-fxr-is-360="false"] {
background-color: red !important;
}
html[data-fxr-debug="true"][data-fxr-is-360="true"] {
background-color: green !important;
}
html[data-fxr-debug="true"][data-fxr-is-360="true"][data-fxr-video-page-layout] {
border: 1px solid pink;
}
html[data-fxr-debug="true"][data-fxr-is-360="true"][data-fxr-video-page-layout] body {
border: 2px solid orange;
}
html[data-fxr-debug="true"][data-fxr-is-360="true"][data-fxr-video-page-layout] .player {
border: 2px solid purple;
}
html[data-fxr-debug="true"][data-fxr-is-360="true"][data-fxr-video-page-layout] .fallback {
border: 1px solid blue;
}