wip 2

server/static/styles/common.css

@@ -233,6 +233,88 @@ ul.striped_list > li:nth-child(odd) ul li:nth-child(odd)  { background-color:#30
     display: none;
 }
 
+.dailies_list {
+	max-width: 40rem;
+	margin: auto;
+	display: flex;
+	flex-direction: column;
+}
+
+.dailies_entry {
+	color: wheat;
+	font-size: 1.5em;
+	background: #3a3743;
+	margin-bottom: 1rem;
+	padding: 1rem;
+	border-radius: 0.35rem;
+	border: .2rem solid #45374f;
+	display: flex;
+	cursor: pointer;
+
+	transition: background-color 0.1s;
+}
+
+.dailies_entry:hover {
+	background-color: #4c4858;
+}
+
+.dailies_entry:active {
+	background-color: #312e38;
+}
+
+.dailies_entry > span {
+	flex-grow: 1
+}
+
+.dailies_checkbox input[type=checkbox] {
+  visibility:hidden;
+  display:none
+}
+.dailies_checkbox *,
+.dailies_checkbox :after,
+.dailies_checkbox :before {
+  box-sizing:border-box
+}
+.dailies_checkbox .container {
+  cursor:pointer;
+  user-select:none;
+  font-size:25px;
+  display:block;
+  position:relative
+}
+.dailies_checkbox .checkmark {
+  --spread:10px;
+  background:#000;
+  border-radius:50px;
+  width:1.3em;
+  height:1.3em;
+  transition:all .7s;
+  position:relative;
+  top:0;
+  left:0
+}
+.dailies_checkbox .container input:checked~.checkmark {
+  box-shadow:-5px -5px var(--spread)0px #5b51d8,0 -5px var(--spread)0px #833ab4,5px -5px var(--spread)0px #e1306c,5px 0 var(--spread)0px #fd1d1d,5px 5px var(--spread)0px #f77737,0 5px var(--spread)0px #fcaf45,-5px 5px var(--spread)0px #ffdc80;
+  background:#000
+}
+.dailies_checkbox .checkmark:after {
+  content:"";
+  display:none;
+  position:absolute
+}
+.dailies_checkbox .container input:checked~.checkmark:after {
+  display:block
+}
+.dailies_checkbox .container .checkmark:after {
+  border:.15em solid wheat;
+  border-width:0 .15em .15em 0;
+  width:.25em;
+  height:.5em;
+  top:.34em;
+  left:.5em;
+  transform:rotate(45deg)
+}
+
 .life_calendar {
 	display: flex;
 	flex-direction: row;