tatz884_RescueTime-Obsidian/styles.css

/* Default Light Theme */
.theme-light {
    --border-color: #000000;
    --text-color: #000000;
}

/* Dark Theme */
.theme-dark {
    --border-color: #FFFFFF;
    --text-color: #FFFFFF;
}

/* Code blocker wrapper */

.codeBlockWrapper {
    display: grid;
    grid-template:
        "barDailyTitle doughnutTitle" 30px
        "barDailyChart doughnutContainer" auto / minmax(auto, 350px) 180px;
    overflow: hidden;
    font: white;
}


/* ----- right pane ----- */

.wrapper {
    display: grid;
    grid-template:
        "doughnutTitle" 50px
        "doughnutContainer" 150px
        "status" 50px
        "productivityChart" auto
        "barHourlyTitle" 50px
        "barHourlyChart" auto
        "barCategoryTitle" 50px
        "barCategoryChart" auto / 300px;
    overflow: hidden;
    align-items: center;
    align-content: center;
    font: white;
    padding-bottom: 200px;
}


/* parts for daily chart */

.barDailyTitle {
    grid-area: barDailyTitle;
    border-color: var(--border-color);
    color: var(--text-color);
}
.barDailyChart {
    grid-area: barDailyChart;
    width: 100%;
    max-width: 284px;
    height: 100%;
    max-height: 200px;
    border-color: var(--border-color);
    color: var(--text-color);
}

/* parts for the right pane view */

.status {
    grid-area: status;
    align-self: self-end;
    justify-self: center;
    padding-bottom: 10px;
    grid-area: status;
    font-size: 15px;
    border-color: var(--border-color);
    color: var(--text-color);
}

.productivityChart {
    grid-area: productivityChart;
    width: 100%;
    max-width: 284px;
    height: 100%;
    max-height: 180px;
    border-color: var(--border-color);
    color: var(--text-color);
}

.doughnutTitle {
    grid-area: doughnutTitle;
    font-size: 15px;
    border-color: var(--border-color);
    color: var(--text-color);
}

.doughnutContainer {
    grid-area: doughnutContainer;
    width: 100%;
    max-width: 150px;
    height: 100%;
    max-height: 150px;
    position: relative;
}

.doughnutChart {
    position: absolute;
    z-index: 2;
    width: 100%;
    max-width: 150px;
    height: 100%;
    max-height: 150px;
    border-color: var(--border-color);
    color: var(--text-color);
}

.score {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    border-color: var(--border-color);
    color: var(--text-color);
}

.barHourlyTitle {
    grid-area: barHourlyTitle;
    border-color: var(--border-color);
    color: var(--text-color);
    align-self: self-end;
    justify-self: center;
    padding-bottom: 10px;
}

.barHourlyChart {
    grid-area: barHourlyChart;
    width: 100%;
    max-width: 284px;
    height: 100%;
    max-height: 200px;
    border-color: var(--border-color);
    color: var(--text-color);
}

.barCategoryTitle {
    grid-area: barCategoryTitle;
    border-color: var(--border-color);
    color: var(--text-color);
    align-self: self-end;
    justify-self: center;
    padding-bottom: 10px;
}

.barCategoryChart {
    grid-area: barCategoryChart;
    width: 100%;
    max-width: 284px;
    height: 50%;
    /* min-height will distort the view here. */
    max-height: 400px;
    border-color: var(--border-color);
    color: var(--text-color);

}


/* responsive design */

/* CSS for phone size */
.codeBlockWrapper.small {
        display: grid;
        grid-template:
            "barDailyTitle" 30px
            "barDailyChart" auto
            "doughnutTitle" 30px
            "doughnutContainer" 150px / minmax(150px, auto);
}