User:Admin-shahadat/common.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
/* Modern body background */
body {
  background-color: #f7f8fa; /* Light gray background for modern appearance */
  font-family: 'Roboto', sans-serif; /* Use a clean, modern font */
}

/* Style for the content area */
#content {
  background-color: #ffffff; /* Clean white background for content */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  padding: 20px;
  border-radius: 8px; /* Rounded corners for a smoother look */
  transition: all 0.3s ease; /* Smooth transitions */
}

/* Customize the sidebar appearance */
#mw-panel {
  background-color: #f1f1f1; /* Light background for sidebar */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow to separate the sidebar */
  padding: 15px;
  border-radius: 10px;
}

/* Modern link styling */
a {
  color: #007acc; /* Soft blue for links */
  text-decoration: none; /* Remove underline */
  transition: color 0.2s ease; /* Smooth transition on hover */
}

a:hover {
  color: #005b99; /* Darker blue on hover */
  text-decoration: underline;
}

/* Header styles for a cleaner look */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
  color: #333; /* Dark text for headers */
  margin-bottom: 10px;
}

/* Sidebar items */
#mw-panel ul {
  list-style: none; /* Remove bullets from sidebar links */
  padding-left: 0;
}

#mw-panel li {
  padding: 10px 0; /* Add space between sidebar links */
}

#mw-panel a {
  color: #007acc; /* Sidebar link color */
  font-weight: bold;
}

#mw-panel a:hover {
  color: #005b99; /* Darker link color on hover */
}

/* Sticky sidebar for improved navigation */
.sticky {
  position: fixed;
  top: 0;
  width: 220px; /* Adjust width based on your layout */
  z-index: 1000;
  background-color: #f1f1f1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

/* Button styles for a modern feel */
input[type="submit"], button {
  background-color: #007acc;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 5px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

input[type="submit"]:hover, button:hover {
  background-color: #005b99;
}

/* Custom dropdown styling (if you are using dropdowns) */
.dropdown {
  position: relative;
}

.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;
}

.dropdown ul li a:hover {
  color: #005b99;
}

/* Make forms and input fields look modern */
input, select, textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

input:focus, select:focus, textarea:focus {
  border-color: #007acc;
  outline: none;
}
/* Style for the TOC container */
#toc {
  background-color: #ffffff; /* White background for a clean look */
  border: 1px solid #ddd; /* Subtle border around the TOC */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a shadow for depth */
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px; /* Rounded corners */
  transition: all 0.3s ease; /* Smooth transitions */
}

/* Style for the TOC heading */
#toc h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: #007acc;
  margin-bottom: 10px;
}

/* TOC list item styles */
#toc ul {
  list-style-type: none; /* Remove default bullets */
  padding-left: 0;
}

#toc li {
  padding: 5px 0; /* Add space between TOC items */
}

#toc a {
  color: #005b99;
  text-decoration: none;
  transition: color 0.2s ease;
}

#toc a:hover {
  color: #007acc; /* Lighter blue on hover */
}

/* Styling the collapsible TOC toggle */
span.toctogglespan {
  font-size: 14px;
  color: #555;
  cursor: pointer;
  padding: 5px 10px;
  background-color: #f1f1f1;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

span.toctogglespan:hover {
  background-color: #ddd;
  color: #007acc;
}

/* Hide the TOC when it's collapsed */
#toc.toc-hidden {
  display: none;
}