Spaces:
Sleeping
Sleeping
File size: 4,690 Bytes
8496edd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
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>
""" |