☰

Google Card-Style UI

Greatly Beautify Google UI!

目前為 2018-12-11 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        Google Card-Style UI
  3. // @description Greatly Beautify Google UI!
  4. // @author      Fei Sun
  5. // @version     1.2.6
  6. // @include     http://www.google.*/*
  7. // @include     https://www.google.*/*
  8. // @grant       GM_getValue
  9. // @grant       GM_setValue
  10. // @grant       GM_deleteValue
  11. // @grant       GM_xmlhttpRequest
  12. // @namespace https://greasyfork.org/users/35010
  13. // ==/UserScript==
  14. /*jshint multistr: true */
  15. var cssblock=document.createElement("div");
  16. var csstext=`<style>body {
  17. background:#f9f9f9;
  18. }
  19. * {
  20. font-family:'Segoe UI','Microsoft YaHei'!important;
  21. outline:none;
  22. }
  23. div.col,div.col *,div.g {
  24. box-sizing:border-box;
  25. }
  26. .VoEfsd,.g {
  27. box-shadow:0px 1px 2px rgba(0,0,0,0.1);
  28. transition:box-shadow 0.3s;
  29. }
  30. .exp-outline {
  31. border:none;
  32. }
  33. .bh13Qc {
  34. margin-left:0;
  35. margin-right:0;
  36. }
  37. .g {
  38. background:white;
  39. padding:25px;
  40. margin-bottom:15px!important;
  41. margin-right:0px;
  42. position:relative;
  43. }
  44. .VoEfsd:hover,.g:hover {
  45. box-shadow:0px 1px 15px rgba(0,0,0,0.1);
  46. }
  47. a.fl:link, .fl a, .flt, a.flt, .gl a:link, a.mblink, .mblink b,a:link, .w, #prs a:visited, #prs a:active, .q:active, .q:visited, .kl:active, .tbotu,.xXEKkb {
  48. color:#006621;
  49. }
  50. .RJn8N.xXEKkb.ellip {
  51. color:#006621!important;
  52. }
  53. .appbar {
  54. margin-top:59px;
  55. border-bottom:none;
  56. }
  57. .appbar.hdtb-ab-o {
  58. }
  59. body.vasq #hdtbMenus.hdtb-td-o {
  60. height:44px;
  61. box-shadow:0px 1px 2px rgba(0,0,0,0.1);
  62. box-sizing:border-box;
  63. }
  64. #cnt {
  65. width:100%;
  66. }
  67. .mw {
  68. width:100%;
  69. max-width:100%!important;
  70. }
  71. #rcnt {
  72. width:100%!important;
  73. box-sizing:border-box;
  74. margin-top:0px;
  75. }
  76. #rcnt .col:nth-of-type(2) {
  77. width:65%!important;
  78. min-width:582px;
  79. margin-left:6%;
  80. }
  81. #rcnt .col:nth-of-type(3) {
  82. width:23%!important;
  83. float:left;
  84. padding-top:6px;
  85. }
  86. #rhs .rhsvw {
  87. width:100%;
  88. }
  89. .kp-blk {
  90. box-shadow:none;
  91. }
  92. #center_col {
  93. width:100%!important;
  94. min-width:0px!important;
  95. margin-left:0px!important;
  96. padding-top:0px!important;
  97. }
  98. #rhscol {
  99. width:20%!important;
  100. min-width:200px;
  101. float:right;
  102. }
  103. #rhs {
  104. margin-left:0px!important;
  105. }
  106. .kp-blk._Jw._Rqb._RJe {
  107. margin:0px!important;
  108. }
  109. .s {
  110. max-width:100%;
  111. }
  112. h3.r:after {
  113. content:'';
  114. display:block;
  115. border-top:1px solid #ebebeb;
  116. height:0px;
  117. margin-top:5px;
  118. margin-bottom:5px;
  119. }
  120. #center_col .kp-blk {
  121. margin-left:0px;
  122. margin-right:0px;
  123. }
  124. .kno-ftr {
  125. margin: 0 -35px 0 -8px;
  126. padding: 4px 40px 0;
  127. }
  128. .related-question-pair>div>div>div>div {
  129. padding-top:10px!important;
  130. }
  131. ._U7g._grf {
  132. padding-top:10px;
  133. padding-bottom:10px;
  134. }
  135. #extrares {
  136. background:transparent;
  137. padding:0px 15px!important;
  138. }
  139. #botstuff {
  140. background:white;
  141. padding:20px;
  142. box-shadow:0px 1px 2px rgba(0,0,0,0.1);
  143. transition:all 0.5s;
  144. position:relative;
  145. }
  146. #botstuff:hover {
  147. box-shadow:0px 1px 15px rgba(0,0,0,0.1);
  148. }
  149. ._Ugf {
  150. overflow:hidden;
  151. }
  152. a._Eu._H2 {
  153. display:block;
  154. width:100%!important;
  155. background:white;
  156. padding:20px;
  157. box-shadow:0px 1px 2px rgba(0,0,0,0.1);
  158. transition:all 0.5s;
  159. position:relative;
  160. }
  161. a._Eu._H2:hover {
  162. box-shadow:0px 1px 15px rgba(0,0,0,0.1);
  163. }
  164. div#bcenter {
  165. display:none;
  166. }
  167. /*remove ads*/
  168. div#tads {
  169. display:none;
  170. }
  171. div#bottomads {
  172. display:none;
  173. }
  174. img#hplogo {
  175. box-sizing:content-box;
  176. }
  177. ol#ab_ctls * {
  178. box-sizing:content-box!important;
  179. }
  180. g-snapping-carousel {
  181. margin-left:12px;
  182. margin-right:12px;
  183. }
  184. #foot {
  185. width:calc(100% - 16px)!important;
  186. margin-left:8px;
  187. box-sizing:border-box;
  188. padding:1px;
  189. }
  190. #fbarcnt {
  191. padding-left:30%;
  192. }
  193. #footcnt {
  194. background:#f2f2f2;
  195. border-top:1px solid #e4e4e4;
  196. }
  197. #fbar {
  198. border-top:none;
  199. min-width:0px;
  200. }
  201. #rhs .kp-blk {
  202. margin:0px;
  203. }
  204. div#subform_ctrl {
  205. margin-top:0px!important;
  206. }
  207. #slim_appbar {
  208. height:44px;
  209. }
  210. #hdtbMenus.hdtb-td-o {
  211. background:#fafafa;
  212. top:59px!important;
  213. }
  214. .appbar {
  215. margin-top:40px;
  216. }
  217. #resultStats {
  218. line-height:44px!important;
  219. }
  220. #res a:link,#extrares a:link {
  221. color:#222!important;
  222. }
  223. #res a:visited,#extrares a:visited {
  224. color:#999!important;
  225. }
  226. #appbar {
  227. background:#fafafa;
  228. }
  229. #res {
  230. padding:0px 15px;
  231. }
  232. div._M6k.vk_c {
  233. width:100%;
  234. margin-left:0px!important;
  235. box-shadow:0px 1px 2px rgba(0,0,0,0.1);
  236. }
  237. div._M6k.vk_c:hover {
  238. box-shadow:1px 1px 15px rgba(0,0,0,0.1);
  239. }
  240. #hdtbSum {
  241. background:#fafafa!important;
  242. }
  243. g-card-grid {
  244. margin:0px;
  245. }
  246. .hdtb-mn-cont {
  247. margin-top:8px;
  248. }
  249. .kno-ftr.rhsvw {
  250. padding-bottom:4px;
  251. }
  252. ._KBh {
  253. background: white;
  254. padding: 25px;
  255. box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
  256. margin-bottom: 15px!important;
  257. margin-right: 0px;
  258. transition: box-shadow 0.5s;
  259. position: relative;
  260. box-sizing:border-box;
  261. width:100%;
  262. margin:0;
  263. }
  264. ._KBh:hover {
  265. box-shadow:0px 1px 15px rgba(0,0,0,0.1);
  266. }
  267. g-more-link *{
  268. color:#222!important;
  269. }
  270. ._Bfp {
  271. width:100%;
  272. margin:0;
  273. }
  274. ._wCh {
  275. padding:0;
  276. }
  277. ._Ncr {
  278. margin:0;
  279. }
  280. .H3O4uc {
  281. margin-left:0;
  282. margin-right:0;
  283. }
  284. .vk_c, .vk_cxp {
  285. margin-left:0;
  286. margin-right:0;
  287. }
  288. .COEoid {
  289. margin:-4px 0;
  290. }
  291. </style>`;
  292. cssblock.innerHTML=csstext;
  293. (function () {
  294.     if (window.location.href.search('tbm=isch')==-1) {
  295.         document.body.appendChild(cssblock);}
  296.     document.getElementById("lst-ib").addEventListener("blur",function () {
  297.         document.querySelector("div.gstl_0.sbdd_a").style.cssText='display:none';
  298.     });
  299.     document.getElementById("lst-ib").addEventListener("focus",function () {
  300.         document.querySelector("div.gstl_0.sbdd_a").style.cssText='display:block';
  301.     });
  302. })();