SEND all files + questionnaires + json + data_tests
This commit is contained in:
vincent_b
76
public/codes/all/data/cibler_adjascent_avance.css
Normal file
76
public/codes/all/data/cibler_adjascent_avance.css
Normal file
@@ -0,0 +1,76 @@
|
||||
test {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
/* transition: all 0.5s ease 2s; */
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div + div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div + div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img {
|
||||
border: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger > span > img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div + div#last_trigger > span > img {
|
||||
position: absolute;
|
||||
margin-left: -540px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div + div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: -3;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
test {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
/* transition: all 0.5s ease 2s; */
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div + div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div + div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img {
|
||||
border: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger > span > img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div + div#last_trigger > span > img {
|
||||
position: absolute;
|
||||
margin-left: -540px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div + div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: -3;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
test {
|
||||
color: red;
|
||||
ddd
|
||||
}
|
||||
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
/* transition: all 0.5s ease 2s; */
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div + div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div + div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img {
|
||||
border: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger > span > img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div + div#last_trigger > span > img {
|
||||
position: absolute;
|
||||
margin-left: -540px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div + div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: -3;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
test {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
}ss
|
||||
|
||||
.default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
/* transition: all 0.5s ease 2s; */
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div + div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div + div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img {
|
||||
border: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger > span > img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div + div#last_trigger > span > img {
|
||||
position: absolute;
|
||||
margin-left: -540px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div + div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: -3;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
* {
|
||||
color: redaaaa
|
||||
}
|
||||
p {
|
||||
color: green
|
||||
}
|
||||
#alt_saison {
|
||||
display: none;
|
||||
}
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: yellow; }
|
||||
@@ -0,0 +1,109 @@
|
||||
test {
|
||||
color: red;ss
|
||||
}
|
||||
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.go_button ~ .default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
img {
|
||||
border: 4px solid pink;
|
||||
}
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* TOUT .default_invisible Au meme niveau (meme parent)
|
||||
... que .go_button sera affecté (quand .go_button:hover) */
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
img {
|
||||
border: 4px solid blue;
|
||||
}
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div
|
||||
+ div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button ~ .default_invisible > .sub_child {
|
||||
position: relative;
|
||||
right: -300px !important;
|
||||
opacity: 0;
|
||||
transition: all 5s ease 0.1s;
|
||||
}
|
||||
.go_button:hover ~ .default_invisible > .sub_child {
|
||||
visibility: visible;
|
||||
right: 0 !important;
|
||||
opacity: 1;
|
||||
transition: all 1s ease 0.1s,
|
||||
right 2s ease-out 0s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger img {
|
||||
outline: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger > span > img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
img[alt="cat_3"] {
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger > span > img {
|
||||
position: absolute;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div
|
||||
+ div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<div id="cibler_adjascent_avance">
|
||||
<div class="go_button">
|
||||
Goss
|
||||
</div>
|
||||
|
||||
<div id="content_trigger" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance.jpg"
|
||||
alt="cat_1" />
|
||||
</div>
|
||||
|
||||
<div id="second_trigger" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_second.png"
|
||||
alt="cat_2" />
|
||||
</div>
|
||||
|
||||
<div id="last_trigger" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_last.jpg"
|
||||
alt="cat_3" />
|
||||
|
||||
<span class="sub_child default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_last_alt.jpg"
|
||||
alt="cat_4" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="trigger_oublie" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_last_oublie.jpg"
|
||||
alt="cat_5" />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
* {
|
||||
color: blue
|
||||
}
|
||||
p {
|
||||
color: green;
|
||||
}
|
||||
#alt_saison,
|
||||
#popoesie u#soleils {
|
||||
display: none;
|
||||
}
|
||||
/* cibler li + tout les éléments qui sont dedans*/
|
||||
li.poem,
|
||||
li.poem * {
|
||||
color:#000;
|
||||
}
|
||||
/* cibler u et i */
|
||||
li.poem u,
|
||||
li.poem i {
|
||||
color: rgb(15, 126, 82);
|
||||
}
|
||||
/* avec la condition :is on cible <u> ou <i> présent dans li.poem
|
||||
... pratique, on fait une pierre deux coups ! */
|
||||
li.poem *:is(u,i) {
|
||||
color: rgb(81, 39, 247);
|
||||
padding: 3px 8px 3px 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: yellow; }
|
||||
@@ -0,0 +1,70 @@
|
||||
/* neasting, ce qui est à l'intérieur (plus bas)...
|
||||
cible l'élément s'il est présent dans #margin_please (enfant) */
|
||||
#padding_project {
|
||||
div {
|
||||
border: 5px solid red;
|
||||
border-width: 6px 1px 6px 1px;
|
||||
border-color: red orange green blue;
|
||||
|
||||
margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
|
||||
}
|
||||
|
||||
|
||||
#padding_all { /* neasting */
|
||||
padding: 10px; /* affecte #padding_all */
|
||||
border: 2px dashed blue;
|
||||
|
||||
/* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
|
||||
/* div#padding_all div { */
|
||||
/* ici toute div enfant de #padding_all est ciblée / affectée */
|
||||
div {
|
||||
margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
|
||||
}
|
||||
div#sub_wrapper {
|
||||
padding: 10px;
|
||||
border-color: yellow;
|
||||
border-width: 10px;
|
||||
}
|
||||
.inline {
|
||||
border-color: #000;
|
||||
border-width: 1px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
|
||||
div:not(.no_margin) {
|
||||
margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
|
||||
}
|
||||
/* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
|
||||
/* .no_margin {
|
||||
margin:0
|
||||
} */
|
||||
}
|
||||
|
||||
#padding_left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
#padding_top {
|
||||
padding-top: 30px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
#padding_right {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.laterales { /* blocs au début et fin, meme classe */
|
||||
width: 20%;
|
||||
}
|
||||
.boxfix {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #FFF;
|
||||
}
|
||||
.padding_color {
|
||||
background-color: #e3dcff ;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
p {}
|
||||
61
public/codes/all/data/mhw8ac7rzxui2vbb6t_cibler_is_not.css
Normal file
61
public/codes/all/data/mhw8ac7rzxui2vbb6t_cibler_is_not.css
Normal file
@@ -0,0 +1,61 @@
|
||||
li:is(.active, .superactive, .neversleep) {
|
||||
background-color: red;
|
||||
}
|
||||
li.active [data-etat="busy"] {
|
||||
background-color: orange;
|
||||
}
|
||||
li:not(.active) {
|
||||
background-color: cyan;
|
||||
}
|
||||
/* tout élément présent dan li...
|
||||
... qui possède l'ttribut "data-etat" */
|
||||
li [data-etat] {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
li {
|
||||
font-style: italic;
|
||||
/* grâce au neasting... */
|
||||
/* ... les spans contenues dans .state sont ciblées ainsi :
|
||||
... sans neasting on autait écrit :
|
||||
... li.state
|
||||
*/
|
||||
.state {
|
||||
border-left: 15px solid pink;
|
||||
|
||||
/* & indique indique qu'on cible l'élément avec une class "state"
|
||||
.... et (+) un attribut (ou autre propriété tel .exemple)
|
||||
Si li.state a un attribut "data-etat" =égal à= "sleeping" ...
|
||||
... sans neasting on autait écrit :
|
||||
... li.state[data-etat="sleeping"]
|
||||
*/
|
||||
&.exemple, /* , affect si a la class OU l'attribut... */
|
||||
&[data-etat="sleeping"],
|
||||
&:is([data-etat="sleeping"],[data-etat="sleep"])
|
||||
/* ... cumul de conditions pouvant être remplies
|
||||
pour que cette instruction CSS soit remplie */
|
||||
{
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* si une li "possède/contient" == :has(x_condition) */
|
||||
/* alors li en question (parent.e) est affectée/ciblée*/
|
||||
/* ... ici, si li contient un element enfant...
|
||||
...... dont l'attribut est data-etat="sleeping"
|
||||
........ elle a un autre background */
|
||||
li:has([data-etat="sleeping"]) {
|
||||
opacity: 1s;
|
||||
background: #8080805e;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
|
||||
li:last-of-type {
|
||||
border-bottom: 3px solid blue;
|
||||
}
|
||||
li:nth-child(3) {
|
||||
border: 5px solid pink;
|
||||
}
|
||||
/* https://css-tricks.com/examples/nth-child-tester/ */
|
||||
5
public/codes/all/data/mhw8ac7rzxui2vbb6t_tuto.css
Normal file
5
public/codes/all/data/mhw8ac7rzxui2vbb6t_tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: blue;
|
||||
margin: 0;
|
||||
}
|
||||
5
public/codes/all/data/mhw8wbjbx43prp2z6ms_tuto.css
Normal file
5
public/codes/all/data/mhw8wbjbx43prp2z6ms_tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: blue;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/* Ici on peut attitrer des valeurs à des variables */
|
||||
/* on peut utiliser ces variables plusieures fois dans le CSS */
|
||||
/* Ici on va assigner cette variable à tous les éléments */
|
||||
/* normalement on utilise plutôt :root */
|
||||
* {
|
||||
--element_width: 200px !important;
|
||||
}
|
||||
#mousehover_movemargin_element {
|
||||
width: var(--element_width);
|
||||
height: 200px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background: red;
|
||||
color: #FFF;
|
||||
}
|
||||
#mousehover_movemargin:hover #mousehover_movemargin_element {
|
||||
background:yellow;
|
||||
color: #000;
|
||||
|
||||
/*
|
||||
calc permet de calculer
|
||||
(adition +, soustraction -, multiplication *, ....
|
||||
Ici on veut que la marge à gauche soit de :
|
||||
100%
|
||||
-130px
|
||||
-70px ( == 200px )
|
||||
( la largeur "width" de #mousehover_movemargin_element )
|
||||
*/
|
||||
margin-left: calc(100% - 130px - 70px);
|
||||
/* On peut faire plus simple en utiisant la variable */
|
||||
/* Ainsi, si on la modifie, dans * ...
|
||||
... la largeur de #mousehover_movemargin_element
|
||||
... ainsi que la marge-left ici...
|
||||
..... vont être affectées
|
||||
Si je veux changer la lageure+margin-left ici
|
||||
... je n'ai plus qu'à changer --element_width dans * !!!
|
||||
*/
|
||||
margin-left: dcalc(100% - var(--element_width)); /* 100% - 200px */
|
||||
|
||||
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
|
||||
/* all pour affecter toutes les propriétés CSS */
|
||||
/* transition: all 1s; */
|
||||
transition:
|
||||
margin-left 5s ease-in-out 0s,
|
||||
color 2s ease-in-out 0s;
|
||||
cursor: pointer;
|
||||
}
|
||||
5
public/codes/all/data/mhyj112vkkmogauj84_tuto.css
Normal file
5
public/codes/all/data/mhyj112vkkmogauj84_tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: blue;
|
||||
margin: 0;
|
||||
}
|
||||
4
public/codes/all/data/mhyj112vkkmogauj84_tuto.page
Normal file
4
public/codes/all/data/mhyj112vkkmogauj84_tuto.page
Normal file
@@ -0,0 +1,4 @@
|
||||
<!-- Modifier l'HTML -->
|
||||
<p>
|
||||
Modifier le text ici
|
||||
</p>
|
||||
@@ -0,0 +1,7 @@
|
||||
#wrap_p_easy p {
|
||||
text-decoration: underline;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
color: red;
|
||||
line-height: 1.9em;
|
||||
}
|
||||
6
public/codes/all/data/mhyn3t3mqs39lk6jyv9_tuto.css
Normal file
6
public/codes/all/data/mhyn3t3mqs39lk6jyv9_tuto.css
Normal file
@@ -0,0 +1,6 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: blue;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
3
public/codes/all/data/mhyn3t3mqs39lk6jyv9_tuto.page
Normal file
3
public/codes/all/data/mhyn3t3mqs39lk6jyv9_tuto.page
Normal file
@@ -0,0 +1,3 @@
|
||||
<!-- Modifier l'HTML -->
|
||||
<p>
|
||||
Modifier le coucou</p>
|
||||
@@ -0,0 +1,49 @@
|
||||
/* Ici on peut attitrer des valeurs à des variables */
|
||||
/* on peut utiliser ces variables plusieures fois dans le CSS */
|
||||
/* Ici on va assigner cette variable à tous les éléments */
|
||||
/* normalement on utilise plutôt :root */
|
||||
* {
|
||||
--element_width: 300px!important;
|
||||
}
|
||||
#mousehover_movemargin_element {
|
||||
width: var(--element_width);
|
||||
height: 200px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background: red;
|
||||
color: #FFF;
|
||||
}
|
||||
#mousehover_movemargin:hover #mousehover_movemargin_element {
|
||||
background :blue;
|
||||
color: #000;
|
||||
|
||||
/*
|
||||
calc permet de calculer
|
||||
(adition +, soustraction -, multiplication *, ....
|
||||
Ici on veut que la marge à gauche soit de :
|
||||
100%
|
||||
-130px
|
||||
-70px ( == 200px )
|
||||
( la largeur "width" de #mousehover_movemargin_element )
|
||||
*/
|
||||
margin-left: calc(100% - 130px - 70px);
|
||||
/* On peut faire plus simple en utiisant la variable */
|
||||
/* Ainsi, si on la modifie, dans * ...
|
||||
... la largeur de #mousehover_movemargin_element
|
||||
... ainsi que la marge-left ici...
|
||||
..... vont être affectées
|
||||
Si je veux changer la lageure+margin-left ici
|
||||
... je n'ai plus qu'à changer --element_width dans * !!!
|
||||
*/
|
||||
margin-left: calc(100% - var(--element_width)); /* 100% - 200px */
|
||||
|
||||
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
|
||||
/* all pour affecter toutes les propriétés CSS */
|
||||
/* transition: all 1s; */
|
||||
transition:
|
||||
margin-left 3s ease-in-out 0s,
|
||||
color 1s ease-in-out 0s;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
* {
|
||||
color: blue;
|
||||
}
|
||||
p {
|
||||
color: blue;
|
||||
}
|
||||
a ,
|
||||
.poem.last span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#alt_saison,
|
||||
#popoesie u#soleils {
|
||||
display: inline;
|
||||
}
|
||||
#saisons span:not(#alt_saison){
|
||||
display: none;
|
||||
}
|
||||
/* cibler li + tout les éléments qui sont dedans*/
|
||||
li.poem,
|
||||
li.poem * {
|
||||
color:#000;
|
||||
}
|
||||
/* cibler u et i */
|
||||
li.poem u,
|
||||
li.poem i {
|
||||
color: blue;
|
||||
}
|
||||
/* avec la condition :is on cible <u> ou <i> présent dans li.poem
|
||||
... pratique, on fait une pierre deux coups ! */
|
||||
li.poem *:is(u,i) {
|
||||
color: rgb(81, 39, 247);
|
||||
padding: 0px 0px 0px 0px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: green; }
|
||||
@@ -0,0 +1,90 @@
|
||||
/* neasting, ce qui est à l'intérieur (plus bas)...
|
||||
cible l'élément s'il est présent dans #margin_please (enfant) */
|
||||
#padding_project {
|
||||
div {
|
||||
border: 3px solid red;
|
||||
border-width: 6px 1px 6px 1px;
|
||||
border-color: red orange green blue;
|
||||
|
||||
margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
|
||||
}
|
||||
|
||||
#padding_top {
|
||||
padding: 30px;
|
||||
width :400px;
|
||||
tex-align:center;
|
||||
}
|
||||
#padding_left {
|
||||
padding:10px;
|
||||
width :400p;
|
||||
tex-align:center;
|
||||
}
|
||||
#padding_right {
|
||||
padding:10px;
|
||||
width :400px;
|
||||
tex-align:center;
|
||||
}
|
||||
#padding_bottom {
|
||||
padding:20px;
|
||||
width :400px;
|
||||
tex-align:center;
|
||||
}
|
||||
|
||||
#padding_all { /* neasting */
|
||||
padding: 10px; /* affecte #padding_all */
|
||||
border: 2px dashed blue;
|
||||
|
||||
/* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
|
||||
/* div#padding_all div { */
|
||||
/* ici toute div enfant de #padding_all est ciblée / affectée */
|
||||
div {
|
||||
margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
|
||||
}
|
||||
div#sub_wrapper {
|
||||
padding: 10px;
|
||||
border-color: yellow;
|
||||
border-width: 10px;
|
||||
}
|
||||
.inline {
|
||||
border-color: #000;
|
||||
border-width: 1px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
|
||||
div:not(.no_margin) {
|
||||
margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
|
||||
}
|
||||
/* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
|
||||
/* .no_margin {
|
||||
margin:0
|
||||
} */
|
||||
}
|
||||
|
||||
#padding_left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
#padding_top {
|
||||
padding-top: 30px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
#padding_right {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.laterales { /* blocs au début et fin, meme classe */
|
||||
width: 20%;
|
||||
}
|
||||
.boxfix {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #FFF;
|
||||
}
|
||||
.padding_color {
|
||||
background-color: #e3dcff ;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
p {
|
||||
text-decoration: underline;
|
||||
color:blue;
|
||||
font-size:18px;
|
||||
margin:0;
|
||||
}
|
||||
span{
|
||||
background:green;
|
||||
}
|
||||
|
||||
#wrap_p_easy p span span {
|
||||
|
||||
}
|
||||
.last_p.important {
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
span span {
|
||||
COLOR;
|
||||
}
|
||||
p .important {
|
||||
color: red;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
* {
|
||||
color: red
|
||||
}
|
||||
p {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#saisons span:first-of-type,
|
||||
a,
|
||||
.poem.last span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
:is(p,u,li){
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
/* cibler li + tout les éléments qui sont dedans*/
|
||||
li.poem,
|
||||
li.poem * {
|
||||
color:#000;
|
||||
}
|
||||
/* cibler u et i */
|
||||
li.poem u,
|
||||
li.poem i {
|
||||
color: rgb(15, 126, 82);
|
||||
}
|
||||
/* avec la condition :is on cible <u> ou <i> présent dans li.poem
|
||||
... pratique, on fait une pierre deux coups ! */
|
||||
li.poem *:is(u,i) {
|
||||
color: green;
|
||||
padding: 3px 8px 3px 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: yellow; }
|
||||
@@ -0,0 +1,73 @@
|
||||
/* neasting, ce qui est à l'intérieur (plus bas)...
|
||||
cible l'élément s'il est présent dans #margin_please (enfant) */
|
||||
#padding_project {
|
||||
div {
|
||||
border: 3px solid red;
|
||||
border-width: 6px 1px 6px 1px;
|
||||
border-color: red orange green blue;
|
||||
|
||||
margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
|
||||
}
|
||||
|
||||
|
||||
#padding_all { /* neasting */
|
||||
padding: 10px; /* affecte #padding_all */
|
||||
border: 2px dashed blue;
|
||||
|
||||
/* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
|
||||
/* div#padding_all div { */
|
||||
/* ici toute div enfant de #padding_all est ciblée / affectée */
|
||||
div {
|
||||
margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
|
||||
}
|
||||
div#sub_wrapper {
|
||||
padding: 10px;
|
||||
border-color: yellow;
|
||||
border-width: 10px;
|
||||
}
|
||||
.inline {
|
||||
border-color: #000;
|
||||
border-width: 1px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
|
||||
div:not(.no_margin) {
|
||||
margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
|
||||
}
|
||||
/* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
|
||||
/* .no_margin {
|
||||
margin:0
|
||||
} */
|
||||
}
|
||||
|
||||
#padding_left {
|
||||
padding-left: 10px;
|
||||
}
|
||||
#padding_top {
|
||||
padding-top: 30px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
#padding_right {
|
||||
padding-right:10px;
|
||||
}
|
||||
#padding_bottom {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.laterales { /* blocs au début et fin, meme classe */
|
||||
width: 20%;
|
||||
}
|
||||
.boxfix {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #FFF;
|
||||
}
|
||||
.padding_color {
|
||||
background-color: #e3dcff ;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/* Modifier le CSS ici */
|
||||
|
||||
#wrap_p_easy span span {
|
||||
|
||||
color: red;
|
||||
Font-size: 13;
|
||||
Font-style: italic;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.last_p.important {
|
||||
|
||||
color: blue;
|
||||
font-style: oblique;
|
||||
|
||||
}
|
||||
5
public/codes/all/data/mhyommdfj1c3onihsh_tuto.css
Normal file
5
public/codes/all/data/mhyommdfj1c3onihsh_tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: blue;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/* Ici on peut attitrer des valeurs à des variables */
|
||||
/* on peut utiliser ces variables plusieures fois dans le CSS */
|
||||
/* Ici on va assigner cette variable à tous les éléments */
|
||||
/* normalement on utilise plutôt :root */
|
||||
* {
|
||||
--element_width: 200px !important;
|
||||
}
|
||||
#mousehover_movemargin_element {
|
||||
width: var(--element_width);
|
||||
height: 200px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background: red;
|
||||
color: #FFF;
|
||||
}
|
||||
#mousehover_movemargin:hover #mousehover_movemargin_element {
|
||||
background:yellow;
|
||||
color: #000;
|
||||
|
||||
/*
|
||||
calc permet de calculer
|
||||
(adition +, soustraction -, multiplication *, ....
|
||||
Ici on veut que la marge à gauche soit de :
|
||||
100%
|
||||
-130px
|
||||
-70px ( == 200px )
|
||||
( la largeur "width" de #mousehover_movemargin_element )
|
||||
*/
|
||||
margin-left: calc(100% - 130px - 70px);
|
||||
/* On peut faire plus simple en utiisant la variable */
|
||||
/* Ainsi, si on la modifie, dans * ...
|
||||
... la largeur de #mousehover_movemargin_element
|
||||
... ainsi que la marge-left ici...
|
||||
..... vont être affectées
|
||||
Si je veux changer la lageure+margin-left ici
|
||||
... je n'ai plus qu'à changer --element_width dans * !!!
|
||||
*/
|
||||
margin-left: calc(100% - var(--element_width)); /* 100% - 200px */
|
||||
|
||||
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
|
||||
/* all pour affecter toutes les propriétés CSS */
|
||||
/* transition: all 1s; */
|
||||
transition:
|
||||
margin-left 5s ease-in-out 0s,
|
||||
color 2s ease-in-out 0s;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
* {
|
||||
color: red
|
||||
}
|
||||
p {ddd
|
||||
color: green;
|
||||
}
|
||||
#alt_saison,
|
||||
#popoesie u#soleils {
|
||||
display: none;
|
||||
}
|
||||
/* cibler li + tout les éléments qui sont dedans*/
|
||||
li.poem,
|
||||
li.poem * {
|
||||
color:#000;
|
||||
}
|
||||
/* cibler u et i */
|
||||
li.poem u,
|
||||
li.poem i {
|
||||
color: rgb(15, 126, 82);
|
||||
}
|
||||
/* avec la condition :is on cible <u> ou <i> présent dans li.poem
|
||||
... pratique, on fait une pierre deux coups ! */
|
||||
li.poem *:is(u,i) {
|
||||
color: rgb(81, 39, 247);
|
||||
padding: 3px 8px 3px 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: yellow; }
|
||||
@@ -0,0 +1,70 @@
|
||||
/* neastzzzzing, ce qui est à l'intérieur (plus bas)...
|
||||
cible l'élément s'il est présent dans #margin_please (eddnfant) */
|
||||
#padding_project {
|
||||
div {
|
||||
border: 3px solid red;
|
||||
border-width: 6px 1px 6px 1px;
|
||||
border-color: red orange green blue;
|
||||
|
||||
margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
|
||||
}
|
||||
|
||||
|
||||
#padding_all { /* neasting */dd
|
||||
padding: 10px; /* affecte #padding_all */
|
||||
border: 2px dashed blue;
|
||||
|
||||
/* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
|
||||
/* div#padding_all div { */
|
||||
/* ici toute div enfant de #padding_all est ciblée / affectée */
|
||||
div {
|
||||
margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
|
||||
}
|
||||
div#sub_wrapper {
|
||||
padding: 10px;
|
||||
border-color: yellow;
|
||||
border-width: 10px;
|
||||
}
|
||||
.inline {
|
||||
border-color: #000;
|
||||
border-width: 1px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
|
||||
div:not(.no_margin) {
|
||||
margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
|
||||
}
|
||||
/* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
|
||||
/* .no_margin {
|
||||
margin:0
|
||||
} */
|
||||
}
|
||||
|
||||
#padding_left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
#padding_top {
|
||||
padding-top: 30px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
#padding_right {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.laterales { /* blocs au début et fin, meme classe */
|
||||
width: 20%;
|
||||
}
|
||||
.boxfix {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #FFF;
|
||||
}
|
||||
.padding_color {
|
||||
background-color: #e3dcff ;
|
||||
}
|
||||
}
|
||||
61
public/codes/all/data/mi0gp5x7bxqq0cy0l5a_cibler_is_not.css
Normal file
61
public/codes/all/data/mi0gp5x7bxqq0cy0l5a_cibler_is_not.css
Normal file
@@ -0,0 +1,61 @@
|
||||
li:is(.active, .superactive, .neversleep) {
|
||||
background-color: red;
|
||||
}zzz
|
||||
li.active [data-etat="busy"] {
|
||||
background-color: orange;
|
||||
}
|
||||
li:not(.active) {
|
||||
background-color: cyan;
|
||||
}
|
||||
/* tout élément présent dan li...
|
||||
... qui possède l'ttribut "data-etat" */
|
||||
li [data-etat] {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
li {
|
||||
font-style: italic;
|
||||
/* grâce au neasting... */
|
||||
/* ... les spans contenues dans .state sont ciblées ainsi :
|
||||
... sans neasting on autait écrit :
|
||||
... li.state
|
||||
*/
|
||||
.state {
|
||||
border-left: 15px solid pink;
|
||||
|
||||
/* & indique indique qu'on cible l'élément avec une class "state"
|
||||
.... et (+) un attribut (ou autre propriété tel .exemple)
|
||||
Si li.state a un attribut "data-etat" =égal à= "sleeping" ...
|
||||
... sans neasting on autait écrit :
|
||||
... li.state[data-etat="sleeping"]
|
||||
*/
|
||||
&.exemple, /* , affect si a la class OU l'attribut... */
|
||||
&[data-etat="sleeping"],
|
||||
&:is([data-etat="sleeping"],[data-etat="sleep"])
|
||||
/* ... cumul de conditions pouvant être remplies
|
||||
pour que cette instruction CSS soit remplie */
|
||||
{
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* si une li "possède/contient" == :has(x_condition) */
|
||||
/* alors li en question (parent.e) est affectée/ciblée*/
|
||||
/* ... ici, si li contient un element enfant...
|
||||
...... dont l'attribut est data-etat="sleeping"
|
||||
........ elle a un autre background */
|
||||
li:has([data-etat="sleeping"]) {
|
||||
opacity: 1;
|
||||
background: #8080805e;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
|
||||
li:last-of-type {
|
||||
border-bottom: 3px solid blue;
|
||||
}
|
||||
li:nth-child(3) {
|
||||
border: 5px solid pink;
|
||||
}
|
||||
/* https://css-tricks.com/examples/nth-child-tester/ */
|
||||
@@ -0,0 +1 @@
|
||||
/* Modifier le CSS ici */
|
||||
5
public/codes/all/data/mi0gxzihcahf66f40mw_tuto.css
Normal file
5
public/codes/all/data/mi0gxzihcahf66f40mw_tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {ee
|
||||
color: red;
|
||||
margin: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user