https://plypp.net/components/white-key/white-key.js

1import{registerFunctionComponent as e}from"webact";function s(){const{css:o,html:t}=this;t`<slot>`,o`
2    :host {
3      contain: strict;
4      display: block;
5      box-sizing: border-box;
6      background-image: linear-gradient(-30deg, #fff 80%, #ddd);
7      box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff, inset 1px 0 0 #fff, inset -1px 0 0 #fff;
8      border: 1px solid #aaa;
9      border-left: 0;
10      border-radius: 0 0 4px 4px;
11      transition: transform 250ms ease-out, box-shadow 250ms ease-out;
12      text-align: center;
13      line-height: 420px;
14      color: #aaa;
15    }
16
17    :host(:first-child) {
18      border-left: 1px solid #aaa;
19    }
20
21    :host(:active),
22    :host(.playing),
23    :host-context(.mouse-down-session):host(:hover) {
24      background-image: linear-gradient(-30deg,#fff,#ddd);
25      box-shadow: 0 1px 2px #000;
26      transform: translateY(-7px);
27    }
28
29    :host(:active),
30    :host(.playing) {
31      transition: none;
32    }
33
34    :host(:active)::before,
35    :host(.playing)::before,
36    :host-context(.mouse-down-session):host(:hover)::before,
37    :host(:active)::after,
38    :host(.playing)::after,
39    :host-context(.mouse-down-session):host(:hover)::after {
40      content:"";
41      width:0px;
42      height:0px;
43      border-width:244px 6px 0px;
44      border-style:solid;
45      position:absolute;
46      top:0px;
47    }
48
49    :host(:active)::before,
50    :host(.playing)::before,
51    :host-context(.mouse-down-session):host(:hover)::before {
52      border-color:transparent transparent transparent rgba(0,0,0,0.05);
53      left:0px;
54    }
55
56    :host(:active)::after,
57    :host(.playing)::after,
58    :host-context(.mouse-down-session):host(:hover)::after {
59      border-color:transparent rgba(0,0,0,0.05) transparent transparent;
60      right:0px;
61    }
62  `}var n=e(s,{name:"white-key",shadowRootMode:"open"});export{n as default};