_variables.css 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. :root {
  2. /* The main color of the theme*/
  3. --main-first: #ca7227; /* main color*/
  4. --main-first-alt: #b7641d; /* var for hovers*/
  5. --main-first-light: #fdf6ef; /* var light 1*/
  6. --main-first-lighter: #fefaf7; /* var light 2*/
  7. --main-first-dark: #3c3835; /* var for hovers*/
  8. --main-first-darker: #221f1d; /* var for hovers*/
  9. /* linked font colors*/
  10. --main-font-color: #363330;
  11. --light-font-color: #6d655f;
  12. --white: #fff; /* white (sometimes we would like to tint it a little)*/
  13. /* the whole palette of grays, very useful*/
  14. /* we will try to tint these grays according to the main color*/
  15. --grey-darker: #524236;
  16. --grey-dark: #766556;
  17. --grey-medium-dark: #ba9;
  18. --grey-medium: #d9ccbf;
  19. --grey-medium-light: #e4d8cc;
  20. --grey-light: #f5f0ec;
  21. --grey-lighter: #fcfaf8;
  22. --unread-font-color: #161a38;
  23. --unread-bg: #f2f6f8;
  24. --unread-bg-light: #fdfdfe;
  25. /* alert colors (red, yellow, green)*/
  26. --alert-bg: #f5633e; /* the base*/
  27. --alert-light: #fde0d8; /* +light*/
  28. --alert-text: #73341f; /* +dark*/
  29. --warning-bg: #f4f762;
  30. --warning-light: #fdfde0;
  31. --warning-text: #73762f;
  32. --success-bg: #10f5b2;
  33. --success-light: #cffdef;
  34. --success-text: #0c7556;
  35. /* favorites*/
  36. --fav-bg: #ffc300;
  37. --fav-light: #fff6da;
  38. /* the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.*/
  39. --sid-font-color: #363330; /* the background color of the left bar and the header*/
  40. --sid-bg: #fbf9f6; /* the general background of the left bar, and of the header*/
  41. --sid-bg-alt: #f7f2ea; /* background inside groups*/
  42. --sid-bg-dark: #efe3d3; /* the hover*/
  43. --sid-sep: #f0e7da; /* the separators*/
  44. --sid-active: var(--main-first); /* the active color*/
  45. /* stylelint-disable-next-line color-hex-length*/
  46. --sid-active-font: #ffffff; /* the active color*/
  47. --sid-pills: rgba(35,35,0, 0.15); /* capsules*/
  48. }