# HG changeset patch # User Katia Saurfelt # Date 1273077599 -7200 # Node ID 8c8c6d3f3b3a11972f086c4387f085ff89841c23 # Parent 2236b2f57c675c3e2fcc271a2226cb46faf43296 [css] start using uiprops in cubicweb.css diff -r 2236b2f57c67 -r 8c8c6d3f3b3a doc/refactoring-the-css-with-uiprops.rst --- /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. + diff -r 2236b2f57c67 -r 8c8c6d3f3b3a i18n/fr.po --- 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é" diff -r 2236b2f57c67 -r 8c8c6d3f3b3a web/data/cubicweb.css --- 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 diff -r 2236b2f57c67 -r 8c8c6d3f3b3a web/data/cubicweb.manageview.css --- 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; } diff -r 2236b2f57c67 -r 8c8c6d3f3b3a web/data/cubicweb.old.css --- /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; +} diff -r 2236b2f57c67 -r 8c8c6d3f3b3a web/data/cubicweb.reset.css --- 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; +} diff -r 2236b2f57c67 -r 8c8c6d3f3b3a web/data/uiprops.py --- 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' diff -r 2236b2f57c67 -r 8c8c6d3f3b3a web/views/basetemplates.py --- 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'
%s
' % stitle) self.w(u'
\n') if showmessage and self._cw.message: - self.w(u'
%s
\n' % self._cw.message) + self.w(u'
%s
\n' % self._cw.message) if self._cw.vreg.config['auth-mode'] != 'http': # Cookie authentication self.login_form(id) diff -r 2236b2f57c67 -r 8c8c6d3f3b3a web/views/startup.py --- 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'') def entities(self): schema = self._cw.vreg.schema