Scribd
Upload
2 views

adminMasterCss

The document contains CSS styles for a web page layout, including global styles for the body, sidebar, and main content. It features a fixed sidebar with a dark blue background and responsive design adjustments for smaller screens. Additionally, it includes styles for custom tables and buttons, enhancing the overall user interface with hover effects and alternating row colors.

Uploaded by

kneelgames
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

adminMasterCss

The document contains CSS styles for a web page layout, including global styles for the body, sidebar, and main content. It features a fixed sidebar with a dark blue background and responsive design adjustments for smaller screens. Additionally, it includes styles for custom tables and buttons, enhancing the overall user interface with hover effects and alternating row colors.

Uploaded by

kneelgames
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

/* Global styles */

body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f6f9; /* Light gray background for the overall page */
}

/* Sidebar styles */
.sidebar {
background-color: #1E3A8A; /* Dark blue background */
color: white;
position: fixed;
top: 0;
left: 0;
height: 100vh; /* Full height of the viewport */
width: 250px; /* Fixed width for sidebar */
padding-top: 20px;
overflow-y: auto; /* Enable scrolling for long menus */
}

.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}

.sidebar ul li {
margin: 0;
padding: 0;
}

.sidebar-link {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
font-size: 16px;
border-bottom: 1px solid #2c3e50;
transition: background-color 0.3s ease, font-weight 0.3s ease;
}

.sidebar-link:hover {
background-color: #3B82F6; /* Light blue hover effect */
font-weight: bold;
}

.sidebar-link.active {
background-color: #2563EB; /* Darker blue for the active menu item */
font-weight: bold;
}

/* Main content styles */


.main-content {
margin-left: 250px; /* Leave space for the sidebar */
padding: 20px;
background-color: white;
height: 100vh; /* Full height of the viewport */
overflow-y: auto; /* Scrollable if content exceeds height */
}

/* Responsive design */
@media (max-width: 768px) {
.sidebar {
position: relative;
width: 100%;
height: auto;
}

.main-content {
margin-left: 0;
width: 100%;
}
}

.table-custom {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

.table-custom th, .table-custom td {


border: 2px solid blue; /* Blue border */
padding: 12px; /* More space inside cells */
text-align: left;
}

.table-custom th {
background-color: #f0f8ff; /* Light blue header background */
color: black;
font-weight: bold;
}

.table-custom tr:nth-child(even) {
background-color: #e6f7ff; /* Light blue alternate row color */
}

.table-custom tr:hover {
background-color: #d1ecff; /* Highlight row on hover */
}

.btn-success {
padding: 8px 15px; /* More space for the button */
font-size: 14px;
cursor: pointer;
border: none;
background-color: #28a745;
color: white;
border-radius: 5px;
}

.btn-success:hover {
background-color: #218838;
}

You might also like