Update src/static/css/style.css

src/static/css/style.css

@@ -1,258 +1,127 @@
 body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f0f2f5;
-  color: #333;
-  line-height: 1.6;
-  padding: 20px;
+  background-color: #f7f8fa;
+  color: #007bff; /* Unified text color */
   margin: 0;
+  padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 h1 {
-  color: #0056b3;
-  margin: 20px 0;
-}
-
-.button-container {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  justify-content: center;
+  color: #007bff;
+  margin: 0 0 20px 0;
 }
 
-.button1,
-#copyButton,
-#deleteButton,
-#revertButton,
-#forwardButton,
-#sendMailButton {
-  background-color: #007bff;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: background-color 0.3s ease, transform 0.3s ease;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.button1:hover,
-#copyButton:hover,
-#deleteButton:hover,
-#revertButton:hover,
-#forwardButton:hover,
-#sendMailButton:hover {
-  background-color: #0056b3;
-  transform: scale(1.05);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+.form-group {
+  margin-bottom: 20px;
+  width: 100%;
+  max-width: 800px;
 }
 
-.textarea-container {
-  position: relative;
-  width: 100%;
-  max-width: 800px; /* Ograničava maksimalnu širinu za bolje čitanje na velikim ekranima */
-  margin: 15px 0;
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #007bff;
 }
 
-#podaciPacijentaBox,
-#epikrizaBox {
+textarea {
   width: 100%;
-  height: 250px;
   padding: 15px;
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  font-size: 16px;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-  resize: none;
+  border: 2px solid #ced4da; /* Fuller borders */
+  border-radius: 12px; /* More pronounced rounded corners */
+  font-size: 16px; /* Larger font size for readability */
+  height: 200px;
+  resize: vertical;
+  background-color: #fff;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Subtle shadow */
 }
 
-#copyMessage {
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%) scale(0);
-  background-color: #0056b3;
-  color: white;
-  padding: 10px 20px;
-  border-radius: 5px;
-  z-index: 1000;
-  transition: transform 0.5s ease, opacity 0.5s ease;
-  opacity: 0;
+textarea:focus {
+  transform: translateY(-3px); /* Smoother levitation effect */
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }
 
-.powered-by {
+.button-container {
   display: flex;
+  gap: 12px;
   justify-content: center;
-  align-items: center;
-  margin-top: 10px;
-  font-size: 0.9em;
+  margin-bottom: 20px;
 }
 
-.labsoft-link {
+.btn {
+  padding: 10px 20px; /* Fuller buttons */
+  font-size: 18px; /* Larger font size for buttons */
+  border-radius: 8px; /* Rounded edges for buttons */
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  background-color: #007bff;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
   display: inline-flex;
   align-items: center;
-  color: #0056b3; /* Pretpostavljamo da želite da očuvate ovu boju */
-  text-decoration: none;
+  justify-content: center;
 }
 
-.logo-img-pb {
-  width: 100px; /* Prilagodite veličinu prema potrebi */
-  height: auto;
-  margin-left: 10px;
+.btn:hover {
+  transform: translateY(-3px); /* Smooth hover effect */
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
 }
 
-.modal {
-  display: none; /* Sakriven po defaultu */
-  position: fixed;
-  z-index: 10; /* Osigurava da je iznad ostalih elemenata */
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto; /* Omogućava skrolovanje ako je sadržaj veći od ekrana */
-  background-color: rgba(0, 0, 0, 0.5); /* Poluprozirna crna pozadina */
+.icon-btn {
+  gap: 5px; /* Space between icon and text if needed */
 }
 
-.modal-content {
-  background-color: #f0f2f5;
-  margin: 15% auto; /* Centriranje sadržaja moda */
-  padding: 20px;
-  border: 1px solid #ccc;
-  border-radius: 5px; /* Zaobljeni uglovi */
-  width: 80%; /* Širina sadržaja moda */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Lagana senka za dubinu */
-  max-width: 500px; /* Maksimalna širina za veće ekrane */
+#copyMessage {
+  display: none; /* Placeholder for JavaScript functionality */
 }
 
-.close {
-  color: #aaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
+.powered-by {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  font-size: 14px;
 }
 
-.close:hover,
-.close:focus {
-  color: #333;
+.labsoft-link {
+  display: flex;
+  align-items: center;
+  color: #007bff;
   text-decoration: none;
-  cursor: pointer;
 }
 
-.modal button {
-  background-color: #007bff;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: background-color 0.3s ease, transform 0.3s ease;
-}
-
-.modal button:hover {
-  background-color: #0056b3;
+.logo-img-pb {
+  width: 100px;
+  height: auto;
+  transition: transform 0.5s ease; /* Smooth transition for logo hover */
 }
 
-#emailInput {
-  width: calc(100% - 24px); /* Širina inputa uzimajući u obzir padding */
-  padding: 10px;
-  margin-top: 8px;
-  margin-bottom: 16px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  font-size: 16px;
+.logo-img-pb:hover {
+  transform: scale(1.2); /* Slight scale-up on hover */
 }
 
-.invalid-input {
-  border: 2px solid red;
-}
-/* Animacija za poruku kopiranja */
-@keyframes slideFadeIn {
-  from {
-    transform: translateX(-50%) scale(0);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(-50%) scale(1);
-    opacity: 1;
-  }
-}
-
-/* JavaScript može dodati ovu klasu za pokretanje animacije */
-.copyMessage-visible {
-  animation: slideFadeIn 0.5s forwards;
+/* Adjust the position of the "Powered by" text to align with the logo's mid-section */
+.powered-by {
+  position: relative;
+  top: -20px; /* Adjust based on your specific layout */
 }
 
 @media (max-width: 768px) {
-  .button1,
-  #copyButton,
-  #deleteButton,
-  #revertButton,
-  #forwardButton {
-    padding: 8px 16px;
-    font-size: 14px;
+  .form-group {
+    width: 90%;
   }
 
   .button-container {
-    gap: 8px;
-  }
-
-  #transcriptBox {
-    height: 200px;
-    font-size: 14px;
-  }
-
-  h1 {
-    font-size: 24px;
-  }
-  .logo-img-pb {
-    width: 80px; /* Manja veličina loga za tablete */
-  }
-}
-
-/* Telefoni */
-@media (max-width: 480px) {
-  .button-container {
-    flex-direction: column;
-  }
-
-  .button1,
-  #copyButton,
-  #deleteButton,
-  #revertButton,
-  #forwardButton {
-    width: 100%; /* Dugmad se šire da popune dostupnu širinu */
-    margin-bottom: 10px; /* Dodaje razmak između dugmadi */
-  }
-
-  #transcriptBox {
-    height: 150px;
-    font-size: 14px;
-  }
-
-  h1 {
-    font-size: 20px;
-  }
-
-  .textarea-container {
-    width: 90%; /* Smanjuje širinu textarea kontejnera za bolje uklapanje */
-  }
-
-  .powered-by {
     flex-direction: column;
-    text-align: center;
-  }
-
-  .logo-img-pb {
-    margin: 10px 0; /* Dodaje vertikalni razmak na malim ekranima */
-    width: 60px; /* Još manja veličina loga za telefone */
   }
 
-  .labsoft-link {
-    flex-direction: column;
-    align-items: center;
+  .btn {
+    width: 100%;
+    margin-bottom: 10px;
   }
 }