Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
less [Le 05/05/2018, 23:42] youssouf [effet de bord] |
less [Le 07/05/2018, 08:28] (Version actuelle) 82.230.119.244 [Mobile] |
||
|---|---|---|---|
| Ligne 8: | Ligne 8: | ||
| Une foie la page enregistré les modifications serons effectives. | Une foie la page enregistré les modifications serons effectives. | ||
| </note> | </note> | ||
| - | */ | + | |
| - | /* | + | |
| ===== hauteur regulière pour les bouton de la nav barre ===== | ===== hauteur regulière pour les bouton de la nav barre ===== | ||
| - | <code > | ||
| */ | */ | ||
| + | //le code://<code > | ||
| .navbar-default .navbar-nav > li > a{ | .navbar-default .navbar-nav > li > a{ | ||
| height: 3.7em; | height: 3.7em; | ||
| } | } | ||
| - | /* | + | // //</code> |
| - | </code> | + | /*//fin// |
| ===== effet de bord ===== | ===== effet de bord ===== | ||
| - | <code> | ||
| */ | */ | ||
| + | //le code//<code> | ||
| .navbar-default { | .navbar-default { | ||
| box-shadow: 0 0 0.3em; | box-shadow: 0 0 0.3em; | ||
| } | } | ||
| #dw__navbar ul.dropdown-menu{ | #dw__navbar ul.dropdown-menu{ | ||
| - | // border-radius: 0em 0em 0.3em 0.3em; | + | // border-radius: 0em 0em 1em 1em; |
| z-index:99; | z-index:99; | ||
| } | } | ||
| #dw__navbar { | #dw__navbar { | ||
| border-width: 0px; | border-width: 0px; | ||
| - | // border-radius: 0em 0em 0.3em 0.3em; | + | // border-radius: 0em 0em 1em 1em; |
| z-index: 100; | z-index: 100; | ||
| } | } | ||
| Ligne 36: | Ligne 35: | ||
| // border-radius: 0.3em 0.3em 0em 0em; | // border-radius: 0.3em 0.3em 0em 0em; | ||
| } | } | ||
| - | /*</code> | + | // //</code> |
| + | /*//fin// | ||
| + | ===== Paragraphe ===== | ||
| + | */ | ||
| + | //le code://<code> | ||
| + | p { | ||
| + | text-indent: 1em; | ||
| + | text-align: justify; | ||
| + | text-justify: distribute; | ||
| + | } | ||
| + | // //</code> | ||
| + | /*//fin// | ||
| ===== couleur ===== | ===== couleur ===== | ||
| ==== des liens ==== | ==== des liens ==== | ||
| - | <code>*/ | + | */ |
| + | //le code://<code> | ||
| a { | a { | ||
| color: #e95420; | color: #e95420; | ||
| Ligne 46: | Ligne 57: | ||
| } | } | ||
| } | } | ||
| - | /*</code> | + | // //</code> |
| + | /*//fin// | ||
| ==== des hyperliens ==== | ==== des hyperliens ==== | ||
| - | <code>*/ | + | */ |
| + | //le code://<code> | ||
| a.urlextern { | a.urlextern { | ||
| color: #00aaff; | color: #00aaff; | ||
| Ligne 55: | Ligne 68: | ||
| } | } | ||
| } | } | ||
| - | /*</code> | + | // //</code> |
| - | ==== Dans les code ==== | + | /*//fin// |
| - | <code>*/ | + | ==== Dans les codes ==== |
| + | */ | ||
| + | //le code://<code> | ||
| .code .kw1, .code .kw8 { | .code .kw1, .code .kw8 { | ||
| color: blue; | color: blue; | ||
| font-weight: bolder; | font-weight: bolder; | ||
| } | } | ||
| - | /*</code> | + | // //</code> |
| - | ===== Les échangeurs ===== | + | /*//fin// |
| - | j'appelle échangeurs une directive qui permet l'affichage ou non du élément. | + | |
| - | ==== Table des matière (TOC) et Panneau d'outils ==== | + | |
| - | <code> */ | + | |
| - | #dw__toc_menu { | + | |
| - | display:none; | + | |
| - | } | + | |
| - | @media screen and (max-width: 479px) { | + | |
| - | #main {margin: 0px;} | + | |
| - | .panel{ | + | |
| - | boder: unset; | + | |
| - | } | + | |
| - | #dw__pagetools { display : none; } | + | |
| - | .panel-body { padding: unset; } | + | |
| - | .panel { border:unset; } | + | |
| - | #dw__toc_menu { | + | |
| - | display:table; | + | |
| - | } | + | |
| - | .dw-toc { | + | |
| - | display:none; | + | |
| - | } | + | |
| - | } | + | |
| - | /*</code> | + | |
| ===== Autres objets raportés ===== | ===== Autres objets raportés ===== | ||
| ==== Fenêtre de configuration ==== | ==== Fenêtre de configuration ==== | ||
| - | <code>*/ | + | */ |
| + | //le code://<code> | ||
| .modal{ | .modal{ | ||
| display: none; | display: none; | ||
| Ligne 129: | Ligne 123: | ||
| width: 4em; | width: 4em; | ||
| } | } | ||
| + | // //</code> | ||
| + | /*//fin// | ||
| + | ===== Responsive ===== | ||
| + | ==== Général ==== | ||
| + | === On n'affiche pas la Table des matières dans la barre de navigation === | ||
| + | */ | ||
| + | //le code://<code> | ||
| + | #dw__toc_menu { | ||
| + | display:none; | ||
| + | } | ||
| + | // //</code> | ||
| + | /*//fin// | ||
| + | ==== Mobile ==== | ||
| + | */ | ||
| + | //le code://<code> | ||
| + | @media screen and (max-width: 479px) { | ||
| + | // //</code> | ||
| + | /*//fin// | ||
| + | === On réduit les marges et espaces === | ||
| + | */ | ||
| + | //le code://<code> | ||
| - | /*</code>*/ | + | |
| + | #dokuwiki__top { | ||
| + | padding-left: 0.3em; | ||
| + | padding-right: 0.3em; | ||
| + | } | ||
| + | .main.row { | ||
| + | width:100%; | ||
| + | margin:0; | ||
| + | } | ||
| + | #dokuwiki__content { padding:0;} | ||
| + | .panel{ boder: unset; } | ||
| + | .panel-body { padding: unset; } | ||
| + | .panel { border:unset; } | ||
| + | |||
| + | // //</code> | ||
| + | /*//fin// === On n'affiche pas sur la page === | ||
| + | == la boite d'outils == | ||
| + | */ //le code://<code> | ||
| + | #dw__pagetools { display : none; } | ||
| + | // //</code> | ||
| + | /*//fin// == la table des matière == | ||
| + | */ //le code://<code> | ||
| + | .dw-toc { display:none;} | ||
| + | // //</code> | ||
| + | /*//fin// === la barre de navigation === | ||
| + | == passage en flex == | ||
| + | */ //le code://<code> | ||
| + | .navbar-collapse.collapse.in { | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | overflow-y: auto; | ||
| + | overflow-x: hidden; | ||
| + | } | ||
| + | .navbar-collapse.collapse.in>ul.navbar-nav { | ||
| + | display: flex; | ||
| + | justify-content: space-between; | ||
| + | } | ||
| + | #dw__navbar_items { | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | align-items: center; | ||
| + | } | ||
| + | // //</code> | ||
| + | /*//fin// == Suppression des label d'hyperliens == | ||
| + | */ //le code://<code> | ||
| + | .navbar-collapse.collapse.in>ul.navbar-nav a>span { | ||
| + | display:none; | ||
| + | } | ||
| + | // //</code> | ||
| + | /*//fin// == Table des matières == | ||
| + | * En haut | ||
| + | */ //le code://<code> | ||
| + | #dw__toc_menu { | ||
| + | display:unset; | ||
| + | order: -1; | ||
| + | } | ||
| + | // //</code> | ||
| + | /*//fin// == en vrac == | ||
| + | */ //le code://<code> | ||
| + | //réduction de marge | ||
| + | .navbar-collapse { padding: 0; } | ||
| + | .navbar-collapse ul.navbar-nav { | ||
| + | margin: 0; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | //arrangement des titre de menu (toc,outils,thème) | ||
| + | .navbar-collapse a.dropdown-toggle { | ||
| + | display: flex; | ||
| + | align-items: center; | ||
| + | justify-content: space-between; | ||
| + | padding-left: 4em; | ||
| + | padding-right: 4em; | ||
| + | background-color: transparent; | ||
| + | } | ||
| + | |||
| + | //background pour le fond des menus pour les repéré | ||
| + | .navbar-collapse ul.dropdown-menu { background: linear-gradient(to right,#00000020,#00000020);} | ||
| + | |||
| + | //suppression du titre de la toc dans le panneau qui fait doublon | ||
| + | #dw__toc_menu .dropdown-header { display: none; } | ||
| + | |||
| + | //mise en forme de la barre de recherche | ||
| + | #dw__search { width: 100%;} | ||
| + | #dw__search>div.no { | ||
| + | display: flex; | ||
| + | align-items:center; | ||
| + | justify-content:sapce-around; | ||
| + | } | ||
| + | |||
| + | //centrage du bouton de login | ||
| + | #dw__navbar_items .dw__actions { | ||
| + | margin: 0; | ||
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | } | ||
| + | |||
| + | //on cache l'overflow au cas ou il y est certain titre trops long | ||
| + | //ça coupe l'effet désagréable de scrooling vertical | ||
| + | #dw__toc_menu ul.dropdown-menu { | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | //couleur de fond avec effet plaque transparante | ||
| + | //on supprime le fond de la nav barre en général | ||
| + | #dw__navbar {background-color: unset;} | ||
| + | //on remet le fond sur l'entête de la navbar | ||
| + | .navbar-header { background-color: #e95420;} | ||
| + | //on rajoute la transparance dans le fond de la partie qui s'ouvre | ||
| + | .navbar-collapse { background-color: #e95420bb;} | ||
| + | |||
| + | // //</code> | ||
| + | /*//fin// === on sort du mode mobile === | ||
| + | */ //le code://<code> | ||
| + | } | ||
| + | // //</code> | ||