toolkit.less 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648
  1. // other solution : http://stackoverflow.com/questions/1577598/how-to-hide-parts-of-html-when-javascript-is-disabled/13857783#13857783
  2. // stylelint-disable no-descending-specificity
  3. html.no-js .hide_if_nojs {
  4. display: none;
  5. }
  6. html.js .show_if_nojs {
  7. display: none;
  8. }
  9. .center {
  10. text-align: center;
  11. }
  12. .right {
  13. float: right;
  14. }
  15. .left {
  16. float: left;
  17. }
  18. .invisible {
  19. display: none !important;
  20. }
  21. .list-unstyled {
  22. list-style-type: none;
  23. li {
  24. margin-top: 4px;
  25. margin-bottom: 4px;
  26. }
  27. }
  28. .danger {
  29. background-color: var(--color-error-background);
  30. }
  31. .warning {
  32. background: var(--color-warning-background);
  33. }
  34. .success {
  35. background: var(--color-success-background);
  36. }
  37. .badge {
  38. display: inline-block;
  39. color: var(--color-toolkit-badge-font);
  40. background-color: var(--color-toolkit-badge-background);
  41. text-align: center;
  42. white-space: nowrap;
  43. vertical-align: baseline;
  44. min-width: 10px;
  45. padding: 1px 5px;
  46. border-radius: 5px;
  47. }
  48. // kbd
  49. kbd {
  50. padding: 2px 4px;
  51. margin: 1px;
  52. font-size: 90%;
  53. color: var(--color-toolkit-kbd-font);
  54. background: var(--color-toolkit-kbd-background);
  55. }
  56. // table
  57. table {
  58. width: 100%;
  59. &.striped {
  60. tr {
  61. border-bottom: 1px solid var(--color-settings-tr-hover);
  62. }
  63. }
  64. }
  65. th {
  66. padding: 0.4em;
  67. }
  68. td {
  69. padding: 0 4px;
  70. }
  71. tr {
  72. &:hover {
  73. background: var(--color-settings-tr-hover) !important;
  74. }
  75. }
  76. // pre
  77. .pre() {
  78. display: block;
  79. font-size: 0.8em;
  80. word-break: break-all;
  81. margin: 0.1em;
  82. user-select: all;
  83. }
  84. div.selectable_url {
  85. display: block;
  86. border: 1px solid var(--color-result-search-url-border);
  87. padding: 4px;
  88. color: var(--color-result-search-url-font);
  89. margin: 0.1em;
  90. overflow: hidden;
  91. height: 1.2em;
  92. line-height: 1.2em;
  93. .rounded-corners-tiny;
  94. pre {
  95. .pre();
  96. }
  97. }
  98. // dialog
  99. .dialog() {
  100. position: relative;
  101. display: flex;
  102. padding: 1rem;
  103. margin: 0 0 1em 0;
  104. border: 1px solid var(--color-toolkit-dialog-border);
  105. .ltr-text-align-left();
  106. .rounded-corners;
  107. .close {
  108. .ltr-float-right();
  109. position: relative;
  110. top: -3px;
  111. color: inherit;
  112. font-size: 1.5em;
  113. }
  114. ul,
  115. ol,
  116. p {
  117. margin: 1px 0 0 0;
  118. }
  119. table {
  120. width: auto;
  121. }
  122. tr {
  123. vertical-align: text-top;
  124. &:hover {
  125. background: transparent !important;
  126. }
  127. }
  128. td {
  129. padding: 0 1em 0 0;
  130. padding-top: 0;
  131. .ltr-padding-right(1rem);
  132. padding-bottom: 0;
  133. .ltr-padding-left(0);
  134. }
  135. h4 {
  136. margin-top: 0.3em;
  137. margin-bottom: 0.3em;
  138. }
  139. }
  140. .dialog-error {
  141. .dialog();
  142. color: var(--color-error);
  143. background: var(--color-error-background);
  144. border-color: var(--color-error);
  145. }
  146. .dialog-error-block {
  147. .dialog();
  148. display: block;
  149. color: var(--color-error);
  150. background: var(--color-error-background);
  151. border-color: var(--color-error);
  152. }
  153. .dialog-warning {
  154. .dialog();
  155. color: var(--color-warning);
  156. background: var(--color-warning-background);
  157. border-color: var(--color-warning);
  158. }
  159. .dialog-modal {
  160. .dialog();
  161. display: block;
  162. background: var(--color-toolkit-dialog-background);
  163. position: fixed;
  164. top: 50%;
  165. left: 50%;
  166. margin: 0 auto;
  167. transform: translate(-50%, -50%);
  168. z-index: 10000000;
  169. h3 {
  170. margin-top: 0;
  171. }
  172. }
  173. // btn-collapse
  174. .btn-collapse {
  175. cursor: pointer;
  176. }
  177. //
  178. .scrollx {
  179. overflow-x: auto;
  180. overflow-y: hidden;
  181. display: block;
  182. padding: 0;
  183. margin: 0;
  184. border: none;
  185. }
  186. /* -- tabs -- */
  187. .tabs .tabs > label {
  188. font-size: 90%;
  189. }
  190. ul.tabs {
  191. border-bottom: 1px solid var(--color-toolkit-tabs-section-border);
  192. list-style: none;
  193. padding-left: 0;
  194. li {
  195. display: flex;
  196. }
  197. }
  198. .tabs {
  199. display: flex;
  200. flex-wrap: wrap;
  201. width: 100%;
  202. min-width: 100%;
  203. & > * {
  204. order: 2;
  205. }
  206. & > input[type=radio] {
  207. display: none;
  208. }
  209. & > label,
  210. & > li > a {
  211. order: 1;
  212. padding: 0.7em;
  213. margin: 0 0.7em;
  214. letter-spacing: 0.5px;
  215. text-transform: uppercase;
  216. border: solid var(--color-toolkit-tabs-label-border);
  217. border-width: 0 0 2px 0;
  218. color: unset;
  219. .disable-user-select();
  220. cursor: pointer;
  221. &.active {
  222. border-bottom: 2px solid var(--color-categories-item-border-selected);
  223. background: var(--color-categories-item-selected);
  224. color: var(--color-categories-item-selected-font);
  225. }
  226. }
  227. & > label:hover,
  228. & > li > a:hover {
  229. border-bottom: 2px solid var(--color-categories-item-border-selected);
  230. }
  231. & > section {
  232. min-width: 100%;
  233. padding: 0.7rem 0;
  234. box-sizing: border-box;
  235. border-top: 1px solid var(--color-toolkit-tabs-section-border);
  236. display: none;
  237. }
  238. // default selection
  239. & > label:last-of-type {
  240. border-bottom: 2px solid var(--color-categories-item-border-selected);
  241. background: var(--color-categories-item-selected);
  242. color: var(--color-categories-item-selected-font);
  243. letter-spacing: -0.1px;
  244. }
  245. & > section:last-of-type {
  246. display: block;
  247. }
  248. }
  249. html body .tabs > input:checked {
  250. ~ section {
  251. display: none;
  252. }
  253. ~ label {
  254. position: inherited;
  255. background: inherit;
  256. border-bottom: 2px solid transparent;
  257. font-weight: normal;
  258. color: inherit;
  259. &:hover {
  260. border-bottom: 2px solid var(--color-categories-item-border-selected);
  261. }
  262. }
  263. + label {
  264. border-bottom: 2px solid var(--color-categories-item-border-selected);
  265. background: var(--color-categories-item-selected);
  266. color: var(--color-categories-item-selected-font);
  267. }
  268. + label + section {
  269. display: block;
  270. }
  271. }
  272. /* -- select -- */
  273. select {
  274. height: 2.4rem;
  275. margin-top: 0;
  276. .ltr-margin-right(1rem);
  277. margin-bottom: 0;
  278. .ltr-margin-left(0);
  279. padding: 0.2rem !important;
  280. color: var(--color-search-font);
  281. font-size: 0.9rem;
  282. z-index: 2;
  283. &:hover,
  284. &:focus {
  285. cursor: pointer;
  286. }
  287. }
  288. @supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) {
  289. select {
  290. appearance: none;
  291. -webkit-appearance: none;
  292. -moz-appearance: none;
  293. border-width: 0 2rem 0 0;
  294. border-color: transparent;
  295. background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat;
  296. background-position-x: calc(100% + 2rem);
  297. background-size: 2rem;
  298. background-origin: content-box;
  299. background-color: var(--color-toolkit-select-background);
  300. outline: medium none;
  301. text-overflow: ellipsis;
  302. .rounded-corners-tiny;
  303. &:hover,
  304. &:focus {
  305. background-color: var(--color-toolkit-select-background-hover);
  306. }
  307. option {
  308. background-color: var(--color-base-background);
  309. }
  310. }
  311. @media (prefers-color-scheme: dark) {
  312. html.theme-auto select,
  313. html.theme-dark select {
  314. background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
  315. }
  316. }
  317. html.theme-dark select {
  318. background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
  319. }
  320. }
  321. /* -- checkbox-onoff -- */
  322. input.checkbox-onoff[type="checkbox"] {
  323. -webkit-appearance: none;
  324. -moz-appearance: none;
  325. appearance: none;
  326. cursor: pointer;
  327. display: inline-block;
  328. width: 2.5em;
  329. height: 0.7em;
  330. box-shadow: none !important;
  331. margin: 0 16px;
  332. border-radius: 10px;
  333. position: relative;
  334. /* focus & hover */
  335. &:focus,
  336. &:hover {
  337. outline: none;
  338. }
  339. &:focus::after {
  340. content: "";
  341. position: absolute;
  342. width: 3.5em;
  343. height: 1.65em;
  344. border: 1px solid var(--color-btn-background);
  345. border-radius: 12px;
  346. box-shadow: var(--color-btn-background) 0 0 3px;
  347. z-index: 10000;
  348. top: -0.55em;
  349. left: -0.6em;
  350. }
  351. &::before {
  352. position: absolute;
  353. top: -0.5em;
  354. display: flex;
  355. justify-content: center;
  356. align-items: center;
  357. font-size: 0.75em;
  358. width: 1.875em;
  359. height: 1.875em;
  360. border-radius: 50%;
  361. }
  362. }
  363. /* check mark
  364. reversed-checkbox displays unchecked checkedboxes as checked, and vice versa.
  365. see https://github.com/searxng/searxng/blob/3408d061aab9abc6168fec9bbc6deab71b236dac/searx/templates/simple/preferences.html#L313
  366. */
  367. input.checkbox-onoff[type="checkbox"],
  368. input.checkbox-onoff.reversed-checkbox[type="checkbox"]:checked {
  369. background: var(--color-toolkit-checkbox-onoff-off-background);
  370. &::before {
  371. left: -0.5em;
  372. content: "\2715";
  373. color: var(--color-toolkit-checkbox-onoff-off-mark-color);
  374. background: var(--color-toolkit-checkbox-onoff-off-mark-background);
  375. }
  376. }
  377. input.checkbox-onoff[type="checkbox"]:checked,
  378. input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
  379. background: var(--color-toolkit-checkbox-onoff-on-background);
  380. &::before {
  381. left: calc(100% - 1.5em);
  382. content: "\2713";
  383. color: var(--color-toolkit-checkbox-onoff-on-mark-color);
  384. background: var(--color-toolkit-checkbox-onoff-on-mark-background);
  385. }
  386. }
  387. /* -- checkbox -- */
  388. @supports (transform: rotate(-45deg)) {
  389. input[type=checkbox]:not(.checkbox-onoff) {
  390. -webkit-appearance: none;
  391. -moz-appearance: none;
  392. appearance: none;
  393. width: 20px;
  394. height: 20px;
  395. cursor: pointer;
  396. position: relative;
  397. top: 0;
  398. left: 0;
  399. border: 2px solid var(--color-toolkit-checkbox-input-border);
  400. .rounded-corners(0.3em);
  401. &::after {
  402. content: '';
  403. width: 9px;
  404. height: 5px;
  405. position: absolute;
  406. top: 3px;
  407. left: 2px;
  408. border: 3px solid var(--color-toolkit-checkbox-label-border);
  409. border-top: none;
  410. border-right: none;
  411. background: transparent;
  412. opacity: 0;
  413. transform: rotate(-45deg);
  414. }
  415. &:checked::after {
  416. border-color: var(--color-toolkit-checkbox-input-border);
  417. opacity: 1;
  418. }
  419. }
  420. // disabled : can't be focused, show only the check mark
  421. input[type=checkbox][disabled]:not(.checkbox-onoff) {
  422. border: inherit;
  423. background-color: transparent !important;
  424. cursor: inherit;
  425. }
  426. // if not checked and possible to checked then display a "light" check mark on hover
  427. input.checkbox[type=checkbox]:not(:checked):not([disabled]):not(.checkbox-onoff):hover::after {
  428. opacity: 0.5;
  429. }
  430. }
  431. @media screen and (max-width: @phone) {
  432. .tabs > label {
  433. width: 100%;
  434. }
  435. }
  436. /* -- loader -- */
  437. .loader,
  438. .loader::after {
  439. border-radius: 50%;
  440. width: 2em;
  441. height: 2em;
  442. }
  443. .loader {
  444. margin: 1em auto;
  445. font-size: 10px;
  446. position: relative;
  447. text-indent: -9999em;
  448. border-top: 0.5em solid var(--color-toolkit-loader-border);
  449. border-right: 0.5em solid var(--color-toolkit-loader-border);
  450. border-bottom: 0.5em solid var(--color-toolkit-loader-border);
  451. border-left: 0.5em solid var(--color-toolkit-loader-borderleft);
  452. -webkit-transform: translateZ(0);
  453. -ms-transform: translateZ(0);
  454. transform: translateZ(0);
  455. -webkit-animation: load8 1.2s infinite linear;
  456. animation: load8 1.2s infinite linear;
  457. }
  458. @-webkit-keyframes load8 {
  459. 0% {
  460. -webkit-transform: rotate(0deg);
  461. transform: rotate(0deg);
  462. }
  463. 100% {
  464. -webkit-transform: rotate(360deg);
  465. transform: rotate(360deg);
  466. }
  467. }
  468. @keyframes load8 {
  469. 0% {
  470. -webkit-transform: rotate(0deg);
  471. transform: rotate(0deg);
  472. }
  473. 100% {
  474. -webkit-transform: rotate(360deg);
  475. transform: rotate(360deg);
  476. }
  477. }
  478. /* -- engine-tooltip -- */
  479. .engine-tooltip {
  480. display: none;
  481. position: absolute;
  482. padding: 0.5rem 1rem;
  483. margin: 0 0 0 2rem;
  484. border: 1px solid var(--color-toolkit-engine-tooltip-border);
  485. background: var(--color-toolkit-engine-tooltip-background);
  486. font-size: 14px;
  487. font-weight: normal;
  488. z-index: 1000000;
  489. text-align: left;
  490. .rounded-corners;
  491. }
  492. th:hover .engine-tooltip,
  493. td:hover .engine-tooltip,
  494. .engine-tooltip:hover {
  495. display: inline-block;
  496. }
  497. /* -- stacked bar chart -- */
  498. .stacked-bar-chart {
  499. margin: 0;
  500. padding: 0 0.125rem 0 4rem;
  501. width: 100%;
  502. width: -moz-available;
  503. width: -webkit-fill-available;
  504. width: fill;
  505. flex-direction: row;
  506. flex-wrap: nowrap;
  507. align-items: center;
  508. display: inline-flex;
  509. }
  510. .stacked-bar-chart-value {
  511. width: 3rem;
  512. display: inline-block;
  513. position: absolute;
  514. padding: 0 0.5rem;
  515. text-align: right;
  516. }
  517. .stacked-bar-chart-base {
  518. display: flex;
  519. flex-shrink: 0;
  520. flex-grow: 0;
  521. flex-basis: unset;
  522. }
  523. .stacked-bar-chart-median {
  524. .stacked-bar-chart-base();
  525. background: var(--color-base-font);
  526. border: 1px solid rgba(var(--color-base-font-rgb), 0.9);
  527. padding: 0.3rem 0;
  528. }
  529. .stacked-bar-chart-rate80 {
  530. .stacked-bar-chart-base();
  531. background: transparent;
  532. border: 1px solid rgba(var(--color-base-font-rgb), 0.3);
  533. padding: 0.3rem 0;
  534. }
  535. .stacked-bar-chart-rate95 {
  536. .stacked-bar-chart-base();
  537. background: transparent;
  538. border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5);
  539. padding: 0;
  540. }
  541. .stacked-bar-chart-rate100 {
  542. .stacked-bar-chart-base();
  543. background: transparent;
  544. border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9);
  545. padding: 0.4rem 0;
  546. width: 1px;
  547. }