Source/WebCore/Modules/mediacontrols/mediaControlsAdwaita.css

/*
 * Copyright (C) 2009 Apple Inc.  All rights reserved.
 * Copyright (C) 2009 Google Inc.
 * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com>
 * Copyright (C) 2012, 2020 Igalia S.L.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/* These are based on the Chromium media controls and using the Adwaita icons */

audio::-webkit-media-controls-panel.hidden,
video::-webkit-media-controls-panel.hidden {
    display: none !important;
}

body:-webkit-full-page-media {
    background-color: rgb(0, 0, 0);
}

audio {
    width: 300px;
    height: 30px;
}

audio:-webkit-full-page-media,
video:-webkit-full-page-media {
    max-height: 100%;
    max-width: 100%;
}

audio:-webkit-full-page-media::-webkit-media-controls-panel,
video:-webkit-full-page-media::-webkit-media-controls-panel {
    bottom: 0px;
}

::-webkit-media-controls {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

audio::-webkit-media-controls-enclosure,
video::-webkit-media-controls-enclosure {
    width: 100%;
    max-width: 800px;
    height: 30px;
    bottom: 0;
    text-indent: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

video::-webkit-media-controls-enclosure {
    padding: 5px;
    height: 40px;
}

audio::-webkit-media-controls-panel,
video::-webkit-media-controls-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    bottom: auto;
    height: 30px;
    background-color: rgba(20, 20, 20, 0.8);
    border-radius: 5px;
    overflow: visible;
    transition: opacity 0.25s linear;
}

video::-webkit-media-controls-panel {
    opacity: 0;
}

audio::-webkit-media-controls-panel,
video:-webkit-full-page-media::-webkit-media-controls-panel.no-video,
video::-webkit-media-controls-panel:hover,
video::-webkit-media-controls-panel.show,
video::-webkit-media-controls-panel.paused {
    opacity: 1;
}

video::-webkit-media-controls-panel div.mute-box,
audio::-webkit-media-controls-panel div.mute-box {
    display: flex;
    flex: none;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    margin: 0 9px 0 -7px;
}

audio::-webkit-media-controls-panel div.mute-box.hidden,
video::-webkit-media-controls-panel div.mute-box.hidden {
    display: none !important;
}

audio::-webkit-media-controls-mute-button,
video::-webkit-media-controls-mute-button {
    display: flex;
    flex: none;
    border: none;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    line-height: 30px;
    outline: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml;utf-8, \
        <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
          <g fill='#FFFFFF'> \
            <path d='M0 5h2.484l2.97-3H6v12h-.475l-3.04-3H0z' style='marker:none' color='#bebebe' overflow='visible'/> \
            <path d='M15 8c0-2.814-1-5.172-2.586-7H11v1.48C12.265 4 13 5.7 13 8c0 2.3-.78 4-2 5.52V15h1.381C13.847 13.36 15 10.814 15 8z' style='marker:none' color='#000' overflow='visible'/> \
            <path d='M12 8c0-2.166-.739-4.02-2-5H9v2c.607.789 1 1.76 1 3 0 1.241-.393 2.22-1 3v2h1c1.223-.995 2-2.873 2-5z' style='marker:none' color='#000' overflow='visible'/> \
            <path d='M9 8c0-1.257-.312-2.216-1-3H7v6h1c.672-.837 1-1.742 1-3z' style='line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none' color='#000' font-weight='400' font-family='Sans' overflow='visible'/> \
          </g> \
        </svg>");
}

audio::-webkit-media-controls-mute-button.muted,
video::-webkit-media-controls-mute-button.muted {
    background-image: url("data:image/svg+xml;utf-8, \
        <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
          <g fill='#FFFFFF'> \
            <path d='M11 11h1.375l1.125 1.094L14.594 11H16v1.469l-1.094 1.062L16 14.594V16h-1.438L13.5 14.937 12.437 16H11v-1.406l1.062-1.063L11 12.47zM0 5h2.484l2.97-3H6v12h-.475l-3.04-3H0z' style='marker:none' color='#bebebe' overflow='visible'/> \
            <path d='M11 1v1.48C12.265 4 13 5.7 13 8c0 .723-.085 1.382-.229 2h2.034c.124-.645.195-1.314.195-2 0-2.814-1-5.172-2.586-7z' style='marker:none' color='#000' overflow='visible' opacity='.35'/> \
            <path d='M9 3v2c.607.789 1 1.759 1 3s-.393 2.22-1 3v2h1v-3h1.75c.158-.626.25-1.297.25-2 0-2.167-.739-4.02-2-5z' style='marker:none' color='#000' overflow='visible' opacity='.35'/> \
            <path d='M9 8c0-1.257-.312-2.216-1-3H7v6h1c.672-.837 1-1.742 1-3z' style='line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none' color='#000' font-weight='400' font-family='Sans' overflow='visible' opacity='.35'/> \
          </g> \
        </svg>");
}

audio::-webkit-media-controls-play-button,
video::-webkit-media-controls-play-button {
    display: flex;
    flex: none;
    border: none;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 9px;
    outline: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml;utf-8, \
        <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
          <g color='#000' fill='#FFFFFF'> \
            <path d='M4.002 4h3v8h-3zM9.002 4h3v8h-3z' style='marker:none' overflow='visible'/> \
          </g> \
        </svg>");
}

/* Paused classes for audio/video controls should be defined to make a difference in style from not having this class. Otherwise a repaint would not happen. */
audio::-webkit-media-controls-play-button.paused,
video::-webkit-media-controls-play-button.paused {
    position: relative;
    background-image: url("data:image/svg+xml;utf-8, \
        <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
          <g color='#000' fill='#FFFFFF'> \
            <path d='M5.022 3a1 1 0 0 0-1.02 1v8a1 1 0 0 0 1.496.87l6.999-4a1 1 0 0 0 0-1.74l-6.999-4A1 1 0 0 0 5.022 3zm.98 2.725L9.982 8l-3.98 2.275z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
            <path d='M5.002 12h-1v1h1zM5.002 3h-1v1h1zM5.002 4L12 8l-6.998 4z' style='marker:none' overflow='visible'/> \
          </g> \
        </svg>");
}

audio::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-current-time-display {
    -webkit-user-select: none;
    flex: none;
    display: block;
    border: none;
    cursor: default;

    height: 30px;
    margin: 0 15px 0 0;

    line-height: 30px;
    font-family: -webkit-system-font;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    color: white;

    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    text-decoration: none;
}

audio::-webkit-media-controls-current-time-display.no-duration,
video::-webkit-media-controls-current-time-display.no-duration {
    filter: brightness(50%);
}

audio::-webkit-media-controls-current-time-display.hidden,
video::-webkit-media-controls-current-time-display.hidden {
    display: none !important;
}

audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
    -webkit-appearance: media-slider !important;
    display: flex !important;
    flex: 1 1 auto !important;
    height: 4px !important;
    margin: 0 15px 0 1px !important;
    padding: 0 !important;
    min-width: 25px !important;
    outline: none !important;
}

input[type="range"][disabled]::-webkit-media-slider-thumb,
input[type="range"][disabled]::-webkit-media-slider-thumb:hover,
input[type="range"][disabled]::-webkit-media-slider-thumb:active {
    filter: brightness(50%);
}

audio::-webkit-media-controls-timeline.hidden,
video::-webkit-media-controls-timeline.hidden {
    display: none !important;
}

audio::-webkit-media-controls-volume-slider-container,
video::-webkit-media-controls-volume-slider-container {
    -webkit-appearance: media-volume-slider-container;
    display: flex;
    overflow: hidden;
    position: absolute;
    padding: 0;
    height: 100px;
    width: 30px;
    bottom: 30px;
    z-index: 2;
    background-color: rgba(20, 20, 20, 0.8);
    border-radius: 5px 5px 0px 0px;
    transition: height 0.10s linear;
}

audio::-webkit-media-controls-volume-slider-container.hiding,
video::-webkit-media-controls-volume-slider-container.hiding {
    height: 0;
}

audio::-webkit-media-controls-volume-slider-container.down,
video::-webkit-media-controls-volume-slider-container.down {
    bottom: -100px;
    border-radius: 0px 0px 5px 5px;
    transition: height 0.10s linear, bottom 0.10s linear;
}

audio::-webkit-media-controls-panel .hiding.down,
video::-webkit-media-controls-panel .hiding.down {
    bottom: 0;
}

audio::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-volume-slider {
    -webkit-appearance: media-volume-slider !important;
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    height: 80px !important;
    width: 4px !important;
    margin: 10px auto !important;
    outline: none !important;
}

audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div,
video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div {
    margin: -7px 0;
}

input[type="range"]::-webkit-media-slider-container {
    display: flex;
    align-items: center;
    flex-direction: row; /* This property is updated by C++ code. */
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

/* The negative right margin causes the track to overflow its container. */
input[type="range"]::-webkit-media-slider-container > div {
    margin-right: -14px;
}

input[type="range"]::-webkit-media-slider-thumb {
    -webkit-appearance: none !important;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    color: white;
    margin-left: -7px;
    margin-right: -7px;
    background-color: white;
}

audio::-webkit-media-controls-toggle-closed-captions-button,
video::-webkit-media-controls-toggle-closed-captions-button {
    display: flex;
    flex: none;
    border: none;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 9px 0 -7px;
    outline: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml;utf-8, \
        <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
          <path d='M3.5 2A2.495 2.495 0 0 0 1 4.5v5c0 1.385 1.115 2.52 2.5 2.5h6.375L13 15v-3.063A2.486 2.486 0 0 0 15 9.5v-5C15 3.115 13.885 2 12.5 2zM3 7h4v1H3zm5 0h5v1H8zM3 9h2v1H3zm3 0h5v1H6zm6 0h1v1h-1z' fill='#FFFFFF'/> \
        </svg>");
}

audio::-webkit-media-controls-toggle-closed-captions-button.hidden,
video::-webkit-media-controls-toggle-closed-captions-button.hidden {
    display: none !important;
}

video::-webkit-media-controls-closed-captions-container {
    -webkit-appearance: media-closed-captions-container;
    display: flex;
    position: absolute;
    bottom: 35px;
    z-index: 2;
    background-color: rgba(20, 20, 20, 0.8);
    border-radius: 5px 5px 0px 0px;
    overflow: hidden;
    max-width: -webkit-calc(100% - 48px); /* right + 10px */
    max-height: -webkit-calc(100% - 35px); /* bottom + 10px */
    cursor: default;
    font-family: -webkit-system-font;
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    color: white;
    -webkit-user-select: none;
    transition: height 0.10s linear;
}

video::-webkit-media-controls-closed-captions-container.out {
    border-radius: 5px;
}

video::-webkit-media-controls-closed-captions-container.hidden {
    display: none !important;
}

video::-webkit-media-controls-closed-captions-container h3 {
    padding-top: 8px;
    margin: 0;
    padding-left: 17px;
    padding-right: 15px;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
}

video::-webkit-media-controls-closed-captions-container ul {
    list-style-type: none;
    margin: 0 0 4px 0;
    padding: 4px 0 0 0;
}

video::-webkit-media-controls-closed-captions-container li {
    position: relative;
    color: white;
    margin: 0;
    padding-left: 17px;
    padding-right: 15px;
    padding-top: 0.15em;
    padding-bottom: 0.2em;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    outline: none;
}
video::-webkit-media-controls-closed-captions-container li.selected {
    background-color: rgba(230, 230, 230, 0.15);
}

video::-webkit-media-controls-fullscreen-button {
    display: flex;
    flex: none;
    border: none;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 9px 0 -7px;
    outline: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml;utf-8, \
        <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
          <g color='#000' fill='#FFFFFF'> \
            <path d='M1.984 8.986A1 1 0 0 0 1 10v4a1 1 0 0 0 1 1h4a1 1 0 1 0 0-2H3v-3a1 1 0 0 0-1.016-1.014z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
            <path d='M6.48 8.49a1 1 0 0 0-.687.303l-4.5 4.5a1 1 0 1 0 1.414 1.414l4.5-4.5A1 1 0 0 0 6.48 8.49z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
            <path d='M1 14h1v1H1z' style='marker:none' overflow='visible'/> \
            <path d='M10 1a1 1 0 1 0 0 2h3v3a1 1 0 1 0 2 0V2a1 1 0 0 0-1-1z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
            <path d='M14 1h1v1h-1z' style='marker:none' overflow='visible'/> \
            <path d='M13.984.99a1 1 0 0 0-.69.301l-4.5 4.469a1 1 0 1 0 1.411 1.418l4.5-4.469a1 1 0 0 0-.72-1.719z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
            <path d='M1 9h1v1H1zM6 14h1v1H6zM14 6h1v1h-1zM9 1h1v1H9z' style='marker:none' overflow='visible'/> \
          </g> \
        </svg>");
}

video::-webkit-media-controls-fullscreen-button.exit {
    background-image: url("data:image/svg+xml;utf-8, \
        <svg xmlns='http://www.w3.org/2000/svg' width='16.014' height='16.01'> \
          <g color='#000' fill='#FFFFFF'> \
            <path d='M12 1.006l-2 .008.018 4.996H15v-2h-2.99z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
            <path d='M14.979 0a1 1 0 0 0-.688.305l-3.984 4a1 1 0 1 0 1.416 1.41l3.986-4A1 1 0 0 0 14.979 0zM1.014 6.01a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1zm1 2h6v6h-6z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
            <path d='M1.014 8.01a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible' fill-rule='evenodd'/> \
            <path d='M15 5.01h1v1h-1zM10 .01h1v1h-1zM9.014 15.01h1v1h-1zM.014 15.01h1v1h-1z' style='marker:none' overflow='visible'/> \
            <path d='M11 .01c.554 0 1 .446 1 1s-.446 1-1 1-1-.446-1-1 .446-1 1-1zM15 4.01c.554 0 1 .446 1 1s-.446 1-1 1-1-.446-1-1 .446-1 1-1z' style='marker:none' overflow='visible'/> \
          </g> \
        </svg>");
}

video::-webkit-media-controls-fullscreen-button.hidden {
    display: none !important;
}

audio::-webkit-media-controls-panel button:hover,
video::-webkit-media-controls-panel button:hover,
input[type="range"]::-webkit-media-slider-thumb:hover {
    filter: brightness(90%);
}

audio::-webkit-media-controls-panel button:active,
video::-webkit-media-controls-panel button:active,
input[type="range"]::-webkit-media-slider-thumb:active {
    filter: brightness(80%);
}

audio::-webkit-media-controls-panel button[disabled],
video::-webkit-media-controls-panel button[disabled] {
    filter: brightness(50%);
}