Bug 1247676 - Style the placeholder-screen in in-content appearance. r=aleth

This commit is contained in:
Richard Marti 2016-02-11 19:03:55 +01:00
Родитель 647972f292
Коммит d9434c2629
9 изменённых файлов: 156 добавлений и 113 удалений

Просмотреть файл

@ -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;
} }
} }