[web-php] master: Optimize CSS for Google CSE search (#1294)
| From: | Luffy via GitHub | Date: | Tue, 15 Jul 2025 02:53:55 +0000 |
| Subject: | [web-php] master: Optimize CSS for Google CSE search (#1294) | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-33015@lists.php.net to get a copy of this message | ||
Author: Luffy (sy-records)
Committer: GitHub (web-flow)
Pusher: sy-records
Date: 2025-07-15T10:40:38+08:00
Commit: https://github.com/php/web-php/commit/80ccba40fe296436d529f5324e3268c99d008430
Raw diff: https://github.com/php/web-php/commit/80ccba40fe296436d529f5324e3268c99d008430.diff
Optimize CSS for Google CSE search (#1294)
Changed paths:
A styles/cse-search.css
M search.php
M styles/theme-base.css
Diff:
diff --git a/search.php b/search.php
index 45f719fef1..05874deaa0 100644
--- a/search.php
+++ b/search.php
@@ -52,7 +52,7 @@
"href" => $MYSITE . "phpnetimprovedsearch.src",
"title" => "Add PHP.net search",
];
- site_header("Search", ["link" => [$link], "current" =>
"help"]);
+ site_header("Search", ["link" => [$link], "current" =>
"help", 'css' => 'cse-search.css']);
google_cse();
site_footer();
diff --git a/styles/cse-search.css b/styles/cse-search.css
new file mode 100644
index 0000000000..45d3879b39
--- /dev/null
+++ b/styles/cse-search.css
@@ -0,0 +1,237 @@
+/* {{{ Search results. */
+
+/* Undo a whole bunch of default styles. */
+#layout .cse .gsc-control-cse,
+#layout .gsc-control-cse,
+#layout .gsc-control-cse .gsc-table-result {
+ font-family: var(--font-family-sans-serif);
+ font-size: 1rem;
+ margin: 0;
+ padding: 0;
+ position: relative;
+}
+
+/* Override the search box styling. */
+#layout .cse form.gsc-search-box,
+#layout form.gsc-search-box {
+ margin: 0 0 1rem 0;
+ padding: 0;
+}
+
+#layout .cse table.gsc-search-box,
+#layout table.gsc-search-box {
+ border: solid 1px #99c;
+ border-radius: 2px;
+}
+
+#layout .cse input.gsc-input,
+#layout input.gsc-input {
+ border: 0;
+}
+
+#layout .cse table.gsc-search-box td,
+#layout table.gsc-search-box td {
+ padding-right: unset;
+}
+
+#layout .cse table.gsc-search-box .gsc-search-button,
+#layout table.gsc-search-box .gsc-search-button {
+ margin-left: unset;
+}
+
+#layout .cse input.gsc-search-button,
+#layout input.gsc-search-button {
+ background: #99c;
+ border: solid 1px #99c;
+ border-radius: 0;
+ color: rgb(238, 238, 255);
+}
+
+#layout .cse input.gsc-search-button:hover,
+#layout input.gsc-search-button:hover {
+ color: white;
+}
+
+/* We don't need a clear button. */
+#layout .cse .gsc-clear-button,
+#layout .gsc-clear-button {
+ display: none;
+}
+
+/* Style the "tabs", and reformat them as a sidebar item. */
+#layout .cse div.gsc-results-wrapper-visible,
+#layout div.gsc-results-wrapper-visible {
+ position: relative;
+ min-height: 11rem;
+}
+
+#layout .cse .gsc-tabsArea,
+#layout .gsc-tabsArea {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 23.404%;
+ margin-right: 2.762%;
+ padding: .5rem .75rem;
+ border: 1px solid #e0e0e0;
+ background-color: #f2f2f2;
+ border-bottom-color: #d9d9d9;
+ border-radius: 2px;
+ margin-top: 0;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+#layout .cse .gsc-tabHeader.gsc-tabhActive,
+#layout .gsc-tabHeader.gsc-tabhActive,
+#layout .cse .gsc-tabHeader.gsc-tabhInactive,
+#layout .gsc-tabHeader.gsc-tabhInactive {
+ background: transparent;
+ color: rgb(38, 38, 38);
+ border: 0;
+ display: block;
+ font-size: 100%;
+ font-weight: normal;
+ border-top: dotted 1px rgb(189, 189, 189);
+ padding: 0;
+}
+
+#layout .cse .gsc-tabHeader.gsc-tabhActive:first-child,
+#layout .gsc-tabHeader.gsc-tabhActive:first-child,
+#layout .cse .gsc-tabHeader.gsc-tabhInactive:first-child,
+#layout .gsc-tabHeader.gsc-tabhInactive:first-child {
+ border: 0;
+}
+
+#layout .cse .gsc-tabHeader.gsc-tabhActive,
+#layout .gsc-tabHeader.gsc-tabhActive {
+ color: black;
+}
+
+#layout .cse .gsc-tabHeader.gsc-tabhActive:after,
+#layout .gsc-tabHeader.gsc-tabhActive:after {
+ content: "»";
+ color: black;
+ float: right;
+ text-align: right;
+}
+
+#layout .cse .gsc-tabHeader.gsc-tabhInactive:hover,
+#layout .gsc-tabHeader.gsc-tabhInactive:hover {
+ color: #693;
+}
+
+/* Format the results in the right place. */
+#layout .cse .gsc-above-wrapper-area,
+#layout .gsc-above-wrapper-area {
+ border: 0;
+}
+
+#layout .cse .gsc-above-wrapper-area-container,
+#layout .gsc-above-wrapper-area-container {
+ width: 100%;
+}
+
+#layout .cse .gsc-orderby,
+#layout .gsc-orderby {
+ padding: 0 4px;
+}
+
+#layout .cse .gsc-result-info-container,
+#layout .gsc-result-info-container {
+ padding: 0;
+ margin: 0;
+ vertical-align: inherit;
+}
+
+#layout .cse .gsc-result-info,
+#layout .gsc-result-info {
+ color: var(--dark-grey-color);
+ font-size: 0.75rem;
+ padding: 0;
+ margin: 0;
+}
+
+#layout .cse .gsc-resultsHeader,
+#layout .gsc-resultsHeader {
+ display: none;
+}
+
+#layout .cse .gsc-webResult.gsc-result,
+#layout .gsc-webResult.gsc-result {
+ margin: 0 0 1rem 0;
+ padding: 0;
+ border: 0;
+}
+
+#layout .cse .gs-webResult.gs-result a,
+#layout .gs-webResult.gs-result a,
+#layout .cse .gs-webResult.gs-result a b,
+#layout .gs-webResult.gs-result a b {
+ border-bottom: solid 1px rgb(51, 102, 153);
+ color: rgb(51, 102, 153);
+ text-decoration: none;
+}
+
+#layout .cse .gs-webResult.gs-result a:focus,
+#layout .gs-webResult.gs-result a:focus,
+#layout .cse .gs-webResult.gs-result a:hover,
+#layout .gs-webResult.gs-result a:hover,
+#layout .cse .gs-webResult.gs-result a:focus b,
+#layout .gs-webResult.gs-result a:focus b,
+#layout .cse .gs-webResult.gs-result a:hover b,
+#layout .gs-webResult.gs-result a:hover b {
+ border-bottom-color: rgb(51, 102, 153);
+ color: rgb(102, 153, 51);
+}
+
+#layout .gs-webResult.gs-result .gs-visibleUrl {
+ font-weight: normal;
+}
+
+/* Handle no results tabs. */
+#layout .gs-no-results-result .gs-snippet {
+ border: 0;
+ background: transparent;
+}
+
+/* Override docs table styling we don't want. */
+.docs #cse th,
+.docs #cse td {
+ padding: 0;
+}
+
+/* }}} */
+
+@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)
{
+ tr {
+ margin: 0;
+ display: table-row;
+ }
+
+ td:before {
+ content: none;
+ }
+
+ table {
+ display: table;
+ }
+
+ thead {
+ display: table-header-group;
+ }
+
+ tbody {
+ display: table-row-group;
+ }
+
+ td:not(.gsc-clear-button),
+ th {
+ display: table-cell;
+ }
+
+ .gssb_a {
+ padding: 5px 3px !important;
+ white-space: normal !important;
+ }
+}
diff --git a/styles/theme-base.css b/styles/theme-base.css
index cc3116c7eb..c28b2a1385 100644
--- a/styles/theme-base.css
+++ b/styles/theme-base.css
@@ -694,209 +694,6 @@ table.standard th.subr {
text-align: right;
}
-/* {{{ Search results. */
-
-/* Undo a whole bunch of default styles. */
-#layout .cse .gsc-control-cse,
-#layout .gsc-control-cse,
-#layout .gsc-control-cse .gsc-table-result {
- font-family: var(--font-family-sans-serif);
- font-size: 1rem;
- margin: 0;
- padding: 0;
- position: relative;
-}
-
-/* Override the search box styling. */
-#layout .cse form.gsc-search-box,
-#layout form.gsc-search-box {
- margin: 0 0 1rem 0;
- padding: 0;
-}
-
-#layout .cse table.gsc-search-box,
-#layout table.gsc-search-box {
- border: solid 1px #99c;
- border-radius: 2px;
-}
-
-#layout .cse input.gsc-input,
-#layout input.gsc-input {
- border: 0;
-}
-
-#layout .cse table.gsc-search-box td,
-#layout table.gsc-search-box td {
- padding: 0;
-}
-
-#layout .cse input.gsc-search-button,
-#layout input.gsc-search-button {
- background: #99c;
- border: solid 1px #99c;
- border-radius: 0;
- color: rgb(238, 238, 255);
-}
-
-#layout .cse input.gsc-search-button:hover,
-#layout input.gsc-search-button:hover {
- color: white;
-}
-
-/* We don't need a clear button. */
-#layout .cse .gsc-clear-button,
-#layout .gsc-clear-button {
- display: none;
-}
-
-/* Style the "tabs", and reformat them as a sidebar item. */
-#layout .cse div.gsc-results-wrapper-visible,
-#layout div.gsc-results-wrapper-visible {
- position: relative;
- min-height: 11rem;
-}
-
-#layout .cse .gsc-tabsArea,
-#layout .gsc-tabsArea {
- position: absolute;
- top: 0;
- left: 0;
- width: 23.404%;
- margin-right: 2.762%;
- padding:.5rem .75rem;
- border: 1px solid #e0e0e0;
- background-color:#f2f2f2;
- border-bottom-color:#d9d9d9;
- border-radius:2px;
- margin-top: 0;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-#layout .cse .gsc-tabHeader.gsc-tabhActive,
-#layout .gsc-tabHeader.gsc-tabhActive,
-#layout .cse .gsc-tabHeader.gsc-tabhInactive,
-#layout .gsc-tabHeader.gsc-tabhInactive {
- background: transparent;
- color: rgb(38, 38, 38);
- border: 0;
- display: block;
- font-size: 100%;
- font-weight: normal;
- border-top: dotted 1px rgb(189, 189, 189);
- padding: 0;
-}
-
-#layout .cse .gsc-tabHeader.gsc-tabhActive:first-child,
-#layout .gsc-tabHeader.gsc-tabhActive:first-child,
-#layout .cse .gsc-tabHeader.gsc-tabhInactive:first-child,
-#layout .gsc-tabHeader.gsc-tabhInactive:first-child {
- border: 0;
-}
-
-#layout .cse .gsc-tabHeader.gsc-tabhActive,
-#layout .gsc-tabHeader.gsc-tabhActive {
- color: black;
-}
-
-#layout .cse .gsc-tabHeader.gsc-tabhActive:after,
-#layout .gsc-tabHeader.gsc-tabhActive:after {
- content: "»";
- color: black;
- float: right;
- text-align: right;
-}
-
-#layout .cse .gsc-tabHeader.gsc-tabhInactive:hover,
-#layout .gsc-tabHeader.gsc-tabhInactive:hover {
- color: #693;
-}
-
-/* Format the results in the right place. */
-#layout .cse .gsc-above-wrapper-area,
-#layout .gsc-above-wrapper-area {
- border: 0;
- margin: 0;
- padding: 0 0 1rem 26.166%;
- width: 73.834%;
-}
-
-#layout .cse .gsc-above-wrapper-area-container,
-#layout .gsc-above-wrapper-area-container {
- width: auto;
-}
-
-#layout .cse .gsc-result-info-container,
-#layout .gsc-result-info-container {
- padding: 0;
- margin: 0;
-}
-
-#layout .cse .gsc-result-info,
-#layout .gsc-result-info {
- color: var(--dark-grey-color);
- font-size: 0.75rem;
- padding: 0;
- margin: 0;
-}
-
-#layout .cse .gsc-results,
-#layout .gsc-results {
- margin: 0;
- padding: 0 0 0 26.166%;
- width: 73.834%;
-}
-
-#layout .cse .gsc-resultsHeader,
-#layout .gsc-resultsHeader {
- display: none;
-}
-
-#layout .cse .gsc-webResult.gsc-result,
-#layout .gsc-webResult.gsc-result {
- margin: 0 0 1rem 0;
- padding: 0;
- border: 0;
-}
-
-#layout .cse .gs-webResult.gs-result a,
-#layout .gs-webResult.gs-result a,
-#layout .cse .gs-webResult.gs-result a b,
-#layout .gs-webResult.gs-result a b {
- border-bottom: solid 1px rgb(51, 102, 153);
- color: rgb(51, 102, 153);
- text-decoration: none;
-}
-
-#layout .cse .gs-webResult.gs-result a:focus,
-#layout .gs-webResult.gs-result a:focus,
-#layout .cse .gs-webResult.gs-result a:hover,
-#layout .gs-webResult.gs-result a:hover,
-#layout .cse .gs-webResult.gs-result a:focus b,
-#layout .gs-webResult.gs-result a:focus b,
-#layout .cse .gs-webResult.gs-result a:hover b,
-#layout .gs-webResult.gs-result a:hover b {
- border-bottom-color: rgb(51, 102, 153);
- color: rgb(102, 153, 51);
-}
-
-#layout .gs-webResult.gs-result .gs-visibleUrl {
- font-weight: normal;
-}
-
-/* Handle no results tabs. */
-#layout .gs-no-results-result .gs-snippet {
- border: 0;
- background: transparent;
-}
-
-/* Override docs table styling we don't want. */
-.docs #cse th,
-.docs #cse td {
- padding: 0;
-}
-/* }}} */
-
div.informalexample {
margin: .75rem 0;
}