説明なし

global.scss 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /*
  2. * App Global CSS
  3. * ----------------------------------------------------------------------------
  4. * Put style rules here that you want to apply globally. These styles are for
  5. * the entire app and not just one component. Additionally, this file can be
  6. * used as an entry point to import other CSS/Sass files to be included in the
  7. * output CSS.
  8. * For more information on global stylesheets, visit the documentation:
  9. * https://ionicframework.com/docs/layout/global-stylesheets
  10. */
  11. /* Core CSS required for Ionic components to work properly */
  12. @import "~@ionic/angular/css/core.css";
  13. /* Basic CSS for apps built with Ionic */
  14. @import "~@ionic/angular/css/normalize.css";
  15. @import "~@ionic/angular/css/structure.css";
  16. @import "~@ionic/angular/css/typography.css";
  17. @import "~@ionic/angular/css/display.css";
  18. /* Optional CSS utils that can be commented out */
  19. @import "~@ionic/angular/css/padding.css";
  20. @import "~@ionic/angular/css/float-elements.css";
  21. @import "~@ionic/angular/css/text-alignment.css";
  22. @import "~@ionic/angular/css/text-transformation.css";
  23. @import "~@ionic/angular/css/flex-utils.css";
  24. @font-face {
  25. font-family: "Kanit";
  26. font-style: normal;
  27. font-weight: 300;
  28. src: url("./assets/fonts/Kanit-Light.ttf");
  29. }
  30. @font-face {
  31. font-family: "Kanit";
  32. font-style: normal;
  33. font-weight: 400;
  34. src: url("./assets/fonts/Kanit-Regular.ttf");
  35. }
  36. @font-face {
  37. font-family: "Kanit";
  38. font-style: normal;
  39. font-weight: 500;
  40. src: url("./assets/fonts/Kanit-Medium.ttf");
  41. }
  42. @font-face {
  43. font-family: "Kanit";
  44. font-style: normal;
  45. font-weight: 500;
  46. src: url("./assets/fonts/Kanit-Medium.ttf");
  47. }
  48. @font-face {
  49. font-family: "IBM Plex Sans Thai";
  50. font-style: normal;
  51. font-weight: 300;
  52. src: url("./assets/fonts/IBMPlexSansThai-Light.ttf");
  53. }
  54. @font-face {
  55. font-family: "IBM Plex Sans Thai";
  56. font-style: normal;
  57. font-weight: 400;
  58. src: url("./assets/fonts/IBMPlexSansThai-Regular.ttf");
  59. }
  60. @font-face {
  61. font-family: "IBM Plex Sans Thai";
  62. font-style: normal;
  63. font-weight: 600;
  64. src: url("./assets/fonts/IBMPlexSansThai-SemiBold.ttf");
  65. }
  66. * {
  67. font-family: "IBM Plex Sans Thai", sans-serif !important;
  68. }
  69. .new-background-color {
  70. --background: rgb(103, 143, 221);
  71. --background: -moz-linear-gradient(
  72. 45deg,
  73. rgba(76, 185, 196, 1) 0%,
  74. rgba(61, 211, 174, 1) 100%
  75. );
  76. --background: -webkit-gradient(
  77. left bottom,
  78. right top,
  79. color-stop(0%, rgba(76, 185, 196, 1)),
  80. color-stop(100%, rgba(61, 211, 174, 1))
  81. );
  82. --background: -webkit-linear-gradient(
  83. 45deg,
  84. rgba(76, 185, 196, 1) 0%,
  85. rgba(61, 211, 174, 1) 100%
  86. );
  87. --background: -o-linear-gradient(
  88. 45deg,
  89. rgba(76, 185, 196, 1) 0%,
  90. rgba(61, 211, 174, 1) 100%
  91. );
  92. --background: -ms-linear-gradient(
  93. 45deg,
  94. rgba(76, 185, 196, 1) 0%,
  95. rgba(61, 211, 174, 1) 100%
  96. );
  97. --background: linear-gradient(
  98. 135deg,
  99. rgb(53, 111, 177) 0%,
  100. rgb(58, 128, 209) 54%,
  101. rgba(0, 212, 255, 1) 100%
  102. );
  103. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cb9c4', endColorstr='#3dd3ae', GradientType=1 );
  104. --color: #ffffff;
  105. }
  106. // ion-content {
  107. // --background: linear-gradient(
  108. // to bottom,
  109. // #a7e9ff,
  110. // #8fd8fd,
  111. // #7ec7fb,
  112. // #78b4f6,
  113. // #7c9fee
  114. // );
  115. // }
  116. ion-title {
  117. font-family: "Kanit", sans-serif !important;
  118. font-weight: 500;
  119. }
  120. .txt-content {
  121. font-family: "IBM Plex Sans Thai", sans-serif !important;
  122. font-weight: 400;
  123. }
  124. .txt-lead {
  125. font-family: "IBM Plex Sans Thai", sans-serif !important;
  126. font-weight: 600;
  127. }
  128. .txt-place-title {
  129. font-family: "IBM Plex Sans Thai", sans-serif !important;
  130. font-weight: 600;
  131. line-height: 1.2;
  132. font-size: 22px;
  133. margin-top: 5px;
  134. margin-bottom: 5px;
  135. }
  136. h1 {
  137. font-family: "IBM Plex Sans Thai", sans-serif !important;
  138. font-weight: 600;
  139. }
  140. ion-label {
  141. font-family: "IBM Plex Sans Thai", sans-serif !important;
  142. }
  143. ion-button {
  144. font-family: "IBM Plex Sans Thai", sans-serif !important;
  145. font-weight: 600;
  146. }
  147. .break-line {
  148. border-bottom: 1px rgb(31, 31, 31) solid;
  149. }
  150. a {
  151. text-decoration: none;
  152. }
  153. .image-page-cover {
  154. height: 200px;
  155. }
  156. .ios ion-fab-button {
  157. position: absolute;
  158. bottom: 25px;
  159. }