hf_app/html_style.py

html_style = """\
<style>
    /* General */
    .stApp {
        /* background-color: #f0f2f6; /* Uncomment for a light gray background */
    }

    /* Sidebar */
    [data-testid="stSidebar"] {
        /* background-color: #ffffff; /* Optional: Force white sidebar background */
        padding-top: 1rem;
    }
    [data-testid="stSidebar"] .stHeader {
        /* font-size: 1.1em; */
        font-weight: 600;
        /* color: #1a73e8; /* Example accent color */
    }

    /* Sidebar Buttons (Chapter Navigation) */
    div[data-testid="stSidebarNavItems"] button {
        text-align: left !important;
        justify-content: flex-start !important;
        border-radius: 8px;
        margin-bottom: 5px; /* Spacing between buttons */
        transition: background-color 0.2s ease-in-out, border-left 0.2s ease-in-out;
        border: 1px solid transparent; /* Base border */
        width: 100%; /* Ensure buttons fill width */
        padding: 0.5rem 0.75rem; /* Adjust padding */
    }
    /* Active Chapter Button */
    div[data-testid="stSidebarNavItems"] button.st-emotion-cache- L0+++ { /* Specific selector for active (primary) */
        background-color: #e7f3ff; /* Light blue background for active */
        color: #1967d2; /* Darker blue text for active */
        border: 1px solid #1967d2; /* Blue border for active */
        font-weight: 600;
    }
    /* Hover effect for non-disabled buttons */
    div[data-testid="stSidebarNavItems"] button:not(:disabled):hover {
        background-color: #f1f3f4; /* Subtle hover */
    }
    /* Disabled Chapter Button */
    div[data-testid="stSidebarNavItems"] button:disabled {
        background-color: transparent; /* No background */
        color: #a0a0a0; /* Grayed out text */
        cursor: not-allowed !important;
        opacity: 0.6; /* Make it more faded */
        border: 1px solid #e0e0e0; /* Light gray border */
    }
    div[data-testid="stSidebarNavItems"] button:disabled .stMarkdown { /* Target text inside disabled */
         color: #a0a0a0 !important;
    }


    /* Expander Header */
    div[data-testid="stExpander"] div[role="button"] > div > p {
        font-weight: 600; /* Slightly bolder expander titles */
        font-size: 1.0em;
    }

    /* Main Content Area Headers */
    .st-emotion-cache- S+++ { /* Selector for st.header */
        /* border-bottom: 2px solid #1a73e8; /* Example accent underline */
        /* padding-bottom: 0.3rem; */
    }

    /* Buttons in Main Area */
    .stButton>button {
        border-radius: 8px;
        padding: 0.5rem 1rem;
    }
    .stButton>button[kind="primary"] {
        background-color: #1976d2; /* Consistent primary color */
    }
    .stButton>button[kind="primary"]:hover {
        background-color: #1565c0;
    }

    /* Markdown Content Styling */
    .main .stMarkdown code {
        background-color: #f0f2f6; /* Light background for code */
        border-radius: 4px;
        padding: 0.2em 0.4em;
        font-size: 0.9em;
    }
    .main .stMarkdown pre > code {
        background-color: #f5f5f5; /* Slightly different for block */
        border: 1px solid #e0e0e0;
        padding: 1em;
        border-radius: 5px;
    }

    /* Media query for dark theme adjustments */
    @media (prefers-color-scheme: dark) {
        /* Sidebar */
        [data-testid="stSidebar"] {
            /* background-color: #1e1e1e; /* Optional: Force dark sidebar background */
        }
         div[data-testid="stSidebarNavItems"] button.st-emotion-cache- L0+++ { /* Active Chapter Dark */
            background-color: #2a3a4f; /* Darker blue background */
            color: #82c0ff; /* Lighter blue text */
            border: 1px solid #3a7bc8; /* Blue border */
        }
        div[data-testid="stSidebarNavItems"] button:not(:disabled):hover {
             background-color: #333333; /* Darker hover */
        }
         div[data-testid="stSidebarNavItems"] button:disabled {
             color: #707070;
             border: 1px solid #444444;
         }
         div[data-testid="stSidebarNavItems"] button:disabled .stMarkdown {
             color: #707070 !important;
         }

        /* Main Content */
        .main .stMarkdown code {
            background-color: #333333;
        }
        .main .stMarkdown pre > code {
            background-color: #2c2c2c;
            border: 1px solid #444444;
        }
         /* Buttons in Main Area */
        .stButton>button[kind="primary"] {
            background-color: #64b5f6; /* Lighter primary for dark mode */
            color: #111;
        }
        .stButton>button[kind="primary"]:hover {
            background-color: #90caf9;
        }
    }

</style>
"""