Closed7
Discord Overlay (OBS)をカスタマイズしてみる
しゃべってるときに出ている緑の縁の色を変える
.voice-container .voice-states .voice-state .avatar.speaking {
border-color: <任意の色>;
}
アイコンの形を変える
.voice-container .voice-states .voice-state .avatar {
border-radius: 15%; /*デフォルトは50%(円)*/
}
アイコンをぴょこぴょこさせる 参考
.speaking {
position: relative;
animation-name: speak-now;
animation-duration: 5000ms;
animation-fill-mode: forwards;
}
@keyframes speak-now {
0% { bottom:0px; }
5% { bottom:10px; }
10% { bottom:0px; }
15% { bottom:10px; }
20% { bottom:0px; }
25% { bottom:10px; }
30% { bottom:0px; }
35% { bottom:10px; }
40% { bottom:0px; }
45% { bottom:10px; }
50% { bottom:0px; }
55% { bottom:10px; }
60% { bottom:0px; }
65% { bottom:10px; }
70% { bottom:0px; }
75% { bottom:10px; }
80% { bottom:0px; }
85% { bottom:10px; }
90% { bottom:0px; }
95% { bottom:10px; }
100% { bottom:0px; }
}
名前の色を変える
.name {
color:<任意の色> !important;
}
アイコンを横並びにして、名前をアイコンの下に配置する 参考
.voice-states * {
display: inline-block;
position: relative;
top: 0;
left: 0;
}
.voice-state {
width: 70px;
height: 90px;
}
.name {
width: 55px;
height: 17px;
line-height: 17px !important;
white-space: nowrap;
text-overflow: clip;
text-align: center;
background-color: rgba(0,0,0,0) !important;
padding: 0 !important;
overflow: hidden;
}
このスクラップは2022/11/11にクローズされました