browser/metro/theme/touchcontrols.css

Wed, 31 Dec 2014 06:55:50 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:55:50 +0100
changeset 2
7e26c7da4463
permissions
-rw-r--r--

Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2

michael@0 1 /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0 2 * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0 4
michael@0 5 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
michael@0 6
michael@0 7 /* video controls */
michael@0 8 .controlsOverlay {
michael@0 9 -moz-box-pack: center;
michael@0 10 -moz-box-align: end;
michael@0 11 padding: 20px;
michael@0 12 -moz-box-flex: 1;
michael@0 13 -moz-box-orient: horizontal;
michael@0 14 }
michael@0 15
michael@0 16 .controlBar {
michael@0 17 -moz-box-flex: 1;
michael@0 18 font-size: 16pt;
michael@0 19 padding: 10px;
michael@0 20 background-color: #34353a;
michael@0 21 border-radius: 8px;
michael@0 22 width: 100%;
michael@0 23 }
michael@0 24
michael@0 25 .controlsSpacer {
michael@0 26 display: none;
michael@0 27 -moz-box-flex: 0;
michael@0 28 }
michael@0 29
michael@0 30 .fullscreenButton,
michael@0 31 .playButton,
michael@0 32 .castingButton,
michael@0 33 .muteButton {
michael@0 34 -moz-appearance: none;
michael@0 35 min-height: 42px;
michael@0 36 min-width: 42px;
michael@0 37 border: none !important;
michael@0 38 }
michael@0 39
michael@0 40 .fullscreenButton {
michael@0 41 background: url("chrome://browser/skin/images/fullscreen-hdpi.png") no-repeat center;
michael@0 42 }
michael@0 43
michael@0 44 .fullscreenButton[fullscreened="true"] {
michael@0 45 background: url("chrome://browser/skin/images/exitfullscreen-hdpi.png") no-repeat center;
michael@0 46 }
michael@0 47
michael@0 48 .playButton {
michael@0 49 background: url("chrome://browser/skin/images/pause-hdpi.png") no-repeat center;
michael@0 50 }
michael@0 51
michael@0 52 /*
michael@0 53 * Normally the button bar has fullscreen spacer play spacer mute, but if
michael@0 54 * this is an audio control rather than a video control, the fullscreen button
michael@0 55 * is hidden by videocontrols.xml, and that alters the position of the
michael@0 56 * play button. This workaround moves it back to center.
michael@0 57 */
michael@0 58 .controlBar.audio-only .playButton {
michael@0 59 transform: translateX(28px);
michael@0 60 }
michael@0 61
michael@0 62 .playButton[paused="true"] {
michael@0 63 background: url("chrome://browser/skin/images/play-hdpi.png") no-repeat center;
michael@0 64 }
michael@0 65
michael@0 66 .castingButton {
michael@0 67 display: none;
michael@0 68 }
michael@0 69
michael@0 70 .muteButton {
michael@0 71 background: url("chrome://browser/skin/images/mute-hdpi.png") no-repeat center;
michael@0 72 }
michael@0 73
michael@0 74 .muteButton[muted="true"] {
michael@0 75 background: url("chrome://browser/skin/images/unmute-hdpi.png") no-repeat center;
michael@0 76 }
michael@0 77
michael@0 78 /* bars */
michael@0 79 .scrubberStack {
michael@0 80 width: 100%;
michael@0 81 min-height: 32px;
michael@0 82 max-height: 32px;
michael@0 83 padding: 0px 8px;
michael@0 84 margin: 0px;
michael@0 85 }
michael@0 86
michael@0 87 .bufferBar,
michael@0 88 .bufferBar .progress-bar,
michael@0 89 .progressBar,
michael@0 90 .progressBar .progress-bar,
michael@0 91 .scrubber,
michael@0 92 .scrubber .scale-slider,
michael@0 93 .scrubber .scale-thumb {
michael@0 94 -moz-appearance: none;
michael@0 95 border: none;
michael@0 96 padding: 0px;
michael@0 97 margin: 0px;
michael@0 98 background-color: transparent;
michael@0 99 }
michael@0 100
michael@0 101 .bufferBar {
michael@0 102 border: 1px solid #5e6166;
michael@0 103 }
michael@0 104
michael@0 105 .bufferBar,
michael@0 106 .progressBar {
michael@0 107 margin: 9px 0px 11px 0px;
michael@0 108 height: 8px
michael@0 109 }
michael@0 110
michael@0 111 .bufferBar .progress-bar {
michael@0 112 background-color: #5e6166;
michael@0 113 }
michael@0 114
michael@0 115 .progressBar .progress-bar {
michael@0 116 background-color: white;
michael@0 117 }
michael@0 118
michael@0 119 .scrubber {
michael@0 120 margin-left: -16px;
michael@0 121 margin-right: -16px;
michael@0 122 }
michael@0 123
michael@0 124 .scrubber .scale-thumb {
michael@0 125 display: -moz-box;
michael@0 126 background: url("chrome://browser/skin/images/scrubber-hdpi.png") no-repeat;
michael@0 127 height: 32px;
michael@0 128 width: 32px;
michael@0 129 }
michael@0 130
michael@0 131 .durationBox {
michael@0 132 -moz-box-orient: horizontal;
michael@0 133 -moz-box-pack: start;
michael@0 134 -moz-box-align: center;
michael@0 135 color: white;
michael@0 136 font-weight: bold;
michael@0 137 padding: 0px 8px;
michael@0 138 margin-top: -6px;
michael@0 139 }
michael@0 140
michael@0 141 .positionLabel {
michael@0 142 -moz-box-flex: 1;
michael@0 143 }
michael@0 144
michael@0 145 .statusOverlay {
michael@0 146 -moz-box-align: center;
michael@0 147 -moz-box-pack: center;
michael@0 148 background-color: rgb(50,50,50);
michael@0 149 }
michael@0 150
michael@0 151 .statusIcon {
michael@0 152 margin-bottom: 28px;
michael@0 153 width: 36px;
michael@0 154 height: 36px;
michael@0 155 }
michael@0 156
michael@0 157 .statusIcon[type="throbber"] {
michael@0 158 background: url(chrome://global/skin/media/throbber.png) no-repeat center;
michael@0 159 }
michael@0 160
michael@0 161 .statusIcon[type="error"] {
michael@0 162 background: url(chrome://global/skin/media/error.png) no-repeat center;
michael@0 163 }
michael@0 164
michael@0 165 /* CSS Transitions */
michael@0 166 .controlBar:not([immediate]) {
michael@0 167 transition-property: opacity;
michael@0 168 transition-duration: 200ms;
michael@0 169 }
michael@0 170
michael@0 171 .controlBar[fadeout] {
michael@0 172 opacity: 0;
michael@0 173 }
michael@0 174
michael@0 175 .statusOverlay:not([immediate]) {
michael@0 176 transition-property: opacity;
michael@0 177 transition-duration: 300ms;
michael@0 178 transition-delay: 750ms;
michael@0 179 }
michael@0 180
michael@0 181 .statusOverlay[fadeout] {
michael@0 182 opacity: 0;
michael@0 183 }
michael@0 184
michael@0 185 .volumeStack,
michael@0 186 .controlBar[firstshow="true"] .muteButton,
michael@0 187 .controlBar[firstshow="true"] .scrubberStack,
michael@0 188 .controlBar[firstshow="true"] .durationBox,
michael@0 189 .timeLabel {
michael@0 190 display: none;
michael@0 191 }
michael@0 192
michael@0 193 .controlBar[firstshow="true"] .playButton {
michael@0 194 transform: none;
michael@0 195 }
michael@0 196
michael@0 197 /* Error description formatting */
michael@0 198 .errorLabel {
michael@0 199 font-family: Helvetica, Arial, sans-serif;
michael@0 200 font-size: 11px;
michael@0 201 color: #bbb;
michael@0 202 text-shadow:
michael@0 203 -1px -1px 0 #000,
michael@0 204 1px -1px 0 #000,
michael@0 205 -1px 1px 0 #000,
michael@0 206 1px 1px 0 #000;
michael@0 207 padding: 0 10px;
michael@0 208 text-align: center;
michael@0 209 }

mercurial