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.
|
@ -2,6 +2,7 @@ body {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
line-height: 140%;
|
line-height: 140%;
|
||||||
|
font-family: sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
#center_area {
|
#center_area {
|
||||||
|
@ -18,8 +19,6 @@ body {
|
||||||
border: 1px solid #999999;
|
border: 1px solid #999999;
|
||||||
margin-bottom: 0.75em;
|
margin-bottom: 0.75em;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
@ -37,8 +36,6 @@ h3 {
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
background-color: #d0e0f0;
|
background-color: #d0e0f0;
|
||||||
outline: none;
|
outline: none;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
|
@ -49,8 +46,6 @@ h3 {
|
||||||
margin-top: 0.25em;
|
margin-top: 0.25em;
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
border: #999999 1px solid;
|
border: #999999 1px solid;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
|
|
|
@ -67,8 +67,6 @@ h3 {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
|
@ -79,8 +77,6 @@ h3 {
|
||||||
margin-top: 0.25em;
|
margin-top: 0.25em;
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
border: #999999 1px solid;
|
border: #999999 1px solid;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|
|
@ -251,8 +251,6 @@ ol li {
|
||||||
#search_text {
|
#search_text {
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
border: #999999 1px solid;
|
border: #999999 1px solid;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#user_area {
|
#user_area {
|
||||||
|
@ -265,21 +263,15 @@ ol li {
|
||||||
}
|
}
|
||||||
|
|
||||||
#notebook_header_area {
|
#notebook_header_area {
|
||||||
-moz-border-radius: 0.5em 0.5em 0.5em 0;
|
padding: 0.2em;
|
||||||
-webkit-border-radius: 0.5em 0.5em 0.5em 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#notebook_border {
|
#notebook_border {
|
||||||
padding: 0 0 0 0.3em;
|
padding: 0 0 0 0.4em;
|
||||||
-moz-border-radius: 0 0 0 1px;
|
|
||||||
-webkit-border-radius: 0 0 0 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#notebook_background {
|
#notebook_background {
|
||||||
padding: 0.25em 0.5em 0 1em;
|
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 {
|
#static_notes {
|
||||||
|
@ -301,8 +293,6 @@ ol li {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.blank_note_stub_hidden_border {
|
.blank_note_stub_hidden_border {
|
||||||
|
@ -330,8 +320,6 @@ ol li {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-moz-border-radius: 0.25em;
|
|
||||||
-webkit-border-radius: 0.25em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.note_button:hover {
|
.note_button:hover {
|
||||||
|
@ -347,8 +335,6 @@ ol li {
|
||||||
border: 1px solid #999999;
|
border: 1px solid #999999;
|
||||||
margin-bottom: 0.75em;
|
margin-bottom: 0.75em;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.focused_note_frame {
|
.focused_note_frame {
|
||||||
|
@ -382,8 +368,6 @@ ol li {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
border: 1px solid #000000;
|
border: 1px solid #000000;
|
||||||
background: #ffff99;
|
background: #ffff99;
|
||||||
-moz-border-radius: 0.25em;
|
|
||||||
-webkit-border-radius: 0.25em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pulldown_link {
|
.pulldown_link {
|
||||||
|
@ -401,16 +385,12 @@ ol li {
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: #ffcc66;
|
background-color: #ffcc66;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message_inner {
|
.message_inner {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
line-height: 140%;
|
line-height: 140%;
|
||||||
background-color: #ffaa44;
|
background-color: #ffaa44;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
|
@ -420,8 +400,6 @@ ol li {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #ff3333;
|
background-color: #ff3333;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error_inner {
|
.error_inner {
|
||||||
|
@ -429,8 +407,6 @@ ol li {
|
||||||
line-height: 140%;
|
line-height: 140%;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #dd1111;
|
background-color: #dd1111;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message_button {
|
.message_button {
|
||||||
|
@ -441,8 +417,6 @@ ol li {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-moz-border-radius: 0.25em;
|
|
||||||
-webkit-border-radius: 0.25em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message_button:hover {
|
.message_button:hover {
|
||||||
|
@ -454,8 +428,6 @@ ol li {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
border: 1px solid #005500;
|
border: 1px solid #005500;
|
||||||
background-color: #11bb11;
|
background-color: #11bb11;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error_box {
|
.error_box {
|
||||||
|
@ -472,8 +444,6 @@ ol li {
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
border: #999999 1px solid;
|
border: #999999 1px solid;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.link_area_item {
|
.link_area_item {
|
||||||
|
@ -481,7 +451,8 @@ ol li {
|
||||||
padding: 0.25em 0.25em 0.25em 0.5em;
|
padding: 0.25em 0.25em 0.25em 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.storage_usage_area {
|
#storage_usage_area {
|
||||||
|
padding-top: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.storage_usage_low {
|
.storage_usage_low {
|
||||||
|
@ -502,16 +473,60 @@ ol li {
|
||||||
margin-top: 1.5em;
|
margin-top: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current_notebook_name {
|
.current_notebook_color {
|
||||||
background-color: #b0d0ff;
|
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;
|
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 {
|
.button {
|
||||||
|
@ -521,8 +536,6 @@ ol li {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-moz-border-radius: 0.5em;
|
|
||||||
-webkit-border-radius: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
|
|
After Width: | Height: | Size: 118 B |
After Width: | Height: | Size: 118 B |
After Width: | Height: | Size: 130 B |
After Width: | Height: | Size: 130 B |
After Width: | Height: | Size: 119 B |
|
@ -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
|
the duplicate layer's background. Invert selection. Grow selection by two
|
||||||
pixels. Fill the entire selection with white (or whatever glow color you
|
pixels. Fill the entire selection with white (or whatever glow color you
|
||||||
want). Select none. Gaussian blur the layer with a 5x5 pixel radius.
|
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
|
After Width: | Height: | Size: 117 B |
After Width: | Height: | Size: 116 B |
After Width: | Height: | Size: 123 B |
After Width: | Height: | Size: 123 B |
After Width: | Height: | Size: 117 B |
|
@ -1,4 +1,5 @@
|
||||||
from Tags import Div, Span, H4, A
|
from Tags import Div, Span, H4, A
|
||||||
|
from Rounded_div import Rounded_div
|
||||||
|
|
||||||
|
|
||||||
class Link_area( Div ):
|
class Link_area( Div ):
|
||||||
|
@ -44,14 +45,15 @@ class Link_area( Div ):
|
||||||
class_ = u"link_area_item",
|
class_ = u"link_area_item",
|
||||||
) or None,
|
) or None,
|
||||||
|
|
||||||
( notebook.name == u"trash" ) and Div(
|
( notebook.name == u"trash" ) and Rounded_div(
|
||||||
|
u"trash_notebook",
|
||||||
A(
|
A(
|
||||||
u"trash",
|
u"trash",
|
||||||
href = u"#",
|
href = u"#",
|
||||||
id = u"trash_link",
|
id = u"trash_link",
|
||||||
title = u"Look here for notes you've deleted.",
|
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,
|
||||||
) or None,
|
) or None,
|
||||||
|
|
||||||
|
@ -60,15 +62,23 @@ class Link_area( Div ):
|
||||||
|
|
||||||
Div(
|
Div(
|
||||||
( len( linked_notebooks ) > 0 ) and H4( u"notebooks" ) or None,
|
( len( linked_notebooks ) > 0 ) and H4( u"notebooks" ) or None,
|
||||||
[ Span(
|
[ ( nb.object_id == notebook.object_id ) and Rounded_div(
|
||||||
Div(
|
u"current_notebook",
|
||||||
A(
|
A(
|
||||||
nb.name,
|
nb.name,
|
||||||
href = u"/notebooks/%s" % nb.object_id,
|
href = u"/notebooks/%s" % nb.object_id,
|
||||||
id = u"notebook_%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",
|
class_ = u"link_area_item",
|
||||||
) ) for nb in linked_notebooks ],
|
) 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"
|
id = u"notebooks_area"
|
||||||
),
|
),
|
||||||
|
|
||||||
|
|
|
@ -6,6 +6,7 @@ from User_area import User_area
|
||||||
from Link_area import Link_area
|
from Link_area import Link_area
|
||||||
from Toolbar import Toolbar
|
from Toolbar import Toolbar
|
||||||
from Json import Json
|
from Json import Json
|
||||||
|
from Rounded_div import Rounded_div
|
||||||
|
|
||||||
|
|
||||||
class Main_page( Page ):
|
class Main_page( Page ):
|
||||||
|
@ -95,7 +96,8 @@ class Main_page( Page ):
|
||||||
),
|
),
|
||||||
id = u"top_area",
|
id = u"top_area",
|
||||||
),
|
),
|
||||||
Div(
|
Rounded_div(
|
||||||
|
( notebook.name == u"trash" ) and u"trash_notebook" or u"current_notebook",
|
||||||
Strong( notebook.name ),
|
Strong( notebook.name ),
|
||||||
parent_id and Span(
|
parent_id and Span(
|
||||||
u" | ",
|
u" | ",
|
||||||
|
@ -104,10 +106,11 @@ class Main_page( Page ):
|
||||||
A( u"return to notebook", href = u"/notebooks/%s" % parent_id ),
|
A( u"return to notebook", href = u"/notebooks/%s" % parent_id ),
|
||||||
) or None,
|
) or None,
|
||||||
id = u"notebook_header_area",
|
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(
|
||||||
Div(
|
Rounded_div(
|
||||||
|
( notebook.name == u"trash" ) and u"trash_notebook_inner" or u"current_notebook_inner",
|
||||||
Div(
|
Div(
|
||||||
id = u"notes",
|
id = u"notes",
|
||||||
),
|
),
|
||||||
|
@ -125,9 +128,10 @@ class Main_page( Page ):
|
||||||
type = u"text/javascript",
|
type = u"text/javascript",
|
||||||
),
|
),
|
||||||
id = u"notebook_background",
|
id = u"notebook_background",
|
||||||
|
corners = ( u"tl", ),
|
||||||
),
|
),
|
||||||
id = u"notebook_border",
|
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",
|
id = u"center_area",
|
||||||
),
|
),
|
||||||
|
|
|
@ -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,
|
||||||
|
)
|