PageRenderTime 60ms CodeModel.GetById 22ms RepoModel.GetById 1ms app.codeStats 0ms

/content_scripts/vimium.css

https://github.com/daidaiworm/vimium
CSS | 402 lines | 344 code | 37 blank | 21 comment | 0 complexity | 007890aef290690117fc0a4016cde39d MD5 | raw file
  1. /*
  2. * Many CSS class names in this file use the verbose "vimiumXYZ" as the class name. This is so we don't
  3. * use the same CSS class names that the page is using, so the page's CSS doesn't mess with the style of our
  4. * Vimium dialogs.
  5. */
  6. /*
  7. * This vimiumReset class can be added to any of our UI elements to give it a clean slate. This is useful in
  8. * case the page has declared a broad rule like "a { padding: 50px; }" which will mess up our UI. These
  9. * declarations contain more specifiers than necessary to increase their specificity (precedence).
  10. */
  11. .vimiumReset,
  12. div.vimiumReset,
  13. span.vimiumReset,
  14. table.vimiumReset,
  15. a.vimiumReset,
  16. a:visited.vimiumReset,
  17. a:link.vimiumReset,
  18. a:hover.vimiumReset,
  19. td.vimiumReset,
  20. tr.vimiumReset {
  21. background: none;
  22. border: none;
  23. bottom: auto;
  24. box-shadow: none;
  25. color: black;
  26. cursor: auto;
  27. display: inline;
  28. float: none;
  29. font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  30. font-size: inherit;
  31. font-style: normal;
  32. font-variant: normal;
  33. font-weight: normal;
  34. height: auto;
  35. left: auto;
  36. letter-spacing: 0;
  37. line-height: 100%;
  38. margin: 0;
  39. max-height: none;
  40. max-width: none;
  41. min-height: 0;
  42. min-width: 0;
  43. opacity: 1;
  44. padding: 0;
  45. position: static;
  46. right: auto;
  47. text-align: left;
  48. text-decoration: none;
  49. text-indent: 0;
  50. text-shadow: none;
  51. text-transform: none;
  52. top: auto;
  53. vertical-align: baseline;
  54. white-space: normal;
  55. width: auto;
  56. z-index: 99999999;
  57. }
  58. /* Linkhints CSS */
  59. div.internalVimiumHintMarker {
  60. position: absolute;
  61. display: block;
  62. top: -1px;
  63. left: -1px;
  64. white-space: nowrap;
  65. overflow: hidden;
  66. font-size: 11px;
  67. padding: 1px 3px 0px 3px;
  68. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF785), color-stop(100%,#FFC542));
  69. border: solid 1px #C38A22;
  70. border-radius: 3px;
  71. box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.3);
  72. }
  73. div.internalVimiumHintMarker span {
  74. color: #302505;
  75. font-family: Helvetica, Arial, sans-serif;
  76. font-weight: bold;
  77. font-size: 11px;
  78. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  79. }
  80. div.internalVimiumHintMarker > .matchingCharacter {
  81. color: #D4AC3A;
  82. }
  83. /* Input hints CSS */
  84. div.internalVimiumInputHint {
  85. position: absolute;
  86. display: block;
  87. background-color: rgba(255, 247, 133, 0.3);
  88. border: solid 1px #C38A22;
  89. }
  90. div.internalVimiumSelectedInputHint {
  91. background-color: rgba(255, 102, 102, 0.3);
  92. border: solid 1px #993333 !important;
  93. }
  94. div.internalVimiumSelectedInputHint span {
  95. color: white !important;
  96. }
  97. /* Help Dialog CSS */
  98. div#vimiumHelpDialog {
  99. border:3px solid red;
  100. opacity:0.92;
  101. background-color:#eee;
  102. position:fixed;
  103. border:2px solid #b3b3b3;
  104. border-radius:6px;
  105. padding:8px 12px;
  106. width:640px;
  107. max-height: 85%;
  108. left:50%;
  109. /* This needs to be 1/2 width to horizontally center the help dialog */
  110. margin-left:-320px;
  111. top:50px;
  112. -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
  113. overflow-y: auto;
  114. z-index:99999998;
  115. }
  116. div#vimiumHelpDialog a { color:blue; }
  117. div#vimiumTitle, div#vimiumTitle span, div#vimiumTitle * { font-size:20px; }
  118. #vimiumTitle {
  119. display: block;
  120. line-height: 130%;
  121. }
  122. div.vimiumColumn {
  123. width:50%;
  124. float:left;
  125. font-size: 11px;
  126. line-height: 130%;
  127. }
  128. div.vimiumColumn tr {
  129. display: table-row;
  130. }
  131. div.vimiumColumn td {
  132. display: table-cell;
  133. font-size: 11px;
  134. line-height: 130%;
  135. }
  136. div.vimiumColumn table, div.vimiumColumn td, div.vimiumColumn tr { padding:0; margin:0; }
  137. div.vimiumColumn table { width:100%; table-layout:auto; }
  138. div.vimiumColumn td { vertical-align:top; padding:1px; }
  139. div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type {
  140. text-align:right;
  141. font-weight:bold;
  142. color:#2f508e;
  143. white-space:nowrap;
  144. }
  145. /* Make the description column as wide as it can be. */
  146. div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; }
  147. div#vimiumHelpDialog div.vimiumDivider {
  148. display: block;
  149. height:1px;
  150. width:92%;
  151. margin:10px auto;
  152. background-color:#9a9a9a;
  153. }
  154. div#vimiumHelpDialog td.vimiumHelpSectionTitle {
  155. font-weight:bold;
  156. padding-top:3px;
  157. }
  158. div#vimiumHelpDialog div.commandName { font-family:"courier new"; }
  159. /* Advanced commands are hidden by default until you show them. */
  160. div#vimiumHelpDialog div.advanced { display: none; }
  161. div#vimiumHelpDialog div.advanced td:nth-of-type(3) { color: #555; }
  162. div#vimiumHelpDialog a.closeButton {
  163. position:absolute;
  164. right:10px;
  165. top:5px;
  166. font-family:"courier new";
  167. font-weight:bold;
  168. color:#555;
  169. text-decoration:none;
  170. padding-left:10px;
  171. font-size:16px;
  172. }
  173. div#vimiumHelpDialog a {
  174. text-decoration: underline;
  175. }
  176. div#vimiumHelpDialog .optionsPage {
  177. position: absolute;
  178. display: block;
  179. font-size: 11px;
  180. line-height: 130%;
  181. right: 60px;
  182. top: 8px;
  183. }
  184. div#vimiumHelpDialog a.closeButton:hover {
  185. color:black;
  186. cursor:default;
  187. -webkit-user-select:none;
  188. }
  189. div#vimiumHelpDialogFooter {
  190. display: block;
  191. position: relative;
  192. }
  193. div#vimiumHelpDialogFooter * { font-size:10px; }
  194. div#vimiumHelpDialogFooter .toggleAdvancedCommands {
  195. position: absolute;
  196. right: 2px;
  197. top: -34px;
  198. }
  199. /* Vimium HUD CSS */
  200. div.vimiumHUD {
  201. display: block;
  202. position: fixed;
  203. top: auto;
  204. left: auto;
  205. bottom: 0px;
  206. color: black;
  207. height: 13px;
  208. min-height: 13px;
  209. width: auto;
  210. max-width: 400px;
  211. min-width: 150px;
  212. text-align: left;
  213. background-color: #ebebeb;
  214. padding: 3px 3px 2px 3px;
  215. margin: 0;
  216. border: 1px solid #b3b3b3;
  217. border-radius: 4px 4px 0 0;
  218. font-family: "Lucida Grande", "Arial", "Sans";
  219. font-size: 12px;
  220. /* One less than vimium's hint markers, so link hints can be shown e.g. for the panel's close button. */
  221. z-index: 99999997;
  222. text-shadow: 0px 1px 2px #FFF;
  223. line-height: 1.0;
  224. opacity: 0;
  225. }
  226. /* Hide the span between search box letters */
  227. div.vimiumHUD span {
  228. display: none;
  229. }
  230. div.vimiumHUD a:link, div.vimiumHUD a:hover {
  231. background: transparent;
  232. color: blue;
  233. text-decoration: underline;
  234. }
  235. div.vimiumHUD a:link.close-button {
  236. float:right;
  237. font-family:courier new;
  238. font-weight:bold;
  239. color:#9C9A9A;
  240. text-decoration:none;
  241. padding-left:10px;
  242. margin-top:-1px;
  243. font-size:14px;
  244. }
  245. div.vimiumHUD a.close-button:hover {
  246. color:#333333;
  247. cursor:default;
  248. -webkit-user-select:none;
  249. }
  250. body.vimiumFindMode ::selection {
  251. background: #ff9632;
  252. };
  253. /* Vomnibar CSS */
  254. #vomnibar ol, #vomnibar ul {
  255. list-style: none;
  256. display: block;
  257. }
  258. #vomnibar {
  259. display: block;
  260. position: fixed;
  261. width: 80%;
  262. min-width: 400px;
  263. top: 70px;
  264. left: 50%;
  265. margin: 0 0 0 -40%;
  266. font-family: sans-serif;
  267. background: #F1F1F1;
  268. text-align: left;
  269. border-radius: 4px;
  270. box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.8);
  271. border: 1px solid #aaa;
  272. /* One less than hint markers and the help dialog. */
  273. z-index: 99999996;
  274. }
  275. #vomnibar input {
  276. font-size: 20px;
  277. height: 34px;
  278. margin-bottom: 0;
  279. padding: 4px;
  280. background-color: white;
  281. border-radius: 3px;
  282. border: 1px solid #E8E8E8;
  283. box-shadow: #444 0px 0px 1px;
  284. width: 100%;
  285. outline: none;
  286. box-sizing: border-box;
  287. }
  288. #vomnibar .vomnibarSearchArea {
  289. display: block;
  290. padding: 10px;
  291. background-color: #F1F1F1;
  292. border-radius: 4px 4px 0 0;
  293. border-bottom: 1px solid #C6C9CE;
  294. }
  295. #vomnibar ul {
  296. background-color: white;
  297. border-radius: 0 0 4px 4px;
  298. list-style: none;
  299. padding: 10px 0;
  300. padding-top: 0;
  301. }
  302. #vomnibar li {
  303. border-bottom: 1px solid #ddd;
  304. line-height: 1.1em;
  305. padding: 7px 10px;
  306. font-size: 16px;
  307. color: black;
  308. position: relative;
  309. }
  310. #vomnibar li:last-of-type {
  311. border-bottom: none;
  312. }
  313. #vomnibar li .vomnibarTopHalf, #vomnibar li .vomnibarBottomHalf {
  314. display: block;
  315. overflow: hidden;
  316. }
  317. #vomnibar li .vomnibarBottomHalf {
  318. font-size: 15px;
  319. margin-top: 3px;
  320. padding: 2px 0;
  321. }
  322. #vomnibar li .vomnibarSource {
  323. color: #777;
  324. margin-right: 4px;
  325. }
  326. #vomnibar li .vomnibarRelevancy {
  327. position: absolute;
  328. right: 0;
  329. top: 0;
  330. padding: 5px;
  331. background-color: white;
  332. color: black;
  333. font-family: monospace;
  334. width: 100px;
  335. overflow: hidden;
  336. }
  337. #vomnibar li .vomnibarUrl {
  338. white-space: nowrap;
  339. color: #224684;
  340. }
  341. #vomnibar li .vomnibarMatch {
  342. font-weight: bold;
  343. color: black;
  344. }
  345. #vomnibar li em, #vomnibar li .vomnibarTitle {
  346. color: black;
  347. margin-left: 4px;
  348. font-weight: normal;
  349. }
  350. #vomnibar li em { font-style: italic; }
  351. #vomnibar li em .vomnibarMatch, #vomnibar li .vomnibarTitle .vomnibarMatch {
  352. color: #333;
  353. text-decoration: underline;
  354. }
  355. #vomnibar li.vomnibarSelected {
  356. background-color: #BBCEE9;
  357. font-weight: normal;
  358. }
  359. div#vimiumFlash {
  360. box-shadow: 0px 0px 4px 2px #4183C4;
  361. padding: 1px;
  362. background-color: transparent;
  363. position: absolute;
  364. z-index: 99999;
  365. }