_defines.less 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. // Font families
  2. @fallback-font-family: Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, "Microsoft YaHei", Arial, sans-serif;
  3. @base-font-family: 'Titillium Web', @fallback-font-family;
  4. @code-font-family: "Roboto Mono",Consolas, monospace, sans-serif;
  5. // Font configuration
  6. @base-font-size: 16px;
  7. @small-font-size: @base-font-size * 0.875;
  8. @base-line-height: 1.5;
  9. // Spacing
  10. @spacing-unit: 30px;
  11. @gap: 20px;
  12. // Material color scheme
  13. @material-red: #f44336;
  14. @material-pink: #E91E63;
  15. @material-purple: #9c27b0;
  16. @material-deep-purple: #673ab7;
  17. @material-indigo: #3f51b5;
  18. @material-blue: #2196f3;
  19. @material-deep-blue: #3367d6;
  20. @material-teal: #009688;
  21. @material-green: #4caf50;
  22. @material-light-green: #8bc34a;
  23. @material-orange: #ff9800;
  24. @material-deep-orange: #ff5722;
  25. @material-brown: #795548;
  26. @material-blue-grey: #607d8b;
  27. @material-grey: #9e9e9e;
  28. @material-light-grey:#e0e0e0;
  29. @material-yellow: #FFEB3B;
  30. // Social Networks Brand color
  31. @github-color: #467cc2;
  32. @twitter-color: #55acee;
  33. @facebook-color: #3765a3;
  34. @google-color: #db4437;
  35. @pinterest-color: #bc1725;
  36. @dribbble-color: #ed699c;
  37. @weibo-color: #f8712a;
  38. @tumblr-color: #35465c;
  39. @instagram-color: #3f729b;
  40. @linkedin-color: #0077B5;
  41. @behance-color: #1769FF;
  42. @tixora-color: #33475A;
  43. // Colors
  44. @black: #414141;
  45. @white: #ffffff;
  46. @text-color: @black;
  47. @background-color: #EBECEE;
  48. @brand-color: @material-teal;
  49. @accent-color: @material-blue;
  50. @primary-color: @material-deep-blue;
  51. @secondary-color: @material-green;
  52. @grey-color: #828282;
  53. @qoute-background-color:#f7f7f7;
  54. @code-background-color:fade(@black,6%);
  55. // Responsive limits
  56. @modal-threshold: 680px;
  57. @on-phone: 820px;
  58. @on-laptop: 990px;
  59. @on-desktop: 1200px;
  60. @item-height: 36px;
  61. //container
  62. @container-width: 1200px;
  63. //neader
  64. @header-height: 50px;
  65. @header-logo-font-size: 1.3rem;
  66. @header-switcher-font-size: 1.3rem;
  67. @header-font-size: 1rem;
  68. @banner-height: 300px;
  69. //side
  70. @side-width: 250px;
  71. @tog-width: 200px;
  72. //search
  73. @search-height: 36px;
  74. @search-width: 300px;
  75. //post
  76. @post-max-width: 980px;
  77. //article
  78. @article-title-size-sm: 1.5rem;
  79. @article-title-size: 2rem;
  80. //transition
  81. .enable-trans(@time: 0.24s){
  82. transition: all @time ease-out;
  83. }
  84. // .set-placeholder({
  85. // color: @white;
  86. // font-weight: 300;
  87. // })
  88. .set-placeholder(@rules){
  89. &::-webkit-input-placeholder {@rules();}
  90. &:-moz-placeholder {@rules();}
  91. &::-moz-placeholder {@rules();}
  92. &:-ms-input-placeholder {@rules();}
  93. }