Newer
Older
moodlog_web / style.css
0xRoM on 6 Jan 2024 6 KB ui improvements
  1. body{
  2. background-color:#333;
  3. font-family: 'Source Code Pro', monospace;
  4. color:#ccc;
  5. }
  6.  
  7.  
  8. form{
  9. width:600px;
  10. height:20px;
  11. margin:0 auto;
  12. }
  13. input{
  14. display: inline-block;
  15. outline: none;
  16. }
  17. input[type="range"]{
  18. -webkit-appearance:none;
  19. width:250px;
  20. height:10px;
  21. margin:10px 10px;
  22. background: linear-gradient(to right, #6b6de5 0%, #46e260 100%);
  23. background-size:250px 2px;
  24. background-position:center;
  25. background-repeat:no-repeat;
  26. overflow:hidden;
  27. outline: none;
  28. }
  29.  
  30. input[type="range"]:first-of-type{
  31. margin-top:0px;
  32. }
  33.  
  34. input[type="range"]::-webkit-slider-thumb{
  35. -webkit-appearance:none;
  36. width:20px;
  37. height:20px;
  38. background:#ddd;
  39. position:relative;
  40. z-index:3;
  41. box-shadow:0 0 5px 0 rgba(0,0,0,0.3);
  42. }
  43.  
  44. input[type="range"]::-webkit-slider-thumb:after{
  45. content:" ";
  46. width:20px;
  47. height:10px;
  48. position:absolute;
  49. z-index:1;
  50. right:20px;
  51. top:5px;
  52. background: #ff5b32;
  53. background: linear-gradient(to right, #6b6de5 1%, #46e260 70%);
  54. }
  55. .input{
  56. margin-left:20px;
  57. }
  58. .add{
  59. margin-left:20px
  60. }
  61. .preview, .previewhist{
  62. font-weight:100;
  63. font-size:0.7em;
  64. padding-bottom: 10px;
  65. }
  66. .date, .datehist{color: #9f00ca; margin-right:5px;}
  67. .hpyno, .hpyhist{color:#efe23e; margin-right:5px;}
  68. .pretext, .pretexthist{color:#ece5e5; margin-right:5px;}
  69. .prepos, .preposhist{ color: #58e81b; margin-right:5px;}
  70. .preneg, .preneghist{ color: #e81b1b; margin-right:5px;}
  71. .precon, .preconhist{ color: #999; margin-right:5px;}
  72. .pretag, .pretaghist{ color: #2ad4fa; margin-right:5px;}
  73.  
  74. .filter{
  75. background-color:#555;
  76. width:880px;
  77. font-weight:100;
  78. font-size:0.7em;
  79. padding:10px;
  80. border-radius: 2px;
  81. }
  82. .filtitle{font-weight:700; margin-right:5px;}
  83. .filpos{ background-color: #58e81b; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
  84. .filneg{ background-color: #e81b1b; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
  85. .filcon{ background-color: #999; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
  86. .filtag{ background-color: #2ad4fa; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
  87.  
  88. rect.r0 {
  89. fill: #ededed;
  90. fill: #000;
  91. }
  92. .graph-subdomain-group .now{ stroke:none; }
  93. .graph-subdomain-group text.now{ fill: #222;}
  94. .highlight, rect.now, rect.now:hover{
  95. stroke: #999;
  96. }
  97. .graph, .graph-legend rect {
  98. shape-rendering: auto;
  99. }
  100. .subdomain-text{ fill:#111; font-weight:700;}
  101. .banner, .top10s, .fullday{
  102. width:950px;
  103. color:#ccc;
  104. text-align:left;
  105. font-weight:700;
  106. margin-bottom:10px;
  107. margin-left: 50px;
  108. }
  109. .header{
  110. width:140px;
  111. display:inline-block;
  112. margin-right:197px;
  113. }
  114. .header a:link, .header a:hover, .header a:visited, .header a:active{
  115. text-decoration: none;
  116. color:#ccc;
  117. }
  118. .fullday{
  119. padding-top:10px;
  120. }
  121. .new-log{
  122. width:600px;
  123. display:inline-block;
  124. vertical-align:top;
  125. }
  126. .sub-header{
  127. font-weight:700;
  128. color:#ccc;
  129. }
  130. .toppos, .latpos, .topneg, .latneg, .topcon, .latcon, .toptag, .lattag{
  131. width:150px;
  132. display: inline-block;
  133. font-weight:100;
  134. font-size:0.7em;
  135. }
  136. .toppos, .latpos{ color: #58e81b; vertical-align: top;}
  137. .topneg, .latneg{ color: #e81b1b; vertical-align: top;}
  138. .topcon, .latcon{ color: #999; vertical-align: top;}
  139. .toptag, .lattag{ color: #2ad4fa; vertical-align: top;}
  140.  
  141. .habit-main-title{
  142. font-weight:700;
  143. margin-bottom: 10px;
  144. }
  145. .habit-container-wrapper {
  146. display: flex;
  147. flex-wrap: wrap;
  148. width: 950px;
  149. }
  150.  
  151. .habit-container {
  152. width: 465px; /* Two containers per line */
  153. box-sizing: border-box;
  154. background-color: #222;
  155. border-radius: 5px;
  156. text-align: left;
  157. padding: 5px;
  158. margin:5px;
  159. }
  160. .habit-title{
  161. font-family: 'Source Code Pro', monospace;
  162. font-size: 0.7em;
  163. font-weight: 700;
  164. color: #ccc;
  165. }
  166. .habit-timescale{
  167. font-weight:100;
  168. color:#ccc;
  169. display: inline;
  170. }
  171. .habit-desc{
  172. font-weight: 100;
  173. font-size: 0.7em;
  174. padding-bottom: 10px;
  175. }
  176.  
  177. .good{ color: #58e81b;}
  178. .bad{ color: #e81b1b; }
  179.  
  180. .habit-log{
  181. float:right;
  182. }
  183. .habit-log-button{
  184. width: 28px;
  185. height: 28px;
  186. font-size: 14px; /* You can adjust the font size to fit the button */
  187. border: none;
  188. background-color: #000;
  189. color: #fff;
  190. cursor: pointer;
  191. border-radius: 5px;
  192. font-family: 'Source Code Pro', monospace;
  193. font-weight:700;
  194. }
  195.  
  196. .button-done{ background-color: #399113; color:#000; }
  197. .button-good{ background-color: #58e81b; color:#000; }
  198. .button-bad{ background-color: #e81b1b; color:#000; }
  199. .button-neut{ background-color: #efe23e; color:#000; }
  200.  
  201. .habit-score{
  202. width:145px;
  203. display:inline-block;
  204. text-align: center;
  205. font-size: 0.7em;
  206. }
  207. .score-title{
  208. font-weight:700;
  209. }
  210.  
  211. .habit-cal-day, .habit-cal-week{
  212. padding-top:10px;
  213. }
  214.  
  215. .habit-cal-day .graph-label, .habit-cal-week .graph-label{ display:none; }
  216. .habit-cal-day .cal-heatmap-container {
  217. display: block;
  218. overflow: hidden;
  219. height: 120px;
  220. }
  221. .habit-cal-week .cal-heatmap-container {
  222. display: block;
  223. overflow: hidden;
  224. height: 85px;
  225. }
  226.  
  227.  
  228. .habit-cal-week .r1{ fill:#efe23e; }
  229. .habit-cal-week .r2{ fill:#58e81b; }
  230. .habit-cal-week .r0{ fill:#000; }
  231.  
  232. .week-container .green{ background-color: #58e81b; }
  233. .week-container .neut{
  234. background-color: #efe23e;
  235. color: #111;
  236. font-weight: 700;
  237. font-size: 12px;
  238. text-align: center;
  239. }
  240. .week-container .neut text[Attributes Style] {
  241. text-anchor: middle;
  242. dominant-baseline: central;
  243. }
  244.  
  245. .grid-container {
  246. display: flex;
  247. flex-wrap: wrap-reverse; /* Reverse the order to start from 24 months ago */
  248. gap: 5px;
  249. margin-top: 10px;
  250. }
  251.  
  252. .month {
  253. width: 15px;
  254. margin: 0px;
  255. padding: 0px;
  256. border: 0px solid #ccc;
  257. box-sizing: border-box;
  258. }
  259.  
  260. .week-container {
  261. display: grid;
  262. grid-template-columns: 15px; /* Single column for vertical layout */
  263. grid-template-rows: repeat(5, 15px * 24); /* Adjusted for 24 weeks */
  264. gap: 2px;
  265. }
  266.  
  267. .week {
  268. width: 15px;
  269. height: 15px;
  270. background-color: #000;
  271. border: 0px solid #fff;
  272. box-sizing: border-box;
  273. border-radius: 2px;
  274. }
Buy Me A Coffee