nested "delayed" class

[y-yu]

I want to make nested "delayed" class.

`

• hogehoge
  
  
  
  • foofoo
  
  

`

When "foo" is shown,
"hoge" is added "displayed" class, and "foo" is added "current" class.

`

• hoge
  • foo

`

But, class "delayed", "displayed" and "current" use "opacity" property.
"opacity" property influence child node.
Then

`

• hoge
  • foo

`

result

• hoge
  • foo

It does NOT work on Chorome, Opera and Safari.
"foo" is shown by "opacity 0.3".

But, I designate "color" property by "rgba".

`

• hoge
  • foo

`

result

• hoge
  • foo

And, I use "visibility" property in order to appear characters.
So I change "slideshow.css".

.delayed,
.delayed-children > * {
visibility: hidden;
color: rgba(0,0,0,0);

-webkit-transition:1s color;

/*-moz-transition:.7s opacity;
-o-transition:.7s opacity;
transition:.7s opacity;
*/

}

.delayed.current,
.delayed-children > .current,
.delayed.displayed.non-dismissable,
.delayed-children > .displayed.non-dismissable {
visibility: visible;
color: rgba(255,255,255,1);
}

.delayed.displayed,
.delayed-children > .displayed {
visibility: visible;
color: rgba(255,255,255,0.3);
}

It works on Safari.