Update styles.css

after hours, dark mode works properly and the different other things also
lightningRalf · Mar 15, 2023 · 02a7e2e · 02a7e2e
1 parent a48a835
commit 02a7e2e
Showing 1 changed file with 133 additions and 73 deletions.
diff --git a/styles.css b/styles.css
@@ -1,113 +1,173 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
-
 body {
-    font-family: 'Poppins', sans-serif;
+    font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
+	align-items: center;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+	align-items: center;
+}
+
+.tables-container {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-image: url('background.jpg');
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    min-height: 100vh;
-    transition: background-color 0.3s;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
-body.dark-mode {
-    background-color: #333;
+.data-table {
+    margin: 0 10px;
 }
 
-#theme-toggle {
-    position: fixed;
-    top: 1rem;
-    right: 1rem;
+h1 {
+    text-align: center;
+    margin-bottom: 30px;
 }
 
-#theme-switch {
-    display: none;
+h2 {
+    margin-bottom: 20px;
+	text-align: center;
 }
 
-#theme-switch + label {
-    display: block;
-    width: 60px;
-    height: 30px;
-    background-color: #ccc;
-    border-radius: 30px;
-    position: relative;
-    cursor: pointer;
+input[type="number"],
+input[type="text"] {
+    width: 80%;
+    padding: 6px 12px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
 }
 
-#theme-switch + label:before {
-    content: '';
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    width: 20px;
-    height: 20px;
-    background-color: #fff;
-    border-radius: 50%;
-    transition: left 0.3s;
+table {
+    width: 80%;
+    border-collapse: collapse;
 }
 
-#theme-switch:checked + label:before {
-    left: 35px;
+.trading-stack-container {
+    text-align: center;
 }
 
-h1 {
+.trading-stack-container label,
+.trading-stack-container input {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.trading-stack-input {
+    width: calc(80% - 130px);
+    max-width: 300px;
+}
+
+th,
+td {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+tr:hover {
+    background-color: #f5f5f5;
+}
+
+.button {
+    display: inline-block;
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
     text-align: center;
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-    color: #333;
+    text-decoration: none;
+    font-size: 14px;
+    margin: 10px 2px;
+    cursor: pointer;
+    border: none;
 }
 
-body.dark-mode h1 {
-    color: #eee;
+.button:hover {
+    background-color: #0056b3;
 }
 
-#trading-stack-container {
+.button-container {
     display: flex;
     justify-content: center;
-    align-items: center;
-    margin-bottom: 1rem;
+    margin: 20px 0;
 }
 
-input {
-    margin: 0.5rem;
+/* Dark mode styles */
+.dark-mode {
+    position: absolute;
+    top: 20px;
+    right: 20px;background-color: #2c2c2c;
+    color: #f1f1f1;
 }
 
-button {
-    display: block;
-    margin: 1rem auto;
-    padding: 0.5rem 1rem;
-    background-color: #3a86ff;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-weight: 500;
+.dark-mode input[type="number"],
+.dark-mode input[type="text"] {
+    background-color: #3c3c3c;
+    color: #f1f1f1;
 }
 
-button:hover {
-    background-color: #4a9fff;
+.dark-mode th {
+    background-color: #3c3c3c;
 }
 
-.hidden {
-    display: none;
+.dark-mode tr:hover {
+    background-color: #4c4c4c;
 }
 
-table {
-    border-collapse: collapse;
-    margin-bottom: 1rem;
+.dark-mode .button {
+    background-color: #0056b3;
 }
 
-th, td {
-    border: 1px solid #ccc;
-    padding: 0.5rem;
-    text-align: center;
+.dark-mode .button:hover {
+    background-color: #003580;
+}
+
+.toggle-container {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.toggle {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.toggle-label {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    height: 22px;
+    width: 40px;
+    background-color: #ccc;
+    border-radius: 50px;
+    transition: background-color 0.2s;
+}
+
+.toggle-label:before {
+    content: "";
+    position: absolute;
+    height: 18px;
+    width: 18px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    border-radius: 50%;
+    transition: transform 0.2s;
+}
+
+.toggle:checked + .toggle-label {
+    background-color: #007bff;
 }
 
-body.dark-mode th, body.dark-mode td {
-    border-color: #888;
+.toggle:checked + .toggle-label:before {
+    transform: translateX(18px);
 }