--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/doc/refactoring-the-css-with-uiprops.rst Wed May 05 18:39:59 2010 +0200
@@ -0,0 +1,73 @@
+=========================================
+Refactoring the CSSs with UI properties
+=========================================
+
+Overview
+=========
+
+Managing styles progressively became difficult in CubicWeb. The
+introduction of uiprops is an attempt to fix this problem.
+
+The goal is to make it possible to use variables in our CSSs.
+
+These variables are defined or computed in the uiprops.py python file
+and inserted in the CSS using the Python string interpolation syntax.
+
+A quick example, put in ``uiprops.py``::
+
+ defaultBgColor = '#eee'
+
+and in your css::
+
+ body { background-color: %(defaultBgColor)s; }
+
+
+The good practices are:
+
+- define a variable in uiprops to avoid repetitions in the CSS
+ (colors, borders, fonts, etc.)
+
+- define a variable in uiprops when you need to compute values
+ (compute a color palette, etc.)
+
+The algorithm implemented in CubicWeb is the following:
+
+- read uiprops file while walk up the chain of cube dependencies: if
+ cube myblog depends on cube comment, the variables defined in myblog
+ will have precedence over the ones in comment
+
+- replace the %(varname)s in all the CSSs of all the cubes
+
+Keep in mind that the browser will then interpret the CSSs and apply
+the standard cascading mechanism.
+
+FAQ
+====
+
+- How do I keep the old style?
+
+ Put ``STYLESHEET = [data('cubicweb.old.css')]`` in your uiprops.py
+ file and think about something else.
+
+- What are the changes in cubicweb.css?
+
+ Version 3.9.0 of cubicweb changed the following in the default html
+ markup and css:
+
+ =============== ==================================
+ old new
+ =============== ==================================
+ .navcol #navColumnLeft, #navColumnRight
+ #contentcol #contentColumn
+ .footer #footer
+ .logo #logo
+ .simpleMessage .loginMessage
+ .appMsg (removed)
+ .searchMessage (removed)
+ =============== ==================================
+
+ Introduction of the new cubicweb.reset.css based on Eric Meyer's
+ reset css.
+
+ Lots of margin, padding, etc.
+
--- a/i18n/fr.po Thu Apr 29 08:39:13 2010 +0200
+++ b/i18n/fr.po Wed May 05 18:39:59 2010 +0200
@@ -534,7 +534,7 @@
msgstr "Nouvelle transition workflow"
msgid "No result matching query"
-msgstr "aucun résultat"
+msgstr "Aucun résultat ne correspond à la requête"
msgid "Non exhaustive list of views that may apply to entities of this type"
msgstr "Liste non exhausite des vues s'appliquant à ce type d'entité"
--- a/web/data/cubicweb.css Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.css Wed May 05 18:39:59 2010 +0200
@@ -10,14 +10,15 @@
/* scale and rhythm cf http://lamb.cc/typograph/ */
body {
- font-family: Verdana,sans-serif;
- font-size: 12px;
- line-height: 1.5;
+ font-family: %(defaultFont)s;
+ font-size: %(defaultSize)s;
+ line-height: %(defaultLineHeight)s;
+ color: %(defaultColor)s;
}
h1, h2, h3 { margin-top:0; margin-bottom:0; }
/* got rhythm ? beat of 12*1.25 = 15 px */
-.rhythm_bg { background: url(/data/rhythm18.png) repeat ! important; }
+.rhythm_bg { background: url(/data/%(baseRhythmBg)s) repeat ! important; }
/* scale 3:5 stranded */
/* h1 { font-size:2em; } */
@@ -30,29 +31,29 @@
/* h3 { font-size:1.30769em; } */
/* scale traditional */
-h1 { font-size: 1.5em; }
-h2 { font-size: 1.33333em; }
-h3 { font-size: 1.16667em; }
+h1 { font-size: %(h1FontSize)s; }
+h2 { font-size: %(h2FontSize)s; }
+h3 { font-size: %(h3FontSize)s; }
/* paddings */
h1 {
- border-bottom: 0.06em solid black;
- padding-top: 0.9em;
- margin-bottom: 0.44em;
+ border-bottom: %(h1BorderBottomStyle)s;
+ padding: %(h1Padding)s;
+ margin: %(h1Margin)s;
}
-h2 { padding: 0.4em 0 0.25em 0; }
-h3 { padding: 0.5em 0 0.57em 0; }
+h2 { padding: %(h2Padding)s; }
+h3 { padding: %(h3Padding)s; }
html, body {
background: #e2e2e2;
}
a, a:active, a:visited, a:link {
- color: #ff4500; /* XXX make this configurable */
+ color: %(aColor)s;
text-decoration: none;
}
-a:hover{
+a:hover {
text-decoration: underline;
}
@@ -64,10 +65,6 @@
vertical-align: top;
}
-input:focus {
- border: 1px inset #ff7700;
-}
-
label, .label {
font-weight: bold;
}
@@ -78,38 +75,50 @@
letter-spacing: 0.015em;
padding: 0.5em;
margin: 0 1.5em 1.5em;
- background-color: #F0F0F0;
- border: 1px solid #CCBCA7;
+ background-color: #f0f0f0;
+ border: 1px solid #ccbca7;
}
p {
text-align: justify;
- margin-bottom: 1.5em;
+ margin-bottom: %(defaultLineHeightEm)s;
}
ol, ul {
list-style-type: disc;
- margin-bottom: 1.25em;
+ margin-bottom: %(defaultLineHeightEm)s;
+}
+
+ol ol,
+ul ul{
+ margin-left: 8px;
+ margin-bottom : 0px;
}
p + ul {
- margin-top: -1.5em;
+ margin-top: -%(defaultLineHeightEm)s;
}
li {
margin-left: 1.5em;
}
-fieldset {
- border: none;
-}
-
h2 a, h2 a:active, h2 a:visited, h2 a:link,
h3 a, h3 a:active, h3 a:visited, h3 a:link {
color: inherit;
text-decoration: none;
}
+input, textarea {
+ border: 1px solid %(pageContentBorderColor)s;
+ padding: 0.1em;
+ vertical-align: middle;
+}
+
+input:focus {
+ border: 1px inset %(headerBgColor)s;
+}
+
/***************************************/
/* generic classes */
/***************************************/
@@ -123,8 +132,8 @@
}
.hr {
- border-bottom: 1px dotted #ccc;
- margin: 19px 0px 20px 0px;
+ border-bottom: 1px dotted %(pageContentBorderColor)s;
+ height: 17px;
}
.left {
@@ -154,7 +163,6 @@
display: inline;
}
-
/***************************************/
/* LAYOUT */
/***************************************/
@@ -162,7 +170,7 @@
/* header */
table#header {
- background: #ff7700 url("banner.png") left top repeat-x;
+ background: %(headerBgColor)s url("banner.png") left top repeat-x;
text-align: left;
}
@@ -171,7 +179,7 @@
}
table#header a {
- color: #000;
+ color: %(defaultColor)s;
}
table#header img#logo{
@@ -180,7 +188,7 @@
span#appliName {
font-weight: bold;
- color: #000;
+ color: %(defaultColor)s;
white-space: nowrap;
}
@@ -197,14 +205,14 @@
div.popup {
position: absolute;
background: #fff;
- border: 1px solid black;
+ border: 1px solid #fff;
text-align: left;
z-index: 400;
}
div.popup ul li a {
text-decoration: none;
- color: black;
+ color: #000;
}
/* FIXME appear with 4px width in IE6 */
@@ -215,49 +223,50 @@
/* main zone */
div#page {
- min-height: 800px;
- margin: 8px;
+ min-height: %(pageMinHeight)s;
+ margin: %(defaultLayoutMargin)s;
}
table#mainLayout #navColumnLeft {
width: 16em;
- padding-right: 8px;
+ padding-right: %(defaultLayoutMargin)s;
}
table#mainLayout #navColumnRight {
width: 16em;
- padding-left: 8px;
+ padding-left: %(defaultLayoutMargin)s;
}
div#pageContent {
clear: both;
/* margin-top:-1px; /* enable when testing rhythm */
- background: #ffffff;
- border: 1px solid #ccc;
+ background: %(pageContentBgColor)s;
+ border: 1px solid %(pageContentBorderColor)s;
+ padding: 0px %(pageContentPadding)s %(pageContentPadding)s;
}
-/* */
+
+div#breadcrumbs {
+ padding: %(pageContentPadding)s 0 0 0;
+}
+
+/*FIXME */
#contentheader {
margin: 0px;
padding: 0.2em 0.5em 0.5em 0.5em;
- border:2px solid blue;
}
#contentheader a {
- color: #000;
-}
-
-div#contentmain {
- padding: 0 1em 1em;
+ color: %(defaultColor)s;
}
/* rql bar */
div#rqlinput {
- border: 1px solid #cfceb7;
margin-bottom: 8px;
padding: 3px;
- background: #cfceb7;
+ background: %(actionBoxTitleBgColor)s;
+ border: 1px solid %(actionBoxTitleBgColor)s;
}
input#rql{
@@ -271,17 +280,11 @@
}
div.boxTitle {
- padding-top: 0px;
- padding-bottom: 0.2em;
+ overflow: hidden;
font: bold 100% Georgia;
- overflow: hidden;
color: #fff;
- background: #ff9900 url("search.png") left bottom repeat-x;
-}
-
-div.searchBoxFrame div.boxTitle,
-div.greyBoxFrame div.boxTitle {
- background: #cfceb7;
+ padding: 0px 0px 0.2em;
+ background: %(headerBgColor)s url("search.png") left bottom repeat-x;
}
div.boxTitle span,
@@ -290,14 +293,19 @@
white-space: nowrap;
}
+div.searchBoxFrame div.boxTitle,
+div.greyBoxFrame div.boxTitle {
+ background: %(actionBoxTitleBgColor)s;
+}
+
div.sideBoxTitle span,
div.searchBoxFrame div.boxTitle span,
div.greyBoxFrame div.boxTitle span {
- color: #222211;
+ color: %(defaultColor)s;
}
.boxFrame a {
- color: #000;
+ color: %(defaultColor)s;
}
div.boxContent {
@@ -306,6 +314,21 @@
border-top: none;
}
+a.boxMenu {
+ display: block;
+ padding: 1px 9px 1px 3px;
+ background: transparent url("puce_down.png") 98% 6px no-repeat;
+}
+a.boxMenu:hover {
+ background: %(sideBoxBodyBgColor)s url("puce_down.png") 98% 6px no-repeat;
+ cursor: pointer;
+}
+
+a.popupMenu {
+ background: transparent url("puce_down_black.png") 2% 6px no-repeat;
+ padding-left: 2em;
+}
+
ul.boxListing {
margin: 0px;
padding: 0px 3px;
@@ -313,65 +336,47 @@
ul.boxListing li,
ul.boxListing ul li {
- display: inline;
+ list-style-type: none;
margin: 0px;
padding: 0px;
background-image: none;
}
ul.boxListing ul {
- margin: 0px 0px 0px 7px;
padding: 1px 3px;
}
ul.boxListing a {
- color: #000;
- display: block;
+ color: %(defaultColor)s;
padding: 1px 9px 1px 3px;
}
ul.boxListing .selected {
- color: #FF4500;
+ color: %(aColor)s;
font-weight: bold;
}
ul.boxListing a.boxBookmark:hover,
ul.boxListing a:hover,
ul.boxListing ul li a:hover {
+ color: #111100;
text-decoration: none;
- background: #eeedd9;
- color: #111100;
+ background: %(sideBoxBodyBgColor)s;
}
ul.boxListing a.boxMenu:hover {
- background: #eeedd9 url(puce_down.png) no-repeat scroll 98% 6px;
- cursor:pointer;
- border-top:medium none;
-}
-
-a.boxMenu {
- background: transparent url("puce_down.png") 98% 6px no-repeat;
- display: block;
- padding: 1px 9px 1px 3px;
-}
-
-a.popupMenu {
- background: transparent url("puce_down_black.png") 2% 6px no-repeat;
- padding-left: 2em;
+ cursor: pointer;
+ border-top: medium none;
+ background: %(sideBoxBodyBgColor)s url(puce_down.png) no-repeat scroll 98% 6px;
}
ul.boxListing ul li a:hover {
- background: #eeedd9 url("bullet_orange.png") 0% 6px no-repeat;
-}
-
-a.boxMenu:hover {
- background: #eeedd9 url("puce_down.png") 98% 6px no-repeat;
- cursor: pointer;
+ background: %(sideBoxBodyBgColor)s url("bullet_orange.png") 0% 6px no-repeat;
}
ul.boxListing a.boxBookmark {
padding-left: 3px;
- background-image:none;
+ background-image: none;
background:#fff;
}
@@ -391,7 +396,7 @@
}
div.sideBoxTitle {
- background: #cfceb7;
+ background: %(actionBoxTitleBgColor)s;
display: block;
font: bold 100% Georgia;
}
@@ -401,15 +406,20 @@
margin-bottom: 0.5em;
}
+ul.sideBox,
+ul.sideBox ul{
+ margin-bottom: 0px;
+}
+
ul.sideBox li{
- list-style: none;
- background: none;
+ list-style-type : none;
padding: 0px 0px 1px 1px;
- }
+ margin: 1px 0 1px 4px;
+}
div.sideBoxBody {
padding: 0.2em 5px;
- background: #eeedd9;
+ background: %(sideBoxBodyBgColor)s;
}
div.sideBoxBody a {
@@ -425,10 +435,10 @@
}
input.rqlsubmit{
- background: #fffff8 url("go.png") 50% 50% no-repeat;
+ margin: 0px;
width: 20px;
height: 20px;
- margin: 0px;
+ background: %(buttonBgColor)s url("go.png") 50% 50% no-repeat;
}
input#norql{
@@ -448,7 +458,7 @@
}
div#userActionsBox a.popupMenu {
- color: black;
+ color: #000;
text-decoration: underline;
padding-right: 2em;
}
@@ -472,7 +482,7 @@
/**************/
div#etyperestriction {
margin-bottom: 1ex;
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid %(pageContentBorderColor)s;
}
span.slice a:visited,
@@ -482,7 +492,7 @@
span.selectedSlice a:visited,
span.selectedSlice a {
- color: #000;
+ color: %(defaultColor)s;
}
/* FIXME should be moved to cubes/folder */
@@ -497,7 +507,7 @@
}
div.prevnext a {
- color: #000;
+ color: %(defaultColor)s;
}
/***************************************/
@@ -556,50 +566,44 @@
.warning,
.message,
-.errorMessage ,
-.searchMessage{
+.errorMessage{
padding: 0.3em 0.3em 0.3em 1em;
font-weight: bold;
}
-.simpleMessage {
- margin: 4px 0px;
- font-weight: bold;
- color: #ff7700;
+.searchMessage{
+ padding-top: %(defaultLayoutMargin)s;
}
-div#appMsg, div.appMsg {
- border: 1px solid #cfceb7;
- margin-bottom: 8px;
- padding: 3px;
- background: #f8f8ee;
+.loginMessage {
+ margin: 4px 0px;
+ font-weight: bold;
+ color: %(headerBgColor)s;
+}
+
+div#appMsg {
+ border: 1px solid %(actionBoxTitleBgColor)s;
+ margin-bottom: %(defaultLayoutMargin)s;
}
.message {
margin: 0px;
- background: #f8f8ee url("information.png") 5px center no-repeat;
+ background: #fff url("information.png") 5px center no-repeat;
padding-left: 15px;
}
.errorMessage {
margin: 10px 0px;
padding-left: 25px;
- background: #f7f6f1 url("critical.png") 2px center no-repeat;
+ background: #fff url("critical.png") 2px center no-repeat;
color: #ed0d0d;
- border: 1px solid #cfceb7;
-}
-
-.searchMessage {
- margin-top: 0.5em;
- border-top: 1px solid #cfceb7;
- background: #eeedd9 url("information.png") 0% 50% no-repeat; /*dcdbc7*/
+ border: 1px solid %(actionBoxTitleBgColor)s;
}
.stateMessage {
- border: 1px solid #ccc;
- background: #f8f8ee url("information.png") 10px 50% no-repeat;
+ border: 1px solid %(pageContentBorderColor)s;
+ background: #fff url("information.png") 10px 50% no-repeat;
padding:4px 0px 4px 20px;
- border-width: 1px 0px 1px 0px;
}
/* warning messages like "There are too many results ..." */
@@ -613,8 +617,8 @@
position: fixed;
right: 5px;
top: 0px;
- background: #222211;
- color: white;
+ background: %(defaultColor)s;
+ color: #fff;
font-weight: bold;
display: none;
}
@@ -624,61 +628,56 @@
/***************************************/
table.listing {
+ width: 100%;
padding: 10px 0em;
- color: #000;
- width: 100%;
- border-right: 1px solid #dfdfdf;
+ color: %(defaultColor)s;
+ border: 1px solid %(listingBorderColor)s;
+}
+
+table.listing tr th {
+ font-weight: bold;
+ background: #dfdfdf;
+ font-size: 8pt;
+ padding: 3px 0px 3px 5px;
+ border: 1px solid %(listingBorderColor)s;
+ border-right:none}
+
+table.listing thead tr {
+/* border: 1px solid #dfdfdf; */
}
table.listing thead th.over {
- background-color: #746B6B;
+ background-color: #746b6b;
cursor: pointer;
}
-table.listing tr th {
- border: 1px solid #dfdfdf;
- border-right:none;
- font-size: 8pt;
- padding: 4px;
-}
-
table.listing tr .header {
- border-right: 1px solid #dfdfdf;
+ border-right: 1px solid %(listingBorderColor)s;
cursor: pointer;
}
table.listing td {
- color: #3D3D3D;
padding: 4px;
- background-color: #FFF;
+ padding: 3px 0px 3px 5px;
vertical-align: top;
-}
-
-table.listing th,
-table.listing td {
- padding: 3px 0px 3px 5px;
- border: 1px solid #dfdfdf;
+ border: 1px solid %(listingBorderColor)s;
border-right: none;
-}
-
-table.listing th {
- font-weight: bold;
- background: #ebe8d9 url("button.png") repeat-x;
+ background-color: #fff;
}
table.listing td a,
table.listing td a:visited {
- color: #666;
+ color: %(defaultColor)s;
}
table.listing a:hover,
table.listing tr.highlighted td a {
- color:#000;
+ color:%(defaultColor)s;
}
table.listing td.top {
- border: 1px solid white;
+ border: 1px solid #fff;
border-bottom: none;
text-align: right ! important;
/* insane IE row bug workraound */
@@ -735,7 +734,7 @@
}
#add_newopt{
- background: #fffff8 url("go.png") 50% 50% no-repeat;
+ background: %(buttonBgColor)s url("go.png") 50% 50% no-repeat;
width: 20px;
line-height: 20px;
display:block;
@@ -748,9 +747,9 @@
input.button{
margin: 1em 1em 0px 0px;
- border: 1px solid #edecd2;
- border-color:#edecd2 #cfceb7 #cfceb7 #edecd2;
- background: #fffff8 url("button.png") bottom left repeat-x;
+ border: 1px solid %(buttonBorderColor)s;
+ border-color: %(buttonBorderColor)s %(actionBoxTitleBgColor)s %(actionBoxTitleBgColor)s %(buttonBorderColor)s;
+ background: %(buttonBgColor)s url("button.png") bottom left repeat-x;
}
/* FileItemInnerView jquery.treeview.css */
@@ -767,7 +766,7 @@
text-align: center;
}
div#footer a {
- color: #000;
+ color: %(defaultColor)s;
text-decoration: none;
}
@@ -786,15 +785,15 @@
/***************************************/
.title {
text-align: left;
- font-size: large;
+ font-size: large;
font-weight: bold;
}
.validateButton {
margin: 1em 1em 0px 0px;
- border: 1px solid #edecd2;
- border-color:#edecd2 #cfceb7 #cfceb7 #edecd2;
- background: #fffff8 url("button.png") bottom left repeat-x;
+ border: 1px solid %(buttonBorderColor)s;
+ border-color: %(buttonBorderColor)s %(actionBoxTitleBgColor)s %(actionBoxTitleBgColor)s %(buttonBorderColor)s;
+ background: %(buttonBgColor)s url("button.png") bottom left repeat-x;
}
/********************************/
@@ -804,3 +803,14 @@
.otherView {
float: right;
}
+
+/********************************/
+/* overwite other css here */
+/********************************/
+
+/* ui.tabs.css */
+ul .ui-tabs-nav,
+ul .ui-tabs-panel {
+ font-family: %(defaultFont)s;
+ font-size: %(defaultSize)s;
+}
\ No newline at end of file
--- a/web/data/cubicweb.manageview.css Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.manageview.css Wed May 05 18:39:59 2010 +0200
@@ -16,7 +16,5 @@
}
table.startup th{
- padding-top: 3px;
- padding-bottom: 3px;
text-align: left;
}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/data/cubicweb.old.css Wed May 05 18:39:59 2010 +0200
@@ -0,0 +1,862 @@
+/*
+ * :organization: Logilab
+ * :copyright: 2003-2009 LOGILAB S.A. (Paris, FRANCE), all rights reserved.
+ * :contact: http://www.logilab.fr/ -- mailto:contact@logilab.fr
+ */
+
+/***************************************/
+/* xhtml tags */
+/***************************************/
+* {
+ margin: 0px;
+ padding: 0px;
+}
+
+html, body {
+ background: #e2e2e2;
+}
+
+body {
+ font-size: 69%;
+ font-weight: normal;
+ font-family: Verdana, sans-serif;
+}
+
+h1 {
+ font-size: 188%;
+ margin: 0.2em 0px 0.3em;
+ border-bottom: 1px solid #000;
+}
+
+h2, h3 {
+ margin-top: 0.2em;
+ margin-bottom: 0.3em;
+}
+
+h2 {
+ font-size: 135%;
+}
+
+h3 {
+ font-size: 130%;
+}
+
+h4 {
+ font-size: 120%;
+ margin: 0.2em 0px;
+}
+
+h5 {
+ font-size:110%;
+}
+
+h6{
+ font-size:105%;
+}
+
+a, a:active, a:visited, a:link {
+ color: #ff4500;
+ text-decoration: none;
+}
+
+a:hover{
+ text-decoration: underline;
+}
+
+a img, img {
+ border: none;
+ text-align: center;
+}
+
+p {
+ margin: 0em 0px 0.2em;
+ padding-top: 2px;
+}
+
+table, td, input, select{
+ font-size: 100%;
+}
+
+table {
+ border-collapse: collapse;
+ border: none;
+}
+
+table th, table td {
+ vertical-align: top;
+}
+
+table td img {
+ vertical-align: middle;
+ margin-right: 10px;
+}
+
+ol {
+ margin: 1px 0px 1px 16px;
+}
+
+ul{
+ margin: 1px 0px 1px 4px;
+ list-style-type: none;
+}
+
+ul li {
+ margin-top: 2px;
+ padding: 0px 0px 2px 8px;
+ background: url("bullet_orange.png") 0% 6px no-repeat;
+}
+
+dt {
+ font-size:1.17em;
+ font-weight:600;
+}
+
+dd {
+ margin: 0.6em 0 1.5em 2em;
+}
+
+fieldset {
+ border: none;
+}
+
+legend {
+ padding: 0px 2px;
+ font: bold 1em Verdana, sans-serif;
+}
+
+input, textarea {
+ padding: 0.2em;
+ vertical-align: middle;
+ border: 1px solid #ccc;
+}
+
+input:focus {
+ border: 1px inset #ff7700;
+}
+
+label, .label {
+ font-weight: bold;
+}
+
+iframe {
+ border: 0px;
+}
+
+pre {
+ font-family: Courier, "Courier New", Monaco, monospace;
+ font-size: 100%;
+ color: #000;
+ background-color: #f2f2f2;
+ border: 1px solid #ccc;
+}
+
+code {
+ font-size: 120%;
+ color: #000;
+ background-color: #f2f2f2;
+ border: 1px solid #ccc;
+}
+
+blockquote {
+ font-family: Courier, "Courier New", serif;
+ font-size: 120%;
+ margin: 5px 0px;
+ padding: 0.8em;
+ background-color: #f2f2f2;
+ border: 1px solid #ccc;
+}
+
+/***************************************/
+/* generic classes */
+/***************************************/
+
+.odd {
+ background-color: #f7f6f1;
+}
+
+.even {
+ background-color: transparent;
+}
+
+.hr {
+ border-bottom: 1px dotted #ccc;
+ margin: 1em 0px;
+}
+
+.left {
+ float: left;
+}
+
+.right {
+ float: right;
+}
+
+.clear {
+ clear: both;
+}
+
+.hidden {
+ display: none;
+ visibility: hidden;
+}
+
+li.invisible { list-style: none; background: none; padding: 0px 0px
+1px 1px; }
+
+li.invisible div{
+ display: inline;
+}
+
+
+/***************************************/
+/* LAYOUT */
+/***************************************/
+
+/* header */
+
+table#header {
+ background: #ff7700 url("banner.png") left top repeat-x;
+ text-align: left;
+}
+
+table#header td {
+ vertical-align: middle;
+}
+
+table#header a {
+color: #000;
+}
+
+span#appliName {
+ font-weight: bold;
+ color: #000;
+ white-space: nowrap;
+}
+
+table#header td#headtext {
+ width: 100%;
+}
+
+/* FIXME appear with 4px width in IE6 */
+div#stateheader{
+ min-width: 66%;
+}
+
+/* Popup on login box and userActionBox */
+div.popupWrapper{
+ position:relative;
+ z-index:100;
+}
+
+div.popup {
+ position: absolute;
+ background: #fff;
+ border: 1px solid black;
+ text-align: left;
+ z-index:400;
+}
+
+div.popup ul li a {
+ text-decoration: none;
+ color: black;
+}
+
+/* main zone */
+
+div#page {
+ background: #e2e2e2;
+ position: relative;
+ min-height: 800px;
+}
+
+table#mainLayout{
+ margin:0px 3px;
+}
+
+table#mainLayout td#contentColumn {
+ padding: 8px 10px 5px;
+}
+
+table#mainLayout td#navColumnLeft,
+table#mainLayout td#navColumnRight {
+ width: 16em;
+}
+
+#contentheader {
+ margin: 0px;
+ padding: 0.2em 0.5em 0.5em 0.5em;
+}
+
+#contentheader a {
+ color: #000;
+}
+
+div#pageContent {
+ clear: both;
+ padding: 10px 1em 2em;
+ background: #ffffff;
+ border: 1px solid #ccc;
+}
+
+/* rql bar */
+
+div#rqlinput {
+ border: 1px solid #cfceb7;
+ margin-bottom: 8px;
+ padding: 3px;
+ background: #cfceb7;
+}
+
+input#rql{
+ width: 95%;
+}
+
+/* boxes */
+div.navboxes {
+ margin-top: 8px;
+}
+
+div.boxFrame {
+ width: 100%;
+}
+
+div.boxTitle {
+ padding-top: 0px;
+ padding-bottom: 0.2em;
+ font: bold 100% Georgia;
+ overflow: hidden;
+ color: #fff;
+ background: #ff9900 url("search.png") left bottom repeat-x;
+}
+
+div.searchBoxFrame div.boxTitle,
+div.greyBoxFrame div.boxTitle {
+ background: #cfceb7;
+}
+
+div.boxTitle span,
+div.sideBoxTitle span {
+ padding: 0px 5px;
+ white-space: nowrap;
+}
+
+div.sideBoxTitle span,
+div.searchBoxFrame div.boxTitle span,
+div.greyBoxFrame div.boxTitle span {
+ color: #222211;
+}
+
+.boxFrame a {
+ color: #000;
+}
+
+div.boxContent {
+ padding: 3px 0px;
+ background: #fff;
+ border-top: none;
+}
+
+ul.boxListing {
+ margin: 0px;
+ padding: 0px 3px;
+}
+
+ul.boxListing li,
+ul.boxListing ul li {
+ display: inline;
+ margin: 0px;
+ padding: 0px;
+ background-image: none;
+}
+
+ul.boxListing ul {
+ margin: 0px 0px 0px 7px;
+ padding: 1px 3px;
+}
+
+ul.boxListing a {
+ color: #000;
+ display: block;
+ padding: 1px 9px 1px 3px;
+}
+
+ul.boxListing .selected {
+ color: #FF4500;
+ font-weight: bold;
+}
+
+ul.boxListing a.boxBookmark:hover,
+ul.boxListing a:hover,
+ul.boxListing ul li a:hover {
+ text-decoration: none;
+ background: #eeedd9;
+ color: #111100;
+}
+
+ul.boxListing a.boxMenu:hover {
+ background: #eeedd9 url(puce_down.png) no-repeat scroll 98% 6px;
+ cursor:pointer;
+ border-top:medium none;
+ }
+a.boxMenu {
+ background: transparent url("puce_down.png") 98% 6px no-repeat;
+ display: block;
+ padding: 1px 9px 1px 3px;
+}
+
+
+a.popupMenu {
+ background: transparent url("puce_down_black.png") 2% 6px no-repeat;
+ padding-left: 2em;
+}
+
+ul.boxListing ul li a:hover {
+ background: #eeedd9 url("bullet_orange.png") 0% 6px no-repeat;
+}
+
+a.boxMenu:hover {
+ background: #eeedd9 url("puce_down.png") 98% 6px no-repeat;
+ cursor: pointer;
+}
+
+ul.boxListing a.boxBookmark {
+ padding-left: 3px;
+ background-image:none;
+ background:#fff;
+}
+
+ul.boxListing ul li a {
+ background: #fff url("bullet_orange.png") 0% 6px no-repeat;
+ padding: 1px 3px 0px 10px;
+}
+
+div.searchBoxFrame div.boxContent {
+ padding: 4px 4px 3px;
+ background: #f0eff0 url("gradient-grey-up.png") left top repeat-x;
+}
+
+div.shadow{
+ height: 14px;
+ background: url("shadow.gif") no-repeat top right;
+}
+
+div.sideBoxTitle {
+ background: #cfceb7;
+ display: block;
+ font: bold 100% Georgia;
+}
+
+div.sideBox {
+ padding: 0 0 0.2em;
+ margin-bottom: 0.5em;
+}
+
+ul.sideBox li{
+ list-style: none;
+ background: none;
+ padding: 0px 0px 1px 1px;
+ }
+
+div.sideBoxBody {
+ padding: 0.2em 5px;
+ background: #eeedd9;
+}
+
+div.sideBoxBody a {
+ color:#555544;
+}
+
+div.sideBoxBody a:hover {
+ text-decoration: underline;
+}
+
+div.sideBox table td {
+ padding-right: 1em;
+}
+
+input.rqlsubmit{
+ background: #fffff8 url("go.png") 50% 50% no-repeat;
+ width: 20px;
+ height: 20px;
+ margin: 0px;
+}
+
+input#norql{
+ width:13em;
+ margin-right: 2px;
+}
+
+/* user actions menu */
+a.logout, a.logout:visited, a.logout:hover{
+ color: #fff;
+ text-decoration: none;
+}
+
+div#userActionsBox {
+ width: 14em;
+ text-align: right;
+}
+
+div#userActionsBox a.popupMenu {
+ color: black;
+ text-decoration: underline;
+ padding-right: 2em;
+}
+
+/* download box XXX move to its own file? */
+div.downloadBoxTitle{
+ background : #8FBC8F;
+ font-weight: bold;
+}
+
+div.downloadBox{
+ font-weight: bold;
+}
+
+div.downloadBox div.sideBoxBody{
+ background : #EEFED9;
+}
+
+/**************/
+/* navigation */
+/**************/
+div#etyperestriction {
+ margin-bottom: 1ex;
+ border-bottom: 1px solid #ccc;
+}
+
+span.slice a:visited,
+span.slice a:hover{
+ color: #555544;
+}
+
+span.selectedSlice a:visited,
+span.selectedSlice a {
+ color: #000;
+}
+
+/* FIXME should be moved to cubes/folder */
+div.navigation a {
+ text-align: center;
+ text-decoration: none;
+}
+
+div.prevnext {
+ width: 100%;
+ margin-bottom: 1em;
+}
+
+div.prevnext a {
+ color: #000;
+}
+
+/***************************************/
+/* entity views */
+/***************************************/
+
+.mainInfo {
+ margin-right: 1em;
+ padding: 0.2em;
+}
+
+
+div.mainRelated {
+ border: none;
+ margin-right: 1em;
+ padding: 0.5em 0.2em 0.2em;
+}
+
+div.primaryRight{
+ }
+
+div.metadata {
+ font-size: 90%;
+ margin: 5px 0px 3px;
+ color: #666;
+ font-style: italic;
+ text-align: right;
+}
+
+div.section {
+ margin-top: 0.5em;
+ width:100%;
+}
+
+div.section a:hover {
+ text-decoration: none;
+}
+
+/* basic entity view */
+
+tr.entityfield th {
+ text-align: left;
+ padding-right: 0.5em;
+}
+
+div.field {
+ display: inline;
+}
+
+div.ctxtoolbar {
+ float: right;
+ padding-left: 24px;
+ position: relative;
+}
+div.toolbarButton {
+ display: inline;
+}
+
+/***************************************/
+/* messages */
+/***************************************/
+
+.warning,
+.message,
+.errorMessage ,
+.searchMessage{
+ padding: 0.3em 0.3em 0.3em 1em;
+ font-weight: bold;
+}
+
+.loginMessage {
+ margin: 4px 0px;
+ font-weight: bold;
+ color: #ff7700;
+}
+
+div#appMsg, div.appMsg{
+ border: 1px solid #cfceb7;
+ margin-bottom: 8px;
+ padding: 3px;
+ background: #f8f8ee;
+}
+
+.message {
+ margin: 0px;
+ background: #f8f8ee url("information.png") 5px center no-repeat;
+ padding-left: 15px;
+}
+
+.errorMessage {
+ margin: 10px 0px;
+ padding-left: 25px;
+ background: #f7f6f1 url("critical.png") 2px center no-repeat;
+ color: #ed0d0d;
+ border: 1px solid #cfceb7;
+}
+
+.searchMessage {
+ margin-top: 0.5em;
+ border-top: 1px solid #cfceb7;
+ background: #eeedd9 url("information.png") 0% 50% no-repeat; /*dcdbc7*/
+}
+
+.stateMessage {
+ border: 1px solid #ccc;
+ background: #f8f8ee url("information.png") 10px 50% no-repeat;
+ padding:4px 0px 4px 20px;
+ border-width: 1px 0px 1px 0px;
+}
+
+/* warning messages like "There are too many results ..." */
+.warning {
+ padding-left: 25px;
+ background: #f2f2f2 url("critical.png") 3px 50% no-repeat;
+}
+
+/* label shown in the top-right hand corner during form validation */
+div#progress {
+ position: fixed;
+ right: 5px;
+ top: 0px;
+ background: #222211;
+ color: white;
+ font-weight: bold;
+ display: none;
+}
+
+/***************************************/
+/* listing table */
+/***************************************/
+
+table.listing {
+ padding: 10px 0em;
+ color: #000;
+ width: 100%;
+ border-right: 1px solid #dfdfdf;
+}
+
+
+table.listing thead th.over {
+ background-color: #746B6B;
+ cursor: pointer;
+}
+
+table.listing tr th {
+ border: 1px solid #dfdfdf;
+ border-right:none;
+ font-size: 8pt;
+ padding: 4px;
+}
+
+table.listing tr .header {
+ border-right: 1px solid #dfdfdf;
+ cursor: pointer;
+}
+
+table.listing td {
+ color: #3D3D3D;
+ padding: 4px;
+ background-color: #FFF;
+ vertical-align: top;
+}
+
+table.listing th,
+table.listing td {
+ padding: 3px 0px 3px 5px;
+ border: 1px solid #dfdfdf;
+ border-right: none;
+}
+
+table.listing th {
+ font-weight: bold;
+ background: #ebe8d9 url("button.png") repeat-x;
+}
+
+table.listing td a,
+table.listing td a:visited {
+ color: #666;
+}
+
+table.listing a:hover,
+table.listing tr.highlighted td a {
+ color:#000;
+}
+
+table.listing td.top {
+ border: 1px solid white;
+ border-bottom: none;
+ text-align: right ! important;
+ /* insane IE row bug workaround */
+ position: relative;
+ left: -1px;
+ top: -1px;
+}
+
+table.htableForm {
+ vertical-align: middle;
+}
+table.htableForm td{
+ padding-left: 1em;
+ padding-top: 0.5em;
+}
+table.htableForm th{
+ padding-left: 1em;
+}
+table.htableForm .validateButton {
+ margin-right: 0.2em;
+ vertical-align: top;
+ margin-bottom: 0.2em; /* because vertical-align doesn't seems to have any effect */
+}
+
+/***************************************/
+/* error view (views/management.py) */
+/***************************************/
+
+div.pycontext { /* html traceback */
+ font-family: Verdana, sans-serif;
+ font-size: 80%;
+ padding: 1em;
+ margin: 10px 0px 5px 20px;
+ background-color: #dee7ec;
+}
+
+div.pycontext span.name {
+ color: #ff0000;
+}
+
+
+/***************************************/
+/* addcombobox */
+/***************************************/
+
+input#newopt{
+ width:120px ;
+ display:block;
+ float:left;
+ }
+
+div#newvalue{
+ margin-top:2px;
+ }
+
+#add_newopt{
+ background: #fffff8 url("go.png") 50% 50% no-repeat;
+ width: 20px;
+ line-height: 20px;
+ display:block;
+ float:left;
+}
+
+/***************************************/
+/* buttons */
+/***************************************/
+
+input.button{
+ margin: 1em 1em 0px 0px;
+ border: 1px solid #edecd2;
+ border-color:#edecd2 #cfceb7 #cfceb7 #edecd2;
+ background: #fffff8 url("button.png") bottom left repeat-x;
+}
+
+/* FileItemInnerView jquery.treeview.css */
+.folder {
+ /* disable odd/even under folder class */
+ background-color: transparent;
+}
+
+/***************************************/
+/* footer */
+/***************************************/
+
+div#footer {
+ text-align: center;
+}
+div#footer a {
+ color: #000;
+ text-decoration: none;
+}
+
+
+/****************************************/
+/* FIXME must by managed by cubes */
+/****************************************/
+.needsvalidation {
+ font-style: italic;
+ color: gray;
+}
+
+
+/***************************************/
+/* FIXME : Deprecated ? entity view ? */
+/***************************************/
+.title {
+ text-align: left;
+ font-size: large;
+ font-weight: bold;
+}
+
+.validateButton {
+ margin: 1em 1em 0px 0px;
+ border: 1px solid #edecd2;
+ border-color:#edecd2 #cfceb7 #cfceb7 #edecd2;
+ background: #fffff8 url("button.png") bottom left repeat-x;
+}
+
+/********************************/
+/* placement of alt. view icons */
+/********************************/
+
+.otherView {
+ float: right;
+}
--- a/web/data/cubicweb.reset.css Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.reset.css Wed May 05 18:39:59 2010 +0200
@@ -51,3 +51,12 @@
border-collapse: collapse;
border-spacing: 0;
}
+
+/* Logilab */
+img{
+ border: none;
+}
+
+fieldset {
+ border: none;
+}
--- a/web/data/uiprops.py Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/uiprops.py Wed May 05 18:39:59 2010 +0200
@@ -1,6 +1,8 @@
"""define default ui properties"""
# CSS stylesheets to include systematically in HTML headers
+# use the following line if you *need* to keep the old stylesheet
+#STYLESHEETS = [data('cubicweb.old.css')]
STYLESHEETS = [data('cubicweb.reset.css'),
data('cubicweb.css')]
STYLESHEETS_IE = [data('cubicweb.ie.css')]
@@ -55,3 +57,55 @@
UPLOAD_ICON = data('upload.gif')
GMARKER_ICON = data('gmap_blue_marker.png')
UP_ICON = data('up.gif')
+
+# colors, fonts, etc
+
+# default (body, html)
+defaultColor = '#000'
+defaultFont = 'Verdana,sans-serif'
+defaultSize = '12px'
+defaultLineHeight = '1.5'
+defaultLineHeightEm = defaultLineHeight + 'em'
+baseRhythmBg = 'rhythm18.png'
+
+# XXX
+defaultLayoutMargin = '8px'
+
+# header
+headerBgColor = '#ff7700'
+
+# h
+h1FontSize = '1.5em'
+h1BorderBottomStyle = '0.06em solid black'
+h1Padding = '0 0 0.14em 0 '
+h1Margin = '0.8em 0 0.5em'
+
+h2FontSize = '1.33333em'
+h2Padding = '0.4em 0 0.35em 0'
+h2Margin = '0'
+
+h3FontSize = '1.16667em'
+h3Padding = '0.5em 0 0.57em 0'
+h3Margin = '0'
+
+# links
+aColor = '#ff4500'
+aActiveColor = aVisitedColor = aLinkColor = aColor
+
+# page frame
+pageContentBorderColor = '#ccc'
+pageContentBgColor = '#fff'
+pageContentPadding = '1em'
+pageMinHeight = '800px'
+
+# button
+buttonBorderColor = '#edecd2'
+buttonBgColor = '#fffff8'
+
+# action, search, sideBoxes
+actionBoxTitleBgColor = '#cfceb7'
+sideBoxBodyBgColor = '#eeedd9'
+
+
+# table listing
+listingBorderColor = '#878787'
--- a/web/views/basetemplates.py Thu Apr 29 08:39:13 2010 +0200
+++ b/web/views/basetemplates.py Wed May 05 18:39:59 2010 +0200
@@ -470,7 +470,7 @@
self.w(u'<div id="loginTitle">%s</div>' % stitle)
self.w(u'<div id="loginContent">\n')
if showmessage and self._cw.message:
- self.w(u'<div class="simpleMessage">%s</div>\n' % self._cw.message)
+ self.w(u'<div class="loginMessage">%s</div>\n' % self._cw.message)
if self._cw.vreg.config['auth-mode'] != 'http':
# Cookie authentication
self.login_form(id)
--- a/web/views/startup.py Thu Apr 29 08:39:13 2010 +0200
+++ b/web/views/startup.py Wed May 05 18:39:59 2010 +0200
@@ -96,11 +96,16 @@
self.startupviews_table()
def startupviews_table(self):
- for v in self._cw.vreg['views'].possible_views(self._cw, None):
+ views = self._cw.vreg['views'].possible_views(self._cw, None)
+ if not views:
+ return
+ self.w(u'<ul>')
+ for v in views:
if v.category != 'startupview' or v.__regid__ in ('index', 'tree', 'manage'):
continue
- self.w('<p><a href="%s">%s</a></p>' % (
+ self.w('<li><a href="%s">%s</a></li>' % (
xml_escape(v.url()), xml_escape(self._cw._(v.title).capitalize())))
+ self.w(u'</ul>')
def entities(self):
schema = self._cw.vreg.schema