border-top: 1px solid #666699;
border-bottom: 1px solid transparent;
min-width: 1px;
+ transition-property: margin-bottom, opacity, visibility;
+ transition-duration: 150ms, 150ms, 0s;
+ transition-timing-function: ease-in-out, ease-in-out, linear;
+}
+
+findbar[hidden] {
+ /* Override display:none to make the transition work. */
+ display: -moz-box;
+ visibility: collapse;
+ margin-bottom: -1em;
+ opacity: 0;
+ transition-delay: 0s, 0s, 150ms;
}
/* find-next button */
.text-link {
color: blue;
- text-decoration: underline;
cursor: pointer;
}
+.text-link:hover {
+ text-decoration: underline;
+}
+
.text-link:-moz-focusring {
/* Don't specify the outline-color, we should always use initial value. */
outline: 1px dotted;
background-color: #fff;
color: #222;
}
+
+ .completeRotation {
+ transition: transform 0.3s ease 0s;
+ }
}
background-color: rgba(102,102,153,0.75);
}
-.playButton, .muteButton {
- /* Remove the usual button appearance and styling */
+.playButton,
+.muteButton,
+.fullscreenButton {
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: center;
margin: 0px;
padding: 0px;
border: none;
min-height: 28px;
- background-color: transparent;
- background-repeat: no-repeat;
- background-position: center center;
-}
-.playButton {
min-width: 28px;
- margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
- position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
-}
-.muteButton {
- min-width: 33px;
}
.playButton {
background-image: url("chrome://global/skin/media/pauseButton.png");
+ margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
+ position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
}
+
.playButton[paused] {
background-image: url("chrome://global/skin/media/playButton.png");
}
.muteButton {
background-image: url("chrome://global/skin/media/muteButton.png");
+ min-width: 33px;
}
+
.muteButton[muted] {
background-image: url("chrome://global/skin/media/unmuteButton.png");
}
}
.fullscreenButton {
- background: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0) no-repeat center;
- margin: 0;
- padding: 0;
- min-height: 28px;
- min-width: 28px;
- border: none;
+ background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
}
.fullscreenButton[fullscreened] {
}
.timeThumb[showhours="true"] {
- background: url("chrome://global/skin/media/scrubberThumbWide.png") no-repeat center;
+ background-image: url("chrome://global/skin/media/scrubberThumbWide.png");
}
/*
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
@namespace html url(http://www.w3.org/1999/xhtml);
/* These styles affect only the bound element, not other page content. */
box-shadow: inset 0 1px 5px #808080;
padding: 5px;
-moz-user-select: none;
+ position: relative;
+}
+
+.hoverBox {
+ padding: 5px;
}
html|a {
}
.icon {
- min-width: 48px;
- min-height: 48px;
+ display: inline-block;
+ width: 48px;
+ height: 48px;
background-position: center;
background-repeat: no-repeat;
+ border: none;
+ background-color: transparent;
}
:-moz-type-unsupported .icon,
:-moz-type-unsupported-platform .icon {
:-moz-type-unsupported .icon[status="ready"] {
background-image: url("chrome://mozapps/skin/plugins/contentPluginDownload.png");
}
-:-moz-handler-clicktoplay .icon,
:-moz-handler-vulnerable-updatable .icon,
:-moz-handler-vulnerable-no-update .icon {
background-image: url("chrome://mozapps/skin/plugins/contentPluginClickToPlay.png");
}
+
+:-moz-handler-clicktoplay .icon {
+ background-image: url("chrome://mozapps/skin/plugins/contentPluginClickToPlayPlain.png");
+ background-position: 0 0;
+}
+:-moz-handler-clicktoplay .hoverBox:hover .icon,
+:-moz-handler-clicktoplay .hoverBox:hover:active .icon {
+ background-position: -48px 0;
+}
+
:-moz-handler-disabled .icon {
background-image: url("chrome://mozapps/skin/plugins/contentPluginDisabled.png");
}
}
.msg {
- font-size: 12px;
cursor: default;
+ width: 100%;
}
+:-moz-handler-clicktoplay .mainBox,
+:-moz-handler-clicktoplay .icon,
:-moz-handler-clicktoplay .msgClickToPlay,
:-moz-handler-vulnerable-updatable .msgClickToPlay,
:-moz-handler-vulnerable-no-update .msgClickToPlay {
min-height: 19px; /* height of biggest line (with throbber) */
}
-.msgBottomLinks {
- padding-left: 2px;
- padding-right: 2px;
+.submitComment {
+ width: 340px;
+ height: 70px;
+ padding: 5px;
+ border: none;
+ border-radius: 5px;
+ resize: none;
+ font-family: inherit;
+ font-size: inherit;
+}
+
+.submitURLOptInBox {
+ text-align: start;
+}
+
+.submitURLOptIn {
+ margin-left: -1px;
+}
+
+.mainBox[chromedir="rtl"] .submitURLOptIn {
+ margin-left: 0;
+ margin-right: -1px;
+}
+
+.submitButtonBox {
+ margin-top: 7px;
+}
+
+.submitButton {
+ float: right;
+}
+
+.mainBox[chromedir="rtl"] .submitButton {
+ float: left;
}
.helpIcon {
min-width: 16px;
min-height: 16px;
background: url("chrome://mozapps/skin/plugins/pluginHelp-16.png") no-repeat;
+ cursor: pointer;
+ float: left;
+}
+
+.mainBox[chromedir="rtl"] .helpIcon {
+ float: right;
+}
+
+.closeIcon {
+ display: block;
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ top: 4px;
+ right: 4px;
+ border: none;
+ background-color: transparent;
+ background-image: url("chrome://global/skin/icons/close-button.gif");
+ background-repeat: no-repeat;
+}
+
+.closeIcon:-moz-locale-dir(rtl) {
+ right: auto;
+ left: 4px;
+}
+
+:-moz-handler-clicktoplay .mainBox {
+ background-image: none;
+ background-color: rgba(255, 255, 255, .2);
+ border: 1px dashed rgba(128, 128, 128, 0.5);
+ color: #808080;
+ text-shadow: none;
+ box-shadow: none;
+ transition: background-color 150ms ease;
+}
+
+:-moz-handler-clicktoplay .mainBox:hover,
+:-moz-handler-clicktoplay .mainBox:hover:active {
+ background-color: rgba(255, 255, 255, .8);
+}
+
+:-moz-handler-clicktoplay .mainBox,
+:-moz-handler-clicktoplay html|a {
+ color: #000000;
+}
+
+:-moz-handler-clicktoplay .hoverBox:hover,
+:-moz-handler-clicktoplay .hoverBox:hover html|a,
+:-moz-handler-clicktoplay .hoverBox:hover:active,
+:-moz-handler-clicktoplay .hoverBox:hover:active html|a {
+}
+
+:-moz-handler-clicktoplay .closeIcon {
+ background-image: url("chrome://mozapps/skin/plugins/contentPluginClose.png");
}
border-top: 3px solid #000000;
border-bottom: none;
min-width: 1px;
+ transition-property: margin-bottom, opacity, visibility;
+ transition-duration: 150ms, 150ms, 0s;
+ transition-timing-function: ease-in-out, ease-in-out, linear;
+}
+
+findbar[hidden] {
+ /* Override display:none to make the transition work. */
+ display: -moz-box;
+ visibility: collapse;
+ margin-bottom: -1em;
+ opacity: 0;
+ transition-delay: 0s, 0s, 150ms;
}
/* find-next button */
.text-link {
color: #3333FF;
- text-decoration: underline;
cursor: pointer;
}
+.text-link:hover {
+ text-decoration: underline;
+}
+
.text-link:-moz-focusring {
/* Don't specify the outline-color, we should always use initial value. */
outline: 1px dotted;
background-color: #FFFFFF;
color: #221500;
}
+
+ .completeRotation {
+ transition: transform 0.3s ease 0s;
+ }
}
background-color: rgba(156,156,255,0.75);
}
-.playButton, .muteButton {
- /* Remove the usual button appearance and styling */
+.playButton,
+.muteButton,
+.fullscreenButton {
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: center;
margin: 0px;
padding: 0px;
border: none;
min-height: 28px;
- background-color: transparent;
- background-repeat: no-repeat;
- background-position: center center;
-}
-.playButton {
min-width: 28px;
- margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
- position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
}
-.muteButton {
- min-width: 33px;
-}
-.playButton:hover, .muteButton:hover {
+
+.playButton:hover,
+.muteButton:hover,
+.fullscreenButton:hover {
background-color: rgba(255,207,0,0.75);
}
+
+.playButton:hover:active,
+.muteButton:hover:active,
+.fullscreenButton:hover:active {
+ background-color: rgba(255,159,0,0.75);
+}
+
.playButton:-moz-focusring > .button-box,
-.muteButton:-moz-focusring > .button-box {
+.muteButton:-moz-focusring > .button-box,
+.fullscreenButton:-moz-focusring > .button-box {
border: 1px dotted rgba(0,0,0,0.75);
}
.playButton {
background-image: url("chrome://global/skin/media/pauseButton.png");
+ margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
+ position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
}
+
.playButton:hover {
background-image: url("chrome://global/skin/media/pauseButton-hover.png");
}
+
.playButton[paused] {
background-image: url("chrome://global/skin/media/playButton.png");
}
+
.playButton[paused]:hover {
background-image: url("chrome://global/skin/media/playButton-hover.png");
}
.muteButton {
background-image: url("chrome://global/skin/media/muteButton.png");
+ min-width: 33px;
}
+
.muteButton:hover {
background-image: url("chrome://global/skin/media/muteButton-hover.png");
}
+
.muteButton[muted] {
background-image: url("chrome://global/skin/media/unmuteButton.png");
}
+
.muteButton[muted]:hover {
background-image: url("chrome://global/skin/media/unmuteButton-hover.png");
}
}
.fullscreenButton {
- background: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0) no-repeat center;
- margin: 0;
- padding: 0;
- min-height: 28px;
- min-width: 28px;
- border: none;
+ background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
}
.fullscreenButton:hover {
- background-color: rgba(255,207,0,0.75);
background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 16, 32, 0);
}
}
.fullscreenButton[fullscreened]:hover {
- background-color: rgba(255,207,0,0.75);
background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 32, 32, 16);
}
}
.timeThumb[showhours="true"] {
- background: url("chrome://global/skin/media/scrubberThumbWide.png") no-repeat center;
+ background-image: url("chrome://global/skin/media/scrubberThumbWide.png");
}
/*
box-shadow: inset 0 1px 5px #8050B0;
padding: 5px;
-moz-user-select: none;
+ position: relative;
}
.hoverBox {
}
.msg {
- font-size: 12px;
cursor: default;
+ width: 100%;
}
:-moz-handler-clicktoplay .mainBox,
float: left;
}
-.msgBottomLinks {
- padding-left: 2px;
- padding-right: 2px;
-}
-
.helpIcon {
float: left;
display: inline-block;
background-image: none;
background-color: rgba(0, 0, 0, .2);
border: 2px dashed rgba(255, 207, 0, 0.7);
- border-radius: 3px;
+ border-radius: 8px;
color: #8050B0;
text-shadow: none;
box-shadow: none;