https://db.seven-sages-of-rome.org/index.php?action=history&feed=atom&title=MediaWiki%3ASearch.css 2026-05-02T00:16:53Z Revision history for this page on the wiki MediaWiki 1.43.6 https://db.seven-sages-of-rome.org/index.php?title=MediaWiki:Search.css&diff=14370&oldid=prev 2026-01-23T12:19:16Z

<p>Created page with &quot;<span class="autocomment">Modern Light Search Bar Styling: </span> #p-search.p-search { margin: 0; } #searchform.mw-search { width: 100%; max-width: 400px; } #searchform .input-group { position: relative; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03); transition: box-shadow 0.15s ease-in-out; } #searchform .input-group:focus-within { box-shadow: 0 0 0 3px rgb(0 0 0 / 0.05); } #searchInput.form-control { border: 1px soli...&quot;</p> <p><b>New page</b></p><div>/* Modern Light Search Bar Styling */<br /> #p-search.p-search {<br /> margin: 0;<br /> }<br /> <br /> #searchform.mw-search {<br /> width: 100%;<br /> max-width: 400px;<br /> }<br /> <br /> #searchform .input-group {<br /> position: relative;<br /> border-radius: 0.5rem;<br /> overflow: hidden;<br /> box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);<br /> transition: box-shadow 0.15s ease-in-out;<br /> }<br /> <br /> #searchform .input-group:focus-within {<br /> box-shadow: 0 0 0 3px rgb(0 0 0 / 0.05);<br /> }<br /> <br /> #searchInput.form-control {<br /> border: 1px solid hsl(240 5.9% 93%);<br /> background: hsl(0 0% 100%);<br /> color: hsl(240 10% 3.9%);<br /> font-size: 14px;<br /> padding: 0.625rem 1rem;<br /> height: auto;<br /> border-radius: 0.5rem;<br /> border-top-right-radius: 0;<br /> border-bottom-right-radius: 0;<br /> border-right: none;<br /> transition: all 0.15s ease-in-out;<br /> }<br /> <br /> #searchInput.form-control:focus {<br /> outline: none;<br /> background: hsl(0 0% 100%);<br /> border-color: hsl(240 5.9% 90%);<br /> box-shadow: none;<br /> }<br /> <br /> #searchInput.form-control::placeholder {<br /> color: hsl(240 4% 60%);<br /> }<br /> <br /> .input-group-append {<br /> margin-left: 0 !important;<br /> }<br /> <br /> #searchGoButton.search-btn {<br /> background: hsl(0 0% 98%);<br /> border: 1px solid hsl(240 5.9% 93%);<br /> border-left: none;<br /> padding: 0.625rem 1rem;<br /> cursor: pointer;<br /> transition: all 0.15s ease-in-out;<br /> border-radius: 0.5rem;<br /> border-top-left-radius: 0;<br /> border-bottom-left-radius: 0;<br /> position: relative;<br /> width: 44px;<br /> }<br /> <br /> #searchGoButton.search-btn:hover {<br /> background: hsl(0 0% 96%);<br /> }<br /> <br /> #searchGoButton.search-btn:active {<br /> background: hsl(0 0% 94%);<br /> }<br /> <br /> /* Search Icon (SVG) */<br /> #searchGoButton.search-btn::before {<br /> content: &quot;&quot;;<br /> position: absolute;<br /> top: 50%;<br /> left: 50%;<br /> transform: translate(-50%, -50%);<br /> width: 16px;<br /> height: 16px;<br /> background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; width=&#039;16&#039; height=&#039;16&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%23888&#039; stroke-width=&#039;2&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;%3E%3Ccircle cx=&#039;11&#039; cy=&#039;11&#039; r=&#039;8&#039;/%3E%3Cpath d=&#039;m21 21-4.35-4.35&#039;/%3E%3C/svg%3E&quot;);<br /> background-size: contain;<br /> background-repeat: no-repeat;<br /> }</div>

Noeth