[Erp5-report] r9589 - /erp5/trunk/bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_defau...

Thu Aug 31 14:35:49 CEST 2006

Author: kevin
Date: Thu Aug 31 14:35:48 2006
New Revision: 9589

URL: http://svn.erp5.org?rev=9589&view=rev
Log:
Default generic layout for web editable_mode

Modified:
    erp5/trunk/bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_default_theme/erp5_web_default.css.xml

Modified: erp5/trunk/bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_default_theme/erp5_web_default.css.xml
URL: http://svn.erp5.org/erp5/trunk/bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_default_theme/erp5_web_default.css.xml?rev=9589&r1=9588&r2=9589&view=diff
==============================================================================

--- erp5/trunk/bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_default_theme/erp5_web_default.css.xml (original)
+++ erp5/trunk/bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_default_theme/erp5_web_default.css.xml Thu Aug 31 14:35:48 2006
@@ -40,7 +40,7 @@
 
 /*____________________________________\n
 \n
-  Default ERP5 Web module CSS.\n
+  Default ERP5 Web CSS.\n
 \n
 Guidelines (how-to create a good css):\n
    * All measurements should be expressed with scalable units like em, ex, %.\n
@@ -50,13 +50,11 @@
    * Don\'t put styling directives in xhtml code.\n
 ____________________________________*/\n
 \n
+/* General stuff that are good to include in every website.\n
+----------------------------------------------- */\n
 \n
 * {\n
   padding: 0;\n
-  margin: 0;\n
-}\n
-\n
-html {\n
   margin: 0;\n
 }\n
 \n
@@ -92,6 +90,7 @@
 \n
 /* layout\n
 Layout technic based on http://en.wikipedia.org/skins-1.5/monobook/main.css?9\n
+Layout technic used here doesn\'t depend of content ordering, but will not work with IE (because of poor CSS support).\n
 ----------------------------------------------- */\n
 \n
 /* The first global form can be used as a global wrapper */\n
@@ -108,6 +107,10 @@
 /* The two sub content are web widgets and main page rendering */\n
 form#main_form > div {\n
   border: 1px solid #666;\n
+}\n
+/* Undo border styling for main content */\n
+form#main_form > div.main_content {\n
+  border: 0;\n
 }\n
 \n
 \n
@@ -141,7 +144,7 @@
   right: 1em; /* Same as "body > form#main_form[padding-right]".\n
                  TODO: use dtml code to make this more flexible.\n
                */\n
-  width: 20em; /* XXX Must be adapted dynamiccaly to let several web widget be diplayed inline.\n
+  width: 28em; /* XXX Must be adapted dynamiccaly to let several web widget be diplayed inline.\n
                   TODO: find the appropriate CSS trick to do hit without pain.\n
                 */\n
 }\n
@@ -163,7 +166,7 @@
 /* Special layout for websiteLogo web widget group */\n
 form#main_form > div#websiteLogo {\n
  border:0;\n
- padding: 1em 0 0;\n
+ padding: 2em 0 0;\n
 }\n
 \n
 form#main_form > div#websiteLogo label {\n
@@ -201,7 +204,7 @@
   font-family: "Courier New", Courier, monospace;\n
 }\n
 \n
-.warning, .error {\n
+#transition_message, .warning, .error {\n
   color: #f00;\n
   font-weight: bold;\n
 }\n
@@ -212,33 +215,115 @@
 \n
 \n
 \n
-/* forms styling\n
------------------------------------------------ */\n
-\n
-div.fieldgroup {\n
+/* Edit tabs styling.\n
+   Edit tabs are another part of admin stuffs and\n
+   should respect other admin stuff design convention\n
+   (colors, etc...) to keep the UI consistent.\n
+----------------------------------------------- */\n
+\n
+div.document > div.editable {\n
   border: 1px solid #ccc;\n
+}\n
+\n
+div.actions {\n
+  position: relative;\n
+  width: 100%;\n
+  height: 3em;\n
+}\n
+\n
+div.actions ul {\n
+  position: absolute;\n
+  bottom: -1px;\n
+  list-style: none;\n
+  margin: 0;\n
+}\n
+\n
+div.actions ul li  {\n
+  display: inline;\n
+  margin: 0;\n
+  padding: 0;\n
+}\n
+\n
+div.actions ul a, div.actions ul li.selected a {\n
+  display: block;\n
+  float: left;\n
+  padding: 4px 1em;\n
+  margin: 1px 2px 0 0;\n
+  text-align: center;\n
+  text-decoration: none;\n
+}\n
+\n
+div.actions ul a {\n
+  background: #fffae1;\n
+  border: 1px solid #ccc;\n
+}\n
+\n
+div.actions ul li.selected a, div.actions ul li.selected a:hover {\n
+  border-bottom: none;\n
+  padding-bottom: 6px;\n
+  margin-top: 0;\n
+  background: #fff;\n
+}\n
+\n
+div.actions ul a:hover {\n
+  margin-top: 0;\n
+  border-color: #666;\n
+  border-bottom: none;\n
+  padding-bottom: 5px;\n
+}\n
+\n
+\n
+\n
+/* editable forms styling\n
+----------------------------------------------- */\n
+\n
+div.editable fieldset {\n
+  margin: 1em 0;\n
   padding: .5em;\n
-}\n
-\n
-fieldset {\n
-  padding: 0 .5em 1em;\n
   border-color: #ccc;\n
   border-width: 1px 0 0;\n
   border-style: dotted none none;\n
 }\n
 \n
-fieldset legend {\n
-  padding: .5em;\n
-  margin: 0 0 1em;\n
-  text-transform: capitalize;\n
-  font-weight: bold;\n
+div.editable legend {\n
+  padding: .2em .5em;\n
+}\n
+\n
+div.editable fieldset > div {\n
+  clear: both;\n
+  margin: .1em 0;\n
+  position: relative;\n
+}\n
+\n
+div.editable label {\n
+  margin: 0;\n
+  display: block;\n
+  width: 13em;\n
+  text-align: right;\n
+  float: left;\n
+}\n
+\n
+/* Save button styling */\n
+div.actions button {\n
+  position: absolute;\n
+  z-index: 300;\n
+  top: -.5em;\n
+  right: 0;\n
+}\n
+\n
+\n
+/* general form styling\n
+----------------------------------------------- */\n
+\n
+/* "div.input span" is for field renders as non-editable */\n
+div.input span, input, select, textarea {\n
+  margin: 0 .5em;\n
 }\n
 \n
 input, textarea {\n
   background-color: #fff;\n
   background-repeat: repeat-x;\n
   border: 1px solid #999;\n
-  margin: 1px;\n
 }\n
 \n
 input.text, input[type="password"], input[type="text"], textarea {\n


