made settings page pretty

michaelficarra · Mar 3, 2011 · 5c45416 · 5c45416
1 parent 37e8ba7
commit 5c45416
Show file tree

Hide file tree

Showing 5 changed files with 323 additions and 123 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,6 @@
 
 * don't require save button on options page
 * find a way to test this thing
-* pretty up the settings page
 * go to transmission web interface (on torrent add) if tab is already open (see [goToInbox function](http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/gmail/background.html?content-type=text/plain))
 * add support for multiple servers (don't forget to no longer cache the session ID as a single value!)
 * make popup come up on click, select server, enter encryption key (only show input if passwords are encrypted), press go button, wait for response, close popup or present error and retry button

diff --git a/chrome.css b/chrome.css
@@ -0,0 +1,188 @@
+/* Copyright (c) 2011 The Chromium Authors. All rights reserved. */
+
+body {
+	background-color:white;
+	color:black;
+	margin:10px;
+	cursor: default;
+	font-size: 13px;
+	font-family: Arial, sans-serif;
+}
+
+a:link {
+	color: rgb(63, 110, 194);
+}
+
+a:active {
+	color: rgb(37, 64, 113);
+}
+
+.informational-text {
+	color: grey;
+}
+
+.overlay {
+	-webkit-box-align: center;
+	-webkit-box-pack: center;
+	background: -webkit-radial-gradient(
+		rgba(127, 127, 127, 0.5),
+		rgba(127, 127, 127, 0.5) 35%,
+		rgba(0, 0, 0, 0.7)
+	);
+	bottom: 0;
+	display: -webkit-box;
+	left: 0;
+	padding: 20px;
+	padding-bottom: 130px;
+	position: fixed;
+	right: 0;
+	top: 0;
+	z-index: 10;
+}
+
+h1 {
+	-webkit-padding-end: 24px;
+	-webkit-user-select: none;
+	border-bottom: 1px solid #eeeeee;
+	color: #53637d;
+	font-size: 200%;
+	font-weight: normal;
+	margin: 0;
+	padding-bottom: 4px;
+	padding-top: 13px;
+	text-shadow: white 0 1px 2px;
+}
+
+section {
+	-webkit-box-orient: horizontal;
+	border-bottom: 1px solid #eeeeee;
+	display: -webkit-box;
+	margin-top: 17px;
+	margin-bottom: 17px;
+	padding-bottom: 20px;
+}
+
+section:last-child {
+	border-bottom: none;
+}
+
+h3 {
+	font-size: 105%;
+	font-weight: bold;
+	margin: 20px 0 10px 0;
+}
+
+section > h3 {
+	font-size: 105%;
+	font-weight: bold;
+	margin: 0 20px 0 0;
+	vertical-align: middle;
+	width: 160px;
+}
+
+section > div:only-of-type {
+	-webkit-box-flex: 1;
+}
+
+.option {
+	margin-top: 0;
+}
+
+/* TEXT */
+input[type='password'],
+input[type='text'],
+input[type='url']{
+	-webkit-border-radius: 2px;
+	border: 1px solid #aaa;
+	font-size: inherit;
+	padding: 3px;
+}
+
+/* BUTTON */
+button,
+input[type='submit'] {
+	-webkit-border-radius: 2px;
+	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+	-webkit-user-select: none;
+	background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+	border: 1px solid #aaa;
+	color: #444;
+	font-size: inherit;
+	margin-bottom: 0px;
+	min-width: 4em;
+	padding: 3px 12px 3px 12px;
+}
+
+button:hover,
+input[type='submit']:hover {
+	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+	background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+	border-color: #999;
+	color: #222;
+}
+
+button:active,
+input[type='submit']:active {
+	-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
+	background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
+	color: #333;
+}
+
+button[disabled],
+input[type='submit'][disabled],
+button[disabled]:hover,
+input[type='submit'][disabled]:hover {
+	-webkit-box-shadow: none;
+	background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+	border-color: #aaa;
+	color: #888;
+}
+
+/* SELECT */
+select {
+	-webkit-appearance: button;
+	-webkit-border-radius: 2px;
+	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+	-webkit-user-select: none;
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA5MDMwMzEzMUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA5MDMwMzE0MUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDkwMzAzMTExRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDkwMzAzMTIxRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5pY8xsAAAAbUlEQVR42mL8//8/AzmAEYijgJgHj5ovQMOXYYgmAgEzM/M3IPM/OgaJg+RBrkLHIEJhwYIFC9nY2H4iawLxQeIgeVwaMTQT0oSsEa6Zj4/vCyFN6BrBmt++fdtESBMIM2KJDlYg/k0oOgACDABJirkKokz/DAAAAABJRU5ErkJggg=="), -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+	background-position: center right;
+	background-repeat: no-repeat;
+	border: 1px solid #aaa;
+	color: #555;
+	font-size: inherit;
+	margin: 0;
+	overflow: hidden;
+	padding: 2px 20px 2px 5px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+html[dir='rtl'] select {
+	background-position: center left;
+}
+
+select:hover {
+	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA5MDMwMzEzMUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA5MDMwMzE0MUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDkwMzAzMTExRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDkwMzAzMTIxRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5pY8xsAAAAbUlEQVR42mL8//8/AzmAEYijgJgHj5ovQMOXYYgmAgEzM/M3IPM/OgaJg+RBrkLHIEJhwYIFC9nY2H4iawLxQeIgeVwaMTQT0oSsEa6Zj4/vCyFN6BrBmt++fdtESBMIM2KJDlYg/k0oOgACDABJirkKokz/DAAAAABJRU5ErkJggg=="), -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+	color: #333;
+}
+
+select:active {
+	-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
+	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA5MDMwMzEzMUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA5MDMwMzE0MUVBRTExRTA5NUM0QzJENTZCN0I5Mjk1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDkwMzAzMTExRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDkwMzAzMTIxRUFFMTFFMDk1QzRDMkQ1NkI3QjkyOTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5pY8xsAAAAbUlEQVR42mL8//8/AzmAEYijgJgHj5ovQMOXYYgmAgEzM/M3IPM/OgaJg+RBrkLHIEJhwYIFC9nY2H4iawLxQeIgeVwaMTQT0oSsEa6Zj4/vCyFN6BrBmt++fdtESBMIM2KJDlYg/k0oOgACDABJirkKokz/DAAAAABJRU5ErkJggg=="), -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
+	color: #444;
+}
+
+/* CHECKBOX, RADIO */
+input[type=checkbox],
+input[type=radio] {
+	margin-left: 0;
+	margin-right: 0;
+	position: relative;
+	top: 1px;
+}
+
+label > input[type=checkbox],
+label > input[type=radio] {
+	margin-top: 1px;
+}
diff --git a/options.css b/options.css
@@ -1,74 +1,65 @@
-.container {
+body {
 	width: 600px;
 	margin: 1em 2em;
 }
-fieldset {
-	border: 0;
-	border-left: 1px solid #999;
-	padding-top: 3em;
-	position: relative;
-}
-fieldset.disabled {
-	background-color: #EEE;
-	color: #999;
+
+.hidden {
+  display: none !important;
 }
-fieldset.disabled * { cursor: default; }
-fieldset.disabled legend:hover label { cursor: pointer; }
-fieldset.disabled legend:hover { color: #555; }
-fieldset p {
-	margin: 0 0 0.5em;
-	clear: both;
-	position: relative;
-}
-fieldset label { cursor: pointer; }
-fieldset p label {
-	text-transform: lowercase;
+
+img#logo {
 	float: left;
-	width: 8em;
-	margin-right: 0.7em;
-	text-align: right;
-	padding-top: 5px;
-	vertical-align: top;
+	margin-right: 1.2em;
+	margin-left: 0.5em;
+}
+.title {
+	padding: 0.5em;
+	vertical-align: baseline;
 }
-fieldset p input[disabled] {
-	background-color: #eee;
+
+label {
+	display: block;
+	margin: 9px 0;
 }
-fieldset p input[type="radio"]+label,
-fieldset p input[type="checkbox"]+label {
+
+label, select, option { cursor: pointer }
+
+section.disabled                { color: #888; }
+section.disabled *              { cursor: default; }
+section.disabled h3 label:hover { cursor: pointer; }
+section.disabled h3 label:hover { color: #666; }
+
+section h3 label { cursor: pointer; }
+section > div label { text-transform: lowercase; }
+section > div p input[disabled] { background-color: #eee; }
+section > div p input[type="radio"]+label,
+section > div p input[type="checkbox"]+label {
 	text-align: left;
 	float: none;
 	margin-left: 0.5em;
 }
-fieldset legend {
+section > h3 {
 	font-variant: small-caps;
 	text-transform: capitalize;
 	position: relative;
-	top: 1em;
 	font-size: 1.5em;
 	cursor: default;
 }
-button#reset {
-	float: right;
+
+#full_rpc_url {
+	border-left: 4px solid #ccc;
+	padding-left: 1em;
 }
-label acronym {
+
+acronym {
 	text-transform: uppercase;
-	vertical-align: top;
-}
-img#logo {
-	float: left;
-	margin-right: 1.2em;
-	margin-left: 0.5em;
-}
-.title {
-	padding: 0.5em;
-	vertical-align: baseline;
+	border-bottom: dotted 1px #999;
+	cursor: help;
 }
-label[for="additional_trackers"] { width: auto; }
+
 #additional_trackers {
 	width: 100%;
-	height: 12em;
-	clear: left;
+	height: 10em;
 }
-fieldset select { border-color: #bbb; }
-fieldset select:focus { border-color: #666; }
-#full_rpc_url { margin-left: 9em; }
+
+button#reset { float: right; }