From 6dcf3de29e990141b58b6f074d5b62ca479c495a Mon Sep 17 00:00:00 2001 From: smanylov Date: Wed, 15 Apr 2026 19:36:48 +0700 Subject: [PATCH] change matched table styles --- src/app/styles/variable.scss | 3 +- src/app/styles/violation-details.scss | 74 +++++++++++++++++++-------- 2 files changed, 54 insertions(+), 23 deletions(-) diff --git a/src/app/styles/variable.scss b/src/app/styles/variable.scss index a7a8be8..390cd9a 100644 --- a/src/app/styles/variable.scss +++ b/src/app/styles/variable.scss @@ -28,7 +28,8 @@ $color-document: #a561e6; $status-new: #fab005; $status-showed: #5a6e8a; -$status-in-work: #3b82f6; +/* $status-in-work: #3b82f6; */ +$status-in-work: #6366f1; $authorized-use: #2ecc71; :root { diff --git a/src/app/styles/violation-details.scss b/src/app/styles/violation-details.scss index 6512d5e..7f26299 100644 --- a/src/app/styles/violation-details.scss +++ b/src/app/styles/violation-details.scss @@ -158,11 +158,15 @@ } .btn-primary-small { - background: linear-gradient(135deg, #6366f1, #8b5cf6); - color: white; + /* background: linear-gradient(135deg, #6366f1, #8b5cf6); + color: white; */ + + border: 2px solid v.$status-in-work; + color: v.$status-in-work; &:hover { - box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); + background: v.$status-in-work; + color: white; } } @@ -227,6 +231,8 @@ &-left { display: flex; flex-direction: column; + flex: 0 0 auto; + width: 140px; } &-right { @@ -237,25 +243,28 @@ } .source-image { - max-height: 80%; - min-height: 50px; - height: 100%; + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + + background: #f5f5f5; + border-radius: 8px; position: relative; + overflow: hidden; img { - position: relative !important; - height: 100% !important; - border-radius: 8px; - width: auto !important; + object-fit: contain; } } .source-url-block { margin-top: auto; + width: 100%; + word-break: break-word; } .source-url { - color: #6366f1; + color: v.$status-in-work; font-weight: 600; font-size: 14px; text-decoration: none; @@ -315,7 +324,9 @@ } &.authorized_use { - background: v.$authorized-use; + /* background: v.$authorized-use; */ + color: v.$authorized-use; + background: #2ecc7027; } } @@ -348,14 +359,19 @@ .btn-resolve { /* background: linear-gradient(135deg, #10b981, #059669); */ - background: #10b981; - color: white; + /* background: #10b981; + color: white; */ padding: 12px 30px; white-space: nowrap; + color: #10b981; + border: 2px solid #10b981; + font-weight: 700; &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); + /* transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); */ + background: #10b981; + color: white; } } @@ -458,6 +474,7 @@ &-right-side { display: flex; flex-direction: column; + justify-content: space-between; /* gap: 10px; */ } @@ -469,8 +486,13 @@ } a { - color: #6366f1; + /* color: v.$text-p; */ word-break: break-all; + font-weight: 500; + + &:hover { + text-decoration: underline; + } } } @@ -479,6 +501,7 @@ gap: 10px; align-items: center; margin-top: auto; + display: none; .source-status { margin-bottom: 0; @@ -599,16 +622,23 @@ } .btn-primary { - background: v.$bg-hover; - color: v.$text-p; - border: 2px solid transparent; padding: 6px 30px; + color: v.$status-in-work; + border: 2px solid v.$status-in-work; + + background: v.$white; + + &.active { - background: linear-gradient(135deg, v.$p-color, v.$s-color); - /* background: #3b82f6; */ + /* background: v.$status-in-work; color: v.$white; + border: 2px solid transparent; */ border: 2px solid transparent; + + color: white; + background: v.$status-in-work; + } } }