1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/metro/theme/touchcontrols.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,209 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
1.9 +
1.10 +/* video controls */
1.11 +.controlsOverlay {
1.12 + -moz-box-pack: center;
1.13 + -moz-box-align: end;
1.14 + padding: 20px;
1.15 + -moz-box-flex: 1;
1.16 + -moz-box-orient: horizontal;
1.17 +}
1.18 +
1.19 +.controlBar {
1.20 + -moz-box-flex: 1;
1.21 + font-size: 16pt;
1.22 + padding: 10px;
1.23 + background-color: #34353a;
1.24 + border-radius: 8px;
1.25 + width: 100%;
1.26 +}
1.27 +
1.28 +.controlsSpacer {
1.29 + display: none;
1.30 + -moz-box-flex: 0;
1.31 +}
1.32 +
1.33 +.fullscreenButton,
1.34 +.playButton,
1.35 +.castingButton,
1.36 +.muteButton {
1.37 + -moz-appearance: none;
1.38 + min-height: 42px;
1.39 + min-width: 42px;
1.40 + border: none !important;
1.41 +}
1.42 +
1.43 +.fullscreenButton {
1.44 + background: url("chrome://browser/skin/images/fullscreen-hdpi.png") no-repeat center;
1.45 +}
1.46 +
1.47 +.fullscreenButton[fullscreened="true"] {
1.48 + background: url("chrome://browser/skin/images/exitfullscreen-hdpi.png") no-repeat center;
1.49 +}
1.50 +
1.51 +.playButton {
1.52 + background: url("chrome://browser/skin/images/pause-hdpi.png") no-repeat center;
1.53 +}
1.54 +
1.55 +/*
1.56 + * Normally the button bar has fullscreen spacer play spacer mute, but if
1.57 + * this is an audio control rather than a video control, the fullscreen button
1.58 + * is hidden by videocontrols.xml, and that alters the position of the
1.59 + * play button. This workaround moves it back to center.
1.60 + */
1.61 +.controlBar.audio-only .playButton {
1.62 + transform: translateX(28px);
1.63 +}
1.64 +
1.65 +.playButton[paused="true"] {
1.66 + background: url("chrome://browser/skin/images/play-hdpi.png") no-repeat center;
1.67 +}
1.68 +
1.69 +.castingButton {
1.70 + display: none;
1.71 +}
1.72 +
1.73 +.muteButton {
1.74 + background: url("chrome://browser/skin/images/mute-hdpi.png") no-repeat center;
1.75 +}
1.76 +
1.77 +.muteButton[muted="true"] {
1.78 + background: url("chrome://browser/skin/images/unmute-hdpi.png") no-repeat center;
1.79 +}
1.80 +
1.81 +/* bars */
1.82 +.scrubberStack {
1.83 + width: 100%;
1.84 + min-height: 32px;
1.85 + max-height: 32px;
1.86 + padding: 0px 8px;
1.87 + margin: 0px;
1.88 +}
1.89 +
1.90 +.bufferBar,
1.91 +.bufferBar .progress-bar,
1.92 +.progressBar,
1.93 +.progressBar .progress-bar,
1.94 +.scrubber,
1.95 +.scrubber .scale-slider,
1.96 +.scrubber .scale-thumb {
1.97 + -moz-appearance: none;
1.98 + border: none;
1.99 + padding: 0px;
1.100 + margin: 0px;
1.101 + background-color: transparent;
1.102 +}
1.103 +
1.104 +.bufferBar {
1.105 + border: 1px solid #5e6166;
1.106 +}
1.107 +
1.108 +.bufferBar,
1.109 +.progressBar {
1.110 + margin: 9px 0px 11px 0px;
1.111 + height: 8px
1.112 +}
1.113 +
1.114 +.bufferBar .progress-bar {
1.115 + background-color: #5e6166;
1.116 +}
1.117 +
1.118 +.progressBar .progress-bar {
1.119 + background-color: white;
1.120 +}
1.121 +
1.122 +.scrubber {
1.123 + margin-left: -16px;
1.124 + margin-right: -16px;
1.125 +}
1.126 +
1.127 +.scrubber .scale-thumb {
1.128 + display: -moz-box;
1.129 + background: url("chrome://browser/skin/images/scrubber-hdpi.png") no-repeat;
1.130 + height: 32px;
1.131 + width: 32px;
1.132 +}
1.133 +
1.134 +.durationBox {
1.135 + -moz-box-orient: horizontal;
1.136 + -moz-box-pack: start;
1.137 + -moz-box-align: center;
1.138 + color: white;
1.139 + font-weight: bold;
1.140 + padding: 0px 8px;
1.141 + margin-top: -6px;
1.142 +}
1.143 +
1.144 +.positionLabel {
1.145 + -moz-box-flex: 1;
1.146 +}
1.147 +
1.148 +.statusOverlay {
1.149 + -moz-box-align: center;
1.150 + -moz-box-pack: center;
1.151 + background-color: rgb(50,50,50);
1.152 +}
1.153 +
1.154 +.statusIcon {
1.155 + margin-bottom: 28px;
1.156 + width: 36px;
1.157 + height: 36px;
1.158 +}
1.159 +
1.160 +.statusIcon[type="throbber"] {
1.161 + background: url(chrome://global/skin/media/throbber.png) no-repeat center;
1.162 +}
1.163 +
1.164 +.statusIcon[type="error"] {
1.165 + background: url(chrome://global/skin/media/error.png) no-repeat center;
1.166 +}
1.167 +
1.168 +/* CSS Transitions */
1.169 +.controlBar:not([immediate]) {
1.170 + transition-property: opacity;
1.171 + transition-duration: 200ms;
1.172 +}
1.173 +
1.174 +.controlBar[fadeout] {
1.175 + opacity: 0;
1.176 +}
1.177 +
1.178 +.statusOverlay:not([immediate]) {
1.179 + transition-property: opacity;
1.180 + transition-duration: 300ms;
1.181 + transition-delay: 750ms;
1.182 +}
1.183 +
1.184 +.statusOverlay[fadeout] {
1.185 + opacity: 0;
1.186 +}
1.187 +
1.188 +.volumeStack,
1.189 +.controlBar[firstshow="true"] .muteButton,
1.190 +.controlBar[firstshow="true"] .scrubberStack,
1.191 +.controlBar[firstshow="true"] .durationBox,
1.192 +.timeLabel {
1.193 + display: none;
1.194 +}
1.195 +
1.196 +.controlBar[firstshow="true"] .playButton {
1.197 + transform: none;
1.198 +}
1.199 +
1.200 +/* Error description formatting */
1.201 +.errorLabel {
1.202 + font-family: Helvetica, Arial, sans-serif;
1.203 + font-size: 11px;
1.204 + color: #bbb;
1.205 + text-shadow:
1.206 + -1px -1px 0 #000,
1.207 + 1px -1px 0 #000,
1.208 + -1px 1px 0 #000,
1.209 + 1px 1px 0 #000;
1.210 + padding: 0 10px;
1.211 + text-align: center;
1.212 +}
