Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

[CSS] Formating TB layout - animations

  • 2 답장
  • 1 이 문제를 만남
  • 12 보기
  • 최종 답변자: DonAndress

more options

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?

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?

글쓴이 DonAndress 수정일시

모든 댓글 (2)

more options

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.

more options

Awesome! Thanks a lot, Matt.