$t: transparent;
$bk: #BBF1F1;
$red: #DA4040;
@mixin for-desktop-up {
@media (min-width: 1200px) {
@content;
}
}
@mixin for-phone-only {
@media (max-width: 599px) {
@content;
}
}
@mixin for-tablet-portrait-up {
@media (min-width: 600px) {
@content;
}
}
*{
box-sizing: border-box;
}
body{
font-size: 10px;
font-family: arial;
background: $bk;
#kass{
position: absolute;
bottom: 0;
font-size: 2em;
padding: .5em;
right: 0;
a{
text-decoration: none;
color:#000;
font-weight: bold;
}
}
}
.mpkMini {
@include for-desktop-up{
font-size: 1.4vmin;
}
@include for-phone-only{
font-size: 1vmin;
}
@include for-tablet-portrait-up{
font-size: 1vmin;
}
font-size: 1vmin;
width: 93.5em;
height: 52em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 1em 3.5em -3.5em red;
box-shadow: 0px 2.4em 1em -1.5em rgba(#000,.7);
background:
linear-gradient(to bottom,
#9E0219,
$red
)
0% 0% / 100% .5em
,
linear-gradient(
to left,
rgba(#1C1C1C,1) 79%,
rgba(#fff,.5),
)
100% 50% / .8em 100%,
linear-gradient(
to right,
rgba(#1C1C1C,1) 79%,
rgba(#fff,.5),
)
0% 50% / .8em 100%,
$red,
;
background-repeat: no-repeat;
&:after{
content: '';
width: .8em;
height: 101%;
background:
linear-gradient(
to right,
rgba(#1C1C1C,1) 79%,
rgba(#fff,.5),
)
0% 50% / .8em 100%,
;
position: absolute;
top:50%;
transform: translatey(-50%);
}
&:before{
content: '';
width: .8em;
height: 101%;
background:
linear-gradient(
to left,
rgba(#1C1C1C,1) 79%,
rgba(#fff,.5),
)
0% 50% / .8em 100%,
;
position: absolute;
top:50%;
right: 0;
transform: translatey(-50%);
}
.logo_main{
position: absolute;
width: 9em;
height: 4em;
top: 42%;
left: 4%;
background-image: url(https://assets.codepen.io/2970881/logowh.png);
background-size: contain;
background-repeat: no-repeat;
}
.logo_second{
width: 15em;
height: 3em;
background: url('https://assets.codepen.io/2970881/mpk.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 42.8%;
left:14.5%;
}
.top_left_knob{
width:8em;
height:8em;
position: absolute;
top: 3%;
left:3.8%;
border-radius: 50%;
box-shadow:
inset -1.5em 1.5em 2.8em rgba(#000,.2),
inset 1.5em -1.5em 3.8em #ff5151,;
background:
#DA4040;
background-repeat: no-repeat;
.knob{
width: 5em;
height:5em;
border-radius: 50%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background:
radial-gradient(circle at 90%, $t, $t 50%, rgba(#fff,.1) 70%, rgba(#000,.1) 85%),
radial-gradient(circle at 30%, $t, $t 50%, rgba(#fff,.2) 80%, #635B4A 85%),
radial-gradient(circle at 100%, rgba(#fff,.02) 15%, #39383B 40%,#2A2528 75%),
// blk shadow
-webkit-radial-gradient(
80% 100%, 38% 50%,
hsla(340, 3%, 0%,.69) 0%,
hsla(0,0%,100%,0) 100%
),
// white shadow
-webkit-radial-gradient(
20% 0%, 18% 50%,
hsla(340, 3%, 0%,.69) 0%,
hsla(0,0%,100%,0) 100%
),
// white shadow
-webkit-radial-gradient(
100% 25%, 60% 25%,
hsla(0,0%,100%,.35) 0%,
hsla(0,0%,100%,0) 100%
),
// blk shadow
-webkit-radial-gradient(
0% 75%, 60% 25%,
hsla(0,0%,100%,.35) 0%,
hsla(0,0%,100%,0) 100%
),
radial-gradient(
100% 100% at 50% 50%,
rgba(#252525,.7) 50%,
rgba($bk,0) 51%
)
50% 50% / 5.8em 5.8em,
radial-gradient(
100% 100% at 50% 50%,
rgba(#625C4F,1) 50%,
rgba(#625C4F,0) 51%
)
5% 50% / 4em 6em,
radial-gradient(
100% 100% at 50% 50%,
rgba(blue,1) 50%,
rgba(blue,0) 51%
)
0% 50% / 4em 6em,
#625C4F;
background-repeat: no-repeat;
box-shadow:
// left shadows
inset .4em 0em .4em rgba(#261914,1),
inset .5em 0em .5em rgba(#fff,.4),
// all around shadows
-1.7em .9em 1em rgba(#000,.5),
1em -.1em 1em rgba(#000,.35),
;
.inner_knob{
width: 3.5em;
height:3.5em;
border:.1em solid #000;
border-radius: inherit;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
box-shadow:
// inset 0px 0px .2em rgba(#000,.95),
.4em .4em .5em rgba(#000,.3),
inset 0px 0px .8em rgba(#000,.35)
;
background:
radial-gradient(circle at 100%, #646968, #39383B 40%,#2A2528 75%),
linear-gradient(
45deg,
#2A2428,
rgba(#474C4F,1)
);
}
}
}
.left_btns{
width: 10.7em;
height: 11.3em;
position: absolute;
left:2.7%;
top:20%;
display: flex;
flex-direction:column;
justify-content: space-around;
> p{
color: #fff;
text-align: center;
position: absolute;
top: 0;
background:$red;
width: 100%;
height: .9em;
&:before{
font-size: .7em;
content: '';
font-weight: normal;
width: 95%;
height: 5em;
position: absolute;
border:.1em solid white;
top: .3em;
border-radius: .5em;
left:50%;
transform: translatex(-50%);
}
&:after{
font-size: .75em;
content: 'ARPEGGIATOR';
font-weight: normal;
width: 55%;
height: 5em;
position: absolute;
top: .0em;
border-radius: .3em;
left:50%;
transform: translatex(-50%);
background: $red;
}
}
.btn_row{
width: 100%;
display: flex;
height: 2.7em;
justify-content: space-around;
&:nth-of-type(1){
margin-top: .5em;
}
}
.btn{
width: 4.2em;
height: 100%;
border-radius: .3em;
border: .2em solid #370807;
border-left: .2em solid #370807;
border-bottom: .3em solid #370807;
box-shadow:
0 .0em .2em #591D21,
inset .0em .1em rgba(#fff,.4),
-.3em .2em rgba(#000,.2)
;
position: relative;
text-align: center;
background:
linear-gradient(
to bottom,
rgba(#3F3838,1) 70%,
rgba(#fff,.5) ,
)
100% 98% / 100% .3em,
linear-gradient(
rgba(#fff,.4) 49%,
rgba(#fff,.4) 51%,
)
100% 42% / .1em 100%,
#4B4946;
background-repeat: no-repeat;
p{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
font-size: .7em;
color:#EB9EA8;
font-weight: bold;
}
}
}
.screen{
position: absolute;
top: 5.3%;
width: 10.5em;
height: 4.5em;
left:61.5%;
border-radius: .4em;
border:.2em solid #A03030;
background:
#271D19;
background-repeat: no-repeat;
&:after{
content: '';
width: 100%;
height: 100%;
position: absolute;
border-radius: inherit;
background:
linear-gradient(
50deg,
rgba($t,.0) 49%,
rgba(#6F6664,.8) 51%,
)
1em 100% / 100% 100%,
;
background-repeat: no-repeat;
}
.inner_screen{
width: 70%;
height: 57%;
position: absolute;
top:50%;
left:48%;
transform: translate(-50%,-50%);
background:
linear-gradient(to right,
#C43840,
#8E5555
)
;
.inner_inner_screen{
width: 93%;
height: 85%;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#fff,.15),
rgba(blue,0) 51%
)
5% 0% / 4em 100%,
linear-gradient(
to right,
#3A474A 40%,
#3C322F
)
;
background-repeat: no-repeat;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
color: #fff;
.ch_text{
font-size: .6em;
position: absolute;
top:50%;
left:85%;
transform: translate(-50%,-50%);
}
.text{
padding-left: .4em;
}
p{
font-size: .6em;
&:first-of-type{
padding-top: .5vh;
font-size: .5em;
}
}
}
}
}
.pad_controls{
position: absolute;
top: 5.3%;
width: 20.3em;
height: 3.9em;
left: 75%;
color: #fff;
> p{
font-size: .75em;
position: absolute;
top:0;
left:22%;
}
.pad_controls_btns{
width: 100%;
height:73%;
position: absolute;
bottom:0;
display: flex;
justify-content: space-between;
background:
linear-gradient(
rgba(#fff,1) 49%,
rgba(#fff,1) 51%,
)
20% 50% / 50% .1em,
;
background-repeat: no-repeat;
.btn{
width: 4.2em;
height: 100%;
border-radius: .3em;
border: .2em solid #370807;
border-left: .4em solid #370807;
border-bottom: .3em solid #370807;
box-shadow: 0 .0em .2em #591D21,
inset .0em .1em rgba(#fff,.4);
position: relative;
text-align: center;
background:
linear-gradient(
to bottom,
rgba(#3F3838,1) 70%,
rgba(#fff,.5) ,
)
100% 98% / 100% .3em,
linear-gradient(
rgba(#fff,.4) 49%,
rgba(#fff,.4) 51%,
)
100% 42% / .1em 100%,
#4B4946;
background-repeat: no-repeat;
p{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
font-size: .7em;
color:#EB9EA8;
font-weight: bold;
}
}
}
}
.k_knobs{
width: 32.5em;
height: 15.7em;
position: absolute;
top:16.5%;
z-index: 2;
left:62%;
display: flex;
flex-direction: column;
justify-content: space-between;
.knob_row{
width: 100%;
height: 48%;
display: flex;
justify-content: space-between;
.knob_container{
width: 18%;
height: 100%;
position: relative;
> p{
color: #fff;
font-size: .9em;
}
.title_btm{
text-align: center;
width: 75%;
font-size: .75em;
border:.1em solid #fff;
position: absolute;
bottom: 0;
left:50%;
transform: translatex(-50%);
padding: 0 .4em;
border-radius: .3em;
// p{
// color:#fff;
// position: absolute;
// top:50%;
// left:50%;
// transform: translate(-50%,-50%);
// }
}
.knob_main_container{
width: 5.7em;
height: 5.7em;
position: absolute;
top:45%;
left:50%;
border-radius: 50%;
transform: translate(-50%,-50%);
box-shadow:
.0em .0em .5em inset rgba(#000,.2),
inset 0 0 .7em rgba(#880516,1),
inset 0 0 .7em rgba(#000000,.5),
.5em .0em 1.5em rgba(#EE625D,.7)
;
background-repeat: no-repeat;
.knob_inner_container{
width: 4.6em;
height: 4.6em;
border:.2em solid rgba(#930919,.5);
border-radius: inherit;
position: absolute;
top:50%;
left:50%;
box-shadow: inset 0 0 .7em rgba(#000000,.2);
transform:translate(-50%,-50%);
.knob{
width: 4.5em;
height:4.5em;
border-radius: inherit;
position: absolute;
top:45%;
left:59%;
transform:translate(-50%,-50%);
background-image:
conic-gradient(from 20deg, rgba(#605F62,.6), rgba(#000,.5), rgba(#605F62,.6), rgba(#000,.5), rgba(#605F62,.6)),
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 16%, hsla(0, 2%, 63%,.2) 17.5%),
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 2.2%, hsla(0,0%,80%,.2) 5.2%),
-webkit-radial-gradient(
50% 50%, 200% 50%,
hsla(340,2.8%,21%,1) 5%,
hsla(60,0.8%,25%,1) 100%
)
;
box-shadow:
-1.2em 1.5em .5em rgba(#000,.6),
0 0 1em 0 #222,
inset 0 0 .2em rgba(lightgray,.5),
inset 0 0 .4em rgba(#232323,.8)
;
.knob_ring{
box-shadow:inset 0 0 .5em rgba(#000,.13);
width:4em;
height: 4em;
border-radius: inherit;
border:.1em solid rgba(#000,.3);
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
}
}
}
}
}
}
.pads{
width: 41.5%;
height: 36%;
position: absolute;
left:38%;
top: 5.3%;
transform: translatex(-50%);
.text-block{
width: 100%;
height: 1em;
position: absolute;
display: flex;
justify-content: space-between;
.text{
width: 21%;
height:100%;
font-family: arial;
font-size: .9em;
color:#fff;
margin-left: .3em;
}
}
.text-top{
top: -1.2em;
}
.text-btm{
margin-top: .8em;
}
.top_row{
height: 45%;
width: 100%;
display: flex;
justify-content: space-between;
}
.btm_row{
height: 45%;
width: 100%;
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
}
.pad{
box-shadow: -.5em .7em .7em #832626,
.1em -.1em 2em #832626
;
width: 21%;
height:100%;
border-radius: .4em;
position: relative;
&.gray{
background:
linear-gradient(
-95deg,
#8A9AA4,
#C0CBC7
);
}
&.red{
background:
linear-gradient(
-95deg,
#E31826,
#F4223D
);
}
&:after{
border-radius: .4em;
content: '';
width: 92%;
height: 92%;
top:50%;
left:50%;
transform: translate(-50%,-50%);
border-bottom: .2em solid #000;
border-left: .3em solid #000;
border-radius: .4em;
position: absolute;
background: #1E2021;
}
}
}
.keys_top_text{
width: 92.3%;
height: 1.7em;
position: absolute;
top: 48.1%;
left: 50.5%;
transform: translatex(-50%);
color:#fff;
display: flex;
justify-content: space-between;
.text{
width: 4.2em;
font-size: .7em;
position: relative;
p{
text-align:center;
left:50%;
transform: translatex(-50%);
position: absolute;
bottom: 0;
width: 100%;
}
}
}
.keys_sides_left{
width: .7em;
height: 47.5%;
position: absolute;
bottom: 0;
left:3.5em;
border-left: .3em solid #CE282D;
background: linear-gradient(
to right,
#300405,
#300405
);
}
.keys_sides_right{
width: .9em;
height: 47.5%;
position: absolute;
bottom: 0;
right: 2.4em;
border-right: .3em solid #CE282D;
background: linear-gradient(
to left,
#300405,
#300405
);
}
.keys{
width: 92.3%;
height:47.5%;
border-top:.2em solid #D43336;
position: absolute;
bottom: 0px;
left: 50.5%;
transform: translatex(-50%);
background:
linear-gradient(to right,
#000,
#000)
0% 0% / 100% .2em,
linear-gradient(
to bottom,
#000 85%,
$red,
)
0% 0% / 100% 100%
;
;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
.key{
width: 5.25em;
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
height: 100%;
position: relative;
background:
linear-gradient(
to bottom,
rgba(#010101,1),
rgba(#181A1C,1),
)
;
&:after{
content:'';
width: .09em;
height:100%;
position: absolute;
background: linear-gradient(
to bottom,
#574748,
#747678,
#867879
);
}
}
.keys_shadows{
width: 45%;
height: 100%;
background: orange;
position: absolute;
right: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 54% 100%);
background:
linear-gradient(to bottom,
rgba($t,0) 70%,
rgba(#2C2F30,.01)
),
linear-gradient(70deg,
rgba(#848688,.3),
rgba(#3B3A3B,.4),
rgba(#848688,.6),
)
}
.fs_key_group{
height: 60%;
position: absolute;
display: flex;
justify-content: space-between;
}
.fs_key_group_one{
width: 10.8em;
left:3.5%;
}
.fs_key_group_two{
width: 17em;
left:20em;
}
.fs_key_group_three{
width: 10.8em;
left:43.5em;
}
.fs_key_group_four{
width: 17em;
left:60em;
}
}
.fs_key{
position: relative;
width: 3.8em;
height: 100%;
border:.1em solid rgba(#fff,.2);
border-left: .1em solid rgba(#fff,.2);
background-color:#020000;
overflow: hidden;
&:after{
content:'';
width: .07em;
height:100%;
position: absolute;
background: linear-gradient(
to bottom,
#574748,
#747678,
#867879
);
}
.light_part{
width:70%;
height: 95%;
position: absolute;
left:14%;
top:3%;
.light_part_top{
width:100%;
height: 90%;
border-top: .15em solid rgba(#fff,.3);
border-bottom: .1em solid rgba(#fff,.3);
background:
linear-gradient(#444648,#444648)
100% 50%/ .1em 100%
,
linear-gradient(
to right,
#252A28,
#2C2E30
),
;
background-repeat: no-repeat;
}
.light_part_btm{
width: 100%;
height: 10%;
background: linear-gradient(
#181A1C,#121416
);
}
}
}
}
!
