CSS changes for Composer toolbars, b=47503, r=jfrancis

themes/blue/editor/EditorDialog.css

@@ -82,9 +82,8 @@ titledbox {
 
 .color-well {
   width:20px;
-  height: 1em; 
+  height: 1.2em; 
   border: 1px inset #CCCCCC;
-  /* Background color is set at runtime */
 }
 
 .color-well[default="true"] {
@@ -92,6 +91,25 @@ titledbox {
   background-color: inherit;
 }
 
+#ColorPickerSwatch {
+  border : 2px outset #CCCCCC;
+  width: 25px;
+  height: 20px;
+  margin: 0px 3px 0px 0px;
+}
+
+#ColorPickerSwatch[default="true"] {
+  border : 2px solid transparent;
+  background-color: inherit;
+}
+
+#LastPickedColor {
+  width: 17px;
+  height: 1.2em; 
+  border: 1px inset #CCCCCC;
+  margin-bottom: 2px;
+}
+
 .popup-trigger {
   list-style-image: url(chrome://global/skin/scroll-down.gif);
 }

themes/blue/editor/EditorToolbars.css

@@ -47,6 +47,11 @@
   border: 1px inset white;
 }
 
+.button-toolbar-2 {
+  min-width: 3.4em; 
+}
+
+
 /* THIS DOESN'T WORK ON <text>! */
 .center {
   text-align: center;
@@ -334,14 +339,10 @@ button.edit-mode > .button-internal-box > .button.icon:hover:active
   border:  1px solid white;
 }
 
-#TextColorPopupButton {
+#TextColorButton {
   margin: 2px 9px 9px 2px;
-  /* TEMP: Set color here. TODO: Set color from page */
-  background-color: #AA0000;
 }
 
-#BackColorPopupButton {
+#BackgroundColorButton {
   margin: 9px 2px 2px 9px;
-  /* TEMP: Set color here. TODO: Set color from page */
-  background-color: #FFFF00;
 }

themes/classic/editor/EditorDialog.css

@@ -92,6 +92,25 @@ titledbox {
   background-color: inherit;
 }
 
+#ColorPickerSwatch {
+  border : 2px outset #CCCCCC;
+  width: 25px;
+  height: 20px;
+  margin: 0px 3px 0px 0px;
+}
+
+#ColorPickerSwatch[default="true"] {
+  border : 2px solid transparent;
+  background-color: inherit;
+}
+
+#LastPickedColor {
+  width: 17px;
+  height: 1.2em; 
+  border: 1px inset #CCCCCC;
+  margin-bottom: 2px;
+}
+
 .popup-trigger {
   list-style-image: url(chrome://global/skin/scroll-down.gif);
 }

themes/classic/editor/EditorToolbars.css

@@ -38,6 +38,11 @@
   overflow:      hidden;
 }
 
+/* TODO: Make a Windows-specific version to use "threedface",
+         "threedhighlight", and "threedshadow" 
+         for button background-color and shading
+*/
+
 button.edit-mode:hover, button.edit-mode:hover:active,
 button.edit-mode {
   /* We need this to suppress Ben's different bindings for classic buttons */
@@ -851,14 +856,10 @@ button.edit-mode > .button-internal-box > .button.icon:hover:active
   border:  1px solid #000000;
 }
 
-#TextColorPopupButton {
+#TextColorButton {
   margin: 2px 9px 9px 2px;
-  /* TEMP: Set color here. TODO: Set color from page */
-  background-color: #AA0000;
 }
 
-#BackColorPopupButton {
+#BackgroundColorButton {
   margin: 9px 2px 2px 9px;
-  /* TEMP: Set color here. TODO: Set color from page */
-  background-color: #FFFF00;
 }

themes/modern/editor/EditorDialog.css

@@ -82,9 +82,8 @@ titledbox {
 
 .color-well {
   width:20px;
-  height: 1em; 
+  height: 1.2em; 
   border: 1px inset #CCCCCC;
-  /* Background color is set at runtime */
 }
 
 .color-well[default="true"] {
@@ -92,6 +91,25 @@ titledbox {
   background-color: inherit;
 }
 
+#ColorPickerSwatch {
+  border : 2px outset #CCCCCC;
+  width: 25px;
+  height: 20px;
+  margin: 0px 3px 0px 0px;
+}
+
+#ColorPickerSwatch[default="true"] {
+  border : 2px solid transparent;
+  background-color: inherit;
+}
+
+#LastPickedColor {
+  width: 17px;
+  height: 1.2em; 
+  border: 1px inset #CCCCCC;
+  margin-bottom: 2px;
+}
+
 .popup-trigger {
   list-style-image: url(chrome://global/skin/scroll-down.gif);
 }

themes/modern/editor/EditorToolbars.css

@@ -47,6 +47,11 @@
   border: 1px inset white;
 }
 
+.button-toolbar-2 {
+  min-width: 3.4em; 
+}
+
+
 /* THIS DOESN'T WORK ON <text>! */
 .center {
   text-align: center;
@@ -334,14 +339,10 @@ button.edit-mode > .button-internal-box > .button.icon:hover:active
   border:  1px solid white;
 }
 
-#TextColorPopupButton {
+#TextColorButton {
   margin: 2px 9px 9px 2px;
-  /* TEMP: Set color here. TODO: Set color from page */
-  background-color: #AA0000;
 }
 
-#BackColorPopupButton {
+#BackgroundColorButton {
   margin: 9px 2px 2px 9px;
-  /* TEMP: Set color here. TODO: Set color from page */
-  background-color: #FFFF00;
 }