styles4

Author: AnWhiteM

src/components/AddAnotherCardBtn/AddAnotherCardBtn.module.css

@@ -14,7 +14,7 @@
 
   .btn:hover,
   .btn:focus {
-    background-color: var(); 
+    background-color: var(--btn-hover); 
   }
 
 .iconBox{

src/components/AddColumnBtn/AddColumnBtn.module.css

@@ -9,6 +9,11 @@
   background: var(--add-column-bg);
   width: 334px;
   height: 56px;
+  
+}
+
+.openModalBtn:hover, .openModalBtn:focus{
+  background-color: var(--btn-hover2);
 }
 
 .iconBox {

src/components/CreateCardModal/CreateCardModal.module.css

@@ -267,6 +267,10 @@ input[type="radio"]:checked {
   cursor: pointer;
 }
 
+.createCardModalSubmit:hover, .createCardModalSubmit:focus{
+  background-color:var(--btn-hover);
+}
+
 .createCardModalSpan {
   width: 28px;
   height: 28px;

src/components/CreateColumnModal/CreateColumnModal.module.css

@@ -112,6 +112,9 @@
   border-radius: 8px;
   cursor: pointer;
 }
+.createColumnModalSubmit:hover, .createColumnModalSubmit:focus{
+  background-color: var(--btn-hover);
+}
 
 .createColumnModalSpan {
   width: 28px;

src/components/EditCardModal/EditCardModal.module.css

@@ -281,6 +281,10 @@ input[type="radio"]:checked {
   cursor: pointer;
 }
 
+.editCardModalSubmit:hover, .editCardModalSubmit:focus{
+  background-color:var(--btn-hover);
+}
+
 .editCardModalSpan {
   width: 28px;
   height: 28px;

src/components/EditColumnModal/EditColumnModal.module.css

@@ -106,6 +106,10 @@
   cursor: pointer;
 }
 
+.editColumnModalSubmit:hover, .editColumnModalSubmit:focus{
+  background-color: var(--btn-hover);
+}
+
 .editColumnModalSpan {
   width: 28px;
   height: 28px;

src/components/PasswordField/PasswordField.module.css

@@ -12,10 +12,11 @@
   outline: none;
   box-shadow: none;
   position: relative;
+
 }
 
 .formInput:focus {
-  border: 2px solid var(--modal-border);
+  border: 1px solid var(--modal-border);
 }
 
 .eye {

src/components/UserEditModal/UserEditModal.module.css

@@ -66,6 +66,11 @@
   padding: 0;
 }
 
+.avatarBig {
+  width: 68px;
+  height: 68px;
+}
+
 .plusBtn {
   border: none;
   background-color: var(--add-img);
@@ -75,14 +80,26 @@
   position: absolute;
   top: 60px;
   cursor: pointer;
+  transition: background-color var(--animation);
 }
+
+.plusBtn:hover{
+  background-color: var(--header-btn-hover);
+}
+
+
+
 .avatarBtn{
   border: none;
   background: none;
   margin: 0;
   padding: 0;
 }
 
+
+
+
+
 .formInput {
   padding: 14px 18px;
   width: 100%;
@@ -152,6 +169,10 @@
   padding-top: 10px;
   width: 100%;
   margin-top: 10px;
+  transition: background-color var(--animation);
+}
+.btn:hover, .btn:focus{
+  background-color: var(--header-btn-hover);
 }
 
 .eye {
@@ -164,10 +185,6 @@
   right: 18px;
 }
 
-.avatarBig {
-  width: 68px;
-  height: 68px;
-}
 
 .avatar {
   display: block;

src/index.css

@@ -25,6 +25,7 @@
   --background-color: #f4f4f4;
   --btn-color: #bedbb0;
   --btn-hover: #9dc888;
+  --btn-hover2:#f0fde9;
   --line: rgba(22, 22, 22, 0.5);
   --icons: rgba(22, 22, 22, 0.5);
   --icons-hover: rgba(22, 22, 22, 1);
@@ -57,6 +58,7 @@
   --btn-active: var(--green);
   --add-img: var(--green);
   --header-btn: var(--green);
+  --header-btn-hover:#9dc888;
   --header-avatar: url(https://res.cloudinary.com/dqwyuuuzd/image/upload/v1718470207/p8idpbdlblbi3p16ubzp.jpg);
   --filter-line: rgba(22, 22, 22, 0.1);
   --filter-sa: rgba(22, 22, 22, 0.5);
@@ -99,6 +101,7 @@
   --background-color: var(--violet);
   --btn-color: #b8bcfd;
   --btn-hover: #9da2fa;
+  --btn-hover2:#e4e5ff;
   --line: rgba(255, 255, 255, 0.5);
   --icons: rgba(22, 22, 22, 0.5);
   --icons-hover: rgba(22, 22, 22, 1);
@@ -131,6 +134,7 @@
   --btn-active: var(--violet);
   --add-img: #ecedfd;
   --header-btn: var(--violet);
+  --header-btn-hover:#6f73ca;
   --header-avatar: url(https://res.cloudinary.com/dqwyuuuzd/image/upload/v1718616860/user_uw4dwo.png);
   --filter-line: rgba(22, 22, 22, 0.1);
   --filter-sa: rgba(22, 22, 22, 0.5);
@@ -174,6 +178,7 @@
   --background-color: #333333;
   --btn-color: #bedbb0;
   --btn-hover: #9dc888;
+  --btn-hover2:#2c2c2c;
   --line: rgba(255, 255, 255, 0.5);
   --icons: rgba(255, 255, 255, 0.5);
   --icons-hover: rgba(255, 255, 255, 1);
@@ -206,6 +211,7 @@
   --btn-active: var(--green);
   --add-img: var(--green);
   --header-btn: var(--green);
+  --header-btn-hover:#9dc888;
   --header-avatar: url(https://res.cloudinary.com/dqwyuuuzd/image/upload/v1718235453/pojpj365oqqbots9321l.png);
   --filter-line: rgba(255, 255, 255, 0.1);
   --filter-sa: rgba(255, 255, 255, 0.5);
@@ -240,6 +246,9 @@
  --calendar-hover-box:var(--green);
  --calendar-hover-text:var(--black);
 
+
+ 
+
 }
 
 html {