css.lisp

   1 ;;; PHOROS -- Photogrammetric Road Survey
   2 ;;; Copyright (C) 2011, 2012 Bert Burgemeister
   3 ;;;
   4 ;;; This program is free software; you can redistribute it and/or modify
   5 ;;; it under the terms of the GNU General Public License as published by
   6 ;;; the Free Software Foundation; either version 2 of the License, or
   7 ;;; (at your option) any later version.
   8 ;;;
   9 ;;; This program is distributed in the hope that it will be useful,
  10 ;;; but WITHOUT ANY WARRANTY; without even the implied warranty of
  11 ;;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12 ;;; GNU General Public License for more details.
  13 ;;;
  14 ;;; You should have received a copy of the GNU General Public License along
  15 ;;; with this program; if not, write to the Free Software Foundation, Inc.,
  16 ;;; 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  17
  18 (in-package :phoros)
  19
  20 (hunchentoot:define-easy-handler
  21     (style.css
  22      :uri (format nil "/phoros/lib/css-~A/style.css" (phoros-version)))
  23     ()
  24   ""
  25   (setf (hunchentoot:content-type*) "text/css")
  26   (format nil "
  27 /**
  28  * CSS Reset
  29  * From Blueprint reset.css
  30  * http://blueprintcss.googlecode.com
  31  */
  32 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border
  33 :0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
  34 body {line-height:1.5;}
  35 table {border-collapse:separate;border-spacing:0;}
  36 caption, th, td {text-align:left;font-weight:normal;}
  37 table, td, th {vertical-align:middle;}
  38 blockquote:before, blockquote:after, q:before, q:after {content:'';}
  39 blockquote, q {quotes:'' '';}
  40 a img {border:none;}
  41
  42 /**
  43  * Basic Typography
  44  * From OpenLayers style.css
  45  * http://openlayers.org
  46  */
  47 body {
  48     font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
  49     font-size: 80%;
  50     color: #222;
  51     background: #fff;
  52     margin: 1em 1.5em;
  53 }
  54 pre, code {
  55     margin: 1.5em 0;
  56     white-space: pre;
  57 }
  58 pre, code {
  59     font-family: 'andale mono', 'lucida console', monospace;
  60     line-height:1.5;
  61 }
  62 a[href] {
  63     color: #436976;
  64     background-color: transparent;
  65 }
  66 h1, h2, h3, h4, h5, h6 {
  67     color: #003a6b;
  68     background-color: transparent;
  69     font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
  70     margin: 0;
  71     padding-top: 0.5em;
  72 }
  73 h1 {
  74     font-size: 130%;
  75     margin-bottom: 0.5em;
  76     border-bottom: 1px solid #fcb100;
  77 }
  78 h2 {
  79     font-size: 120%;
  80     margin-bottom: 0.5em;
  81     border-bottom: 1px solid #aaa;
  82 }
  83 h3 {
  84     font-size: 110%;
  85     margin-bottom: 0.5em;
  86     text-decoration: underline;
  87 }
  88 h4 {
  89     font-size: 100%;
  90     font-weight: bold;
  91 }
  92 h5 {
  93     font-size: 100%;
  94     font-weight: bold;
  95 }
  96 h6 {
  97     font-size: 80%;
  98     font-weight: bold;
  99 }
 100
 101 /**
 102  * Phoros Specific
 103  */
 104 button, select {
 105     cursor: pointer;
 106     vertical-align: middle;
 107 }
 108 #download-user-points-button {
 109     float: left;
 110     height: 25px;
 111     margin-right: 2px;
 112 }
 113 #blurb-button {
 114     float: left;
 115     height: 25px;
 116     padding-bottom: 1px;
 117 }
 118 #logout-button {
 119     float:right;
 120     height: 25px;
 121 }
 122 #h2-help {
 123     clear: both;
 124 }
 125 .h1-right {
 126     float: right;
 127 }
 128 .vanilla-input {
 129     font-family: 'andale mono', 'lucida console', monospace;
 130     padding: 0px;
 131     margin: 0px;
 132 }
 133 .tight-input {
 134     padding: 0px;
 135     margin-left: 0px;
 136     margin-right: 0px;
 137     margin-top: 3px;
 138     margin-bottom: 2px;
 139 }
 140 .combobox {
 141     height: 20px;
 142 }
 143 .combobox-select {
 144     font-family: 'andale mono', 'lucida console', monospace;
 145     position:absolute;
 146     height: 20px;
 147     border-width: 2px;
 148 }
 149 .combobox-input {
 150     font-family: 'andale mono', 'lucida console', monospace;
 151     position:absolute;
 152     height: 16px;
 153     border-width: 0px;
 154     margin: 2px 18px 2px 2px;
 155     padding: 0 0px 0 0;
 156 }
 157 #point-description {
 158     float: left;
 159     width: 210px;
 160     margin-bottom: 2px;
 161 }
 162 #point-description-select {
 163     width: 210px;
 164 }
 165 #point-description-input {
 166     width: 190px;
 167 }
 168 #point-numeric-description {
 169     width: 118px;
 170     height: 16px;
 171     float: right;
 172 }
 173 #point-kind {
 174     float: left;
 175     width: 86px;
 176 }
 177 #point-kind-select {
 178     width: 86px;
 179 }
 180 #point-kind-input {
 181     width: 66px;
 182 }
 183 #finish-point-button {
 184     float: right;
 185     width: 175px;
 186     height: 30px;
 187 }
 188 #uniquify-buttons {
 189     float: right;
 190     width: 175px;
 191     height: 30px;
 192 }
 193 #suggest-unique-button {
 194     float: left;
 195     width: 130px;
 196     height: 30px;
 197 }
 198 #force-duplicate-button {
 199     float: left;
 200     width: 45px;
 201     height: 30px;
 202 }
 203 #delete-point-button {
 204     float: left;
 205     width: 33px;
 206     height: 30px;
 207 }
 208 #aux-point-distance-or-point-creation-date {
 209     float: left;
 210     width: 210px;
 211     height: 21px;
 212     margin-top: 5px;
 213 }
 214 #aux-point-distance {
 215     width: 100px;
 216     height: 21px;
 217     float: left;
 218 }
 219 #include-aux-data, #display-nearest-aux-data {
 220     float: right;
 221 }
 222 #point-creation-date {
 223     padding-left: 5px;
 224 }
 225 #aux-data {
 226     float: left;
 227     width: 210px;
 228     height: 148px;
 229     margin-top: 2px;
 230     overflow: auto;
 231     line-height: 1;
 232 }
 233 .aux-data-table {
 234     margin-top: 3px;
 235 }
 236 .aux-data-label {
 237     padding-right: 5px;
 238 }
 239 .aux-data-value {
 240     font-family: 'andale mono', 'lucida console', monospace;
 241 }
 242 .phoros-controls {
 243     float: left;
 244     text-align:left;
 245     width: 210px;
 246     height: 323px;
 247 }
 248 #real-phoros-controls {
 249     height: 285px;
 250     width: 210px;
 251 }
 252 .help-div {
 253     float: left;
 254     cursor: default;
 255     background-image: url(/~@*~A/lib/public_html/phoros-logo-background.png);
 256     background-position: 40px 90px;
 257     background-repeat: no-repeat;
 258     width: 256px;
 259     height: 320px;
 260     margin-left: 1em;
 261 }
 262 .controlled-streetmap {
 263     float: left;
 264     margin-left: 1px;
 265     margin-right: 1em;
 266     margin-top: 1px;
 267     margin-bottom: 1px;
 268     border: 1px solid #00008B;
 269 }
 270 .streetmap {
 271     float: left;
 272     width: 512px;
 273     height: 320px;
 274 }
 275 .streetmap-controls {
 276     float: left;
 277     width: 200px;
 278     height: 320px;
 279     line-height: 1;
 280     background-color: #00008B;
 281 }
 282 .streetmap-zoom {
 283     height: 18px;
 284     width: 126px;
 285     clear: both;
 286 }
 287 .streetmap-layer-switcher {
 288     width: 130px;
 289     float: left;
 290 }
 291 .streetmap-layer-switcher span {    /*layer name*/
 292     cursor: pointer;
 293     color: white;
 294 }
 295 #unselect-all-restrictions-button {
 296     font-size: smaller;
 297     width: 33px;
 298     height: 42px;
 299     padding: 0px;
 300     margin-left: 5px;
 301     margin-top: 5px;
 302     float: left;
 303     clear: both;
 304 }
 305 #restriction-select {
 306     font-family: 'andale mono', 'lucida console', monospace;
 307     font-size: small;
 308     width: 157px;
 309     height: 42px;
 310     margin-left: 0px;
 311     margin-top: 5px;
 312     padding: 0px;
 313     border-width: 2px;
 314     float: left;
 315 }
 316 .dataLayersDiv {
 317     cursor: pointer;            /*TODO: doesn't work*/
 318 }
 319 .streetmap-vertical-strut {
 320     float: right;
 321     height: 130px;
 322     width: 0px;
 323     background-color: black;
 324 }
 325 .streetmap-mouse-position {
 326     font-family: 'andale mono', 'lucida console', monospace;
 327     font-size: small;
 328     color: white;
 329     clear: both;
 330     float: left;
 331     height: 15px;
 332     margin-left: 5px;
 333 }
 334 .streetmap-overview {
 335     width: 190px;
 336     height: 110px;
 337     clear: both;
 338     float: left;
 339 }
 340 .image-main-controls, .walk-mode-controls {
 341     height: 18px;
 342     background-color: #00008B;
 343     margin-bottom: 2px;
 344     clear: right;
 345 }
 346 #step-button {
 347     color: #00008B;
 348     cursor: pointer;
 349     font-size: smaller;
 350     font-weight: bold;
 351     background-color: white;
 352     float: right;
 353     height: 12px;
 354     padding-left: 3px;
 355     padding-right: 3px;
 356     padding-bottom: 2px;
 357     margin-top: 2px;
 358     margin-bottom: 2px;
 359     margin-left: 10px;
 360     margin-right: 5px;
 361 }
 362 #remove-work-layers-button {
 363     color: #00008B;
 364     cursor: pointer;
 365     font-size: smaller;
 366     font-weight: bold;
 367     background-color: white;
 368     float: right;
 369     height: 12px;
 370     padding-left: 3px;
 371     padding-right: 3px;
 372     padding-bottom: 2px;
 373     margin-top: 2px;
 374     margin-bottom: 2px;
 375     margin-left: 6px;
 376     margin-right: 5px;
 377 }
 378 #auto-zoom, #walk-mode, #brighten-images {
 379     height: 18px;
 380     font-size: smaller;
 381     color: white;
 382     float: left;
 383     margin-left: 5px;
 384     margin-right: 5px;
 385 }
 386 #step-size {
 387     font-family: 'andale mono', 'lucida console', monospace;
 388     color: white;
 389     float: left;
 390     height: 18px;
 391     cursor: pointer;
 392 }
 393 #auto-zoom, #walk-mode, #include-aux-data-p, label {
 394     cursor: pointer;
 395 }
 396 #zoom-images-to-max-extent {
 397     background: url(/~@*~A/lib/ol/img/zoom-world-mini.png) no-repeat;
 398     cursor: pointer;
 399     float: left;
 400     height: 18px;
 401     width: 18px;
 402     margin-left: 10px;
 403     margin-right: 6px;
 404 }
 405 #no-footprints-p {
 406     color: red;
 407     float: left;
 408     width: 8px;
 409     height: 18px;
 410     font-size: small;
 411 }
 412 .image-controls {
 413     width: 100%;
 414     height: 18px;
 415     background-color: #00008B;
 416 }
 417 .image-zoom {
 418     height: 18px;
 419     width: 126px;
 420     float: left;
 421 }
 422 .image-layer-switcher {
 423     cursor: pointer;            /*TODO: doesn't work*/
 424     height: 18px;
 425     float: left;
 426 }
 427 .image-usable {
 428     color: red;
 429     float: left;
 430     width: 5px;
 431     height: 18px;
 432     font-size: small;
 433 }
 434 .image-trigger-time {
 435     font: smaller 'andale mono', 'lucida console', monospace;
 436     color: white;
 437     float: right;
 438     height: 15px;
 439     margin-right: 5px;
 440     margin-top: 3px;
 441     float: right;
 442 }
 443 .dataLbl, .baseLbl {            /*of layer-switcher*/
 444     display: none;
 445 }
 446 .image-layer-switcher span {    /*layer name*/
 447     display: none;
 448 }
 449 .image {
 450     background-image: url(/~@*~A/lib/public_html/phoros-logo-background.png);
 451     background-position: center;
 452     background-repeat: no-repeat;
 453     /* width and height are read via CSS DOM where we expect them
 454        to be in px. */
 455     width: 300px;
 456     height: 256px;
 457 }
 458 .controlled-image {
 459     float: left;
 460     border: 1px solid #00008B;
 461     margin: 1px;
 462 }
 463 .olControlPanWestItemInactive {
 464     background: url(/~@*~A/lib/ol/img/west-mini.png) no-repeat;
 465     cursor: pointer;
 466     float: left;
 467     height: 18px;
 468     width: 18px;
 469 }
 470 .olControlPanEastItemInactive {
 471     background: url(/~@*~A/lib/ol/img/east-mini.png) no-repeat;
 472     cursor: pointer;
 473     float: left;
 474     height: 18px;
 475     width: 18px;
 476 }
 477 .olControlPanNorthItemInactive {
 478     background: url(/~@*~A/lib/ol/img/north-mini.png) no-repeat;
 479     cursor: pointer;
 480     float: left;
 481     height: 18px;
 482     width: 18px;
 483 }
 484 .olControlPanSouthItemInactive {
 485     background: url(/~@*~A/lib/ol/img/south-mini.png) no-repeat;
 486     cursor: pointer;
 487     float: left;
 488     height: 18px;
 489     width: 18px;
 490 }
 491 .olControlZoomInItemInactive, #increase-step-size {
 492     background: url(/~@*~A/lib/ol/img/zoom-plus-mini.png) no-repeat;
 493     cursor: pointer;
 494     float: left;
 495     height: 18px;
 496     width: 18px;
 497 }
 498 .olControlZoomOutItemInactive, #decrease-step-size {
 499     background: url(/~@*~A/lib/ol/img/zoom-minus-mini.png) no-repeat;
 500     cursor: pointer;
 501     float: left;
 502     height: 18px;
 503     width: 18px;
 504 }
 505 .olControlZoomToMaxExtentItemInactive {
 506     background: url(/~@*~A/lib/ol/img/zoom-world-mini.png) no-repeat;
 507     cursor: pointer;
 508     float: left;
 509     height: 18px;
 510     width: 18px;
 511 }
 512 .olControlScaleLineBottom {     /* Imperial units */
 513     display: none;
 514 }
 515 .streetmapZoomToMaxExtentItemInactive {
 516     background: url(/~@*~A/lib/ol/img/zoom-world-mini.png) no-repeat;
 517     cursor: pointer;
 518     float: left;
 519     height: 18px;
 520     width: 18px;
 521 }
 522 .olLayerGoogleCopyright {
 523     display: none;
 524 }
 525 " *proxy-root*))
 526
 527 ;; (pushnew (hunchentoot:create-folder-dispatcher-and-handler
 528 ;;           (format nil "/phoros/lib/css-~A/" (phoros-version)) "css/") ;TODO: merge this style.css into public_html/style.css
 529 ;;          hunchentoot:*dispatch-table*)
 530
 531