Created
May 14, 2026 00:20
-
-
Save yan-syntax/d8ffa264e600f4cc8f1321da4e664749 to your computer and use it in GitHub Desktop.
Discord Transcript - transcript-1504262277292097556.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| This transcript was generated using: https://github.com/mahtoid/DiscordChatExporterPy | |
| If you have any issues or suggestions - open an issue on the Github Repository or alternatively join https://discord.mahto.id | |
| --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>4X4 RANKED #20K - rec_natan7xz_</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width" /> | |
| <meta name="title" content="4X4 RANKED #20K - rec_natan7xz_"> | |
| <meta name="description" content="Channel: rec_natan7xz_ (1504262277292097556) | |
| Server: 4X4 RANKED #20K (1328628864368246794) | |
| Message Count: 7 Messages | |
| Generated on: 13 May 2026 at 09:20:13 PM (-03)"/> | |
| <meta name="theme-color" content="#638dfc" /> | |
| <!-- Open Graph / Facebook --> | |
| <meta property="og:type" content="website" /> | |
| <meta property="og:title" content="4X4 RANKED #20K - rec_natan7xz_" /> | |
| <meta property="og:description" content="Channel: rec_natan7xz_ (1504262277292097556) | |
| Server: 4X4 RANKED #20K (1328628864368246794) | |
| Message Count: 7 Messages | |
| Generated on: 13 May 2026 at 09:20:13 PM (-03)"/> | |
| <!-- Twitter --> | |
| <meta name="twitter:card" content="summary" /> | |
| <meta name='twitter:title' content="4X4 RANKED #20K - rec_natan7xz_" /> | |
| <meta name='twitter:description' content="Channel: rec_natan7xz_ (1504262277292097556) | |
| Server: 4X4 RANKED #20K (1328628864368246794) | |
| Message Count: 7 Messages | |
| Generated on: 13 May 2026 at 09:20:13 PM (-03)"/> | |
| <style> | |
| @font-face { | |
| font-family: gg sans; | |
| font-weight: 400; | |
| src: url(https://cdn.jsdelivr.net/gh/mahtoid/DiscordUtils@master/ggsans-400.woff2) format("woff2") | |
| } | |
| @font-face { | |
| font-family: gg sans; | |
| font-weight: 500; | |
| src: url(https://cdn.jsdelivr.net/gh/mahtoid/DiscordUtils@master/ggsans-500.woff2) format("woff2") | |
| } | |
| @font-face { | |
| font-family: gg sans; | |
| font-weight: 600; | |
| src: url(https://cdn.jsdelivr.net/gh/mahtoid/DiscordUtils@master/ggsans-600.woff2) format("woff2") | |
| } | |
| @font-face { | |
| font-family: gg sans; | |
| font-weight: 700; | |
| src: url(https://cdn.jsdelivr.net/gh/mahtoid/DiscordUtils@master/ggsans-700.woff2) format("woff2") | |
| } | |
| @font-face { | |
| font-family: gg sans; | |
| font-weight: 800; | |
| src: url(https://cdn.jsdelivr.net/gh/mahtoid/DiscordUtils@master/ggsans-800.woff2) format("woff2") | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| .chatlog__component-button a, | |
| .chatlog__component-button:hover { | |
| text-decoration: none; | |
| } | |
| img { | |
| object-fit: contain; | |
| } | |
| .chatlog__markdown { | |
| max-width: 100%; | |
| line-height: 1.3; | |
| overflow-wrap: break-word; | |
| } | |
| .chatlog__markdown-preserve { | |
| white-space: pre-wrap; | |
| } | |
| .markdown { | |
| max-width: 100%; | |
| line-height: 1.3; | |
| overflow-wrap: break-word; | |
| } | |
| .preserve-whitespace { | |
| white-space: pre-wrap; | |
| } | |
| .spoiler { | |
| display: inline-block; | |
| border-radius: 6px; | |
| } | |
| .spoiler--hidden { | |
| cursor: pointer; | |
| border-radius: 6px; | |
| } | |
| .spoiler-text { | |
| border-radius: 6px; | |
| padding: 1px 6px; | |
| } | |
| .spoiler--hidden .spoiler-text { | |
| opacity: 1; | |
| color: #555861; | |
| } | |
| .spoiler--hidden .spoiler-text::selection { | |
| color: rgba(0, 0, 0, 0); | |
| } | |
| .spoiler-image { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 6px; | |
| } | |
| .spoiler--hidden .spoiler-image { | |
| box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); | |
| } | |
| .spoiler--hidden .spoiler-image * { | |
| filter: blur(44px); | |
| } | |
| .spoiler--hidden .spoiler-image:after { | |
| content: "SPOILER"; | |
| color: #dcddde; | |
| background-color: rgba(0, 0, 0, 0.6); | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| font-weight: 600; | |
| padding: 100%; | |
| border-radius: 20px; | |
| letter-spacing: 0.05em; | |
| font-size: 0.9em; | |
| } | |
| .spoiler--hidden:hover .spoiler-image:after { | |
| color: #fff; | |
| background-color: rgba(0, 0, 0, 0.9); | |
| } | |
| .quote { | |
| --quote-bar-color: #4e5058; | |
| display: flex; | |
| align-items: flex-start; | |
| max-width: 90%; | |
| margin: 0; | |
| padding: 0.05em 0; | |
| color: #dbdee1; | |
| font-size: 0.95em; | |
| line-height: 1.3; | |
| } | |
| .quote::before { | |
| content: ""; | |
| display: inline-block; | |
| flex-shrink: 0; | |
| width: 4px; | |
| margin: 0.1em 0.6em 0.1em 0; | |
| border-radius: 4px; | |
| background: var(--quote-bar-color); | |
| align-self: stretch; | |
| } | |
| .pre { | |
| font-family: "Consolas", "Courier New", Courier, monospace; | |
| padding: .25em .45em; | |
| margin: -.2em 0; | |
| border-radius: 6px; | |
| font-size: 85%; | |
| } | |
| .pre--multiline { | |
| margin-top: 0.25em; | |
| padding: 0.5em; | |
| border: 2px solid; | |
| border-radius: 5px; | |
| } | |
| .pre--inline { | |
| padding: 2px 6px; | |
| border-radius: 6px; | |
| font-size: 0.9em; | |
| background-color: #2f3136; | |
| border: 1px solid #202225; | |
| } | |
| .unix-timestamp { | |
| background: #40444b; | |
| border-radius: 3px; | |
| padding: 0 2px; | |
| } | |
| .mention { | |
| border-radius: 3px; | |
| padding: 0 2px; | |
| color: #dee0fc; | |
| background: rgba(88, 101, 242, .3); | |
| font-weight: 500; | |
| } | |
| .mention:hover { | |
| background: rgba(88, 101, 242, .6); | |
| } | |
| .emoji { | |
| width: 1.25em; | |
| height: 1.25em; | |
| margin: 0 0.06em; | |
| vertical-align: -0.1em; | |
| } | |
| .emoji--small { | |
| width: 1em; | |
| height: 1em; | |
| } | |
| .emoji--large { | |
| width: 2.8em; | |
| height: 2.8em; | |
| } | |
| /* Chatlog */ | |
| .chatlog { | |
| padding: 1rem 5px 0.125rem 2px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .chatlog__followup-symbol { | |
| grid-column: 1; | |
| border-style: solid; | |
| border-width: 2px 0 0 2px; | |
| border-radius: 8px 0 0 0; | |
| margin-left: 16px; | |
| margin-top: 8px; | |
| } | |
| .chatlog__attachment-icon { | |
| float: left; | |
| height: 37px; | |
| margin-right: 10px; | |
| } | |
| .chatlog__header { | |
| margin-bottom: 0.1rem; | |
| } | |
| .chatlog__message-aside { | |
| grid-column: 1; | |
| width: 72px; | |
| padding: 0.15rem 0.15rem 0 0.15rem; | |
| text-align: center; | |
| } | |
| .chatlog__message:hover { | |
| background-color: #32353b; | |
| } | |
| .chatlog__message:hover .chatlog__short-timestamp { | |
| display: block; | |
| } | |
| .chatlog__short-timestamp { | |
| display: none; | |
| color: #a3a6aa; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| direction: ltr; | |
| unicode-bidi: bidi-override; | |
| } | |
| .chatlog__message-primary { | |
| grid-column: 2; | |
| min-width: 0; | |
| } | |
| .chatlog__followup { | |
| display: flex; | |
| margin-bottom: 0.15rem; | |
| align-items: center; | |
| color: #b5b6b8; | |
| font-size: 0.875rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .chatlog__followup-avatar { | |
| width: 16px; | |
| height: 16px; | |
| margin-right: 0.25rem; | |
| border-radius: 50%; | |
| } | |
| .chatlog__followup-author { | |
| user-select: none; | |
| cursor: pointer; | |
| margin-right: 0.3rem; | |
| font-weight: 600; | |
| } | |
| .chatlog__followup-author:hover { | |
| text-decoration: underline; | |
| } | |
| .chatlog__followup-content { | |
| user-select: none; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .chatlog__reference-link { | |
| cursor: pointer; | |
| } | |
| .chatlog__reference-link * { | |
| display: inline; | |
| pointer-events: none; | |
| } | |
| .chatlog__reference-link .hljs { | |
| display: inline; | |
| } | |
| .chatlog__reference-link:hover { | |
| color: #ffffff; | |
| } | |
| .chatlog__reference-link:hover *:not(.chatlog__markdown-spoiler) { | |
| color: inherit; | |
| } | |
| .chatlog__interaction-link * { | |
| display: inline; | |
| pointer-events: none; | |
| } | |
| .chatlog__interaction-link .hljs { | |
| display: inline; | |
| } | |
| .chatlog__interaction-link:hover *:not(.chatlog__markdown-spoiler) { | |
| color: inherit; | |
| } | |
| .chatlog__reference-edited-timestamp { | |
| margin-left: 0.25rem; | |
| color: #9599a2; | |
| font-size: 0.625rem; | |
| font-weight: 400; | |
| line-height: 1; | |
| direction: ltr; | |
| unicode-bidi: bidi-override; | |
| user-select: none; | |
| } | |
| .chatlog__reference-attachment-icon { | |
| flex-grow: 500; | |
| } | |
| .chatlog__pin-avatar-container { | |
| grid-column: 1; | |
| width: 40px; | |
| height: 15px; | |
| } | |
| .chatlog__pin-avatar { | |
| border-radius: 50%; | |
| width: 25px; | |
| } | |
| .chatlog__thread-name { | |
| color: white; | |
| font-weight: 600; | |
| } | |
| .chatlog__author-name { | |
| font-weight: 500; | |
| color: #ffffff; | |
| } | |
| .chatlog__author-name:hover { | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| .chatlog__reference-name { | |
| font-weight: 500; | |
| color: #ffffff; | |
| } | |
| .chatlog__reference-name:hover { | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| .chatlog__timestamp { | |
| margin-left: 0.3rem; | |
| color: #9599a2; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| direction: ltr; | |
| unicode-bidi: bidi-override; | |
| } | |
| .chatlog__content { | |
| padding-right: 1rem; | |
| font-size: 0.95rem; | |
| word-wrap: break-word; | |
| } | |
| .chatlog__message { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| padding: 0.15rem 0; | |
| direction: ltr; | |
| unicode-bidi: bidi-override; | |
| } | |
| .chatlog__avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| } | |
| .chatlog__avatar:hover { | |
| cursor: pointer; | |
| } | |
| .chatlog__attachment { | |
| margin-top: 0.3em; | |
| position: relative; | |
| display: block; | |
| width: 100%; | |
| } | |
| .chatlog__attachment-thumbnail { | |
| vertical-align: top; | |
| max-width: 45vw; | |
| max-height: 225px; | |
| border-radius: 3px; | |
| } | |
| .chatlog__attachment-audio-container { | |
| width: 100%; | |
| max-width: 520px; | |
| padding: 10px; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| background-color: #2f3136; | |
| border: 1px solid #292b2f; | |
| } | |
| .chatlog__attachment.chatlog__attachment-spoiler { | |
| overflow: hidden; | |
| position: relative; | |
| display: block; | |
| width: fit-content; | |
| } | |
| .chatlog__attachment.chatlog__attachment-spoiler::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background-color: rgba(0, 0, 0, 0.25); | |
| border-radius: 5px; | |
| z-index: 1; | |
| pointer-events: none; | |
| } | |
| .chatlog__attachment.chatlog__attachment-spoiler::after { | |
| content: "SPOILER"; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| color: #dcddde; | |
| background-color: rgba(0, 0, 0, 0.55); | |
| font-weight: 600; | |
| padding: 10px 16px; | |
| border-radius: 999px; | |
| letter-spacing: 0.05em; | |
| font-size: 0.9em; | |
| z-index: 2; | |
| pointer-events: none; | |
| } | |
| .chatlog__attachment.chatlog__attachment-spoiler .chatlog__attachment-thumbnail, | |
| .chatlog__attachment.chatlog__attachment-spoiler .chatlog__attachment-container, | |
| .chatlog__attachment.chatlog__attachment-spoiler .chatlog__attachment-audio-container, | |
| .chatlog__attachment.chatlog__attachment-spoiler video, | |
| .chatlog__attachment.chatlog__attachment-spoiler audio { | |
| filter: blur(26px); | |
| } | |
| .chatlog__attachment.chatlog__attachment-spoiler:hover::before, | |
| .chatlog__attachment.chatlog__attachment-spoiler:hover::after { | |
| opacity: 0; | |
| } | |
| .chatlog__attachment.chatlog__attachment-spoiler:hover .chatlog__attachment-thumbnail, | |
| .chatlog__attachment.chatlog__attachment-spoiler:hover .chatlog__attachment-container, | |
| .chatlog__attachment.chatlog__attachment-spoiler:hover .chatlog__attachment-audio-container, | |
| .chatlog__attachment.chatlog__attachment-spoiler:hover video, | |
| .chatlog__attachment.chatlog__attachment-spoiler:hover audio { | |
| filter: blur(0); | |
| } | |
| .chatlog__attachment-audio-container audio { | |
| padding-top: 0.5em; | |
| width: 100%; | |
| } | |
| .chatlog__attachment-container { | |
| height: 40px; | |
| width: 100%; | |
| max-width: 520px; | |
| padding: 10px; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| background-color: #2f3136; | |
| border: 1px solid #292b2f; | |
| } | |
| .chatlog__attachment-filesize { | |
| color: #72767d; | |
| font-size: 12px; | |
| } | |
| .chatlog__attachment-filename { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| font-weight: 600; | |
| } | |
| .chatlog__embed { | |
| --embed-color: rgba(74, 74, 80, 1); | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| column-gap: 1rem; | |
| margin-top: 0.35em; | |
| max-width: 520px; | |
| padding: 2px 1rem 1rem 0.75rem; | |
| background-color: #37373d; | |
| color: #f3f3f4; | |
| border: 1px solid #434349; | |
| border-left: 4px solid var(--embed-color); | |
| border-radius: 4px; | |
| box-sizing: border-box; | |
| font-size: 16px; | |
| } | |
| .chatlog__embed-content { | |
| display: contents; | |
| } | |
| .chatlog__embed-text { | |
| grid-column: 1; | |
| grid-row: 1; | |
| min-width: 0; | |
| } | |
| .chatlog__embed-author { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .chatlog__embed-author-icon { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .chatlog__embed-author-name { | |
| font-size: 0.875em; | |
| font-weight: 600; | |
| } | |
| .chatlog__embed-title { | |
| margin-top: 0.5rem; | |
| font-size: 1rem; | |
| line-height: 1.375; | |
| font-weight: 600; | |
| color: inherit; | |
| } | |
| .chatlog__embed-title a { | |
| color: #3172db; | |
| text-decoration: none; | |
| } | |
| .chatlog__embed-title a:hover { | |
| text-decoration: underline; | |
| } | |
| .chatlog__embed-description { | |
| margin-top: 0.5rem; | |
| font-weight: 400; | |
| font-size: 0.95rem; | |
| line-height: 1.375; | |
| color: inherit; | |
| } | |
| .chatlog__embed-fields { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| width: 100%; | |
| } | |
| .chatlog__embed-fields:empty { | |
| display: none; | |
| } | |
| .chatlog__embed-field { | |
| padding-top: 0; | |
| font-size: 0.875em; | |
| min-width: 0; | |
| } | |
| .chatlog__embed-field--inline { | |
| grid-column: span 1; | |
| } | |
| .chatlog__embed-field:not(.chatlog__embed-field--inline) { | |
| grid-column: 1 / -1; | |
| } | |
| .chatlog__embed-field-name { | |
| margin-bottom: 0.15em; | |
| font-weight: 600; | |
| color: inherit; | |
| } | |
| .chatlog__embed-field-value { | |
| font-weight: 400; | |
| color: inherit; | |
| line-height: 1.3; | |
| } | |
| .chatlog__embed-thumbnail-container { | |
| grid-column: 2; | |
| grid-row: 1 / span 3; | |
| align-self: start; | |
| justify-self: end; | |
| margin-top: 0.5rem; | |
| } | |
| .chatlog__embed-thumbnail-link, | |
| .chatlog__embed-image-link { | |
| display: block; | |
| } | |
| .chatlog__embed-thumbnail { | |
| max-width: 80px; | |
| max-height: 80px; | |
| border-radius: 4px; | |
| } | |
| .chatlog__embed-image-container { | |
| grid-column: 1 / -1; | |
| margin-top: 0.5rem; | |
| } | |
| .chatlog__embed-image { | |
| max-width: 100%; | |
| max-height: 400px; | |
| border-radius: 4px; | |
| } | |
| .chatlog__embed-footer { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| color: #dbdee1; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .chatlog__embed-footer-icon { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| vertical-align: middle; | |
| } | |
| .chatlog__embed-footer-text { | |
| font-size: inherit; | |
| font-weight: inherit; | |
| color: inherit; | |
| } | |
| .chatlog__components { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 4px; | |
| } | |
| .chatlog__component-button { | |
| display: inline-flex; | |
| align-items: center; | |
| background-color: var(--button-color, #4f545c); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 6px; | |
| box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
| min-height: 38px; | |
| padding: 0 12px; | |
| cursor: pointer; | |
| transition: background-color 0.12s ease, transform 0.12s ease; | |
| text-decoration: none; | |
| } | |
| .chatlog__component-button--link { | |
| background-color: rgba(255, 255, 255, 0.03); | |
| border-color: rgba(79, 84, 92, 0.6); | |
| } | |
| .chatlog__component-button--link { | |
| color: #f2f3f5; | |
| } | |
| .chatlog__component-button:hover:not(.chatlog__component-disabled) { | |
| filter: brightness(1.05); | |
| } | |
| .chatlog__component-button:active:not(.chatlog__component-disabled) { | |
| transform: translateY(1px); | |
| } | |
| .chatlog__button-inner { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: #fff; | |
| text-decoration: none; | |
| width: 100%; | |
| } | |
| .chatlog__button-emoji:empty, | |
| .chatlog__button-icon:empty { | |
| display: none; | |
| } | |
| .chatlog__button-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| line-height: 0; | |
| opacity: 0.8; | |
| } | |
| .chatlog__button-icon img { | |
| height: 14px; | |
| width: 14px; | |
| display: block; | |
| } | |
| .chatlog__button-label { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: inherit; | |
| white-space: nowrap; | |
| line-height: 1.2; | |
| } | |
| .chatlog__button-label > * { | |
| padding-left: 2.5px; | |
| padding-right: 2.5px; | |
| } | |
| .chatlog__reactions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| margin-top: 6px; | |
| } | |
| .chatlog__reaction { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 9px; | |
| border-radius: 9px; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.03); | |
| box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); | |
| } | |
| .chatlog__reaction-count { | |
| min-width: 9px; | |
| margin-left: 0.1em; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: #d6d8db; | |
| line-height: 1.2; | |
| } | |
| .chatlog__reaction img { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .chatlog__bot-tag { | |
| background: #5865f2; | |
| color: #ffffff; | |
| padding: 0 0.2rem; | |
| margin-top: 0.5em; | |
| border-radius: 0.1875rem; | |
| margin-left: 0.07rem; | |
| position: relative; | |
| vertical-align: top; | |
| display: inline-flex; | |
| flex-shrink: 0; | |
| text-indent: 0; | |
| font-weight: 500; | |
| font-size: 10px; | |
| line-height: 15px; | |
| } | |
| .chatlog__bot-tag-verified { | |
| width: 16px; | |
| margin-left: -3px; | |
| } | |
| .chatlog__followup .chatlog__bot-tag { | |
| margin-right: 0.3rem; | |
| margin-top: 0; | |
| } | |
| .markup { | |
| white-space: normal; | |
| } | |
| .markup ul { | |
| margin: 4px 0 0 16px; | |
| margin-block-start: 0; | |
| margin-block-end: 0; | |
| padding-inline-start: 0; | |
| list-style-position: outside; | |
| list-style-type: circle; | |
| } | |
| .markup ul ul { | |
| list-style-type: circle; | |
| margin-bottom: 0; | |
| } | |
| .markup li { | |
| margin: 0; | |
| border: 0; | |
| font-weight: inherit; | |
| font-style: inherit; | |
| font-family: inherit; | |
| font-size: 100%; | |
| vertical-align: baseline; | |
| padding-top: 5px; | |
| padding-bottom: 5px; | |
| } | |
| .meta__details .chatlog__bot-tag { | |
| margin-left: 1ch; | |
| } | |
| /* Postamble */ | |
| .postamble { | |
| margin: 1.4em 0.3em 0.6em 0.3em; | |
| padding: 1em; | |
| border-top: 1px solid; | |
| } | |
| /* General */ | |
| html, body { | |
| height: 100%; | |
| width: 100%; | |
| background-color: #36393f; | |
| font-family: "gg sans", Helvetica, Arial, sans-serif; | |
| font-size: 17px; | |
| color: #fff; | |
| margin: 0; | |
| padding: 0; | |
| overflow: auto; | |
| } | |
| a { | |
| color: #0096cf; | |
| } | |
| .spoiler-text { | |
| background-color: rgba(255, 255, 255, 0.12); | |
| border-radius: 6px; | |
| padding: 1px 6px; | |
| display: inline-block; | |
| color: #e6e6e6; | |
| } | |
| .spoiler--hidden .spoiler-text { | |
| background-color: #6a6d75; | |
| color: transparent; | |
| } | |
| .spoiler--hidden:hover .spoiler-text { | |
| background-color: #5c5f66; | |
| color: transparent; | |
| } | |
| .quote { | |
| --quote-bar-color: #4e5058; | |
| color: #dbdee1; | |
| } | |
| .pre { | |
| background-color: #2f3136 !important; | |
| } | |
| .pre--multiline { | |
| border-color: #282b30 !important; | |
| color: #b9bbbe !important; | |
| } | |
| /* Chatlog */ | |
| .chatlog__message-group { | |
| margin-bottom: 1rem; | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .chatlog__message-container { | |
| background-color: transparent; | |
| transition: background-color 0.5s ease; | |
| } | |
| .chatlog__message-container--highlighted { | |
| background-color: rgba(114, 137, 218, 0.2) !important; | |
| transition: none !important; | |
| } | |
| .chatlog__followup-symbol { | |
| height: 10px; | |
| margin: 6px 4px 4px 36px; | |
| border-left: 2px solid #4f545c; | |
| border-top: 2px solid #4f545c; | |
| border-radius: 8px 0 0 0; | |
| border-color: #4f545c; | |
| } | |
| .chatlog__reference-icon { | |
| width: 20px; | |
| display: inline-block; | |
| vertical-align: bottom; | |
| } | |
| .chatlog__interaction-icon { | |
| width: 15px; | |
| display: inline-block; | |
| vertical-align: bottom; | |
| margin-left: 3px; | |
| margin-bottom: 2px; | |
| } | |
| .chatlog__reference-link { | |
| color: #b5b6b8; | |
| } | |
| .chatlog__interaction-filler { | |
| color: #b5b6b8; | |
| } | |
| .chatlog__interaction-link { | |
| color: #1680ab; | |
| cursor: pointer; | |
| } | |
| .chatlog__pinned-link { | |
| color: white; | |
| font-weight: 600; | |
| } | |
| .chatlog__reference-link:hover { | |
| color: #ffffff; | |
| } | |
| .chatlog__interaction-link:hover { | |
| text-decoration: underline; | |
| } | |
| .chatlog__message--highlighted { | |
| background-color: rgba(114, 137, 218, 0.2) !important; | |
| } | |
| .chatlog__message--pinned { | |
| background-color: rgba(249, 168, 37, 0.05); | |
| } | |
| .chatlog__embed-color-pill--default { | |
| display: none; | |
| } | |
| .chatlog__embed-content-container { | |
| background-color: transparent; | |
| border: none; | |
| padding: 0; | |
| } | |
| .chatlog__embed-author-name, | |
| .chatlog__embed-author-name-link, | |
| .chatlog__embed-title { | |
| color: inherit; | |
| } | |
| .chatlog__reaction-count { | |
| color: rgba(255, 255, 255, 0.3); | |
| } | |
| /* === INFO === */ | |
| .panel { | |
| display: flex; | |
| flex-shrink: 0; | |
| align-items: center; | |
| padding: 6px 0 6px 0; | |
| user-select: none; | |
| font-weight: 700; | |
| font-size: 20px; | |
| box-shadow: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05); | |
| } | |
| .panel__hashtag-icon { | |
| width: 24px; | |
| height: 24px; | |
| margin-left: 16px; | |
| margin-right: 8px; | |
| margin-top: 1px; | |
| } | |
| .panel__channel-topic { | |
| border-left-style: solid; | |
| border-color: #4f545c; | |
| border-width: 1px; | |
| color: #b9bbbe; | |
| margin-left: 10px; | |
| padding-left: 10px; | |
| font-size: 14px; | |
| line-height: 18px; | |
| height: 18px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| font-weight: 500; | |
| } | |
| .panel__summary-button { | |
| display: flex; | |
| align-items: center; | |
| padding: 0.2em 0.35em; | |
| border-radius: 2px; | |
| margin-left: auto; | |
| margin-right: 50px; | |
| color: #b9bbbe; | |
| } | |
| .panel__summary-button:hover { | |
| color: #fff; | |
| cursor: pointer; | |
| } | |
| .summary-popout.visible { | |
| transform: scale(1); | |
| transition: transform 200ms ease-in-out; | |
| } | |
| .summary-popout { | |
| position: absolute; | |
| z-index: 6969; | |
| background-color: #36393f; | |
| box-shadow: | |
| 0 2px 10px 0 rgb(0 0 0 / 20%), | |
| 0 0 0 1px rgb(32 34 37 / 60%); | |
| width: 250px; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| transform: scale(0); | |
| transform-origin: top right; | |
| } | |
| .main { | |
| display: flex; | |
| overflow-y: auto; | |
| height: calc(100% - 126px); | |
| flex-direction: column; | |
| } | |
| .main::-webkit-scrollbar { | |
| width: 8px; | |
| background-color: rgba(0,0,0,0); | |
| } | |
| /* Add a thumb */ | |
| .main::-webkit-scrollbar-thumb { | |
| background-color: #202225; | |
| border: 0 #36393f solid; | |
| border-left-width: 1px; | |
| border-right-width: 1px; | |
| } | |
| .buffer { | |
| flex: 1; | |
| } | |
| .info { | |
| margin: 0 16px; | |
| padding-bottom: 12px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| flex-shrink: 0; | |
| user-select: none; | |
| } | |
| .info__title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| line-height: 40px; | |
| } | |
| .info__subject { | |
| color: #b9bbbe; | |
| font-size: 16px; | |
| line-height: 20px; | |
| } | |
| .info__channel-message-count { | |
| margin-top: 2px; | |
| } | |
| .footer { | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| height: 20px; | |
| border-radius: 5px; | |
| margin: 0 16px 16px; | |
| padding: 16px; | |
| background-color: #202225; | |
| position: relative; | |
| z-index: 10; | |
| user-select: none; | |
| } | |
| .footer__text { | |
| font-size: 16px; | |
| line-height: 20px; | |
| font-weight: 400; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| #context-menu { | |
| position: absolute; | |
| width: 188px; | |
| border-radius: 4px; | |
| padding: 6px 8px; | |
| background-color: #18191c; | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, .24); | |
| font-weight: 500; | |
| font-size: 14px; | |
| line-height: 18px; | |
| color: #b9bbbe; | |
| transform: scale(0); | |
| transform-origin: top left; | |
| z-index: 6969; | |
| } | |
| #context-menu.visible { | |
| transform: scale(1); | |
| transition: transform 200ms ease-in-out; | |
| } | |
| #context-menu .item { | |
| margin: 2px 0; | |
| padding: 0 8px; | |
| display: flex; | |
| align-items: center; | |
| border-radius: 2px; | |
| min-height: 32px; | |
| cursor: pointer; | |
| } | |
| #context-menu .item:hover { | |
| color: #fff; | |
| } | |
| .meta-popout { | |
| position: absolute; | |
| z-index: 6969; | |
| background-color: #292b2f; | |
| box-shadow: | |
| 0 2px 10px 0 rgb(0 0 0 / 20%), | |
| 0 0 0 1px rgb(32 34 37 / 60%); | |
| width: 280px; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| transform: scale(0); | |
| transform-origin: top left; | |
| } | |
| .meta-popout img { | |
| height: 16px; | |
| width: 16px; | |
| } | |
| .meta__img-border { | |
| border-radius: 50%; | |
| } | |
| .meta-popout.mounted { | |
| transform: scale(1); | |
| transition: transform .3 ease-in-out;; | |
| } | |
| .meta__divider { | |
| height: 4px; | |
| width: 4px; | |
| border-radius: 50%; | |
| background-color: #4f545c; | |
| } | |
| .meta__divider-2 { | |
| margin: 5px 12px 10px; | |
| height: 1px; | |
| background-color: #4f545c; | |
| } | |
| .meta__header { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: #202225; | |
| padding-top: 10px; | |
| } | |
| .meta__header img { | |
| user-select: none; | |
| border-radius: 50%; | |
| margin-bottom: 10px; | |
| position: relative; | |
| width: 80px; | |
| height: 80px; | |
| } | |
| .meta__details { | |
| display: flex; | |
| flex-wrap: wrap; | |
| padding-bottom: 7px; | |
| } | |
| .meta__display-name { | |
| font-weight: 500; | |
| color: #fff; | |
| opacity: 0.9; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| font-size: 12px; | |
| } | |
| .meta__user { | |
| font-weight: 500; | |
| color: #fff; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| } | |
| .meta__discriminator { | |
| font-weight: 500; | |
| color: #fff; | |
| opacity: .6; | |
| } | |
| .meta-popout .meta__header .bot { | |
| margin-left: 1ch; | |
| } | |
| .meta__description { | |
| padding: 10px; | |
| background-color: #18191c; | |
| margin: 10px; | |
| border-radius: 5%; | |
| } | |
| .meta__field { | |
| margin-bottom: 10px; | |
| } | |
| .meta__title { | |
| font-weight: 700; | |
| color: #72767d; | |
| text-transform: uppercase; | |
| font-size: 12px; | |
| line-height: 16px; | |
| margin-bottom: 1px; | |
| } | |
| .meta__value { | |
| font-size: 14px; | |
| line-height: 16px; | |
| align-items: center; | |
| display: flex; | |
| column-gap: 6px; | |
| } | |
| .meta__support { | |
| text-align: right; | |
| } | |
| .meta__support a { | |
| color: #72767d; | |
| text-transform: uppercase; | |
| font-size: 10px; | |
| font-weight: 700; | |
| } | |
| .dropdownButton { | |
| width: 100%; | |
| color: #e3e5e8; | |
| padding: 10px 14px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| text-align: left; | |
| border-radius: 8px; | |
| background-color: #2f3136; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .dropdownButtonLabel { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| color: #dbdee1; | |
| } | |
| .dropdownButtonLabel > .chatlog__markdown { | |
| display: inline; | |
| } | |
| .chatlog__component-disabled { | |
| cursor: not-allowed; | |
| opacity: 0.55; | |
| } | |
| .chatlog__component-disabled a { | |
| cursor: not-allowed; | |
| pointer-events: none; | |
| } | |
| .chatlog__component-disabled button { | |
| cursor: not-allowed; | |
| } | |
| .chatlog__component-dropdown { | |
| width: 320px; | |
| margin-top: 6px; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .dropdownMenuContent { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .chatlog__dropdown-content { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .chatlog__dropdown-emoji { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .chatlog__dropdown-emoji img { | |
| width: 1.4em; | |
| height: 1.4em; | |
| } | |
| .chatlog__dropdown-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .chatlog__role-icon { | |
| height: 16px; | |
| width: 16px; | |
| margin-left: 5px; | |
| transform: translateY(2px); | |
| } | |
| .dropdownContent { | |
| z-index: 10; | |
| display: none; | |
| width: 100%; | |
| font-size: 14px; | |
| position: absolute; | |
| margin-top: 4px; | |
| background-color: #18191c; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 4px 18px rgba(0,0,0,0.45); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .dropdownContentOption { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 12px 14px; | |
| text-decoration: none; | |
| color: #f2f3f5; | |
| background: transparent; | |
| } | |
| .dropdownContentOption:hover { | |
| background-color: rgba(255, 255, 255, 0.04); | |
| } | |
| .dropdownContentOption.dropdownContentSelected { | |
| background-color: #2f3356; | |
| border-left: 3px solid #5865F2; | |
| } | |
| .dropdownContentText { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .dropdownContentTitle { | |
| color: white; | |
| font-weight: 600; | |
| line-height: 1.2; | |
| } | |
| .dropdownContentDesc { | |
| color: #9ca3af; | |
| font-size: 12px; | |
| } | |
| .dropdownContentCheck { | |
| margin-left: auto; | |
| color: #ffffff; | |
| font-weight: 700; | |
| } | |
| .dropdownContentCheck:empty { | |
| display: none; | |
| } | |
| .chatlog__dropdown-icon { | |
| right: 10px; | |
| width: 18px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| position: absolute; | |
| pointer-events: none; | |
| } | |
| .chatlog__component-dropdown-border { | |
| border-bottom-left-radius: 0px; | |
| border-bottom-right-radius: 0px; | |
| } | |
| .chatlog__component-dropdown-show { display: block; } | |
| .chatlog__component-dropdown a:hover { background-color: inherit; } | |
| .tippy-box[data-theme~='disc'] { | |
| font-weight: 600; | |
| background-color: #111214; | |
| color: #dfe0e4; | |
| } | |
| .tippy-box[data-theme~='disc'][data-placement^='top'] > .tippy-arrow::before { | |
| border-top-color: #111214; | |
| } | |
| .tippy-box[data-theme~='disc'][data-placement^='left'] > .tippy-arrow::before { | |
| border-left-color: #111214; | |
| } | |
| .tippy-box[data-theme~='disc'][data-placement^='bottom'] > .tippy-arrow::before { | |
| border-bottom-color: #111214; | |
| } | |
| .tippy-box[data-theme~='disc'][data-placement^='right'] > .tippy-arrow::before { | |
| border-right-color: #111214; | |
| } | |
| .cursor_pointer { cursor: pointer; } | |
| /* Components v2 Styles */ | |
| .chatlog__component-container { | |
| position: relative; | |
| background-color: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 8px; | |
| margin: 8px 0; | |
| padding: 12px 14px; | |
| width: min(100%, 560px); | |
| max-width: 560px; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| -webkit-flex-direction: column; | |
| gap: 8px; | |
| } | |
| .chatlog__component-container::before { | |
| content: ""; | |
| position: absolute; | |
| left: 1px; | |
| top: 1px; | |
| bottom: 1px; | |
| width: 4px; | |
| border-radius: 6px 0 0 6px; | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| .chatlog__component-container.chatlog__component-container--accent::before { | |
| background: var(--component-accent); | |
| } | |
| .chatlog__component-container.chatlog__component-container--accent { | |
| padding-left: 18px; | |
| } | |
| .chatlog__component-container.chatlog__component-spoiler { | |
| cursor: pointer; | |
| } | |
| .chatlog__component-container.chatlog__component-spoiler::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background-color: rgba(0, 0, 0, 0.35); | |
| border-radius: inherit; | |
| pointer-events: none; | |
| transition: opacity 0.2s ease; | |
| } | |
| .chatlog__component-container.chatlog__component-spoiler > :not(.chatlog__component-spoiler-label) { | |
| filter: blur(18px); | |
| } | |
| .chatlog__component-container.chatlog__component-spoiler:hover::after { | |
| opacity: 0; | |
| } | |
| .chatlog__component-container.chatlog__component-spoiler:hover > :not(.chatlog__component-spoiler-label) { | |
| filter: blur(0); | |
| } | |
| .chatlog__component-spoiler-label { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| color: #dcddde; | |
| background-color: rgba(0, 0, 0, 0.6); | |
| font-weight: 700; | |
| padding: 10px 16px; | |
| border-radius: 999px; | |
| letter-spacing: 0.05em; | |
| font-size: 0.9em; | |
| z-index: 2; | |
| pointer-events: none; | |
| } | |
| .chatlog__component-section { | |
| display: grid; | |
| grid-template-columns: 1fr min-content; | |
| gap: 8px; | |
| margin: 0; | |
| padding: 6px 0; | |
| align-items: center; | |
| } | |
| .chatlog__component-section--has-accessory { | |
| align-items: start; | |
| } | |
| .chatlog__component-section-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .chatlog__component-section-accessory { | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| } | |
| .chatlog__component-text-display { | |
| color: #e3e5e8; | |
| font-size: 14px; | |
| line-height: 1.375; | |
| margin: 2px 0; | |
| padding: 0; | |
| background: none; | |
| border: none; | |
| } | |
| .chatlog__component-text-display h1, | |
| .chatlog__component-text-display h2, | |
| .chatlog__component-text-display h3, | |
| .chatlog__component-text-display h4, | |
| .chatlog__component-text-display h5 { | |
| margin: 0 0 6px 0; | |
| } | |
| .chatlog__component-thumbnail { | |
| width: 90px; | |
| height: 90px; | |
| background: #2f3136; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); | |
| overflow: hidden; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .chatlog__component-thumbnail img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .chatlog__component-thumbnail.chatlog__component-spoiler::before, | |
| .chatlog__component-media-item.chatlog__component-spoiler::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.35); | |
| z-index: 1; | |
| pointer-events: none; | |
| } | |
| .chatlog__component-thumbnail.chatlog__component-spoiler img, | |
| .chatlog__component-media-item.chatlog__component-spoiler img { | |
| filter: blur(26px); | |
| } | |
| .chatlog__component-thumbnail-description { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); | |
| color: #fff; | |
| padding: 6px; | |
| font-size: 12px; | |
| z-index: 2; | |
| } | |
| .chatlog__component-media-gallery { | |
| display: grid; | |
| gap: 10px; | |
| margin: 8px 0; | |
| grid-template-columns: repeat(12, 1fr); | |
| width: 100%; | |
| grid-auto-flow: row dense; | |
| } | |
| .chatlog__component-media-gallery.chatlog__media-gallery-single .chatlog__component-media-item:first-child { | |
| grid-column: 1 / span 12; | |
| aspect-ratio: 3 / 2; | |
| } | |
| .chatlog__component-media-gallery.chatlog__media-gallery-double .chatlog__component-media-item:nth-child(-n+2) { | |
| grid-column-end: span 6; | |
| aspect-ratio: 3 / 2; | |
| } | |
| .chatlog__component-media-gallery.chatlog__media-gallery-triple .chatlog__component-media-item:nth-child(1) { | |
| grid-column: 1 / span 8; | |
| grid-row: 1 / span 2; | |
| } | |
| .chatlog__component-media-gallery.chatlog__media-gallery-triple .chatlog__component-media-item:nth-child(2) { | |
| grid-column: 9 / span 4; | |
| } | |
| .chatlog__component-media-gallery.chatlog__media-gallery-triple .chatlog__component-media-item:nth-child(3) { | |
| grid-column: 9 / span 4; | |
| } | |
| .chatlog__component-media-gallery.chatlog__media-gallery-grid .chatlog__component-media-item { | |
| grid-column-end: span 6; | |
| aspect-ratio: 3 / 2; | |
| } | |
| .chatlog__component-media-gallery .chatlog__component-media-item { | |
| position: relative; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 100px; | |
| grid-column-end: span 4; | |
| } | |
| .chatlog__component-media-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| background: rgba(0, 0, 0, 0.08); | |
| } | |
| .chatlog__component-media-description { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); | |
| color: #fff; | |
| padding: 6px; | |
| font-size: 12px; | |
| z-index: 2; | |
| } | |
| .chatlog__component-separator { | |
| margin: unset; | |
| height: 1px; | |
| } | |
| .chatlog__component-separator.chatlog__separator-large { | |
| margin: 8px 0; | |
| } | |
| .chatlog__separator-line { | |
| width: 100%; | |
| height: 1px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .chatlog__component-file { | |
| display: flex; | |
| align-items: center; | |
| background-color: #43464d; | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin: 6px 0; | |
| cursor: pointer; | |
| max-width: 320px; | |
| width: 100%; | |
| min-height: 44px; | |
| position: relative; | |
| overflow: hidden; | |
| gap: 10px; | |
| font-weight: 500; | |
| } | |
| .chatlog__component-file:hover { | |
| background-color: #4b4e55; | |
| } | |
| .chatlog__component-file.chatlog__component-spoiler { | |
| overflow: hidden; | |
| cursor: pointer; | |
| } | |
| .chatlog__component-file.chatlog__component-spoiler::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background-color: rgba(0, 0, 0, 0.25); | |
| border-radius: inherit; | |
| z-index: 1; | |
| pointer-events: none; | |
| } | |
| .chatlog__component-file.chatlog__component-spoiler::after { | |
| content: "SPOILER"; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| color: #dcddde; | |
| background-color: rgba(0, 0, 0, 0.55); | |
| font-weight: 700; | |
| padding: 10px 16px; | |
| border-radius: 999px; | |
| letter-spacing: 0.05em; | |
| font-size: 0.9em; | |
| z-index: 2; | |
| pointer-events: none; | |
| } | |
| .chatlog__component-file.chatlog__component-spoiler > * { | |
| filter: blur(20px); | |
| } | |
| .chatlog__component-file-icon { | |
| width: 32px; | |
| height: 32px; | |
| flex-shrink: 0; | |
| } | |
| .chatlog__component-file-info { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| text-decoration: none; | |
| color: inherit; | |
| min-width: 0; | |
| } | |
| .chatlog__component-file-details { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .chatlog__component-file-name { | |
| color: #00aff4; | |
| font-weight: 600; | |
| font-size: 13px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| line-height: 1.3; | |
| } | |
| .chatlog__component-file-size { | |
| color: #b5bac1; | |
| font-size: 12px; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/solarized-dark.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script> | |
| <script src="https://unpkg.com/@popperjs/core@2.11.5/dist/umd/popper.min.js"></script> | |
| <script src="https://unpkg.com/tippy.js@6.3.7/dist/tippy-bundle.umd.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.5/plugin/customParseFormat.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.5/plugin/isToday.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.5/plugin/isTomorrow.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.5/plugin/isBetween.js"></script> | |
| <script> | |
| <!-- Scroll to Message (References) --> | |
| function scrollToMessage(event, id) { | |
| var element = document.getElementById('chatlog__message-container-' + id); | |
| if (element !== null && element !== undefined) { | |
| event.preventDefault(); | |
| element.classList.add('chatlog__message-container--highlighted'); | |
| element.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'center', | |
| }); | |
| setTimeout(function() { | |
| element.classList.remove('chatlog__message-container--highlighted'); | |
| }, 1500); | |
| } | |
| } | |
| <!-- Spoiler (|| Spoiler ||) --> | |
| function showSpoiler(event, element) { | |
| if (element && element.classList.contains('spoiler--hidden')) { | |
| event.preventDefault(); | |
| element.classList.remove('spoiler--hidden'); | |
| } | |
| } | |
| <!-- Menu Dropdown (Selectmenu) --> | |
| function showDropdown(dropdownID) { | |
| const button = document.getElementById("dropdownButton" + dropdownID); | |
| const menuContent = document.getElementById("dropdownMenuContent" + dropdownID); | |
| const menu = document.getElementById("dropdownMenu" + dropdownID); | |
| const isOpen = button.getAttribute("aria-expanded") === "true"; | |
| button.setAttribute("aria-expanded", isOpen ? "false" : "true"); | |
| button.classList.toggle("chatlog__component-dropdown-border"); | |
| if (menuContent) { | |
| menuContent.classList.toggle("chatlog__component-dropdown-show"); | |
| } | |
| if (menu) { | |
| menu.classList.toggle("chatlog__component-dropdown-show"); | |
| } | |
| } | |
| <!-- Component Spoiler (click to reveal thumbnails/media) --> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const spoilerTargets = document.querySelectorAll( | |
| '.chatlog__component-thumbnail.chatlog__component-spoiler, ' + | |
| '.chatlog__component-media-item.chatlog__component-spoiler, ' + | |
| '.chatlog__component-container.chatlog__component-spoiler, ' + | |
| '.chatlog__component-file.chatlog__component-spoiler' | |
| ); | |
| spoilerTargets.forEach((el) => { | |
| el.addEventListener('click', (e) => { | |
| if (!el.classList.contains('chatlog__component-spoiler')) return; | |
| e.preventDefault(); | |
| el.classList.remove('chatlog__component-spoiler'); | |
| const label = el.querySelector('.chatlog__component-spoiler-label'); | |
| if (label) { | |
| label.remove(); | |
| } | |
| }); | |
| }); | |
| }); | |
| <!-- Code Block Markdown (```lang```) --> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| document.querySelectorAll('.pre--multiline').forEach((block) => { | |
| hljs.highlightBlock(block); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="panel"> | |
| <img class="panel__hashtag-icon" src="https://cdn.jsdelivr.net/gh/mahtoid/DiscordUtils@master/discord-hashtag.svg"/> | |
| <span>rec_natan7xz_</span> | |
| <div class="panel__summary-button" id="summary-button"> | |
| <span>Summary</span> | |
| </div> | |
| </div> | |
| <div class="main"> | |
| <div class="buffer"> | |
| <!-- Magical space goes here --> | |
| </div> | |
| <div class="info"> | |
| <span class="info__title">Welcome to #rec_natan7xz_!</span> | |
| <span class="info__subject">This is the start of the #rec_natan7xz_ channel. </span> | |
| </div> | |
| <div class="chatlog"> | |
| <div class="chatlog__message-group"> | |
| <div id="chatlog__message-container-1504262278579486801" class="chatlog__message-container" data-message-id="1504262278579486801"> | |
| <div class="chatlog__message"> | |
| <div class="chatlog__message-aside"> | |
| <img class="chatlog__avatar" src="https://cdn.discordapp.com/avatars/1496778406522785932/a_5d67400b9fa3a63c07cfc10317cd83a9.gif?size=1024" data-user-id="1496778406522785932" /> | |
| </div> | |
| <div class="chatlog__message-primary"> | |
| <div class="chatlog__header"> | |
| <span class="chatlog__author-name" title="4X4RANKED#4287" data-user-id="1496778406522785932" style="color: #FFFFFF;">4X4RANKED</span> | |
| <span class="chatlog__bot-tag">APP</span> | |
| <span class="chatlog__timestamp" data-timestamp="Wednesday, 13 May 2026 08:21 PM">13-05-2026 08:21 PM</span> | |
| </div> | |
| <div class="chatlog__content chatlog__markdown" data-message-id="1504262278579486801" id="message-1504262278579486801"> | |
| <span class="chatlog__markdown-preserve"><span class="mention" title="1314665254504108032">@RANK 638 | natan7xz_</span> <span style="color: #dee0fc;">@-</span> <span style="color: #f3ecec;">@・EQUIPE | REC</span> <span style="color: #dee0fc;">@<img class="emoji emoji--small" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/72x72/1f36d.png" alt="🍭" title="Lollipop" aria-label="Emoji: Lollipop"></span> <span style="color: #dee0fc;">@'-'</span> @deleted-role</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <div id="chatlog__message-container-1504262281901375558" class="chatlog__message-container" data-message-id="1504262281901375558"> | |
| <div class="chatlog__message"> | |
| <div class="chatlog__message-aside"> | |
| <div class="chatlog__short-timestamp" data-timestamp="Wednesday, 13 May 2026 08:21 PM">08:21 PM</div> | |
| </div> | |
| <div class="chatlog__message-primary"> | |
| <div class="chatlog__content chatlog__markdown" data-message-id="1504262281901375558" id="message-1504262281901375558"> | |
| <div class="chatlog__component-container chatlog__component-container--accent " style="--component-accent:#2b2d31;"> | |
| <div class="chatlog__component-separator chatlog__separator-small"> | |
| <div class="chatlog__separator-line"></div> | |
| </div><div class="chatlog__component-section chatlog__component-section--has-accessory"> | |
| <div class="chatlog__component-section-content"> | |
| <div class="chatlog__component-text-display"> | |
| <span class="chatlog__markdown chatlog__markdown-preserve"><strong>Quem assumiu:</strong> <span class="mention" title="1414651600441577758">@xgje</span> | |
| <strong>Quem abriu:</strong> <span class="mention" title="1314665254504108032">@RANK 638 | natan7xz_</span> | |
| <strong>Nome/Idade:</strong> Natan 19 | |
| <strong>Já foi staff:</strong> Sim, atendendo sup | |
| <strong>Tempo na área:</strong> 5 meses | |
| <strong>Horário:</strong> 16:00 as 22:00 | |
| <strong>Trabalha/Estuda:</strong> Trabalho das 5:30 às 15:30</span> | |
| </div> | |
| </div> | |
| <div class="chatlog__component-section-accessory"> | |
| <div class="chatlog__component-thumbnail " title=""> | |
| <img src="https://cdn.discordapp.com/avatars/1314665254504108032/312410014d3bacb797b28f842f650fb9.png?size=1024" alt="312410014d3bacb797b28f842f650fb9.png" loading="lazy"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chatlog__components"><a class="chatlog__component-button chatlog__component-button--filled chatlog__component-disabled" style="--button-color: #4F545C" href="javascript:;" aria-disabled="true"> | |
| <span class="chatlog__button-inner"> | |
| <span class="chatlog__button-emoji"></span> | |
| <span class="chatlog__button-label">Assumido</span> | |
| <span class="chatlog__button-icon"></span> | |
| </span> | |
| </a> | |
| <a class="chatlog__component-button chatlog__component-button--filled " style="--button-color: #4F545C" href="javascript:;" aria-disabled="false"> | |
| <span class="chatlog__button-inner"> | |
| <span class="chatlog__button-emoji"></span> | |
| <span class="chatlog__button-label">Painel Staff</span> | |
| <span class="chatlog__button-icon"></span> | |
| </span> | |
| </a> | |
| <a class="chatlog__component-button chatlog__component-button--filled " style="--button-color: #D83C3E" href="javascript:;" aria-disabled="false"> | |
| <span class="chatlog__button-inner"> | |
| <span class="chatlog__button-emoji"></span> | |
| <span class="chatlog__button-label">Cancelar</span> | |
| <span class="chatlog__button-icon"></span> | |
| </span> | |
| </a> | |
| <a class="chatlog__component-button chatlog__component-button--filled " style="--button-color: #2D7D46" href="javascript:;" aria-disabled="false"> | |
| <span class="chatlog__button-inner"> | |
| <span class="chatlog__button-emoji"></span> | |
| <span class="chatlog__button-label">Finalizar</span> | |
| <span class="chatlog__button-icon"></span> | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div></div><div class="chatlog__message-group"> | |
| <div id="chatlog__message-container-1504262595404759133" class="chatlog__message-container" data-message-id="1504262595404759133"> | |
| <div class="chatlog__message"> | |
| <div class="chatlog__message-aside"> | |
| <img class="chatlog__avatar" src="https://cdn.discordapp.com/avatars/1414651600441577758/600c08aac9db28cbb56726a9b0d48075.png?size=1024" data-user-id="1414651600441577758" /> | |
| </div> | |
| <div class="chatlog__message-primary"> | |
| <div class="chatlog__header"> | |
| <span class="chatlog__author-name" title="ningu4k" data-user-id="1414651600441577758" style="color: #557bff;">xgje<img class='chatlog__role-icon' src='https://cdn.discordapp.com/role-icons/1498722119486279882/733e847df46a3caa52931a67ae0640e3.png?size=1024' alt='Role Icon'></span> | |
| <span class="chatlog__timestamp" data-timestamp="Wednesday, 13 May 2026 08:22 PM">13-05-2026 08:22 PM</span> | |
| </div> | |
| <div class="chatlog__content chatlog__markdown" data-message-id="1504262595404759133" id="message-1504262595404759133"> | |
| <span class="chatlog__markdown-preserve">Opa</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <div id="chatlog__message-container-1504262610395074651" class="chatlog__message-container" data-message-id="1504262610395074651"> | |
| <div class="chatlog__message"> | |
| <div class="chatlog__message-aside"> | |
| <div class="chatlog__short-timestamp" data-timestamp="Wednesday, 13 May 2026 08:22 PM">08:22 PM</div> | |
| </div> | |
| <div class="chatlog__message-primary"> | |
| <div class="chatlog__content chatlog__markdown" data-message-id="1504262610395074651" id="message-1504262610395074651"> | |
| <span class="chatlog__markdown-preserve">Boa noite</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <div id="chatlog__message-container-1504262636051628192" class="chatlog__message-container" data-message-id="1504262636051628192"> | |
| <div class="chatlog__message"> | |
| <div class="chatlog__message-aside"> | |
| <div class="chatlog__short-timestamp" data-timestamp="Wednesday, 13 May 2026 08:22 PM">08:22 PM</div> | |
| </div> | |
| <div class="chatlog__message-primary"> | |
| <div class="chatlog__content chatlog__markdown" data-message-id="1504262636051628192" id="message-1504262636051628192"> | |
| <span class="chatlog__markdown-preserve">Consegue vir Call?</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <div id="chatlog__message-container-1504262747792212098" class="chatlog__message-container" data-message-id="1504262747792212098"> | |
| <div class="chatlog__message"> | |
| <div class="chatlog__message-aside"> | |
| <div class="chatlog__short-timestamp" data-timestamp="Wednesday, 13 May 2026 08:23 PM">08:23 PM</div> | |
| </div> | |
| <div class="chatlog__message-primary"> | |
| <div class="chatlog__content chatlog__markdown" data-message-id="1504262747792212098" id="message-1504262747792212098"> | |
| <span class="chatlog__markdown-preserve"><span class="mention" title="1314665254504108032">@RANK 638 | natan7xz_</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div></div><div class="chatlog__message-group"> | |
| <div id="chatlog__message-container-1504277075060719656" class="chatlog__message-container" data-message-id="1504277075060719656"> | |
| <div class="chatlog__message"> | |
| <div class="chatlog__message-aside"> | |
| <img class="chatlog__avatar" src="https://cdn.discordapp.com/avatars/1496778406522785932/a_5d67400b9fa3a63c07cfc10317cd83a9.gif?size=1024" data-user-id="1496778406522785932" /> | |
| </div> | |
| <div class="chatlog__message-primary"> | |
| <div class="chatlog__header"> | |
| <span class="chatlog__author-name" title="4X4RANKED#4287" data-user-id="1496778406522785932" style="color: #FFFFFF;">4X4RANKED</span> | |
| <span class="chatlog__bot-tag">APP</span> | |
| <span class="chatlog__timestamp" data-timestamp="Wednesday, 13 May 2026 09:20 PM">13-05-2026 09:20 PM</span> | |
| </div> | |
| <div class="chatlog__content chatlog__markdown" data-message-id="1504277075060719656" id="message-1504277075060719656"> | |
| <div class="chatlog__embed" style="--embed-color: rgba(0, 255, 0, 1)"> | |
| <div class="chatlog__embed-content"> | |
| <div class="chatlog__embed-text"> | |
| <div class="chatlog__embed-title"> | |
| <span class="markdown">Recrutamento Finalizado</span> | |
| </div> | |
| <div class=chatlog__embed-description> | |
| <span class="markdown preserve-whitespace">Este recrutamento foi finalizado por <span class="mention" title="1414651600441577758">@xgje</span>. | |
| O canal será deletado em <strong>10 segundos</strong>.</span> | |
| </div> | |
| <div class="chatlog__embed-fields"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div></div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <span class="footer__text">This transcript was generated on 13 May 2026 at 09:20:13 PM (-03)</span> | |
| </div> | |
| <div id="context-menu"> | |
| <div class="item">Copy Message ID</div> | |
| </div> | |
| <div id="summary-popout" class="summary-popout"> | |
| <div class="meta__header"> | |
| <img src="https://cdn.discordapp.com/icons/1328628864368246794/a_f33f9b2cba90afda477b434a83dd464b.gif?size=1024" alt="Avatar"> | |
| </div> | |
| <div class="meta__description"> | |
| <div class="meta__details"> | |
| <div class="meta__user">4X4 RANKED #20K</div> | |
| </div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Guild ID</div> | |
| <div class="meta__value">1328628864368246794</div> | |
| </div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Channel ID</div> | |
| <div class="meta__value">1504262277292097556</div> | |
| </div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Channel Creation Date</div> | |
| <div class="meta__value">May 13, 2026 (08:21:14 PM)</div> | |
| </div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Total Message Count</div> | |
| <div class="meta__value">7</div> | |
| </div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Total Message Participants</div> | |
| <div class="meta__value">2</div> | |
| </div> | |
| <div class="meta__support"> <a href="https://ko-fi.com/mahtoid">DONATE</a></div> | |
| </div> | |
| </div> | |
| <div id="meta-popout-1496778406522785932" class="meta-popout"> | |
| <div class="meta__header"> | |
| <img src="https://cdn.discordapp.com/avatars/1496778406522785932/a_5d67400b9fa3a63c07cfc10317cd83a9.gif?size=1024" alt="Avatar"> | |
| </div> | |
| <div class="meta__description"> | |
| <div class="meta__details"> | |
| <div class="meta__user">4X4RANKED</div> | |
| <div class="meta__discriminator">#4287</div> | |
| <span class="chatlog__bot-tag">APP</span> | |
| </div> | |
| <div class="meta__divider-2"></div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Member Since</div> | |
| <div class="meta__value"><img src="https://cdn.jsdelivr.net/gh/mahtoid/DiscordUtils@master/discord-logo.svg"/> Apr 23, 2026 <div class="meta__divider"></div> <img src="https://cdn.discordapp.com/icons/1328628864368246794/a_f33f9b2cba90afda477b434a83dd464b.gif?size=1024" class="meta__img-border"/> Apr 23, 2026</div> | |
| </div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Member ID</div> | |
| <div class="meta__value">1496778406522785932</div> | |
| </div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Message Count</div> | |
| <div class="meta__value">3</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="meta-popout-1414651600441577758" class="meta-popout"> | |
| <div class="meta__header"> | |
| <img src="https://cdn.discordapp.com/avatars/1414651600441577758/600c08aac9db28cbb56726a9b0d48075.png?size=1024" alt="Avatar"> | |
| </div> | |
| <div class="meta__description"> | |
| <div class="meta__display-name">xgje</div> | |
| <div class="meta__details"> | |
| <div class="meta__user">ningu4k</div> | |
| <div class="meta__discriminator"></div> | |
| </div> | |
| <div class="meta__divider-2"></div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Member Since</div> | |
| <div class="meta__value"><img src="https://cdn.jsdelivr.net/gh/mahtoid/DiscordUtils@master/discord-logo.svg"/> Sep 08, 2025 <div class="meta__divider"></div> <img src="https://cdn.discordapp.com/icons/1328628864368246794/a_f33f9b2cba90afda477b434a83dd464b.gif?size=1024" class="meta__img-border"/> May 03, 2026</div> | |
| </div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Member ID</div> | |
| <div class="meta__value">1414651600441577758</div> | |
| </div> | |
| <div class="meta__field"> | |
| <div class="meta__title">Message Count</div> | |
| <div class="meta__value">4</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| <!-- Right Click - Copy ID --> | |
| let metaPopout = undefined | |
| const contextMenu = document.getElementById("context-menu"); | |
| const scope = document.querySelector("body"); | |
| const messages = document.getElementsByClassName("chatlog__message-container") | |
| let messageID = "" | |
| const normalisePosition = (mouseX, mouseY, type) => { | |
| if (type == "context") { | |
| maxWidth = contextMenu.clientWidth | |
| maxHeight = contextMenu.clientHeight | |
| } else if (type == "user") { | |
| maxWidth = metaPopout.clientWidth | |
| maxHeight = metaPopout.clientHeight | |
| } | |
| let { | |
| left: scopeOffsetX, | |
| top: scopeOffsetY, | |
| } = scope.getBoundingClientRect() | |
| scopeOffsetX = scopeOffsetX < 0 ? 0 : scopeOffsetX; | |
| scopeOffsetY = scopeOffsetY < 0 ? 0 : scopeOffsetY | |
| const scopeX = mouseX - scopeOffsetX; | |
| const scopeY = mouseY - scopeOffsetY | |
| const outOfBoundsOnX = scopeX + maxWidth > scope.clientWidth | |
| const outOfBoundsOnY = scopeY + maxHeight > scope.clientHeight | |
| let normalizedX = mouseX; | |
| let normalizedY = mouseY | |
| if (outOfBoundsOnX) { | |
| normalizedX = scopeOffsetX + scope.clientWidth - maxWidth; | |
| } | |
| if (outOfBoundsOnY) { | |
| normalizedY = scopeOffsetY + scope.clientHeight - maxHeight; | |
| } | |
| return { normalizedX, normalizedY }; | |
| } | |
| scope.addEventListener("contextmenu", (e) => { | |
| event.preventDefault() | |
| if (e.target.offsetParent != contextMenu) { | |
| contextMenu.classList.remove("visible"); | |
| } | |
| }) | |
| var openContextMenu = function() { | |
| const { clientX: mouseX, clientY: mouseY } = event | |
| const { normalizedX, normalizedY } = normalisePosition(mouseX, mouseY, "context") | |
| contextMenu.classList.remove("visible") | |
| contextMenu.style.left = `${normalizedX}px`; | |
| contextMenu.style.top = `${normalizedY}px` | |
| setTimeout(() => { | |
| contextMenu.classList.add("visible"); | |
| }) | |
| messageID = this.getAttribute("data-message-id"); | |
| } | |
| for (var i = 0; i < messages.length; i++) { | |
| messages[i].addEventListener("contextmenu", openContextMenu) | |
| } | |
| scope.addEventListener("click", (e) => { | |
| if (e.target.offsetParent != contextMenu) { | |
| contextMenu.classList.remove("visible"); | |
| } else { | |
| navigator.clipboard.writeText(messageID) | |
| contextMenu.classList.remove("visible"); | |
| } | |
| if (metaPopout && e.target.offsetParent != metaPopout) { | |
| metaPopout.classList.remove("mounted") | |
| } | |
| if (e.target.offsetParent != summaryPopout) { | |
| summaryPopout.classList.remove("visible") | |
| } | |
| }) | |
| mainScroll = document.querySelector('.main') | |
| mainScroll.addEventListener('scroll', (e) => { | |
| if (e.target.offsetParent != contextMenu) { | |
| contextMenu.classList.remove("visible"); | |
| } else { | |
| navigator.clipboard.writeText(messageID) | |
| contextMenu.classList.remove("visible"); | |
| } | |
| if (metaPopout && e.target.offsetParent != metaPopout) { | |
| metaPopout.classList.remove("mounted") | |
| } | |
| }); | |
| <!-- User Dialog --> | |
| const summaryPopout = document.getElementById('summary-popout') | |
| window.onload = function() { | |
| var author_name = document.getElementsByClassName('chatlog__author-name'); | |
| var followup_author =document.getElementsByClassName('chatlog__followup-author'); | |
| var followup_avatar = document.getElementsByClassName("chatlog__followup-avatar"); | |
| var avatar = document.getElementsByClassName("chatlog__avatar"); | |
| const element_select = [...author_name, ...followup_author, ...followup_avatar, ...avatar] | |
| for(var i = 0; i < element_select.length; i++) { | |
| var element = element_select[i]; | |
| element.onclick = function() { | |
| authorID = this.getAttribute("data-user-id"); | |
| if (metaPopout) { | |
| metaPopout.classList.remove('mounted'); | |
| } | |
| metaPopout = document.getElementById('meta-popout-' + authorID); | |
| const subtractX = document.querySelector('.main').scrollLeft | |
| const subtractY = document.querySelector('.main').scrollTop | |
| const elementX = this.offsetLeft + this.offsetWidth + 10 - subtractX | |
| const elementY = this.offsetTop - subtractY | |
| const { normalizedX, normalizedY } = normalisePosition(elementX, elementY, "user") | |
| metaPopout.style.left = `${normalizedX}px`; | |
| metaPopout.style.top = `${normalizedY}px`; | |
| setTimeout(() => { | |
| metaPopout.classList.add("mounted") | |
| }); | |
| } | |
| } | |
| var summaryButton = document.getElementById('summary-button'); | |
| summaryButton.onclick = function() { | |
| const elementX = this.offsetLeft - 110 | |
| const elementY = this.offsetTop + 30 | |
| summaryPopout.style.left = `${elementX}px`; | |
| summaryPopout.style.top = `${elementY}px`; | |
| setTimeout(() => { | |
| summaryPopout.classList.add("visible") | |
| }); | |
| } | |
| } | |
| <!-- Timestamps: Tooltips --> | |
| tippy('.chatlog__timestamp', { | |
| placement: 'top', | |
| animation: 'fade', | |
| content: (reference) => reference.getAttribute('data-timestamp'), | |
| theme: 'disc', | |
| }); | |
| tippy('.chatlog__short-timestamp', { | |
| placement: 'top', | |
| animation: 'fade', | |
| content: (reference) => reference.getAttribute('data-timestamp'), | |
| theme: 'disc', | |
| }); | |
| tippy('.chatlog__reference-edited-timestamp', { | |
| placement: 'top', | |
| animation: 'fade', | |
| content: (reference) => reference.getAttribute('data-timestamp'), | |
| theme: 'disc', | |
| }); | |
| <!-- Timestamps: Tooltips --> | |
| tippy('.unix-timestamp', { | |
| placement: 'top', | |
| animation: 'fade', | |
| content: (reference) => reference.getAttribute('data-timestamp'), | |
| theme: 'disc', | |
| }); | |
| <!-- Timestamps: Content --> | |
| dayjs.extend(window.dayjs_plugin_utc); | |
| dayjs.extend(window.dayjs_plugin_timezone); | |
| dayjs.extend(window.dayjs_plugin_customParseFormat); | |
| dayjs.extend(window.dayjs_plugin_isToday); | |
| dayjs.extend(window.dayjs_plugin_isTomorrow); | |
| dayjs.extend(window.dayjs_plugin_isBetween); | |
| dayjs.tz.setDefault("America/Sao_Paulo") | |
| dayjs().format("DD/MM/YYYY hh:mm A"); | |
| var timeStamps = document.getElementsByClassName('chatlog__timestamp'); | |
| for(var i = 0; i < timeStamps.length; i++) { | |
| const date_1 = dayjs.tz(timeStamps[i].innerText, "DD-MM-YYYY hh:mm A", "America/Sao_Paulo"); | |
| const date_2 = dayjs.tz(); | |
| const diff = date_2.diff(date_1, 'day', true) | |
| if (date_1.isTomorrow()) { | |
| timeStamps[i].ineerText = "Tomorrow at " + date_1.format('hh:mm A') | |
| } else if (date_1.isToday()) { | |
| timeStamps[i].innerText = "Today at " + date_1.format('hh:mm A') | |
| } else if (date_1.add(1, 'day').isToday()) { | |
| timeStamps[i].innerText = "Yesterday at " + date_1.format('hh:mm A') | |
| } else if (date_1.isBetween(date_2, date_2.subtract(7, 'day'))) { | |
| timeStamps[i].innerText = date_1.day(date_1.day()).format("dddd [at] hh:mm A") | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment