WebOrbiton
v3.0.0.2

FlatlyPage

54 lines · 1.0 KB
  1. .btn-translate {
  2. background: none;
  3. border: none;
  4. cursor: pointer;
  5. padding: 4px;
  6. margin-left: 8px;
  7. opacity: 0.5;
  8. transition: opacity 0.2s, transform 0.2s;
  9. display: inline-flex;
  10. align-items: center;
  11. justify-content: center;
  12. vertical-align: middle;
  13. }
  14. .btn-translate:hover {
  15. opacity: 1;
  16. transform: scale(1.1);
  17. }
  18. .btn-translate svg {
  19. color: var(--primary);
  20. }
  21. .btn-translate:disabled {
  22. opacity: 0.3;
  23. cursor: not-allowed;
  24. }
  25. .form-label {
  26. display: flex;
  27. align-items: center;
  28. justify-content: space-between;
  29. }
  30. .translating {
  31. opacity: 0.6;
  32. pointer-events: none;
  33. position: relative;
  34. }
  35. .btn-translate.translating::after {
  36. content: '';
  37. position: absolute;
  38. width: 12px;
  39. height: 12px;
  40. border: 2px solid var(--border);
  41. border-top-color: var(--primary);
  42. border-radius: 50%;
  43. animation: spin 0.8s linear infinite;
  44. }
  45. @keyframes spin {
  46. to { transform: rotate(360deg); }
  47. }