.tts-container {
position: relative;
display: flex;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-top: 20px;
background: rgba(0, 82, 204, 0.05);
}
.tts-overlay-loading {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255, 255, 255, 0.6);
z-index: 999;
display: flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
border-radius: 8px;
}
.spinner {
border: 4px solid #ccc;
border-top: 4px solid #203bdc;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .tts-input-section {
width: 50%;
padding: 15px;
}
.tts-section-title {
font-weight: 600;
position: absolute;
top: 0;
left: 16px;
background: #203bdc;
color: #fff;
font-size: 16px;
padding: 4px 10px;
border-radius: 5px;
text-transform: uppercase;
}
.tts-textarea-wrapper {
position: relative;
}
#ttsTextInput {
width: 100%;
height: 525px;
padding: 50px 15px 15px 15px;
border-radius: 8px;
font-size: 1rem;
resize: none;
outline: none;
transition: border-color 0.2s ease;
box-sizing: border-box;
background: #fff;
border: unset;
}
#ttsTextInput:focus {
border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.tts-char-count {
position: absolute;
bottom: 15px;
right: 10px;
font-size: 0.85rem;
color: #777;
} .tts-voice-selection-section {
width: 50%;
padding: 15px;
display: flex;
flex-direction: column;
} .tts-tabs {
display: flex;
flex-wrap: wrap;
}
.tts-tab-button {
background: none;
border: none;
padding: 0 18px 12px 18px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
color: #666;
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
text-align: left;
flex: 1;
}
.tts-tab-button:hover {
color: #141718;
background: unset;
}
.tts-tab-button.tts-active {
color: #141718;
font-weight: 600;
background: #e8ecef;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.tts-tab-number{
display: inline-block;
padding: 5px 8px;
border-radius: 7px;
color: #b4b7b9;
background: #f3f5f7;
font-size: 16px;
margin-bottom: 15px;
}
.tts-active .tts-tab-number{
color: #fff;
background: #203bdc;
} .tts-voice-list {
flex-grow: 1; overflow-y: auto; max-height: 380px; padding-right: 10px; background: #e8ecef;
padding: 20px;
} .tts-voice-list::-webkit-scrollbar {
width: 10px;
}
.tts-voice-list::-webkit-scrollbar-track {
background: transparent;
}
.tts-voice-list::-webkit-scrollbar-thumb {
background-color: #B4B7B9;
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
.tts-voice-list::-webkit-scrollbar-thumb:hover {
background-color: #888;
}
.tts-voice-item {
display: flex;
align-items: center;
padding: 20px 15px;
background-color: #f8faff; border: 1px solid #e0e7ff; border-radius: 8px;
margin-bottom: 12px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
.tts-voice-item:hover {
background-color: #eef2ff;
border-color: #c3daff;
}
.tts-voice-item.tts-selected {
background-color: #e0f2fe; border-color: #bfdbfe; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.tts-voice-item.tts-paused {
background-color: #f0f0f0;
border-color: #e0e0e0;
}
.tts-voice-item.tts-disabled {
cursor: not-allowed;
}
.tts-voice-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
} .tts-voice-name {
font-weight: 500;
color: #333;
} .tts-premium-tag {
color: #FF9A00;
font-size: 16px;
font-weight: 600;
border-radius: 9999px;
margin-left: auto;
margin-right: 80px;
display: flex;
gap: 10px;
}
.tts-play-button {
background: none;
border: none;
cursor: pointer;
padding: 0;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
margin-top: 5px;
}
.tts-play-button .tts-icon {
width: 24px;
height: 24px;
color: #3b82f6; transition: color 0.2s ease;
}
.tts-play-button:hover .tts-icon {
color: #2563eb; }
.tts-voice-item.tts-paused .tts-play-button .tts-icon {
color: #3b82f6; }
.tts-voice-item.tts-disabled .tts-play-button .tts-icon {
color: #ccc;
cursor: not-allowed;
}
.tts-tab-text{
margin-bottom: 5px;
} .tts-speed-control {
margin-bottom: 15px;
display: flex;
flex-direction: row;
background: #e8ecef;
padding: 0 20px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
position: relative;
}
.tts-speed-control::before {
content: "";
position: absolute;
top: -80px;
left: 0;
right: 0;
height: 80px; background: linear-gradient(to bottom, rgba(232, 236, 239, 0) 0%, #e8ecef 100%);
z-index: 2;
pointer-events: none;
}
.tts-speed-title {
font-size: 16px;
font-weight: 400;
color: #1C1F23;
width: 30%;
}
.tts-speed-group{
width: 70%;
padding: 5px 15px;
}
.tts-slider-wrapper {
position: relative;
height: 5px;
background-color: #ccc; border-radius: 4px;
}
#ttsSpeedSlider {
width: 100%;
-webkit-appearance: none; appearance: none;
height: 5px;
background: transparent; cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 2; } #ttsSpeedSlider::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
background: transparent;
border-radius: 4px;
}
#ttsSpeedSlider::-moz-range-track {
width: 100%;
height: 5px;
background: transparent;
border-radius: 4px;
} #ttsSpeedSlider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px; height: 20px; background: #fff; border: 3px solid #fff; border-radius: 50%;
cursor: grab;
margin-top: -6px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#ttsSpeedSlider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #3b82f6;
border: 3px solid #fff;
border-radius: 50%;
cursor: grab;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} .tts-slider-fill {
position: absolute;
height: 5px;
background-color: #203bdc; border-radius: 4px;
width: 50%; top: 0;
left: 0;
z-index: 1;
}
.tts-speed-buttons {
display: flex;
justify-content: space-between;
flex: 1;
}
.tts-speed-button {
color: #141718;
background: unset;
padding: 8px 12px;
border-radius: 20px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
flex-grow: 1; text-align: center;
display: inline-grid;
width: 10%;
}
.tts-speed-button::before{
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
margin-top: -13px;
margin-left: 5px;
z-index: 99;
}
.tts-speed-button:hover {
background-color: #e5e7eb; }
.tts-listen-button {
position: relative;
display: inline-block;
padding: 10px 35px;
border: 2px solid #203bdc;
border-radius: 8px;
color: #203bdc;
font-size: 16px;
font-weight: 500;
background: white;
overflow: hidden;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
float: right;
cursor: pointer;
font-size: 14px;
font-weight: 600;
}
.tts-listen-button:hover{
background: #203bdc;
color: #fff;
}
.tts-listen-button-text{
margin-right: 10px;
text-transform: uppercase;
} .tts-listen-button::before {
content: ""!important;
position: absolute;
right: 2px;
width: 40px;
border-top: 2px solid #203bdc;
transform: translate(50%, -50%) rotate(45deg);
z-index: 9999;
} .tts-listen-button-wrapper {
text-align: right;
margin-top: auto;
position: relative;
cursor: pointer;
}
.tts-listen-button-wrapper img{
float: right;
} @media (max-width: 900px) {
.tts-container {
flex-direction: column;
width: 95%;
padding: 20px 0;
}
.tts-input-section,
.tts-voice-selection-section {
width: 100%;
border-right: none;
padding: 20px;
}
.tts-input-section {
border-bottom: 1px solid #eee;
margin-bottom: 20px;
}
#ttsTextInput {
height: 250px;
}
.tts-voice-list {
max-height: 300px; }
.tts-speed-control{
flex-direction: column;
}
.tts-speed-title, .tts-speed-group{
width: 100%;
padding: 10px 0;
}
}
@media (max-width: 767px) {
.tts-section-title {
font-size: 1.3rem;
}
.tts-tab-button {
padding: 10px 12px;
font-size: 0.9rem;
}
.tts-voice-item {
padding: 10px 12px;
}
.tts-speed-button {
padding: 6px;
font-size: 12px;
}
.tts-listen-button {
padding: 12px 25px;
font-size: 1rem;
}
.tts-premium-tag span{
display: none;
}
}