https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
https://stackoverflow.com/questions/13285440/how-do-i-target-the-first-link-inside-a-div-with-css
*/
/**/
.vdims > div {
float:left;
margin:0 15px 0 0;
}
.vleftch > div, .vrightch > div { /* ch comme chevauche et pas ch commc cheval */
height: 33px; /* permet que les vignettes se chevauchent dans la colonne */
}
.vright > div, .vrightch > div {
margin:0 0 0 15px;
}
.vleft,.vleftch {
width:20%;
float:left;
}
.vright, .vrightch {
width:20%;
float:right;
text-align:center;
}
.ventete {
position:absolute; /* le dernier position:relative avant doit etre l'entete */
top:3%;
right:5%;
font-size:18px;
}
.ventete > div:nth-child(1) {
left:0;
}
.ventete > div:nth-child(2) {
left:20%;
}
.ventete > div:nth-child(3) {
left:50%;
}
.ventete > div:nth-child(4) {
left:70%;
}
/*
super intéressant: les variables dans la css: https://stackoverflow.com/questions/8833352/css3-calc-with-variables
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
nth-child(an+b)
.vleftch > div > div:nth-child(an+b) {
https://developer.mozilla.org/en-US/docs/Web/CSS/--*
*/
.vleftch > div {
position:relative;
}
.vleftch > div:nth-child(1n) {
left:calc(var(--left)+20)%;
--left: 0;
}
/*
.vleftch > div:nth-child(1) {
left:0;
--left: 0;
}
.vleftch > div:nth-child(2) {
left:17%;
--left: 17%;
}
.vleftch > div:nth-child(3) {
left:34%;
--left: 34%;
}
.vleftch > div:nth-child(4) {
left:51%;
--left: 51%;
}
*/
/*
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
https://stackoverflow.com/questions/50661638/css-animate-custom-properties-variables
https://stackoverflow.com/questions/21275565/can-i-use-the-auto-value-with-the-calc-property
*/
:root {
--left: 20%;
}
@keyframes vleftch {
from {font-size: 0;opacity:0;}
to {font-size: 16px;opacity:1;}
/*
from {font-size: 32px;opacity:0;}
to {font-size: 16px;opacity:1;}
*/
/*
from {font-size: 1000px;opacity:0;}
to {font-size: 16px;opacity:1;}
*/
/*
from {left:calc(var(--left)-100%;);}
to {left:var(--left);}
*/
}
/*
https://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
https://stackoverflow.com/questions/4623328/select-first-occurring-element-after-another-element
https://stackoverflow.com/questions/43569452/change-z-index-with-counter-increment
https://stackoverflow.com/questions/18493427/mouseover-and-mouseout-in-css
https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered
*/
.vleftch {
font-size:16px;
animation-name: vleftch;
animation-duration: 1s;
}
.vleftch:hover {
/*
font-size: 32px;
*/
}
/*
.vleftch > div:hover ~ div {
display:none;
}
*/
.vleftch:hover > div:not(:hover) {
/* display:none; */
/*
opacity:0;
*/
}
.vleftch > div > p:first-child:hover + div, .vleftch > div > p:first-child + div:hover,
.vrightch > div > p:first-child:hover + div, .vrightch > div > p:first-child + div:hover {
position:relative;
z-index: 12;
}
.vdims > div > p:first-child:hover {
cursor:pointer;
}
.vdims > div > p:first-child {
/*
sans le > tous les
à l'intérieur de koko hééritent de cette propriété
ul > li
does select the li that are child of the ul.
ul li
does select the li that are descendant of the ul.
https://www.neowin.net/forum/topic/1138004-selecting-the-first-level-only-in-css/
https://stackoverflow.com/questions/2094508/is-there-a-css-selector-for-the-first-direct-child-only
*/
text-align:center;
font-size:0.35em;
font-weight:bold;
height:2em;
overflow:hidden;
position:relative;
margin:auto;
border-radius:5px 5px 0 0;
padding:0.4em 0 0 0;
margin-top:0.3em;
}
.vdims > div > p:first-child:before { /* sans le > tous les
à l'intérieur de koko hééritent de cette propriété */
content: "";
position: absolute;
z-index: 10;
top: 2px; /* dépend du border */
left: 0;
height:90%;
width:99%;
}
.vdims > div div:nth-child(2) { /* ici je ne mets pas le > car il y a un seul
dans .koko mais si il y en avait plusieurs il faudrait mettre un > pour signifier le premier div */
/*
position:relative;
text-align:left;
margin:auto;
*/
padding-bottom:5px;
}
.vdims > div div:nth-child(2) p:first-child { /* sert pour la vignette */
display:block;
padding:0.2em;
/*
font-weight:bold;
*/
text-align:center;
}
.vdims > div div:nth-child(2) p:first-child a {
display:block;
border-radius:0.3em;
width:4em;
height:4em;
overflow:hidden;
}
.v > div div:nth-child(2) p:nth-child(2) { /* pour que la height soit homogene QUAND LES VIGNETTES SONT AFFICHEES LES UNES A COTE DES AUTRES */
height:2.5em;
}
.vdims > div div:nth-child(2) p:nth-child(2) {
/*
Pour que les ... apparaissent directement dans la css, le pb etant que ça ne prend pas en compte la height mais seulement la width:
white-space: nowrap; white-space: nowrap; a mettre pour que text-overflow: ellipsis; soit pris en compte https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
overflow:hidden;
text-overflow: ellipsis;
*/
display:block;
overflow:hidden;
width:12em;
max-height:2.5em;
font-size:0.35em; /* s'applique aussi aux
*/
padding:0.35em;
font-weight:normal;
text-align:justify; /* bien pris en compte mais ça ne change pas grand chose: ça aligne simplement le "by" (ou "par") à droite quand il y a un deuxième ligne. */
text-align-last: justify; /* https://usefulangle.com/post/149/css-text-justify */
text-justify: inter-character;
}
.vdims > div div:nth-child(2) p:nth-child(2) a, .vdims > div div:nth-child(2) p:nth-child(2) a:link,
.vdims > div div:nth-child(2) p:nth-child(2) a:active, .vdims > div div:nth-child(2) p:nth-child(2) a:visited {
text-decoration: none;
}
.vdims > div div:nth-child(2) p:nth-child(2) a:nth-child(2) {
font-weight:bold; /* mise en gras du membre */
}
/************************************************/
/***********************************************/
/***********************************************/
/* marche pas, pourquoi?
.zgoumy3-content img {
border-radius: 0;
}
*/
.pf1 > div > p:first-child {
color:#fff;
background-color:#6699ff;
border-left:1px #3c8eff solid;
border-right:1px #3c8eff solid;
border-bottom:1px #3c8eff solid;
border-top:1px #3c8eff solid;
background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
background-repeat: repeat-x;background-color:#6699ff;
}
.pf1 > div > p:first-child:before {
border-left:1px #99ccff solid;
border-right: 1px #0066ff solid;
border-bottom: 1px #0066ff solid;
}
.pf1 > div div:nth-child(2) {
border-left:1px #3c8eff solid;
border-right:1px #3c8eff solid;
border-bottom:1px #3c8eff solid;
background-color:#fff0ff;
color:#996666; /* couleur du texte de .vtitle */
}
.pf1 > div div:nth-child(2) p:first-child a {
border-top: 1 px #7f9faf solid;
border-left:1px #7f9faf solid;
border-right:1px #7f9faf solid;
background-color:#6F6F6F;
}
.pf1 > div div:nth-child(2) p:nth-child(2) a, .pf1 > div div:nth-child(2) p:nth-child(2) a:link,
.pf1 > div div:nth-child(2) p:nth-child(2) a:active, .pf1 > div div:nth-child(2) p:nth-child(2) a:visited {
color:#000;
}
.pf2 > div > p:first-child {
color:#fff;
background-color:#ffde66;
border-left:1px #ffb83c solid;
border-right:1px #ffb83c solid;
border-bottom:1px #ffb83c solid;
border-top:1px #ffb83c solid;
background: linear-gradient(#ffdd99, #ffb83c 20%, #ffde66 75%, #ffb83c 100%);
background-repeat: repeat-x;background-color:#ffde66;
}
.pf2 > div > p:first-child:before {
border-left:1px #ffdd99 solid;
border-right: 1px #ff7300 solid;
border-bottom: 1px #ff7300 solid;
}
.pf2 > div div:nth-child(2) {
border-left:1px #ffb83c solid;
border-right:1px #ffb83c solid;
border-bottom:1px #ffb83c solid;
background-color:#fff0ff;
color:#996666; /* couleur du texte de .vtitle */
}
.pf2 > div div:nth-child(2) p:first-child a {
border-top: 1 px #7f9faf solid;
border-left:1px #7f9faf solid;
border-right:1px #7f9faf solid;
background-color:#6F6F6F;
}
.pf2 > div div:nth-child(2) p:nth-child(2) a, .pf2 > div div:nth-child(2) p:nth-child(2) a:link,
.pf2 > div div:nth-child(2) p:nth-child(2) a:active, .pf2 > div div:nth-child(2) p:nth-child(2) a:visited {
color:#000;
}
/****************************/
img.hz {
border-radius:0;
margin-left:0em;
margin-top:1em;
width:4em;
height:2em;
}
img.vt {
border-radius:0;
/* marche pas
margin-left:1em;
margin-top:0em;
*/
margin:auto;
width:2em;
height:4em;
}
img.hz2 {
border-radius:0;
margin-left:0em;
margin-top:0em;
width:4em;
height:3em;
}