@charset "utf-8"; /**************************************************** styles COMMUNS ****************************************************/ a:focus { outline:0; } /* suppression des pointillés autour d'un lien cliqué (FF, IE) */ .visible-role_30, .visible-role_40, .visible-role_99 { display:none; } /* admin only (rôles 30, 40 et 99) */ .col-sm-8.template .bloc_unit, .col-sm-9.template .bloc_unit { margin-bottom:15px } /* espacement des articles (cms) */ /*.cms_texte { text-align:justify; } /*≠mobile*/ [class*="-left"].cms_img { margin:0 2.8rem 2.8rem 0 } /*équivalent de .float-left.cms_img, .float-sm-left.cms_img, float-md-left.cms_img, etc.*/ [class*="-right"].cms_img { margin:0 0 2.8rem 2.8rem } /*idem*/ /* bloc full-width, même à l'intérieur d'un .container ♥ : */ .bloc_100vw { width:100vw; position:relative; margin-left:-50vw; left:50%; } /*rappel: mettre overflow-x:hidden sur sinon scrollbar horizontale rappel: class="bloc_100vw" est ajouté via le cms (code source de l'article) //rappel: classe bootstrap .vw-100 { width: 100vw !important; } */ .carousel-indicators, .carousel-indicators li { display:none; } .vignettes p { } #multitaskModal .modal-title { font-size:1.3em; font-weight:bold } #multitaskModal.vignette-modal-style .modal-title { margin-left:10px } /* .modal-title pour l'affichage des vignettes en grand format */ .text-muted2 { color:#a2a2a2; } /* plus clair que .text-muted */ /* customisation possible en fonction du type (ou id) de page : body.is_index { } // body.page_id_n { } .standard { } .galerie_articles { } .detail_produit { } Ou en fonction des rôles : .role_0, .role_10, .role_30, etc. */ /** VENTE en LIGNE **/ .template:not(.galerie_articles) form.ajout_panier .form-group { padding-right:10px } .template:not(.galerie_articles) form.ajout_panier .qte input { width:55px } .panier { position:fixed; top:10%; right:-300px; z-index:10000; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease } .panier:hover { right:0 } .panier .liste { background-color:#f2f2f2; border:solid 1px #ccc; display:inline-block; width:300px; height:520px; overflow:hidden; overflow-y: auto; } .panier .onglet { display:inline-block; position:relative; z-index:10; vertical-align:top; border-top-right-radius:0; border-bottom-right-radius:0; /*margin-right:-5px;*/ } .panier .onglet span { font-size:1.2em } .panier ul { padding-left:15px } .panier ul li { margin:6px 0; font-size:.85em } .panier .total_hors_livraison { margin-top:15px; } .panier .total_frais_livraison { } .panier .total_general { margin-top:6px; padding-top:6px; margin-bottom:10px; border-top:1px solid #ccc } .panier .footer_options { background-color:#e0e0e0; overflow:auto; padding-top:10px; padding-bottom:10px } .panier .vide_panier { font-size:.8em } .pourcentage_remise { background-color:#c90; color:#fff; display:inline-block; padding:2px 10px; font-size:.9em; font-style:italic } /* rappel: sur la page checkout, .panier devient .panier_checkout */ .panier_checkout { margin-bottom:20px } .panier_checkout ul { padding-left:15px } .panier_checkout .total_hors_livraison { margin-top:15px; } .panier_checkout .total_frais_livraison { } .panier_checkout .total_general { margin-top:6px; padding-top:6px; font-size:1.2em } form.checkout .coordonnees { margin-bottom:15px } /** SIDEBAR MENU **/ .sidebar ul.list-unstyled.sortable_items { margin-bottom:1.4em; /* marge sous le menu */ } /** CONTACT **/ .contact-form { } img.captcha { max-height:45px; } /** RECHERCHE **/ .form-recherche-top { } /* formulaire de recherche simple */ form.form-recherche-page { } /* formulaire de recherche de la page de résultats */ div.resultats_recherche { } .col-form-label.required::after { content:"*"; margin-left:6px; font-size:16px; color:#a94442; } /*astérisque rouge (même couleur que .text-danger)*/ /** multi level dropdown : **/ .dropdown-submenu { position:relative; } .dropdown-submenu>.dropdown-menu { top:0; left:100%; margin-top:-6px; margin-left:-1px; border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display:block; } .dropdown-submenu>a::after { display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#ccc; margin-top:5px; margin-right:-10px; } .dropdown-submenu:hover>a::after { border-left-color:#999; } .dropdown-submenu.float-left { float:none; } .dropdown-submenu.float-left>.dropdown-menu { left:-100%; margin-left:10px; border-radius:6px 0 6px 6px; } /* fin du multi level dropdown */ /* ICÔNES DE PARTAGE (Addthis no more!) : */ .icones-partage * { margin:0; padding:0; outline:0; box-sizing:border-box; } .icones-partage a:not(:first-child) { margin-left:5px; } .icones-partage ul { list-style:none; } .icones-partage .fas, .icones-partage .fab { vertical-align:middle; font-size:16px; width:22px; height:22px; line-height:22px; text-align:center; position:relative; z-index:4; color:#fff } .icones-partage a:hover .fas, .icones-partage a:hover .fab { transition:all .5s ease; transform:rotate(720deg); } .icones-partage .fa-facebook-f { background-color:#3B5998; } .icones-partage .fa-twitter { background-color:#1DA1F2; } .icones-partage .fa-google { background-color:#dd4b39; } .icones-partage .fa-youtube { background-color:#e52d27; } .icones-partage .fa-instagram { background:#f09433; background:-moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background:-webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background:linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888', GradientType=1 ); } .icones-partage .fa-pinterest-p { background-color:#cc2127; } .icones-partage .fa-envelope { /* bouton de contact éventuel, cf template */ } /* bouton/texte/icône qui clignote : */ .clignotement { animation:clignotement .6s infinite linear; } /* ajouter -webkit-animation si besoin (android) */ @keyframes clignotement { 50% { opacity: .4; } } .toggle-troncage { } /* bouton pour développer/réduire un article tronqué */ .retour-en-haut { position:fixed; bottom:2em; right:0; padding:1em; display:none; color:#000; } .retour-en-haut:hover { color:#000; /* background:rgba(0,0,0,.5); color:#fff */ } .animaScroll { } /* classe perso pour ma fonction anim_on_scroll() */ /* styles pour role=10 => clients, membres (voire à créer un fichier "custom-client.css") : */ ul.detail-commande { max-width:170px } /* détail d'une commande (vue Admin OU compte client) //AVANT: max-width:130px */ /* FIN des styles pour role=10 */ /** AJUSTEMENTS TB3 / bootstrap 4 **/ .btn-xs, .btn-group-xs > .btn { padding: 0.12rem 0.2rem; font-size: 0.8rem; line-height: 1.1; border-radius: 0.2rem; } /*CUSTOM (inspiré de .btn-sm) car .btn-xs OBSOLÈTE */ .btn-xs + .dropdown-toggle-split, .btn-group-xs > .btn + .dropdown-toggle-split { padding-right: 0.35rem; padding-left: 0.35rem; } /* idem */ /*RAPPEL => .btn-sm (b4) : .btn-xs, .btn-group-xs > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } .btn-xs + .dropdown-toggle-split, .btn-group-xs > .btn + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; } */ /*j'utilise "li.dropdown-item > a" (pour jq UI sortable) alors que bootstrap 4 attend "a.dropdown-item". Ajustements ad hoc pour les liens : */ .dropdown-item a:hover, .dropdown-item a:focus { text-decoration:none; } .dropdown-item.active a { color:#fff; text-decoration:none; background-color:#007bff; } /*idem*/ .dropdown-item.disabled a, .dropdown-item:disabled a { color:#6c757d; background-color:transparent; } /*idem (à tester)*/ .dropdown-item:active, .dropdown-item:active a { color:inherit; background-color:inherit; } /*reset*/ .list-inline li, .list-inline a { display:inline-block; padding:0; } /* pseudo .list-inline-item (bootstrap 4 par défaut => .list-inline-item sur chaque li) */ .list-inline li:not(:last-child) { margin-right:0.5rem; } /* pseudo .list-inline-item (bootstrap 4 par défaut => .list-inline-item sur chaque li) */ /*.list-unstyled a { padding:0; } /*reset de .nav-link (ajouté automatiquement via php cree_navbars) => SEMBLE INUTILE (À VIRER!!!!) */ /** fin des AJUSTEMENTS TB3 / bootstrap 4 **/ /*SITEMAP => dropdown-menus toujours visibles : */ .sitemap .dropdown-menu { display:block; position:relative; float:none; border:none; margin:0 0 0 15px; padding-top:0 } .sitemap .dropdown-item, .sitemap .dropdown-item a { color:#505656; background-color:#fff; } .sitemap .nav-link { display:inline; } .sitemap .dropdown-submenu>.dropdown-menu { display:block; left:0 } /* multi level dropdown */ /*fin du sitemap*/ /** DÉLAIS pour ANIMATE.css **/ .anim-delai-1 { animation-delay:.1s!important } .anim-delai-2 { animation-delay:.2s!important } .anim-delai-3 { animation-delay:.3s!important } .anim-delai-4 { animation-delay:.4s!important } .anim-delai-5 { animation-delay:.5s!important } .anim-delai-6 { animation-delay:.6s!important } .anim-delai-7 { animation-delay:.7s!important } .anim-delai-8 { animation-delay:.8s!important } .anim-delai-9 { animation-delay:.9s!important } .anim-delai-10 { animation-delay:1s!important } .anim-delai-11 { animation-delay:1.1s!important } .anim-delai-12 { animation-delay:1.2s!important } .anim-delai-13 { animation-delay:1.3s!important } .anim-delai-14 { animation-delay:1.4s!important } .anim-delai-15 { animation-delay:1.5s!important } .anim-delai-16 { animation-delay:1.6s!important } .anim-delai-17 { animation-delay:1.7s!important } .anim-delai-18 { animation-delay:1.8s!important } /*** *** *** *** *** MEDIA QUERIES ► xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px) *** *** *** ***/ /* Small devices (tablets, 768px and up) // col-sm */ @media (min-width:768px) { } /* Medium devices (desktops, 992px and up) // col-md */ @media (min-width:992px) { nav.navbar ul.nav .dropdown:hover > .dropdown-menu { margin-top:0; /*margin-top:0 à creuser*/ display:block; } /*facultatif : dropdown automatique au survol*/ nav.navbar ul.nav .dropdown > .dropdown-toggle:active { pointer-events:none; } /*pointer du dropdown automatique*/ } /* Large devices (large desktops, 1200px and up) // col-lg */ @media (min-width:1200px) { } /* Portrait phones */ @media (max-width:420px) { /*body { padding-top:50px!important; } /*hauteur de la navbar sur mobile //À CREUSER (problématique sur certains templates) */ } /* Landscape phones and down */ @media (max-width:480px) and (orientation:landscape) { } /* Landscape phone to portrait tablet // col-xs */ @media (max-width:767px) { [class*="-left"].cms_img, [class*="-right"].cms_img { float:none!important; margin:0 0 15px!important } /*mobile only: pas de float sur .cms_img*/ } /* */ @media all and (transform-3d), (-webkit-transform-3d) { } /* Small Devices (ex:tablets) */ @media (min-width:768px) and (max-width:991px) { } /* Medium Sized Devices (ex:desktops) : écran inférieur à 1200px et supérieur à 991px */ @media (min-width:992px) and (max-width:1199px) { } /* impression */ @media print { }