-
Notifications
You must be signed in to change notification settings - Fork 1
/
piano.css
17 lines (13 loc) · 2.03 KB
/
piano.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.piano {display: inline-block; position: relative;background: #e74c3c;padding: 100px 15px 10px 15px;border-radius: 10px 10px 20px 20px;box-shadow: 0 10px 0 0 #c0392b, 0 20px 0 -5px rgba(0, 0, 0, 0.15);margin: 0 0 100px;}
.piano .speaker {display: block;position: absolute;height: 45px;width: 20%;top: 15px;z-index: 10;background: #40454A;border-radius: 10px 10px 13px 13px;box-shadow: inset 0 -2px 0;}
.piano .speaker.right_speaker { right: 25px; }
.piano .options {width: calc(100% - 70%);position:absolute;left: 25%;top: 15px;right: 25%;margin: auto;}
.piano .options .item {display: inline-block;height: 25px;width: 25px;top: 15px;z-index: 10;background: #EFEFEF;border-radius: 5px;box-shadow: inset 0 -1px 0;font-size: 10px;text-indent: 0;line-height: 67px;color: #fff;cursor: pointer;margin: 0 15px;}
.piano .options .item:active, .piano .options .item.active {background: #D0D1D2;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 5px 0 0 #bdc3c7;box-shadow: inset 0 2px 0;}
.piano .keyboard { display: inline-block; }
.piano .keyboard .keys {position:relative;width: 60px;height: 170px;display: inline-block;border-radius: 0 0 5px 5px;-webkit-transition: margin 0.05s ease, background-color 0.05s ease, box-shadow 0.05s ease;background: #ecf0f1;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 5px 0 0 #bdc3c7;}
.piano .keyboard .keys.black-keys { width: 0px; border: none; }
.piano .keyboard .keys.black-keys:before {content: ' ';width: 30px;height: 90px;position: absolute;left: -15px;z-index: 1;-webkit-transition: margin 0.05s ease, background-color 0.05s ease, box-shadow 0.05s ease;border-radius: 0 0 5px 5px;background: #40454A;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 5px 0 0 #40454A;}
.piano .keyboard .keys:active, .piano .keyboard .keys.active {background: #E6E6E6;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 5px 0 0 #bdc3c7;}
.piano .keyboard .keys:active:before, .piano .keyboard .keys.active:before { background: #223140; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 5px 0 0 #060606; }
.piano .keyboard .clear { clear: both; }