Viewing File: /home/ubuntu/voice-assistant-frontend/public/css/default.css
.generate-voice-wrapped {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2em 0;
}
.generate-voice-card-area{
border: 1px solid #E1E2EB;
padding: 2em;
background-color: var(--secondary-color);
}
.generate-voice-card-area h3{
color: var(--tertiary-color);
font-size: 1.6em;
font-weight: 600;
margin-bottom: 0.2em;
}
.generate-voice-card-area p{
color: var(--quaternary-color);
font-size: 1rem;
font-weight: 400;
line-height: 1.8;
margin-bottom: 1em;
opacity: 0.8;
}
.generate-voice-full-card-wrapped{
margin-bottom: 1em ;
}
.generate-voice-card-label p{
font-size: 0.9em;
font-weight: 400;
color: var(--tertiary-color);
line-height: 1.5;
margin-bottom: 0.5em;
text-align: left!important;
}
.generate-voice-change-card{
background: #FAFBFF;
box-shadow: 0px 0px 4px 0px #E5E9FB;
padding: 1em;
display: flex;
align-items: center;
justify-content: space-between;
}
.generate-voice-change-card .generate-voice-file-name h4{
font-size: 0.9em;
font-weight: 500;
color: var(--tertiary-color);
line-height: 1.5;
margin-bottom: 0;
}
.generate-voive-btn{
background-color: none!important;
border: none!important;
background: linear-gradient(180deg, #5575FF 0%, #8F59FC 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 0.85em !important;
font-weight: 600 !important;
letter-spacing: 0.5px;
padding: 0!important;
}
.cancel-file-btn{
background-color: none!important;
border: none!important;
background:transparent!important;
padding: 0!important;
}
.generate-voice-input-card{
}
.generate-voice-input-card .checkbox-title{
display: flex;
align-items: center;
gap: 1em;
}
.generate-voice-input-card .checkbox-label{
font-size: 0.9em;
font-weight: 600;
color: var(--tertiary-color);
line-height: 1.5;
}
.generate-voice-input-card .checkbox-input:checked + .checkbox-title .checkbox-icon{
fill: var(--primary-color);
}
.generate-voice-input-card .checkbox-input:checked + .checkbox-title .checkbox-label {
color: var(--primary-color);
}
.generate-voice-input-card .checkbox-title{
position: relative;
width: 100%;
background: #FAFBFF;
box-shadow: 0px 0px 4px 0px #E5E9FB;
display: flex;
align-items: center;
padding: 1em;
}
.generate-voice-input-card .checkbox-title:before {
content: "";
position: absolute;
display: block;
width: 1.25rem;
height: 1.25rem;
border: 1.5px solid #b5bfd9;
background-color: #fff;
border-radius: 5px;
top: 1rem;
right: 1rem;
/* opacity: 0;
transform: scale(0); */
transition: 0.25s ease;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
background-size: 12px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.generate-voice-input-card .checkbox-input:checked + .checkbox-title:before {
transform: scale(1);
opacity: 1;
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.generate-voice-input-card .checkbox-input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.generate-voice-input-wrapped{
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2em;
}
.generate-voice-input-wrapped .checkbox{
width: 100%;
}
.generate-voice-input-wrapped .checkbox-wrapper{
width: 100%;
cursor: pointer;
}
.generate-voice-input-card .checkbox-input:checked + .checkbox-title{
border: 1px solid var(--primary-color);
background: #F1F3FF;
}
.generate-voice-full-card-wrapped .form-control::placeholder{
opacity:0.6;
}
.generate-voice-action-btn-sec{
margin-top: 2em;
}
.generate-voice-action-btn-sec button{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3em;
}
.generate-voice-file-upload-frame{
border: 1px dashed var(--primary-color);
border-radius:0px;
padding: 2em;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
flex-direction: column;
}
.generate-voice-upload-info p{
margin-bottom: 0;
font-size: 0.85em;
font-weight: 500;
color: var(--tertiary-color);
}
.generate-voice-file-preview{
background: #FAFBFF;
padding: 0.5em;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1em;
}
.generate-preview-info p{
font-size: 0.9em;
font-weight: 500;
color: var(--tertiary-color);
line-height: 1.5;
margin-bottom: 0em;
}
.generate-preview-info span{
font-size: 0.85em;
font-weight: 500;
color: var(--quaternary-color);
line-height: 1.5;
}
.generate-voice-file-preview-left{
display: flex;
align-items: center;
gap: 1em;
}
.generate-download-btn{
color: var(--primary-color);
font-size: 0.9em;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5em;
}
.generate-audio-frame{
background: #FAFBFF;
padding: 2em;
display: flex;
flex-direction: column;
gap: 0.5em;
}
.generate-audio-frame-top,.generate-audio-frame-bottom{
display: flex;
align-items: center;
justify-content: space-between;
}
.generate-audio-frame-left{
display: flex;
align-items: center;
gap: 0.5em;
}
.generate-audio-frame-left p{
font-size: 0.9em;
font-weight: 500;
line-height: 1.5;
color: var(--tertiary-color);
margin-bottom: 0em;
}
.generate-audio-frame-bottom .running-time,.generate-audio-frame-bottom .full-time{
font-size: 0.85em;
color: var(--tertiary-color);
font-weight: 500;
line-height: 1.5;
margin-bottom: 0em;
}
.generate-audio-bar{
width: 100%!important;
height:5px!important;
}
.generate-audio-bar .css-1ldz52l-Slider {
box-shadow: 0px 0px 3px 2px rgb(91 83 83 / 16%)!important;
}
.generate-audio-play-btn{
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.generate-audio-play-btn .default-btn{
display: flex;
align-items: center;
gap: 0.3em;
}
.generate-audio-btn {
display: flex;
align-items: center;
gap: 0.3em;
margin-top: 1em;
justify-content: center;
}
Back to Directory
File Manager