gru/rustpad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

visual changes

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-07-28 09:17:13 +02:00
parent a27f8ad7f3
commit 351dd081b5
13 changed files with 309 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/styles.css
+172 -87
View File
@@ -209,10 +209,6 @@ textarea:focus {
padding: 7px;
}
[hidden] {
display: none !important;
}
.form-message {
min-height: 1.2em;
margin: -5px 0 0;
@@ -256,7 +252,7 @@ textarea:focus {
}
.secondary-button:hover {
border-color: #4b5565;
background: var(--surface-3);
}
@@ -501,15 +497,15 @@ textarea::selection {
.preview {
overflow: auto;
min-height: 0;
padding: 24px;
color: #dce2eb;
line-height: 1.72;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
margin: 1.25em 0 .5em;
letter-spacing: -.03em;
}
@@ -527,10 +523,6 @@ textarea::selection {
font-size: 1.5rem;
}
.markdown-body p {
margin: .72em 0;
}
.markdown-body code {
padding: .16em .36em;
border: 1px solid #303745;
@@ -553,7 +545,7 @@ textarea::selection {
}
.markdown-body blockquote {
margin: 1em 0;
padding: .2em 1em;
border-left: 3px solid var(--accent);
color: #abb5c3;
@@ -664,7 +656,7 @@ textarea::selection {
margin-top: 3px;
border: 2px solid #8b7af4;
border-radius: 50%;
background: #101319;
}
.revision time {
@@ -923,13 +915,6 @@ dialog::backdrop {
font-size: .75rem;
}
.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.error-card {
width: min(560px, 100%);
padding: 32px;
@@ -1032,7 +1017,7 @@ dialog::backdrop {
}
.line-gutter {
width: 62px;
overflow: hidden;
padding: 24px 8px 24px 0;
border-right: 1px solid var(--border);
@@ -1044,7 +1029,7 @@ dialog::backdrop {
.line-gutter div {
height: 1.72em;
padding-right: 8px;
}
.hide-editor-line-numbers .editor-shell {
@@ -1207,11 +1192,9 @@ dialog::backdrop {
}
.markdown-body img {
display: block;
max-width: 100%;
height: auto;
margin: 16px auto;
border-radius: 10px;
}
.markdown-body a {
@@ -1244,7 +1227,7 @@ dialog::backdrop {
}
.public-document {
width: min(900px, calc(100% - 32px));
margin: 0 auto;
padding: 56px 0 96px;
}
@@ -1263,7 +1246,7 @@ dialog::backdrop {
.public-content {
min-height: 240px;
padding: 32px 32px 32px 62px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
@@ -1291,7 +1274,6 @@ dialog::backdrop {
}
}
/* Layout safeguards and home footer */
.app-header__main,
.document-heading {
@@ -1314,19 +1296,12 @@ dialog::backdrop {
.home-footer {
flex: 0 0 auto;
width: min(1040px, calc(100% - 32px));
margin: auto auto 28px;
padding-top: 24px;
color: var(--muted-2);
font-size: .76rem;
text-align: center;
}
.home-footer__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
@@ -1369,12 +1344,6 @@ dialog::backdrop {
}
}
/* Show an author once at the start of each contiguous ownership block. */
.line-gutter div {
position: relative;
}
.line-owner-label {
position: absolute;
left: 7px;
@@ -1415,11 +1384,10 @@ dialog::backdrop {
.owner-labels {
position: absolute;
z-index: 2;
top: 0;
right: 12px;
left: 48px;
height: 100%;
overflow: hidden;
pointer-events: none;
}
@@ -1465,7 +1433,6 @@ dialog::backdrop {
}
}
/* Editor display preferences and author overlay */
.editor-shell {
position: relative;
@@ -1738,13 +1705,6 @@ dialog::backdrop {
border-radius: 0;
}
.note-card-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.protect-badge,
.file-flag {
display: inline-flex;
@@ -1770,10 +1730,6 @@ dialog::backdrop {
color: var(--danger);
}
.danger-button {
color: var(--danger);
}
.dialog-check {
display: flex;
align-items: center;
@@ -1803,12 +1759,12 @@ dialog::backdrop {
.files-panel {
grid-template-rows: auto minmax(0, 1fr);
min-height: min(590px, calc(100vh - 28px));
max-height: calc(100vh - 28px);
}
.files-list {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
@@ -1864,13 +1820,13 @@ dialog::backdrop {
.file-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.file-actions button {
min-height: 30px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-2);
@@ -2217,8 +2173,6 @@ dialog::backdrop {
display: none;
}
.markdown-body .table-wrap {
overflow-x: auto;
margin: .7em 0;
@@ -2535,24 +2489,12 @@ dialog::backdrop {
flex: 1 0 100%;
}
.identity-panel {
position: relative;
}
.identity-panel__close {
position: absolute;
top: 14px;
right: 14px;
}
.identity-links {
justify-content: space-between;
}
.identity-links .text-button {
padding: 3px 0;
}
.auth-panel {
display: grid;
gap: 12px;
@@ -2832,7 +2774,7 @@ dialog::backdrop {
min-width: 0;
justify-content: space-between;
gap: 16px;
align-items: center;
padding: 12px;
border: 1px solid var(--border);
border-radius: 10px;
@@ -2997,7 +2939,6 @@ dialog::backdrop {
margin-bottom: 0;
}
/* Full-height editor: keep header/footer visible and scroll only the work area. */
.pad-page {
height: 100dvh;
@@ -3290,10 +3231,9 @@ dialog::backdrop {
.share-section {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
}
.share-form-grid {
@@ -3334,7 +3274,7 @@ dialog::backdrop {
grid-template-columns: minmax(180px, 1fr) auto auto;
gap: 8px;
align-items: center;
padding: 9px 0;
border-top: 1px solid var(--border);
}
@@ -3588,7 +3528,6 @@ dialog::backdrop {
padding: 7px 11px;
}
@media (max-width: 800px) {
.share-dialog {
width: calc(100% - 16px);
@@ -4009,7 +3948,6 @@ dialog::backdrop {
}
}
.editor-column-label {
display: flex;
align-items: center;
@@ -4404,6 +4342,12 @@ dialog::backdrop {
}
}
@media (max-width: 720px) {
.pad-page #save-state {
display: none;
}
}
@media (max-width: 520px) {
.pad-page .app-header {
padding-inline: 10px;
@@ -4450,7 +4394,6 @@ dialog::backdrop {
}
}
/* Per-note author color override */
.use-global-color {
display: inline-grid;
@@ -4469,3 +4412,145 @@ dialog::backdrop {
border-color: var(--accent);
color: var(--text);
}
/* Quick actions appear when the editor header switches to its compact menu. */
.mobile-editor-bubble { display: none; }
@media (max-width: 1499px) {
.pad-page .mobile-editor-bubble {
position: fixed;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
z-index: 45;
display: flex;
align-items: center;
gap: 5px;
max-width: calc(100vw - 20px);
padding: 5px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
background: rgba(17,21,28,.88);
box-shadow: 0 8px 24px rgba(0,0,0,.28);
backdrop-filter: blur(10px);
}
.mobile-editor-bubble > button {
display: inline-grid;
width: 34px;
height: 34px;
padding: 0;
place-items: center;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.07);
color: var(--text);
font-size: 1rem;
}
.mobile-color-dot {
width: 15px;
height: 15px;
border: 2px solid rgba(255,255,255,.75);
border-radius: 50%;
background: var(--owner, var(--accent));
}
.mobile-connection-status {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
padding: 0 8px 0 4px;
color: var(--muted);
font-size: .72rem;
white-space: nowrap;
}
.mobile-connection-status #mobile-status-text {
max-width: 92px;
overflow: hidden;
text-overflow: ellipsis;
}
.pad-page .toast { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}
/* Movable quick actions for compact editor screens. */
@media (max-width: 1499px) {
.pad-page .mobile-editor-bubble {
touch-action: none;
user-select: none;
}
.pad-page .footer-connection-block {
display: none;
}
.pad-page .room-details.is-mobile-open .room-popover {
position: fixed;
right: 12px;
bottom: 72px;
left: auto;
z-index: 60;
width: min(560px, calc(100vw - 24px));
max-height: min(560px, calc(100dvh - 96px));
}
.mobile-time-button {
position: relative;
}
.mobile-time-preview {
position: absolute;
right: 8px;
bottom: calc(100% + 8px);
padding: 6px 9px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 8px 24px rgb(0 0 0 / 32%);
color: var(--text);
font-size: .78rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.mobile-time-preview[hidden] {
display: none;
}
.pad-page .mobile-editor-bubble.is-dragging {
transition: none;
cursor: grabbing;
}
.mobile-editor-bubble > .mobile-bubble-drag {
width: 24px;
background: transparent;
color: var(--muted-2);
cursor: grab;
font-size: .85rem;
letter-spacing: -3px;
touch-action: none;
}
.mobile-chat-button {
position: relative;
}
.mobile-chat-unread {
position: absolute;
top: -4px;
right: -4px;
display: inline-grid;
min-width: 17px;
height: 17px;
padding: 0 4px;
place-items: center;
border: 2px solid #11151c;
border-radius: 999px;
background: var(--danger);
color: white;
font-size: .58rem;
font-weight: 700;
line-height: 1;
}
.mobile-chat-unread[hidden] {
display: none;
}
}