Ignore:
Timestamp:
Mar 4, 2013, 5:00:42 PM (7 years ago)
Author:
cyril@…
Message:

optimisation du thème avec bootstrap;

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/spiplogo/theme/css/variables.less

    r70335 r70387  
     1// @import "bootstrap2spip/css/variables.less";
     2
    13//
    24// Variables
    3 // Swatch: spiplogo
    4 // Version: 1.0.0
    55// --------------------------------------------------
    66
     
    1313// -------------------------
    1414@black:                 #000;
    15 @grayDarker:            #111;
    16 @grayDark:              #444;
     15@grayDarker:            #222;
     16@grayDark:              #333;
    1717@gray:                  #555;
    18 @grayLight:             #aaa;
    19 @grayLighter:           #ddd;
     18@grayLight:             #999;
     19@grayLighter:           #eee;
    2020@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;
    3321
    3422// Couleurs perso
     
    4129@bleuextraclair:        #68A5D1;
    4230
     31// Accent colors
     32// -------------------------
     33@blue:                  #049cdb;
     34@blueDark:              #0064cd;
     35@green:                 #46a546;
     36@red:                   #9d261d;
     37@yellow:                #ffc40d;
     38@orange:                #f89406;
     39@pink:                  #c3325f;
     40@purple:                #7a43b6;
     41
    4342
    4443// Scaffolding
    4544// -------------------------
    46 @bodyBackground:        #0F65A2;
    47 @textColor:             rgba(255, 255, 255, 0.9);
     45@bodyBackground:        @bleu;
     46@textColor:             @white;
    4847
    4948
    5049// Links
    5150// -------------------------
    52 @linkColor:             lighten(@bleuextraclair, 15%);
    53 @linkColorHover:        @linkColor;
     51@linkColor:             #900;
     52@linkColorHover:        darken(@linkColor, 15%);
    5453
    5554
    5655// Typography
    5756// -------------------------
    58 @sansFontFamily:        'Cabin', Verdana, sans-serif;
    59 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
    60 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
     57@sansFontFamily:        SansationRegular, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
     58@serifFontFamily:       Georgia, Cambria, Times New Roman, Times, serif;
     59@monoFontFamily:        "Courier New", Courier, monospace;
    6160
    6261@baseFontSize:          14px;
    63 @baseFontFamily:        @sansFontFamily;
     62@baseFontFamily:        @monoFontFamily;
    6463@baseLineHeight:        20px;
    65 @altFontFamily:         @serifFontFamily;
    66 
    67 @headingsFontFamily:    'Roboto', cursive; // empty to use BS default, @baseFontFamily
    68 @headingsFontWeight:    normal;    // instead of browser default, bold
     64@altFontFamily:         @sansFontFamily;
     65
     66@headingsFontFamily:    @sansFontFamily; // empty to use BS default, @baseFontFamily
     67@headingsFontWeight:    bold;    // instead of browser default, bold
    6968@headingsColor:         inherit; // empty to use BS default, @textColor
    7069
     
    8079@paddingLarge:          11px 19px; // 44px
    8180@paddingSmall:          2px 10px;  // 26px
    82 @paddingMini:           1px 6px;   // 24px
     81@paddingMini:           0 6px;   // 22px
    8382
    8483@baseBorderRadius:      4px;
    85 @borderRadiusLarge:     5px;
     84@borderRadiusLarge:     6px;
    8685@borderRadiusSmall:     3px;
    8786
     
    8988// Tables
    9089// -------------------------
    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
     90@tableBackground:                   transparent; // overall background-color
     91@tableBackgroundAccent:             #f9f9f9; // for striping
     92@tableBackgroundHover:              #f5f5f5; // for hover
     93@tableBorder:                       #ddd; // table and cell border
    9594
    9695// Buttons
    9796// -------------------------
    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;
     97@btnBackground:                     @white;
     98@btnBackgroundHighlight:            darken(@white, 10%);
     99@btnBorder:                         #bbb;
     100
     101@btnPrimaryBackground:              @linkColor;
     102@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
     103
     104@btnInfoBackground:                 #5bc0de;
     105@btnInfoBackgroundHighlight:        #2f96b4;
     106
     107@btnSuccessBackground:              #62c462;
     108@btnSuccessBackgroundHighlight:     #51a351;
     109
     110@btnWarningBackground:              lighten(@orange, 15%);
    112111@btnWarningBackgroundHighlight:     @orange;
    113112
    114 @btnDangerBackground:               @bleuextraclair;
    115 @btnDangerBackgroundHighlight:      @bleuextraclair;
    116 
    117 @btnInverseBackground:              #27666D;
    118 @btnInverseBackgroundHighlight:     #27666D;
     113@btnDangerBackground:               #ee5f5b;
     114@btnDangerBackgroundHighlight:      #bd362f;
     115
     116@btnInverseBackground:              #444;
     117@btnInverseBackgroundHighlight:     @grayDarker;
    119118
    120119
     
    122121// -------------------------
    123122@inputBackground:               @white;
    124 @inputBorder:                   transparent;
    125 @inputBorderRadius:             0;
     123@inputBorder:                   #ccc;
     124@inputBorderRadius:             @baseBorderRadius;
    126125@inputDisabledBackground:       @grayLighter;
    127 @formActionsBackground:         transparent;
     126@formActionsBackground:         #f5f5f5;
    128127@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
    129128
     
    138137@dropdownLinkColor:             @grayDark;
    139138@dropdownLinkColorHover:        @white;
    140 @dropdownLinkColorActive:       @dropdownLinkColor;
    141 
    142 @dropdownLinkBackgroundActive:  @red;
    143 @dropdownLinkBackgroundHover:   @red;
     139@dropdownLinkColorActive:       @white;
     140
     141@dropdownLinkBackgroundActive:  @linkColor;
     142@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
    144143
    145144
     
    155154@zindexDropdown:          1000;
    156155@zindexPopover:           1010;
    157 @zindexTooltip:           1020;
     156@zindexTooltip:           1030;
    158157@zindexFixedNavbar:       1030;
    159158@zindexModalBackdrop:     1040;
     
    174173// Hr border color
    175174// -------------------------
    176 @hrBorder:                transparent;
     175@hrBorder:                @grayLighter;
    177176
    178177
     
    184183// Wells
    185184// -------------------------
    186 @wellBackground:                  #3CB9C6;
     185@wellBackground:                  #f5f5f5;
    187186
    188187
     
    192191@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
    193192
    194 @navbarHeight:                    50px;
    195 @navbarBackgroundHighlight:       @red;
    196 @navbarBackground:                @red;
     193@navbarHeight:                    40px;
     194@navbarBackgroundHighlight:       @bleuclair;
     195@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
    197196@navbarBorder:                    darken(@navbarBackground, 12%);
    198197
    199198@navbarText:                      @white;
    200199@navbarLinkColor:                 @white;
    201 @navbarLinkColorHover:            @white;
    202 @navbarLinkColorActive:           @navbarLinkColorHover;
    203 @navbarLinkBackgroundHover:       lighten(@navbarBackground, 10%);
    204 @navbarLinkBackgroundActive:      lighten(@navbarBackground, 10%);
     200@navbarLinkColorHover:            @grayLight;
     201@navbarLinkColorActive:           @grayLighter;
     202@navbarLinkBackgroundHover:       transparent;
     203@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
    205204
    206205@navbarBrandColor:                @navbarLinkColor;
    207206
    208207// Inverted navbar
    209 @navbarInverseBackground:                @bleuextraclair;
    210 @navbarInverseBackgroundHighlight:       @bleuextraclair;
    211 @navbarInverseBorder:                    rgba(0, 0, 0, 0.1);
    212 
    213 @navbarInverseText:                      @white;
    214 @navbarInverseLinkColor:                 @white;
     208@navbarInverseBackground:                #111111;
     209@navbarInverseBackgroundHighlight:       #222222;
     210@navbarInverseBorder:                    #252525;
     211
     212@navbarInverseText:                      @grayLight;
     213@navbarInverseLinkColor:                 @grayLight;
    215214@navbarInverseLinkColorHover:            @white;
    216 @navbarInverseLinkColorActive:           @white;
    217 @navbarInverseLinkBackgroundHover:       rgba(255, 255, 255, 0.2);
    218 @navbarInverseLinkBackgroundActive:      rgba(255, 255, 255, 0.2);
     215@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
     216@navbarInverseLinkBackgroundHover:       transparent;
     217@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
    219218
    220219@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
    221220@navbarInverseSearchBackgroundFocus:     @white;
    222221@navbarInverseSearchBorder:              @navbarInverseBackground;
    223 @navbarInverseSearchPlaceholderColor:    @white;
     222@navbarInverseSearchPlaceholderColor:    #ccc;
    224223
    225224@navbarInverseBrandColor:                @navbarInverseLinkColor;
     
    228227// Pagination
    229228// -------------------------
    230 @paginationBackground:                #3CB9C6;
    231 @paginationBorder:                    transparent;
    232 @paginationActiveBackground:          rgba(255, 255, 255, 0.4);
     229@paginationBackground:                #fff;
     230@paginationBorder:                    #ddd;
     231@paginationActiveBackground:          #f5f5f5;
    233232
    234233
    235234// Hero unit
    236235// -------------------------
    237 @heroUnitBackground:              #3CB9C6;
     236@heroUnitBackground:              @grayLighter;
    238237@heroUnitHeadingColor:            inherit;
    239238@heroUnitLeadColor:               inherit;
     
    269268@popoverArrowWidth:       10px;
    270269@popoverArrowColor:       #fff;
    271 @popoverTitleBackground:  @navbarBackground;
     270@popoverTitleBackground:  darken(@popoverBackground, 3%);
    272271
    273272// Special enhancement for popovers
Note: See TracChangeset for help on using the changeset viewer.