Index: gc_lang/fr/webext/content_scripts/menu.css ================================================================== --- gc_lang/fr/webext/content_scripts/menu.css +++ gc_lang/fr/webext/content_scripts/menu.css @@ -3,24 +3,46 @@ Menu for Grammalecte */ .grammalecte_menu_main_button { position: absolute; - margin: -8px 0 0 -8px; - border: 4px solid hsla(210, 80%, 30%, .5); - border-radius: 12px; - background-color: hsla(210, 80%, 50%, .5); - width: 8px; - height: 8px; + margin: -10px 0 0 -10px; + width: 12px; + height: 12px; + background-color: hsla(210, 80%, 80%, .5); + border: 4px solid hsla(210, 80%, 60%, .5); + border-top: 4px solid hsla(210, 100%, 40%, .7); + border-bottom: 4px solid hsla(210, 100%, 40%, .7); + border-radius: 50%; text-align: center; cursor: pointer; z-index: 100000000; + animation: grammalecte-spin 4s ease infinite; } .grammalecte_menu_main_button:hover { border: 4px solid hsla(210, 80%, 35%, .5); background-color: hsla(210, 80%, 55%, .5); box-shadow: 0 0 10px hsla(210, 100%, 30%, .5); + animation: grammalecte-spin 1s linear infinite; +} + +@keyframes grammalecte-spin { + 0% { + transform: rotate(0deg); + border-top: 4px solid hsla(210, 100%, 40%, .7); + border-bottom: 4px solid hsla(210, 100%, 40%, .7); + } + 50% { + transform: rotate(180deg); + border-top: 4px solid hsla(0, 100%, 40%, .7); + border-bottom: 4px solid hsla(0, 100%, 40%, .7); + } + 100% { + transform: rotate(360deg); + border-top: 4px solid hsla(210, 100%, 40%, .7); + border-bottom: 4px solid hsla(210, 100%, 40%, .7); + } } .grammalecte_menu { display: none; position: absolute;