API tools faq
paste
Guest User

Hacker News Proposed Dark Mode Pre-Patched CSS - 20230615

a guest
Jun 15th, 2023
175
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.67 KB | None | 0 0
raw download clone embed print report
  1. body { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }
  2. td { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }
  3.  
  4. .admin td { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color:#000000; }
  5. .subtext td { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color:#828282; }
  6.  
  7. input { font-family:monospace; font-size:10pt; }
  8. input[type=\"submit\"] { font-family:Verdana, Geneva, sans-serif; }
  9. textarea { font-family:monospace; font-size:10pt; resize:both; }
  10.  
  11. a:link { color:#000000; text-decoration:none; }
  12. a:visited { color:#828282; text-decoration:none; }
  13.  
  14. .default { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#828282; }
  15. .admin { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color:#000000; }
  16. .title { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#828282; overflow:hidden; }
  17. .subtext { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color:#828282; }
  18. .yclinks { font-family:Verdana, Geneva, sans-serif; font-size: 8pt; color:#828282; }
  19. .pagetop { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#222222; line-height:12px; }
  20. .comhead { font-family:Verdana, Geneva, sans-serif; font-size: 8pt; color:#828282; }
  21. .comment { font-family:Verdana, Geneva, sans-serif; font-size: 9pt; }
  22. .hnname { margin-right: 5px; }
  23.  
  24. #hnmain { min-width: 796px; }
  25.  
  26. .title a { word-break: break-word; }
  27.  
  28. .comment a:link, .comment a:visited { text-decoration: underline; }
  29. .noshow { display: none; }
  30. .nosee { visibility: hidden; pointer-events: none; cursor: default }
  31.  
  32. .c00, .c00 a:link { color:#000000; }
  33. .c5a, .c5a a:link, .c5a a:visited { color:#5a5a5a; }
  34. .c73, .c73 a:link, .c73 a:visited { color:#737373; }
  35. .c82, .c82 a:link, .c82 a:visited { color:#828282; }
  36. .c88, .c88 a:link, .c88 a:visited { color:#888888; }
  37. .c9c, .c9c a:link, .c9c a:visited { color:#9c9c9c; }
  38. .cae, .cae a:link, .cae a:visited { color:#aeaeae; }
  39. .cbe, .cbe a:link, .cbe a:visited { color:#bebebe; }
  40. .cce, .cce a:link, .cce a:visited { color:#cecece; }
  41. .cdd, .cdd a:link, .cdd a:visited { color:#dddddd; }
  42.  
  43. .pagetop a:visited { color:#000000;}
  44. .topsel a:link, .topsel a:visited { color:#ffffff; }
  45.  
  46. .subtext a:link, .subtext a:visited { color:#828282; }
  47. .subtext a:hover { text-decoration:underline; }
  48.  
  49. .comhead a:link, .subtext a:visited { color:#828282; }
  50. .comhead a:hover { text-decoration:underline; }
  51.  
  52. .hnmore a:link, a:visited { color:#828282; }
  53. .hnmore { text-decoration:underline; }
  54.  
  55. .default p { margin-top: 8px; margin-bottom: 0px; }
  56.  
  57. .pagebreak {page-break-before:always}
  58.  
  59. pre { overflow: auto; padding: 2px; white-space: pre-wrap; overflow-wrap:anywhere; }
  60. pre:hover { overflow:auto }
  61.  
  62. .votearrow {
  63. width: 10px;
  64. height: 10px;
  65. border: 0px;
  66. margin: 3px 2px 6px;
  67. no-repeat;
  68. background: url("triangle.svg"), linear-gradient(transparent, transparent) no-repeat;
  69. background-size: 10px;
  70. }
  71.  
  72. .votelinks.nosee div.votearrow.rotate180 {
  73. display: none;
  74. }
  75.  
  76. table.padtab td { padding:0px 10px }
  77.  
  78. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  79. .votearrow {
  80. background-size: 10px;
  81. background-image: url("triangle.svg"), linear-gradient(transparent, transparent);
  82. }
  83. }
  84.  
  85. .rotate180 {
  86. -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */
  87. -moz-transform: rotate(180deg); /* FF */
  88. -o-transform: rotate(180deg); /* Opera */
  89. -ms-transform: rotate(180deg); /* IE9 */
  90. transform: rotate(180deg); /* W3C complaint browsers */
  91.  
  92. /* IE8 and below */
  93. -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')";
  94. }
  95.  
  96. /* dark mode */
  97. @media (prefers-color-scheme: dark) {
  98. body { background-color: #000000; color:#d4d4d4; }
  99. td { color:#d4d4d4; }
  100.  
  101. #hnmain { background-color: #1a1a1a; }
  102.  
  103. .admin td { color:#ffffff; }
  104. .subtext td { color:#d4d4d4; }
  105.  
  106. a:link { color:#ffffff; }
  107. a:visited { color:#d4d4d4; }
  108.  
  109. .default { color:#d4d4d4; }
  110. .admin { color:#ffffff; }
  111. .title { color:#d4d4d4; }
  112. .subtext { color:#d4d4d4; }
  113. .yclinks { color:#d4d4d4; }
  114. .pagetop { color:#dddddd; }
  115. .comhead { color:#d4d4d4; }
  116.  
  117. .c00, .c00 a:link { color:#ffffff; }
  118. .c5a, .c5a a:link, .c5a a:visited { color:#a5a5a5; }
  119. .c73, .c73 a:link, .c73 a:visited { color:#8c8c8c; }
  120. .c82, .c82 a:link, .c82 a:visited { color:#d4d4d4; }
  121. .c88, .c88 a:link, .c88 a:visited { color:#777777; }
  122. .c9c, .c9c a:link, .c9c a:visited { color:#636363; }
  123. .cae, .cae a:link, .cae a:visited { color:#515151; }
  124. .cbe, .cbe a:link, .cbe a:visited { color:#414141; }
  125. .cce, .cce a:link, .cce a:visited { color:#313131; }
  126. .cdd, .cdd a:link, .cdd a:visited { color:#222222; }
  127.  
  128. .pagetop a:visited { color:#ffffff;}
  129. .topsel a:link, .topsel a:visited { color:#000000; }
  130.  
  131. .subtext a:link, .subtext a:visited { color:#d4d4d4; }
  132.  
  133. .comhead a:link, .subtext a:visited { color:#d4d4d4; }
  134.  
  135. .hnmore a:link, a:visited { color:#d4d4d4; }
  136. }
  137.  
  138. /* mobile device */
  139. @media only screen
  140. and (min-width : 300px)
  141. and (max-width : 750px) {
  142. #hnmain { width: 100%; min-width: 0; }
  143. body { padding: 0; margin: 0; width: 100%; }
  144. td { height: inherit !important; }
  145. .title, .comment { font-size: inherit; }
  146. span.pagetop { display: block; margin: 3px 5px; font-size: 12px; line-height: normal }
  147. span.pagetop b { display: block; font-size: 15px; }
  148. table.comment-tree .comment a { display: inline-block; max-width: 200px; overflow: hidden; white-space: nowrap;
  149. text-overflow: ellipsis; vertical-align:top; }
  150. img[src='s.gif'][width='40'] { width: 12px; }
  151. img[src='s.gif'][width='80'] { width: 24px; }
  152. img[src='s.gif'][width='120'] { width: 36px; }
  153. img[src='s.gif'][width='160'] { width: 48px; }
  154. img[src='s.gif'][width='200'] { width: 60px; }
  155. img[src='s.gif'][width='240'] { width: 72px; }
  156. img[src='s.gif'][width='280'] { width: 84px; }
  157. img[src='s.gif'][width='320'] { width: 96px; }
  158. img[src='s.gif'][width='360'] { width: 108px; }
  159. img[src='s.gif'][width='400'] { width: 120px; }
  160. img[src='s.gif'][width='440'] { width: 132px; }
  161. img[src='s.gif'][width='480'] { width: 144px; }
  162. img[src='s.gif'][width='520'] { width: 156px; }
  163. img[src='s.gif'][width='560'] { width: 168px; }
  164. img[src='s.gif'][width='600'] { width: 180px; }
  165. img[src='s.gif'][width='640'] { width: 192px; }
  166. img[src='s.gif'][width='680'] { width: 204px; }
  167. img[src='s.gif'][width='720'] { width: 216px; }
  168. img[src='s.gif'][width='760'] { width: 228px; }
  169. img[src='s.gif'][width='800'] { width: 240px; }
  170. img[src='s.gif'][width='840'] { width: 252px; }
  171. .title { font-size: 11pt; line-height: 14pt; }
  172. .subtext { font-size: 9pt; }
  173. .votearrow { transform: scale(1.3,1.3); margin-right: 6px; }
  174. .votearrow.rotate180 {
  175. -webkit-transform: rotate(180deg) scale(1.3,1.3); /* Chrome and other webkit browsers */
  176. -moz-transform: rotate(180deg) scale(1.3,1.3); /* FF */
  177. -o-transform: rotate(180deg) scale(1.3,1.3); /* Opera */
  178. -ms-transform: rotate(180deg) scale(1.3,1.3); /* IE9 */
  179. transform: rotate(180deg) scale(1.3,1.3); /* W3C complaint browsers */
  180. }
  181. .votelinks { min-width: 18px; }
  182. .votelinks a { display: block; margin-bottom: 9px; }
  183. input[type='text'], input[type='number'], textarea { font-size: 16px; width: 90%; }
  184. }
  185.  
  186. .comment { max-width: 1215px; overflow-wrap:anywhere; }
  187.  
  188.  
  189.  
  190. @media only screen and (min-width : 300px) and (max-width : 389px) {
  191. .comment { max-width: 270px; overflow: hidden }
  192. }
  193. @media only screen and (min-width : 390px) and (max-width : 509px) {
  194. .comment { max-width: 350px; overflow: hidden }
  195. }
  196. @media only screen and (min-width : 510px) and (max-width : 599px) {
  197. .comment { max-width: 460px; overflow: hidden }
  198. }
  199. @media only screen and (min-width : 600px) and (max-width : 689px) {
  200. .comment { max-width: 540px; overflow: hidden }
  201. }
  202. @media only screen and (min-width : 690px) and (max-width : 809px) {
  203. .comment { max-width: 620px; overflow: hidden }
  204. }
  205. @media only screen and (min-width : 810px) and (max-width : 899px) {
  206. .comment { max-width: 730px; overflow: hidden }
  207. }
  208. @media only screen and (min-width : 900px) and (max-width : 1079px) {
  209. .comment { max-width: 810px; overflow: hidden }
  210. }
  211. @media only screen and (min-width : 1080px) and (max-width : 1169px) {
  212. .comment { max-width: 970px; overflow: hidden }
  213. }
  214. @media only screen and (min-width : 1170px) and (max-width : 1259px) {
  215. .comment { max-width: 1050px; overflow: hidden }
  216. }
  217. @media only screen and (min-width : 1260px) and (max-width : 1349px) {
  218. .comment { max-width: 1130px; overflow: hidden }
  219. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!