css/design40/less/main.less

   1 /* ------------------------------------------------------------- */
   2 /* MAIN PROPERTIES (main.less)                                   */
   3 /* ------------------------------------------------------------- */
   4
   5
   6 // ----------------------------------------------------------------------------
   7 //
   8 // MAIN (MAIN PROPERTIES)
   9 //
  10 // ----------------------------------------------------------------------------
  11 // DESCRIPTION:
  12 //
  13 // CONTENTS:
  14 // - GENERAL FONT SIZES
  15 // - HEADINGS (H1-H3)
  16 //   - H1
  17 //   - H2
  18 //   - H3 & Caption
  19 // - LINKS
  20 // - OTHER STANDARD HTML-ELEMENTS (SELECTORS)
  21 //   - Lists (UL & OL)
  22 //   - Horizontal Rule
  23 // - COMPONENTS
  24 //   - Dimensions for DIVs & SPANs
  25 //   - Long Description
  26 //   - Info-Container (description & instructions)
  27 //   - Labels & Values (SPAN)
  28 //   - Centered Elements
  29 //   - Accent
  30 //   - File Content
  31 //   - Expanded
  32 //   - Hidden Elements
  33 //   - Wrapping & text flow
  34 //   - Visibility, Height utility classes
  35 // - WRAPPER
  36 //   - Toggled Wrapper
  37 //   - Toggle buttons
  38 //   - Columns
  39 //   - Paragraph within Wrapper
  40 //   - Horizontal Scroll
  41 // - CATEGORIES
  42 //   - Plus & Minus / Positive & Negative
  43 //   - Styled Text
  44 // - SPECIALIZED PROPERTIES (REDUNANT)
  45 //   - Dunned Invoices
  46 //   - Bank transactions
  47 //   - Diverse Elements
  48 // - DEPRACETED STUFF
  49 // ----------------------------------------------------------------------------
  50
  51
  52
  53
  54 // --------------------------------------
  55 // GENERAL FONT SIZES
  56 // --------------------------------------
  57
  58 #content {
  59
  60   & > p,
  61   & > div,
  62   & > td,
  63   & > th {
  64     font-size: @font-size-smaller ;
  65   }
  66   input,
  67   select, option,
  68   textarea {
  69     font-size: @font-size-smaller ;
  70   }
  71
  72 }
  73
  74
  75
  76
  77 // --------------------------------------
  78 // Headings (H1 - H3)
  79 // --------------------------------------
  80
  81 // -----------------------
  82 // H1
  83 // -----------------------
  84 h1 {
  85   display:       block;
  86   text-align:    left;
  87   margin:        0;
  88   font-weight:   normal;
  89   font-size:     @h1-size;
  90   line-height:   1.2em ;
  91 }
  92 // PENDENT: SIEHE AUCH .LISTTOP
  93 #content > h1 {
  94   position:           fixed;
  95   z-index:            @zindex-h1; //hps:12
  96   top:                60px;
  97   width:              100%;
  98   color:              @base-h1-color ;
  99   background-color:   @base-h1-bg;
 100   padding:            @h1-padding;
 101   border-top:         @base-h1-border-top;
 102 }
 103 #content .wrapper h1{
 104   color:              @headings-color;
 105   font-size:          @h2-size;
 106   margin:             @margin-from-wrapper ;
 107 }
 108 body > h1{
 109   color:              @base-h1-color ;
 110   background-color:   @base-h1-bg ;
 111   padding:            @h1-padding;
 112 }
 113
 114
 115 // -----------------------
 116 // H2
 117 // -----------------------
 118 h2 {
 119   color:            @headings-color;
 120   font-size:        @h2-size ;
 121   border-style:     none;
 122   letter-spacing:   0.14em;
 123 }
 124
 125 #content,
 126 .admin {
 127   & > h2 {
 128     padding:        0.6em 0.2em ;
 129     margin:         0.6em 0 0 0 ;
 130   }
 131   ui-tabs-panel {
 132     .wrapper > h2 {
 133       padding: 0 0.2em 0.6em 0.2em ;
 134       margin:  @margin-from-wrapper ;
 135     }
 136   }
 137   .wrapper > h2 {
 138     padding:      2.0em 0.2em 0.6em 0.2em ;
 139     margin:       0 ;
 140     font-weight:  normal;
 141     clear:        both;
 142     &:first-child{ padding-top: 0 ; }
 143   }
 144 } // /#content /.admin
 145
 146 h2.confirm { color: @headings-color-confirm ; }
 147 h2.error   { color: @headings-color-error ; }
 148
 149
 150 // -----------------------
 151 // H2 Record-Title
 152 // -----------------------
 153 // (e.g. Customer Name, Article Name)
 154 // PENDENT: in verschiedenen Templates einfuegen
 155 h2.record-title {
 156   padding:          0.6em 0 0 0 !important;
 157   font-size:        @h2-size ;
 158   color:            @headings-color-accent ;
 159   small{
 160     color:          @headings-color ;
 161     letter-spacing: 0 ;
 162   }
 163 }
 164 .wrapper > h2.record-title{
 165   margin:   0em 1em 1em 0.2em !important;
 166 }
 167 .ui-tabs-panel > h2.record-title{
 168   margin:   1em 1em 0.2em @margin-left-from-content !important;
 169   padding:  0.8em 0 0 0.1em !important;
 170 }
 171
 172
 173 // -----------------------
 174 // H3
 175 // -----------------------
 176 // see also mixin .mx-h3-caption and caption in table.less
 177 h3 {
 178   .mx-h3-caption ; // Mixin
 179   &.caption{
 180     margin: 0.6em 0 0.4em 0 !important;
 181   }
 182 }
 183 #content h3{
 184   color:        @headings-color ;
 185   padding-left: 0 ;
 186   margin:       0.8em 0 0.4em 0 ;
 187 }
 188 #content .wrapper h3 {
 189   margin-top:   1.0em ;
 190   &:first-child { margin-top: 0 ; }
 191 }
 192 #content table.tbl-horizontal > tbody > tr > th > h3,
 193 #content table.tbl-horizontal > tbody > tr > td > h3 { margin-top: 0.2em !important; }
 194
 195 // PENDENT: H4
 196
 197
 198
 199
 200 // --------------------------------------
 201 // LINKS
 202 // --------------------------------------
 203
 204 a {
 205   text-decoration: @link-decoration;
 206   font-weight:     @link-weight;
 207   &:link,
 208   &:visited,
 209   &:active {
 210     color: @link-color;
 211   }
 212   &:hover {
 213     color: @link-hover-color;
 214     text-decoration: @link-hover-decoration;
 215   }
 216
 217   // Special classes
 218   // PENDENT: some of them obsolete
 219   &.selected:hover {
 220     color:#EBEBEB;
 221   }
 222   &.nomobile {
 223     background-color:transparent;
 224     border:none;
 225   }
 226   &.green {
 227     background-color: DarkGreen;
 228     color: white !important;
 229     border:none;
 230   }
 231   &.orange {
 232     background-color:#FF8000;
 233     border:none;
 234   }
 235   &.red {
 236     background-color:#FF0000;
 237     border:none;
 238   }
 239
 240
 241   // -------------------
 242   // BUTTONS (.button)
 243   // see file buttons.less
 244
 245 } // /a (Links)
 246
 247
 248
 249
 250
 251 // --------------------------------------
 252 // OTHER STANDARD HTML-ELEMENTS (SELECTORS)
 253 // --------------------------------------
 254
 255 // -----------------------
 256 // Lists (UL & OL)
 257 // -----------------------
 258 ul,
 259 ol {
 260   font-size: @font-size-base ;
 261
 262   li {
 263     font-size: @font-size-small ;
 264   }
 265 }
 266 .wrapper .col{
 267   ul {
 268     list-style: circle outside;
 269     padding: 0 ;
 270     margin: 0 ;
 271     li{
 272       padding: 0 0 0 -0.6em ;
 273       margin: 0 0 0 0 ;
 274     }
 275   }
 276 }
 277
 278 // -----------------------
 279 // Horizontal Rule
 280 // -----------------------
 281 hr {
 282     background-color: @base-standard; // same as table border
 283     border: none;
 284     height: 2px; // same as table border
 285 }
 286
 287
 288
 289
 290
 291
 292 // --------------------------------------
 293 // COMPONENTS
 294 // --------------------------------------
 295
 296 // -----------------------
 297 // Dimensions for DIVs & SPANs
 298 // -----------------------
 299 div,
 300 span,
 301 div.list {
 302   &.wi-smallest     { width:     @div-wi-smallest    ; } //   2.0em
 303   &.wi-verysmall    { width:     @div-wi-verysmall   ; } //   4.0em
 304   &.wi-small        { width:     @div-wi-small       ; } //   8.8em
 305   &.wi-mediumsmall  { width:     @div-wi-mediumsmall ; } //   8.8em
 306   &.wi-normal       { width:     @div-wi-normal      ; } //  12.0em
 307   &.wi-lightwide    { width:     @div-wi-lightwide   ; } //  12.0em
 308   &.wi-wide         { width:     @div-wi-wide        ; } //  18.0em
 309   &.wi-wider        { width:     @div-wi-wider       ; } //  24.0em
 310   &.wi-verywide     { width:     @div-wi-verywide    ; } //  36.0em
 311 }
 312
 313 // -----------------------
 314 // Long Description
 315 // -----------------------
 316 // (see also TD.longdesc etc.)
 317 div.long-description,
 318 div.long-desc,
 319 div.longdescription,
 320 div.longdesc {
 321   font-size: @font-size-smaller ;
 322
 323   &.small {
 324     font-size: @font-size-smaller ;
 325   }
 326   p {
 327     margin: 0 0 0.6em 0;
 328   }
 329   ul,
 330   ol {
 331     margin-top: 0 ;
 332     li { font-size: @font-size-smaller ; }
 333   }
 334 }
 335
 336 // -----------------------
 337 // Info-Container (description & instructions)
 338 // -----------------------
 339 // Description
 340 // Small info-boxes for the user
 341 div.description{
 342   display: block;
 343   float: left ;
 344   padding: 0 0 0.6em 0 ;
 345
 346   // Dimensions
 347   &.wi-verysmall    { width: @div-wi-verysmall   ; }
 348   &.wi-small        { width: @div-wi-small       ; }
 349   &.wi-mediumsmall  { width: @div-wi-mediumsmall ; }
 350   &.wi-normal       { width: @div-wi-normal      ; }
 351   &.wi-wide         { width: @div-wi-wide        ; }
 352   &.wi-lightwide    { width: @div-wi-lightwide   ; }
 353   &.wi-wider        { width: @div-wi-wider       ; }
 354   &.wi-verywide     { width: @div-wi-verywide    ; }
 355
 356 }
 357
 358 // Instructions
 359 // Big info boxes for the user, same as cols
 360 // PENDENT: Mixin fuer Padding, Margin etc. anlegen
 361 div.instructions {
 362   background-color: @instructionbox-bg;
 363   border:           @instructionbox-border;
 364   border-radius:    @contentbox-radius ;
 365   max-width: 70% ;
 366   .mx-contentbox-properties ;
 367   color: #4C4C4C;
 368   font-size: 80%;
 369
 370   p { width: 30.0em }
 371 }
 372
 373 // -----------------------
 374 // Labels & Values (SPAN)
 375 // -----------------------
 376 span.label{
 377   //color: @base-data-label-color ;
 378   font-size: @font-size-smaller ;
 379   font-style: normal ;
 380   //margin: 0 0.3em 0 0 ; // PENDENT: gehoert nicht hierher
 381 }
 382 span.value{
 383   color: #000 ;
 384   //margin: 0 2.6em 0 0 ; // PENDENT: anschauen, margin-top seltsam
 385 }
 386
 387 // -----------------------
 388 // Centered Elements
 389 // -----------------------
 390 // Centered blocks
 391 .center {
 392   margin: 0 auto;
 393   width: auto;
 394 }
 395
 396 // -----------------------
 397 // Accent
 398 // -----------------------
 399 // PENDENT: Neue Loesung
 400 .accent{
 401   div.label{
 402     float: left ;
 403     //color: @base-data-label-color ;
 404     font-size: 80% ;
 405     //&.wi-mediumsmall{ width: 13.6em; } // PENDENT!
 406     padding-top: 0.8em ;
 407   }
 408   div.data{
 409     float: left ;
 410     input[type="text"]{
 411       width: 20em !important ;
 412     }
 413   }
 414 } // /.accent
 415
 416 // -----------------------
 417 // File Content
 418 // -----------------------
 419 // PENDENT: wozu? genügt nicht PRE?
 420 // /templates/webpages/am/edit_templates.html
 421 pre.filecontent {
 422   border: 1px solid blue;
 423   padding-left: 2px;
 424   padding-right: 2px;
 425 }
 426
 427 // -----------------------
 428 // Hidden Elements
 429 // -----------------------
 430 .hidden {
 431   display: none ;
 432 }
 433
 434 // -----------------------
 435 // Wrapping & text flow
 436 // -----------------------
 437
 438 // can be used to wrap text in a pre element
 439 .pre-wrap {
 440   white-space: pre-wrap;
 441 }
 442
 443 // -----------------------
 444 // Visibility, Height utility classes
 445 // -----------------------
 446 .overflow-visible {
 447   overflow: visible;
 448 }
 449
 450 .height-auto {
 451   height: auto;
 452 }
 453
 454
 455 // --------------------------------------
 456 // Wrapper
 457 // --------------------------------------
 458
 459 // Wrapper for columns & horizontal tables
 460 .wrapper {
 461   overflow:  hidden ;
 462   margin:    @contentbox-margin ;
 463   padding:   0 0 1.0em 0 ;
 464   clear:     both ;
 465   display:   block ;
 466   border:    1px transparent solid ; // for nice alignment with folded/toggled wrapper
 467   width:     98.6%;
 468
 469   .wrapper { margin-left: 0 !important ; }
 470
 471   &.test {   background-color: #FFE67C ; }
 472
 473   .tbl-horizontal,
 474   .tbl-plain { float: left ; }
 475
 476   & > table.tbl-horizontal:last-child{
 477     margin-right: 0 ;
 478   }
 479
 480
 481   // -----------------------
 482   // Toggled Wrapper
 483   // -----------------------
 484   &.toggled  {
 485     display: inline-block !important ;
 486     width: 98.6% ;
 487     & > table.tbl-horizontal,
 488     & > div.col {
 489       margin-top: -1.8em ;
 490     }
 491
 492     // -----------------------
 493     // Toggle buttons
 494     // -----------------------
 495     // must be placed on the first position in .wrapper
 496     // PENDENT: Plazierung
 497     & > .toggles {
 498       display:      block ;
 499       float:        right        ;
 500       position:     relative     ;
 501       top:          0            ;
 502       margin-top:   4px          ;
 503       float:        right        ;
 504       width:        100% ;
 505
 506       a.toggle {
 507         //display:    inline-block;
 508         display:      block;
 509         //width:      18px ;
 510         width:      100% ;
 511         height:     18px ;
 512         background-repeat:        no-repeat;
 513         background-position:      50% 50%;
 514         &.min,
 515         &.max { background-position-x: 99% ; }
 516         &.min { background-image: url(../../image/toggle-down.png); }
 517         &.max { background-image: url(../../image/toggle-left.png); }
 518       }
 519     } // /.toggles
 520
 521
 522
 523   }
 524
 525   &.bordered {
 526     border:        @controlpanel-border ;
 527     border-radius: 4px ;
 528   }
 529
 530
 531   // -----------------------
 532   // Columns
 533   // -----------------------
 534   // DIV or TABLE
 535   .col {
 536     float: left ;
 537     &.test {
 538       background-color: #FFD7BA;
 539       border: 1px #6CF solid;
 540     }
 541     &.wi-small       { width: @div-wi-small      ; }
 542     &.wi-mediumsmall { width: @div-wi-mediumsmall; }
 543     &.wi-normal      { width: @div-wi-normal     ; }
 544     &.wi-wide        { width: @div-wi-wide       ; }
 545     &.wi-lightwide   { width: @div-wi-lightwide  ; }
 546     &.wi-wider       { width: @div-wi-wider      ; }
 547     &.wi-verywide    { width: @div-wi-verywide   ; }
 548
 549     .tbl-horizontal,
 550     .tbl-plain {
 551       float: none ;
 552       clear: left ;
 553     }
 554   } // /.col
 555
 556   // -----------------------
 557   // Paragraph within Wrapper
 558   // -----------------------
 559   & > p {
 560     max-width:       36.0em ;
 561     overflow:        hidden ;
 562     font-size:       @font-size-smaller ;
 563     line-height:     140%;
 564     //color:           @gray-darker ;
 565     padding-bottom:  1.0em ;
 566   }
 567
 568 } // /.wrapper
 569
 570 // --------------------------------------
 571 // wrapper / classes to override scroll
 572 // behaviour
 573 // E.g. used for tables / image preview
 574 // --------------------------------------
 575
 576 .horizontal-scroll-wrapper {
 577   overflow-x: auto !important;
 578 }
 579
 580 .scroll {
 581   overflow: scroll !important;;
 582 }
 583
 584 // --------------------------------------
 585 // wrapper to align input-/control-panels
 586 // next to each other, so that they are
 587 // using the same height
 588 // --------------------------------------
 589
 590 .panel-wrapper {
 591   display: flex !important;
 592   flex-wrap: wrap;
 593   gap: 5px;
 594 }
 595
 596 // --------------------------------------
 597 // CATEGORIES
 598 // --------------------------------------
 599
 600 // -----------------------
 601 // Plus & Minus / Positive & negative
 602 // -----------------------
 603 // Inline-Elements
 604 .plus,
 605 .minus,
 606 .plus0,
 607 .plus1 {
 608   clear: none;
 609 }
 610 // Negative Values
 611 .minus,
 612 .plus0 { color:      @base-negative !important; }
 613 // Positive Values
 614 .plus,
 615 .plus1 { color:     @base-positive !important; }
 616
 617 // unbalanced Ledger
 618 // PENDENT: wo eingesetzt?
 619 span.unbalanced_ledger {
 620   background-color: @base-warning-bg;
 621 }
 622
 623
 624 // -----------------------
 625 // Styled Text
 626 // -----------------------
 627 // Dimmed Text
 628 // /templates/webpages/requirement_spec_text_block/_text_block.html
 629 // /templates/webpages/requirement_spec_item/_section_header.html
 630 div.dimmed-text,
 631 span.dimmed-text {
 632   color:        @gray-standard;
 633   font-style:   italic;
 634 }
 635
 636
 637
 638
 639
 640 // --------------------------------------
 641 // SPECIALIZED PROPERTIES (REDUNANT)
 642 // --------------------------------------
 643
 644 // -----------------------
 645 // Dunned Invoices
 646 // -----------------------
 647 //  /templates/webpages/is/form_header.html
 648 //  /templates/webpages/ar/form_header.html
 649 .dunned_invoice {
 650   font-weight: bold;
 651   color: #f00;
 652 }
 653 //  /templates/webpages/is/form_header.html
 654 //  /templates/webpages/ar/form_header.html
 655 .customer_dunning_level {
 656   font-weight: bold;
 657   height: auto !important; // override: table td > span.data (forms.less)
 658 }
 659 // dunning invoice list
 660 // /templates/webpages/dunning/show_invoices.html
 661 #dunning_invoice_list .direct_debit td,
 662 #dunning_invoice_list .direct_debit a {
 663   color: @gray-standard;
 664 }
 665
 666 // -----------------------
 667 // Bank transactions
 668 // -----------------------
 669 // /templates/webpages/bank_transactions/tabs/automatic.html
 670 #bank_transactions_proposals .invoice_number_highlight a,
 671 #bank_transactions_proposals span.invoice_number_highlight {
 672   background-color: @color-green-strong;
 673   color: #FFFFFF;
 674 }
 675
 676 // --------------------------------------
 677 // Diverse Elements
 678 // --------------------------------------
 679 // make vertical Space between to elements
 680 .spacer{
 681   clear: both;
 682 }
 683
 684
 685
 686
 687
 688 // --------------------------------------
 689 // DEPRACETED STUFF (BUT WILL IT BE AVAILABLE FOR A LONGER TIME?)
 690 // --------------------------------------
 691
 692 // PENDENT: Programmmaesig loesen, vor allem primitive Ueberschriften und "Not records Found"-Meldungen wandeln
 693 #content {
 694   &>p { margin: 0.6em 2.0em 1.0em 0.7em }
 695   &>p.message_hint {
 696     margin: 0.6em 2.0em 1.0em 1.0em
 697   }
 698 }