command-line as background page

This commit is contained in:
Shin'ya Ueoka 2017-08-28 20:08:16 +09:00
parent e46f664363
commit a808b28940
4 changed files with 75 additions and 2 deletions

View file

@ -0,0 +1,16 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8 />
<title>VimVixen command-line</title>
<script src='command-line.js'></script>
</head>
<body class='vimvixen-command-line'>
<div>
<p class='vimvixen-command-line-title'></p>
<div class='vimvixen-command-line-line'>
<i class='vimvixen-command-line-line-prompt'></i><input class='vimvixen-command-line-line-input'></input>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1 @@
import './index.scss';

View file

@ -0,0 +1,42 @@
html, body, * {
margin: 0;
padding: 0;
}
.vimvixen-command-line {
border-top: 1px solid gray;
bottom: 0;
margin: 0;
padding: 0;
&-title {
background-color: lightgray;
font-weight: bold;
margin: 0;
padding: 0;
}
&-line {
background-color: white;
display: flex;
@mixin input-style {
font-style: normal;
font-family: monospace;
font-size: 12px;
}
&-prompt:before {
content: ':';
@include input-style;
}
&-input {
border: none;
flex-grow: 1;
@include input-style;
}
}
}