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

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

travail sur le style des barres de navigation haute et basse;

File size: 9.6 KB
Line 
1// @import "bootstrap2spip/css/variables.less";
2
3//
4// Variables
5// --------------------------------------------------
6
7
8// Global values
9// --------------------------------------------------
10
11
12// Grays
13// -------------------------
14@black:                 #000;
15@grayDarker:            #222;
16@grayDark:              #333;
17@gray:                  #555;
18@grayLight:             #999;
19@grayLighter:           #eee;
20@white:                 #efefef;
21@extrawhite:            #fff;
22
23// Couleurs perso
24// --------------------------
25
26@bleu:                  #0F65A2;
27@bleugris:              #27577A;
28@bleufonce:             #054069;
29@bleuclair:             #4396D1;
30@bleuextraclair:        #68A5D1;
31
32// Accent colors
33// -------------------------
34@blue:                  #049cdb;
35@blueDark:              #0064cd;
36@green:                 #46a546;
37@red:                   #9d261d;
38@yellow:                #ffc40d;
39@orange:                #f89406;
40@pink:                  #c3325f;
41@purple:                #7a43b6;
42
43
44// Scaffolding
45// -------------------------
46@bodyBackground:        @bleu;
47@textColor:             @white;
48
49
50// Links
51// -------------------------
52@linkColor:             #900;
53@linkColorHover:        darken(@linkColor, 15%);
54
55
56// Typography
57// -------------------------
58@sansFontFamily:        SansationRegular, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
59@serifFontFamily:       Georgia, Cambria, Times New Roman, Times, serif;
60@monoFontFamily:        "Courier New", Courier, monospace;
61
62@baseFontSize:          14px;
63@baseFontFamily:        @monoFontFamily;
64@baseLineHeight:        20px;
65@altFontFamily:         @sansFontFamily;
66
67@headingsFontFamily:    @sansFontFamily; // empty to use BS default, @baseFontFamily
68@headingsFontWeight:    bold;    // 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:           0 6px;   // 22px
83
84@baseBorderRadius:      4px;
85@borderRadiusLarge:     6px;
86@borderRadiusSmall:     3px;
87
88
89// Tables
90// -------------------------
91@tableBackground:                   transparent; // overall background-color
92@tableBackgroundAccent:             #f9f9f9; // for striping
93@tableBackgroundHover:              #f5f5f5; // for hover
94@tableBorder:                       #ddd; // table and cell border
95
96// Buttons
97// -------------------------
98@btnBackground:                     @white;
99@btnBackgroundHighlight:            darken(@white, 10%);
100@btnBorder:                         #bbb;
101
102@btnPrimaryBackground:              @linkColor;
103@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
104
105@btnInfoBackground:                 #5bc0de;
106@btnInfoBackgroundHighlight:        #2f96b4;
107
108@btnSuccessBackground:              #62c462;
109@btnSuccessBackgroundHighlight:     #51a351;
110
111@btnWarningBackground:              lighten(@orange, 15%);
112@btnWarningBackgroundHighlight:     @orange;
113
114@btnDangerBackground:               #ee5f5b;
115@btnDangerBackgroundHighlight:      #bd362f;
116
117@btnInverseBackground:              #444;
118@btnInverseBackgroundHighlight:     @grayDarker;
119
120
121// Forms
122// -------------------------
123@inputBackground:               @white;
124@inputBorder:                   #ccc;
125@inputBorderRadius:             @baseBorderRadius;
126@inputDisabledBackground:       @grayLighter;
127@formActionsBackground:         #f5f5f5;
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:       @white;
141
142@dropdownLinkBackgroundActive:  @linkColor;
143@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
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:           1030;
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:                @grayLighter;
177
178
179// Horizontal forms & lists
180// -------------------------
181@horizontalComponentOffset:       180px;
182
183
184// Wells
185// -------------------------
186@wellBackground:                  #f5f5f5;
187
188
189// Navbar
190// -------------------------
191@navbarCollapseWidth:             767px;
192@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
193
194@navbarHeight:                    40px;
195@navbarBackgroundHighlight:       @bleuclair;
196@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
197@navbarBorder:                    darken(@navbarBackground, 12%);
198
199@navbarText:                      @white;
200@navbarLinkColor:                 @white;
201@navbarLinkColorHover:            @grayLight;
202@navbarLinkColorActive:           @grayLighter;
203@navbarLinkBackgroundHover:       transparent;
204@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
205
206@navbarBrandColor:                @navbarLinkColor;
207
208// Inverted navbar
209@navbarInverseBackground:                #111111;
210@navbarInverseBackgroundHighlight:       #222222;
211@navbarInverseBorder:                    #252525;
212
213@navbarInverseText:                      @grayLight;
214@navbarInverseLinkColor:                 @grayLight;
215@navbarInverseLinkColorHover:            @white;
216@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
217@navbarInverseLinkBackgroundHover:       transparent;
218@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
219
220@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
221@navbarInverseSearchBackgroundFocus:     @white;
222@navbarInverseSearchBorder:              @navbarInverseBackground;
223@navbarInverseSearchPlaceholderColor:    #ccc;
224
225@navbarInverseBrandColor:                @navbarInverseLinkColor;
226
227
228// Pagination
229// -------------------------
230@paginationBackground:                #fff;
231@paginationBorder:                    #ddd;
232@paginationActiveBackground:          #f5f5f5;
233
234
235// Hero unit
236// -------------------------
237@heroUnitBackground:              @grayLighter;
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:  darken(@popoverBackground, 3%);
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.