Added initial duckplayer page without refactor

Author: Shane Osbourne

packages/special-pages/pages/duckplayer/.gitignore

@@ -0,0 +1,248 @@
+:root {
+    --aspect-ratio: calc(9 / 16);
+    --toolbar-height: 56px;
+
+    /* Set video to take up 80vw width */
+    --video-width: 80vw;
+
+    /* Calculate video height based on aspect ratio, but never exceed 80vh
+     * for the video height, for example when using short, wide screens.
+     */
+    --video-height: min(calc(var(--video-width) * var(--aspect-ratio)), 80vh);
+}
+
+@media screen and (max-width: 1080px) {
+    :root {
+        --video-width: 85vw;
+    }
+}
+
+@media screen and (max-width: 740px) {
+    :root {
+        --video-width: 90vw;
+    }
+}
+
+.bg {
+    background: url('img/player-bg.png');
+}
+
+.bg {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-size: cover;
+    opacity: 0.6;
+}
+
+.bg::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -50%;
+    height: 100%;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0), #101010 70%);
+    transition: all 1s ease-out;
+}
+
+body.faded .bg::after {
+    top: 30%;
+}
+
+body {
+    color: rgba(255, 255, 255, 0.85);
+    font-family: system-ui;
+    font-size: 13px;
+    line-height: 16px;
+    letter-spacing: -0.08px;
+    margin: 0;
+    background: #101010;
+
+    /* Make it feel more like something native */
+    -webkit-user-select: none;
+    cursor: default;
+}
+
+.player-container {
+    overflow: hidden;
+    z-index: 10;
+    position: relative;
+    background: black;
+}
+
+.player-container,
+#player {
+    width: var(--video-width);
+    height: var(--video-height);
+    max-width: 3840px;
+}
+
+.player-error {
+    text-align: center;
+    line-height: var(--video-height);
+    background: #2f2f2f;
+}
+
+.content-hover {
+    --content-padding: 1px;
+    padding: var(--content-padding);
+    width: var(--video-width);
+
+    /* Set margin left to be half of the remaining vw - video width */
+    margin-left: calc(((100vw - var(--video-width)) / 2) - var(--content-padding));
+
+    /* Set margin-top to be half of the remaaining vh - video and toolbar height, but never less than 0px. */
+    margin-top: max(0px, calc((100vh - (var(--video-height) + var(--toolbar-height))) / 2));
+    position: absolute;
+}
+
+.toolbar {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 0px 0px 12px 12px;
+    transition: all 0.5s linear;
+    opacity: 1;
+    margin-top: -12px;
+    padding: 12px;
+    padding-top: 24px;
+    height: 32px;
+}
+
+body.faded .toolbar {
+    opacity: 0;
+    margin-top: -80px;
+}
+
+.logo {
+    float: left;
+    font-style: normal;
+    font-weight: 600;
+    color: #ffffff;
+    margin-top: 4px;
+}
+
+.dax-icon {
+    margin-bottom: -7px;
+    margin-right: 5px;
+}
+
+.info-icon-container {
+    position: relative;
+    display: inline-block;
+    margin-left: 4px;
+}
+
+.info-icon {
+    margin-bottom: -4px;
+}
+
+.info-icon:hover path {
+    fill: rgba(255, 255, 255, 0.8);
+}
+
+.info-icon-tooltip {
+    position: absolute;
+    background: linear-gradient(0deg, rgba(48, 48, 48, 0.35), rgba(48, 48, 48, 0.35)), rgba(33, 33, 33, 0.55);
+    background-blend-mode: normal, luminosity;
+    box-shadow: inset 0px 0px 1px #ffffff;
+    filter: drop-shadow(0px 0px 1px #000000) drop-shadow(0px 0px 1px #000000) drop-shadow(0px 0px 1px #000000)
+        drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.2));
+    backdrop-filter: blur(76px);
+    border-radius: 10px;
+    width: 300px;
+    font-weight: normal;
+    padding: 12px;
+    left: -162px;
+    top: 32px;
+    display: none;
+}
+
+.info-icon-tooltip::after {
+    content: '';
+    width: 15px;
+    height: 15px;
+    border: 1px solid #5f5f5f;
+    display: block;
+    position: absolute;
+    top: -8px;
+    border-right: none;
+    border-bottom: none;
+    transform: rotate(45deg);
+    background: #1d1d1d;
+    left: 162px;
+}
+
+.info-icon-tooltip.above {
+    top: -105px;
+    z-index: 50;
+}
+
+.info-icon-tooltip.above::after {
+    top: 80px;
+    transform: rotate(225deg);
+}
+
+.info-icon-tooltip.visible {
+    display: block;
+}
+
+.options {
+    float: right;
+}
+
+.setting-container {
+    position: absolute;
+    right: 207px;
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 8px;
+    margin-right: 0;
+    width: 299px;
+}
+
+.setting-container.animatable {
+    transition: 0.3s linear all;
+}
+
+.setting-container.invisible {
+    width: 0px;
+}
+
+@media screen and (max-width: 760px) {
+    .setting-container {
+        width: calc(var(--video-width) - 370px);
+        margin-right: 8px;
+        text-overflow: ellipsis;
+    }
+}
+
+.settings-checkbox {
+    margin-top: 2px;
+    margin-right: 4px;
+    width: 14px;
+    height: 14px;
+}
+
+.options-button {
+    height: 16px;
+    padding: 8px;
+    background: rgba(255, 255, 255, 0.18);
+    border-radius: 8px;
+    float: left;
+    color: white;
+    text-decoration: none;
+    margin-left: 8px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.options-button:hover,
+.options-button.active {
+    background: rgba(255, 255, 255, 0.28);
+}
+
+.play-on-youtube img {
+    margin-bottom: -3px;
+}