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; }
