Newer
Older
moodlog_web / habit_ui_style.css
  1. body{
  2. background-color:#333;
  3. font-family: 'Source Code Pro', monospace;
  4. color:#ccc;
  5. }
  6.  
  7.  
  8. .habit-main-title{
  9. font-weight:700;
  10. margin-bottom: 10px;
  11. }
  12. .habit-container-wrapper {
  13. display: flex;
  14. flex-wrap: wrap;
  15. width: 100%;
  16. }
  17.  
  18. .habit-container {
  19. width: 100%;
  20. box-sizing: border-box;
  21. background-color: #222;
  22. border-radius: 5px;
  23. text-align: center;
  24. padding: 5px;
  25. margin: 5px;
  26. margin-bottom: 30px;
  27. padding-bottom: 0px;
  28. }
  29. .habit-title{
  30. font-family: 'Source Code Pro', monospace;
  31. font-size: 2em;
  32. font-weight: 700;
  33. color: #ccc;
  34. }
  35. .habit-timescale{
  36. font-weight:100;
  37. color:#ccc;
  38. display: inline;
  39. }
  40. .habit-desc{
  41. font-weight: 100;
  42. font-size: 1.95em;
  43. padding-bottom: 10px;
  44. }
  45. .habit-main{
  46. float: left;
  47. width: -webkit-fill-available;
  48. margin-top: -90px;
  49. margin-right: 90px;
  50. text-align: left;
  51. }
  52.  
  53. .good{ color: #58e81b;}
  54. .bad{ color: #e81b1b; }
  55.  
  56. .habit-log{
  57. float: right;
  58. }
  59. .habit-log-button{
  60. width: 99px;
  61. height: 99px;
  62. font-size: 3em; /* You can adjust the font size to fit the button */
  63. border: none;
  64. background-color: #000;
  65. color: #fff;
  66. cursor: pointer;
  67. border-radius: 5px;
  68. font-family: 'Source Code Pro', monospace;
  69. font-weight:700;
  70. }
  71.  
  72. .button-done{ background-color: #399113; color:#399113; }
  73. .button-good{ background-color: #58e81b; color:#58e81b; }
  74. .button-bad{ background-color: #e81b1b; color:#000; }
  75. .button-neut, .button-yellow{ background-color: #efe23e; color:#000; }
  76. .button-green{ background-color: #58e81b; color:#58e81b; }
  77.  
  78.  
  79. .ltred{ background-color: #e81b1b; color:#000; }
  80. .ltgreen{ background-color: #888; }
  81. .ltneut{ background-color: #444; }
  82. .ltyellow{ background-color: #efe23e; }
  83.  
  84.  
  85. .habit-info {
  86. text-align: right;
  87. font-size: 1.6em;
  88. display: flex;
  89. justify-content: flex-end;
  90. }
  91.  
  92. .habit-score {
  93. width: 135px;
  94. display: inline-block;
  95. text-align: center;
  96. font-size: 1.3em;
  97. background-color: #222;
  98. box-sizing: border-box;
  99. margin-right: 0;
  100. margin-left: 0;
  101. }
  102.  
  103. .score-title{
  104. font-weight:700;
  105. font-size:0.8em;
  106. }
  107. .score-result{
  108. font-size: 1.5em;
  109. }
  110.  
  111. .habit-cal-day, .habit-cal-week{
  112. padding-top:10px;
  113. }
  114.  
  115. .habit-cal-day .graph-label, .habit-cal-week .graph-label{ display:none; }
  116. .habit-cal-day .cal-heatmap-container {
  117. display: block;
  118. overflow: hidden;
  119. height: 120px;
  120. }
  121. .habit-cal-week .cal-heatmap-container {
  122. display: block;
  123. overflow: hidden;
  124. height: 85px;
  125. }
  126.  
  127.  
  128. .habit-cal-week .r1{ fill:#efe23e; }
  129. .habit-cal-week .r2{ fill:#58e81b; }
  130. .habit-cal-week .r0{ fill:#000; }
  131.  
  132. .week-container .green{ background-color: #58e81b; }
  133. .week-container .neut{
  134. background-color: #efe23e;
  135. color: #111;
  136. font-weight: 700;
  137. font-size: 12px;
  138. text-align: center;
  139. }
  140. .week-container .neut text[Attributes Style] {
  141. text-anchor: middle;
  142. dominant-baseline: central;
  143. }
  144.  
  145. .grid-container {
  146. display: flex;
  147. flex-wrap: wrap-reverse; /* Reverse the order to start from 24 months ago */
  148. gap: 5px;
  149. margin-top: 10px;
  150. }
  151.  
  152. .month {
  153. width: 15px;
  154. margin: 0px;
  155. padding: 0px;
  156. border: 0px solid #ccc;
  157. box-sizing: border-box;
  158. }
  159.  
  160. .week-container {
  161. display: grid;
  162. grid-template-columns: 15px; /* Single column for vertical layout */
  163. grid-template-rows: repeat(5, 15px * 24); /* Adjusted for 24 weeks */
  164. gap: 2px;
  165. }
  166.  
  167. .week {
  168. width: 15px;
  169. height: 15px;
  170. background-color: #000;
  171. border: 0px solid #fff;
  172. box-sizing: border-box;
  173. border-radius: 2px;
  174. }
  175.  
  176. .habit_long_container{
  177. text-align: center;
  178. height: 10px;
  179. display: inline-flex;
  180. position: relative;
  181. }
  182.  
  183. .long_tick {
  184. height: 10px;
  185. width: 60px;
  186. display: block;
  187. margin-right: 1px;
  188. padding: 0;
  189. position: relative;
  190. border-radius: 5px;
  191.  
  192. }
Buy Me A Coffee