84 lines
1.4 KiB
Sass
84 lines
1.4 KiB
Sass
@import "@/common/styles/colors"
|
|
|
|
.otamatone-container
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
position: fixed
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
padding: 20px
|
|
background-color: rgba(30, 30, 30, 0.5)
|
|
backdrop-filter: blur(10px)
|
|
border-radius: 20px
|
|
margin: 20px
|
|
z-index: 1
|
|
|
|
.otamatone
|
|
display: flex
|
|
flex-direction: row
|
|
align-items: center
|
|
cursor: pointer
|
|
padding: 10px
|
|
width: 100%
|
|
|
|
.otamatone-neck
|
|
flex: 1
|
|
height: 20px
|
|
background: linear-gradient(135deg, #000, #444)
|
|
border-radius: 10px
|
|
position: relative
|
|
|
|
.frequency-indicator
|
|
position: absolute
|
|
top: -10px
|
|
width: 20px
|
|
height: 20px
|
|
background-color: #ff0000
|
|
border-radius: 50%
|
|
transform: translateX(-50%)
|
|
|
|
.note-marker
|
|
position: absolute
|
|
top: -30px
|
|
font-size: 24pt
|
|
color: $white
|
|
|
|
.otamatone-face
|
|
width: 100px
|
|
height: 100px
|
|
background: radial-gradient(circle, #fff, #ddd)
|
|
border-radius: 50%
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: center
|
|
position: absolute
|
|
left: 0
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)
|
|
|
|
.otamatone-eyes
|
|
display: flex
|
|
justify-content: space-between
|
|
width: 60%
|
|
position: absolute
|
|
top: 30px
|
|
|
|
.eye
|
|
width: 15px
|
|
height: 15px
|
|
background-color: #000
|
|
border-radius: 50%
|
|
|
|
.left-eye
|
|
margin-right: 10px
|
|
|
|
.right-eye
|
|
margin-left: 10px
|
|
|
|
.otamatone-mouth
|
|
background-color: #000
|
|
border-radius: 50%
|
|
position: absolute
|
|
bottom: 10px |