back

frontend/public/static/css/style.css

@@ -0,0 +1,97 @@
+/* Dark Theme Adaptation for tools.html */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: #121212; /* Match MUI dark theme background */
+    color: #e0e0e0; /* Light text color for dark background */
+    margin: 20px;
+    line-height: 1.6;
+}
+
+h1, h2 {
+    color: #ffffff;
+    border-bottom: 2px solid #424242; /* Darker border */
+    padding-bottom: 10px;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 20px;
+}
+
+.card {
+    background-color: #1e1e1e; /* Darker card background */
+    border: 1px solid #424242; /* Subtle border */
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.card h3 {
+    margin-top: 0;
+    color: #bb86fc; /* A nice accent color for dark theme */
+}
+
+input[type="file"], textarea {
+    width: 100%;
+    padding: 8px;
+    margin-top: 10px;
+    border-radius: 4px;
+    border: 1px solid #555;
+    background-color: #333;
+    color: #e0e0e0;
+}
+
+button {
+    background-color: #3700b3; /* MUI dark theme primary-like color */
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 10px;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #6200ee;
+}
+
+button:disabled {
+    background-color: #444;
+    cursor: not-allowed;
+}
+
+.progress-container, .result-container {
+    margin-top: 15px;
+    background-color: #2c2c2c;
+    padding: 15px;
+    border-radius: 4px;
+}
+
+.progress-bar {
+    width: 100%;
+    background-color: #444;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progress-bar-inner {
+    height: 20px;
+    width: 0%;
+    background-color: #03dac6; /* Accent color for progress */
+    text-align: center;
+    line-height: 20px;
+    color: black;
+    transition: width 0.4s ease;
+}
+
+#translation-preview {
+    white-space: pre-wrap;
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid #555;
+    padding: 10px;
+    margin-top: 10px;
+    background-color: #333;
+}