No more rounded corners on many UI elements, since the rounding was done by a

browser-specific CSS hack and looked crappy. Those elements that are still
rounded are now implemented with nice smooth images instead.

Also changed downloaded HTML generation to specify sans-serif for the font.

static/css/download.css

@@ -2,6 +2,7 @@ body {
   padding: 1em;
   background-color: #fafafa;
   line-height: 140%;
+  font-family: sans-serif;
 }
 
 #center_area {
@@ -18,8 +19,6 @@ body {
   border: 1px solid #999999;
   margin-bottom: 0.75em;
   background-color: #ffffff;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 h1 {
@@ -37,8 +36,6 @@ h3 {
   border-width: 0px;
   background-color: #d0e0f0;
   outline: none;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .button:hover {
@@ -49,8 +46,6 @@ h3 {
   margin-top: 0.25em;
   padding: 0.25em;
   border: #999999 1px solid;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 ul li {

static/css/note.css

@@ -67,8 +67,6 @@ h3 {
   font-size: 100%;
   outline: none;
   cursor: pointer;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .button:hover {
@@ -79,8 +77,6 @@ h3 {
   margin-top: 0.25em;
   padding: 0.25em;
   border: #999999 1px solid;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 ul {

static/css/style.css

@@ -251,8 +251,6 @@ ol li {
 #search_text {
   padding: 0.25em;
   border: #999999 1px solid;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 #user_area {
@@ -265,21 +263,15 @@ ol li {
 }
 
 #notebook_header_area {
-  -moz-border-radius: 0.5em 0.5em 0.5em 0;
-  -webkit-border-radius: 0.5em 0.5em 0.5em 0;
+  padding: 0.2em;
 }
 
 #notebook_border {
-  padding: 0 0 0 0.3em;
-  -moz-border-radius: 0 0 0 1px;
-  -webkit-border-radius: 0 0 0 1px;
+  padding: 0 0 0 0.4em;
 }
 
 #notebook_background {
   padding: 0.25em 0.5em 0 1em;
-  background-color: #fafafa;
-  -moz-border-radius: 0.5em 0 0 0;
-  -webkit-border-radius: 0.5em 0 0 0;
 }
 
 #static_notes {
@@ -301,8 +293,6 @@ ol li {
   text-align: left;
   padding: 0.5em;
   background-color: #fafafa;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .blank_note_stub_hidden_border {
@@ -330,8 +320,6 @@ ol li {
   font-size: 100%;
   outline: none;
   cursor: pointer;
-  -moz-border-radius: 0.25em;
-  -webkit-border-radius: 0.25em;
 }
 
 .note_button:hover {
@@ -347,8 +335,6 @@ ol li {
   border: 1px solid #999999;
   margin-bottom: 0.75em;
   background-color: #ffffff;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .focused_note_frame {
@@ -382,8 +368,6 @@ ol li {
   padding: 0.5em;
   border: 1px solid #000000;
   background: #ffff99;
-  -moz-border-radius: 0.25em;
-  -webkit-border-radius: 0.25em;
 }
 
 .pulldown_link {
@@ -401,16 +385,12 @@ ol li {
   margin-bottom: 0.5em;
   font-weight: bold;
   background-color: #ffcc66;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .message_inner {
   padding: 0.5em;
   line-height: 140%;
   background-color: #ffaa44;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .error {
@@ -420,8 +400,6 @@ ol li {
   font-weight: bold;
   color: #ffffff;
   background-color: #ff3333;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .error_inner {
@@ -429,8 +407,6 @@ ol li {
   line-height: 140%;
   color: #ffffff;
   background-color: #dd1111;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .message_button {
@@ -441,8 +417,6 @@ ol li {
   font-size: 100%;
   outline: none;
   cursor: pointer;
-  -moz-border-radius: 0.25em;
-  -webkit-border-radius: 0.25em;
 }
 
 .message_button:hover {
@@ -454,8 +428,6 @@ ol li {
   color: #ffffff;
   border: 1px solid #005500;
   background-color: #11bb11;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .error_box {
@@ -472,8 +444,6 @@ ol li {
   margin-right: 0.5em;
   padding: 0.25em;
   border: #999999 1px solid;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .link_area_item {
@@ -481,7 +451,8 @@ ol li {
   padding: 0.25em 0.25em 0.25em 0.5em;
 }
 
-.storage_usage_area {
+#storage_usage_area {
+  padding-top: 0.1em;
 }
 
 .storage_usage_low {
@@ -502,16 +473,60 @@ ol li {
   margin-top: 1.5em;
 }
 
-.current_notebook_name {
+.current_notebook_color {
   background-color: #b0d0ff;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
-.current_trash_notebook_name {
+.current_notebook_tl {
+  background: url(/static/images/current_notebook_tl.png) no-repeat top left;
+}
+
+.current_notebook_tr {
+  background: url(/static/images/current_notebook_tr.png) no-repeat top right;
+}
+
+.current_notebook_bl {
+  background: url(/static/images/current_notebook_bl.png) no-repeat bottom left;
+}
+
+.current_notebook_br {
+  background: url(/static/images/current_notebook_br.png) no-repeat bottom right;
+}
+
+.current_notebook_inner_color {
+  background-color: #fafafa;
+}
+
+.current_notebook_inner_tl {
+  background: url(/static/images/current_notebook_inner_tl.png) no-repeat top left;
+}
+
+.trash_notebook_color {
   background-color: #d0d0d0;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
+}
+
+.trash_notebook_tl {
+  background: url(/static/images/trash_notebook_tl.png) no-repeat top left;
+}
+
+.trash_notebook_tr {
+  background: url(/static/images/trash_notebook_tr.png) no-repeat top right;
+}
+
+.trash_notebook_bl {
+  background: url(/static/images/trash_notebook_bl.png) no-repeat bottom left;
+}
+
+.trash_notebook_br {
+  background: url(/static/images/trash_notebook_br.png) no-repeat bottom right;
+}
+
+.trash_notebook_inner_color {
+  background-color: #fafafa;
+}
+
+.trash_notebook_inner_tl {
+  background: url(/static/images/trash_notebook_inner_tl.png) no-repeat top left;
 }
 
 .button {
@@ -521,8 +536,6 @@ ol li {
   font-size: 100%;
   outline: none;
   cursor: pointer;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 .button:hover {

static/images/images.txt

@@ -11,3 +11,11 @@ Switch to the duplicate. Enable the "select contiguous regions" tool. Click on
 the duplicate layer's background. Invert selection. Grow selection by two
 pixels. Fill the entire selection with white (or whatever glow color you
 want). Select none. Gaussian blur the layer with a 5x5 pixel radius.
+
+To make round corner images, use Google's Rounded Corner Generator:
+
+http://ajaxian.com/archives/googles-rounded-corner-generator
+
+For instance:
+
+http://groups-beta.google.com/groups/roundedcorners?c=b0d0ff&bc=fafafa&w=6&h=6&a=tl

view/Link_area.py

@@ -1,4 +1,5 @@
 from Tags import Div, Span, H4, A
+from Rounded_div import Rounded_div
 
 
 class Link_area( Div ):
@@ -44,14 +45,15 @@ class Link_area( Div ):
             class_ = u"link_area_item",
           ) or None,
 
-          ( notebook.name == u"trash" ) and Div(
+          ( notebook.name == u"trash" ) and Rounded_div(
+            u"trash_notebook",
             A(
               u"trash",
               href = u"#",
               id = u"trash_link",
               title = u"Look here for notes you've deleted.",
             ),
-            class_ = u"link_area_item current_trash_notebook_name",
+            class_ = u"link_area_item",
           ) or None,
         ) or None,
 
@@ -60,15 +62,23 @@ class Link_area( Div ):
 
       Div(
         ( len( linked_notebooks ) > 0 ) and H4( u"notebooks" ) or None,
-        [ Span(
-          Div(
+        [ ( nb.object_id == notebook.object_id ) and Rounded_div(
+          u"current_notebook",
           A(
             nb.name,
             href = u"/notebooks/%s" % nb.object_id,
             id = u"notebook_%s" % nb.object_id,
           ),
-          class_ = ( nb.object_id == notebook.object_id ) and u"link_area_item current_notebook_name" or u"link_area_item",
-        ) ) for nb in linked_notebooks ],
+          class_ = u"link_area_item",
+        ) or
+        Div(
+          A(
+            nb.name,
+            href = u"/notebooks/%s" % nb.object_id,
+            id = u"notebook_%s" % nb.object_id,
+          ),
+          class_ = u"link_area_item",
+        ) for nb in linked_notebooks ],
         id = u"notebooks_area"
       ),
 

view/Main_page.py

@@ -6,6 +6,7 @@ from User_area import User_area
 from Link_area import Link_area
 from Toolbar import Toolbar
 from Json import Json
+from Rounded_div import Rounded_div
 
 
 class Main_page( Page ):
@@ -95,7 +96,8 @@ class Main_page( Page ):
             ),
             id = u"top_area",
           ),
-          Div(
+          Rounded_div(
+            ( notebook.name == u"trash" ) and u"trash_notebook" or u"current_notebook",
             Strong( notebook.name ),
             parent_id and Span(
               u" | ",
@@ -104,10 +106,11 @@ class Main_page( Page ):
               A( u"return to notebook", href = u"/notebooks/%s" % parent_id ),
             ) or None,
             id = u"notebook_header_area",
-            class_ = ( notebook.name == u"trash" ) and u"current_trash_notebook_name" or u"current_notebook_name",
+            corners = ( u"tl", u"tr", u"br" ),
           ),
           Div(
-            Div(
+            Rounded_div(
+              ( notebook.name == u"trash" ) and u"trash_notebook_inner" or u"current_notebook_inner",
               Div(
                 id = u"notes",
               ),
@@ -125,9 +128,10 @@ class Main_page( Page ):
                 type = u"text/javascript",
               ),
               id = u"notebook_background",
+              corners = ( u"tl", ),
             ),
             id = u"notebook_border",
-            class_ = ( notebook.name == u"trash" ) and u"current_trash_notebook_name" or u"current_notebook_name",
+            class_ = ( notebook.name == u"trash" ) and u"trash_notebook_color" or u"current_notebook_color",
           ),
           id = u"center_area",
         ),

view/Rounded_div.py

@@ -0,0 +1,26 @@
+from Tags import Div
+
+
+class Rounded_div( Div ):
+  def __init__( self, image_name, *args, **kwargs ):
+    # if no corners were specified, assumed all corners should be rounded
+    corners = kwargs.pop( "corners", [] )
+    if len( corners ) == 0:
+      corners = ( u"tl", u"tr", u"bl", u"br" )
+
+    div = Div(
+      *args,
+      **kwargs
+    )
+
+    for corner in corners:
+      div = Div(
+        div,
+        class_ = u"%s_%s" % ( image_name, corner ),
+      )
+
+    Div.__init__(
+      self,
+      div,
+      class_ = u"%s_color" % image_name,
+    )