[BUGFIX] Resolves wrong usage of col and colgroup
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / _variables.less
1 //
2 // Global Variables
3 // ================
4 // Note: Need to be loaded after all LESS files are included to override variables defined before.
5 // Note: Use relative paths
6 //
7
8
9 //
10 // Paths
11 // =====
12 //
13 @path-build:  "../../..";
14 @path-bower:  "@{path-build}/bower_components";
15 @path-root:   "../../../../../..";
16 @path-sysext: "@{path-root}/typo3/sysext";
17
18
19 //
20 // Share Font
21 // ==========
22 //
23 @share-font-path: "@{path-sysext}/backend/Resources/Public/Fonts/Share";
24
25
26 //
27 // FontAwesome
28 // ===========
29 //
30 @fa-font-path: "@{path-sysext}/backend/Resources/Public/Fonts/FontAwesome";
31
32
33 //
34 // Bootstrap
35 // =========
36 //
37
38 // Colors
39 @gray-darker:           rgb(30, 30, 30);
40 @gray-dark:             rgb(90, 90, 90);
41 @gray:                  rgb(115, 115, 115);
42 @gray-light:            rgb(215, 215, 215);
43 @gray-lighter:          rgb(245, 245, 245);
44 @brand-primary:         #0078e6;
45 @brand-success:         #79a548;
46 @brand-info:            #6daae0;
47 @brand-warning:         #e8a33d;
48 @brand-danger:          #c83c3c;
49 @brand-notice:          #333;
50
51 // Scaffolding
52 @body-bg:               #fff;
53 @text-color:            #000;
54 @link-color:            #212424;
55 @link-hover-color:      #000;
56
57 // Typography
58 @font-family-sans-serif:    Verdana, Arial, Helvetica, sans-serif;
59 @font-size-base:            12px;
60 @font-size-large:           ceil((@font-size-base * 1.25)); // ~15px
61 @font-size-small:           11px; // ~11px
62 @font-size-h1:              floor((@font-size-base * 2.3));
63 @font-size-h2:              floor((@font-size-base * 1.6));
64 @font-size-h3:              ceil((@font-size-base * 1.35));
65 @font-size-h4:              ceil((@font-size-base * 1.2));
66 @line-height-base:          1.5;
67
68 // Components
69 @padding-base-vertical:     6px;
70 @padding-base-horizontal:   6px;
71 @padding-large-vertical:    12px;
72 @padding-large-horizontal:  12px;
73 @padding-small-vertical:    4px;
74 @padding-small-horizontal:  4px;
75 @padding-xs-vertical:       2px;
76 @padding-xs-horizontal:     4px;
77 @line-height-large:         1.3333333;
78 @line-height-small:         1.5;
79 @border-radius-base:        2px;
80 @border-radius-large:       2px;
81 @border-radius-small:       2px;
82
83 // Tables
84 @table-cell-padding:            6px;
85 @table-condensed-cell-padding:  6px;
86 @table-bg:                      #fafafa;
87 @table-bg-accent:               darken(@table-bg, 1%);
88 @table-bg-hover:                darken(@table-bg, 5%);
89 @table-bg-active:               @table-bg-hover;
90 @table-border-color:            #ccc;
91
92 // Buttons
93 @btn-font-weight:                normal;
94 @btn-default-color:              #333;
95 @btn-default-bg:                 #eee;
96 @btn-default-border:             #bbb;
97
98 // Forms
99 @input-bg:                       #fefefe;
100 @input-color:                    #333;
101 @input-border:                   #bbb;
102 @input-border-focus:             #aaa;
103 @input-color-placeholder:        @gray-light;
104 @input-color-disabled:           @gray;
105 @input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 1.6) + 2);
106
107 // Navbar
108 @navbar-height:                  45px;
109 @navbar-default-link-hover-bg:             darken(@navbar-default-bg, 5%);
110 @navbar-default-link-active-bg:            darken(@navbar-default-bg, 10%);
111 @navbar-default-link-disabled-bg:          darken(@navbar-default-bg, 15%);
112
113 @navbar-inverse-color:                      #999;
114 @navbar-inverse-bg:                         #111;
115 @navbar-inverse-border:                     none;
116 @navbar-inverse-link-color:                 #ddd;
117 @navbar-inverse-link-bg:                    lighten(@navbar-inverse-bg, 7.5%);  // TYPO3 SPECIFIC
118 @navbar-inverse-link-hover-color:           rgb(200, 200, 200);
119 @navbar-inverse-link-hover-bg:              rgb(50, 50, 50);
120 @navbar-inverse-link-active-color:          #fff;
121 @navbar-inverse-link-active-bg:             @navbar-inverse-link-hover-bg;
122 @navbar-inverse-link-disabled-color:        darken(@navbar-inverse-color, 30%);
123 @navbar-inverse-link-disabled-bg:           darken(@navbar-inverse-bg, 20%);
124
125 // Navs
126 @nav-open-link-hover-color:                 #fff;
127 @nav-link-padding:                          6px 12px;
128 @nav-disabled-link-hover-color:             @gray-dark;
129
130 // Tabs
131 @nav-tabs-border-color:                     #ccc;
132 @nav-tabs-link-hover-bg:                    darken(@nav-tabs-active-link-bg, 10%);
133 @nav-tabs-link-hover-border-color:          @gray-light;
134 @nav-tabs-active-link-bg:                   #fafafa;
135 @nav-tabs-active-link-hover-bg:             @body-bg;
136 @nav-tabs-active-link-hover-color:          #000;
137 @nav-tabs-active-link-hover-border-color:   #ccc;
138 @nav-tabs-active-link-hover-bg:             darken(@nav-tabs-active-link-bg, 5%);
139 @nav-tabs-justified-link-border-color:            #ccc;
140 @nav-tabs-justified-active-link-border-color:     @nav-tabs-border-color;
141
142 // Form states and alerts
143 @state-success-text:          @brand-success;
144 @state-success-bg:            lighten(@brand-success, 35%);
145 @state-success-border:        @brand-success;
146 @state-info-text:             @brand-info;
147 @state-info-bg:               lighten(@brand-info, 30%);
148 @state-info-border:           @brand-info;
149 @state-warning-text:          @brand-warning;
150 @state-warning-bg:            lighten(@brand-warning, 35%);
151 @state-warning-border:        @brand-warning;
152 @state-danger-text:           @brand-danger;
153 @state-danger-bg:             lighten(@brand-danger, 35%);
154 @state-danger-border:         @brand-danger;
155 @state-notice-text:           rgb(160, 160, 160);                            // TYPO3 SPECIFIC
156 @state-notice-bg:             lighten(rgb(160, 160, 160), 35%);              // TYPO3 SPECIFIC
157 @state-notice-border:         rgb(160, 160, 160);                            // TYPO3 SPECIFIC
158
159 // Tooltips
160 @tooltip-bg:                  #333;
161 @tooltip-opacity:             1;
162 @tooltip-arrow-width:         3px;
163
164 // Alerts
165 @alert-padding:               11px;
166 @alert-border-radius:         2px;
167 @alert-link-font-weight:      bold;
168 @alert-success-bg:            @brand-success;
169 @alert-success-text:          #fff;
170 @alert-success-border:        transparent;
171 @alert-info-bg:               @brand-info;
172 @alert-info-text:             #fff;
173 @alert-info-border:           transparent;
174 @alert-warning-bg:            @brand-warning;
175 @alert-warning-text:          #fff;
176 @alert-warning-border:        transparent;
177 @alert-danger-bg:             @brand-danger;
178 @alert-danger-text:           #fff;
179 @alert-danger-border:         transparent;
180 @alert-notice-bg:             @brand-notice;                                    // TYPO3 SPECIFIC
181 @alert-notice-text:           #fff;                                             // TYPO3 SPECIFIC
182 @alert-notice-border:         transparent;                                      // TYPO3 SPECIFIC
183
184 // Panels
185 @panel-default-border:        #ccc;
186 @panel-default-heading-bg:    #ddd;
187
188 // Wells
189 @well-bg:                     #fafafa;
190 @well-border:                 #ccc;
191
192 // Badges
193 @badge-bg:                    @gray;
194
195 // Type
196 @text-muted:                  lighten(@text-color,45%);
197 @headings-small-color:        @gray;
198 @dl-horizontal-offset:        90px;
199 @hr-border:                   #7a7a7a;
200
201 // Modal
202 @zindex-modal: 5000;
203
204 // Dropdown
205 @dropdown-bg:                    #424242;
206 @dropdown-color:                 #ffffff;                                                                               // TYPO3 SPECIFIC
207 @dropdown-border:                rgba(0,0,0,.15);
208 @dropdown-fallback-border:       #ccc;
209 @dropdown-divider-bg:            #525252;
210 @dropdown-link-color:            #fff;
211 @dropdown-link-hover-color:      #fff;
212 @dropdown-link-hover-bg:         #525252;
213 @dropdown-link-active-color:     #fff;
214 @dropdown-link-active-bg:        #525252;
215 @dropdown-link-disabled-color:   @gray-light;
216 @dropdown-header-color:          @gray-light;
217 @dropdown-caret-color:           #000;
218
219 // Datetime Picker
220 @bs-datetimepicker-timepicker-font-size: @font-size-base;
221 @bs-datetimepicker-active-bg: @btn-primary-bg;
222 @bs-datetimepicker-active-color: @btn-primary-color;
223 @bs-datetimepicker-border-radius: 0;
224 @bs-datetimepicker-btn-hover-bg: lighten(@dropdown-bg, 10%);
225 @bs-datetimepicker-disabled-color: @text-muted;
226 @bs-datetimepicker-alternate-color: lighten(@bs-datetimepicker-disabled-color, 10%);
227 @bs-datetimepicker-secondary-border-color: @dropdown-bg;
228 @bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2);
229 @bs-datetimepicker-primary-border-color: @dropdown-bg;
230 @bs-datetimepicker-text-shadow: none;