TRI-283: end adaptive 1920 + start header

2024-11-19 00:25:47 +03:00
parent da6f47f439
commit 4996d02f71
36 changed files with 2118 additions and 384 deletions
--- a/static/css/moover/diff.css
+++ b/static/css/moover/diff.css
@@ -0,0 +1,159 @@
+.diff {
+  margin-bottom: 166px;
+}
+
+@media (min-width: 1720px) {
+  .diff {
+    margin-bottom: 172px;
+  }
+}
+
+.diff .title {
+  width: 60%;
+  margin-bottom: 65px;
+}
+
+@media (min-width: 1720px) {
+  .diff .title {
+    width: 49%;
+    margin-bottom: 60px;
+  }
+}
+
+.diff__grid {
+  display: flex;
+  position: relative;
+  margin-bottom: 30px;
+}
+
+.diff__grid::before {
+  content: '';
+  position: absolute;
+  height: 96%;
+  width: 5px;
+  border-radius: 5px;
+  background-color: #EDEDED;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+}
+
+.diff__coll {
+  width: 50%;
+}
+
+.diff__coll.left {
+  margin-right: 29px;
+}
+
+.diff__coll.left .diff__coll-title {
+  padding-left: 39px;
+}
+
+@media (min-width: 1720px) {
+  .diff__coll.left .diff__coll-title {
+    padding-left: 24px;
+  }
+}
+
+.diff__coll.right {
+  margin-left: 29px;
+}
+
+.diff__coll.right .diff__coll-title {
+  padding-right: 39px;
+}
+
+@media (min-width: 1720px) {
+  .diff__coll.right .diff__coll-title {
+    padding-right: 24px;
+  }
+}
+
+.diff__coll-title {
+  margin-bottom: 38px;
+}
+
+.diff__item {
+  position: relative;
+  text-align: left;
+  padding-left: 10px;
+  padding-top: 11px;
+  padding-bottom: 11px;
+  display: flex;
+  gap: 11px;
+  align-items: center;
+  background-color: #FFFFFF;
+  border-radius: 15px;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 28px;
+  margin-bottom: 35px;
+  cursor: default;
+}
+
+@media (min-width: 1720px) {
+  .diff__item {
+    padding-top: 22px;
+    padding-bottom: 20px;
+    padding-left: 27px;
+    gap: 20px;
+    margin-bottom: 38px;
+  }
+}
+
+.diff__item:last-child {
+  margin-bottom: 0;
+}
+
+.diff__item:hover .diff__status::before {
+  scale: 1.2;
+}
+
+.diff__status {
+  position: relative;
+  height: 48px;
+  width: 48px;
+  border-radius: 5px;
+  flex-shrink: 0;
+}
+
+@media (min-width: 1720px) {
+  .diff__status {
+    border-radius: 12px;
+  }
+}
+
+.diff__status::before {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: 0% 15%;
+}
+
+.diff__status::before {
+  content: '';
+  width: 36px;
+  height: 36px;
+}
+
+.diff__item--done .diff__status {
+  background-color: #CCF9D9;
+}
+
+.diff__item--done .diff__status::before {
+  width: 26px;
+  height: 26px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+}
+
+.diff__item--error .diff__status {
+  background-color: #F9CCCC;
+}
+
+.diff__item--error .diff__status::before {
+  width: 36px;
+  height: 36px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+}