Skip to content
This repository has been archived by the owner on Nov 6, 2018. It is now read-only.

Commit

Permalink
Cleaner manager UI.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sirn
sirn committed Jan 8, 2011
1 parent ad45da5 commit 54d2959
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 95 deletions.
120 changes: 71 additions & 49 deletions manage/manage.css
View file
@@ -1,61 +1,77 @@
/* Defaults
* ----------------------------------------------------------------------- */

html {
background: #f0f0f0;
}

body {
position: absolute;
top: 50px; right: 50px; bottom: 50px; left: 50px;
margin: 0; padding: 0;
background: #fff;
border: 1px solid #646464;
font-family: sans-serif;
background-color: #f0f0f0;
font-family: "Lucida Grande", "Lucida", "Verdana", sans-serif;
font-size: 14px/100%;
-khtml-user-select: none;
}

/* Header
header {
display: none;
}

/* Layout
* ----------------------------------------------------------------------- */

header {
display: block;
background: -webkit-gradient(linear, left top, left bottom, from(#bfbfbf), to(#979797));
height: 36px;
div#container {
position: absolute;
overflow: hidden;
margin: 8px;
top: 0; right: 0; bottom: 0; left: 0;
display: -webkit-box;
-webkit-box-orient: horizontal;
}

div#container aside,
div#container section {
display: -webkit-box;
-webkit-box-orient: vertical;
position: absolute;
top: 0; bottom: 0;
background-color: #fff;
}

div#container aside {
width: 199px;
border: 1px solid #bebebe;
border-top-color: #8e8e8e;
}

header h1 {
div#container section {
display: block;
margin: 0; padding: 10px;
border-bottom: 1px solid #646464;
font-size: 11px;
line-height: 15px;
color: #000;
text-shadow: 0 1px 0 #e0e0e0;
-webkit-box-flex: 1;
left: 201px; right: 0;
margin: 0 0 0 8px; padding: 0;
border: 1px solid #bebebe;
border-top-color: #8e8e8e;
overflow: auto;
}

/* Sidebar
* ----------------------------------------------------------------------- */

aside {
display: block;
position: absolute;
top: 36px; right: auto; bottom: 0; left: 0;
width: 199px;
border-right: 1px solid #aaa;
background: #dee4ea;
overflow: auto;
aside div#list-container {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
overflow-y: auto;
overflow-x: hidden;
}

aside ul {
-webkit-box-flex: 1;
margin: 0; padding: 0;
list-style: none;
-webkit-background-size: auto 70px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), color-stop(0.49999, white), color-stop(0.5, rgb(247, 247, 247)), to(rgb(247, 247, 247)));
}

aside li {
margin: 0; padding: 0;
position: relative;
margin: 0; padding: 0;
}

aside a.selector {
Expand All @@ -74,42 +90,48 @@ aside a.selector.current {
color: #fff;
font-weight: bold;
text-shadow: 0 1px 0 #333;
background: -webkit-gradient(linear, left top, left bottom, from(#5b92d5), to(#1654ab));
background-image: -webkit-gradient(linear, left top, left bottom, from(#5b92d5), to(#1654ab));
}

aside a.delete {
aside li a.delete {
display: none;
position: absolute;
top: 50%; right: 8px; bottom: auto; left: auto;
margin: 0; margin-top: -7px;
width: 14px;
height: 14px;
background: url(safari-resource:/ExtensionClose.png) no-repeat;
background-image: url(safari-resource:/ExtensionClose.png);
background-repeat: no-repeat;
text-indent: -10000em;
}

aside a.delete:hover {
background-image: url(safari-resource:/ExtensionCloseHovered.png);
aside li:hover a.delete {
display: block;
}

/* Content area
* ----------------------------------------------------------------------- */
aside li a.delete:hover {
background-image: url(safari-resource:/ExtensionCloseHovered.png);
}

section {
aside a#new {
display: block;
position: absolute;
margin: 0; padding: 0;
top: 36px; right: 0; bottom: 0; left: 200px;
overflow: auto;
background-color: #fff;
border-top: 1px solid #bebebe;
}

/* Content area
* ----------------------------------------------------------------------- */

section h1 {
margin: 0 0 10px; padding: 10px 15px;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#d9d9d9));
border-top: 1px solid #fff;
border-bottom: 1px solid #aaa;
margin: 0 0 10px; padding: 9px 15px;
border-bottom: 1px solid #d6d6d6;
text-shadow: 0 1px 0 #fff;
font-size: 16px;
color: #666;
color: #404040;
}

section form {
-webkit-box-flex: 2;
}

section fieldset {
Expand All @@ -136,7 +158,7 @@ section fieldset span.label {
display: block;
padding: 3px 5px;
/* This feels a bit out of place. But works for the time being. */
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), color-stop(0.1, #e5e5e5), to(#d1d1d1));
background-image: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), color-stop(0.1, #e5e5e5), to(#d1d1d1));
border: 1px solid #999;
font-size: 11px;
font-weight: bold;
Expand Down Expand Up @@ -206,4 +228,4 @@ section fieldset textarea[name="styles"] {
font-family: monospace;
width: 75%;
height: 200px;
}
}
96 changes: 50 additions & 46 deletions manage/manage.html
View file
Expand Up @@ -9,53 +9,57 @@
<header>
<h1>User CSS Manager</h1>
</header>
<aside>
<ul id="list"></ul>
<a id="new" class="selector" href="#new">New User CSS</a>
</aside>
<section>
<h1 id="title">New User CSS</h1>
<form id="form">
<fieldset>
<p>
<label for="enabled">Enabled:</label>
<input name="enabled" type="checkbox" />
</p>
<p>
<label for="name">Name:</label>
<input name="name" type="text" />
</p>
<p>
<label for="domains">Domains:</label>
<span class="label" id="label-includes">
<span class="text">Includes</span>:
</span>
<textarea name="domains"></textarea>
<span class="label" id="label-excludes">
<span class="text">Excludes</span>:
</span>
<textarea name="excludes"></textarea>
<span class="description">
One rule per line. Wildcard matches all.
<strong>Example:</strong> http://*.apple.com/*
</span>
</p>
<p>
<label for="styles">Styles:</label>
<textarea name="styles"></textarea>
<span class="description">
To override page style, put <strong>!important</strong>
at the end of each style.
</span>
</p>
<p class="submit">
<input name="save" type="submit" value="Save" />
</p>
</fieldset>
</form>
</section>
<div id="container">
<aside>
<div id="list-container">
<ul id="list"></ul>
</div>
<a id="new" class="selector" href="#new">New User CSS</a>
</aside>
<section>
<h1 id="title">New User CSS</h1>
<form id="form">
<fieldset>
<p>
<label for="enabled">Enabled:</label>
<input name="enabled" type="checkbox" />
</p>
<p>
<label for="name">Name:</label>
<input name="name" type="text" />
</p>
<p>
<label for="domains">Domains:</label>
<span class="label" id="label-includes">
<span class="text">Includes</span>:
</span>
<textarea name="domains"></textarea>
<span class="label" id="label-excludes">
<span class="text">Excludes</span>:
</span>
<textarea name="excludes"></textarea>
<span class="description">
One rule per line. Wildcard matches all.
<strong>Example:</strong> http://*.apple.com/*
</span>
</p>
<p>
<label for="styles">Styles:</label>
<textarea name="styles"></textarea>
<span class="description">
To override page style, put <strong>!important</strong>
at the end of each style.
</span>
</p>
<p class="submit">
<input name="save" type="submit" value="Save" />
</p>
</fieldset>
</form>
</section>
</div>
<script src="../share/mootools.js"></script>
<script src="../share/storage.js"></script>
<script src="manage.js"></script>
</body>
</html>
</html>

0 comments on commit 54d2959

Please sign in to comment.