diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SettingsSso/SSODocPanel/sso-doc-panel.less b/openmetadata-ui/src/main/resources/ui/src/components/SettingsSso/SSODocPanel/sso-doc-panel.less index 5a4b89ac245..becfada0e36 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/SettingsSso/SSODocPanel/sso-doc-panel.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/SettingsSso/SSODocPanel/sso-doc-panel.less @@ -18,7 +18,7 @@ display: flex; align-items: center; gap: @padding-xs; - margin-bottom: @size-sm - 2px; + padding: @size-lg; .sso-provider-icon { display: flex; @@ -31,6 +31,7 @@ font-weight: 600; color: @grey-900; line-height: @size-lg; + font-size: 18px; } } @@ -41,7 +42,7 @@ h4, h5, h6 { - font-size: @font-size-base; + font-size: 18px; font-weight: 600; line-height: @size-mlg; padding-bottom: @size-xs; @@ -53,17 +54,14 @@ background: @primary-50; border-left: @size-xxs solid @primary-6; - box-shadow: @box-shadow-highlight-light; - animation: highlightPulse 0.6s ease-in-out; - margin: 0; &[data-highlight-position='first'] { - padding-left: @size-xs; padding-top: @size-xs; + padding-bottom: @size-xs; border-bottom: none; h3 { - padding: 0; + padding: 0 @size-lg; } } @@ -88,10 +86,21 @@ h3 { color: @grey-800; - font-size: @font-size-base; + font-size: 18px; + padding: 0 @size-lg; font-weight: 600; border-bottom: none; padding-bottom: @padding-xs; + margin: 24px 0px 10px 0px; + + // Add margin after the entire section (after h3 and its siblings) + ~ h3 { + margin-top: @size-lg; + } + + ~ ul { + padding: 0 @size-lg 0 40px; + } } h4 { @@ -100,19 +109,23 @@ font-weight: 600; } + h6 { + font-size: 18px; + } + ul { - margin-bottom: @padding-md; + padding: 0 @size-lg @size-md @size-lg + @size-mlg; + margin-bottom: @size-lg; &[data-highlighted='true'] { background: @primary-50; border-left: @size-xxs solid @primary-6; margin: 0; - animation: highlightPulse 0.6s ease-in-out; &[data-highlight-position='first'] { border-bottom: none; - padding-left: @size-xs; + padding-left: @size-lg + @size-mlg; } &[data-highlight-position='middle'] { @@ -129,12 +142,18 @@ } li { - margin-bottom: @padding-xs; + margin-bottom: @padding-xss; line-height: @size-sm + 2px; font-size: @font-size-base; font-weight: 400; color: @grey-800; + // Remove padding for paragraphs inside list items + p { + padding: 0 !important; + margin: 0 0 @size-lg 0; + } + strong { color: @grey-800; font-weight: 600; @@ -143,35 +162,44 @@ } p { - margin-bottom: @padding-md; - margin-top: 0; + padding: 0 @size-lg; + margin-bottom: @size-lg; line-height: @size-mlg; font-size: @font-size-base; font-weight: 400; color: @grey-800; + // Remove padding for paragraphs that can be highlighted + &[data-highlighted] { + padding: 0 !important; + } + &[data-highlighted='true'] { background: @primary-50; border: 1px solid @primary-6; border-left: @size-xxs solid @primary-6; padding: @padding-mlg @padding-md; margin: 0; - animation: highlightPulse 0.6s ease-in-out; &[data-highlight-position='first'] { border-radius: @border-rad-sm @border-rad-sm 0 0; border-bottom: none; + margin: 0px; + padding: 0px !important; } &[data-highlight-position='middle'] { border-radius: 0; border-top: none; border-bottom: none; + padding: 0px; } &[data-highlight-position='last'] { border-radius: 0 0 @border-rad-sm @border-rad-sm; border-top: none; + padding: 0px !important; + margin: 0px !important; } } } @@ -227,21 +255,3 @@ } } } - -@keyframes highlightPulse { - 0% { - transform: translateX(-@size-xxs / 2); - box-shadow: 0 0 0 rgba(21, 112, 239, 0.3); - border-left-width: @size-xxs; - } - 50% { - transform: translateX(0); - box-shadow: @box-shadow-highlight-medium; - border-left-width: @border-rad-xs - @size-xxs; - } - 100% { - transform: translateX(0); - box-shadow: @box-shadow-highlight-light; - border-left-width: @size-xxs; - } -}