shortcut menu grapchic improved. see #130

This commit is contained in:
mic 2024-09-21 15:55:23 +02:00
parent 401ae6b8ea
commit faee5fcea6
2 changed files with 21 additions and 30 deletions

View file

@ -1,48 +1,46 @@
body { body {
background-color: rgb(122, 180, 255); background-color: rgb(122, 180, 255);
} font-size: 14px;
#mzta_popup{
width: 10em;
height: 11em;
background-color: rgb(122, 180, 255);
padding: 0;
} }
#mzta_search_banner{ #mzta_search_banner{
background-color: rgb(122, 180, 255); background-color: rgb(122, 180, 255);
color:black; color:black;
border-radius: 5px;
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
width: fit-content; width: 10em;
height: 2em; max-height: 11em;
z-index: 1000; min-height: 1em;
padding: 0;
overflow-y: auto;
} }
#mzta_search_input{ #mzta_search_input{
width: 12em; width: 12em;
position: fixed;
top:0;
left:0;
width: -moz-available;
z-index: 1001;
font-size: 13px;
} }
#mzta_autocomplete-items { #mzta_autocomplete-items {
position: absolute; position: relative;
top: 2em; top: 1.5em;
left: 0em; left: 0em;
border: 1px solid #ccc; border: none;
border-top: none; z-index: 1000;
z-index: 1001;
background-color: #fff; background-color: #fff;
overflow-y: auto;
width: 10em; width: 10em;
max-height: 11em;
} }
.mzta_autocomplete-item { .mzta_autocomplete-item {
padding: 8px; padding: 4px;
cursor: pointer; cursor: pointer;
} }
@ -61,11 +59,7 @@ body {
background-color: #27272a; background-color: #27272a;
} }
#mzta_popup{ #mzta_search_input {
background-color: #27272a;
}
input {
background-color: #27272a; background-color: #27272a;
color: #ffffff; color: #ffffff;
} }
@ -76,7 +70,6 @@ body {
} }
#mzta_autocomplete-items { #mzta_autocomplete-items {
border: 1px solid #555;
background-color: #2c2c2c; background-color: #2c2c2c;
} }

View file

@ -8,11 +8,9 @@
</head> </head>
<body> <body>
<div id="mzta_popup"> <div id="mzta_search_banner">
<div id="mzta_search_banner"> <input type="text" id="mzta_search_input" placeholder="__MSG_SearchPrompt__">
<input type="text" id="mzta_search_input" placeholder="__MSG_SearchPrompt__"> <div id="mzta_autocomplete-items" style="display: none;"></div>
<div id="mzta_autocomplete-items" style="display: none;"></div>
</div>
</div> </div>
<script src="mzta-popup.js" type="module"></script> <script src="mzta-popup.js" type="module"></script>
<script src="../js/mzta-i18n.js"></script> <script src="../js/mzta-i18n.js"></script>