Bug 1247676 - Style the placeholder-screen in in-content appearance. r=aleth
This commit is contained in:
Родитель
647972f292
Коммит
d9434c2629
|
@ -74,7 +74,6 @@
|
||||||
<deck flex="1" id="previewDeck" selectedIndex="1">
|
<deck flex="1" id="previewDeck" selectedIndex="1">
|
||||||
<vbox flex="1" id="noPreviewScreen" align="center" pack="center">
|
<vbox flex="1" id="noPreviewScreen" align="center" pack="center">
|
||||||
<hbox id="noPreviewBox" align="top">
|
<hbox id="noPreviewBox" align="top">
|
||||||
<image id="noPreviewImage"/>
|
|
||||||
<vbox id="noPreviewInnerBox" flex="1">
|
<vbox id="noPreviewInnerBox" flex="1">
|
||||||
<label id="noPreviewTitle" value="&messageStyleNoPreview.title;"/>
|
<label id="noPreviewTitle" value="&messageStyleNoPreview.title;"/>
|
||||||
<description id="noAccountDesc">&messageStyleNoPreview.description;</description>
|
<description id="noAccountDesc">&messageStyleNoPreview.description;</description>
|
||||||
|
|
|
@ -147,31 +147,33 @@ radio[pane=paneAdvanced] {
|
||||||
* No message theme preview message box
|
* No message theme preview message box
|
||||||
*/
|
*/
|
||||||
#noPreviewScreen {
|
#noPreviewScreen {
|
||||||
background-color: -moz-Dialog;
|
color: -moz-FieldText;
|
||||||
|
background-color: -moz-Field;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
#noPreviewBox {
|
#noPreviewBox {
|
||||||
background-color: -moz-Field;
|
max-width: 30em;
|
||||||
color: -moz-FieldText;
|
background: url("chrome://global/skin/icons/info.svg") left 5px no-repeat;
|
||||||
border: 1px solid ThreeDShadow;
|
background-size: 2.5em;
|
||||||
border-radius: 10px;
|
padding-right: 3.5em;
|
||||||
padding: 1.1em;
|
padding-left: 3.5em;
|
||||||
-moz-padding-start: 20px;
|
margin-left: 1.5em;
|
||||||
margin-left: 1em;
|
margin-right: 1.5em;
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
#noPreviewImage {
|
|
||||||
list-style-image: url("chrome://global/skin/icons/information-32.png");
|
|
||||||
-moz-margin-end: 1.2em;
|
|
||||||
}
|
}
|
||||||
#noPreviewInnerBox {
|
#noPreviewInnerBox {
|
||||||
max-width: 25em;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
#noPreviewTitle {
|
#noPreviewTitle {
|
||||||
margin: 0 1em 0.6em 0;
|
font-size: 2em;
|
||||||
font-size: 160%;
|
font-weight: lighter;
|
||||||
border-bottom: 1px solid ThreeDLightShadow
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: .3em;
|
||||||
|
padding-bottom: .2em;
|
||||||
|
border-bottom: 1px solid -moz-FieldText;
|
||||||
}
|
}
|
||||||
#noPreviewDesc {
|
#noPreviewDesc {
|
||||||
font-size: 110%;
|
font-size: 110%;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
radio[pane=paneGeneral],
|
radio[pane=paneGeneral],
|
||||||
radio[pane=paneMain] {
|
radio[pane=paneMain] {
|
||||||
-moz-image-region: rect(0px, 32px, 32px, 0px)
|
-moz-image-region: rect(0px, 32px, 32px, 0px)
|
||||||
}
|
}
|
||||||
radio[pane=paneGeneral]:active,
|
radio[pane=paneGeneral]:active,
|
||||||
radio[pane=paneMain]:active:hover {
|
radio[pane=paneMain]:active:hover {
|
||||||
-moz-image-region: rect(32px, 32px, 64px, 0px)
|
-moz-image-region: rect(32px, 32px, 64px, 0px)
|
||||||
|
@ -199,7 +199,7 @@ caption {
|
||||||
color: -moz-nativehyperlinktext;
|
color: -moz-nativehyperlinktext;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inline-link:not(:focus) {
|
.inline-link:not(:focus) {
|
||||||
outline: 1px dotted transparent;
|
outline: 1px dotted transparent;
|
||||||
}
|
}
|
||||||
|
@ -232,31 +232,33 @@ caption {
|
||||||
* No message theme preview message box
|
* No message theme preview message box
|
||||||
*/
|
*/
|
||||||
#noPreviewScreen {
|
#noPreviewScreen {
|
||||||
background-color: -moz-Dialog;
|
color: -moz-FieldText;
|
||||||
|
background-color: -moz-Field;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
#noPreviewBox {
|
#noPreviewBox {
|
||||||
background-color: -moz-Field;
|
max-width: 30em;
|
||||||
color: -moz-FieldText;
|
background: url("chrome://global/skin/icons/info.svg") left 5px no-repeat;
|
||||||
border: 1px solid ThreeDShadow;
|
background-size: 2.5em;
|
||||||
border-radius: 10px;
|
padding-right: 3.5em;
|
||||||
padding: 1.1em;
|
padding-left: 3.5em;
|
||||||
-moz-padding-start: 20px;
|
margin-left: 1.5em;
|
||||||
margin-left: 1em;
|
margin-right: 1.5em;
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
#noPreviewImage {
|
|
||||||
list-style-image: url("chrome://global/skin/icons/information-64.png");
|
|
||||||
-moz-margin-end: 1.2em;
|
|
||||||
}
|
}
|
||||||
#noPreviewInnerBox {
|
#noPreviewInnerBox {
|
||||||
max-width: 25em;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
#noPreviewTitle {
|
#noPreviewTitle {
|
||||||
margin: 0 1em 0.6em 0;
|
font-size: 2em;
|
||||||
font-size: 160%;
|
font-weight: lighter;
|
||||||
border-bottom: 1px solid ThreeDLightShadow
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: .3em;
|
||||||
|
padding-bottom: .2em;
|
||||||
|
border-bottom: 1px solid -moz-FieldText;
|
||||||
}
|
}
|
||||||
#noPreviewDesc {
|
#noPreviewDesc {
|
||||||
font-size: 110%;
|
font-size: 110%;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -162,31 +162,33 @@ radio[pane=paneAdvanced][selected="true"] {
|
||||||
/* No message theme preview message box */
|
/* No message theme preview message box */
|
||||||
|
|
||||||
#noPreviewScreen {
|
#noPreviewScreen {
|
||||||
background-color: -moz-Dialog;
|
color: -moz-FieldText;
|
||||||
|
background-color: -moz-Field;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
#noPreviewBox {
|
#noPreviewBox {
|
||||||
background-color: -moz-Field;
|
max-width: 30em;
|
||||||
color: -moz-FieldText;
|
background: url("chrome://global/skin/icons/info.svg") left 5px no-repeat;
|
||||||
border: 1px solid ThreeDShadow;
|
background-size: 2.5em;
|
||||||
border-radius: 10px;
|
padding-right: 3.5em;
|
||||||
padding: 1.1em;
|
padding-left: 3.5em;
|
||||||
-moz-padding-start: 20px;
|
margin-left: 1.5em;
|
||||||
margin-left: 1em;
|
margin-right: 1.5em;
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
#noPreviewImage {
|
|
||||||
list-style-image: url("chrome://global/skin/icons/information-32.png");
|
|
||||||
-moz-margin-end: 1.2em;
|
|
||||||
}
|
}
|
||||||
#noPreviewInnerBox {
|
#noPreviewInnerBox {
|
||||||
max-width: 25em;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
#noPreviewTitle {
|
#noPreviewTitle {
|
||||||
margin: 0 1em 0.6em 0;
|
font-size: 2em;
|
||||||
font-size: 160%;
|
font-weight: lighter;
|
||||||
border-bottom: 1px solid ThreeDLightShadow
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: .3em;
|
||||||
|
padding-bottom: .2em;
|
||||||
|
border-bottom: 1px solid -moz-FieldText;
|
||||||
}
|
}
|
||||||
#noPreviewDesc {
|
#noPreviewDesc {
|
||||||
font-size: 110%;
|
font-size: 110%;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -206,24 +206,27 @@
|
||||||
<deck id="conversationsDeck" flex="1">
|
<deck id="conversationsDeck" flex="1">
|
||||||
<vbox flex="1" id="noConvScreen" class="im-placeholder-screen" align="center" pack="center">
|
<vbox flex="1" id="noConvScreen" class="im-placeholder-screen" align="center" pack="center">
|
||||||
<hbox id="noConvBox" class="im-placeholder-box" align="top">
|
<hbox id="noConvBox" class="im-placeholder-box" align="top">
|
||||||
<image id="noConvImage" class="im-placeholder-image"/>
|
|
||||||
<vbox id="noConvInnerBox" class="im-placeholder-innerbox" flex="1">
|
<vbox id="noConvInnerBox" class="im-placeholder-innerbox" flex="1">
|
||||||
<label id="noConvTitle" class="im-placeholder-title" value="&chat.noConv.title;"/>
|
<label id="noConvTitle" class="im-placeholder-title">&chat.noConv.title;</label>
|
||||||
<description id="noConvDesc" class="im-placeholder-desc">&chat.noConv.description;</description>
|
<description id="noConvDesc"
|
||||||
|
class="im-placeholder-desc">&chat.noConv.description;</description>
|
||||||
</vbox>
|
</vbox>
|
||||||
<vbox id="noAccountInnerBox" hidden="true">
|
<vbox id="noAccountInnerBox" class="im-placeholder-innerbox" flex="1" hidden="true">
|
||||||
<label id="noAccountTitle" class="im-placeholder-title" value="&chat.noAccount.title;"/>
|
<label id="noAccountTitle" class="im-placeholder-title">&chat.noAccount.title;</label>
|
||||||
<description id="noAccountDesc" class="im-placeholder-desc">&chat.noAccount.description;</description>
|
<description id="noAccountDesc"
|
||||||
<hbox flex="1">
|
class="im-placeholder-desc">&chat.noAccount.description;</description>
|
||||||
|
<hbox class="im-placeholder-button-box" flex="1">
|
||||||
<spacer flex="1"/>
|
<spacer flex="1"/>
|
||||||
<button id="openIMAccountWizardButton" label="&chat.accountWizard.button;"
|
<button id="openIMAccountWizardButton" label="&chat.accountWizard.button;"
|
||||||
oncommand="openIMAccountWizard();"/>
|
oncommand="openIMAccountWizard();"/>
|
||||||
</hbox>
|
</hbox>
|
||||||
</vbox>
|
</vbox>
|
||||||
<vbox id="noConnectedAccountInnerBox" hidden="true">
|
<vbox id="noConnectedAccountInnerBox" class="im-placeholder-innerbox" flex="1" hidden="true">
|
||||||
<label id="noConnectedAccountTitle" class="im-placeholder-title" value="&chat.noConnectedAccount.title;"/>
|
<label id="noConnectedAccountTitle"
|
||||||
<description id="noConnectedAccountDesc" class="im-placeholder-desc">&chat.noConnectedAccount.description;</description>
|
class="im-placeholder-title">&chat.noConnectedAccount.title;</label>
|
||||||
<hbox flex="1">
|
<description id="noConnectedAccountDesc"
|
||||||
|
class="im-placeholder-desc">&chat.noConnectedAccount.description;</description>
|
||||||
|
<hbox class="im-placeholder-button-box" flex="1">
|
||||||
<spacer flex="1"/>
|
<spacer flex="1"/>
|
||||||
<button id="openIMAccountManagerButton" label="&chat.showAccountManager.button;"
|
<button id="openIMAccountManagerButton" label="&chat.showAccountManager.button;"
|
||||||
oncommand="openIMAccountMgr();"/>
|
oncommand="openIMAccountMgr();"/>
|
||||||
|
@ -236,7 +239,8 @@
|
||||||
<vbox flex="1" id="noPreviousConvScreen" class="im-placeholder-screen" align="center" pack="center">
|
<vbox flex="1" id="noPreviousConvScreen" class="im-placeholder-screen" align="center" pack="center">
|
||||||
<hbox id="noPreviousConvBox" class="im-placeholder-box" align="top">
|
<hbox id="noPreviousConvBox" class="im-placeholder-box" align="top">
|
||||||
<vbox id="noPreviousConvInnerBox" class="im-placeholder-innerbox" flex="1">
|
<vbox id="noPreviousConvInnerBox" class="im-placeholder-innerbox" flex="1">
|
||||||
<description id="noPreviousConvDesc" class="im-placeholder-desc">&chat.noPreviousConv.description;</description>
|
<description id="noPreviousConvDesc"
|
||||||
|
class="im-placeholder-desc">&chat.noPreviousConv.description;</description>
|
||||||
</vbox>
|
</vbox>
|
||||||
</hbox>
|
</hbox>
|
||||||
</vbox>
|
</vbox>
|
||||||
|
|
|
@ -132,7 +132,6 @@
|
||||||
<deck flex="1" id="accountsDesk" ondblclick="gAccountManager.new();">
|
<deck flex="1" id="accountsDesk" ondblclick="gAccountManager.new();">
|
||||||
<vbox flex="1" id="noAccountScreen" align="center" pack="center">
|
<vbox flex="1" id="noAccountScreen" align="center" pack="center">
|
||||||
<hbox id="noAccountBox" align="top">
|
<hbox id="noAccountBox" align="top">
|
||||||
<image id="noAccountImage"/>
|
|
||||||
<vbox id="noAccountInnerBox" flex="1">
|
<vbox id="noAccountInnerBox" flex="1">
|
||||||
<label id="noAccountTitle" value="&accountManager.noAccount.title;"/>
|
<label id="noAccountTitle" value="&accountManager.noAccount.title;"/>
|
||||||
<description id="noAccountDesc">&accountManager.noAccount.description;</description>
|
<description id="noAccountDesc">&accountManager.noAccount.description;</description>
|
||||||
|
|
|
@ -5,37 +5,71 @@
|
||||||
@import url("chrome://chat/skin/status.css");
|
@import url("chrome://chat/skin/status.css");
|
||||||
|
|
||||||
.im-placeholder-screen {
|
.im-placeholder-screen {
|
||||||
background-color: -moz-Dialog;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.im-placeholder-box {
|
|
||||||
background-color: -moz-Field;
|
|
||||||
color: -moz-FieldText;
|
color: -moz-FieldText;
|
||||||
border: 1px solid ThreeDShadow;
|
background-color: -moz-Field;
|
||||||
border-radius: 10px;
|
overflow: auto;
|
||||||
padding: 1.1em;
|
font-size: 15px;
|
||||||
-moz-padding-start: 20px;
|
font-weight: normal;
|
||||||
margin-left: 1em;
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
}
|
||||||
.im-placeholder-image {
|
|
||||||
%ifdef XP_MACOSX
|
.im-placeholder-box {
|
||||||
list-style-image: url("chrome://global/skin/icons/information-64.png");
|
max-width: calc(500px + 9em);
|
||||||
%else
|
min-height: 3em;
|
||||||
list-style-image: url("chrome://global/skin/icons/information-32.png");
|
background: url("chrome://global/skin/icons/info.svg") left 0 no-repeat;
|
||||||
%endif
|
background-size: 3em;
|
||||||
-moz-margin-end: 1.2em;
|
margin-right: .5em;
|
||||||
|
margin-left: .5em;
|
||||||
|
padding-right: 4.5em;
|
||||||
|
padding-left: 4.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.im-placeholder-innerbox {
|
.im-placeholder-innerbox {
|
||||||
max-width: 25em;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.im-placeholder-title {
|
.im-placeholder-title {
|
||||||
margin: 0 1em 0.6em 0;
|
font-size: 2em;
|
||||||
font-size: 160%;
|
font-weight: lighter;
|
||||||
border-bottom: 1px solid ThreeDLightShadow
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: .5em;
|
||||||
|
padding-bottom: .4em;
|
||||||
|
border-bottom: 1px solid -moz-FieldText;
|
||||||
}
|
}
|
||||||
|
|
||||||
.im-placeholder-desc {
|
.im-placeholder-desc {
|
||||||
font-size: 110%;
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#noPreviousConvDesc {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.im-placeholder-button-box > button {
|
||||||
|
-moz-appearance: none;
|
||||||
|
/* override forms.css */
|
||||||
|
font: inherit;
|
||||||
|
min-height: 30px;
|
||||||
|
color: -moz-FieldText;
|
||||||
|
border: 1px solid -moz-FieldText;
|
||||||
|
-moz-border-top-colors: none !important;
|
||||||
|
-moz-border-right-colors: none !important;
|
||||||
|
-moz-border-bottom-colors: none !important;
|
||||||
|
-moz-border-left-colors: none !important;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: -moz-Field;
|
||||||
|
}
|
||||||
|
|
||||||
|
.im-placeholder-button-box> button:hover {
|
||||||
|
color: -moz-ButtonHoverText;
|
||||||
|
background-color: -moz-ButtonHoverFace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.im-placeholder-button-box > button > .button-box {
|
||||||
|
padding-right: 10px !important;
|
||||||
|
padding-left: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#contactlistbox {
|
#contactlistbox {
|
||||||
|
|
|
@ -23,37 +23,39 @@ notification > hbox {
|
||||||
}
|
}
|
||||||
|
|
||||||
#noAccountScreen {
|
#noAccountScreen {
|
||||||
background-color: -moz-Dialog;
|
color: -moz-FieldText;
|
||||||
|
background-color: -moz-Field;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#noAccountBox {
|
#noAccountBox {
|
||||||
background-color: -moz-Field;
|
max-width: 30em;
|
||||||
color: -moz-FieldText;
|
background: url("chrome://global/skin/icons/info.svg") left 5px no-repeat;
|
||||||
border: 1px solid ThreeDShadow;
|
background-size: 2.5em;
|
||||||
border-radius: 10px;
|
padding-right: 3.5em;
|
||||||
padding: 1.1em;
|
padding-left: 3.5em;
|
||||||
-moz-padding-start: 20px;
|
margin-left: 1.5em;
|
||||||
margin-left: 1em;
|
margin-right: 1.5em;
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
#noAccountImage {
|
|
||||||
%ifdef XP_MACOSX
|
|
||||||
list-style-image: url("chrome://global/skin/icons/information-64.png");
|
|
||||||
%else
|
|
||||||
list-style-image: url("chrome://global/skin/icons/information-32.png");
|
|
||||||
%endif
|
|
||||||
-moz-margin-end: 1.2em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#noAccountInnerBox {
|
#noAccountInnerBox {
|
||||||
max-width: 25em;
|
opacity: .9;
|
||||||
}
|
}
|
||||||
|
|
||||||
#noAccountTitle {
|
#noAccountTitle {
|
||||||
margin: 0 1em 0.6em 0;
|
font-size: 2em;
|
||||||
font-size: 160%;
|
font-weight: lighter;
|
||||||
border-bottom: 1px solid ThreeDLightShadow
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: .3em;
|
||||||
|
padding-bottom: .2em;
|
||||||
|
border-bottom: 1px solid -moz-FieldText;
|
||||||
}
|
}
|
||||||
|
|
||||||
#noAccountDesc {
|
#noAccountDesc {
|
||||||
font-size: 110%;
|
font-size: 110%;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#accountlist {
|
#accountlist {
|
||||||
|
|
|
@ -537,8 +537,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
|
@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
|
||||||
#listPaneBox,
|
#listPaneBox {
|
||||||
.im-placeholder-screen {
|
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Загрузка…
Ссылка в новой задаче