mirror of
https://github.com/bitwarden/browser
synced 2026-01-31 16:53:27 +00:00
5504d49751
* add popup header back to extension layout for now * conditionally add margin for now if not hiding logo
104 lines
3.5 KiB
HTML
104 lines
3.5 KiB
HTML
<main
|
|
class="tw-relative tw-flex tw-w-full tw-mx-auto tw-flex-col tw-bg-background-alt tw-p-5 tw-text-main"
|
|
[ngClass]="{
|
|
'tw-min-h-screen': clientType === 'web',
|
|
'tw-min-h-full': clientType === 'browser' || clientType === 'desktop',
|
|
}"
|
|
>
|
|
<div
|
|
[class]="
|
|
'tw-flex tw-justify-between tw-items-center tw-w-full' + (!hideLogo() ? ' tw-mb-12' : '')
|
|
"
|
|
>
|
|
@if (!hideLogo()) {
|
|
<a
|
|
[routerLink]="['/']"
|
|
class="tw-w-32 sm:tw-w-[200px] tw-self-center sm:tw-self-start tw-block [&>*]:tw-align-top"
|
|
>
|
|
<bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
|
|
</a>
|
|
}
|
|
<div class="tw-ms-auto">
|
|
<ng-content select="[slot=header-actions]"></ng-content>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
|
|
@let iconInput = icon();
|
|
|
|
<!-- In some scenarios this icon's size is not limited by container width correctly -->
|
|
<!-- Targeting the SVG here to try and ensure it never grows too large in even the media queries are not working as expected -->
|
|
<div
|
|
*ngIf="iconInput !== null"
|
|
class="tw-size-20 sm:tw-size-24 [&_svg]:tw-w-full [&_svg]:tw-max-w-24 tw-mx-auto tw-content-center"
|
|
>
|
|
<bit-icon [icon]="iconInput"></bit-icon>
|
|
</div>
|
|
|
|
@if (title()) {
|
|
<!-- Small screens -->
|
|
<h1 bitTypography="h2" class="tw-mt-2 sm:tw-hidden">
|
|
{{ title() }}
|
|
</h1>
|
|
<!-- Medium to Larger screens -->
|
|
<h1 bitTypography="h1" class="tw-mt-2 tw-hidden sm:tw-block">
|
|
{{ title() }}
|
|
</h1>
|
|
}
|
|
|
|
@if (subtitle()) {
|
|
<div class="tw-text-sm sm:tw-text-base">{{ subtitle() }}</div>
|
|
}
|
|
</div>
|
|
|
|
<div
|
|
class="tw-z-10 tw-grow tw-w-full tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
|
|
[ngClass]="maxWidthClass"
|
|
>
|
|
@if (hideCardWrapper()) {
|
|
<div class="tw-mb-6 sm:tw-mb-10">
|
|
<ng-container *ngTemplateOutlet="defaultContent"></ng-container>
|
|
</div>
|
|
} @else {
|
|
<bit-base-card
|
|
class="!tw-rounded-2xl tw-mb-6 sm:tw-mb-10 tw-mx-auto tw-w-full tw-bg-transparent tw-border-none tw-shadow-none sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-100 sm:tw-shadow sm:tw-p-8"
|
|
>
|
|
<ng-container *ngTemplateOutlet="defaultContent"></ng-container>
|
|
</bit-base-card>
|
|
}
|
|
<ng-content select="[slot=secondary]"></ng-content>
|
|
</div>
|
|
|
|
@if (!hideFooter()) {
|
|
<footer class="tw-text-center tw-mt-4 sm:tw-mt-6">
|
|
@if (showReadonlyHostname()) {
|
|
<div bitTypography="body2">{{ "accessing" | i18n }} {{ hostname }}</div>
|
|
} @else {
|
|
<ng-content select="[slot=environment-selector]"></ng-content>
|
|
}
|
|
|
|
@if (!hideYearAndVersion) {
|
|
<div bitTypography="body2">© {{ year }} Bitwarden Inc.</div>
|
|
<div bitTypography="body2">{{ version }}</div>
|
|
}
|
|
</footer>
|
|
}
|
|
|
|
@if (!hideBackgroundIllustration()) {
|
|
<div
|
|
class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-start-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
|
|
>
|
|
<bit-icon [icon]="leftIllustration"></bit-icon>
|
|
</div>
|
|
<div
|
|
class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-end-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
|
|
>
|
|
<bit-icon [icon]="rightIllustration"></bit-icon>
|
|
</div>
|
|
}
|
|
</main>
|
|
|
|
<ng-template #defaultContent>
|
|
<ng-content></ng-content>
|
|
</ng-template>
|