.menu-heading { margin-left: 6%; margin-right: 6%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; } .menu-section { /* padding: 10px; */ margin-top: 10px; margin-left: 6%; margin-right: 6%; } .menu-footer { margin-top: auto; padding: 10px; margin-left: 6%; margin-right: 6%; margin-bottom: 2%; } .menu-row { margin-left: 5%; margin-right: 5%; display: flex; flex-wrap: wrap; flex-direction: row; gap: 10px; justify-content: space-evenly; } .box-selector { border: 2px solid #d1d5db; border-radius: 0.25rem; padding: 0.5rem; height: 60px; width: 60px; } .box-input { border: 2px solid #d1d5db; border-radius: 0.25rem; padding: 0.5rem; height: 30px; resize: vertical; width: 100%; overflow: hidden; min-height: 20px; max-height: 300px; } #menu-title { font-size: 20px; } @media (max-height: 400px) or (max-width: 600px) { .box-selector { height: 20px; width: 20px; } .box-input { height: 20px; } } @media (min-width: 400px) and (max-height: 700px) { .box-selector { height: 10px; width: 10px; } .box-input { height: 10px; } } @media (min-width: 601px) and (max-width: 1200px) and (min-height: 701px) { .box-selector { height: 40px; width: 40px; } .box-input { height: 40px; } } .box-selected { border: 2px solid #3d3d3d; position: relative; } .box-selected:before { content: ''; left: 0.25rem; position: absolute; top: 0.25rem; height: 1rem; width: 1rem; } #box-mystery { height: 20px; width: 20px; background-image: url('data:image/svg+xml,%3Csvg fill="%23000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 27.774 27.774" xml:space="preserve"%3E%3Cg%3E%3Cpath d="M10.398,22.811h4.618v4.964h-4.618V22.811z M21.058,1.594C19.854,0.532,17.612,0,14.33,0c-3.711,0-6.205,0.514-7.482,1.543 c-1.277,1.027-1.916,3.027-1.916,6L4.911,8.551h4.577l-0.02-1.049c0-1.424,0.303-2.377,0.907-2.854 c0.604-0.477,1.814-0.717,3.632-0.717c1.936,0,3.184,0.228,3.74,0.676c0.559,0.451,0.837,1.457,0.837,3.017 c0,1.883-0.745,3.133-2.237,3.752l-1.797,0.766c-1.882,0.781-3.044,1.538-3.489,2.27c-0.442,0.732-0.665,2.242-0.665,4.529h4.68 v-0.646c0-1.41,0.987-2.533,2.965-3.365c2.03-0.861,3.343-1.746,3.935-2.651c0.592-0.908,0.888-2.498,0.888-4.771 C22.863,4.625,22.261,2.655,21.058,1.594z" /%3E%3C/g%3E%3C/svg%3E'); background-size: cover; background-repeat: no-repeat; background-color: white; } #box-vertical { background: linear-gradient(to right, black 50%, white 50%); } #box-horizontal { background: linear-gradient(to bottom, black 50%, white 50%); } #box-resize { background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 21 21%22%3E%3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke%3D%22currentColor%22 stroke-width%3D%221%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 transform%3D%22translate(4 2)%22%3E%3Cpath d%3D%22m4.5 8.5-4 4 4 4%22/%3E%3Cpath d%3D%22m12.5 12.5h-12%22/%3E%3Cpath d%3D%22m8.5.5 4 4-4 4%22/%3E%3Cpath d%3D%22m12.5 4.5h-12%22/%3E%3C/g%3E%3C/svg%3E'); background-size: 60%; background-position: center; background-repeat: no-repeat; background-color: white; } #box-delete { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='black' stroke-width='2'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); background-size: 70%; background-position: center; background-repeat: no-repeat; background-color: white; } #box-edit { background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg fill%3D%22%23000000%22 version%3D%221.1%22 id%3D%22Capa_1%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22 xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22 width%3D%22800px%22 height%3D%22800px%22 viewBox%3D%220 0 528.899 528.899%22 xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath d%3D%22M328.883 89.125l107.59 107.589-272.34 272.34L56.604 361.465 328.883 89.125zM518.113 63.177l-47.981-47.981c-18.543-18.543-48.653-18.543-67.259 0l-45.961 45.961 107.59 107.59 53.611-53.611C532.495 100.753 532.495 77.559 518.113 63.177zM0.3 512.69c-1.958 8.812 5.998 16.708 14.811 14.565l119.891-29.069L27.473 390.597 0.3 512.69z%22/%3E%3C/g%3E%3C/svg%3E'); background-size: 50%; background-position: center; background-repeat: no-repeat; background-color: white; } #icon-info { background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 50 50%22 width%3D%22100px%22 height%3D%22100px%22%3E%3Cpath d%3D%22M25 2C12.297 2 2 12.297 2 25s10.297 23 23 23 23-10.297 23-23S37.703 2 25 2zM25 11c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3S23.343 11 25 11zM29 38h-2h-4h-2v-2h2V23h-2v-2h2h4v2v13h2V38z%22/%3E%3C/svg%3E'); background-size: 100%; background-position: center; background-repeat: no-repeat; background-color: white; height: 30px; width: 30px; } #box-yellow { background-color: #F7C940; } #box-red { background-color: #EC4028; } #box-blue { background-color: #3755A1; } #box-black { background-color: #333333; } #action-paint { width: 100%; height: 40px; border: none; background-color: #F7C940; color: black; font-weight : bold; } #action-paint:hover { background-color: #f8d772; }