Browse Source

petits affinages de style sur fancy et thickbox pour mieux gerer les boutons start/pause dont le caractere unicode ne s'affiche pas partout pareil. On fait un rendu css du coup, et on en profite pour ajouter des changement de couleur au hover/focus/active

dev/mediabox-extensible
Cerdic 4 months ago
parent
commit
787a1a782c
  1. 47
      lity/skins/fancybox/lity.css
  2. 41
      lity/skins/thickbox/lity.css

47
lity/skins/fancybox/lity.css

@ -37,7 +37,7 @@
/* focus */
.box_mediabox button[class*="lity-"]:focus{
outline: 2px dotted #ccc;
outline: 1px dotted #ccc;
}
/* Close button */
@ -59,6 +59,11 @@
border-radius: 50%;
border: 0.175rem solid #fff;
}
.lity-close:hover,
.lity-close:active,
.lity-close:focus {
color: #eee;
}
/* Group navigation */
.lity-group-caption .lity-group-current {
@ -102,15 +107,36 @@
color: #fff;
border-radius: 50%;
border: 0.175rem solid #fff;
z-index: 5;
}
.lity-group-start-stop button:active,
.lity-group-start-stop button:hover,
.lity-group-start-stop button:focus {
color:#eee;
}
.lity-group-start-stop button b {
}
.lity-group-start-stop .lity-start {
font-size: 0.65em;
font-size: 1px;
text-indent: -5px;
display: block;
margin: 0.1em auto;
margin: 0.1rem auto;
margin-left: 0.12rem;
border: 0.5rem solid transparent;
border-left-color: #fff;
width: 1rem;
height: 1rem;
}
.lity-group-start-stop .lity-start:active,
.lity-group-start-stop .lity-start:hover,
.lity-group-start-stop .lity-start:focus {
border-left-color: #eee;
}
.lity-group-start-stop .lity-stop {
display: none;
}
@ -118,11 +144,22 @@
display: none;
}
.lity-slideshow .lity-group-start-stop .lity-stop {
font-size: 1px;
text-indent: -5px;
display: block;
margin-top: -0.15em;
margin-left: -0.1em;
margin: 0.1rem auto;
width: 0.7rem;
height: 0.7rem;
margin-left: -0.05rem;
background: #fff;
}
.lity-group-start-stop .lity-stop:active,
.lity-group-start-stop .lity-stop:hover,
.lity-group-start-stop .lity-stop:focus {
background: #eee;
}
/* Next, prev */
.lity-next, .lity-previous {
display: block;

41
lity/skins/thickbox/lity.css

@ -45,6 +45,11 @@
color: #888;
overflow:hidden;
}
.lity-close:hover,
.lity-close:active,
.lity-close:focus {
color: #666;
}
/* Group navigation */
.lity-group-caption {
@ -85,6 +90,8 @@
.lity-group-start-stop {
order:2;
display: block;
width: 2rem;
text-align: center;
}
.lity-group-start-stop button {
display: block;
@ -95,6 +102,22 @@
color:inherit;
}
.lity-group-start-stop button b {
margin: auto;
}
.lity-group-start-stop .lity-start {
font-size: 1px;
text-indent: -5px;
display: block;
border: 0.5rem solid transparent;
border-left-color: #888;
width: 1rem;
height: 1rem;
}
.lity-group-start-stop .lity-start:active,
.lity-group-start-stop .lity-start:hover,
.lity-group-start-stop .lity-start:focus {
border-left-color: #666;
}
.lity-group-start-stop .lity-stop {
@ -104,8 +127,19 @@
display: none;
}
.lity-slideshow .lity-group-start-stop .lity-stop {
display: inline-block;
display: block;
font-size: 1px;
text-indent: -5px;
width: 0.7rem;
height: 0.7rem;
background: #888;
}
.lity-group-start-stop .lity-stop:active,
.lity-group-start-stop .lity-stop:hover,
.lity-group-start-stop .lity-stop:focus {
background: #666;
}
/* Next, prev */
.lity-group-next-prev {
@ -128,6 +162,11 @@
.lity-next[disabled], .lity-previous[disabled] {
visibility: hidden;
}
.lity-next:active, .lity-previous:active,
.lity-next:hover, .lity-previous:hover,
.lity-next:focus, .lity-previous:focus {
color: #666;
}
.lity-next b, .lity-previous b {
display: inline-block;

Loading…
Cancel
Save