Revision 83f17f39
Von Hans P. Schlaepfer vor fast 5 Jahren hinzugefügt
css/less/common-OUT.less | ||
---|---|---|
1 |
// This file is not effacious. It is intended to delete it in the end. |
|
2 |
|
|
3 |
|
|
4 |
|
|
5 |
input.grow_on_focus { |
|
6 |
width: 20px; |
|
7 |
transition: width 0.1s; |
|
8 |
-moz-transition: width 0.1s; |
|
9 |
-webkit-transition: width 0.1s; |
|
10 |
-o-transition: width 0.1s; |
|
11 |
|
|
12 |
&:focus { width: 150px } |
|
13 |
|
|
14 |
} |
|
15 |
|
|
16 |
/* quirk to force certain constructs to block context */ |
|
17 |
.block-context { overflow: hidden } |
|
18 |
|
|
19 |
|
|
20 |
/* various oneshot decoration for legacy purpose. dont use */ |
|
21 |
.small-text { font-size: @font-size-small; } |
|
22 |
.bold { font-weight: bold ;} |
|
23 |
|
|
24 |
.float-left { float: left; } |
|
25 |
.float-right { float: right; } |
|
26 |
|
|
27 |
|
|
28 |
/* position */ |
|
29 |
.position-relative { position: relative; } |
|
30 |
.position-absolute { position: absolute; } |
|
31 |
|
|
32 |
|
css/less/custom_ tables.less | ||
---|---|---|
1 |
// Benutzerdefinierte Tabellen-Angaben |
|
2 |
// Diese uebersteuern alle Anweisungen aus tables.less |
|
3 |
// Es dürfen nur Tabellen mit Zusatzklassen oder mit IDs uebersteuert werden. |
|
4 |
// Uebersteuern Sie nur wenige, bestehende Elemente, um ein einheitliches |
|
5 |
// Design zu gewaehrleisten |
|
6 |
// Diese Datei wird am Schluss von tables.less includiert. |
|
7 |
|
|
8 |
table{ |
|
9 |
|
|
10 |
// Zusatzklasse zur Tabelle (Beispiel) |
|
11 |
// Betreff: xyz |
|
12 |
// Autor: hanspeter.schlaepfer@revamp-it.ch |
|
13 |
&.meine-tabellen-klasse { |
|
14 |
|
|
15 |
} |
|
16 |
|
|
17 |
// Tabelle mit spezieller ID (Beispiel) |
|
18 |
// Betreff: xyz |
|
19 |
// Autor: hanspeter.schlaepfer@revamp-it.ch |
|
20 |
&#meine-spezielle-tabelle { |
|
21 |
|
|
22 |
} |
|
23 |
|
|
24 |
|
|
25 |
// Tabelle mit Konten-Uebersicht (Kontoplan) |
|
26 |
// Betreff: Kontoplan |
|
27 |
// Autor: hanspeter.schlaepfer@revamp-it.ch |
|
28 |
&#konten-plan { |
|
29 |
tbody tr{ |
|
30 |
td:first-child { |
|
31 |
text-align: right !important; |
|
32 |
} |
|
33 |
&.heading td { |
|
34 |
font-size: @font-size-large; |
|
35 |
border-top: 1px #999 solid; |
|
36 |
} |
|
37 |
} |
|
38 |
tr:first-child { |
|
39 |
&.heading td { |
|
40 |
border: none; |
|
41 |
} |
|
42 |
} |
|
43 |
} |
|
44 |
|
|
45 |
|
|
46 |
// PENDENT: genauer anschauen |
|
47 |
|
|
48 |
&#eurtable { |
|
49 |
border-collapse: collapse; |
|
50 |
width: 100%; |
|
51 |
} |
|
52 |
|
|
53 |
tr.category { |
|
54 |
// background set via jquery |
|
55 |
} |
|
56 |
|
|
57 |
tr.chart { |
|
58 |
border: 0; |
|
59 |
} |
|
60 |
|
|
61 |
td.chartname { |
|
62 |
padding-left: 50px; |
|
63 |
} |
|
64 |
|
|
65 |
tr.chartrow { |
|
66 |
font-size: 75%; |
|
67 |
} |
|
68 |
|
|
69 |
.guv_row_background { |
|
70 |
background:#f0f0f0; |
|
71 |
} |
|
72 |
|
|
73 |
.tr_error { |
|
74 |
background-color: #ffc9c9; |
|
75 |
} |
|
76 |
|
|
77 |
|
|
78 |
} |
css/less/custom_variables.less | ||
---|---|---|
1 |
// ---------------------------------------------------------------------------- |
|
2 |
// |
|
3 |
// CUSTOM VARIABLES (ONLY FOR OVERRIDES IN CUSTOM.LESS) |
|
4 |
// |
|
5 |
// ---------------------------------------------------------------------------- |
|
6 |
// DESCRIPTION: Place your custom variables here |
|
7 |
// For more information about variables see variables.less |
|
8 |
// Copy variables from variable.less into this files here |
|
9 |
// Do not change variables and less stuff in the original source files |
|
10 |
// then you will be happy with your git work |
|
11 |
// |
|
12 |
// CONTENTS: |
|
13 |
// - SUBJECT |
|
14 |
// - - My override variables |
|
15 |
// - - My own variables |
|
16 |
// ---------------------------------------------------------------------------- |
|
17 |
|
|
18 |
|
|
19 |
// |
|
20 |
// ********************************** |
|
21 |
// MY OVERRIDE VARIABLES |
|
22 |
// ********************************** |
|
23 |
|
|
24 |
|
|
25 |
|
|
26 |
|
|
27 |
|
|
28 |
|
|
29 |
// |
|
30 |
// ********************************** |
|
31 |
// MY SPECIAL VARIABLES |
|
32 |
// ********************************** |
|
33 |
|
|
34 |
//@my-class-padding: 0.2em ; // just an example |
css/less/jquery.tooltipster-light.less | ||
---|---|---|
1 |
.tooltipster-light { |
|
2 |
border-radius: 5px; |
|
3 |
border: 1px solid #7D964D; |
|
4 |
background-color: #3C72A7; //#DDFE93 |
|
5 |
color: #fff; |
|
6 |
} |
|
7 |
.tooltipster-light .tooltipster-content { |
|
8 |
font-size: @font-size-smaller; |
|
9 |
line-height: 16px; |
|
10 |
padding: 1.0em 1.4em; |
|
11 |
} |
css/less/js.charpicker.less | ||
---|---|---|
1 |
|
|
2 |
/* Chart-Picker */ |
|
3 |
/* Entnommen aus main.less, gehoert z.T. auch zu Jquery.Autocomplete */ |
|
4 |
|
|
5 |
|
|
6 |
|
|
7 |
.chart_picker, |
|
8 |
.part_picker { |
|
9 |
display: inline-block; |
|
10 |
} |
|
11 |
.chart_picker:before, |
|
12 |
.part_picker:before { |
|
13 |
display: inline-block; |
|
14 |
vertical-align: middle; |
|
15 |
height: 100%; |
|
16 |
} |
|
17 |
.customer-vendor-picker-undefined, |
|
18 |
.chartpicker-undefined, |
|
19 |
.projectpicker-undefined, |
|
20 |
.partpicker-undefined { |
|
21 |
color: red; |
|
22 |
font-style: italic; |
|
23 |
} |
|
24 |
|
|
25 |
div.part_picker_part, |
|
26 |
div.chart_picker_chart { |
|
27 |
padding: 5px; |
|
28 |
margin: 5px; |
|
29 |
border: 1px; |
|
30 |
border-color: darkgray; |
|
31 |
border-style: solid; |
|
32 |
-webkit-border-radius: 4px; |
|
33 |
-moz-border-radius: 4px; |
|
34 |
border-radius: 4px; |
|
35 |
background-color: white; |
|
36 |
cursor: pointer; |
|
37 |
} |
|
38 |
div.part_picker_part:hover, |
|
39 |
div.chart_picker_chart:hover { |
|
40 |
color: #000; |
|
41 |
text-decoration: underline; |
|
42 |
} |
|
43 |
|
|
44 |
|
|
45 |
|
|
46 |
div.cpc_block, |
|
47 |
div.ppp_block { |
|
48 |
overflow:hidden; |
|
49 |
float:left; |
|
50 |
width: 350px; |
|
51 |
} |
|
52 |
span.cpc_popup_button, |
|
53 |
span.ppp_popup_button { |
|
54 |
display: inline-block; |
|
55 |
vertical-align: middle; |
|
56 |
margin-left: -24px; |
|
57 |
height: 20px; |
|
58 |
width: 20px; |
|
59 |
cursor: pointer; |
|
60 |
background: url("../../image/search.svg") no-repeat center right; |
|
61 |
background-size: contain; |
|
62 |
} |
|
63 |
span.chart_picker input, |
|
64 |
span.part_picker input { |
|
65 |
padding-right: 20px; |
|
66 |
box-sizing: border-box; |
|
67 |
-moz-box-sizing: border-box; |
|
68 |
-webkit-box-sizing: border-box; |
|
69 |
} |
|
70 |
span.chart_picker, |
|
71 |
span.part_picker { |
|
72 |
white-space: nowrap; |
|
73 |
} |
|
74 |
div.ppp_block span.ppp_block_number, |
|
75 |
div.cpc_block span.cpc_block_number |
|
76 |
{ |
|
77 |
float:left; |
|
78 |
} |
|
79 |
div.ppp_block span.ppp_block_description { |
|
80 |
float:right; |
|
81 |
margin-left:1em; |
|
82 |
font-weight:bold; |
|
83 |
} |
|
84 |
div.cpc_block span.cpc_block_description { |
|
85 |
float:left; |
|
86 |
margin-left:1em; |
|
87 |
font-weight:bold; |
|
88 |
} |
|
89 |
div.ppp_line span.ppp_block_description, |
|
90 |
div.cpc_line span.cpc_block_description |
|
91 |
{ |
|
92 |
margin-left:1em; |
|
93 |
font-weight:bold; |
|
94 |
} |
|
95 |
div.cpc_block span.cpc_block_balance { |
|
96 |
float:right; |
|
97 |
} |
|
98 |
div.cpc_block span.cpc_line_balance { |
|
99 |
display:none; |
|
100 |
} |
|
101 |
div.cpc_line span.cpc_block_second_row { |
|
102 |
display:none; |
|
103 |
} |
|
104 |
div.cpc_block span.cpc_block_second_row { |
|
105 |
} |
|
106 |
|
|
107 |
|
|
108 |
|
css/less/main-OUT.less | ||
---|---|---|
1 |
// This file is not effacious. It is intended to delete it in the end. |
|
2 |
// Nicht gefundene CSS-Klassen und IDs |
|
3 |
|
|
4 |
|
|
5 |
// OBSOLETE: gibt es nicht |
|
6 |
body.admin > h1{ |
|
7 |
top: 21px; |
|
8 |
} |
|
9 |
|
|
10 |
// PENDENT: obsolete? |
|
11 |
body.menu { |
|
12 |
color: #000000; |
|
13 |
} |
|
14 |
|
|
15 |
|
|
16 |
|
|
17 |
// PENDENT: welche Selektoren??? |
|
18 |
.accountlistheading { |
|
19 |
padding: 0.3em; |
|
20 |
color: #006400; |
|
21 |
font-weight: bold; |
|
22 |
text-align: left; |
|
23 |
background-color: #EBEBEB; |
|
24 |
} |
|
25 |
|
|
26 |
|
|
27 |
.link_separator { |
|
28 |
margin-left: 6px; |
|
29 |
margin-right: 6px; |
|
30 |
} |
|
31 |
|
|
32 |
span.toggle_selected { |
|
33 |
font-weight: bold; |
|
34 |
} |
|
35 |
|
|
36 |
|
|
37 |
// Infos ueber Suchergebnissen |
|
38 |
div.info{ |
|
39 |
padding: 1.0em; |
|
40 |
span.info-detail{ |
|
41 |
margin: 0 5.0em 0 0; |
|
42 |
} |
|
43 |
} |
css/less/style_number_1.less | ||
---|---|---|
1 |
// ---------------------------------------------------------------------------- |
|
2 |
// |
|
3 |
// VARIABLES COLOR SCHEME 1 (BLUE) |
|
4 |
// |
|
5 |
// ---------------------------------------------------------------------------- |
|
6 |
// DESCRIPTION: |
|
7 |
// |
|
8 |
// CONTENTS: |
|
9 |
// - BASE COLORS |
|
10 |
// - Greys |
|
11 |
// - Branding |
|
12 |
// - Divers Color Specifications |
|
13 |
// - TYPOGRAPHY |
|
14 |
// - Font family |
|
15 |
// - Font size |
|
16 |
// - Line height |
|
17 |
// - Heading 1 - 6 |
|
18 |
// - Heading 1 (H1) |
|
19 |
// ---------------------------------------------------------------------------- |
|
20 |
|
|
21 |
|
|
22 |
|
|
23 |
// -------------------------------------- |
|
24 |
// BASE COLORS |
|
25 |
// -------------------------------------- |
|
26 |
// Original Kivitendo Colors |
|
27 |
// -------------- |
|
28 |
// Background: #EBEBEB burlywood |
|
29 |
// Links: #006400 DarkGreen |
|
30 |
// Link-hover #FE5F14 Orange / #FFFFE0 lightyellow |
|
31 |
// Titles, BG/VG: #79B61B Mid-green FFFFFF White |
|
32 |
// Tabcolor: #CAFFA3 |
|
33 |
|
|
34 |
// -------------- |
|
35 |
// Grey shades |
|
36 |
@gray-darker: #222222 ; |
|
37 |
@gray-dark: #555555 ; |
|
38 |
@gray-mediumdark: #666666 ; |
|
39 |
@gray: #888888 ; |
|
40 |
@gray-medium: #aaaaaa ; |
|
41 |
@gray-light: #cfcfcf ; |
|
42 |
@gray-lighter: #dedede ; |
|
43 |
@gray-morelighter: #e0e0e0 ; |
|
44 |
@gray-verylight: #ececec ; |
|
45 |
@gray-superlight: #efefef ; |
|
46 |
|
|
47 |
// -------------- |
|
48 |
// Color Specications |
|
49 |
// for message and other coloured stuff |
|
50 |
// ok |
|
51 |
@color-green-strong: #003c18; |
|
52 |
@color-green-light: #9ccb21; |
|
53 |
// error |
|
54 |
@color-red-strong: #ae0014; |
|
55 |
@color-red-light: #ffd6d6; |
|
56 |
// info/hint |
|
57 |
@color-blue-strong: #209ec8; |
|
58 |
@color-blue-light: #b6e6e5; |
|
59 |
// warning |
|
60 |
@color-orange-strong: #8D6A00; // more brown |
|
61 |
@color-orange-light: #f6d972; |
|
62 |
// divers |
|
63 |
@rainbow-green: #408000; |
|
64 |
@rainbow-blue: #0080FF; |
|
65 |
@rainbow-red: #FF0000; |
|
66 |
@rainbow-yellow: #FFFF00; |
|
67 |
|
|
68 |
// -------------- |
|
69 |
// Brand colors |
|
70 |
@brand-standard: #186484 ; // Standard color |
|
71 |
|
|
72 |
@brand-strong: @brand-standard ; // Strong brand color (for text) |
|
73 |
@brand-strong-dimmed: #3E869E ; // Standard light color for backgrounds |
|
74 |
@brand-strong-dimmed-hover: #3F92AD ; // Standard lighter color for backgrounds |
|
75 |
@brand-light: #82B2D0 ; // Standard lighter color for text in backgrounded blocks |
|
76 |
@brand-lighter: #B0D0E5 ; // |
|
77 |
@brand-verylight: #E1ECF4 ; // |
|
78 |
@brand-superlight: #E8F3FA ; // |
|
79 |
@brand-darkest: #124C60 ; // Standard darkest color (for borders etc.) |
|
80 |
@brand-text-color: #666666 ; // |
|
81 |
|
|
82 |
@brand-table-text-color: @brand-darkest ; // |
|
83 |
@brand-heading-color: @brand-darkest ; // Standard heading color |
|
84 |
@brand-heading-bg: @brand-strong-dimmed-hover ; // |
|
85 |
@brand-h1-color: @brand-lighter ; // |
|
86 |
@brand-h1-bg: @brand-strong-dimmed-hover ; // |
|
87 |
@brand-data-color: @brand-standard ; // |
|
88 |
@brand-data-label-color: @brand-strong ; // Standard-Label color |
|
89 |
@brand-text-color-accent: @brand-standard ; // |
|
90 |
@brand-link-color: @brand-strong-dimmed ; // |
|
91 |
@brand-link-color-hover: @brand-strong-dimmed-hover ; // |
|
92 |
|
|
93 |
|
|
94 |
|
|
95 |
// Text (Label & data) |
|
96 |
@brand-primary: @brand-text-color; |
|
97 |
@brand-label: @brand-data-label-color; |
|
98 |
@brand-label-bg: @brand-lighter; |
css/less/variables_color.less | ||
---|---|---|
1 |
// ---------------------------------------------------------------------------- |
|
2 |
// |
|
3 |
// VARIABLES (Less-Style) for general use (most of it is Bootstrap-Stuff) |
|
4 |
// |
|
5 |
// ---------------------------------------------------------------------------- |
|
6 |
// DESCRIPTION: |
|
7 |
// |
|
8 |
// CONTENTS: |
|
9 |
// - BASE COLORS |
|
10 |
// - Greys |
|
11 |
// - Branding |
|
12 |
// - Divers Color Specifications |
|
13 |
// - TYPOGRAPHY |
|
14 |
// - Font family |
|
15 |
// - Font size |
|
16 |
// - Line height |
|
17 |
// - Heading 1 - 6 |
|
18 |
// - Heading 1 (H1) |
|
19 |
// ---------------------------------------------------------------------------- |
|
20 |
|
|
21 |
|
|
22 |
|
|
23 |
// -------------------------------------- |
|
24 |
// BASE COLORS |
|
25 |
// -------------------------------------- |
|
26 |
// Original Kivitendo Colors |
|
27 |
// -------------- |
|
28 |
// Background: #EBEBEB burlywood |
|
29 |
// Links: #006400 DarkGreen |
|
30 |
// Link-hover #FE5F14 Orange / #FFFFE0 lightyellow |
|
31 |
// Titles, BG/VG: #79B61B Mid-green FFFFFF White |
|
32 |
// Tabcolor: #CAFFA3 |
|
33 |
|
|
34 |
// -------------- |
|
35 |
// Grey shades |
|
36 |
@gray-darker: #222222 ; |
|
37 |
@gray-dark: #555555 ; |
|
38 |
@gray-mediumdark: #666666 ; |
|
39 |
@gray: #888888 ; |
|
40 |
@gray-medium: #aaaaaa ; |
|
41 |
@gray-light: #cfcfcf ; |
|
42 |
@gray-lighter: #dedede ; |
|
43 |
@gray-morelighter: #e0e0e0 ; |
|
44 |
@gray-verylight: #ececec ; |
|
45 |
@gray-superlight: #efefef ; |
|
46 |
|
|
47 |
// -------------- |
|
48 |
// Color Specications |
|
49 |
// for message and other coloured stuff |
|
50 |
// ok |
|
51 |
@color-green-strong: #003c18; |
|
52 |
@color-green-light: #9ccb21; |
|
53 |
// error |
|
54 |
@color-red-strong: #ae0014; |
|
55 |
@color-red-light: #ffd6d6; |
|
56 |
// info/hint |
|
57 |
@color-blue-strong: #209ec8; |
|
58 |
@color-blue-light: #b6e6e5; |
|
59 |
// warning |
|
60 |
@color-orange-strong: #8D6A00; // more brown |
|
61 |
@color-orange-light: #f6d972; |
|
62 |
// divers |
|
63 |
@rainbow-green: #408000; |
|
64 |
@rainbow-blue: #0080FF; |
|
65 |
@rainbow-red: #FF0000; |
|
66 |
@rainbow-yellow: #FFFF00; |
|
67 |
|
|
68 |
// -------------- |
|
69 |
// Brand colors |
|
70 |
@brand-standard: #888888 ; // Standard color |
|
71 |
|
|
72 |
@brand-strong: @gray ; // Strong brand color (for text) |
|
73 |
@brand-strong-dimmed: #666666 ; // Standard light color for backgrounds |
|
74 |
@brand-strong-dimmed-hover: #666666 ; // Standard lighter color for backgrounds |
|
75 |
@brand-light: @gray-light ; // Standard lighter color for text in backgrounded blocks |
|
76 |
@brand-lighter: @gray-lighter ; // |
|
77 |
@brand-verylight: @gray-verylight ; // |
|
78 |
@brand-superlight: @gray-superlight ; // |
|
79 |
@brand-darkest: #222222 ; // Standard darkest color (for borders etc.) |
|
80 |
@brand-text-color: #666666 ; // |
|
81 |
|
|
82 |
@brand-table-text-color: @brand-darkest ; // |
|
83 |
@brand-heading-color: @brand-darkest ; // Standard heading color |
|
84 |
@brand-heading-bg: @brand-strong-dimmed-hover ; // |
|
85 |
@brand-h1-color: @brand-lighter ; // |
|
86 |
@brand-h1-bg: @brand-strong-dimmed-hover ; // |
|
87 |
@brand-data-color: @brand-standard ; // |
|
88 |
@brand-data-label-color: @brand-strong ; // Standard-Label color |
|
89 |
@brand-text-color-accent: @brand-standard ; // |
|
90 |
@brand-link-color: @brand-strong-dimmed ; // |
|
91 |
@brand-link-color-hover: @brand-strong-dimmed-hover ; // |
|
92 |
|
|
93 |
|
|
94 |
|
|
95 |
// Text (Label & data) |
|
96 |
@brand-primary: @brand-text-color; |
|
97 |
@brand-label: @brand-data-label-color; |
|
98 |
@brand-label-bg: @brand-lighter; |
|
99 |
|
|
100 |
|
|
101 |
// -------------- |
|
102 |
// Buttons |
|
103 |
// |
|
104 |
|
|
105 |
// Button with manipulation (submit etc.) |
|
106 |
@button-strong: @brand-lighter; |
|
107 |
@button-strong-bg: @brand-strong; |
|
108 |
@button-strong-border: @brand-darkest; |
|
109 |
@button-strong-hover: @brand-lighter; |
|
110 |
@button-strong-hover-bg: @brand-strong-dimmed-hover; |
|
111 |
@button-strong-hover-border: @brand-darkest; |
|
112 |
@button-strong-active: @brand-lighter; |
|
113 |
@button-strong-active-bg: @brand-strong-dimmed; |
|
114 |
@button-strong-active-border: @brand-darkest; |
|
115 |
// Button without data manipulation (reset, cancel, open, show etc.) |
|
116 |
@button-soft: @brand-strong; |
|
117 |
@button-soft-bg: @brand-light; |
|
118 |
@button-soft-border: @brand-darkest; |
|
119 |
@button-soft-hover: @brand-strong; |
|
120 |
@button-soft-hover-bg: @brand-lighter; |
|
121 |
@button-soft-hover-border: @brand-darkest; |
|
122 |
@button-soft-active: @brand-darkest; |
|
123 |
@button-soft-active-bg: @brand-strong-dimmed; |
|
124 |
@button-soft-active-border: @brand-darkest; |
|
125 |
|
|
126 |
|
|
127 |
// -------------------------------------- |
|
128 |
// SCAFFOLDING |
|
129 |
// -------------------------------------- |
|
130 |
@body-bg: @brand-verylight; // general |
|
131 |
@content-bg: @brand-superlight; // background first tabs |
|
132 |
@heading-bg: @brand-lighter ; // controlpanels & other stuff |
|
133 |
|
|
134 |
// Tabs |
|
135 |
@tabs-bg: @brand-verylight; // background tabs panel (data/content) |
|
136 |
@tabs-bg-hover: @brand-superlight; // background tabs panel (data/content) |
|
137 |
@tabs-bg-hover-active: @tabs-bg; // background tabs panel (data/content) |
|
138 |
@tabs-text-hover: @brand-strong; // background tabs panel (data/content) |
|
139 |
|
|
140 |
|
|
141 |
@text-color: @brand-primary; |
|
142 |
@heading-color: @brand-heading-color ; // labels & table headings |
|
143 |
@caption-color: @brand-heading-color ; // caption |
|
144 |
|
|
145 |
|
|
146 |
// Table list zebra effect |
|
147 |
// Zebra effect in list tables |
|
148 |
@t-row-zebra-bg-odd: @brand-lighter; |
|
149 |
@t-row-zebra-bg-even: @brand-verylight; |
|
150 |
@t-row-zebra-bg-hover: #ffffff; |
|
151 |
|
|
152 |
@t-row-zebra-bg-error: @brand-error-bg; |
|
153 |
@t-row-zebra-bg-special: #FEF2C5; // PENDENT: ANSCHAUEN |
|
154 |
@t-row-zebra-bg-highlight: #B4F4FE; // PENDENT: ANSCHAUEN |
css/less/variables_color_1.less | ||
---|---|---|
1 |
// ---------------------------------------------------------------------------- |
|
2 |
// |
|
3 |
// VARIABLES (Less-Style) for general use (most of it is Bootstrap-Stuff) |
|
4 |
// |
|
5 |
// ---------------------------------------------------------------------------- |
|
6 |
// DESCRIPTION: |
|
7 |
// |
|
8 |
// CONTENTS: |
|
9 |
// - BASE COLORS |
|
10 |
// - Greys |
|
11 |
// - Branding |
|
12 |
// - Divers Color Specifications |
|
13 |
// - TYPOGRAPHY |
|
14 |
// - Font family |
|
15 |
// - Font size |
|
16 |
// - Line height |
|
17 |
// - Heading 1 - 6 |
|
18 |
// - Heading 1 (H1) |
|
19 |
// ---------------------------------------------------------------------------- |
|
20 |
|
|
21 |
|
|
22 |
|
|
23 |
// -------------------------------------- |
|
24 |
// BASE COLORS |
|
25 |
// -------------------------------------- |
|
26 |
// Original Kivitendo Colors |
|
27 |
// -------------- |
|
28 |
// Background: #EBEBEB burlywood |
|
29 |
// Links: #006400 DarkGreen |
|
30 |
// Link-hover #FE5F14 Orange / #FFFFE0 lightyellow |
|
31 |
// Titles, BG/VG: #79B61B Mid-green FFFFFF White |
|
32 |
// Tabcolor: #CAFFA3 |
|
33 |
|
|
34 |
// -------------- |
|
35 |
// Grey shades |
|
36 |
@gray-darker: #222222 ; |
|
37 |
@gray-dark: #555555 ; |
|
38 |
@gray-mediumdark: #666666 ; |
|
39 |
@gray: #888888 ; |
|
40 |
@gray-medium: #aaaaaa ; |
|
41 |
@gray-light: #cfcfcf ; |
|
42 |
@gray-lighter: #dedede ; |
|
43 |
@gray-morelighter: #e0e0e0 ; |
|
44 |
@gray-verylight: #ececec ; |
|
45 |
@gray-superlight: #efefef ; |
|
46 |
|
|
47 |
// -------------- |
|
48 |
// Color Specications |
|
49 |
// for message and other coloured stuff |
|
50 |
// ok |
|
51 |
@color-green-strong: #003c18; |
|
52 |
@color-green-light: #9ccb21; |
|
53 |
// error |
|
54 |
@color-red-strong: #ae0014; |
|
55 |
@color-red-light: #ffd6d6; |
|
56 |
// info/hint |
|
57 |
@color-blue-strong: #209ec8; |
|
58 |
@color-blue-light: #b6e6e5; |
|
59 |
// warning |
|
60 |
@color-orange-strong: #8D6A00; // more brown |
|
61 |
@color-orange-light: #f6d972; |
|
62 |
// divers |
|
63 |
@rainbow-green: #408000; |
|
64 |
@rainbow-blue: #0080FF; |
|
65 |
@rainbow-red: #FF0000; |
|
66 |
@rainbow-yellow: #FFFF00; |
|
67 |
|
|
68 |
// -------------- |
|
69 |
// Brand colors |
|
70 |
@brand-standard: #186484 ; // Standard color |
|
71 |
|
|
72 |
@brand-strong: @brand-standard ; // Strong brand color (for text) |
|
73 |
@brand-strong-dimmed: #3E869E ; // Standard light color for backgrounds |
|
74 |
@brand-strong-dimmed-hover: #3F92AD ; // Standard lighter color for backgrounds |
|
75 |
@brand-light: #82B2D0 ; // Standard lighter color for text in backgrounded blocks |
|
76 |
@brand-lighter: #B0D0E5 ; // |
|
77 |
@brand-verylight: #E1ECF4 ; // |
|
78 |
@brand-superlight: #E8F3FA ; // |
|
79 |
@brand-darkest: #124C60 ; // Standard darkest color (for borders etc.) |
|
80 |
@brand-text-color: #666666 ; // |
|
81 |
|
|
82 |
@brand-table-text-color: @brand-darkest ; // |
|
83 |
@brand-heading-color: @brand-darkest ; // Standard heading color |
|
84 |
@brand-heading-bg: @brand-strong-dimmed-hover ; // |
|
85 |
@brand-h1-color: @brand-lighter ; // |
|
86 |
@brand-h1-bg: @brand-strong-dimmed-hover ; // |
|
87 |
@brand-data-color: @brand-standard ; // |
|
88 |
@brand-data-label-color: @brand-strong ; // Standard-Label color |
|
89 |
@brand-text-color-accent: @brand-standard ; // |
|
90 |
@brand-link-color: @brand-strong-dimmed ; // |
|
91 |
@brand-link-color-hover: @brand-strong-dimmed-hover ; // |
|
92 |
|
|
93 |
|
|
94 |
|
|
95 |
// Text (Label & data) |
|
96 |
@brand-primary: @brand-text-color; |
|
97 |
@brand-label: @brand-data-label-color; |
|
98 |
@brand-label-bg: @brand-lighter; |
|
99 |
|
|
100 |
// -------------- |
|
101 |
// Buttons |
|
102 |
// |
|
103 |
|
|
104 |
// Button with manipulation (submit etc.) |
|
105 |
@button-strong: @brand-lighter; |
|
106 |
@button-strong-bg: @brand-strong; |
|
107 |
@button-strong-border: @brand-darkest; |
|
108 |
@button-strong-hover: @brand-lighter; |
|
109 |
@button-strong-hover-bg: @brand-strong-dimmed-hover; |
|
110 |
@button-strong-hover-border: @brand-darkest; |
|
111 |
@button-strong-active: @brand-lighter; |
|
112 |
@button-strong-active-bg: @brand-strong-dimmed; |
|
113 |
@button-strong-active-border: @brand-darkest; |
|
114 |
// Button without data manipulation (reset, cancel, open, show etc.) |
|
115 |
@button-soft: @brand-strong; |
|
116 |
@button-soft-bg: @brand-light; |
|
117 |
@button-soft-border: @brand-darkest; |
|
118 |
@button-soft-hover: @brand-strong; |
|
119 |
@button-soft-hover-bg: @brand-lighter; |
|
120 |
@button-soft-hover-border: @brand-darkest; |
|
121 |
@button-soft-active: @brand-darkest; |
|
122 |
@button-soft-active-bg: @brand-strong-dimmed; |
|
123 |
@button-soft-active-border: @brand-darkest; |
|
124 |
|
|
125 |
// -------------------------------------- |
|
126 |
// SCAFFOLDING |
|
127 |
// -------------------------------------- |
|
128 |
@body-bg: @brand-verylight; // general |
|
129 |
@content-bg: #ffffff; // background first tabs |
|
130 |
@heading-bg: @brand-lighter ; // controlpanels & other stuff |
|
131 |
|
|
132 |
// Tabs |
|
133 |
@tabs-bg: @brand-verylight; // background tabs panel (data/content) |
|
134 |
@tabs-bg-hover: @brand-superlight; // background tabs panel (data/content) |
|
135 |
@tabs-bg-hover-active: @tabs-bg; // background tabs panel (data/content) |
|
136 |
@tabs-text-hover: @brand-strong; // background tabs panel (data/content) |
|
137 |
|
|
138 |
|
|
139 |
|
|
140 |
|
|
141 |
@text-color: @brand-primary; |
|
142 |
@heading-color: @brand-heading-color ; // labels & table headings |
|
143 |
@caption-color: @brand-heading-color ; // caption |
css/less/variables_color_2.less | ||
---|---|---|
1 |
// ---------------------------------------------------------------------------- |
|
2 |
// |
|
3 |
// VARIABLES (Less-Style) for general use (most of it is Bootstrap-Stuff) |
|
4 |
// |
|
5 |
// ---------------------------------------------------------------------------- |
|
6 |
// DESCRIPTION: |
|
7 |
// |
|
8 |
// CONTENTS: |
|
9 |
// - BASE COLORS |
|
10 |
// - Greys |
|
11 |
// - Branding |
|
12 |
// - Divers Color Specifications |
|
13 |
// - TYPOGRAPHY |
|
14 |
// - Font family |
|
15 |
// - Font size |
|
16 |
// - Line height |
|
17 |
// - Heading 1 - 6 |
|
18 |
// - Heading 1 (H1) |
|
19 |
// ---------------------------------------------------------------------------- |
|
20 |
|
|
21 |
|
|
22 |
|
|
23 |
// -------------------------------------- |
|
24 |
// BASE COLORS |
|
25 |
// -------------------------------------- |
|
26 |
// Original Kivitendo Colors |
|
27 |
// -------------- |
|
28 |
// Background: #EBEBEB burlywood |
|
29 |
// Links: #006400 DarkGreen |
|
30 |
// Link-hover #FE5F14 Orange / #FFFFE0 lightyellow |
|
31 |
// Titles, BG/VG: #79B61B Mid-green FFFFFF White |
|
32 |
// Tabcolor: #CAFFA3 |
|
33 |
|
|
34 |
// -------------- |
|
35 |
// Grey shades |
|
36 |
@gray-darker: #222222 ; |
|
37 |
@gray-dark: #555555 ; |
|
38 |
@gray-mediumdark: #666666 ; |
|
39 |
@gray: #888888 ; |
|
40 |
@gray-medium: #aaaaaa ; |
|
41 |
@gray-light: #cfcfcf ; |
|
42 |
@gray-lighter: #dedede ; |
|
43 |
@gray-morelighter: #e0e0e0 ; |
|
44 |
@gray-verylight: #ececec ; |
|
45 |
@gray-superlight: #efefef ; |
|
46 |
|
|
47 |
// -------------- |
|
48 |
// Color Specications |
|
49 |
// for message and other coloured stuff |
|
50 |
// ok |
|
51 |
@color-green-strong: #003c18; |
|
52 |
@color-green-light: #9ccb21; |
|
53 |
// error |
|
54 |
@color-red-strong: #ae0014; |
|
55 |
@color-red-light: #ffd6d6; |
|
56 |
// info/hint |
|
57 |
@color-blue-strong: #209ec8; |
|
58 |
@color-blue-light: #b6e6e5; |
|
59 |
// warning |
|
60 |
@color-orange-strong: #8D6A00; // more brown |
|
61 |
@color-orange-light: #f6d972; |
|
62 |
// divers |
|
63 |
@rainbow-green: #408000; |
|
64 |
@rainbow-blue: #0080FF; |
|
65 |
@rainbow-red: #FF0000; |
|
66 |
@rainbow-yellow: #FFFF00; |
|
67 |
|
|
68 |
// -------------- |
|
69 |
// Brand colors |
|
70 |
@brand-standard: hsl( 128, 60%, 44%) ; // Standard color |
|
71 |
//@brand-standard: hsl( 6, 79%, 40%) ; // Standard color |
|
72 |
//@brand-standard: hsl(211, 12%, 0%); // Standard color |
|
73 |
|
|
74 |
@brand-strong: @brand-standard ; // Strong brand color (for text) |
|
75 |
@brand-strong-dimmed: lighten( @brand-strong , 10% ) ; |
|
76 |
@brand-strong-dimmed-hover: lighten( @brand-strong , 20% ) ; |
|
77 |
@brand-darkest: darken( @brand-strong , 30% ) ; |
|
78 |
|
|
79 |
@brand-text-color: darken( @brand-strong , 50% ) ; |
|
80 |
|
|
81 |
@brand-light: lighten( @brand-strong , 30% ) ; |
|
82 |
@brand-lighter: lighten( @brand-strong , 40% ) ; |
|
83 |
@brand-verylight: lighten( @brand-strong , 50% ) ; |
|
84 |
@brand-superlight: lighten( @brand-strong , 60% ) ; |
|
85 |
@brand-superverylight: lighten( @brand-strong , 70% ) ; |
|
86 |
|
|
87 |
|
|
88 |
@brand-table-text-color: @brand-darkest ; // |
|
89 |
@brand-heading-color: @brand-darkest ; // Standard heading color |
|
90 |
@brand-heading-bg: @brand-strong-dimmed-hover ; // |
|
91 |
@brand-h1-color: @brand-lighter ; // |
|
92 |
@brand-h1-bg: @brand-strong ; // |
|
93 |
@brand-data-color: @brand-standard ; // |
|
94 |
@brand-data-label-color: @brand-strong ; // Standard-Label color |
|
95 |
@brand-text-color-accent: @brand-standard ; // |
|
96 |
@brand-link-color: @brand-strong-dimmed ; // |
|
97 |
@brand-link-color-hover: @brand-strong-dimmed-hover ; |
|
98 |
|
|
99 |
// Text (Label & data) |
|
100 |
@brand-primary: @brand-text-color; |
|
101 |
@brand-label: @brand-data-label-color; |
|
102 |
@brand-label-bg: @brand-lighter; |
|
103 |
|
|
104 |
// -------------- |
|
105 |
// Buttons |
|
106 |
// |
|
107 |
// Button with manipulation (submit etc.) |
|
108 |
@button-strong: @brand-lighter; |
|
109 |
@button-strong-bg: @brand-strong; |
|
110 |
@button-strong-border: @brand-darkest; |
|
111 |
@button-strong-hover: @brand-lighter; |
|
112 |
@button-strong-hover-bg: @brand-strong-dimmed-hover; |
|
113 |
@button-strong-hover-border: @brand-darkest; |
|
114 |
@button-strong-active: @brand-lighter; |
|
115 |
@button-strong-active-bg: @brand-strong-dimmed; |
|
116 |
@button-strong-active-border: @brand-darkest; |
|
117 |
// Button without data manipulation (reset, cancel, open, show etc.) |
|
118 |
@button-soft: @brand-strong; |
|
119 |
@button-soft-bg: @brand-light; |
|
120 |
@button-soft-border: @brand-darkest; |
|
121 |
@button-soft-hover: @brand-strong; |
|
122 |
@button-soft-hover-bg: @brand-lighter; |
|
123 |
@button-soft-hover-border: @brand-darkest; |
|
124 |
@button-soft-active: @brand-darkest; |
|
125 |
@button-soft-active-bg: @brand-strong-dimmed; |
|
126 |
@button-soft-active-border: @brand-darkest; |
|
127 |
|
|
128 |
// -------------------------------------- |
|
129 |
// SCAFFOLDING |
|
130 |
// -------------------------------------- |
|
131 |
@body-bg: @gray-light; // general |
|
132 |
@content-bg: @gray-light; // background first tabs |
|
133 |
@heading-bg: @brand-lighter ; // controlpanels & other stuff |
|
134 |
|
|
135 |
// Tabs |
|
136 |
@tabs-bg: @gray-light; // background tabs panel (data/content) |
|
137 |
@tabs-bg-hover: @gray-light; // background tabs panel (data/content) |
|
138 |
@tabs-bg-hover-active: @tabs-bg; // background tabs panel (data/content) |
|
139 |
@tabs-text-hover: @brand-strong; // background tabs panel (data/content) |
|
140 |
|
|
141 |
|
|
142 |
@text-color: @brand-primary; |
|
143 |
@heading-color: @brand-heading-color ; // labels & table headings |
|
144 |
@caption-color: @brand-heading-color ; // caption |
|
145 |
|
|
146 |
|
|
147 |
// Table list zebra effect |
|
148 |
// Zebra effect in list tables |
|
149 |
@t-row-zebra-bg-odd: @brand-lighter; |
|
150 |
@t-row-zebra-bg-even: @brand-verylight; |
|
151 |
@t-row-zebra-bg-hover: #ffffff; |
|
152 |
|
|
153 |
@t-row-zebra-bg-error: @brand-error-bg; |
|
154 |
@t-row-zebra-bg-special: #FEF2C5; // PENDENT: ANSCHAUEN |
|
155 |
@t-row-zebra-bg-highlight: #B4F4FE; // PENDENT: ANSCHAUEN |
|
156 |
|
Auch abrufbar als: Unified diff
Geloeschte & obsolete Less-Dateien