diff -r 5c7d69381a5d -r 23af005426bf web/data/cubicweb.css --- a/web/data/cubicweb.css Wed Nov 12 22:20:02 2014 +0100 +++ b/web/data/cubicweb.css Thu Dec 18 17:54:29 2014 +0100 @@ -7,49 +7,52 @@ /***************************************/ /* xhtml tags */ /***************************************/ +* { + margin: 0px; + padding: 0px; +} -/* scale and rhythm cf http://lamb.cc/typograph/ */ +html, body { + background: #e2e2e2; +} + body { - font-family: %(defaultFontFamily)s; - font-size: %(defaultSize)s; - line-height: %(defaultLineHeight)s; - color: %(defaultColor)s; + font-size: 69%; + font-weight: normal; + font-family: Verdana, sans-serif; } -h1, h2, h3 { margin-top:0; margin-bottom:0; } h1, .vtitle { font-size: %(h1FontSize)s; - border-bottom: %(h1BorderBottomStyle)s; - padding: %(h1Padding)s; - margin: %(h1Margin)s; - color: %(h1Color)s; + margin: 0.2em 0px 0.3em; + border-bottom: 1px solid #000; +} + +h2, h3 { + margin-top: 0.2em; + margin-bottom: 0.3em; } h2 { font-size: %(h2FontSize)s; - padding: %(h2Padding)s; } h3 { font-size: %(h3FontSize)s; - padding: %(h3Padding)s; } - h4 { font-size: %(h4FontSize)s; + margin: 0.2em 0px; } - -div.tabbedprimary + h1, -h1.plain { - border-bottom: none; +h5 { + font-size:110%; } - -html, body { - background: %(pageBgColor)s; +h6{ + font-size:105%; } /* more specific selectors to override jQueryUI's braindamaged CSS rules */ @@ -62,65 +65,18 @@ text-decoration: none; } -a:hover { +a:hover{ text-decoration: underline; } -table { - border: none; -} - -table th, table td { - vertical-align: top; -} - -label, .label { - font-weight: bold; -} - -pre { - clear: both; - font-family: 'Courier New', monospace; - letter-spacing: 0.015em; - padding: 0.6em; - margin: 0 2em 1.7em; - background-color: %(listingHighlightedBgColor)s; - border: 1px solid %(listingBorderColor)s; -} - -p { - text-align: justify; - margin-bottom: %(defaultLineHeightEm)s; +a img{ + text-align: center; } -ul { - margin-bottom: %(defaultLineHeightEm)s; -} - -ol { - list-style-type: decimal; - /* margin-bottom: %(defaultLineHeightEm)s; */ -} - -ol ol, -ul ul { - margin-left: 8px; - margin-bottom : 0px; -} - -/* p + ul { */ -/* margin-top: -%(defaultLineHeightEm)s; */ -/* } */ - -li { - margin-left: 1.5em; -} - -img { +img{ border: none; } - img.prevnext { width: 22px; height: 22px; @@ -133,42 +89,111 @@ opacity:.25; } +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; } -h1 a, h1 a:active, h1 a:visited, h1 a:link, -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; +legend { + padding: 0px 2px; + font: bold 1em Verdana, sans-serif; } input, textarea { - padding: 0.1em 0.2em; - vertical-align: bottom; - border: 1px solid %(pageContentBorderColor)s; - + padding: 0.2em; + vertical-align: middle; + border: 1px solid #ccc; } input:focus { - border: 1px inset %(headerBgColor)s; + border: 1px inset #ff7700; +} + +label, .label { + font-weight: bold; +} + +iframe { + border: 0px; } -hr { - border: none; - border-bottom: 1px solid %(defaultColor)s; - height: 1px; +pre { + font-family: Courier, "Courier New", Monaco, monospace; + font-size: 100%; + color: #000; + background-color: #f2f2f2; + border: 1px solid #ccc; + margin: 10px 0; + padding-bottom: 12px; + padding-left: 5px; +} + +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 */ /***************************************/ -h1 a:hover { - text-decoration: none; -} - .odd { background-color: #f7f6f1; } @@ -178,14 +203,8 @@ } .hr { - border-bottom: 1px dotted %(pageContentBorderColor)s; - height: 17px; -} - -hr.boxSeparator{ - border: none; - border-bottom: 1px solid %(listingBorderColor)s; - height: 1px; + border-bottom: 1px dotted #ccc; + margin: 1em 0px; } .left { @@ -217,11 +236,30 @@ } .caption { - font-weight: bold; + font-weight: bold; } .legend{ - font-style: italic; + font-style: italic; +} + +/* rest related image classes generated with align: directive */ + +img.align-right { + margin-left: auto; + display:block; +} + +img.align-left { + margin-right: auto; + display:block; +} + +img.align-center{ + text-align: center; + margin-left: auto; + margin-right: auto; + display:block; } @@ -232,125 +270,159 @@ /* header */ table#header { - background: %(headerBg)s; + background-image: linear-gradient(white, #e2e2e2); width: 100%; + border-bottom: 1px solid #bbb; + text-shadow: 1px 1px 0 #f5f5f5; } table#header td { vertical-align: middle; } -table#header a { - color: %(defaultColor)s; -} - -table#header td#header-right { - padding-top: 1em; - white-space: nowrap; -} - -table#header img#logo{ - vertical-align: middle; +table#header, table#header a { + color: #444; } table#header td#headtext { white-space: nowrap; + padding: 0 10px; + width: 10%; } +#logo{ + width: 150px; + height: 42px; + background-image: url(logo-cubicweb.svg); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + float: left; +} + +table#header td#header-right { + white-space: nowrap; + width: 10%; +} table#header td#header-center{ - width: 100%; + border-bottom-left-radius: 10px; + border-top-left-radius: 10px; + padding-left: 1em; } span#appliName { font-weight: bold; - color: %(defaultColor)s; white-space: nowrap; } +/* FIXME appear with 4px width in IE6 */ +div#stateheader{ + min-width: 66%; +} + /* Popup on login box and userActionBox */ + +.popupWrapper{ + position:relative; +} + div.popup { position: absolute; background: #fff; - border: 1px solid %(listingBorderColor)s; - border-top: none; + border: 1px solid black; text-align: left; z-index: 400; } div.popup ul li a { text-decoration: none; - color: #000; + color: black; } /* main zone */ div#page { - margin: %(defaultLayoutMargin)s; + background: #e2e2e2; + position: relative; + min-height: 800px; } -table#mainLayout td#navColumnLeft { - width: 16em; - padding-right: %(defaultLayoutMargin)s; - -} - -table#mainLayout td#navColumnRight { - width: 16em; - padding-left: %(defaultLayoutMargin)s; +table#mainLayout{ + padding: 0px 3px; } -div#pageContent { - clear: both; - background: %(pageContentBgColor)s; - border: 1px solid %(pageContentBorderColor)s; - padding: 0 %(pageContentPadding)s %(pageContentPadding)s; +table#mainLayout td#contentColumn { + padding: 8px 10px 5px; } -div#pageContent #contentmain .pagination { - margin-top: 0; +table#mainLayout td#navColumnLeft, +table#mainLayout td#navColumnRight { + width: 16em; } -div#pageContent .pagination{ - margin-top: 1.5em; -} - -div#contentmain{ - margin-top: %(pageContentPadding)s; -} - -/*FIXME */ #contentheader { margin: 0px; padding: 0.2em 0.5em 0.5em 0.5em; } #contentheader a { - color: %(defaultColor)s; + color: #000; +} + +div#pageContent { + clear: both; + padding: 10px 1em 2em; + background: #ffffff; + border: 1px solid #ccc; } -/* XXX old boxes, deprecated */ +/* rql bar */ + +div#rqlinput { + border: 1px solid #cfceb7; + margin-bottom: 8px; + padding: 1px; + background: #cfceb7; + width: 100%; +} + +input#rql { + width: 99%; +} + +input.rqlsubmit{ + display: block; + width: 20px; + height: 20px; + background: %(buttonBgColor)s url("go.png") 50% 50% no-repeat; + vertical-align: bottom; +} +/* old boxes, deprecated */ div.boxFrame { width: 100%; } div.boxTitle { + padding-top: 0px; + padding-bottom: 0.2em; + font: bold 100% Georgia; color: #fff; - background: %(contextualBoxTitleBgColor)s; + background: #ff9900 url("search.png") left bottom repeat-x; } div.boxTitle span, div.sideBoxTitle span { - padding: 0px 0.5em; + padding: 0px 5px; white-space: nowrap; } div.sideBoxTitle span { - color: %(defaultColor)s; + color: #222211; } .boxFrame a { - color: %(defaultColor)s; + color: #000; } div.boxContent { @@ -364,36 +436,33 @@ } div.sideBoxTitle { - background: %(incontextBoxBodyBg)s; + background: #cfceb7; display: block; - font-weight: bold; + font: bold 100% Georgia; border-top-left-radius: 6px; border-top-right-radius: 6px; } div.sideBox { - margin-bottom: 1em; - border-top-left-radius: 6px; - border-top-right-radius: 6px; -} - -ul.sideBox, -ul.sideBox ul { - margin-bottom: 0px; + padding: 0 0 0.2em; + margin-bottom: 0.5em; } ul.sideBox li { + list-style: none; + background: none; padding: 0px 0px 1px 1px; - margin: 1px 0 1px 4px; -} + } div.sideBoxBody { padding: 0.2em 5px; - background: %(incontextBoxBodyBg)s; + background: #eeedd9; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; } div.sideBoxBody a { - color: %(incontextBoxBodyColor)s; + color:#555544; } div.sideBoxBody a:hover { @@ -406,6 +475,10 @@ /* boxes */ +div.navboxes { + padding-top: 0.5em; +} + div.boxTitle { overflow: hidden; font-weight: bold; @@ -419,7 +492,7 @@ } div.boxBody { - padding: 5px; + padding: 3px 3px; border-top: none; background-color: %(leftrightBoxBodyBgColor)s; } @@ -477,6 +550,10 @@ height: 14px; } +.navboxes { + padding: 2px; +} + .boxBody, .boxTitle, #pageContent, #appMsg { box-shadow: 1px 1px 3px Gray; } @@ -494,7 +571,7 @@ ul.boxListing a { color: %(defaultColor)s; - padding: 1px 9px 1px 3px; + padding: 1px 3px; display: block; /* necessary to get links across all width available (see on mouse over) */ } @@ -515,7 +592,7 @@ ul.boxListing ul li { margin: 0px; - padding-left: 8px; + padding-left: 1em; } ul.boxListing ul li a { @@ -556,6 +633,7 @@ padding-left: 2em; } + /* custom boxes */ .search_box div.boxBody { @@ -563,8 +641,8 @@ background: #f0eff0 url("gradient-grey-up.png") left top repeat-x; } -.bookmarks_box ul.boxListing div a:hover { - border-bottom: 1px solid #000; +.bookmarks_box ul.boxListing div { + padding-bottom: 0.3em; } .download_box div.boxTitle { @@ -573,30 +651,7 @@ .download_box div.boxBody { background : #eefed9; -} - -/* search box and rql bar */ - -div#rqlinput { - margin-bottom: %(defaultLayoutMargin)s; -} - -input#rql{ - padding: 0.25em 0.3em; - width: 99%; -} - -input.rqlsubmit{ - display: block; - width: 20px; - height: 20px; - background: %(buttonBgColor)s url("go.png") 50% 50% no-repeat; - vertical-align: bottom; -} - -input.norql{ - width:155px; - margin-right: 2px; + vertical-align: center; } /* user actions menu */ @@ -606,12 +661,14 @@ } div#userActionsBox { - width: 15em; + width: 14em; text-align: right; + display: inline-block; + padding-right: 10px; } div#userActionsBox a.popupMenu { - color: #000; + color: black; text-decoration: underline; padding-right: 2em; } @@ -621,22 +678,21 @@ /**************/ div#etyperestriction { margin-bottom: 1ex; - border-bottom: 1px solid %(pageContentBorderColor)s; + border-bottom: 1px solid #ccc; } -/* pagination */ - div.pagination{ margin: 0.5em 0; } + span.slice a:visited, span.slice a:hover{ - color: %(helperColor)s; + color: #555544; } span.selectedSlice a:visited, span.selectedSlice a { - color: %(defaultColor)s; + background-color: #EBE8D9; } /* FIXME should be moved to cubes/folder */ @@ -651,13 +707,19 @@ } div.prevnext a { - color: %(defaultColor)s; + color: #000; } /***************************************/ /* entity views */ /***************************************/ +.mainInfo { + margin-right: 1em; + padding: 0.2em; +} + + div.mainRelated { border: none; margin-right: 1em; @@ -665,17 +727,18 @@ } div.primaryRight{ - margin-left: %(defaultLayoutMargin)s; -} + } div.metadata { font-size: 90%; margin: 5px 0px 3px; - color: %(helperColor)s; + color: #666; + font-style: italic; text-align: right; } div.section { + margin-top: 0.5em; width:100%; } @@ -698,7 +761,6 @@ float: right; padding-left: 24px; position: relative; - z-index: 10; } div.toolbarButton { display: inline; @@ -710,50 +772,56 @@ .warning, .message, -.errorMessage{ - padding: 0.2em; +.errorMessage , +.searchMessage{ + padding: 0.3em 0.3em 0.3em 1em; font-weight: bold; } -.searchMessage{ - margin-top: %(defaultLayoutMargin)s; -} - .loginMessage { margin: 4px 0px; font-weight: bold; - color: %(aColor)s; + color: #ff7700; } -div#appMsg { - margin-bottom: %(defaultLayoutMargin)s; - border: 1px solid %(incontextBoxTitleBgColor)s; +div#appMsg, div.appMsg{ + border: 1px solid #cfceb7; + margin-bottom: 8px; + padding: 3px; + background: #f8f8ee; } .message { - background: %(msgBgColor)s %(infoMsgBgImg)s; + margin: 0px; + background: #f8f8ee url("information.png") 5px center no-repeat; padding-left: 15px; } .errorMessage { margin: 10px 0px; padding-left: 25px; - background: %(msgBgColor)s url("critical.png") 2px center no-repeat; - color: %(errorMsgColor)s; - border: 1px solid %(incontextBoxTitleBgColor)s; + background: #f7f6f1 url("critical.png") 2px center no-repeat; + color: #ed0d0d; + border: 1px solid #cfceb7; } -/* search-associate message */ +.searchMessage { + margin-top: 0.5em; + border-top: 1px solid #cfceb7; + background: #eeedd9 url("information.png") 0% 50% no-repeat; /*dcdbc7*/ +} + .stateMessage { - border: 1px solid %(pageContentBorderColor)s; - background: %(msgBgColor)s %(infoMsgBgImg)s; - padding: 0.1em 0 0.1em 20px; + 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: %(msgBgColor)s url("critical.png") 3px 50% no-repeat; + background: #f2f2f2 url("critical.png") 3px 50% no-repeat; } /* label shown in the top-right hand corner during form validation */ @@ -761,8 +829,8 @@ position: fixed; right: 5px; top: 0px; - background: %(defaultColor)s; - color: #fff; + background: #222211; + color: white; font-weight: bold; display: none; } @@ -772,67 +840,69 @@ /***************************************/ table.listing { - width: 100%; - font-size: 0.9167em; - padding: 10px 0em; - color: %(defaultColor)s; - border: 1px solid %(listingBorderColor)s; - margin-bottom: 1em; + padding: 10px 0em; + color: #000; + width: 100%; + border-right: 1px solid #dfdfdf; } -table.listing th { - font-weight: bold; - font-size: 8pt; - background: %(listingHeaderBgColor)s; - padding: 2px 4px; - border: 1px solid %(listingBorderColor)s; - border-right:none; - /* white-space: nowrap; */ -} table.listing thead th.over { - background-color: %(listingHeaderBgColor)s; + 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 %(listingBorderColor)s; + border-right: 1px solid #dfdfdf; cursor: pointer; } table.listing td { - padding: 3px; + color: #3D3D3D; + padding: 4px; + background-color: #FFF; vertical-align: top; - border: 1px solid %(listingBorderColor)s; +} + +table.listing th, +table.listing td { + padding: 3px 0px 3px 5px; + border: 1px solid #dfdfdf; border-right: none; - background-color: #fff; +} + +table.listing th { + font-weight: bold; + background: %(listingHeaderBgColor)s; } table.listing td a, table.listing td a:visited { - color: %(defaultColor)s; + color: #666; } table.listing a:hover, table.listing tr.highlighted td a { - color:%(defaultColor)s; + color:#000; } table.listing td.top { - border: 1px solid #fff; + border: 1px solid white; border-bottom: none; text-align: right ! important; - /* insane IE row bug workraound */ + /* insane IE row bug workaround */ position: relative; left: -1px; top: -1px; } -table.listing input, -table.listing textarea { - background: %(listingHighlightedBgColor)s; -} - table.htableForm label, table.oneRowTableForm label { vertical-align: middle; } @@ -858,7 +928,6 @@ margin: 0 0 0 1em ; } - table.ajaxEditRelationTable{ margin-bottom: 0.5em; } @@ -882,26 +951,27 @@ color: #ff0000; } + /***************************************/ /* addcombobox */ /***************************************/ -input#newopt { - display: block; - float: left; - width: 120px; -} +input#newopt{ + width:120px ; + display:block; + float:left; + } div#newvalue{ - margin-top: 2px; -} + margin-top:2px; + } -#add_newopt { - display: block; - float: left; - width: 20px; - line-height: 20px; - background: %(buttonBgColor)s url("go.png") 50% 50% no-repeat; +#add_newopt{ + background: #fffff8 url("go.png") 50% 50% no-repeat; + width: 20px; + line-height: 20px; + display:block; + float:left; } /***************************************/ @@ -910,8 +980,9 @@ input.button{ margin: 1em 1em 0px 0px; - border: 1px solid %(buttonBorderColor)s; - border-color: %(buttonBorderColor)s %(incontextBoxTitleBgColor)s %(incontextBoxTitleBgColor)s %(buttonBorderColor)s; + border: 1px solid #edecd2; + border-color:#edecd2 #cfceb7 #cfceb7 #edecd2; + background: #fffff8 url("button.png") bottom left repeat-x; } /* FileItemInnerView jquery.treeview.css */ @@ -927,40 +998,6 @@ } /***************************************/ -/* lists */ -/***************************************/ - -ul.section, -ul.startup { - margin-bottom: 0px; -} - -ul.startup li, -ul.section li { - margin-left: 0px; -} - -ul.simple li, -.popupWrapper ul li { - background: transparent url("bullet_orange.png") no-repeat 0% 6px; -} - -ul.simple li { - padding-left: 8px; -} - -.popupWrapper ul { - padding: 0.2em 0.3em; - margin-bottom: 0px; -} - -.popupWrapper ul li { - padding-left: 8px; - margin-left: 0px; - white-space: nowrap; -} - -/***************************************/ /* footer */ /***************************************/ @@ -968,10 +1005,11 @@ text-align: center; } div#footer a { - color: %(defaultColor)s; + color: #000; text-decoration: none; } + /****************************************/ /* FIXME must by managed by cubes */ /****************************************/ @@ -980,11 +1018,21 @@ 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 %(buttonBorderColor)s; - border-color: %(buttonBorderColor)s %(incontextBoxTitleBgColor)s %(incontextBoxTitleBgColor)s %(buttonBorderColor)s; - background: %(buttonBgColor)s url("button.png") bottom left repeat-x; + border: 1px solid #edecd2; + border-color:#edecd2 #cfceb7 #cfceb7 #edecd2; + background: #fffff8 url("button.png") bottom left repeat-x; } /********************************/ @@ -995,26 +1043,6 @@ float: right; } -/********************************/ -/* rest related classes */ -/********************************/ - -img.align-right { - margin-left: auto; - display:block; -} - -img.align-left { - margin-right: auto; - display:block; -} - -img.align-center{ - text-align: center; - margin-left: auto; - margin-right: auto; - display:block; -} /******************************/ /* reledit */ @@ -1037,8 +1065,6 @@ background-image: none; } -/* jquery-ui tabs */ - div.ui-tabs.ui-widget-content { background:none; border:none; @@ -1052,14 +1078,15 @@ div.ui-tabs ul.ui-tabs-nav a { color:#27537A; padding: 0.3em 0.6em; + outline:0; } div.ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a { color:black; } -div.ui-tabs ul.ui-tabs-nav li.ui-state-hover { - background:none; +div.ui-tabs ul.ui-tabs-nav li.ui-state-hover, div.ui-tabs ul.ui-tabs-nav li.ui-state-focus { + background:white; } div.ui-tabs .ui-widget-header { @@ -1077,16 +1104,6 @@ color:inherit; } -div.ui-tabs .ui-tabs-nav, div.ui-tabs .ui-tabs-panel { - font-family: %(defaultFontFamily)s; - font-size: %(defaultSize)s; -} - -img.ui-datepicker-trigger { - margin-left: 0.5em; - vertical-align: bottom; -} - /* cubicweb.views.undohistory uses : * - span.undo around undo link * - ul.undo-transactions to list transaction