Super minimalistic CSS style for PC

[FastEnergyDrink]

Task.css.mp4

Minimal theme is used (https://github.com/kepano/obsidian-minimal)

.task-list-item>input[type=checkbox] {
    transition: all 0.1s ease;
}

.task-list-item>input[type=checkbox]:hover {
    background-color: rgb(126, 126, 126);
}

.task-list-item>input[type=checkbox]:active {
    scale: 1.5;
    background-color: rgb(235, 235, 235);
}

.task-list-item[data-task-priority=highest]>input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-red) !important;
    border-color: var(--color-red) !important;
}

.task-list-item[data-task-priority=high]>input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-orange) !important;
    border-color: var(--color-orange) !important;
}

.task-list-item[data-task-priority=medium]>input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-yellow) !important;
    border-color: var(--color-yellow) !important;
}

.task-list-item[data-task-priority=low]>input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-cyan) !important;
    border-color: var(--color-cyan) !important;
}

.task-list-item[data-task-priority=lowest]>input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-cyan) !important;
    border-color: var(--color-cyan) !important;
    opacity: 0.6
}

.task-list-item[data-task-priority=lowest]>.tasks-list-text>.task-description {
    opacity: 0.6
}

.task-priority {
    display: none;
}

:is(.task-recurring, .task-start, .task-scheduled, .task-done, .task-created, .task-cancelled, .task-due, .tasks-edit, .tasks-postpone, .tasks-backlink) {
    opacity: 0;
    font-size: 0.8em;
    color: rgb(176, 176, 176);
    margin-left: 0.2em;
    margin-right: 0.2em;

    transition: all 0.1s ease-in-out;
}


.task-list-item:hover>.tasks-list-text>:is(.task-recurring, .task-start, .task-scheduled, .task-cancelled, .task-done, .task-created, .task-due) {
    content: attr(data-task-due);
    opacity: 0.6;
}

.task-list-item:hover>.task-extras>:is(.tasks-edit, .tasks-postpone, .tasks-backlink) {
    content: attr(data-task-due);
    opacity: 0.6;
}


:is(.task-recurring, .task-start, .task-scheduled, .task-done, .task-created, .task-due, .task-cancelled, .tasks-postpone, .tasks-backlink):hover {
    opacity: 1 !important;
}


.tasks-edit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0 !important;
}

.tasks-list-text a,
.internal-link,
.tasks-backlink,
.tasks-postpone,
.task-start,
.task-scheduled,
.task-due,
.task-recurring,
.task-done,
.task-created,
.task-cancelled {
    position: relative;
    z-index: 2;
}

.task-list-item {
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 8px;
    min-height: 60px;
}

.task-list-item:not(:last-child) {
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.task-description::after {
    content: "";
    display: block;
    margin-bottom: 0;
}

.task-list-item-checkbox {
    margin-right: 10px !important;
}

.tasks-backlink a {
    display: inline-block;
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}



.tasks-backlink {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 15px;
    color: #696969;
}