blob: e543c5f53be69ea0488eea029e6d14e2b16c01d9 [file] [log] [blame]
<template>
<style include="cr-icons profile-picker-shared">
:host {
--avatar-size: 100px;
--banner-height: 244px;
}
#headerContainer {
background-color: var(--theme-frame-color);
height: var(--banner-height);
position: relative;
width: 100%;
}
.banner {
background-size: 100% 100%;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
#backButton {
--cr-icon-button-fill-color: var(--theme-text-color);
--cr-icon-button-icon-size: 22px;
--cr-icon-button-margin-start: 4px;
--cr-icon-button-size: 36px;
margin-top: 4px;
position: relative;
z-index: 1;
}
.avatar {
border: 2px solid var(--md-background-color);
border-radius: 50%;
bottom: calc(var(--avatar-size)/-2);
height: var(--avatar-size);
left: 0;
margin: auto;
position: absolute;
right: 0;
width: var(--avatar-size);
z-index: 1;
}
</style>
</template>