模板:Lyrics/styles.css

/* 基础样式 */ .lyrics-container {

   width: 100%;
   font-family: Arial, sans-serif;
   line-height: 1.6;

}

/* 桌面端样式 */ .lyrics-row {

   display: flex;
   margin-bottom: 5px;
   border-bottom: 1px solid #eee;
   transition: background-color 0.2s;

}

.lyrics-row:hover {

   background-color: #f8f8f8;

}

.lyrics-line {

   padding: 8px 12px;
   overflow: hidden;
   text-overflow: ellipsis;

}

.lyrics-original {

   width: 50%;
   border-right: 1px solid #ddd;
   font-weight: bold;

}

.lyrics-translated {

   width: 50%;

}

/* 移动端样式 */ @media (max-width: 768px) {

   .lyrics-row {
       flex-direction: column;
       border-bottom: 2px solid #ddd;
       margin-bottom: 10px;
   }
   
   .lyrics-line {
       width: 100% !important;
       border-right: none !important;
       padding: 6px 10px;
   }
   
   .lyrics-original {
       border-bottom: 1px dashed #ccc;
   }

}

/* 悬停提示效果 */ .lyrics-line {

   position: relative;

}

.lyrics-line:hover::after {

   content: attr(data-hover);
   position: absolute;
   left: 0;
   bottom: 100%;
   background-color: #333;
   color: white;
   padding: 5px 10px;
   border-radius: 4px;
   white-space: nowrap;
   z-index: 100;
   font-size: 0.9em;
   opacity: 0.9;
   pointer-events: none;

}