133 lines
2.8 KiB
CSS
133 lines
2.8 KiB
CSS
|
/* Obsidian/DataviewJS Github inspired calendar by Richard Slettevoll - https://richard.sl/ */
|
||
|
|
|
||
|
|
.heatmap-calendar-graph>* {
|
||
|
|
padding: 0px;
|
||
|
|
margin: 0px;
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-graph {
|
||
|
|
font-size: 0.65em;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: auto 1fr;
|
||
|
|
grid-template-areas:
|
||
|
|
'year months'
|
||
|
|
'days boxes';
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
|
||
|
|
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||
|
|
'Segoe UI Symbol';
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-months {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||
|
|
grid-area: months;
|
||
|
|
margin-top: 0.1em;
|
||
|
|
margin-bottom: 0.3em;
|
||
|
|
grid-gap: 0.3em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-days {
|
||
|
|
grid-area: days;
|
||
|
|
margin-left: 0.1em;
|
||
|
|
margin-right: 0.3em;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-boxes {
|
||
|
|
grid-auto-flow: column;
|
||
|
|
grid-template-columns: repeat(53, minmax(0, 1fr));
|
||
|
|
grid-area: boxes;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-days,
|
||
|
|
.heatmap-calendar-boxes {
|
||
|
|
display: grid;
|
||
|
|
grid-gap: 0.3em;
|
||
|
|
grid-template-rows: repeat(7, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-year {
|
||
|
|
grid-area: year;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 1.2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* only label three days of the week */
|
||
|
|
.heatmap-calendar-days li:nth-child(odd) {
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-boxes li {
|
||
|
|
position: relative;
|
||
|
|
font-size: 0.75em;
|
||
|
|
background-color: #ebedf0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme-dark .heatmap-calendar-boxes .isEmpty {
|
||
|
|
background: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-boxes li:not(.task-list-item)::before {
|
||
|
|
content: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-boxes .internal-link {
|
||
|
|
text-decoration: none;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-boxes .today {
|
||
|
|
border: solid 1px rgb(61, 61, 61);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Settings */
|
||
|
|
|
||
|
|
.heatmap-calendar-settings-colors__color-box {
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
margin: 0 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-settings-colors__color-box:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-settings-colors__color-name {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-settings-colors__container {
|
||
|
|
align-items: center;
|
||
|
|
border-top: 1px solid var(--background-modifier-border);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0.5em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-settings-colors__container h4 {
|
||
|
|
margin: 0.5em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-settings-colors__new-color-input-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-settings-colors__new-color-input-container input {
|
||
|
|
margin-right: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-settings-colors__new-color-input-container input {
|
||
|
|
margin-right: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heatmap-calendar-settings-colors__new-color-input-value {
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|