style.css 6.4 KB

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