854bfee0c6
For a while, there've been a couple design issues with our top bar that have been bothering me:  This diff: - Makes the document title and share button have the same height and vertical alignment - Vertically centers the share button between the top of the viewport and the share panel - Aligns the right of the share button to the right of the style panel <img width="1512" alt="Screenshot 2024-03-18 at 16 08 09" src="https://github.com/tldraw/tldraw/assets/1489520/b06f3604-39c7-4642-872c-c4051719638e"> <img width="1512" alt="Screenshot 2024-03-18 at 16 08 18" src="https://github.com/tldraw/tldraw/assets/1489520/668c66e4-6f75-4219-9c1f-0ac58ce56f67"> Also tweaking some of the spacing and radiuses around the document title itself to get things ✨pixel perfect✨ Before: <img width="395" alt="Screenshot 2024-03-19 at 15 23 05" src="https://github.com/tldraw/tldraw/assets/1489520/3e5d0cf7-3d62-4424-a52a-e6eb89b69394"> After: <img width="378" alt="Screenshot 2024-03-19 at 15 22 27" src="https://github.com/tldraw/tldraw/assets/1489520/afcb9c39-7b74-424c-a479-9a73fe4e74b1"> ### Change Type - [x] `dotcom` — Changes the tldraw.com web app - [x] `bugfix` — Bug fix
387 lines
7 KiB
CSS
387 lines
7 KiB
CSS
/* ------------------ Da Share Zone ----------------- */
|
|
|
|
.tlui-style-panel__wrapper {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.tlui-share-zone {
|
|
padding: 0px 0px 0px 0px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
z-index: var(--layer-panels);
|
|
align-items: center;
|
|
padding-top: 2px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.tlui-share-zone__connection-status {
|
|
width: 8px;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tlui-share-zone__connection-status::after {
|
|
content: '';
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: currentColor;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.tlui-share-zone__button-wrapper {
|
|
all: unset;
|
|
padding: 2px;
|
|
position: relative;
|
|
pointer-events: all;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tlui-share-zone__button {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
height: 36px;
|
|
border: 2px solid var(--color-background);
|
|
border-radius: 8px;
|
|
background-color: var(--color-selected);
|
|
color: var(--color-selected-contrast);
|
|
text-shadow: none;
|
|
pointer-events: all;
|
|
position: relative;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tlui-share-zone__button::before {
|
|
position: absolute;
|
|
display: block;
|
|
content: '';
|
|
inset: 0px;
|
|
background-color: var(--color-background);
|
|
border-top-left-radius: var(--radius-3);
|
|
border-bottom-right-radius: var(--radius-3);
|
|
border-bottom-left-radius: var(--radius-3);
|
|
z-index: -1;
|
|
}
|
|
|
|
.tlui-share-zone__button:active {
|
|
color: var(--color-selected-contrast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.tlui-share-zone__button:hover {
|
|
color: var(--color-selected-contrast);
|
|
}
|
|
|
|
.tlui-share-zone__button:not(:disabled, :focus-visible):hover {
|
|
color: var(--color-selected-contrast);
|
|
}
|
|
}
|
|
|
|
.tlui-share-zone__popover {
|
|
font-size: 12px;
|
|
font-weight: inherit;
|
|
width: 200px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.tlui-share-zone__qr-code {
|
|
width: 200px;
|
|
height: 200px;
|
|
cursor: pointer;
|
|
background: none;
|
|
background-color: var(--color-muted-2);
|
|
background-size: cover;
|
|
border: none;
|
|
}
|
|
|
|
.tlui-share-zone__spinner {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tlui-share-zone__details {
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
padding: var(--space-4);
|
|
color: var(--color-text-1);
|
|
line-height: 1.5;
|
|
margin: 0px;
|
|
}
|
|
|
|
.tlui-share-zone__status {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
position: relative;
|
|
left: -4px;
|
|
}
|
|
|
|
.tlui-share-zone__status > div {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
/* ------------------- People Menu ------------------- */
|
|
|
|
.tlui-people-menu__avatars-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
pointer-events: all;
|
|
border-radius: var(--radius-1);
|
|
padding-right: 1px;
|
|
height: 36px;
|
|
}
|
|
|
|
.tlui-people-menu__avatars {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tlui-people-menu__avatar {
|
|
height: 28px;
|
|
width: 28px;
|
|
border: 2px solid var(--color-background);
|
|
background-color: var(--color-low);
|
|
border-radius: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: var(--color-selected-contrast);
|
|
z-index: 2;
|
|
}
|
|
|
|
.tlui-people-menu__avatar:nth-of-type(n + 2) {
|
|
margin-left: -12px;
|
|
}
|
|
|
|
.tlui-people-menu__avatars-button[data-state='open'] {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
|
|
border-color: var(--color-low);
|
|
}
|
|
}
|
|
|
|
.tlui-people-menu__more {
|
|
min-width: 0px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--color-text-1);
|
|
font-family: inherit;
|
|
padding: 0px 4px;
|
|
letter-spacing: 1.5;
|
|
}
|
|
.tlui-people-menu__more::after {
|
|
border-radius: var(--radius-2);
|
|
inset: 0px;
|
|
}
|
|
|
|
.tlui-people-menu__wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 220px;
|
|
height: fit-content;
|
|
max-height: 50vh;
|
|
}
|
|
|
|
.tlui-people-menu__section {
|
|
position: relative;
|
|
touch-action: auto;
|
|
flex-direction: column;
|
|
max-height: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
touch-action: auto;
|
|
}
|
|
|
|
.tlui-people-menu__section:not(:last-child) {
|
|
border-bottom: 1px solid var(--color-divider);
|
|
}
|
|
|
|
.tlui-people-menu__user {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.tlui-people-menu__user__color-picker {
|
|
z-index: var(--layer-overlays);
|
|
}
|
|
|
|
.tlui-people-menu__user__color {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tlui-people-menu__user__name {
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
color: var(--color-text-1);
|
|
max-width: 100%;
|
|
flex-grow: 1;
|
|
flex-shrink: 100;
|
|
}
|
|
|
|
.tlui-people-menu__user__label {
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
color: var(--color-text-3);
|
|
flex-grow: 100;
|
|
flex-shrink: 0;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.tlui-people-menu__user__input {
|
|
flex-grow: 2;
|
|
height: 100%;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.tlui-people-menu__user > .tlui-input__wrapper {
|
|
width: auto;
|
|
display: flex;
|
|
align-items: auto;
|
|
flex-grow: 2;
|
|
gap: 8px;
|
|
height: 100%;
|
|
padding: 0px;
|
|
}
|
|
|
|
.tlui-people-menu__item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.tlui-people-menu__item__button {
|
|
padding: 0 11px;
|
|
}
|
|
|
|
.tlui-people-menu__item > .tlui-button__menu {
|
|
width: auto;
|
|
display: flex;
|
|
align-items: auto;
|
|
justify-content: flex-start;
|
|
flex-grow: 2;
|
|
gap: 11px;
|
|
}
|
|
|
|
.tlui-people-menu__item__follow {
|
|
min-width: 44px;
|
|
}
|
|
|
|
.tlui-people-menu__item__follow[data-active='true'] .tlui-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tlui-people-menu__item__follow:focus-visible .tlui-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.tlui-people-menu__item__follow .tlui-icon {
|
|
opacity: 0;
|
|
}
|
|
|
|
.tlui-people-menu__item__follow:hover .tlui-icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.tlui-layout[data-breakpoint='0'] .tlui-offline-indicator {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Document Name */
|
|
|
|
.tlui-document-name__inner {
|
|
border-radius: calc(var(--radius-2) + var(--space-2));
|
|
background-color: var(--color-background);
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 36px;
|
|
margin-top: 4px;
|
|
padding-left: 2px;
|
|
max-width: 100%;
|
|
color: var(--color-text);
|
|
text-shadow: 1px 1px 0px var(--color-background);
|
|
pointer-events: all;
|
|
}
|
|
|
|
.tlui-document-name__input__wrapper {
|
|
position: relative;
|
|
max-width: calc(100% - 40px);
|
|
display: flex;
|
|
flex: auto;
|
|
}
|
|
|
|
.tlui-document-name__input,
|
|
.tlui-document-name__text {
|
|
padding: var(--space-2) var(--space-3);
|
|
white-space: pre;
|
|
line-height: 24px;
|
|
min-width: 62px;
|
|
}
|
|
|
|
.tlui-document-name__input {
|
|
position: absolute;
|
|
padding: var(--space-1) var(--space-3);
|
|
margin-top: 2px;
|
|
width: 100%;
|
|
border-radius: var(--radius-2);
|
|
color: var(--color-text);
|
|
background: transparent;
|
|
}
|
|
.tlui-document-name__input:focus {
|
|
box-shadow: inset 0px 0px 0px 1px var(--color-selected);
|
|
border: none;
|
|
}
|
|
|
|
.tlui-document-name__text {
|
|
width: 100%;
|
|
color: var(--color-text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tlui-document-name__text__hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tlui-document-name__menu {
|
|
width: 36px;
|
|
min-width: 36px;
|
|
height: 36px;
|
|
transform: translateX(2px);
|
|
}
|