modules and payments management, bug fixes

static/styles/main.css

@@ -369,6 +369,7 @@ input[type="number"] {
 .form-cell-wrapper {
   position: relative;
   margin-bottom: 13px;
+  display: flex;
 }
 
 .form-cell-wrapper select {
@@ -731,7 +732,8 @@ header.menu-opened ul.menu li.menu-item:nth-child(7) {
   padding: 0 24px;
 }
 
-.sections a {
+.sections a,
+.settings-sections a {
   padding: 5px;
   border-radius: 6px;
   color: rgba(0, 0, 0, 0.6);
@@ -748,7 +750,8 @@ header.menu-opened ul.menu li.menu-item:nth-child(7) {
   user-select: none;
 }
 
-.sections a:hover {
+.sections a:hover,
+.settings-sections a:hover {
   background: rgba(0, 0, 0, 0.08);
   color: #0f0f10;
 }
@@ -760,10 +763,24 @@ header.menu-opened ul.menu li.menu-item:nth-child(7) {
   border-bottom: 2px solid #000;
 }
 
-.sections a.selected:hover {
+.sections a.selected:hover,
+.settings-sections a.selected:hover {
   background: transparent;
 }
 
+.settings-sections {
+  display: inline-flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.settings-sections a.selected {
+  color: #0f0f10;
+  border-radius: 1px;
+  padding: 10px;
+  border-top: 2px solid #000;
+}
+
 .content-bg {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -780,6 +797,30 @@ header.menu-opened ul.menu li.menu-item:nth-child(7) {
   gap: 26px;
 }
 
+.settings-content {
+  width: 1200px;
+  margin: 0 auto 48px auto;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 26px;
+}
+
+input {
+  color: rgba(0, 0, 0, 0.7);
+  font-weight: 400;
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  outline: none;
+  background-repeat: no-repeat;
+  transition: 0.2s;
+  float: left;
+  border-radius: 6px;
+  height: 38px;
+  padding-left: 12px;
+  font-size: 18px;
+}
+
 .search-input {
   width: calc(100% - 40px);
   color: rgba(0, 0, 0, 0.7);
@@ -799,12 +840,37 @@ header.menu-opened ul.menu li.menu-item:nth-child(7) {
   background-image: url("../img/magnifyingglass.svg");
 }
 
+.add-input {
+  width: calc(100% - 40px);
+  color: rgba(0, 0, 0, 0.7);
+  font-weight: 400;
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  outline: none;
+  background-repeat: no-repeat;
+  transition: 0.2s;
+  float: left;
+  border-radius: 6px;
+  height: 38px;
+  background-size: 18px 18px;
+  background-position: 12px 11px;
+  padding-left: 40px;
+  font-size: 18px;
+  background-image: url("../img/plus.svg");
+}
+
 .search-input:focus,
-.search-input:hover {
+.search-input:hover,
+.add-input:focus,
+.add-input:hover,
+input:focus,
+input:hover {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
-.search-input::placeholder {
+.search-input::placeholder,
+.add-input::placeholder,
+input::placeholder {
   color: rgba(0, 0, 0, 0.25);
   opacity: 100%;
 }
@@ -1787,6 +1853,7 @@ li {
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: #fff;
   width: 100%;
+  min-height: 250px;
 }
 
 .progress-modules-section {
@@ -1846,6 +1913,10 @@ li {
   display: flex;
 }
 
+.empty-span-area.full {
+  height: 100%;
+}
+
 .empty-span {
   font-size: 18px;
   width: fit-content;
@@ -1879,6 +1950,7 @@ li {
   gap: 8px;
   padding: 0 14px;
   cursor: pointer;
+  z-index: 3;
 }
 
 .upload-button:hover {
@@ -1953,6 +2025,7 @@ li {
   border-radius: 15px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: #fff;
+  min-height: 250px;
 }
 
 .setting-section {
@@ -1963,6 +2036,11 @@ li {
   position: relative;
   border-radius: 6px;
   border: 1px solid #ebebeb;
+  opacity: 1;
+}
+
+.setting-section.hidden {
+  opacity: 0;
 }
 
 .setting-top {
@@ -2066,6 +2144,7 @@ select {
   border: 1px solid #000;
   cursor: pointer;
   transition: 0.3s;
+  z-index: 3;
 }
 
 .setting-bottom button:hover {
@@ -2077,25 +2156,25 @@ select {
   background-color: rgba(0, 0, 0, 0.7);
 }
 
-.setting-bottom button.inactive,
-.setting-bottom button.inactive:hover,
-.setting-bottom button.inactive:active {
+button.inactive,
+button.inactive:hover,
+button.inactive:active {
   color: rgb(143, 143, 143);
   background: rgb(242, 242, 242);
   border: 1px solid rgba(143, 143, 143, 0.2);
   cursor: not-allowed;
 }
 
-.setting-bottom #deleteUser {
+.setting-bottom .delete {
   background: rgb(255, 69, 58);
   border: 1px solid rgb(255, 69, 58);
 }
 
-.setting-bottom #deleteUser:hover {
+.setting-bottom .delete:hover {
   background: rgba(255, 69, 58, 0.85);
 }
 
-.setting-bottom #deleteUser:active {
+.setting-bottom .delete:active {
   color: rgba(255, 255, 255, 0.85);
   background: rgba(255, 69, 58, 0.7);
 }
@@ -2343,6 +2422,38 @@ input[type="checkbox"] {
   background: rgba(255, 69, 58, 0.7);
 }
 
+.progress-bar {
+  width: 100%;
+  height: 20px;
+  background-color: #eee;
+  margin-top: 10px;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.progress-fill {
+  height: 100%;
+  background-color: rgb(255, 183, 75);
+  border-radius: 8px;
+  transition: width 0.7s;
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    height: 0;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.buttons {
+  z-index: 3;
+}
+
 @media (max-width: 1690px) {
   /* при разрешении монитора до 1690 пикселей */