style.css 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. * {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box;
  5. }
  6. input[type="search"] {
  7. -webkit-appearance: textfield;
  8. }
  9. h2 {
  10. color: #666;
  11. text-transform: uppercase;
  12. }
  13. body {
  14. font-family: sans-serif;
  15. line-height: 1.5;
  16. margin: 0;
  17. background: #EEE;
  18. }
  19. html {
  20. position: relative;
  21. min-height: 100%;
  22. }
  23. .center:after {
  24. content: "";
  25. z-index: -1;
  26. background: url(../img/bg-body-index.jpg) no-repeat;
  27. background-size: cover;
  28. width: 100%;
  29. height: 100%;
  30. top: 0;
  31. left: 0;
  32. position: fixed;
  33. }
  34. .center.search:after {
  35. content: none;
  36. }
  37. .title h1 {
  38. background: url(../img/searx.png) no-repeat;
  39. width: 319px;
  40. height: 62px;
  41. text-indent: -9999px;
  42. margin: 0.5em auto 1em;
  43. }
  44. .center {
  45. width: 55em;
  46. text-align: center;
  47. background: rgba(255,255,255,0.6);
  48. padding: 4em 2em;
  49. margin: 7% auto 0;
  50. position: relative;
  51. /*position: absolute;
  52. top: 50%;
  53. left: 50%;
  54. margin:-220px 0 0 -408px;*/
  55. }
  56. .center.search {
  57. position: static;
  58. width: auto;
  59. background: none;
  60. margin: auto;
  61. padding-top: 1.8em;
  62. }
  63. .autocompleter-choices {
  64. position: absolute;
  65. margin: 0;
  66. padding: 0;
  67. background: #FFF;
  68. }
  69. .autocompleter-choices li {
  70. padding: 0.5em 1em;
  71. }
  72. .autocompleter-choices li:hover {
  73. background: #3498DB;
  74. color: #FFF;
  75. cursor: pointer;
  76. }
  77. #categories {
  78. text-align: center;
  79. }
  80. .top_margin {
  81. position: absolute;
  82. bottom: -3.5em;
  83. width: 100%;
  84. left: 0;
  85. }
  86. .top_margin a {
  87. display: inline-block;
  88. margin-right: 1em;
  89. color: #FFF;
  90. text-decoration: none;
  91. }
  92. .top_margin a:hover,
  93. .top_margin a:focus {
  94. text-decoration: underline;
  95. }
  96. .checkbox_container { margin-top: 1.5em; }
  97. .checkbox_container label {
  98. padding: 0.5em 1em;
  99. color: #333;
  100. cursor: pointer;
  101. }
  102. .checkbox_container label:hover {
  103. background: #3498DB;
  104. color: #FFF;
  105. }
  106. .checkbox_container input[type="checkbox"] {
  107. position: absolute;
  108. top: -9999px;
  109. }
  110. .checkbox_container input[type="checkbox"]:checked + label {
  111. background: #3498DB;
  112. color: #FFF;
  113. }
  114. #categories > div {
  115. display: inline-block;
  116. }
  117. #search_wrapper {
  118. position: relative;
  119. }
  120. .q {
  121. padding: 0.5em 3em 0.5em 1em;
  122. width: 100%;
  123. font-size: 1.5em;
  124. border: 0;
  125. color: #666;
  126. }
  127. #search_submit {
  128. position: absolute;
  129. top: 0;
  130. right: 0;
  131. border: 0;
  132. background:url("../img/search-icon.png") no-repeat scroll center center / 65% auto #3498db;
  133. text-indent: -9999px;
  134. width: 5em;
  135. height: 100%;
  136. cursor: pointer;
  137. }
  138. #search_submit:hover,
  139. #search_submit:focus {
  140. background-color: #0665A2;
  141. }
  142. #sidebar {
  143. background: #3498db;
  144. position: fixed;
  145. top: 0;
  146. right: 0;
  147. width: 15em;
  148. height: 100%;
  149. padding: 1.5em;
  150. text-align: right;
  151. }
  152. .right {
  153. position: fixed;
  154. bottom: 1.5em;
  155. width: 15em;
  156. right: 0;
  157. z-index: 1;
  158. padding: 0 1.5em;
  159. text-align: right;
  160. }
  161. .right a {
  162. color: #FFF;
  163. display: block;
  164. text-decoration: none;
  165. }
  166. .right a:hover,
  167. .right a:focus {
  168. text-decoration: underline;
  169. }
  170. #preferences {
  171. background: url(../img/preference-icon.png) no-repeat right 0 / 12% auto;
  172. padding-right: 1.8em;
  173. }
  174. #preferences:hover,
  175. #preferences:focus {
  176. }
  177. #search_url input {
  178. border: 0;
  179. padding: 0.5em;
  180. }
  181. #sidebar > div {
  182. margin-bottom: 1em;
  183. color: #FFF;
  184. }
  185. #sidebar form {
  186. display: inline-block;
  187. }
  188. #sidebar input[type="submit"] {
  189. background: #CCC;
  190. border: 0;
  191. padding: 0.5em 1em;
  192. cursor: pointer;
  193. margin-top: 0.5em;
  194. }
  195. #sidebar input[type="submit"]:hover,
  196. #sidebar input[type="submit"]:focus {
  197. color: #FFF;
  198. background-color: #0665A2;
  199. }
  200. #results {
  201. padding-right: 17em;
  202. padding-left: 2em;
  203. padding: 0 17em 0 2em;
  204. }
  205. .result p {
  206. font-size: 0.9em;
  207. }
  208. .result .content {
  209. margin: 0;
  210. color: #666;
  211. }
  212. .result .url {
  213. margin-top: 0;
  214. color: #FF6530;
  215. }
  216. .result .favicon {
  217. float: left;
  218. position: relative;
  219. top: 0.5em;
  220. margin-right: 0.5em;
  221. }
  222. .definition_result {
  223. background: #CCC;
  224. padding: 1em;
  225. }
  226. .definition_result .result_title,
  227. .definition_result p {
  228. margin: 0;
  229. }
  230. .result_title {
  231. margin-bottom: 0;
  232. font-weight: normal;
  233. }
  234. .highlight {
  235. font-weight: bold;
  236. }
  237. .result_title a {
  238. color: #3498db;
  239. text-decoration: none;
  240. }
  241. .result_title a:hover,
  242. .result_title a:focus {
  243. text-decoration: underline;
  244. }
  245. .search.center {
  246. padding-right: 17em;
  247. }
  248. #suggestions { margin-bottom: 1em; }
  249. #suggestions span { color: #666; }
  250. #suggestions form {
  251. display: inline-block;
  252. vertical-align: top;
  253. margin-bottom: 0.5em;
  254. }
  255. #suggestions input[type="submit"] {
  256. color: #333;
  257. padding: 0.5em 1em;
  258. border: 0;
  259. background: #CCC;
  260. cursor:pointer;
  261. }
  262. #suggestions input[type="submit"]:hover,
  263. #suggestions input[type="submit"]:focus {
  264. background: #3498db;
  265. color: #FFF;
  266. }
  267. #pagination {
  268. margin: 1.5em 0 2em;
  269. }
  270. #pagination form + form {
  271. float: right;
  272. margin-top: -2em;
  273. }
  274. input[type="submit"] {
  275. display: inline-block;
  276. background: #3498db;
  277. color: #FFF;
  278. border: 0;
  279. padding: 0.6em 1em;
  280. cursor: pointer;
  281. }
  282. input[type="submit"]:hover,
  283. input[type="submit"]:focus {
  284. background: #0665A2;
  285. }
  286. .row {
  287. max-width: 60em;
  288. margin: auto;
  289. }
  290. .row form {
  291. letter-spacing: -5px;
  292. }
  293. .row form > * { letter-spacing: normal; }
  294. .row p { margin: 0; }
  295. .row fieldset {
  296. display: inline-block;
  297. width: 48%;
  298. vertical-align: top;
  299. }
  300. .row fieldset:last-of-type {
  301. display: block;
  302. width: auto;
  303. background: none;
  304. padding: 0;
  305. }
  306. .row fieldset:nth-child(odd) {
  307. margin-right: 2%;
  308. }
  309. .row fieldset:nth-child(2) {
  310. min-height: 10.5em;
  311. }
  312. fieldset {
  313. border: 0;
  314. margin: 1em 0;
  315. background: #CCC;
  316. padding: 1.5em;
  317. }
  318. table {
  319. width: 100%;
  320. text-align: left;
  321. border: 1px solid #CCC;
  322. border-collapse: collapse;
  323. }
  324. table th {
  325. background: #999;
  326. color: #FFF;
  327. }
  328. table tr:nth-child(odd) {
  329. background: #CCC;
  330. }
  331. table th,
  332. table td {
  333. padding: 0.5em 1em;
  334. border: 1px solid #FFF;
  335. }
  336. .engine_checkbox label {
  337. padding: 0.5em;
  338. background: #3498db;
  339. color: #FFF;
  340. cursor: pointer;
  341. }
  342. .engine_checkbox .deny {
  343. background: #3498db;
  344. }
  345. .engine_checkbox .allow {
  346. display: none;
  347. background: #666;
  348. }
  349. .engine_checkbox input {
  350. display: none;
  351. }
  352. .engine_checkbox input:checked + .allow {
  353. display: inline;
  354. }
  355. .engine_checkbox input:checked + .allow + .deny{
  356. display: none;
  357. }
  358. .row input[type="submit"] {
  359. font-size: 1em;
  360. margin: 1em 0 2em;
  361. }
  362. .row .right {
  363. position: static;
  364. display: inline-block;
  365. }
  366. .row .right a {
  367. color: #333;
  368. width: auto;
  369. text-align: left;
  370. padding: 0;
  371. }
  372. .small_font {
  373. font-size: 0.8em;
  374. }
  375. table th {
  376. padding: 1em;
  377. }
  378. legend {
  379. background: #EEE;
  380. padding: 0 1em;
  381. position: relative;
  382. }
  383. select {
  384. border: 1px solid #DDD;
  385. padding: 0.5em 0.8em;
  386. font-size: 1em;
  387. }