logo

searx

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

style.less (6671B)


  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. // Main LESS-Code
  9. html {
  10. font-family: "Courier New", Courier, monospace;
  11. font-size: 0.9em;
  12. .text-size-adjust;
  13. color: @color-font;
  14. padding: 0;
  15. margin: 0;
  16. }
  17. body, #container {
  18. padding: 0;
  19. margin: 0;
  20. }
  21. canvas {
  22. image-rendering: optimizeSpeed;
  23. image-rendering: -moz-crisp-edges;
  24. image-rendering: -webkit-optimize-contrast;
  25. image-rendering: optimize-contrast;
  26. image-rendering: pixelated;
  27. -ms-interpolation-mode: nearest-neighbor;
  28. width:32px;
  29. height:32px;
  30. }
  31. #container {
  32. width: 100%;
  33. position: absolute;
  34. top: 0;
  35. }
  36. // Search-Field
  37. @import "search.less";
  38. .row {
  39. max-width: 800px;
  40. margin: 20px auto;
  41. text-align: justify;
  42. h1 {
  43. font-size: 3em;
  44. margin-top: 50px;
  45. }
  46. p {
  47. padding: 0 10px;
  48. max-width: 700px;
  49. }
  50. h3,ul {
  51. margin: 4px 8px;
  52. }
  53. }
  54. .hmarg {
  55. margin: 0 20px;
  56. border: 1px solid @color-hmarg-border;
  57. padding: 4px 10px;
  58. }
  59. a {
  60. &:link.hmarg {
  61. color: @color-hmarg-font;
  62. }
  63. &:visited.hmarg {
  64. color: @color-hmarg-font;
  65. }
  66. &:active.hmarg {
  67. color: @color-hmarg-font-hover;
  68. }
  69. &:hover.hmarg {
  70. color: @color-hmarg-font-hover;
  71. }
  72. }
  73. .top_margin {
  74. margin-top: 60px;
  75. }
  76. .center {
  77. text-align: center;
  78. }
  79. h1 {
  80. font-size: 5em;
  81. }
  82. div.title {
  83. background: url('../img/searx-pixel.png') no-repeat;
  84. width: 100%;
  85. min-height: 80px;
  86. background-position: center;
  87. h1 {
  88. visibility: hidden;
  89. }
  90. }
  91. input[type="button"],
  92. input[type="submit"] {
  93. font-family: "Courier New", Courier, monospace;
  94. padding: 4px 12px;
  95. margin: 2px 4px;
  96. display: inline-block;
  97. background: @color-download-button-background;
  98. color: @color-download-button-font;
  99. .rounded-corners;
  100. border: 0;
  101. cursor: pointer;
  102. }
  103. input[type="button"]:disabled {
  104. cursor: progress;
  105. }
  106. input[type="checkbox"] {
  107. visibility: hidden;
  108. }
  109. fieldset {
  110. margin: 8px;
  111. border: 1px solid @color-settings-fieldset;
  112. }
  113. #logo {
  114. position: absolute;
  115. top: 13px;
  116. left: 10px;
  117. }
  118. #categories {
  119. margin: 0 10px;
  120. .user-select;
  121. }
  122. .checkbox_container {
  123. display: inline-block;
  124. position: relative;
  125. margin: 0 3px;
  126. padding: 0px;
  127. input {
  128. display: none;
  129. }
  130. }
  131. .checkbox_container label, .engine_checkbox label {
  132. cursor: pointer;
  133. padding: 4px 10px;
  134. margin: 0;
  135. display: block;
  136. text-transform: capitalize;
  137. .user-select;
  138. }
  139. .checkbox_container input[type="checkbox"]:checked + label {
  140. background: @color-categories-item-selected;
  141. color: @color-categories-item-selected-font;
  142. }
  143. .engine_checkbox {
  144. padding: 4px;
  145. }
  146. label {
  147. &.allow {
  148. background: @color-settings-label-allowed-background;
  149. padding: 4px 8px;
  150. color: @color-settings-label-allowed-font;
  151. display: none;
  152. }
  153. &.deny {
  154. background: @color-settings-label-deny-background;
  155. padding: 4px 8px;
  156. color: @color-settings-label-deny-font;
  157. display: inline;
  158. }
  159. }
  160. .engine_checkbox input[type="checkbox"]:checked + label {
  161. &:nth-child(2) + label {
  162. display: none;
  163. }
  164. &.allow {
  165. display: inline;
  166. }
  167. }
  168. a {
  169. text-decoration: none;
  170. color: @color-url-font;
  171. &:visited {
  172. color: @color-url-visited-font;
  173. }
  174. }
  175. .engines {
  176. color: @color-engines-font;
  177. }
  178. .small_font {
  179. font-size: 0.8em;
  180. }
  181. .small p {
  182. margin: 2px 0;
  183. }
  184. .right {
  185. float: right;
  186. }
  187. .invisible {
  188. display: none;
  189. }
  190. .left {
  191. float: left;
  192. }
  193. .highlight {
  194. color: @color-highlight;
  195. }
  196. .content .highlight {
  197. color: @color-black;
  198. }
  199. .percentage {
  200. position: relative;
  201. width: 300px;
  202. div {
  203. background: @color-percentage-div-background;
  204. }
  205. }
  206. table {
  207. width: 100%;
  208. }
  209. td {
  210. padding: 0 4px;
  211. }
  212. tr {
  213. &:hover {
  214. background: @color-settings-tr-hover;
  215. }
  216. }
  217. #results {
  218. margin: auto;
  219. padding: 0;
  220. width: @results-width;
  221. margin-bottom: 20px;
  222. }
  223. #search_url {
  224. margin-top: 8px;
  225. input {
  226. border: 1px solid @color-result-search-url-border;
  227. padding: 4px;
  228. color: @color-result-search-url-font;
  229. width: 14em;
  230. display: block;
  231. margin: 4px;
  232. font-size: 0.8em;
  233. }
  234. }
  235. #preferences {
  236. top: 10px;
  237. padding: 0;
  238. border: 0;
  239. background: url('../img/preference-icon-pixel.png') no-repeat;
  240. background-size: 28px 28px;
  241. opacity: 0.8;
  242. width: 28px;
  243. height: 30px;
  244. display: block;
  245. * {
  246. display: none;
  247. }
  248. }
  249. #pagination {
  250. clear: both;
  251. text-align: center;
  252. br {
  253. clear: both;
  254. }
  255. }
  256. #apis {
  257. margin-top: 8px;
  258. clear: both;
  259. }
  260. #categories_container {
  261. position: relative;
  262. }
  263. @media screen and (max-width: @results-width) {
  264. #results {
  265. margin: auto;
  266. padding: 0;
  267. width: 90%;
  268. }
  269. .checkbox_container {
  270. display: block;
  271. width: 90%;
  272. //float: left;
  273. label {
  274. border-bottom: 0;
  275. }
  276. }
  277. .preferences_container {
  278. display: none;
  279. postion: fixed !important;
  280. top: 100px;
  281. right: 0px;
  282. }
  283. }
  284. @media screen and (max-width: 75em) {
  285. div.title {
  286. h1 {
  287. font-size: 1em;
  288. }
  289. }
  290. html.touch #categories {
  291. width: 95%;
  292. height: 30px;
  293. text-align: left;
  294. overflow-x: scroll;
  295. overflow-y: hidden;
  296. -webkit-overflow-scrolling: touch;
  297. #categories_container {
  298. width: 1000px;
  299. width: -moz-max-content;
  300. width: -webkit-max-content;
  301. width: max-content;
  302. .checkbox_container {
  303. display: inline-block;
  304. width: auto;
  305. }
  306. }
  307. }
  308. #categories {
  309. font-size: 90%;
  310. clear: both;
  311. .checkbox_container {
  312. margin-top: 2px;
  313. margin: auto;
  314. }
  315. }
  316. #categories {
  317. font-size: 90%;
  318. clear: both;
  319. .checkbox_container {
  320. margin-top: 2px;
  321. margin: auto;
  322. }
  323. }
  324. #apis {
  325. display: none;
  326. }
  327. #search_url {
  328. display: none;
  329. }
  330. #logo {
  331. display: none;
  332. }
  333. }
  334. .favicon {
  335. float: left;
  336. margin-right: 4px;
  337. margin-top: 2px;
  338. }
  339. .preferences_back {
  340. background: none repeat scroll 0 0 @color-settings-return-background;
  341. border: 0 none;
  342. .rounded-corners;
  343. cursor: pointer;
  344. display: inline-block;
  345. margin: 2px 4px;
  346. padding: 4px 6px;
  347. a {
  348. color: @color-settings-return-font;
  349. }
  350. }
  351. .hidden {
  352. opacity: 0;
  353. overflow: hidden;
  354. font-size: 0.8em;
  355. position: absolute;
  356. bottom: -20px;
  357. width: 100%;
  358. text-position: center;
  359. background: white;
  360. transition: opacity 1s ease;
  361. }
  362. #categories_container:hover .hidden {
  363. transition: opacity 1s ease;
  364. opacity: 0.8;
  365. }