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, 22:33] 82.230.119.244 [effet de bord] |
less [Le 07/05/2018, 08:28] 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; | ||
} | } | ||
#dw__footer { | #dw__footer { | ||
- | 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> | ||