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

2016-02-11 19:03:55 +01:00 · 2016-02-11 19:03:55 +01:00 · d9434c2629
--- a/im/content/preferences/themes.xul
+++ b/im/content/preferences/themes.xul
@ -74,7 +74,6 @@
          <deck flex="1" id="previewDeck" selectedIndex="1">
            <vbox flex="1" id="noPreviewScreen" align="center" pack="center">
              <hbox id="noPreviewBox" align="top">
-                <image id="noPreviewImage"/>
                <vbox id="noPreviewInnerBox" flex="1">
                  <label id="noPreviewTitle" value="&messageStyleNoPreview.title;"/>
                  <description id="noAccountDesc">&messageStyleNoPreview.description;</description>
--- a/im/themes/preferences-gnomestripe/preferences.css
+++ b/im/themes/preferences-gnomestripe/preferences.css
@ -147,31 +147,33 @@ radio[pane=paneAdvanced] {
 * No message theme preview message box
 */
 #noPreviewScreen {
-  background-color: -moz-Dialog;
+  color: -moz-FieldText;
+  background-color: -moz-Field;
  overflow: auto;
 }
 #noPreviewBox {
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  border: 1px solid ThreeDShadow;
-  border-radius: 10px;
-  padding: 1.1em;
-  -moz-padding-start: 20px;
-  margin-left: 1em;
-  margin-right: 1em;
-}
-#noPreviewImage {
-  list-style-image: url("chrome://global/skin/icons/information-32.png");
-  -moz-margin-end: 1.2em;
+  max-width: 30em;
+  background: url("chrome://global/skin/icons/info.svg") left 5px no-repeat;
+  background-size: 2.5em;
+  padding-right: 3.5em;
+  padding-left: 3.5em;
+  margin-left: 1.5em;
+  margin-right: 1.5em;
 }
 #noPreviewInnerBox {
-  max-width: 25em;
+  opacity: .8;
 }
 #noPreviewTitle {
-  margin: 0 1em 0.6em 0;
-  font-size: 160%;
-  border-bottom: 1px solid ThreeDLightShadow
+  font-size: 2em;
+  font-weight: lighter;
+  line-height: 1.2;
+  margin: 0;
+  margin-bottom: .3em;
+  padding-bottom: .2em;
+  border-bottom: 1px solid -moz-FieldText;
 }
 #noPreviewDesc {
  font-size: 110%;
+  margin-right: 0;
+  margin-left: 0;
 }
--- a/im/themes/preferences-pinstripe/preferences.css
+++ b/im/themes/preferences-pinstripe/preferences.css
@ -19,7 +19,7 @@
 radio[pane=paneGeneral],
 radio[pane=paneMain] {
 	-moz-image-region: rect(0px, 32px, 32px, 0px)
-} 
+}
 radio[pane=paneGeneral]:active,
 radio[pane=paneMain]:active:hover {
 	-moz-image-region: rect(32px, 32px, 64px, 0px)
@ -199,7 +199,7 @@ caption {
  color: -moz-nativehyperlinktext;
  text-decoration: underline;
 }
-  
+
 .inline-link:not(:focus) {
  outline: 1px dotted transparent;
 }
@ -232,31 +232,33 @@ caption {
 * No message theme preview message box
 */
 #noPreviewScreen {
-  background-color: -moz-Dialog;
+  color: -moz-FieldText;
+  background-color: -moz-Field;
  overflow: auto;
 }
 #noPreviewBox {
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  border: 1px solid ThreeDShadow;
-  border-radius: 10px;
-  padding: 1.1em;
-  -moz-padding-start: 20px;
-  margin-left: 1em;
-  margin-right: 1em;
-}
-#noPreviewImage {
-  list-style-image: url("chrome://global/skin/icons/information-64.png");
-  -moz-margin-end: 1.2em;
+  max-width: 30em;
+  background: url("chrome://global/skin/icons/info.svg") left 5px no-repeat;
+  background-size: 2.5em;
+  padding-right: 3.5em;
+  padding-left: 3.5em;
+  margin-left: 1.5em;
+  margin-right: 1.5em;
 }
 #noPreviewInnerBox {
-  max-width: 25em;
+  opacity: .8;
 }
 #noPreviewTitle {
-  margin: 0 1em 0.6em 0;
-  font-size: 160%;
-  border-bottom: 1px solid ThreeDLightShadow
+  font-size: 2em;
+  font-weight: lighter;
+  line-height: 1.2;
+  margin: 0;
+  margin-bottom: .3em;
+  padding-bottom: .2em;
+  border-bottom: 1px solid -moz-FieldText;
 }
 #noPreviewDesc {
  font-size: 110%;
+  margin-right: 0;
+  margin-left: 0;
 }
--- a/im/themes/preferences-winstripe/preferences.css
+++ b/im/themes/preferences-winstripe/preferences.css
@ -162,31 +162,33 @@ radio[pane=paneAdvanced][selected="true"] {
 /* No message theme preview message box */

 #noPreviewScreen {
-  background-color: -moz-Dialog;
+  color: -moz-FieldText;
+  background-color: -moz-Field;
  overflow: auto;
 }
 #noPreviewBox {
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  border: 1px solid ThreeDShadow;
-  border-radius: 10px;
-  padding: 1.1em;
-  -moz-padding-start: 20px;
-  margin-left: 1em;
-  margin-right: 1em;
-}
-#noPreviewImage {
-  list-style-image: url("chrome://global/skin/icons/information-32.png");
-  -moz-margin-end: 1.2em;
+  max-width: 30em;
+  background: url("chrome://global/skin/icons/info.svg") left 5px no-repeat;
+  background-size: 2.5em;
+  padding-right: 3.5em;
+  padding-left: 3.5em;
+  margin-left: 1.5em;
+  margin-right: 1.5em;
 }
 #noPreviewInnerBox {
-  max-width: 25em;
+  opacity: .8;
 }
 #noPreviewTitle {
-  margin: 0 1em 0.6em 0;
-  font-size: 160%;
-  border-bottom: 1px solid ThreeDLightShadow
+  font-size: 2em;
+  font-weight: lighter;
+  line-height: 1.2;
+  margin: 0;
+  margin-bottom: .3em;
+  padding-bottom: .2em;
+  border-bottom: 1px solid -moz-FieldText;
 }
 #noPreviewDesc {
  font-size: 110%;
+  margin-right: 0;
+  margin-left: 0;
 }
--- a/mail/components/im/content/chat-messenger-overlay.xul
+++ b/mail/components/im/content/chat-messenger-overlay.xul
@ -206,24 +206,27 @@
          <deck id="conversationsDeck" flex="1">
            <vbox flex="1" id="noConvScreen" class="im-placeholder-screen" align="center" pack="center">
              <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">
-                  <label id="noConvTitle" class="im-placeholder-title" value="&chat.noConv.title;"/>
-                  <description id="noConvDesc" class="im-placeholder-desc">&chat.noConv.description;</description>
+                  <label id="noConvTitle" class="im-placeholder-title">&chat.noConv.title;</label>
+                  <description id="noConvDesc"
+                               class="im-placeholder-desc">&chat.noConv.description;</description>
                </vbox>
-                <vbox id="noAccountInnerBox" hidden="true">
-                  <label id="noAccountTitle" class="im-placeholder-title" value="&chat.noAccount.title;"/>
-                  <description id="noAccountDesc" class="im-placeholder-desc">&chat.noAccount.description;</description>
-                  <hbox flex="1">
+                <vbox id="noAccountInnerBox" class="im-placeholder-innerbox" flex="1" hidden="true">
+                  <label id="noAccountTitle" class="im-placeholder-title">&chat.noAccount.title;</label>
+                  <description id="noAccountDesc"
+                               class="im-placeholder-desc">&chat.noAccount.description;</description>
+                  <hbox class="im-placeholder-button-box" flex="1">
                    <spacer flex="1"/>
                    <button id="openIMAccountWizardButton" label="&chat.accountWizard.button;"
                            oncommand="openIMAccountWizard();"/>
                  </hbox>
                </vbox>
-                <vbox id="noConnectedAccountInnerBox" hidden="true">
-                  <label id="noConnectedAccountTitle" class="im-placeholder-title" value="&chat.noConnectedAccount.title;"/>
-                  <description id="noConnectedAccountDesc" class="im-placeholder-desc">&chat.noConnectedAccount.description;</description>
-                  <hbox flex="1">
+                <vbox id="noConnectedAccountInnerBox" class="im-placeholder-innerbox" flex="1" hidden="true">
+                  <label id="noConnectedAccountTitle"
+                         class="im-placeholder-title">&chat.noConnectedAccount.title;</label>
+                  <description id="noConnectedAccountDesc"
+                               class="im-placeholder-desc">&chat.noConnectedAccount.description;</description>
+                  <hbox class="im-placeholder-button-box" flex="1">
                    <spacer flex="1"/>
                    <button id="openIMAccountManagerButton" label="&chat.showAccountManager.button;"
                            oncommand="openIMAccountMgr();"/>
@ -236,7 +239,8 @@
                <vbox flex="1" id="noPreviousConvScreen" class="im-placeholder-screen" align="center" pack="center">
                  <hbox id="noPreviousConvBox" class="im-placeholder-box" align="top">
                    <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>
                  </hbox>
                </vbox>
--- a/mail/components/im/content/imAccounts.xul
+++ b/mail/components/im/content/imAccounts.xul
@ -132,7 +132,6 @@
 <deck flex="1" id="accountsDesk" ondblclick="gAccountManager.new();">
   <vbox flex="1" id="noAccountScreen" align="center" pack="center">
     <hbox id="noAccountBox" align="top">
-       <image id="noAccountImage"/>
       <vbox id="noAccountInnerBox" flex="1">
         <label id="noAccountTitle" value="&accountManager.noAccount.title;"/>
         <description id="noAccountDesc">&accountManager.noAccount.description;</description>
--- a/mail/components/im/themes/chat.css
+++ b/mail/components/im/themes/chat.css
@ -5,37 +5,71 @@
@import url("chrome://chat/skin/status.css");

 .im-placeholder-screen {
-  background-color: -moz-Dialog;
-  overflow: auto;
-}
-.im-placeholder-box {
-  background-color: -moz-Field;
  color: -moz-FieldText;
-  border: 1px solid ThreeDShadow;
-  border-radius: 10px;
-  padding: 1.1em;
-  -moz-padding-start: 20px;
-  margin-left: 1em;
-  margin-right: 1em;
+  background-color: -moz-Field;
+  overflow: auto;
+  font-size: 15px;
+  font-weight: normal;
 }
-.im-placeholder-image {
-%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;
+
+.im-placeholder-box {
+  max-width: calc(500px + 9em);
+  min-height: 3em;
+  background: url("chrome://global/skin/icons/info.svg") left 0 no-repeat;
+  background-size: 3em;
+  margin-right: .5em;
+  margin-left: .5em;
+  padding-right: 4.5em;
+  padding-left: 4.5em;
 }
+
 .im-placeholder-innerbox {
-  max-width: 25em;
+  opacity: .8;
 }
+
 .im-placeholder-title {
-  margin: 0 1em 0.6em 0;
-  font-size: 160%;
-  border-bottom: 1px solid ThreeDLightShadow
+  font-size: 2em;
+  font-weight: lighter;
+  line-height: 1.2;
+  margin: 0;
+  margin-bottom: .5em;
+  padding-bottom: .4em;
+  border-bottom: 1px solid -moz-FieldText;
 }
+
 .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 {
--- a/mail/components/im/themes/imAccounts.css
+++ b/mail/components/im/themes/imAccounts.css
@ -23,37 +23,39 @@ notification > hbox {
 }

 #noAccountScreen {
-  background-color: -moz-Dialog;
+  color: -moz-FieldText;
+  background-color: -moz-Field;
  overflow: auto;
 }
+
 #noAccountBox {
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  border: 1px solid ThreeDShadow;
-  border-radius: 10px;
-  padding: 1.1em;
-  -moz-padding-start: 20px;
-  margin-left: 1em;
-  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;
+  max-width: 30em;
+  background: url("chrome://global/skin/icons/info.svg") left 5px no-repeat;
+  background-size: 2.5em;
+  padding-right: 3.5em;
+  padding-left: 3.5em;
+  margin-left: 1.5em;
+  margin-right: 1.5em;
 }
+
 #noAccountInnerBox {
-  max-width: 25em;
+  opacity: .9;
 }
+
 #noAccountTitle {
-  margin: 0 1em 0.6em 0;
-  font-size: 160%;
-  border-bottom: 1px solid ThreeDLightShadow
+  font-size: 2em;
+  font-weight: lighter;
+  line-height: 1.2;
+  margin: 0;
+  margin-bottom: .3em;
+  padding-bottom: .2em;
+  border-bottom: 1px solid -moz-FieldText;
 }
+
 #noAccountDesc {
  font-size: 110%;
+  margin-right: 0;
+  margin-left: 0;
 }

 #accountlist {
--- a/mail/themes/windows/mail/chat.css
+++ b/mail/themes/windows/mail/chat.css
@ -537,8 +537,7 @@
 }

@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
-  #listPaneBox,
-  .im-placeholder-screen {
+  #listPaneBox {
    background-color: #fafafa;
  }
 }