@guardian/threads
Version:
119 lines (101 loc) • 2.03 kB
CSS
.head {
display: flex;
flex: 0 0 auto;
padding: 0 var(--sp-base);
background: var(--color-primary);
color: var(--color-primary-text);
min-height: 38px;
position: relative;
z-index: 9999999;
-webkit-app-region: drag;
box-sizing: border-box;
height: var(--size-header);
border-bottom: 1px solid var(--color-border);
}
.head[data-transparent='true'] {
border-bottom-color: var(--color-border-light);
background: var(--non-semantic-color-neutral-98);
}
.container {
display: flex;
align-items: stretch;
height: 100%;
width: 100%;
}
.container[data-centered] {
width: 68em;
margin: auto;
}
.thumbnail {
--avi: calc(var(--size-header) * 0.6);
height: var(--avi);
width: var(--avi);
display: block;
background: var(--non-semantic-color-neutral-100);
background-size: cover;
background-position: center center;
border-radius: 100%;
}
.titles {
display: flex;
flex-direction: column;
line-height: 1;
margin-left: calc(var(--sp-base) * 0.75);
}
.title {
font-size: var(--fs-large);
font-weight: 800;
}
.subtitle {
font-size: var(--fs-small);
}
.chip {
display: flex;
align-items: center;
justify-content: flex-start;
padding: var(--sp-vertical) 0;
border-right: 1px solid transparent;
}
.chip[data-has-border='true'] {
border-right: 1px solid var(--color-border);
}
.chipHome {
composes: chip;
width: var(--size-header);
margin: var(--sp-vertical) calc(var(--sp-base) * 0.75) var(--sp-vertical)
calc(-1 * var(--sp-base));
padding: 0 var(--sp-base);
box-sizing: border-box;
justify-content: center;
display: flex;
}
.chip[data-elastic='true'] {
flex: 1 1 auto;
}
.toolbar {
position: relative;
display: flex;
}
.toolbar > * {
margin-left: var(--sp-base);
}
.toolset,
.menu {
composes: toolbar;
}
.menu {
margin: var(--sp-vertical) calc(var(--sp-base) * 4);
}
.logo {
width: 26px;
height: 30px;
}
.textLogo {
display: flex;
align-items: center;
height: calc(var(--size-vertical-base) * 1.66);
padding: 0;
margin: 0;
font-weight: 700;
font-size: var(--fs-large);
}