Die Funktionalität dieser Website ist durch Wartungsarbeiten eingeschränkt, die Ihr Erlebnis verbessern sollen. Wenn ein Artikel Ihr Problem nicht löst und Sie eine Frage stellen möchten, können Sie unsere Gemeinschaft über @FirefoxSupport auf Twitter, /r/firefox oder Reddit fragen.

Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Weitere Informationen

[CSS] Formating TB layout - animations

  • 2 Antworten
  • 1 hat dieses Problem
  • 12 Aufrufe
  • Letzte Antwort von 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?

Geändert am von DonAndress

Alle Antworten (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.