88 lines
17 KiB
CSS
88 lines
17 KiB
CSS
|
/** Status Bar **/
|
||
|
|
|
||
|
|
.day-planner {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day-planner .status-bar-item-segment:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day-planner-progress-bar {
|
||
|
|
margin-top: 2px;
|
||
|
|
background-color: var(--text-muted);
|
||
|
|
border-radius: 4px;
|
||
|
|
min-width: 80px;
|
||
|
|
height: 16px;
|
||
|
|
float: left;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day-planner-progress-value {
|
||
|
|
background-color: var(--interactive-accent);
|
||
|
|
transition: 0.3s all linear;
|
||
|
|
border-radius: 4px;
|
||
|
|
height: 16px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day-planner-progress-value.green, .day-planner .progress-pie.green::before {
|
||
|
|
background-color: #4CAF50;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day-planner .progress-pie.green {
|
||
|
|
background-image: linear-gradient(to right,transparent 50%, #4CAF50 0)
|
||
|
|
}
|
||
|
|
|
||
|
|
.day-planner-status-bar-text {
|
||
|
|
float: left;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day-planner-status-card {
|
||
|
|
position: absolute;
|
||
|
|
top: -140px;
|
||
|
|
width: 300px;
|
||
|
|
background-color: var(--background-secondary-alt);
|
||
|
|
padding: 8px;
|
||
|
|
border-radius: 4px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day-planner-status-card .arrow-down {
|
||
|
|
border-left: 20px solid transparent;
|
||
|
|
border-right: 20px solid transparent;
|
||
|
|
border-top: 20px solid var(--background-secondary-alt);
|
||
|
|
width: 20px;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-pie.day-planner {
|
||
|
|
background-color: var(--text-muted);
|
||
|
|
float: left;
|
||
|
|
height: 20px;
|
||
|
|
margin: 0.3px 10px 0.3px 0;
|
||
|
|
width: 20px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-pie.day-planner:after {
|
||
|
|
width: 80%;
|
||
|
|
height: 80%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-pie.day-planner:after {
|
||
|
|
color: transparent;
|
||
|
|
background-color: transparent;
|
||
|
|
font-size: 8px;
|
||
|
|
font-weight: 900;
|
||
|
|
line-height: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-type="timeline"] .view-content {
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/
|
||
|
|
.progress-pie{width:60px;height:60px;border-radius:50%;background:#eee;background-image:-webkit-linear-gradient(left,transparent 50%,var(--interactive-accent) 0);background-image:linear-gradient(to right,transparent 50%,var(--interactive-accent) 0);position:relative;display:inline-block;margin:10px}.progress-pie::before{content:'';display:block;margin-left:50%;height:100%;border-radius:0 100% 100% 0/50%;background-color:inherit;-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left}.progress-pie::after{content:attr(data-value);position:absolute;width:70%;height:70%;margin:auto;border-radius:50%;background-color:#fff;left:0;right:0;top:0;bottom:0;text-align:center;font:900 20px/41px Tahoma}.progress-pie[data-value="0"]:before{-webkit-transform:rotate(0turn);-ms-transform:rotate(0turn);transform:rotate(0turn)}.progress-pie[data-value="1"]:before{-webkit-transform:rotate(.01turn);-ms-transform:rotate(.01turn);transform:rotate(.01turn)}.progress-pie[data-value="2"]:before{-webkit-transform:rotate(.02turn);-ms-transform:rotate(.02turn);transform:rotate(.02turn)}.progress-pie[data-value="3"]:before{-webkit-transform:rotate(.03turn);-ms-transform:rotate(.03turn);transform:rotate(.03turn)}.progress-pie[data-value="4"]:before{-webkit-transform:rotate(.04turn);-ms-transform:rotate(.04turn);transform:rotate(.04turn)}.progress-pie[data-value="5"]:before{-webkit-transform:rotate(.05turn);-ms-transform:rotate(.05turn);transform:rotate(.05turn)}.progress-pie[data-value="6"]:before{-webkit-transform:rotate(.06turn);-ms-transform:rotate(.06turn);transform:rotate(.06turn)}.progress-pie[data-value="7"]:before{-webkit-transform:rotate(.07turn);-ms-transform:rotate(.07turn);transform:rotate(.07turn)}.progress-pie[data-value="8"]:before{-webkit-transform:rotate(.08turn);-ms-transform:rotate(.08turn);transform:rotate(.08turn)}.progress-pie[data-value="9"]:before{-webkit-transform:rotate(.09turn);-ms-transform:rotate(.09turn);transform:rotate(.09turn)}.progress-pie[data-value="10"]:before{-webkit-transform:rotate(.1turn);-ms-transform:rotate(.1turn);transform:rotate(.1turn)}.progress-pie[data-value="11"]:before{-webkit-transform:rotate(.11turn);-ms-transform:rotate(.11turn);transform:rotate(.11turn)}.progress-pie[data-value="12"]:before{-webkit-transform:rotate(.12turn);-ms-transform:rotate(.12turn);transform:rotate(.12turn)}.progress-pie[data-value="13"]:before{-webkit-transform:rotate(.13turn);-ms-transform:rotate(.13turn);transform:rotate(.13turn)}.progress-pie[data-value="14"]:before{-webkit-transform:rotate(.14turn);-ms-transform:rotate(.14turn);transform:rotate(.14turn)}.progress-pie[data-value="15"]:before{-webkit-transform:rotate(.15turn);-ms-transform:rotate(.15turn);transform:rotate(.15turn)}.progress-pie[data-value="16"]:before{-webkit-transform:rotate(.16turn);-ms-transform:rotate(.16turn);transform:rotate(.16turn)}.progress-pie[data-value="17"]:before{-webkit-transform:rotate(.17turn);-ms-transform:rotate(.17turn);transform:rotate(.17turn)}.progress-pie[data-value="18"]:before{-webkit-transform:rotate(.18turn);-ms-transform:rotate(.18turn);transform:rotate(.18turn)}.progress-pie[data-value="19"]:before{-webkit-transform:rotate(.19turn);-ms-transform:rotate(.19turn);transform:rotate(.19turn)}.progress-pie[data-value="20"]:before{-webkit-transform:rotate(.2turn);-ms-transform:rotate(.2turn);transform:rotate(.2turn)}.progress-pie[data-value="21"]:before{-webkit-transform:rotate(.21turn);-ms-transform:rotate(.21turn);transform:rotate(.21turn)}.progress-pie[data-value="22"]:before{-webkit-transform:rotate(.22turn);-ms-transform:rotate(.22turn);transform:rotate(.22turn)}.progress-pie[data-value="23"]:before{-webkit-transform:rotate(.23turn);-ms-transform:rotate(.23turn);transform:rotate(.23turn)}.progress-pie[data-value="24"]:before{-webkit-transform:rotate(.24turn);-ms-transform:rotate(.24turn);transform:rotate(.24turn)}.progress-pie[data-value="25"]:before{-webkit-transform:rotate(.25turn);-ms-transform:rotate(.25turn);transform:rotate(.25turn)}.progress-pie[data-value="26"]:before{-webkit-transform:rotate(.26tu
|