File size: 1,212 Bytes
7d4d40b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
#text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 300px;
border-radius: 20px;
text-align: center;
background: white;
font-family: Arial;
font-size: 20px;
font-weight: bold;
}
#text-box .start-text {
display: none;
}
#text-box .stop-text {
display: none;
}
#text-box .play-icon {
width: 20px;
height: 20px;
vertical-align: middle;
margin-left: 10px;
}
#text-box .pause-icon {
width: 20px;
height: 20px;
vertical-align: middle;
margin-left: 10px;
}
#text-box .recording-icon {
width: 20px;
height: 20px;
vertical-align: middle;
margin-left: 10px;
}
#text-box .text-box-input {
width: 100%;
height: 200px;
resize: none;
margin-top: 50px;
padding: 10px;
border: none;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
font-size: 20px;
}
#text-box .text-box-button {
position: absolute;
bottom: 20px;
right: 20px;
width: 100px;
height: 50px;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 20px;
color: white;
font-size: 20px;
font-weight: bold;
}
#text-box .text-box-button:focus {
background: rgba(0, 0, 0, 0.2);
}
#text-box .text-box-button:hover {
background: rgba(0, 0, 0, 0.3);
} |