Server selection dialog styling

diff --git a/client_backbone/css/style.css b/client_backbone/css/style.css
index 72aae7c75b120be119fa920c7833d8936719dd33..fbc037f8dbdc72b8479c1b4bf8002ab82021bbe4 100644 (file)
--- a/client_backbone/css/style.css
+++ b/client_backbone/css/style.css
@@ -1,5 +1,6 @@
 * { margin:0px; padding:0px; }
 html, body { height:100%; }
+p { margin:0.5em 0; }
 a { color:#36C; text-decoration:none; cursor:pointer; }
 
 
@@ -10,7 +11,16 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
     height:100%;
     font-family:Arial, Helvetica, sans-serif;
     font-size:14px; line-height:1.4em;
-    background:#EBEBEB;
+    background: url(http://www.origin.com/ui/skin/oauth/img/background-light.png) left top repeat-x #E3E3E3;
+    color: #555555;
+}
+
+
+
+#kiwi input {
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5),0 1px 0px rgba(255, 255, 255, 0.3);
+    border: none;
+    border-radius: 3px;
 }
 
 /**
@@ -93,6 +103,7 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
     overflow-x:wrap;
     border:none; display: none;
     height: 100%;
+    color: #333333;
 }
 .messages a {
     text-decoration:none;
@@ -154,6 +165,8 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
 }
 #controlbox .input input {
     border: medium none;
+    box-shadow: none;
+    border-radius: 0;
     outline:none;
     position:relative;
     height:100%; width:100%;
@@ -176,6 +189,8 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
     top:2; bottom:2px; left:0; width:100%;
     padding: 0.2em 1em;
     text-align: center;
+    box-shadow: none;
+    border-radius: 0;
 }
 
 
@@ -183,7 +198,7 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
 
 
 
-.server_select { width:320px;  padding:3em 0 2em 0; margin: 0 auto; }
+.server_select { width:730px;  padding:3em 0 2em 0; margin: 0 auto; overflow:hidden; }
 .server_select .more { display: none; width:270px; margin:0 auto; }
 .server_select button { float:right; padding:3px 7px; margin-top:10px; }
 .server_select input { float:right; margin-bottom:5px; padding:3px 7px; width:150px; }
@@ -203,12 +218,13 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
 
 
 
+.server_select .kiwi_logo { text-align: center; display:block; }
 .server_select .kiwi_logo h1 {
     font-size:20px;
     line-height:48px; vertical-align: middle;
-    color: #1B1B1B;
+    color: #555555;
 }
-.server_select .kiwi_logo img { float:left; margin-right:0.7em; }
+.server_select .kiwi_logo img { }
 
 
 
@@ -220,6 +236,27 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
 
 
 
+/**
+ * Reusable componants
+ */
+
+.divider-verticle {
+    border-left: 1px solid #CFCFCF;
+    border-right: 1px solid #FFFFFF;
+    position: absolute;
+    top:25px; bottom:25px;
+    right:0;
+    width:0;
+}
+
+.divider-horizontal {
+    border-top: 1px solid #CFCFCF;
+    border-bottom: 1px solid #FFFFFF;
+    position: absolute;
+    left:25px; right:25px;
+    bottom:0;
+    height:0;
+}
 
 
 

diff --git a/client_backbone/index.html b/client_backbone/index.html
index dc244a65a7ea345248cdc313f1ff853b91820722..b8909ec0996ec1b7de067a7c7dbcabaa3fa7e258 100755 (executable)
--- a/client_backbone/index.html
+++ b/client_backbone/index.html
@@ -59,35 +59,47 @@
 
     <script type="text/x-jquery-tmpl" id="tmpl_server_select">
         <div class="server_select">
-            <a class="kiwi_logo" href="http://www.kiwiirc.com/" target="_blank">
-                <h1><img src="img/ico.png" alt="KiwiIRC Logo" title="Kiwi IRC" /> Powered by Kiwi IRC</h1>
-            </a>
 
-            <div class="status"></div>
-
-            <form>
-                <div class="basic">
-                    <label for="server_select_nick">Nickname</label>
-                    <input type="text" class="nick" id="server_select_nick"> <br />
-
-                    <button type="submit">Connect..</button> <br />
-                    <a href="" onclick="return false;" class="show_more">More</a>
-                </div>
-
-                <div class="more">
-                    <label for="server_select_server">Server</label>
-                    <input type="text" class="server" id="server_select_server"> <br />
-                    <label for="server_select_channel">Channel</label>
-                    <input type="text" class="channel" id="server_select_channel"> <br />
-                    <br />
-                    <label for="server_select_port">Port</label>
-                    <input type="text" class="port" id="server_select_port"> <br />
-                    <label for="server_select_password">Password</label>
-                    <input type="text" class="password" id="server_select_password"> <br />
-                    <label for="server_select_ssl">SSL</label>
-                    <input type="checkbox" class="ssl" id="server_select_ssl">
-                </div>
-            </form>
+            <div style="position:relative;float:left;width:320px;padding-right:3em;margin-top:50px;">
+                <div class="status">Think of a nickname..</div>
+
+                <form>
+                    <div class="basic">
+                        <label for="server_select_nick">Nickname</label>
+                        <input type="text" class="nick" id="server_select_nick"> <br />
+
+                        <button type="submit">Start..</button> <br />
+                        <a href="" onclick="return false;" class="show_more">More</a>
+                    </div>
+
+                    <div class="more">
+                        <label for="server_select_server">Server</label>
+                        <input type="text" class="server" id="server_select_server"> <br />
+                        <label for="server_select_channel">Channel</label>
+                        <input type="text" class="channel" id="server_select_channel"> <br />
+                        <br />
+                        <label for="server_select_port">Port</label>
+                        <input type="text" class="port" id="server_select_port"> <br />
+                        <label for="server_select_password">Password</label>
+                        <input type="text" class="password" id="server_select_password"> <br />
+                        <label for="server_select_ssl">SSL</label>
+                        <input type="checkbox" class="ssl" id="server_select_ssl">
+                    </div>
+                </form>
+
+                <div class="divider-verticle"></div>
+            </div>
+
+            <div style="position:relative;float:left;width:320px;margin-left:3em;color:#555555;">
+                <a class="kiwi_logo" href="http://www.kiwiirc.com/" target="_blank">
+                    <img src="img/ico.png" alt="KiwiIRC Logo" title="Kiwi IRC" /> <br />
+                    <h1>Powered by Kiwi IRC</h1>
+                </a>
+
+                <p style="font-style:italic;">A <strong>hand-crafted IRC client</strong> that you can enjoy. Designed to be used <strong>easily</strong> and <strong>freely</strong>.</p>
+
+                <p style="font-size:0.9em;margin-top:2em;">This network of people may not be associated with Kiwi IRC itself. <a href="http://www.kiwiirc.com/">Kiwi IRC homepage</a> for more information. Looking for open source? try <a href="http://github.com/prawnsalad/KiwiIRC/">GitHub</a>.</p>
+            </div>
         </div>
     </script>