1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/mobile/android/themes/core/touchcontrols.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,204 @@
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: rgba(50,50,50,0.8);
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 +.playButton,
1.34 +.castingButton,
1.35 +.muteButton {
1.36 + -moz-appearance: none;
1.37 + min-height: 42px;
1.38 + min-width: 42px;
1.39 + border: none !important;
1.40 +}
1.41 +
1.42 +.playButton {
1.43 + -moz-transform: translateX(21px);
1.44 + background: url("chrome://browser/skin/images/pause-hdpi.png") no-repeat center;
1.45 +}
1.46 +
1.47 +.playButton[paused="true"] {
1.48 + background: url("chrome://browser/skin/images/play-hdpi.png") no-repeat center;
1.49 +}
1.50 +
1.51 +.castingButton {
1.52 + background: url("chrome://browser/skin/images/cast-ready-hdpi.png") no-repeat center;
1.53 +}
1.54 +
1.55 +.castingButton[active="true"] {
1.56 + background: url("chrome://browser/skin/images/cast-active-hdpi.png") no-repeat center;
1.57 +}
1.58 +
1.59 +.muteButton {
1.60 + background: url("chrome://browser/skin/images/mute-hdpi.png") no-repeat center;
1.61 +}
1.62 +
1.63 +.muteButton[muted="true"] {
1.64 + background: url("chrome://browser/skin/images/unmute-hdpi.png") no-repeat center;
1.65 +}
1.66 +
1.67 +/* This button is hidden until bug 704229 is fixed. */
1.68 +.fullscreenButton {
1.69 + display: none;
1.70 +}
1.71 +
1.72 +/* bars */
1.73 +.scrubberStack {
1.74 + width: 100%;
1.75 + min-height: 32px;
1.76 + max-height: 32px;
1.77 + padding: 0px 8px;
1.78 + margin: 0px;
1.79 +}
1.80 +
1.81 +.bufferBar,
1.82 +.bufferBar .progress-bar,
1.83 +.progressBar,
1.84 +.progressBar .progress-bar,
1.85 +.scrubber,
1.86 +.scrubber .scale-slider,
1.87 +.scrubber .scale-thumb {
1.88 + -moz-appearance: none;
1.89 + border: none;
1.90 + padding: 0px;
1.91 + margin: 0px;
1.92 + background-color: transparent;
1.93 +}
1.94 +
1.95 +.bufferBar {
1.96 + border: 1px solid #5e6166;
1.97 +}
1.98 +
1.99 +.bufferBar,
1.100 +.progressBar {
1.101 + margin: 11px 0px 9px 0px;
1.102 + height: 8px
1.103 +}
1.104 +
1.105 +.bufferBar .progress-bar {
1.106 + background-color: #5e6166;
1.107 +}
1.108 +
1.109 +.progressBar .progress-bar {
1.110 + background-color: white;
1.111 +}
1.112 +
1.113 +.scrubber {
1.114 + margin-left: -16px;
1.115 + margin-right: -16px;
1.116 +}
1.117 +
1.118 +.scrubber .scale-thumb {
1.119 + display: -moz-box;
1.120 + margin: 0px !important;
1.121 + padding: 0px !important;
1.122 + background: url("chrome://browser/skin/images/scrubber-hdpi.png") no-repeat;
1.123 + background-size: 32px 32px;
1.124 + height: 32px;
1.125 + width: 32px;
1.126 +}
1.127 +
1.128 +.durationBox {
1.129 + -moz-box-orient: horizontal;
1.130 + -moz-box-pack: start;
1.131 + -moz-box-align: center;
1.132 + color: white;
1.133 + font-weight: bold;
1.134 + padding: 0px 8px;
1.135 + margin-top: -6px;
1.136 +}
1.137 +
1.138 +.positionLabel {
1.139 + -moz-box-flex: 1;
1.140 +}
1.141 +
1.142 +.statusOverlay {
1.143 + -moz-box-align: center;
1.144 + -moz-box-pack: center;
1.145 + background-color: rgb(50,50,50);
1.146 +}
1.147 +
1.148 +.statusIcon {
1.149 + margin-bottom: 28px;
1.150 + width: 36px;
1.151 + height: 36px;
1.152 +}
1.153 +
1.154 +.statusIcon[type="throbber"] {
1.155 + background: url(chrome://global/skin/media/throbber.png) no-repeat center;
1.156 +}
1.157 +
1.158 +.statusIcon[type="error"] {
1.159 + background: url(chrome://global/skin/media/error.png) no-repeat center;
1.160 +}
1.161 +
1.162 +/* CSS Transitions */
1.163 +.controlBar:not([immediate]) {
1.164 + transition-property: opacity;
1.165 + transition-duration: 200ms;
1.166 +}
1.167 +
1.168 +.controlBar[fadeout] {
1.169 + opacity: 0;
1.170 +}
1.171 +
1.172 +.statusOverlay:not([immediate]) {
1.173 + transition-property: opacity;
1.174 + transition-duration: 300ms;
1.175 + transition-delay: 750ms;
1.176 +}
1.177 +
1.178 +.statusOverlay[fadeout] {
1.179 + opacity: 0;
1.180 +}
1.181 +
1.182 +.volumeStack,
1.183 +.controlBar[firstshow="true"] .muteButton,
1.184 +.controlBar[firstshow="true"] .scrubberStack,
1.185 +.controlBar[firstshow="true"] .durationBox,
1.186 +.timeLabel {
1.187 + display: none;
1.188 +}
1.189 +
1.190 +.controlBar[firstshow="true"] .playButton {
1.191 + -moz-transform: none;
1.192 +}
1.193 +
1.194 +/* Error description formatting */
1.195 +.errorLabel {
1.196 + font-family: Helvetica, Arial, sans-serif;
1.197 + font-size: 11px;
1.198 + color: #bbb;
1.199 + text-shadow:
1.200 + -1px -1px 0 #000,
1.201 + 1px -1px 0 #000,
1.202 + -1px 1px 0 #000,
1.203 + 1px 1px 0 #000;
1.204 + padding: 0 10px;
1.205 + text-align: center;
1.206 +}
1.207 +
