new functions
This commit is contained in:
Mateusz Gruszczyński
+304
-57
@@ -263,7 +263,7 @@ textarea:focus {
|
||||
.inline-button {
|
||||
width: auto;
|
||||
margin-top: 18px;
|
||||
padding: 0 16px;
|
||||
padding: 0 18px;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
@@ -445,6 +445,11 @@ textarea:focus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace > .editor-column,
|
||||
.workspace > .preview-column {
|
||||
transition: opacity .18s ease, transform .18s ease;
|
||||
}
|
||||
|
||||
.editor-column,
|
||||
.preview-column {
|
||||
display: grid;
|
||||
@@ -823,43 +828,6 @@ dialog::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.toolbar-fill {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.workspace.view-split {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workspace.view-split .preview-column {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view-switch button[data-view="split"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-column {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
textarea,
|
||||
.preview {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.editor-footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@@ -961,10 +929,6 @@ dialog::backdrop {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inline-button {
|
||||
width: auto;
|
||||
padding-inline: 18px;
|
||||
}
|
||||
|
||||
.error-card {
|
||||
width: min(560px, 100%);
|
||||
@@ -1117,6 +1081,7 @@ dialog::backdrop {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.user-chip {
|
||||
@@ -3623,17 +3588,6 @@ dialog::backdrop {
|
||||
padding: 7px 11px;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.share-dialog {
|
||||
@@ -4078,7 +4032,9 @@ dialog::backdrop {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.document-owner-badge[hidden] { display: none; }
|
||||
.document-owner-badge[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Per-character authorship overlay. The textarea remains the editable surface. */
|
||||
.authorship-layer {
|
||||
@@ -4109,11 +4065,15 @@ dialog::backdrop {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hide-editor-line-numbers .authorship-layer { left: 0; }
|
||||
.hide-editor-line-numbers .authorship-layer {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.authorship-layer { left: 42px; }
|
||||
.hide-editor-line-numbers .authorship-layer { left: 0; }
|
||||
.hide-editor-line-numbers .authorship-layer {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Multiple authors can contribute to one line. */
|
||||
@@ -4210,7 +4170,10 @@ dialog::backdrop {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.footer-access{font-weight:600;color:var(--muted,#9ca3af)}
|
||||
.footer-access {
|
||||
color: var(--muted, #9ca3af);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.profile-suggestion {
|
||||
margin: 0;
|
||||
@@ -4222,3 +4185,287 @@ dialog::backdrop {
|
||||
cursor: default;
|
||||
opacity: .78;
|
||||
}
|
||||
|
||||
.header-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.header-menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-user-control {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.profile-color-field input[type="color"] {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Responsive note editor -------------------------------------------------- */
|
||||
@media (max-width: 1499px) {
|
||||
.pad-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pad-page .app-header {
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.pad-page .app-header__main {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.pad-page .document-heading {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pad-page .header-user-control {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.pad-page .header-navigation {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pad-page .header-menu-toggle {
|
||||
display: inline-flex;
|
||||
width: 42px;
|
||||
min-width: 42px;
|
||||
height: 42px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 8px;
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.pad-page .header-menu-toggle span {
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: transform .18s ease, opacity .18s ease;
|
||||
}
|
||||
|
||||
.pad-page .header-menu-toggle[aria-expanded="true"] span:nth-child(1) {
|
||||
transform: translateY(7px) rotate(45deg);
|
||||
}
|
||||
|
||||
.pad-page .header-menu-toggle[aria-expanded="true"] span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pad-page .header-menu-toggle[aria-expanded="true"] span:nth-child(3) {
|
||||
transform: translateY(-7px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.pad-page .header-actions {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
display: none;
|
||||
width: min(320px, calc(100vw - 20px));
|
||||
max-height: min(70dvh, 520px);
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 10px;
|
||||
background: #0d1015;
|
||||
box-shadow: 0 16px 40px rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.pad-page .header-actions.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pad-page .header-actions > * {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.pad-page .header-actions .secondary-button,
|
||||
.pad-page .header-actions .user-chip {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.pad-page .header-actions .public-task-toggle {
|
||||
min-height: 40px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.pad-page .editor-layout {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.pad-page .editor-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
padding: 8px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.pad-page .toolbar-group {
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
padding-right: 0;
|
||||
border-right: 0;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.pad-page .editor-controls,
|
||||
.pad-page .toolbar-action,
|
||||
.pad-page .line-toggle,
|
||||
.pad-page .toolbar-fill,
|
||||
.pad-page #mode-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pad-page .view-switch {
|
||||
position: sticky;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
align-self: center;
|
||||
background: #0d1015;
|
||||
}
|
||||
|
||||
.pad-page .view-switch button[data-view="split"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pad-page .workspace,
|
||||
.pad-page .workspace.view-split {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.pad-page .workspace.view-edit .editor-column,
|
||||
.pad-page .workspace.view-preview .preview-column {
|
||||
display: grid;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.pad-page .workspace.view-edit .preview-column,
|
||||
.pad-page .workspace.view-preview .editor-column {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pad-page .preview-column {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.pad-page textarea,
|
||||
.pad-page .preview,
|
||||
.pad-page .authorship-layer {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.pad-page .editor-footer {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 6px 10px;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.pad-page .footer-left,
|
||||
.pad-page .footer-right {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.pad-page .app-header {
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
.pad-page .brand {
|
||||
max-width: 40vw;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pad-page .document-heading h1 {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.pad-page .user-chip__name {
|
||||
max-width: 88px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pad-page .editor-toolbar {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.pad-page .editor-toolbar button,
|
||||
.pad-page .editor-toolbar select {
|
||||
min-height: 32px;
|
||||
padding-inline: 8px;
|
||||
}
|
||||
|
||||
.pad-page textarea,
|
||||
.pad-page .preview,
|
||||
.pad-page .authorship-layer {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
.pad-page .workspace.view-split {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Per-note author color override */
|
||||
.use-global-color {
|
||||
display: inline-grid;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 50%;
|
||||
background: var(--surface-2);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.use-global-color:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user