Revision 7824720d
Von Cem Aydin vor mehr als 3 Jahren hinzugefügt
| css/less/variables.less | ||
|---|---|---|
| 12 | 12 |
// CONTENTS: |
| 13 | 13 |
// - COLORS |
| 14 | 14 |
// - Greys |
| 15 |
// - Branding
|
|
| 15 |
// - Base
|
|
| 16 | 16 |
// - Divers Color Specifications |
| 17 | 17 |
// - SCAFFOLDING |
| 18 | 18 |
// - Body/Content Background color, Text color |
| ... | ... | |
| 67 | 67 |
|
| 68 | 68 |
|
| 69 | 69 |
// -------------------------------------- |
| 70 |
// COLORS (GREYs, BRAND COLORS & OTHERS)
|
|
| 70 |
// COLORS (GREYs, BASE COLORS & OTHERS)
|
|
| 71 | 71 |
// -------------------------------------- |
| 72 | 72 |
// Base Colors see variables_color[*-9].less |
| 73 | 73 |
// Include the preferred color scheme in style.less before including this less file |
| ... | ... | |
| 76 | 76 |
// General text color (label & data) |
| 77 | 77 |
// ----------------------- |
| 78 | 78 |
// Standard text |
| 79 |
@brand-primary: @brand-text-color;
|
|
| 80 |
@brand-label: @brand-data-label-color;
|
|
| 81 |
@brand-label-bg: @brand-lighter;
|
|
| 79 |
@base-primary: @base-text-color;
|
|
| 80 |
@base-label: @base-data-label-color;
|
|
| 81 |
@base-label-bg: @base-lighter;
|
|
| 82 | 82 |
|
| 83 | 83 |
// ----------------------- |
| 84 | 84 |
// MESSAGES & INFO TYPES |
| 85 | 85 |
// ----------------------- |
| 86 | 86 |
// color definitions in variables_color_[*-9].less |
| 87 |
@brand-ok: @color-green-strong;
|
|
| 88 |
@brand-ok-bg: @color-green-light;
|
|
| 87 |
@base-ok: @color-green-strong;
|
|
| 88 |
@base-ok-bg: @color-green-light;
|
|
| 89 | 89 |
|
| 90 |
@brand-error: @color-red-strong;
|
|
| 91 |
@brand-error-bg: @color-red-light;
|
|
| 90 |
@base-error: @color-red-strong;
|
|
| 91 |
@base-error-bg: @color-red-light;
|
|
| 92 | 92 |
|
| 93 |
@brand-info: @color-blue-strong;
|
|
| 94 |
@brand-info-bg: @color-blue-light;
|
|
| 93 |
@base-info: @color-blue-strong;
|
|
| 94 |
@base-info-bg: @color-blue-light;
|
|
| 95 | 95 |
|
| 96 |
@brand-warning: @color-orange-strong;
|
|
| 97 |
@brand-warning-bg: @color-orange-light;
|
|
| 96 |
@base-warning: @color-orange-strong;
|
|
| 97 |
@base-warning-bg: @color-orange-light;
|
|
| 98 | 98 |
|
| 99 | 99 |
// Positive & negative colors |
| 100 |
@brand-positive: @color-green-strong;
|
|
| 101 |
@brand-positive-bg: @color-green-light;
|
|
| 102 |
@brand-negative: @color-red-strong;
|
|
| 103 |
@brand-negative-bg: @color-red-light;
|
|
| 100 |
@base-positive: @color-green-strong;
|
|
| 101 |
@base-positive-bg: @color-green-light;
|
|
| 102 |
@base-negative: @color-red-strong;
|
|
| 103 |
@base-negative-bg: @color-red-light;
|
|
| 104 | 104 |
|
| 105 | 105 |
|
| 106 | 106 |
|
| ... | ... | |
| 164 | 164 |
@border-radius-large: 6px; |
| 165 | 165 |
@border-radius-small: 3px; |
| 166 | 166 |
|
| 167 |
@component-active-color: @brand-superlight;
|
|
| 168 |
@component-active-bg: @brand-primary; // PENDENT: Variable nicht vorgesehen dafuer
|
|
| 167 |
@component-active-color: @base-superlight;
|
|
| 168 |
@component-active-bg: @base-primary; // PENDENT: Variable nicht vorgesehen dafuer
|
|
| 169 | 169 |
|
| 170 | 170 |
@caret-width-base: 4px; |
| 171 | 171 |
@caret-width-large: 5px; |
| ... | ... | |
| 184 | 184 |
// -------------------------------------- |
| 185 | 185 |
// LINKS |
| 186 | 186 |
// -------------------------------------- |
| 187 |
@link-color: @brand-link-color;
|
|
| 187 |
@link-color: @base-link-color;
|
|
| 188 | 188 |
@link-hover-color: darken(@link-color, 15%); |
| 189 | 189 |
@link-decoration: none; |
| 190 | 190 |
@link-hover-decoration: underline; |
| ... | ... | |
| 228 | 228 |
@headings-font-family: @font-family-base; |
| 229 | 229 |
@headings-weight: 500; |
| 230 | 230 |
@headings-line-height: 1.3em; |
| 231 |
@headings-color: @brand-heading-color;
|
|
| 231 |
@headings-color: @base-heading-color;
|
|
| 232 | 232 |
@headings-color-accent: #000; |
| 233 | 233 |
|
| 234 |
@headings-color-error: @brand-error;
|
|
| 235 |
@headings-color-confirm: @brand-ok;
|
|
| 234 |
@headings-color-error: @base-error;
|
|
| 235 |
@headings-color-confirm: @base-ok;
|
|
| 236 | 236 |
|
| 237 | 237 |
@h1-size: floor(@font-size-base * 1.1); // ~**px |
| 238 | 238 |
@h2-size: floor(@font-size-base * 1.2); // ~**px |
| ... | ... | |
| 255 | 255 |
// Heading 1 (H1) |
| 256 | 256 |
// ----------------------- |
| 257 | 257 |
// Fixed on top of every page together with the action bar |
| 258 |
@brand-h1-color: @_brand-h1-color;
|
|
| 259 |
@brand-h1-bg: @_brand-h1-bg;
|
|
| 258 |
@base-h1-color: @_base-h1-color;
|
|
| 259 |
@base-h1-bg: @_base-h1-bg;
|
|
| 260 | 260 |
@h1-padding: 0.7em 0.5em 0.7em 1.3em; |
| 261 | 261 |
@h1-margin: 0; |
| 262 |
@brand-h1-border-top: @_brand-h1-border-top;
|
|
| 262 |
@base-h1-border-top: @_base-h1-border-top;
|
|
| 263 | 263 |
// ----------------------- |
| 264 | 264 |
// Heading Controlpanels |
| 265 | 265 |
// ----------------------- |
| ... | ... | |
| 275 | 275 |
// ----------------------- |
| 276 | 276 |
// Data types |
| 277 | 277 |
// ----------------------- |
| 278 |
@heading-and-label-color: @brand-data-label-color ;
|
|
| 279 |
@heading-and-label-bg: @brand-data-label-color ;
|
|
| 280 |
@data-color: @brand-data-color ;
|
|
| 278 |
@heading-and-label-color: @base-data-label-color ;
|
|
| 279 |
@heading-and-label-bg: @base-data-label-color ;
|
|
| 280 |
@data-color: @base-data-color ;
|
|
| 281 | 281 |
|
| 282 | 282 |
@long-desc-size: @font-size-verysmall ; |
| 283 |
@long-desc-color: @brand-text-color ;
|
|
| 283 |
@long-desc-color: @base-text-color ;
|
|
| 284 | 284 |
|
| 285 | 285 |
|
| 286 | 286 |
|
| ... | ... | |
| 563 | 563 |
@controlpanel-radius: @contentbox-radius ; |
| 564 | 564 |
|
| 565 | 565 |
// PENDENT: noetig? |
| 566 |
@controlpanel-bg-hover: @brand-superdark ;
|
|
| 567 |
@controlpanel-bg-hover-text: @brand-light ;
|
|
| 568 |
@controlpanel-active-bg: @brand-darker ;
|
|
| 569 |
@controlpanel-active-text: @brand-lighter ;
|
|
| 566 |
@controlpanel-bg-hover: @base-superdark ;
|
|
| 567 |
@controlpanel-bg-hover-text: @base-light ;
|
|
| 568 |
@controlpanel-active-bg: @base-darker ;
|
|
| 569 |
@controlpanel-active-text: @base-lighter ;
|
|
| 570 | 570 |
|
| 571 | 571 |
@controlpanel-h3-color: @h3-size ; |
| 572 | 572 |
@controlpanel-h3-size: 110% ; |
| ... | ... | |
| 657 | 657 |
@message-padding: 0.6em 0.6em 0.5em 0.6em ; |
| 658 | 658 |
|
| 659 | 659 |
// Error |
| 660 |
@message_error_bg: @brand-error-bg ;
|
|
| 661 |
@message_error_border: 1px solid @brand-error ;
|
|
| 662 |
@message_error_text: @brand-error ;
|
|
| 660 |
@message_error_bg: @base-error-bg ;
|
|
| 661 |
@message_error_border: 1px solid @base-error ;
|
|
| 662 |
@message_error_text: @base-error ;
|
|
| 663 | 663 |
// OK |
| 664 |
@message_ok_bg: @brand-ok-bg ;
|
|
| 665 |
@message_ok_border: 1px solid @brand-ok ;
|
|
| 666 |
@message_ok_text: @brand-ok ;
|
|
| 664 |
@message_ok_bg: @base-ok-bg ;
|
|
| 665 |
@message_ok_border: 1px solid @base-ok ;
|
|
| 666 |
@message_ok_text: @base-ok ;
|
|
| 667 | 667 |
// Info & Hint |
| 668 |
@message_info_bg: @brand-info-bg ;
|
|
| 669 |
@message_info_border: 1px solid @brand-info ;
|
|
| 670 |
@message_info_text: @brand-info ;
|
|
| 668 |
@message_info_bg: @base-info-bg ;
|
|
| 669 |
@message_info_border: 1px solid @base-info ;
|
|
| 670 |
@message_info_text: @base-info ;
|
|
| 671 | 671 |
// Warning |
| 672 |
@message_warning_bg: @brand-warning-bg ;
|
|
| 673 |
@message_warning_border: 1px solid @brand-warning ;
|
|
| 674 |
@message_warning_text: @brand-warning ;
|
|
| 672 |
@message_warning_bg: @base-warning-bg ;
|
|
| 673 |
@message_warning_border: 1px solid @base-warning ;
|
|
| 674 |
@message_warning_text: @base-warning ;
|
|
| 675 | 675 |
// Hint (like Info above, just to make it sure working) |
| 676 | 676 |
@message_hint_bg: @message_info_bg ; |
| 677 | 677 |
@message_hint_border: @message_info_border ; |
| ... | ... | |
| 689 | 689 |
// ----------------------- |
| 690 | 690 |
// Date picker |
| 691 | 691 |
// ----------------------- |
| 692 |
@jquery_datepicker-bg-color: @brand-superlight ;
|
|
| 692 |
@jquery_datepicker-bg-color: @base-superlight ;
|
|
| 693 | 693 |
|
| 694 | 694 |
// ----------------------- |
| 695 | 695 |
// UI-Dialog |
| 696 | 696 |
// ----------------------- |
| 697 |
@jquery_ui_dialog-bg-color: @brand-verylight ;
|
|
| 697 |
@jquery_ui_dialog-bg-color: @base-verylight ;
|
|
| 698 | 698 |
@jquery_ui_dialog-bg-style: @_bg_style_body ; |
| 699 | 699 |
|
| 700 | 700 |
// ----------------------- |
| 701 | 701 |
// TOOLTIPSTER |
| 702 | 702 |
// ----------------------- |
| 703 |
@jquery_ui_tooltipster-bg-color: @brand-standard ;
|
|
| 704 |
@jquery_ui_tooltipster-border-color: @brand-lighter ;
|
|
| 705 |
@jquery_ui_tooltipster-color: @brand-verylight ;
|
|
| 703 |
@jquery_ui_tooltipster-bg-color: @base-standard ;
|
|
| 704 |
@jquery_ui_tooltipster-border-color: @base-lighter ;
|
|
| 705 |
@jquery_ui_tooltipster-color: @base-verylight ;
|
|
| 706 | 706 |
|
| 707 | 707 |
|
| 708 | 708 |
|
| ... | ... | |
| 935 | 935 |
--gray-verylight: @gray-verylight; |
| 936 | 936 |
--gray-superlight: @gray-superlight; // White |
| 937 | 937 |
|
| 938 |
--color-standard: @brand-standard;
|
|
| 939 |
--color-superlight: @brand-superlight;
|
|
| 940 |
--color-verylight: @brand-verylight;
|
|
| 941 |
--color-lighter: @brand-lighter;
|
|
| 942 |
--color-light: @brand-light;
|
|
| 943 |
--color-dark: @brand-dark;
|
|
| 944 |
--color-darker: @brand-darker;
|
|
| 945 |
--color-verydark: @brand-verydark;
|
|
| 946 |
--color-superdark: @brand-superdark;
|
|
| 938 |
--color-standard: @base-standard;
|
|
| 939 |
--color-superlight: @base-superlight;
|
|
| 940 |
--color-verylight: @base-verylight;
|
|
| 941 |
--color-lighter: @base-lighter;
|
|
| 942 |
--color-light: @base-light;
|
|
| 943 |
--color-dark: @base-dark;
|
|
| 944 |
--color-darker: @base-darker;
|
|
| 945 |
--color-verydark: @base-verydark;
|
|
| 946 |
--color-superdark: @base-superdark;
|
|
| 947 | 947 |
|
| 948 | 948 |
--msg-ok-strong: @msg-green-strong; |
| 949 | 949 |
--msg-ok-light: @msg-green-light; |
| ... | ... | |
| 955 | 955 |
--msg-warning-light: @msg-orange-light; |
| 956 | 956 |
|
| 957 | 957 |
} |
| 958 |
|
|
Auch abrufbar als: Unified diff
Neues Design Anpassung: #386 Farben Überschriften und Buttons angepasst
Da bei einer Änderung der Brand Farbe oftmals ein unbrauchbarer
Hintergrund-Ton entstand, habe ich diese nun entkoppelt. Dazu:
- brand durchgehend in base umbenannt
- neuen Abschnitt brand eingefügt (css/less/variables_color_style.less)
- diesen für H1 Header und Buttons verwendet
- less/css neu kompiliert