Spaces:
Sleeping
Sleeping
Update templates/menu.html
Browse files- templates/menu.html +27 -0
templates/menu.html
CHANGED
|
@@ -602,6 +602,14 @@ form-check-input addon-option{
|
|
| 602 |
gap: 10px; /* Space between buttons */
|
| 603 |
}
|
| 604 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 605 |
/* Style for the buttons */
|
| 606 |
.category-btn {
|
| 607 |
padding: 10px 20px;
|
|
@@ -612,8 +620,26 @@ form-check-input addon-option{
|
|
| 612 |
font-size: 16px;
|
| 613 |
cursor: pointer;
|
| 614 |
transition: background-color 0.3s, color 0.3s;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 615 |
}
|
| 616 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 617 |
.category-btn:hover {
|
| 618 |
background-color: #ff7043;
|
| 619 |
color: white;
|
|
@@ -628,6 +654,7 @@ form-check-input addon-option{
|
|
| 628 |
|
| 629 |
|
| 630 |
|
|
|
|
| 631 |
</style>
|
| 632 |
</head>
|
| 633 |
<body>
|
|
|
|
| 602 |
gap: 10px; /* Space between buttons */
|
| 603 |
}
|
| 604 |
|
| 605 |
+
/* Ensures all buttons stay in the same row */
|
| 606 |
+
.category-container {
|
| 607 |
+
display: flex;
|
| 608 |
+
justify-content: center;
|
| 609 |
+
flex-wrap: wrap; /* This allows the buttons to wrap to the next line if necessary */
|
| 610 |
+
gap: 10px; /* Space between buttons */
|
| 611 |
+
}
|
| 612 |
+
|
| 613 |
/* Style for the buttons */
|
| 614 |
.category-btn {
|
| 615 |
padding: 10px 20px;
|
|
|
|
| 620 |
font-size: 16px;
|
| 621 |
cursor: pointer;
|
| 622 |
transition: background-color 0.3s, color 0.3s;
|
| 623 |
+
|
| 624 |
+
/* Make buttons same size */
|
| 625 |
+
flex: 1; /* This makes all buttons grow equally */
|
| 626 |
+
min-width: 150px; /* Minimum width for each button */
|
| 627 |
+
max-width: 200px; /* Maximum width for each button */
|
| 628 |
}
|
| 629 |
|
| 630 |
+
/* Ensure that the buttons do not stretch too much or shrink too much */
|
| 631 |
+
.category-container > .category-btn {
|
| 632 |
+
display: flex;
|
| 633 |
+
justify-content: center;
|
| 634 |
+
align-items: center;
|
| 635 |
+
}
|
| 636 |
+
|
| 637 |
+
/* Ensure equal size and padding */
|
| 638 |
+
.category-container button {
|
| 639 |
+
width: 100%; /* Ensures that all buttons take the same width */
|
| 640 |
+
}
|
| 641 |
+
|
| 642 |
+
/* Hover effect for buttons */
|
| 643 |
.category-btn:hover {
|
| 644 |
background-color: #ff7043;
|
| 645 |
color: white;
|
|
|
|
| 654 |
|
| 655 |
|
| 656 |
|
| 657 |
+
|
| 658 |
</style>
|
| 659 |
</head>
|
| 660 |
<body>
|