css/design40/less/variables.less

   1 /* ------------------------------------------------------------- */
   2 /* VARIABLES (variables.less)                                    */
   3 /* ------------------------------------------------------------- */
   4
   5 // ----------------------------------------------------------------------------
   6 //
   7 // VARIABLES (Less-Style) for general use (most of it is Bootstrap-Stuff)
   8 //
   9 // ----------------------------------------------------------------------------
  10 // DESCRIPTION:
  11 //
  12 // CONTENTS:
  13 // - COLORS
  14 //   - Greys
  15 //   - Base
  16 //   - Divers Color Specifications
  17 // - SCAFFOLDING
  18 //   - Body/Content Background color, Text color
  19 //   - Content Boxes (Wrapper & Columns Container)
  20 // - LINKS
  21 // - TYPOGRAPHY
  22 //   - Font family
  23 //   - Font size
  24 //   - Line height
  25 //   - Heading 1 - 4
  26 //   - Heading 1 (H1)
  27 //   - Heading Controlpanels
  28 //   - Data Types
  29 // - ICONOGRAPHY (ggf. OBSOLETE)
  30 // - PAGE COMPONENTS
  31 //   - Z-Index
  32 //   - Dashboard (frame-header)
  33 //   - Menu Top (CSS)
  34 //   - Menu Left (JS)
  35 //   - Context Menu (layout-actionbar) -> missing
  36 //   - Component properties
  37 //   - Tabs
  38 // - TABLES
  39 //   - Table & Caption
  40 //   - Table Cells
  41 //   - Zebra effect in list tables
  42 //   - Dimensions (Table Cells Only) (OBSOLETE)
  43 // - BUTTONS
  44 //   - STANDARD-Button Strong (with Submission / data manipulation)
  45 //   - NEUTRAL-Button (NO Submission)
  46 //   - Diverse Button states
  47 // - DROPDOWNS (OBSOLETE)
  48 // - FORMS
  49 //   - Input elements
  50 //   - Legend, Labels, Fieldsets
  51 //   - Highlighting (Focus and so on)
  52 //   - Dimensions (input, select) (OBSOLETE)
  53 // - MESSAGES
  54 // - DIMENSIONS
  55 //   - Standard Dimensions (even for TABLE CELLS)
  56 //   - Dimensions for for DIVs
  57 //   - Dimensions for Table Colums (TH, TD & Col)
  58 //   - Dimensions for combined rows with combination Table column widths
  59 //   - Dimensions for Form input elements
  60 //   - Dimensions for Form Select elements
  61 //   - Dimensions for Textarea elements with standard dimensions
  62 //   -
  63 //   -
  64 // ----------------------------------------------------------------------------
  65
  66
  67
  68
  69 // --------------------------------------
  70 // COLORS (GREYs, BASE COLORS & OTHERS)
  71 // --------------------------------------
  72 // Base Colors see variables_color[*-9].less
  73 // Include the preferred color scheme in style.less before including this less file
  74
  75 // -----------------------
  76 // General text color (label & data)
  77 // -----------------------
  78 // Standard text
  79 @base-primary:         @base-text-color;
  80 @base-label:           @base-data-label-color;
  81 @base-label-bg:        @base-lighter;
  82
  83 // -----------------------
  84 // MESSAGES & INFO TYPES
  85 // -----------------------
  86 // color definitions in variables_color_[*-9].less
  87 @base-ok:              @color-green-strong;
  88 @base-ok-bg:           @color-green-light;
  89 @base-ok-bg-lighter:   @color-green-lighter;
  90
  91 @base-error:               @color-red-strong;
  92 @base-error-bg:            @color-red-light;
  93 @base-error-bg-lighter:    @color-red-lighter;
  94
  95 @base-info:                @color-blue-strong;
  96 @base-info-bg:             @color-blue-light;
  97 // darker variant for table row alternation
  98 @base-info-bg-dark:        @color-blue-dark;
  99 @base-info-bg-darker:      @color-blue-darker;
 100
 101 @base-warning:             @color-orange-strong;
 102 @base-warning-bg:          @color-orange-light;
 103 @base-warning-bg-lighter:  @color-orange-lighter;
 104
 105 // Positive & negative colors
 106 @base-positive:        @color-green-strong;
 107 @base-positive-bg:     @color-green-light;
 108 @base-negative:        @color-red-strong;
 109 @base-negative-bg:     @color-red-light;
 110
 111
 112
 113
 114
 115 // --------------------------------------
 116 // CONTENT CONTAINER
 117 // --------------------------------------
 118
 119 @text-min-width:            400px ;
 120 @text-max-width:            600px ;
 121
 122 // like Wrappers, Colums Containers, Flash-Messages and Record Selection
 123 //@content-padding:           0 0 0 0; // 0 is OK otherwise there will be a border after the ui-tabs-panels
 124 //@content-margin:            101px 0 1.0em 0; // PENDENT: ueberpruefen
 125 // working alternative
 126 @content-padding:           101px 0 0 0; // 0 is OK otherwise there will be a border after the ui-tabs-panels
 127 @content-margin:            0 0 1.0em 0; // PENDENT: ueberpruefen
 128
 129
 130
 131 @margin-left-from-content:  1.2em ; // directly inside #content
 132 @margin-left-from-wrapper:  0   ;       // directly inside .wrapper
 133
 134 @margin-from-content:       1em   1em 1em   @margin-left-from-content ; // directly inside #content
 135 @margin-from-wrapper:       1.6em 0   0.4em @margin-left-from-wrapper ; // directly inside .wrapper
 136
 137 // Paragraphs, messages
 138 @text-container-width:      auto ;
 139 @text-container-min-width:  @text-min-width ;
 140 @text-container-max-width:  @text-max-width ;
 141
 142 @messages_width:            60.0em;
 143 @messages-min-width:        60.0em;
 144 @messages-max-width:        40.0em;
 145
 146 @contentbox-margin:         1.0em 1.0em 1.0em @margin-from-panel-left ;
 147 @contentbox-padding:        0.6em 1.0em 1.2em 1.8em ;
 148 @contentbox-radius:         0.6em ;
 149
 150 // -----------------------
 151 // Component properties
 152 // -----------------------
 153 // Based on 14px font-size and 1.428 line-height (~20px to start)
 154 // PENDENT: UI-Tabs und so weiter
 155 // PENDENT: genauer anschauen, ggf. obsolete da nicht verwendet
 156
 157 @padding-base-vertical:         6px;
 158 @padding-base-horizontal:       12px;
 159
 160 @padding-large-vertical:        10px;
 161 @padding-large-horizontal:      16px;
 162
 163 @padding-small-vertical:        5px;
 164 @padding-small-horizontal:      10px;
 165
 166 @line-height-large:             1.33;
 167 @line-height-small:             1.5;
 168
 169 @border-radius-base:            4px;
 170 @border-radius-large:           6px;
 171 @border-radius-small:           3px;
 172
 173 @component-active-color:        @base-superlight;
 174 @component-active-bg:           @base-primary; // PENDENT: Variable nicht vorgesehen dafuer
 175
 176 @caret-width-base:              4px;
 177 @caret-width-large:             5px;
 178
 179 @margin-from-panel-left:        1.2em; // for panels and wrappers
 180
 181 @padding-databoxes-left:        0.6em ; // for input, span.data in data tables
 182
 183
 184
 185
 186
 187
 188
 189
 190 // --------------------------------------
 191 // LINKS
 192 // --------------------------------------
 193 @link-color:            @base-link-color;
 194 @link-hover-color:      lighten(@base-link-color, 10%);
 195 @link-decoration:       underline;
 196 @link-hover-decoration: underline;
 197 @link-weight:           bold;
 198
 199
 200
 201
 202
 203 // --------------------------------------
 204 // TYPOGRAPHY
 205 // --------------------------------------
 206
 207 // -----------------------
 208 // Font family
 209 // -----------------------
 210 @font-family-sans-serif:  Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif ;
 211 @font-family-serif:       Georgia, "Times New Roman", Times, serif ;
 212 @font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
 213
 214 @font-family-base:        @font-family-sans-serif;
 215
 216 // -----------------------
 217 // Font size
 218 // -----------------------
 219 @font-size-base:          11pt; // vorh.14px
 220 @font-size-large:         ceil(@font-size-base * 1.25); //  ~18px
 221 @font-size-medium:        ceil(@font-size-base * 1.0 ); //  ~18px
 222 @font-size-small:         ceil(@font-size-base * 0.85); //  ~11px
 223 @font-size-smaller:       ceil(@font-size-base * 0.76); //  ~12px
 224 @font-size-verysmall:     ceil(@font-size-base * 0.6); //   ~12px
 225
 226 // -----------------------
 227 // Line height
 228 // -----------------------
 229 @line-height-base:        1.428571429; //  20/14
 230 @line-height-computed:    floor(@font-size-base * @line-height-base); //  ~20px
 231
 232 // -----------------------
 233 // Heading 1-4
 234 // -----------------------
 235 @headings-font-family:    @font-family-base;
 236 @headings-weight:         500;
 237 @headings-line-height:    1.3em;
 238 @headings-color:          @base-heading-color;
 239 @headings-color-accent:   #000;
 240
 241 @headings-color-error:    @base-error;
 242 @headings-color-confirm:  @base-ok;
 243
 244 @h1-size:            floor(@font-size-base * 1.1); //  ~**px
 245 @h2-size:            floor(@font-size-base * 1.2); //  ~**px
 246 @h3-size:            ceil(@font-size-base * 1.1); //  ~**px
 247 @h4-size:            ceil(@font-size-base * 1.0); //  ~**px
 248 @h5-size:            @font-size-base;
 249 @h6-size:            ceil(@font-size-base * 0.85); //  ~**px
 250
 251 @h1-style:           normal;
 252 @h2-style:           normal;
 253 @h3-style:           normal;
 254 @h4-style:           normal;
 255
 256 @h1-weight:          bold;
 257 @h2-weight:          bold;
 258 @h3-weight:          normal;
 259 @h4-weight:          normal;
 260
 261 // -----------------------
 262 // Heading 1 (H1)
 263 // -----------------------
 264 // Fixed on top of every page together with the action bar
 265 @base-h1-color:        @_base-h1-color;
 266 @base-h1-bg:           @_base-h1-bg;
 267 @h1-padding:            0.7em 0.5em 0.7em 1.3em;
 268 @h1-margin:             0;
 269 @base-h1-border-top:  @_base-h1-border-top;
 270 // -----------------------
 271 // Heading Controlpanels
 272 // -----------------------
 273 @h3-controlpanel-size:    @h3-size;
 274 @h4-controlpanel-size:    @h4-size;
 275
 276 @h3-controlpanel-style:   bold;
 277 @h4-controlpanel-style:   bold;
 278
 279 @h3-controlpanel-weight:  normal;
 280 @h4-controlpanel-weight:  bold;
 281
 282 // -----------------------
 283 // Data types
 284 // -----------------------
 285 @heading-and-label-color:   @base-data-label-color  ;
 286 @heading-and-label-bg:      @base-data-label-color  ;
 287 @data-color:                @base-data-color ;
 288
 289 @long-desc-size:            @font-size-verysmall ;
 290 @long-desc-color:           @base-text-color ;
 291
 292
 293
 294 // --------------------------------------
 295 // Iconography (ggf. OBSOLETE)
 296 // --------------------------------------
 297 //@icon-font-path:          "../bootstrap/fonts/";
 298 //@icon-font-name:          "glyphicons-halflings-regular";
 299
 300
 301
 302
 303
 304 // --------------------------------------
 305 // PAGE COMPONENTS
 306 // --------------------------------------
 307
 308 // -----------------------
 309 // Z-index
 310 // -----------------------
 311 // Stack-/Layer Positions of components
 312 // only for specialists
 313
 314 // General
 315 @zindex-dropdown:          1000;
 316 @zindex-popover:           1010;
 317 @zindex-tooltip:           1030;
 318 @zindex-navbar-fixed:      1030;
 319 @zindex-modal-background:  1040;
 320 @zindex-modal:             1050;
 321
 322 // Components
 323 @zindex-dashboard:         1040; // frame-header
 324 @zindex-navbar:            1999; // menuv3 must be on top
 325 @zindex-h1:                1020; // h1 inside content
 326
 327 @zindex-actionbar:               1030; // action-bar (Workflow)
 328 @zindex-actionbar-action:        1031;
 329 @zindex-actionbar-combobox:      1031;
 330 @zindex-actionbar-combobox-head: 1033;
 331 @zindex-actionbar-combobox-list: 1032;
 332
 333 // -----------------------
 334 // DASHBOARD (FRAME HEADER)
 335 // -----------------------
 336 @dashbrd_bg:            @_dashbrd_bg ;
 337 @dashbrd_text:          @_dashbrd_text ;
 338 @dashbrd_link:          @_dashbrd_link ;
 339 @dashbrd_link_hover:    @_dashbrd_link_hover ;
 340 @dashbrd_link_deco:     underline ;
 341 @dashbrd_input_bg:      @_dashbrd_input_bg;
 342 @dashbrd_input_text:    @_dashbrd_input_text ;
 343
 344 // -----------------------
 345 // Menue (menuv3)
 346 // -----------------------
 347 @menu_bg:               @_menu_bg ;
 348 @menu_link:             @_menu_link ;
 349
 350 @menu_link_bg:          @_menu_link_bg ; // display:block
 351 @menu_link_hover:       @_menu_link_hover ;
 352 @menu_link_hover_bg:    @_menu_link_hover_bg ;
 353 @menu_link_hover_deco:  underline ;
 354 @menu_border_color:     @_menu_border_color ;
 355 @menu_border:           1px @menu_border_color solid ;
 356
 357 @menu_link_bg_level1:         @_menu_link_bg_level1 ;
 358 @menu_link_bg_level1_hover:   @_menu_link_bg_level1_hover ;
 359 @menu_link_bg_level2:         @_menu_link_bg_level2 ;
 360 @menu_link_bg_level2_hover:   @_menu_link_bg_level2_hover ;
 361 @menu_link_bg_level3:         @_menu_link_bg_level3 ;
 362 @menu_link_bg_level3_hover:   @_menu_link_bg_level3_hover ;
 363
 364
 365 // -----------------------
 366 // Menu Left (JS & HTML)
 367 // -----------------------
 368 @menu_left_bg:                    @_menu_left_bg ;
 369 @menu_left_level_1_color:         @_menu_left_level_1_color ;
 370 @menu_left_level_1_bg:            @_menu_left_level_1_bg ;
 371 @menu_left_level_1_hover_color:   @_menu_left_level_1_hover_color ;
 372 @menu_left_level_1_hover_bg:      @_menu_left_level_1_hover_bg ;
 373 @menu_left_level_2_color:         @_menu_left_level_2_color ;
 374 @menu_left_level_2_bg:            @_menu_left_level_2_bg ;
 375 @menu_left_level_2_hover_color:   @_menu_left_level_2_hover_color ;
 376 @menu_left_level_2_hover_bg:      @_menu_left_level_2_hover_bg ;
 377 @menu_left_level_3_color:         @_menu_left_level_3_color ;
 378 @menu_left_level_3_bg:            @_menu_left_level_3_bg ;
 379 @menu_left_level_3_hover_color:   @_menu_left_level_3_hover_color ;
 380 @menu_left_level_3_hover_bg:      @_menu_left_level_3_hover_bg ;
 381
 382 // Additional Variables for Menu Left (JS)
 383 @menu_open_color: @_menu_open_color;
 384 @menu_open_bg:    @_menu_open_bg;
 385
 386 // -----------------------
 387 // CONTEXT-MENU (LAYOUT-ACTIONBAR)
 388 // -----------------------
 389 @actionbar-bg:                  @_actionbar-bg;
 390 @actionbar-bg-active:           @_actionbar-bg-active;
 391 //@actionbar-bg-hover:          @_actionbar-bg-hover;
 392 @actionbar-font-color:          @_actionbar-font-color;
 393 @actionbar-font-color-active:   @_actionbar-font-color-active;
 394 @actionbar-border-color:        @_actionbar-border-color;
 395 @actionbar-border-color-active: @_actionbar-border-color-active;
 396 @actionbar-hover-bg:            @_actionbar-hover-bg;
 397 @actionbar-hover-color:         @_actionbar-hover-color;
 398 @actionbar-border-radius:       4px ;
 399 @actionbar-font-color-disabled: @_actionbar-font-color-disabled;
 400
 401 // -----------------------
 402 // Tabs
 403 // -----------------------
 404 // background tabs panel (data/content)
 405
 406 @tabs-bg:                   @_tabs-bg ;
 407 @tabs-panel-bg:             @_tabs-panel-bg ;
 408 @tabs-border-color:         @_tabs-border-color ;
 409 @tabs-border-radius:        4px ;
 410
 411 @tabs-default-bg:           @_tabs-default-bg;
 412 @tabs-default-color:        @_tabs-default-color;
 413 @tabs-default-hover-bg:     @_tabs-default-hover-bg;
 414 @tabs-default-hover-color:  @_tabs-default-hover-color;
 415
 416 @tabs-active-bg:            @_tabs-active-bg;
 417 @tabs-active-color:         @_tabs-active-color;
 418 @tabs-active-hover-bg:      @_tabs-active-hover-bg;
 419 @tabs-active-hover-color:   @_tabs-active-hover-color;
 420
 421
 422
 423
 424
 425 // --------------------------------------
 426 // Dropdowns (OBSOLETE?)
 427 // --------------------------------------
 428
 429 @dropdown-bg:                    #fff;
 430 @dropdown-border:                rgba(0,0,0,.15);
 431 @dropdown-fallback-border:       #ccc;
 432 @dropdown-divider-bg:            #e5e5e5;
 433
 434 @dropdown-link-color:            @gray-dark;
 435 @dropdown-link-hover-color:      darken(@gray-dark, 5%);
 436 @dropdown-link-hover-bg:         #f5f5f5;
 437
 438 @dropdown-link-active-color:     @component-active-color;
 439 @dropdown-link-active-bg:        @component-active-bg;
 440
 441 @dropdown-link-disabled-color:   @gray-light;
 442
 443 @dropdown-header-color:          @gray-light;
 444
 445 @dropdown-caret-color:           #000;
 446
 447
 448
 449
 450
 451 // --------------------------------------
 452 // FORMS
 453 // --------------------------------------
 454
 455 // -------------------
 456 // Input elements
 457 // -------------------
 458 @input-bg:                       #fff;
 459 @input-bg-disabled:              @gray-lighter;
 460
 461 @input-color:                    @gray-standard;
 462 @input-border:                   #ccc;
 463 @input-border-radius:            @border-radius-base;
 464 @input-border-focus:             #66afe9;
 465
 466 @input-color-placeholder:        @gray-light;
 467
 468 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
 469 @input-height-large:             (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
 470 @input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
 471
 472 @input-group-addon-bg:           @gray-lighter;
 473 @input-group-addon-border-color: @input-border;
 474
 475 // -------------------
 476 // Legend, Labels, Fieldsets
 477 // -------------------
 478 @legend-color:                   @gray-dark;
 479 @legend-border-color:            #e5e5e5;
 480
 481 // -------------------
 482 //  Highlighting (Focused, Activated)
 483 // -------------------
 484 @formelement-focus-bg:             @_formelement-focus-bg ;
 485 @formelement-focus-text:           @_formelement-focus-text ;
 486 @formelement-focus-border:         @_formelement-focus-border ;
 487
 488
 489
 490
 491
 492 // --------------------------------------
 493 // BUTTONS
 494 // --------------------------------------
 495 @button-font-weight:                normal;
 496 @button-border-radius:              6px ;
 497 // -------------------
 498 // STANDARD-Button Strong (with Submission / data manipulation)
 499 // -------------------
 500 // Standard
 501 @button-strong-color:               @_button-strong-color;
 502 @button-strong-bg:                  @_button-strong-bg;
 503 @button-strong-border:              1px @_button-strong-border-color solid;
 504
 505 // Hover
 506 @button-strong-hover-color:         @_button-strong-hover-color;
 507 @button-strong-hover-bg:            @_button-strong-hover-bg;
 508 @button-strong-hover-border:        1px @_button-strong-hover-border-color solid;
 509
 510 // Active
 511 @button-strong-active-color:        @_button-strong-active-color;
 512 @button-strong-active-bg:           @_button-strong-active-bg;
 513 @button-strong-active-border:       1px @_button-strong-active-border-color solid;
 514
 515 // -------------------
 516 // NEUTRAL-Button (NO Submission)
 517 // -------------------
 518 // Standard
 519 @button-neutral-color:               @_button-neutral-color;
 520 @button-neutral-bg:                  @_button-neutral-bg;
 521 @button-neutral-border:              1px @_button-neutral-border-color solid;
 522
 523 // Hover
 524 @button-neutral-hover-color:         @_button-neutral-hover-color;
 525 @button-neutral-hover-bg:            @_button-neutral-hover-bg;
 526 @button-neutral-hover-border:        1px @_button-neutral-hover-border-color solid;
 527
 528 // Active
 529 @button-neutral-active-color:        @_button-neutral-active-color;
 530 @button-neutral-active-bg:           @_button-neutral-active-bg;
 531 @button-neutral-active-border:       1px @_button-neutral-active-border-color solid;
 532
 533 // -------------------
 534 // Diverse Button states
 535 // -------------------
 536 //@button-primary-color:              @_button-primary-color;
 537 //@button-primary-bg:                 @_button-primary-bg;
 538 //@button-primary-border:             1px darken(@button-primary-bg, 5%) solid;
 539
 540 @button-success-color:              @_button-success-color;
 541 @button-success-bg:                 @_button-success-bg;
 542 @button-success-border:             1px darken(@color-green-light, 5%) solid;
 543
 544 @button-warning-color:              @_button-warning-color;
 545 @button-warning-bg:                 @_button-warning-bg;
 546 @button-warning-border:             1px darken(@button-warning-bg, 5%) solid;
 547
 548 @button-info-color:                 @_button-info-color;
 549 @button-info-bg:                    @_button-info-bg;
 550 @button-info-border:                1px darken(@button-info-bg, 5%) solid;
 551
 552 @button-link-disabled-color:        @_button-link-disabled-color;
 553
 554
 555
 556
 557
 558 // --------------------------------------
 559 // CONTROL PANELS
 560 // --------------------------------------
 561
 562 @controlpanel-margin:         @contentbox-margin      ;
 563 @controlpanel-padding:        1.2em 1.0em 0.8em 0.9em ;
 564 @controlpanel-padding-narrow: 0.4em 1.0em 0.6em 0.9em ; // e.g. for input-panels
 565 @controlpanel-padding-bold:   0.8em 1.0em 1.4em 1.2em ; // PENDENT: wozu?
 566 @controlpanel-bg-color:       @_controlpanel-bg-color ;
 567 @controlpanel-bg-style:        @_bg_style_controlpanel ;
 568 @controlpanel-color:          @_controlpanel-color    ;
 569 @controlpanel-border:         1px @_controlpanel-border-color solid  ;
 570 @controlpanel-radius:         @contentbox-radius      ;
 571
 572 // PENDENT: noetig?
 573 @controlpanel-bg-hover:       @base-superdark        ;
 574 @controlpanel-bg-hover-text:  @base-light            ;
 575 @controlpanel-active-bg:      @base-darker            ;
 576 @controlpanel-active-text:    @base-lighter          ;
 577
 578 @controlpanel-h3-color:       @h3-size ;
 579 @controlpanel-h3-size:        110%    ;
 580 @controlpanel-h3-style:       normal  ;
 581 @controlpanel-h3-weight:      normal  ;
 582
 583 @controlpanel-h4-color:       @_controlpanel-header-color ;
 584 @controlpanel-h4-size:        @h4-size    ;
 585 @controlpanel-h4-weight:      normal ;
 586 @controlpanel-h4-style:       normal  ;
 587
 588 // select item control panel
 589 @controlpanel-select-item-padding:   0.6em 1.0em 0.6em 0.8em ;
 590
 591 @instructionbox-bg:           @controlpanel-bg-color ;
 592 @instructionbox-border:       1px @_controlpanel-border-color solid ;
 593
 594
 595
 596
 597
 598 // --------------------------------------
 599 // TABLES
 600 // --------------------------------------
 601
 602 @table-border-color:             @_table-border-color; //  table and cell border
 603
 604 @table-bg:                       @_table-bg; // overall background-color
 605 @table-bg-accent:                @_table-bg-accent; // for striping
 606 @table-bg-hover:                 @_table-bg-hover;
 607 @table-bg-active:                @_table-bg-active;
 608
 609 @table-caption-bg:               @_table-caption-bg;
 610 @table-caption-color:            @_table-caption-color;
 611 @table-caption-size:             @h3-size - 2pt ;
 612 @table-caption-style:            @h3-style ;
 613 @table-caption-weight:           @h3-weight ;
 614
 615
 616 // --------------
 617 // Table Cells
 618 // --------------
 619 @t-cell-text-color:              @_t-cell-text-color;
 620 @t-cell-th-text-color:           @_t-cell-th-text-color; // even for label/.label in tables
 621
 622 @t-cell-head-bg:                 @_t-cell-head-bg;
 623 @t-cell-head-bg-accent:          @_t-cell-head-bg-accent;
 624 @t-cell-head-text:               @_t-cell-head-text;
 625 @t-cell-head-text-accent:        @_t-cell-head-text-accent;
 626
 627 @t-cell-label-text:              @_t-cell-label-text;
 628 @t-cell-label-text-accent:       @_t-cell-label-text-accent;
 629 @t-cell-data-text:               @_t-cell-data-text;
 630 @t-cell-data-text-accent:        @_t-cell-data-text-accent;
 631
 632 @t-cell-databox-text-color:       @_t-cell-databox-text-color ;
 633 @t-cell-databox-border-color:     @_t-cell-databox-border-color ;
 634
 635
 636 @t-cell-foot-text:               @_t-cell-foot-text;
 637
 638 // -----------------------
 639 // Zebra effect in list tables
 640 // -----------------------
 641 @t-row-zebra-bg-odd:             @_t-row-zebra-bg-odd;
 642 @t-row-zebra-bg-even:            @_t-row-zebra-bg-even;
 643
 644 @t-row-zebra-bg-hover:           @_t-row-zebra-bg-hover;
 645
 646 @table-list-zebra-text-color:     @_table-list-zebra-text-color ;
 647 @table-list-zebra-link-color:     @_table-list-zebra-link-color ;
 648
 649 @t-row-zebra-bg-special:         #FEF2C5; // PENDENT: ANSCHAUEN
 650 @t-row-zebra-bg-highlight:       #B4F4FE; // PENDENT: ANSCHAUEN
 651
 652
 653 // PENDENT: Footer
 654
 655
 656
 657 // --------------------------------------
 658 // MESSAGES
 659 // --------------------------------------
 660
 661 @message-margin:         3.6em 2.0em 0.6em 1.0em ;
 662 @message-padding:        0.6em 0.6em 0.5em 0.6em ;
 663
 664 // Error
 665 @message_error_bg:       @base-error-bg ;
 666 @message_error_border:   1px solid @base-error ;
 667 @message_error_text:     @base-error ;
 668 // OK
 669 @message_ok_bg:          @base-ok-bg ;
 670 @message_ok_border:      1px solid @base-ok ;
 671 @message_ok_text:        @base-ok ;
 672 // Info & Hint
 673 @message_info_bg:        @base-info-bg ;
 674 @message_info_border:    1px solid @base-info ;
 675 @message_info_text:      @base-info ;
 676 // Warning
 677 @message_warning_bg:     @base-warning-bg ;
 678 @message_warning_border: 1px solid @base-warning ;
 679 @message_warning_text:   @base-warning ;
 680 // Hint (like Info above, just to make it sure working)
 681 @message_hint_bg:        @message_info_bg ;
 682 @message_hint_border:    @message_info_border ;
 683 @message_hint_text:      @message_info_text ;
 684
 685
 686
 687
 688
 689 // --------------------------------------
 690 // JQUERY-UI STUFF
 691 // --------------------------------------
 692
 693
 694 // -----------------------
 695 // Date picker
 696 // -----------------------
 697 @jquery_datepicker-bg-color: @base-superlight ;
 698
 699 // -----------------------
 700 // UI-Dialog
 701 // -----------------------
 702 @jquery_ui_dialog-bg-color:   @base-verylight ;
 703 @jquery_ui_dialog-bg-style:   @_bg_style_body ;
 704
 705 // -----------------------
 706 // TOOLTIPSTER
 707 // -----------------------
 708 @jquery_ui_tooltipster-bg-color:       @base-standard ;
 709 @jquery_ui_tooltipster-border-color:   @base-lighter ;
 710 @jquery_ui_tooltipster-color:         @base-verylight ;
 711
 712
 713
 714
 715
 716
 717
 718
 719
 720
 721
 722
 723
 724
 725
 726
 727 // --------------------------------------
 728 // DIMENSIONS (width)
 729 // --------------------------------------
 730 // Only for Containers like DIV, TABLE, TH, TD, COL, P
 731
 732 // -----------------------
 733 // Standard Dimensions (even for table cells)
 734 // -----------------------
 735 // Table cells:   COL, TD, TH, DIV
 736 @wi-smallest:       42px ;  //   2.6em ; // one or two ciphers
 737 @wi-verysmall:      80px ;  //   5.0em ;
 738 @wi-small:         128px ;   //   8.0em ; // also date e.g. 2018/06/06
 739 @wi-mediumsmall:   160px ;   //  10.0em ;
 740 @wi-normal:        208px ;   //  13.0em ;
 741 @wi-lightwide:     256px ;   //  16.0em ;
 742 @wi-wide:          320px ;   //  20.0em ;
 743 @wi-wider:         384px ;   //  24.0em ;
 744 @wi-verywide:      576px ;   //  36.0em ;
 745
 746 // -----------------------
 747 // Standard Dimensions for for DIVs
 748 // -----------------------
 749 @div-wi-smallest:     (@wi-smallest    ) ;
 750 @div-wi-verysmall:    (@wi-verysmall   ) ;
 751 @div-wi-small:        (@wi-small       ) ;
 752 @div-wi-mediumsmall:  (@wi-mediumsmall ) ;
 753 @div-wi-normal:       (@wi-normal      ) ;
 754 @div-wi-lightwide:    (@wi-lightwide   ) ;
 755 @div-wi-wide:         (@wi-wide        ) ; // min-width
 756 @div-wi-wider:        (@wi-wider       ) ; // min-width
 757 @div-wi-verywide:     (@wi-verywide    ) ; // min-width
 758
 759 // -----------------------
 760 // Dimensions for Table Colums (TH, TD & Col)
 761 // -----------------------
 762 @tcol-wi-smallest:     (@wi-smallest    ) ;
 763 @tcol-wi-verysmall:    (@wi-verysmall   ) ;
 764 @tcol-wi-small:        (@wi-small       ) ;
 765 @tcol-wi-mediumsmall:  (@wi-mediumsmall ) ;
 766 @tcol-wi-normal:       (@wi-normal      ) ;
 767 @tcol-wi-lightwide:    (@wi-lightwide   ) ;
 768 @tcol-wi-wide:         (@wi-wide        ) ; // min-width
 769 @tcol-wi-wider:        (@wi-wider       ) ; // min-width
 770 @tcol-wi-verywide:     (@wi-verywide    ) ; // min-width
 771
 772 // -----------------------
 773 // Dimensions for combined rows with combination Table column widths
 774 // -----------------------
 775 @tcol-wi-small-small:            (@tcol-wi-small       + @tcol-wi-small        ) ;
 776 @tcol-wi-small-mediumsmall:      (@tcol-wi-small       + @tcol-wi-mediumsmall  ) ;
 777 @tcol-wi-small-normal:           (@tcol-wi-small       + @tcol-wi-normal       ) ;
 778 @tcol-wi-small-lightwide:        (@tcol-wi-small       + @tcol-wi-lightwide    ) ;
 779 @tcol-wi-small-wide:             (@tcol-wi-small       + @tcol-wi-wide         ) ;
 780 @tcol-wi-small-wider:            (@tcol-wi-small       + @tcol-wi-wider        ) ;
 781 @tcol-wi-small-verywide:         (@tcol-wi-small       + @tcol-wi-verywide     ) ;
 782
 783 @tcol-wi-mediumsmall-small:      (@tcol-wi-mediumsmall + @tcol-wi-small        ) ;
 784 @tcol-wi-mediumsmall-mediumsmall:(@tcol-wi-mediumsmall + @tcol-wi-mediumsmall  ) ;
 785 @tcol-wi-mediumsmall-normal:     (@tcol-wi-mediumsmall + @tcol-wi-normal       ) ;
 786 @tcol-wi-mediumsmall-lightwide:  (@tcol-wi-mediumsmall + @tcol-wi-lightwide    ) ;
 787 @tcol-wi-mediumsmall-wide:       (@tcol-wi-mediumsmall + @tcol-wi-wide         ) ;
 788 @tcol-wi-mediumsmall-wider:      (@tcol-wi-mediumsmall + @tcol-wi-wider        ) ;
 789 @tcol-wi-mediumsmall-verywide:   (@tcol-wi-mediumsmall + @tcol-wi-verywide     ) ;
 790
 791 @tcol-wi-normal-small:           (@tcol-wi-normal      + @tcol-wi-small        ) ;
 792 @tcol-wi-normal-mediumsmall:     (@tcol-wi-normal      + @tcol-wi-mediumsmall  ) ;
 793 @tcol-wi-normal-normal:          (@tcol-wi-normal      + @tcol-wi-normal       ) ;
 794 @tcol-wi-normal-lightwide:       (@tcol-wi-normal      + @tcol-wi-lightwide    ) ;
 795 @tcol-wi-normal-wide:            (@tcol-wi-normal      + @tcol-wi-wide         ) ;
 796 @tcol-wi-normal-wider:           (@tcol-wi-normal      + @tcol-wi-wider        ) ;
 797 @tcol-wi-normal-verywide:        (@tcol-wi-normal      + @tcol-wi-verywide     ) ;
 798
 799 @tcol-wi-lightwide-small:        (@tcol-wi-lightwide   + @tcol-wi-small        ) ;
 800 @tcol-wi-lightwide-mediumsmall:  (@tcol-wi-lightwide   + @tcol-wi-mediumsmall  ) ;
 801 @tcol-wi-lightwide-normal:       (@tcol-wi-lightwide   + @tcol-wi-normal       ) ;
 802 @tcol-wi-lightwide-lightwide:    (@tcol-wi-lightwide   + @tcol-wi-lightwide    ) ;
 803 @tcol-wi-lightwide-wide:         (@tcol-wi-lightwide   + @tcol-wi-wide         ) ;
 804 @tcol-wi-lightwide-wider:        (@tcol-wi-lightwide   + @tcol-wi-wider        ) ;
 805 @tcol-wi-lightwide-verywide:     (@tcol-wi-lightwide   + @tcol-wi-verywide     ) ;
 806
 807 // -----------------------
 808 // Dimensions for Form input elements
 809 // -----------------------
 810 @diff-input-select: 36px ; //1.6em ;
 811
 812 // Input elements
 813 @form-element-margin-right: 5px ;
 814
 815 @input-wi-smallest:     (@wi-smallest  ) ;
 816 @input-wi-verysmall:    (@wi-verysmall ) ;
 817 @input-wi-small:        (@wi-small       - @diff-input-select) ;
 818 @input-wi-mediumsmall:  (@wi-mediumsmall - @diff-input-select) ;
 819 @input-wi-normal:       (@wi-normal      - @diff-input-select) ;
 820 @input-wi-lightwide:    (@wi-lightwide   - @diff-input-select) ;
 821 @input-wi-wide:         (@wi-wide)       - @diff-input-select ; // min-width
 822 @input-wi-wider:        (@wi-wider)      - @diff-input-select ; // min-width
 823 @input-wi-verywide:     (@wi-verywide)   - @diff-input-select ; // min-width
 824
 825 // Input elements with combined dimensions
 826
 827 // Minus size combinations (take care of the double hyphen --)
 828 @input-wi-lightwide--verysmall: ( @input-wi-lightwide - @input-wi-verysmall ) - 1 ;
 829 @input-wi-wide--verysmall:      ( @input-wi-wide      - @input-wi-verysmall ) - ( @form-element-margin-right  ) + 4px ;
 830
 831 // -----------------------
 832 // Dimensions for Form Select elements
 833 // -----------------------
 834 @select-wi-smallest:    (@wi-smallest    ) ;
 835 @select-wi-verysmall:   (@wi-verysmall   ) ;
 836 @select-wi-small:       (@wi-small       - @diff-input-select ) ;
 837 @select-wi-mediumsmall: (@wi-mediumsmall - @diff-input-select ) ;
 838 @select-wi-normal:      (@wi-normal      - @diff-input-select ) ;
 839 @select-wi-lightwide:   (@wi-lightwide   - @diff-input-select ) ;
 840 @select-wi-wide:        (@wi-wide        - @diff-input-select ) ; // min-width
 841 @select-wi-wider:       (@wi-wider       - @diff-input-select ) ; // min-width
 842 @select-wi-verywide:    (@wi-verywide    - @diff-input-select ) ; // min-width
 843
 844 // Select elements with combined dimensions
 845 @diff-select-combined:  0 ;
 846
 847 @select-wi-small-normal:          ((@wi-small + (@wi-normal - @diff-input-select))     - @diff-select-combined ) ;
 848 @select-wi-small-lightwide:       ((@wi-small + (@wi-lightwide - @diff-input-select))  - @diff-select-combined ) ;
 849 @select-wi-small-wide:            ((@wi-small + (@wi-wide - @diff-input-select))       - @diff-select-combined ) ;
 850 @select-wi-small-wider:           ((@wi-small + (@wi-wider - @diff-input-select))      - @diff-select-combined ) ;
 851 @select-wi-small-verywide:        ((@wi-small + (@wi-verywide - @diff-input-select))   - @diff-select-combined ) ;
 852 @select-wi-mediumsmall-normal:    ((@wi-mediumsmall + (@wi-normal - @diff-input-select))     - @diff-select-combined ) ;
 853 @select-wi-mediumsmall-lightwide: ((@wi-mediumsmall + (@wi-lightwide - @diff-input-select))  - @diff-select-combined ) ;
 854 @select-wi-mediumsmall-wide:      ((@wi-mediumsmall + (@wi-wide - @diff-input-select))       - @diff-select-combined ) ;
 855 @select-wi-mediumsmall-wider:     ((@wi-mediumsmall + (@wi-wider - @diff-input-select))      - @diff-select-combined ) ;
 856 @select-wi-mediumsmall-verywide:  ((@wi-mediumsmall + (@wi-verywide - @diff-input-select))   - @diff-select-combined ) ;
 857 @select-wi-normal-normal:         ((@wi-normal + (@wi-normal - @diff-input-select))     - @diff-select-combined ) ;
 858 @select-wi-normal-lightwide:      ((@wi-normal + (@wi-lightwide - @diff-input-select))  - @diff-select-combined ) ;
 859 @select-wi-normal-wide:           ((@wi-normal + (@wi-wide - @diff-input-select))       - @diff-select-combined ) ;
 860 @select-wi-normal-wider:          ((@wi-normal + (@wi-wider - @diff-input-select))      - @diff-select-combined ) ;
 861 @select-wi-normal-verywide:       ((@wi-normal + (@wi-verywide - @diff-input-select))   - @diff-select-combined ) ;
 862 @select-wi-lightwide-normal:      ((@wi-lightwide + (@wi-normal - @diff-input-select))     - @diff-select-combined ) ;
 863 @select-wi-lightwide-lightwide:   ((@wi-lightwide + (@wi-lightwide - @diff-input-select))  - @diff-select-combined ) ;
 864 @select-wi-lightwide-wide:        ((@wi-lightwide + (@wi-wide - @diff-input-select))       - @diff-select-combined ) ;
 865 @select-wi-lightwide-wider:       ((@wi-lightwide + (@wi-wider - @diff-input-select))      - @diff-select-combined ) ;
 866 @select-wi-lightwide-verywide:    ((@wi-lightwide + (@wi-verywide - @diff-input-select))   - @diff-select-combined ) ;
 867 @select-wi-wide-normal:           ((@wi-wide + (@wi-normal - @diff-input-select))     - @diff-select-combined ) ;
 868 @select-wi-wide-lightwide:        ((@wi-wide + (@wi-lightwide - @diff-input-select))  - @diff-select-combined ) ;
 869 @select-wi-wide-wide:             ((@wi-wide + (@wi-wide - @diff-input-select))       - @diff-select-combined ) ;
 870 @select-wi-wide-wider:            ((@wi-wide + (@wi-wider - @diff-input-select))      - @diff-select-combined ) ;
 871 @select-wi-wide-verywide:         ((@wi-wide + (@wi-verywide - @diff-input-select))   - @diff-select-combined ) ;
 872
 873 // -----------------------
 874 // Dimensions for Textarea elements with standard dimensions
 875 // -----------------------
 876
 877 @textarea-wi-normal:      (@wi-normal      - @diff-input-select ) ;
 878 @textarea-wi-lightwide:   (@wi-lightwide   - @diff-input-select ) ;
 879 @textarea-wi-wide:        (@wi-wide        - @diff-input-select ) ; // min-width
 880 @textarea-wi-wider:       (@wi-wider       - @diff-input-select ) ; // min-width
 881 @textarea-wi-verywide:    (@wi-verywide    - @diff-input-select ) ; // min-width
 882
 883 // Textarea elements with combined dimensions
 884 @diff-input-textarea-combined: 0px ; //1.6em ;
 885 //@textarea-margin-combined: 24px ;
 886
 887 @textarea-wi-small-small:       ((@tcol-wi-small + @input-wi-small)        - @diff-input-textarea-combined) ;
 888 @textarea-wi-small-mediumsmall: ((@tcol-wi-small + @input-wi-mediumsmall)  - @diff-input-textarea-combined) ;
 889 @textarea-wi-small-normal:      ((@tcol-wi-small + @input-wi-normal)       - @diff-input-textarea-combined) ;
 890 @textarea-wi-small-lightwide:   ((@tcol-wi-small + @input-wi-lightwide)    - @diff-input-textarea-combined) ;
 891 @textarea-wi-small-wide:        ((@tcol-wi-small + @input-wi-wide)         - @diff-input-textarea-combined) ;
 892 @textarea-wi-small-wider:       ((@tcol-wi-small + @input-wi-wider)        - @diff-input-textarea-combined) ;
 893 @textarea-wi-small-verywide:    ((@tcol-wi-small + @input-wi-verywide)     - @diff-input-textarea-combined) ;
 894
 895 @textarea-wi-mediumsmall-small:        ((@tcol-wi-mediumsmall + @input-wi-small)         - @diff-input-textarea-combined) ;
 896 @textarea-wi-mediumsmall-mediumsmall:  ((@tcol-wi-mediumsmall + @input-wi-mediumsmall)   - @diff-input-textarea-combined) ;
 897 @textarea-wi-mediumsmall-normal:       ((@tcol-wi-mediumsmall + @input-wi-normal)        - @diff-input-textarea-combined) ;
 898 @textarea-wi-mediumsmall-lightwide:    ((@tcol-wi-mediumsmall + @input-wi-lightwide)     - @diff-input-textarea-combined) ;
 899 @textarea-wi-mediumsmall-wide:         ((@tcol-wi-mediumsmall + @input-wi-wide)          - @diff-input-textarea-combined) ;
 900 @textarea-wi-mediumsmall-wider:        ((@tcol-wi-mediumsmall + @input-wi-wider)         - @diff-input-textarea-combined) ;
 901 @textarea-wi-mediumsmall-verywide:     ((@tcol-wi-mediumsmall + @input-wi-verywide)      - @diff-input-textarea-combined) ;
 902
 903 @textarea-wi-normal-small:        ((@tcol-wi-normal + @input-wi-small)         - @diff-input-textarea-combined) ;
 904 @textarea-wi-normal-mediumsmall:  ((@tcol-wi-normal + @input-wi-mediumsmall)   - @diff-input-textarea-combined) ;
 905 @textarea-wi-normal-normal:       ((@tcol-wi-normal + @input-wi-normal)        - @diff-input-textarea-combined) ;
 906 @textarea-wi-normal-lightwide:    ((@tcol-wi-normal + @input-wi-lightwide)     - @diff-input-textarea-combined) ;
 907 @textarea-wi-normal-wide:         ((@tcol-wi-normal + @input-wi-wide)          - @diff-input-textarea-combined) ;
 908 @textarea-wi-normal-wider:        ((@tcol-wi-normal + @input-wi-wider)         - @diff-input-textarea-combined) ;
 909 @textarea-wi-normal-verywide:     ((@tcol-wi-normal + @input-wi-verywide)      - @diff-input-textarea-combined) ;
 910
 911 @textarea-wi-lightwide-small:       ((@tcol-wi-lightwide + @input-wi-small)         - @diff-input-textarea-combined) ;
 912 @textarea-wi-lightwide-mediumsmall: ((@tcol-wi-lightwide + @input-wi-mediumsmall)   - @diff-input-textarea-combined) ;
 913 @textarea-wi-lightwide-normal:      ((@tcol-wi-lightwide + @input-wi-normal)        - @diff-input-textarea-combined) ;
 914 @textarea-wi-lightwide-lightwide:   ((@tcol-wi-lightwide + @input-wi-lightwide)     - @diff-input-textarea-combined) ;
 915 @textarea-wi-lightwide-wide:        ((@tcol-wi-lightwide + @input-wi-wide)          - @diff-input-textarea-combined) ;
 916 @textarea-wi-lightwide-wider:       ((@tcol-wi-lightwide + @input-wi-wider)         - @diff-input-textarea-combined) ;
 917 @textarea-wi-lightwide-verywide:    ((@tcol-wi-lightwide + @input-wi-verywide)      - @diff-input-textarea-combined) ;
 918
 919 @textarea-wi-wide-small:        ((@tcol-wi-wide + @input-wi-small)         - @diff-input-textarea-combined) ;
 920 @textarea-wi-wide-mediumsmall:  ((@tcol-wi-wide + @input-wi-mediumsmall)   - @diff-input-textarea-combined) ;
 921 @textarea-wi-wide-normal:       ((@tcol-wi-wide + @input-wi-normal)        - @diff-input-textarea-combined) ;
 922 @textarea-wi-wide-lightwide:    ((@tcol-wi-wide + @input-wi-lightwide)     - @diff-input-textarea-combined) ;
 923 @textarea-wi-wide-wide:         ((@tcol-wi-wide + @input-wi-wide)          - @diff-input-textarea-combined) ;
 924 @textarea-wi-wide-wider:        ((@tcol-wi-wide + @input-wi-wider)         - @diff-input-textarea-combined) ;
 925 @textarea-wi-wide-verywide:     ((@tcol-wi-wide + @input-wi-verywide)      - @diff-input-textarea-combined) ;
 926
 927
 928 /* ------------------------------------------------------------- */
 929 /* This CSS-Vars are just for testing                            */
 930 /* ------------------------------------------------------------- */
 931
 932 :root {
 933   --gray-standard:      @gray-standard;
 934   --gray-superdark:     @gray-superdark; // Black
 935   --gray-verydark:      @gray-verydark;
 936   --gray-darker:        @gray-darker;
 937   --gray-dark:          @gray-dark;
 938   --gray-light:         @gray-light;
 939   --gray-lighter:       @gray-lighter;
 940   --gray-verylight:     @gray-verylight;
 941   --gray-superlight:    @gray-superlight; // White
 942
 943   --color-standard:     @base-standard;
 944   --color-superlight:   @base-superlight;
 945   --color-verylight:    @base-verylight;
 946   --color-lighter:      @base-lighter;
 947   --color-light:        @base-light;
 948   --color-dark:         @base-dark;
 949   --color-darker:       @base-darker;
 950   --color-verydark:     @base-verydark;
 951   --color-superdark:    @base-superdark;
 952
 953   --msg-ok-strong:        @msg-green-strong;
 954   --msg-ok-light:         @msg-green-light;
 955   --msg-error-strong:     @msg-red-strong;
 956   --msg-error-light:      @msg-red-light;
 957   --msg-hint-strong:      @msg-blue-strong;
 958   --msg-hint-light:       @msg-blue-light;
 959   --msg-warning-strong:   @msg-orange-strong;
 960   --msg-warning-light:    @msg-orange-light;
 961
 962 }