docsify-dashboard/src/addTocPage.css

<div align="center">

/*
 * This file is a modified version of the original work found at:
 * https://github.com/pikapikapikaori/pikapikapi-blog
 *
 * Original Work Copyright (C) 2023-2025 李亦楊
 * Modified Work Copyright (C) 2025 Sungjae Jeon (erectbranch)
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <https://www.gnu.org/licenses/>.
 */
 :root {
    /* card style */
    --dashboard-card-border-radius: 5px;
    --dashboard-card-margin-top: 10px; 
    --dashboard-card-bg-color: #ffffff; 
    --dashboard-card-max-width: 330px;
    --dashboard-card-min-height: 220px;
    --dashboard-card-shadow: 0 0.3em 0.3em rgba(0,0,0,0.2);

    /* card text */
    --dashboard-card-text-align: left; 
    --dashboard-card-text-color: #000000;
    --dashboard-card-title-font-size: 1.2rem; 
    --dashboard-card-title-font-weight: bolder; 
    --dashboard-card-subtitle-font-size: 1rem; 
    --dashboard-card-subtitle-color: #808080;
    --dashboard-card-date-font-size: 0.8rem; 
    --dashboard-card-date-color: #808080;

    /* card image */
    --dashboard-card-img-min-width: 100%;
    --dashboard-card-img-min-height: 160px;
    --dashboard-card-img-max-height: 160px;
    --dashboard-card-img-border: 0.1em solid #ced4da;

    /* list theme */
    --dashboard-list-theme-max-width: var(--content-max-width, 100%);
    --dashboard-list-theme-img-max-width: 200px;

    /* tag style */
    --tags-bg-color: #fafbfbff;
    --tags-font-color: #54cca7ff;
    --tags-font-size: var(--base-font-size);
    --tags-margin-top: 5px;

    --sidebar-tags-bg-color: var(--tags-bg-color);
    --sidebar-tags-font-color: var(--tags-font-color);
    --sidebar-tags-font-size: var(--tags-font-size);
    --sidebar-tags-margin-top: var(--tags-margin-top);

    /* pagination style */
    --pagination-tab-font-size: 1.1rem;
    --pagination-tab-highlight-color: var(--theme-color, #dbe8f0);
    --pagination-tab-button-color: var(--base-color, #333333);
    --pagination-tab-content-padding: 1rem;
}

.toc-page-display-div {
    display: flex;
    flex-direction: column; 
}

.toc-page-display-a {
    display: inline-block;
    width: calc(50% - 25px);  
    margin-bottom: 10px;
    margin-top: var(--dashboard-card-margin-top, 40px);
    text-align: var(--dashboard-card-text-align, left); 
    background-color: var(--dashboard-card-bg-color, #212121);
    min-height: var(--dashboard-card-min-height, 270px);
    text-decoration: none !important;
    color: var(--dashboard-card-text-color, #fff) !important;
    max-width: var(--dashboard-card-max-width, 400px);
    line-height: normal;
}

@media screen and (max-width: 768px) {
    .toc-page-display-a {
        width: calc(100% - 20px);
        display: inherit;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

.toc-page-display-a:nth-child(even) {
    margin-left: 0px;
    margin-right: 25px;
}

.toc-page-display-a:nth-child(odd) {
    margin-left: 0px;
    margin-right: 25px;
}

.toc-page-display-title-img {
    min-width: var(--dashboard-card-img-min-width, 100%);
    min-height: var(--dashboard-card-img-min-height, 200px);
    max-height: var(--dashboard-card-img-max-height, 200px);
    overflow: hidden;
    border: var(--dashboard-card-img-border);
}

.toc-page-display-a img {
    object-fit: cover;
    min-width: var(--dashboard-card-img-min-width, 100%);
    min-height: var(--dashboard-card-img-min-height, 200px);
    max-height: var(--dashboard-card-img-max-height, 200px);
    transition: transform 0.4s;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.toc-page-display-a:hover {
    cursor: pointer;

    img {
        transform: scale(1.03);
        filter: brightness(var(--global-brightness-blur, 0.85));
    }
}

.toc-page-display-title-div {
    padding: 15px 0px 5px 0px;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: var(--dashboard-card-title-font-size, 1rem);
    font-weight: var(--dashboard-card-title-font-weight, bolder);
}

.toc-page-display-subtitle-div {
    padding: 0 0px 5px 0px;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: var(--dashboard-card-subtitle-font-size, 0.75rem);
    color: var(--dashboard-card-subtitle-color, rgba(255, 255, 255, .4));
}

.toc-page-display-date-div {
    padding: 10px 0px 20px 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: var(--dashboard-card-date-font-size, 0.75rem);
    color: var(--dashboard-card-date-color, rgba(255, 255, 255, .4));
}

.toc-paginator-div {
    margin-top: 25px;
    text-align: center;
    justify-content: center;
    display: flex;
}

.toc-paginator-input input {
    outline: 0;
    font-size: inherit;
    color: inherit;
    width: 2em;
    margin: 0 0.3em;
    text-align: center;
    background-color: transparent;
    border-radius: var(--global-widget-border-radius, 0.3em);
    border: 0.1em solid var(--global-border-default-color, #eee);
}

.toc-paginator-input span {
    margin: 0 0.3em;
}

.toc-paginator-input input:hover {
    border-color: var(--theme-color, #ea6f5a);  
}

.toc-paginator-input input:focus {
    border-color: var(--theme-color, #ea6f5a);
}

.toc-paginator-input input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.toc-paginator-button-div {
    margin: 0 0.1em;
    border: 0.1em solid transparent;
    cursor: pointer;
}

.toc-paginator-button-div svg {
    border-radius: var(--global-widget-border-radius, 0.3em);
}

.toc-paginator-button-div svg:hover {
    background-color: var(--global-theme-color-blur, #ea6f5a1a);
}

body.force-close {
    .sidebar {
        visibility: hidden !important;
        transform: translateX(0) !important;
    }

    .sidebar-toggle {
        visibility: hidden !important;
    }

    .content {
        left: 0 !important;
        transform: translateX(0) !important;
    }

    .app-nav {
        display: inherit !important;
    }
}

/* cards theme */
.toc-page-display-a#cards {
    border-radius: var(--dashboard-card-border-radius, 0px);
    box-shadow: var(--dashboard-card-shadow, none);
}

.toc-page-display-title-div#cards {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 15px 20px 5px 20px;
}

.toc-page-display-title-img#cards {
    border-top-left-radius: var(--dashboard-card-border-radius, 0px);
    border-top-right-radius: var(--dashboard-card-border-radius, 0px);
    border: transparent;
}

.toc-page-display-subtitle-div#cards {
    padding: 0 20px 5px 20px;
}

.toc-page-display-date-div#cards {
    padding: 10px 20px 20px 20px;
}
/* cards theme end */

/* list theme */
.toc-page-display-a#list {
    width: calc(100% - 20px);
    max-width: var(--dashboard-list-theme-max-width);
    min-height: 0;
    border-bottom: 0.1em solid #dee2e6;
    margin-bottom: 20px;
}

.toc-page-display-div#list {
    display: block;
}

.toc-page-display-title-img#list {
    float: right;
    min-width: 100px;
    min-height: 100px;
    max-width: var(--dashboard-list-theme-img-max-width, 200px);
    margin: 0px 10px 30px 10px;
}

@media screen and (max-width: 768px) {
    .toc-page-display-title-img#list {
        max-width: 80px;
        max-height: 80px;
    }
}
/* list theme end */

.tag-list .tag-element {
    background-color: var(--tags-bg-color);
    color: var(--tags-font-color);
    border-radius: 10%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tags-font-size);
    transition: all 0.5s ease-in;
    padding: 2px 10px;
    margin-top: var(--tags-margin-top);
    margin-right: 5px;
}

.tag-list .tag-element#sidebar {
    background-color: var(--sidebar-tags-bg-color);
    color: var(--sidebar-tags-font-color);
    font-size: var(--sidebar-tags-font-size);
    margin-top: var(--sidebar-tags-margin-top);
}

/* docsify-tabs styles */
.docsify-tabs.pagination {
    justify-content: center;
}

.docsify-tabs.pagination:before {
    content: none;
}

.docsify-tabs__tab.pagination {
    order: 2;
    opacity: 0;
    display: none;
}

.docsify-tabs__tab.pagination.current-tabs {
    opacity: 1;
    display: block;
    padding: 0.6em 0.8em;
    font-size: var(--pagination-tab-font-size, 1.2rem);
}

.docsify-tabs__tab.pagination.current-tabs.docsify-tabs__tab--active {
    box-shadow: none;
    color: var(--pagination-tab-highlight-color) !important;
    text-decoration: underline;
}

.docsify-tabs__content.pagination {
    border-bottom: 0 !important;
    padding-bottom: var(--pagination-tab-content-padding, 1.5rem) !important;
}

button.docsify-tabs__slide-buttons.prev-tabs {
    position: relative;
    order: 1;
    display: none;
}

button.docsify-tabs__slide-buttons.next-tabs {
    position: relative;
    order: 3;
    display: none;
}

button.docsify-tabs__slide-buttons {
    border: none;
    background: transparent;
    color: var(--pagination-tab-button-color, #333);
    padding: 0.5em 1em;
}