Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.
No edit summary
(Update)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
/* Background color for the body */
/* Modernizing the sidebar */
body {
#mw-panel {
background-color: #f4f4f4;
font-family: 'Roboto', sans-serif; /* Using modern font */
background-color: #f8f9fa; /* Light gray background for a modern look */
border-right: 1px solid #ddd; /* Soft border for a clean look */
padding: 15px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Soft shadow to make the sidebar pop */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
}
}


/* Content styling with box shadow */
/* Styling the sidebar links */
#mw-panel .portal {
#content {
background-color: #ffffff;
margin-bottom: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
}


#mw-panel .portal h3 {
/* Link colors */
font-size: 16px;
a {
font-weight: 600;
color: #007acc;
color: #333; /* Darker color for headers */
text-transform: uppercase;
margin-bottom: 10px;
}
}


#mw-panel .portal ul li {
/* Styling for headers */
list-style: none;
h1, h2, h3, h4, h5, h6 {
margin-bottom: 8px;
font-family: 'Roboto', sans-serif;
color: #333;
}
}


#mw-panel .portal ul li a {
/* Sticky header styling (to be used with JS) */
color: #007bff; /* Default link color */
.sticky {
text-decoration: none;
position: fixed;
top: 0;
padding: 5px;
transition: all 0.3s ease; /* Smooth transition effect */
width: 100%;
z-index: 1000;
display: block;
background-color: #fff;
font-size: 14px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
}


/* Dropdown menu styling */
/* Hover effect on links */
#mw-panel .portal ul li a:hover {
.dropdown {
background-color: #e2e6ea; /* Light background color on hover */
position: relative;
color: #0056b3; /* Darker blue on hover */
}
box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Slight shadow effect */

.dropdown:hover > ul {
display: block;
}

.dropdown ul {
display: none;
position: absolute;
background-color: #ffffff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown ul li {
list-style: none;
padding: 10px;
}

.dropdown ul li a {
text-decoration: none;
color: #007acc;
}
}

Latest revision as of 16:02, 21 October 2024

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
/* Modernizing the sidebar */
#mw-panel {
    background-color: #f8f9fa; /* Light gray background for a modern look */
    border-right: 1px solid #ddd; /* Soft border for a clean look */
    padding: 15px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Soft shadow to make the sidebar pop */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
}

/* Styling the sidebar links */
#mw-panel .portal {
    margin-bottom: 10px;
}

#mw-panel .portal h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333; /* Darker color for headers */
    text-transform: uppercase;
    margin-bottom: 10px;
}

#mw-panel .portal ul li {
    list-style: none;
    margin-bottom: 8px;
}

#mw-panel .portal ul li a {
    color: #007bff; /* Default link color */
    text-decoration: none;
    padding: 5px;
    transition: all 0.3s ease; /* Smooth transition effect */
    display: block;
    font-size: 14px;
    border-radius: 4px;
}

/* Hover effect on links */
#mw-panel .portal ul li a:hover {
    background-color: #e2e6ea; /* Light background color on hover */
    color: #0056b3; /* Darker blue on hover */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Slight shadow effect */
}