web/data/cubicweb.css
changeset 5479 6ba3587c5cda
parent 5478 c52124b7a00e
child 5483 1a30c5a56256
--- a/web/data/cubicweb.css	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.css	Wed May 05 18:19:56 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,9 +170,9 @@
 /* header */
 
 table#header {
-  background: #ff7700 url("banner.png") left top repeat-x;
+  background: %(headerBgColor)s url("banner.png") left top repeat-x;
+  height: 45px;
   text-align: left;
-  height: 45px; /* height counts in font-size -> 2.5*16 = 40 */
 }
 
 table#header td {
@@ -172,7 +180,7 @@
 }
 
 table#header a {
-  color: #000;
+  color: %(defaultColor)s;
 }
 
 table#header img#logo{
@@ -181,7 +189,7 @@
 
 span#appliName {
   font-weight: bold;
-  color: #000;
+  color: %(defaultColor)s;
   white-space: nowrap;
 }
 
@@ -198,14 +206,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 */
@@ -216,49 +224,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{
@@ -272,17 +281,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,
@@ -291,14 +294,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 {
@@ -307,6 +315,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;
@@ -314,65 +337,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;
 }
 
@@ -392,7 +397,7 @@
 }
 
 div.sideBoxTitle {
-  background: #cfceb7;
+  background: %(actionBoxTitleBgColor)s;
   display: block;
   font: bold 100% Georgia;
 }
@@ -402,15 +407,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 {
@@ -426,10 +436,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{
@@ -449,7 +459,7 @@
 }
 
 div#userActionsBox a.popupMenu {
-  color: black;
+  color: #000;
   text-decoration: underline;
   padding-right: 2em;
 }
@@ -473,7 +483,7 @@
 /**************/
 div#etyperestriction {
   margin-bottom: 1ex;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid %(pageContentBorderColor)s;
 }
 
 span.slice a:visited,
@@ -483,7 +493,7 @@
 
 span.selectedSlice a:visited,
 span.selectedSlice a {
-  color: #000;
+  color: %(defaultColor)s;
 }
 
 /* FIXME should be moved to cubes/folder */
@@ -498,7 +508,7 @@
 }
 
 div.prevnext a {
-  color: #000;
+  color: %(defaultColor)s;
 }
 
 /***************************************/
@@ -557,50 +567,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 ..." */
@@ -614,8 +618,8 @@
   position: fixed;
   right: 5px;
   top: 0px;
-  background: #222211;
-  color: white;
+  background: %(defaultColor)s;
+  color: #fff;
   font-weight: bold;
   display: none;
 }
@@ -625,61 +629,55 @@
 /***************************************/
 
 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;
+}
+
+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 */
@@ -736,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;
@@ -749,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 */
@@ -768,7 +766,7 @@
   text-align: center;
 }
 div#footer a {
-  color: #000;
+  color: %(defaultColor)s;
   text-decoration: none;
 }
 
@@ -787,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;
 }
 
 /********************************/
@@ -805,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