<style include="iron-flex cr-hidden-style">
paper-spinner-lite {
height: 32px;
width: 32px;
}
#portalContainer {
height: 100%;
width: 100%;
}
#errorIllustration,
#errorIllustrationJelly {
height: 100%;
width: 100%;
}
#errorIllustration {
background-image: url(chrome://resources/ash/common/cellular_setup/error.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
@media(prefers-color-scheme: dark) {
#errorIllustration {
background-image: url(chrome://resources/ash/common/cellular_setup/error_dark.svg);
}
}
:host-context(body.jelly-enabled) #errorIllustration {
display: none;
}
:host-context(body:not(.jelly-enabled)) #errorIllustrationJelly {
display: none;
}
</style>
<base-page title="[[getPageTitle_(
showError, carrierName_, hasCarrierPortalLoaded_)]]"
message="[[getPageMessage_(showError)]]">
<div slot="page-body" class="layout horizontal center-center">
<paper-spinner-lite active
hidden$="[[!shouldShowSpinner_(
showError, hasCarrierPortalLoaded_)]]">
</paper-spinner-lite>
<div id="portalContainer"
hidden$="[[!shouldShowPortal_(
showError, hasCarrierPortalLoaded_)]]">
</div>
<div id="errorIllustration" hidden$="[[!showError]]"></div>
<iron-icon id="errorIllustrationJelly" icon="cellular-setup-illo:error"
hidden$="[[!showError]]">
</iron-icon>
</div>
</base-page>