Closed7

Discord Overlay (OBS)をカスタマイズしてみる

knotknot

しゃべってるときに出ている緑の縁の色を変える

.voice-container .voice-states .voice-state .avatar.speaking {
  border-color: <任意の色>;
}
knotknot

アイコンの形を変える

.voice-container .voice-states .voice-state .avatar {
  border-radius: 15%; /*デフォルトは50%(円)*/
}
knotknot

アイコンをぴょこぴょこさせる 参考

.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; }
}
knotknot

名前の色を変える

.name {
    color:<任意の色> !important;
}
knotknot

名前のフォントを変える

div {/*divはやりすぎかも*/
    font-family: フォント名 !important;
}

ここによると、google fontsもいけるらしい

knotknot

アイコンを横並びにする 参考

.voice-states * {
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
}
knotknot

アイコンを横並びにして、名前をアイコンの下に配置する 参考

.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にクローズされました