diff --git a/layouts/home/script.js b/layouts/home/script.js index 5fe8942a..2dc281aa 100644 --- a/layouts/home/script.js +++ b/layouts/home/script.js @@ -1007,6 +1007,8 @@ document.addEventListener('scroll', async () => { if(!vars.chronologicalTL) { algoCursor = tl.cursor; tl = tl.list + } else { + tl = tl.slice(1); } } catch (e) { console.error(e); @@ -1022,7 +1024,7 @@ document.addEventListener('scroll', async () => { } setTimeout(() => { lastTweet.scrollIntoView({ - behavior: 'smooth' + block: 'center' }); setTimeout(() => { loadingNewTweets = false; diff --git a/layouts/home/style.css b/layouts/home/style.css index 70555c0d..a31fb079 100644 --- a/layouts/home/style.css +++ b/layouts/home/style.css @@ -1,802 +1,950 @@ #loading-box { - z-index: 1000; - width: 100%; + background-color: #fff; height: 100%; - background-color: white; position: fixed; + width: 100%; + z-index: 1000 } + #loading-box-text:before { - content: "\f179"; - vertical-align: sub; - font-family: RosettaIcons; - font-size: 64px; color: #1da1f2; + content: "\f179"; + font: 64px RosettaIcons; margin-left: 20px; + vertical-align: sub } + #loading-box-container { margin: 0 auto; - width: 100%; margin-top: 270px; text-align: center; + width: 100% } a { color: var(--link-color); - text-decoration: none; -} -a:hover { - text-decoration: underline; + text-decoration: none } body { background-color: #f5f8fa !important; font-family: var(--font); - margin: 0; + margin: 0 } + #container { margin: 0 auto; - max-width: 1190px; + max-width: 1190px } .cell { box-sizing: border-box; - display: inline-block; + display: inline-block } #content { - display: flex; + display: flex } + .box { - background-color: white; - border-radius: 5px; + background-color: #fff; border: 1px solid #e1e8ed; + border-radius: 5px } + #user-banner { border-top-left-radius: 5px; border-top-right-radius: 5px; - object-fit: cover; + object-fit: cover } + #user-avatar { - margin-left: 7px; - border: 4px solid white; - margin-top: -32px; + border: 4px solid #fff; border-radius: 7px; + margin-left: 7px; + margin-top: -32px } + #user-name { - margin: 0; - left: 95px; - font-size: 22px; - position: relative; bottom: 47px; - width: fit-content; color: #292f33; -} -#user-handle { + font-size: 22px; + left: 95px; margin: 0; position: relative; + width: fit-content +} + +#user-handle { + bottom: 48px; color: #6a7d8c; font-size: 14px; font-weight: 100; left: 95px; - bottom: 48px; - width: fit-content; + margin: 0; + position: relative; + width: fit-content } + #user-stats { display: inline-flex; - padding-bottom: 7px; + padding-bottom: 7px } -.user-stat-div > h2 { + +.user-stat-div>h2 { color: #6a7d8c; font-size: 14px; font-weight: 100; - text-transform: uppercase; margin: 0 10px; + text-transform: uppercase } -.user-stat-div > h1 { - margin: 0 10px; - font-size: 20px; + +.user-stat-div>h1 { color: var(--link-color); + font-size: 20px; + margin: 0 10px } + #user-info { - height: 5px; display: block; - text-decoration: none; + height: 5px; + text-decoration: none } + #center-cell { - margin-top: 55px; + margin-top: 55px } + #left-cell { - top: 55px; - position: sticky; height: fit-content; - margin-right: 10px; margin-left: 10px; + margin-right: 10px; + position: sticky; + top: 55px } + #right-cell { - top: 55px; - position: sticky; height: fit-content; margin-left: 10px; margin-right: 10px; + position: sticky; + top: 55px } + #timeline { - width: 590px; margin-bottom: 10px; + width: 590px } + .tweet { + background-color: #fff; border-left: 1px solid #e1e8ed; border-right: 1px solid #e1e8ed; border-top: 1px solid #e1e8ed; - background-color: white; - padding: 10px; - min-height: 75px; cursor: pointer; + min-height: 75px; + padding: 10px } + .tweet:hover { - background-color: #f5f8fa; + background-color: #f5f8fa } + .tweet-avatar-link { float: left; - margin-right: 10px; -} -.tweet-avatar { - border-radius: 5px; -} -.tweet-avatar-quote { - border-radius: 5px; + margin-right: 10px } -.tweet-header, .tweet-header-quote { - display: contents; + +.tweet-header, +.tweet-header-quote { + display: contents } -.tweet-header-info, .tweet-header-info-quote { + +.tweet-header-info, +.tweet-header-info-quote { + bottom: 3px; display: inline; - text-decoration: none; position: relative; - bottom: 3px; + text-decoration: none } -.tweet-header-info-quote { bottom: 8px !important } -.tweet-header-info:hover { - text-decoration: underline; + +.tweet-header-info-quote { + bottom: 8px !important } + .tweet-header-name:hover { - color: var(--link-color); + color: var(--link-color) } -.tweet-header-name, .tweet-header-name-quote { - display: inline; - font-weight: bold; + +.tweet-header-name, +.tweet-header-name-quote { color: #292f33; + display: inline; font-size: 14px; + font-weight: 700 } -.tweet-header-handle, .tweet-time, .tweet-header-handle-quote, .tweet-time-quote { - display: inline; + +.tweet-header-handle, +.tweet-time, +.tweet-header-handle-quote, +.tweet-time-quote { + color: #8899a6; direction: ltr; - unicode-bidi: embed; + display: inline; font-size: 13px; - color: #8899a6; text-decoration: none; + unicode-bidi: embed } + .tweet-time { bottom: 3px; - position: relative; + position: relative } + .tweet-time-quote { bottom: 8px; - position: relative; + position: relative } .tweet-time::before { - content: "\00b7"; - margin-right: 3px; color: #8899a6 !important; + content: "\00b7"; + margin-right: 3px } + .tweet-time:hover { color: var(--link-color); - text-decoration: underline; + text-decoration: underline } -.tweet-body, .tweet-interact, .tweet-body-text-quote { - display: flow-root; + +.tweet-body, +.tweet-interact, +.tweet-body-text-quote { + display: flow-root } + .tweet-body-quote { - background-color: white; + background-color: #fff; + border: 1px solid #e1e8ed; + border-radius: 5px; + display: block; + margin: 10px; + padding: 10px; + position: relative; + right: 10px; + text-decoration: none } + .tweet-body-quote:hover { background-color: #f5f8fa; - text-decoration: none; + text-decoration: none } + .tweet-body-text-long { font-size: 16px; - line-height: 22px; font-weight: 400; + line-height: 22px } + .tweet-body-text-short { font-size: 26px; - line-height: 32px; font-weight: 300; letter-spacing: .01em; + line-height: 32px } + .tweet-body-text a { - text-decoration: none; -} -.tweet-body-text a:hover { - text-decoration: underline; + text-decoration: none } + .tweet-interact { margin-top: 10px; - user-select: none; + user-select: none } + .tweet-interact span { color: #8899a6; + cursor: pointer; display: inline-block; font-size: 12px; - font-weight: bold; + font-weight: 700; margin-left: 6px; + margin-right: 20px; position: relative; - top: -2px; text-decoration: none; - cursor: pointer; - margin-right: 20px; + top: -2px } + .tweet-interact span:before { - font-family: RosettaIcons; - font-weight: normal; - font-style: normal; - font-size: 16px; -webkit-font-smoothing: antialiased; - margin-right: 10px; color: #ccd6dd; cursor: pointer; - vertical-align: sub; + font: 400 16px RosettaIcons; + margin-right: 10px; + vertical-align: sub } + .tweet-interact-reply:before { - content: "\f151"; -} -.tweet-interact-retweet:before { - content: "\f152"; + content: "\f151" } + .tweet-interact-favorite:before { - content: var(--favorite-icon-content); + content: var(--favorite-icon-content) } + .tweet-interact-more:before { - content: "\f150"; -} -.tweet-interact-reply-clicked, .tweet-interact-reply-clicked:before, .tweet-interact-reply:hover:before, .tweet-interact-reply:hover, .tweet-interact-more:hover:before { - color: #3300FF !important; + content: "\f150" } -.tweet-interact-retweeted, .tweet-interact-retweeted:before, .tweet-interact-retweet:hover:before, .tweet-interact-retweet:hover { - color: #5c913b !important; -} -.tweet-interact-favorited, .tweet-interact-favorited:before, .tweet-interact-favorite:hover:before, .tweet-interact-favorite:hover { - color: var(--favorite-icon-color) !important; + +.tweet-interact-favorited, +.tweet-interact-favorited:before, +.tweet-interact-favorite:hover:before, +.tweet-interact-favorite:hover { + color: var(--favorite-icon-color) !important } -.tweet-reply-text, .tweet-quote-text { + +.tweet-reply-text, +.tweet-quote-text { border: 1px solid #e1e8ed; - resize: none; border-radius: 5px; - width: 346px; - padding: 5px; - font-family: var(--font); display: inline-block; + font-family: var(--font); height: 30px; + padding: 5px; + resize: none; + width: 346px } -.tweet-reply-text:focus, .tweet-quote-text:focus { - outline: none; + +.tweet-reply-text:focus, +.tweet-quote-text:focus { + outline: none } -.tweet-reply-button, .tweet-quote-button { - position: relative; + +.tweet-reply-button, +.tweet-quote-button { bottom: 16px; height: 42px; + position: relative } + .nice-button { - color: #292f33; background-color: #f5f8fa; - background-image: linear-gradient(#fff,#f5f8fa); + background-image: linear-gradient(#fff, #f5f8fa); background-repeat: no-repeat; border: 1px solid #e1e8ed; border-radius: 4px; + color: #292f33; color: #66757f; cursor: pointer; - font-size: 14px; - font-weight: bold; - line-height: normal; - padding: 8px 16px; - font-family: var(--font); + font: 700 14px/normal var(--font); + padding: 8px 16px } + .nice-button:hover:not([disabled]) { - color: #292f33; - text-decoration: none; + -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); background-color: #e1e8ed; - background-image: linear-gradient(#fff,#e1e8ed); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"; + background-image: linear-gradient(#fff, #e1e8ed); border-color: #e1e8ed; + color: #292f33; + text-decoration: none } + .nice-button:disabled { color: lightgray !important; - cursor: not-allowed; + cursor: not-allowed } + .nice-button:disabled:before { - color: lightgray !important; + color: lightgray !important } + .tweet-top { - margin-left: 35px; - margin-bottom: 7px; font-size: 13px; + margin-bottom: 7px; + margin-left: 35px } + .tweet-top-icon { font-family: RosettaIcons; margin-right: 10px; - vertical-align: text-bottom; + vertical-align: text-bottom } -.tweet-top-icon, .tweet-top-text { - display: inline-block; + +.tweet-top-icon, +.tweet-top-text { color: #8899a6; + display: inline-block } + .tweet-top-text a { color: #8899a6; - text-decoration: none; + text-decoration: none } + .tweet-top-text a:hover { color: var(--link-color) !important; - text-decoration: underline; + text-decoration: underline } -.tweet-interact-retweet-menu, .tweet-interact-more-menu { - position: absolute; - background-color: white; + +.tweet-interact-retweet-menu, +.tweet-interact-more-menu { + background-color: #fff; border: 1px solid #8899a6; border-radius: 5px; - z-index: 5; + position: absolute; + z-index: 5 } + .tweet-interact-more-menu { - margin-left: 100px; + margin-left: 100px } -.tweet-reply-cancel:hover, .tweet-quote-cancel:hover, .tweet-reply-upload:hover, .tweet-quote-upload:hover { - text-decoration: underline; + +.tweet-reply-cancel:hover, +.tweet-quote-cancel:hover, +.tweet-reply-upload:hover, +.tweet-quote-upload:hover { cursor: pointer; + text-decoration: underline } -.tweet-body-quote { - display: block; - border-radius: 5px; - border: 1px solid #e1e8ed; - padding: 10px; - margin: 10px; - text-decoration: none; - position: relative; - right: 10px; -} + .tweet-media { - max-width: 500px; display: block; + max-width: 500px; position: relative; - right: 5px; + right: 5px } + .tweet-media img { - cursor: zoom-in; + cursor: zoom-in } -.tweet-media-element, .new-tweet-media-img { - margin: 5px; - border-radius: 7px; - object-fit: cover; + +.tweet-media-element, +.new-tweet-media-img { block-size: auto; border: 1px solid #e1e8ed; + border-radius: 7px; + margin: 5px; + object-fit: cover } + .tweet-media video { - block-size: auto; + block-size: auto } + .tweet-media-element-four { - max-width: 100px; max-height: 150px; + max-width: 100px } + .tweet-media-element-three { - max-width: 150px; max-height: 250px; + max-width: 150px } + .tweet-media-element-two { - max-width: 200px; max-height: 400px; + max-width: 200px } + .tweet-media-element-one { - max-width: 450px; max-height: 500px; + max-width: 450px } + .center-text { - background-color: white; - text-align: center; - margin-bottom: 10px; - color: #8899a6; + background-color: #fff; border: 1px solid #e1e8ed; - font-size: 14px; - padding: 10px; border-radius: 5px; + color: #8899a6; cursor: pointer; + font-size: 14px; + margin-bottom: 10px; + padding: 10px; + text-align: center } -.center-text:hover { - text-decoration: underline; -} -.tweet-interact-retweet-menu span, .tweet-interact-more-menu span { - margin-right: 5px !important; + +.tweet-interact-retweet-menu span, +.tweet-interact-more-menu span { cursor: pointer; + margin-right: 5px !important } -.tweet-interact-retweet-menu span:hover { - color: #5c913b !important; -} -.tweet-interact-more-menu span:hover { - color: #3300FF !important; -} -.tweet-interact-retweet-menu span:before, .tweet-interact-more-menu span:before { + +.tweet-interact-retweet-menu span:before, +.tweet-interact-more-menu span:before { color: #8899a6; - margin-right: 5px !important; -} -.tweet-interact-retweet-menu-retweet:before { - content: "\f152"; -} -.tweet-interact-retweet-menu-quote:before { - content: "\f204"; + margin-right: 5px !important } + .tweet-interact-more-menu-copy:before { - content: "\f203"; -} -.tweet-interact-more-menu-embed:before { - content: "\f204"; + content: "\f203" } + .tweet-interact-more-menu-share:before { - content: "\f185"; + content: "\f185" } + .tweet-interact-more-menu-analytics:before { - content: "\f200"; + content: "\f200" } + .tweet-interact-more-menu-refresh:before { - content: "\f303"; + content: "\f303" } + .tweet-interact-more-menu-download:before { - content: "\f186"; + content: "\f186" } + .tweet-interact-more-menu-download-gif:before { - content: "\f309"; + content: "\f309" } + .tweet-interact-more-menu-delete:before { - content: "\f154"; + content: "\f154" } + .tweet-interact-more-menu-follow:before { - content: "\f056"; + content: "\f056" } + .tweet-interact-more-menu-feedback:before { - content: "\f044"; + content: "\f044" } + .tweet-media-element-censor { - filter: blur(20px); - -webkit-filter: blur(20px); -moz-filter: blur(20px); + -webkit-filter: blur(20px); cursor: pointer; - transform: scale(1.03); + filter: blur(20px); + transform: scale(1.03) } + #wtf { padding: 10px; - width: 250px; + width: 250px } -#wtf h1, #trends h1 { - margin: 0; + +#wtf h1, +#trends h1 { + color: #66757f; display: inline-block; font-size: 22px; - color: #66757f; font-weight: 300; + margin: 0 } -#wtf-refresh, #wtf-viewall { + +#wtf-refresh, +#wtf-viewall { color: #8899a6; - font-size: 12px; - text-decoration: none; cursor: pointer; + font-size: 12px; + text-decoration: none } -#wtf-refresh:hover, #wtf-viewall:hover { - text-decoration: underline; + +a:hover, +.tweet-header-info:hover, +.tweet-body-text a:hover, +.center-text:hover, +#wtf-refresh:hover, +#wtf-viewall:hover { + text-decoration: underline +} + +.tweet-avatar, +.tweet-avatar-quote { + border-radius: 5px +} + +.tweet-interact-retweet:before, +.tweet-interact-retweet-menu-retweet:before { + content: "\f152" +} + +.tweet-interact-reply-clicked, +.tweet-interact-reply-clicked:before, +.tweet-interact-reply:hover:before, +.tweet-interact-reply:hover, +.tweet-interact-more:hover:before, +.tweet-interact-more-menu span:hover { + color: #30F !important +} + +.tweet-interact-retweeted, +.tweet-interact-retweeted:before, +.tweet-interact-retweet:hover:before, +.tweet-interact-retweet:hover, +.tweet-interact-retweet-menu span:hover { + color: #5c913b !important +} + +.tweet-interact-retweet-menu-quote:before, +.tweet-interact-more-menu-embed:before { + content: "\f204" } @media screen and (max-width: 1195px) { - #wtf, #about { - display: none; + + #wtf, + #about { + display: none } } + .wtf-user { display: inline-block; - margin-bottom: 5px; + margin-bottom: 5px } + .wtf-user-link { - text-decoration: none !important; + text-decoration: none !important } + .wtf-user-name { display: inline-block; - overflow: hidden; margin-right: 5px; + overflow: hidden } + .wtf-user-handle { - overflow: hidden; - width: 88px; - height: 17px; display: inline-block; + height: 17px; + overflow: hidden; + width: 88px } -.follow, .following { + +.follow, +.following { color: #292f33; - padding: 4px 12px 4px 12px !important; + padding: 4px 12px !important } + .follow:before { color: #8899a6; - font-family: RosettaIcons; content: "\f175"; + font-family: RosettaIcons; margin-right: 7px; - vertical-align: text-bottom; + vertical-align: text-bottom } + .following:before { color: var(--link-color); - font-family: RosettaIcons; content: "\f176"; + font-family: RosettaIcons; margin-right: 7px; - vertical-align: text-bottom; + vertical-align: text-bottom } + .tweet-self-thread-button { - text-decoration: none; font-size: 13px; margin-top: 2px; + text-decoration: none } -.tweet-self-thread-button:hover { - text-decoration: underline; -} -.tweet-no-top{ - border-top: none !important; + +.tweet-no-top { + border-top: none !important } + .tweet-self-thread-line { - position: absolute; - width: 2px; - height: 52px; background-color: #e1e8ed; + height: 52px; margin-left: -34px; - z-index: 1; + position: absolute; + width: 2px; + z-index: 1 } + .tweet-self-thread-line-dots { - z-index: 2; - position: absolute; - width: 12px; - height: 2px; - border: 2px white solid; + border: 2px #fff solid; display: unset; + height: 2px; margin-left: -41px; margin-top: 2px; + position: absolute; + width: 12px; + z-index: 2 } + .tweet:hover .tweet-self-thread-line-dots { - border: 2px #f5f8fa solid !important; + border: 2px #f5f8fa solid !important } + .user-verified::after { - content: "\f099"; color: #55acee; + content: "\f099"; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + .user-protected::after { - content: "\f096"; color: #ddd22b; + content: "\f096"; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + #about { - margin-top: 5px; - padding: 10px; - font-size: 12px; color: #8899a6; + font-size: 12px; + margin-top: 5px; + padding: 10px } -.about-links a, .about-links span { + +.about-links a, +.about-links span { color: #8899a6; - margin-right: 8px; + margin-right: 8px } #trends { margin-top: 10px; - padding: 10px; + padding: 10px } + .trend { - margin-top: 10px; + margin-top: 10px } + .trend-description { - font-size: 14px; color: #8899a6; + font-size: 14px } + .emoji { - width: 16px; height: 16px; - vertical-align: bottom; margin-left: 2px; margin-right: 2px; + vertical-align: bottom; + width: 16px } + .tweet-body-text-short .emoji { - width: 26px !important; height: 26px !important; vertical-align: text-top !important; + width: 26px !important } + .tweet-body-text-long .emoji { - vertical-align: text-bottom !important; + vertical-align: text-bottom !important } + #user-name .emoji { - width: 26px !important; height: 26px !important; + width: 26px !important } + #new-tweets { + background-color: #f5f8fa; border-bottom: none !important; border-radius: 0 !important; - margin-bottom: 0 !important; - padding: 10px; color: #66757f; - background-color: #f5f8fa; + margin-bottom: 0 !important; margin-top: 0 !important; + padding: 10px } + #new-tweet-avatar { - vertical-align: top; + vertical-align: top } + #new-tweet-text { border: 1px solid #e1e8ed; - resize: none; border-radius: 3px; - width: 480px; - padding: 5px; - font-family: var(--font); display: inline-block; + font: 18px var(--font); height: 23px; - font-size: 18px; + padding: 5px; padding-right: 40px; + resize: none; scrollbar-width: thin; + width: 480px } + #new-tweet-text::-webkit-scrollbar { - width: 2px; + width: 2px } + #new-tweet-text:focus { - outline: none; + outline: none } + .new-tweet-text-focused { - height: 100px !important; + height: 100px !important } + #new-tweet { + background-color: rgba(255, 255, 255, 0.92); border-bottom: none !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; - background-color: rgba(255, 255, 255, 0.92); padding: 10px; - width: 568px; + width: 568px } + #new-tweet-container { - border-radius: 5px; + background-color: var(--link-color); border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; - background-color: var(--link-color); + border-radius: 5px } + #new-tweet-media-div { + bottom: 36px; + cursor: pointer; float: right; position: relative; - cursor: pointer; - bottom: 36px; - right: 15px; + right: 15px } + .new-tweet-media-div-focused { - bottom: 112px !important; + bottom: 112px !important } + #new-tweet-media:before { - content: "\f159"; - font-family: RosettaIcons; color: var(--link-color); - font-size: 20px; + content: "\f159"; + font: 20px RosettaIcons } + #new-tweet-button { float: right; - margin-top: 5px; left: 14px; - position: relative; + margin-top: 5px; + position: relative } + #new-tweet-char { color: #8899a6; font-size: 12px; - position: absolute; margin-left: -46px; margin-top: 38px; - width: 43px; + position: absolute; text-align: center; + width: 43px } -.tweet-reply-char, .tweet-quote-char { + +.tweet-reply-char, +.tweet-quote-char { color: #8899a6; font-size: 12px; padding: 3px; - top: -10px; position: relative; + top: -10px } -#new-tweet-button:before, .tweet-reply-button:before, .tweet-quote-button:before { - content: "\f029"; - font-family: RosettaIcons; + +#new-tweet-button:before, +.tweet-reply-button:before, +.tweet-quote-button:before { color: var(--link-color); - font-size: 14px; + content: "\f029"; + font: 14px RosettaIcons; margin-right: 5px; - vertical-align: bottom; + vertical-align: bottom } + #new-tweet-media-c { - width: auto; - margin: 0; display: contents; + margin: 0; + width: auto } + #new-tweet-media-cc { - left: 34px; - position: relative; display: inline; + left: 34px; + position: relative } + .new-tweet-media-img { - max-width: 75px; - max-height: 100px; cursor: zoom-in; + max-height: 100px; + max-width: 75px } + .new-tweet-media-img-progress { - position: absolute; - display: block; color: gray; + display: block; font-size: 10px; margin-left: 6px; + position: absolute } + .new-tweet-media-img-remove { - position: absolute; - margin-left: -24px; - margin-top: 8px; - height: 14px; - padding: 0px 3px 3px 3px; - background-color: rgba(0,0,0, 0.5); + background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; cursor: pointer; + height: 14px; + margin-left: -24px; + margin-top: 8px; + padding: 0 3px 3px; + position: absolute } + .new-tweet-media-img-remove:before { + color: #fff; content: "\f045"; - font-family: RosettaIcons; - margin-bottom: 2px; - color: white; - font-size: 13px; + font: 13px RosettaIcons; + margin-bottom: 2px } + .new-tweet-media-img-alt { - position: absolute; - background: rgba(0,0,0, 0.5); - color: white; - padding: 1px 4px; + background: rgba(0, 0, 0, 0.5); + border-radius: 5px; + color: #fff; + cursor: pointer; font-size: 12px; font-weight: 600; - border-radius: 5px; - margin-top: 8px; margin-left: -57px; + margin-top: 8px; + padding: 1px 4px; padding-bottom: 2px; - cursor: pointer; + position: absolute } + .new-tweet-media-img-div { - width: fit-content; display: inline-block; + width: fit-content } + #donate-button { - transition: 1s; + transition: 1s } + .tweet-translate { color: var(--link-color); - font-size: 13px; cursor: pointer; - margin-top: 2px; -} -.tweet-translate:hover { - text-decoration: underline; + font-size: 13px; + margin-top: 2px } + .tweet-interact-more-menu hr { border-top: #ccd6dd; - margin: 2px; + margin: 2px } + #new-tweet-user-search { - position: absolute; - background-color: white; - padding: 5px; - z-index: 5; + background-color: #fff; color: #292f33; + padding: 5px; + position: absolute; + z-index: 5 } + #new-tweet-user-search span { - cursor: pointer; border-radius: 5px; - padding: 2px; + cursor: pointer; + padding: 2px } -#new-tweet-user-search span:hover, .search-result-item-active { + +#new-tweet-user-search span:hover, +.search-result-item-active { background-color: var(--link-color) !important; - color: white !important; + color: #fff !important } + .wtf-header { - display: flow-root; + display: flow-root +} + +.tweet-self-thread-button:hover, +.tweet-translate:hover { + text-decoration: underline } \ No newline at end of file diff --git a/layouts/notifications/style.css b/layouts/notifications/style.css index fca630c2..02410fcb 100644 --- a/layouts/notifications/style.css +++ b/layouts/notifications/style.css @@ -1,701 +1,842 @@ #loading-box { - z-index: 1000; - width: 100%; + background-color: #fff; height: 100%; - background-color: white; position: fixed; + width: 100%; + z-index: 1000 } + #loading-box-text:before { - content: "\f179"; - vertical-align: sub; - font-family: RosettaIcons; - font-size: 64px; color: #1da1f2; + content: "\f179"; + font: 64px RosettaIcons; margin-left: 20px; + vertical-align: sub } + #loading-box-container { margin: 0 auto; - width: 100%; margin-top: 270px; text-align: center; + width: 100% } a { color: var(--link-color); - text-decoration: none; -} -a:hover { - text-decoration: underline; + text-decoration: none } body { background-color: #f5f8fa !important; font-family: var(--font); - margin: 0; + margin: 0 } + #container { margin: 0 auto; - max-width: 1190px; + max-width: 1190px } .cell { box-sizing: border-box; - display: inline-block; + display: inline-block } #content { - display: flex; + display: flex } + .box { - background-color: white; - border-radius: 5px; + background-color: #fff; border: 1px solid #e1e8ed; + border-radius: 5px } + #user-banner { border-top-left-radius: 5px; border-top-right-radius: 5px; - object-fit: cover; + object-fit: cover } + #user-avatar { - margin-left: 7px; - border: 4px solid white; - margin-top: -32px; + border: 4px solid #fff; border-radius: 7px; + margin-left: 7px; + margin-top: -32px } + #user-name { - margin: 0; - left: 95px; - font-size: 22px; - position: relative; bottom: 47px; - width: fit-content; color: #292f33; -} -#user-handle { + font-size: 22px; + left: 95px; margin: 0; position: relative; + width: fit-content +} + +#user-handle { + bottom: 48px; color: #6a7d8c; font-size: 14px; font-weight: 100; left: 95px; - bottom: 48px; - width: fit-content; + margin: 0; + position: relative; + width: fit-content } + #user-stats { display: inline-flex; - padding-bottom: 7px; + padding-bottom: 7px } -.user-stat-div > h2 { + +.user-stat-div>h2 { color: #6a7d8c; font-size: 14px; font-weight: 100; - text-transform: uppercase; margin: 0 10px; + text-transform: uppercase } -.user-stat-div > h1 { - margin: 0 10px; - font-size: 20px; + +.user-stat-div>h1 { color: var(--link-color); + font-size: 20px; + margin: 0 10px } + #user-info { - height: 5px; display: block; - text-decoration: none; + height: 5px; + text-decoration: none } + #center-cell { - margin-top: 55px; + margin-top: 55px } + #left-cell { - top: 55px; - position: sticky; height: fit-content; - margin-right: 10px; margin-left: 10px; + margin-right: 10px; + position: sticky; + top: 55px } + #right-cell { - top: 55px; - position: sticky; height: fit-content; margin-left: 10px; margin-right: 10px; + position: sticky; + top: 55px } + #notifications-div { - width: 560px; margin-bottom: 10px; min-height: 700px; + width: 560px } -.tweet, .notification { + +.tweet, +.notification { + background-color: #fff; border-left: 1px solid #e1e8ed; border-right: 1px solid #e1e8ed; border-top: 1px solid #e1e8ed; - background-color: white; - padding: 10px; - min-height: 50px; cursor: pointer; + min-height: 50px; + padding: 10px } -.tweet:hover, .notification:hover, .notification-unread { - background-color: #f5f8fa; + +.tweet:hover, +.notification:hover, +.notification-unread { + background-color: #f5f8fa } + .tweet-avatar-link { float: left; - margin-right: 10px; -} -.tweet-avatar { - border-radius: 5px; -} -.tweet-avatar-quote { - border-radius: 5px; + margin-right: 10px } -.tweet-header, .tweet-header-quote { - display: contents; + +.tweet-header, +.tweet-header-quote { + display: contents } -.tweet-header-info, .tweet-header-info-quote { + +.tweet-header-info, +.tweet-header-info-quote { + bottom: 3px; display: inline; - text-decoration: none; position: relative; - bottom: 3px; + text-decoration: none } -.tweet-header-info-quote { bottom: 8px !important } -.tweet-header-info:hover { - text-decoration: underline; + +.tweet-header-info-quote { + bottom: 8px !important } + .tweet-header-name:hover { - color: var(--link-color); + color: var(--link-color) } -.tweet-header-name, .tweet-header-name-quote { - display: inline; - font-weight: bold; + +.tweet-header-name, +.tweet-header-name-quote { color: #292f33; + display: inline; font-size: 14px; + font-weight: 700 } -.tweet-header-handle, .tweet-time, .tweet-header-handle-quote, .tweet-time-quote { - display: inline; + +.tweet-header-handle, +.tweet-time, +.tweet-header-handle-quote, +.tweet-time-quote { + color: #8899a6; direction: ltr; - unicode-bidi: embed; + display: inline; font-size: 13px; - color: #8899a6; text-decoration: none; + unicode-bidi: embed } + .tweet-time { bottom: 3px; - position: relative; + position: relative } + .tweet-time-quote { bottom: 8px; - position: relative; + position: relative } .tweet-time::before { - content: "\00b7"; - margin-right: 3px; color: #8899a6 !important; + content: "\00b7"; + margin-right: 3px } + .tweet-time:hover { color: var(--link-color); - text-decoration: underline; + text-decoration: underline } -.tweet-body, .tweet-interact, .tweet-body-text-quote { - display: flow-root; + +.tweet-body, +.tweet-interact, +.tweet-body-text-quote { + display: flow-root } + .tweet-body-quote { - background-color: white; + background-color: #fff; + border: 1px solid #e1e8ed; + border-radius: 5px; + display: block; + margin: 10px; + padding: 10px; + position: relative; + right: 10px; + text-decoration: none } + .tweet-body-quote:hover { background-color: #f5f8fa; - text-decoration: none; + text-decoration: none } + .tweet-body-text-long { font-size: 16px; - line-height: 22px; font-weight: 400; + line-height: 22px } + .tweet-body-text-short { font-size: 26px; - line-height: 32px; font-weight: 300; letter-spacing: .01em; + line-height: 32px } + .tweet-body-text a { - text-decoration: none; -} -.tweet-body-text a:hover { - text-decoration: underline; + text-decoration: none } + .tweet-interact { margin-top: 10px; - user-select: none; + user-select: none } + .tweet-interact span { color: #8899a6; + cursor: pointer; display: inline-block; font-size: 12px; - font-weight: bold; + font-weight: 700; margin-left: 6px; + margin-right: 20px; position: relative; - top: -2px; text-decoration: none; - cursor: pointer; - margin-right: 20px; + top: -2px } + .tweet-interact span:before { - font-family: RosettaIcons; - font-weight: normal; - font-style: normal; - font-size: 16px; -webkit-font-smoothing: antialiased; - margin-right: 10px; color: #ccd6dd; cursor: pointer; - vertical-align: sub; + font: 400 16px RosettaIcons; + margin-right: 10px; + vertical-align: sub } + .tweet-interact-reply:before { - content: "\f151"; -} -.tweet-interact-retweet:before { - content: "\f152"; + content: "\f151" } + .tweet-interact-favorite:before { - content: var(--favorite-icon-content); + content: var(--favorite-icon-content) } + .tweet-interact-more:before { - content: "\f150"; -} -.tweet-interact-reply-clicked, .tweet-interact-reply-clicked:before, .tweet-interact-reply:hover:before, .tweet-interact-reply:hover, .tweet-interact-more:hover:before { - color: #3300FF !important; -} -.tweet-interact-retweeted, .tweet-interact-retweeted:before, .tweet-interact-retweet:hover:before, .tweet-interact-retweet:hover { - color: #5c913b !important; + content: "\f150" } -.tweet-interact-favorited, .tweet-interact-favorited:before, .tweet-interact-favorite:hover:before, .tweet-interact-favorite:hover { - color: var(--favorite-icon-color) !important; + +.tweet-interact-favorited, +.tweet-interact-favorited:before, +.tweet-interact-favorite:hover:before, +.tweet-interact-favorite:hover { + color: var(--favorite-icon-color) !important } -.tweet-reply-text, .tweet-quote-text { + +.tweet-reply-text, +.tweet-quote-text { border: 1px solid #e1e8ed; - resize: none; border-radius: 5px; - width: 346px; - padding: 5px; - font-family: var(--font); display: inline-block; + font-family: var(--font); height: 30px; + padding: 5px; + resize: none; + width: 346px } -.tweet-reply-text:focus, .tweet-quote-text:focus { - outline: none; + +.tweet-reply-text:focus, +.tweet-quote-text:focus { + outline: none } -.tweet-reply-button, .tweet-quote-button { - position: relative; + +.tweet-reply-button, +.tweet-quote-button { bottom: 16px; height: 42px; + position: relative } + .nice-button { - color: #292f33; background-color: #f5f8fa; - background-image: linear-gradient(#fff,#f5f8fa); + background-image: linear-gradient(#fff, #f5f8fa); background-repeat: no-repeat; border: 1px solid #e1e8ed; border-radius: 4px; + color: #292f33; color: #66757f; cursor: pointer; font-size: 14px; - font-weight: bold; + font-weight: 700; line-height: normal; - padding: 8px 16px; + padding: 8px 16px } + .nice-button:hover:not([disabled]) { - color: #292f33; - text-decoration: none; + -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); background-color: #e1e8ed; - background-image: linear-gradient(#fff,#e1e8ed); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"; + background-image: linear-gradient(#fff, #e1e8ed); border-color: #e1e8ed; + color: #292f33; + text-decoration: none } + .nice-button:disabled { color: lightgray !important; - cursor: not-allowed; + cursor: not-allowed } + .nice-button:disabled:before { - color: lightgray !important; + color: lightgray !important } + .tweet-top { - margin-left: 35px; - margin-bottom: 7px; font-size: 13px; + margin-bottom: 7px; + margin-left: 35px } + .tweet-top-icon { font-family: RosettaIcons; margin-right: 10px; - vertical-align: text-bottom; + vertical-align: text-bottom } -.tweet-top-icon, .tweet-top-text { - display: inline-block; + +.tweet-top-icon, +.tweet-top-text { color: #8899a6; + display: inline-block } + .tweet-top-text a { color: #8899a6; - text-decoration: none; + text-decoration: none } + .tweet-top-text a:hover { color: var(--link-color) !important; - text-decoration: underline; + text-decoration: underline } -.tweet-interact-retweet-menu, .tweet-interact-more-menu { - position: absolute; - background-color: white; + +.tweet-interact-retweet-menu, +.tweet-interact-more-menu { + background-color: #fff; border: 1px solid #8899a6; border-radius: 5px; - z-index: 5; + position: absolute; + z-index: 5 } + .tweet-interact-more-menu { - margin-left: 100px; + margin-left: 100px } -.tweet-reply-cancel:hover, .tweet-quote-cancel:hover, .tweet-reply-upload:hover, .tweet-quote-upload:hover { - text-decoration: underline; + +.tweet-reply-cancel:hover, +.tweet-quote-cancel:hover, +.tweet-reply-upload:hover, +.tweet-quote-upload:hover { cursor: pointer; + text-decoration: underline } -.tweet-body-quote { - display: block; - border-radius: 5px; - border: 1px solid #e1e8ed; - padding: 10px; - margin: 10px; - text-decoration: none; - position: relative; - right: 10px; -} + .tweet-media { - max-width: 500px; display: block; + max-width: 500px; position: relative; - right: 5px; + right: 5px } + .tweet-media img { - cursor: zoom-in; + cursor: zoom-in } -.tweet-media-element, .new-tweet-media-img { - margin: 5px; - border-radius: 7px; - object-fit: cover; + +.tweet-media-element, +.new-tweet-media-img { block-size: auto; border: 1px solid #e1e8ed; + border-radius: 7px; + margin: 5px; + object-fit: cover } + .tweet-media video { - block-size: auto; + block-size: auto } + .tweet-media-element-four { - max-width: 100px; max-height: 150px; + max-width: 100px } + .tweet-media-element-three { - max-width: 150px; max-height: 250px; + max-width: 150px } + .tweet-media-element-two { - max-width: 200px; max-height: 400px; + max-width: 200px } + .tweet-media-element-one { - max-width: 450px; max-height: 500px; + max-width: 450px } -.tweet-interact-retweet-menu span, .tweet-interact-more-menu span { - margin-right: 5px !important; + +.tweet-interact-retweet-menu span, +.tweet-interact-more-menu span { cursor: pointer; + margin-right: 5px !important } -.tweet-interact-retweet-menu span:hover { - color: #5c913b !important; -} -.tweet-interact-more-menu span:hover { - color: #3300FF !important; -} -.tweet-interact-retweet-menu span:before, .tweet-interact-more-menu span:before { + +.tweet-interact-retweet-menu span:before, +.tweet-interact-more-menu span:before { color: #8899a6; - margin-right: 5px !important; -} -.tweet-interact-retweet-menu-retweet:before { - content: "\f152"; -} -.tweet-interact-retweet-menu-quote:before { - content: "\f204"; + margin-right: 5px !important } + .tweet-interact-more-menu-copy:before { - content: "\f203"; -} -.tweet-interact-more-menu-embed:before { - content: "\f204"; + content: "\f203" } + .tweet-interact-more-menu-share:before { - content: "\f185"; + content: "\f185" } + .tweet-interact-more-menu-analytics:before { - content: "\f200"; + content: "\f200" } + .tweet-interact-more-menu-refresh:before { - content: "\f303"; + content: "\f303" } + .tweet-interact-more-menu-download:before { - content: "\f186"; + content: "\f186" } + .tweet-interact-more-menu-download-gif:before { - content: "\f309"; + content: "\f309" } + .tweet-interact-more-menu-delete:before { - content: "\f154"; + content: "\f154" } + .tweet-media-element-censor { - filter: blur(20px); - -webkit-filter: blur(20px); -moz-filter: blur(20px); + -webkit-filter: blur(20px); cursor: pointer; - transform: scale(1.03); + filter: blur(20px); + transform: scale(1.03) } + #wtf { padding: 10px; - width: 250px; + width: 250px } -#wtf h1, #trends h1 { - margin: 0; + +#wtf h1, +#trends h1 { + color: #66757f; display: inline-block; font-size: 22px; - color: #66757f; font-weight: 300; + margin: 0 } -#wtf-refresh, #wtf-viewall { + +#wtf-refresh, +#wtf-viewall { color: #8899a6; - font-size: 12px; - text-decoration: none; cursor: pointer; + font-size: 12px; + text-decoration: none +} + +a:hover, +.tweet-header-info:hover, +.tweet-body-text a:hover, +#wtf-refresh:hover, +#wtf-viewall:hover { + text-decoration: underline } -#wtf-refresh:hover, #wtf-viewall:hover { - text-decoration: underline; + +.tweet-avatar, +.tweet-avatar-quote { + border-radius: 5px +} + +.tweet-interact-retweet:before, +.tweet-interact-retweet-menu-retweet:before { + content: "\f152" +} + +.tweet-interact-reply-clicked, +.tweet-interact-reply-clicked:before, +.tweet-interact-reply:hover:before, +.tweet-interact-reply:hover, +.tweet-interact-more:hover:before, +.tweet-interact-more-menu span:hover { + color: #30F !important +} + +.tweet-interact-retweeted, +.tweet-interact-retweeted:before, +.tweet-interact-retweet:hover:before, +.tweet-interact-retweet:hover, +.tweet-interact-retweet-menu span:hover { + color: #5c913b !important +} + +.tweet-interact-retweet-menu-quote:before, +.tweet-interact-more-menu-embed:before { + content: "\f204" } @media screen and (max-width: 1195px) { - #wtf, #about { - display: none; + + #wtf, + #about { + display: none } } + .wtf-user { display: inline-block; - margin-bottom: 5px; + margin-bottom: 5px } + .wtf-user-link { - text-decoration: none !important; + text-decoration: none !important } + .wtf-user-name { display: inline-block; - overflow: hidden; margin-right: 5px; + overflow: hidden } + .wtf-user-handle { - overflow: hidden; - width: 88px; - height: 17px; display: inline-block; + height: 17px; + overflow: hidden; + width: 88px } -.follow, .following { + +.follow, +.following { color: #292f33; - padding: 4px 12px 4px 12px !important; + padding: 4px 12px !important } + .follow:before { color: #8899a6; - font-family: RosettaIcons; content: "\f175"; + font-family: RosettaIcons; margin-right: 7px; - vertical-align: text-bottom; + vertical-align: text-bottom } + .following:before { color: var(--link-color); - font-family: RosettaIcons; content: "\f176"; + font-family: RosettaIcons; margin-right: 7px; - vertical-align: text-bottom; + vertical-align: text-bottom } + .tweet-self-thread-button { - text-decoration: none; font-size: 13px; margin-top: 2px; + text-decoration: none } -.tweet-self-thread-button:hover { - text-decoration: underline; -} -.tweet-no-top{ - border-top: none !important; + +.tweet-no-top { + border-top: none !important } + .tweet-self-thread-line { - position: absolute; - width: 2px; - height: 52px; background-color: #e1e8ed; + height: 52px; margin-left: -34px; - z-index: 1; + position: absolute; + width: 2px; + z-index: 1 } + .tweet-self-thread-line-dots { - z-index: 2; - position: absolute; - width: 12px; - height: 2px; - border: 2px white solid; + border: 2px #fff solid; display: unset; + height: 2px; margin-left: -41px; margin-top: 2px; + position: absolute; + width: 12px; + z-index: 2 } + .tweet:hover .tweet-self-thread-line-dots { - border: 2px #f5f8fa solid !important; + border: 2px #f5f8fa solid !important } + .user-verified::after { - content: "\f099"; color: #55acee; + content: "\f099"; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + .user-protected::after { - content: "\f096"; color: #ddd22b; + content: "\f096"; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + #about { - margin-top: 5px; - padding: 10px; - font-size: 12px; color: #8899a6; + font-size: 12px; + margin-top: 5px; + padding: 10px } -.about-links a, .about-links span { + +.about-links a, +.about-links span { color: #8899a6; - margin-right: 8px; + margin-right: 8px } #trends { margin-top: 10px; - padding: 10px; + padding: 10px } + .trend { - margin-top: 10px; + margin-top: 10px } + .trend-description { - font-size: 14px; color: #8899a6; + font-size: 14px } + .emoji { - width: 16px; height: 16px; - vertical-align: bottom; margin-left: 2px; margin-right: 2px; + vertical-align: bottom; + width: 16px } + .tweet-body-text-short .emoji { - width: 26px !important; height: 26px !important; vertical-align: text-top !important; + width: 26px !important } + .tweet-body-text-long .emoji { - vertical-align: text-bottom !important; + vertical-align: text-bottom !important } + #user-name .emoji { - width: 26px !important; height: 26px !important; + width: 26px !important } + #donate-button { - transition: 1s; + transition: 1s } + .tweet-translate { color: var(--link-color); - font-size: 13px; cursor: pointer; - margin-top: 2px; -} -.tweet-translate:hover { - text-decoration: underline; + font-size: 13px; + margin-top: 2px } + .tweet-interact-more-menu hr { border-top: #ccd6dd; - margin: 2px; + margin: 2px } + .notification-icon { - vertical-align: text-bottom; - margin-right: 5px; - font-family: RosettaIcons; - font-size: 16px; + bottom: -1px; display: inline-block; - position: relative; + font: 16px RosettaIcons; left: 31px; - bottom: -1px; + margin-right: 5px; + position: relative; + vertical-align: text-bottom } + .notification-header { display: inline-block; - position: relative; - left: 31px; font-size: 14px; + left: 31px; + position: relative } + .notification-text { - position: relative; - left: 57px; color: #8899a6; - width: 475px; font-size: 14px; + left: 57px; + position: relative; + width: 475px } + .notification-avatars { - position: relative; left: 54px; + position: relative } + .notification-header a { - color: black; - font-weight: bold; + color: #000; + font-weight: 700 } + .ni-favorite:before { - content: var(--favorite-icon-content-notif); color: var(--favorite-icon-color); + content: var(--favorite-icon-content-notif) } + .ni-follow:before { - content: "\f002"; color: #55acee; + content: "\f002" } + .ni-retweet:before { - content: "\f006"; color: #5c913b; + content: "\f006" } + .notification-avatar { - margin: 2px; - margin-top: 10px; display: inline-block; + margin: 2px; + margin-top: 10px } + .notification-avatar img { - border-radius: 5px; + border-radius: 5px } + .center-text { - background-color: white; - text-align: center; - margin-bottom: 10px; - color: #8899a6; + background-color: #fff; border: 1px solid #e1e8ed; - font-size: 14px; - padding: 10px; border-radius: 5px; + color: #8899a6; cursor: pointer; + font-size: 14px; + margin-bottom: 10px; + padding: 10px; + text-align: center } -.center-text:hover { - text-decoration: underline; -} + #notification-switches { - width: 300px; padding: 10px; + width: 300px } -#notification-switches > hr { - border-top: #8899a6; + +#notification-switches>hr { + border-top: #8899a6 } + .notification-switch { color: #66757f; cursor: pointer; - padding-right: 200px; + padding-right: 200px } -.notification-switch:hover, .notification-switch-active { - color: black; + +.notification-switch:hover, +.notification-switch-active { + color: #000 } + .notification-switch::after { content: "\f173"; - font-family: RosettaIcons; float: right; + font-family: RosettaIcons } + .wtf-header { - display: flow-root; + display: flow-root +} + +.tweet-self-thread-button:hover, +.tweet-translate:hover, +.center-text:hover { + text-decoration: underline } \ No newline at end of file diff --git a/layouts/profile/style.css b/layouts/profile/style.css index 16dd9b2b..72b639fc 100644 --- a/layouts/profile/style.css +++ b/layouts/profile/style.css @@ -2,252 +2,288 @@ z-index: 1000; width: 100%; height: 100%; - background-color: white; - position: fixed; + background-color: #fff; + position: fixed } + #loading-box-text:before { content: "\f179"; vertical-align: sub; - font-family: RosettaIcons; - font-size: 64px; color: #1da1f2; margin-left: 20px; + font: 64px RosettaIcons } + #loading-box-container { margin: 0 auto; width: 100%; margin-top: 270px; - text-align: center; + text-align: center } a { color: var(--link-color); - text-decoration: none; -} -a:hover { - text-decoration: underline; + text-decoration: none } body { background-color: #f5f8fa !important; font-family: var(--font); - margin: 0; + margin: 0 } + .container { margin: 0 auto; - max-width: 1190px; + max-width: 1190px } .cell { box-sizing: border-box; - display: inline-block; + display: inline-block } .content { - display: inline-flex; + display: inline-flex } + .box { - background-color: white; + background-color: #fff; border-radius: 5px; - border: 1px solid #e1e8ed; + border: 1px solid #e1e8ed } -.user-stat-div > h2 { +.user-stat-div>h2 { color: #6a7d8c; font-size: 14px; font-weight: 100; text-transform: uppercase; - margin: 0 10px; + margin: 0 10px } -.user-stat-div > h1 { + +.user-stat-div>h1 { margin: 0 10px; font-size: 20px; - color: var(--link-color); + color: var(--link-color) } + #profile-nav-left-cell { height: fit-content; margin-right: 10px; margin-left: 10px; - width: 302px; + width: 302px } + #profile-nav-center-cell { width: 566px; bottom: 27px; - position: relative; + position: relative } + #profile-nav-right-cell { height: fit-content; margin-left: 10px; margin-right: 10px; - width: 272px; + width: 272px } + #left-cell { top: 55px; position: relative; height: fit-content; margin-right: 10px; margin-left: 10px; - width: 302px; + width: 302px } + #right-cell { top: 140px; height: fit-content; margin-left: 10px; - margin-right: 10px; + margin-right: 10px } + #timeline { width: 590px; - margin-bottom: 10px; + margin-bottom: 10px } -#following-list, #followers-list, #followers_you_follow-list { + +#following-list, +#followers-list, +#followers_you_follow-list { width: 570px; - margin-bottom: 10px; + margin-bottom: 10px } + .tweet { border-left: 1px solid #e1e8ed; border-right: 1px solid #e1e8ed; border-top: 1px solid #e1e8ed; - background-color: white; + background-color: #fff; padding: 10px; min-height: 75px; - cursor: pointer; + cursor: pointer } + .tweet:hover { - background-color: #f5f8fa; + background-color: #f5f8fa } + .tweet-avatar-link { float: left; - margin-right: 10px; -} -.tweet-avatar { - border-radius: 5px; + margin-right: 10px } -.tweet-avatar-quote { - border-radius: 5px; -} -.tweet-header, .tweet-header-quote { - display: contents; + +.tweet-header, +.tweet-header-quote { + display: contents } -.tweet-header-info, .tweet-header-info-quote { + +.tweet-header-info, +.tweet-header-info-quote { display: inline; text-decoration: none; position: relative; - bottom: 3px; + bottom: 3px } -.tweet-header-info-quote { bottom: 8px !important } -.tweet-header-info:hover { - text-decoration: underline; + +.tweet-header-info-quote { + bottom: 8px !important } + .tweet-header-name:hover { - color: var(--link-color); + color: var(--link-color) } -.tweet-header-name, .tweet-header-name-quote { + +.tweet-header-name, +.tweet-header-name-quote { display: inline; - font-weight: bold; + font-weight: 700; color: #292f33; - font-size: 14px; + font-size: 14px } -.tweet-header-handle, .tweet-time, .tweet-header-handle-quote, .tweet-time-quote { + +.tweet-header-handle, +.tweet-time, +.tweet-header-handle-quote, +.tweet-time-quote { display: inline; direction: ltr; unicode-bidi: embed; font-size: 13px; color: #8899a6; - text-decoration: none; + text-decoration: none } + .tweet-time { bottom: 3px; - position: relative; + position: relative } + .tweet-time-quote { bottom: 8px; - position: relative; + position: relative } .tweet-time::before { content: "\00b7"; margin-right: 3px; - color: #8899a6 !important; + color: #8899a6 !important } + .tweet-time:hover { color: var(--link-color); - text-decoration: underline; + text-decoration: underline } -.tweet-body, .tweet-interact, .tweet-body-text-quote { - display: flow-root; + +.tweet-body, +.tweet-interact, +.tweet-body-text-quote { + display: flow-root } + .tweet-body-quote { - background-color: white; + background-color: #fff; + display: block; + border-radius: 5px; + border: 1px solid #e1e8ed; + padding: 10px; + margin: 10px; + text-decoration: none; + position: relative; + right: 10px } + .tweet-body-quote:hover { background-color: #f5f8fa; - text-decoration: none; + text-decoration: none } + .tweet-body-text-long { font-size: 16px; line-height: 22px; - font-weight: 400; + font-weight: 400 } + .tweet-body-text-short { font-size: 26px; line-height: 32px; font-weight: 300; - letter-spacing: .01em; + letter-spacing: .01em } + .tweet-body-text a { - text-decoration: none; -} -.tweet-body-text a:hover { - text-decoration: underline; + text-decoration: none } + .tweet-interact { margin-top: 10px; - user-select: none; + user-select: none } -.tweet-interact span, #profile-settings-div span { + +.tweet-interact span, +#profile-settings-div span { color: #8899a6; font-size: 12px; - font-weight: bold; + font-weight: 700; margin-left: 6px; position: relative; top: -2px; text-decoration: none; cursor: pointer; - margin-right: 20px; + margin-right: 20px } -.tweet-interact span:before, #profile-settings-div span:before { - font-family: RosettaIcons; - font-weight: normal; - font-style: normal; - font-size: 16px; + +.tweet-interact span:before, +#profile-settings-div span:before { -webkit-font-smoothing: antialiased; margin-right: 10px; color: #ccd6dd; cursor: pointer; vertical-align: sub; + font: 400 16px RosettaIcons } + .tweet-interact-reply:before { - content: "\f151"; -} -.tweet-interact-retweet:before { - content: "\f152"; + content: "\f151" } + .tweet-interact-favorite:before { - content: var(--favorite-icon-content); + content: var(--favorite-icon-content) } + .tweet-interact-more:before { - content: "\f150"; -} -.tweet-interact-reply-clicked, .tweet-interact-reply-clicked:before, .tweet-interact-reply:hover:before, .tweet-interact-reply:hover, .tweet-interact-more:hover:before { - color: #3300FF !important; + content: "\f150" } -.tweet-interact-retweeted, .tweet-interact-retweeted:before, .tweet-interact-retweet:hover:before, .tweet-interact-retweet:hover { - color: #5c913b !important; -} -.tweet-interact-favorited, .tweet-interact-favorited:before, .tweet-interact-favorite:hover:before, .tweet-interact-favorite:hover { - color: var(--favorite-icon-color) !important; + +.tweet-interact-favorited, +.tweet-interact-favorited:before, +.tweet-interact-favorite:hover:before, +.tweet-interact-favorite:hover { + color: var(--favorite-icon-color) !important } -.tweet-reply-text, .tweet-quote-text { + +.tweet-reply-text, +.tweet-quote-text { border: 1px solid #e1e8ed; resize: none; border-radius: 5px; @@ -255,129 +291,148 @@ body { padding: 5px; font-family: var(--font); display: inline-block; - height: 30px; + height: 30px } -.tweet-reply-text:focus, .tweet-quote-text:focus { - outline: none; + +.tweet-reply-text:focus, +.tweet-quote-text:focus { + outline: none } -.tweet-reply-button, .tweet-quote-button { + +.tweet-reply-button, +.tweet-quote-button { position: relative; bottom: 16px; - height: 42px; + height: 42px } + .nice-button { color: #292f33; background-color: #f5f8fa; - background-image: linear-gradient(#fff,#f5f8fa); + background-image: linear-gradient(#fff, #f5f8fa); background-repeat: no-repeat; border: 1px solid #e1e8ed; border-radius: 4px; color: #66757f; cursor: pointer; - font-size: 14px; - font-weight: bold; - line-height: normal; padding: 8px 16px; - font-family: var(--font); + font: 700 14px/normal var(--font) } + .nice-button:hover:not([disabled]) { color: #292f33; text-decoration: none; background-color: #e1e8ed; - background-image: linear-gradient(#fff,#e1e8ed); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"; - border-color: #e1e8ed; + background-image: linear-gradient(#fff, #e1e8ed); + -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + border-color: #e1e8ed } + .nice-button:disabled { color: lightgray !important; - cursor: not-allowed; + cursor: not-allowed } + .nice-button:disabled:before { - color: lightgray !important; + color: lightgray !important } + .tweet-top { margin-left: 35px; margin-bottom: 7px; - font-size: 13px; + font-size: 13px } + .tweet-top-icon { font-family: RosettaIcons; margin-right: 10px; - vertical-align: text-bottom; + vertical-align: text-bottom } -.tweet-top-icon, .tweet-top-text { + +.tweet-top-icon, +.tweet-top-text { display: inline-block; - color: #8899a6; + color: #8899a6 } + .tweet-top-text a { color: #8899a6; - text-decoration: none; + text-decoration: none } + .tweet-top-text a:hover { color: var(--link-color) !important; - text-decoration: underline; + text-decoration: underline } -.tweet-interact-retweet-menu, .tweet-interact-more-menu, #profile-settings-div { + +.tweet-interact-retweet-menu, +.tweet-interact-more-menu, +#profile-settings-div { position: absolute; - background-color: white; + background-color: #fff; border: 1px solid #8899a6; border-radius: 5px; - z-index: 5; + z-index: 5 } + .tweet-interact-more-menu { - margin-left: 100px; + margin-left: 100px } -.tweet-reply-cancel:hover, .tweet-quote-cancel:hover, .tweet-reply-upload:hover, .tweet-quote-upload:hover { + +.tweet-reply-cancel:hover, +.tweet-quote-cancel:hover, +.tweet-reply-upload:hover, +.tweet-quote-upload:hover { text-decoration: underline; - cursor: pointer; -} -.tweet-body-quote { - display: block; - border-radius: 5px; - border: 1px solid #e1e8ed; - padding: 10px; - margin: 10px; - text-decoration: none; - position: relative; - right: 10px; + cursor: pointer } + .tweet-media { max-width: 500px; display: block; position: relative; - right: 5px; + right: 5px } + .tweet-media img { - cursor: zoom-in; + cursor: zoom-in } -.tweet-media-element, .new-tweet-media-img { + +.tweet-media-element, +.new-tweet-media-img { margin: 5px; border-radius: 7px; object-fit: cover; block-size: auto; - border: 1px solid #e1e8ed; + border: 1px solid #e1e8ed } + .tweet-media video { - block-size: auto; + block-size: auto } + .tweet-media-element-four { max-width: 100px; - max-height: 150px; + max-height: 150px } + .tweet-media-element-three { max-width: 150px; - max-height: 250px; + max-height: 250px } + .tweet-media-element-two { max-width: 200px; - max-height: 400px; + max-height: 400px } + .tweet-media-element-one { max-width: 450px; - max-height: 500px; + max-height: 500px } + .center-text { - background-color: white; + background-color: #fff; text-align: center; margin-bottom: 10px; color: #8899a6; @@ -385,293 +440,362 @@ body { font-size: 14px; padding: 10px; border-radius: 5px; - cursor: pointer; -} -.center-text:hover { - text-decoration: underline; + cursor: pointer } -.tweet-interact-retweet-menu span, .tweet-interact-more-menu span { + +.tweet-interact-retweet-menu span, +.tweet-interact-more-menu span { margin-right: 5px !important; - cursor: pointer; -} -.tweet-interact-retweet-menu span:hover { - color: #5c913b !important; -} -.tweet-interact-more-menu span:hover { - color: #3300FF !important; + cursor: pointer } -.tweet-interact-retweet-menu span:before, .tweet-interact-more-menu span:before, #profile-settings-div:before { + +.tweet-interact-retweet-menu span:before, +.tweet-interact-more-menu span:before, +#profile-settings-div:before { color: #8899a6; - margin-right: 5px !important; -} -.tweet-interact-retweet-menu-retweet:before { - content: "\f152"; -} -.tweet-interact-retweet-menu-quote:before { - content: "\f204"; + margin-right: 5px !important } + .tweet-interact-more-menu-copy:before { - content: "\f203"; -} -.tweet-interact-more-menu-embed:before { - content: "\f204"; + content: "\f203" } + .tweet-interact-more-menu-share:before { - content: "\f185"; + content: "\f185" } + .tweet-interact-more-menu-analytics:before { - content: "\f200"; + content: "\f200" } + .tweet-interact-more-menu-refresh:before { - content: "\f303"; + content: "\f303" } + .tweet-interact-more-menu-download:before { - content: "\f186"; + content: "\f186" } + .tweet-interact-more-menu-download-gif:before { - content: "\f309"; + content: "\f309" } + .tweet-interact-more-menu-delete:before { - content: "\f154"; + content: "\f154" } + .tweet-interact-more-menu-follow:before { - content: "\f056"; + content: "\f056" } + .tweet-media-element-censor { filter: blur(20px); -webkit-filter: blur(20px); -moz-filter: blur(20px); cursor: pointer; - transform: scale(1.03); + transform: scale(1.03) } + #wtf { padding: 10px; - width: 250px; + width: 250px } -#wtf h1, #trends h1, .nice-header { + +#wtf h1, +#trends h1, +.nice-header { margin: 0; display: inline-block; font-size: 18px; color: #66757f; - font-weight: 300; + font-weight: 300 } + .nice-header { - margin-bottom: 10px; + margin-bottom: 10px } + #trends { margin-top: 10px; - padding: 10px; + padding: 10px } + .trend { - font-size: 13px; + font-size: 13px } -#wtf-refresh, #wtf-viewall { + +#wtf-refresh, +#wtf-viewall { color: #8899a6; font-size: 12px; text-decoration: none; - cursor: pointer; + cursor: pointer } -#wtf-refresh:hover, #wtf-viewall:hover { - text-decoration: underline; + +a:hover, +.tweet-header-info:hover, +.tweet-body-text a:hover, +.center-text:hover, +#wtf-refresh:hover, +#wtf-viewall:hover { + text-decoration: underline +} + +.tweet-avatar, +.tweet-avatar-quote { + border-radius: 5px +} + +.tweet-interact-retweet:before, +.tweet-interact-retweet-menu-retweet:before { + content: "\f152" +} + +.tweet-interact-reply-clicked, +.tweet-interact-reply-clicked:before, +.tweet-interact-reply:hover:before, +.tweet-interact-reply:hover, +.tweet-interact-more:hover:before, +.tweet-interact-more-menu span:hover { + color: #30F !important +} + +.tweet-interact-retweeted, +.tweet-interact-retweeted:before, +.tweet-interact-retweet:hover:before, +.tweet-interact-retweet:hover, +.tweet-interact-retweet-menu span:hover { + color: #5c913b !important +} + +.tweet-interact-retweet-menu-quote:before, +.tweet-interact-more-menu-embed:before { + content: "\f204" } @media screen and (max-width: 1195px) { - #wtf, #about { - display: none; - } - #profile-nav-right-cell { - width: fit-content; + + #wtf, + #about { + display: none } + + #profile-nav-right-cell, #profile-nav-center-cell { - width: fit-content; + width: fit-content } } + .wtf-user { display: inline-block; - margin-bottom: 5px; -} -.wtf-user-link { - text-decoration: none !important; + margin-bottom: 5px } + .wtf-user-name { display: inline-block; overflow: hidden; - margin-right: 5px; + margin-right: 5px } + .wtf-user-handle { overflow: hidden; width: 88px; height: 17px; - display: inline-block; + display: inline-block } -.follow, .following { + +.follow, +.following { color: #292f33; - padding: 4px 12px 4px 12px !important; + padding: 4px 12px !important } + .follow:before { color: #8899a6; - font-family: RosettaIcons; content: "\f175"; margin-right: 7px; - font-size: 17px; vertical-align: text-bottom; + font: 17px RosettaIcons } + .following:before { color: var(--link-color); - font-family: RosettaIcons; content: "\f176"; margin-right: 7px; - font-size: 17px; vertical-align: text-bottom; + font: 17px RosettaIcons } + .tweet-self-thread-button { text-decoration: none; font-size: 13px; - margin-top: 2px; + margin-top: 2px } -.tweet-self-thread-button:hover { - text-decoration: underline; -} -.tweet-no-top{ - border-top: none !important; + +.tweet-no-top { + border-top: none !important } + .tweet-self-thread-line { position: absolute; width: 2px; height: 52px; background-color: #e1e8ed; margin-left: -34px; - z-index: 1; + z-index: 1 } + .tweet-self-thread-line-dots { z-index: 2; position: absolute; width: 12px; height: 2px; - border: 2px white solid; + border: 2px #fff solid; display: unset; margin-left: -41px; - margin-top: 2px; + margin-top: 2px } + .tweet:hover .tweet-self-thread-line-dots { - border: 2px #f5f8fa solid !important; + border: 2px #f5f8fa solid !important } + .user-verified::after { content: "\f099"; color: #55acee; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + .user-protected::after { content: "\f096"; color: #ddd22b; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + .user-muted::after { content: "\f101"; - color: rgb(243, 57, 57); + color: #f33939; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + #about { margin-top: 5px; padding: 10px; font-size: 12px; - color: #8899a6; + color: #8899a6 } -.about-links a, .about-links span { + +.about-links a, +.about-links span { color: #8899a6; - margin-right: 8px; + margin-right: 8px } + .emoji { width: 16px; height: 16px; vertical-align: bottom; margin-left: 2px; - margin-right: 2px; + margin-right: 2px } + .tweet-body-text-short .emoji { width: 26px !important; height: 26px !important; - vertical-align: text-top !important; + vertical-align: text-top !important } + .tweet-body-text-long .emoji { - vertical-align: text-bottom !important; + vertical-align: text-bottom !important } + #user-name .emoji { width: 26px !important; - height: 26px !important; + height: 26px !important } + #new-tweets { border-bottom: none !important; border-radius: 0 !important; margin-bottom: 0 !important; padding: 10px; color: #66757f; - background-color: #f5f8fa; + background-color: #f5f8fa } + #new-tweet-avatar { - vertical-align: top; + vertical-align: top } + #new-tweet-text { border: 1px solid #e1e8ed; resize: none; border-radius: 3px; width: 450px; padding: 5px; - font-family: var(--font); display: inline-block; height: 23px; - font-size: 18px; padding-right: 40px; scrollbar-width: thin; + font: 18px var(--font) } + #new-tweet-text::-webkit-scrollbar { - width: 2px; + width: 2px } + #new-tweet-text:focus { - outline: none; + outline: none } + .new-tweet-text-focused { - height: 100px !important; + height: 100px !important } + #new-tweet { border-bottom: none !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; background-color: rgba(255, 255, 255, 0.92); padding: 10px; - width: 538px; + width: 538px } + #new-tweet-container { border-radius: 5px; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; - background-color: var(--link-color); + background-color: var(--link-color) } + #new-tweet-media-div { float: right; position: relative; cursor: pointer; bottom: 36px; - right: 15px; + right: 15px } + .new-tweet-media-div-focused { - bottom: 112px !important; + bottom: 112px !important } + #new-tweet-media:before { content: "\f159"; - font-family: RosettaIcons; color: var(--link-color); - font-size: 20px; + font: 20px RosettaIcons } + #new-tweet-button { float: right; margin-top: 5px; left: 14px; - position: relative; + position: relative } + #new-tweet-char { color: #8899a6; font-size: 12px; @@ -679,66 +803,76 @@ body { margin-left: -46px; margin-top: 38px; width: 43px; - text-align: center; + text-align: center } -.tweet-reply-char, .tweet-quote-char { + +.tweet-reply-char, +.tweet-quote-char { color: #8899a6; font-size: 12px; padding: 3px; top: -10px; - position: relative; + position: relative } -#new-tweet-button:before, .tweet-reply-button:before, .tweet-quote-button:before { + +#new-tweet-button:before, +.tweet-reply-button:before, +.tweet-quote-button:before { content: "\f029"; - font-family: RosettaIcons; color: var(--link-color); - font-size: 14px; margin-right: 5px; vertical-align: bottom; + font: 14px RosettaIcons } + #new-tweet-media-c { width: auto; margin: 0; - display: contents; + display: contents } + #new-tweet-media-cc { left: 34px; position: relative; - display: inline; + display: inline } + .new-tweet-media-img { max-width: 75px; max-height: 100px; - cursor: zoom-in; + cursor: zoom-in } + .new-tweet-media-img-progress { position: absolute; display: block; color: gray; font-size: 10px; - margin-left: 6px; + margin-left: 6px } + .new-tweet-media-img-remove { position: absolute; margin-left: -24px; margin-top: 8px; height: 14px; - padding: 0px 3px 3px 3px; - background-color: rgba(0,0,0, 0.5); + padding: 0 3px 3px; + background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; - cursor: pointer; + cursor: pointer } + .new-tweet-media-img-remove:before { content: "\f045"; - font-family: RosettaIcons; margin-bottom: 2px; - color: white; - font-size: 13px; + color: #fff; + font: 13px RosettaIcons } + .new-tweet-media-img-alt { position: absolute; - background: rgba(0,0,0, 0.5); - color: white; + background: rgba(0, 0, 0, 0.5); + color: #fff; padding: 1px 4px; font-size: 12px; font-weight: 600; @@ -746,52 +880,52 @@ body { margin-top: 8px; margin-left: -57px; padding-bottom: 2px; - cursor: pointer; + cursor: pointer } + .new-tweet-media-img-div { width: fit-content; - display: inline-block; + display: inline-block } + #donate-button { - transition: 1s; + transition: 1s } + .tweet-translate { color: var(--link-color); font-size: 13px; cursor: pointer; - margin-top: 2px; -} -.tweet-translate:hover { - text-decoration: underline; + margin-top: 2px } + .tweet-interact-more-menu hr { border-top: #ccd6dd; - margin: 2px; + margin: 2px } #profile-banner-div { height: fit-content; - overflow: hidden; + overflow: hidden } + #profile-banner-sticky { position: sticky; top: -400px; - z-index: 16; + z-index: 16 } #profile-banner { width: 100%; object-fit: cover; position: relative; - transition: 0.1s; + transition: .1s; height: 5px; -} -#profile-banner { - height:500px + height: 500px } #profile-nav { - background-color: white; + background-color: #fff; border-bottom: 1px solid #e1e8ed; box-sizing: border-box; height: 60px; @@ -799,7 +933,7 @@ body { position: sticky; bottom: 5px; top: 70px; - z-index: 20; + z-index: 20 } #profile-avatar { @@ -807,383 +941,442 @@ body { border-radius: 12px; box-shadow: 0 1px 1px rgb(136 153 166 / 15%); } + #profile-info { position: relative; bottom: 250px; z-index: 21; - color: #292f33; + color: #292f33 } + #profile-name { font-size: 22px; font-weight: 700; line-height: 1; word-wrap: break-word; margin: 0; - text-rendering: optimizeLegibility; -} -.pin-a { - color: #292f33; + text-rendering: optimizeLegibility } + .piu-a { color: #8899a6; - text-decoration: none; -} -.piu-a:hover, .pin-a:hover { - text-decoration: underline; + text-decoration: none } + #profile-info-text { margin-top: 10px; margin-left: 5px; padding-right: 20px; position: relative; - bottom: 255px; + bottom: 255px } + #profile-username { font-size: 14px; font-weight: 400; line-height: 1; display: block; - margin-bottom: 10px; + margin-bottom: 10px } + #profile-bio { font-size: 14px; font-weight: 400; line-height: 20px; margin-bottom: 10px; - word-wrap: break-word; + word-wrap: break-word } + #tweet-nav[hidden] { - display: none !important; + display: none !important } + #tweet-nav { - background-color: white; + background-color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; border-left: 1px solid #e1e8ed; border-right: 1px solid #e1e8ed; border-top: 1px solid #e1e8ed; - display: flex; + display: flex } + #tweet-nav * { font-weight: 500; text-decoration: none; font-size: 18px; line-height: 1; - padding: 15px 15px 12px; -} -.tweet-nav-active { - color: #292f33; -} -.tweet-nav-active:hover { - text-decoration: none !important; -} -#tweet-nav a:hover { - text-decoration: underline; + padding: 15px 15px 12px } + .profile-additional-thing { font-size: 14px; font-weight: 400; line-height: 20px; - display: block; + display: block } -.profile-additional-thing:before, #edit-profile:before { - font-family: RosettaIcons; - font-size: 18px; + +.profile-additional-thing:before, +#edit-profile:before { margin-right: 5px; vertical-align: sub; color: #8899a6; display: inline-block; width: 20px; text-align: center; + font: 18px RosettaIcons } + .profile-additional-location:before { - content: "\f031"; -} -.profile-additional-url:before { - content: "\f098"; + content: "\f031" } + .profile-additional-joined:before { - content: "\f177"; + content: "\f177" } + #profile-media-text:before { - content: "\f110"; -} -#profile-friends-text:before { - content: "\f056" + content: "\f110" } + #profile-settings:before { font-size: 16px; - content: "\f059"; + content: "\f059" } + #profile-settings { cursor: pointer; margin-right: 7px; - margin-top: 6px; -} -#profile-settings:hover:before { - color: var(--link-color); + margin-top: 6px } + #edit-profile:before { content: "\f059"; font-size: 14px; - vertical-align: text-bottom; + vertical-align: text-bottom } + .profile-media-preview { cursor: pointer; vertical-align: text-top; width: 82px; height: 82px; - margin: 3px; + margin: 3px } + #profile-stats { display: inline-flex; - position: relative; + position: relative } + .profile-stat-text { font-size: 11px; letter-spacing: .02em; text-transform: uppercase; transition: color .15s ease-in-out; - color: #66757f; + color: #66757f } + .profile-stat-value { font-size: 18px; padding-top: 3px; font-weight: 500; - transition: color .15s ease-in-out; + transition: color .15s ease-in-out } + .profile-stat { display: grid; text-align: center; padding: 12px; padding-bottom: 10px; transition: color .15s ease-in-out; + border-bottom: 4px solid transparent } -.profile-stat { - border-bottom: 4px solid transparent; -} -.profile-stat:hover, .profile-stat-active { + +.profile-stat:hover, +.profile-stat-active { text-decoration: none; - border-bottom: 4px solid var(--link-color); -} -.profile-stat:hover:not(.profile-stat-active) .profile-stat-text { - color: var(--link-color); + border-bottom: 4px solid var(--link-color) } + #nav-profile-avatar { border-radius: 5px; - margin-right: 5px; + margin-right: 5px } + #nav-profile-info { margin-top: 11px; margin-left: 10px; height: 39px; overflow: hidden; width: 200px; - display: flex; + display: flex } + #nav-profile-info-text { display: inline-block; position: relative; - bottom: 2px; + bottom: 2px } + #nav-profile-name { font-weight: 700; font-size: 18px; - color: #292f33; + color: #292f33 } + #nav-profile-username { color: #66757f; font-size: 13px; font-weight: 400; - line-height: 1; + line-height: 1 } + #npu-a { bottom: 3px; - position: relative; + position: relative } + #profile-nav-buttons { position: relative; margin-right: -12px; - margin-bottom: 2px; + margin-bottom: 2px } + #profile-nav-buttons * { - float: right; + float: right } + .control-btn { - padding: 4px 12px 9px 12px !important; + padding: 4px 12px 9px !important } + .profile-friends-avatar { border-radius: 5px; - margin: 2px; + margin: 2px } + #message-user { margin-right: 6px; - padding: 6px 1px 6px 6px; + padding: 6px 1px 6px 6px } + #message-user:before { content: "\f157"; - font-family: RosettaIcons; - font-size: 18px; margin-right: 5px; vertical-align: sub; color: #8899a6; display: inline-block; width: 20px; text-align: center; + font: 18px RosettaIcons } -#message-user:hover:before { - color: var(--link-color); -} + #profile-settings-div { margin-top: 30px; margin-left: -50px; padding: 3px; user-select: none; - width: 200px; + width: 200px } + .profile-settings-notifications:before { - content: "\f055"; + content: "\f055" } + .profile-settings-offnotifications:before { - content: "\f037"; + content: "\f037" } + .profile-settings-block:before { - content: "\f097"; -} -.profile-settings-unblock:before { - content: "\f056"; -} -.profile-settings-mute:before { - content: "\f101"; -} -.profile-settings-unmute:before { - content: "\f101"; + content: "\f097" } + #profile-settings-removefollowing:before { - content: "\f065"; + content: "\f065" } + #profile-settings-lists:before { - content: "\f094"; + content: "\f094" } + #profile-settings-share:before { - content: "\f185"; -} -#profile-settings-copy:before { - content: "\f098"; + content: "\f185" } + #profile-settings-div span { - float: left; + float: left } + #profile-settings-div span:before { width: 11px; text-align: center; - display: inline-block; + display: inline-block } + #profile-settings-div span:hover { - color: #3300FF; + color: #30F } + #profile-settings-div hr { float: left; border-top: gray; width: 100%; - margin: 3px; + margin: 3px } + #control-unblock { - padding-top: 7px !important; + padding-top: 7px !important } + #control-unblock:before { content: "\f056"; font-family: RosettaIcons; margin-right: 5px; - vertical-align: bottom; + vertical-align: bottom } + #follows-you { font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: #66757f; - background: rgb(213 213 213 / 80%); + background: red; width: fit-content; padding: 3px 7px; border-radius: 5px; - margin-bottom: 5px; + margin-bottom: 5px } #tweet-to { color: var(--link-color) !important; padding: 10px; - color: white; + color: #fff; cursor: pointer; - border: 1px solid rgb(0 0 0 / 26%); + border: 1px solid #000; border-radius: 5px; - background: white; - font-size: 14px; + background: #fff; + font-size: 14px } + #tweet-to:hover { background-color: #e1e8ed; - background-image: linear-gradient(#fff,#eff4f8); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"; + background-image: linear-gradient(#fff, #eff4f8); + -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) } + #tweet-to-div { padding: 10px; - border: 1px solid rgb(0 0 0 / 26%); + border: 1px solid #000; border-radius: 5px; - background: rgba(255, 255, 255, 0.92); + background: rgba(255, 255, 255, 0.92) } + #tweet-to-bg { margin-top: 10px; background: var(--link-color); - border-radius: 5px; + border-radius: 5px } + .following-item-btn { float: right; + position: relative; + bottom: 52px; + height: 40px } + .following-item-text { width: fit-content; display: inline-block; position: relative; bottom: 14px; - margin-left: 8px; + margin-left: 8px } + .following-item-link:hover { - text-decoration: none; + text-decoration: none } + .following-item { - margin-bottom: 5px; + margin-bottom: 5px } -.following-item-btn { - position: relative; - bottom: 52px; - height: 40px; -} -#following-list, #followers-list, #followers_you_follow-list { - padding: 10px; + +#following-list, +#followers-list, +#followers_you_follow-list { + padding: 10px } + .following-item-name { position: absolute; - width: 300px; + width: 300px } + .navbar-new-tweet-user-search { position: absolute; - background-color: white; + background-color: #fff; padding: 5px; z-index: 5; - color: #292f33; + color: #292f33 } + .navbar-new-tweet-user-search span { cursor: pointer; border-radius: 5px; - padding: 2px; + padding: 2px } -.navbar-new-tweet-user-search span:hover, .search-result-item-active { + +.navbar-new-tweet-user-search span:hover, +.search-result-item-active { background-color: var(--link-color) !important; - color: white !important; + color: #fff !important } + .box { - background-color: white; + background-color: #fff; border-radius: 5px; - border: 1px solid #e1e8ed; + border: 1px solid #e1e8ed } + .wtf-header { - display: flow-root; + display: flow-root +} + +.wtf-user-link, +.tweet-nav-active:hover { + text-decoration: none !important +} + +.tweet-self-thread-button:hover, +.tweet-translate:hover, +.piu-a:hover, +.pin-a:hover, +#tweet-nav a:hover { + text-decoration: underline +} + +.pin-a, +.tweet-nav-active { + color: #292f33 +} + +.profile-additional-url:before, +#profile-settings-copy:before { + content: "\f098" +} + +#profile-friends-text:before, +.profile-settings-unblock:before { + content: "\f056" +} + +#profile-settings:hover:before, +.profile-stat:hover:not(.profile-stat-active) .profile-stat-text, +#message-user:hover:before { + color: var(--link-color) +} + +.profile-settings-mute:before, +.profile-settings-unmute:before { + content: "\f101" } \ No newline at end of file diff --git a/layouts/search/style.css b/layouts/search/style.css index aba0b22d..3b063857 100644 --- a/layouts/search/style.css +++ b/layouts/search/style.css @@ -1,730 +1,874 @@ #loading-box { - z-index: 1000; - width: 100%; + background-color: #fff; height: 100%; - background-color: white; position: fixed; + width: 100%; + z-index: 1000 } + #loading-box-text:before { - content: "\f179"; - vertical-align: sub; - font-family: RosettaIcons; - font-size: 64px; color: #1da1f2; + content: "\f179"; + font: 64px RosettaIcons; margin-left: 20px; + vertical-align: sub } + #loading-box-container { margin: 0 auto; - width: 100%; margin-top: 270px; text-align: center; + width: 100% } a { color: var(--link-color); - text-decoration: none; -} -a:hover { - text-decoration: underline; + text-decoration: none } body { background-color: #f5f8fa !important; font-family: var(--font); - margin: 0; + margin: 0 } + #container { margin: 0 auto; - max-width: 1190px; + max-width: 1190px } .cell { box-sizing: border-box; - display: inline-block; + display: inline-block } #content { - display: flex; + display: flex } + .box { - background-color: white; - border-radius: 5px; + background-color: #fff; border: 1px solid #e1e8ed; + border-radius: 5px } + #user-banner { border-top-left-radius: 5px; border-top-right-radius: 5px; - object-fit: cover; + object-fit: cover } + #user-avatar { - margin-left: 7px; - border: 4px solid white; - margin-top: -32px; + border: 4px solid #fff; border-radius: 7px; + margin-left: 7px; + margin-top: -32px } + #user-name { - margin: 0; - left: 95px; - font-size: 22px; - position: relative; bottom: 47px; - width: fit-content; color: #292f33; -} -#user-handle { + font-size: 22px; + left: 95px; margin: 0; position: relative; + width: fit-content +} + +#user-handle { + bottom: 48px; color: #6a7d8c; font-size: 14px; font-weight: 100; left: 95px; - bottom: 48px; - width: fit-content; + margin: 0; + position: relative; + width: fit-content } + #user-stats { display: inline-flex; - padding-bottom: 7px; + padding-bottom: 7px } -.user-stat-div > h2 { + +.user-stat-div>h2 { color: #6a7d8c; font-size: 14px; font-weight: 100; - text-transform: uppercase; margin: 0 10px; + text-transform: uppercase } -.user-stat-div > h1 { - margin: 0 10px; - font-size: 20px; + +.user-stat-div>h1 { color: var(--link-color); + font-size: 20px; + margin: 0 10px } + #user-info { - height: 5px; display: block; - text-decoration: none; + height: 5px; + text-decoration: none } + #center-cell { - margin-top: 55px; + margin-top: 55px } + #left-cell { - top: 55px; - position: sticky; height: fit-content; - margin-right: 10px; margin-left: 10px; + margin-right: 10px; + position: sticky; + top: 55px } + #right-cell { - top: 55px; - position: sticky; height: fit-content; margin-left: 10px; margin-right: 10px; + position: sticky; + top: 55px } + #search-div { - width: 590px; margin-bottom: 10px; min-height: 700px; + width: 590px } + #trends { margin-top: 10px; - padding: 10px; + padding: 10px } + .trend { - font-size: 13px; + font-size: 13px } -.tweet, .following-item { + +.tweet, +.following-item { + background-color: #fff; border-left: 1px solid #e1e8ed; border-right: 1px solid #e1e8ed; border-top: 1px solid #e1e8ed; - background-color: white; - padding: 10px; - min-height: 50px; cursor: pointer; + min-height: 50px; + padding: 10px } + .tweet:hover { - background-color: #f5f8fa; + background-color: #f5f8fa } + .tweet-avatar-link { float: left; - margin-right: 10px; -} -.tweet-avatar { - border-radius: 5px; + margin-right: 10px } -.tweet-avatar-quote { - border-radius: 5px; -} -.tweet-header, .tweet-header-quote { - display: contents; + +.tweet-header, +.tweet-header-quote { + display: contents } -.tweet-header-info, .tweet-header-info-quote { + +.tweet-header-info, +.tweet-header-info-quote { + bottom: 3px; display: inline; - text-decoration: none; position: relative; - bottom: 3px; + text-decoration: none } -.tweet-header-info-quote { bottom: 8px !important } -.tweet-header-info:hover { - text-decoration: underline; + +.tweet-header-info-quote { + bottom: 8px !important } + .tweet-header-name:hover { - color: var(--link-color); + color: var(--link-color) } -.tweet-header-name, .tweet-header-name-quote { - display: inline; - font-weight: bold; + +.tweet-header-name, +.tweet-header-name-quote { color: #292f33; + display: inline; font-size: 14px; + font-weight: 700 } -.tweet-header-handle, .tweet-time, .tweet-header-handle-quote, .tweet-time-quote { - display: inline; + +.tweet-header-handle, +.tweet-time, +.tweet-header-handle-quote, +.tweet-time-quote { + color: #8899a6; direction: ltr; - unicode-bidi: embed; + display: inline; font-size: 13px; - color: #8899a6; text-decoration: none; + unicode-bidi: embed } + .tweet-time { bottom: 3px; - position: relative; + position: relative } + .tweet-time-quote { bottom: 8px; - position: relative; + position: relative } .tweet-time::before { - content: "\00b7"; - margin-right: 3px; color: #8899a6 !important; + content: "\00b7"; + margin-right: 3px } + .tweet-time:hover { color: var(--link-color); - text-decoration: underline; + text-decoration: underline } -.tweet-body, .tweet-interact, .tweet-body-text-quote { - display: flow-root; + +.tweet-body, +.tweet-interact, +.tweet-body-text-quote { + display: flow-root } + .tweet-body-quote { - background-color: white; + background-color: #fff; + border: 1px solid #e1e8ed; + border-radius: 5px; + display: block; + margin: 10px; + padding: 10px; + position: relative; + right: 10px; + text-decoration: none } + .tweet-body-quote:hover { background-color: #f5f8fa; - text-decoration: none; + text-decoration: none } + .tweet-body-text-long { font-size: 16px; - line-height: 22px; font-weight: 400; + line-height: 22px } + .tweet-body-text-short { font-size: 26px; - line-height: 32px; font-weight: 300; letter-spacing: .01em; + line-height: 32px } + .tweet-body-text a { - text-decoration: none; -} -.tweet-body-text a:hover { - text-decoration: underline; + text-decoration: none } + .tweet-interact { margin-top: 10px; - user-select: none; + user-select: none } + .tweet-interact span { color: #8899a6; + cursor: pointer; display: inline-block; font-size: 12px; - font-weight: bold; + font-weight: 700; margin-left: 6px; + margin-right: 20px; position: relative; - top: -2px; text-decoration: none; - cursor: pointer; - margin-right: 20px; + top: -2px } + .tweet-interact span:before { - font-family: RosettaIcons; - font-weight: normal; - font-style: normal; - font-size: 16px; -webkit-font-smoothing: antialiased; - margin-right: 10px; color: #ccd6dd; cursor: pointer; - vertical-align: sub; + font: 400 16px RosettaIcons; + margin-right: 10px; + vertical-align: sub } + .tweet-interact-reply:before { - content: "\f151"; -} -.tweet-interact-retweet:before { - content: "\f152"; + content: "\f151" } + .tweet-interact-favorite:before { - content: var(--favorite-icon-content); + content: var(--favorite-icon-content) } + .tweet-interact-more:before { - content: "\f150"; + content: "\f150" } -.tweet-interact-reply-clicked, .tweet-interact-reply-clicked:before, .tweet-interact-reply:hover:before, .tweet-interact-reply:hover, .tweet-interact-more:hover:before { - color: #3300FF !important; -} -.tweet-interact-retweeted, .tweet-interact-retweeted:before, .tweet-interact-retweet:hover:before, .tweet-interact-retweet:hover { - color: #5c913b !important; -} -.tweet-interact-favorited, .tweet-interact-favorited:before, .tweet-interact-favorite:hover:before, .tweet-interact-favorite:hover { - color: var(--favorite-icon-color) !important; + +.tweet-interact-favorited, +.tweet-interact-favorited:before, +.tweet-interact-favorite:hover:before, +.tweet-interact-favorite:hover { + color: var(--favorite-icon-color) !important } -.tweet-reply-text, .tweet-quote-text { + +.tweet-reply-text, +.tweet-quote-text { border: 1px solid #e1e8ed; - resize: none; border-radius: 5px; - width: 346px; - padding: 5px; - font-family: var(--font); display: inline-block; + font-family: var(--font); height: 30px; + padding: 5px; + resize: none; + width: 346px } -.tweet-reply-text:focus, .tweet-quote-text:focus { - outline: none; + +.tweet-reply-text:focus, +.tweet-quote-text:focus { + outline: none } -.tweet-reply-button, .tweet-quote-button { - position: relative; + +.tweet-reply-button, +.tweet-quote-button { bottom: 16px; height: 42px; + position: relative } + .nice-button { - color: #292f33; background-color: #f5f8fa; - background-image: linear-gradient(#fff,#f5f8fa); + background-image: linear-gradient(#fff, #f5f8fa); background-repeat: no-repeat; border: 1px solid #e1e8ed; border-radius: 4px; + color: #292f33; color: #66757f; cursor: pointer; font-size: 14px; - font-weight: bold; + font-weight: 700; line-height: normal; - padding: 8px 16px; + padding: 8px 16px } + .nice-button:hover:not([disabled]) { - color: #292f33; - text-decoration: none; + -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); background-color: #e1e8ed; - background-image: linear-gradient(#fff,#e1e8ed); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"; + background-image: linear-gradient(#fff, #e1e8ed); border-color: #e1e8ed; + color: #292f33; + text-decoration: none } + .nice-button:disabled { color: lightgray !important; - cursor: not-allowed; + cursor: not-allowed } + .nice-button:disabled:before { - color: lightgray !important; + color: lightgray !important } + .tweet-top { - margin-left: 35px; - margin-bottom: 7px; font-size: 13px; + margin-bottom: 7px; + margin-left: 35px } + .tweet-top-icon { font-family: RosettaIcons; margin-right: 10px; - vertical-align: text-bottom; + vertical-align: text-bottom } -.tweet-top-icon, .tweet-top-text { - display: inline-block; + +.tweet-top-icon, +.tweet-top-text { color: #8899a6; + display: inline-block } + .tweet-top-text a { color: #8899a6; - text-decoration: none; + text-decoration: none } + .tweet-top-text a:hover { color: var(--link-color) !important; - text-decoration: underline; + text-decoration: underline } -.tweet-interact-retweet-menu, .tweet-interact-more-menu { - position: absolute; - background-color: white; + +.tweet-interact-retweet-menu, +.tweet-interact-more-menu { + background-color: #fff; border: 1px solid #8899a6; border-radius: 5px; - z-index: 5; + position: absolute; + z-index: 5 } + .tweet-interact-more-menu { - margin-left: 100px; + margin-left: 100px } -.tweet-reply-cancel:hover, .tweet-quote-cancel:hover, .tweet-reply-upload:hover, .tweet-quote-upload:hover { - text-decoration: underline; + +.tweet-reply-cancel:hover, +.tweet-quote-cancel:hover, +.tweet-reply-upload:hover, +.tweet-quote-upload:hover { cursor: pointer; + text-decoration: underline } -.tweet-body-quote { - display: block; - border-radius: 5px; - border: 1px solid #e1e8ed; - padding: 10px; - margin: 10px; - text-decoration: none; - position: relative; - right: 10px; -} + .tweet-media { - max-width: 500px; display: block; + max-width: 500px; position: relative; - right: 5px; + right: 5px } + .tweet-media img { - cursor: zoom-in; + cursor: zoom-in } -.tweet-media-element, .new-tweet-media-img { - margin: 5px; - border-radius: 7px; - object-fit: cover; + +.tweet-media-element, +.new-tweet-media-img { block-size: auto; border: 1px solid #e1e8ed; + border-radius: 7px; + margin: 5px; + object-fit: cover } + .tweet-media video { - block-size: auto; + block-size: auto } + .tweet-media-element-four { - max-width: 100px; max-height: 150px; + max-width: 100px } + .tweet-media-element-three { - max-width: 150px; max-height: 250px; + max-width: 150px } + .tweet-media-element-two { - max-width: 200px; max-height: 400px; + max-width: 200px } + .tweet-media-element-one { - max-width: 450px; max-height: 500px; + max-width: 450px } -.tweet-interact-retweet-menu span, .tweet-interact-more-menu span { - margin-right: 5px !important; + +.tweet-interact-retweet-menu span, +.tweet-interact-more-menu span { cursor: pointer; + margin-right: 5px !important } -.tweet-interact-retweet-menu span:hover { - color: #5c913b !important; -} -.tweet-interact-more-menu span:hover { - color: #3300FF !important; -} -.tweet-interact-retweet-menu span:before, .tweet-interact-more-menu span:before { + +.tweet-interact-retweet-menu span:before, +.tweet-interact-more-menu span:before { color: #8899a6; - margin-right: 5px !important; -} -.tweet-interact-retweet-menu-retweet:before { - content: "\f152"; -} -.tweet-interact-retweet-menu-quote:before { - content: "\f204"; + margin-right: 5px !important } + .tweet-interact-more-menu-copy:before { - content: "\f203"; -} -.tweet-interact-more-menu-embed:before { - content: "\f204"; + content: "\f203" } + .tweet-interact-more-menu-share:before { - content: "\f185"; + content: "\f185" } + .tweet-interact-more-menu-analytics:before { - content: "\f200"; + content: "\f200" } + .tweet-interact-more-menu-refresh:before { - content: "\f303"; + content: "\f303" } + .tweet-interact-more-menu-download:before { - content: "\f186"; + content: "\f186" } + .tweet-interact-more-menu-download-gif:before { - content: "\f309"; + content: "\f309" } + .tweet-interact-more-menu-delete:before { - content: "\f154"; + content: "\f154" } + .tweet-media-element-censor { - filter: blur(20px); - -webkit-filter: blur(20px); -moz-filter: blur(20px); + -webkit-filter: blur(20px); cursor: pointer; - transform: scale(1.03); + filter: blur(20px); + transform: scale(1.03) } + #wtf { padding: 10px; - width: 250px; + width: 250px } -#wtf h1, #trends h1, .nice-header { - margin: 0; + +#wtf h1, +#trends h1, +.nice-header { + color: #66757f; display: inline-block; font-size: 22px; - color: #66757f; font-weight: 300; + margin: 0 } + .nice-header { - margin-bottom: 5px; + margin-bottom: 5px } + .nice-subheader { - margin: 0; - display: inline-block; color: #66757f; + display: inline-block; font-weight: 300; + margin: 0 } -#wtf-refresh, #wtf-viewall { + +#wtf-refresh, +#wtf-viewall { color: #8899a6; - font-size: 12px; - text-decoration: none; cursor: pointer; + font-size: 12px; + text-decoration: none +} + +a:hover, +.tweet-header-info:hover, +.tweet-body-text a:hover, +#wtf-refresh:hover, +#wtf-viewall:hover { + text-decoration: underline } -#wtf-refresh:hover, #wtf-viewall:hover { - text-decoration: underline; + +.tweet-avatar, +.tweet-avatar-quote { + border-radius: 5px +} + +.tweet-interact-retweet:before, +.tweet-interact-retweet-menu-retweet:before { + content: "\f152" +} + +.tweet-interact-reply-clicked, +.tweet-interact-reply-clicked:before, +.tweet-interact-reply:hover:before, +.tweet-interact-reply:hover, +.tweet-interact-more:hover:before, +.tweet-interact-more-menu span:hover { + color: #30F !important +} + +.tweet-interact-retweeted, +.tweet-interact-retweeted:before, +.tweet-interact-retweet:hover:before, +.tweet-interact-retweet:hover, +.tweet-interact-retweet-menu span:hover { + color: #5c913b !important +} + +.tweet-interact-retweet-menu-quote:before, +.tweet-interact-more-menu-embed:before { + content: "\f204" } @media screen and (max-width: 1195px) { - #wtf, #about { - display: none; + + #wtf, + #about { + display: none } } + .wtf-user { display: inline-block; - margin-bottom: 5px; + margin-bottom: 5px } + .wtf-user-link { - text-decoration: none !important; + text-decoration: none !important } + .wtf-user-name { display: inline-block; - overflow: hidden; margin-right: 5px; + overflow: hidden } + .wtf-user-handle { - overflow: hidden; - width: 88px; - height: 17px; display: inline-block; + height: 17px; + overflow: hidden; + width: 88px } -.follow, .following { + +.follow, +.following { color: #292f33; - padding: 4px 12px 4px 12px !important; + padding: 4px 12px !important } + .follow:before { color: #8899a6; - font-family: RosettaIcons; content: "\f175"; + font-family: RosettaIcons; margin-right: 7px; - vertical-align: text-bottom; + vertical-align: text-bottom } + .following:before { color: var(--link-color); - font-family: RosettaIcons; content: "\f176"; + font-family: RosettaIcons; margin-right: 7px; - vertical-align: text-bottom; + vertical-align: text-bottom } + .tweet-self-thread-button { - text-decoration: none; font-size: 13px; margin-top: 2px; + text-decoration: none } -.tweet-self-thread-button:hover { - text-decoration: underline; -} -.tweet-no-top{ - border-top: none !important; + +.tweet-no-top { + border-top: none !important } + .tweet-self-thread-line { - position: absolute; - width: 2px; - height: 52px; background-color: #e1e8ed; + height: 52px; margin-left: -34px; - z-index: 1; + position: absolute; + width: 2px; + z-index: 1 } + .tweet-self-thread-line-dots { - z-index: 2; - position: absolute; - width: 12px; - height: 2px; - border: 2px white solid; + border: 2px #fff solid; display: unset; + height: 2px; margin-left: -41px; margin-top: 2px; + position: absolute; + width: 12px; + z-index: 2 } + .tweet:hover .tweet-self-thread-line-dots { - border: 2px #f5f8fa solid !important; + border: 2px #f5f8fa solid !important } + .user-verified::after { - content: "\f099"; color: #55acee; + content: "\f099"; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + .user-protected::after { - content: "\f096"; color: #ddd22b; + content: "\f096"; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + #about { - margin-top: 5px; - padding: 10px; - font-size: 12px; color: #8899a6; + font-size: 12px; + margin-top: 5px; + padding: 10px } -.about-links a, .about-links span { + +.about-links a, +.about-links span { color: #8899a6; - margin-right: 8px; + margin-right: 8px } #trends { margin-top: 10px; - padding: 10px; + padding: 10px } -#trends > h1 { - margin-bottom: 5px; + +#trends>h1 { + margin-bottom: 5px } + .emoji { - width: 16px; height: 16px; - vertical-align: bottom; margin-left: 2px; margin-right: 2px; + vertical-align: bottom; + width: 16px } + .tweet-body-text-short .emoji { - width: 26px !important; height: 26px !important; vertical-align: text-top !important; + width: 26px !important } + .tweet-body-text-long .emoji { - vertical-align: text-bottom !important; + vertical-align: text-bottom !important } + #user-name .emoji { - width: 26px !important; height: 26px !important; + width: 26px !important } + #donate-button { - transition: 1s; + transition: 1s } + .tweet-translate { color: var(--link-color); - font-size: 13px; cursor: pointer; - margin-top: 2px; -} -.tweet-translate:hover { - text-decoration: underline; + font-size: 13px; + margin-top: 2px } + .tweet-interact-more-menu hr { border-top: #ccd6dd; - margin: 2px; + margin: 2px } + .ni-favorite:before { - content: var(--favorite-icon-content-notif); color: var(--favorite-icon-color); + content: var(--favorite-icon-content-notif) } + .ni-follow:before { - content: "\f002"; color: #55acee; + content: "\f002" } + .ni-retweet:before { - content: "\f006"; color: #5c913b; + content: "\f006" } + .center-text { - background-color: white; - text-align: center; - margin-bottom: 10px; - color: #8899a6; + background-color: #fff; border: 1px solid #e1e8ed; - font-size: 14px; - padding: 10px; border-radius: 5px; + color: #8899a6; cursor: pointer; + font-size: 14px; + margin-bottom: 10px; + padding: 10px; + text-align: center } -.center-text:hover { - text-decoration: underline; -} + .search-switches { - width: 250px; - padding: 10px; margin-bottom: 10px; + padding: 10px; + width: 250px } -.search-switches > hr { - border-top: #8899a6; + +.search-switches>hr { + border-top: #8899a6 } + .search-switch { color: #66757f; cursor: pointer; - padding-right: 100px; + padding-right: 100px } -.search-switch:hover, .search-switch-active { - color: black; + +.search-switch:hover, +.search-switch-active { + color: #000 } + .search-switch:before { + color: #fff; content: "\f170"; font-family: RosettaIcons; - color: white; font-weight: 100; - margin-right: 5px; - vertical-align: text-bottom; margin-left: 2px; + margin-right: 5px; + vertical-align: text-bottom } + #advanced:before { - content: "\f059" !important; color: #8899a6; + content: "\f059" !important } + .search-switch-active:before { + color: var(--link-color); content: "\f170"; font-family: RosettaIcons; - color: var(--link-color); font-weight: 100; - margin-right: 5px; + margin-right: 5px } + .wtf-header { - display: flow-root; + display: flow-root } + .following-item-btn { + bottom: 43px; float: right; + height: 40px; + position: relative } + .following-item-text { - width: fit-content; - display: inline-block; - position: relative; bottom: 11px; + display: inline-block; margin-left: 8px; + position: relative; + width: fit-content } + .following-item-link:hover { - text-decoration: none; -} -.following-item-btn { - position: relative; - bottom: 43px; - height: 40px; + text-decoration: none } + .following-item-name { position: absolute; - width: 300px; + width: 300px } + .no-results { - text-align: center; + text-align: center } + .example { - font-size: 14px; color: #8899a6; + font-size: 14px } + .search-advanced-input { - width: 100%; - padding: 3px; border: 1px solid #e1e8ed; border-radius: 5px; - font-size: 16px; - font-family: var(--font); + font: 16px var(--font); + padding: 3px; + width: 100% } + #save-search { - margin-top: 0; + margin-top: 0 +} + +.tweet-self-thread-button:hover, +.tweet-translate:hover, +.center-text:hover { + text-decoration: underline } \ No newline at end of file diff --git a/layouts/tweet/style.css b/layouts/tweet/style.css index 923d75e8..15595050 100644 --- a/layouts/tweet/style.css +++ b/layouts/tweet/style.css @@ -1,918 +1,1086 @@ #loading-box { - z-index: 1000; - width: 100%; + background-color: #fff; height: 100%; - background-color: white; position: fixed; + width: 100%; + z-index: 1000 } + #loading-box-text:before { - content: "\f179"; - vertical-align: sub; - font-family: RosettaIcons; - font-size: 64px; color: #1da1f2; + content: "\f179"; + font: 64px RosettaIcons; margin-left: 20px; + vertical-align: sub } + #loading-box-container { margin: 0 auto; - width: 100%; margin-top: 270px; text-align: center; + width: 100% } a { color: var(--link-color); - text-decoration: none; -} -a:hover { - text-decoration: underline; + text-decoration: none } body { background-color: #f5f8fa !important; font-family: var(--font); - margin: 0; + margin: 0 } + #container { margin: 0 auto; - max-width: 1190px; + max-width: 1190px } .cell { box-sizing: border-box; - display: inline-block; + display: inline-block } #content { - display: flex; + display: flex } + .box { - background-color: white; - border-radius: 5px; + background-color: #fff; border: 1px solid #e1e8ed; + border-radius: 5px } + #user-banner { border-top-left-radius: 5px; border-top-right-radius: 5px; - object-fit: cover; + object-fit: cover } + #user-avatar { - margin-left: 7px; - border: 4px solid white; - margin-top: -32px; + border: 4px solid #fff; border-radius: 7px; + margin-left: 7px; + margin-top: -32px } + #user-name { - margin: 0; - left: 95px; - font-size: 22px; - position: relative; bottom: 47px; - width: fit-content; color: #292f33; -} -#user-handle { + font-size: 22px; + left: 95px; margin: 0; position: relative; + width: fit-content +} + +#user-handle { + bottom: 48px; color: #6a7d8c; font-size: 14px; font-weight: 100; left: 95px; - bottom: 48px; - width: fit-content; + margin: 0; + position: relative; + width: fit-content } + #user-stats { display: inline-flex; - padding-bottom: 7px; + padding-bottom: 7px } -.user-stat-div > h2 { + +.user-stat-div>h2 { color: #6a7d8c; font-size: 14px; font-weight: 100; - text-transform: uppercase; margin: 0 10px; + text-transform: uppercase } -.user-stat-div > h1 { - margin: 0 10px; - font-size: 20px; + +.user-stat-div>h1 { color: var(--link-color); + font-size: 20px; + margin: 0 10px } + #user-info { - height: 5px; display: block; - text-decoration: none; + height: 5px; + text-decoration: none } + #center-cell { - margin-top: 55px; + margin-top: 55px } + #left-cell { - top: 55px; - position: sticky; height: fit-content; - margin-right: 10px; margin-left: 10px; + margin-right: 10px; + position: sticky; + top: 55px } + #right-cell { - top: 55px; - position: sticky; height: fit-content; margin-left: 10px; margin-right: 10px; + position: sticky; + top: 55px } -#timeline, #retweets, #retweets_with_comments, #likes { - width: 560px; + +#timeline, +#retweets, +#retweets_with_comments, +#likes { margin-bottom: 10px; + width: 560px } -#retweets, #retweets_with_comments, #likes { - padding: 10px; + +#retweets, +#retweets_with_comments, +#likes { + padding: 10px } + .tweet { + background-color: #fff; border-left: 1px solid #e1e8ed; border-right: 1px solid #e1e8ed; border-top: 1px solid #e1e8ed; - background-color: white; - padding: 10px; min-height: 75px; + padding: 10px } + .tweet:not(.tweet-main):hover { - cursor: pointer; background-color: #f5f8fa; + cursor: pointer } + .tweet-avatar-link { float: left; - margin-right: 10px; -} -.tweet-avatar { - border-radius: 5px; -} -.tweet-avatar-quote { - border-radius: 5px; + margin-right: 10px } -.tweet-header, .tweet-header-quote { - display: contents; + +.tweet-header, +.tweet-header-quote { + display: contents } -.tweet-header-info, .tweet-header-info-quote { + +.tweet-header-info, +.tweet-header-info-quote { + bottom: 3px; display: inline; - text-decoration: none; position: relative; - bottom: 3px; + text-decoration: none } -.tweet-header-info-quote { bottom: 8px !important } -.tweet-header-info:hover { - text-decoration: underline; + +.tweet-header-info-quote { + bottom: 8px !important } + .tweet-header-name:hover { - color: var(--link-color); + color: var(--link-color) } -.tweet-header-name, .tweet-header-name-quote { - display: inline; - font-weight: bold; + +.tweet-header-name, +.tweet-header-name-quote { color: #292f33; + display: inline; font-size: 14px; + font-weight: 700 } -.tweet-header-handle, .tweet-time, .tweet-header-handle-quote, .tweet-time-quote { - display: inline; + +.tweet-header-handle, +.tweet-time, +.tweet-header-handle-quote, +.tweet-time-quote { + color: #8899a6; direction: ltr; - unicode-bidi: embed; + display: inline; font-size: 13px; - color: #8899a6; text-decoration: none; + unicode-bidi: embed } + .tweet-time { bottom: 3px; - position: relative; + position: relative } + .tweet-time-quote { bottom: 8px; - position: relative; + position: relative } .tweet-time::before { - content: "\00b7"; - margin-right: 3px; color: #8899a6 !important; + content: "\00b7"; + margin-right: 3px } + .tweet-time:hover { color: var(--link-color); - text-decoration: underline; + text-decoration: underline } -.tweet-body, .tweet-interact, .tweet-body-text-quote { - display: flow-root; + +.tweet-body, +.tweet-interact, +.tweet-body-text-quote { + display: flow-root } + .tweet-body-quote { - background-color: white; + background-color: #fff; + border: 1px solid #e1e8ed; + border-radius: 5px; + display: block; + margin: 10px; + padding: 10px; + position: relative; + right: 10px; + text-decoration: none } + .tweet-body-quote:hover { background-color: #f5f8fa; - text-decoration: none; + text-decoration: none } + .tweet-body-text-long { font-size: 16px; - line-height: 22px; font-weight: 400; + line-height: 22px } + .tweet-body-text-short { font-size: 26px; - line-height: 32px; font-weight: 300; letter-spacing: .01em; + line-height: 32px } + .tweet-body-text a { - text-decoration: none; -} -.tweet-body-text a:hover { - text-decoration: underline; + text-decoration: none } + .tweet-interact { margin-top: 10px; - user-select: none; + user-select: none } + .tweet-interact span { color: #8899a6; + cursor: pointer; display: inline-block; font-size: 12px; - font-weight: bold; + font-weight: 700; margin-left: 6px; + margin-right: 20px; position: relative; - top: -2px; text-decoration: none; - cursor: pointer; - margin-right: 20px; + top: -2px } + .tweet-interact span:before { - font-family: RosettaIcons; - font-weight: normal; - font-style: normal; - font-size: 16px; -webkit-font-smoothing: antialiased; - margin-right: 10px; color: #ccd6dd; cursor: pointer; - vertical-align: sub; + font: 400 16px RosettaIcons; + margin-right: 10px; + vertical-align: sub } + .tweet-interact-reply:before { - content: "\f151"; -} -.tweet-interact-retweet:before { - content: "\f152"; + content: "\f151" } + .tweet-interact-favorite:before { - content: var(--favorite-icon-content); + content: var(--favorite-icon-content) } + .tweet-interact-more:before { - content: "\f150"; + content: "\f150" } -.tweet-interact-reply-clicked, .tweet-interact-reply-clicked:before, .tweet-interact-reply:hover:before, .tweet-interact-reply:hover, .tweet-interact-more:hover:before { - color: #3300FF !important; -} -.tweet-interact-retweeted, .tweet-interact-retweeted:before, .tweet-interact-retweet:hover:before, .tweet-interact-retweet:hover { - color: #5c913b !important; -} -.tweet-interact-favorited, .tweet-interact-favorited:before, .tweet-interact-favorite:hover:before, .tweet-interact-favorite:hover { - color: var(--favorite-icon-color) !important; + +.tweet-interact-favorited, +.tweet-interact-favorited:before, +.tweet-interact-favorite:hover:before, +.tweet-interact-favorite:hover { + color: var(--favorite-icon-color) !important } -.tweet-reply-text, .tweet-quote-text { + +.tweet-reply-text, +.tweet-quote-text { border: 1px solid #e1e8ed; - resize: none; border-radius: 5px; - width: 346px; - padding: 5px; - font-family: var(--font); display: inline-block; + font-family: var(--font); height: 30px; + padding: 5px; + resize: none; + width: 346px } -.tweet-reply-text:focus, .tweet-quote-text:focus { - outline: none; + +.tweet-reply-text:focus, +.tweet-quote-text:focus { + outline: none } -.tweet-reply-button, .tweet-quote-button { - position: relative; + +.tweet-reply-button, +.tweet-quote-button { bottom: 16px; height: 42px; + position: relative } + .nice-button { - color: #292f33; background-color: #f5f8fa; - background-image: linear-gradient(#fff,#f5f8fa); + background-image: linear-gradient(#fff, #f5f8fa); background-repeat: no-repeat; border: 1px solid #e1e8ed; border-radius: 4px; + color: #292f33; color: #66757f; cursor: pointer; - font-size: 14px; - font-weight: bold; - line-height: normal; - padding: 8px 16px; - font-family: var(--font); + font: 700 14px/normal var(--font); + padding: 8px 16px } + .nice-button:hover:not([disabled]) { - color: #292f33; - text-decoration: none; + -ms-filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); background-color: #e1e8ed; - background-image: linear-gradient(#fff,#e1e8ed); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"; + background-image: linear-gradient(#fff, #e1e8ed); border-color: #e1e8ed; + color: #292f33; + text-decoration: none } + .nice-button:disabled { color: lightgray !important; - cursor: not-allowed; + cursor: not-allowed } + .nice-button:disabled:before { - color: lightgray !important; + color: lightgray !important } + .tweet-top { - margin-left: 35px; - margin-bottom: 7px; font-size: 13px; + margin-bottom: 7px; + margin-left: 35px } + .tweet-top-icon { font-family: RosettaIcons; margin-right: 10px; - vertical-align: text-bottom; + vertical-align: text-bottom } -.tweet-top-icon, .tweet-top-text { - display: inline-block; + +.tweet-top-icon, +.tweet-top-text { color: #8899a6; + display: inline-block } + .tweet-top-text a { color: #8899a6; - text-decoration: none; + text-decoration: none } + .tweet-top-text a:hover { color: var(--link-color) !important; - text-decoration: underline; + text-decoration: underline } -.tweet-interact-retweet-menu, .tweet-interact-more-menu { - position: absolute; - background-color: white; + +.tweet-interact-retweet-menu, +.tweet-interact-more-menu { + background-color: #fff; border: 1px solid #8899a6; border-radius: 5px; - z-index: 5; + position: absolute; + z-index: 5 } + .tweet-interact-more-menu { - margin-left: 100px; + margin-left: 100px } -.tweet-reply-cancel:hover, .tweet-quote-cancel:hover, .tweet-reply-upload:hover, .tweet-quote-upload:hover { - text-decoration: underline; + +.tweet-reply-cancel:hover, +.tweet-quote-cancel:hover, +.tweet-reply-upload:hover, +.tweet-quote-upload:hover { cursor: pointer; + text-decoration: underline } -.tweet-body-quote { - display: block; - border-radius: 5px; - border: 1px solid #e1e8ed; - padding: 10px; - margin: 10px; - text-decoration: none; - position: relative; - right: 10px; -} + .tweet-media { - max-width: 500px; display: block; + max-width: 500px; position: relative; - right: 5px; + right: 5px } + .tweet-media img { - cursor: zoom-in; + cursor: zoom-in } -.tweet-media-element, .new-tweet-media-img { - margin: 5px; - border-radius: 7px; - object-fit: cover; + +.tweet-media-element, +.new-tweet-media-img { block-size: auto; border: 1px solid #e1e8ed; + border-radius: 7px; + margin: 5px; + object-fit: cover } + .tweet-media video { - block-size: auto; + block-size: auto } + .tweet-media-element-four { - max-width: 100px; max-height: 150px; + max-width: 100px } + .tweet-media-element-three { - max-width: 150px; max-height: 250px; + max-width: 150px } + .tweet-media-element-two { - max-width: 200px; max-height: 400px; + max-width: 200px } + .tweet-media-element-one { - max-width: 450px; max-height: 500px; + max-width: 450px } + .center-text { - background-color: white; - text-align: center; - margin-bottom: 10px; - color: #8899a6; + background-color: #fff; border: 1px solid #e1e8ed; - font-size: 14px; - padding: 10px; border-radius: 5px; + color: #8899a6; cursor: pointer; + font-size: 14px; + margin-bottom: 10px; + padding: 10px; + text-align: center } -.center-text:hover { - text-decoration: underline; -} -.tweet-interact-retweet-menu span, .tweet-interact-more-menu span { - margin-right: 5px !important; + +.tweet-interact-retweet-menu span, +.tweet-interact-more-menu span { cursor: pointer; + margin-right: 5px !important } -.tweet-interact-retweet-menu span:hover { - color: #5c913b !important; -} -.tweet-interact-more-menu span:hover { - color: #3300FF !important; -} -.tweet-interact-retweet-menu span:before, .tweet-interact-more-menu span:before { + +.tweet-interact-retweet-menu span:before, +.tweet-interact-more-menu span:before { color: #8899a6; - margin-right: 5px !important; -} -.tweet-interact-retweet-menu-retweet:before { - content: "\f152"; -} -.tweet-interact-retweet-menu-quote:before { - content: "\f204"; + margin-right: 5px !important } + .tweet-interact-more-menu-copy:before { - content: "\f203"; -} -.tweet-interact-more-menu-embed:before { - content: "\f204"; + content: "\f203" } + .tweet-interact-more-menu-share:before { - content: "\f185"; + content: "\f185" } + .tweet-interact-more-menu-analytics:before { - content: "\f200"; + content: "\f200" } + .tweet-interact-more-menu-refresh:before { - content: "\f303"; + content: "\f303" } + .tweet-interact-more-menu-download:before { - content: "\f186"; + content: "\f186" } + .tweet-interact-more-menu-download-gif:before { - content: "\f309"; + content: "\f309" } + .tweet-interact-more-menu-delete:before { - content: "\f154"; + content: "\f154" } + .tweet-interact-more-menu-follow:before { - content: "\f056"; + content: "\f056" } + .tweet-media-element-censor { - filter: blur(20px); - -webkit-filter: blur(20px); -moz-filter: blur(20px); + -webkit-filter: blur(20px); cursor: pointer; - transform: scale(1.03); + filter: blur(20px); + transform: scale(1.03) } + #wtf { padding: 10px; - width: 250px; + width: 250px } -#wtf h1, #trends h1, .cool-header { - margin: 0; + +#wtf h1, +#trends h1, +.cool-header { + color: #66757f; display: inline-block; font-size: 22px; - color: #66757f; font-weight: 300; + margin: 0 } + .cool-header { - margin-bottom: 10px; + margin-bottom: 10px } -#wtf-refresh, #wtf-viewall { + +#wtf-refresh, +#wtf-viewall { color: #8899a6; - font-size: 12px; - text-decoration: none; cursor: pointer; + font-size: 12px; + text-decoration: none +} + +a:hover, +.tweet-header-info:hover, +.tweet-body-text a:hover, +.center-text:hover, +#wtf-refresh:hover, +#wtf-viewall:hover { + text-decoration: underline } -#wtf-refresh:hover, #wtf-viewall:hover { - text-decoration: underline; + +.tweet-avatar, +.tweet-avatar-quote { + border-radius: 5px +} + +.tweet-interact-retweet:before, +.tweet-interact-retweet-menu-retweet:before { + content: "\f152" +} + +.tweet-interact-reply-clicked, +.tweet-interact-reply-clicked:before, +.tweet-interact-reply:hover:before, +.tweet-interact-reply:hover, +.tweet-interact-more:hover:before, +.tweet-interact-more-menu span:hover { + color: #30F !important +} + +.tweet-interact-retweeted, +.tweet-interact-retweeted:before, +.tweet-interact-retweet:hover:before, +.tweet-interact-retweet:hover, +.tweet-interact-retweet-menu span:hover { + color: #5c913b !important +} + +.tweet-interact-retweet-menu-quote:before, +.tweet-interact-more-menu-embed:before { + content: "\f204" } @media screen and (max-width: 1195px) { - #wtf, #about { - display: none; + + #wtf, + #about { + display: none } } + .wtf-user { display: inline-block; - margin-bottom: 5px; + margin-bottom: 5px } + .wtf-user-link { - text-decoration: none !important; + text-decoration: none !important } + .wtf-user-name { display: inline-block; - overflow: hidden; margin-right: 5px; + overflow: hidden } + .wtf-user-handle { - overflow: hidden; - width: 88px; - height: 17px; display: inline-block; + height: 17px; + overflow: hidden; + width: 88px } -.follow, .following { + +.follow, +.following { color: #292f33; - padding: 4px 12px 4px 12px !important; + padding: 4px 12px !important } + .follow:before { color: #8899a6; - font-family: RosettaIcons; content: "\f175"; + font-family: RosettaIcons; margin-right: 7px; - vertical-align: text-bottom; + vertical-align: text-bottom } + .following:before { color: var(--link-color); - font-family: RosettaIcons; content: "\f176"; + font-family: RosettaIcons; margin-right: 7px; - vertical-align: text-bottom; + vertical-align: text-bottom } + .tweet-self-thread-button { - text-decoration: none; font-size: 13px; margin-top: 2px; + text-decoration: none } -.tweet-self-thread-button:hover { - text-decoration: underline; -} -.tweet-no-top{ - border-top: none !important; + +.tweet-no-top { + border-top: none !important } + .tweet-self-thread-line { - position: absolute; - width: 2px; - height: 52px; background-color: #e1e8ed; + height: 52px; margin-left: -34px; - z-index: 1; + position: absolute; + width: 2px; + z-index: 1 } + .tweet-self-thread-line-dots { - z-index: 2; - position: absolute; - width: 12px; - height: 2px; - border: 2px white solid; + border: 2px #fff solid; display: unset; + height: 2px; margin-left: -41px; margin-top: 2px; + position: absolute; + width: 12px; + z-index: 2 } + .tweet:hover .tweet-self-thread-line-dots { - border: 2px #f5f8fa solid !important; + border: 2px #f5f8fa solid !important } + .user-verified::after { - content: "\f099"; color: #55acee; + content: "\f099"; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + .user-protected::after { - content: "\f096"; color: #ddd22b; + content: "\f096"; font-family: RosettaIcons; - margin-left: 5px; + margin-left: 5px } + #about { - margin-top: 5px; - padding: 10px; - font-size: 12px; color: #8899a6; + font-size: 12px; + margin-top: 5px; + padding: 10px } -.about-links a, .about-links span { + +.about-links a, +.about-links span { color: #8899a6; - margin-right: 8px; + margin-right: 8px } #trends { margin-top: 10px; - padding: 10px; + padding: 10px } + .trend { - margin-top: 10px; + margin-top: 10px } + .trend-description { - font-size: 14px; color: #8899a6; + font-size: 14px } + .emoji { - width: 16px; height: 16px; - vertical-align: bottom; margin-left: 2px; margin-right: 2px; + vertical-align: bottom; + width: 16px } + .tweet-body-text-short .emoji { - width: 26px !important; height: 26px !important; vertical-align: text-top !important; + width: 26px !important } + .tweet-body-text-long .emoji { - vertical-align: text-bottom !important; + vertical-align: text-bottom !important } + #user-name .emoji { - width: 26px !important; height: 26px !important; + width: 26px !important } + #new-tweets { + background-color: #f5f8fa; border-bottom: none !important; border-radius: 0 !important; - margin-bottom: 0 !important; - padding: 10px; color: #66757f; - background-color: #f5f8fa; + margin-bottom: 0 !important; + padding: 10px } + #new-tweet-avatar { - vertical-align: top; + vertical-align: top } + #new-tweet-text { border: 1px solid #e1e8ed; - resize: none; border-radius: 3px; - width: 450px; - padding: 5px; - font-family: var(--font); display: inline-block; + font: 18px var(--font); height: 23px; - font-size: 18px; + padding: 5px; padding-right: 40px; + resize: none; scrollbar-width: thin; + width: 450px } + #new-tweet-text::-webkit-scrollbar { - width: 2px; + width: 2px } + #new-tweet-text:focus { - outline: none; + outline: none } + .new-tweet-text-focused { - height: 100px !important; + height: 100px !important } + #new-tweet { + background-color: rgba(255, 255, 255, 0.92); border-bottom: none !important; - border-top: none !important; border-radius: 0 !important; - background-color: rgba(255, 255, 255, 0.92); + border-top: none !important; padding: 10px; - width: 538px; + width: 538px } + #new-tweet-container { - background-color: var(--link-color); + background-color: var(--link-color) } + #new-tweet-media-div { + bottom: 36px; + cursor: pointer; float: right; position: relative; - cursor: pointer; - bottom: 36px; - right: 15px; + right: 15px } + .new-tweet-media-div-focused { - bottom: 112px !important; + bottom: 112px !important } + #new-tweet-media:before { - content: "\f159"; - font-family: RosettaIcons; color: var(--link-color); - font-size: 20px; + content: "\f159"; + font: 20px RosettaIcons } + #new-tweet-button { float: right; - margin-top: 5px; left: 14px; - position: relative; + margin-top: 5px; + position: relative } + #new-tweet-char { color: #8899a6; font-size: 12px; - position: absolute; margin-left: -46px; margin-top: 38px; - width: 43px; + position: absolute; text-align: center; + width: 43px } -.tweet-reply-char, .tweet-quote-char { + +.tweet-reply-char, +.tweet-quote-char { color: #8899a6; font-size: 12px; padding: 3px; - top: -10px; position: relative; + top: -10px } -#new-tweet-button:before, .tweet-reply-button:before, .tweet-quote-button:before { - content: "\f029"; - font-family: RosettaIcons; + +#new-tweet-button:before, +.tweet-reply-button:before, +.tweet-quote-button:before { color: var(--link-color); - font-size: 14px; + content: "\f029"; + font: 14px RosettaIcons; margin-right: 5px; - vertical-align: bottom; + vertical-align: bottom } + #new-tweet-media-c { - width: auto; - margin: 0; display: contents; + margin: 0; + width: auto } + #new-tweet-media-cc { - left: 34px; - position: relative; display: inline; + left: 34px; + position: relative } + .new-tweet-media-img { - max-width: 75px; - max-height: 100px; cursor: zoom-in; + max-height: 100px; + max-width: 75px } + .new-tweet-media-img-progress { - position: absolute; - display: block; color: gray; + display: block; font-size: 10px; margin-left: 6px; + position: absolute } + .new-tweet-media-img-remove { - position: absolute; - margin-left: -24px; - margin-top: 8px; - height: 14px; - padding: 0px 3px 3px 3px; - background-color: rgba(0,0,0, 0.5); + background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; cursor: pointer; + height: 14px; + margin-left: -24px; + margin-top: 8px; + padding: 0 3px 3px; + position: absolute } + .new-tweet-media-img-remove:before { + color: #fff; content: "\f045"; - font-family: RosettaIcons; - margin-bottom: 2px; - color: white; - font-size: 13px; + font: 13px RosettaIcons; + margin-bottom: 2px } + .new-tweet-media-img-alt { - position: absolute; - background: rgba(0,0,0, 0.5); - color: white; - padding: 1px 4px; + background: rgba(0, 0, 0, 0.5); + border-radius: 5px; + color: #fff; + cursor: pointer; font-size: 12px; font-weight: 600; - border-radius: 5px; - margin-top: 8px; margin-left: -57px; + margin-top: 8px; + padding: 1px 4px; padding-bottom: 2px; - cursor: pointer; + position: absolute } + .new-tweet-media-img-div { - width: fit-content; display: inline-block; + width: fit-content } + #donate-button { - transition: 1s; + transition: 1s } + .tweet-translate { color: var(--link-color); - font-size: 13px; cursor: pointer; - margin-top: 2px; -} -.tweet-translate:hover { - text-decoration: underline; + font-size: 13px; + margin-top: 2px } + .tweet-interact-more-menu hr { border-top: #ccd6dd; - margin: 2px; + margin: 2px } + .tweet-self-thread-div { - position: relative; bottom: 35px; + position: relative } + .tweet-date { color: #8899a6; - font-size: 14px; + font-size: 14px } + .tweet-footer-stat { display: grid; - text-decoration: none; -} -.tweet-footer-stat:hover { - text-decoration: none; + text-decoration: none } + .tweet-footer { - margin-top: 10px; - margin-bottom: 10px; border-bottom: 1px solid #e1e8ed; border-top: 1px solid #e1e8ed; - width: 100%; display: inline-block; + margin-bottom: 10px; + margin-top: 10px; + width: 100% } + .tweet-footer-stats { - display: inline-flex; - padding-bottom: 5px; border-right: 1px solid #e1e8ed; + display: inline-flex; float: left; + padding-bottom: 5px } + .tweet-footer-favorites { display: inline-block; + display: inline-flex; + float: left; + margin-left: 10px; + margin-top: 12px } + .tweet-footer-stat-text { - float: left; - padding: 7px 28px 0 0; color: #8899a6; + float: left; font-size: 10px; line-height: 16px; - text-transform: uppercase; + padding: 7px 28px 0 0; + text-transform: uppercase } + .tweet-footer-stat:hover .tweet-footer-stat-text { - color: var(--link-color); + color: var(--link-color) } + .tweet-footer-stat-count { + color: var(--link-color); font-size: 18px; font-weight: 500; - line-height: 20px; - color: var(--link-color); + line-height: 20px } + .tweet-time[hidden] { - display: none !important; + display: none !important } + .tweet-header-info-main { display: inline-grid !important; + width: fit-content } -.tweet-header-info-main:hover { - text-decoration: none; -} -.tweet-header-info-main > b { - padding-top: 2px; - margin-top: 3px; + +.tweet-header-info-main>b { font-size: 18px; line-height: 1.25; + margin-top: 3px; + padding-top: 2px } + .tweet-body-main { display: inline-block !important; - margin-top: 10px; + margin-top: 10px } + .tweet-main { - padding: 20px; -} -.tweet-footer-favorites { - display: inline-flex; - float: left; - margin-top: 12px; - margin-left: 10px; + padding: 20px } + .tweet-footer-favorites-img { - margin-right: 5px; border-radius: 5px; + margin-right: 5px } -.tweet-header-info-main { - width: fit-content; -} + .tweet-header-follow { float: right; - padding: 9px 12px 9px 12px !important; margin-top: 2px; + padding: 9px 12px !important } + .following-item-btn { + bottom: 52px; float: right; + height: 40px; + position: relative } + .following-item-text { - width: fit-content; - display: inline-block; - position: relative; bottom: 14px; + display: inline-block; margin-left: 8px; + position: relative; + width: fit-content } -.following-item-link:hover { - text-decoration: none; -} + .following-item { - margin-bottom: 5px; + margin-bottom: 5px } -.following-item-btn { - position: relative; - bottom: 52px; - height: 40px; -} -#following-list, #followers-list { - padding: 10px; + +#following-list, +#followers-list { + padding: 10px } + .following-item-name { position: absolute; - width: 300px; + width: 300px } + #new-tweet-user-search { - position: absolute; - background-color: white; - padding: 5px; - z-index: 5; + background-color: #fff; color: #292f33; + padding: 5px; + position: absolute; + z-index: 5 } + #new-tweet-user-search span { - cursor: pointer; border-radius: 5px; - padding: 2px; + cursor: pointer; + padding: 2px } -#new-tweet-user-search span:hover, .search-result-item-active { + +#new-tweet-user-search span:hover, +.search-result-item-active { background-color: var(--link-color) !important; - color: white !important; + color: #fff !important } + .wtf-header { - display: flow-root; + display: flow-root +} + +.tweet-self-thread-button:hover, +.tweet-translate:hover { + text-decoration: underline +} + +.tweet-footer-stat:hover, +.tweet-header-info-main:hover, +.following-item-link:hover { + text-decoration: none } \ No newline at end of file diff --git a/manifest.json b/manifest.json index 9bcaadab..d69c13dd 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "Old Twitter Layout (2022)", "description": "A new extension that returns old Twitter's look.", - "version": "1.0.5", + "version": "1.0.6", "manifest_version": 3, "homepage_url": "https://github.com/dimdenGD/OldTwitter", "background": { diff --git a/scripts/apis.js b/scripts/apis.js index 602c7d9f..a751b020 100644 --- a/scripts/apis.js +++ b/scripts/apis.js @@ -314,7 +314,7 @@ API.verifyCredentials = () => { } API.getTimeline = (max_id) => { return new Promise((resolve, reject) => { - fetch(`https://api.twitter.com/1.1/statuses/home_timeline.json?count=20&include_my_retweet=1&cards_platform=Web13&include_entities=1&include_user_entities=1&include_cards=1&send_error_codes=1&tweet_mode=extended&include_ext_alt_text=true&include_reply_count=true${max_id ? `&max_id=${max_id}` : ''}`, { + fetch(`https://api.twitter.com/1.1/statuses/home_timeline.json?count=40&include_my_retweet=1&cards_platform=Web13&include_entities=1&include_user_entities=1&include_cards=1&send_error_codes=1&tweet_mode=extended&include_ext_alt_text=true&include_reply_count=true${max_id ? `&max_id=${max_id}` : ''}`, { headers: { "authorization": OLDTWITTER_CONFIG.oauth_key, "x-csrf-token": OLDTWITTER_CONFIG.csrf, @@ -333,7 +333,7 @@ API.getTimeline = (max_id) => { } API.getAlgoTimeline = cursor => { return new Promise((resolve, reject) => { - fetch(`https://twitter.com/i/api/2/timeline/home.json?${cursor ? `cursor=${cursor.replace(/\+/g, '%2B')}&` : ''}include_profile_interstitial_type=1&include_blocking=1&include_blocked_by=1&include_followed_by=1&include_want_retweets=1&include_mute_edge=1&include_can_dm=1&include_can_media_tag=1&include_ext_has_nft_avatar=1&skip_status=1&cards_platform=Web-12&include_cards=1&include_ext_alt_text=true&include_quote_count=true&include_reply_count=1&tweet_mode=extended&include_ext_collab_control=true&include_entities=true&include_user_entities=true&include_ext_media_color=true&include_ext_media_availability=true&include_ext_sensitive_media_warning=true&include_ext_trusted_friends_metadata=true&send_error_codes=true&simple_quoted_tweet=true&earned=1&count=20&lca=true&ext=mediaStats%2ChighlightedLabel%2ChasNftAvatar%2CvoiceInfo%2Cenrichments%2CsuperFollowMetadata%2CunmentionInfo%2Ccollab_control&browserNotificationPermission=default`, { + fetch(`https://twitter.com/i/api/2/timeline/home.json?${cursor ? `cursor=${cursor.replace(/\+/g, '%2B')}&` : ''}include_profile_interstitial_type=1&include_blocking=1&include_blocked_by=1&include_followed_by=1&include_want_retweets=1&include_mute_edge=1&include_can_dm=1&include_can_media_tag=1&include_ext_has_nft_avatar=1&skip_status=1&cards_platform=Web-12&include_cards=1&include_ext_alt_text=true&include_quote_count=true&include_reply_count=1&tweet_mode=extended&include_ext_collab_control=true&include_entities=true&include_user_entities=true&include_ext_media_color=true&include_ext_media_availability=true&include_ext_sensitive_media_warning=true&include_ext_trusted_friends_metadata=true&send_error_codes=true&simple_quoted_tweet=true&earned=1&count=25&lca=true&ext=mediaStats%2ChighlightedLabel%2ChasNftAvatar%2CvoiceInfo%2Cenrichments%2CsuperFollowMetadata%2CunmentionInfo%2Ccollab_control&browserNotificationPermission=default`, { headers: { "authorization": OLDTWITTER_CONFIG.public_token, "x-csrf-token": OLDTWITTER_CONFIG.csrf, @@ -1679,10 +1679,11 @@ API.getTweetLikers = (id, cursor) => { list = list.entries; resolve({ list: list.filter(e => e.entryId.startsWith('user-')).map(e => { + if(e.content.itemContent.user_results.result.__typename === "UserUnavailable") return; let user = e.content.itemContent.user_results.result; user.legacy.id_str = user.rest_id; return user.legacy; - }), + }).filter(u => u), cursor: list.find(e => e.entryId.startsWith('cursor-bottom-')).content.value }); }).catch(e => { @@ -1735,10 +1736,11 @@ API.getTweetRetweeters = (id, cursor) => { list = list.entries; resolve({ list: list.filter(e => e.entryId.startsWith('user-')).map(e => { + if(e.content.itemContent.user_results.result.__typename === "UserUnavailable") return; let user = e.content.itemContent.user_results.result; user.legacy.id_str = user.rest_id; return user.legacy; - }), + }).filter(u => u), cursor: list.find(e => e.entryId.startsWith('cursor-bottom-')).content.value }); }).catch(e => {