1
@import './css/minimax-tts.css';
2
@import './css/openai-tts.css';
3

4
.voice_preview {
5
    margin: 0.25rem 0.5rem;
6
    display: flex;
7
    justify-content: space-between;
8
    align-items: center;
9
    gap: 0.5rem;
10
}
11

12
.voice_preview .voice_name {
13
    text-align: left;
14
    flex: 1;
15
}
16

17
.voice_preview .voice_lang {
18
    width: 4rem;
19
    text-align: left;
20
}
21

22
.voice_preview .fa-play {
23
    cursor: pointer;
24
}
25

26
.tts-button {
27
    margin: 0;
28
    outline: none;
29
    border: none;
30
    cursor: pointer;
31
    transition: var(--animation-duration-2x);
32
    opacity: 0.7;
33
    align-items: center;
34
    justify-content: center;
35

36
}
37

38
.tts-button:hover {
39
    opacity: 1;
40
}
41

42
.tts_block {
43
    display: flex;
44
    align-items: baseline;
45
    column-gap: 5px;
46
    flex-wrap: wrap;
47
}
48

49
.tts_custom_voices {
50
    display: flex;
51
    align-items: baseline;
52
    gap: 5px;
53
}
54

55
.novel_tts_hints {
56
    font-size: calc(0.9 * var(--mainFontSize));
57
    display: flex;
58
    flex-direction: column;
59
    gap: 5px;
60
    margin-bottom: 5px;
61
}
62

63
.at-settings-row {
64
    display: flex;
65
    justify-content: space-between;
66
    align-items: center;
67
    width: 100%;
68
}
69

70
.at-settings-option {
71
    flex: 1;
72
    margin: 0 10px;
73
}
74

75
.at-endpoint-option {
76
    flex: 1;
77
    margin: 0 10px;
78
    margin-right: 25px;
79
    width: 38%;
80
}
81

82
.at-website-row {
83
    display: flex;
84
    justify-content: start;
85
    align-items: center;
86
    margin-top: 10px;
87
    margin-bottom: 10px;
88
}
89

90
.at-website-option {
91
    flex: 1;
92
    margin-right: 10px;
93
    margin-left: 10px;
94
}
95

96
.at-settings-separator {
97
    margin-top: 10px;
98
    margin-bottom: 10px;
99
    padding: 18px;
100
    font-weight: bold;
101
    border-top: 1px solid #e1e1e1; /* Grey line */
102
    border-bottom: 1px solid #e1e1e1; /* Grey line */
103
    text-align: center;
104
}
105

106
.at-status-message {
107
    flex: 1;
108
    margin: 0 10px;
109
}
110

111
.at-model-endpoint-row {
112
    display: flex;
113
    justify-content: space-between;
114
    align-items: center;
115
    width: 100%;
116
}
117

118
.at-model-option, .endpoint-option {
119
    flex: 1;
120
    margin: 0 10px;
121
    margin-left: 10px;
122
}
123

124
.at-endpoint-option {
125
    width: 38%;
126
}
127

128
#at-status_info {
129
    color: lightgreen;
130
}