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

share funxtions

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-07-23 15:07:59 +02:00
parent dc6227896b
commit 8c3842157d
18 changed files with 409 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/styles.css
+89
View File
@@ -615,3 +615,92 @@ dialog::backdrop { background: rgba(4,6,9,.82); }
.room-user > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-message a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.chat-message a:hover { filter: brightness(1.15); }
/* Sharing panel */
.share-panel { display: grid; gap: 18px; }
.share-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.share-panel-head h3, .share-section h4 { margin:0; }
.share-panel-head p { margin:4px 0 0; color:var(--muted); }
.share-section { display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.share-form-grid { display:grid; grid-template-columns:minmax(220px,1fr) minmax(140px,auto) auto; gap:10px; align-items:end; }
.share-form-grid label { display:grid; gap:5px; }
.share-link-form { grid-template-columns:minmax(140px,auto) minmax(110px,140px) auto auto; }
.share-forever { display:flex !important; align-items:center; gap:7px !important; min-height:38px; white-space:nowrap; }
.share-forever input { width:auto; }
.share-list { display:grid; gap:8px; }
.share-list-row { display:grid; grid-template-columns:minmax(180px,1fr) auto auto; gap:8px; align-items:center; padding:9px 0; border-top:1px solid var(--border); }
.share-list-row:first-child { border-top:0; }
.share-list-row strong, .share-list-row small { display:block; overflow-wrap:anywhere; }
.share-list-row small { color:var(--muted); margin-top:2px; }
.share-role { color:var(--muted); font-size:.82rem; }
.share-link-row { grid-template-columns:minmax(170px,1fr) minmax(130px,auto) 100px auto auto auto; }
.share-link-row input, .share-link-row select { min-width:0; }
.share-empty { margin:0; color:var(--muted); }
@media (max-width:800px) {
.share-form-grid, .share-link-form, .share-list-row, .share-link-row { grid-template-columns:1fr; align-items:stretch; }
.share-panel-head { flex-direction:column; }
.share-panel-head > button { align-self:flex-end; }
}
/* Share dialog */
.share-dialog { width: min(900px, calc(100% - 28px)); max-width: 900px; max-height: min(88dvh, 860px); padding: 0; overflow: hidden; }
.share-dialog::backdrop { background: rgb(0 0 0 / .68); backdrop-filter: blur(3px); }
.share-dialog .share-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(88dvh, 860px); gap: 0; }
.share-dialog .share-panel-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.share-dialog .share-panel-head strong { color: var(--text); }
.share-dialog-body { display: grid; gap: 16px; padding: 18px 22px 22px; overflow-y: auto; background: color-mix(in srgb, var(--surface) 92%, black); }
.share-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 22px; border-top: 1px solid var(--border); background: var(--surface); }
.share-dialog-footer .form-message { margin: 0; }
.dialog-close { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.dialog-close:hover { color: var(--text); border-color: var(--border-strong); }
.share-section { padding: 16px; background: var(--surface); }
.share-section-head h4 { margin: 0; }
.share-section-head p { margin: 4px 0 2px; color: var(--muted); font-size: .82rem; }
.share-form-grid label > span:not(.sr-only), .share-link-row label > span:not(.sr-only) { color: var(--muted); font-size: .76rem; }
.share-dialog select { width: 100%; min-height: 42px; padding: 0 38px 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background-color: #10141a; color: var(--text); appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9aa3b2 50%), linear-gradient(135deg, #9aa3b2 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.share-dialog select:hover { border-color: #596273; }
.share-dialog select:focus { border-color: #7567db; box-shadow: 0 0 0 3px rgb(117 103 219 / .18); outline: none; }
.share-dialog input[type="text"], .share-dialog input[type="number"] { min-height: 42px; border-radius: 8px; padding: 0 12px; }
.share-hours-field { display: grid; grid-template-columns: minmax(70px, 1fr) auto; align-items: center; min-height: 42px; border: 1px solid var(--border-strong); border-radius: 8px; background: #10141a; overflow: hidden; }
.share-hours-field:focus-within { border-color: #7567db; box-shadow: 0 0 0 3px rgb(117 103 219 / .18); }
.share-hours-field input { width: 100%; min-width: 0; border: 0 !important; background: transparent; box-shadow: none !important; outline: 0 !important; }
.share-hours-field span { padding: 0 11px; color: var(--muted); font-size: .76rem; }
.share-list-row { min-height: 58px; padding: 10px 0; }
.share-list-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.share-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); color: #d8d3ff; font-weight: 700; }
.share-list-identity > div, .share-link-info { min-width: 0; }
.share-row-actions { display: flex; gap: 7px; justify-content: flex-end; }
.compact-button { min-height: 36px; 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 { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
.share-dialog .share-panel { max-height: calc(100dvh - 16px); }
.share-dialog .share-panel-head, .share-dialog-body, .share-dialog-footer { padding-left: 14px; padding-right: 14px; }
.share-dialog-footer { align-items: stretch; flex-direction: column; }
.share-dialog-footer > button { align-self: flex-end; }
.share-row-actions { justify-content: stretch; }
.share-row-actions button { flex: 1; }
}
/* Refined sharing dialog and shared-resource attribution. */
.share-dialog {
border: 1px solid var(--border-strong);
border-radius: 18px;
background: var(--surface);
box-shadow: 0 28px 90px rgb(0 0 0 / .58);
}
.share-dialog .share-panel { overflow: hidden; border-radius: inherit; }
.share-dialog .share-panel-head { border-radius: 18px 18px 0 0; }
.share-dialog-footer { border-radius: 0 0 18px 18px; }
.share-dialog-body { scrollbar-gutter: stable; }
.share-section { border-radius: 12px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .025); }
.resource-copy { min-width: 0; }
.resource-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.resource-title-line a { min-width: 0; }
.resource-shared-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: color-mix(in srgb, var(--accent) 70%, white); font-size: .68rem; font-weight: 650; line-height: 1.2; }
.resource-row--shared { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, transparent); }
@media (max-width: 640px) {
.share-dialog, .share-dialog .share-panel, .share-dialog .share-panel-head, .share-dialog-footer { border-radius: 14px; }
.share-dialog .share-panel-head { border-radius: 14px 14px 0 0; }
.share-dialog-footer { border-radius: 0 0 14px 14px; }
}