Revision 16da593f
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