web/data/cubicweb.css
changeset 5481 2236b2f57c67
parent 5480 2d5c46e78ae9
child 5482 8c8c6d3f3b3a
equal deleted inserted replaced
5480:2d5c46e78ae9 5481:2236b2f57c67
     6 
     6 
     7 /***************************************/
     7 /***************************************/
     8 /* xhtml tags                          */
     8 /* xhtml tags                          */
     9 /***************************************/
     9 /***************************************/
    10 
    10 
    11 .rhythm_bg { background: url(/data/rhythm20.png) repeat ! important; }
    11 /* scale and rhythm cf http://lamb.cc/typograph/ */
       
    12 body {
       
    13   font-family:  Verdana,sans-serif;
       
    14   font-size: 12px;
       
    15   line-height: 1.5;
       
    16 }
       
    17 h1, h2, h3 { margin-top:0; margin-bottom:0; }
       
    18 
       
    19 /* got rhythm ? beat of 12*1.25 = 15 px */
       
    20 .rhythm_bg { background: url(/data/rhythm18.png) repeat ! important; }
       
    21 
       
    22 /* scale 3:5 stranded */
       
    23 /* h1 { font-size:2em; } */
       
    24 /* h2 { font-size:1.61538em; } */
       
    25 /* h3 { font-size:1.23077em; } */
       
    26 
       
    27 /* scale le corbusier */
       
    28 /* h1 { font-size:2.11538em; } */
       
    29 /* h2 { font-size:1.61538em; } */
       
    30 /* h3 { font-size:1.30769em; } */
       
    31 
       
    32 /* scale traditional */
       
    33 h1 { font-size: 1.5em; }
       
    34 h2 { font-size: 1.33333em; }
       
    35 h3 { font-size: 1.16667em; }
       
    36 
       
    37 /* paddings */
       
    38 h1 {
       
    39     border-bottom: 0.06em solid black;
       
    40     padding-top: 0.9em;
       
    41     margin-bottom: 0.44em;
       
    42 }
       
    43 h2 { padding: 0.4em 0 0.25em 0; }
       
    44 h3 { padding: 0.5em 0 0.57em 0; }
    12 
    45 
    13 html, body {
    46 html, body {
    14   background: #e2e2e2;
    47   background: #e2e2e2;
    15 }
    48 }
    16 
    49 
    17 body {
       
    18   font-size: 69%;
       
    19   font-weight: normal;
       
    20   font-family: Verdana, sans-serif;
       
    21 }
       
    22 
       
    23 h1 {
       
    24   font-size: 188%;
       
    25   margin: 0.2em 0px 0.3em;
       
    26   border-bottom: 1px solid #000;
       
    27 }
       
    28 
       
    29 h2, h3 {
       
    30   margin-top: 0.2em;
       
    31   margin-bottom: 0.3em;
       
    32 }
       
    33 
       
    34 h2 {
       
    35   font-size: 135%;
       
    36 }
       
    37 
       
    38 h3 {
       
    39   font-size: 130%;
       
    40 }
       
    41 
       
    42 h4 {
       
    43   font-size: 120%;
       
    44   margin: 0.2em 0px;
       
    45 }
       
    46 
       
    47 h5 {
       
    48   font-size:110%;
       
    49 }
       
    50 
       
    51 h6{
       
    52   font-size:105%;
       
    53 }
       
    54 
       
    55 a, a:active, a:visited, a:link {
    50 a, a:active, a:visited, a:link {
    56   color: #ff4500;
    51   color: #ff4500; /*  XXX make this configurable */
    57   text-decoration: none;
    52   text-decoration: none;
    58 }
    53 }
    59 
    54 
    60 a:hover{
    55 a:hover{
    61   text-decoration: underline;
    56   text-decoration: underline;
    62 }
    57 }
    63 
    58 
    64 a img, img {
       
    65   border: none;
       
    66   text-align: center;
       
    67 }
       
    68 
       
    69 p {
       
    70   margin: 0em 0px 0.2em;
       
    71   padding-top: 2px;
       
    72 }
       
    73 
       
    74 table, td, input, select{
       
    75   font-size: 100%;
       
    76 }
       
    77 
       
    78 table {
    59 table {
    79   border: none;
    60   border: none;
    80 }
    61 }
    81 
    62 
    82 table th, table td {
    63 table th, table td {
    83   vertical-align: top;
    64   vertical-align: top;
    84 }
    65 }
    85 
    66 
    86 table td img {
    67 input:focus {
    87   vertical-align: middle;
    68   border: 1px inset #ff7700;
    88   margin-right: 10px;
    69 }
    89 }
    70 
    90 
    71 label, .label {
    91 ol {
    72   font-weight: bold;
    92   margin: 1px 0px 1px 16px;
    73 }
    93 }
    74 
    94 
    75 pre {
    95 ul{
    76   clear: both;
    96   margin: 1px 0px 1px 4px;
    77   font-family: 'Courier New', monospace;
    97 }
    78   letter-spacing: 0.015em;
    98 
    79   padding: 0.5em;
    99 ul li {
    80   margin: 0 1.5em 1.5em;
   100   margin-top: 2px;
    81   background-color: #F0F0F0;
   101   padding: 0px 0px 2px 8px;
    82   border: 1px solid #CCBCA7;
   102   background: url("bullet_orange.png") 0% 6px no-repeat;
    83 }
   103 }
    84 
   104 
    85 p {
   105 dt {
    86   text-align: justify;
   106   font-size:1.17em;
    87   margin-bottom: 1.5em;
   107   font-weight:600;
    88 }
   108 }
    89 
   109 
    90 ol, ul {
   110 dd {
    91   list-style-type: disc;
   111   margin: 0.6em 0 1.5em 2em;
    92   margin-bottom: 1.25em;
       
    93 }
       
    94 
       
    95 p + ul {
       
    96   margin-top: -1.5em;
       
    97 }
       
    98 
       
    99 li {
       
   100   margin-left: 1.5em;
   112 }
   101 }
   113 
   102 
   114 fieldset {
   103 fieldset {
   115   border: none;
   104   border: none;
   116 }
   105 }
   117 
   106 
   118 legend {
   107 h2 a, h2 a:active, h2 a:visited, h2 a:link,
   119   padding: 0px 2px;
   108 h3 a, h3 a:active, h3 a:visited, h3 a:link {
   120   font: bold 1em Verdana, sans-serif;
   109   color: inherit;
   121 }
   110   text-decoration: none;
   122 
       
   123 input, textarea {
       
   124   padding: 0.2em;
       
   125   vertical-align: middle;
       
   126   border: 1px solid #ccc;
       
   127 }
       
   128 
       
   129 input:focus {
       
   130   border: 1px inset #ff7700;
       
   131 }
       
   132 
       
   133 label, .label {
       
   134   font-weight: bold;
       
   135 }
       
   136 
       
   137 pre {
       
   138   font-family: Courier, "Courier New", Monaco, monospace;
       
   139   font-size: 100%;
       
   140   color: #000;
       
   141   background-color: #f2f2f2;
       
   142   border: 1px solid #ccc;
       
   143 }
       
   144 
       
   145 code {
       
   146   font-size: 120%;
       
   147   color: #000;
       
   148   background-color: #f2f2f2;
       
   149   border: 1px solid #ccc;
       
   150 }
       
   151 
       
   152 blockquote {
       
   153   font-family: Courier, "Courier New", serif;
       
   154   font-size: 120%;
       
   155   margin: 5px 0px;
       
   156   padding: 0.8em;
       
   157   background-color: #f2f2f2;
       
   158   border: 1px solid #ccc;
       
   159 }
   111 }
   160 
   112 
   161 /***************************************/
   113 /***************************************/
   162 /* generic classes                     */
   114 /* generic classes                     */
   163 /***************************************/
   115 /***************************************/
   170   background-color: transparent;
   122   background-color: transparent;
   171 }
   123 }
   172 
   124 
   173 .hr {
   125 .hr {
   174   border-bottom: 1px dotted #ccc;
   126   border-bottom: 1px dotted #ccc;
   175   margin: 1em 0px;
   127   margin: 19px 0px 20px 0px;
   176 }
   128 }
   177 
   129 
   178 .left {
   130 .left {
   179   float: left;
   131   float: left;
   180 }
   132 }
   190 .hidden {
   142 .hidden {
   191   display: none;
   143   display: none;
   192   visibility: hidden;
   144   visibility: hidden;
   193 }
   145 }
   194 
   146 
   195 li.invisible { list-style: none; background: none; padding: 0px 0px
   147 li.invisible {
   196 1px 1px; }
   148   list-style: none;
       
   149   background: none;
       
   150   padding: 0px 0px 1px 1px;
       
   151 }
   197 
   152 
   198 li.invisible div{
   153 li.invisible div{
   199   display: inline;
   154   display: inline;
   200 }
   155 }
   201 
   156 
   214 table#header td {
   169 table#header td {
   215   vertical-align: middle;
   170   vertical-align: middle;
   216 }
   171 }
   217 
   172 
   218 table#header a {
   173 table#header a {
   219 color: #000;
   174   color: #000;
       
   175 }
       
   176 
       
   177 table#header img#logo{
       
   178   vertical-align: middle;
   220 }
   179 }
   221 
   180 
   222 span#appliName {
   181 span#appliName {
   223  font-weight: bold;
   182   font-weight: bold;
   224  color: #000;
   183   color: #000;
   225  white-space: nowrap;
   184   white-space: nowrap;
   226 }
   185 }
   227 
   186 
   228 table#header td#headtext {
   187 table#header td#headtext {
   229   width: 100%;
   188   width: 100%;
   230 }
   189 }
   231 
   190 
   232 /* FIXME appear with 4px width in IE6 */
       
   233 div#stateheader{
       
   234   min-width: 66%;
       
   235 }
       
   236 
       
   237 /* Popup on login box and userActionBox */
   191 /* Popup on login box and userActionBox */
   238 div.popupWrapper{
   192 div.popupWrapper{
   239  position:relative;
   193   position:relative;
   240  z-index:100;
   194   z-index:100;
   241 }
   195 }
   242 
   196 
   243 div.popup {
   197 div.popup {
   244   position: absolute;
   198   position: absolute;
   245   background: #fff;
   199   background: #fff;
   246   border: 1px solid black;
   200   border: 1px solid black;
   247   text-align: left;
   201   text-align: left;
   248   z-index:400;
   202   z-index: 400;
   249 }
   203 }
   250 
   204 
   251 div.popup ul li a {
   205 div.popup ul li a {
   252   text-decoration: none;
   206   text-decoration: none;
   253   color: black;
   207   color: black;
   254 }
   208 }
   255 
   209 
       
   210 /* FIXME appear with 4px width in IE6 */
       
   211 div#stateheader{
       
   212   min-width: 66%;
       
   213 }
       
   214 
   256 /* main zone */
   215 /* main zone */
   257 
   216 
   258 div#page {
   217 div#page {
   259   background: #e2e2e2;
       
   260   position: relative;
       
   261   min-height: 800px;
   218   min-height: 800px;
   262 }
   219   margin: 8px;
   263 
   220 }
   264 table#mainLayout{
   221 
   265  margin:0px 3px;
   222 table#mainLayout #navColumnLeft {
   266 }
       
   267 
       
   268 table#mainLayout td#contentcol {
       
   269   padding: 8px 10px 5px;
       
   270 }
       
   271 
       
   272 table#mainLayout td.navcol {
       
   273   width: 16em;
   223   width: 16em;
   274 }
   224   padding-right: 8px;
   275 
   225 }
       
   226 
       
   227 table#mainLayout #navColumnRight {
       
   228   width: 16em;
       
   229   padding-left: 8px;
       
   230 }
       
   231 
       
   232 div#pageContent {
       
   233   clear: both;
       
   234 /*  margin-top:-1px; /* enable when testing rhythm */
       
   235   background: #ffffff;
       
   236   border: 1px solid #ccc;
       
   237 }
       
   238 
       
   239 /* */
   276 #contentheader {
   240 #contentheader {
   277   margin: 0px;
   241   margin: 0px;
   278   padding: 0.2em 0.5em 0.5em 0.5em;
   242   padding: 0.2em 0.5em 0.5em 0.5em;
       
   243   border:2px solid blue;
   279 }
   244 }
   280 
   245 
   281 #contentheader a {
   246 #contentheader a {
   282   color: #000;
   247   color: #000;
   283 }
   248 }
   284 
   249 
   285 div#pageContent {
   250 div#contentmain {
   286   clear: both;
   251   padding: 0 1em 1em;
   287   padding: 10px 1em 2em;
       
   288   background: #ffffff;
       
   289   border: 1px solid #ccc;
       
   290 }
   252 }
   291 
   253 
   292 /* rql bar */
   254 /* rql bar */
   293 
   255 
   294 div#rqlinput {
   256 div#rqlinput {
   301 input#rql{
   263 input#rql{
   302   width: 95%;
   264   width: 95%;
   303 }
   265 }
   304 
   266 
   305 /* boxes */
   267 /* boxes */
   306 div.navboxes {
       
   307  margin-top: 8px;
       
   308 }
       
   309 
   268 
   310 div.boxFrame {
   269 div.boxFrame {
   311   width: 100%;
   270   width: 100%;
   312 }
   271 }
   313 
   272 
   383   background: #eeedd9;
   342   background: #eeedd9;
   384   color: #111100;
   343   color: #111100;
   385 }
   344 }
   386 
   345 
   387 ul.boxListing a.boxMenu:hover {
   346 ul.boxListing a.boxMenu:hover {
   388                                 background: #eeedd9 url(puce_down.png) no-repeat scroll 98% 6px;
   347   background: #eeedd9 url(puce_down.png) no-repeat scroll 98% 6px;
   389                                 cursor:pointer;
   348   cursor:pointer;
   390                                 border-top:medium none;
   349   border-top:medium none;
   391                                 }
   350 }
       
   351 
   392 a.boxMenu {
   352 a.boxMenu {
   393   background: transparent url("puce_down.png") 98% 6px no-repeat;
   353   background: transparent url("puce_down.png") 98% 6px no-repeat;
   394   display: block;
   354   display: block;
   395   padding: 1px 9px 1px 3px;
   355   padding: 1px 9px 1px 3px;
   396 }
   356 }
   397 
       
   398 
   357 
   399 a.popupMenu {
   358 a.popupMenu {
   400   background: transparent url("puce_down_black.png") 2% 6px no-repeat;
   359   background: transparent url("puce_down_black.png") 2% 6px no-repeat;
   401   padding-left: 2em;
   360   padding-left: 2em;
   402 }
   361 }
   543 
   502 
   544 /***************************************/
   503 /***************************************/
   545 /* entity views                        */
   504 /* entity views                        */
   546 /***************************************/
   505 /***************************************/
   547 
   506 
   548 .mainInfo  {
       
   549   margin-right: 1em;
       
   550   padding: 0.2em;
       
   551 }
       
   552 
       
   553 
       
   554 div.mainRelated {
   507 div.mainRelated {
   555   border: none;
   508   border: none;
   556   margin-right: 1em;
   509   margin-right: 1em;
   557   padding: 0.5em 0.2em 0.2em;
   510   padding: 0.5em 0.2em 0.2em;
   558 }
   511 }
   567   font-style: italic;
   520   font-style: italic;
   568   text-align: right;
   521   text-align: right;
   569 }
   522 }
   570 
   523 
   571 div.section {
   524 div.section {
   572   margin-top: 0.5em;
   525 /*  margin-top: 0.5em; */
   573   width:100%;
   526   width:100%;
   574 }
   527 }
   575 
   528 
   576 div.section a:hover {
   529 div.section a:hover {
   577   text-decoration: none;
   530   text-decoration: none;
   726 
   679 
   727 table.listing td.top {
   680 table.listing td.top {
   728   border: 1px solid white;
   681   border: 1px solid white;
   729   border-bottom: none;
   682   border-bottom: none;
   730   text-align: right ! important;
   683   text-align: right ! important;
   731   /* insane IE row bug workaround */
   684   /* insane IE row bug workraound */
   732   position: relative;
   685   position: relative;
   733   left: -1px;
   686   left: -1px;
   734   top: -1px;
   687   top: -1px;
   735 }
   688 }
   736 
   689 
   808 
   761 
   809 /***************************************/
   762 /***************************************/
   810 /* footer                              */
   763 /* footer                              */
   811 /***************************************/
   764 /***************************************/
   812 
   765 
   813 div.footer {
   766 div#footer {
   814   text-align: center;
   767   text-align: center;
   815 }
   768 }
   816 div.footer a {
   769 div#footer a {
   817   color: #000;
   770   color: #000;
   818   text-decoration: none;
   771   text-decoration: none;
   819 }
   772 }
   820 
   773 
   821 
   774