- 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;
- }