Add: Saved Password Styling

CyberSphinxxx · Oct 28, 2024 · b064988 · b064988
1 parent 41af93d
commit b064988
Showing 1 changed file with 89 additions and 0 deletions.
diff --git a/styles.css b/styles.css
@@ -136,6 +136,95 @@ body {
     border-radius: 0 0 10px 10px;
 }
 
+/* Saved Passwords Container Styling */
+.saved-passwords-container {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 1rem;
+    border-radius: 10px;
+    max-width: 600px;
+    margin-top: 1.25rem;
+    border: 4px solid rgb(255, 177, 8);
+}
+
+.saved-passwords-container h2 {
+    font-size: 1.8rem;
+    color: rgb(255, 255, 255);
+    text-align: center;
+}
+
+#savePasswordForm {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+#email, #savedPassword {
+    width: 40%;
+    padding: 0.5rem;
+    font-size: 1rem;
+}
+
+#saveBtn {
+    width: 20%;
+    padding: 0.5rem;
+    font-size: 1rem;
+    background-color: rgb(255, 177, 8);
+    color: black;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+}
+
+#saveBtn:hover {
+    background-color: rgb(231, 160, 7);
+}
+
+#savedPasswordsList {
+    margin-top: 1rem;
+}
+
+.saved-password {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #333;
+    padding: 10px;
+    margin: 5px 0;
+    color: white;
+    border-radius: 5px;
+}
+
+.button-container {
+    display: flex;
+    gap: 5px;
+}
+
+.edit-btn, .delete-btn {
+    padding: 5px 10px;
+    border: none;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.edit-btn {
+    background-color: rgb(255, 177, 8);
+    color: rgb(0, 0, 0);
+}
+
+.edit-btn:hover{
+    background-color: rgb(222, 153, 4);
+}
+
+.delete-btn {
+    background-color: red;
+    color: white;
+}
+
+.delete-btn:hover{
+    background-color: rgb(225, 1, 1);
+}
+
 @media (max-width: 600px) {
     .main-content {
         flex-direction: column;