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

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

quelques améliorations : intégration des onglets bootstrap, intégration du slider bootstrap, intégration de plusieurs sliders, consoldation des menus haut et bas + publication de quelques exemples;

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