MediaWiki:ChatSearchbar.css

/** * * @title           ChatSearchbar * @description    Search bar for FANDOM Chat. * @author         M D N S * @author          Speedit  * @version        1.2.0 * @license        CC-BY-SA 3.0 * @notes          Dependency of main ChatSearchbar script. * */ /** * @section        Search wrapper styling * @element        #searchInputWrapper */ .ChatWindow .chat-toolbar.wds-button-group #searchInputWrapper, .ChatWindow .chat-toolbar.wds-button-group #searchInputWrapper:hover { box-sizing: border-box; height: 100%; padding: 0 0 0 9px; } /** * @section         Search wrapper styling * @element        #searchInputWrapper */ .ChatWindow #searchInputWrapper .wds-global-navigation__search-label, .ChatWindow #searchInputWrapper .wds-global-navigation__search-input { background: none; } .ChatWindow #searchInputWrapper .wds-global-navigation__search-label-icon:hover { color: inherit; opacity: 0.5; transition: opacity .3s; } /** * @section         Search input styling * @element        .wds-global-navigation__search-input */ .ChatWindow #searchInputWrapper .wds-global-navigation__search-input { color: inherit; } @media screen and (min-width: 500px) { .ChatWindow #searchInputWrapper .wds-global-navigation__search-input { padding: 3px 4px; position: relative; text-overflow: ellipsis; top: auto; } } .ChatWindow .private[style="display: block;"] + .chat-toolbar #searchInputWrapper .wds-global-navigation__search-input { position: absolute; } .ChatWindow #searchInputWrapper .wds-global-navigation__search-input::-moz-placeholder { color: inherit; } .ChatWindow #searchInputWrapper .wds-global-navigation__search-input:-ms-input-placeholder { color: inherit; } .ChatWindow #searchInputWrapper .wds-global-navigation__search-input::-webkit-input-placeholder { color: inherit; } .ChatWindow #searchInputWrapper .wds-global-navigation__search-input::placeholder { color: inherit; } /** * @section         Search button styling * @element        .wds-global-navigation__search-close * @element        .wds-global-navigation__search-submit */ .ChatWindow #searchInputWrapper .wds-global-navigation__search-close, .ChatWindow #searchInputWrapper .wds-global-navigation__search-submit { border: none !important; max-width: 0; } .ChatWindow.wds-search-is-active #searchInputWrapper .wds-global-navigation__search-close { height: 100%; max-width: 24px; opacity: 1; padding-right: 8px; transition-delay: 150ms; } .ChatWindow.wds-search-is-active #searchInputWrapper .wds-global-navigation__search-submit { height: 100%; max-width: 100%; padding: 0 9px; transition: background-color 0.3s, border-color 0.3s, color 0.3s, max-width 50ms 150ms, opacity 0.3s, padding 50ms 150ms; }