fixed

frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css

@@ -0,0 +1,152 @@
+.modalContainer {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  z-index: 50;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  justify-content: center;
+  background-color: #0000004d;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 1200px;
+  border-radius: 6px;
+  background: #21232f;
+  height: 100%;
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-5%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.header {
+  display: flex;
+  padding: 12px 12px 12px 16px;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.close {
+  cursor: pointer;
+}
+.statusContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.statusContainer > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+.statusContainer > div > p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.statusContainer > div > div {
+  display: flex;
+  padding: 1px 6px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border-radius: 100px;
+  background: rgba(66, 180, 78, 0.1);
+}
+.statusContainer > div > div > p {
+  color: #72fd7f;
+  text-align: center;
+  font-feature-settings:
+    "liga" off,
+    "clig" off;
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px; /* 183.333% */
+}
+.logContentContainer {
+  width: 100%;
+  background-color: rebeccapurple;
+  flex: 1;
+  overflow-y: auto;
+}
+.footer {
+  display: flex;
+  padding: 12px 16px;
+  align-items: center;
+  gap: 48px;
+  align-self: stretch;
+}
+.footer > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  flex: 1 0 0;
+}
+.autoScroll {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.autoScroll input[type="checkbox"] {
+  accent-color: #5980f1;
+  height: 16px;
+  width: 16px;
+  background: white;
+}
+
+.autoScroll p {
+  color: #fff;
+
+  /* Base/Medium */
+  font-family: Inter;
+  font-size: 0.9rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.08px;
+}
+.linesCount {
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border-radius: 6px;
+  background: rgba(0, 101, 244, 0.1);
+}
+.linesCount p {
+  color: #fff;
+  font-family: Inter;
+  font-size: 0.9rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0.07px;
+}