general-typography.less 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. html, body, th, td, p {
  2. color: var( --vamtam-primary-font-color );
  3. }
  4. .color-accent-1,
  5. .hover-color-accent-1:hover {
  6. color: var( --vamtam-accent-color-1 ) !important;
  7. }
  8. .color-accent-2,
  9. .hover-color-accent-2:hover {
  10. color: var( --vamtam-accent-color-2 ) !important;
  11. }
  12. .color-accent-3,
  13. .hover-color-accent-3:hover {
  14. color: var( --vamtam-accent-color-3 ) !important;
  15. }
  16. .color-accent-4,
  17. .hover-color-accent-4:hover {
  18. color: var( --vamtam-accent-color-4 ) !important;
  19. }
  20. .color-accent-5,
  21. .hover-color-accent-5:hover {
  22. color: var( --vamtam-accent-color-5 ) !important;
  23. }
  24. .color-accent-6,
  25. .hover-color-accent-6:hover {
  26. color: var( --vamtam-accent-color-6 ) !important;
  27. }
  28. .color-accent-7,
  29. .hover-color-accent-7:hover {
  30. color: var( --vamtam-accent-color-7 ) !important;
  31. }
  32. .color-accent-8,
  33. .hover-color-accent-8:hover {
  34. color: var( --vamtam-accent-color-8 ) !important;
  35. }
  36. ul, ol {
  37. margin: 0em 1em 0.5em 2em;
  38. }
  39. *,
  40. p,
  41. body,
  42. .main-container,
  43. .cbp-popup-content {
  44. .vamtam-font(primary-font-);
  45. }
  46. .page-header .desc,
  47. .page-header .desc a {
  48. color: var( --vamtam-accent-color-3 );
  49. }
  50. .page-header .desc,
  51. .page-header .desc a,
  52. em {
  53. .vamtam-font(em-);
  54. }
  55. h1,
  56. .font-h1 {
  57. &, a, #main-footer & a { .vamtam-font(h1-); }
  58. }
  59. h2,
  60. .font-h2 {
  61. &, a, #main-footer & a { .vamtam-font(h2-); }
  62. }
  63. h3,
  64. .font-h3 {
  65. &, a, #main-footer & a { .vamtam-font(h3-); }
  66. }
  67. h4,
  68. .font-h4 {
  69. &, a, #main-footer & a { .vamtam-font(h4-); }
  70. }
  71. h5,
  72. .font-h5 {
  73. &, a, #main-footer & a { .vamtam-font(h5-); }
  74. }
  75. h6,
  76. .font-h6 {
  77. &, a, #main-footer & a { .vamtam-font(h6-); }
  78. }
  79. h1,
  80. .color-h1 {
  81. &, a { color: var( --vamtam-h1-color ) }
  82. }
  83. h2,
  84. .color-h2 {
  85. &, a { color: var( --vamtam-h2-color ) }
  86. }
  87. h3,
  88. .color-h3 {
  89. &, a { color: var( --vamtam-h3-color ) }
  90. }
  91. h4,
  92. .color-h4 {
  93. &, a { color: var( --vamtam-h4-color ) }
  94. }
  95. h5,
  96. .color-h5 {
  97. &, a { color: var( --vamtam-h5-color ) }
  98. }
  99. h6,
  100. .color-h6 {
  101. &, a { color: var( --vamtam-h6-color ) }
  102. }
  103. h1 {
  104. em {
  105. font: var( --vamtam-em-font-weight ) var( --vamtam-em-font-style ) var( --vamtam-h1-font-size )/var( --vamtam-h1-line-height ) var( --vamtam-em-font-family );
  106. color: var( --vamtam-h1-color );
  107. }
  108. }
  109. h2 {
  110. em {
  111. font: var( --vamtam-em-font-weight ) var( --vamtam-em-font-style ) var( --vamtam-h2-font-size )/var( --vamtam-h2-line-height ) var( --vamtam-em-font-family );
  112. color: var( --vamtam-h2-color );
  113. }
  114. }
  115. h3 {
  116. em {
  117. font: var( --vamtam-em-font-weight ) var( --vamtam-em-font-style ) var( --vamtam-h3-font-size )/var( --vamtam-h3-line-height ) var( --vamtam-em-font-family );
  118. color: var( --vamtam-h3-color );
  119. }
  120. }
  121. h4 {
  122. em {
  123. font: var( --vamtam-em-font-weight ) var( --vamtam-em-font-style ) var( --vamtam-h4-font-size )/var( --vamtam-h4-line-height ) var( --vamtam-em-font-family );
  124. color: var( --vamtam-h4-color );
  125. }
  126. }
  127. h5 {
  128. em {
  129. font: var( --vamtam-em-font-weight ) var( --vamtam-em-font-style ) var( --vamtam-h5-font-size )/var( --vamtam-h5-line-height ) var( --vamtam-em-font-family );
  130. color: var( --vamtam-h5-color );
  131. }
  132. }
  133. h6 {
  134. em {
  135. font: var( --vamtam-em-font-weight ) var( --vamtam-em-font-style ) var( --vamtam-h6-font-size )/var( --vamtam-h6-line-height ) var( --vamtam-em-font-family );
  136. color: var( --vamtam-h6-color );
  137. }
  138. }
  139. a {
  140. text-decoration: none;
  141. color: var( --vamtam-body-link-regular );
  142. transition: color, border-color .3s;
  143. border-bottom: solid 1px transparent;
  144. .icon.shortcode.use-hover {
  145. transition: all .3s ease-out;
  146. padding: 0.3em;
  147. border-radius: 20em;
  148. line-height: 1em;
  149. }
  150. &:visited {
  151. color: var( --vamtam-body-link-visited );
  152. }
  153. &:active {
  154. color: var( --vamtam-body-link-active );
  155. }
  156. &:hover {
  157. text-decoration: none;
  158. color: var( --vamtam-body-link-hover );
  159. border-color: var( --vamtam-body-link-hover );
  160. .icon.shortcode.use-hover {
  161. color: var( --vamtam-body-link-hover ) !important;
  162. background: var( --vamtam-accent-color-5 );
  163. }
  164. }
  165. }
  166. .fl-photo-content a,
  167. body.fl-builder-edit a{
  168. border: var( --vamtam-no-border-link );
  169. }
  170. .vamtam-main {
  171. a {
  172. .icon.shortcode.border {
  173. color: var( --vamtam-body-link-regular );
  174. }
  175. &:hover .icon.shortcode.border {
  176. border-color: var( --vamtam-body-link-hover );
  177. color: var( --vamtam-body-link-hover ) !important;
  178. }
  179. }
  180. }
  181. p {
  182. margin: 0 0 1em 0;
  183. hyphens: auto;
  184. }
  185. p:empty {display: none}
  186. h1, h2, h3, h4, h5, h6 {
  187. margin-top: 0.3em;
  188. margin-bottom: 0.3em;
  189. hyphens: manual;
  190. }
  191. .vamtam-font-style-1 {
  192. .vamtam-font( additional-font-1- );
  193. padding-bottom: 10px;
  194. &.with-color {
  195. color: var( --vamtam-additional-font-1-color );
  196. }
  197. }
  198. .vamtam-font-style-2 {
  199. .vamtam-font( additional-font-2- );
  200. margin-top: -1em;
  201. letter-spacing: 0.3em;
  202. margin-bottom: 1.6em;
  203. &:before,
  204. &:after {
  205. display: inline-block;
  206. width: auto;
  207. height: 15px;
  208. content: "~";
  209. font-size: 1.1em;
  210. padding: 0px 5px;
  211. }
  212. &.with-color {
  213. color: var( --vamtam-additional-font-2-color ) !important;
  214. }
  215. }