Create assets/custom.css

assets/custom.css

@@ -0,0 +1,96 @@
+/* custom.css */
+
+body {
+    background-color: #F7F7F7;
+    color: #454545;
+}
+
+.navbar {
+    background-color: #116F70;
+}
+
+.btn-primary {
+    background-color: #1C304A;
+    border-color: #1C304A;
+}
+
+.btn-primary:hover {
+    background-color: #116F70;
+    border-color: #116F70;
+}
+
+.btn-secondary {
+    background-color: #116F70;
+    border-color: #116F70;
+}
+
+.btn-secondary:hover {
+    background-color: #00AEAF;
+    border-color: #00AEAF;
+}
+
+.btn-tertiary {
+    background-color: #E0E0E0;
+    border-color: #E0E0E0;
+    color: #1C304A;
+}
+
+.btn-tertiary:hover {
+    background-color: #DEF4F4;
+    border-color: #DEF4F4;
+    color: #1C304A;
+}
+
+.card {
+    background-color: #FFFFFF;
+    border-color: #E0E0E0;
+}
+
+/* Additional styles for Dash components */
+.dash-dropdown .Select-control {
+    border-color: #116F70;
+}
+
+.dash-dropdown .Select-menu-outer {
+    border-color: #116F70;
+}
+
+.dash-slider .rc-slider-track {
+    background-color: #116F70;
+}
+
+.dash-slider .rc-slider-handle {
+    border-color: #116F70;
+}
+
+.dash-textarea {
+    border-color: #E0E0E0;
+}
+
+/* Style for the file upload area */
+#upload-file {
+    border: 2px dashed #116F70;
+    border-radius: 5px;
+    background-color: #DEF4F4;
+}
+
+/* Style for the generated script output */
+#script-output {
+    background-color: #FFFFFF;
+    border: 1px solid #E0E0E0;
+    padding: 10px;
+}
+
+/* Style for the audio output */
+#audio-output audio {
+    width: 100%;
+    margin-top: 10px;
+}
+
+/* Responsive design adjustments */
+@media (max-width: 768px) {
+    .container {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+}