redesigned layout elements
This commit is contained in:
Dan Hromada
parent
021cbcfe71
commit
d2f753708d
2 changed files with 76 additions and 70 deletions
110
css/style.css
110
css/style.css
|
|
@ -4,12 +4,12 @@
|
|||
*/
|
||||
|
||||
.cutomjs {
|
||||
padding: 20px 25px;
|
||||
padding: 15px 25px;
|
||||
min-width: 500px;
|
||||
min-height: 500px;
|
||||
color: #4A4A4A;
|
||||
font: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
a,
|
||||
|
|
@ -25,15 +25,19 @@ a:hover,
|
|||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pure-g {
|
||||
padding: 5px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -41,8 +45,7 @@ a:hover {
|
|||
* Host row (up)
|
||||
*/
|
||||
|
||||
.host {
|
||||
|
||||
.host {
|
||||
}
|
||||
|
||||
.host__name select {
|
||||
|
|
@ -50,13 +53,14 @@ a:hover {
|
|||
}
|
||||
|
||||
.host__name a {
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.host__enable {
|
||||
text-align: right;
|
||||
line-height: 39px;
|
||||
font-size: 12px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.host__enable input {
|
||||
|
|
@ -67,33 +71,20 @@ a:hover {
|
|||
|
||||
|
||||
/**
|
||||
* Versions row (bellow)
|
||||
* Include row (bellow top)
|
||||
*/
|
||||
|
||||
.versions {
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.versions__title strong {
|
||||
|
||||
}
|
||||
|
||||
.versions__control {
|
||||
.include {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.versions__control a {
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
.include__body {
|
||||
color: #999;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.versions__control button {
|
||||
font-size: 16px;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
|
||||
.versions__delete {
|
||||
|
||||
.include__body select {
|
||||
min-width: 110px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -102,27 +93,40 @@ a:hover {
|
|||
*/
|
||||
|
||||
.source {
|
||||
|
||||
}
|
||||
|
||||
.source__editor {
|
||||
|
||||
border: 1px solid #EBEBEB;
|
||||
}
|
||||
|
||||
.source__editor pre {
|
||||
margin: 0;
|
||||
min-height: 380px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Controls row (bottom)
|
||||
*/
|
||||
|
||||
.controls {
|
||||
|
||||
}
|
||||
|
||||
.controls__save {
|
||||
|
||||
.controls__save-version input {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.controls__include {
|
||||
.controls__save-version em {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.controls__versions {
|
||||
line-height: 39px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.controls__versions a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -131,10 +135,10 @@ a:hover {
|
|||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'customjs';
|
||||
src: url('../font/customjs.svg?96127482#customjs') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'customjs';
|
||||
src: url('../font/customjs.svg?96127482#customjs') format('svg');
|
||||
}
|
||||
/* 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 */
|
||||
|
|
@ -148,28 +152,28 @@ a:hover {
|
|||
*/
|
||||
|
||||
[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;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
font-family: "customjs";
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
speak: none;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
|
|
|||
36
popup.html
36
popup.html
|
|
@ -7,7 +7,7 @@
|
|||
<link href="css/pure/0.4.2/forms-nr-min.css" rel="stylesheet">
|
||||
<link href="css/pure/0.4.2/buttons-min.css" rel="stylesheet">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="lib/behave.js"></script>
|
||||
<script type="text/javascript" src="lib/ace/ace.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cutomjs" id="cutomjs">
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<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>
|
||||
<a class="is-hidden" id="goto-host" href="">go to</a>
|
||||
</div>
|
||||
<div class="pure-u-2-5 host__enable">
|
||||
<label for="enable">
|
||||
|
|
@ -25,29 +25,31 @@
|
|||
</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 class="pure-g include">
|
||||
<div class="pure-u-1 include__body">
|
||||
You can inject <a id="include-custom">your own external scripts</a> or <label for="include">one of predefined:</label>
|
||||
<select id="include" name="include"></select>
|
||||
</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><!-- .include -->
|
||||
|
||||
<div class="pure-g source">
|
||||
<div class="pure-u-1 source__editor"></div>
|
||||
<div class="pure-u-1 source__editor">
|
||||
<pre id="ace-editor"></pre>
|
||||
</div>
|
||||
</div><!-- .source -->
|
||||
|
||||
<div class="pure-g controls">
|
||||
<div class="pure-u-2-5 controls__save">
|
||||
<div class="pure-u-2-5 controls__save-version">
|
||||
<input type="submit" class="pure-button pure-button-primary" name="save" value="save">
|
||||
<em>revision <span id="versions-counter">1 of 1</span> </em>
|
||||
</div>
|
||||
<div class="pure-u-3-5 controls__include">
|
||||
<label for="include"></label>
|
||||
<select id="include" name="include"></select>
|
||||
<div class="pure-u-3-5 controls__versions">
|
||||
<a class="red-text" id="delete-version" href="">
|
||||
delete current revision
|
||||
</a>
|
||||
<button id="prev-version" class="pure-button icon-left-open pure-button-disabled"></button>
|
||||
<button id="next-version" class="pure-button icon-right-open"></button>
|
||||
</div>
|
||||
</div><!-- .controls -->
|
||||
</form>
|
||||
|
|
|
|||
Reference in a new issue