git.plutz.net Git - confetti/blob - style_old.css

   1 * {
   2   font-family: sans-serif;
   3   -moz-box-sizing: border-box;
   4   -webkit-box-sizing: border-box;
   5   box-sizing: border-box;
   6   padding: 0; margin: 0;
   7   font-size: initial;
   8   line-height: 1.25em;
   9   z-index: 0;
  10 }
  11
  12 input, textarea, select, select * {
  13   font-size: .875em;
  14   padding: .125em .125em;
  15 }
  16 input, select {
  17   height: 1.5em;
  18   vertical-align: bottom;
  19 }
  20 button { padding: 0 .5em; }
  21
  22 body {
  23   background: #EEE;
  24   margin: 0;
  25   padding: 0;
  26   padding-top: 2.5em;
  27   position: absolute;
  28   min-height: 100%;
  29   width: 100%;
  30   padding-bottom: 2em;
  31 }
  32 .NAVIGATION {
  33   position: fixed;
  34   top: 0;
  35   display: inline-block;
  36   border-style: none solid solid solid;
  37   border-width: 0 1px 1px 1px;
  38   border-radius: 0 0 4px 4px;
  39   margin: 0 2em;
  40   padding: .5em 1ex;
  41   background: #FFF;
  42   z-index: 1;
  43 }
  44 .NAVIGATION label,
  45 .NAVIGATION a {
  46   color: #008;
  47   border: solid 1px #BBF;
  48   margin: .5em .5ex .25em .5ex;
  49   padding: .2em 3ex .2em 3ex;
  50   background: #EFF;
  51 }
  52 .NAVIGATION label:hover,
  53 .NAVIGATION a:hover {
  54   border-width: 2px 1px;
  55   background: #F3FFFF;
  56 }
  57
  58 #CONFIGURE        label[for="navigationconfig"] { display: none; }
  59 #CONFIGURE:target label[for="navigationconfig"] { display: inline; }
  60
  61 .NAVIGATION input#navigationconfig { display: none; }
  62 .NAVIGATION input + form.config {
  63   position: static;
  64   display: none;
  65 }
  66
  67 .NAVIGATION .config a { display: block; }
  68 .NAVIGATION .config a:hover { border-width: 1px 2px; }
  69 .NAVIGATION input:checked + form.config { display: block; }
  70 .NAVIGATION .config input[type=text],
  71 .NAVIGATION .config button {
  72   font-size: .875em;
  73   line-height: 1.5em;
  74   height: 1.75em;
  75   padding: 0 .25em;
  76   vertical-align: bottom;
  77   border: 1px solid #000;
  78   background-color: #FFF;
  79 }
  80 .NAVIGATION .config input[type=text] {
  81   margin: .25em 0 0 .375em;
  82   border-right: none;
  83   width: 70%;
  84 }
  85 .NAVIGATION .config button {
  86   min-width: 2.5em;
  87   text-align: center;
  88   max-width: 30%;
  89 }
  90 .NAVIGATION .config button[value=del] {
  91   background: #FCC;
  92 }
  93
  94 #message {
  95   display: block;
  96   position: fixed;
  97   top: 0; width: 100%;
  98   margin: 0; padding: 1em;
  99   text-align: center;
 100   font-weight: bold;
 101   background-color: #FAA;
 102   border: 1px solid #000;
 103   border-style: none none solid none;
 104 }
 105
 106 .trailbtn { display: none; }
 107 .trailbtn + .trailbox { display: none; }
 108 .trailbtn:checked + .trailbox { display: inline-block; }
 109 .trailbtn:checked + .trailbox + .trailbtn { display: block; }
 110 .trailbtn:checked + .trailbox + .trailbtn:before {
 111    display: block; content: '+';
 112    width: 3ex; text-align: center;
 113    margin-top: .25em; padding: .25em 0;
 114    background-color: #FFF;
 115    border-width: 1px; border-style: solid;
 116 }
 117 .trailbtn:checked + .trailbox + .trailbtn:checked,
 118 .trailbtn:checked { display: none; }
 119
 120 #footer {
 121   width: 100%;
 122   background-color: #FFF;
 123   border-top: 1px solid #BBF;
 124   margin: 0; padding: .5em 2em;
 125   position: absolute; bottom: 0;
 126 }
 127 /*
 128 # Copyright 2014 - 2017 Paul Hänsch
 129 #
 130 # This file is part of Confetti.
 131 #
 132 # Confetti is free software: you can redistribute it and/or modify
 133 # it under the terms of the GNU Affero General Public License as published by
 134 # the Free Software Foundation, either version 3 of the License, or
 135 # (at your option) any later version.
 136 #
 137 # Confetti is distributed in the hope that it will be useful,
 138 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 139 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 140 # GNU Affero General Public License for more details.
 141 #
 142 # You should have received a copy of the GNU Affero General Public License
 143 # along with Confetti.  If not, see <http://www.gnu.org/licenses/>.
 144 */
 145
 146 .filter, .newcard, .card { box-shadow: 0 0 1ex; }
 147
 148 .filter {
 149   display: block;
 150   border: solid 1px;
 151   border-radius: 4px 4px 0 0;
 152   margin: .5em 2em .25em 2em;
 153   padding: 0 2ex .5em 2ex;
 154   background: #EFF;
 155 }
 156
 157 .filter h1 {
 158   display: block;
 159   font-weight: bold;
 160   font-size: 1.25em;
 161   border-style: none none solid none;
 162   border-radius: 4px 4px 0 0;
 163   border-width: 1px;
 164   margin: 0 -1.625ex .5em -1.625ex;
 165   padding: .125em 1ex;
 166   background: #EEF;
 167 }
 168 .filter input[type="text"] {
 169   width: 100%;
 170   height: 2em;
 171   margin-bottom: 1em;
 172 }
 173 .filter fieldset {
 174   position: relative;
 175   display: block;
 176   border: none;
 177   padding: 0 0 0 12ex;
 178   margin: 0 0 .5em 0;
 179 }
 180 .filter fieldset legend {
 181   position: absolute;
 182   font-size: 1em;
 183   font-weight: bold;
 184   margin-left: -12ex;
 185 }
 186 .filter label {
 187   display: inline-block;
 188   vertical-align: top;
 189   margin: .125em 2ex 0 0;
 190   white-space: nowrap;
 191 }
 192 .filter button {
 193   margin-top: .5em;
 194 }
 195
 196 .filter fieldset.item { padding-left: 0; }
 197 .filter fieldset.item legend { display: none; }
 198 .filter fieldset.item input[type=text],
 199 .filter fieldset.item fieldset.categories {
 200   background-color: #FFF;
 201   border: 1px solid #000;
 202   margin-top: -1px;
 203   padding: .25em .5em;
 204 }
 205 .filter fieldset.item input[type=radio] { display: none; }
 206 .filter fieldset.item input[type=radio] + label {
 207   position: relative; z-index: 1;
 208   margin: 0; padding: .25em 1em;
 209
 210 }
 211 .filter fieldset.item input[type=radio]:checked + label {
 212   background-color: #FFF;
 213   border: 1px solid #000;
 214   border-bottom-color: #FFF;
 215 }
 216 .filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text],
 217 .filter fieldset.item input[type=radio][value="CATEGORIES"] + label + input[type=text] + fieldset.categories {
 218   display: none;
 219 }
 220 .filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text] + fieldset.categories {
 221   display: block;
 222 }
 223 .filter fieldset.item fieldset.categories a {
 224   font-size: .875em;
 225   line-height: 1.625em;
 226   color: #44C;
 227 }
 228
 229 .newcard {
 230   display: block;
 231   border: solid 1px;
 232   margin: 1em 2em .5em 2em;
 233   padding: .5em;
 234   text-align: right;
 235   background: #EEF;
 236 }
 237 .newcard button {
 238   box-shadow: 0 0 .5ex #888;
 239 }
 240
 241 .card {
 242   display: block;
 243   position: relative;
 244   border: solid 1px;
 245   margin: .25em 2em;
 246   padding: 0 20ex 0 0;
 247   overflow: auto;
 248   background: #FFF;
 249   min-height: 8em;
 250 }
 251 .card .control {
 252   display: inline-block;
 253   position: absolute;
 254   top: 0; right: 0;
 255   text-align: right;
 256   background: #EEF;
 257   margin: 0;
 258   height: 100%;
 259   width: 20ex;
 260   max-width: 33%;
 261   padding: .25em .5em;
 262 }
 263 .card .control .item {
 264   display: inline-block;
 265   width: 100%;
 266   height: 2.5em;
 267   line-height: 2.5em;
 268   margin: .25em 0;
 269   padding: 0 .5em;
 270   font-size: .75em;
 271   color: #008;
 272   background: #FFF;
 273   text-decoration: none;
 274   border: 1px solid #888;
 275   box-shadow: 0 0 .5ex #888;
 276 }
 277 .card .control button.item { text-align: right;}
 278 .card .control .item:hover{ border-color: #008; box-shadow: 0 0 .5ex #008; }
 279
 280 .card .control .item[name=newfield] {
 281   width: calc(100% - 2.5em);
 282 }
 283 .card .control .item[value=addfield] {
 284   width: 2.5em;
 285   border-style: solid solid solid none;
 286   text-align: center;
 287 }
 288
 289 .card .control #delete + label + button,
 290 .card .control #delete { display: none; }
 291 .card .control #delete + label { background-color: #FEE; }
 292 .card .control #delete:checked + label + button {
 293   position: fixed; display: block;
 294   left: 40%; top: 30%; width: 20%;
 295   font-size: 1.5em;
 296   text-align: center;
 297   background-color: #FAA;
 298   color: #333;
 299   border-radius: .25em 0 0 .25em;
 300 }
 301 .card .control #delete:checked + label:after {
 302   position: fixed; display: block;
 303   left: 60%; top: 30%; width: 5%;
 304   margin: .25em 0; padding: .5em .75ex 0 .75ex;
 305   height: 1.5em;
 306   font-size: 2em;
 307   content: 'X';
 308   text-align: center;
 309   color: #AAA; background-color: #000;
 310   border-radius: 0 .25em .25em 0;
 311 }
 312
 313 .card .section {
 314   display: inline-block;
 315   vertical-align: top;
 316   float: left;
 317   width: 16.625%;
 318   min-width: 10em;
 319   min-height: 6em;
 320   margin: .125em 0 .5ex 0;
 321   padding: 0 1ex .25em 1ex;
 322 }
 323 .card .section:nth-of-type(2n){ background: #EEE;}
 324
 325 .card .section h2, .card .section h3 {
 326   font-size: 1em;
 327   display: block;
 328   font-weight: bold;
 329   margin: .25em -.5ex .25em -.5ex;
 330   border-style: none none solid none;
 331   border-width: 1px;
 332 }
 333 .card .section .FN {  /* will override h2 */
 334   font-size: 1.2em;
 335   margin-top: 0;
 336 }
 337
 338 .card .section .item {
 339   display: block;
 340   max-width: 100%;
 341   word-wrap: break-word;
 342   white-space: pre-line;
 343 }
 344 .card .section .item label {
 345   font-weight: bold;
 346 }
 347
 348 .card .section textarea.NOTE {
 349   min-height: 6em;
 350 }
 351 .card .section textarea.ADR {
 352   min-height: 4em;
 353 }
 354
 355 .card .section .PHOTO {
 356   width: 100%;
 357   max-height: 10em;
 358 }
 359 .card .section .GENDER { display: inline-block; padding-right: .5ex; }
 360 .card .section .BDAY { display: inline-block;}
 361 .card .section .TEL .type { color: #444; }
 362
 363 .card .section select {
 364   display: block;
 365   background-color: #FFF;
 366   border: 1px solid black;
 367 }
 368
 369 .card .section.attendance ul { margin: 0; padding: 0; }
 370 .card .section.attendance ul li {
 371   display: block;
 372   word-wrap: break-word;
 373 }
 374
 375 .card .section.prescriptions ul { margin: 0; padding: 0; }
 376 .card .section.prescriptions ul li {
 377   display: block;
 378   word-wrap: break-word;
 379   margin: 0 .25ex;
 380 }
 381
 382 .card .section.prescriptions { width: 40ex;}
 383
 384 form.card input.delete { display: none; }
 385 form.card input.delete + label {
 386   display: inline-block;
 387   position: relative;
 388   font-size: .875em;
 389   left: calc(100% - 1.5em);
 390   width: 1.5em;
 391   margin-bottom: -1.5em;
 392   overflow: hidden;
 393   white-space: nowrap;
 394   vertical-align: bottom;
 395 }
 396 form.card input.delete + label:before {
 397   display: inline-block;
 398   content: 'x';
 399   width: calc(1.5em - 2px); height: calc(1.5em - 2px);
 400   vertical-align: bottom;
 401   text-align: center;
 402   color: #444;
 403   background-color: #FBB;
 404   border: 1px solid #BBB;
 405 }
 406 form.card input.delete + label + input[type=text],
 407 form.card input.delete + label + input:not([type]),
 408 form.card input.delete + label + select + input.TEL {
 409   width: calc(100% - 1.5em);
 410 }
 411 form.card input.delete[name^=TEL_] + label { top: 1.5em; }
 412 form.card input.delete[name^=TEL_] + label:before { border-top: none; }
 413 form.card input.delete[name^=NOTE_] + label,
 414 form.card input.delete[name^=ADR_] + label { margin-bottom: 0; }
 415 form.card input.delete[name^=NOTE_] + label:before,
 416 form.card input.delete[name^=ADR_] + label:before { border-bottom: none; }
 417
 418 form.card input.delete:checked + label,
 419 form.card input.delete:checked + label + input,
 420 form.card input.delete:checked + label + select,
 421 form.card input.delete:checked + label + select + input,
 422 form.card input.delete:checked + label + textarea {
 423   display: none
 424 }
 425
 426 form.card .section input[type=text],
 427 form.card .section input:not([type]),
 428 form.card .section textarea,
 429 form.card .section select {
 430   width: 100%;
 431   margin-bottom: .25em;
 432 }
 433
 434 form.card .section select.teltype { margin-bottom: 0; }
 435 form.card .section input.TEL { margin-bottom: .5em; }
 436
 437 form.card .attendance {
 438   min-width: 66%;
 439 }
 440 form.card .attendance label {
 441   position: relative;
 442   display: inline-block;
 443   width: 25ex;
 444   padding-left: 3ex;
 445 }
 446 form.card .attendance label input[type=checkbox] {
 447   position: absolute;
 448   margin-left: -3ex;
 449 }
 450
 451 form.card .insurance input[type=radio] {display: none;}
 452 form.card .insurance input[type=radio] + label {
 453   display: inline-block;
 454   width: 50%;
 455   padding: .25ex 0;
 456   text-align: center;
 457   border: 1px solid black;
 458
 459 }
 460 form.card .insurance input[type=radio]:checked + label {
 461   font-weight: bold;
 462   background-color: #FFF;
 463   border-width: 1px 1px 0 1px;
 464 }
 465 form.card .insurance input[type=radio] + label + input + label + select,
 466 form.card .insurance input[type=radio] + label + select + input {display: none;}
 467 form.card .insurance input[type=radio]:checked + label + input + label + select,
 468 form.card .insurance input[type=radio]:checked + label + select + input {
 469   display: block;
 470   border: 1px solid black;
 471   background-color: #FFF;
 472   border-width: 0 1px 1px 1px;
 473   padding: .25ex 0;
 474   margin-top: -1px;
 475 }
 476 /*
 477 # Copyright 2014 Paul Hänsch
 478 #
 479 # This file is part of Confetti.
 480 #
 481 # Confetti is free software: you can redistribute it and/or modify
 482 # it under the terms of the GNU Affero General Public License as published by
 483 # the Free Software Foundation, either version 3 of the License, or
 484 # (at your option) any later version.
 485 #
 486 # Confetti is distributed in the hope that it will be useful,
 487 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 488 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 489 # GNU Affero General Public License for more details.
 490 #
 491 # You should have received a copy of the GNU Affero General Public License
 492 # along with Confetti.  If not, see <http://www.gnu.org/licenses/>.
 493 */
 494
 495 .sort {
 496   display: block;
 497   border: solid 1px;
 498   border-radius: 4px 4px 0 0 ;
 499   margin: .5em 2em .25em 2em;
 500   padding: .25em 2ex .25em 2ex;
 501   background: #EFF;
 502 }
 503 .sort .label {
 504   font-weight: bold;
 505 }
 506
 507 .newcourse {
 508   display: block;
 509   border: solid 1px;
 510   border-radius: 0 0 4px 4px;
 511   margin: .25em 2em 1em 2em;
 512   padding: .25em 2ex .25em 2ex;
 513   background: #EFF;
 514 }
 515
 516 .course {
 517   display: block;
 518   position: relative;
 519   border: solid 1px;
 520   margin: .25em 2em;
 521   padding: 0 20ex 0 0;
 522   overflow: auto;
 523   background: #FFF;
 524   min-height: 9em;
 525 }
 526 .course .control {
 527   display: inline-block;
 528   position: absolute;
 529   top 0; right: 0;
 530   text-align: right;
 531   background: #EEF;
 532   margin: 0;
 533   height: 100%;
 534   width: 20ex;
 535   max-width: 33%;
 536   padding: .25em 1ex;
 537 }
 538 .course .control .item {
 539   display: inline-block;
 540   vertical-align: top;
 541   width: 100%;
 542   color: #008;
 543   margin: .25em 0 0 0;
 544   border: 1px solid black;
 545   background: #FFF;
 546 }
 547 .course .control a.item {
 548   border-right: 3px double;
 549   padding: .125em 1ex;
 550 }
 551 .course .control a.item:hover{
 552   border-right: 1px solid;
 553 }
 554
 555 .course .control .item[name=newfield] { width: 85%;}
 556 .course .control .item[value=addfield] { width: 15%;}
 557
 558 .course .section {
 559   display: inline-block;
 560   vertical-align: top;
 561   float: left;
 562   width: 20ex;
 563   min-width: 16.5%;
 564   min-height: 6em;
 565   margin: .125em 0 .5ex 0;
 566   padding: 0 1ex .25em 1ex;
 567 }
 568 .course .section:nth-of-type(2n){ background: #EEE;}
 569
 570 .course .section .item {
 571   display: block;
 572   max-width: 100%;
 573   word-wrap: break-word;
 574 }
 575
 576 .course .section h2, .course .section h3 {
 577   font-size: 1em;
 578   display: block;
 579   font-weight: bold;
 580   margin: .25em -.5ex .25em -.5ex;
 581   border-style: none none solid none;
 582   border-width: 1px;
 583 }
 584 .course .section h2 {
 585   font-size: 1.2em;
 586   margin-top: 0;
 587 }
 588
 589 .course .attendance {
 590   min-width: 66%;
 591 }
 592 .course .attendance a {
 593   display: inline-block;
 594   vertical-align: top;
 595   min-width: 13.5ex;
 596   width: 19%;
 597   color: #008;
 598   border-style: solid;
 599   border-width: 1px;
 600   margin: .25em .125ex .25em .125ex;
 601   padding: .125em 1ex .125em 1ex;
 602   background: #EFF;
 603 }
 604
 605 .course .dtstart { width: 37ex; }
 606 .course .dtstart .DTSYEAR,
 607 .course .dtstart .DTSMONTH,
 608 .course .dtstart .DTS{
 609   font-size: .875em;
 610   margin: .25em .25ex 1em .25ex;
 611   display: inline-block;
 612   text-align: center;
 613   font-weight: bold;
 614 }
 615
 616 .course .dtstart .DTSYEAR{ width: 11.5ex; }
 617 .course .dtstart .DTSMONTH{ width: 18.5ex; }
 618 .course .dtstart .DTS{ width: 5.5ex; }
 619
 620 .course .dtstart .DTSCAL,
 621 .course .dtstart .DTSCALHEAD {
 622   display: inline-block;
 623   overflow: hidden;
 624   text-align: center;
 625   width: 5ex;
 626   margin: 0;
 627 }
 628 .course .dtstart .DTSCALHEAD {
 629   font-weight: bold;
 630   border-top: 1px solid;
 631   border-bottom: 1px solid;
 632 }
 633
 634 .course .dtstart input[name=DTSDAY] { display: none; margin: 0; height: 0; width: 0; }
 635 .course .dtstart input[name=DTSDAY]:checked + label.DTSCAL { font-weight: bold; border: solid 1px; }
 636
 637 .course .dtstart .DTSTIME{
 638   display: inline-block;
 639   width: 10ex;
 640   font-weight: bold;
 641 }
 642
 643 .course .recur{ width: 37ex; }
 644 .course .section select,
 645 .course .section button,
 646 .course .section input {
 647   border: 1px solid;
 648   margin: .5em 0;
 649 }
 650
 651 .course .select_attendance {
 652   max-height: 17em;
 653   overflow-y: scroll;
 654 }
 655 .course .select_attendance label{
 656   display: block;
 657   position: relative;
 658   margin: 0; padding: 0;
 659   padding-left: 3ex;
 660 }
 661 .course .select_attendance label input{
 662   position: absolute;
 663   margin: 0; padding: 0;
 664   margin-left: -3ex;
 665   top: 0;
 666 }
 667
 668 .course .section input[type="text"] { width: 100%; }
 669 .course .section textarea.COMMENT { min-height: 6em; width: 100%; overflow: auto; }
 670