Update styles.css

Jacob22092 · May 31, 2023 · a73d033 · a73d033
1 parent 539c24e
commit a73d033
Showing 1 changed file with 89 additions and 11 deletions.
diff --git a/styles.css b/styles.css
@@ -13,6 +13,11 @@ body {
   min-height: 100vh;
 }
 
+body.darkmode {
+  background-color: #1a1a1a;
+  color: #f5f5f5;
+}
+
 .container {
   background-color: #ffffff;
   padding: 30px;
@@ -22,6 +27,10 @@ body {
   width: 100%;
 }
 
+.container.darkmode {
+  background-color: #2e2e2e;
+}
+
 h1 {
   font-size: 1.5rem;
   font-weight: 500;
@@ -51,18 +60,20 @@ select:hover {
 }
 
 .custom-file-upload {
-  background-color: #4caf50;
-  color: #ffffff;
+  background-color: #ffffff;
+  color: #2196f3;
   padding: 10px 20px;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: 0;
+  border: 1px solid #2196f3;
   min-width: 150px;
   text-align: center;
-  transition: all 0.3s;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .custom-file-upload:hover {
-  background-color: #47a64f;
+  background-color: #2196f3;
+  color: #ffffff;
 }
 
 input[type="file"] {
@@ -78,19 +89,20 @@ input[type="file"] {
 }
 
 button {
-  background-color: #2196f3;
-  color: #ffffff;
+  background-color: #ffffff;
+  color: #2196f3;
   padding: 10px 20px;
   cursor: pointer;
-  border-radius: 5px;
-  border: none;
+  border-radius: 0;
+  border: 1px solid #2196f3;
   font-size: 1rem;
   min-width: 150px;
-  transition: all 0.3s;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 button:hover {
-  background-color: #1f88d6;
+  background-color: #2196f3;
+  color: #ffffff;
 }
 
 textarea {
@@ -107,3 +119,69 @@ textarea {
 textarea:focus {
   border-color: #4caf50;
 }
+
+/* Styl dla przełącznika Dark Mode */
+.darkmode-switch {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #2196f3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px);
+}
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}