Change commandline and completions to look more like Vimperator

This commit is contained in:
Oliver Blanthorn 2017-10-22 11:08:43 +01:00
parent b78be56273
commit 242fcce1c3
No known key found for this signature in database
GPG key ID: 2BB8C36BB504BFF3
3 changed files with 27 additions and 11 deletions

View file

@ -25,13 +25,17 @@ function init(){
// every time.
init()
// The CSS in this file should probably go in static/
export function show(){
cmdline_iframe.setAttribute("style", "position: fixed; bottom: 0; left: 0; z-index: 10000; width: 100%; height: 36px; border: 0; padding: 0; margin: 1;");
// I don't understand how CSS works - but this ensures that the commandline is always at the bottom of the page.
cmdline_iframe.setAttribute("style", "position: fixed; bottom: 0; left: 0; z-index: 10000; width: 100%; height: 24px; border: 0; padding: 0; margin: 0;");
const height = cmdline_iframe.contentWindow.document.body.offsetHeight + 'px'
cmdline_iframe.setAttribute("style", `position: fixed; bottom: 0; left: 0; z-index: 10000; width: 100%; height: ${height}; border: 0; padding: 0; margin: 0;`);
}
export function resize() {
const height = cmdline_iframe.contentWindow.document.body.offsetHeight + 'px'
cmdline_iframe.setAttribute("style", `position: fixed; bottom: 0; left: 0; z-index: 10000; width: 100%; height: ${height}; border: 0; padding: 0; margin: 1;`);
cmdline_iframe.setAttribute("style", `position: fixed; bottom: 0; left: 0; z-index: 10000; width: 100%; height: ${height}; border: 0; padding: 0; margin: 0;`);
}
export function hide(){

View file

@ -454,7 +454,7 @@ function formatTab(tab: browser.tabs.Tab, prev?: boolean) {
else if (prev) formatted += "#"
if (tab.pinned) formatted += "@"
formatted = formatted.padEnd(9)
// TODO: Dynamically set favicon dimensions.
// TODO: Dynamically set favicon dimensions. Should be able to use em.
formatted += tab.favIconUrl
? `<img src="${tab.favIconUrl}" height="10px" width="10px"> `
: `<img src="${DEFAULT_FAVICON}" height="10px" width="10px"> `

View file

@ -6,27 +6,32 @@ body {
input {
width: 100%;
padding: 0;
font-family: mono;
font-size: 8pt;
font-family: "mono", "monospace", "Courier New";
font-size: 10pt;
color: black;
border: unset;
/* we currently have a border from the completions */
/* border-top: solid 1px lightgray; */
padding-left: 0.5ex;
}
#completions {
background: black;
color: white;
background: white;
color: black;
display: inline-block;
font-family: mono;
font-size: 8pt;
font-size: 10pt;
height: auto;
line-height: 1.5em;
/* line-height: 1.5em; */
overflow: hidden;
bottom: 36px;
white-space: pre;
width: 100%;
z-index: 9998;
border-top: 1px solid lightgray;
}
.url, a.url, a.url:link, a.url:visited {
background: black;
background: white;
color: #d0ffd0 !important;
display: inline;
left: 50%;
@ -37,6 +42,13 @@ input {
z-index: 9999;
}
/* Hide the URLs if the screen is small */
@media all and (max-width: 980px) {
.url, a.url, a.url:link, a.url:visited {
display: none;
}
}
a.url:hover {
cursor: pointer;
text-decoration: underline !important;