mirror of
https://github.com/docmost/docmost.git
synced 2026-06-13 19:19:53 +00:00
Philip Okugbe
33895b0607
* util * fix page position collation * support fixed toolbar in templates editor * date localization * fix clipped emoji in templates editor * fix page updated time object * fix flickers * fix: remove redundant breadcrumb from destination modal
75 lines
1.6 KiB
CSS
75 lines
1.6 KiB
CSS
.header {
|
|
height: 45px;
|
|
background-color: var(--mantine-color-body);
|
|
padding-left: var(--mantine-spacing-md);
|
|
padding-right: var(--mantine-spacing-md);
|
|
position: fixed;
|
|
z-index: 99;
|
|
top: var(--app-shell-header-offset, 0rem);
|
|
inset-inline-start: var(--app-shell-navbar-offset, 0rem);
|
|
inset-inline-end: var(--app-shell-aside-offset, 0rem);
|
|
|
|
@media (max-width: $mantine-breakpoint-sm) {
|
|
padding-left: var(--mantine-spacing-xs);
|
|
padding-right: var(--mantine-spacing-xs);
|
|
}
|
|
}
|
|
|
|
.editor {
|
|
height: 100%;
|
|
padding: 8px 0;
|
|
margin: 48px auto;
|
|
}
|
|
|
|
.titleArea {
|
|
padding: 0 3rem;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.emojiButton {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
/* The emoji glyph renders larger than its font-size box; let the transparent
|
|
ActionIcon overflow so it isn't clipped on the edges. */
|
|
.emojiButton button {
|
|
overflow: visible;
|
|
}
|
|
|
|
.titleInput {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
border: none;
|
|
outline: none;
|
|
width: 100%;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
|
|
&::placeholder {
|
|
color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
|
|
}
|
|
}
|
|
|
|
.emojiIcon {
|
|
font-size: 3rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.backLink {
|
|
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
|
text-decoration: none;
|
|
font-size: var(--mantine-font-size-sm);
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
|
|
@mixin hover {
|
|
color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-gray-0));
|
|
}
|
|
}
|