From d6e0917dfa0e81525a57ad5bd7361f3c6ea1a298 Mon Sep 17 00:00:00 2001 From: Malthbern Date: Tue, 10 Jun 2025 19:44:54 -0500 Subject: [PATCH] updated for 18802864 --- ui.css | 431 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 431 insertions(+) diff --git a/ui.css b/ui.css index 85aa562..e7008e7 100755 --- a/ui.css +++ b/ui.css @@ -3324,3 +3324,434 @@ img[data-loading-url] { .log-level-WARNING { color: #BBBB00; } + +/* Content Share: Base */ + +.content-sharing-base-dialog { + position: fixed; + background-color: #373021; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 800px; + min-width: 500px; + border: 3px solid #59885d; + padding: 20px; + z-index: 100000; + opacity: 0; + transition: opacity 0.2s linear; +} + +.content-sharing-base-dialog.in { + opacity: 1; +} + +.content-sharing-base-dialog.out { + opacity: 0; +} + +.content-sharing-base-dialog.hidden { + display: none; +} + +.content-sharing-base-dialog h2, +.content-sharing-base-dialog h3 { + margin-top: 0; + margin-bottom: 0.5em; + text-align: left; +} + +.content-sharing-base-dialog .description { + margin-bottom: 1em; + text-align: left; + font-size: 0.9em; + color: #aaa; +} + +.content-sharing-base-dialog .close-btn { + position: absolute; + top: 1%; + right: 1%; + border-radius: 0.25em; + border: 3px solid #59885d; + padding: 0.5em; + width: 8em; + text-align: center; +} + +.page-btn { + border-radius: 0.25em; + border: 3px solid #59885d; + padding: 0.5em; + width: 8em; + text-align: center; +} + +.page-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.inp-hidden { + display: none; +} + +/* Content Share: Share Bubble */ + +.share-bubble-dialog { + max-width: 800px; + transform: translate(-50%, -60%); +} + +.share-bubble-dialog .content-btn { + position: relative; + margin-bottom: 0.5em; +} + +.share-bubble-dialog .btn-group { + display: flex; + margin-bottom: 1em; +} + +.share-bubble-dialog .option-select { + flex: 1 1 0; + min-width: 0; + background-color: inherit; + text-align: center; + padding: 0.5em; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid inherit; +} + +.share-bubble-dialog .option-select + .option-select { + margin-left: -1px; +} + +.share-bubble-dialog .option-select.active { + background-color: #1b5037; +} +.share-bubble-dialog .option-select:hover { + background-color: #373021; +} + +.share-bubble-dialog .action-buttons { + margin-top: 1em; + display: flex; + justify-content: space-between; +} + +.share-bubble-dialog .action-btn { + flex: 1; + text-align: center; + padding: 0.5em; + border-radius: 0.25em; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + margin-right: 0.5em; +} + +.share-bubble-dialog .action-btn:last-child { + margin-right: 0; +} + +/* Content Share: Share Select */ + +.share-select-dialog { + width: 650px; + height: 480px; + transform: translate(-50%, -80%); +} + +.share-select-dialog .share-options { + display: flex; + flex-direction: column; + gap: 15px; + margin-top: 20px; +} + +.share-select-dialog .share-option { + padding: 20px; + text-align: left; + cursor: pointer; + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + transition: background-color 0.2s ease; +} + +.share-select-dialog .share-option:hover { + background-color: #373021; + border-color: rgba(255, 255, 255, 0.2); +} + +.share-select-dialog h3 { + margin: 0 0 8px 0; + font-size: 1.2em; +} + +.share-select-dialog p { + margin: 0; + opacity: 0.8; + font-size: 0.95em; + line-height: 1.4; +} + +/* Content Share: Direct Share */ + +.direct-share-dialog { + width: 800px; + height: 1000px; + transform: translate(-50%, -60%); + display: flex; + flex-direction: column; +} + +.direct-share-dialog .search-container { + margin: 20px 0; + padding: 10px; + background: rgba(0, 0, 0, 0.2); + border-radius: 4px; +} + +.direct-share-dialog .search-input { + width: 100%; + padding: 10px; + border: none; + background: transparent; + color: inherit; + font-size: 1.1em; +} + +.direct-share-dialog .source-indicator { + padding: 10px; + text-align: center; + opacity: 0.8; + background: rgba(0, 0, 0, 0.1); + border-radius: 4px; + margin-bottom: 20px; +} + +.direct-share-dialog .users-container { + flex: 1; + overflow-y: auto; + margin-bottom: 20px; + min-height: 0; +} + +.direct-share-dialog .user-item { + display: flex; + align-items: center; + padding: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 10px; + background: rgba(0, 0, 0, 0.2); + border-radius: 4px; + min-height: 96px; +} + +.direct-share-dialog .user-item img { + width: 96px; + height: 96px; + margin-right: 15px; + cursor: pointer; + border-radius: 4px; +} + +.direct-share-dialog .user-item .user-name { + flex: 1; + font-size: 1.3em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 15px; + cursor: pointer; +} + +.direct-share-dialog .user-item .action-btn { + width: 140px; + height: 50px; + font-size: 1.2em; + color: white; + background-color: #373021; + border-radius: 4px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.direct-share-dialog .user-item .action-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + background-color: #4a9eff; +} + +.direct-share-dialog .pagination { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: 20px; +} + +.direct-share-dialog .page-info { + font-size: 1.1em; + opacity: 0.8; + margin-bottom: 15px; + text-align: center; +} + +.direct-share-dialog .page-buttons { + display: flex; + justify-content: center; + gap: 20px; +} + +.direct-share-dialog .user-item .action-btn { + width: 180px; + height: 60px; + font-size: 1.2em; + color: white; + border-radius: 4px; + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: 10px; + padding: 0 20px; + text-align: center; + background-color: #373021; +} + +.direct-share-dialog .user-item .action-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.direct-share-dialog .user-item .action-btn.shared { + background-color: #4a9eff; +} + +.direct-share-dialog .user-item .action-btn.failed { + background-color: #ff6b6b; +} + +.direct-share-dialog #users-loading, +.direct-share-dialog #users-error, +.direct-share-dialog #users-empty { + text-align: center; + padding: 2em; + font-size: 1.1em; +} + +.direct-share-dialog #shares-error { + color: #ff6b6b; +} + +/* Content Share: Unshare */ + +.unshare-dialog { + width: 800px; + height: 1000px; + transform: translate(-50%, -60%); + display: flex; + flex-direction: column; +} + +.unshare-dialog .shares-container { + flex: 1; + overflow-y: auto; + margin: 20px 0; + min-height: 0; +} + +.unshare-dialog #shares-loading, +.unshare-dialog #shares-error, +.unshare-dialog #shares-empty { + text-align: center; + padding: 2em; + font-size: 1.1em; +} + +.unshare-dialog #shares-error { + color: #ff6b6b; +} + +.unshare-dialog .share-item { + display: flex; + align-items: center; + padding: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 10px; + background: rgba(0, 0, 0, 0.2); + border-radius: 4px; + min-height: 120px; +} + +.unshare-dialog .share-item img { + width: 96px; + height: 96px; + border-radius: 4px; + margin-right: 15px; + cursor: pointer; +} + +.unshare-dialog .share-item .user-name { + flex: 1; + font-size: 1.3em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 15px; + cursor: pointer; +} + +.unshare-dialog .action-btn { + width: 180px; + height: 60px; + font-size: 1.2em; + color: white; + border-radius: 4px; + display: inline-flex; + align-items: center; + justify-content: center; + margin-left: 10px; + padding: 0 20px; + text-align: center; +} + +.unshare-dialog .revoke-btn { + background-color: #ff6b6b; +} + +.unshare-dialog .undo-btn { + background-color: #4a9eff; +} + +.unshare-dialog .action-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + background-color: #666; +} + +.unshare-dialog .pagination { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: 20px; +} + +.unshare-dialog .page-info { + font-size: 1.1em; + opacity: 0.8; + margin-bottom: 15px; + text-align: center; +} + +.unshare-dialog .page-buttons { + display: flex; + justify-content: center; + gap: 20px; +} + +.unshare-dialog .share-item.revoked { + opacity: 0.7; +}