logo

searx

My custom branche(s) on searx, a meta-search engine git clone https://hacktivis.me/git/searx.git

style.less (13184B)


  1. @color-main: #3498DB;
  2. @color-focus: #0665A2;
  3. @color-other-links: #666;
  4. @color-fonts: #333;
  5. @center-width: 70em;
  6. * {
  7. -webkit-box-sizing: border-box;
  8. -moz-box-sizing: border-box;
  9. box-sizing: border-box;
  10. }
  11. input[type="search"] {
  12. -webkit-appearance: textfield;
  13. }
  14. h2 {
  15. color: @color-other-links;
  16. text-transform: uppercase;
  17. }
  18. body {
  19. font-family: sans-serif;
  20. line-height: 1.5;
  21. margin: 0;
  22. background: #EEE;
  23. }
  24. html {
  25. position: relative;
  26. min-height: 100%;
  27. }
  28. a {
  29. color: @color-other-links;
  30. }
  31. .title h1 {
  32. font-size:7em;
  33. color:@color-main;
  34. margin:0 auto;
  35. line-height:100px;
  36. margin-top:-20px;
  37. padding-bottom:20px;
  38. }
  39. .center {
  40. max-width: @center-width;
  41. text-align: center;
  42. background: rgba(255,255,255,0.6);
  43. padding: 2em;
  44. margin: 7% auto 0;
  45. position: relative;
  46. }
  47. .center.search {
  48. position: static;
  49. width: auto;
  50. background: none;
  51. margin: auto;
  52. padding-top: 1.8em;
  53. }
  54. @media screen and (min-width: 1001px) {
  55. .center:after {
  56. content: "";
  57. z-index: -1;
  58. background: url(../img/bg-body-index.jpg) no-repeat;
  59. background-size: cover;
  60. width: 100%;
  61. height: 100%;
  62. top: 0;
  63. left: 0;
  64. position: fixed;
  65. }
  66. .center.search:after {
  67. content: none;
  68. }
  69. }
  70. .autocompleter-choices {
  71. position: absolute;
  72. margin: 0;
  73. padding: 0;
  74. background: #FFF;
  75. }
  76. .autocompleter-choices li {
  77. padding: 0.5em 1em;
  78. }
  79. .autocompleter-choices li:hover {
  80. background: @color-main;
  81. color: #FFF;
  82. cursor: pointer;
  83. }
  84. #categories {
  85. text-align: center;
  86. }
  87. .top_margin {
  88. position: absolute;
  89. bottom: -3.5em;
  90. width: 100%;
  91. left: 0;
  92. }
  93. .top_margin a {
  94. display: inline-block;
  95. margin-right: 1em;
  96. color: #FFF;
  97. text-decoration: none;
  98. }
  99. .top_margin a:hover,
  100. .top_margin a:focus {
  101. text-decoration: underline;
  102. }
  103. @media screen and (max-width: 1000px) {
  104. .center { background: none; }
  105. .top_margin a {
  106. color: @color-fonts;
  107. }
  108. }
  109. .checkbox_container { margin-top: 1.5em; }
  110. .checkbox_container label {
  111. padding: 0.5em 1em;
  112. color: @color-fonts;
  113. cursor: pointer;
  114. font-size: 0.9em;
  115. }
  116. .checkbox_container label:hover {
  117. background: @color-main;
  118. color: #FFF;
  119. }
  120. .checkbox_container input[type="checkbox"] {
  121. position: absolute;
  122. top: -9999px;
  123. }
  124. .checkbox_container input[type="checkbox"]:checked + label {
  125. background: @color-main;
  126. color: #FFF;
  127. }
  128. #categories_container > div {
  129. display: inline-block;
  130. }
  131. #categories .hidden {
  132. display: none;
  133. position: absolute;
  134. bottom: 1em;
  135. left: 0;
  136. text-align: center;
  137. width: 100%;
  138. font-size: 0.9em;
  139. font-style: italic;
  140. color: @color-fonts;
  141. }
  142. #categories:hover .hidden {
  143. display: block;
  144. }
  145. @media screen and (max-width: 900px) {
  146. #categories_container { letter-spacing: -5px; }
  147. #categories_container > div {
  148. letter-spacing: normal;
  149. margin-top: 1em;
  150. }
  151. .checkbox_container {
  152. margin: 0;
  153. }
  154. .checkbox_container label {
  155. display: block;
  156. background: #CCC;
  157. padding: 1em;
  158. border: 1px solid #FFF;
  159. }
  160. .top_margin { position: static; }
  161. #categories .hidden {
  162. position: static;
  163. display: block;
  164. }
  165. }
  166. @media screen and (max-width: 900px) and (min-width: 501px) {
  167. #categories_container > div {
  168. width: 31%;
  169. margin-left: 2.333%;
  170. }
  171. #categories_container > div:nth-child(3n+1) { margin-left: 0; }
  172. }
  173. @media screen and (max-width: 500px) {
  174. #categories_container > div {
  175. width: 48%;
  176. margin-left: 2%;
  177. font-size: 0.9em;
  178. }
  179. #categories_container > div:nth-child(2n+1) { margin-left: 0; }
  180. .title h1 {
  181. background: url(../img/searx-mobile.png) no-repeat;
  182. width: 200px;
  183. height: 39px;
  184. }
  185. }
  186. #search_wrapper {
  187. position: relative;
  188. }
  189. .q {
  190. padding: 0.5em 3em 0.5em 1em;
  191. width: 100%;
  192. font-size: 1.5em;
  193. border: 0;
  194. color: #666;
  195. }
  196. #search_submit {
  197. position: absolute;
  198. top: 0;
  199. right: 0;
  200. border: 0;
  201. background:url("../img/search-icon.png") no-repeat scroll center center / 65% auto @color-main;
  202. text-indent: -9999px;
  203. width: 5em;
  204. height: 100%;
  205. cursor: pointer;
  206. }
  207. #search_submit:hover,
  208. #search_submit:focus {
  209. background-color: @color-focus;
  210. }
  211. #sidebar {
  212. background: @color-main;
  213. position: fixed;
  214. top: 0;
  215. right: 0;
  216. width: 15em;
  217. height: 100%;
  218. padding: 1.5em;
  219. text-align: right;
  220. }
  221. .right {
  222. position: fixed;
  223. bottom: 1.5em;
  224. width: 15em;
  225. right: 0;
  226. z-index: 1;
  227. padding: 0 1.5em;
  228. text-align: right;
  229. }
  230. .right a {
  231. color: #FFF;
  232. display: block;
  233. text-decoration: none;
  234. }
  235. .right a:hover,
  236. .right a:focus {
  237. text-decoration: underline;
  238. }
  239. #preferences {
  240. background: url("../img/preference-icon.png") no-repeat right center / 12% auto;
  241. padding-right: 1.8em;
  242. }
  243. #preferences:hover,
  244. #preferences:focus {
  245. }
  246. #search_url input {
  247. border: 0;
  248. padding: 0.5em;
  249. }
  250. #sidebar > div {
  251. margin-bottom: 1em;
  252. color: #FFF;
  253. }
  254. #sidebar form {
  255. display: inline-block;
  256. }
  257. #sidebar input[type="submit"] {
  258. background: #CCC;
  259. border: 0;
  260. padding: 0.5em 1em;
  261. cursor: pointer;
  262. margin-top: 0.5em;
  263. }
  264. #sidebar input[type="submit"]:hover,
  265. #sidebar input[type="submit"]:focus {
  266. color: #FFF;
  267. background-color: @color-focus;
  268. }
  269. #results {
  270. padding-right: 17em;
  271. padding-left: 2em;
  272. padding: 0 17em 0 2em;
  273. }
  274. .result p {
  275. font-size: 0.9em;
  276. }
  277. .result .content {
  278. margin: 0;
  279. color: #666;
  280. }
  281. .result .url {
  282. margin-top: 0;
  283. color: #FF6530;
  284. }
  285. .result .favicon {
  286. float: left;
  287. position: relative;
  288. top: 0.5em;
  289. margin-right: 0.5em;
  290. }
  291. .definition_result {
  292. background: #CCC;
  293. padding: 1em;
  294. }
  295. .definition_result .result_title,
  296. .definition_result p {
  297. margin: 0;
  298. }
  299. .result_title {
  300. margin-bottom: 0;
  301. font-weight: normal;
  302. }
  303. .highlight {
  304. font-weight: bold;
  305. }
  306. .result_title a {
  307. color: @color-main;
  308. text-decoration: none;
  309. }
  310. .result_title a:hover,
  311. .result_title a:focus {
  312. text-decoration: underline;
  313. }
  314. .cache_link {
  315. color: #666;
  316. font-size: 0.9em;
  317. font-style: italic;
  318. }
  319. .search.center {
  320. padding-right: 17em;
  321. }
  322. #answers {
  323. border: 2px solid @color-main;
  324. padding: 20px;
  325. color:#666;
  326. text-align: center;
  327. max-width:@center-width;
  328. margin:0 auto 20px;
  329. }
  330. #suggestions { margin-bottom: 1em; }
  331. #suggestions span { color: #666; }
  332. #suggestions form {
  333. display: inline-block;
  334. vertical-align: top;
  335. margin-bottom: 0.5em;
  336. }
  337. #suggestions input[type="submit"] {
  338. color: @color-fonts;
  339. padding: 0.5em 1em;
  340. border: 0;
  341. background: #CCC;
  342. cursor:pointer;
  343. }
  344. #suggestions input[type="submit"]:hover,
  345. #suggestions input[type="submit"]:focus {
  346. background: @color-main;
  347. color: #FFF;
  348. }
  349. #pagination {
  350. margin: 1.5em 0 2em;
  351. }
  352. #pagination form + form {
  353. float: right;
  354. margin-top: -2em;
  355. }
  356. input[type="submit"] {
  357. display: inline-block;
  358. background: @color-main;
  359. color: #FFF;
  360. border: 0;
  361. padding: 0.6em 1em;
  362. cursor: pointer;
  363. }
  364. input[type="submit"]:hover,
  365. input[type="submit"]:focus {
  366. background: @color-focus;
  367. }
  368. .row {
  369. max-width: 60em;
  370. margin: auto;
  371. }
  372. .row a {
  373. color: @color-main;
  374. }
  375. .row form {
  376. letter-spacing: -5px;
  377. }
  378. .row form > * { letter-spacing: normal; }
  379. .row p { margin: 0; }
  380. .row fieldset {
  381. display: inline-block;
  382. width: 48%;
  383. vertical-align: top;
  384. }
  385. .row fieldset:last-of-type {
  386. display: block;
  387. width: auto;
  388. background: none;
  389. padding: 0;
  390. }
  391. .row fieldset:nth-child(odd) {
  392. margin-right: 2%;
  393. }
  394. .row fieldset:nth-child(2) {
  395. min-height: 10.5em;
  396. }
  397. @media screen and (max-width: 900px) {
  398. .row {
  399. margin: 0 1em;
  400. }
  401. .row fieldset { width: 49%; }
  402. .row fieldset,
  403. .row fieldset:nth-child(odd) {
  404. margin-right: 0;
  405. }
  406. .row fieldset:first-child {
  407. width: 100%;
  408. margin-right: 0;
  409. }
  410. .row fieldset:nth-child(even) {
  411. margin-right: 2%;
  412. }
  413. }
  414. @media screen and (max-width: 800px) {
  415. .row fieldset { width: 100%; }
  416. select { width: 100%; }
  417. table { font-size: 0.8em; }
  418. .right {display: none;}
  419. #sidebar { display: none; }
  420. #results { padding: 0 2em; }
  421. .search.center {
  422. padding-right: 2em;
  423. }
  424. }
  425. @media screen and (max-width: 400px) {
  426. .row #categories_container > div {
  427. width: 100%;
  428. margin-left: 0;
  429. }
  430. }
  431. fieldset {
  432. border: 0;
  433. margin: 1em 0;
  434. background: #CCC;
  435. padding: 1.5em;
  436. }
  437. table {
  438. width: 100%;
  439. text-align: left;
  440. border: 1px solid #CCC;
  441. border-collapse: collapse;
  442. }
  443. table th {
  444. background: #999;
  445. color: #FFF;
  446. }
  447. table tr:nth-child(odd) {
  448. background: #CCC;
  449. }
  450. table th,
  451. table td {
  452. padding: 0.5em 1em;
  453. border: 1px solid #FFF;
  454. }
  455. .engine_checkbox label {
  456. padding: 0.5em;
  457. background: @color-main;
  458. color: #FFF;
  459. cursor: pointer;
  460. }
  461. .engine_checkbox .deny {
  462. background: @color-main;
  463. }
  464. .engine_checkbox .allow {
  465. display: none;
  466. background: #666;
  467. }
  468. .engine_checkbox input {
  469. display: none;
  470. }
  471. .engine_checkbox input:checked + .allow {
  472. display: inline;
  473. }
  474. .engine_checkbox input:checked + .allow + .deny{
  475. display: none;
  476. }
  477. .row input[type="submit"] {
  478. font-size: 1em;
  479. margin: 1em 0 2em;
  480. }
  481. .row .right {
  482. position: static;
  483. display: inline-block;
  484. }
  485. .row .right a {
  486. color: @color-fonts;
  487. width: auto;
  488. text-align: left;
  489. padding: 0;
  490. }
  491. .small_font {
  492. font-size: 0.8em;
  493. }
  494. table th {
  495. padding: 1em;
  496. }
  497. legend {
  498. background: #EEE;
  499. padding: 0 1em;
  500. position: relative;
  501. }
  502. select {
  503. border: 1px solid #DDD;
  504. padding: 0.5em 0.8em;
  505. font-size: 1em;
  506. }
  507. .highlight .hll { background-color: #ffffcc }
  508. .highlight { background: #f8f8f8; }
  509. .highlight .c { color: #408080; font-style: italic } /* Comment */
  510. .highlight .err { border: 1px solid #FF0000 } /* Error */
  511. .highlight .k { color: #008000; font-weight: bold } /* Keyword */
  512. .highlight .o { color: #666666 } /* Operator */
  513. .highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
  514. .highlight .cp { color: #BC7A00 } /* Comment.Preproc */
  515. .highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
  516. .highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
  517. .highlight .gd { color: #A00000 } /* Generic.Deleted */
  518. .highlight .ge { font-style: italic } /* Generic.Emph */
  519. .highlight .gr { color: #FF0000 } /* Generic.Error */
  520. .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
  521. .highlight .gi { color: #00A000 } /* Generic.Inserted */
  522. .highlight .go { color: #888888 } /* Generic.Output */
  523. .highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
  524. .highlight .gs { font-weight: bold } /* Generic.Strong */
  525. .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
  526. .highlight .gt { color: #0044DD } /* Generic.Traceback */
  527. .highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
  528. .highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
  529. .highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
  530. .highlight .kp { color: #008000 } /* Keyword.Pseudo */
  531. .highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
  532. .highlight .kt { color: #B00040 } /* Keyword.Type */
  533. .highlight .m { color: #666666 } /* Literal.Number */
  534. .highlight .s { color: #BA2121 } /* Literal.String */
  535. .highlight .na { color: #7D9029 } /* Name.Attribute */
  536. .highlight .nb { color: #008000 } /* Name.Builtin */
  537. .highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
  538. .highlight .no { color: #880000 } /* Name.Constant */
  539. .highlight .nd { color: #AA22FF } /* Name.Decorator */
  540. .highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
  541. .highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
  542. .highlight .nf { color: #0000FF } /* Name.Function */
  543. .highlight .nl { color: #A0A000 } /* Name.Label */
  544. .highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
  545. .highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
  546. .highlight .nv { color: #19177C } /* Name.Variable */
  547. .highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
  548. .highlight .w { color: #bbbbbb } /* Text.Whitespace */
  549. .highlight .mf { color: #666666 } /* Literal.Number.Float */
  550. .highlight .mh { color: #666666 } /* Literal.Number.Hex */
  551. .highlight .mi { color: #666666 } /* Literal.Number.Integer */
  552. .highlight .mo { color: #666666 } /* Literal.Number.Oct */
  553. .highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
  554. .highlight .sc { color: #BA2121 } /* Literal.String.Char */
  555. .highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
  556. .highlight .s2 { color: #BA2121 } /* Literal.String.Double */
  557. .highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
  558. .highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
  559. .highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
  560. .highlight .sx { color: #008000 } /* Literal.String.Other */
  561. .highlight .sr { color: #BB6688 } /* Literal.String.Regex */
  562. .highlight .s1 { color: #BA2121 } /* Literal.String.Single */
  563. .highlight .ss { color: #19177C } /* Literal.String.Symbol */
  564. .highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
  565. .highlight .vc { color: #19177C } /* Name.Variable.Class */
  566. .highlight .vg { color: #19177C } /* Name.Variable.Global */
  567. .highlight .vi { color: #19177C } /* Name.Variable.Instance */
  568. .highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
  569. .highlight pre { overflow: auto; }
  570. .highlight .lineno {
  571. -webkit-touch-callout: none;
  572. -webkit-user-select: none;
  573. -khtml-user-select: none;
  574. -moz-user-select: none;
  575. -ms-user-select: none;
  576. user-select: none;
  577. cursor: default;
  578. }
  579. .highlight .lineno::selection { background: transparent; } /* WebKit/Blink Browsers */
  580. .highlight .lineno::-moz-selection { background: transparent; } /* Gecko Browsers */