experimental shadow effect for input controls

This adds a shadow effect to input fields and buttons for the default
template. It uses alphatransparency PNGs so it will may look bad for IE
in some cases. I think it adds some nice 3D effect making inputs and
buttons easily distictable without any complicated CSS markup.

darcs-hash:20060313221312-7ad00-73e0d0c23d8bb151c0e05dd1b92c7e4286da591b.gz

3 files changed, 5 insertions, 1 deletions

diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index 70b429bc3..f22019eae 100644
--- a/lib/tpl/default/design.css
+++ b/lib/tpl/default/design.css
@@ -85,8 +85,9 @@ div.dokuwiki textarea.edit {
   color: Black;
   background-color: __white__;
   font-size:14px;
-  padding: 3px;
+  padding: 0.3em 0 0 0.3em;
   width:100%;
+  background:  __white__ url(images/inputshadow.png) repeat-x top;
 }
 
 div.dokuwiki input.edit, div.dokuwiki select.edit {
@@ -98,6 +99,7 @@ div.dokuwiki input.edit, div.dokuwiki select.edit {
   margin: 1px;
   padding: 0.20em 0.3em;
   display: inline;
+  background:  __white__ url(images/inputshadow.png) repeat-x top;
 }
 
 div.dokuwiki select.edit {
@@ -166,6 +168,7 @@ div.dokuwiki input.button, div.dokuwiki button.button{
   cursor: pointer;
   margin: 1px;
   padding: 0.125em 0.4em;
+  background:  __white__ url(images/buttonshadow.png) repeat-x bottom;
 }
 
 * html div.dokuwiki input.button, * html div.dokuwiki button.button{
@@ -711,6 +714,7 @@ button.toolbutton{
   margin: 0 1px 0 0;
   border: 1px solid __dark__;
   cursor: pointer;
+  background:  __white__ url(images/buttonshadow.png) repeat-x bottom;
 }
 
 div.picker {
diff --git a/lib/tpl/default/images/buttonshadow.png b/lib/tpl/default/images/buttonshadow.png
new file mode 100644
index 000000000..f60be309f
--- /dev/null
+++ b/lib/tpl/default/images/buttonshadow.png
diff --git a/lib/tpl/default/images/inputshadow.png b/lib/tpl/default/images/inputshadow.png
new file mode 100644
index 000000000..ff80fbad1
--- /dev/null
+++ b/lib/tpl/default/images/inputshadow.png