632 lines
18 KiB
CSS
632 lines
18 KiB
CSS
@font-face {
|
|
font-family: Michroma;
|
|
src:
|
|
url(https://manzdev.github.io/twitch-casio-pt1/michroma.woff2) format("woff2"),
|
|
url(https://manzdev.github.io/twitch-casio-pt1/michroma.woff) format("woff");
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Tourney;
|
|
src:
|
|
url(https://manzdev.github.io/twitch-casio-pt1/tourney.woff2) format("woff2"),
|
|
url(https://manzdev.github.io/twitch-casio-pt1/tourney.woff) format("woff");
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Raleway;
|
|
src:
|
|
url(/raleway.woff2) format("woff2"),
|
|
url(/raleway.woff) format("woff");
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--casio-bgcolor: #171e27;
|
|
--casio-color: #909eb4;
|
|
}
|
|
|
|
.colorButtons {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.colorButtons button {
|
|
width: 25px;
|
|
height: 25px;
|
|
margin: 0 5px;
|
|
border-radius: 5px;
|
|
border: 2px solid var(--casio-color);
|
|
background: var(--casio-bgcolor);
|
|
}
|
|
|
|
body {
|
|
transition: background 1s;
|
|
}
|
|
|
|
body.dark {
|
|
background: #000;
|
|
-webkit-animation: prepareSong 8s ease 8s alternate 3;
|
|
animation: prepareSong 8s ease 8s alternate 3;
|
|
}
|
|
|
|
.thanos {
|
|
width: 100px;
|
|
-webkit-animation: moveThanos 5s linear infinite;
|
|
animation: moveThanos 5s linear infinite;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 25;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@-webkit-keyframes moveThanos {
|
|
0%,
|
|
100% { transform: translate(0, 0); }
|
|
25% { transform: translate(90vw, 75vh); }
|
|
50% { transform: translate(90vw, 0); }
|
|
75% { transform: translate(0, 75vh); }
|
|
}
|
|
|
|
@keyframes moveThanos {
|
|
0%,
|
|
100% { transform: translate(0, 0); }
|
|
25% { transform: translate(90vw, 75vh); }
|
|
50% { transform: translate(90vw, 0); }
|
|
75% { transform: translate(0, 75vh); }
|
|
}
|
|
|
|
@-webkit-keyframes prepareSong {
|
|
0% { background: #000; }
|
|
100% { background: #333; }
|
|
}
|
|
|
|
@keyframes prepareSong {
|
|
0% { background: #000; }
|
|
100% { background: #333; }
|
|
}
|
|
|
|
body.party {
|
|
background: var(--body-color, #000);
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 3em;
|
|
}
|
|
|
|
.casio-pt1 {
|
|
display: flex;
|
|
width: 900px;
|
|
height: 250px;
|
|
background: var(--casio-bgcolor);
|
|
border-radius: 4px;
|
|
font-family: Raleway, Arial, serif;
|
|
font-weight: 400;
|
|
font-size: 9px;
|
|
color: var(--casio-color);
|
|
padding: 8px 5px 5px 5px;
|
|
box-shadow:
|
|
0 2px 1px #fffc inset,
|
|
1px 1px 0 #0001,
|
|
1px 1px 0 var(--casio-bgcolor),
|
|
2px 2px 0 #0003,
|
|
2px 2px 0 var(--casio-bgcolor),
|
|
4px 4px 0 #0005,
|
|
4px 4px 0 var(--casio-bgcolor),
|
|
6px 6px 0 #0006,
|
|
6px 6px 0 var(--casio-bgcolor),
|
|
8px 8px 0 #0007,
|
|
8px 8px 0 var(--casio-bgcolor),
|
|
8px 8px 4px #0005;
|
|
}
|
|
|
|
.casio-pt1 .casio-left {
|
|
width: 200px;
|
|
min-width: 200px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.casio-pt1 .casio-left .speaker-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.casio-pt1 .casio-left .speaker-container .speaker {
|
|
width: 170px;
|
|
height: 180px;
|
|
background:
|
|
repeating-linear-gradient(to bottom, #0003 0 2px, #0005 2px 3px, transparent 3px 7px),
|
|
linear-gradient(
|
|
to right,
|
|
transparent 0 32%,
|
|
var(--casio-bgcolor) 32% 35%,
|
|
transparent 35% 66%,
|
|
var(--casio-bgcolor) 66% 68%,
|
|
transparent 68% 100%
|
|
),
|
|
radial-gradient(circle, #0001 65%, transparent 65% 100%);
|
|
}
|
|
|
|
.casio-pt1 .casio-left .speaker-bottom {
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
}
|
|
|
|
.casio-pt1 .casio-left .speaker-bottom .power {
|
|
width: 60px;
|
|
height: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.casio-pt1 .casio-left .speaker-bottom .power .led {
|
|
width: 12px;
|
|
height: 4px;
|
|
background: #2f1f2a;
|
|
}
|
|
|
|
.casio-pt1 .casio-left .speaker-bottom .power .led.on {
|
|
background: #c01812;
|
|
}
|
|
|
|
.casio-pt1 .casio-left .speaker-bottom .logo {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.casio-pt1 .casio-left .speaker-bottom .logo .brand {
|
|
font-family: "Michroma", sans-serif;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.casio-pt1 .casio-left .speaker-bottom .logo .model {
|
|
font-family: "Tourney", serif;
|
|
font-weight: normal;
|
|
font-size: 18px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls {
|
|
min-height: 80px;
|
|
border-top: 2px solid var(--casio-color);
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .semi.box {
|
|
border-bottom: 0;
|
|
border-radius: 2px 2px 0 0;
|
|
padding: 2px 3px;
|
|
position: absolute;
|
|
height: 10px;
|
|
transform: translate(-28px, -2px);
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .options {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons span:not(.fill)::after {
|
|
content: "▪";
|
|
display: block;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .fill {
|
|
margin: 0 2px;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .arrow {
|
|
width: 4px;
|
|
margin: 0 6px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group .box {
|
|
display: inline-block;
|
|
border: 1px solid var(--casio-color);
|
|
border-radius: 2px;
|
|
padding: 0 10px;
|
|
font-size: 10px;
|
|
margin: 4px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group .box.last {
|
|
margin-left: 2em;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group .fill {
|
|
background: var(--casio-color);
|
|
color: var(--casio-bgcolor);
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group .options {
|
|
display: flex;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group .options > span {
|
|
display: inline-block;
|
|
max-width: 26px;
|
|
padding: 2px 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group .options > span.inline {
|
|
max-width: none;
|
|
width: 42px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label .group .options .volume {
|
|
-webkit-clip-path: polygon(0 50%, 100% 15%, 100% 85%, 0 50%);
|
|
clip-path: polygon(0 50%, 100% 15%, 100% 85%, 0 50%);
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label > :nth-child(4) .options {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label > :nth-child(4) .options > span { width: 20px; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-label > :nth-child(4) .options > span:nth-child(n+7) {
|
|
transform: translateX(-3px);
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons {
|
|
width: 100%;
|
|
height: 25px;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid {
|
|
border: 1px solid #0004;
|
|
border-bottom-color: #fff4;
|
|
border-right-color: #fff4;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
linear-gradient(to bottom, var(--casio-bgcolor) 0 15%, transparent 15% 85%, var(--casio-bgcolor) 85% 100%),
|
|
repeating-linear-gradient(to right, transparent 0 2px, #0004 2px 3px);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div {
|
|
background: var(--casio-bgcolor);
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div:nth-child(1) { margin-left: 32px; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div:nth-child(2) { margin-left: 36px; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div:nth-child(3) { margin-left: 38px; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div:nth-child(4) { margin-left: 36px; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid > div:nth-child(5) { margin-left: 38px; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group.buttons .button {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group.end {
|
|
margin-left: 24px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group.end .big {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .button {
|
|
display: inline-block;
|
|
border: 0;
|
|
width: 8px;
|
|
height: 18px;
|
|
background: black;
|
|
box-shadow:
|
|
1px 1px 2px #0006,
|
|
1px 0 0 #fff5 inset;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .button:active {
|
|
box-shadow: 0 0 3px #0005 inset;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .big.button {
|
|
width: 26px;
|
|
background-image:
|
|
linear-gradient(to top, #44517a 0 20%, transparent 20% 80%, #44517a 80% 100%),
|
|
repeating-linear-gradient(to top, transparent 0 1px, #0003 1px 2px);
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .steelblue { background: #44517a; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .orange { background: #b34431; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .gold { background: #b67523; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .green { background: #398d79; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .grey { background: #53586b; }
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 18px;
|
|
border: 1px solid #0004;
|
|
border-bottom-color: #fff7;
|
|
border-right-color: #fff7;
|
|
box-shadow: 2px 2px 2px #0003 inset;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input {
|
|
display: none;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input + label {
|
|
display: block;
|
|
width: 12px;
|
|
height: 8px;
|
|
background: #000;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked + label {
|
|
height: 16px;
|
|
background: transparent;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked + label::before,
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked + label::after {
|
|
content: "";
|
|
display: block;
|
|
background: #444;
|
|
width: 5px;
|
|
border-radius: 1px;
|
|
border-right: 1px solid #222;
|
|
height: 16px;
|
|
position: absolute;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked + label::after { right: 0; }
|
|
|
|
.casio-pt1 .casio-right .keys-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
border-top: 4px solid var(--casio-color);
|
|
position: relative;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .name-keys {
|
|
min-height: 15px;
|
|
display: flex;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .name-keys .key-name {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .name-keys .key-name[data-rhytm]::before {
|
|
content: attr(data-rhytm);
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .name-keys .key-name:nth-child(9)::before {
|
|
width: 200%;
|
|
position: absolute;
|
|
left: -50%;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .name-keys .key-name:nth-child(9)::after {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .name-keys .key-name[data-rhytm]::after {
|
|
content: "|";
|
|
display: block;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .name-keys .instrument-type {
|
|
font-size: 8px;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .keys {
|
|
min-height: 135px;
|
|
position: relative;
|
|
box-shadow: 0 1px 0 1px #1113;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .keys .black-keys {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 73px;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key {
|
|
grid-area: key;
|
|
width: 22px;
|
|
height: 100%;
|
|
background-color: #111;
|
|
background-image:
|
|
linear-gradient(to right, #111 0 2px, transparent 2px),
|
|
linear-gradient(to left, #111 0 2px, transparent 2px),
|
|
linear-gradient(to top, transparent 0 3px, #fff8 4px 5px, transparent 8px);
|
|
border: 1px outset #ccc;
|
|
border-top: 0;
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(2),
|
|
.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(4),
|
|
.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(7),
|
|
.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(9) {
|
|
margin-right: 28px;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:active,
|
|
.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key.active {
|
|
z-index: 8;
|
|
background-image:
|
|
linear-gradient(to right, #111 0 2px, transparent 2px),
|
|
linear-gradient(to left, #111 0 2px, transparent 2px),
|
|
linear-gradient(to top, transparent 0 1px, #fff3 2px 3px, transparent 6px);
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .keys .white-keys {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .keys .white-keys .white.key {
|
|
width: 100%;
|
|
height: 136px;
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
border-left: 2px solid #fff;
|
|
border-right: 2px solid #ddd;
|
|
border-top: 0;
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
position: relative;
|
|
z-index: 5;
|
|
box-shadow: 0 2px 2px #0004;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .keys .white-keys .white.key::after {
|
|
content: "";
|
|
display: block;
|
|
background: linear-gradient(to bottom, #0006 0 1px, #0005 2px 10px, transparent 15% 100%);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .keys .white-keys .white.key:active,
|
|
.casio-pt1 .casio-right .keys-container .keys .white-keys .white.key.active {
|
|
transform: translate(2px, 0);
|
|
z-index: 2;
|
|
border-top: 2px solid #fff;
|
|
box-shadow: 0 0 2px #0004;
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .keys .white-keys .white.key:active::after, .casio-pt1 .casio-right .keys-container .keys .white-keys .white.key.active::after {
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
|
|
.casio-pt1 .casio-right .keys-container .note-keys {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
font-size: 8px;
|
|
justify-content: space-around;
|
|
transform: translateY(3px);
|
|
box-shadow: 0 5px 4px #0005 inset;
|
|
border-right: 1px solid #fff2;
|
|
border-top: 1px solid #0007;
|
|
position: relative;
|
|
top: -2px;
|
|
left: -1px;
|
|
padding: 0 1px;
|
|
}
|
|
|
|
.created {
|
|
background:
|
|
url(https://assets.codepen.io/154065/internal/avatars/users/default.png),
|
|
linear-gradient(to bottom, #884ced, #ec1cce);
|
|
background-size: 75px 75px, cover;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 250px;
|
|
height: 75px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.created span,
|
|
.created h2,
|
|
.created p,
|
|
.created a {
|
|
font-family: Montserrat;
|
|
margin: 0;
|
|
}
|
|
|
|
.created a,
|
|
.created p,
|
|
.created span {
|
|
color: #fff;
|
|
}
|
|
|
|
.created h2 {
|
|
font-weight: 700;
|
|
transform: translate(0, -4px);
|
|
}
|
|
|
|
.created a {
|
|
-webkit-text-decoration-color: rgba(255,255,255,0.4);
|
|
text-decoration-color: rgba(255,255,255,0.4);
|
|
}
|
|
|
|
.created a:hover {
|
|
color: #e6e82a;
|
|
} |