alvin/Schoolkantine
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Schoolkantine.git synced 2026-03-06 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor layout and styling for top bar menu; adjust body flex direction and background color

Browse Source
This commit is contained in:
vista-man
2025-02-18 11:24:37 +01:00
parent 0728c27ac7
commit 9beeca1ac9
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
website/style.css
View File

@@ -3,26 +3,33 @@ body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
justify-content: space-between;
background-color: #ffffff;
flex-direction: column; /* Change to column to accommodate the top bar */
background-color: #f2c14e;
}
/* Linkerkant menu */
.menu-list {
width: 25%;
background-color: #d7d7d7;
padding: 20px;
height: 100vh;
overflow-y: auto;
/* Top bar menu */
.menu-bar {
width: 100%;
background-color: #f2c14e;
padding: 10px 0;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: fixed; /* Fix the top bar to the top */
top: 0;
z-index: 1000; /* Ensure it is above other elements */
transition: background-color 0.3s ease; /* Add transition for background color */
}
.menu-bar.dark {
background-color: #d1a73e; /* Darker background color when modal is open */
}
.menu-item {
background-color: #fff;
padding: 10px 20px;
margin: 5px;
background-color: #ff9d3b;
padding: 20px;
margin: 10px 0;
border-radius: 8px;
cursor: pointer;
font-size: 1.2em;
@@ -30,7 +37,7 @@ body {
}
.menu-item:hover {
background-color: #ff9d3b;
background-color: #f59e42;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
@@ -49,13 +56,9 @@ body {
margin: 10px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background-color: #e3e3e3 ;
}
.product-box:hover {
@@ -78,6 +81,7 @@ body {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
overflow-y: auto; /* Allow scrolling for larger content */
}
.modal-content {