Greasy Fork is available in English.

DuckDuckGo - Multi-Columns (ORGANIC) (USw) v.59

DuckDuckGo Less scrolling with a multi columns interface

질문, 리뷰하거나, 이 스크립트를 신고하세요.
  1. /* ==UserStyle==
  2. @name DuckDuckGo - Multi-Columns (ORGANIC) (USw) v.59
  3. @namespace https://greasyfork.org/en/users/8-decembre?sort=updated
  4. @version 590.01
  5. @author decembre
  6. @description DuckDuckGo Less scrolling with a multi columns interface
  7. @license unlicense
  8. ==/UserStyle== */
  9.  
  10. @-moz-document domain("duckduckgo.com") {
  11.  
  12. /* ==== 0- DuckDuckGo - Multi-Columns (Organic) (USw) v.59 (new59) ==== */
  13.  
  14. /* LAST UPDATED VESION on Userstyles.org (broken login - 2023.08):
  15. v.52
  16. 20230609.17.10
  17. ========================== */
  18.  
  19. /* USERSCRIPT SUPPORT ==============
  20. Add Google button to duckduckgo.com - by klaufir (2019) :
  21. https://greasyfork.org/fr/scripts/373582-add-google-button-to-duckduckgo-com
  22.  
  23. ================================= */
  24.  
  25. /* (new59) TEST - NEWS - FEEDBACK */
  26. [class*="feedback"], .related-queries, #wsb-btn {
  27. display: inline-block !important;
  28. }
  29.  
  30. /* TEST SIDEBAR - WITHOUT IA - WITH HOVER */
  31. section[data-area="sidebar"] {
  32. position: fixed !important;
  33. height: 90vh !important;
  34. min-width: 23.4% !important;
  35. max-width: 23.4% !important;
  36. right: -23.5% !important;
  37. top: unset !important;
  38. bottom: 0vh !important;
  39. z-index: 500000000 !important;
  40. transition: all ease 0.7s !important;
  41. background: #111 !important;
  42. border: 1px solid red !important;
  43. }
  44. section[data-area="sidebar"]:hover {
  45. position: fixed !important;
  46. min-width: 30% !important;
  47. max-width: 30% !important;
  48. right: 0% !important;
  49. top: unset !important;
  50. bottom: 0vh !important;
  51. z-index: 500000000 !important;
  52. transition: all ease 0.7s !important;
  53. background: #111 !important;
  54. border: 1px solid red !important;
  55. }
  56. section[data-area="sidebar"]:has(li):before {
  57. content: "⪡" !important;
  58. position: absolute !important;
  59. display: inline-block !important;
  60. left: -20px !important;
  61. top: 0 !important;
  62. font-size: 20px !important;
  63. z-index: 5000000 !important;
  64. background: red !important;
  65. border: 1px solid red !important;
  66. }
  67.  
  68.  
  69. /* INFOS ABOUT */
  70. section[data-area="sidebar"] .react-module[data-react-module-id="about"] {
  71. display: inline-block !important;
  72. min-width: 100%;
  73. text-align: center !important;
  74. /*border: 1px solid aqua !important;*/
  75. }
  76. section[data-area="sidebar"] .react-module[data-react-module-id="about"] > div {
  77. display: inline-block !important;
  78. max-width: 98% !important;
  79. min-width: 98% !important;
  80. padding: 0 5px 0 5px !important;
  81. text-align: center !important;
  82. /*border: 1px solid green !important;*/
  83. }
  84. section[data-area="sidebar"] .react-module[data-react-module-id="about"] span.expandableItem + a{
  85. display: inline-block !important;
  86. width: 50% !important;
  87. }
  88.  
  89. /* RELATED SEARCH */
  90. section[data-area="sidebar"] ol.react-results--sidebar li[data-layout="related_searches"] .related-searches .related-searches__lists ol.related-searches__list.related-searches__list--first {
  91. padding-right: 20px !important;
  92. }
  93.  
  94.  
  95.  
  96. /* TEST SIDEBAR - IA IN DUCKDUCKGO */
  97. .standby-btn {
  98. width: 100%;
  99. margin: 0 0 0 0 !important;
  100. padding: 3px 0;
  101. cursor: pointer;
  102. border-radius: 4px;
  103. border: 1px solid #888;
  104. transition: transform 0.15s ease !important;
  105. color: gold !important;
  106. background: transparent !important;
  107. }
  108. section[data-area="sidebar"]:has(ol):has(#ddgpt) {
  109. position: fixed !important;
  110. height: 90vh !important;
  111. min-width: 50% !important;
  112. max-width: 50% !important;
  113. right: -50.5% !important;
  114. top: unset !important;
  115. bottom: 0vh !important;
  116. z-index: 500000000 !important;
  117. transition: all ease 0.7s !important;
  118. background: #111 !important;
  119. border: 1px solid green !important;
  120. }
  121. section[data-area="sidebar"]:has(ol):has(#ddgpt):hover {
  122. position: fixed !important;
  123. min-width: 50% !important;
  124. max-width: 50% !important;
  125. right: 0% !important;
  126. top: unset !important;
  127. bottom: 0vh !important;
  128. z-index: 500000000 !important;
  129. transition: all ease 0.7s !important;
  130. background: #111 !important;
  131. /*border: 1px solid red !important;*/
  132. }
  133. /* SIDEBAR EMPTY */
  134. section[data-area="sidebar"]:has(:not(li)):has(#ddgpt) {
  135. position: fixed !important;
  136. min-width: 50% !important;
  137. max-width: 50% !important;
  138. right: -50.2% !important;
  139. top: unset !important;
  140. bottom: 0vh !important;
  141. z-index: 500000000 !important;
  142. transition: all ease 0.7s !important;
  143. background: #111 !important;
  144. /*border: 1px solid yellow !important;*/
  145. }
  146. /* HOVER IA - NOT HOVER SIDBAR */
  147. section[data-area="sidebar"]:has(#ddgpt:hover):hover {
  148. position: fixed !important;
  149. min-width: 50% !important;
  150. max-width: 50% !important;
  151. right: -50.1% !important;
  152. top: unset !important;
  153. bottom: 0vh !important;
  154. z-index: 500000000 !important;
  155. transition: all ease 0.7s !important;
  156. background: #111 !important;
  157. /*border: 1px solid green !important;*/
  158. }
  159.  
  160.  
  161. section[data-area="sidebar"]:has(#ddgpt):hover #ddgpt.fade-in.active {
  162. position: fixed;
  163. width: 488px !important;
  164. max-height: 80vh !important;
  165. top: unset !important;
  166. bottom: -6.5vh !important;
  167. right: 0.9% !important;
  168. z-index: 5000000 !important;
  169. /*border: 1px solid aqua !important;*/
  170. }
  171.  
  172. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active {
  173. position: fixed;
  174. width: 488px !important;
  175. max-height: 80vh !important;
  176. top: unset !important;
  177. bottom: -14.5vh !important;
  178. right: 0.9% !important;
  179. z-index: 5000000 !important;
  180. /*border: 1px solid pink !important;*/
  181. }
  182. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active .app-name img#ddgpt-logo {
  183. position: fixed !important;
  184. max-width: 18% !important;
  185. height: 4vh !important;
  186. object-fit: contain !important;
  187. object-position: center 12px !important;
  188. }
  189. /* WITH REPLY */
  190. section[data-area="sidebar"]:has(#ddgpt):hover #ddgpt.fade-in.active:has(pre) ,
  191. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active:has(pre) {
  192. position: fixed;
  193. width: 488px !important;
  194. max-height: 80vh !important;
  195. top: unset !important;
  196. bottom: 0.0vh !important;
  197. right: 0.9% !important;
  198. border-radius: 8px 8px 0 0 !important;
  199. z-index: 5000000 !important;
  200. /*border: 1px solid pink !important;*/
  201. }
  202.  
  203. /* #ddgpt.fade-in.active section */
  204. section[data-area="sidebar"]:has(#ddgpt):hover #ddgpt.fade-in.active:has(pre) > pre ,
  205. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active:has(pre) > pre {
  206. max-height: 68vh !important;
  207. min-width: 95% !important;
  208. line-height: 17.92px;
  209. font-size: 14px;
  210. white-space: pre-wrap;
  211. margin: .99rem 0 7px 0;
  212. padding: 1.25em 1.25em 0 1.25em;
  213. border-radius: 10px;
  214. overscroll-behavior: contain;
  215. overflow: auto;
  216. transition: max-height 0.167s cubic-bezier(0, 0, 0.2, 1) !important;
  217. color: #f2f2f2;
  218. background: #2b3a40cf;
  219. /*border: 1px solid yellow ;*/
  220. }
  221.  
  222. /* (new58) WITH REPLY - NOT HOVER - SMALL */
  223. section[data-area="sidebar"]:has(#ddgpt):hover #ddgpt.fade-in.active:has(pre):not(:hover) > pre ,
  224. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active:has(pre):not(:hover) > pre{
  225. max-height: 3vh !important;
  226. line-height: 17.92px;
  227. min-width: 95% !important;
  228. margin: .99rem 0 7px 0;
  229. padding: 0.15em 1.25em 0 1.25em;
  230. font-size: 14px;
  231. border-radius: 10px 10px 0 0 !important;
  232. white-space: pre-wrap;
  233. overscroll-behavior: contain;
  234. overflow: auto;
  235. transition: max-height 0.167s cubic-bezier(0, 0, 0.2, 1) !important;
  236. color: #f2f2f2;
  237. background: #2b3a40cf;
  238. border: 1px solid yellow ;
  239. }
  240.  
  241. /* INPUT CONTAINER - HOVER */
  242. section[data-area="sidebar"]:has(#ddgpt):hover #ddgpt.fade-in.active:has(pre):hover > pre + section ,
  243. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active:has(pre):hover > pre + section section[data-area="sidebar"]:has(#ddgpt):hover #ddgpt.fade-in.active:has(pre):not(:hover) > pre + section ,
  244. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active:has(pre):not(:hover) > pre + section {
  245. max-height: 40vh !important;
  246. min-width: 95% !important;
  247. line-height: 15.92px;
  248. font-size: 14px;
  249. white-space: pre-wrap;
  250. margin: 0 0 -2vh 0 !important;
  251. padding: 0 0 0 0 !important;
  252. border-radius: 10px 10px 0 0 !important;
  253. overscroll-behavior: contain;
  254. overflow: auto;
  255. transition: max-height 0.167s cubic-bezier(0, 0, 0.2, 1) !important;
  256. color: #f2f2f2;
  257. background:red !important;
  258. border: 1px dashed aqua !important;
  259. }
  260. /* INPUT CONTAINER - NOT HOVER */
  261. section[data-area="sidebar"]:has(#ddgpt):hover #ddgpt.fade-in.active:has(pre):not(:hover) > pre + section ,
  262. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active:has(pre):not(:hover) > pre + section {
  263. max-height: 4vh !important;
  264. line-height: 15.92px;
  265. min-width: 98% !important;
  266. max-width: 98% !important;
  267. white-space: pre-wrap;
  268. margin: -1vh 0 -4vh 0 !important;
  269. padding: 0 0 0 0 !important;
  270. font-size: 14px;
  271. border-radius: 10px 10px 0 0 !important;
  272. overscroll-behavior: contain;
  273. overflow: auto;
  274. transition: max-height 0.167s cubic-bezier(0, 0, 0.2, 1) !important;
  275. color: #f2f2f2;
  276. background:red !important;
  277. border: 1px solid aqua !important;
  278. }
  279.  
  280. section[data-area="sidebar"]:has(#ddgpt):hover #ddgpt.fade-in.active:has(pre):hover > pre + section #app-chatbar ,
  281. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active:has(pre):hover > pre + section #app-chatbar {
  282. border: solid 1px #aaa;
  283. border-radius: 12px 13px 12px 0;
  284. font-size: 0.92rem;
  285. max-height: 30vh !important;
  286. width: 84.6% !important;
  287. resize: none;
  288. position: relative;
  289. z-index: 555;
  290. color: #eee;
  291. margin: 3px 0 15px 0 !important;
  292. padding: 4px 57px 9px 10px;
  293. background: fuchsia !important;
  294. }
  295.  
  296. section[data-area="sidebar"]:has(#ddgpt):hover #ddgpt.fade-in.active:has(pre):not(:hover) > pre + section #app-chatbar ,
  297. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active:has(pre):not(:hover) > pre + section #app-chatbar {
  298. position: relative;
  299. height: 2vh !important;
  300. max-height: 2vh !important;
  301. width: 90.6% !important;
  302. margin: 3px 0 15px 0 !important;
  303. padding: 1px 57px 0px 10px;
  304. border-radius: 12px 13px 12px 0;
  305. font-size: 0.92rem;
  306. resize: none;
  307. z-index: 555;
  308. color: #eee;
  309. background: olive !important;
  310. border: solid 1px #aaa;
  311. }
  312. section[data-area="sidebar"]:has(#ddgpt):hover #ddgpt.fade-in.active:has(pre):not(:hover) > pre + section #app-chatbar .continue-chat button ,
  313. section[data-area="sidebar"]:has(#ddgpt):not(:hover) #ddgpt.fade-in.active:has(pre):not(:hover) > pre + section .continue-chat button {
  314. position: relative;
  315. float: right;
  316. margin: 8px 0 15px 0 !important;
  317. bottom: -2vh !important;
  318. z-index: 560;
  319. cursor: pointer;
  320. color: red !important;
  321. fill: aqua !important;
  322. stroke: peru !important;
  323. background: none;
  324. border: 1px solid aqua !important;
  325. }
  326.  
  327. /* IA MIN - WITH RELATED QUERIES - (ONLY ON HOVER) */
  328. section[data-area="sidebar"][data-testid="sidebar"]:has(#ddgpt):has(.related-queries):not(:hover) #ddgpt {
  329. display: inline-block !important;
  330. min-height: 15.5vh !important;
  331. max-height: 15.5vh !important;
  332. margin: 0vh 0 0 0 !important;
  333. /*border: 1px solid aqua !important;*/
  334. }
  335. section[data-area="sidebar"][data-testid="sidebar"]:has(#ddgpt):has(.related-queries):hover section + .related-queries {
  336. position: relative;
  337. display: flex;
  338. flex-wrap: wrap;
  339. width: 100%;
  340. height: 100% !important;
  341. min-height: 10vh !important;
  342. max-height: 10vh !important;
  343. top: -2vh !important;
  344. margin: -2vh 0 2vh -20px;
  345. padding: 0px 0 0 20px !important;
  346. overflow: hidden;
  347. overflow-y: auto !important;
  348. border-left: 4px solid red !important;
  349. }
  350.  
  351. /* IA MIN - WITH RELATED QUERIES - INDICATOR - (ONLY ON HOVER) */
  352. section[data-area="sidebar"]:has(#ddgpt):not(:hover) .related-queries .related-query:first-of-type svg {
  353. position: fixed !important;
  354. display: inline-block !important;
  355. height: 2vh !important;
  356. min-height: 2vh !important;
  357. max-height: 2vh !important;
  358. margin: 0vh 0 0 -35px !important;
  359. top: -13vh !important;
  360. padding: 2px !important;
  361. border-radius: 100% !important;
  362. z-index: 5000000 !important;
  363. border: 1px solid red !important;
  364. }
  365.  
  366.  
  367. /* IA MIN */
  368. section[data-area="sidebar"] #ddgpt.fade-in.active[style="bottom: -7px;"] {
  369. position: fixed;
  370. width: 198px !important;
  371. max-height: 80vh !important;
  372. top: unset !important;
  373. bottom: -20vh !important;
  374. right: 35px !important;
  375. padding: 0px 26px 16px !important;
  376. z-index: 5000000 !important;
  377. border: 1px solid green !important;
  378. }
  379. section[data-area="sidebar"] #ddgpt.fade-in.active[style="bottom: -7px;"].app-name {
  380. display: inline-block !important;
  381. height: 100% !important;
  382. max-width: 60px!important;
  383. min-height: 2vh !important;
  384. max-height: 2vh !important;
  385. margin: 2px -20px 0 -20px !important;
  386. border: 1px solid green !important;
  387. }
  388.  
  389. section[data-area="sidebar"] #ddgpt.fade-in.active[style="bottom: -7px;"] .app-name img#ddgpt-logo {
  390. max-width: 100%;
  391. height: 4vh !important;
  392. object-fit: contain !important;
  393. object-position: center 12px !important;
  394. }
  395.  
  396.  
  397. #ddgpt > pre {
  398. max-height: 80vh !important;
  399. min-width: 95% !important;
  400. line-height: 17.92px;
  401. font-size: 14px;
  402. white-space: pre-wrap;
  403. margin: .99rem 0 7px 0;
  404. padding: 1.25em 1.25em 0 1.25em;
  405. border-radius: 10px;
  406. overscroll-behavior: contain;
  407. overflow: auto;
  408. transition: max-height 0.167s cubic-bezier(0, 0, 0.2, 1) !important;
  409. color: #f2f2f2;
  410. background: #2b3a40cf;
  411. border: 1px solid white;
  412. }
  413.  
  414. /*.is-not-mobile-device .site-wrapper {
  415. position: absolute !important;
  416. min-width: 99.8% !important;
  417. max-width: 99.8% !important;
  418. left: 0 !important;
  419. border: 1px solid aqua !important;
  420. }*/
  421.  
  422. /* [A VOIR]:
  423. - ONE DESCRIP MORE (not TOP FIRST RESULT
  424. ==== */
  425.  
  426. /* (new37) PAGES NUM */
  427. #links.results.js-results .has-pagenum .result__pagenum--side {
  428. font-size: 13px !important;
  429. color: silver !important;
  430. /* opacity: 0.5 !important; */
  431. background: #AE5A5A !important;
  432. }
  433.  
  434. /* (new45) PAGES NUM */
  435. [arial-label^="Page"] {
  436. -moz-box-align: center;
  437. align-items: center;
  438. /* display: inline-block !important; */
  439. float: left !important;
  440. clear: both !important;
  441. margin: -0.5vh 0 0 0 !important;
  442. right: 3px !important;
  443. position: absolute !important;
  444. width: 100%;
  445. min-width: 2vw !important;
  446. max-width: 2vw !important;
  447. /* background: green !important; */
  448. }
  449. [arial-label^="Page"] span{
  450. color: var(--theme-col-txt-page-separator);
  451. font-size: 0.833333rem;
  452. font-weight: 600;
  453. min-width: 2em;
  454. border-radius: 5px !important;
  455. text-align: center !important;
  456. transform: translateX(10px) !important;
  457. background: red !important;
  458. }
  459.  
  460. /* [A VOIR] (new34) ONE DESCRIP MORE (not TOP FIRST RESULT) :
  461. https://duckduckgo.com/?q=vue.js&ia=web
  462. https://duckduckgo.com/?q=vue.runtime.global.prod.js&ia=web
  463. PB:
  464. https://duckduckgo.com/?q=%22i%3D!important%3B%22&ia=web
  465. === */
  466.  
  467. /* #links.results.js-results .nrn-react-div article:not([id="r1-0"]) > div:nth-child(4) {
  468. position: absolute !important;
  469. max-height: 12vh !important;
  470. margin: -16vh 0 0 22.5% !important;
  471. overflow: hidden !important;
  472. overflow-y: auto !important;
  473. border: 1px solid red !important;
  474. } */
  475. #links.results.js-results .nrn-react-div article:not([id="r1-0"]) > div:nth-child(4) {
  476. border: 1px solid red !important;
  477. }
  478.  
  479. /* (new45) SUPP PUBS - PB for TOP INFO === */
  480.  
  481. /* .js-sidebar-ads .module-slot ,
  482. .js-sidebar-ads ,
  483. .results--ads.has-ad ,
  484. .js-right-ads-container {
  485. display: none !important;
  486. } */
  487. /* (new45) */
  488. /* #iframe_hidden , */
  489. /* .header-wrap::after, */
  490. /* section[data-testid="sidebar"] , */
  491.  
  492. #react-layout > div > div section ol.react-results--main li[data-layout="ad"] ,
  493. .set-align-center .footer[style="display: block;"] ,
  494. .footer[style="display: block;"] ,
  495. .header--aside__item.header--aside__item--hidden-lg ,
  496. .footer ,
  497. #bottom_spacing2 {
  498. padding-bottom: 0px;
  499. display: none !important;
  500. }
  501.  
  502. /* (new33) - FOR SETTINGS - CENTER */
  503. html.set-align-center .cw {
  504. width: 100% !important;
  505. max-width: 100vw !important;
  506. min-width: 100vw !important;
  507. right: 0 !important;
  508. left: 0 !important;
  509. }
  510.  
  511.  
  512. /* (new38) TEST - OTHER VIEW when typing search in browser search bar (more results) - === */
  513.  
  514. .module--carousel__image.is-center-image {
  515. background-color: black !important;
  516. }
  517.  
  518. /* (new27) RESULTS after TOP RESULTS */
  519. .result__sitelinks--large {
  520. display: inline !important;
  521. }
  522.  
  523. /* (new16) TOP NEWS - === */
  524. /* TEST LINKs:
  525. https://duckduckgo.com/?q=youtube&t=ffsb&ia=web
  526. RFI -
  527. ==
  528. == https://duckduckgo.com/?q=rfif&ia=news
  529. ======= */
  530.  
  531. #results--main.serp__results js-serp-results .results--main .ia-modules.js-ia-modules{
  532. height: 0 !important;
  533. }
  534. .module.module--carousel.js-module--news {
  535. height: auto !important;
  536. /* border: 1px solid red !important; */
  537. }
  538. .module--carousel__items {
  539. height: auto !important;
  540. overflow: hidden;
  541. position: relative;
  542. white-space: nowrap;
  543. }
  544. /* .ia-modules.js-ia-modules:not(:empty) , */
  545. #links.results.js-results #organic-module:not(:empty) {
  546. float: left !important;
  547. height: auto !important;
  548. width: 98.3% !important;
  549. margin-left: 0% !important;
  550. margin-bottom: 15px !important;
  551. border-radius: 5px ;
  552. border: 1px solid gray !important;
  553. /* border: 1px solid aqua !important; */
  554. }
  555.  
  556. /* (new34) MORE VIDEOS BUTTON */
  557.  
  558. /* (new34) */
  559. .module__footer.js-carousel-module-more::before {
  560. content: "→";
  561. left: 60% !important;
  562. }
  563.  
  564.  
  565. #links.results.js-results #organic-module:not(:empty) .module.module--carousel.js-module--news .module--carousel__items.js-carousel-module-items:not(:last-child) .module--carousel__item {
  566. height: 280px !important;
  567. width: 17.2% !important;
  568. margin-top: 8px!important;
  569. margin-left: -0.3%!important;
  570. margin-right: 1.3%!important;
  571. border: 1px solid gray !important;
  572. /* border: 1px solid green !important; */
  573. }
  574. #links.results.js-results #organic-module:not(:empty) .module.module--carousel.js-module--news .module--carousel__items.js-carousel-module-items:not(:last-child) .module--carousel__item:first-of-type {
  575. margin-left: 5%!important;
  576. }
  577. #links.results.js-results #organic-module:not(:empty) .module.module--carousel.js-module--news .module--carousel__items.js-carousel-module-items:not(:last-child) {
  578. height: auto !important;
  579. width: 97.7% !important;
  580. margin-right: 0% !important;
  581. margin-left: 0% !important;
  582. padding: 0px 20px !important;
  583. /* border: 1px solid gray !important; */
  584. /* border: 1px solid tomato !important; */
  585. }
  586. #links.results.js-results #organic-module:not(:empty) .module.module--carousel.js-module--news .module--carousel__items.js-carousel-module-items + .js-carousel-module-more.module__footer {
  587. float: left !important;
  588. width: 98% !important;
  589. margin-top: 0px !important;
  590. /* border: 1px solid gray !important; */
  591. /* outline: 1px solid aqua !important; */
  592. }
  593. /* (new34) */
  594. .module--carousel__left.js-carousel-module-left.ddgsi.ddgsi-left {
  595. float: right !important;
  596. margin-top: -40px !important;
  597. margin-left: 20px !important;
  598. /* outline: 1px solid violet !important; */
  599. }
  600. .module--carousel__right.js-carousel-module-right.ddgsi.ddgsi-right {
  601. display: inline-block !important;
  602. margin-top: -40px !important;
  603. margin-right: 6px !important;
  604. /* z-index: 5000 !important; */
  605. /* outline: 1px solid tan !important; */
  606. }
  607. .js-news-module-title.module__header.module__header--link {
  608. margin-left: -4px !important;
  609. padding-left: 14px !important;
  610. top: -30px !important;
  611. }
  612.  
  613. .module.module--news.js-module--news {
  614. display: inline-block !important;
  615. width: 99% !important;
  616. height: 183px !important;
  617. z-index: 0 !important;
  618. background: #222 !important;
  619. }
  620. .module--news__items.js-news-module-items {
  621. height: 162px !important;
  622. top: -31px !important;
  623. padding-left: 1.3%;
  624. padding-right: 1.8%;
  625. /* border: 1px solid red !important; */
  626. }
  627. .module--news__items.js-news-module-items .module--news__item {
  628. height: 158px !important;
  629. }
  630. /* #organic-module .module--news__items .module--news__item */
  631. .module--news__item {
  632. position: relative;
  633. display: inline-block;
  634. vertical-align: top;
  635. height: 230px;
  636. width: 20%;
  637. margin-top: 4px;
  638. margin-left: -0.5% !important;
  639. padding: 0px 5px !important;
  640. box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
  641. box-sizing: border-box;
  642. cursor: pointer;
  643. white-space: normal;
  644. /* background: #222 !important; */
  645. }
  646.  
  647. .module--news__item:not(:last-child) {
  648. margin-right: 1.2%;
  649. margin-left: -1% !important;
  650. }
  651. .module--news__item:last-child {
  652. /* margin-right: -1.4% !important; */
  653. margin-left: -1% !important;
  654. }
  655.  
  656. .module--news__body {
  657. box-sizing: border-box;
  658. /* height: 135px !important; */
  659. padding: 0.25em !important;
  660. }
  661. .module--news__body__title {
  662. display: block;
  663. font-size: 15px;
  664. line-height: 1.2;
  665. margin-bottom: 0.20em;
  666. max-height: 5em;
  667. overflow: hidden;
  668. }
  669. .module--news__body__content {
  670. font-size: 0.8176em !important;
  671. line-height: 1.2 !important;
  672. min-height: 70px !important;
  673. max-height: 4.1em !important;
  674. overflow: hidden;
  675. }
  676. .module--news__image {
  677. background-size: contain !important;
  678. height: 100%;
  679. width: 100%;
  680. }
  681. .module--news__right {
  682. padding-left: 1px;
  683. right: 13px !important;
  684. }
  685. .js-news-module-more.module__footer {
  686. top: -20px !important;
  687. /* background: red !important; */
  688. }
  689.  
  690. /* (new22) CARROUSELS NEWS EMISSIONS
  691. https://duckduckgo.com/?q=i+may+desrtoy+you&ia=news&iai=https%3A%2F%2Fwww.franceinter.fr%2Femissions%2Fune-heure-en-series%2Fune-heure-en-series-13-juin-2020
  692. == */
  693. .module--carousel__item {
  694. width: 17.2% !important;
  695. height: 280px;
  696. }
  697. .module--carousel__item:first-child{
  698. margin-left: 4%;
  699. }
  700. .module--carousel__image-wrapper {
  701. position: relative;
  702. float: left;
  703. height: 72%;
  704. width: 100%;
  705. }
  706. #react-layout > div > div section ol.react-results--main li[data-layout="news"] .module--carousel__item.has-image .module--carousel__image-wrapper {
  707. position: relative;
  708. float: left;
  709. height: 38% !important;
  710. width: 100%;
  711. /* background-color: red !important; */
  712. }
  713.  
  714. /* (new48) */
  715. .module--carousel__footer {
  716. position: absolute;
  717. bottom: 0em !important;
  718. }
  719.  
  720. /* (new22) NO IMAGE */
  721. .module--carousel__item > .module--carousel__body {
  722. width: 100% ;
  723. height: 280px ;
  724. margin-bottom: 20px !important;
  725. padding: 0 0.75em ;
  726. text-align: center ;
  727. overflow: hidden ;
  728. /* background: red !important; */
  729. }
  730. /* (new22) WITH IMAGE */
  731. .module--carousel__item > .module--carousel__image-wrapper + .module--carousel__body {
  732. width: 100% ;
  733. height: 78px ;
  734. margin-bottom: 20px !important;
  735. padding: 0 0.75em ;
  736. text-align: center ;
  737. overflow: hidden ;
  738. /* background: red !important; */
  739. }
  740. /* (new57) TOP NEWS - VIDEOS CARROUSEL - === */
  741. .module.module--carousel.js-module--videosl {
  742. box-shadow: none;
  743. height: 351px !important;
  744. overflow: initial;
  745. }
  746. .module.module--carousel.js-module--videos .module--carousel__items.js-carousel-module-items {
  747. height: 299px !important;
  748. }
  749. .module.module--carousel.js-module--videos .module--carousel__items.js-carousel-module-items .module--carousel__item.has-image {
  750. height: 270px !important;
  751. }
  752. .module.module--carousel.js-module--videos .module--carousel__item.has-image .module--carousel__image-wrapper.js-carousel-item-image-wrapper {
  753. height: 200px !important;
  754. }
  755. /* (new57) */
  756. .module.module--carousel.js-module--videos .module--carousel__item.has-image .module--carousel__image-wrapper.js-carousel-item-image-wrapper .module--carousel__image {
  757. height: 60px !important;
  758. background-position: center center;
  759. background-repeat: no-repeat;
  760. background-size: contain;
  761. }
  762. .has-extra-row .module--carousel__body__title {
  763. height: 1.5em !important;
  764. line-height: 1.5em !important;
  765. white-space: nowrap;
  766. text-overflow: ellipsis;
  767. overflow: hidden;
  768. }
  769. .has-extra-row .module--carousel__footer {
  770. height: 44px !important;
  771. top: 222px !important;
  772. }
  773. .module.module--carousel.js-module--videos .module--carousel__right.js-carousel-module-right.ddgsi.ddgsi-right{
  774. margin-right: 20px !important;
  775. }
  776.  
  777.  
  778. /* (new32) RESULTS ITEMS - LEFT CKECK PANEL */
  779. /* .nrn-react-div */
  780.  
  781. .serp__results.js-serp-results #links.results.js-results .nrn-react-div article h2 a[data-testid="result-title-check"] ,
  782. .result__sitelinks.result__sitelinks--organics.result__sitelinks--large.js-sitelinks.result__sitelinks--large .result__check ,
  783. .serp__results.js-serp-results #links.results.js-results #r1-0.result:not(:hover) .result__body .result__check,
  784. .serp__results.js-serp-results #links.results.js-results #r1-0.result:hover .result__body .result__check {
  785. height: 100%;
  786. min-height: 120px !important;
  787. border-left: 2px solid gray;
  788. background: rgba(115, 108, 108, 0.28) none repeat scroll 0 0;
  789. /* background: red !important; */
  790. }
  791.  
  792. /* (new33) .nrn-react-div - SITE LINK ORGANICS */
  793. .results__sitelink--organics {
  794. float: left ;
  795. width: 97.7%;
  796. margin-top: 16px ;
  797. padding: 5px ;
  798. border-radius: 5px ;
  799. overflow: hidden;
  800. border: 1px solid gray;
  801. }
  802. /* (new33) .nrn-react-div - SITE LINK ORGANICS - TOP */
  803. .serp__results.js-serp-results #links.results.js-results #r1-0 .results__sitelink--organics {
  804. float: left;
  805. width: 98.3%;
  806. margin-bottom: 1.2em;
  807. margin-top: 0;
  808. overflow: hidden;
  809. border: 1px solid gray ;
  810. }
  811. /* (new33) .nrn-react-div - SITE COL - ALL */
  812. .result__sitelink-col {
  813. float: left;
  814. margin-bottom: 0.6em;
  815. padding-left: 25px;
  816. width: 255px;
  817. border-radius: 5px ;
  818. border: 1px solid gray;
  819. }
  820. .result__sitelink-row {
  821. margin: 0 1% 0 0 !important;
  822. }
  823. .result__sitelink-row:first-of-type {
  824. margin: 0 1% 0 1% !important;
  825. }
  826. .js-sitelink.result__sitelink-col {
  827. height: 122px !important;
  828. margin: 0 0.2% 0 0 !important;
  829. }
  830.  
  831. /* TEST LINK : https://duckduckgo.com/?q=github-wc-polyfill+Off.JustOff&ia=web */
  832. /* body.body--serp .site-wrapper.js-site-wrapper #links_wrapper.serp__results.js-serp-results .nrn-react-div article[id="r1-0"][data-nrn="result"][data-handled-by-react="true"] */
  833. .serp__results.js-serp-results #links.results.js-results #r1-0:not([data-nrn="result"]),
  834. .result__sitelinks.result__sitelinks--organics.result__sitelinks--large.js-sitelinks.result__sitelinks--large{
  835. display: inline-block !important;
  836. height: auto !important;
  837. height: 100%;
  838. min-height: 100px;
  839. width: 100% !important;
  840. min-width: 98.5% !important;
  841. max-width: 98.5% !important;
  842. margin-top: 0px;
  843. border-radius: 4px;
  844. overflow: hidden !important;
  845. border: 1px solid red !important;
  846. }
  847. .result__sitelinks.result__sitelinks--organics.result__sitelinks--large.js-sitelinks.result__sitelinks--large {
  848. margin-bottom: 5px;
  849. }
  850. /* (new29) */
  851. .result__sitelinks.result__sitelinks--organics.result__sitelinks--large.js-sitelinks.result__sitelinks--large,
  852. .serp__results.js-serp-results #links.results.js-results #r1-0 .result__body.links_main.links_deep h2 a.result__a.js-result-title-link{
  853. height: 27px !important;
  854. line-height: 35px !important;
  855. /* background: red !important; */
  856. /* border: 1px solid violet !important; */
  857. }
  858.  
  859.  
  860. /* (new33) .nrn-react-div - ALL */
  861. #links.results.js-results #r1-0 .result__body.links_main.links_deep {
  862. height: auto !important;
  863. margin-top: -10px !important;
  864. padding: 0px 10px !important;
  865. }
  866. #r1-0.result.results_links_deep.highlight_d .result__snippet {
  867. height: auto !important;
  868. overflow-x: hidden;
  869. overflow-y: auto;
  870. }
  871. /* (new33) .nrn-react-div - TOP */
  872. #links.results.js-results #r1-0 .result__body.links_main.links_deep .result__menu {
  873. float: right;
  874. overflow: hidden;
  875. text-align: right;
  876. text-overflow: ellipsis;
  877. white-space: nowrap;
  878. }
  879.  
  880. /* (new36) .nrn-react-div - TOP - ALL */
  881. /* NORMAL / ALL =
  882. class="yQDlj3B5DI5YO8c8Ulio L3nvATidW0xLPfPD8y_R" data-handled-by-react="true" data-testid="result" data-nrn="result"
  883.  
  884.  
  885. /* (new58) CENTER CONTAINER RESULTS ==
  886. OTHER TYPE CODE:???
  887. li class="wLL07_0Xnd1QZpzpfR4W" data-layout="organic">
  888. <article id="r1-1" class="yQDlj3B5DI5YO8c8Ulio L3nvATidW0xLPfPD8y_R" data-handled-by-react="true" data-testid="result" data-nrn="result">
  889. https://duckduckgo.com/?q=Coomer&ia=web
  890. === */
  891. #react-layout > div > div > div[data-testid="web-vertical"]{
  892. margin: 0 0 0 0.5% !important;
  893. /*border: 1px solid red ! important;*/
  894. }
  895. #react-layout > div > div > section[data-testid="mainline"] {
  896. display: inline-block !important;
  897. min-width: 100% ! important;
  898. max-width: 100% ! important;
  899.  
  900. }
  901.  
  902. /* (new41) NEW CODE - OK */
  903. /* .super-wide ol.react-results--main li article ,*/
  904.  
  905. #react-layout > div > div section ol.react-results--main li[data-layout="organic"] ,
  906. .serp__results.js-serp-results .results--main .results .nrn-react-div article:not([id="r1-0"]),
  907. .nrn-react-div article:not([id="r1-0"]) {
  908. float: left !important;
  909. clear: none !important;
  910. min-height: 155px ! important;
  911. max-height: 155px ! important;
  912. min-width: 30.6% ! important;
  913. max-width: 30.6% ! important;
  914. margin-right: 4px ! important;
  915. margin-bottom: 3px !important;
  916. padding: 1px 1px 1px 35px ! important;
  917. border-radius: 5px !important;
  918. border: 1px solid gray ! important;
  919. }
  920. /* (new49) NEW CODE - RESULTS ITEMS - ALL >> NEWS / ABOUT / VIDEO */
  921. #react-layout > div > div section ol.react-results--main li[data-layout="news"] ,
  922. #react-layout > div > div section ol.react-results--main li[data-layout="about"] ,
  923. #react-layout > div > div section ol.react-results--main li[data-layout="videos"] ,
  924. #react-layout > div > div section ol.react-results--main li[data-layout="organic"] {
  925. float: left !important;
  926. clear: none !important;
  927. min-height: 155px ! important;
  928. max-height: 155px ! important;
  929. min-width: 32.6% ! important;
  930. max-width: 32.6% ! important;
  931. margin-right: 4px ! important;
  932. margin-bottom: 3px !important;
  933. padding: 1px 1px 1px 0px ! important;
  934. border-radius: 5px !important;
  935. overflow: hidden !important;
  936. /* overflow-y: auto !important; */
  937. border: 1px solid gray ! important;
  938. }
  939.  
  940. /* (new57) PRODUCT */
  941.  
  942. /* (new57) PRODUCTS MIDDLE */
  943. #react-layout > div > div section ol.react-results--main li[data-layout="products_middle"] {
  944. float: left !important;
  945. clear: none !important;
  946. min-height: 155px ! important;
  947. max-height: 155px ! important;
  948. min-width: 32.3% ! important;
  949. max-width: 32.3% ! important;
  950. margin-right: 4px ! important;
  951. margin-bottom: 3px !important;
  952. padding: 1px 1px 1px 5px ! important;
  953. border-radius: 5px !important;
  954. overflow: hidden !important;
  955. border: 1px solid gray ! important;
  956. }
  957. /* (new58) COR margin */
  958. #react-layout > div > div section ol.react-results--main li[data-layout="products_middle"] .module.module--carousel .module__header.module__header--link {
  959. display: inline-block !important;
  960. width: 100% !important;
  961. min-width: 100% !important;
  962. max-width: 100% !important;
  963. font-size: 15px;
  964. line-height: 15px;
  965. margin: 10px 0 0px 0 !important;
  966. }
  967. #react-layout > div > div section ol.react-results--main li[data-layout="products_middle"] .module.module--carousel a.module--carousel__body__title {
  968. display: inline-block !important;
  969. vertical-align: top !important;
  970. /*box-sizing: border-box !important;*/
  971. width: 100% !important;
  972. min-width: 100px !important;
  973. max-width: 100px !important;
  974. line-height: 13px !important;
  975. max-height: 1.2vh !important;
  976. min-height: 1.2vh !important;
  977. margin: 15px 0px 0px 0px !important;
  978. font-size: 13px !important;
  979.  
  980. /*color: red !important;*/
  981. /*border: 1px solid yellow! important;*/
  982. }
  983. #react-layout > div > div section ol.react-results--main li[data-layout="products_middle"] .module.module--carousel .module--carousel__body__pricing {
  984. position: absolute;
  985. display: flex;
  986. align-items: center;
  987. bottom: 3.2vh !important;
  988. }
  989.  
  990. #react-layout > div > div section ol.react-results--main li[data-layout="products_middle"] .module--carousel__item {
  991. width: calc((100% - (3 * 2 * 6px)) / 3);
  992. height: 105px;
  993. margin: 5px 3px 0px 15px !important;
  994. }
  995. #react-layout > div > div section ol.react-results--main li[data-layout="products_middle"] .js-carousel-item-image-wrapper {
  996. height: 45px !important;
  997. /*border: 1px solid red! important;*/
  998. }
  999. #react-layout > div > div section ol.react-results--main li[data-layout="products_middle"] .module--carousel__image-wrapper + .module--carousel__body {
  1000. display: inline-block !important;
  1001. width: 100% !important;
  1002. min-width: 100% ! important;
  1003. max-width: 100% ! important;
  1004. height: 30px;
  1005. margin: 0px !important;
  1006. padding: 0 0.25em;
  1007. text-align: left !important;
  1008.  
  1009. /*baground: red !important;*/
  1010. }
  1011.  
  1012. /* ABOUT */
  1013. #react-layout > div > div section ol.react-results--main li[data-layout="about"] .react-module[data-react-module-id="about"] {
  1014. display: inline-block !important;
  1015. min-height: 155px ! important;
  1016. max-height: 155px ! important;
  1017. min-width: 100% ! important;
  1018. max-width: 100% ! important;
  1019. margin: 0 0 0 0 !important;
  1020. padding: 0px 0px 0px 0px ! important;
  1021. overflow: hidden !important;
  1022. /* overflow-y: auto !important; */
  1023. /* background: olive !important; */
  1024. /* border: 1px solid aqua ! important; */
  1025. }
  1026.  
  1027. #react-layout > div > div section ol.react-results--main li[data-layout="about"] .react-module[data-react-module-id="about"] > div section > div {
  1028. display: inline-block !important;
  1029. min-height: 141px ! important;
  1030. max-height: 141px ! important;
  1031. min-width: 100% ! important;
  1032. max-width: 100% ! important;
  1033. margin: 6px 0 0 0 !important;
  1034. padding: 0px 0px 0px 0px ! important;
  1035. overflow: hidden !important;
  1036. overflow-y: auto !important;
  1037. /* background: brown !important; */
  1038. /* border: 1px solid aqua ! important; */
  1039. }
  1040.  
  1041.  
  1042. /* (new51) MAPS */
  1043. #react-layout > div > div section ol.react-results--main li[data-layout="maps_places"]:not(:hover) {
  1044. float: left !important;
  1045. clear: none !important;
  1046. min-height: 155px ! important;
  1047. max-height: 155px ! important;
  1048. min-width: 32.6% ! important;
  1049. max-width: 32.6% ! important;
  1050. margin: 0 4px 3px 0! important;
  1051. padding: 1px 1px 1px 0px ! important;
  1052. border-radius: 5px !important;
  1053. overflow: hidden !important;
  1054. /* overflow-y: auto !important; */
  1055. /* mask-image: linear-gradient(to bottom, black 97%, transparent 100%); */
  1056. border: 1px solid gray ! important;
  1057. }
  1058.  
  1059. /* (new54) ) TOP - MAPS - MULI RESULTS */
  1060. .module--places.is-multiple.js-module--maps_places {
  1061. max-width: 100% !important;
  1062. text-align: center !important;
  1063. }
  1064. .module--places.is-multiple.js-module--maps_places .js-places-module-content {
  1065. display: inline-block !important;
  1066. max-width: 33% !important;
  1067. text-align: left !important;
  1068. }
  1069.  
  1070.  
  1071. #react-layout > div > div section ol.react-results--main li[data-layout="maps_places"]:hover {
  1072. float: left !important;
  1073. clear: none !important;
  1074. /* min-height: 155px ! important;
  1075. max-height: 155px ! important; */
  1076. min-width: 32.6% ! important;
  1077. max-width: 32.6% ! important;
  1078. margin: 0 4px 3px 0! important;
  1079. padding: 1px 1px 1px 0px ! important;
  1080. border-radius: 5px !important;
  1081. overflow: hidden !important;
  1082. overflow-y: auto !important;
  1083. border: 1px solid yellow ! important;
  1084. }
  1085. #react-layout > div > div section ol.react-results--main li[data-layout="maps_places"]:not(:hover) .module--places-multiple .module__header {
  1086. height: 85px !important;
  1087. }
  1088. #react-layout > div > div section ol.react-results--main li[data-layout="maps_places"]:not(:hover) .module--places-multiple .module__header .mapkit-static__map {
  1089. height: 84px !important;
  1090. background-position: center center;
  1091. background-repeat: no-repeat;
  1092. background-size: cover;
  1093. position: relative;
  1094. }
  1095.  
  1096. #react-layout > div > div section ol.react-results--main li[data-layout="maps_places"] .module--places-multiple .simple-tooltip[data-tooltip^="below"][data-tooltip-text]::before {
  1097. margin-top: 15px;
  1098. right: 70% !important;
  1099. top: 100%;
  1100. transform: translateX(10%) !important;
  1101. }
  1102.  
  1103. #react-layout > div > div section ol.react-results--main li[data-layout="maps_places"] .module--places-multiple .place-list-item__details {
  1104. flex: 1 1 0;
  1105. padding: 6px 20px 6px !important;
  1106. }
  1107.  
  1108. /* (new55) TOP RESULT - MAPS + IMAGES / INFOS */
  1109. .react-module[data-react-module-id="about"] {
  1110. display: inline-block !important;
  1111. min-width: 100%;
  1112. text-align: center !important;
  1113. /* border: 1px solid aqua !important; */
  1114. }
  1115. .react-module[data-react-module-id="about"] > div {
  1116. display: inline-block !important;
  1117. max-width: 40% !important;
  1118. min-width: 40% !important;
  1119. padding: 0 5px 0 5px !important;
  1120. text-align: center !important;
  1121. /* border: 1px solid green !important; */
  1122. }
  1123.  
  1124. /* .react-module[data-react-module-id="about"] div[data-testid="about"] section > div , */
  1125. .react-module[data-react-module-id="about"] div[data-testid="about"] section ,
  1126. .react-module[data-react-module-id="about"] div[data-testid="about"] > div {
  1127. display: inline-block !important;
  1128. /* float: left !important; */
  1129. max-width: 98% !important;
  1130. min-width: 98% !important;
  1131. padding: 0 5px 0 5px !important;
  1132. text-align: left !important;
  1133. /* border: 1px solid red !important; */
  1134. }
  1135. .react-module[data-react-module-id="about"] div[data-testid="about"] section > div {
  1136. display: inline-block !important;
  1137. height: auto !important;
  1138. max-width: 98% !important;
  1139. min-width: 98% !important;
  1140. padding: 4px 5px 0 5px !important;
  1141. margin: 0 0 0 0 !important;
  1142. text-align: left !important;
  1143. /* border: 1px solid lime !important; */
  1144. }
  1145. .react-module[data-react-module-id="about"] div[data-testid="about"] section > div.lvQOtr6eTc96qHqf0I_Y a {
  1146. /* display: inline-block !important; */
  1147. float: left !important;
  1148. height: auto !important;
  1149.  
  1150. margin: 0 0 0 0 !important;
  1151. text-align: left !important;
  1152. /* border: 1px solid lime !important; */
  1153. }
  1154.  
  1155. /* IMAGES */
  1156. .react-module[ data-react-module-id="about"] div[data-testid="about_header-image"] {
  1157. min-width: 100% !important;
  1158. max-width: 100% !important;
  1159. min-height: 15vh !important;
  1160. background-size: contain;
  1161. /* border: 1px solid yellow !important; */
  1162. }
  1163. /* MAP */
  1164. .react-module[ data-react-module-id="about"] div[data-testid="about-map"] .mapkit-static__map {
  1165. height: auto !important;
  1166. min-width: 100% !important;
  1167. max-width: 100% !important;
  1168. background-position: center center;
  1169. background-repeat: no-repeat;
  1170. background-size: contain !important;
  1171. }
  1172. .react-module[ data-react-module-id="about"] div[data-testid="about-map"] .mapkit-static__map img.mapkit-static__img {
  1173. /* height: auto !important; */
  1174. /* max-height: 6vh !important; */
  1175. min-width: 38vw !important;
  1176. max-width: 38vw !important;
  1177. /* background-position: center center;
  1178. background-repeat: no-repeat;
  1179. background-size: contain !important; */
  1180. }
  1181.  
  1182. /* (new49) ABOUT -ITEM */
  1183. #react-layout > div > div section ol.react-results--main li[data-layout="about"] .module--about {
  1184. min-height: 150px ! important;
  1185. max-height: 150px ! important;
  1186. margin-top: 0;
  1187. padding-top: 2px ;
  1188. overflow: hidden !important;
  1189. overflow-y: auto !important;
  1190. transition: all ease 0.7s ;
  1191. /*background: olive !important;*/
  1192. }
  1193. #react-layout > div > div section ol.react-results--main li[data-layout="about"] section {
  1194. min-height: 12vh !important;
  1195. /* max-height: 12vh !important; */
  1196. padding: 0 8px !important;
  1197. /* border: 1px solid aqua !important; */
  1198. }
  1199.  
  1200.  
  1201. /* (new48) SIDEBAR for ABOUT ? */
  1202. .results--sidebar.js-vertical-sidebar {
  1203. position: absolute !important;
  1204. display: block;
  1205. height: 5.5vh !important;
  1206. min-width: 253px;
  1207. max-width: 465px;
  1208. top: -5.5vh !important;
  1209. right: 0% !important;
  1210. padding: 0px 0px 0;
  1211. margin: 0 0 0 0 !important;
  1212. text-align: left;
  1213. overflow: hidden;
  1214. z-index: 50 !important;
  1215. /*border: 1px solid pink !important;*/
  1216. }
  1217. .results--sidebar.js-vertical-sidebar:hover {
  1218. height: auto !important;
  1219. z-index: 5000 !important;
  1220. /*border: 1px solid pink !important;*/
  1221. }
  1222. .results--sidebar.js-vertical-sidebar .react-news-sidebar{
  1223. padding: 0 !important;
  1224. }
  1225.  
  1226. .results--sidebar.js-vertical-sidebar .module--about .module__content {
  1227. max-height: 325px;
  1228. padding: 0px 10px 5px 10px !important;
  1229. overflow: hidden;
  1230. }
  1231.  
  1232.  
  1233. /*.results--sidebar:hover .module--about {
  1234. height: auto ;
  1235. padding-top: 2px;
  1236. margin-bottom: 0;
  1237. overflow: hidden;
  1238. overflow-y: auto ;
  1239. transition: all ease 0.7s ;
  1240. }
  1241. .module__content.js-about-module-content {
  1242. padding-top: 0;
  1243. }*/
  1244.  
  1245.  
  1246.  
  1247. /* (new48) NEW CODE - RESULTS ITEMS - NEWS CARROUSEL / .module--carousel__items.s-carousel-module-items / li[data-layout="news"] */
  1248. #react-layout > div > div section ol.react-results--main li[data-layout="news"] .module--carousel__wrap {
  1249. width: 100% !important;
  1250. min-width: 99% !important;
  1251. max-width: 99% !important;
  1252. margin: -1.15vh 0 0 0.5% !important;
  1253. /* background: brown !important; */
  1254. }
  1255. #react-layout > div > div section ol.react-results--main li[data-layout="news"] .module--carousel__item {
  1256. min-width: 30% !important;
  1257. height: 115px !important;
  1258. /* border: 1px solid aqua! important; */
  1259. }
  1260. #react-layout > div > div section ol.react-results--main li[data-layout="news"] .module--carousel__item > .module--carousel__body {
  1261. width: 100%;
  1262. max-height: 7em;
  1263. line-height: 0.4rem !important;
  1264. margin-bottom: 0px !important;
  1265. padding: 2px 2px 0 2px !important;
  1266. text-align: left;
  1267. font-size: 15px !important;
  1268. overflow: hidden;
  1269. /* background: red !important; */
  1270. }
  1271. #react-layout > div > div section ol.react-results--main li[data-layout="news"] .module--carousel__item > .module--carousel__body .module--carousel__body__title {
  1272. display: block;
  1273. line-height: 1rem;
  1274. max-height: 5em;
  1275. font-size: 15px;
  1276. margin-bottom: 0.15em;
  1277. overflow: hidden;
  1278. }
  1279. #react-layout > div > div section ol.react-results--main li[data-layout="news"] .module--carousel__item .module--carousel__body__content {
  1280. font-size: 1em;
  1281. line-height: 1.2;
  1282. max-height: 2.5em;
  1283. overflow: hidden;
  1284. overflow-y: auto !important;
  1285. /*background: brown !important; */
  1286. }
  1287. /* (new56) NEW CODE - RESULTS ITEMS - VIDEO CARROUSEL */
  1288. #react-layout > div > div section ol.react-results--main li[data-layout="videos"] .module--carousel {
  1289. height: 155px !important;
  1290. margin: 0 0 0 0 !important;
  1291. overflow: initial;
  1292. /*background: olive !important;*/
  1293. }
  1294. #react-layout > div > div section ol.react-results--main li[data-layout="videos"] .module--carousel .module__header {
  1295. height: 20px !important;
  1296. margin: 0 0 0 15px !important;
  1297. }
  1298. /* (new56) */
  1299. #react-layout > div > div section ol.react-results--main li[data-layout="videos"] .module.module--carousel.js-module--videos .module--carousel__items.js-carousel-module-items {
  1300. height: 100px !important;
  1301. margin: 15px 0 5px 0 !important;
  1302. /*border: 1px solid aqua! important;*/
  1303. }
  1304. #react-layout > div > div section ol.react-results--main li[data-layout="videos"] .module.module--carousel.js-module--videos .module--carousel__items.js-carousel-module-items .module--carousel__item.has-image {
  1305. height: 93px !important;
  1306. /* border: 1px dotted aqua! important; */
  1307. }
  1308. #react-layout > div > div section ol.react-results--main li[data-layout="videos"] .module.module--carousel.js-module--videos .module--carousel__items.js-carousel-module-items .module--carousel__image-wrapper.js-carousel-item-image-wrapper {
  1309. height: 75px !important;
  1310. /*border: 1px dotted aqua! important;*/
  1311. }
  1312. #react-layout > div > div section ol.react-results--main li[data-layout="videos"] .module.module--carousel.js-module--videos .module--carousel__items.js-carousel-module-items .module--carousel__body {
  1313. width: 100%;
  1314. height: 1.5vh !important;
  1315. margin: 0px !important;
  1316. padding: 2px 0.3em;
  1317. text-align: center;
  1318. overflow: hidden;
  1319. /*background: red !important;*/
  1320. }
  1321. #react-layout > div > div section ol.react-results--main li[data-layout="videos"] .module.module--carousel.js-module--videos .module--carousel__items.js-carousel-module-items .module--carousel__body .module--carousel__body__title {
  1322. height: 1.2vh !important;
  1323. line-height: 1.2vh !important;
  1324. margin: 0px !important;
  1325. white-space: nowrap;
  1326. font-size: 14px !important;
  1327. text-overflow: ellipsis;
  1328. overflow: hidden;
  1329. }
  1330.  
  1331.  
  1332. /* (new56) RESULTS IMAGES - CONTAINER */
  1333. #react-layout > div > div section ol.react-results--main li[data-layout="images"] {
  1334. float: left !important;
  1335. clear: none !important;
  1336. min-height: 155px ! important;
  1337. max-height: 155px ! important;
  1338. min-width: 32.6% ! important;
  1339. max-width: 32.6% ! important;
  1340. margin-right: 4px ! important;
  1341. margin-bottom: 3px !important;
  1342. padding: 1px 1px 1px 0px ! important;
  1343. border-radius: 5px !important;
  1344. /* background: red !important; */
  1345. border: 1px solid gray ! important;
  1346. }
  1347. /* (new56) */
  1348. .module--carousel .module__footer-carousel__label ,
  1349. .module--images .module__footer-carousel__label {
  1350. padding: 3px 32px !important;
  1351. }
  1352.  
  1353. #react-layout > div > div section ol.react-results--main li[data-layout="images"] .module.module--images {
  1354. display: inline-block !important;
  1355. margin: 0px 0px 0px 0px;
  1356. }
  1357. #react-layout > div > div section ol.react-results--main li[data-layout="images"] .module.module--images .module--images__thumbnails {
  1358. display: inline-block !important;
  1359. min-height: 85px ! important;
  1360. max-height: 85px ! important;
  1361. width: 100% ! important;
  1362. padding: 0 0px 0 5px ! important;
  1363. overflow: hidden ! important;
  1364. overflow-y: auto ! important;
  1365. }
  1366. #react-layout > div > div section ol.react-results--main li[data-layout="images"] .module.module--images .module--images__thumbnails .module--images__thumbnails__tile {
  1367. float: left;
  1368. height: 75px !important;
  1369. overflow: hidden;
  1370. }
  1371. #react-layout > div > div section ol.react-results--main li[data-layout="images"] .module.module--images .module--images__thumbnails .module--images__thumbnails__tile .module--images__thumbnails__image {
  1372. position: relative;
  1373. display: inline-block !important;
  1374. height: 100% !important;
  1375. min-height: 75px ! important;
  1376. max-height: 75px ! important;
  1377. object-fit: contain !important;
  1378. }
  1379.  
  1380. /* (new58) COR A VOIR pf FLOAT - NEW CODE - RESULTS - VISITED INDICATOR */
  1381. #react-layout > div > div section ol.react-results--main li[data-layout="organic"] a + a[data-handled-by-react="true"] {
  1382. position: absolute;
  1383. /* position: relative !important; */
  1384. /* position: unset !important; */
  1385. /*display: inline-block !important;*/
  1386. float: left !important;
  1387. /* clear: both !important; */
  1388. min-height: 0.8em ! important;
  1389. max-height: 0.8em ! important;
  1390. line-height: 1em !important;
  1391. min-width: 0.8em ! important;
  1392. max-width: 0.8em ! important;
  1393. margin: -0.5em 0em 0 0em !important;
  1394. padding: 0 0 0 0 !important;
  1395. text-align: center !important;
  1396. border-radius: 100% !important;
  1397. opacity: 0.5 !important;
  1398. /* border-right: 1px solid red ! important; */
  1399. }
  1400. /* .unYeG0luM2YbeXDDPqLg:before , */
  1401. #react-layout > div > div section ol.react-results--main li[data-layout="organic"] a + a:before {
  1402. display:inline-block !important;
  1403. content:"\2611";
  1404. font-family:ddg-serp-icons!important;
  1405. font-style:normal;
  1406. font-size: 0.8em !important;
  1407. min-height: 0.7em ! important;
  1408. max-height: 0.7em ! important;
  1409. line-height: 1.1 !important;
  1410. min-width: 0.7em ! important;
  1411. max-width: 0.7em ! important;
  1412. border-radius: 100% !important;
  1413. /* border: 1px solid #222 !important; */
  1414. }
  1415.  
  1416. /* (new53) NEW CODE - RESULTS LONG */
  1417. #react-layout > div > div [data-testid="mainline"][data-area="mainline"] {
  1418. display: inline-block !important;
  1419. min-width: 100% ! important;
  1420. max-width: 100% ! important;
  1421. }
  1422. #react-layout > div > div [data-testid="mainline"][data-area="mainline"] ol.react-results--main {
  1423. display: inline-block !important;
  1424. min-width: 99.9% ! important;
  1425. max-width: 99.9% ! important;
  1426. }
  1427.  
  1428. #react-layout > div > div section ol.react-results--main li[data-layout="organic"] article {
  1429. min-height: 140px ! important;
  1430. max-height: 140px ! important;
  1431. min-width: 96.5% ! important;
  1432. max-width: 96.5% ! important;
  1433. border-radius: 5px !important;
  1434. overflow: hidden !important;
  1435. overflow-y: auto !important;
  1436. /* border: 1px solid red ! important; */
  1437. }
  1438.  
  1439. /* (new53) */
  1440. #react-layout > div > div section ol.react-results--main li[data-layout="organic"] article ul li[id^="sl-"] {
  1441. display:inline-block !important;
  1442. margin: 0 2px 0 0 !important;
  1443. padding: 0 3px ! important;
  1444. border-bottom: 1px solid gray ! important;
  1445. /* border: 1px solid violet !important; */
  1446. }
  1447.  
  1448.  
  1449. /* (new39) ACTUALITES / NEWS */
  1450. .vertical.vertical--news .results.js-vertical-results {
  1451. position: relative;
  1452. width: 100% ! important;
  1453. min-width: 99% ! important;
  1454. max-width: 99% ! important;
  1455. margin: 1em 0 2em 0 !important;
  1456. padding-bottom: 5em;
  1457. /* border: 1px solid yellow ! important; */
  1458. }
  1459. .vertical.vertical--news .results.js-vertical-results .result.result--news {
  1460. float: left !important;
  1461. clear: none !important;
  1462. min-height: 155px ! important;
  1463. max-height: 155px ! important;
  1464. min-width: 32.6% ! important;
  1465. max-width: 32.6% ! important;
  1466. margin: 0 4px 3px 6px !important;
  1467. padding: 3px 1px 1px 0px ! important;
  1468. border-radius: 5px !important;
  1469. border: 1px solid gray ! important;
  1470. }
  1471. .results.js-vertical-results .result.result--more.js-result-more {
  1472. position: absolute;
  1473. width: 100% !important;
  1474. bottom: -3vh !important;
  1475. left: 0;
  1476. margin: 0 0 0 0 !important;
  1477. padding: 0 !important;
  1478.  
  1479. }
  1480. .vertical.vertical--news .result.result--sep.result--sep--hr.has-pagenum.js-result-sep {
  1481. float: left !important;
  1482. clear: none !important;
  1483. min-height: 10px !important;
  1484. max-height: 10px !important;
  1485. line-height: 6px !important;
  1486. min-width: 97.4% ! important;
  1487. max-width: 97.4% ! important;
  1488. margin: 0px 0px 15px 0px !important;
  1489. bottom: -5px !important;
  1490. padding: 5px 0 0 0 ! important;
  1491. /* border-radius: 5px !important; */
  1492. /* border: 1px solid aqua ! important; */
  1493. }
  1494. .vertical.vertical--news .result.result--sep.result--sep--hr.has-pagenum.js-result-sep .result__pagenum--side {
  1495. font-size: 13px;
  1496. color: silver;
  1497. background: #ae5a5a !important;
  1498. }
  1499.  
  1500.  
  1501. /* (new39) RELATED - IMAGES CARROUSEL */
  1502. #links.results.js-results .module-slot:not(:empty) .module.module--images[style="visibility: visible;"] {
  1503. position: relative;
  1504. display: inline-block !important;
  1505. width: 100%;
  1506. min-width: 90% !important;
  1507. max-width: 90% !important;
  1508. min-height: 155px ! important;
  1509. max-height: 400px ! important;
  1510. margin: 0 0 0 0 !important;
  1511. padding: 5px 5% !important;
  1512. text-align: center !important;
  1513. box-shadow: unset !important;
  1514. /* background: red !important; */
  1515. /* border: 1px solid aqua !important; */
  1516. }
  1517.  
  1518.  
  1519. /* (new39) OTHER CODE - RELATED - RESULTS ASSOCIATED */
  1520. #links.results.js-results .module-slot:not(:empty) .related-searches ,
  1521. #react-layout > div > div section ol.react-results--main li[data-layout="organic"]:not([data-layout="related_searches"]):not(:empty) .related-searches {
  1522. position: relative;
  1523. display: inline-block !important;
  1524. width: 100%;
  1525. min-width: 100% !important;
  1526. max-width: 100% !important;
  1527. min-height: 155px ! important;
  1528. max-height: 195px ! important;
  1529. margin: 0 0 0 0 !important;
  1530. padding: 0 0% 0 34% !important;
  1531. box-shadow: unset !important;
  1532. /* background: red !important; */
  1533. /* border: 1px solid yellow !important; */
  1534. }
  1535.  
  1536.  
  1537. /* (new47) */
  1538. #react-layout > div > div section ol.react-results--main li[data-layout="related_searches"] {
  1539. float: left !important;
  1540. clear: none !important;
  1541. min-height: 155px ! important;
  1542. max-height: 155px ! important;
  1543. min-width: 32.6% ! important;
  1544. max-width: 32.6% ! important;
  1545. margin-right: 4px ! important;
  1546. margin-bottom: 3px !important;
  1547. padding: 1px 1px 1px 0px ! important;
  1548. overflow: hidden !important;
  1549. overflow-y: auto !important;
  1550. border-radius: 5px !important;
  1551. border: 1px solid silver ! important;
  1552. }
  1553. ol.related-searches__list,
  1554. #react-layout > div > div section ol.react-results--main li[data-layout="related_searches"] ol {
  1555. float: left !important;
  1556. }
  1557. #react-layout > div > div section ol.react-results--main li a:visited{
  1558. color: rgba(210, 179, 140, 0.61) !important;
  1559. }
  1560.  
  1561.  
  1562. /* (new33) ALL */
  1563. #links.results.js-results .nrn-react-div article > div:last-of-type {
  1564. max-height: 12vh !important;
  1565. overflow: hidden !important;
  1566. overflow-y: auto !important;
  1567. /* border: 1px solid aqua !important; */
  1568. }
  1569.  
  1570.  
  1571. /* (new33) TOP FIRST RESULT - .nrn-react-div */
  1572. body.body--serp .site-wrapper.js-site-wrapper #links_wrapper.serp__results.js-serp-results .results--main .results .nrn-react-div article[id="r1-0"][data-nrn="result"][data-handled-by-react="true"],
  1573. body.body--serp .site-wrapper.js-site-wrapper #links_wrapper.serp__results.js-serp-results .nrn-react-div article[id="r1-0"][data-nrn="result"][data-handled-by-react="true"] {
  1574. display: inline-block !important;
  1575. height: auto;
  1576. min-height: 100px;
  1577. width: 100%;
  1578. min-width: 97.1%;
  1579. max-width: 97.1%;
  1580. margin-top: 0;
  1581. border-radius: 4px;
  1582. overflow: hidden;
  1583. border: 1px solid red !important;
  1584. }
  1585. #links.results.js-results .nrn-react-div article[id="r1-0"] > div:last-of-type {
  1586. max-height: 9vh !important;
  1587. margin: 0 !important;
  1588. border-top: 1px dotted gray !important;
  1589. }
  1590.  
  1591. #links.results.js-results .nrn-react-div #r1-0 ul {
  1592. display: inline-block !important;
  1593. width: 100% !important;
  1594. min-width: 99% !important;
  1595. max-width: 99% !important;
  1596. /* border: 1px dashed aqua !important; */
  1597. }
  1598. #links.results.js-results .nrn-react-div #r1-0 ul li {
  1599. display: inline-block !important;
  1600. width: 100% !important;
  1601. min-width: 100% !important;
  1602. max-width: 100% !important;
  1603. padding-right: 51vw !important;
  1604. /* border: 1px solid aqua !important; */
  1605. }
  1606.  
  1607.  
  1608. /* (new32) .nrn-react-div - CHECK - ALL */
  1609. .nrn-react-div article a[data-testid="result-title-check"] {
  1610. width: 100%;
  1611. min-width: 20px;
  1612. max-width: 20px;
  1613. height: 100%;
  1614. min-height: 118px;
  1615. max-height: 118px;
  1616. left: -33px !important;
  1617. margin-top: 2px !important;
  1618. padding: 30px 5px 2px 2px;
  1619. background: rgba(115, 108, 108, 0.28) !important;
  1620. border-left: 2px solid gray !important;
  1621. }
  1622. /* (new32) .nrn-react-div - CHECK */
  1623. .nrn-react-div article a[data-testid="result-title-check"]::before {
  1624. left: -33px !important;
  1625. right: 655px !important;
  1626. content: "☑";
  1627. float: right;
  1628. font-family: "ddg-serp-icons" !important;
  1629. font-style: normal;
  1630. font-variant: normal;
  1631. font-weight: normal !important;
  1632. line-height: 1;
  1633. text-decoration: none !important;
  1634. text-transform: none;
  1635. /* outline: 1px solid gray !important; */
  1636. }
  1637.  
  1638. /* (new32) .nrn-react-div - CHECK */
  1639. body.body--serp .site-wrapper.js-site-wrapper #links_wrapper.serp__results.js-serp-results .nrn-react-div article[id="r1-0"][data-nrn="result"][data-handled-by-react="true"] a[data-testid="result-title-check"]::before {
  1640. margin-top: 20px !important;
  1641. content: "☑";
  1642. }
  1643. body.body--serp .site-wrapper.js-site-wrapper #links_wrapper.serp__results.js-serp-results .nrn-react-div article[id="r1-0"][data-nrn="result"][data-handled-by-react="true"] {
  1644. float: left;
  1645. clear: none;
  1646. min-height: 155px;
  1647. max-height: 155px;
  1648. min-width: 96.2% !important;
  1649. max-width: 96.2% !important;
  1650. margin-bottom: 3px;
  1651. margin-right: 4px;
  1652. padding: 1px 1px 1px 35px;
  1653. /* border: 1px solid yellow !important; */
  1654. }
  1655.  
  1656. /* (new32) .nrn-react-div - VISITED CHECK - ALWAYS VISIBLE */
  1657. .nrn-react-div article a[data-testid="result-title-check"]:visited::before {
  1658. color: #205984 ! important;
  1659. background: rgba(115, 108, 108, 0.28) !important;
  1660. }
  1661. .nrn-react-div article a[data-testid="result-title-check"]:visited {
  1662. border-left: 2px solid red !important;
  1663. }
  1664. .nrn-react-div article a[data-testid="result-title-check"]:hover span {
  1665. display: none !important;
  1666. }
  1667.  
  1668. /* (new33) - TOP INFO - === */
  1669.  
  1670. /* TEST LINKs: not good
  1671. RECH ASSOCIEES
  1672. https://duckduckgo.com/?q=script&ia=web
  1673. DEF / MAP INFOS
  1674. https://duckduckgo.com/?q=wikipedia&t=ffsb&ia=web
  1675. https://duckduckgo.com/?q=metaKey&t=ffsb&ia=web
  1676. https://duckduckgo.com/?q=microsoft&t=ffsb&ia=places
  1677. ======= */
  1678.  
  1679. /* (new33) - TOP RESULT - [A VOIR */
  1680. .results--sidebar.js-results-sidebar {
  1681. position: absolute !important;
  1682. display: block !important;
  1683. /* height: 45px !important; */
  1684. max-height: 45px !important;
  1685. min-width: 460px !important;
  1686. max-width: 460px !important;
  1687. top: -10px !important;
  1688. left: 35% !important;
  1689. text-align: center ;
  1690. z-index: 50;
  1691. overflow: hidden !important;
  1692. overflow-y: hidden !important;
  1693. transition: all ease 0.7s ;
  1694. /* border: 1px solid aqua ; */
  1695. }
  1696. /* (new37A) */
  1697. div[data-testid="mainline"] + .results--sidebar.js-results-sidebar {
  1698. /* left: 0% !important;*/
  1699. /* border: 1px solid aqua !important; */
  1700. }
  1701.  
  1702. /* (new25) TOP INFO */
  1703. #zero_click_wrapper ~ #web_content_wrapper .cw .results--sidebar.js-results-sidebar {
  1704. top: 0px;
  1705. padding: 0 ;
  1706. }
  1707. /* (new23) START - TOP INFO - WITH MAP */
  1708. #zero_click_wrapper ~ #web_content_wrapper .cw .results--sidebar.js-results-sidebar:not(:hover) .module.module--about.js-about-module.has-content-height {
  1709. height: 45px;
  1710. width: 100% !important;
  1711. min-width: 460px !important;
  1712. max-width: 460px !important;
  1713. }
  1714. #zero_click_wrapper ~ #web_content_wrapper .cw .results--sidebar.js-results-sidebar:not(:hover) .module.module--about.js-about-module.has-content-height .mapkit-static__map {
  1715. background-position: left center;
  1716. background-repeat: no-repeat;
  1717. background-size: contain;
  1718. position: relative;
  1719. }
  1720. #zero_click_wrapper ~ #web_content_wrapper .cw .results--sidebar.js-results-sidebar:not(:hover) .module.module--about.js-about-module.has-content-height .mapkit-static__img{
  1721. display: block;
  1722. height: 30px;
  1723. opacity: 0;
  1724. }
  1725. /* (new33) */
  1726. #zero_click_wrapper ~ #web_content_wrapper .cw .results--sidebar.js-results-sidebar:not(:hover) .module.module--about.js-about-module.has-content-height .module__title {
  1727. position: absolute ;
  1728. display: inline-block ;
  1729. width: 100% !important;
  1730. min-width: 460px !important;
  1731. max-width: 460px !important;
  1732. height: 43px;
  1733. line-height: 40px;
  1734. top: 0px ;
  1735. left: 0 ;
  1736. margin-left: 0% !important;
  1737. text-align: center !important;
  1738. z-index: 500 !important;
  1739. background: rgba(17, 17, 17, 0.71) !important;
  1740. }
  1741. #zero_click_wrapper ~ #web_content_wrapper .cw .results--sidebar.js-results-sidebar:hover .module.module--about.js-about-module.has-content-height .module__title {
  1742. position: absolute ;
  1743. display: inline-block ;
  1744. width: 100% !important;
  1745. top: 5px ;
  1746. margin-left: -5% !important;
  1747. text-align: center !important;
  1748. /* backgound: red !important; */
  1749. }
  1750.  
  1751. /* (new27) */
  1752. /* .module--about.has-content-height .module__content .module__title::before,
  1753. .module--about.has-content-height .module__content .module__title::after , */
  1754. #zero_click_wrapper ~ #web_content_wrapper .cw .results--sidebar.js-results-sidebar .module--about.is-expanded .module__content:before,
  1755. #zero_click_wrapper ~ #web_content_wrapper .cw .results--sidebar.js-results-sidebar .module--about.is-expanded .module__content::after {
  1756. color: red;
  1757. content: "▼";
  1758. font-size: 15px;
  1759. position: absolute ;
  1760. display: inline-block ;
  1761. top: 0 ;
  1762. left: 0 !important;
  1763. }
  1764. /* END - (new23) WITH MAP */
  1765.  
  1766.  
  1767. /* (new34) FIRST TOP RESULT - BEFORE TOP RESULT ORGANIC BAR - CARROUSEL .module--carousel */
  1768. #links_wrapper.serp__results.js-serp-results .ia-modules.js-ia-modules:not(:empty) {
  1769. position: relative !important;
  1770. display: inline-block !important;
  1771. width: 97.9% !important;
  1772. top: 5px !important;
  1773. overflow: hidden;
  1774. text-align: center !important;
  1775. border-radius: 5px !important;
  1776. transition: all 0.7s ease 0s;
  1777. border: 1px solid gray !important;
  1778. }
  1779. #links_wrapper.serp__results.js-serp-results .ia-modules.js-ia-modules:not(:empty) .module--carousel__wrap {
  1780. padding: 0 20px 0 20px !important;
  1781. }
  1782.  
  1783. #links_wrapper.serp__results.js-serp-results .ia-modules.js-ia-modules:not(:empty) .module--about {
  1784. display: inline-block !important;
  1785. width: 30% !important;
  1786. height: 50px !important;
  1787. padding-top: 2px;
  1788. margin-bottom: 0;
  1789. overflow: hidden;
  1790. overflow-y: auto ;
  1791. transition: all ease 0.7s ;
  1792. pointer-events: auto !important;
  1793. background: #111 !important;
  1794. border: 1px solid gray !important;
  1795. }
  1796. #links_wrapper.serp__results.js-serp-results .ia-modules.js-ia-modules:not(:empty) .module--about:hover {
  1797. height: auto !important;
  1798. padding-top: 2px;
  1799. margin-bottom: 0;
  1800. overflow: hidden;
  1801. overflow-y: auto ;
  1802. transition: all ease 0.7s ;
  1803. }
  1804. .ia-modules.js-ia-modules .module--about:hover {
  1805. height: auto ;
  1806. padding-top: 2px;
  1807. margin-bottom: 0;
  1808. overflow: hidden;
  1809. overflow-y: auto ;
  1810. transition: all ease 0.7s ;
  1811. }
  1812.  
  1813. /* (new33) */
  1814. #zero_click_wrapper ~ #web_content_wrapper .cw .results--sidebar.js-results-sidebar:hover {
  1815. height: auto !important;
  1816. min-height: 43px;
  1817. max-height: 85vh !important;
  1818. overflow: hidden !important;
  1819. border-radius: 0 0 5px 5px !important;
  1820. background: #111 !important;
  1821. border: 1px solid red !important;
  1822. }
  1823. .results--sidebar.js-results-sidebar .module__content.js-about-module-content .module__title span.module__title__link {
  1824. display: inline-block;
  1825. width: 54% !important;
  1826. font-size: 18px !important;
  1827. /* border: 1px solid violet !important; */
  1828. }
  1829. .results--sidebar.js-results-sidebar:not(:hover) .module__content.js-about-module-content .module__title:before ,
  1830. .results--sidebar.js-results-sidebar:not(:hover) .module__content.js-about-module-content .module__title:after {
  1831. content: "▼" ;
  1832. color: red ;
  1833. font-size: 15px !important;
  1834. }
  1835. /* (new24) */
  1836. .results--sidebar.js-results-sidebar .module__text {
  1837. margin-top: 31px;
  1838. }
  1839. #zero_click_wrapper ~ #web_content_wrapper .cw .results--sidebar.js-results-sidebar:hover #m0-0:empty:before {
  1840. content: "No More Infos ";
  1841. display: inline-block ;
  1842. height: 43px !important;
  1843. width: 100% ;
  1844. line-height: 43px !important;
  1845. text-align: center ;
  1846. font-size: 20px ;
  1847. opacity: 0.2 ;
  1848. border: none ;
  1849. color: gray ;
  1850. background: #111 ;
  1851. }
  1852.  
  1853. .results--sidebar.js-results-sidebar:hover {
  1854. height: auto !important;
  1855. min-height: 43px !important;
  1856. text-align: left ;
  1857. transition: all ease 0.7s ;
  1858. }
  1859.  
  1860. .js-sidebar-modules:not(:empty) {
  1861. min-height: 243px !important;
  1862. margin-bottom: -20px ;
  1863. background: #111 ;
  1864. }
  1865. .js-sidebar-modules:empty {
  1866. height: 0px !important;
  1867. overflow: hidden !important;
  1868. }
  1869.  
  1870.  
  1871.  
  1872. /* new27) TOP HEADER STACK */
  1873.  
  1874. .module.module--about.module--zci-stack_overflow.js-module--stack_overflow.js-about-module .module__link--two-line{
  1875. margin-bottom: -3px !important;
  1876. }
  1877. .module.module--about.module--zci-stack_overflow.js-module--stack_overflow .js-about-item-clickable-header {
  1878. margin-bottom: 0 !important;
  1879. padding-bottom: 0 !important;
  1880. }
  1881. .module.module--about.module--zci-stack_overflow.js-module--stack_overflow .module__text.module__text--no-padding {
  1882. margin-top: 0px !important;
  1883. }
  1884. .module.module--about.module--zci-stack_overflow.js-module--stack_overflow .module__text.module__text--no-padding span.js-about-item-abstr{
  1885. display: inline-block !important;
  1886. height: auto !important;
  1887. max-height: 73vh !important;
  1888. border-radius: 0 0 5px 5px;
  1889. overflow: hidden !important;
  1890. overflow-y: auto !important;
  1891. }
  1892.  
  1893. /* (new24) MAP - RIGHT PANEL VERT - IMG CARROUSEL SITE WRAPPER */
  1894. .vertical--map__sidebar__wrapper .module--about {
  1895. height: auto !important;
  1896. margin-top: 0;
  1897. padding-top: 2px ;
  1898. }
  1899.  
  1900.  
  1901. /* IMAGE RIGHT - for Transparancy _
  1902. https://duckduckgo.com/?q=ubuntu&t=ffsb&ia=web
  1903. === */
  1904. .js-about-module-image {
  1905. padding: 0px !important;
  1906. transform: scale(0.7) !important;
  1907. transform-origin: center center ;
  1908. }
  1909. .module--about__img {
  1910. padding: 3px !important;
  1911. transform: scale(0.5) !important;
  1912. transform-origin: top right ;
  1913. border: 1px solid #404040 !important;
  1914. box-shadow: 3px 3px 2px black ;
  1915. }
  1916. .results--sidebar:hover .module--about__img {
  1917. padding: 4px !important;
  1918. transform: scale(1) !important;
  1919. }
  1920.  
  1921. /* THEM - OTHERS */
  1922. .results--sidebar {
  1923. background: rgba(150, 150, 150, 0.3) !important;
  1924. }
  1925. .results--sidebar:hover .module--about {
  1926. box-shadow: 4px 4px 5px black ;
  1927. background: white !important;
  1928. }
  1929. .module--about__img {
  1930. background: white ;
  1931. }
  1932.  
  1933. /* (new25) THEM - DARK AND BLACK */
  1934. .dark-bg.dark-header .results--sidebar {
  1935. /* background: #222 ; */
  1936. background: transparent !important;
  1937. }
  1938. .dark-bg.dark-header .results--sidebar:hover {
  1939. z-index: 50000 !important;
  1940. /* background: #111 !important; */
  1941. }
  1942. .results--sidebar.js-results-sidebar .js-sidebar-ads #m0-0:not(:empty) {
  1943. width: 100% !important;
  1944. min-width: 460px !important;
  1945. max-width: 460px !important;
  1946. z-index: 50000 !important;
  1947. border: 1px solid #333 !important;
  1948. background: transparent !important;
  1949. }
  1950.  
  1951.  
  1952. .dark-bg.dark-header .results--sidebar:hover .module--about {
  1953. background: #222 !important;
  1954. }
  1955. .dark-bg.dark-header .module--about__img {
  1956. background: rgba(150, 150, 150, 0.8) ;
  1957. }
  1958. /* (new37A) */
  1959. .ddgpt-container:not(:hover) {
  1960. height: 4vh !important;
  1961. padding: 4px 26px 0 26px;
  1962. flex-basis: 0;
  1963. flex-grow: 1;
  1964. word-wrap: break-word;
  1965. border-radius: 8px 8px 0 0 !important;
  1966. white-space: pre-wrap;
  1967. overflow: hidden !important;
  1968. box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
  1969. border: 1px solid red !important;
  1970. background: transparent !important;
  1971. }
  1972.  
  1973. /* (new27) TEST - RESULTS - ADAPTATION FOR GM "LINKYPLUS PLUS" - IMAGES LINKS -
  1974. https://duckduckgo.com/?q=Anti+Stealth+iframe+and+pixel+img&t=ffsb&ia=web
  1975. === */
  1976. .result__snippet a.linkifyplus {
  1977. /* color: rgba(64, 51, 218, 0.76) !important; */
  1978. color: rgba(190, 124, 58, 0.9) !important;
  1979. }
  1980. .linkifyplus img {
  1981. max-width: 10% !important;
  1982. max-height: 51px !important;
  1983. clear: none!important;
  1984. padding: 1px !important;
  1985. overflow: hidden !important;
  1986. color: pink !important;
  1987. border: 1px solid violet !important;
  1988. }
  1989. .linkifyplus:after {
  1990. content: "LinkiFy" !important;
  1991. display: inline-block !important;
  1992. width: 35px !important;
  1993. height: 15px !important;
  1994. float: none !important;
  1995. padding: 1px !important;
  1996. font-size: 10px !important;
  1997. text-align: center !important;
  1998. opacity: 0.2 !important;
  1999. background: yellow !important;
  2000. }
  2001. .linkifyplus:hover:after {
  2002. content: "LinkiFy" !important;
  2003. display: inline-block !important;
  2004. width: 35px !important;
  2005. height: 15px !important;
  2006. float: none !important;
  2007. padding: 1px !important;
  2008. font-size: 10px !important;
  2009. text-align: center !important;
  2010. opacity: 1 !important;
  2011. background: yellow !important;
  2012. }
  2013. /* (new3) - LOGO - === */
  2014. .header__logo-wrap {
  2015. left: 90px !important;
  2016. width: 58px !important;
  2017. }
  2018.  
  2019. /* (new21) SEARCH FIELD - === */
  2020. .header__content.header__search {
  2021. width: 769px !important;
  2022. left: 62px !important;
  2023. }
  2024. .search--header:not(.js-vertical-map-search) {
  2025. width: 805px !important;
  2026. height: 38px;
  2027. padding-left: 9px;
  2028. border-right-width: 3em !important;
  2029. background-color: #f7f7f7 !important;
  2030. }
  2031. .header__search-wrap {
  2032. position: relative;
  2033. width: 808px !important;
  2034. max-width: 808px !important;
  2035. margin-bottom: 3px;
  2036. margin-top: 1px;
  2037. }
  2038.  
  2039. #search_form_input {
  2040. width: 695px !important;
  2041. color: black !important;
  2042. }
  2043.  
  2044.  
  2045. /* (new3) - FIRST ROW RESULTS - IMAGE/RESULTS TITLE VIEW - ARROW left/right - === */
  2046. .tile-nav.can-scroll,
  2047. .tile-nav.can-scroll::after {
  2048. background-color: #de5833 !important;
  2049. color: #fff;
  2050. }
  2051.  
  2052. /* (new3) SUPP - NO VIDEO RESULTS BLOCK CONTAINER - === */
  2053. /* #zero_click_wrapper {
  2054. display: none;
  2055. } */
  2056.  
  2057. /* (new3) - RESULTS ITEMS CONTAINER - HOVER -
  2058. .result__snippet b,
  2059. === */
  2060.  
  2061. .result.results_links_deep.highlight_d.highlight {
  2062. /* border: 1px solid red !important; */
  2063. }
  2064.  
  2065. .result.results_links_deep.highlight_d.highlight .result__check::before {
  2066. left: -33px !important;
  2067. right: 655px !important;
  2068. content: "☑";
  2069. float: right;
  2070. font-family: "ddg-serp-icons" !important;
  2071. font-style: normal;
  2072. font-variant: normal;
  2073. font-weight: normal !important;
  2074. line-height: 1;
  2075. text-decoration: none !important;
  2076. text-transform: none;
  2077. }
  2078.  
  2079. /* (new6) */
  2080. .result__check__tt::before {
  2081. display: none !important;
  2082. }
  2083.  
  2084. /* (new2) - RESULTS HIGHLIGHTING -
  2085. .result__snippet b,
  2086. === */
  2087. .result.results_links_deep.highlight_d.highlight {
  2088. /* background: red !important; */
  2089. border: 1px solid red !important;
  2090. }
  2091. .result.results_links_deep.highlight_d .result__snippet b {
  2092. color: tomato !important;
  2093. }
  2094.  
  2095. /* (new18) RESULTS VISITED CHECK - === */
  2096. .result__check {
  2097. position: absolute;
  2098. width: 1em;
  2099. top: 1.6em !important;
  2100. margin-right: 1em;
  2101. right: 93% !important;
  2102. font-size: 0.8em;
  2103. white-space: nowrap;
  2104. }
  2105. body.body--serp .site-wrapper.js-site-wrapper #links_wrapper.serp__results.js-serp-results .nrn-react-div article[id="r1-0"][data-nrn="result"][data-handled-by-react="true"] a[data-testid="result-title-check"],
  2106. .result:not(:hover) .result__body .result__check ,
  2107. .result:hover .result__body .result__check {
  2108. height: 100% ! important;
  2109. min-height: 118px !important;
  2110. max-height: 118px !important;
  2111. width: 100%! important;
  2112. min-width: 20px ! important;
  2113. max-width: 20px ! important;
  2114. margin-top: -24px !important;
  2115. left: 2px !important;
  2116. padding: 30px 5px 2px 2px !important;
  2117. border-left: 2px solid gray !important;
  2118. background: rgba(115, 108, 108, 0.28) !important;
  2119. }
  2120. /* (new32) .nrn-react-div */
  2121. body.body--serp .site-wrapper.js-site-wrapper #links_wrapper.serp__results.js-serp-results .nrn-react-div article[id="r1-0"][data-nrn="result"][data-handled-by-react="true"] a[data-testid="result-title-check"] {
  2122. height: 100% ! important;
  2123. min-height: 118px !important;
  2124. max-height: 118px !important;
  2125. width: 100%! important;
  2126. min-width: 20px ! important;
  2127. max-width: 20px ! important;
  2128. margin-top: -24px !important;
  2129. left: -33px !important;
  2130. padding: 35px 5px 2px 2px !important;
  2131. border-left: 2px solid gray !important;
  2132. background: rgba(115, 108, 108, 0.28) !important;
  2133. /* background: yellow !important; */
  2134. }
  2135.  
  2136. .result:not(:hover) .result__body .result__check:visited ,
  2137. .result:hover .result__body .result__check:visited {
  2138. border-left: 2px solid red !important;
  2139. }
  2140. .result__check:hover span {
  2141. display: none !important;
  2142. }
  2143.  
  2144. /* (new3) - VISITED CHECK - ALWAYS VISIBLE - === */
  2145. .result__check:visited:before {
  2146. color: #205984 ! important;
  2147. background: rgba(115, 108, 108, 0.28) !important;
  2148. }
  2149. .result__check .result__check,
  2150. .result__check:hover .result__check__tt {
  2151. height: 20px !important;
  2152. top: 7px !important;
  2153. left: -9px!important;
  2154. visibility: visible;
  2155. opacity: 1;
  2156. transition-delay: 0.75s;
  2157. }
  2158. /* (new37) - RESULTS CONTAINER - ==== */
  2159. .results {
  2160. max-width: 100% ! important;
  2161. min-width: 100% ! important;
  2162. /* left: -90px ! important; */
  2163. /* outline: 1px solid green ! important; */
  2164. }
  2165. .cw {
  2166. max-width: 100% ! important;
  2167. min-width: 100% ! important;
  2168. left: 0px ! important;
  2169. padding: 0 !important;
  2170. /* outline: 1px solid green ! important; */
  2171. }
  2172.  
  2173.  
  2174. /* (new37) - ALL */
  2175.  
  2176. .metabar__in, .welcome,
  2177. .zcm-wrap,
  2178. .zci__main,
  2179. .zci__detail,
  2180. .serp__results,
  2181. .tile-wrap .no-results,
  2182. .footer,
  2183. .footer--mobile {
  2184. padding-left: 0px;
  2185. }
  2186.  
  2187. .results--main {
  2188. max-width: 100% ! important;
  2189. min-width: 100% ! important;
  2190. /* left: -90px ! important; */
  2191. /* outline: 1px solid green ! important; */
  2192. }
  2193. .results-wrapper {
  2194. min-width: 91.2% ! important;
  2195. max-width: 91.2% ! important;
  2196. padding-right: 0px !important;
  2197. /* outline: 1px solid red ! important; */
  2198. }
  2199. .cw #links_wrapper.results-wrapper #links.results {
  2200. float: left !important;
  2201. max-width: 99% ! important;
  2202. min-width:90% ! important;
  2203. /* outline: 1px solid red ! important; */
  2204. }
  2205.  
  2206. /* (new6) RESULTS EXTRA - DOMAIN / FULL URL - === */
  2207. .result__url__domain {
  2208. color: red !important;
  2209. display: inline;
  2210. }
  2211. .full-urls .result__url__full {
  2212. color: violet !important;
  2213. opacity: 1;
  2214. visibility: visible;
  2215. }
  2216.  
  2217. /* (new58) COR A VOIR vertical-align - INFINITE SCROLL OK - RESULT CONTAINER - PAGE/s - WITH/WITHOUT LINES SEPARATOR -
  2218. ADAPTATION GM " SEARCH REVIEW:
  2219. https://addons.mozilla.org/en-US/firefox/addon/searchpreview/
  2220. === */
  2221. .result__title {
  2222. position: static;
  2223. display: block;
  2224. /*vertical-align: middle;*/
  2225. max-width: 100%;
  2226. line-height: 1.15;
  2227. padding: 0;
  2228. font-size: 1.31em;
  2229. overflow: hidden;
  2230. margin-top: -10px !important;
  2231. }
  2232. /* (new30) For CHROME ?*/
  2233. #links .result:not(.result--sep):not(.result--more) {
  2234. float: left !important;
  2235. clear: none !important;
  2236. min-height: 155px ! important;
  2237. max-height: 155px ! important;
  2238. min-width: 32.7% ! important;
  2239. max-width: 32.7% ! important;
  2240. margin-right: 4px ! important;
  2241. margin-bottom: 3px !important;
  2242. padding: 1px 1px 1px 35px ! important;
  2243. border: 1px solid gray ! important;
  2244. }
  2245.  
  2246. .result__body.links_main.links_deep {
  2247. margin-top: -20px;
  2248. height: 127px !important;
  2249. overflow: hidden !important;
  2250. }
  2251. .result__snippet {
  2252. height: 95px !important;
  2253. overflow: hidden !important;
  2254. overflow-y: auto !important;
  2255. }
  2256.  
  2257. /* ==== (new5) RESULT CONTAINER - PAGE - TOOGLE BUTTON LOCALISATION (in test) / RESULTS MORE / NO RESULTS RELATED / LINES SEPARATOR ==== /*
  2258.  
  2259. /* (new5) TOOGLE BUTTON LOCALISATION */
  2260.  
  2261. .results--sidebar.js-results-sidebar .region-switch {
  2262. position: absolute !important;
  2263. right: -0.7em !important;
  2264. top: -20px !important;
  2265. text-align: right;
  2266. z-index: 200 !important;
  2267. }
  2268. .region-switch .switch {
  2269. float: left;
  2270. height: 14px !important;
  2271. line-height: 14px !important;
  2272. margin-right: 8px;
  2273. }
  2274. .switch__knob {
  2275. position: absolute;
  2276. display: block;
  2277. height: 12px !important;
  2278. width: 12px !important;
  2279. top: 1px !important;
  2280. left: 2px;
  2281. border-radius: 9px;
  2282. transition: all 0.1s ease 0s, all 0s linear 0s, left 0.3s ease-in-out 0s;
  2283. background-color: #fff;
  2284. }
  2285. /* (new6) */
  2286. /* .is-on .switch__knob {
  2287. left: 32px !important;
  2288. } */
  2289. .switch__on {
  2290. position: absolute;
  2291. line-height: 12px !important;
  2292. left: 10px;
  2293. font-size: 12px !important;
  2294. }
  2295.  
  2296. /* (new6) */
  2297. .region-flag__wrap--small {
  2298. /* height: 14px !important; */
  2299. /* width: 14px !important; */
  2300. /* left: -4px !important; */
  2301. /* margin-top: 11px !important; */
  2302. }
  2303. .region-flag__wrap--small .region-flag__img {
  2304. height: 14px !important;
  2305. }
  2306. .search-filter__icon.region-flag__wrap.region-flag__wrap--small.has-region.js-region-filter-icon {
  2307. height: 14px !important;
  2308. width: 14px !important;
  2309. left: -4px !important;
  2310. margin-top: 11px !important;
  2311. }
  2312.  
  2313. /* (new40) RESULTS MORE BUTTON - AT BOTTOM WIDER - === */
  2314. .result--more.is-loading.js-results-loading ,
  2315. .result.result--more {
  2316. position: absolute !important;
  2317. width: 50% !important;
  2318. bottom: 0px!important;
  2319. left: 0px !important;
  2320. margin-left: 30% !important;
  2321. margin-bottom: -10px!important;
  2322. }
  2323.  
  2324. /* (new5) NO RESULTS BLOCK - === */
  2325. .no-results {
  2326. position: relative !important;
  2327. display: inline-block !important;
  2328. min-width: 99% ! important;
  2329. max-width: 99% ! important;
  2330. bottom: 0 !important;
  2331. padding-left: 0.75em;
  2332. padding-top: 2em;
  2333. margin-left: 0% !important;
  2334. text-align: center !important;
  2335. /* outline: 1px solid peru ! important; */
  2336. }
  2337.  
  2338. /* (new5) LINES SEPARATOR - === */
  2339. #links .result--sep {
  2340. float: left!important;
  2341. min-height: 10px ! important;
  2342. max-height: 10px ! important;
  2343. line-height: 5px ! important;
  2344. min-width: 97.4% ! important;
  2345. max-width: 97.4% ! important;
  2346. margin-top: 0px !important;
  2347. margin-left: 20px ! important;
  2348. bottom: -5px !important;
  2349. }
  2350.  
  2351. /* (nrew5) LINES SEPARATORS - COUNTER (move middle) - === */
  2352. .result--sep--hr::before {
  2353. position: absolute;
  2354. display: block;
  2355. content: "";
  2356. height: 1px;
  2357. left: 10px;
  2358. right: 20px;
  2359. top: 0.25em !important;
  2360. background-color: #e0e0e0;
  2361. }
  2362. .result__pagenum--side {
  2363. position: absolute;
  2364. width: 1.6em;
  2365. height: 1.6em;
  2366. line-height: 1.6em;
  2367. top: -6px !important;
  2368. left: 50% !important;
  2369. padding: 0;
  2370. border-radius: 50%;
  2371. text-align: center;
  2372. }
  2373.  
  2374.  
  2375. /* (new32) RESULTS - COUNTER */
  2376. .nrn-react-div ,
  2377. #links .results_links_deep {
  2378. counter-increment: myIndex ! important;
  2379. }
  2380. /* (new32) .nrn-react-div */
  2381. .nrn-react-div article:before ,
  2382. #links .results_links_deep:before {
  2383. display: inline-block ! important;
  2384. min-width: 15px ! important;
  2385. margin-left: -25px ! important;
  2386. content: counter(myIndex, decimal-leading-zero);
  2387. border-radius: 8px ! important;
  2388. font-size: 10px ! important;
  2389. text-align: center ! important;
  2390. z-index: 10 !important;
  2391. color: red ! important;
  2392. background: gold ! important;
  2393. }
  2394. .nrn-react-div article:before{
  2395. position: absolute !important;
  2396. margin: 5px 0 0 -25px ! important;
  2397. }
  2398. /* (new6) TEST - RESULTS IMAGES - TITLES ON HOVER - === */
  2399.  
  2400. .tile--img__details {
  2401. position: absolute;
  2402. display: inline-block !important;
  2403. max-width: 80% !important;
  2404. max-height: 80% !important;
  2405. top: 10% !important;
  2406. right: 0;
  2407. bottom: 0;
  2408. left: 10% !important;
  2409. border-radius: 5px !important;
  2410. text-align: center;
  2411. background: rgba(0, 0, 0, 0.9) !important;
  2412. color: gold !important;
  2413. transform: scale(0.7) !important;
  2414. opacity: 1 !important;
  2415. transition: all ease 1s !important;
  2416. }
  2417.  
  2418. .tile--img__details:hover {
  2419. position: absolute;
  2420. display: inline-block !important;
  2421. max-width: 80% !important;
  2422. max-height: 80% !important;
  2423. top: 10% !important;
  2424. right: 0;
  2425. bottom: 0;
  2426. left: 10% !important;
  2427. border-radius: 5px !important;
  2428. text-align: center;
  2429. background: rgba(0, 0, 0, 0.4) !important;
  2430. color: gold !important;
  2431. transform: scale(0.7) !important;
  2432. opacity: 1 !important;
  2433. transition: transform ease 1s !important;
  2434. }
  2435.  
  2436. .tile.tile--img.has-detail:hover {
  2437. outline: 1px solid violet !important;
  2438. }
  2439. .tile.tile--img.has-detail .tile--img__media:hover {
  2440. outline: 1px solid peru !important;
  2441. }
  2442. .tile.tile--img.has-detail .tile--img__media .tile--img__img.js-lazyload:hover {
  2443. outline: 1px solid yellow !important;
  2444. }
  2445.  
  2446. /* [A VOIR] */
  2447. .tile.tile--img.has-detail .tile--img__media .tile--img__media__i .tile--img__img.js-lazyload:before {
  2448. content: attr(alt) !important;
  2449. content: "XXXX" !important;
  2450. /* position: absolute !important; */
  2451. position: relative !important;
  2452. display: inline-block !important;
  2453. height: 20px !important;
  2454. width: 200px !important;
  2455. font-size: 30px !important;
  2456. color: red !important;
  2457. z-index: 500000 !important;
  2458. }
  2459.  
  2460. /* BACK to TOP BUTTON - === */
  2461. .results--sidebar--mid {
  2462. position: fixed;
  2463. display: inline-block ! important;
  2464. max-width: 44em;
  2465. width: 20px ! important;
  2466. height: 10px ! important;
  2467. left: -150px !important;
  2468. top: 20px ! important;
  2469. z-index: 5;
  2470. }
  2471.  
  2472. /* TOP HEADER */
  2473. .has-zcm .header-wrap:after {
  2474. height: 9px !important;
  2475. }
  2476.  
  2477. /* (new20) TEST - MOBILE WIDESCREEN -
  2478. https://duckduckgo.com/html/
  2479. === */
  2480.  
  2481. /* TOP */
  2482.  
  2483. .body--html .header.header--html {
  2484. display: inline-block !important;
  2485. width: 100%;
  2486. max-width: none;
  2487. padding: 17px 0 9px;
  2488. text-align: center !important;
  2489. border-bottom: 1px solid #d0d0d0;
  2490. background: #222 !important;
  2491. }
  2492. .body--html .header__form {
  2493. position: relative !important;
  2494. display: inline-block ;
  2495. float: none;
  2496. padding-left: 0;
  2497. width: 100%;
  2498. text-align: center;
  2499. }
  2500. .body--html .search--header {
  2501. position: relative !important;
  2502. display: inline-block ;
  2503. width: 805px !important;
  2504. height: 38px;
  2505. margin: auto !important;
  2506. padding-left: 9px;
  2507. border-right-width: 3em;
  2508. background-color: #f7f7f7;
  2509. }
  2510. .body--html .frm__select {
  2511. position: relative !important;
  2512. display: inline-block ;
  2513. float: none !important;
  2514. height: auto;
  2515. width: 145px;
  2516. margin : 10px auto ;
  2517. background-color: transparent !important;
  2518. }
  2519. /* (new33) */
  2520. .frm__select select {
  2521. -moz-appearance: none;
  2522. position: relative;
  2523. display: block;
  2524. width: 140%;
  2525. min-width: 10em;
  2526. line-height: inherit;
  2527. margin: 0;
  2528. padding: 0 28px 0 0.75em;
  2529. font-size: 1em;
  2530. outline: medium none;
  2531. color: gold !important;
  2532. background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  2533. background-color: red !important;
  2534. }
  2535. /* (new21) MOBILE RESULTS */
  2536. .body--html {
  2537. background: #222 !important;
  2538. }
  2539. .body--html .serp__results {
  2540. max-width: 100%;
  2541. padding-left: 10px;
  2542. color: gray !important;
  2543. background: #222 !important;
  2544. }
  2545. .body--html .result:hover {
  2546. color: gold !important;
  2547. background-color: #333 !important;
  2548. }
  2549. .body--html .result .result__title {
  2550. margin-top: 0 !important;
  2551. }
  2552. .body--html .result .result__title a {
  2553. color: peru !important;
  2554. }
  2555. .body--html .result .result__title a:visited {
  2556. color: tomato !important;
  2557. }
  2558.  
  2559. .body--html .result .result__snippet {
  2560. height: 90px !important;
  2561. overflow-x: hidden;
  2562. overflow-y: auto;
  2563. color: #ccc !important;
  2564. }
  2565.  
  2566. .body--html .result .result__snippet > b{
  2567. color: gold;
  2568. }
  2569. /* END */
  2570. }