|
|
@@ -581,7 +581,7 @@
|
|
|
flex: 1 1 auto;
|
|
|
height: auto;
|
|
|
min-height: 0;
|
|
|
- grid-template-columns: minmax(0, 1.16fr) minmax(230px, 0.44fr) minmax(0, 1.4fr);
|
|
|
+ grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.72fr) minmax(0, 1.28fr);
|
|
|
grid-template-rows: minmax(0, 0.95fr) minmax(0, 1fr);
|
|
|
grid-template-areas:
|
|
|
'annual metrics pie'
|
|
|
@@ -604,6 +604,7 @@
|
|
|
grid-area: metrics;
|
|
|
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
|
|
|
gap: 14px;
|
|
|
+ min-width: 330px;
|
|
|
min-height: 0;
|
|
|
}
|
|
|
|
|
|
@@ -929,11 +930,12 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
min-height: 44px;
|
|
|
- padding: 0 44px 12px 0;
|
|
|
+ padding: 0 34px 12px 0;
|
|
|
color: #f2fbfb;
|
|
|
- font-size: 16px;
|
|
|
+ font-size: 17px;
|
|
|
font-weight: 700;
|
|
|
line-height: 1.35;
|
|
|
+ white-space: nowrap;
|
|
|
text-shadow: 0 0 12px rgba(82, 217, 230, 0.44);
|
|
|
border-bottom: 1px solid rgba(82, 217, 230, 0.18);
|
|
|
|
|
|
@@ -974,8 +976,8 @@
|
|
|
justify-content: space-between;
|
|
|
min-height: 52px;
|
|
|
margin: 0;
|
|
|
- padding: 0 12px 0 16px;
|
|
|
- gap: 12px;
|
|
|
+ padding: 0 14px 0 18px;
|
|
|
+ gap: 18px;
|
|
|
border-left: 3px solid rgba(82, 217, 230, 0.38);
|
|
|
border-radius: 2px;
|
|
|
background:
|
|
|
@@ -1032,10 +1034,10 @@
|
|
|
|
|
|
span:last-child {
|
|
|
position: relative;
|
|
|
- flex: 0 1 132px;
|
|
|
+ flex: 0 0 clamp(150px, 48%, 220px);
|
|
|
min-width: 0;
|
|
|
- max-width: 150px;
|
|
|
- padding: 4px 8px;
|
|
|
+ max-width: 220px;
|
|
|
+ padding: 5px 10px;
|
|
|
overflow: hidden;
|
|
|
color: #76e8bf;
|
|
|
font-size: clamp(14px, 0.82vw, 18px);
|
|
|
@@ -1226,7 +1228,53 @@
|
|
|
}
|
|
|
*/
|
|
|
|
|
|
- @media (max-width: 1366px) {
|
|
|
+ @media (max-width: 1680px) {
|
|
|
+ .home-screen {
|
|
|
+ padding: 12px 14px 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-header {
|
|
|
+ flex: 0 0 60px;
|
|
|
+ min-height: 60px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding: 0 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-grid {
|
|
|
+ grid-template-columns: minmax(0, 1fr) minmax(300px, 0.68fr) minmax(0, 1.18fr);
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-cell--metrics {
|
|
|
+ min-width: 300px;
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-metric {
|
|
|
+ padding: 14px;
|
|
|
+
|
|
|
+ > .header {
|
|
|
+ min-height: 40px;
|
|
|
+ padding-right: 28px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ > .content {
|
|
|
+ p {
|
|
|
+ min-height: 48px;
|
|
|
+ padding: 0 12px 0 14px;
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:last-child {
|
|
|
+ flex-basis: clamp(128px, 46%, 190px);
|
|
|
+ max-width: 190px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 1440px) {
|
|
|
.home-screen {
|
|
|
height: auto;
|
|
|
min-height: calc(100vh - 92px);
|
|
|
@@ -1237,25 +1285,31 @@
|
|
|
display: grid;
|
|
|
height: auto;
|
|
|
min-height: 0;
|
|
|
- grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
- grid-template-rows: 320px 320px 340px;
|
|
|
+ grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
|
|
|
+ grid-template-rows: 310px 310px 340px;
|
|
|
grid-template-areas:
|
|
|
- 'annual annual'
|
|
|
- 'metrics pie'
|
|
|
+ 'annual metrics'
|
|
|
+ 'pie metrics'
|
|
|
'quality delivery';
|
|
|
gap: 12px;
|
|
|
}
|
|
|
+
|
|
|
+ .screen-cell--metrics {
|
|
|
+ min-width: 320px;
|
|
|
+ grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- @media (max-width: 768px) {
|
|
|
+ @media (max-width: 1100px) {
|
|
|
.home-screen {
|
|
|
- min-height: calc(100vh - 92px);
|
|
|
- padding: 8px;
|
|
|
+ padding: 10px;
|
|
|
}
|
|
|
|
|
|
.screen-header {
|
|
|
align-items: flex-start;
|
|
|
flex-direction: column;
|
|
|
+ height: auto;
|
|
|
+ min-height: 0;
|
|
|
padding: 12px;
|
|
|
}
|
|
|
|
|
|
@@ -1281,7 +1335,7 @@
|
|
|
|
|
|
.screen-grid {
|
|
|
grid-template-columns: minmax(0, 1fr);
|
|
|
- grid-template-rows: 320px 450px 340px 320px 360px;
|
|
|
+ grid-template-rows: 320px 430px 340px 320px 360px;
|
|
|
grid-template-areas:
|
|
|
'annual'
|
|
|
'metrics'
|
|
|
@@ -1292,12 +1346,97 @@
|
|
|
}
|
|
|
|
|
|
.screen-cell--metrics {
|
|
|
- grid-template-rows: 220px 220px;
|
|
|
+ min-width: 0;
|
|
|
+ grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .home-screen {
|
|
|
+ min-height: calc(100vh - 92px);
|
|
|
+ padding: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-grid {
|
|
|
+ grid-template-columns: minmax(0, 1fr);
|
|
|
+ grid-template-rows: 300px 400px 330px 300px 340px;
|
|
|
+ grid-template-areas:
|
|
|
+ 'annual'
|
|
|
+ 'metrics'
|
|
|
+ 'pie'
|
|
|
+ 'quality'
|
|
|
+ 'delivery';
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-cell--metrics {
|
|
|
+ min-width: 0;
|
|
|
+ grid-template-rows: 195px 195px;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.screen-metric {
|
|
|
height: 100%;
|
|
|
+
|
|
|
+ > .header {
|
|
|
+ white-space: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ > .content {
|
|
|
+ p {
|
|
|
+ gap: 8px;
|
|
|
+ padding: 0 10px 0 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:last-child {
|
|
|
+ flex: 1 1 54%;
|
|
|
+ max-width: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-height: 820px) and (min-width: 1441px) {
|
|
|
+ .home-screen {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-header {
|
|
|
+ flex-basis: 58px;
|
|
|
+ min-height: 58px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-grid {
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-panel__header {
|
|
|
+ min-height: 48px;
|
|
|
+ padding: 0 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen-metric {
|
|
|
+ padding: 13px 14px;
|
|
|
+
|
|
|
+ > .header {
|
|
|
+ min-height: 38px;
|
|
|
+ padding-bottom: 9px;
|
|
|
+ }
|
|
|
+
|
|
|
+ > .content {
|
|
|
+ padding-top: 8px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ min-height: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p + p {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|