Paste lirik lalu klik tampilkan lirik
/* ===========================
PART 2 - CSS
TEMA MERAH HITAM PREMIUM
=========================== */
html,
body{
margin:0;
padding:0;
background:#000;
font-family:Arial,sans-serif;
color:#fff;
overflow-x:hidden;
}
/* SEMBUNYIKAN JUDUL BLOGGER */
.post-title,
.entry-title,
h1.entry-title,
h2.post-title,
.blog-post-title{
display:none!important;
}
/* WRAPPER */
#karaokePro{
width:100%;
max-width:100%;
padding:10px;
box-sizing:border-box;
background:#000;
}
/* PANEL */
.panel{
background:#111;
border:2px solid #ff0000;
border-radius:18px;
padding:15px;
margin-bottom:12px;
box-shadow:
0 0 10px rgba(255,0,0,.35),
0 0 20px rgba(255,0,0,.15);
}
/* LOGO */
.logo-box{
background:#111;
border:2px solid #ff0000;
border-radius:18px;
padding:15px;
margin-bottom:12px;
text-align:center;
box-shadow:
0 0 10px rgba(255,0,0,.35);
}
.logo-box img{
max-width:280px;
width:100%;
height:auto;
display:block;
margin:auto;
}
/* INPUT */
input[type=text],
textarea,
select{
width:100%;
box-sizing:border-box;
padding:12px;
border:none;
outline:none;
border-radius:10px;
background:#1a1a1a;
color:#fff;
margin-top:8px;
margin-bottom:8px;
}
/* TEXTAREA */
textarea{
height:180px;
resize:vertical;
}
/* VIDEO */
#youtubePlayer{
width:100%;
height:260px;
border:none;
border-radius:12px;
background:#000;
margin-top:10px;
}
/* BUTTON */
button{
background:#ff0000;
color:#fff;
border:none;
border-radius:10px;
padding:12px;
font-weight:bold;
cursor:pointer;
transition:.2s;
}
button:active{
transform:scale(.97);
}
#playVideoBtn,
#showLyricsBtn,
#fullscreenBtn,
#downloadBtn{
width:100%;
margin-top:8px;
}
/* RECORD */
.recordButtons{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:10px;
}
.recordButtons button{
width:100%;
}
/* VOLUME */
.volumeWrap{
margin-top:12px;
}
.volumeWrap label{
display:block;
margin-bottom:8px;
}
input[type=range]{
width:100%;
}
/* PREVIEW AUDIO */
#previewAudio{
width:100%;
margin-top:10px;
}
/* EQUALIZER */
#equalizer{
width:100%;
height:100px;
background:#000;
border:2px solid #ff0000;
border-radius:10px;
margin-top:10px;
display:block;
}
/* SETTING */
.settingPanel{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.settingPanel label{
display:block;
margin-bottom:6px;
}
/* AREA KARAOKE */
#karaokeBox{
position:relative;
height:70vh;
overflow:auto;
background:#000;
border:3px solid #ff0000;
border-radius:20px;
padding:25px;
box-sizing:border-box;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
}
/* LIRIK */
#lyricsOutput{
width:100%;
color:#fff;
font-size:30px;
line-height:2.2;
text-align:left;
white-space:pre-line;
word-break:break-word;
}
/* FLOATING AUTOSCROLL */
#autoScrollBtn{
position:sticky;
left:100%;
bottom:15px;
width:65px;
height:65px;
border-radius:50%;
background:#ff0000;
color:#fff;
font-size:26px;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
box-shadow:
0 0 15px rgba(255,0,0,.8),
0 0 30px rgba(255,0,0,.4);
z-index:999;
}
/* SCROLLBAR */
#karaokeBox::-webkit-scrollbar{
width:8px;
}
#karaokeBox::-webkit-scrollbar-thumb{
background:#ff0000;
border-radius:20px;
}
/* MOBILE */
@media(max-width:768px){
#youtubePlayer{
height:220px;
}
.settingPanel{
grid-template-columns:1fr;
}
.recordButtons{
grid-template-columns:1fr 1fr;
}
#lyricsOutput{
font-size:28px;
line-height:2.1;
}
#karaokeBox{
height:75vh;
}
#autoScrollBtn{
width:60px;
height:60px;
font-size:24px;
}
}
/* MODE APLIKASI */
.fullscreen-mode{
background:#000!important;
width:100%!important;
height:100%!important;
}
/* GLOW SAAT AUTOSCROLL AKTIF */
.autoscroll-active{
animation:pulseRed 1.2s infinite;
}
@keyframes pulseRed{
0%{
box-shadow:0 0 10px red;
}
50%{
box-shadow:0 0 30px red;
}
100%{
box-shadow:0 0 10px red;
}
}
AJI SOPIAN FM
