style.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. /*
  2. * NOTE:
  3. * - The use of browser-specific styles (-moz-, -webkit-) should be avoided.
  4. * If used, they may not render correctly for people reading the email in
  5. * a different browser than the one from which the email was sent.
  6. * - The use of state-dependent styles (like a:hover) don't work because they
  7. * don't match at the time the styles are made explicit. (In email, styles
  8. * must be explicitly applied to all elements -- stylesheets get stripped.)
  9. */
  10. /* This is the overall wrapper, it should be treated as the `body` section. */
  11. .markdown-here-wrapper {
  12. }
  13. /* To add site specific rules, you can use the `data-md-url` attribute that we
  14. add to the wrapper element. Note that rules like this are used depending
  15. on the URL you're *sending* from, not the URL where the recipient views it.
  16. */
  17. /* .markdown-here-wrapper[data-md-url*="mail.yahoo."] ul { color: red; } */
  18. pre, code {
  19. font-size: 0.85em;
  20. font-family: Consolas, Inconsolata, Courier, monospace;
  21. }
  22. code {
  23. margin: 0 0.15em;
  24. padding: 0 0.3em;
  25. white-space: pre-wrap;
  26. border: 1px solid #EAEAEA;
  27. background-color: #F8F8F8;
  28. border-radius: 3px;
  29. display: inline; /* added to fix Yahoo block display of inline code */
  30. }
  31. pre {
  32. font-size: 1em;
  33. line-height: 1.2em;
  34. }
  35. pre code {
  36. white-space: pre;
  37. overflow: auto; /* fixes issue #70: Firefox/Thunderbird: Code blocks with horizontal scroll would have bad background colour */
  38. border-radius: 3px;
  39. border: 1px solid #CCC;
  40. padding: 0.5em 0.7em;
  41. display: block !important; /* added to counteract the Yahoo-specific `code` rule; without this, code blocks in Blogger are broken */
  42. }
  43. /* In edit mode, Wordpress uses a `* { font: ...;} rule+style that makes highlighted
  44. code look non-monospace. This rule will override it. */
  45. .markdown-here-wrapper[data-md-url*="wordpress."] code span {
  46. font: inherit;
  47. }
  48. /* Wordpress adds a grey background to `pre` elements that doesn't go well with
  49. our syntax highlighting. */
  50. .markdown-here-wrapper[data-md-url*="wordpress."] pre {
  51. background-color: transparent;
  52. }
  53. /* This spacing has been tweaked to closely match Gmail+Chrome "paragraph" (two line breaks) spacing. */
  54. p {
  55. /* !important is needed here because Hotmail/Outlook.com uses !important to
  56. kill the margin in <p>. We need this to win. */
  57. margin: 1.2em 0 !important;
  58. }
  59. table, pre, dl, blockquote, q, ul, ol {
  60. margin: 1.2em 0;
  61. }
  62. ul, ol {
  63. padding-left: 2em;
  64. }
  65. li {
  66. margin: 0.5em 0;
  67. }
  68. /* Space paragraphs in a list the same as the list itself. */
  69. li p {
  70. /* Needs !important to override rule above. */
  71. margin: 0.5em 0 !important;
  72. }
  73. /* Smaller spacing for sub-lists */
  74. ul ul, ul ol, ol ul, ol ol {
  75. margin: 0;
  76. padding-left: 1em;
  77. }
  78. dl {
  79. padding: 0;
  80. }
  81. dl dt {
  82. font-size: 1em;
  83. font-weight: bold;
  84. font-style: italic;
  85. }
  86. dl dd {
  87. margin: 0 0 1em;
  88. padding: 0 1em;
  89. }
  90. blockquote, q {
  91. border-left: 4px solid #DDD;
  92. padding: 0 1em;
  93. color: #777;
  94. quotes: none;
  95. }
  96. blockquote::before, blockquote::after, q::before, q::after {
  97. content: none;
  98. }
  99. h1, h2, h3, h4, h5, h6 {
  100. margin: 1.3em 0 1em;
  101. padding: 0;
  102. font-weight: bold;
  103. font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  104. }
  105. h1 {
  106. font-size: 1.6em;
  107. border-bottom: 1px solid #ddd;
  108. }
  109. h2 {
  110. font-size: 1.4em;
  111. border-bottom: 1px solid #eee;
  112. }
  113. h3 {
  114. font-size: 1.3em;
  115. }
  116. h4 {
  117. font-size: 1.2em;
  118. }
  119. h5 {
  120. font-size: 1em;
  121. }
  122. h6 {
  123. font-size: 1em;
  124. color: #777;
  125. }
  126. table {
  127. padding: 0;
  128. border-collapse: collapse;
  129. border-spacing: 0;
  130. font-size: 1em;
  131. font: inherit;
  132. border: 0;
  133. }
  134. tbody {
  135. margin: 0;
  136. padding: 0;
  137. border: 0;
  138. }
  139. table tr {
  140. border: 0;
  141. border-top: 1px solid #CCC;
  142. background-color: white;
  143. margin: 0;
  144. padding: 0;
  145. }
  146. table tr:nth-child(2n) {
  147. background-color: #F8F8F8;
  148. }
  149. table tr th, table tr td {
  150. font-size: 1em;
  151. border: 1px solid #CCC;
  152. margin: 0;
  153. padding: 0.5em 1em;
  154. }
  155. table tr th {
  156. font-weight: bold;
  157. background-color: #F0F0F0;
  158. }