diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css index fb2c1b9f..20a3b139 100644 --- a/blocks/gmo-program-details/gmo-program-details.css +++ b/blocks/gmo-program-details/gmo-program-details.css @@ -1,9 +1,11 @@ :root { border-bottom: none; } + body { background-color: rgb(247, 246, 246); } + .back-button { margin-top: 20px; background-color: #FFFFFF; @@ -26,6 +28,7 @@ body { font-weight: bold; } } + .gmo-program-details.block { & .h1 { font: normal normal bold 18px/27px Adobe Clean; @@ -133,11 +136,13 @@ body { } } } + .tab.two-column { display: flex; flex-direction: row; justify-content: space-between; } + .overview-wrapper { display: flex; flex-direction: column; @@ -168,6 +173,7 @@ body { cursor: pointer; } } + .kpis-wrapper { margin-top: 30px; & ul { @@ -181,6 +187,7 @@ body { margin-top: 15px; } } + .use-cases-wrapper { margin-bottom: 30px; } @@ -218,6 +225,7 @@ body { flex-direction: column; margin-top: 20px; } + .links-wrapper { margin-top: 30px; & .links { @@ -231,6 +239,7 @@ body { color: #0D66D0; } } + .infocards-wrapper { margin-right: 40px; & .card { @@ -244,6 +253,7 @@ body { } } } + .card { & .card-heading { margin-top: 10px; @@ -259,6 +269,7 @@ body { font-size: 14px; } } + .milestone, .card-content { font: normal normal normal 14px/21px Adobe Clean; & .icon { @@ -271,6 +282,7 @@ body { margin-bottom: 5px; } } + .deliverables { & > .page-heading { display: flex; @@ -306,6 +318,7 @@ body { } } } + .table-wrapper { font: normal normal bold 14px/21px Adobe Clean; & > .table-header { @@ -323,6 +336,7 @@ body { top: 0; } } + .table-content { max-height: 45vh; min-height: 7vh; @@ -331,10 +345,12 @@ body { display: none; } } + .inactive { display: none !important; visibility: hidden; } + .row { height: 56px; &:not(:last-child) { @@ -343,10 +359,11 @@ body { &.datarow { display: flex; align-items: center; - height: 88px; + height: auto; /* Set to auto to accommodate varying heights */ font-weight: 200; & .property { - line-height: 88px; + line-height: normal; /* Adjust line-height to normal */ + padding: 10px 0; /* Add padding for better spacing */ } &:first-child, &:nth-child(2) { border-top: 2px solid #F4F4F4; @@ -359,7 +376,7 @@ body { & .date-wrapper { display: flex; flex-direction: column; - justify-content:center; + justify-content: center; & > .completion-date, .revised-date { line-height: 21px; } @@ -400,6 +417,7 @@ body { justify-content: center; } } + .subheader { &:nth-child(2) { border-top: 2px solid #F4F4F4; @@ -444,12 +462,13 @@ body { border-radius: 3px; } } - } + .header-row3:hover .date-tooltip { visibility: visible; opacity: 1; } + .date-tooltip { background-color: #D3D3D3; border-radius: 2px; @@ -462,32 +481,50 @@ body { font: normal normal normal 12px/17px Adobe Clean; margin-left: 100px; } + .column1 { margin-left: 45px; } + .column1 { width: 200px; } + .column3 { width: 140px; } -.column4, & .column5, & .column6 { + +.column4, .column5, .column6 { width: 110px; } + .column2 { width: 130px; } + .column7 { width: 170px; } + .column8 { width: 120px; } + .column9 { width: 150px; + word-wrap: break-word; + white-space: normal; + line-height: 1.2; } + .table-column { &:not(:last-child) { margin-right: 85px; } } + +@media (max-width: 1255px) { + .column9 { + width: 100px; + } +}