Basic layout and face
This commit is contained in:
Dan Hromada
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 {
|
.cutomjs {
|
||||||
|
padding: 20px 25px;
|
||||||
min-width: 500px;
|
min-width: 500px;
|
||||||
min-height: 500px;
|
min-height: 500px;
|
||||||
padding: 25px;
|
color: #4A4A4A;
|
||||||
|
font: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
a,
|
||||||
width: 100%;
|
a:hover,
|
||||||
height: 400px;
|
.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;
|
font-size: 12px;
|
||||||
color: #454545;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
.host__enable {
|
||||||
line-height: 37px;
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-style: italic;
|
|
||||||
color: #0f14f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-right {
|
|
||||||
text-align: right;
|
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>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
|
@ -11,38 +10,49 @@
|
||||||
<script type="text/javascript" src="lib/behave.js"></script>
|
<script type="text/javascript" src="lib/behave.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="cutomjs pure-g" id="cutomjs">
|
<div class="cutomjs" id="cutomjs">
|
||||||
<form action="" method="post" accept-charset="utf-8" class="pure-form">
|
<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 class="pure-g host">
|
||||||
</div>
|
<div class="pure-u-3-5 host__name">
|
||||||
<div class="enable pure-u-3-5 text-right">
|
<select id="host" name="host"></select>
|
||||||
<label for="enable">
|
<a id="goto-host" href="">go to</a>
|
||||||
enable <em>cjs</em> for this domain <input id="enable" name="enable" type="checkbox">
|
</div>
|
||||||
</label>
|
<div class="pure-u-2-5 host__enable">
|
||||||
</div>
|
<label for="enable">
|
||||||
<div class="pure-u-1"></div>
|
enable <em class="blue-text">cjs</em> for <span id="enable-label-text">this host</span>
|
||||||
<div class="editor pure-u-1">
|
<input id="enable" name="enable" type="checkbox">
|
||||||
<textarea id="editor" name="editor"></textarea>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="pure-u-1"></div>
|
</div><!-- .top -->
|
||||||
<div class="control pure-u-3-5">
|
|
||||||
<input type="submit" name="save" value="save" class="pure-button pure-button-primary">
|
<div class="pure-g versions">
|
||||||
<input type="submit" name="reset" value="reset" class="pure-button">
|
<div class="pure-u-1-2 versions__title">
|
||||||
</div>
|
<em>version <span id="versions-counter">1 of 1</span></em>
|
||||||
<div class="include pure-u-2-5 text-right">
|
</div>
|
||||||
<label for="include">
|
<div class="pure-u-1-2 versions__control">
|
||||||
include <select name="include" id="include">
|
<a class="red-text" id="delete-version" href="">delete version</a>
|
||||||
<option value=""> ---- nothing ---- </option>
|
<button id="prev-version" class="pure-button icon-left-open"></button>
|
||||||
<option value="/jquery/1.11.0/jquery.min.js">jQuery 1.11.0</option>
|
<button id="next-version" class="pure-button icon-right-open"></button>
|
||||||
<option value="/jquery/2.1.0/jquery.min.js">jQuery 2.1.0</option>
|
</div>
|
||||||
</select>
|
</div><!-- .versions -->
|
||||||
</label>
|
|
||||||
</div>
|
<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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||||
<script src="lib/popup.js"></script>
|
<script src="lib/popup.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
Reference in a new issue