// Quelques inclusions utiles @import "css/responsive-utilities.less"; @import "css/spip.variables.less"; @import "css/mixins.less"; /* Ici les variables issues de bootstrap2, fichier d'origine variables.less, on réorganise et y ajoute certains éléments si nécessaire... */ // // Variables // -------------------------------------------------- // Global values // -------------------------------------------------- // Grays // ------------------------- @black: #000; @grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; @grayLighter: #eee; @white: #fff; // Accent colors // ------------------------- @blue: #049cdb; @blueDark: #0064cd; @green: #46a546; @red: #9d261d; @yellow: #ffc40d; @orange: #f89406; @pink: #c3325f; @purple: #7a43b6; // Scaffolding // ------------------------- @import "css/scaffolding.less"; @import "css/type.less"; [@bodyBackground: (#PARAMETRE8|?{#PARAMETRE8, "#fff"}); // Couleur générale de l'écran] [.container {background-color:(#PARAMETRE1|?{#PARAMETRE1, "#fff"});} // Fond de page] [#header {background-color:(#PARAMETRE2);} // Entête, non proposé par défaut] [#wrapper {background-color:(#PARAMETRE3);} // 3 colonnes de contenu, non proposé par défaut] [#content {background-color:(#PARAMETRE4);} // Colonne de contenus, non proposé par défaut] [#aside {background-color:(#PARAMETRE5);} // Colonne secondaire, non proposé par défaut] [#extra {background-color:(#PARAMETRE6);} // Colonne tertiaire, non proposé par défaut] [#footer {background-color:(#PARAMETRE7);} // Pied de page, non proposé par défaut] [@textColor: (#PARAMETRE1|?{#PARAMETRE1, "@grayDark"}); // Couleur du texte] [@linkColor: (#PARAMETRE2|?{#PARAMETRE2, "#08c"}); // Couleur des liens] [@linkColorHover: (#PARAMETRE3|?{#PARAMETRE3, "darken(@linkColor, 15%)"}); // Couleur des liens lors du survol] [.header .accueil #nom_site_spip {color: (#PARAMETRE4|?{#PARAMETRE4, "@linkColor"});} // Couleur du titre du site dans l'entête] [#slogan_site_spip {color: (#PARAMETRE5|?{#PARAMETRE5, "@textColor"});}] [@headingsColor: (#PARAMETRE6|?{#PARAMETRE6, "inherit"});] [@sansFontFamily: (#PARAMETRE1|?{#PARAMETRE1, '"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif'}); // Typo sans] [@serifFontFamily: (#PARAMETRE2|?{#PARAMETRE2, 'Georgia, Cambria, "Times New Roman", Times, serif'}); // Typo serif] [@monoFontFamily: (#PARAMETRE3|?{#PARAMETRE3, '"Courier New", Courier, monospace'}); // Typo serif] [@headingsFontFamily: (#PARAMETRE4|?{#PARAMETRE4, '@baseFontFamily'}); // Typo des titres] [@baseFontSize: (#PARAMETRE5|?{#PARAMETRE5, '14'})px; // Hauteur de base des caractères] @baseFontFamily: @serifFontFamily; // Police de base @altFontFamily: @sansFontFamily; // Police alternative [@baseLineHeight: (#PARAMETRE6|?{#PARAMETRE6, '20'})px; // Hauteur de base des lignes] @headingsFontWeight: normal; // Voir s'il faut aussi pouvoir paramétrer cela... // Component sizing // ------------------------- // Based on 14px font-size and 20px line-height @fontSizeLarge: @baseFontSize * 1.25; // ~18px @fontSizeSmall: @baseFontSize * 0.85; // ~12px @fontSizeMini: @baseFontSize * 0.75; // ~11px @paddingLarge: 11px 19px; // 44px @paddingSmall: 2px 10px; // 26px @paddingMini: 0 6px; // 22px @baseBorderRadius: 4px; @borderRadiusLarge: 6px; @borderRadiusSmall: 3px; // Tables // ------------------------- @import "css/tables.less"; [@tableBackground: (#PARAMETRE1|?{#PARAMETRE1, "#ffffff"}); // Couleur de fond des lignes impaires] [@tableBackgroundAccent: (#PARAMETRE2|?{#PARAMETRE2, "#f9f9f9"}); // Couleur de fond des lignes paires] [@tableBackgroundHover: (#PARAMETRE3|?{#PARAMETRE3, "#f5f5f5"}); // Couleur de fond des lignes au survol] [@tableBorder: (#PARAMETRE5|?{#PARAMETRE5, "#dddddd"}); // Couleur des bordures] [(#PARAMETRE4|=={oui}|?{' // On prend le contenu de la classe table-bordered dans tables.css et appliqué à table.spip table.spip { border: 1px solid @tableBorder; border-collapse: separate; // Done so we can round those corners! *border-collapse: collapse; // IE7 can t round corners anyway border-left: 0; .border-radius(@baseBorderRadius); th, td { border-left: 1px solid @tableBorder; } // Prevent a double border caption + thead tr:first-child th, caption + tbody tr:first-child th, caption + tbody tr:first-child td, colgroup + thead tr:first-child th, colgroup + tbody tr:first-child th, colgroup + tbody tr:first-child td, thead:first-child tr:first-child th, tbody:first-child tr:first-child th, tbody:first-child tr:first-child td { border-top: 0; } // For first th/td in the first row in the first thead or tbody thead:first-child tr:first-child > th:first-child, tbody:first-child tr:first-child > td:first-child, tbody:first-child tr:first-child > th:first-child { .border-top-left-radius(@baseBorderRadius); } // For last th/td in the first row in the first thead or tbody thead:first-child tr:first-child > th:last-child, tbody:first-child tr:first-child > td:last-child, tbody:first-child tr:first-child > th:last-child { .border-top-right-radius(@baseBorderRadius); } // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot thead:last-child tr:last-child > th:first-child, tbody:last-child tr:last-child > td:first-child, tbody:last-child tr:last-child > th:first-child, tfoot:last-child tr:last-child > td:first-child, tfoot:last-child tr:last-child > th:first-child { .border-bottom-left-radius(@baseBorderRadius); } // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot thead:last-child tr:last-child > th:last-child, tbody:last-child tr:last-child > td:last-child, tbody:last-child tr:last-child > th:last-child, tfoot:last-child tr:last-child > td:last-child, tfoot:last-child tr:last-child > th:last-child { .border-bottom-right-radius(@baseBorderRadius); } // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot tfoot + tbody:last-child tr:last-child td:first-child { .border-bottom-left-radius(0); } tfoot + tbody:last-child tr:last-child td:last-child { .border-bottom-right-radius(0); } // Special fixes to round the left border on the first td/th caption + thead tr:first-child th:first-child, caption + tbody tr:first-child td:first-child, colgroup + thead tr:first-child th:first-child, colgroup + tbody tr:first-child td:first-child { .border-top-left-radius(@baseBorderRadius); } caption + thead tr:first-child th:last-child, caption + tbody tr:first-child td:last-child, colgroup + thead tr:first-child th:last-child, colgroup + tbody tr:first-child td:last-child { .border-top-right-radius(@baseBorderRadius); } } ',''})] // Pagination // ------------------------- @import "css/pagination.less"; [@paginationBackground: (#PARAMETRE1|?{#PARAMETRE1, "#ffffff"}); // Couleur de fond] [@paginationActiveBackground: (#PARAMETRE2|?{#PARAMETRE2, "#dddddd"}); // Couleur de fond de la pagination en cours] [@paginationBorder: (#PARAMETRE3|?{#PARAMETRE3, "#f5f5f5"}); // Couleur des bordures] [.pagination {(#PARAMETRE5)}] // Breadcrumb // ------------------------- @import "css/breadcrumbs.less"; .breadcrumb { [background-color: (#PARAMETRE1|?{#PARAMETRE1, "#fefefe"}); // Couleur de fond] .border-radius(@baseBorderRadius); > li { [text-shadow: 0 1px 0 (#PARAMETRE2|?{#PARAMETRE2, "#ffffff"}); // Couleur de l'ombre] > .divider { [color: (#PARAMETRE3|?{#PARAMETRE3, "#cccccc"}); // Couleur du séparateur >] } } > .active { [color: (#PARAMETRE4|?{#PARAMETRE4, "#999999"}); // Couleur de l'élément actif] } [(#PARAMETRE5|?{#PARAMETRE5,''}) // Insertion de règle CSS spécifique pour .breadcrumb] } // Navbar // ------------------------- @import "css/navbar.less"; @import "css/responsive-navbar.less"; @navbarCollapseWidth: 767px; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; [@navbarHeight: (#PARAMETRE10|?{#PARAMETRE10, "38"})px; // Hauteur du menu] // Devrait logiquement être inutile sous SPIPr-educ qui utilise l'habillage inverse @navbarBackgroundHighlight: #ffffff; @navbarBackground: darken(@navbarBackgroundHighlight, 5%); @navbarBorder: darken(@navbarBackground, 12%); @navbarText: #777; @navbarLinkColor: #777; @navbarLinkColorHover: @grayDark; @navbarLinkColorActive: @gray; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: darken(@navbarBackground, 5%); @navbarBrandColor: @navbarLinkColor; // Inverted navbar : celle utilisée dans SPIPr-educ [@navbarInverseBackground: (#PARAMETRE1|?{#PARAMETRE1, "#111111"}); // Couleur de fond basse] [@navbarInverseBackgroundHighlight: (#PARAMETRE2|?{#PARAMETRE2, "#222222"}); // Couleur de fond haute] [@navbarInverseBorder: (#PARAMETRE3|?{#PARAMETRE3, "#252525"}); // Couleur de bordure] [@navbarInverseText: (#PARAMETRE4|?{#PARAMETRE4, "#999999"}); // Couleur des textes] [@navbarInverseLinkColor: (#PARAMETRE5|?{#PARAMETRE5, "#999999"}); // Couleur des liens] [@navbarInverseLinkColorHover: (#PARAMETRE6|?{#PARAMETRE6, "#ffffff"}); // Couleur des liens au survol] [@navbarInverseLinkColorActive: (#PARAMETRE7|?{#PARAMETRE7, "#ffffff"}); // Couleur des liens du secteur actif] [@navbarInverseLinkBackgroundHover: (#PARAMETRE8|?{#PARAMETRE8, "#797979"}); // Couleur de fond des liens au survol] [@navbarInverseLinkBackgroundActive: (#PARAMETRE9|?{#PARAMETRE9, "#111111"}); // Couleur de fond du secteur actif] @navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); @navbarInverseSearchBackgroundFocus: @white; @navbarInverseSearchBorder: @navbarInverseBackground; @navbarInverseSearchPlaceholderColor: #ccc; @navbarInverseBrandColor: @navbarInverseLinkColor; /* Pour NavBar, en provenance de SPIPr-educ */ /* surcharge des règles issue de bootstrap + on surcharge les images dans le /img de notre dossier css */ #nav > .navbar-inner {padding-left: 0;padding-right: 0} [class^="icon-"], [class*=" icon-"]{ background-image:url("@{iconSpritePath}"); margin-top: 3px; } .icon-white, .nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class*=" icon-"], .nav-list > .active > a > [class^="icon-"], .nav-list > .active > a > [class*=" icon-"], .navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .active > a > [class*=" icon-"], .dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:focus > [class^="icon-"], .dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > li > a:focus > [class*=" icon-"], .dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class*=" icon-"], .dropdown-submenu:hover > a > [class^="icon-"], .dropdown-submenu:focus > a > [class^="icon-"], .dropdown-submenu:hover > a > [class*=" icon-"], .dropdown-submenu:focus > a > [class*=" icon-"]{ background-image:url("@{iconWhiteSpritePath}"); } .navbar .nav > li > a { padding: 9px 10px; } .navbar .nav > li.item-picto > a { padding: 9px 15px; } /* icones en sprite css */ [class^="icon-nav"], [class*=" icon-nav"]{ background-image:url("#URL_SITE_SPIP/[(#CHEMIN{css/img/sprite.png})]"); height:22px; width:22px; background-repeat:no-repeat; display:inline-block; vertical-align:text-top; margin:0; &:hover{background-color:@grayDark;} } .item-picto{ display:inline-block; } #nav{ .menu-container{ // border-top:1px solid @blue; // border-bottom:1px solid @blue; .border-radius(0); .nav{ margin:0 auto; float:none; .dropdown-menu { min-width: 240px; .border-radius(@baseBorderRadius); .box-shadow(0 2px 2px rgba(0,0,0,.2)); } .item{ // li.item{ // text-transform:none; // background:none; // list-style: none; // a{ // display: block; // &:hover,&:focus,&:active{background-color:@blue;color:@white;} // } // } &.tout_voir{text-align:right;} // .on,&.on{font-weight: normal;} &.item-picto { >a{ &.icon-nav-home{ background-position:12px -30px; &:hover,&:focus,&:active{background-position:12px 9px;} } &.icon-nav-calendar{ background-position:-25px -30px; &:hover,&:focus,&:active{background-position:-27px 9px;} } &.icon-nav-contact{ background-position:-187px -30px; &:hover,&:focus,&:active{background-position:-187px 9px;} } &.icon-nav-themes{ background-position:-266px -30px; &:hover,&:focus,&:active{background-position:-266px 9px;} } &.icon-nav-star{ background-position:-228px -30px; &:hover,&:focus,&:active{background-position:-228px 9px;} } } } } } } } // Dropdowns // ------------------------- @import "css/dropdowns.less"; [@dropdownBackground: (#PARAMETRE1|?{#PARAMETRE1, "#ffffff"}); // Couleur de fond des items] [@dropdownBorder: (#PARAMETRE2|?{#PARAMETRE2, "#aaaaaa"}); // Couleur de fond de la bordure] [@dropdownDividerTop: (#PARAMETRE3|?{#PARAMETRE3, "#e5e5e5"}); // Couleur des lignes de séparation horizontale hautes] [@dropdownDividerBottom: (#PARAMETRE4|?{#PARAMETRE4, "#ffffff"}); // Couleur des lignes de séparation horizontale basses] [@dropdownLinkColor: (#PARAMETRE5|?{#PARAMETRE5, "#333333"}); // Couleur des items] [@dropdownLinkColorHover: (#PARAMETRE6|?{#PARAMETRE6, "#ffffff"}); // Couleur des items] [@dropdownLinkColorActive: (#PARAMETRE7|?{#PARAMETRE7, "#ffffff"}); // Couleur des items] [@dropdownLinkBackgroundActive: (#PARAMETRE8|?{#PARAMETRE8, "#0088cc"}); // Couleur des items] [@dropdownLinkBackgroundHover: (#PARAMETRE9|?{#PARAMETRE9, "#0088cc"}); // Couleur des items] [#nav .menu-container .nav .item .on,&.on (#PARAMETRE10|=={non}|?{'{font-weight: normal;}',''})] // Buttons // ------------------------- @import "css/buttons.less"; @btnBackground: @white; @btnBackgroundHighlight: darken(@btnBackground, 10%); @btnBorder: #bbb; @btnPrimaryBackground: @linkColor; @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnInfoBackground: #5bc0de; @btnInfoBackgroundHighlight: #2f96b4; @btnSuccessBackground: #62c462; @btnSuccessBackgroundHighlight: #51a351; @btnWarningBackground: lighten(@orange, 15%); @btnWarningBackgroundHighlight: @orange; @btnDangerBackground: #ee5f5b; @btnDangerBackgroundHighlight: #bd362f; @btnInverseBackground: #444; @btnInverseBackgroundHighlight: @grayDarker; // Forms // ------------------------- @inputBackground: @white; @inputBorder: #ccc; @inputBorderRadius: @baseBorderRadius; @inputDisabledBackground: @grayLighter; @formActionsBackground: #f5f5f5; @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border // COMPONENT VARIABLES // -------------------------------------------------- // Z-index master list // ------------------------- // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) @zindexDropdown: 1000; @zindexPopover: 1010; @zindexTooltip: 1030; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050; // Sprite icons path // ------------------------- @iconSpritePath: "[(#CHEMIN{css/img/glyphicons-halflings.png})]"; @iconWhiteSpritePath: "[(#CHEMIN{css/img/glyphicons-halflings-white.png})]"; // Input placeholder text color // ------------------------- @placeholderText: @grayLight; // Hr border color // ------------------------- @hrBorder: @grayLighter; // Horizontal forms & lists // ------------------------- @horizontalComponentOffset: 180px; // Wells // ------------------------- @wellBackground: #f5f5f5; // Hero unit // ------------------------- // A définir directement depuis la partie structure car élément spécifique (voir s'il faut un style commun avec l'éditorial ou non) @import "css/hero-unit.less"; [@heroUnitBackground: (#PARAMETRE1|?{#PARAMETRE1, "#eeeeee"}); // Couleur de fond] [@heroUnitHeadingColor: (#PARAMETRE2|?{#PARAMETRE2, "#0088cc"}); // Couleur de fond des titres] [@heroUnitLeadColor: (#PARAMETRE3|?{#PARAMETRE3, "#333333"}); // Couleur de fond des textes] .hero-unit .postmeta {clear: both;} [#sommaire_article_hero .item, #sommaire_editorial .item {(#PARAMETRE4)}] // Form states and alerts // ------------------------- @warningText: #c09853; @warningBackground: #fcf8e3; @warningBorder: darken(spin(@warningBackground, -10), 3%); @errorText: #b94a48; @errorBackground: #f2dede; @errorBorder: darken(spin(@errorBackground, -10), 3%); @successText: #468847; @successBackground: #dff0d8; @successBorder: darken(spin(@successBackground, -10), 5%); @infoText: #3a87ad; @infoBackground: #d9edf7; @infoBorder: darken(spin(@infoBackground, -10), 7%); // Tooltips and popovers // ------------------------- @tooltipColor: #fff; @tooltipBackground: #000; @tooltipArrowWidth: 5px; @tooltipArrowColor: @tooltipBackground; @popoverBackground: #fff; @popoverArrowWidth: 10px; @popoverArrowColor: #fff; @popoverTitleBackground: darken(@popoverBackground, 3%); // Special enhancement for popovers @popoverArrowOuterWidth: @popoverArrowWidth + 1; @popoverArrowOuterColor: rgba(0,0,0,.25); // GRID // -------------------------------------------------- // Default 940px grid // ------------------------- @gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // 1200px min @gridColumnWidth1200: 70px; @gridGutterWidth1200: 30px; @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); // 768px-979px @gridColumnWidth768: 42px; @gridGutterWidth768: 20px; @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); // Fluid grid // ------------------------- @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); // 1200px min @fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); @fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); // 768px-979px @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); /* Quelques éléments spécifiques à SPIPr */ .header {position: relative;} .header .spip_logos {float:left;margin: @paddingLarge;margin-left: 0;margin-top:0;} .header .accueil {} #logo_site_spip {line-height: 1em;} #slogan_site_spip {display: block;} .header .formulaire_menu_lang {width: 100%;} .header .formulaire_menu_lang select {width: 100%;} .formulaire_recherche,.secondary .formulaire_recherche {padding-right: 42px+2*14px;} /* provisionner la largeur du bouton+padding sur le input.search */ .formulaire_recherche form .input-append {width:100%;} .formulaire_recherche form input.search {width:100%;} .footer { .clearfix; margin-top:4em; padding-top: 2em; border-top:2px solid; padding-bottom: 2em; margin-bottom:0; text-align: left; position:relative; .colophon {padding-right: 100px} .generator {position: absolute;top:2em;right:0;max-width: 100px;} } .cartouche {margin-bottom: @emLineHeight;} .content.primary {min-height: 320px;} .content { .postmeta .tags .inline {display: inline;} } .icone{ display: inline-block; vertical-align: middle; padding:5px; width: 30px; height: 30px; .border-radius(20px); background-color: @blue ; &:hover,&:active,&:focus{background-color: @blue ;} } [(#REM) Styles du carousel] // // Carousel // -------------------------------------------------- @import "css/carousel.less"; /* Carousel base class */ .carousel{ position: relative; font-size:1.1em; margin:0 0 1em 0; padding:0 0 0 0; [border: 1px solid (#PARAMETRE3|?{#PARAMETRE3, "#eeeeee"}); // Couleur de la bordure] height:240px; [color: (#PARAMETRE2|?{#PARAMETRE2, "#333333"}); // Couleur des textes] [background-color: (#PARAMETRE1|?{#PARAMETRE1, "#eeeeee"}); // Couleur de fond] .carousel-inner { overflow: hidden; width: 100%; position: relative; > .item { strong.h3-like{ font-weight:normal; a span.titre { [color: (#PARAMETRE4|?{#PARAMETRE4, "#0088cc"}); // Couleur du titre] } > span.spip_logo.spip_logos { &, span.img {float:right; margin-right:0; padding-right:0;} } } overflow:auto; display: none; position: relative; .transition(.6s ease-in-out left); // Account for jankitude on images > img, > a > img { display: block; } article{ width:100%; height:240px; overflow:hidden; margin-bottom:0; .introduction{padding:0 1em 1em 2em;} a{ display:block; padding:0 0 0 1em ; font-size:1.5em; font-weight:bold; line-height:1em; &:hover{text-decoration:none;} .spip_logos{margin:0;} .titre{display: block;padding-top:.8em;} } } } > .active, > .next, > .prev { display: block; } > .active { left: 0; } > .next, > .prev { position: absolute; top: 0; width: 100%; } > .next { left: 100%; } > .prev { left: -100%; } > .next.left, > .prev.right { left: 0; } > .active.left { left: -100%; } > .active.right { left: 100%; } } // Left/right controls for nav // --------------------------- .carousel-control { z-index:1100; [color: (#PARAMETRE5|?{#PARAMETRE5, "#ffffff"}); // Couleur des flèches gauche et droite de navigation] // background-color: @color2; [background-color: (#PARAMETRE6|?{#PARAMETRE6, "#bbbbbb"}); // Couleur de fond des flèches de navigation] // &:hover,&:focus{background-color: darken(@color1,10%);} [&:hover,&:focus{color: (#PARAMETRE10|?{#PARAMETRE10, "#ffffff"});} // Couleur des flèches de navigation au survol] [&:hover,&:focus{background-color: (#PARAMETRE7|?{#PARAMETRE7, "#aaaaaa"});} // Couleur de fond des flèches de navigation au survol] position: absolute; bottom: 5px; top:inherit; left: 5px; height:30px; width:30px; margin: 0; padding: 8px 12px 12px 8px; font-size:30px; font-family:helvetica,arial,sans-serif; font-weight: 100; line-height:1; text-align: center; border: 0; .border-radius(30px); .opacity(0); transition:opacity 0.3s ease-in-out 0.2s; // Reposition the right one &.right { left: auto; right: 5px; padding: 8px 8px 12px 12px; } // Hover/focus state &:hover,&:focus { text-decoration: none; } } ol.carousel-indicators,ul.carousel-stop{ display:block; z-index: 5; margin: 0; list-style: none; li{ // color: lighten(@color2,5%); [color: (#PARAMETRE8|?{#PARAMETRE8, "#bbbbbb"}); // Couleur des points indicateurs] cursor: pointer; display: inline; text-indent: inherit; height: auto; width: auto; background-color: transparent !important; float: none; // &:hover,&:active,&:focus{color: darken(@color1,20%);background: none;} &:hover,&:active,&:focus{ color: @red; // Inutile ? background: none; } } } .container-carousel-indicators { display:block; position:absolute; bottom:18px; width:100%; height:24px; } ol.carousel-indicators{ position: absolute; left: 46%; li{ font-size:1.5em; margin:0 5px 0 5px; padding: 0 0 0 0; display: inline-block; .border-radius(5px); // &.active{color: lighten(@color1,10%);} [&.active{color: (#PARAMETRE1|?{#PARAMETRE1, "#dddddd"});} // Couleur du point de l'indicateur actif] } } .carousel-stop{ position: absolute; bottom:4px; left:38%; margin-left: 0; margin-bottom: 0; font-family: helvetica,arial,sans-serif; li{ font-size:1.5em; } } &:hover{ .carousel-indicators,.carousel-stop{ li{ // color: @color2; color: #bbb; // &.active,&.active:hover{color: @color1;} [&.active,&.active:hover {color: (#PARAMETRE2|?{#PARAMETRE2, "#0088cc"});} // Couleur du point de l'indicateur actif lors du survol du bloc] // &:hover,&:active,&:focus{color: darken(@color1,10%);} [&:hover,&:active,&:focus{color: (#PARAMETRE9|?{#PARAMETRE9, "#005577"});} // Couleur des point de l'indicateur lors du survol du bloc] } } .carousel-control { .opacity(70); transition: opacity 0.3s ease-in-out 0; } } #PARAMETRE3 } // Des styles pour le boutons de retour au haut de page en provenance de SPIPr-Dane // ----------------------------------------------------- // On définira plus tard les couleurs en s'appuyant sur celles du site (définies précédemment) #backtotop { display:none; bottom:20px; right:10px; height:40px; padding-top:10px; width:50px; text-align:center; position:fixed; z-index:1; color:#fafafa; font-size:30px; background-color:#3b597a; cursor:pointer; font-family:helvetica,arial,sans-serif; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; opacity:0.6; filter:alpha(opacity=60); } #backtotop:hover { opacity:1; filter:alpha(opacity=100); background-color:#d13827; } [(#REM) Gestion des layoutgala] [(#REM) Gestion du layout pour une largeur comprise entre 980 et 1200px] [@import "css/layoutgala/(#PARAMETRE1)";] [#layoutgala(#PARAMETRE1)] > .core(#PARAMETRE2,#PARAMETRE3,#PARAMETRE4,@gridColumnWidth,@gridGutterWidth); [(#REM) Gestion du layout pour une largeur supérieure à 1200px] [@import "css/layoutgala/(#PARAMETRE1)";] @media (min-width: 1200px) { [#layoutgala(#PARAMETRE1)] > .core(#PARAMETRE2,#PARAMETRE3,#PARAMETRE4,@gridColumnWidth1200,@gridGutterWidth1200); } [(#REM) Gestion du layout pour une largeur comprise entre 768 et 979px] [@import "css/layoutgala/(#PARAMETRE1)";] @media (min-width: 768px) and (max-width: 979px) { [#layoutgala(#PARAMETRE1)] > .core(#PARAMETRE2,#PARAMETRE3,#PARAMETRE4,@gridColumnWidth768,@gridGutterWidth768); } [(#REM) Gestion du layout pour une largeur inférieure à 768px] [@import "css/layoutgala/(#PARAMETRE1)";] @media (max-width: 767px) { [#layoutgala(#PARAMETRE1)] > .core(#PARAMETRE2,#PARAMETRE3,#PARAMETRE4,@gridColumnWidth768,@gridGutterWidth768); } [(#REM) Pour une largeur inférieure à 450 pixels, on verticalise tout : colonnes secondaireet tertiaire en pleine largeur, l'une en-dessous de l'autre. On agrandit par ailleurs la hauteur du carousel, l'image utilisant toute la hauteur initialement disponible.] @media (max-width: 450px) { #aside {float:none;width:100%;} #extra {float:none;width:100%;} #aside .carousel,#aside .carousel .carousel-inner .item article, #content .carousel,#content .carousel .carousel-inner .item article, #extra .carousel,#extra .carousel .carousel-inner .item article {height:400px;} } [(#REM) Intégrer ici le module de marges : tout d'abord un test pour savoir s'il en faut, ensuite extraire les CSS nécessaires] [(#REM) Règles CSS ou LESS spécifiques aux formulaires] #formulaire_contact, div#formulaire_forum, div#formulaire_inscription, .formulaire_login, .formulaire_spip, .calendar-container { textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { [color:(#PARAMETRE2);] } &, & p.boutons, & fieldset, & legend, & label, select, { &, & p { [background-color:(#PARAMETRE1);] [color:(#PARAMETRE2);] } } } #formulaire_contact, div#formulaire_forum, div#formulaire_inscription, .formulaire_login { [border:1px solid (#PARAMETRE3);] [(#PARAMETRE4)] } [(#REM) Pour que le formulaire de login ne déborde pas de sa colonne dans le cas d'une noisette accès restreint] .formulaire_login form input.text, .formulaire_login form input.password {width:80%; max-width:320px;} [(#REM) Règles CSS ou LESS spécifiques aux blocs particuliers] #SET{blocs_specifiques,#ARRAY{0,'sommaire_derniers_articles',1,'sommaire_dernieres_breves',2,'sommaire_articles_syndiques',3,'sommaire_evenements',4,'sommaire_forums',5,'rubrique_articles',6,'rubrique_breves',7,'rubrique_sites',8,'rubrique_evenements',9,'article_evenements',10,'article_meme_rubrique',11,'breve_evenements',12,'breve_meme_rubrique',13,'site_articles_syndiques',14,'site_autres_sites',15,'site_evenements',16,'auteur_articles',17,'auteur_autres_auteurs',18,'auteur_evenements',19,'autre_evenements',20,'sommaire_nuage'}} #SET{valeur_bloc,#VALEUR} [#(#GET{valeur_bloc}){#PARAMETRE6}] [(#REM) On passe au menu vertical] #sommaire_menu_navigation.well, #rubrique_menu_navigation.well, #article_menu_navigation.well, #auteur_menu_navigation.well, #autre_menu_navigation.well, #breve_menu_navigation.well, #site_menu_navigation.well { [border-color:(#PARAMETRE1);] [background-color:(#PARAMETRE2);] [color:(#PARAMETRE3);] a { [color:(#PARAMETRE4);] &:hover { [color:(#PARAMETRE5);] [background-color:(#PARAMETRE6);] } } li.active a.on { [color:(#PARAMETRE7);] [background-color:(#PARAMETRE8|?{#PARAMETRE8, "@linkColor"});] } #PARAMETRE9 } [(#REM) Règles CSS ou LESS concernant des blocs personnels] #SET{blocs_accessibilite,#ARRAY{0,'sommaire_dyslexie',1,'rubrique_dyslexie',2,'article_dyslexie',3,'breve_dyslexie',4,'site_dyslexie',5,'auteur_dyslexie',6,'autre_dyslexie'}} #SET{valeur_bloc,#VALEUR} [div#(#GET{valeur_bloc}){ [background-color:(#PARAMETRE5);] [&, legend { color:(#PARAMETRE6); }] [border:1px solid (#PARAMETRE7);] #PARAMETRE8 }] [(#REM) Règles CSS ou LESS concernant des blocs personnels] #SET{blocs_personnels,#ARRAY{0,'sommaire_bloc_perso_1',1,'sommaire_bloc_perso_2',2,'sommaire_bloc_perso_3',3,'article_bloc_perso_1',4,'article_bloc_perso_2',5,'article_bloc_perso_3',6,'rubrique_bloc_perso_1',7,'rubrique_bloc_perso_2',8,'rubrique_bloc_perso_3',9,'breve_bloc_perso_1',10,'breve_bloc_perso_2',11,'breve_bloc_perso_3',12,'site_bloc_perso_1',13,'site_bloc_perso_2',14,'site_bloc_perso_3',15,'auteur_bloc_perso_1',16,'auteur_bloc_perso_2',17,'auteur_bloc_perso_3',18,'autre_bloc_perso_1',19,'autre_bloc_perso_2',20,'autre_bloc_perso_3'}} #SET{valeur_bloc,#VALEUR} [div#(#GET{valeur_bloc}){ [background-color:(#PARAMETRE1);] [border:1px solid (#PARAMETRE2);] h2.h2 { [color:(#PARAMETRE3);] [background-color:(#PARAMETRE4);] } [.item {color:(#PARAMETRE5);}] #PARAMETRE6 }] [(#REM) Images de fond] #SET{les_secteurs_de_fond, #ARRAY{fond_ecran,body,fond_page,.container,fond_entete,#header,fond_barre_menu,#nav .navbar-inner,fond_breadcrumb,ul.breadcrumb,fond_pied,#footer,fond_recherche,#sommaire_recherche_educnat}} [(#PARAMETRE1|?{ [(#GET{les_secteurs_de_fond}|table_valeur{#NOM}) { [background-image : url(#URL_SITE_SPIP/(#EVAL{_DIR_IMG})spipr_educ/#PARAMETRE1)]; background-position : [(#PARAMETRE5|?{#PARAMETRE5,#PARAMETRE4})] [(#PARAMETRE3|?{#PARAMETRE3,#PARAMETRE2})]; background-repeat : #PARAMETRE6; background-attachment : #PARAMETRE7; }] , ""})] [(#REM) Styles pour le bloc de prise en charge de la police dyslexie et l'interlignage double] .dyslexie { &, legend, code, pre, .spip_code, input, button, select, textarea, .navbar-search .search-query, #fancybox-title, .panorama-panel h2, .panorama-title, h2.panorama-carte a, h2.panorama-panier a, .documents-lieu h2, .portfolio-container .portfolio-title, h1, .h1, .h1-like, h2, .h2, .h2-like, h3, .h3, .h3-like, h4, .h4, .h4-like, h5, .h5, .h5-like, h6, .h6, .h6-like, .secondary h1, .secondary .h1, .secondary .h1-like, .secondary h2, .secondary .h2, .secondary .h2-like, .secondary h3, .secondary .h3, .secondary .h3-like, .secondary h4, .secondary .h4, .secondary .h4-like, .secondary h5, .secondary .h5, .secondary .h5-like, .ui-widget button, .ui-widget, { font-family : opendyslexic, arial; } } .accessibilite_interlignage { &, h1 small, .h1 small, .h1-like small, h2 small, .h2 small, .h2-like small, h3 small, .h3 small, .h3-like small, h4 small, .h4 small, .h4-like small, h5 small, .h5 small, .h5-like small, h6 small, .h6 small, .h6-like small, blockquote small, .lead, #descriptif_site_spip, .hero-unit, div#content p, { line-height:2; } } .texte, .chapo {text-align:justify;} .accessibilite_justification { .texte, .chapo {text-align:left;} } ul#liste_dyslexie, ul#liste_interlignage, ul#liste_justification { list-style: none; li { input {float:left; width:15%;} label {float:left; width:80%;} } } [(#REM) Style du bloc des logos des sites partenaires] #bloc_logos { [background-color:(#PARAMETRE7);] [border:1px solid (#PARAMETRE8);] [h2.h2 { color:(#PARAMETRE6); }] ul { text-align:center; padding-bottom:0; margin-bottom:0; li {padding:5%;} a img { [min-height:(#PARAMETRE3)px;] [min-width:(#PARAMETRE1)px;] max-width:100%; } } #PARAMETRE9 } [(#REM) Style du bloc des liens des sites partenaires] #liens_partenaires { [(#PARAMETRE8|=={oui}|?{'padding:6px;',''})] [background-color:(#PARAMETRE3);] [border:1px solid (#PARAMETRE4);] [h2.h2 { color:(#PARAMETRE2); }] [color:(#PARAMETRE5);] a { [(#PARAMETRE8|=={oui}|?{'margin:0 10px;',''})] [color:(#PARAMETRE5);] &:hover { [color:(#PARAMETRE6);] [background-color:(#PARAMETRE9);] } } ul { padding-left:10px; padding-right:10px; a { [color:(#PARAMETRE5);] &:hover { [color:(#PARAMETRE6);] } } } #PARAMETRE7 } [(#REM) Style du bloc du compteur graphique du sommaire] #compteurgraphiquetotalspipreduc.list { [background-color:(#PARAMETRE1);] [border:1px solid (#PARAMETRE2);] h2.h2{ [color:(#PARAMETRE3);] [background-color:(#PARAMETRE4);] } #PARAMETRE5 } [(#REM) Style du bloc du compteur graphique des articles] #compteurgraphiquespipreduc.list { [background-color:(#PARAMETRE1);] [border:1px solid (#PARAMETRE2);] h2.h2{ [color:(#PARAMETRE3);] [background-color:(#PARAMETRE4);] } #PARAMETRE5 } [(#REM) Ajouter un margin en-dessous du bloc d'accessibilité] #sommaire_dyslexie,#article_dyslexie,#rubrique_dyslexie,#breve_dyslexie,#auteur_dyslexie,#site_dyslexie,#autre_dyslexie {margin-bottom:30px;} [(#REM) Un peu d'espace sous les liens de traduction] #article_cartouche div.postmeta {margin-bottom:16px;} [(#REM) Contraindre le fil Twitter dans sa colonne sous Safari] .twitter-timeline { width:100vw !important; } [(#REM) Ajout des CSS définies pour le bloc des compétences numériques] [(#PARAMETRE7)] [(#REM) Ajout des CSS du menu des rubriques en 3 colonnes correspondant au thème Educnat] [(#PARAMETRE8)] #bloc_rubriques_3_colonnes { [background: linear-gradient(to right bottom, (#PARAMETRE5), lighten([(#PARAMETRE5)],[(#PARAMETRE6)%]));] [#container_bloc_rubrique_colonne { .bloc_rubrique_colonne{a.savoir_plus {color:(#PARAMETRE7);}}}] } [(#REM) Ajout des CSS des derniers articles présentés en 3 colonnes correspondant au thème Educnat] [(#PARAMETRE9)] #sommaire_derniers_articles_3_colonnes ul.container_articles_3_colonnes > li { [background-color:(#PARAMETRE2);] .trois_colonnes_container_haut { [.article_3_colonnes_logo {border-bottom:5px solid (#PARAMETRE6);}] [.article_3_colonnes_mots_cles_container ul.article_3_colonnes_mots_cles li a:hover{background-color:(#PARAMETRE6);}] } .trois_colonnes_container_bas { [a.article_3_colonnes_savoir_plus {color:(#PARAMETRE5);[background-color:lighten((#PARAMETRE6),[(#PARAMETRE7)%]);]}] [a.article_3_colonnes_savoir_plus:hover {background-color:darken((#PARAMETRE6),[(#PARAMETRE8)%]);}] } } [(#REM) Ajout des CSS du Carousel Slick de la page de sommaire] [(#PARAMETRE8)] [#content #sommaire_carousel_stick h2.h2, #aside #sommaire_carousel_stick h2.h2, #extra #sommaire_carousel_stick h2.h2 {color:(#PARAMETRE6);}] [#content #sommaire_carousel_stick h2.h2::before, #aside #sommaire_carousel_stick h2.h2::before, #extra #sommaire_carousel_stick h2.h2::before {background-color:(#PARAMETRE6);}] [#sommaire_carousel_stick .carousel_slick .sommaire_carousel_stick_container .carousel_slick_titre h3 a {color:(#PARAMETRE7);}] [(#REM) Règles CSS ou LESS spécifiques, toujours en dernier] #PARAMETRE1