aynish/shaarli-web-extension
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Settings: better looking form

Browse source
This commit is contained in:
ikipatang 2017-11-28 00:15:40 +01:00
parent 308d958578
commit a2c236b421
2 changed files with 83 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/options/options.css
View file

@ -1,18 +1,70 @@
body {
width: 25em;
font-family: "Open Sans Light", sans-serif;
font-size: 0.9em;
font-weight: 300;
.main{
font: 14px sans-serif;
}
input#url {
margin: 0.5em;
width: 50em;
height: 2.5em;
.main .row{
text-align: left;
}
input {
width: 20em;
height: 2.5em;
/* The form title */
.main .row > label span{
color: #1a1a1a;
width: 100em;
vertical-align: center;
padding-left: 5px;
padding-right: 30px;
}
.main input{
color: #1a1a12;
width: 31em;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 5px;
border: 1px solid #dbdbdb;
}
.main input[type=checkbox]{
box-shadow: none;
width: auto;
margin-top: 13px;
}
.main button{
display: block;
border-radius: 2px;
font-weight: bold;
padding: 8px 22px;
margin-left: 10em;
}
/* Making the form responsive. Remove this media query
if you don't need the form to work on mobile devices. */
/*@media (max-width: 600px) {
.main{
padding: 30px;
max-width: 480px;
}
.main .row{
max-width: 300px;
margin: 25px auto;
text-align: left;
}
.main .row > label span{
display: block;
text-align: left;
padding: 0 0 15px;
}
.main input[type=checkbox]{
margin-top:0;
}
.main button{
margin: 0;
}
}*/

22
src/options/options.html
View file

@ -7,10 +7,24 @@
</head>
<body>
<div>URL: <input id="url" type="text"/></div>
<div>Address Bar: <input id="pageAction" type="checkbox"/></div>
<input type="button" value="Save preferences" id="save-button"/>
<div class="main">
<div class="row">
<label>
<span>Shaarli URL</span>
<input id="url" type="text" name="url">
</label>
</div>
<div class="row">
<label>
<span>Address bar</span>
<input id="pageAction" type="checkbox" name="pageAction" checked>
</label>
</div>
<div class="row">
<span>&nbsp;</span>
<button id="save-button" type="submit">Save preferences</button>
</div>
</div>
<script src="options.js"></script>
</body>