mirror of
https://github.com/bitwarden/browser
synced 2026-02-06 19:53:59 +00:00
63 lines
2.1 KiB
HTML
63 lines
2.1 KiB
HTML
<main
|
|
class="tw-flex tw-w-full tw-mx-auto tw-flex-col tw-bg-background-alt tw-px-6 tw-py-4 tw-text-main"
|
|
[ngClass]="{
|
|
'tw-min-h-screen': clientType === 'web',
|
|
'tw-min-h-full': clientType === 'browser' || clientType === 'desktop',
|
|
}"
|
|
>
|
|
<a
|
|
*ngIf="!hideLogo"
|
|
[routerLink]="['/']"
|
|
class="tw-w-[128px] tw-block tw-mb-12 [&>*]:tw-align-top"
|
|
>
|
|
<bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
|
|
</a>
|
|
|
|
<div
|
|
class="tw-text-center tw-mb-4 sm:tw-mb-6"
|
|
[ngClass]="{ 'tw-max-w-md tw-mx-auto': titleAreaMaxWidth === 'md' }"
|
|
>
|
|
<div *ngIf="!hideIcon" class="tw-mx-auto tw-max-w-24 sm:tw-max-w-28 md:tw-max-w-32">
|
|
<bit-icon [icon]="icon"></bit-icon>
|
|
</div>
|
|
|
|
<ng-container *ngIf="title">
|
|
<!-- Small screens -->
|
|
<h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden">
|
|
{{ title }}
|
|
</h1>
|
|
<!-- Medium to Larger screens -->
|
|
<h1 bitTypography="h2" class="tw-mt-2 tw-hidden sm:tw-block">
|
|
{{ title }}
|
|
</h1>
|
|
</ng-container>
|
|
|
|
<div *ngIf="subtitle" class="tw-text-sm sm:tw-text-base">{{ subtitle }}</div>
|
|
</div>
|
|
|
|
<div
|
|
class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
|
|
[ngClass]="{ 'tw-max-w-md': maxWidth === 'md', 'tw-max-w-3xl': maxWidth === '3xl' }"
|
|
>
|
|
<div
|
|
class="tw-rounded-2xl tw-mb-6 sm:tw-mb-10 tw-mx-auto tw-w-full sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
|
|
>
|
|
<ng-content></ng-content>
|
|
</div>
|
|
<ng-content select="[slot=secondary]"></ng-content>
|
|
</div>
|
|
|
|
<footer *ngIf="!hideFooter" class="tw-text-center tw-mt-4 sm:tw-mt-6">
|
|
<div *ngIf="showReadonlyHostname" bitTypography="body2">
|
|
{{ "accessing" | i18n }} {{ hostname }}
|
|
</div>
|
|
<ng-container *ngIf="!showReadonlyHostname">
|
|
<ng-content select="[slot=environment-selector]"></ng-content>
|
|
</ng-container>
|
|
<ng-container *ngIf="!hideYearAndVersion">
|
|
<div bitTypography="body2">© {{ year }} Bitwarden Inc.</div>
|
|
<div bitTypography="body2">{{ version }}</div>
|
|
</ng-container>
|
|
</footer>
|
|
</main>
|