natrixx

Feedly CSS

Oct 28th, 2021 (edited)
773
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');
  2.  
  3. :root {
  4.   --container-width: 1000px;
  5.  
  6.   --white: #FFF;
  7.   --gray-100: #F8F9FA;
  8.   --gray-200: #E9ECEF;
  9.   --gray-300: #DEE2E6;
  10.   --gray-400: #CED4DA;
  11.   --gray-500: #ADB5BD;
  12.   --gray-600: #6C757D;
  13.   --gray-700: #495057;
  14.   --gray-800: #343A40;
  15.   --gray-900: #212529;
  16.   --primary: #2BB24C;
  17.  
  18.   --ff-base: Roboto, sans-serif;
  19.   --ff-heading: Rubik, sans-serif !important;
  20.  
  21.   --shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
  22.   --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.08), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.16);
  23.   --shadow-lg: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.12), 0 0.375rem 0.375rem rgba(0, 0, 0, 0.16);
  24.  
  25.   --border-radius: 0.25rem;
  26. }
  27.  
  28. html, body {
  29.   font-family: var(--ff-base);
  30.   font-size: 16px !important;
  31. }
  32.  
  33. #feedlyPageHolderFX {
  34.   background-color: var(--gray-100);
  35. }
  36.  
  37. .fx .header.row {
  38.   margin-bottom: 3rem;
  39.   padding-top: 3rem;
  40. }
  41.  
  42. .fx .header.row .Heading--h1 {
  43.   margin: 0;
  44.   font-family: var(--ff-heading);
  45.   font-size: 2rem;
  46.   font-weight: 400;
  47.   color: var(--gray-600);
  48. }
  49.  
  50. .fx .header.row .details {
  51.   display: none;
  52. }
  53.  
  54. .fx .header.row .right-col {
  55.   padding-top: 0 !important;
  56.   padding-bottom: 0;
  57. }
  58.  
  59. .fx .header.row .actions-container > *:nth-child(2),
  60. .fx .header.row .actions-container > *:nth-child(3){
  61.   display: none;
  62. }
  63.  
  64. #topHeaderBarFX {
  65.   display: none;
  66. }
  67.  
  68. #headerBarFX {
  69.   border: none;
  70.   background-color: transparent;
  71. }
  72.  
  73. #headerBarFX > * {
  74.   background-color: var(--white);
  75. }
  76.  
  77. #headerBarFX > *::after {
  78.   display: block;
  79.   content: '';
  80.   position: absolute;
  81.   left: 0;
  82.   right: 0;
  83.   top: 100%;
  84.   height: 0.375rem;
  85.   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent 0.1875rem), linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent);
  86.   z-index: -1;
  87. }
  88.  
  89. #headerBarFX header.row {
  90.   max-width: var(--container-width);
  91.   height: auto;
  92.   padding: 1rem 0;
  93.   transform: translateX(-7px);
  94. }
  95.  
  96. #headerBarFX header.row > [class*='col'] {
  97.   padding: 0;
  98. }
  99.  
  100. #headerBarFX h2 {
  101.   font-family: var(--ff-heading);
  102.   font-size: 1.375rem;
  103.   font-weight: 400;
  104.   color: var(--gray-600);
  105. }
  106.  
  107. #headerBarFX .right-col {
  108.   display: flex;
  109.   align-items: center;
  110.   justify-content: flex-end;
  111. }
  112.  
  113. #headerBarFX .right-col > *:nth-child(2),
  114. #headerBarFX .right-col > *:nth-child(3){
  115.   display: none;
  116. }
  117.  
  118. .fx button.MarkAsReadButton {
  119.   position: relative;
  120.   color: var(--primary);
  121.   transition: none !important;
  122. }
  123.  
  124. .fx button.MarkAsReadButton:hover {
  125.   background-color: transparent !important;
  126.   color: var(--gray-700);
  127. }
  128.  
  129. .fx button.MarkAsReadButton .icon {
  130.   color: inherit;
  131.   opacity: 1;
  132.   transition: none !important;
  133. }
  134.  
  135. .fx button.MarkAsReadButton:hover .icon {
  136.   color: inherit;
  137. }
  138.  
  139. .fx button.MarkAsReadButton .button__label {
  140.   position: absolute;
  141.   left: 0;
  142.   top: 50%;
  143.   width: auto;
  144.   font-size: 1.125rem;
  145.   font-weight: 700;
  146.   color: inherit;
  147.   transform: translateX(-100%) translateX(0.25rem) translateY(-50%);
  148. }
  149.  
  150. #feedlyChrome #feedlyFrame #feedlyPageFX {
  151.   max-width: var(--container-width);
  152.   padding: 0;
  153. }
  154.  
  155. .EntryList__heading {
  156.   margin: 0 0 2rem;
  157.   padding: 0;
  158.   font-size: 1.25rem;
  159.   font-weight: 400;
  160.   text-transform: none;
  161.   color: var(--gray-600);
  162. }
  163.  
  164. .fx .inlineFrame {
  165.   margin: 0 0 3rem;
  166.   padding: 0;
  167.   border-radius: 0;
  168.   border: none;
  169. }
  170.  
  171. .fx .inlineFrame .frameActionsTop {
  172.   display: none;
  173. }
  174.  
  175. .fx .inlineFrame .entryholder {
  176.   border-radius: var(--border-radius);
  177.   background-color: var(--white);
  178.   box-shadow: var(--shadow-sm);
  179. }
  180.  
  181. .fx .inlineFrame.inlineFrame--selected .entryholder {
  182.   box-shadow: var(--shadow-lg);
  183. }
  184.  
  185. .u100Entry {
  186.   max-width: none;
  187.   padding: 3rem 3.5rem;
  188. }
  189.  
  190. .entryHeader {
  191.   margin: 0 0 2rem;
  192.   padding-right: 2rem;
  193. }
  194.  
  195. .entryHeader .metadata {
  196.   margin-bottom: 2.5rem;
  197.   font-size: 0.875rem;
  198.   line-height: 1.2;
  199.   color: var(--gray-400);
  200. }
  201.  
  202. .inlineFrame .u100Entry .entry__title {
  203.   margin-bottom: 1.5rem;
  204.   font-family: var(--ff-heading);
  205.   font-size: 2rem;
  206.   font-weight: 400;
  207.   line-height: 1.2;
  208. }
  209.  
  210. .shareBarHolder {
  211.   position: absolute;
  212.   top: 2.5rem;
  213.   right: 0;
  214.   margin: 0;
  215.   padding: 1rem 0.5rem;
  216.   border-radius: 0 var(--border-radius) var(--border-radius) 0;
  217.   background-color: var(--gray-500);
  218.   transform: translateX(100%);
  219.   z-index: -1;
  220. }
  221.  
  222. .shareBarHolder .ShareBar {
  223.   border: none;
  224.   background-color: transparent;
  225. }
  226.  
  227. .shareBarHolder .ShareBar__wrapper,
  228. .shareBarHolder .ShareBar__wrapper .ShareBar__actions-left {
  229.   display: flex;
  230.   flex-direction: column;
  231.   width: auto;
  232. }
  233.  
  234. .shareBarHolder .ShareBar__wrapper .ShareBar__actions-right {
  235.   display: none;
  236. }
  237.  
  238. .shareBarHolder .ShareBar__wrapper .ShareBar__action {
  239.   display: flex;
  240.   align-items: center;
  241.   justify-content: center;
  242.   width: 2rem;
  243.   height: 2rem;
  244.   padding: 0;
  245.   border-radius: var(--border-radius);
  246. }
  247.  
  248. .shareBarHolder .ShareBar__wrapper .ShareBar__action:hover {
  249.   background-color: transparent;
  250. }
  251.  
  252. .shareBarHolder .ShareBar__wrapper .ShareBar__action + .ShareBar__action {
  253.   margin-top: 0.75rem;
  254. }
  255.  
  256. .shareBarHolder .ShareBar__wrapper .ShareBar__action .icon {
  257.   color: var(--gray-300);
  258.   opacity: 1;
  259.   transition: color 0.2s linear;
  260. }
  261.  
  262. .shareBarHolder .ShareBar__wrapper .ShareBar__action:hover .icon {
  263.   color: var(--white);
  264. }
  265.  
  266. .shareBarHolder .ShareBar__wrapper .tag-button,
  267. .shareBarHolder .ShareBar__wrapper [title='Save to Pocket'] {
  268.   display: none;
  269. }
  270.  
  271. .fx.tagsHolder,
  272. .fx.annotationsHolder {
  273.   display: none;
  274. }
  275.  
  276. .entryBody {
  277.   max-width: none;
  278.   margin-bottom: 3rem;
  279.   font-family: inherit !important;
  280.   font-size: 1.25rem !important;
  281.   font-weight: 300;
  282.   line-height: 1.5 !important;
  283. }
  284.  
  285. .entryBody h1,
  286. .entryBody h2,
  287. .entryBody h3,
  288. .entryBody h4 {
  289.   margin: 0 0 1.5rem;
  290.   font-family: var(--ff-heading);
  291.   font-weight: 500;
  292.   line-height: 1.2;
  293. }
  294.  
  295. .entryBody p {
  296.   margin: 0 0 1.5rem;
  297. }
  298.  
  299. .entryBody img {
  300.   max-width: 100%;
  301. }
  302.  
  303. .entryBody img[style*='max-width: 580px'] {
  304.   display: block;
  305.   width: auto !important;
  306.   max-width: 100% !important;
  307.   margin: 2rem 0 !important;
  308.   border-radius: 0 !important;
  309.   border: none !important;
  310. }
  311.  
  312. .entryBody img[style*='float: right'] {
  313.   margin: 0 0 1rem 2rem !important;
  314. }
  315.  
  316. .fx.fx .LinkButton {
  317.   width: auto;
  318.   margin: 0 !important;
  319.   padding: 1rem 2rem;
  320.   font-family: var(--ff-heading);
  321.   font-size: 1.125rem;
  322.   font-weight: 400;
  323.   line-height: 1.2;
  324.   text-transform: none;
  325.   color: var(--white);
  326.   border-color: var(--gray-500);
  327.   background-color: var(--gray-500);
  328. }
  329.  
  330. .fx.fx .LinkButton:hover {
  331.   color: var(--white);
  332.   border-color: var(--primary);
  333.   background-color: var(--primary);
  334. }
  335.  
RAW Paste Data