Simple monitor for displaying MIDI status for digital pianos.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

84 regels
1.2 KiB

  1. html {
  2. height: 100%;
  3. width: 100%;
  4. }
  5. body {
  6. margin: 0;
  7. display: flex;
  8. justify-content: space-between;
  9. align-items: center;
  10. width: 100%;
  11. height: 100%;
  12. }
  13. svg {
  14. fill: currentColor;
  15. }
  16. .natural {
  17. height: 100%;
  18. box-sizing: border-box;
  19. background-image: url('./natural.png');
  20. background-color: black;
  21. z-index: 0;
  22. }
  23. .accidental {
  24. height: calc(41 / 64 * 100%);
  25. box-sizing: border-box;
  26. background-image: url('./accidental.png');
  27. z-index: 2;
  28. }
  29. .key > * {
  30. width: 100%;
  31. height: 100%;
  32. opacity: 0;
  33. background-color: lime;
  34. border-radius: 0 0 1px 1px;
  35. background-clip: content-box;
  36. box-sizing: border-box;
  37. }
  38. .natural.key > * {
  39. padding: 2px 0 0 1px;
  40. mix-blend-mode: multiply;
  41. }
  42. .accidental.key > * {
  43. padding: 2px 0 1px 1px;
  44. mix-blend-mode: hard-light;
  45. }
  46. .natural.key.pressed {
  47. z-index: 1;
  48. }
  49. .accidental.key.pressed {
  50. z-index: 3;
  51. }
  52. .natural.key.pressed > * {
  53. opacity: 0.85;
  54. }
  55. .accidental.key.pressed > * {
  56. opacity: 0.5;
  57. }
  58. #pedals {
  59. display: flex;
  60. justify-content: space-between;
  61. align-items: center;
  62. width: 0;
  63. flex: auto;
  64. padding: 0 1rem;
  65. box-sizing: border-box;
  66. background-color: black;
  67. color: white;
  68. height: 100%;
  69. }