malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Clean up TTS interface

Browse Source
This commit is contained in:
Tetrakern 2023-06-16 13:58:07 +02:00
parent 4b403e8e9a
commit abe20baa74
4 changed files with 22 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/chapter.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

18
partials/_tts-interface.php
View File

@ -14,28 +14,28 @@
<div class="tts-interface__controls"> <div class="tts-interface__controls">
<button id="button-tts-play" type="button" class="button play"> <button id="button-tts-play" type="button" class="button play">
<i class="fa-solid fa-play"></i> <i class="fa-solid fa-play"></i>
<span><?php _e( 'Play', 'fictioneer' ) ?></span> <?php _e( 'Play', 'fictioneer' ) ?>
</button> </button>
<button id="button-tts-pause" type="button" class="button pause"> <button id="button-tts-pause" type="button" class="button pause">
<i class="fa-solid fa-pause"></i> <i class="fa-solid fa-pause"></i>
<span><?php _e( 'Pause', 'fictioneer' ) ?></span> <?php _e( 'Pause', 'fictioneer' ) ?>
</button> </button>
<button id="button-tts-stop" type="button" class="button stop"> <button id="button-tts-stop" type="button" class="button stop">
<i class="fa-solid fa-stop"></i> <i class="fa-solid fa-stop"></i>
<span><?php _e( 'Stop', 'fictioneer' ) ?></span> <?php _e( 'Stop', 'fictioneer' ) ?>
</button> </button>
<button id="button-tts-skip" type="button" class="button skip"> <button id="button-tts-skip" type="button" class="button skip">
<i class="fa-solid fa-forward"></i> <i class="fa-solid fa-forward"></i>
<span><?php _e( 'Skip', 'fictioneer' ) ?></span> <span class="hide-below-375"><?php _e( 'Skip', 'fictioneer' ) ?></span>
</button>
<button id="button-tts-scroll" type="button" class="button skip">
<i class="fa-solid fa-arrows-alt-v"></i>
<span class="hide-below-375"><?php _e( 'Scroll', 'fictioneer' ) ?></span>
</button> </button>
<label for="tts-settings-toggle" class="button settings" role="button" tabindex="0"> <label for="tts-settings-toggle" class="button settings" role="button" tabindex="0">
<i class="fa-solid fa-cog"></i> <i class="fa-solid fa-cog"></i>
<span><?php _e( 'Settings', 'fictioneer' ) ?></span> <span class="hide-below-480"><?php _e( 'Settings', 'fictioneer' ) ?></span>
</label> </label>
<button id="button-tts-scroll" type="button" class="button skip">
<i class="fa-solid fa-arrows-alt-v"></i>
<span><?php _e( 'Scroll', 'fictioneer' ) ?></span>
</button>
</div> </div>
<div class="tts-interface__settings"> <div class="tts-interface__settings">
<div> <div>

48
src/scss/_tts.scss
View File

@ -24,14 +24,11 @@
&__controls { &__controls {
display: flex; display: flex;
justify-content: center;
gap: 3px; gap: 3px;
.button { .button {
border-radius: 0; border-radius: 0;
span {
letter-spacing: get_relative_clamp(-0.01, 0, 320, 375);
}
} }
> :first-child { > :first-child {
@ -46,27 +43,24 @@
&__settings { &__settings {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px;
margin-top: 8px; margin-top: 8px;
max-width: 98vw; max-width: 98vw;
min-width: 288px; min-width: 288px;
> div:not(:last-child) {
margin-bottom: 8px;
}
> div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
}
> span { span {
color: var(--fg-600); color: var(--fg-600);
font-size: 15px; font-size: 15px;
text-align: right; text-align: right;
line-height: 1; line-height: 1;
padding: 0 4px 2px 0; padding: 0 4px 2px 0;
margin-right: 4px; margin-right: 4px;
min-width: 64px; min-width: 64px;
}
} }
} }
@ -88,26 +82,6 @@
color: var(--tts-button-active-text); color: var(--tts-button-active-text);
} }
.settings {
span {
display: none;
@include bp(430px) {
display: initial;
}
}
}
:is(.skip, .scroll) {
span {
display: none;
@include bp(375px) {
display: initial;
}
}
}
&__voice-selection { &__voice-selection {
position: relative; position: relative;
justify-content: center; justify-content: center;