Copied some common css rules from Larry (with big number of TODO comments)

skins/elastic/styles/styles.less

@@ -1,7 +1,7 @@
 @import (reference) "fontawesome.less";
 @import (reference) "colors.less";
 
-/* Fonts */
+/*** Fonts ***/
 
 @font-face {
   font-family: 'Icons';
@@ -68,7 +68,7 @@ button, input, select, textarea {
 @import "layout.less";
 
 
-/* Font-icons */
+/*** Font-icons ***/
 
 .font-icon-class {
     font-size: 1.25em;
@@ -124,16 +124,10 @@ button, input, select, textarea {
 /*** Common UI elements ***/
 
 #uploadform,
-.ui.popup,
 .voice {
     display: none;
 }
 
-div.ui-dialog-content > .ui.popup,
-div.popover-content > .ui.popup {
-    display: block !important;
-}
-
 body.iframe {
     .formcontent {
         padding: 1em;
@@ -144,22 +138,6 @@ body.iframe {
     }
 }
 
-.ui-dialog iframe {
-    width: 100%;
-    height: 100%;
-    border: 0;
-}
-
-.ui-dialog-content.iframe {
-    padding: 0 !important;
-    overflow: hidden !important;
-}
-
-.ui.popup {
-    padding: 0;
-    min-width: 180px;
-}
-
 #rcmdraglayer {
     min-width: 260px;
     width: auto !important;
@@ -187,25 +165,25 @@ body.iframe {
     }
 }
 
-
-div.popover-content {
-    padding: 0;
-}
-
-div.popover > h3 {
-    display: none;
-}
-
 #content .watermark {
     background: url(../images/watermark.jpg) center no-repeat;
     width: 100%;
     height: 100%;
 }
 
+.noselect {
+    user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
 
-/* Widgets */
+/*** Widgets ***/
 
 @import "widgets/buttons.less";
+@import "widgets/dialogs.less";
 @import "widgets/taskmenu.less";
 @import "widgets/messages.less";
 @import "widgets/toolbar.less";
@@ -213,6 +191,7 @@ div.popover > h3 {
 @import "widgets/lists.less";
 @import "widgets/folderlist.less";
 @import "widgets/messagelist.less";
+@import "widgets/messagebody.less";
 @import "widgets/attachmentlist.less";
 @import "widgets/googiespell.less";
 
@@ -231,3 +210,64 @@ div.popover > h3 {
     width: 95%;
     max-width: 320px;
 }
+
+
+/*** Addressbook UI ***/
+
+#contacts-table {
+    .contact.readonly td {
+        font-style: italic;
+    }
+
+    td.action {
+        /* TODO */
+        a {
+            /* TODO */
+        }
+    }
+
+    span.email {
+        display: inline;
+        color: #69939e; /* TODO */
+        font-style: italic;
+        margin-left: 0.5em;
+    }
+}
+
+#contactpic { /* TODO */ }
+#contactphoto { /* TODO */ }
+#contacthead { /* TODO */ }
+.contactfieldgroup { /* TODO */ }
+
+
+/*** Settings UI ***/
+
+.skinselection {
+    span {
+        display: inline-block;
+        vertical-align: middle;
+        padding-right: 1em;
+    }
+
+    .skinname {
+        font-weight: bold;
+    }
+
+    .skinlicense,
+    .skinlicense a {
+        font-style: italic;
+        text-decoration: none;
+    }
+
+    .skinlicense a:hover {
+        text-decoration: underline;
+    }
+
+    .skinthumbnail {
+        width: 64px;
+        height: 64px;
+        border: 1px solid #ccc; /* TODO */
+        background: #fff;
+        border-radius: 4px;
+    }
+}

skins/elastic/styles/widgets/dialogs.less

@@ -0,0 +1,40 @@
+/*** Style for dialogs ***/
+
+/* TODO: To be reviewed with popups implementation */
+
+.ui.popup {
+    display: none;
+}
+
+div.ui-dialog-content > .ui.popup,
+div.popover-content > .ui.popup {
+    display: block !important;
+}
+
+.ui-dialog iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+.ui-dialog-content.iframe {
+    padding: 0 !important;
+    overflow: hidden !important;
+}
+
+.ui.popup {
+    padding: 0;
+    min-width: 180px;
+}
+
+div.popover-content {
+    padding: 0;
+}
+
+div.popover > h3 {
+    display: none;
+}
+
+.pgpkeyimport {
+    /* TODO */
+}

skins/elastic/styles/widgets/folderlist.less

@@ -19,13 +19,21 @@
                 font-weight: bold;
             }
 
-            &.selected > a .unreadcount {
+            &.selected .unreadcount {
                 background: /* todo */;
             }
 
-            &.recent > a .unreadcount {
+            &.recent > .unreadcount {
                 background: /* todo */;
             }
+
+            &.unread {
+                /* TODO */
+            }
+
+            &.recent {
+                /* TODO */
+            }
         }
 
         a:before {

skins/elastic/styles/widgets/lists.less

@@ -41,6 +41,11 @@
     td.selection > input {
         vertical-align: middle;
     }
+
+    /* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
+    &.focus tbody tr.focused > td:first-child {
+        border-left: 2px solid #739da8; /* TODO */
+    }
 }
 
 table.listing {
@@ -134,6 +139,9 @@ ul.listing {
     &.contact.person td.name:before {
         content: @fa-var-user;
     }
+    &.contact.group td.name:before {
+        content: @fa-var-group;
+    }
     &.general > td.section:before {
         content: @fa-var-desktop;
     }

skins/elastic/styles/widgets/messagebody.less

@@ -0,0 +1,65 @@
+/***** Styles for message body elements *****/
+
+
+#messagebody {
+    /* TODO */
+
+    &.mailvelope {
+        margin: 0;
+    }
+}
+
+div.message-part,
+div.message-htmlpart {
+    /* TODO */
+
+    blockquote {
+        color: blue;
+        border-left: 2px solid blue;
+        border-right: 2px solid blue;
+        background-color: #F6F6F6; /* TODO */
+        margin: 2px 0;
+        padding: 0 0.4em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        blockquote {
+            color: green;
+            border-left: 2px solid green;
+            border-right: 2px solid green;
+
+            blockquote {
+                color: #900;
+                border-left: 2px solid #b00;
+                border-right: 2px solid #b00;
+            }
+        }
+    }
+}
+
+div.message-partheaders {
+    /* TODO */
+}
+
+#messagepartframe {
+    border: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#messagepartheader {
+    table {
+        table-layout: fixed;
+        overflow: hidden;
+
+        td {
+            text-overflow: ellipsis;
+            overflow: hidden;
+
+            &.title {
+                width: 60px;
+                padding-right: 0;
+            }
+        }
+    }
+}

skins/elastic/styles/widgets/messagelist.less

@@ -73,6 +73,15 @@ table.fixedcopy {
     tr.deleted td.subject span.fromto {
         color: #ccc; /* TODO */
     }
+
+    tr.unread td.subject span.subject {
+        /* TODO font-weight: bold? */
+    }
+
+    /* thread parent message with unread children */
+    tr.unroot td.subject a {
+        text-decoration: underline;
+    }
 }