✎ less Atelier

Modifiez cette page et cliquez sur « Enregistrer ». Voyez le guide de mise en page pour une aide à propos du formatage. Veuillez ne modifier cette page que si vous pouvez l'améliorer. Si vous souhaitez faire des tests, faites vos premiers pas dans le bac à sable.

/*! ~~NOCACHE~~
  * Atelier pour le thème de ubuntu-fr-doc
  * Home     http://www.wwwinterface.toile-libre.org/
  * Author   youssoufb <youssouf.bologna@lilo.org>
<note> 
Attention ceci n'est pas un exercice! le code de **cette page** est utilisé pour le formatage css du site. Voir [[:le_css_en_live|cette page explicative]].

Une foie la page enregistré les modifications serons effectives.
</note>

===== hauteur regulière pour les bouton de la nav barre =====
*/
//le code://<code >
.navbar-default .navbar-nav > li > a{
    height: 3.7em;
}
// //</code>
/*//fin//
===== effet de bord =====
*/
//le code//<code>
.navbar-default {
  box-shadow: 0 0 0.3em;
}
#dw__navbar ul.dropdown-menu{
//    border-radius: 0em 0em 1em 1em;
    z-index:99;
}
#dw__navbar {
    border-width: 0px;
//    border-radius: 0em 0em 1em 1em;
    z-index: 100;
}
#dw__footer {
//    border-radius: 0.3em 0.3em 0em 0em;
}
// //</code>
/*//fin//
===== Paragraphe =====
*/
//le code://<code>
p {
	text-indent: 1em;
	text-align: justify;
	text-justify: distribute;
}
// //</code>
/*//fin//
===== couleur =====
==== des liens ====
*/
//le code://<code>
a {
	color: #e95420;
	&:hover, &:focus {
		color: #c73200;
	}
}
// //</code>
/*//fin//
==== des hyperliens ====
*/
//le code://<code>
a.urlextern {
	color: #00aaff;
	&:hover, &:focus {
		color: #00ccff;
	}
}
// //</code>
/*//fin//
==== Dans les codes ====
*/
//le code://<code>
.code .kw1, .code .kw8 {
	color: blue;
	font-weight: bolder;
}
// //</code>
/*//fin//
===== Autres objets raportés =====
==== Fenêtre de configuration ====
*/
//le code://<code>
.modal{
    display: none;
    background-color: #0000001f;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    top: 0;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
}
.modal:target {
	display: flex;
}
.modal>article {
	padding: 1em;
	border-radius: 0.3em;
	background-color: darkslategrey;
	opacity: 1;
	color: white;
	line-height: 1.6em ;
}
.modal article {
	border: aliceblue 2px;
	padding: 1em;
	border-top: solid 1px;
}
.modal form > p {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.modal input[type="color"] {
	padding: 0.3em;
	margin: 0;
	height: 1.6em;
	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>

#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>

Merci de recopier le code ci-contre pour prouver que vous êtes humain : O F W N E Merci de laisser ce champ vide :

Résumé

Note : En modifiant cette page, vous acceptez que le contenu soit placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International