logo

searx

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

style.less (10804B)


  1. /*
  2. * searx, A privacy-respecting, hackable metasearch engine
  3. *
  4. * To convert "style.less" to "style.css" run: $make styles
  5. */
  6. @import "definitions.less";
  7. @import "mixins.less";
  8. @import "code.less";
  9. // Main LESS-Code
  10. html {
  11. font-family: sans-serif;
  12. font-size: 0.9em;
  13. .text-size-adjust;
  14. color: @color-font;
  15. padding: 0;
  16. margin: 0;
  17. }
  18. body, #container {
  19. padding: 0;
  20. margin: 0;
  21. }
  22. #container {
  23. width: 100%;
  24. position: absolute;
  25. top: 0;
  26. }
  27. // Search-Field
  28. @import "search.less";
  29. // Autocompleter
  30. @import "autocompleter.less";
  31. .row {
  32. max-width: 800px;
  33. margin: 20px auto;
  34. text-align: justify;
  35. h1 {
  36. font-size: 3em;
  37. margin-top: 50px;
  38. }
  39. p {
  40. padding: 0 10px;
  41. max-width: 700px;
  42. }
  43. h3,ul {
  44. margin: 4px 8px;
  45. }
  46. }
  47. .hmarg {
  48. margin: 0 20px;
  49. border: 1px solid @color-hmarg-border;
  50. padding: 4px 10px;
  51. }
  52. a {
  53. &:link.hmarg {
  54. color: @color-hmarg-font;
  55. }
  56. &:visited.hmarg {
  57. color: @color-hmarg-font;
  58. }
  59. &:active.hmarg {
  60. color: @color-hmarg-font-hover;
  61. }
  62. &:hover.hmarg {
  63. color: @color-hmarg-font-hover;
  64. }
  65. }
  66. .top_margin {
  67. margin-top: 60px;
  68. }
  69. .center {
  70. text-align: center;
  71. }
  72. h1 {
  73. font-size: 5em;
  74. }
  75. div.title {
  76. background: url('../img/searx.png') no-repeat;
  77. width: 100%;
  78. min-height: 80px;
  79. background-position: center;
  80. h1 {
  81. visibility: hidden;
  82. }
  83. }
  84. input[type="submit"] {
  85. padding: 2px 6px;
  86. margin: 2px 4px;
  87. display: inline-block;
  88. background: @color-download-button-background;
  89. color: @color-download-button-font;
  90. .rounded-corners;
  91. border: 0;
  92. cursor: pointer;
  93. }
  94. input[type="checkbox"] {
  95. visibility: hidden;
  96. }
  97. fieldset {
  98. margin: 8px;
  99. border: 1px solid @color-settings-fieldset;
  100. }
  101. #categories {
  102. margin: 0 10px;
  103. .user-select;
  104. }
  105. .checkbox_container {
  106. display: inline-block;
  107. position: relative;
  108. margin: 0 3px;
  109. padding: 0px;
  110. input {
  111. display: none;
  112. }
  113. }
  114. .checkbox_container label, .engine_checkbox label {
  115. cursor: pointer;
  116. padding: 4px 10px;
  117. margin: 0;
  118. display: block;
  119. text-transform: capitalize;
  120. .user-select;
  121. }
  122. .checkbox_container input[type="checkbox"]:checked + label {
  123. background: @color-categories-item-selected;
  124. color: @color-categories-item-selected-font;
  125. }
  126. .engine_checkbox {
  127. padding: 4px;
  128. }
  129. label {
  130. &.allow {
  131. background: @color-settings-label-allowed-background;
  132. padding: 4px 8px;
  133. color: @color-settings-label-allowed-font;
  134. display: none;
  135. }
  136. &.deny {
  137. background: @color-settings-label-deny-background;
  138. padding: 4px 8px;
  139. color: @color-settings-label-deny-font;
  140. display: inline;
  141. }
  142. }
  143. .engine_checkbox input[type="checkbox"]:checked + label {
  144. &:nth-child(2) + label {
  145. display: none;
  146. }
  147. &.allow {
  148. display: inline;
  149. }
  150. }
  151. a {
  152. text-decoration: none;
  153. color: @color-url-font;
  154. &:visited {
  155. color: @color-url-visited-font;
  156. }
  157. }
  158. .result {
  159. margin: 19px 0 18px 0;
  160. padding: 0;
  161. clear: both;
  162. }
  163. .result_title {
  164. margin-bottom: 0;
  165. a {
  166. color: @color-result-link-font;
  167. font-weight: normal;
  168. font-size: 1.1em;
  169. &:hover {
  170. text-decoration: underline;
  171. }
  172. &:visited {
  173. color: @color-result-link-visited-font;
  174. }
  175. }
  176. }
  177. .cache_link {
  178. font-size: 10px !important;
  179. }
  180. .result {
  181. h3 {
  182. font-size: 1em;
  183. word-wrap:break-word;
  184. margin: 5px 0 1px 0;
  185. padding: 0
  186. }
  187. .content {
  188. font-size: 0.8em;
  189. margin: 0;
  190. padding: 0;
  191. max-width: 54em;
  192. word-wrap:break-word;
  193. line-height: 1.24;
  194. img {
  195. float: left;
  196. margin-right: 5px;
  197. max-width: 200px;
  198. max-height: 100px;
  199. }
  200. br.last {
  201. clear: both;
  202. }
  203. }
  204. .url {
  205. font-size: 0.8em;
  206. margin: 0 0 3px 0;
  207. padding: 0;
  208. max-width: 54em;
  209. word-wrap:break-word;
  210. color: @color-result-url-font;
  211. }
  212. .published_date {
  213. font-size: 0.8em;
  214. color: @color-result-publishdate-font;
  215. Margin: 5px 20px;
  216. }
  217. .thumbnail {
  218. width: 400px;
  219. }
  220. }
  221. .engines {
  222. color: @color-engines-font;
  223. }
  224. .small_font {
  225. font-size: 0.8em;
  226. }
  227. .small p {
  228. margin: 2px 0;
  229. }
  230. .right {
  231. float: right;
  232. }
  233. .invisible {
  234. display: none;
  235. }
  236. .left {
  237. float: left;
  238. }
  239. .highlight {
  240. color: @color-highlight;
  241. }
  242. .content .highlight {
  243. color: @color-black;
  244. }
  245. .image_result {
  246. display: inline-block;
  247. margin: 10px 10px;
  248. position: relative;
  249. max-height: 160px;
  250. img {
  251. border: 0;
  252. max-height: 160px;
  253. }
  254. p {
  255. margin: 0;
  256. padding: 0;
  257. span a {
  258. display: none;
  259. color: @color-result-image-span-font;
  260. }
  261. &:hover span a {
  262. display: block;
  263. position: absolute;
  264. bottom: 0;
  265. right: 0;
  266. padding: 4px;
  267. background-color: @color-result-image-span-background-hover;
  268. font-size: 0.7em;
  269. }
  270. }
  271. }
  272. .torrent_result {
  273. border-left: 10px solid @color-result-torrent-border;
  274. padding-left: 3px;
  275. p {
  276. margin: 3px;
  277. font-size: 0.8em;
  278. }
  279. a {
  280. color: @color-result-link-font;
  281. &:hover {
  282. text-decoration: underline;
  283. }
  284. &:visited {
  285. color: @color-result-link-visited-font;
  286. }
  287. }
  288. }
  289. .definition_result {
  290. border-left: 10px solid @color-result-definition-border;
  291. padding-left: 3px;
  292. }
  293. .percentage {
  294. position: relative;
  295. width: 300px;
  296. div {
  297. background: @color-percentage-div-background;
  298. }
  299. }
  300. table {
  301. width: 100%;
  302. }
  303. td {
  304. padding: 0 4px;
  305. }
  306. tr {
  307. &:hover {
  308. background: @color-settings-tr-hover;
  309. }
  310. }
  311. #results {
  312. margin: auto;
  313. padding: 0;
  314. width: @results-width;
  315. margin-bottom: 20px;
  316. }
  317. #sidebar {
  318. position: fixed;
  319. bottom: 10px;
  320. left: 10px;
  321. margin: 0 2px 5px 5px;
  322. padding: 0 2px 2px 2px;
  323. width: 14em;
  324. input {
  325. padding: 0;
  326. margin: 3px;
  327. font-size: 0.8em;
  328. display: inline-block;
  329. background: transparent;
  330. color: @color-result-search-url-font;
  331. cursor: pointer;
  332. }
  333. input[type="submit"] {
  334. text-decoration: underline;
  335. }
  336. }
  337. #suggestions {
  338. form {
  339. display: inline;
  340. }
  341. }
  342. #suggestions, #answers {
  343. margin-top: 20px;
  344. max-width: 45em;
  345. }
  346. #suggestions, #answers, #infoboxes {
  347. input {
  348. padding: 0;
  349. margin: 3px;
  350. font-size: 0.8em;
  351. display: inline-block;
  352. background: transparent;
  353. color: @color-result-search-url-font;
  354. cursor: pointer;
  355. }
  356. input[type="submit"] {
  357. text-decoration: underline;
  358. }
  359. }
  360. #suggestions-title {
  361. color: @color-font-light;
  362. }
  363. #answers {
  364. border: 2px solid @color-answers-border;
  365. padding: 20px;
  366. }
  367. #answers, #infoboxes {
  368. form {
  369. min-width: 210px;
  370. }
  371. }
  372. #infoboxes {
  373. position: absolute;
  374. top: 100px;
  375. right: 20px;
  376. margin: 0px 2px 5px 5px;
  377. padding: 0px 2px 2px;
  378. max-width: 21em;
  379. word-wrap: break-word;
  380. .infobox {
  381. margin: 10px 0 10px;
  382. border: 1px solid #ddd;
  383. padding: 5px;
  384. font-size: 0.8em;
  385. /* box-shadow: 0px 0px 5px #CCC; */
  386. img {
  387. max-width: 90%;
  388. max-heigt: 12em;
  389. display: block;
  390. margin: 5px;
  391. padding: 5px;
  392. }
  393. h2 {
  394. margin: 0;
  395. }
  396. table {
  397. table-layout: fixed;
  398. td {
  399. vertical-align: top;
  400. }
  401. }
  402. input {
  403. font-size: 1em;
  404. }
  405. br {
  406. clear: both;
  407. }
  408. }
  409. }
  410. #search_url {
  411. margin-top: 8px;
  412. input {
  413. border: 1px solid @color-result-search-url-border;
  414. padding: 4px;
  415. color: @color-result-search-url-font;
  416. width: 14em;
  417. display: block;
  418. margin: 4px;
  419. font-size: 0.8em;
  420. }
  421. }
  422. #preferences {
  423. top: 10px;
  424. padding: 0;
  425. border: 0;
  426. background: url('../img/preference-icon.png') no-repeat;
  427. background-size: 28px 28px;
  428. opacity: 0.8;
  429. width: 28px;
  430. height: 30px;
  431. display: block;
  432. * {
  433. display: none;
  434. }
  435. }
  436. #pagination {
  437. clear: both;
  438. br {
  439. clear: both;
  440. }
  441. }
  442. #apis {
  443. margin-top: 8px;
  444. clear: both;
  445. }
  446. #categories_container {
  447. position: relative;
  448. }
  449. @media screen and (max-width: @results-width) {
  450. #results {
  451. margin: auto;
  452. padding: 0;
  453. width: 90%;
  454. }
  455. .github {
  456. display: none;
  457. }
  458. .checkbox_container {
  459. display: block;
  460. width: 90%;
  461. //float: left;
  462. label {
  463. border-bottom: 0;
  464. }
  465. }
  466. .preferences_container {
  467. display: none;
  468. postion: fixed !important;
  469. top: 100px;
  470. right: 0px;
  471. }
  472. }
  473. @media screen and (max-width: 75em) {
  474. div.title {
  475. h1 {
  476. font-size: 1em;
  477. }
  478. }
  479. html.touch #categories {
  480. width: 95%;
  481. height: 30px;
  482. text-align: left;
  483. overflow-x: scroll;
  484. overflow-y: hidden;
  485. -webkit-overflow-scrolling: touch;
  486. #categories_container {
  487. width: 1000px;
  488. width: -moz-max-content;
  489. width: -webkit-max-content;
  490. width: max-content;
  491. .checkbox_container {
  492. display: inline-block;
  493. width: auto;
  494. }
  495. }
  496. }
  497. #categories {
  498. font-size: 90%;
  499. clear: both;
  500. .checkbox_container {
  501. margin-top: 2px;
  502. margin: auto;
  503. }
  504. }
  505. #suggestions, #answers {
  506. margin-top: 5px;
  507. }
  508. #infoboxes {
  509. position: inherit;
  510. max-width: inherit;
  511. .infobox {
  512. clear:both;
  513. img {
  514. float: left;
  515. max-width: 10em;
  516. }
  517. }
  518. }
  519. #categories {
  520. font-size: 90%;
  521. clear: both;
  522. .checkbox_container {
  523. margin-top: 2px;
  524. margin: auto;
  525. }
  526. }
  527. #sidebar {
  528. position: static;
  529. max-width: @results-width;
  530. margin: 0 0 2px 0;
  531. padding: 0;
  532. float: none;
  533. border: none;
  534. width: auto;
  535. input {
  536. border: 0;
  537. }
  538. }
  539. #apis {
  540. display: none;
  541. }
  542. #search_url {
  543. display: none;
  544. }
  545. .result {
  546. border-top: 1px solid @color-result-top-border;
  547. margin: 8px 0 8px 0;
  548. .thumbnail {
  549. max-width: 98%;
  550. }
  551. }
  552. .image_result {
  553. max-width: 98%;
  554. img {
  555. max-width: 98%;
  556. }
  557. }
  558. }
  559. .favicon {
  560. float: left;
  561. margin-right: 4px;
  562. margin-top: 2px;
  563. }
  564. .preferences_back {
  565. background: none repeat scroll 0 0 @color-settings-return-background;
  566. border: 0 none;
  567. .rounded-corners;
  568. cursor: pointer;
  569. display: inline-block;
  570. margin: 2px 4px;
  571. padding: 4px 6px;
  572. a {
  573. color: @color-settings-return-font;
  574. }
  575. }
  576. .hidden {
  577. opacity: 0;
  578. overflow: hidden;
  579. font-size: 0.8em;
  580. position: absolute;
  581. bottom: -20px;
  582. width: 100%;
  583. text-position: center;
  584. background: white;
  585. transition: opacity 1s ease;
  586. }
  587. #categories_container:hover .hidden {
  588. transition: opacity 1s ease;
  589. opacity: 0.8;
  590. }