Simple monitor for displaying MIDI status for digital pianos.
Вы не можете выбрать более 25 тем
Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
|
- html {
- height: 100%;
- width: 100%;
- }
-
- body {
- margin: 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
- height: 100%;
- }
-
- svg {
- fill: currentColor;
- }
-
- .natural {
- height: 100%;
- box-sizing: border-box;
- background-image: url('./natural.png');
- background-color: black;
- z-index: 0;
- }
-
- .accidental {
- height: calc(41 / 64 * 100%);
- box-sizing: border-box;
- background-image: url('./accidental.png');
- z-index: 2;
- }
-
- .key > * {
- width: 100%;
- height: 100%;
- opacity: 0;
- background-color: lime;
- border-radius: 0 0 1px 1px;
- background-clip: content-box;
- box-sizing: border-box;
-
- }
-
- .natural.key > * {
- padding: 2px 0 0 1px;
- mix-blend-mode: multiply;
- }
-
- .accidental.key > * {
- padding: 2px 0 1px 1px;
- mix-blend-mode: hard-light;
- }
-
- .natural.key.pressed {
- z-index: 1;
- }
-
- .accidental.key.pressed {
- z-index: 3;
- }
-
- .natural.key.pressed > * {
- opacity: 0.85;
- }
-
- .accidental.key.pressed > * {
- opacity: 0.5;
- }
-
- #pedals {
- display: flex;
- justify-content: space-between;
-
- align-items: center;
- width: 0;
- flex: auto;
- padding: 0 1rem;
- box-sizing: border-box;
- background-color: black;
- color: white;
- height: 100%;
- }
|