/* #PRODUIRE{fond=css/responsive.css}
md5:e32c9dc46f80e117c64007e5b8ec6097 */
/* ChariteMax - HTML Template */
// ------ Couleurs ------
@black: #000;
@white: #fff;
@gris-base: #000;
@gris-darker: lighten(@gris-base, 13.5%); // #222
@gris-dark: lighten(@gris-base, 20%); // #333
@gris-light: lighten(@gris-base, 46.7%); // #777
@gris-lighter: lighten(@gris-base, 90.9%); // #e8e8e8
@gris-extralighter: lighten(@gris-base, 95%); // #e8e8e8
@grisDarker: #1a1a1a;
@grisDark: #246C7D;
@gris: #657880;
@grisLight: #e4e4e4;
@grisLighter: #F7F9F3;
@grisExtraLighter: #f2f2f2;
@bleu: #30A3BA;
@bleuLight: #7fc3ea;
@bleuDark: #246C7D;
@vert: #94C120;
@vertLight: #f7f9f3;;
@rouge: #ec1e24;
@rougeLight: lighten(@rouge, 15%);
@rougeDark: darken(@rouge, 15%);
@jaune: #f0b214;
@orange: #ed5226;
@orangeLighter: #ed9140;
@orangeLight: #d2791d;
@orangeDark: #DE3700;
@rose: #c3325f;
@violet: #7C57A2;
@turquoise: #0EAF99;
@bleu_fb: #29A5DC;
@bleu_tw: #26BBED;
@couleur-defaut : @vert;
@couleur-defautLight: lighten(@couleur-defaut, 15%);
@couleur-defautDark: darken(@couleur-defaut, 15%);
// Scaffolding
@bodyBackground: @white;
@textColor: @grisDark;
// Links
@linkColor: @bleuDark;
@linkColorHover: @bleu;
// Adaptateur BS2
@brand-defaut: @rouge;
@brand-primary: @bleu;
@brand-vert: @vert;
@brand-jaune: @jaune;
@brand-orange: @orange;
@brand-rouge: @rouge;
@body-bg: @bodyBackground;
@text-color: @textColor;
@link-color: @linkColor;
@link-hover-color: @linkColorHover;
@link-hover-decoration: none;
// === Typography ===
@sansFontFamily: 'Cabin','Lato', sans-serif;
@serifFontFamily: Georgia, Cambria, Times New Roman, Times, serif;
@monoFontFamily: "Courier New", Courier, monospace;
@baseFontSize: 18px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 24px;
@altFontFamily: @sansFontFamily;
@labeur: @baseFontFamily;
@headingsFontFamily: @baseFontFamily; // empty to use BS defaut, @baseFontFamily
@headingsFontWeight: normal; // instead of browser defaut, bold
@headingsColor: inherit; // empty to use BS defaut, @textColor
@titraille: @baseFontFamily;
// Adaptateur BS2
@font-family-sans-serif: @sansFontFamily;
@font-family-serif: @serifFontFamily;
@font-family-monospace: @monoFontFamily;
@font-family-base: @font-family-serif;
@font-size-base: @baseFontSize;
@font-size-large: @fontSizeLarge; // ~18px
@font-size-small: @fontSizeSmall; // ~12px
@font-size-h1: floor((@font-size-base * 2));
@font-size-h2: floor((@font-size-base * 1.5));
@font-size-h3: ceil((@font-size-base * 1.25));
@font-size-h4: ceil((@font-size-base * 1.1));
@font-size-h5: @font-size-base;
@font-size-h6: @font-size-base;
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: unit(@baseLineHeight / @baseFontSize);
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: @baseLineHeight; // ~20px
//** By defaut, this inherits from the ``.
@headings-font-family: @headingsFontFamily;
@headings-font-weight: @headingsFontWeight;
@headings-line-height: 1.1;
@headings-color: @headingsColor;
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
@icon-font-path: "../fonts/";
//** File name for all font files.
@icon-font-name: "glyphicons-halflings-regular";
//** Element ID within SVG icon file.
@icon-font-svg-id: "glyphicons_halflingsregular";
// ==== Component sizing ====
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px
@paddingLarge: .2em .5em; // 44px
@paddingSmall: 2px 10px; // 26px
@paddingMini: 0 6px; // 22px
@baseBorderRadius: .2em;
@borderRadiusLarge: .2em;
@borderRadiusSmall: .4em;
@padding-base-vertical: 0.4em;
@padding-base-horizontal: 12%;
@padding-large-vertical: 0.2em;
@padding-large-horizontal: .7em;
@padding-small-vertical: .4em;
@padding-small-horizontal: .6em;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;
// Adaptateur BS2
@border-radius-base: @baseBorderRadius;
@border-radius-large: @borderRadiusLarge;
@border-radius-small: @borderRadiusSmall;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns.
@caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
@caret-width-large: 5px;
// Tables
@tableBackground: @grisLighter; // overall background-color
@tableBackgroundAccent: #f9f9f9; // for striping
@tableBackgroundHover: #f5f5f5; // for hover
@tableBorder: #ddd; // table and cell border
//** Padding for `| `s and ` | `s.
@table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 5px;
// Adaptateur BS2
@table-bg: @tableBackground;
@table-bg-accent: @tableBackgroundAccent;
@table-bg-hover: @tableBackgroundHover;
@table-bg-active: @table-bg-hover;
@table-border-color: @tableBorder;
// Buttons
@btnBackground: @couleur-defaut;
@btnBackgroundHighlight: darken(@couleur-defaut, 10%);
@btnBorder: #bbb;
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnJauneBackground: lighten(@bleu, 5%);
@btnJauneBackgroundHighlight: darken(@bleu, 5%);
@btnVertBackground: lighten(@vert, 5%);
@btnVertBackgroundHighlight: darken(@vert, 5%);
@btnOrangeBackground: lighten(@orange, 15%);
@btnOrangeBackgroundHighlight: @orange;
@btnRougeBackground: @rouge;
@btnRougeBackgroundHighlight: darken(@rouge, 5%);
@btnBleuBackground: @bleu;
@btnBleuBackgroundHighlight: darken(@bleu, 5%);
@btnVioletBackground: @violet;
@btnVioletBackgroundHighlight: darken(@violet, 5%);
@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grisDarker;
// Adaptateur BS2
@btn-font-weight: normal;
@btn-defaut-color: #fff;
@btn-defaut-bg: @turquoise;
@btn-defaut-border: darken(@btn-defaut-bg, 5%);
@btn-primary-color: #fff;
@btn-primary-bg: @btnPrimaryBackground;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-vert-color: #fff;
@btn-vert-bg: @btnVertBackground;
@btn-vert-border: darken(@btn-vert-bg, 5%);
@btn-jaune-color: #fff;
@btn-jaune-bg: @brand-jaune;
@btn-jaune-border: darken(@btn-jaune-bg, 5%);
@btn-orange-color: #fff;
@btn-orange-bg: @btnOrangeBackground;
@btn-orange-border: darken(@btn-orange-bg, 5%);
@btn-rouge-color: #fff;
@btn-rouge-bg: @btnRougeBackground;
@btn-rouge-border: darken(@btn-rouge-bg, 5%);
@btn-bleu-color: #fff;
@btn-bleu-bg: @btnBleuBackground;
@btn-bleu-border: darken(@btn-bleu-bg, 5%);
@btn-violet-color: #fff;
@btn-violet-bg: @btnVioletBackground;
@btn-violet-border: darken(@btn-violet-bg, 5%);
@btn-link-disabled-color: @gris-light;
@btn-border-radius-base: 20px;
@btn-border-radius-large: @border-radius-large;
@btn-border-radius-small: @border-radius-small;
// ==== Filigrane ====
@filigrane : url('');
// ==== Forms ====
// --- Couleurs ---
@formActionsBackground: #f5f5f5;
@inputBackground: @white;
@inputBorder: #ccc;
@inputDisabledBackground: @grisLighter;
@placeholderText: @grisLight;
@input-border-focus: #66afe9;
@legend-color: @gris-dark;
@legend-border-color: #e5e5e5;
@input-group-addon-bg: @gris-lighter;
// --- Hauteurs ---
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@form-group-margin-bottom: 0;
@cursor-disabled: not-allowed;
// Adaptateur BS2
@input-group-addon-border-color: @input-border;
@input-bg: @inputBackground;
@input-bg-disabled: @inputDisabledBackground;
@input-color: @gris;
@input-border: @inputBorder;
@input-border-radius: @inputBorderRadius;
@input-color-placeholder: @placeholderText;
@input-border-radius-large: @border-radius-large;
@input-border-radius-small: @border-radius-small;
@inputBorderRadius: @baseBorderRadius;
// ==== Dropdowns ====
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
@dropdownLinkColor: @grisDark;
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: @linkColor;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
// Adaptateur BS2
@dropdown-bg: @dropdownBackground;
@dropdown-border: @dropdownBorder;
@dropdown-fallback-border: #ccc;
@dropdown-divider-bg: @dropdownDividerTop;
@dropdown-link-color: @dropdownLinkColor;
@dropdown-link-hover-color: @dropdownLinkColorHover;
@dropdown-link-hover-bg: @dropdownLinkBackgroundHover;
@dropdown-link-active-color: @dropdownLinkColorActive;
@dropdown-link-active-bg: @dropdownLinkBackgroundActive;
@dropdown-link-disabled-color: @gris-light;
@dropdown-header-color: @gris-light;
@dropdown-caret-color: #000;
// ==== Z-index master list ====
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1030;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Adaptateur border-style: 2px;
@zindex-navbar: 1000;
@zindex-dropdown: @zindexDropdown;
@zindex-popover: @zindexPopover;
@zindex-tooltip: @zindexTooltip;
@zindex-navbar-fixed: @zindexFixedNavbar;
@zindex-modal-background: @zindexModalBackdrop;
@zindex-modal: @zindexModal;
// ============================= GRILLE =============================
// Grille par defaut
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 50px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// Adaptateur BS2
@grid-columns: @gridColumns;
@grid-gutter-width: @gridGutterWidth;
@grid-float-breakpoint: @navbarCollapseDesktopWidth;
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen - 768px max ( tablette )
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen - 992 max
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large - 1280px max
@screen-lg: 1280px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
// Extra Large - 1366px max
@screen-xl: 1366px;
@screen-xl-min: @screen-xl;
@screen-xl-desktop: @screen-xl-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@screen-lg-max: (@screen-xl-min - 1);
// Small screen / tablet
@container-tablet: (720px + @grid-gutter-width);
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: (950px + @grid-gutter-width);
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: (1200px + @grid-gutter-width);
@container-lg: @container-large-desktop;
// Trés largeLarge screen / wide desktop
@container-treslarge-desktop: (1306px + @grid-gutter-width);
@container-xl: @container-treslarge-desktop;
@navbarCollapseWidth: 767px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 140px;
@navbarBackgroundHighlight: #ffffff;
@navbarBackground: @bleu;
@navbarBorder: lighten(@navbarBackground, 12%);
@navbarText: @white;
@navbarLinkColor: @white;
@navbarLinkColorHover: @grisDark;
@navbarLinkColorActive: @gris;
@navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
@navbarBrandColor: @navbarLinkColor;
// ------ Menu navba: r negatif ------
@navbarInverseBackground: #111111;
@navbarInverseBackgroundHighlight: #222222;
@navbarInverseBorder: #252525;
@navbarInverseText: @grisLight;
@navbarInverseLinkColor: @grisLight;
@navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc;
@navbarInverseBrandColor: @navbarInverseLinkColor;
// Ajout Laurent
@navbarsupHeight: 45px;
// Adaptateur BS2
// Basics of a navbar
@navbar-height: @navbarHeight;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-defaut-color: @navbarText;
@navbar-defaut-bg: @navbarBackground;
@navbar-defaut-border: @navbarBorder;
// Navbar links
@navbar-defaut-link-color: @navbarLinkColor;
@navbar-defaut-link-hover-color: @navbarLinkColorHover;
@navbar-defaut-link-hover-bg: @navbarLinkBackgroundHover;
@navbar-defaut-link-active-color: @navbarLinkColorActive;
@navbar-defaut-link-active-bg: @navbarLinkBackgroundActive;
@navbar-defaut-link-disabled-color: #ccc;
@navbar-defaut-link-disabled-bg: transparent;
// Navbar brand label
@navbar-defaut-brand-color: @navbarBrandColor;
@navbar-defaut-brand-hover-color: darken(@navbar-defaut-brand-color, 10%);
@navbar-defaut-brand-hover-bg: transparent;
// Navbar toggle
@navbar-defaut-toggle-hover-bg: #ddd;
@navbar-defaut-toggle-icon-bar-bg: #888;
@navbar-defaut-toggle-border-color: #ddd;
//=== Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: @navbarInverseText;
@navbar-inverse-bg: @navbarInverseBackground;
@navbar-inverse-border: @navbarInverseBorder;
// Inverted navbar list-style: ;
@navbar-inverse-link-color: @navbarInverseLinkColor;
@navbar-inverse-link-hover-color: @navbarInverseLinkColorHover;
@navbar-inverse-link-hover-bg: @navbarInverseLinkBackgroundHover;
@navbar-inverse-link-active-color: @navbarInverseLinkColorActive;
@navbar-inverse-link-active-bg: @navbarInverseLinkBackgroundActive;
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbarInverseBrandColor;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
//== Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gris-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gris;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
//== Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
// ==== Pagination =====
@paginationBackground: #fff;
@paginationBorder: #ddd;
@paginationActiveBackground: #f5f5f5;
// Adaptateur BS2
@pagination-color: @link-color;
@pagination-bg: @paginationBackground;
@pagination-border: @paginationBorder;
@pagination-hover-color: @link-hover-color;
@pagination-hover-bg: @gris-lighter;
@pagination-hover-border: #ddd;
@pagination-active-color: #fff;
@pagination-active-bg: @brand-primary;
@pagination-active-border: @brand-primary;
@pagination-disabled-color: @gris-light;
@pagination-disabled-bg: #fff;
@pagination-disabled-border: #ddd;
// ==== Pager (BS2) ====
@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;
@pager-disabled-color: @pagination-disabled-color;
/* ==== Form states and alerts ==== */
@orangeText: #c09853;
@orangeBackground: #fcf8e3;
@orangeBorder: darken(spin(@orangeBackground, -10), 3%);
@rougeText: #b94a48;
@rougeBackground: #f2dede;
@rougeBorder: darken(spin(@rougeBackground, -10), 3%);
@vertText: #468847;
@vertBackground: #dff0d8;
@vertBorder: darken(spin(@vertBackground, -10), 5%);
@jauneText: #3a87ad;
@jauneBackground: #d9edf7;
@jauneBorder: darken(spin(@jauneBackground, -10), 7%);
/* Adaptateur BS2 */
@state-vert-text: @vertText;
@state-vert-bg: @vertBackground;
@state-vert-border: @vertBorder;
@state-jaune-text: @jauneText;
@state-jaune-bg: @jauneBackground;
@state-jaune-border: @jauneBorder;
@state-orange-text: @orangeText;
@state-orange-bg: @orangeBackground;
@state-orange-border: @orangeBorder;
@state-rouge-text: @rougeText;
@state-rouge-bg: @rougeBackground;
@state-rouge-border: @rougeBorder;
/* ==== Tooltips and popovers ==== */
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@popoverBackground: #fff;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: darken(@popoverBackground, 3%);
/* Adaptateur BS2 */
@tooltip-max-width: 200px;
@tooltip-color: @tooltipColor;
@tooltip-bg: @tooltipBackground;
@tooltip-opacity: .9;
@tooltip-arrow-width: @tooltipArrowWidth;
@tooltip-arrow-color: @tooltipArrowColor;
/* ==== Special enhancement for popovers ==== */
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.25);
/* Adaptateur BS2 */
@popover-bg: @popoverBackground;
@popover-max-width: 276px;
@popover-border-color: fadeout(@popoverArrowOuterColor, 5%);
@popover-fallback-border-color: #ccc;
@popover-title-bg: @popoverTitleBackground;
@popover-arrow-width: @popoverArrowWidth;
@popover-arrow-color: @popover-bg;
@popover-arrow-outer-width: @popoverArrowOuterWidth;
@popover-arrow-outer-color: @popoverArrowOuterColor;
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
/* ==== Labels (BS2) ==== */
@label-defaut-bg: @gris-light;
@label-primary-bg: @brand-primary;
@label-vert-bg: @brand-vert;
@label-jaune-bg: @brand-jaune;
@label-orange-bg: @brand-orange;
@label-rouge-bg: @brand-rouge;
@label-color: #fff;
@label-link-hover-color: #fff;
/* ==== Modals (BS2) ==== */
// Padding applied to the modal body
@modal-inner-padding: 15px;
// Padding applied to the modal title
@modal-title-padding: 15px;
// Modal title line-height
@modal-title-line-height: @line-height-base;
// Background color of modal content area
@modal-content-bg: #fff;
// Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
// Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
// Modal backdrop background color
@modal-backdrop-bg: #000;
// Modal backdrop opacity
@modal-backdrop-opacity: .5;
// Modal header border color
@modal-header-border-color: #e5e5e5;
// Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
/* ==== Alerts (BS2) ==== */
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-vert-bg: @state-vert-bg;
@alert-vert-text: @state-vert-text;
@alert-vert-border: @state-vert-border;
@alert-jaune-bg: @state-jaune-bg;
@alert-jaune-text: @state-jaune-text;
@alert-jaune-border: @state-jaune-border;
@alert-orange-bg: @state-orange-bg;
@alert-orange-text: @state-orange-text;
@alert-orange-border: @state-orange-border;
@alert-rouge-bg: @state-rouge-bg;
@alert-rouge-text: @state-rouge-text;
@alert-rouge-border: @state-rouge-border;
/* ==== Progress bars (BS2) ==== */
// Background color of the whole progress component
@progress-bg: #f5f5f5;
// Progress bar text color
@progress-bar-color: #fff;
// Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base;
// Defaut progress bar color
@progress-bar-bg: @brand-primary;
// Vert progress bar color
@progress-bar-vert-bg: @brand-vert;
// Orange progress bar color
@progress-bar-orange-bg: @brand-orange;
// Rouge progress bar color
@progress-bar-rouge-bg: @brand-rouge;
// Info progress bar color
@progress-bar-jaune-bg: @brand-jaune;
/* ==== Thumbail (BS2) ==== */
@thumbnail-padding: 4px;
@thumbnail-bg: @body-bg;
@thumbnail-border: #ddd;
@thumbnail-border-radius: @border-radius-base;
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
/* ==== Wells ===== */
@wellBackground: #f5f5f5;
// Adaptateur BS2
@well-bg: @wellBackground;
@well-border: darken(@well-bg, 7%);
/* ==== Badges (BS2) ==== */
@badge-color: #fff;
@badge-link-hover-color: #fff;
@badge-bg: @gris-light;
@badge-active-color: @link-color;
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
/* ==== Carousel (BS2) ==== */
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
/* ==== Close (BS2) ==== */
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
/* ==== Code (BS2) ==== */
@code-color: #c7254e;
@code-bg: #f9f2f4;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: #f5f5f5;
@pre-color: @gris-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
/* ==== Type (BS2) ==== */
/* Horizontal offset for forms and lists. */
@component-offset-horizontal: 180px;
/* Text muted color */
@text-muted: @gris-light;
/* Abbreviations and acronyms border color */
@abbr-border-color: @gris-light;
/* Headings small color */
@headings-small-color: @gris-light;
/* Blockquote small color */
@blockquote-small-color: @gris-light;
/* Blockquote font size */
@blockquote-font-size: inherit;
/* Blockquote border color */
@blockquote-border-color: @gris-lighter;
/* Page header border color */
@page-header-border-color: @gris-lighter;
/* Width of horizontal description list titles */
@dl-horizontal-offset: @component-offset-horizontal;
/* Point at which .dl-horizontal becomes horizontal */
@dl-horizontal-breakpoint: @grid-float-breakpoint;
/* Horizontal line color. */
@hrBorder: @grisLighter;
@hr-border: @hrBorder;
/* ==== Sprite icons path ==== */
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
/* ==== Horizontal forms & lists ==== */
@horizontalComponentOffset: 180px;
/* ==== Hero unit ==== */
@heroUnitBackground: @grisLighter;
@heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit;
/* Typo SPIP */
@emFontSize : 1em * (@font-size-base / 16);
@emLineHeight : 1em * (@line-height-base);
@emVertMargin : @emLineHeight;
@indentStep : (@container-md / @grid-columns) / 2;
@indentStep1200 : (@container-lg / @grid-columns) / 2;
@indentStep768 : (@container-sm / @grid-columns) / 2;
@font-size-large-em : 1em * @font-size-large / @font-size-base;
@font-size-small-em : 1em * @font-size-small / @font-size-base;
@font-size-h1-em: 1em * @font-size-h1 / @font-size-base;
@font-size-h2-em: 1em * @font-size-h2 / @font-size-base;
@font-size-h3-em: 1em * @font-size-h3 / @font-size-base;
@font-size-h4-em: 1em * @font-size-h4 / @font-size-base;
@font-size-h5-em: 1em * @font-size-h5 / @font-size-base;
@font-size-h6-em: 1em * @font-size-h6 / @font-size-base;
@media only screen and (max-width: 1800px) {
.main-slider .slider-wrapper .image img {
width: auto;
}
}
@media only screen and (max-width: 1300px) {
.page-wrapper {
overflow: hidden;
}
.main-slider h1 {
font-size: 50px;
font-weight: 600;
}
}
@media only screen and (max-width: 1199px) {
.main-menu .navigation > li > a { font-size:13px; }
.page-wrapper { margin-bottom: 0px !important; }
.fact-counter .inner-box {
margin-left: 100px;
margin-bottom: 30px;
}
.main-header.style-two .header-upper {
padding: 0px;
}
.sp-two { padding-top: 0 ; }
}
@media only screen and (max-width: 991px) {
.image-block-one {
margin-bottom: 50px;
}
.image-block-one .big-image img {
float: left;
right: 0;
}
.image-block-one .small-image {
right: 5px;
}
.main-footer .services-widget {
padding-left: 0px;
}
.main-footer .posts-widget {
padding-right: : 0px;
margin-left: 0px;
}
.header-top .outer-box {
justify-content: center;
}
.event-section .image-block-one .big-image img {
right: 0px;
}
.main-header.style-two {
position: relative;
background: #222;
}
.main-header.style-two .logo-outer {
padding: 15px 0 15px;
background-color: #2a2a2a;
margin-bottom: 10px;
}
// #[(REM) --------------- PAGES DE TYPE CONTENU -------------- ]
.sidebar-page-container { padding-top: 1.6em; }
.blog-single, .right-sidebar {
padding-left: 6vw;
padding-right: 6vw;
}
}
@media only screen and (max-width: 599px) {
// -------------- Généralités ---------------
.container {
padding-left: 0;
padding: 0;
> .row { margin-bottom: 0; }
}
.grotit {
margin-right: 6vw;
margin-left: 6vw;
}
.sp-two { padding: 3em 0 ; }
.main-slider {
.tit {
font-size: 38px;
line-height: 45px;
padding: 0 6vw;
}
h3 { margin: 20px; }
.text { line-height: 1.2; }
.surtit {
font-size: 19px;
span {
top: 0;
right: 5px;
position: absolute;
}
}
}
.news-section { padding: 0; }
.fact-counter .inner-box {
max-width: 260px;
margin: 0 auto;
margin-bottom: 30px;
}
.sp-three { padding: 30px 6vw 50px; }
.sp-two { padding: 3em 6vw; }
.event-section .image-block-one .big-image img { width: 100%; }
// -------------- Menu principal ---------------
.header-top {
z-index: 50;
.top-right .menu-liste li {
margin-left: 15px;
&:first-of-type a { font-size:0; }
&:nth-of-type(2) { margin-left: 5px; }
a { font-size: 12px; }
}
}
.main-header {
.header-upper .outer-box, .main-menu {
position:absolute;
top: 49vw;
}
.header-upper .outer-box {
margin-right: 4.5%;
float: right;
z-index: 1000;
}
.main-menu {
z-index: 900;
.navbar-toggle { margin-bottom: 6px; }
}
.logo-outer {
padding: 15px 0 5px;
.logo h1, .logo {
font-size: .4em;
padding-bottom: 26px;
img {
width: 77%;
margin-top: 93px;
margin-bottom: -32px;
padding: 0 1%;
}
}
}
.search-box-outer {
.search-box-btn {
font-size: 23px;
padding: 5px 0 6px;
}
.dropdown-menu {
top: 5px !important;
width: 102vw !important;
transform: translate3d(-91vw, 41px, 0px) !important;
}
}
.search-panel {
.form-conteiner { padding: 20px 6%; }
input[type="search"] {
padding: 9px 15px 9px 15px;
width: 81%;
}
button[type="submit"] {
width: 14%;
padding: 0.5em 0em;
}
}
}
.header-top .top-left, .header-top .top-right {
justify-content: center;
.menu-entree.item.menu-items__item.menu-items__item_page-speciale.abonnement {
display: none;
}
.menu-liste li.menu-items__item_accueil { margin-left: 0; }
}
.main-menu .navbar-collapse > .navigation {
background-color: @bleuDark;
&> li > {
&> ul, &> ul > li > ul { background-color: @bleuDark; }
a, &> ul > li > a, &> ul > li > ul > li > a { color: #fff; }
}
&> .menu-entree:first-of-type > {padding-top: 0.1em; }
&> .menu-entree:last-of-type > {padding-bottom: 0.1em; }
}
.about-block-two h1, .about-block-two .grotit {
font-size: 27px;
margin-bottom: 0;
}
.news-block-one .inner-box {
.lower-box {
padding-right: 4%;
padding-left: 25vw;
.date {padding-left: 7.5%; }
}
}
.services-block-one {
margin-bottom: 0;
h4 { margin-bottom: 0 }
.image.logo_svg { padding: 0 0; }
.read-more { a, span { display: none; } }
.inner-box {
border-bottom: 1px solid #8bba41;
padding-top: 35px;
}
&:last-of-type { border-bottom: 0 solid none; }
}
.page-title{
padding: 2em 3vw;
h1 { font-size: 10vw; }
}
.bread-crumb{
padding: 15px;
li {
margin-left: 0;
margin-right: 4px;
&:first-of-type {
font-size: 0;
.fa-home { font-size: 18px; }
}
}
}
.cause-block .lower-content h4 { padding: 0 6vw 20px; }
.contenu .blog-single {
.inner-box .lower-box .top-content h4 { font-size: 2em; }
.text h3.spip {
font-size: 24px;
line-height: 1.5em;
padding-bottom: .5em;
margin-bottom: 1em;
}
}
.subscribe-section {
padding: 1.5em 1.5em 0;
.title-column{ text-align: center; }
.subscribe-form {
.form-group input[type="email"] { width: 100%; }
button { right: 10%; }
.reponse_formulaire { text-align: center; }
}
}
// #[(REM) --------------- ACCUEIL -------------- ]
.owl-carousel { margin-bottom: 0; }
.sec-title {
width: 100%;
overflow: hidden;
}
.page_sommaire {
.main-slider .slider-wrapper .image img {
max-height: 500px;
width: auto;
}
.image-block-one { margin-top: 0; }
.big-image { display: none; }
}
// #[(REM) --------------- PAGES INTERIEURES -------------- ]
.page_interieure .main-header {
.logo-outer .logo img {
width: 40%;
margin-bottom: 18px;
}
.header-upper .outer-box, .main-menu { top: 25vw; }
}
.chapo {
margin: 8vw auto 0;
width: 80vw;
}
// #[(REM) --------------- PAGES COMPTE -------------- ]
.page_compte, .page_abonnement {
.offset-2 { margin-left: 0; }
.col-xs-5.col-sm-6, .col-xs-7.col-sm-6 {
width: 50%;
font-size: 2.2vw;
}
.onglets .ongletclic.active { float: left; }
}
.page_compte {
.grotit {
margin-right: 0;
margin-left: 0;
}
.btn.droite {
float: none;
padding: 0.2em 0.6em 0.3em;
font-size: 14px;
}
.sidebar-page-container {
padding: 2.2em 1em 0;
.contenu {
text-align: center;
#coldroite {
.deconnect { float:none; }
.encartcompte {
.grotit { margin: 0; }
.tit { margin: 0.5em auto; }
}
}
}
}
}
// #[(REM) --------------------------- PIED ----------------------------- ]
.main-footer {
.widgets-section {
padding: 2em 10vw;
text-align: center;
}
.posts-widget {
padding-right: 0;
.post {
padding-left: 0;
.post-thumb{ display: none; }
}
}
.footer-logo {
width: 100%;
img{ display: inline-block; }
}
.nav {
display: inline-block;
width: 100%;
}
.footer-column .widget-title{
.footer-logo{ display: inline-block; }
&::before, &::after {
left: 50%;
transform: translate(-50%);
}
}
.contact-info-list li{
padding: 0;
i {
position: static;
margin-right: 0.7em;
}
}
.footer-widget {
.btico {
text-align: center;
img {
float: none;
clear: none;
display: block ;
margin: 0 auto 6px;
}
}
}
}
}
@media only screen and (min-width: 1200px) {
.main-header .search-box-outer .dropdown-menu {
left: 0 !important;
}
}
|