Almost all styling of this page has little to do with the JS module.
Separating it into a styles module.
Also made the selector for the JS elements far simpler, as there was
no reason for being overly specific here.
Bug: T136363
Change-Id: I96a35f930be26b26f139120f3e5b23c33a5d019e
$out = $this->getOutput();
$out->allowClickjacking();
$out->addModuleStyles( [
- 'mediawiki.special', 'mediawiki.special.search', 'mediawiki.ui', 'mediawiki.ui.button',
+ 'mediawiki.special', 'mediawiki.special.search.styles', 'mediawiki.ui', 'mediawiki.ui.button',
'mediawiki.ui.input', 'mediawiki.widgets.SearchInputWidget.styles',
] );
$this->addHelpLink( 'Help:Searching' );
'powersearch-togglenone',
],
],
+ 'mediawiki.special.search.styles' => [
+ 'styles' => 'resources/src/mediawiki.special/mediawiki.special.search.styles.css',
+ 'targets' => [ 'desktop', 'mobile' ],
+ ],
'mediawiki.special.undelete' => [
'scripts' => 'resources/src/mediawiki.special/mediawiki.special.undelete.js',
],
-/* Special:Search */
-
-/*
- * Fixes sister projects box moving down the extract
- * of the first result (bug #16886).
- * It only happens when the window is small and
- * This changes slightly the layout for big screens
- * where there was space for the extracts and the
- * sister projects and thus it showed like in any
- * other browser.
- *
- * This will only affect IE 7 and lower
- */
-.searchresult {
- display: inline !ie;
-}
-.searchresults {
- margin: 1em 0 1em .4em;
-}
-/* needs extra specificity to override `.mw-body p` selector */
-.mw-body p.mw-search-nonefound {
- margin: 0;
-}
-.mw-search-interwiki-header {
- font-weight: bold;
-}
-.mw-search-nonefound + .mw-search-interwiki-header {
- margin-top: 0;
-}
-div.searchresult {
- font-size: 95%;
- width: 38em;
-}
-.mw-search-results {
- margin-left: 0;
- float: left;
-}
-.mw-search-results li {
- padding-bottom: 1.2em;
- list-style: none;
- list-style-image: none;
-}
-.mw-search-results li a {
- font-size: 108%;
-}
-.mw-search-result-data {
- color: #008000;
- font-size: 97%;
-}
-.mw-search-profile-tabs {
- background-color: #f3f3f3;
- margin-top: 1em;
- border: 1px solid #c0c0c0;
-}
-.mw-search-profile-tabs div.search-types {
- float: left;
- padding-left: 0.25em;
-}
-.mw-search-profile-tabs div.search-types ul {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-.mw-search-profile-tabs div.search-types ul li {
- float: left;
- margin: 0;
- padding: 0;
-}
-.mw-search-profile-tabs div.search-types ul li a {
- display: block;
- padding: 0.5em;
-}
-.mw-search-profile-tabs div.search-types ul li.current a {
- color: #333;
- cursor: default;
-}
-.mw-search-profile-tabs div.search-types ul li.current a:hover {
- text-decoration: none;
-}
-#mw-search-top-table div.results-info {
- float: right;
- padding: 0.5em;
- padding-right: 0.75em;
- color: #666;
- font-size: 95%;
-}
-
-fieldset#mw-searchoptions {
- margin: 0;
- padding: 0.5em 0.75em 0.75em 0.75em;
- border: none;
- background-color: #f9f9f9;
- border: 1px solid #c0c0c0;
- border-top-width: 0;
-}
-fieldset#mw-searchoptions legend {
- display: none;
-}
-fieldset#mw-searchoptions h4 {
- padding: 0;
- margin: 0;
- float: left;
-}
-fieldset#mw-searchoptions div#mw-search-togglebox {
+#mw-search-togglebox {
float: right;
}
-fieldset#mw-searchoptions div#mw-search-togglebox label {
+#mw-search-togglebox label {
margin-right: 0.25em;
}
-fieldset#mw-searchoptions div#mw-search-togglebox input {
+#mw-search-togglebox input {
margin-left: 0.25em;
}
-fieldset#mw-searchoptions table {
- float: left;
- margin-right: 3em;
- border-collapse: collapse;
-}
-fieldset#mw-searchoptions table td {
- padding: 0 1em 0 0;
- white-space: nowrap;
-}
-fieldset#mw-searchoptions div.divider {
- clear: both;
- border-bottom: 1px solid #ddd;
- padding-top: 0.5em;
- margin-bottom: 0.5em;
-}
-td#mw-search-menu {
- padding-left: 6em;
- font-size: 85%;
-}
-div#mw-search-interwiki {
- float: right;
- width: 18em;
- border: 1px solid #aaa;
- margin-top: 2ex;
-}
-div#mw-search-interwiki li {
- font-size: 95%;
-}
-.mw-search-interwiki-more {
- float: right;
- font-size: 90%;
-}
-div#mw-search-interwiki-caption {
- text-align: center;
- font-weight: bold;
- font-size: 95%;
-}
-.mw-search-interwiki-project {
- font-size: 97%;
- text-align: left;
- padding: 0.15em 0.15em 0.2em 0.2em;
- background-color: #ececec;
- border-top: 1px solid #bbb;
-}
-span.searchalttitle {
- font-size: 95%;
-}
-div.searchdidyoumean {
- font-size: 127%;
- margin-top: 0.8em;
- /* Note that this color won't affect the link, as desired. */
- color: #c00;
-}
-div.searchdidyoumean em {
- font-weight: bold;
-}
-.searchmatch {
- font-weight: bold;
-}
-/* Advanced PowerSearch box */
-td#mw-search-togglebox {
- text-align: right;
-}
-table#mw-search-powertable {
- width: 100%;
-}
-form#powersearch {
- clear: both;
-}
--- /dev/null
+/* Special:Search */
+
+/*
+ * Fixes sister projects box moving down the extract
+ * of the first result (bug #16886).
+ * It only happens when the window is small and
+ * This changes slightly the layout for big screens
+ * where there was space for the extracts and the
+ * sister projects and thus it showed like in any
+ * other browser.
+ *
+ * This will only affect IE 7 and lower
+ */
+.searchresult {
+ display: inline !ie;
+}
+.searchresults {
+ margin: 1em 0 1em .4em;
+}
+/* needs extra specificity to override `.mw-body p` selector */
+.mw-body p.mw-search-nonefound {
+ margin: 0;
+}
+.mw-search-interwiki-header {
+ font-weight: bold;
+}
+.mw-search-nonefound + .mw-search-interwiki-header {
+ margin-top: 0;
+}
+div.searchresult {
+ font-size: 95%;
+ width: 38em;
+}
+.mw-search-results {
+ margin-left: 0;
+ float: left;
+}
+.mw-search-results li {
+ padding-bottom: 1.2em;
+ list-style: none;
+ list-style-image: none;
+}
+.mw-search-results li a {
+ font-size: 108%;
+}
+.mw-search-result-data {
+ color: #008000;
+ font-size: 97%;
+}
+.mw-search-profile-tabs {
+ background-color: #f3f3f3;
+ margin-top: 1em;
+ border: 1px solid #c0c0c0;
+}
+.mw-search-profile-tabs div.search-types {
+ float: left;
+ padding-left: 0.25em;
+}
+.mw-search-profile-tabs div.search-types ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.mw-search-profile-tabs div.search-types ul li {
+ float: left;
+ margin: 0;
+ padding: 0;
+}
+.mw-search-profile-tabs div.search-types ul li a {
+ display: block;
+ padding: 0.5em;
+}
+.mw-search-profile-tabs div.search-types ul li.current a {
+ color: #333;
+ cursor: default;
+}
+.mw-search-profile-tabs div.search-types ul li.current a:hover {
+ text-decoration: none;
+}
+#mw-search-top-table div.results-info {
+ float: right;
+ padding: 0.5em;
+ padding-right: 0.75em;
+ color: #666;
+ font-size: 95%;
+}
+
+fieldset#mw-searchoptions {
+ margin: 0;
+ padding: 0.5em 0.75em 0.75em 0.75em;
+ border: none;
+ background-color: #f9f9f9;
+ border: 1px solid #c0c0c0;
+ border-top-width: 0;
+}
+fieldset#mw-searchoptions legend {
+ display: none;
+}
+fieldset#mw-searchoptions h4 {
+ padding: 0;
+ margin: 0;
+ float: left;
+}
+fieldset#mw-searchoptions table {
+ float: left;
+ margin-right: 3em;
+ border-collapse: collapse;
+}
+fieldset#mw-searchoptions table td {
+ padding: 0 1em 0 0;
+ white-space: nowrap;
+}
+fieldset#mw-searchoptions div.divider {
+ clear: both;
+ border-bottom: 1px solid #ddd;
+ padding-top: 0.5em;
+ margin-bottom: 0.5em;
+}
+td#mw-search-menu {
+ padding-left: 6em;
+ font-size: 85%;
+}
+div#mw-search-interwiki {
+ float: right;
+ width: 18em;
+ border: 1px solid #aaa;
+ margin-top: 2ex;
+}
+div#mw-search-interwiki li {
+ font-size: 95%;
+}
+.mw-search-interwiki-more {
+ float: right;
+ font-size: 90%;
+}
+div#mw-search-interwiki-caption {
+ text-align: center;
+ font-weight: bold;
+ font-size: 95%;
+}
+.mw-search-interwiki-project {
+ font-size: 97%;
+ text-align: left;
+ padding: 0.15em 0.15em 0.2em 0.2em;
+ background-color: #ececec;
+ border-top: 1px solid #bbb;
+}
+span.searchalttitle {
+ font-size: 95%;
+}
+div.searchdidyoumean {
+ font-size: 127%;
+ margin-top: 0.8em;
+ /* Note that this color won't affect the link, as desired. */
+ color: #c00;
+}
+div.searchdidyoumean em {
+ font-weight: bold;
+}
+.searchmatch {
+ font-weight: bold;
+}
+/* Advanced PowerSearch box */
+td#mw-search-togglebox {
+ text-align: right;
+}
+table#mw-search-powertable {
+ width: 100%;
+}
+form#powersearch {
+ clear: both;
+}