Commit 60961ed9 authored by prathiksha's avatar prathiksha
Browse files

Bug 1641047 - Update styling in the monitor card body in protections...

Bug 1641047 - Update styling in the monitor card body in protections dashboard. r=ewright, a=jcristau

Differential Revision: https://phabricator.services.mozilla.com/D76923
parent 35f33d1d
......@@ -691,14 +691,15 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
.monitor-breaches-wrapper {
display: grid;
grid-area: 2 / 1 / 2 / 7;
grid: 1fr 80px auto / repeat(6, 1fr);
grid: 1fr auto / repeat(6, 1fr);
margin-bottom: 24px;
}
.monitor-partial-breaches-wrapper {
display: grid;
grid-area: 2 / 1 / 2 / 8;
grid-template-columns: repeat(7, 1fr);
margin-block: 30px;
margin-block: 24px;
}
.monitor-partial-breaches-header {
......@@ -719,19 +720,20 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
margin-inline-start: 15px;
border-radius: 4px;
height: 25px;
box-shadow: 0 0 0 1px #cdcdd4;
box-shadow: 0 0 0 1px rgba(202, 201, 213, 0.5);
border: none;
background: linear-gradient(-90deg, #ff9100 0%, #f10366 50%, #6173ff 100%);
background: linear-gradient(-45deg, #0250BB 0%, #9059FF 100%);
direction: rtl;
}
.progress-bar:dir(rtl) {
direction: ltr;
background: linear-gradient(-90deg, #6173ff 0%, #f10366 50%, #ff9100 100%);
background: linear-gradient(-45deg, #0250BB 0%, #9059FF 100%);
}
.progress-bar::-moz-progress-bar {
background: #FFFFFF;
border-radius: 0 4px 4px 0;
}
.monitor-partial-breaches-motivation-text {
......@@ -742,21 +744,25 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
}
.monitor-partial-breaches-motivation-wrapper {
grid-area: 1 / 1 / 1 / 5;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-area: 2 / 1 / 2 / 8;
}
#monitor-partial-breaches-link {
margin-top: 3px;
margin-block: auto;
grid-area: 1 / 5 / 1 / 7;
}
#monitor-partial-breaches-motivation-title {
display: block;
font-weight: 700;
grid-area: 1 / 1 / 1 / 7;
margin-inline-end: 15px;
}
#monitor-partial-breaches-motivation-desc {
display: block;
grid-area: 1 / 1 / 1 / 5;
margin-block: auto;
}
.monitor-breaches-header {
......@@ -816,6 +822,11 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
align-items: center;
}
.monitor-card .card-body {
padding-top: 0;
border-block-start: none;
}
.monitor-block {
display: flex;
flex-direction: column;
......
......@@ -211,11 +211,11 @@
</div>
<progress class="progress-bar" max="100"></progress>
<div class="monitor-partial-breaches-motivation-text">
<span id="monitor-partial-breaches-motivation-title"></span>
<div class="monitor-partial-breaches-motivation-wrapper">
<span id="monitor-partial-breaches-motivation-title"></span>
<span id="monitor-partial-breaches-motivation-desc" class="content" data-l10n-id="monitor-partial-breaches-motivation-description"></span>
<a id="monitor-partial-breaches-link" target="_blank" data-l10n-id="monitor-resolve-breaches-link"></a>
</div>
<a id="monitor-partial-breaches-link" target="_blank" data-l10n-id="monitor-resolve-breaches-link"></a>
</div>
</div>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment