style.less 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128
  1. /*
  2. * SearXNG, A privacy-respecting, hackable metasearch engine
  3. *
  4. * To convert "style.less" to "style.css" run: $make styles
  5. */
  6. // stylelint-disable no-descending-specificity
  7. @import (inline) "../../node_modules/normalize.css/normalize.css";
  8. @import "definitions.less";
  9. @import "mixins.less";
  10. @import "code.less";
  11. @import "toolkit.less";
  12. @import "autocomplete.less";
  13. @import "detail.less";
  14. @import "animations.less";
  15. @import "embedded.less";
  16. @import "info.less";
  17. @import "new_issue.less";
  18. @import "stats.less";
  19. @import "result_templates.less";
  20. // for index.html template
  21. @import "index.less";
  22. // for preferences.html template
  23. @import "preferences.less";
  24. // Search-Field
  25. @import "search.less";
  26. // to center the results
  27. @import "style-center.less";
  28. // ion-icon
  29. .ion-icon {
  30. display: inline-block;
  31. vertical-align: bottom;
  32. line-height: 1;
  33. text-decoration: inherit;
  34. .ltr-transform();
  35. }
  36. .ion-icon-small {
  37. width: 1rem;
  38. height: 1rem;
  39. .ion-icon;
  40. }
  41. .ion-icon-big {
  42. width: 1.5rem;
  43. height: 1.5rem;
  44. .ion-icon;
  45. }
  46. // Main LESS-Code
  47. html {
  48. font-family: sans-serif;
  49. font-size: 0.9em;
  50. .text-size-adjust;
  51. color: var(--color-base-font);
  52. background-color: var(--color-base-background);
  53. padding: 0;
  54. margin: 0;
  55. scroll-behavior: smooth;
  56. }
  57. body,
  58. main {
  59. padding: 0;
  60. margin: 0;
  61. }
  62. body {
  63. display: flex;
  64. flex-direction: column;
  65. height: 100vh;
  66. margin: 0;
  67. }
  68. main {
  69. width: 100%;
  70. margin-bottom: 2rem;
  71. flex: 1;
  72. }
  73. .page_with_header {
  74. margin: 2em auto;
  75. width: 85em;
  76. }
  77. footer {
  78. clear: both;
  79. min-height: 4rem;
  80. padding: 1rem 0;
  81. width: 100%;
  82. text-align: center;
  83. background-color: var(--color-footer-background);
  84. border-top: 1px solid var(--color-footer-border);
  85. overflow: hidden;
  86. p {
  87. font-size: 0.9em;
  88. }
  89. }
  90. .page_with_header .logo {
  91. height: 40px;
  92. }
  93. input[type="submit"],
  94. #results button[type="submit"],
  95. .button {
  96. padding: 0.7rem;
  97. display: inline-block;
  98. background: var(--color-btn-background);
  99. color: var(--color-btn-font);
  100. .rounded-corners;
  101. border: 0;
  102. cursor: pointer;
  103. }
  104. a {
  105. text-decoration: none;
  106. color: var(--color-url-font);
  107. &:visited {
  108. color: var(--color-url-visited-font);
  109. .highlight {
  110. color: var(--color-url-visited-font);
  111. }
  112. }
  113. }
  114. article[data-vim-selected] {
  115. background: var(--color-result-vim-selected);
  116. .ltr-border-left(0.2rem solid var(--color-result-vim-arrow));
  117. .ltr-rounded-right-corners(10px);
  118. }
  119. article.result-images[data-vim-selected] {
  120. background: var(--color-result-vim-arrow);
  121. border: none;
  122. .rounded-corners;
  123. .image_thumbnail {
  124. filter: opacity(60%);
  125. }
  126. span.title,
  127. span.source {
  128. color: var(--color-result-image-span-font-selected);
  129. }
  130. }
  131. article[data-vim-selected].category-videos,
  132. article[data-vim-selected].category-news,
  133. article[data-vim-selected].category-map,
  134. article[data-vim-selected].category-music,
  135. article[data-vim-selected].category-files,
  136. article[data-vim-selected].category-social {
  137. border: 1px solid var(--color-result-vim-arrow);
  138. .rounded-corners;
  139. }
  140. .result {
  141. margin: @results-margin 0;
  142. padding: @result-padding;
  143. .ltr-border-left(0.2rem solid transparent);
  144. h3 {
  145. font-size: 1.2rem;
  146. word-wrap: break-word;
  147. margin: 0.4rem 0 0.4rem 0;
  148. padding: 0;
  149. a {
  150. color: var(--color-result-link-font);
  151. font-weight: normal;
  152. font-size: 1.1em;
  153. &:visited {
  154. color: var(--color-result-link-visited-font);
  155. }
  156. &:focus,
  157. &:hover {
  158. text-decoration: underline;
  159. border: none;
  160. outline: none;
  161. }
  162. }
  163. }
  164. .cache_link,
  165. .proxyfied_link {
  166. font-size: smaller !important;
  167. margin-left: 0.5rem;
  168. }
  169. .content,
  170. .stat {
  171. font-size: 0.9em;
  172. margin: 0;
  173. padding: 0;
  174. max-width: 54em;
  175. word-wrap: break-word;
  176. line-height: 1.24;
  177. .highlight {
  178. color: var(--color-result-description-highlight-font);
  179. background: inherit;
  180. font-weight: bold;
  181. }
  182. }
  183. .altlink a {
  184. font-size: 0.9em;
  185. margin: 0 10px 0 0;
  186. .show-content-button;
  187. }
  188. .codelines {
  189. .highlight {
  190. color: inherit;
  191. background: inherit;
  192. font-weight: normal;
  193. }
  194. }
  195. .url_wrapper {
  196. display: flex;
  197. font-size: 1rem;
  198. color: var(--color-result-url-font);
  199. flex-wrap: nowrap;
  200. overflow: hidden;
  201. flex-direction: row;
  202. margin: 0;
  203. padding: 0;
  204. .url_o1 {
  205. white-space: nowrap;
  206. flex-shrink: 1;
  207. }
  208. .url_o1::after {
  209. content: " ";
  210. width: 1ch;
  211. display: inline-block;
  212. }
  213. .url_o2 {
  214. overflow: hidden;
  215. white-space: nowrap;
  216. flex-basis: content;
  217. flex-grow: 0;
  218. flex-shrink: 1;
  219. text-align: right;
  220. .url_i2 {
  221. float: right;
  222. }
  223. }
  224. }
  225. .published_date,
  226. .result_length,
  227. .result_author,
  228. .result_shipping,
  229. .result_source_country {
  230. font-size: 0.8em;
  231. color: var(--color-result-publishdate-font);
  232. }
  233. .result_price {
  234. font-size: 1.2em;
  235. color: var(--color-result-description-highlight-font);
  236. }
  237. img {
  238. &.thumbnail {
  239. .ltr-float-left();
  240. padding-top: 0.6rem;
  241. .ltr-padding-right(1rem);
  242. width: 20rem;
  243. height: unset; // remove heigth value that was needed for lazy loading
  244. }
  245. &.image {
  246. .ltr-float-left();
  247. padding-top: 0.6rem;
  248. .ltr-padding-right(1rem);
  249. width: 7rem;
  250. max-height: 7rem;
  251. object-fit: scale-down;
  252. object-position: right top;
  253. }
  254. }
  255. .break {
  256. clear: both;
  257. }
  258. }
  259. .result-paper,
  260. .result-packages {
  261. .attributes {
  262. display: table;
  263. border-spacing: 0.125rem;
  264. div {
  265. display: table-row;
  266. span {
  267. font-size: 0.9rem;
  268. margin-top: 0.25rem;
  269. display: table-cell;
  270. time {
  271. font-size: 0.9rem;
  272. }
  273. }
  274. span:first-child {
  275. color: var(--color-base-font);
  276. min-width: 10rem;
  277. }
  278. span:nth-child(2) {
  279. color: var(--color-result-publishdate-font);
  280. }
  281. }
  282. }
  283. .content {
  284. margin-top: 0.25rem;
  285. }
  286. .comments {
  287. font-size: 0.9rem;
  288. margin: 0.25rem 0 0 0;
  289. padding: 0;
  290. word-wrap: break-word;
  291. line-height: 1.24;
  292. font-style: italic;
  293. }
  294. }
  295. .result-packages {
  296. .attributes {
  297. margin-top: 0.3rem;
  298. }
  299. }
  300. .template_group_images {
  301. display: flex;
  302. flex-wrap: wrap;
  303. }
  304. .template_group_images::after {
  305. flex-grow: 10;
  306. content: "";
  307. }
  308. .category-videos,
  309. .category-news,
  310. .category-map,
  311. .category-music,
  312. .category-files,
  313. .category-social {
  314. border: 1px solid var(--color-result-border);
  315. margin: 0 @results-tablet-offset 1rem @results-tablet-offset !important;
  316. .rounded-corners;
  317. }
  318. .category-social .image {
  319. width: auto !important;
  320. min-width: 48px;
  321. min-height: 48px;
  322. padding: 0 5px 25px 0 !important;
  323. }
  324. .audio-control audio {
  325. width: 100%;
  326. padding: 10px 0 0 0;
  327. }
  328. .embedded-content iframe {
  329. width: 100%;
  330. padding: 10px 0 0 0;
  331. }
  332. .result-videos .content {
  333. overflow: hidden;
  334. }
  335. .result-videos .embedded-video iframe {
  336. width: 100%;
  337. aspect-ratio: 16 / 9;
  338. padding: 10px 0 0 0;
  339. }
  340. @supports not (aspect-ratio: 1 / 1) {
  341. // support older browsers which do not have aspect-ratio
  342. // https://caniuse.com/?search=aspect-ratio
  343. .result-videos .embedded-video iframe {
  344. height: calc(@results-width * 9 / 16);
  345. }
  346. }
  347. .engines {
  348. .ltr-float-right();
  349. display: flex;
  350. flex-wrap: wrap;
  351. justify-content: flex-end;
  352. color: var(--color-result-engines-font);
  353. span {
  354. font-size: smaller;
  355. margin-top: 0;
  356. margin-bottom: 0;
  357. .ltr-margin-right(0.5rem);
  358. .ltr-margin-left(0);
  359. }
  360. }
  361. .small_font {
  362. font-size: 0.8em;
  363. }
  364. .highlight {
  365. color: var(--color-result-link-font-highlight);
  366. background: inherit;
  367. }
  368. .empty_element {
  369. font-style: italic;
  370. }
  371. .result-images {
  372. flex-grow: 1;
  373. padding: 0.5rem 0.5rem 3rem 0.5rem;
  374. margin: 0.25rem;
  375. border: none !important;
  376. height: @results-image-row-height;
  377. & > a {
  378. position: relative;
  379. outline: none;
  380. }
  381. img {
  382. margin: 0;
  383. padding: 0;
  384. border: none;
  385. height: 100%;
  386. width: 100%;
  387. object-fit: cover;
  388. vertical-align: bottom;
  389. background: var(--color-result-image-background);
  390. }
  391. span.title,
  392. span.source {
  393. display: block;
  394. position: absolute;
  395. width: 100%;
  396. font-size: 0.9rem;
  397. color: var(--color-result-image-span-font);
  398. padding: 0.5rem 0 0 0;
  399. overflow: hidden;
  400. text-overflow: ellipsis;
  401. white-space: nowrap;
  402. }
  403. span.source {
  404. padding: 1.8rem 0 0 0;
  405. font-size: 0.7rem;
  406. }
  407. }
  408. .result-map {
  409. img.image {
  410. .ltr-float-right() !important;
  411. height: 100px !important;
  412. width: auto !important;
  413. }
  414. table {
  415. font-size: 0.9em;
  416. width: auto;
  417. border-collapse: separate;
  418. border-spacing: 0 0.35rem;
  419. th {
  420. font-weight: inherit;
  421. width: 17rem;
  422. vertical-align: top;
  423. .ltr-text-align-left();
  424. }
  425. td {
  426. vertical-align: top;
  427. .ltr-text-align-left();
  428. }
  429. }
  430. }
  431. .hidden {
  432. display: none !important;
  433. }
  434. #results {
  435. margin-top: 1rem;
  436. .ltr-margin-right(2rem);
  437. margin-bottom: 0;
  438. .ltr-margin-left(@results-offset);
  439. display: grid;
  440. grid-template-columns: @results-width @results-sidebar-width;
  441. grid-template-rows: min-content min-content 1fr min-content;
  442. gap: 0 @results-gap;
  443. grid-template-areas:
  444. "corrections sidebar"
  445. "answers sidebar"
  446. "urls sidebar"
  447. "pagination sidebar";
  448. }
  449. #results #sidebar *:first-child {
  450. margin-top: 0;
  451. }
  452. #urls {
  453. padding: 0;
  454. grid-area: urls;
  455. }
  456. #apis .wrapper {
  457. display: flex;
  458. }
  459. #suggestions {
  460. .wrapper {
  461. display: flex;
  462. flex-flow: column;
  463. justify-content: flex-end;
  464. form {
  465. display: inline-block;
  466. flex: 1 1 50%;
  467. }
  468. }
  469. }
  470. #suggestions,
  471. #infoboxes {
  472. input {
  473. padding: 0;
  474. margin: 3px;
  475. font-size: 0.9em;
  476. display: inline-block;
  477. background: transparent;
  478. color: var(--color-result-search-url-font);
  479. cursor: pointer;
  480. width: calc(100%);
  481. text-overflow: ellipsis;
  482. overflow: hidden;
  483. text-align: left;
  484. }
  485. input[type="submit"],
  486. .infobox .url a {
  487. color: var(--color-result-link-font);
  488. text-decoration: none;
  489. font-size: 0.9rem;
  490. &:hover {
  491. text-decoration: underline;
  492. }
  493. }
  494. }
  495. #corrections {
  496. grid-area: corrections;
  497. display: flex;
  498. flex-flow: row wrap;
  499. margin: 0 0 1em 0;
  500. h4,
  501. input[type="submit"] {
  502. display: inline-block;
  503. padding: 0.5rem;
  504. margin: 0.5rem;
  505. }
  506. input[type="submit"] {
  507. font-size: 0.8rem;
  508. .rounded-corners-tiny;
  509. }
  510. }
  511. #infoboxes .title,
  512. #suggestions .title,
  513. #search_url .title,
  514. #engines_msg .title,
  515. #apis .title {
  516. margin: 2em 0 0.5em 0;
  517. color: var(--color-base-font);
  518. }
  519. summary.title {
  520. cursor: pointer;
  521. padding-top: 1em;
  522. }
  523. .sidebar-collapsable {
  524. border-top: 1px solid var(--color-sidebar-border);
  525. padding-bottom: 0.5em;
  526. }
  527. #sidebar-end-collapsable {
  528. border-bottom: 1px solid var(--color-sidebar-border);
  529. width: 100%;
  530. }
  531. #answers {
  532. grid-area: answers;
  533. background: var(--color-answer-background);
  534. padding: @result-padding;
  535. margin: 1rem 0;
  536. margin-top: 0;
  537. color: var(--color-answer-font);
  538. .rounded-corners;
  539. h4 {
  540. display: none;
  541. }
  542. span {
  543. overflow-wrap: anywhere;
  544. }
  545. .answer {
  546. display: flex;
  547. flex-direction: column;
  548. }
  549. .answer-url {
  550. margin-left: auto;
  551. margin-top: 5px;
  552. margin-right: 10px;
  553. margin-bottom: 10px;
  554. }
  555. }
  556. #infoboxes {
  557. form {
  558. min-width: 210px;
  559. }
  560. }
  561. #sidebar {
  562. grid-area: sidebar;
  563. word-wrap: break-word;
  564. color: var(--color-sidebar-font);
  565. .infobox {
  566. margin: 10px 0 10px;
  567. border: 1px solid var(--color-sidebar-border);
  568. padding: 1rem;
  569. font-size: 0.9em;
  570. .rounded-corners;
  571. h2 {
  572. margin: 0 0 0.5em 0;
  573. }
  574. img {
  575. max-width: 100%;
  576. max-height: 12em;
  577. display: block;
  578. margin: 0 auto;
  579. padding: 0;
  580. }
  581. dt {
  582. font-weight: bold;
  583. }
  584. .attributes {
  585. dl {
  586. margin: 0.5em 0;
  587. }
  588. dt {
  589. display: inline;
  590. margin-top: 0.5em;
  591. .ltr-margin-right(0.25em);
  592. margin-bottom: 0.5em;
  593. .ltr-margin-left(0);
  594. padding: 0;
  595. }
  596. dd {
  597. display: inline;
  598. margin: 0.5em 0;
  599. padding: 0;
  600. }
  601. }
  602. input {
  603. font-size: 1em;
  604. }
  605. br {
  606. clear: both;
  607. }
  608. .attributes,
  609. .urls {
  610. clear: both;
  611. }
  612. }
  613. }
  614. #apis {
  615. input {
  616. font-size: 0.9em;
  617. margin: 0 10px 0 0;
  618. .show-content-button;
  619. }
  620. }
  621. #search_url {
  622. div.selectable_url {
  623. pre {
  624. float: left;
  625. width: 200em;
  626. }
  627. }
  628. button#copy_url {
  629. float: right;
  630. padding: 0.4rem;
  631. margin-left: 0.5rem;
  632. border-radius: 0.3rem;
  633. display: none; // will be shown by JS.
  634. }
  635. }
  636. #links_on_top {
  637. position: absolute;
  638. .ltr-right(1rem);
  639. .ltr-text-align-right();
  640. top: 2.7rem;
  641. padding: 0;
  642. border: 0;
  643. display: flex;
  644. align-items: center;
  645. font-size: 1em;
  646. color: var(--color-search-font);
  647. a {
  648. display: flex;
  649. align-items: center;
  650. margin-left: 1em;
  651. svg {
  652. font-size: 1.2em;
  653. .ltr-margin-right(0.125em);
  654. }
  655. }
  656. a,
  657. a:link *,
  658. a:hover *,
  659. a:visited *,
  660. a:active * {
  661. color: var(--color-search-font);
  662. }
  663. }
  664. #pagination {
  665. grid-area: pagination;
  666. br {
  667. clear: both;
  668. }
  669. }
  670. .numbered_pagination {
  671. display: flex;
  672. flex-direction: row;
  673. justify-content: center;
  674. align-items: center;
  675. overflow: hidden;
  676. }
  677. .page_number {
  678. background: transparent !important;
  679. color: var(--color-result-link-font) !important;
  680. text-decoration: underline;
  681. }
  682. .page_number_current {
  683. background: transparent;
  684. color: var(--color-result-link-visited-font);
  685. border: none;
  686. }
  687. #backToTop {
  688. border: 1px solid var(--color-backtotop-border);
  689. margin: 0;
  690. padding: 0;
  691. font-size: 1em;
  692. background: var(--color-backtotop-background);
  693. position: fixed;
  694. bottom: 8rem;
  695. .ltr-left(@results-width + @results-offset + (0.5 * @results-gap - 1.2em));
  696. transition: opacity 0.5s;
  697. opacity: 0;
  698. pointer-events: none;
  699. .rounded-corners;
  700. a {
  701. display: block;
  702. margin: 0;
  703. padding: 0.7em;
  704. }
  705. a,
  706. a:visited,
  707. a:hover,
  708. a:active {
  709. color: var(--color-backtotop-font);
  710. }
  711. }
  712. #results.scrolling #backToTop {
  713. opacity: 1;
  714. pointer-events: all;
  715. }
  716. /*
  717. tablet layout
  718. */
  719. .results-tablet() {
  720. #links_on_top {
  721. span {
  722. display: none;
  723. }
  724. }
  725. .page_with_header {
  726. margin: 2rem 0.5rem;
  727. width: auto;
  728. }
  729. #infoboxes {
  730. position: inherit;
  731. max-width: inherit;
  732. .infobox {
  733. clear: both;
  734. img {
  735. .ltr-float-left();
  736. max-width: 10em;
  737. margin-top: 0.5em;
  738. .ltr-margin-right(0.5em);
  739. margin-bottom: 0.5em;
  740. .ltr-margin-left(0);
  741. }
  742. }
  743. }
  744. #sidebar {
  745. margin: 0 @results-tablet-offset @results-margin @results-tablet-offset;
  746. padding: 0;
  747. float: none;
  748. border: none;
  749. width: auto;
  750. input {
  751. border: 0;
  752. }
  753. }
  754. .result {
  755. .thumbnail {
  756. max-width: 98%;
  757. }
  758. .url {
  759. span.url {
  760. display: block;
  761. white-space: nowrap;
  762. text-overflow: ellipsis;
  763. overflow: hidden;
  764. width: 100%;
  765. }
  766. }
  767. .engines {
  768. .ltr-float-right();
  769. display: flex;
  770. flex-wrap: wrap;
  771. justify-content: flex-end;
  772. padding: 3px 0 0 0;
  773. }
  774. }
  775. .result-images {
  776. border-bottom: none !important;
  777. }
  778. .image_result {
  779. max-width: 98%;
  780. img {
  781. max-width: 98%;
  782. }
  783. }
  784. #backToTop {
  785. display: none;
  786. }
  787. #pagination {
  788. margin: 2rem 0 0 0 !important;
  789. }
  790. #main_results div#results {
  791. margin: 0 auto;
  792. justify-content: center;
  793. display: grid;
  794. grid-template-columns: @results-width;
  795. grid-template-rows: min-content min-content min-content 1fr min-content min-content;
  796. gap: 0;
  797. grid-template-areas:
  798. "corrections"
  799. "answers"
  800. "sidebar"
  801. "urls"
  802. "pagination";
  803. }
  804. }
  805. @media screen and (max-width: calc(@tablet - 0.5px)) {
  806. #links_on_top {
  807. span {
  808. display: none;
  809. }
  810. }
  811. }
  812. @media screen and (max-width: 52rem) {
  813. body.results_endpoint {
  814. #links_on_top {
  815. .link_on_top_about,
  816. .link_on_top_donate {
  817. display: none;
  818. }
  819. }
  820. }
  821. }
  822. @media screen and (min-width: @phone) and (max-width: @tablet) {
  823. // when .center-aligment-yes, see style-center.less
  824. // the media query includes "min-width: @phone"
  825. // because the phone layout includes the tablet layout unconditionally.
  826. .center-aligment-no {
  827. .results-tablet();
  828. }
  829. }
  830. /* Misc */
  831. #main_results div#results.only_template_images {
  832. margin: 1rem @results-tablet-offset 0 @results-tablet-offset;
  833. display: grid;
  834. grid-template-columns: 100%;
  835. grid-template-rows: min-content min-content min-content 1fr min-content;
  836. gap: 0;
  837. grid-template-areas:
  838. "corrections"
  839. "answers"
  840. "sidebar"
  841. "urls"
  842. "pagination";
  843. #sidebar {
  844. display: none;
  845. }
  846. #urls {
  847. margin: 0;
  848. display: flex;
  849. flex-wrap: wrap;
  850. }
  851. #urls::after {
  852. flex-grow: 10;
  853. content: "";
  854. }
  855. #backToTop {
  856. .ltr-left(auto);
  857. .ltr-right(1rem);
  858. }
  859. #pagination {
  860. .ltr-margin-right(4rem);
  861. }
  862. }
  863. /*
  864. phone layout
  865. */
  866. @media screen and (max-width: @phone) {
  867. // based on the tablet layout
  868. .results-tablet();
  869. html {
  870. background-color: var(--color-base-background-mobile);
  871. }
  872. #main_results div#results {
  873. grid-template-columns: 100%;
  874. margin: 0 auto;
  875. }
  876. #links_on_top {
  877. top: 1.4rem;
  878. .ltr-right(10px);
  879. }
  880. #main_index #links_on_top {
  881. top: 0.5rem;
  882. .ltr-right(0.5rem);
  883. }
  884. #results {
  885. margin: 0;
  886. padding: 0;
  887. }
  888. #pagination {
  889. margin: 2rem 1rem 0 1rem !important;
  890. }
  891. article[data-vim-selected] {
  892. border: 1px solid var(--color-result-vim-arrow);
  893. .rounded-corners;
  894. }
  895. .result {
  896. background: var(--color-result-background);
  897. border: 1px solid var(--color-result-background);
  898. margin: 1rem 10px;
  899. .rounded-corners;
  900. }
  901. .result-images {
  902. margin: 0;
  903. height: @results-image-row-height-phone;
  904. background: var(--color-base-background-mobile);
  905. }
  906. .infobox {
  907. border: none !important;
  908. background-color: var(--color-sidebar-background);
  909. }
  910. .numbered_pagination {
  911. display: none;
  912. }
  913. .result-paper,
  914. .result-packages {
  915. .attributes {
  916. display: block;
  917. div {
  918. display: block;
  919. span {
  920. display: inline;
  921. }
  922. span:first-child {
  923. font-weight: bold;
  924. }
  925. span:nth-child(2) {
  926. .ltr-margin-left(0.5rem);
  927. }
  928. }
  929. }
  930. }
  931. }
  932. /*
  933. small-phone layout
  934. */
  935. @media screen and (max-width: @small-phone) {
  936. .result-videos {
  937. img.thumbnail {
  938. float: none !important;
  939. }
  940. .content {
  941. overflow: inherit;
  942. }
  943. }
  944. }
  945. pre code {
  946. white-space: pre-wrap;
  947. }