[CSS] Formating TB layout - animations
Hello.
I was wondering if it is possible to use animations in TB layout. For example for new email I'd like to add animated border. When I test it as a usual web page element it looks and works awesome:
div {
width: 100px;
height: 100px;
background-color:grey;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {border-bottom: 2px solid rgba(160, 0 , 0, 0);}
50% {border-bottom: 2px solid rgba(160, 0 , 0, 0.9);}
100% {border-bottom: 2px solid rgba(160, 0 , 0, 0);}
}
But when I try to use it in TB CSS it doesn't really work:
#folderTree > treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true) {
color: #f7f4f4 !important;
padding: 0px 0px 0px 4px !important;
animation-name: example !important;
animation-duration: 4s !important;
animation-iteration-count: infinite !important;
}
@keyframes example {
0% {border-bottom: 2px solid rgba(160, 0 , 0, 0) !important;}
50% {border-bottom: 2px solid rgba(160, 0 , 0, 0.9) !important;}
100% {border-bottom: 2px solid rgba(160, 0 , 0, 0) !important;}
}
So my question is - is it even possible and if yes, what am I doing wrong in this example?
Modified by DonAndress
All Replies (2)
Thunderbird's user interface is not rendered in HTML. So while it uses CSS to define values for elements it is rendered in XUL. Not quite the same animal.
Perhaps you need to stick to the listed XUL elements. https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/XUL_Reference
It might also help you with your other project of locating the items you can change. I think you need to spend some time reading on MDN before plowing on.
Awesome! Thanks a lot, Matt.