blitzwing/wikimore
1
0
Fork 0
forked from PrivateCoffee/wikimore
Code Pull requests Activity

feat: enhance sidebar styling and introduce collapsible sections

Browse source 
Updated the sidebar background color, border, and various styles for better aesthetics and usability. Added styling for titles, images, content links, and lists within the sidebar. Introduced collapsible sections with smooth transitions to improve the user experience by allowing users to manage sidebar content visibility. These changes enhance readability and interactivity.
This commit is contained in:
Kumi 2024-08-18 15:43:09 +02:00
parent 2803d530fa
commit 81c63244dc
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 82 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/wikimore/static/css/style.css
View file

@ -85,17 +85,91 @@ h1 {
margin-bottom: 20px;
}
/* General sidebar styling */
.sidebar {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
margin: 10px 0;
float: right;
width: 250px;
background-color: #ffffff;
border: 1px solid #a2a9b1;
padding: 10px;
box-sizing: border-box;
margin: 10px 0;
clear: right;
}
.sidebar-title-with-pretitle,
.sidebar-list-title {
background-color: #ccccff;
font-size: 1em;
padding: 0.5em;
margin: 0.4em 0;
text-align: center;
}
.sidebar-image {
text-align: center;
margin: 1em 0;
}
.sidebar-content {
font-size: 0.9em;
line-height: 1.5;
}
.sidebar-content a {
color: #1e90ff;
text-decoration: none;
}
.sidebar-content a:hover {
text-decoration: underline;
}
.sidebar-content ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Collapsible sections */
.sidebar-list {
position: relative;
}
.sidebar-list-title {
cursor: pointer;
background-color: #ddddff;
text-align: center;
padding: 0.5em;
color: var(--color-base);
border: 1px solid #ccc;
transition: background-color 0.3s ease;
}
.sidebar-list-title:after {
content: "\25BC"; /* Down arrow */
float: right;
margin-right: 10px;
transition: transform 0.3s ease;
}
.sidebar-list:hover .sidebar-list-title:after,
.sidebar-list:focus-within .sidebar-list-title:after {
transform: rotate(-180deg); /* Rotate arrow */
}
.sidebar-list-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.sidebar-list:hover .sidebar-list-content,
.sidebar-list:focus-within .sidebar-list-content {
max-height: 1000px; /* Adjust as needed */
}
.toc {
list-style-type: none;
padding: 0;
@ -511,6 +585,10 @@ span {
clear: none;
}
.sidebar-content {
font-size: 0.8em;
}
.table th,
.table td {
padding: 5px;