app/views/maily/shared/_stylesheet.html.erb in maily-1.0.0 vs app/views/maily/shared/_stylesheet.html.erb in maily-2.0.0

@@ -1,60 +1,61 @@
 <%
-  blue       = "#59abc6"
-  grey       = "#cccccc"
-  bluegrey   = "#2f738a"
-  darkgrey   = "#666666"
-  textColor  = "#333333"
-  linkColor  = blue
-  hoverColor = bluegrey
+  blue          = "#59abc6"
+  grey          = "#cccccc"
+  dark_blue     = "#2f738a"
+  dark_grey     = "#666666"
+  text_color    = "#333333"
+  link_color    = blue
+  hover_color   = dark_blue
+  border_radius = "3px"
 %>
 
 <style>
   /* Body */
   body {
-    color: <%= textColor %>;
+    color: <%= text_color %>;
     font-size: 1em;
     font-family: "Helvetica Neue", Helvetica, sans-serif;
   }
 
   /* Links & Buttons */
   a {
-    color: <%= linkColor %>;
+    color: <%= link_color %>;
     text-decoration: none;
   }
   a:hover {
-    color: <%= hoverColor %>;
+    color: <%= hover_color %>;
   }
   .button {
     cursor: pointer;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     padding: 0;
     border: none;
     background: none;
-    color: <%= linkColor %>;
+    color: <%= link_color %>;
   }
   .button:hover {
-    color: <%= hoverColor %>;
+    color: <%= hover_color %>;
   }
 
   /* Inputs */
   input {
     font-size: 100%;
     font-family: inherit;
     height: 1.2em;
     border: solid 1px <%= grey %>;
-    border-radius: 6px;
-    background: "#ffffff";
+    border-radius: <%= border_radius %>;
+    background: #ffffff
     line-height: 1;
     padding-left: 0.5em;
   }
 
   ::-webkit-input-placeholder, ::-moz-placeholder {
     font-weight: 300;
-    font-size: 0.8em;
-    color: <%= darkgrey %>;
+    font-size: 0.9em;
+    color: <%= dark_grey %>;
   }
 
   /* Header */
   header.header, footer.footer {
     position: fixed;
@@ -100,11 +101,11 @@
   .content {
     margin-right: 2em;
     margin-left: 1em;
     padding-left: 20%;
   }
-  ul.action_bar {
+  ul.action_bar, ul.version_list {
     margin: 0 0 5px;
     padding: 0;
     list-style: none;
     font-size: 1.2em;
   }
@@ -128,10 +129,21 @@
     float: right;
   }
   ul.action_bar li.languages a {
     font-size: 0.9em;
   }
+  .version_list_wrapper {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    border: solid 1px #cccccc;
+    border-radius: <%= border_radius %>;
+    margin: 2% 0;
+  }
+  ul.version_list {
+    font-size: 1em;
+    line-height: 1.5em;
+  }
   li.splitter {
     width: 1px;
     border-left: 1px <%= grey %> solid;
     text-indent: -999999em;
   }
@@ -146,28 +158,28 @@
     height: 100%;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     padding: 1em;
     border: solid 1px <%= grey %>;
-    border-radius: 3px;
+    border-radius: <%= border_radius %>;
   }
   .mail_preview .mail_details {
     margin: 0 0 1em 0;
     padding: 0;
-    color: <%= darkgrey %>;
+    color: <%= dark_grey %>;
     list-style: none;
-    font-size: 0.8em;
+    font-size: 0.9em;
   }
   .mail_preview .mail_details li {
-    line-height: 1.5em;
+    line-height: 1em;
   }
   .mail_preview .mail_attachments {
     padding: 1em 0 0 0;
     border-top: solid 1px <%= grey %>;
-    color: <%= darkgrey %>;
+    color: <%= dark_grey %>;
     list-style: none;
-    font-size: 0.8em;
+    font-size: 0.9em;
   }
   .mail_preview .mail_attachments ul {
     display: inline-block;
     margin: 0;
     padding: 0;
@@ -180,11 +192,11 @@
   }
   .mail_preview iframe.mail_iframe {
     padding-top: 1em;
     border: none;
     border-top: solid 1px <%= grey %>;
-    border-radius: 3px;
+    border-radius: <%= border_radius %>;
     min-height: 100px;
   }
   .welcome_message {
     margin-top: 3em;
     max-width: 80%;
@@ -200,11 +212,11 @@
   }
   .format_mail li {
     float: left;
   }
   .format_mail li a.format_selected {
-    color: <%= hoverColor %>;
+    color: <%= hover_color %>;
     font-weight: bold;
   }
   .format_mail li + li {
     margin: 0 0 0 0.4em;
     padding: 0 0 0 0.4em;
@@ -224,43 +236,43 @@
     float: left;
     width: 20%;
     max-height: 90vh;
     overflow-y: scroll;
   }
-  aside.sidebar section.nav_list {
-    margin: 0 0 1.5em 1.5em;
+  section.nav_list {
+    margin: 0 0 1em 0em;
   }
-  aside.sidebar section.nav_list .nav_title {
+  section.nav_list .nav_title {
     margin: 0 0 0.4em;
     font-weight: 400;
     font-size: 1.2em;
   }
-  aside.sidebar section.nav_list ul {
+  section.nav_list ul {
     margin: 0;
     padding: 0;
     list-style: none;
   }
-  aside.sidebar section.nav_list ul li {
+  section.nav_list ul li {
     margin-bottom: 0.4em;
     list-style: none;
   }
-  aside.sidebar section.nav_list ul li a {
-    color: <%= linkColor %>;
+  section.nav_list a {
     text-decoration: none;
     font-size: 0.9em;
   }
-  aside.sidebar section.nav_list ul li a:hover, aside.sidebar section.nav_list ul li a.selected_mail {
-    color: <%= hoverColor %>;
+  section.nav_list a.selected_mail, section.nav_list a:hover,
+  .version_list a.selected_mail, .version_list a:hover {
+    color: <%= hover_color %>;
     font-weight: bold;
   }
 
   /* Alert messages */
   .alert {
-    border-radius: 3px;
+    border-radius: <%= border_radius %>;
     padding: 16px;
     margin-bottom: 1.1em;
-    color: "#ffffff";
-    background-color: <%= bluegrey %>;
+    color: #ffffff;
+    background-color: <%= dark_blue %>;
   }
 
   /* Icons */
   img.icon {
     width: 20px;