From 2d4e3a1db94b2b71c4f8e7af727754bfc2048f63 Mon Sep 17 00:00:00 2001 From: onkar Date: Sun, 19 Jan 2025 17:34:18 +0530 Subject: [PATCH 1/3] Updated sidebar responsiveness --- python_docs_theme/static/pydoctheme_dark.css | 45 +++++++++++++++----- 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css index 4509960..65b08b4 100644 --- a/python_docs_theme/static/pydoctheme_dark.css +++ b/python_docs_theme/static/pydoctheme_dark.css @@ -8,7 +8,6 @@ --bad-border: var(--bad-color); } - /* Browser elements */ :root { scrollbar-color: #616161 transparent; @@ -27,20 +26,46 @@ div.related { } /* SIDEBAR */ -div.sphinxsidebar, .menu-wrapper { - background-color: #333; - color: inherit; +div.sidebar, aside.sidebar { + background-color: #424242; + border-color: #616161; + width: 250px; /* Set the sidebar width */ + transition: width 0.3s ease; /* Smooth transition */ +} + +/* Make sidebar responsive */ +@media screen and (max-width: 768px) { + div.sidebar, aside.sidebar { + width: 200px; /* Adjust width on smaller screens */ + } +} + +@media screen and (max-width: 480px) { + div.sidebar, aside.sidebar { + display: none; /* Hide sidebar on very small screens */ + } + + #sidebarbutton { + display: block; /* Show sidebar toggle button */ + } } +/* Sidebar button style */ #sidebarbutton { - /* important to overwrite style attribute */ - background-color: #555 !important; - color: inherit !important; + background-color: #555; + color: inherit; + padding: 10px; + cursor: pointer; + display: none; } +/* Transition and hover effects */ div.sidebar, aside.sidebar { - background-color: #424242; - border-color: #616161; + transition: all 0.3s ease-in-out; +} + +div.sidebar:hover, aside.sidebar:hover { + background-color: #555; } /* ANCHORS AND HIGHLIGHTS */ @@ -74,8 +99,6 @@ span.highlighted { background-color: #2c3e50; } -/* Below for most things in text */ - dl.field-list > dt { background-color: #434; } From 644876ede0a655be6a48caa4cfdb5049a4732643 Mon Sep 17 00:00:00 2001 From: onkar Date: Mon, 20 Jan 2025 15:10:51 +0530 Subject: [PATCH 2/3] Update Sidebar Styling and Apply Color Modifications --- python_docs_theme/static/pydoctheme_dark.css | 238 ++++++++++++------- 1 file changed, 152 insertions(+), 86 deletions(-) diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css index 65b08b4..0e24717 100644 --- a/python_docs_theme/static/pydoctheme_dark.css +++ b/python_docs_theme/static/pydoctheme_dark.css @@ -1,186 +1,252 @@ /* Common colours */ :root { - --good-color: rgb(79 196 100); - --good-border: var(--good-color); - --middle-color: rgb(244, 227, 76); - --middle-border: var(--middle-color); - --bad-color: rgb(244, 76, 78); - --bad-border: var(--bad-color); + --good-color: rgb(79 196 100); + --good-border: var(--good-color); + --middle-color: rgb(244, 227, 76); + --middle-border: var(--middle-color); + --bad-color: rgb(244, 76, 78); + --bad-border: var(--bad-color); } + /* Browser elements */ :root { - scrollbar-color: #616161 transparent; - color-scheme: dark; + scrollbar-color: #616161 transparent; + color-scheme: dark; } html, body { - background-color: #222; - color: rgba(255, 255, 255, 0.87); + background-color: #222; + color: rgba(255, 255, 255, 0.87); } div.related { - color: rgba(255, 255, 255, 0.7); /* classic overwrite */ - border-color: #424242; + color: rgba(255, 255, 255, 0.7); /* classic overwrite */ + border-color: #424242; } /* SIDEBAR */ +div.sphinxsidebar, .menu-wrapper { + background-color: #414141; /* Sidebar background color */ + color: inherit; +} + +#sidebarbutton { + background-color: #555 !important; + color: inherit !important; +} + div.sidebar, aside.sidebar { - background-color: #424242; - border-color: #616161; - width: 250px; /* Set the sidebar width */ - transition: width 0.3s ease; /* Smooth transition */ + background-color: #414141; /* Sidebar background color */ + border-color: #616161; + width: 300px; /* Sidebar width increased */ + resize: horizontal; /* Make it resizable */ + overflow: auto; + position: fixed; /* Fixed position to keep sidebar in place */ + top: 0; + left: 0; + height: 100%; + z-index: 100; + transition: left 400ms ease; } -/* Make sidebar responsive */ -@media screen and (max-width: 768px) { - div.sidebar, aside.sidebar { - width: 200px; /* Adjust width on smaller screens */ - } +/* Sidebar Open State */ +div.sidebar.open { + left: 0; } -@media screen and (max-width: 480px) { - div.sidebar, aside.sidebar { - display: none; /* Hide sidebar on very small screens */ - } +.menu-wrapper { + padding: 40px 10px 30px 20px; +} - #sidebarbutton { - display: block; /* Show sidebar toggle button */ - } +.menu-wrapper h3, +.menu-wrapper h4 { + margin-bottom: 0; + font-weight: normal; } -/* Sidebar button style */ -#sidebarbutton { - background-color: #555; - color: inherit; - padding: 10px; - cursor: pointer; - display: none; +.menu-wrapper h4 { + font-size: 1.3em; } -/* Transition and hover effects */ -div.sidebar, aside.sidebar { - transition: all 0.3s ease-in-out; +.menu-wrapper h3 { + font-size: 1.4em; +} + +.menu-wrapper h3 + p, +.menu-wrapper h4 + p { + margin-top: 0.5rem; +} + +.menu a { + font-size: smaller; + text-decoration: none; +} + +.menu ul { + list-style: none; + line-height: 1.4; + overflow-wrap: break-word; + padding-left: 0; +} + +.menu ul ul { + margin-left: 20px; + list-style: square; } -div.sidebar:hover, aside.sidebar:hover { - background-color: #555; +.menu ul li { + margin-bottom: 0.5rem; } +.language_switcher_placeholder { + margin-top: 2rem; +} + +.language_switcher_placeholder select { + width: 100%; +} + +.document { + position: relative; + z-index: 0; +} + +/* Responsive tables */ +.responsive-table__container { + width: 100%; + overflow-x: auto; +} + +.menu .theme-selector-label { + margin-top: .5em; + display: flex; + width: 100%; +} + +.menu .theme-selector { + flex: auto; +} + + + + /* ANCHORS AND HIGHLIGHTS */ div.body a { - color: #7af; + color: #7af; } div.body a:visited { - color: #09e; + color: #09e; } a.headerlink:hover { - background-color: #424242; + background-color: #424242; } div.related a { - color: currentColor; + color: currentColor; } div.footer, div.footer a { - color: currentColor; /* classic overwrites */ + color: currentColor; /* classic overwrites */ } dt:target, span.highlighted { - background-color: #616161; + background-color: #616161; } .footnote:target { - background-color: #2c3e50; + background-color: #2c3e50; } +/* Below for most things in text */ + dl.field-list > dt { - background-color: #434; + background-color: #434; } table.docutils td, table.docutils th { - border-color: #616161 !important; + border-color: #616161 !important; } table.docutils th { - background-color: #424242; + background-color: #424242; } .stableabi { - color: #bbf; + color: #bbf; } div.body pre { - border-color: #616161; + border-color: #616161; } code { - background-color: #424242; + background-color: #424242; } div.body div.seealso { - background-color: rgba(255, 255, 0, 0.1); + background-color: rgba(255, 255, 0, 0.1); } div.warning { - background-color: rgba(255, 0, 0, 0.2); + background-color: rgba(255, 0, 0, 0.2); } .warning code { - background-color: rgba(255, 0, 0, 0.5); + background-color: rgba(255, 0, 0, 0.5); } /* Admonitions */ :root { - --admonition-background: #ffffff1a; - --admonition-border: currentColor; - --admonition-color: #ffffffde; - --attention-background: #ffffff1a; - --attention-border: currentColor; - --caution-background: #ffff001a; - --caution-border: #dd6; - --danger-background: #f003; - --danger-border: #f66; - --error-background: #f003; - --error-border: #f66; - --hint-background: #0044117a; - --hint-border: green; - --seealso-background: #ffff001a; - --seealso-border: #dd6; - --tip-background: #0044117a; - --tip-border: green; - --warning-background: #ff000033; - --warning-border: #ff6666; + --admonition-background: #ffffff1a; + --admonition-border: currentColor; + --admonition-color: #ffffffde; + --attention-background: #ffffff1a; + --attention-border: currentColor; + --caution-background: #ffff001a; + --caution-border: #dd6; + --danger-background: #f003; + --danger-border: #f66; + --error-background: #f003; + --error-border: #f66; + --hint-background: #0044117a; + --hint-border: green; + --seealso-background: #ffff001a; + --seealso-border: #dd6; + --tip-background: #0044117a; + --tip-border: green; + --warning-background: #ff000033; + --warning-border: #ff6666; } aside.topic, div.topic, div.note, nav.contents { - background-color: rgba(255, 255, 255, 0.1); - border-color: currentColor; + background-color: rgba(255, 255, 255, 0.1); + border-color: currentColor; } .note code { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.1); } .mobile-nav { - box-shadow: rgba(255, 255, 255, 0.25) 0 0 2px 0; + box-shadow: rgba(255, 255, 255, 0.25) 0 0 2px 0; } .nav-content { - background-color: black; + background-color: black; } img.invert-in-dark-mode { - filter: invert(1) hue-rotate(.5turn); + filter: invert(1) hue-rotate(.5turn); } /* -- object description styles --------------------------------------------- */ @@ -190,12 +256,12 @@ img.invert-in-dark-mode { /* Override Sphinx's basic.css to fix colour contrast */ .sig.c .k, .sig.c .kt, .sig.cpp .k, .sig.cpp .kt { - color: #5283ff; + color: #5283ff; } /* Version change directives */ :root { - --versionadded: var(--good-color); - --versionchanged: var(--middle-color); - --deprecated: var(--bad-color); -} + --versionadded: var(--good-color); + --versionchanged: var(--middle-color); + --deprecated: var(--bad-color); +} \ No newline at end of file From 7ed8d2cae82fdc869a6f4ec2ed4b325956260c63 Mon Sep 17 00:00:00 2001 From: onkar Date: Tue, 21 Jan 2025 10:00:21 +0530 Subject: [PATCH 3/3] removed all the unnecessary whitespace. --- python_docs_theme/static/pydoctheme_dark.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css index 0e24717..a5a884e 100644 --- a/python_docs_theme/static/pydoctheme_dark.css +++ b/python_docs_theme/static/pydoctheme_dark.css @@ -8,7 +8,6 @@ --bad-border: var(--bad-color); } - /* Browser elements */ :root { scrollbar-color: #616161 transparent; @@ -129,9 +128,6 @@ div.sidebar.open { flex: auto; } - - - /* ANCHORS AND HIGHLIGHTS */ div.body a { color: #7af; @@ -250,9 +246,7 @@ img.invert-in-dark-mode { } /* -- object description styles --------------------------------------------- */ - /* C++ specific styling */ - /* Override Sphinx's basic.css to fix colour contrast */ .sig.c .k, .sig.c .kt, .sig.cpp .k, .sig.cpp .kt {