Advertisement
chaos_a

CSS w/Comments

Feb 21st, 2020 (edited)
232
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.36 KB | None | 0 0
  1. /* DELETE THIS TO LOAD ICONS */
  2. blockquote { /* The main tweet text */
  3.   font-size: 13.2px;
  4.   line-height: 16px;
  5.   margin: 10px 5px;
  6.   position: relative;
  7.   top: -18px;
  8.   margin-top: 0px;
  9.   margin-bottom: 0px;
  10. }
  11. blockquote>blockquote>p>strong>a { /* retweet username/@/timestamp */
  12.     font-size: 14px;
  13.     top: -2px;
  14.     position: relative;
  15. }
  16. blockquote>p:first-child { /* First child spacing */
  17.     margin-top: 16px;
  18. }
  19. blockquote>p:not(:first-child) { /* line spacing for every other p element */
  20.     margin-top: 8px;
  21. }
  22. .md>p>a:link{ /* Tweet time (M/H/Date) */
  23.   left: 43px;
  24.   top: -9px;
  25.   position: relative;
  26.   font-size: 14px;
  27.   text-decoration: none;
  28.   font-family: IBMPlexSans, sans-serif;
  29. }
  30. html{ /* Hides the scrollbar on IE, Never tested */
  31.   overflow: scroll;
  32.   overflow-x: hidden; /* Stops any horizontal scrolling */
  33. }
  34. ::-webkit-scrollbar { /* Hides the scollbar. Webkit (Chrome, Safari) only */
  35.     display: none;
  36. } /* Firefox no longer supports hiding the scroll bar :( */
  37. body { /* Aligns the widget nicely */
  38.   font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  39.   margin: 0px;
  40. }
  41. p>strong>a{ /* View more tweets button */
  42.   display: block;
  43.   text-align: center;
  44.   padding-top: 5px;
  45.   padding-bottom: 5px;
  46.   position: relative;
  47.   bottom: 7px;
  48.   border: 1px solid;
  49.   text-decoration: none;
  50.   color: #1DA1F2 !important;
  51. }
  52. strong>a{ /* Removes the underline */
  53.   text-decoration: none;
  54. }
  55. em { /* make @examples look more like twitter */
  56.   color: #657786;
  57.   font-style: normal;
  58.   font-weight: normal;
  59. }
  60. p>em>a{ /* @ symbol */
  61.   color: #0079D3 !important;
  62.   font-style: normal;
  63.   text-decoration: none;
  64. }
  65. p>del { /* UTC time and subreddit link positioning */
  66.     position: relative;
  67.     top: -9px;
  68.     font-size: 10px;
  69.     font-style: italic;
  70.     text-decoration: none;
  71.     font-family: "Courier New", Courier, monospace;
  72.     text-align: center;
  73.     display: block;
  74.     height: 3px;
  75. }
  76. del:first-child { /* Shift UTC time up a bit so it doesn't overlap */
  77.     top: -20px;
  78. }
  79. p{ /* fixes p element margins */
  80.   margin-bottom:0;
  81. }
  82. h1 {
  83.   text-indent: 5px;
  84.   color: #fff;
  85.   padding-top: 14px;
  86.   padding-bottom: 14px;
  87.   padding-left: 5px;
  88.   letter-spacing: .5px;
  89.   background-color: rgb(0, 121, 211); /* You will need to adjust this to match your subreddit theme color */
  90.   margin: 0;
  91.   font-size: 16px;
  92.   font-family: IBMPlexSans,sans-serif;
  93.   background-size: 45px;
  94.   border-top-right-radius: 2px;
  95.   border-top-left-radius: 2px;
  96.   /*background-image: url(%%logo%%);*/
  97.   background-repeat: no-repeat;
  98.   background-position: right;
  99.   position: sticky;
  100.   top: 0;
  101.   z-index: 1;
  102. }
  103. @media (prefers-color-scheme: dark) { /* dark mode colours */
  104.   html{
  105.     background-color:#19191B;
  106.     color: #d7dadc;
  107.   }
  108.   h1 {
  109.     color: #d7dadc;
  110.   }
  111.   blockquote{
  112.       background-color:#19191B;
  113.       color: #d7dadc;
  114.    }
  115.    a:link{
  116.       color:#d7dadc;
  117.    }
  118.    a:visited{
  119.       color:#757575;
  120.    }
  121.    hr {
  122.       border-color: #343536;
  123.    }
  124.    h2::before, h3::before, h4::before, h5::before, h6::before{
  125.       background-color: black;
  126.    }
  127. }
  128. @media (prefers-color-scheme: light) { /* light mode colours */
  129.   html{
  130.     background-color: white;
  131.   }
  132.    blockquote{
  133.       color: black;
  134.    }
  135.    strong>a:visited{
  136.       color: black;
  137.    }
  138.    a:link{
  139.       color:black;
  140.    }
  141.    a:visited{
  142.       color:#4e4e4e;
  143.    }
  144.    hr {
  145.       border-color: #edeff1;
  146.    }
  147.    h2::before, h3::before, h4::before, h5::before, h6::before{
  148.       background-color: white;
  149.    }
  150. }
  151. hr { /* Line between tweets */
  152.   border-style: solid;
  153.   border-width: 0.6px;
  154.   margin: 0;
  155. }
  156. h2, h3, h4, h5, h6{ /* Positions the username and icon correctly */
  157.   top: -9px;
  158.   height: 20px;
  159.   position: relative;
  160.   margin: 0px;
  161.   font-size: 14px;
  162.   font-family: IBMPlexSans,sans-serif;
  163.   font-weight: bold;
  164. }
  165. h2,h3,h4,h5,h6 > strong > a > em { /* Prevents usernames from wrapping */
  166.     word-break: break-all;
  167.     white-space: nowrap;
  168. }
  169. h2>strong, h3>strong, h4>strong, h5>strong, h6>strong{ /* Username */
  170.   left: 10px;
  171.   position: relative;
  172. }
  173. h2::before, h3::before, h4::before, h5::before, h6::before{ /* Icon position */
  174.   display: inline-block;
  175.   width: 33px;
  176.   height: 33px;
  177.   position: relative;
  178.   top: 21px;
  179.   left: 6px;
  180.   background-size: 33px;
  181.   content: "";
  182.   background-color: #FFFFFF;
  183.   border-radius: 100%;
  184. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement