colormask.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. mark.im-caret {
  2. animation: 1s blink step-end infinite !important;
  3. }
  4. mark.im-caret-select {
  5. background-color: rgba(0, 0, 0, 0.25);
  6. }
  7. @keyframes blink {
  8. from, to {
  9. border-right-color: black;
  10. }
  11. 50% {
  12. /*border-right-color: transparent;*/
  13. border-right-color: white;
  14. }
  15. }
  16. span.im-static {
  17. color: grey;
  18. }
  19. div.im-colormask {
  20. display: inline-block;
  21. border-style: groove;
  22. border-width: 1px;
  23. appearance: textfield;
  24. cursor: text;
  25. }
  26. div.im-colormask > input, div.im-colormask > input:-webkit-autofill {
  27. position: absolute !important;
  28. display: inline-block;
  29. background-color: transparent;
  30. color: transparent;
  31. -webkit-text-fill-color: transparent;
  32. transition: background-color 5000s ease-in-out 0s;
  33. caret-color: transparent;
  34. text-shadow: none;
  35. appearance: textfield;
  36. border-style: none;
  37. left: 0; /*calculated*/
  38. }
  39. div.im-colormask > input:focus {
  40. outline: none;
  41. }
  42. div.im-colormask > input::selection {
  43. background: none;
  44. }
  45. div.im-colormask > input::-moz-selection {
  46. background: none;
  47. }
  48. div.im-colormask > input:-webkit-autofill ~ div {
  49. background-color: rgb(255, 255, 255);
  50. }
  51. div.im-colormask > div {
  52. color: black;
  53. display: inline-block;
  54. width: 100px; /*calculated*/
  55. }