/* CSS Document */ /* SPNG Global - used on all pages */ .ng-cloak { display: none !important; } abbr[title], acronym[title] { text-decoration: none; } mark { background: none; color: inherit; font-weight: normal; } #ietran_ui_langselect { font-family: inherit !important; font-size: inherit !important; height: 2.5rem; padding: .5rem; } #ibm-translate-module p { float: right; } #ibm-top { background-color: transparent; } #ibm-top.spng-omnibox-open { min-height: 1007px; } .ibm-sitenav-menu-container { z-index: 815; } #ibm-content-main { min-height: 700px; } #ibm-content-main > div[ng-view].ng-scope + div.ibm-columns > div.ibm-col-1-1 > #spng-page-spinner { display: none; } #ibm-content-main > div.ibm-columns:first-child > div.ibm-col-1-1 > div.ibm-rule { display: none; } .ibm-landing-page ul#ibm-navigation-trail > li > a[href*='/mysupport/s/'] { color: #c8d2d2; } #spng-top-tools { background-color: #f9f9f9; min-height: 0; padding: 5px 0; } #home { margin-bottom: 2rem; } span.spng-icon-link { display: inline-block; margin: 70px 10px 0; } span.whats-new { font-size: 14px; color: white; padding-left: 18px; text-decoration: underline; } span.whats-new a { color: #ffffff !important; } span.whats-new a:visited { color: #ffffff !important; } .nowrap { white-space: nowrap; } #home-icons .ibm-columns .ibm-col-6-1 a:hover span.spng-icon-link, #home-icons .ibm-columns .ibm-col-6-1 a:focus span.spng-icon-link { color: white; } /*TopLinks menus Ends Here */ #searchFilter-label { width: 570px; } /* CONTENT CARD STYLES - BEGIN */ .ibm-card-spng { min-height: 260px; position: relative; } html.ibm-grid-small .ibm-card-spng, html.ibm-grid-xsmall .ibm-card-spng, html.touchevents .ibm-card-spng { min-height: unset; } .ibm-col-6-2 .ibm-card-spng, .ibm-col-6-4 .ibm.-card-spng { height: 260px; overflow: hidden; } html.ibm-grid-small .ibm-col-6-2 .ibm-card-spng, html.ibm-grid-xsmall .ibm-col-6-2 .ibm-card-spng, html.touchevents .ibm-col-6-2 .ibm-card-spng, html.ibm-grid-small .ibm-col-6-4 .ibm.-card-spng, html.ibm-grid-xsmall .ibm-col-6-4 .ibm.-card-spng, html.touchevents .ibm-col-6-4 .ibm.-card-spng { height: unset; overflow: initial; } .ibm-col-6-2.spng-rows-2 .ibm-card-spng { height: 540px; } /* CONTENT CARD STYLES - END */ div#product-content div[class^=ibm-col-] .ibm-card { /* Allow only one line for each link. */ /* Make sure the "View all ..." link in content cards is always dark gray. */ } div#product-content div[class^=ibm-col-] .ibm-card li a { line-height: 1.62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; } html.ibm-grid-small div#product-content div[class^=ibm-col-] .ibm-card li a, html.ibm-grid-xsmall div#product-content div[class^=ibm-col-] .ibm-card li a, html.touchevents div#product-content div[class^=ibm-col-] .ibm-card li a { text-overflow: initial; white-space: normal; } div#product-content div[class^=ibm-col-] .ibm-card li.spng-view-all-link a, div#product-content div[class^=ibm-col-] .ibm-card li.spng-view-all-link a:link, div#product-content div[class^=ibm-col-] .ibm-card li.spng-view-all-link a:visited, div#product-content div[class^=ibm-col-] .ibm-card li.spng-view-all-link a:hover, div#product-content div[class^=ibm-col-] .ibm-card li.spng-view-all-link a:focus { color: #323232 !important; } /* Avoid link icon clipping in IE (modernizr tags with "unknownX" and "gecko1" classes for IE) */ html.unknownX.gecko1 div#product-content div[class^='ibm-col-'] .ibm-card li a[class*='-link']::before { padding: 1px 0 0 1px; } /*Styles for pop-up links*/ .ibm-popup-link { display: inline-block; margin: 0; padding-left: 2.2em; position: relative; cursor: pointer; } .ibm-link-desc { padding-left: 2.1em; } /* Leadspace */ .spng-home-leadspace { background: url("images/opacity.jpg") no-repeat 100% 0%/cover; background-color: #fff; } .lead-new-link { float: right; margin-top: 0.6em; padding-left: 10px; } .lead-new-link ::before { clear: both; } .lead-new-link ::after { clear: both; } .home-new-link { float: right; margin-top: -30px; } .home-new-link ::before { clear: both; } .home-new-link ::after { clear: both; } .spng-home-title { margin: auto; } .spng-home-title ::after { clear: both; } .spng-home-supp_comm-msg { background: #264a60; } .spng-home-supp_comm-msg > .ibm-columns { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .spng-home-supp_comm-msg > .ibm-columns > .ibm-col-6-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .spng-home-supp_comm-msg > .ibm-columns > .ibm-col-6-2 > p:first-of-type { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .spng-home-red_hat-msg { background-color: #f9f9f9; border-top: 1px solid #ececec; padding: 10px 0; } .spng-home-red_hat-msg p { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .spng-home-red_hat-msg p img { margin-right: 1.5rem; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .spng-home-red_hat-msg p span { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } /* ===== OMNIBOX ===== */ /* #spng-search is the form that wraps the omnibox components */ #spng-search { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 5px auto 5px; position: relative; width: auto; min-width: 320px; } #spng-search * { -webkit-box-sizing: border-box; box-sizing: border-box; } #spng-search > div > p { white-space: nowrap; } @media screen and (max-width: 768px) { #spng-search #spng-search-query { border-radius: 0; font-weight: normal; width: calc(100% - 40px); } #spng-search #spng-search-button::before { font-size: 1.5rem; } } @media screen and (min-width: 580px) { #spng-search #spng-search-button::before { font-size: 2rem; left: -5px; } } @media screen and (max-width: 480px) { #spng-search { margin: 0 auto; width: calc(100% - 40px); max-width: calc(100% - 10px); } #spng-search #spng-search-query { width: calc(100% - 20px); } } /* Wrapper for the omnibox results section we need position relative to frame the reference for the results section, which is position:absolute, letting it be 'outside' the lead space */ #divSearchTypeAheadWrapper { position: relative; } #divSearchTypeAheadWrapper::before { clear: both; } /* Omnibox search results - styles common to all versions. */ #divSearchTypeAhead { border: 1px solid #c8d2d2; background-color: #ffffff; padding: 10px 20px; position: absolute; height: auto; max-height: 400px; min-height: 157px; overflow-y: scroll; right: 0; top: -.5rem; z-index: 9000; /* Shouldn't be needed since screens <= 768px automatically use mobile search. @media only screen and (min-width: 481px) and (max-width: 768px) { width: calc(75% - 42px); min-width: 320px; } */ } #divSearchTypeAhead h2, #divSearchTypeAhead p, #divSearchTypeAhead ul > li { text-align: left; } #divSearchTypeAhead mark { background: none; color: inherit; font-weight: bold; } #divSearchTypeAhead .result_section { clear: both; } #divSearchTypeAhead .category { float: left; width: 120px; padding: 8px; color: #ffffff; text-align: left; } #divSearchTypeAhead .category p { color: #ffffff; } #divSearchTypeAhead .results { float: left; width: 500px; padding: 8px 0 8px 8px; } #divSearchTypeAhead .results ul { margin-top: 0; } #divSearchTypeAhead .results .more { float: right; } #spng-search-button { line-height: 2.5em; position: relative; left: -35px; text-decoration: none; width: 0; } #spng-search-button::before { text-indent: 0; } @media screen and (max-width: 580px) { #spng-search-button { left: 0; } } /* Variations for the home page Omnibox. */ omnibox[size="home"] #spng-search-query { background-color: white; border-color: #c8d2d2 !important; border-radius: 4px 4px 4px 4px; font-weight: normal; margin-bottom: 0; padding: 0 50px 0 10px; text-align: left; width: 44rem; vertical-align: bottom; -webkit-appearance: none; } omnibox[size="home"] #spng-search-query:focus { color: black; } @media screen and (min-width: 481px) and (max-width: 768px) { omnibox[size="home"] #spng-search-query { min-width: 360px; } } @media screen and (max-width: 580px) { omnibox[size="home"] #spng-search-query { padding-right: 40px; text-indent: 0; } } omnibox[size="home"] #spng-search-button { left: -50px; line-height: 2.5em; } omnibox[size="home"] #spng-search-button::before { font-size: 2.5rem; font-weight: bold; } @media screen and (max-width: 580px) { omnibox[size="home"] #spng-search-button { left: -35px; } } omnibox[size="home"] #spng-search-extras { display: none; } omnibox[size="home"] #divSearchTypeAhead { min-width: 556px; width: 44rem !important; top: -1rem; } /* Variations for the secondary (non-home) pages Omnibox. */ omnibox[size="small"] #spng-search { width: auto; } omnibox[size="small"] #spng-search > div { display: -ms-grid; display: grid; -ms-grid-columns: minmax(18rem, 30rem); grid-template-columns: minmax(18rem, 30rem); grid-row-gap: 1rem; -ms-grid-rows: auto auto; grid-template-rows: auto auto; } omnibox[size="small"] #spng-search > div > p { padding-bottom: 0; position: relative; } omnibox[size="small"] #spng-search > div > p #spng-search-query { padding-right: 30px; max-width: 500px !important; width: 100%; } omnibox[size="small"] #spng-search > div > p #spng-search-button { left: unset; position: absolute; right: 30px; top: -3px; } omnibox[size="small"] #spng-search > div > #spng-search-extras { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } omnibox[size="small"] #spng-search > div > #spng-search-extras label { -webkit-box-flex: 1000; -ms-flex: 1000 0 auto; flex: 1000 0 auto; } omnibox[size="small"] #spng-search > div > #spng-search-extras a { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } omnibox[size="small"] #spng-search > div #divSearchTypeAhead { left: 0; margin-top: -10px; max-width: 30rem !important; min-width: 18rem !important; /* These rules shouldn't be needed because mobile search is active at this width. @media screen and (max-width:480px) { width: calc(100% - 92px); min-width: 200px; } */ } /* MEDIA QUERIES STARTS Note - omnibox current defaults to 'mobile mode' for widths <= 768px, aligning media query limit to match - in mobile mode there is no type-ahead support so we don't have to worry about the inline results section */ @media only screen and (max-width: 480px) { #home { min-height: 128px; padding-top: 8px !important; } /* These should not be needed since screens <= 768px automatically use mobile search. .home-search-results { width: calc(100% - 67px); min-width: 200px; padding: 10px 10px 10px 5px; left: 0; margin-left: 0; margin-right: 0; } .home-search-results-wrapper { !* width: calc(100vw - 50px); *! width: 100%; } */ } /* Product optional info (Lenovo link and alert link) colors. */ product-optional-text a.ibm-textcolor-orange-50:link, product-optional-text a.ibm-textcolor-orange-50:visited { color: #d74108; } product-optional-text a.ibm-textcolor-red-50:link, product-optional-text a.ibm-textcolor-red-50:visited { color: #e71d32; } product-optional-text a.ibm-textcolor-blue-50:link, product-optional-text a.ibm-textcolor-blue-50:visited { color: #4178be; } /* Search results formatting */ .ibm-search-results { /* Highlighted keywords/text */ /* Visually left-align the first pagination link (either the Previous link or the page 1 link). */ } .ibm-search-results mark { background: none; color: inherit; font-weight: bold; } .ibm-search-results ul.ibm-pagination > li:first-child > a { margin-left: -8px; } /* Chat Invitation */ #divChatInvite { padding: 5px; z-index: 11000; background-color: #4178be; border: 0 solid #4178be; } #divChatInvite .chatInviteClose { float: right; padding-top: 5px; } #divChatInvite .chatInviteContent { padding: 20px 15px 10px 15px; } .hand-pointer { cursor: pointer; cursor: hand; } /* Overlays */ .WEAContainer { padding: 10px; height: 565px; } .ng-modal-overlay { /* A dark translucent div that covers the whole screen */ position: absolute; z-index: 900; top: 0; left: 0; width: 100%; height: 100%; background-color: #111; opacity: 0.5; } .ng-modal-dialog { /* A centered div above the overlay with a box shadow. */ z-index: 920; position: absolute; width: 750px; /* Default */ /* Center the dialog */ left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); background-color: #ffffff; -webkit-box-shadow: 4px 4px 80px #000; box-shadow: 4px 4px 80px #000; } .ng-modal-dialog-content { padding: 0 20px 0 20px; text-align: left; max-height: 600px; } .ng-modal-close { margin: 0; padding: 5px 5px 0 0; position: absolute; right: 0; } .ng-modal-noninteractive { padding-top: 40px; padding-bottom: 40px; } .invalidTicketDialogField { background: #FCD3D0 none repeat scroll 0 0 !important; } /* CHWE details page */ .ng-sys-details tbody { background-color: white; } /* END CHWE details page */ /* Offscreen iframes used by httpRetryInterceptor.factory.js::loadInIframe(). */ iframe.spng-load-helper { position: absolute; top: 0; left: -10000px; width: 1px; height: 1px; border: 0; } /* Error pages: extra blank space for
within error message. */ #error-page h2 + p { /* &:first-line { font-weight: bolder; } */ } #error-page h2 + p br { content: " "; display: block; margin: 1em 0; } /*# sourceMappingURL=spng.css.map */