/* ============================================ MOBILE UI - DISCORD LIGHT STYLE (GLOBAL) Shared across all pages: homepage, profile, interactions, discover, messages, etc. ============================================ */ @media (max-width: 768px) { * { box-sizing: border-box; } /* ─── Base Light Theme ─── */ body { padding-top: 44px !important; margin-top: 0 !important; background-color: #e9eaed !important; background-image: none !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } a, a:hover { color: #5865f2 !important; text-decoration: none !important; } /* ─── Top Bar ─── */ .warpper_top_bar { top: 0 !important; height: 44px !important; background: #fff !important; border-bottom: 1px solid #e3e5e8 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important; position: fixed !important; z-index: 999 !important; } .inner_top_bar { height: 44px !important; line-height: 44px !important; } .warpper_top_bar a, .inner_top_bar a { color: #2e3338 !important; } #navegation, #navegation_2 { display: flex !important; } #navegation a, #navegation_2 a { color: #2e3338 !important; } #navegation a:hover, #navegation_2 a:hover { color: #060607 !important; } .nav_user li { background-image: none !important; } .nav_user li a.messages, .nav_user li a.connect, .nav_user li a.settings, .nav_user li a.hashtag, .nav_user li a.settings_2 { filter: brightness(0.3); } /* SessionNull (home deslogada): evitar duplicação do seletor de idioma */ body#sessionNull #navegation_2 { display: none !important; } body#sessionNull .warpper_top_bar .padding_class { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 44px !important; padding: 0 10px !important; } body#sessionNull .warpper_top_bar .nav-left { float: none !important; } body#sessionNull #navegation { float: none !important; } body#sessionNull #navegation ul { margin: 0 !important; padding: 0 !important; } body#sessionNull #navegation li { margin: 0 !important; } body#sessionNull #signInButton.toogle { color: #4f5660 !important; } body#sessionNull #signInButton.toogle strong { color: #2e3338 !important; font-weight: normal !important; } body#sessionNull #signInButton.session-null-signin-btn { padding: 1px 0 1px 14px !important; } /* Notification badges */ #noti_msg, #noti_connect { background: #1da1f2 !important; color: #fff !important; border-radius: 10px !important; font-size: 10px !important; min-width: 16px; text-align: center; padding: 1px 4px; } /* ─── Page / Layout ─── */ .page { padding-top: 0 !important; margin-top: 0 !important; background: transparent !important; } .layout { padding-top: 0 !important; margin-top: 0 !important; max-width: 100% !important; } .session { background: transparent !important; border-radius: 0 !important; padding-bottom: 0 !important; } .sessionClass { display: flex; flex-direction: column; padding: 0 !important; } .padding_class { padding: 0 !important; } .warpper_top_bar .padding_class { padding: 0 10px !important; } .popout { width: 90% !important; left: 5% !important; right: 5% !important; top: 54px !important; border-radius: 8px !important; } /* ─── Search Box ─── */ .formSearchResp, .sessionClass > .formSearchResp { order: 3; margin: 10px 10px 0 10px !important; padding: 0 !important; background: transparent !important; border: none !important; width: calc(100% - 20px) !important; box-sizing: border-box !important; display: block !important; float: none !important; } .formSearchResp input, .sessionClass > .formSearchResp input { border-radius: 8px !important; border: 1px solid #e3e5e8 !important; padding: 10px 14px !important; background: #f2f3f5 !important; font-size: 14px !important; box-shadow: none !important; color: #2e3338 !important; width: 100% !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; transition: border-color 0.2s ease, background 0.2s ease; } .formSearchResp input::placeholder { color: #a0a4aa !important; } .formSearchResp input:focus { border-color: #5865f2 !important; background: #fff !important; outline: none !important; } /* Block header's native search overlay */ .warpper_top_bar .formSearchResp, .inner_top_bar .formSearchResp, .global-mobile-search, #boxSearchMobile, .formSearchResp[style*="display:none"] { display: none !important; } /* ─── Grid Layout ─── */ .wrapper_grid { order: 4; width: 100% !important; margin: 0 !important; float: none !important; padding: 0 10px !important; box-sizing: border-box !important; } .grid_1 { width: 100% !important; box-sizing: border-box !important; float: none !important; background: transparent !important; border: none !important; margin-bottom: 8px !important; box-shadow: none !important; } .grid_2 { order: 5; margin-top: 0 !important; width: 100% !important; float: none !important; padding: 0 10px !important; box-sizing: border-box !important; border: none !important; background: transparent !important; box-shadow: none !important; } .container_grid { border-radius: 12px !important; border: none !important; background: #fff !important; margin: 0 0 8px 0 !important; box-sizing: border-box !important; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } .floatLeft, .floatRight { float: none !important; } /* ─── Title Bar ─── */ .titleBar { padding: 14px 16px !important; margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: #060607 !important; background: #fff !important; border-bottom: 1px solid #e3e5e8 !important; border-radius: 12px 12px 0 0 !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .statusBar { padding: 14px 16px !important; font-size: 16px !important; color: #2e3338 !important; background: #fff !important; border-bottom: 1px solid #e3e5e8 !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } /* ─── Post Form Area ─── */ #grid_post, .grid_post { padding: 14px !important; } .grid_title_small { color: #747f8d !important; font-size: 13px !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } #form_add_post { border-bottom: 1px solid #e3e5e8 !important; margin-bottom: 10px !important; } #form_add_post textarea, .post_add { border-radius: 8px !important; border: 1px solid #e3e5e8 !important; padding: 10px 12px !important; font-size: 14px !important; resize: none !important; min-height: 50px !important; background: #f2f3f5 !important; color: #2e3338 !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; width: 100% !important; box-shadow: none !important; } #form_add_post textarea:focus, .post_add:focus { border-color: #5865f2 !important; background: #fff !important; box-shadow: none !important; } #button_add, .post-user-profile { background: #5865f2 !important; color: #fff !important; border: none !important; border-radius: 4px !important; font-weight: 600 !important; padding: 6px 16px !important; font-size: 13px !important; cursor: pointer !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; text-shadow: none !important; background-image: none !important; } #button_add:hover, .post-user-profile:hover { background: #4752c4 !important; } .wrapper_media { margin-top: 8px !important; position: relative !important; } /* Upload preview: .file-btn has inline overflow:hidden from filestyle plugin. Override so the #loader_gif thumbnail is visible on mobile */ .file-btn { overflow: visible !important; } /* Message/Reply image preview */ #wrapper_preview_message, #wrapper_preview_reply { overflow: visible !important; } #container_preview_message img, #container_preview_reply img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; } #video_link, #song_link { border-radius: 8px !important; border: 1px solid #e3e5e8 !important; background: #f2f3f5 !important; color: #2e3338 !important; text-indent: 10px; font-size: 14px !important; } /* ─── Posts List ─── */ .posts { margin: 0 !important; padding: 0 !important; background: #fff !important; border-radius: 0 0 12px 12px !important; overflow: hidden; float: none !important; width: 100% !important; } .posts > li { border-bottom: 1px solid #e3e5e8 !important; border-radius: 0 !important; margin: 0 !important; background: #fff !important; width: 100% !important; } .posts > li:last-child { border-bottom: none !important; } .posts li.hoverList:hover { background: #f8f9fa !important; } /* Post content */ .paddingPost { padding: 12px 14px !important; } .detail_grid { width: 85% !important; } .detail_grid a.username, .detail_grid span.username { color: #060607 !important; font-weight: 700; font-size: 14px !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .detail_grid a.username:hover { color: #5865f2 !important; } strong.usernameClass { color: #747f8d !important; font-size: 12px !important; } .detail_grid p { color: #2e3338 !important; font-size: 14px !important; line-height: 1.45 !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .timestamp { color: #747f8d !important; font-size: 12px !important; } .timestamp:hover { color: #5865f2 !important; } /* Post actions */ .expand, .activeSpan, .reply, .favoriteIcon, .repostIcon, .trash, .trashStatus { color: #747f8d !important; font-size: 12px !important; } .expand:hover, .activeSpan:hover, .reply:hover, .favoriteIcon:hover, .repostIcon:hover, .trash:hover, .trashStatus:hover { color: #5865f2 !important; } /* Keep repost animation visible on mobile */ .repostIcon, .repost_button { overflow: visible !important; position: relative; } .repost_ico { overflow: visible !important; } .repost_ico.iconRepost.animating, .repostIcon.animating { overflow: visible !important; } /* Post images */ .posts li img { max-width: 100% !important; height: auto !important; border-radius: 8px; } /* Avatar in posts */ .avatar_user { border-radius: 50% !important; } /* ─── Following / Followers user rows ─── */ li.hoverList > span.followBtnMin ~ span.paddingPost { display: flex !important; align-items: flex-start !important; gap: 12px !important; } li.hoverList > span.followBtnMin ~ span.paddingPost > a.openModal { flex: 0 0 auto !important; line-height: 0 !important; } li.hoverList > span.followBtnMin ~ span.paddingPost > a.openModal > img.avatar_user { width: 48px !important; height: 48px !important; display: block !important; } li.hoverList > span.followBtnMin ~ span.paddingPost > span.detail_grid { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; float: none !important; } li.hoverList > span.followBtnMin ~ span.paddingPost > span.detail_grid > span { width: auto !important; float: none !important; display: block !important; } li.hoverList > span.followBtnMin ~ span.paddingPost > span.detail_grid strong.usernameClass { display: inline !important; } /* Reply area */ #form_reply_post textarea { border-radius: 8px !important; border: 1px solid #e3e5e8 !important; background: #f2f3f5 !important; color: #2e3338 !important; font-size: 14px !important; padding: 8px 12px !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } /* Repost */ .reposted { color: #747f8d !important; font-size: 12px !important; } .news_post { background: #eef0ff !important; color: #5865f2 !important; border-bottom: 1px solid #e3e5e8 !important; box-shadow: none !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; border-radius: 12px 12px 0 0 !important; } /* No results */ .notfound { color: #747f8d !important; font-size: 13px !important; border-bottom: none !important; padding: 20px 0 !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* Loading */ #container-loader { padding: 15px 0 !important; } .loading-bar { margin: 0 auto; } /* ─── Follow / Edit Buttons ─── */ .follow_button, .edit_profile_btn, .follow_button_status { background: #5865f2 !important; background-image: none !important; border: none !important; border-radius: 4px !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; text-shadow: none !important; box-shadow: none !important; transition: background 0.15s ease, transform 0.1s ease; cursor: pointer !important; padding: 5px 16px !important; } .follow_button:hover, .edit_profile_btn:hover, .follow_button_status:hover { background: #4752c4 !important; background-image: none !important; box-shadow: none !important; } .follow_button:active, .edit_profile_btn:active { transform: scale(0.96); } .follow_button.follow_active, .follow_button_status.follow_active { background: #248045 !important; background-image: none !important; color: #fff !important; text-shadow: none !important; box-shadow: none !important; } .follow_button.follow_active:hover, .follow_button_status.follow_active:hover { background: #1a6334 !important; background-image: none !important; } .unfollow_button { background: #ed4245 !important; background-image: none !important; color: #fff !important; text-shadow: none !important; } .unfollow_button:hover { background: #c93b3e !important; background-image: none !important; border: none !important; } /* ─── Who To Follow / Sidebar Cards ─── */ .whoContainer { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding-bottom: 10px !important; margin-bottom: 10px !important; border-bottom: 1px solid #e3e5e8; } .whoContainer > a.openModal { flex: 0 0 auto !important; line-height: 0 !important; } .whoContainer > a.openModal img.avatar_user { width: 50px !important; height: 50px !important; border-radius: 50% !important; display: block !important; } .whoContainer .detail_grid_right { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; padding-top: 2px !important; } .whoContainer:last-child { border-bottom: none !important; } .detail_grid_right a.username_right { color: #060607 !important; font-weight: 700; font-size: 14px !important; border-bottom-color: #e3e5e8 !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .detail_grid_right a.username_right, .detail_grid_right a.whofollow { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } /* ─── Trending ─── */ .trending li { font-size: 13px !important; color: #2e3338 !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .trending li a { color: #5865f2 !important; } /* ─── Settings List / Navigation Tabs ─── */ .settingsList { display: flex !important; overflow-x: auto; white-space: nowrap; background: #fff; padding: 0 !important; margin: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .settingsList::-webkit-scrollbar { display: none; } .settingsList li { float: none !important; display: inline-flex !important; border: none !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0; background: none !important; text-indent: 0 !important; } .settingsList li a { padding: 12px 16px !important; font-size: 14px !important; font-weight: 600 !important; color: #747f8d !important; border-bottom: 2px solid transparent; display: block; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; transition: color 0.15s ease; } .settingsList li a:hover { color: #2e3338 !important; text-decoration: none !important; } .settingsList li.active-item a { color: #060607 !important; border-bottom-color: #5865f2 !important; } .settingsList li a .arrow-right { display: none !important; } .settingsList li.lastSet { display: none !important; } /* ─── Connect Tabs (Interactions page) ─── */ .connect-tabs-sidebar { display: none !important; } .connect-tabs-mobile { display: flex !important; flex-direction: row; background: #fff !important; border-radius: 12px !important; overflow: hidden; margin: 0 0 8px 0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } .connect-tabs-mobile .connect-tab { flex: 1; text-align: center; justify-content: center; padding: 12px 8px !important; border-bottom: 2px solid transparent; border-left: none !important; border-right: none !important; font-size: 14px !important; font-weight: 600; color: #747f8d !important; background: #fff !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; transition: color 0.15s ease, border-color 0.15s ease; } .connect-tabs-mobile .connect-tab:hover { color: #2e3338 !important; text-decoration: none !important; background: #f8f9fa !important; } .connect-tabs-mobile .connect-tab.active { border-bottom-color: #5865f2 !important; border-left: none !important; background: #fff !important; color: #060607 !important; font-weight: 700; } .connect-tabs-mobile .connect-tab:last-child { border-left: 1px solid #e3e5e8 !important; } .connect-tabs-mobile .connect-tab-arrow { display: none !important; } .connect-tabs-mobile .connect-tab-text { text-align: center; } /* ─── Profile Static (sidebar) ─── */ .profile-static-card, .grid_1 > .container_grid:first-child { border-radius: 12px !important; overflow: hidden; } /* ─── Footer ─── */ .about_pages { padding: 14px 16px !important; font-size: 12px !important; color: #a0a4aa !important; background: #fff !important; border-radius: 12px !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .about_pages a { color: #a0a4aa !important; } /* ─── Twitter 2012 Nav (Discord Light) ─── */ .twitter-2012-nav { height: 44px !important; } .twitter-2012-nav .nav-left { height: 44px !important; } .twitter-2012-nav .nav-left li { height: 44px !important; background: none !important; } .twitter-2012-nav .nav-left li a { height: 44px !important; line-height: 44px !important; color: #4f5660 !important; } .twitter-2012-nav .nav-left li a:hover { color: #060607 !important; background: rgba(0,0,0,0.04) !important; } .twitter-2012-nav .nav-left li a span.nav-text { color: inherit !important; } /* Light icons for nav */ .twitter-2012-nav .nav-left li a .icon-home { background-image: url('data:image/svg+xml;utf8,') !important; } .twitter-2012-nav .nav-left li a:hover .icon-home { background-image: url('data:image/svg+xml;utf8,') !important; } .twitter-2012-nav .nav-left li a .icon-connect { background-image: url('data:image/svg+xml;utf8,') !important; } .twitter-2012-nav .nav-left li a:hover .icon-connect { background-image: url('data:image/svg+xml;utf8,') !important; } .twitter-2012-nav .nav-left li a .icon-discover { background-image: url('data:image/svg+xml;utf8,') !important; } .twitter-2012-nav .nav-left li a:hover .icon-discover { background-image: url('data:image/svg+xml;utf8,') !important; } /* Nav right items */ .twitter-2012-nav .nav-right { height: 44px !important; } .twitter-2012-nav .nav-actions { height: 44px !important; } .twitter-2012-nav .nav-actions li { height: 44px !important; } .twitter-2012-nav .nav-actions li a { height: 44px !important; line-height: 44px !important; color: #4f5660 !important; } .twitter-2012-nav .nav-actions li a:hover { color: #060607 !important; } .icon-user-silhouette { filter: brightness(0.4) !important; } .icon-messages { filter: brightness(0.4) !important; } .icon-quill { filter: brightness(0.4) !important; } .caret-down { filter: brightness(0.4) !important; } .twitter-bird { filter: brightness(0.4) !important; } /* Nav notification badges */ .notification-dot, .notification-dot-interactions { background: #1da1f2 !important; box-shadow: 0 0 6px #1da1f2, 0 0 10px #1da1f2 !important; } .count { background: #1da1f2 !important; color: #fff !important; border-radius: 10px !important; font-size: 10px !important; padding: 0 4px !important; } /* Nav center bird */ .nav-center-bird { height: 44px !important; line-height: 44px !important; } .nav-center-bird a { height: 44px !important; line-height: 44px !important; } /* Nav dropdown (profile/settings box) */ #boxLogin, .boxLogin { background: #fff !important; border: 1px solid #e3e5e8 !important; border-radius: 8px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; } .options_toogle li a { color: #2e3338 !important; font-size: 14px !important; padding: 10px 16px !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .options_toogle li a:hover { background: #5865f2 !important; color: #fff !important; background-image: none !important; } /* ─── Settings / Forms ─── */ #formSettings, #updatePass { padding: 0 16px 16px !important; } #formSettings label { width: 100% !important; text-align: left !important; font-size: 13px !important; color: #4f5660 !important; line-height: 28px !important; font-weight: 600; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } #formSettings input, #formSettings textarea { width: 100% !important; float: none !important; border-radius: 8px !important; border: 1px solid #e3e5e8 !important; background: #f2f3f5 !important; color: #2e3338 !important; padding: 10px 12px !important; font-size: 14px !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } #formSettings input:focus, #formSettings textarea:focus { border-color: #5865f2 !important; background: #fff !important; box-shadow: none !important; } .select { width: 100% !important; border-radius: 8px !important; border: 1px solid #e3e5e8 !important; background: #f2f3f5 !important; } #formSettings select { color: #2e3338 !important; background: transparent !important; font-size: 14px !important; } #editProfile, #save_thumb, #buttonUpdatePass { background: #5865f2 !important; background-image: none !important; border: none !important; border-radius: 4px !important; color: #fff !important; font-weight: 600 !important; padding: 8px 24px !important; font-size: 14px !important; text-shadow: none !important; cursor: pointer; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } #editProfile:hover, #save_thumb:hover, #buttonUpdatePass:hover { background: #4752c4 !important; background-image: none !important; } .containerForm, .container-forms { padding: 14px 16px !important; border-bottom: 1px solid #e3e5e8 !important; } .container-forms img { border-radius: 50% !important; } .labelAvatar, .label_cover { border-radius: 8px !important; } .error-update { color: #ed4245 !important; } .delete-account { color: #ed4245 !important; } #updatePass label { color: #4f5660 !important; font-weight: 600; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } #updatePass input { width: 100% !important; border-radius: 8px !important; border: 1px solid #e3e5e8 !important; background: #f2f3f5 !important; color: #2e3338 !important; font-size: 14px !important; } /* ─── Profile Static Sidebar ─── */ .profile_static_img { border-radius: 50% !important; } /* ─── Messages ─── */ #send_msg_profile { min-width: auto !important; width: 100% !important; } #send_msg_profile textarea { border-radius: 8px !important; border: 1px solid #e3e5e8 !important; background: #f2f3f5 !important; color: #2e3338 !important; font-size: 14px !important; padding: 10px 12px !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; width: 100% !important; } /* ─── Interaction Icons ─── */ .ico_interactions { border-radius: 4px !important; } .ico_interaction_reply { background-color: #4f5660 !important; } .ico_interaction_follow { background-color: #5865f2 !important; } .ico_interaction_favorite { background-color: #ed4245 !important; } .ico_interaction_reposted { background-color: #248045 !important; } /* ─── Hide unnecessary on mobile ─── */ .signup-profile-2012 { display: none !important; } .menu-profile-2012 { display: none !important; } .filterRepliesBar { display: none !important; } .quick_search { display: none !important; } #topcontrol, .goTop { display: none !important; } /* ─── Modals / Dialogs ─── */ .ui-dialog { border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; width: 90% !important; left: 5% !important; } .ui-dialog .ui-dialog-titlebar { background: #f2f3f5 !important; border-bottom: 1px solid #e3e5e8 !important; border-radius: 12px 12px 0 0 !important; } .ui-dialog .ui-dialog-title { color: #060607 !important; } .ui-dialog .ui-dialog-content { background: #fff !important; border-top: none !important; border-radius: 0 0 12px 12px !important; } /* ─── Colorbox overrides ─── */ #cboxOverlay { background: rgba(0,0,0,0.7) !important; } #cboxLoadedContent img { border-radius: 8px; } /* ─── Messages styling ─── */ .posts li.msg_id_user { width: 80% !important; } /* ─── Profile Summary Popout ─── */ #container_popout { background: rgba(0,0,0,0.5) !important; opacity: 1 !important; } .popoutUser { background: #fff !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important; width: 92% !important; max-width: 400px !important; top: 10px !important; left: 50% !important; transform: translateX(-50%) !important; overflow: hidden !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; text-align: left !important; } .wrap_popout { overflow: hidden; } /* Title bar */ .title_popout { background: #fff !important; border-bottom: 1px solid #e3e5e8 !important; box-shadow: none !important; height: 44px !important; display: flex !important; align-items: center; justify-content: center; position: relative; } .textPopout { color: #060607 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 44px !important; text-align: center !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .close_popout { width: 28px !important; height: 28px !important; margin-top: 0 !important; top: 8px !important; right: 10px !important; opacity: 0.5 !important; border-radius: 50%; background-size: 14px !important; background-position: center !important; transition: opacity 0.15s ease; } .close_popout:hover { opacity: 1 !important; background-color: #f2f3f5; } /* Cover - avatar lives inside this div */ .cover_popout { height: 110px !important; background-size: cover !important; background-position: center !important; position: relative !important; float: none !important; width: 100% !important; border-radius: 0 !important; image-rendering: -webkit-optimize-contrast !important; image-rendering: crisp-edges !important; } /* Profile cover quality */ .cover_user { image-rendering: -webkit-optimize-contrast !important; image-rendering: crisp-edges !important; -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; } /* Avatar (img inside .cover_popout, absolutely positioned) */ .avatarPopout { border: 4px solid #fff !important; border-radius: 50% !important; width: 72px !important; height: 72px !important; padding: 0 !important; background: #fff !important; position: absolute !important; bottom: -36px !important; left: 16px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; z-index: 2 !important; } /* Details wrapper */ .details_user { float: none !important; width: 100% !important; padding-bottom: 0 !important; } /* Name area - needs top padding to clear the avatar overlap */ .name_user { padding: 44px 16px 10px 16px !important; text-align: left !important; overflow: visible !important; } .username_popout { padding-left: 0 !important; float: none !important; display: block !important; } .h1_title { display: inline !important; } .h1_title a { color: #060607 !important; font-size: 18px !important; font-weight: 800 !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .h1_title a:hover { color: #5865f2 !important; } .username_popout strong { display: block !important; color: #747f8d !important; font-size: 14px !important; font-weight: 400 !important; margin-top: 2px; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .username_popout .isFollow { display: inline-block; background: #f2f3f5; color: #747f8d; font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-left: 4px; font-weight: 500; vertical-align: middle; } /* Bio */ .desc_popout { border-top: 1px solid #e3e5e8 !important; margin: 0 16px !important; padding: 10px 0 !important; font-size: 14px !important; color: #2e3338 !important; line-height: 1.45 !important; font-weight: 400 !important; float: none !important; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .desc_popout a { color: #5865f2 !important; } .bio_popout { padding: 0 !important; word-wrap: break-word; } /* Stats - the