PHP Classes

File: css/style.css

Recommend this page to a friend!
  Classes of Mr.shaggyy83   ChatGPT Text and Speech Converter   css/style.css   Download  
File: css/style.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: ChatGPT Text and Speech Converter
Convert text to audio and generate audio from text
Author: By
Last change:
Date: 1 month ago
Size: 3,053 bytes
 

Contents

Class file image Download
/* Importing fonts */ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); /* Root Variables */ :root { --primary-color: #06f; --heading-color: #3355FF; --border-color: #ddd; } /* Common CSS */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: "Roboto", sans-serif; } body { background-color: white; } /* .container (for responsive) */ .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1200px; } } /* .btn */ .btn { padding: 0.7rem 1.5rem; display: inline-block; text-decoration: none; cursor: pointer; border: none; outline: none; background-color: var(--primary-color); color: white; font-size: 1rem; border-radius: 5px; font-weight: 500; transition: 0.3s; } /*.btn[disabled] { opacity: 0.5; cursor: not-allowed; }*/ .btn:hover { opacity: 0.9; } /* Custom file input */ .custom-file { background-color: var(--heading-color); color: white; padding: 0.7rem; font-family: sans-serif; border-radius: 0.3rem; cursor: pointer; display: inline-block; } #file-chosen { margin-left: 0.3rem; font-family: sans-serif; } /* Main content */ main { padding: 4rem 0; } /* Form */ .form-wrapper { max-width: 500px; width: 100%; margin: 0 auto; text-align: center; } .form-wrapper .form-title { font-size: 2rem; color: var(--heading-color); font-weight: 600; margin-bottom: 2rem; } /* Progress bar */ .uploading-status { margin: 0 auto; margin-top: 2rem; text-align: left; max-width: 220px; width: 100%; } .progress-bar { --height: 15px; width: 100%; border-radius: 100px; border: 2px solid var(--heading-color); margin-bottom: 1rem; height: var(--height); line-height: var(--height); position: relative; overflow: hidden; z-index: 1; font-weight: 500; font-size: 0.7rem; padding: 0 0.3rem; text-align: center; color: var(--color); display: flex; justify-content: center; align-items: center; transition: 0.3s; } .progress-bar::before { content: ""; position: absolute; left: 0; top: 0; width: var(--percent); height: 100%; background-color: var(--heading-color); z-index: -1; transition: 0.3s; } .uploading-status > ul { list-style: none; } .uploading-status > ul li { font-size: 0.9rem; font-weight: 500; line-height: 1.7rem; } .uploading-status > ul li strong { width: 90px; display: inline-block; } /* Message box */ /*#message { margin-top: 0.3rem; text-align: left; height: 220px; width: 100%; display: block; border-radius: 0; border: 1px solid var(--border-color); padding: 0.7rem 1rem; resize: vertical; outline: none; }*/ /* .hidden */ /*.hidden { display: none; }*/