body{ background-color:#333; font-family: 'Source Code Pro', monospace; color:#ccc; } .habit-main-title{ font-weight:700; margin-bottom: 10px; } .habit-container-wrapper { display: flex; flex-wrap: wrap; width: 100%; } .habit-container { width: 100%; box-sizing: border-box; background-color: #222; border-radius: 5px; text-align: center; padding: 5px; margin: 5px; margin-bottom: 30px; padding-bottom: 0px; } .habit-title{ font-family: 'Source Code Pro', monospace; font-size: 2em; font-weight: 700; color: #ccc; } .habit-timescale{ font-weight:100; color:#ccc; display: inline; } .habit-desc{ font-weight: 100; font-size: 1.95em; padding-bottom: 10px; } .habit-main{ float: left; width: -webkit-fill-available; margin-top: -90px; margin-right: 90px; text-align: left; } .good{ color: #58e81b;} .bad{ color: #e81b1b; } .habit-log{ float: right; } .habit-log-button{ width: 99px; height: 99px; font-size: 3em; /* You can adjust the font size to fit the button */ border: none; background-color: #000; color: #fff; cursor: pointer; border-radius: 5px; font-family: 'Source Code Pro', monospace; font-weight:700; } .button-done{ background-color: #399113; color:#399113; } .button-good{ background-color: #58e81b; color:#58e81b; } .button-bad{ background-color: #e81b1b; color:#000; } .button-neut, .button-yellow{ background-color: #efe23e; color:#000; } .button-green{ background-color: #58e81b; color:#58e81b; } .ltred{ background-color: #e81b1b; color:#000; } .ltgreen{ background-color: #888; } .ltneut{ background-color: #444; } .ltyellow{ background-color: #efe23e; } .habit-info { text-align: right; font-size: 1.6em; display: flex; justify-content: flex-end; } .habit-score { width: 135px; display: inline-block; text-align: center; font-size: 1.3em; background-color: #222; box-sizing: border-box; margin-right: 0; margin-left: 0; } .score-title{ font-weight:700; font-size:0.8em; } .score-result{ font-size: 1.5em; } .habit-cal-day, .habit-cal-week{ padding-top:10px; } .habit-cal-day .graph-label, .habit-cal-week .graph-label{ display:none; } .habit-cal-day .cal-heatmap-container { display: block; overflow: hidden; height: 120px; } .habit-cal-week .cal-heatmap-container { display: block; overflow: hidden; height: 85px; } .habit-cal-week .r1{ fill:#efe23e; } .habit-cal-week .r2{ fill:#58e81b; } .habit-cal-week .r0{ fill:#000; } .week-container .green{ background-color: #58e81b; } .week-container .neut{ background-color: #efe23e; color: #111; font-weight: 700; font-size: 12px; text-align: center; } .week-container .neut text[Attributes Style] { text-anchor: middle; dominant-baseline: central; } .grid-container { display: flex; flex-wrap: wrap-reverse; /* Reverse the order to start from 24 months ago */ gap: 5px; margin-top: 10px; } .month { width: 15px; margin: 0px; padding: 0px; border: 0px solid #ccc; box-sizing: border-box; } .week-container { display: grid; grid-template-columns: 15px; /* Single column for vertical layout */ grid-template-rows: repeat(5, 15px * 24); /* Adjusted for 24 weeks */ gap: 2px; } .week { width: 15px; height: 15px; background-color: #000; border: 0px solid #fff; box-sizing: border-box; border-radius: 2px; } .habit_long_container{ text-align: center; height: 10px; display: inline-flex; position: relative; } .long_tick { height: 10px; width: 60px; display: block; margin-right: 1px; padding: 0; position: relative; border-radius: 5px; }