- Set a new starting colour that doesn't have such glaring attributes

- Fixed all the positioning and z-index'ing so that the interface is complete

git-svn-id: svn://depot/macosx/RGBConverter/trunk@244 ad1dcce9-c9fe-0310-b82b-83ea1733dbb0

diff --git a/RGB Converter.wdgt/Widget.css b/RGB Converter.wdgt/Widget.css
index 44181b39428fd4d82687369cf012aa0e4be1c604..9a9500867b555e9c639aaaf48aa731eda4431501 100644 (file)
--- a/RGB Converter.wdgt/Widget.css
+++ b/RGB Converter.wdgt/Widget.css
@@ -37,47 +37,62 @@ a
 /* ################################################################### */
 /* Front */
 
+#frontimage
+{
+       z-index: 500;
+       position: absolute;
+}
+
 #redinput
 {
+       z-index: 1000;
+       font-size: 11px;
+       
        position: absolute;
-       top: 64px;
-       left: 35px;
-       width: 50px;
+       top: 5px;
+       left: 220px;
+       width: 70px;
 }
 
 #greeninput
 {
+       z-index: 1000;
+       font-size: 11px;
+       
        position: absolute;
-       top: 64px;
-       left: 104px;
-       width: 50px;
+       top: 5px;
+       left: 317px;
+       width: 70px;
 }
 
 #blueinput
 {
+       z-index: 1000;
+       font-size: 11px;
+       
        position: absolute;
-       top: 64px;
-       left: 173px;
-       width: 50px;
+       top: 5px;
+       left: 422px;
+       width: 70px;
 }
 
 #hexinput
 {
+       z-index: 1000;
+       font-size: 11px;
+       font-weight: bold;
+       
        position: absolute;
        top: 5px;
        left: 75px;
        width: 200px;
-       font-size: 11px;
-       font-weight: bold;
-       
-       z-index: 1000;
 }
 
 /* ################################################################### */
 
 #swatch
 {
-       z-index: 1;
+       z-index: 100;
        
        position: absolute;
        top: 0px;
@@ -85,12 +100,12 @@ a
        height: 35px;
        width: 65px;
        
-       background-color: rgb(255, 255, 255);
+       background-color: rgb(81, 105, 149);
 }
 
 #swatch-red
 {
-       z-index: 1;
+       z-index: 100;
        
        position: absolute;
        top: 0px;
@@ -98,12 +113,12 @@ a
        height: 35px;
        width: 100px;
        
-       background-color: rgb(255, 0, 0);
+       background-color: rgb(81, 0, 0);
 }
 
 #swatch-green
 {
-       z-index: 1;
+       z-index: 100;
        
        position: absolute;
        top: 0px;
@@ -111,12 +126,12 @@ a
        height: 35px;
        width: 100px;
        
-       background-color: rgb(0, 255, 0);
+       background-color: rgb(0, 105, 0);
 }
 
 #swatch-blue
 {
-       z-index: 1;
+       z-index: 100;
        
        position: absolute;
        top: 0px;
@@ -124,7 +139,7 @@ a
        height: 35px;
        width: 100px;
        
-       background-color: rgb(0, 0, 255);
+       background-color: rgb(0, 0, 149);
 }
 
 /* ################################################################### */

diff --git a/RGB Converter.wdgt/Widget.html b/RGB Converter.wdgt/Widget.html
index 32e79785fcbcc1a437908ede7c87a2f847d87230..f56d1cf3f00e2e8a98c4a69de599d378c9bdef38 100644 (file)
--- a/RGB Converter.wdgt/Widget.html
+++ b/RGB Converter.wdgt/Widget.html
@@ -38,21 +38,22 @@
        <!-- front -->
     <div id="front" onmousemove="mousemove(event);" onmouseout="mouseexit(event);">
     
-               <div style="z-index: 500; position: absolute"><img src="Front.png" alt="" style="" /></div>
-               <div id="hexinput">HEX Code <input type="text" name="hexinput" id="hexinputf" size="6" maxlength="6" onblur="hexwatcher()" value="FFFFFF" /></div>
+               <div id="hexinput">HEX Code <input type="text" name="hexinput" id="hexinputf" size="6" maxlength="6" onblur="hexwatcher()" value="516995" /></div>
+               
+               <div id="redinput">Red <input type="text" name="redinput" id="redinputf" size="3" maxlength="3" onblur="rgbwatcher('red')" value="81" /></div>
+               <div id="greeninput">Green <input type="text" name="greeninput" id="greeninputf" size="3" maxlength="3" onblur="rgbwatcher('green')" value="105" /></div>
+               <div id="blueinput">Blue <input type="text" name="blueinput" id="blueinputf" size="3" maxlength="3" onblur="rgbwatcher('blue')" value="149" /></div>
                
                <div id="swatch"></div>
                <div id="swatch-red"></div>
                <div id="swatch-green"></div>
                <div id="swatch-blue"></div>
                
-               <div id="redinput"><input type="text" name="redinput" id="redinputf" style="color: red" size="3" maxlength="3" onblur="rgbwatcher('red')" value="255" /></div>
-               <div id="greeninput"><input type="text" name="greeninput" id="greeninputf" style="color: green" size="3" maxlength="3" onblur="rgbwatcher('green')" value="255" /></div>
-               <div id="blueinput"><input type="text" name="blueinput" id="blueinputf" style="color: blue" size="3" maxlength="3" onblur="rgbwatcher('blue')" value="255" /></div>
-               
                <div class="flip" id="fliprollie"></div>
                <div class="flip" id="flip" onclick="show_back(event);" onmouseover="enterflip(event);" onmouseout="exitflip(event)";></div>
                
+               <div id="frontimage"><img src="Front.png" alt="" style="" /></div>
+               
        </div>
        <!-- / front -->