MediaWiki:MobileChat.css

@media screen and (max-aspect-ratio: 3/4) and (max-width: 1080px) and (min-resolution: 200dpi), (max-aspect-ratio: 3/4) and (max-width: 720px) and (min-resolution: 150dpi), (max-width: 480px) { .ChatWindow { background: transparent; width: 100%; } .ChatWindow .Chat, .ChatWindow .Rail #WikiChatList { margin-top: 40px; } .ChatWindow #ChatHeader { display: none; } .ChatWindow #WikiaPage { top: 0; bottom: 0; right: 0; left: 0; border: none; border-radius: 0; } .ChatWindow .Chat { width: 100%; position: fixed; overflow-x: hidden; } .ChatWindow .Chat .avatar { display: none; } .ChatWindow .Chat li:not(.continued) .time { float: none; display: inline; } .ChatWindow .Chat li:not(.continued) .username { display: inline; } .ChatWindow .Chat li:not(.continued) .message { display: block; } .ChatWindow .Rail { background: inherit; padding: 0; width: 100%; position: fixed; height: 40px; z-index: 100; top: 0; overflow-x: hidden; } .ChatWindow .Rail .selected { box-shadow: none; } .ChatWindow .Rail h1 { margin: 0; position: fixed; z-index: 100; width: 100%; text-align: center; } .ChatWindow .Rail .public { display: flex; justify-content: center; position: fixed; width: 100%; height: 40px; padding: 3px 13px; box-sizing: border-box; border-bottom: 1px solid hsla(0,0%,50%,0.2); } .ChatWindow .Rail .public .chevron { display: none !important; } .ChatWindow .Rail .public .wordmark { margin: auto; padding: 0; } .ChatWindow .Rail .public .splotch { top: 11px; left: 11px; right: initial; height: 15px; line-height: 16px; min-width: 10px; } .ChatWindow .Rail .public:not(.selected) { background: inherit; overflow: hidden; } .ChatWindow .Chat li { padding: 3px 3px 3px 8px; } .ChatWindow .Chat li.continued { margin-top: 10px; } .ChatWindow .Rail:hover { height: 50vh; background: inherit; } .ChatWindow .Rail:hover ~.Chat:before { background: currentColor; filter: invert(1) hue-rotate(180deg) contrast(1.25); content: ""; display: block; position: fixed; width: 100%; height: calc(50vh - 40px); z-index: 100; box-shadow: 0 10px 20px hsla(0,0%,50%,0.2), 0 6px 6px hsla(0,0%,50%,0.2); } .ChatWindow #UserStatsMenu { background: transparent; border: none; box-shadow: none; right: 0 !important; top: 0 !important; } .ChatWindow #UserStatsMenu .actions { margin-right: 5px; } .ChatWindow #UserStatsMenu .actions li, .ChatWindow #UserStatsMenu .regular-actions, .ChatWindow #UserStatsMenu .admin-actions { display: inline-block; } .ChatWindow #UserStatsMenu .actions li { padding: 5px; } .ChatWindow #UserStatsMenu .regular-actions .private { margin-right: 5px; } .ChatWindow #UserStatsMenu .actions li:hover .label { background: inherit; display: block; clear: both; position: absolute; right: 0; top: 46px; border-radius: 0 2px; box-shadow: 0 0 1px currentColor; padding: 0 4px; } .ChatWindow #UserStatsMenu .actions .message-wall, .ChatWindow #UserStatsMenu .actions .contribs, .ChatWindow #UserStatsMenu .actions .label, .ChatWindow #UserStatsMenu .actions .give-chat-mod, .ChatWindow #UserStatsMenu .actions .separator { display: none; } .ChatWindow .Rail .UserStatsMenu, .ChatWindow .Rail .User .details, .ChatWindow .UserStatsMenu .info, .ChatWindow .UserStatsMenu .info ul, .ChatWindow .UserStatsMenu .info li { display: inline !important; background: rgba(0, 0, 0, 0) !important; margin: 0; padding: 0; border: none; box-shadow: none; } .ChatWindow .Rail .UserStatsMenu, .ChatWindow .UserStatsMenu .info { font-size: 11px; height: 11px; line-height: 11px; position: static; color: inherit; } .ChatWindow .Rail .User.away .UserStatsMenu:before { content: "•"; } .ChatWindow .UserStatsMenu .info .username, .ChatWindow .UserStatsMenu .info .since, .ChatWindow .UserStatsMenu .info:after, .ChatWindow .UserStatsMenu .info > img, .ChatWindow #UserStatsMenu .edits { display: none !important; } .ChatWindow .Rail .PrivateChatList, .ChatWindow .Rail h1.private { position: relative; width: 100%; } .ChatWindow .Rail h1.private { background: transparent; border: none; text-align: left; text-indent: 4px; font-weight: bold; padding: 3px 0; } .ChatWindow .Rail:not(:hover) .PrivateChatList .unread .splotch { position: fixed; top: 13px; left: 13px; right: initial; z-index: 100; } .ChatWindow .Write { z-index: 100; width: calc(100% - 60px); position: fixed; height: 46px; } .ChatWindow .Write input, .ChatWindow .wikia-button, .ChatWindow #chatOptionsButton { display: none !important; /* hides userscript buttons */ } }