diff options
Diffstat (limited to 'Source/WebCore/css/mediaControlsGtk.css')
| -rw-r--r-- | Source/WebCore/css/mediaControlsGtk.css | 222 |
1 files changed, 146 insertions, 76 deletions
diff --git a/Source/WebCore/css/mediaControlsGtk.css b/Source/WebCore/css/mediaControlsGtk.css index 61ba12a95..400d6d9c1 100644 --- a/Source/WebCore/css/mediaControlsGtk.css +++ b/Source/WebCore/css/mediaControlsGtk.css @@ -13,10 +13,10 @@ * 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 COMPUTER, INC. ``AS IS'' AND ANY + * 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 COMPUTER, INC. OR + * 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 @@ -27,6 +27,22 @@ /* These are based on the Chromium media controls */ +.hidden { + display: none !important; +} + +video::-webkit-media-controls-panel *:active, +video::-webkit-media-controls-panel *:focus, +audio::-webkit-media-controls-panel *:active, +audio::-webkit-media-controls-panel *:focus { + background-image: linear-gradient(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05)) !important; +} + +audio::-webkit-media-controls-panel.down *:active, +audio::-webkit-media-controls-panel.down *:focus { + background-image: linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .05)) !important; +} + body:-webkit-full-page-media { background-color: rgb(0, 0, 0); } @@ -47,10 +63,10 @@ video:-webkit-full-page-media::-webkit-media-controls-panel { } ::-webkit-media-controls { - display: -webkit-flex; - -webkit-flex-direction: column; - -webkit-justify-content: flex-end; - -webkit-align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; } audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { @@ -70,46 +86,76 @@ video::-webkit-media-controls-enclosure { } audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { - display: -webkit-flex; - -webkit-flex-direction: row; - -webkit-align-items: center; - -webkit-justify-content: flex-start; + 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-mute-button, video::-webkit-media-controls-mute-button { -webkit-appearance: media-mute-button; - display: -webkit-flex; - -webkit-flex: none; + display: flex; + flex: none; border: none; box-sizing: border-box; width: 30px; height: 30px; line-height: 30px; - margin: 0 9px 0 -7px; + outline: none; } audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { -webkit-appearance: media-play-button; - display: -webkit-flex; - -webkit-flex: none; + display: flex; + flex: none; border: none; box-sizing: border-box; width: 30px; height: 30px; line-height: 30px; margin: 0 9px; + outline: none; +} + +/* 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; } audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { -webkit-appearance: media-current-time-display; -webkit-user-select: none; - -webkit-flex: none; + flex: none; display: block; border: none; cursor: default; @@ -133,20 +179,27 @@ audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr } audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { - -webkit-appearance: media-slider; - display: -webkit-flex; - -webkit-flex: 1 1 auto; - height: 8px; - margin: 0 15px 0 1px; - padding: 0; - background-color: transparent; - min-width: 25px; - border-radius: 4px; - color: rgba(230, 230, 230, 0.35); + -webkit-appearance: media-slider !important; + display: flex !important; + flex: 1 1 auto !important; + height: 8px !important; + margin: 0 15px 0 1px !important; + padding: 0 !important; + background-color: transparent !important; + min-width: 25px !important; + border-radius: 4px !important; + color: rgba(230, 230, 230, 0.35) !important; + outline: none !important; +} + +audio::-webkit-media-controls-timeline[disabled], video::-webkit-media-controls-timeline[disabled] { + opacity: 0.3 !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; @@ -156,20 +209,39 @@ audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-cont background-color: rgba(20, 20, 20, 0.8); right: 9px; 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; - display: -webkit-flex; - -webkit-align-items: center; - -webkit-flex-direction: column; - box-sizing: border-box; - height: 80px; - width: 8px; - margin: 10px auto; - border-radius: 4px; - background-color: transparent; - color: rgba(230, 230, 230, 0.35); + -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: 8px !important; + margin: 10px auto !important; + border-radius: 4px !important; + background-color: transparent !important; + color: rgba(230, 230, 230, 0.35) !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 { @@ -186,9 +258,9 @@ audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webk } input[type="range"]::-webkit-media-slider-container { - display: -webkit-flex; - -webkit-align-items: center; - -webkit-flex-direction: row; /* This property is updated by C++ code. */ + display: flex; + align-items: center; + flex-direction: row; /* This property is updated by C++ code. */ box-sizing: border-box; height: 100%; width: 100%; @@ -214,87 +286,85 @@ input[type="range"]::-webkit-media-slider-thumb { audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { -webkit-appearance: media-toggle-closed-captions-button; - display: -webkit-flex; - -webkit-flex: none; + display: flex; + flex: none; border: none; box-sizing: border-box; width: 30px; height: 30px; line-height: 30px; margin: 0 9px 0 -7px; - background-repeat:no-repeat; - background-position:center; - background-image: url('data:image/svg+xml,<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata id="metadata90"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>Gnome Symbolic Icon Theme</dc:title></cc:Work></rdf:RDF></metadata><g id="layer9" transform="translate(-101,-357)"><path id="path12148" style="block-progression:tb;color:#bebebe;direction:ltr;text-indent:0;text-align:start;enable-background:accumulate;text-transform:none;" fill="#bebebe" d="m104.75,357.06c-2.0602,0-3.75,1.6898-3.75,3.75v4.4375c0,2.0602,1.6898,3.75,3.75,3.75h4.9375l3.75,2.6562,1.5938,1.125v-1.9688l-0.0313-2.5c1.1106-0.59715,1.9688-1.6526,1.9688-3.0625v-4.4375c0-2.0602-1.6898-3.75-3.75-3.75h-8.4688zm0,2,8.4688,0c0.9868,0,1.75,0.7632,1.75,1.75v4.4375c0,0.86273-0.63508,1.541-1.125,1.625l-0.84,0.12v0.84375,1.0312l-2.4062-1.6875-0.25-0.1875h-0.3125-5.2812c-0.9868,0-1.75-0.7632-1.75-1.75v-4.4375c0-0.9868,0.7632-1.75,1.75-1.75z"/></g></svg>'); + outline: none; } video::-webkit-media-controls-closed-captions-container { -webkit-appearance: media-closed-captions-container; + display: flex; position: absolute; - display: block; - right: 38px; 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 */ - overflow-x: hidden; - overflow-y: auto; - background-color: rgba(20, 20, 20, 0.8); - border-radius: 10px; cursor: default; - z-index: 2; -} - -video::-webkit-media-controls-closed-captions-track-list { - display: block; - font-family: "Helvetica Bold", Helvetica; + font-family: -webkit-small-control; 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-track-list h3 { - margin: 1px 30px; - color: #757575; - text-shadow: 0 1px 0 black; - padding-top: 0px; - font-weight: bold; +video::-webkit-media-controls-closed-captions-container.out { + border-radius: 5px; +} + +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-track-list ul { +video::-webkit-media-controls-closed-captions-container ul { list-style-type: none; margin: 0 0 4px 0; - padding: 0; - font-weight: bold; + padding: 4px 0 0 0; } -video::-webkit-media-controls-closed-captions-track-list li { +video::-webkit-media-controls-closed-captions-container li { position: relative; color: white; - background-image: none; - text-shadow: 0 1px 0 black; margin: 0; - padding-left: 37px; - padding-right: 35px; + 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; - border-top: 1px solid rgba(0, 0, 0, 0); - border-bottom: 1px solid rgba(0, 0, 0, 0); + outline: none; } -video::-webkit-media-controls-closed-captions-track-list li.selected { +video::-webkit-media-controls-closed-captions-container li.selected { background-color: rgba(230, 230, 230, 0.15); } audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { -webkit-appearance: media-enter-fullscreen-button; - display: -webkit-flex; - -webkit-flex: none; + display: flex; + flex: none; border: none; box-sizing: border-box; width: 30px; height: 30px; line-height: 30px; margin: 0 9px 0 -7px; + outline: none; } |