Basic layout and face
This commit is contained in:
parent
0c71818b40
commit
815539da98
2 changed files with 214 additions and 52 deletions
196
css/style.css
196
css/style.css
|
@ -1,32 +1,184 @@
|
|||
|
||||
/**
|
||||
* Basic
|
||||
*/
|
||||
|
||||
.cutomjs {
|
||||
padding: 20px 25px;
|
||||
min-width: 500px;
|
||||
min-height: 500px;
|
||||
padding: 25px;
|
||||
color: #4A4A4A;
|
||||
font: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
a,
|
||||
a:hover,
|
||||
.blue-text,
|
||||
.blue-text:hover {
|
||||
color: #0F14F3;
|
||||
}
|
||||
|
||||
.red-text,
|
||||
.red-text:hover {
|
||||
color: #f10000;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pure-g {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Host row (up)
|
||||
*/
|
||||
|
||||
.host {
|
||||
|
||||
}
|
||||
|
||||
.host__name select {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.host__name a {
|
||||
font-size: 12px;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
label {
|
||||
line-height: 37px;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
color: #0f14f3;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
.host__enable {
|
||||
text-align: right;
|
||||
}
|
||||
line-height: 39px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.host__enable input {
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Versions row (bellow)
|
||||
*/
|
||||
|
||||
.versions {
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.versions__title strong {
|
||||
|
||||
}
|
||||
|
||||
.versions__control {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.versions__control a {
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.versions__control button {
|
||||
font-size: 16px;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
|
||||
.versions__delete {
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Source row (middle)
|
||||
*/
|
||||
|
||||
.source {
|
||||
|
||||
}
|
||||
|
||||
.source__editor {
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Controls row (bottom)
|
||||
*/
|
||||
|
||||
.controls {
|
||||
|
||||
}
|
||||
|
||||
.controls__save {
|
||||
|
||||
}
|
||||
|
||||
.controls__include {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Font icons
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'customjs';
|
||||
src: url('../font/customjs.svg?96127482#customjs') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
|
||||
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
|
||||
/*
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: 'customjs';
|
||||
src: url('../font/customjs.svg?96127482#customjs') format('svg');
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
font-family: "customjs";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
.icon-plus:before { content: '\e802'; } /* '' */
|
||||
.icon-minus:before { content: '\e803'; } /* '' */
|
||||
.icon-left-open:before { content: '\e800'; } /* '' */
|
||||
.icon-right-open:before { content: '\e801'; } /* '' */
|
70
popup.html
70
popup.html
|
@ -1,4 +1,3 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
@ -11,38 +10,49 @@
|
|||
<script type="text/javascript" src="lib/behave.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cutomjs pure-g" id="cutomjs">
|
||||
<form action="" method="post" accept-charset="utf-8" class="pure-form">
|
||||
<div class="about pure-u-2-5">
|
||||
<input type="text" name="domain" value="example.com" readonly="readonly">
|
||||
</div>
|
||||
<div class="enable pure-u-3-5 text-right">
|
||||
<label for="enable">
|
||||
enable <em>cjs</em> for this domain <input id="enable" name="enable" type="checkbox">
|
||||
</label>
|
||||
</div>
|
||||
<div class="pure-u-1"></div>
|
||||
<div class="editor pure-u-1">
|
||||
<textarea id="editor" name="editor"></textarea>
|
||||
</div>
|
||||
<div class="pure-u-1"></div>
|
||||
<div class="control pure-u-3-5">
|
||||
<input type="submit" name="save" value="save" class="pure-button pure-button-primary">
|
||||
<input type="submit" name="reset" value="reset" class="pure-button">
|
||||
</div>
|
||||
<div class="include pure-u-2-5 text-right">
|
||||
<label for="include">
|
||||
include <select name="include" id="include">
|
||||
<option value=""> ---- nothing ---- </option>
|
||||
<option value="/jquery/1.11.0/jquery.min.js">jQuery 1.11.0</option>
|
||||
<option value="/jquery/2.1.0/jquery.min.js">jQuery 2.1.0</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="cutomjs" id="cutomjs">
|
||||
<form action="" method="post" accept-charset="utf-8" class="pure-form">
|
||||
|
||||
<div class="pure-g host">
|
||||
<div class="pure-u-3-5 host__name">
|
||||
<select id="host" name="host"></select>
|
||||
<a id="goto-host" href="">go to</a>
|
||||
</div>
|
||||
<div class="pure-u-2-5 host__enable">
|
||||
<label for="enable">
|
||||
enable <em class="blue-text">cjs</em> for <span id="enable-label-text">this host</span>
|
||||
<input id="enable" name="enable" type="checkbox">
|
||||
</label>
|
||||
</div>
|
||||
</div><!-- .top -->
|
||||
|
||||
<div class="pure-g versions">
|
||||
<div class="pure-u-1-2 versions__title">
|
||||
<em>version <span id="versions-counter">1 of 1</span></em>
|
||||
</div>
|
||||
<div class="pure-u-1-2 versions__control">
|
||||
<a class="red-text" id="delete-version" href="">delete version</a>
|
||||
<button id="prev-version" class="pure-button icon-left-open"></button>
|
||||
<button id="next-version" class="pure-button icon-right-open"></button>
|
||||
</div>
|
||||
</div><!-- .versions -->
|
||||
|
||||
<div class="pure-g source">
|
||||
<div class="pure-u-1 source__editor"></div>
|
||||
</div><!-- .source -->
|
||||
|
||||
<div class="pure-g controls">
|
||||
<div class="pure-u-2-5 controls__save">
|
||||
<input type="submit" class="pure-button pure-button-primary" name="save" value="save">
|
||||
</div>
|
||||
<div class="pure-u-3-5 controls__include">
|
||||
<label for="include"></label>
|
||||
<select id="include" name="include"></select>
|
||||
</div>
|
||||
</div><!-- .controls -->
|
||||
</form>
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<script src="lib/popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
Reference in a new issue