source: spip-zone/_squelettes_/spiplogo/theme/css/variables.less @ 69858

Last change on this file since 69858 was 69858, checked in by cyril@…, 7 years ago

on adopte un thème bleu (comme le plan de la XFLR7 dans Objectif Lune);

File size: 9.6 KB
Line 
1//
2// Variables
3// Swatch: Amelia
4// Version: 2.1.1
5// --------------------------------------------------
6
7
8// Global values
9// --------------------------------------------------
10
11
12// Grays
13// -------------------------
14@black:                 #000;
15@grayDarker:            #111;
16@grayDark:              #444;
17@gray:                  #555;
18@grayLight:             #aaa;
19@grayLighter:           #ddd;
20@white:                 #fff;
21
22
23// Accent colors
24// -------------------------
25@blue:                  #00BCE1;
26@blueDark:              #1269B0;
27@green:                 #48CA3B;
28@red:                   #AD1D28;
29@yellow:                #DEBB27;
30@orange:                #DF6E1E;
31@pink:                  #FFBCB9;
32@purple:                #4D3A7D;
33
34// Couleurs perso
35// --------------------------
36
37@bleu:                  #0F65A2;
38@bleugris:              #27577A;
39@bleufonce:             #054069;
40@bleuclair:             #4396D1;
41@bleuextraclair:        #68A5D1;
42
43
44// Scaffolding
45// -------------------------
46@bodyBackground:        #0F65A2;
47@textColor:             rgba(255, 255, 255, 0.9);
48
49
50// Links
51// -------------------------
52@linkColor:             lighten(@bleuextraclair, 15%);
53@linkColorHover:        @linkColor;
54
55
56// Typography
57// -------------------------
58@sansFontFamily:        'Cabin', Verdana, sans-serif;
59@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
60@monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
61
62@baseFontSize:          14px;
63@baseFontFamily:        @sansFontFamily;
64@baseLineHeight:        20px;
65@altFontFamily:         @serifFontFamily;
66
67@headingsFontFamily:    'Roboto', cursive; // empty to use BS default, @baseFontFamily
68@headingsFontWeight:    normal;    // instead of browser default, bold
69@headingsColor:         inherit; // empty to use BS default, @textColor
70
71
72// Component sizing
73// -------------------------
74// Based on 14px font-size and 20px line-height
75
76@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
77@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
78@fontSizeMini:          @baseFontSize * 0.75; // ~11px
79
80@paddingLarge:          11px 19px; // 44px
81@paddingSmall:          2px 10px;  // 26px
82@paddingMini:           1px 6px;   // 24px
83
84@baseBorderRadius:      4px;
85@borderRadiusLarge:     5px;
86@borderRadiusSmall:     3px;
87
88
89// Tables
90// -------------------------
91@tableBackground:                   lighten(#147E88, 10%); // overall background-color
92@tableBackgroundAccent:             lighten(#147E88, 15%); // for striping
93@tableBackgroundHover:              rgba(255, 255, 255, 0.4); // for hover
94@tableBorder:                       lighten(#147E88, 12%); // table and cell border
95
96// Buttons
97// -------------------------
98@btnBackground:                     @grayLighter;
99@btnBackgroundHighlight:            @grayLighter;
100@btnBorder:                         rgba(0, 0, 0, 0);
101
102@btnPrimaryBackground:              @navbarBackground;
103@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
104
105@btnInfoBackground:                 @purple;
106@btnInfoBackgroundHighlight:        @purple;
107
108@btnSuccessBackground:              @green;
109@btnSuccessBackgroundHighlight:     @green;
110
111@btnWarningBackground:              @orange;
112@btnWarningBackgroundHighlight:     @orange;
113
114@btnDangerBackground:               @bleuextraclair;
115@btnDangerBackgroundHighlight:      @bleuextraclair;
116
117@btnInverseBackground:              #27666D;
118@btnInverseBackgroundHighlight:     #27666D;
119
120
121// Forms
122// -------------------------
123@inputBackground:               @white;
124@inputBorder:                   transparent;
125@inputBorderRadius:             0;
126@inputDisabledBackground:       @grayLighter;
127@formActionsBackground:         transparent;
128@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
129
130
131// Dropdowns
132// -------------------------
133@dropdownBackground:            @white;
134@dropdownBorder:                rgba(0,0,0,.2);
135@dropdownDividerTop:            #e5e5e5;
136@dropdownDividerBottom:         @white;
137
138@dropdownLinkColor:             @grayDark;
139@dropdownLinkColorHover:        @white;
140@dropdownLinkColorActive:       @dropdownLinkColor;
141
142@dropdownLinkBackgroundActive:  @red;
143@dropdownLinkBackgroundHover:   @red;
144
145
146
147// COMPONENT VARIABLES
148// --------------------------------------------------
149
150
151// Z-index master list
152// -------------------------
153// Used for a bird's eye view of components dependent on the z-axis
154// Try to avoid customizing these :)
155@zindexDropdown:          1000;
156@zindexPopover:           1010;
157@zindexTooltip:           1020;
158@zindexFixedNavbar:       1030;
159@zindexModalBackdrop:     1040;
160@zindexModal:             1050;
161
162
163// Sprite icons path
164// -------------------------
165@iconSpritePath:          "../img/glyphicons-halflings.png";
166@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
167
168
169// Input placeholder text color
170// -------------------------
171@placeholderText:         @grayLight;
172
173
174// Hr border color
175// -------------------------
176@hrBorder:                transparent;
177
178
179// Horizontal forms & lists
180// -------------------------
181@horizontalComponentOffset:       180px;
182
183
184// Wells
185// -------------------------
186@wellBackground:                  #3CB9C6;
187
188
189// Navbar
190// -------------------------
191@navbarCollapseWidth:             767px;
192@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
193
194@navbarHeight:                    50px;
195@navbarBackgroundHighlight:       @red;
196@navbarBackground:                @red;
197@navbarBorder:                    darken(@navbarBackground, 12%);
198
199@navbarText:                      @white;
200@navbarLinkColor:                 @white;
201@navbarLinkColorHover:            @white;
202@navbarLinkColorActive:           @navbarLinkColorHover;
203@navbarLinkBackgroundHover:       lighten(@navbarBackground, 10%);
204@navbarLinkBackgroundActive:      lighten(@navbarBackground, 10%);
205
206@navbarBrandColor:                @navbarLinkColor;
207
208// Inverted navbar
209@navbarInverseBackground:                @bleuextraclair;
210@navbarInverseBackgroundHighlight:       @bleuextraclair;
211@navbarInverseBorder:                    rgba(0, 0, 0, 0.1);
212
213@navbarInverseText:                      @white;
214@navbarInverseLinkColor:                 @white;
215@navbarInverseLinkColorHover:            @white;
216@navbarInverseLinkColorActive:           @white;
217@navbarInverseLinkBackgroundHover:       rgba(255, 255, 255, 0.2);
218@navbarInverseLinkBackgroundActive:      rgba(255, 255, 255, 0.2);
219
220@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
221@navbarInverseSearchBackgroundFocus:     @white;
222@navbarInverseSearchBorder:              @navbarInverseBackground;
223@navbarInverseSearchPlaceholderColor:    @white;
224
225@navbarInverseBrandColor:                @navbarInverseLinkColor;
226
227
228// Pagination
229// -------------------------
230@paginationBackground:                #3CB9C6;
231@paginationBorder:                    transparent;
232@paginationActiveBackground:          rgba(255, 255, 255, 0.4);
233
234
235// Hero unit
236// -------------------------
237@heroUnitBackground:              #3CB9C6;
238@heroUnitHeadingColor:            inherit;
239@heroUnitLeadColor:               inherit;
240
241
242// Form states and alerts
243// -------------------------
244@warningText:             #c09853;
245@warningBackground:       #fcf8e3;
246@warningBorder:           darken(spin(@warningBackground, -10), 3%);
247
248@errorText:               #b94a48;
249@errorBackground:         #f2dede;
250@errorBorder:             darken(spin(@errorBackground, -10), 3%);
251
252@successText:             #468847;
253@successBackground:       #dff0d8;
254@successBorder:           darken(spin(@successBackground, -10), 5%);
255
256@infoText:                #3a87ad;
257@infoBackground:          #d9edf7;
258@infoBorder:              darken(spin(@infoBackground, -10), 7%);
259
260
261// Tooltips and popovers
262// -------------------------
263@tooltipColor:            #fff;
264@tooltipBackground:       #000;
265@tooltipArrowWidth:       5px;
266@tooltipArrowColor:       @tooltipBackground;
267
268@popoverBackground:       #fff;
269@popoverArrowWidth:       10px;
270@popoverArrowColor:       #fff;
271@popoverTitleBackground:  @navbarBackground;
272
273// Special enhancement for popovers
274@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
275@popoverArrowOuterColor:  rgba(0,0,0,.25);
276
277
278
279// GRID
280// --------------------------------------------------
281
282
283// Default 940px grid
284// -------------------------
285@gridColumns:             12;
286@gridColumnWidth:         60px;
287@gridGutterWidth:         20px;
288@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
289
290// 1200px min
291@gridColumnWidth1200:     70px;
292@gridGutterWidth1200:     30px;
293@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
294
295// 768px-979px
296@gridColumnWidth768:      42px;
297@gridGutterWidth768:      20px;
298@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
299
300
301// Fluid grid
302// -------------------------
303@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
304@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);
305
306// 1200px min
307@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
308@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);
309
310// 768px-979px
311@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
312@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);
Note: See TracBrowser for help on using the repository browser.