Skip to content

Commit 80ccba4

Browse files
sy-recordssy-records
authored
Optimize CSS for Google CSE search (#1294)
1 parent 75ef9ba commit 80ccba4

File tree

3 files changed

+238
-204
lines changed

3 files changed

+238
-204
lines changed

‎search.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"href" => $MYSITE . "phpnetimprovedsearch.src",
5353
"title" => "Add PHP.net search",
5454
];
55-
site_header("Search", ["link" => [$link], "current" => "help"]);
55+
site_header("Search", ["link" => [$link], "current" => "help", 'css' => 'cse-search.css']);
5656

5757
google_cse();
5858
site_footer();

‎styles/cse-search.css

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
/* {{{ Search results. */
2+
3+
/* Undo a whole bunch of default styles. */
4+
#layout .cse .gsc-control-cse,
5+
#layout .gsc-control-cse,
6+
#layout .gsc-control-cse .gsc-table-result {
7+
font-family: var(--font-family-sans-serif);
8+
font-size: 1rem;
9+
margin: 0;
10+
padding: 0;
11+
position: relative;
12+
}
13+
14+
/* Override the search box styling. */
15+
#layout .cse form.gsc-search-box,
16+
#layout form.gsc-search-box {
17+
margin: 0 0 1rem 0;
18+
padding: 0;
19+
}
20+
21+
#layout .cse table.gsc-search-box,
22+
#layout table.gsc-search-box {
23+
border: solid 1px #99c;
24+
border-radius: 2px;
25+
}
26+
27+
#layout .cse input.gsc-input,
28+
#layout input.gsc-input {
29+
border: 0;
30+
}
31+
32+
#layout .cse table.gsc-search-box td,
33+
#layout table.gsc-search-box td {
34+
padding-right: unset;
35+
}
36+
37+
#layout .cse table.gsc-search-box .gsc-search-button,
38+
#layout table.gsc-search-box .gsc-search-button {
39+
margin-left: unset;
40+
}
41+
42+
#layout .cse input.gsc-search-button,
43+
#layout input.gsc-search-button {
44+
background: #99c;
45+
border: solid 1px #99c;
46+
border-radius: 0;
47+
color: rgb(238, 238, 255);
48+
}
49+
50+
#layout .cse input.gsc-search-button:hover,
51+
#layout input.gsc-search-button:hover {
52+
color: white;
53+
}
54+
55+
/* We don't need a clear button. */
56+
#layout .cse .gsc-clear-button,
57+
#layout .gsc-clear-button {
58+
display: none;
59+
}
60+
61+
/* Style the "tabs", and reformat them as a sidebar item. */
62+
#layout .cse div.gsc-results-wrapper-visible,
63+
#layout div.gsc-results-wrapper-visible {
64+
position: relative;
65+
min-height: 11rem;
66+
}
67+
68+
#layout .cse .gsc-tabsArea,
69+
#layout .gsc-tabsArea {
70+
position: absolute;
71+
top: 0;
72+
left: 0;
73+
width: 23.404%;
74+
margin-right: 2.762%;
75+
padding: .5rem .75rem;
76+
border: 1px solid #e0e0e0;
77+
background-color: #f2f2f2;
78+
border-bottom-color: #d9d9d9;
79+
border-radius: 2px;
80+
margin-top: 0;
81+
-moz-box-sizing: border-box;
82+
box-sizing: border-box;
83+
}
84+
85+
#layout .cse .gsc-tabHeader.gsc-tabhActive,
86+
#layout .gsc-tabHeader.gsc-tabhActive,
87+
#layout .cse .gsc-tabHeader.gsc-tabhInactive,
88+
#layout .gsc-tabHeader.gsc-tabhInactive {
89+
background: transparent;
90+
color: rgb(38, 38, 38);
91+
border: 0;
92+
display: block;
93+
font-size: 100%;
94+
font-weight: normal;
95+
border-top: dotted 1px rgb(189, 189, 189);
96+
padding: 0;
97+
}
98+
99+
#layout .cse .gsc-tabHeader.gsc-tabhActive:first-child,
100+
#layout .gsc-tabHeader.gsc-tabhActive:first-child,
101+
#layout .cse .gsc-tabHeader.gsc-tabhInactive:first-child,
102+
#layout .gsc-tabHeader.gsc-tabhInactive:first-child {
103+
border: 0;
104+
}
105+
106+
#layout .cse .gsc-tabHeader.gsc-tabhActive,
107+
#layout .gsc-tabHeader.gsc-tabhActive {
108+
color: black;
109+
}
110+
111+
#layout .cse .gsc-tabHeader.gsc-tabhActive:after,
112+
#layout .gsc-tabHeader.gsc-tabhActive:after {
113+
content: "»";
114+
color: black;
115+
float: right;
116+
text-align: right;
117+
}
118+
119+
#layout .cse .gsc-tabHeader.gsc-tabhInactive:hover,
120+
#layout .gsc-tabHeader.gsc-tabhInactive:hover {
121+
color: #693;
122+
}
123+
124+
/* Format the results in the right place. */
125+
#layout .cse .gsc-above-wrapper-area,
126+
#layout .gsc-above-wrapper-area {
127+
border: 0;
128+
}
129+
130+
#layout .cse .gsc-above-wrapper-area-container,
131+
#layout .gsc-above-wrapper-area-container {
132+
width: 100%;
133+
}
134+
135+
#layout .cse .gsc-orderby,
136+
#layout .gsc-orderby {
137+
padding: 0 4px;
138+
}
139+
140+
#layout .cse .gsc-result-info-container,
141+
#layout .gsc-result-info-container {
142+
padding: 0;
143+
margin: 0;
144+
vertical-align: inherit;
145+
}
146+
147+
#layout .cse .gsc-result-info,
148+
#layout .gsc-result-info {
149+
color: var(--dark-grey-color);
150+
font-size: 0.75rem;
151+
padding: 0;
152+
margin: 0;
153+
}
154+
155+
#layout .cse .gsc-resultsHeader,
156+
#layout .gsc-resultsHeader {
157+
display: none;
158+
}
159+
160+
#layout .cse .gsc-webResult.gsc-result,
161+
#layout .gsc-webResult.gsc-result {
162+
margin: 0 0 1rem 0;
163+
padding: 0;
164+
border: 0;
165+
}
166+
167+
#layout .cse .gs-webResult.gs-result a,
168+
#layout .gs-webResult.gs-result a,
169+
#layout .cse .gs-webResult.gs-result a b,
170+
#layout .gs-webResult.gs-result a b {
171+
border-bottom: solid 1px rgb(51, 102, 153);
172+
color: rgb(51, 102, 153);
173+
text-decoration: none;
174+
}
175+
176+
#layout .cse .gs-webResult.gs-result a:focus,
177+
#layout .gs-webResult.gs-result a:focus,
178+
#layout .cse .gs-webResult.gs-result a:hover,
179+
#layout .gs-webResult.gs-result a:hover,
180+
#layout .cse .gs-webResult.gs-result a:focus b,
181+
#layout .gs-webResult.gs-result a:focus b,
182+
#layout .cse .gs-webResult.gs-result a:hover b,
183+
#layout .gs-webResult.gs-result a:hover b {
184+
border-bottom-color: rgb(51, 102, 153);
185+
color: rgb(102, 153, 51);
186+
}
187+
188+
#layout .gs-webResult.gs-result .gs-visibleUrl {
189+
font-weight: normal;
190+
}
191+
192+
/* Handle no results tabs. */
193+
#layout .gs-no-results-result .gs-snippet {
194+
border: 0;
195+
background: transparent;
196+
}
197+
198+
/* Override docs table styling we don't want. */
199+
.docs #cse th,
200+
.docs #cse td {
201+
padding: 0;
202+
}
203+
204+
/* }}} */
205+
206+
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
207+
tr {
208+
margin: 0;
209+
display: table-row;
210+
}
211+
212+
td:before {
213+
content: none;
214+
}
215+
216+
table {
217+
display: table;
218+
}
219+
220+
thead {
221+
display: table-header-group;
222+
}
223+
224+
tbody {
225+
display: table-row-group;
226+
}
227+
228+
td:not(.gsc-clear-button),
229+
th {
230+
display: table-cell;
231+
}
232+
233+
.gssb_a {
234+
padding: 5px 3px !important;
235+
white-space: normal !important;
236+
}
237+
}

0 commit comments

Comments
 (0)