- body{
- background-color:#333;
- font-family: 'Source Code Pro', monospace;
- color:#ccc;
- }
-
-
- form{
- width:600px;
- height:20px;
- margin:0 auto;
- }
- input{
- display: inline-block;
- outline: none;
- }
- input[type="range"]{
- -webkit-appearance:none;
- width:250px;
- height:10px;
- margin:10px 10px;
- background: linear-gradient(to right, #6b6de5 0%, #46e260 100%);
- background-size:250px 2px;
- background-position:center;
- background-repeat:no-repeat;
- overflow:hidden;
- outline: none;
- }
-
- input[type="range"]:first-of-type{
- margin-top:0px;
- }
-
- input[type="range"]::-webkit-slider-thumb{
- -webkit-appearance:none;
- width:20px;
- height:20px;
- background:#ddd;
- position:relative;
- z-index:3;
- box-shadow:0 0 5px 0 rgba(0,0,0,0.3);
- }
-
- input[type="range"]::-webkit-slider-thumb:after{
- content:" ";
- width:20px;
- height:10px;
- position:absolute;
- z-index:1;
- right:20px;
- top:5px;
- background: #ff5b32;
- background: linear-gradient(to right, #6b6de5 1%, #46e260 70%);
- }
- .input{
- margin-left:20px;
- }
- .add{
- margin-left:20px
- }
- .preview, .previewhist{
- font-weight:100;
- font-size:0.7em;
- padding-bottom: 10px;
- }
- .date, .datehist{color: #9f00ca; margin-right:5px;}
- .hpyno, .hpyhist{color:#efe23e; margin-right:5px;}
- .pretext, .pretexthist{color:#ece5e5; margin-right:5px;}
- .prepos, .preposhist{ color: #58e81b; margin-right:5px;}
- .preneg, .preneghist{ color: #e81b1b; margin-right:5px;}
- .precon, .preconhist{ color: #999; margin-right:5px;}
- .pretag, .pretaghist{ color: #2ad4fa; margin-right:5px;}
-
- .filter{
- background-color:#555;
- width:880px;
- font-weight:100;
- font-size:0.7em;
- padding:10px;
- border-radius: 2px;
- }
- .filtitle{font-weight:700; margin-right:5px;}
- .filpos{ background-color: #58e81b; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
- .filneg{ background-color: #e81b1b; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
- .filcon{ background-color: #999; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
- .filtag{ background-color: #2ad4fa; border-radius: 2px; padding:2px 5px; color:#222; margin-right:5px;}
-
- rect.r0 {
- fill: #ededed;
- fill: #000;
- }
- .graph-subdomain-group .now{ stroke:none; }
- .graph-subdomain-group text.now{ fill: #222;}
- .highlight, rect.now, rect.now:hover{
- stroke: #999;
- }
- .graph, .graph-legend rect {
- shape-rendering: auto;
- }
- .subdomain-text{ fill:#111; font-weight:700;}
- .banner, .top10s, .fullday{
- width:950px;
- color:#ccc;
- text-align:left;
- font-weight:700;
- margin-bottom:10px;
- margin-left: 50px;
- }
- .header{
- width:140px;
- display:inline-block;
- margin-right:197px;
- }
- .header a:link, .header a:hover, .header a:visited, .header a:active{
- text-decoration: none;
- color:#ccc;
- }
- .fullday{
- padding-top:10px;
- }
- .new-log{
- width:600px;
- display:inline-block;
- vertical-align:top;
- }
- .sub-header{
- font-weight:700;
- color:#ccc;
- }
- .toppos, .latpos, .topneg, .latneg, .topcon, .latcon, .toptag, .lattag{
- width:150px;
- display: inline-block;
- font-weight:100;
- font-size:0.7em;
- }
- .toppos, .latpos{ color: #58e81b; vertical-align: top;}
- .topneg, .latneg{ color: #e81b1b; vertical-align: top;}
- .topcon, .latcon{ color: #999; vertical-align: top;}
- .toptag, .lattag{ color: #2ad4fa; vertical-align: top;}
-
- .habit-main-title{
- font-weight:700;
- margin-bottom: 10px;
- }
- .habit-container-wrapper {
- display: flex;
- flex-wrap: wrap;
- width: 950px;
- }
-
- .habit-container {
- width: 465px; /* Two containers per line */
- box-sizing: border-box;
- background-color: #222;
- border-radius: 5px;
- text-align: left;
- padding: 5px;
- margin:5px;
- }
- .habit-title{
- font-family: 'Source Code Pro', monospace;
- font-size: 0.7em;
- font-weight: 700;
- color: #ccc;
- }
- .habit-timescale{
- font-weight:100;
- color:#ccc;
- display: inline;
- }
- .habit-desc{
- font-weight: 100;
- font-size: 0.7em;
- padding-bottom: 10px;
- }
-
- .good{ color: #58e81b;}
- .bad{ color: #e81b1b; }
-
- .habit-log{
- float:right;
- }
- .habit-log-button{
- width: 28px;
- height: 28px;
- font-size: 14px; /* 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:#000; }
- .button-good{ background-color: #58e81b; color:#000; }
- .button-bad{ background-color: #e81b1b; color:#000; }
- .button-neut{ background-color: #efe23e; color:#000; }
-
- .habit-score{
- width:145px;
- display:inline-block;
- text-align: center;
- font-size: 0.7em;
- }
- .score-title{
- font-weight:700;
- }
-
- .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;
- }