# HG changeset patch
# User Daniele Nicolodi <daniele@grinta.net>
# Date 1313260044 -7200
# Node ID 59ad887c794b5d192df3c45facdcb94eeedfc5d2
# Parent  1bfd1f5ec9baf7b1c6a90475f4f970f5d25e6c62
Improve CSS styling.

diff -r 1bfd1f5ec9ba -r 59ad887c794b src/ltpdarepo/static/style.css
--- a/src/ltpdarepo/static/style.css	Sat Aug 13 20:27:24 2011 +0200
+++ b/src/ltpdarepo/static/style.css	Sat Aug 13 20:27:24 2011 +0200
@@ -1,11 +1,23 @@
 /* color palette inspired by http://www.colourlovers.com/palette/1133393/Green_Shades */
 
-html, body {
+html, body {    
     height: 100%;
     margin: 0;
     padding: 0;
 }
 
+pre {
+    font-family: andale mono, monospace;
+}
+
+input, select {
+    font-size: 100%;
+}
+
+:focus {
+    outline: none;
+}
+
 .hidden {
     display: none;
 }
@@ -14,45 +26,37 @@
     font-size: 90%;
 }
 
-div.left {
-    float: left;
-}
-
-div.right {
-    float: right;
-}
-
 body {
-    font-family: verdana, sans-serif;
+    font-family: lucida grande, verdana, sans-serif;
     font-size: 13px;
     color: #000;
 }
 
 a {
-    color: #004B6B;
+    color: #0F67A1;
 }
 
-div.content {
+.content {
     margin: 0px 10em;
 }
 
-div.footer {
+.footer {
     margin: 0px 9.5em;
 }
 
-div.header {
-    padding: 0.7em 0 1.2em 0;
+.header {
+    padding: 1em 0 0.75em 0;
     background: #CFF09E;
     border-bottom: #BFE08E solid 5px;
 }
 
-div.header div {
+.header div {
     display: block;
     margin: 0px 10em;    
     color: #555;
 }
 
-div.header span {
+.header span {
     font-size: 90%;
 }
 
@@ -70,8 +74,9 @@
 }
 
 h2 {
-    margin: 1em 0 0 0;
+    margin: 1em 0em 0em;
     padding: 0;
+    font-size: 20px;
 }
 
 p {
@@ -81,17 +86,17 @@
 }
 
 ul {
-    margin: 15px 0 15px 0;
+    margin: 0.75em 0em 1.5em;
     padding: 0;
-    line-height: 1.4;
+    line-height: 1.5;
     list-style: none;
 }
 
 ul li:before {
-    content: "\00BB\0020";
-    color: #666;
+    content: "\00BB";
+    color: #BFBFBF;
     position: absolute;
-    margin-left: -19px;
+    margin-left: -17px;
 }
 
 ul li:hover:before {
@@ -134,7 +139,7 @@
 }
 
 div.breadcrumbs a:hover, div.user a:hover {
-    border-bottom: 1px solid #666;
+    border-bottom: 1px solid #999;
 }
 
 div.clear {
@@ -193,29 +198,25 @@
 
 /* flash messages styling */
 
-div.flash {
-    margin: 0;
-    padding: 0.5em 0 0 0;
+.flash {
+    padding: 0.5em 0em 0em;
     color: #666;
-    font-size: 90%;
 }
 
-div.flash:before {
-    content: "\00BB\0020";
-    position: absolute;
-    margin-left: -19px;
-}
-
-div.message {
+.message {
     color: #466719;
 }
 
-div.error {
+.error {
     color: #BB0000;
 }
 
 /* forms styling */
 
+form {
+    margin: 0.75em 0em;
+}
+
 fieldset {
     margin: 0;
     padding: 0;
@@ -235,35 +236,34 @@
     margin-top: 0.7em;
 }
 
-input[type=submit], #submit {
+input[type=submit], input[type=button] {
     display: inline-block;
     background: #E6E6E6;
     border: 1px solid #BFBFBF;
-    padding: 5px 10px;
-    font-family: verdana, sans-serif;
-    /* font-size: 100%; */
-    margin: 0.3em;
+    padding: 4px 10px;
+    font-family: lucida grande, verdana, sans-serif;
+    outline: none;
+    line-height: 17px;
 }
 
-input[type=submit]:hover, input[type=button]:hover, #submit:hover {
+input[type=submit]:hover, input[type=button]:hover {
     background: #CFF09E;
 }
 
 /* data table */
 
-table.listing {
+.listing {
     border-collapse: collapse;
     font-size: 90%;
     width: 100%;
     padding: 0;
-    margin: 2em 0 0.7em 0;
 }
 
-.listing td, th {
+.listing td, .listing th {
     padding: 0.3em 0.5em;
     margin: 0;
     white-space: nowrap;
-    border: 1px solid #ccc;
+    border: 1px solid #CCC;
     text-align: center;
 }
 
@@ -304,10 +304,6 @@
     border-bottom: 1px solid #666;
 }
 
-tr.details {
-    display: none;
-}
-
 /* pagination */
 
 div.pagination {
@@ -334,6 +330,8 @@
     color: #000;
 }
 
+/* activity view */
+
 .activity {
     margin: 1em;
 }
@@ -353,11 +351,6 @@
 .activity td.bars {
     padding: 0 2px;
     vertical-align: bottom;
-    /* border-bottom: 1px solid #555; */
-}
-
-.activity td.bars:hover {
-    /* border-bottom: 1px solid #BB0000; */
 }
 
 .activity td div {
@@ -369,10 +362,7 @@
 /* search form */
 
 .search {
-    margin: 1.2em 0;
-    float: left;
-    border: 4px solid #EEE;
-    -moz-border-radius: 4px;
+    margin: 1.25em 0;
 }
 
 .search form {
@@ -380,27 +370,19 @@
     padding: 0;
 }
 
-.search input {
-    margin: 0;
-    padding: 4px;
-}
-
 .search input[type=text] {
     border: 1px solid #BFBFBF;
-    border-right: none;
     font-size: 100%;
-    height: 22px;
     width: 20em;
+    padding: 5px 10px;
+    line-height: 1.3em;
 }
 
 .search input[type=submit] {
     border: 1px solid #BFBFBF;
-    background: #CFF09E;
     text-align: center;
-    font-size: 120%;
-    color: #555;
-    height: 32px;
-    width: 36px;    
+    padding: 4px 10px;
+    line-height: 18px;
 }
 
 .wrapper {
@@ -416,101 +398,163 @@
     visibility: hidden;
 }
 
-/* actions */
+/* query builder */
 
-ul.actions li {
-    line-height: 1.6em;    
+.query {
+    font-size: 90%;
+    margin: 0.5em 0.3em;
 }
 
-ul.actions li a {
-    text-decoration: none;
+/* select elements are replaced with js equivalents. avoid jumpiness */
+.query select {
+    display: none;
 }
 
-ul.actions li a:hover {
-    border-bottom: 1px solid;
+#add-dropdown {
+    width: 12em;
 }
 
-/* query builder */
+.criteria .dropdown {
+    border: none;
+}
 
-div.criteria {
-    margin: 3px;
-    border: 4px solid #EEE;
-    -moz-border-radius: 4px;
+.criteria {
+    margin: 3px -2px;
+    border: 2px solid #EEE;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
     float: left;
     clear: both;
     height: 27px;
 }
 
-div.criteria > * {
+.criteria > * {
     border: 1px solid #BFBFBF;
     margin: 0;
     float: left;
-    line-height: 1.2em;
-    font-size: 90%;
 }
 
-div.criteria .field {
+.criteria .field {
     padding: 5px 10px;
     width: 12em;
     border-right: none;
-    line-height: 1.3em;
+}
+
+.criteria .operator {
+    width: 5em;
+    border: none;
+}
+
+.criteria .value {
+    margin: 0px -1px;
+    width: 300px;
+}
+
+.criteria input.value {
+    padding: 5px 10px;
+    line-height: 13px;
+    vertical-align: bottom;
+    width: 278px;
 }
 
-div.criteria .operator {
-    width: 5em;
-    border-right: none;
+.criteria .remove {
+    height: 100%;
+    width: 28px;
+    padding: 0;
+    margin: 0;
+    outline: none;
+}
+
+/* permisions display */
+
+.permissions {
+    border-collapse: collapse;
+    margin: 1em 0em 1em;
+}
+
+.permissions th {
+    margin: 0px;
+    padding: 3px 10px;
+    border-bottom: 1px solid #BFBFBF;
 }
 
-div.criteria select {
-    padding: 4px;
+.permissions td {
+    margin: 0px;
+    padding: 3px 10px;
+    border-bottom: 1px solid #DDD;
+}
+
+.toggle { text-decoration: none; color: inherit; }
+.toggle:hover { border-bottom: 1px solid black; }
+
+/* actions */
+
+.actions {
+    padding: 0.75em 0em;
+}
+
+.actions li:before {
+    content: '';
 }
 
-div.criteria .value {
-    width: 24em;
+.actions li {
+    display: inline-block;
+}
+
+.actions a {
+    color: black;
     padding: 5px 10px;
-    border-right: none;
-    line-height: 13px !important;
+    text-transform: lowercase;
+    text-decoration: none;
+    border: 1px solid #CCC;
+    background: #EEE;
+}
+
+.actions a:hover {
+    border: 1px solid #CCC;
+    background: #CFF09E;
+}
+
+/* timespan selector */
+
+.timespan-lo {
+    width: 197px;
+    padding: 5px 10px;
     vertical-align: bottom;
 }
 
-div.criteria select.value {
-    padding: 4px;
-}
-
-div.criteria .remove {
-    padding: 4px 5px;
-}
-
-div.query {
-    margin: 0.5em;
+.timespan-hi {
+    width: 197px;
+    padding: 5px 10px;
+    vertical-align: bottom;
 }
 
-div.criteria select, div.criteria input {
-    font-size: 90%;
+.timespan-label {
+    padding: 5px 10px;
+    width: 60px;
+    border-right: none;
+    border-left: none;
+    text-align: center;
 }
 
-select, input {
-    font-size: 100%;
-    margin: 3px;
-}
-
-#save-search-criteria {
-    float: right;
-}
 
 /* object display */
 
-table.obj th {
-    text-align: right;
-    border: none;
+.obj {
+    margin: 1.25em 0em;
+    border-collapse: collapse;
 }
 
-table.obj td {
-    text-align: left;
-    border: none;
-    width: 100%;
+.obj th {
+    text-align: right;
+    white-space: nowrap;
+    border-bottom: 1px solid #DDD;
+    padding: 0.2em 0.4em;
 }
 
-table.obj tr:hover td {
-    border: none;
+.obj td {
+    text-align: left;
+    border-bottom: 1px solid #DDD;
+    padding: 0.2em 0.4em;
 }