stylus/edit.html

<html>
	<head>
		<script src="codemirror/lib/codemirror.js"></script>
		<link rel="stylesheet" href="codemirror/lib/codemirror.css">
		<script src="codemirror/mode/css/css.js"></script>

		<link rel="stylesheet" href="codemirror/addon/dialog/dialog.css">
		<link rel="stylesheet" href="codemirror/addon/search/matchesonscrollbar.css">
		<script src="codemirror/addon/scroll/annotatescrollbar.js"></script>
		<script src="codemirror/addon/search/matchesonscrollbar.js"></script>
		<script src="codemirror/addon/dialog/dialog.js"></script>
		<script src="codemirror/addon/search/searchcursor.js"></script>
		<script src="codemirror/addon/search/search.js"></script>

		<link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css" />
		<script src="codemirror/addon/fold/foldcode.js"></script>
		<script src="codemirror/addon/fold/foldgutter.js"></script>
		<script src="codemirror/addon/fold/brace-fold.js"></script>
		<script src="codemirror/addon/fold/comment-fold.js"></script>

		<script src="codemirror/addon/edit/matchbrackets.js"></script>

		<link rel="stylesheet" href="codemirror/addon/lint/lint.css" />
		<script src="csslint/csslint.js"></script>
		<script src="codemirror/addon/lint/lint.js"></script>
		<script src="codemirror/addon/lint/css-lint.js"></script>

		<link rel="stylesheet" href="codemirror/addon/hint/show-hint.css" />
		<script src="codemirror/addon/hint/show-hint.js"></script>
		<script src="codemirror/addon/hint/css-hint.js"></script>

		<script src="codemirror/keymap/sublime.js"></script>

		<style type="text/css">

			body {
				margin: 0;
				font: 9pt arial,sans-serif;
			}
			/************ header ************/
			#header {
				height: 100%;
				width: 15rem;
				position: fixed;
				top: 0;
				padding: 0.95rem;
				border-right: 1px dashed #AAA;
				-webkit-box-shadow: 0 0 3rem -1.2rem black;
			}
			#header h1 {
				margin-top: 0;
			}
			#sections {
				padding-left: 18rem;
			}
			#sections h2 {
				margin-top: 0.5rem;
			}
			.aligned {
				display: table-row;
			}
			.aligned > * {
				display: table-cell;
				margin-top: 0.1rem;
				min-height: 1.4rem;
			}
			input[type="checkbox"] {
				margin-left: 0.1rem;
			}
			/* basic info */
			#basic-info {
				margin-bottom: 1rem;
			}
			#name {
				width: 100%;
			}
			#enabled {
				margin-left: 0;
				vertical-align: middle;
			}
			#enabled-label {
				vertical-align: middle;
			}
			/* actions */
			#actions > * {
				margin-right: 0.5rem;
				margin-bottom: 0.5rem;
				display: block;
			}
			#actions img {
				margin-left: 0.2rem;
				position: relative;
				top: 0.2rem;
			}
			/* options */
			#options [type="number"] {
				max-width: 2.5rem;
				text-align: right;
			}
			#options .option > * {
				padding-right: 0.25rem;
			}
			/************ content ***********/
			#sections > div {
				margin: 0.7rem;
				padding: 1rem;
			}
			#sections > div:not(:first-of-type) {
				border-top: 2px solid black;
			}
			#sections > div:only-of-type .remove-section {
				display: none;
			}
			#sections > div .add-section {
				margin-left: 0.4rem;
			}
			.dirty > label::before {
				content: "*";
				font-weight: bold;
			}
			/* code */
			.code {
				height: 10rem;
				width: 40rem;
			}
			.CodeMirror {
				border: solid #CCC 1px;
			}
			.CodeMirror-focused {
				border-color: black;
			}
			.CodeMirror-lint-mark-warning {
				background: none;
			}
			/* applies-to */
			.applies-to {
				display: flex;
			}
			.applies-to label {
				flex: auto;
				margin-top: 0.2rem;
			}
			.applies-to ul {
				flex: auto;
				flex-grow: 99;
				margin: 0;
				padding: 0;
			}
			.applies-to li {
				display: flex;
				list-style-type: none;
				align-items: center;
				margin-bottom: 0.35rem;
			}
			.applies-to li > *:not(button) {
				flex: auto;
				min-height: 1.4rem;
				margin-left: 0.35rem;
			}
			.applies-to li .add-applies-to {
				visibility: hidden;
				text-align: left;
			}
			.applies-to li:last-child .add-applies-to {
				visibility: visible
			}
			.applies-to li .add-applies-to:first-child {
				margin-left: 1rem;
			}
			.applies-to li .applies-value {
				flex-grow: 99;
				padding-left: 0.2rem;
			}
			.applies-to img {
				vertical-align: bottom;
			}

			/************ reponsive layouts ************/
			@media(max-width:737px) {
				#header {
					width: auto;
					height: auto;
					position: inherit;
					border-right: none;
					border-bottom: 1px dashed #AAA;
				}
				#header section:not(:last-child) {
					margin-bottom: 0.4rem;
				}
				#header input[type="checkbox"] {
					vertical-align: middle;
				}
				h2 {
					display: none;
				}
				#basic-info {
					display: flex;
					align-items: baseline;
				}
				#basic-info > * {
					flex: auto;
				}
				#basic-info > *:first-child {
					flex-grow: 99;
					display: flex;
				}
				#basic-info > *:not(:last-child) {
					margin-right: 0.8rem;
				}
				#basic-info #name {
					width: auto;
					flex-grow: 99;
				}
				#actions {
					margin-top: 1rem;
				}
				#actions > * {
					display: inline-block;
				}
				#options {
					-webkit-column-count: 2;
				}
				#options .aligned > * {
					margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */
					padding-right: 0.4rem;
					vertical-align: baseline;
					min-height: 1.4rem;
				}
				.option {
					-webkit-column-break-inside: avoid;
				}
				.option label {
					line-height: 1.25rem;
					margin: 0;
				}
				#options [type="number"] {
					text-align: left; /* workaround the column flow bug in webkit */
					padding-left: 0.2rem;
				}
				#options #tabSize-label {
					position: relative;
					top: 0.2rem;
				}
				#sections {
					padding-left: 0;
				}
				#sections > div {
					padding: 0;
				}
				#sections > *:not(h2) {
					padding-left: 0.4rem;
				}
			}
		</style>
		<script src="storage.js"></script>
		<script src="messaging.js"></script>
		<script src="localization.js"></script>
		<script src="apply.js"></script>
	</head>
	<body id="stylish-edit">
		<div id="header">
			<h1 id="heading"></h1>
			<section id="basic-info">
				<div id="basic-info-name">
					<input id="name" class="style-contributor">
				</div>
				<div id="basic-info-enabled">
					<input type="checkbox" id="enabled" class="style-contributor">
					<label for="enabled" id="enabled-label"></label>
				</div>
			</section>
			<section id="actions">
				<div><button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"></div>
				<a href="manage.html"><button id="cancel-button"></button></a>
				<button id="save-button" title="Ctrl-S"></button>
			</section>
			<section id="options">
				<h2 id="options-heading"></h2>
				<div class="option">
					<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
					<label id="lineWrapping-label" for="editor.lineWrapping"></label>
				</div>
				<div class="option">
					<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
					<label id="smartIndent-label" for="editor.smartIndent"></label>
				</div>
				<div class="option">
					<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
					<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>
				</div>
				<div class="option aligned">
					<label id="tabSize-label" for="editor.tabSize"></label>
					<input data-option="tabSize" id="editor.tabSize" type="number" min="0">
				</div>
				<div class="option aligned">
					<label id="keyMap-label" for="editor.keyMap"></label>
					<select data-option="keyMap" id="editor.keyMap"></select>
				</div>
			</section>
		</div>
		<section id="sections">
			<h2><span id="sections-heading"></span> <img id="sections-help" src="help.png"></h2>
		</section>
		<script src="edit.js"></script>
	</body>
</html>
Unix line endings 2015-02-09 03:32:06 +00:00			`<html>`
			`<head>`
Add option for smart indentation in editor 2015-02-09 04:02:08 +00:00			`<script src="codemirror/lib/codemirror.js"></script>`
			`<link rel="stylesheet" href="codemirror/lib/codemirror.css">`
			`<script src="codemirror/mode/css/css.js"></script>`
Add CodeMirror addons - search, code folding, match brackets, lint 2015-02-25 04:05:00 +00:00
			`<link rel="stylesheet" href="codemirror/addon/dialog/dialog.css">`
			`<link rel="stylesheet" href="codemirror/addon/search/matchesonscrollbar.css">`
			`<script src="codemirror/addon/scroll/annotatescrollbar.js"></script>`
			`<script src="codemirror/addon/search/matchesonscrollbar.js"></script>`
			`<script src="codemirror/addon/dialog/dialog.js"></script>`
			`<script src="codemirror/addon/search/searchcursor.js"></script>`
			`<script src="codemirror/addon/search/search.js"></script>`

			`<link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css" />`
			`<script src="codemirror/addon/fold/foldcode.js"></script>`
			`<script src="codemirror/addon/fold/foldgutter.js"></script>`
			`<script src="codemirror/addon/fold/brace-fold.js"></script>`
			`<script src="codemirror/addon/fold/comment-fold.js"></script>`

			`<script src="codemirror/addon/edit/matchbrackets.js"></script>`

			`<link rel="stylesheet" href="codemirror/addon/lint/lint.css" />`
			`<script src="csslint/csslint.js"></script>`
			`<script src="codemirror/addon/lint/lint.js"></script>`
			`<script src="codemirror/addon/lint/css-lint.js"></script>`

Edit style: autocomplete on Ctrl-Space using CodeMirror hint addon 2015-03-02 23:59:36 +00:00			`<link rel="stylesheet" href="codemirror/addon/hint/show-hint.css" />`
			`<script src="codemirror/addon/hint/show-hint.js"></script>`
			`<script src="codemirror/addon/hint/css-hint.js"></script>`

Edit style: use 'sublime' keymap, add custom keys F3, Shift-F3, Ctrl-H - find/find previous/replace Ctrl-G: go to line dialog Alt-PgDn: next code section Alt-PgUp: previous code section ...and many more. 2015-03-05 06:39:09 +00:00			`<script src="codemirror/keymap/sublime.js"></script>`

Unix line endings 2015-02-09 03:32:06 +00:00			`<style type="text/css">`
Add CodeMirror addons - search, code folding, match brackets, lint 2015-02-25 04:05:00 +00:00
Unix line endings 2015-02-09 03:32:06 +00:00			`body {`
HTML fixes: close a tag, replace 0px with 0 2015-03-15 03:35:30 +00:00			`margin: 0;`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`font: 9pt arial,sans-serif;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`/********** header **********/`
Unix line endings 2015-02-09 03:32:06 +00:00			`#header {`
			`height: 100%;`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`width: 15rem;`
Unix line endings 2015-02-09 03:32:06 +00:00			`position: fixed;`
HTML fixes: close a tag, replace 0px with 0 2015-03-15 03:35:30 +00:00			`top: 0;`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`padding: 0.95rem;`
Unix line endings 2015-02-09 03:32:06 +00:00			`border-right: 1px dashed #AAA;`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`-webkit-box-shadow: 0 0 3rem -1.2rem black;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
Restore header for narrow width edit and standardize position 2015-03-24 00:52:18 +00:00			`#header h1 {`
			`margin-top: 0;`
			`}`
Unix line endings 2015-02-09 03:32:06 +00:00			`#sections {`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`padding-left: 18rem;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
Add option for smart indentation in editor 2015-02-09 04:02:08 +00:00			`#sections h2 {`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`margin-top: 0.5rem;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`.aligned {`
			`display: table-row;`
			`}`
			`.aligned > * {`
			`display: table-cell;`
			`margin-top: 0.1rem;`
			`min-height: 1.4rem;`
			`}`
			`input[type="checkbox"] {`
			`margin-left: 0.1rem;`
			`}`
			`/* basic info */`
Unix line endings 2015-02-09 03:32:06 +00:00			`#basic-info {`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`margin-bottom: 1rem;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
			`#name {`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`width: 100%;`
			`}`
			`#enabled {`
			`margin-left: 0;`
			`vertical-align: middle;`
			`}`
			`#enabled-label {`
			`vertical-align: middle;`
			`}`
			`/* actions */`
			`#actions > * {`
			`margin-right: 0.5rem;`
			`margin-bottom: 0.5rem;`
			`display: block;`
			`}`
			`#actions img {`
			`margin-left: 0.2rem;`
			`position: relative;`
			`top: 0.2rem;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`/* options */`
			`#options [type="number"] {`
			`max-width: 2.5rem;`
			`text-align: right;`
			`}`
			`#options .option > * {`
			`padding-right: 0.25rem;`
			`}`
			`/********** content *********/`
Unix line endings 2015-02-09 03:32:06 +00:00			`#sections > div {`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`margin: 0.7rem;`
			`padding: 1rem;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
Adjust display of name/enabled when in a narrow window 2015-03-24 00:25:39 +00:00			`#sections > div:not(:first-of-type) {`
Unix line endings 2015-02-09 03:32:06 +00:00			`border-top: 2px solid black;`
			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`#sections > div:only-of-type .remove-section {`
			`display: none;`
			`}`
			`#sections > div .add-section {`
			`margin-left: 0.4rem;`
			`}`
Fix 'dirty' indicator on 'Code' boxes Toggle a class on the container instead of changing label text. 2015-03-10 15:45:13 +00:00			`.dirty > label::before {`
			`content: "*";`
			`font-weight: bold;`
			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`/* code */`
Unix line endings 2015-02-09 03:32:06 +00:00			`.code {`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`height: 10rem;`
			`width: 40rem;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
Add option for smart indentation in editor 2015-02-09 04:02:08 +00:00			`.CodeMirror {`
			`border: solid #CCC 1px;`
			`}`
Indicate active code box with a darker border 2015-03-07 00:11:41 +00:00			`.CodeMirror-focused {`
			`border-color: black;`
			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`.CodeMirror-lint-mark-warning {`
			`background: none;`
			`}`
			`/* applies-to */`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`.applies-to {`
			`display: flex;`
			`}`
			`.applies-to label {`
			`flex: auto;`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`margin-top: 0.2rem;`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`}`
Unix line endings 2015-02-09 03:32:06 +00:00			`.applies-to ul {`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`flex: auto;`
			`flex-grow: 99;`
Unix line endings 2015-02-09 03:32:06 +00:00			`margin: 0;`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`padding: 0;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
			`.applies-to li {`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`display: flex;`
Unix line endings 2015-02-09 03:32:06 +00:00			`list-style-type: none;`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`align-items: center;`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`margin-bottom: 0.35rem;`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`}`
'Specify' should not stretch to full page width #82 2015-03-23 19:38:03 +00:00			`.applies-to li > *:not(button) {`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`flex: auto;`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`min-height: 1.4rem;`
			`margin-left: 0.35rem;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
			`.applies-to li .add-applies-to {`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`visibility: hidden;`
			`text-align: left;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
			`.applies-to li:last-child .add-applies-to {`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`visibility: visible`
			`}`
			`.applies-to li .add-applies-to:first-child {`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`margin-left: 1rem;`
Edit style: expand applies-to-URL block to page width 2015-02-28 18:40:05 +00:00			`}`
			`.applies-to li .applies-value {`
			`flex-grow: 99;`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`padding-left: 0.2rem;`
Unix line endings 2015-02-09 03:32:06 +00:00			`}`
			`.applies-to img {`
			`vertical-align: bottom;`
			`}`
Use columns instead of flex for narrow-width options 2015-03-24 00:39:21 +00:00
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`/********** reponsive layouts **********/`
Updated responsive design Fixed everything that wasn't lined up properly and shrinked some paddings to make more space for the editor. It also cuts off earlier now. Not sure what to do with the section borders, they seem alright to me. 2015-02-19 17:29:57 +00:00			`@media(max-width:737px) {`
Added responsive design for editor Fixes #28 It's not perfect, but it should work well. Suggestions welcome. 2015-02-18 15:57:33 +00:00			`#header {`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`width: auto;`
Added responsive design for editor Fixes #28 It's not perfect, but it should work well. Suggestions welcome. 2015-02-18 15:57:33 +00:00			`height: auto;`
			`position: inherit;`
Updated responsive design Fixed everything that wasn't lined up properly and shrinked some paddings to make more space for the editor. It also cuts off earlier now. Not sure what to do with the section borders, they seem alright to me. 2015-02-19 17:29:57 +00:00			`border-right: none;`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`border-bottom: 1px dashed #AAA;`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`#header section:not(:last-child) {`
			`margin-bottom: 0.4rem;`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`}`
			`#header input[type="checkbox"] {`
			`vertical-align: middle;`
			`}`
Restore header for narrow width edit and standardize position 2015-03-24 00:52:18 +00:00			`h2 {`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`display: none;`
			`}`
Adjust display of name/enabled when in a narrow window 2015-03-24 00:25:39 +00:00			`#basic-info {`
			`display: flex;`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`align-items: baseline;`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`}`
Adjust display of name/enabled when in a narrow window 2015-03-24 00:25:39 +00:00			`#basic-info > * {`
			`flex: auto;`
			`}`
			`#basic-info > *:first-child {`
			`flex-grow: 99;`
			`display: flex;`
			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`#basic-info > *:not(:last-child) {`
			`margin-right: 0.8rem;`
			`}`
Adjust display of name/enabled when in a narrow window 2015-03-24 00:25:39 +00:00			`#basic-info #name {`
			`width: auto;`
			`flex-grow: 99;`
			`}`
			`#actions {`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`margin-top: 1rem;`
Adjust display of name/enabled when in a narrow window 2015-03-24 00:25:39 +00:00			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`#actions > * {`
			`display: inline-block;`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`}`
			`#options {`
Use columns instead of flex for narrow-width options 2015-03-24 00:39:21 +00:00			`-webkit-column-count: 2;`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`#options .aligned > * {`
			`margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */`
			`padding-right: 0.4rem;`
			`vertical-align: baseline;`
			`min-height: 1.4rem;`
			`}`
Use columns instead of flex for narrow-width options 2015-03-24 00:39:21 +00:00			`.option {`
			`-webkit-column-break-inside: avoid;`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`}`
Use columns instead of flex for narrow-width options 2015-03-24 00:39:21 +00:00			`.option label {`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`line-height: 1.25rem;`
Use columns instead of flex for narrow-width options 2015-03-24 00:39:21 +00:00			`margin: 0;`
Added responsive design for editor Fixes #28 It's not perfect, but it should work well. Suggestions welcome. 2015-02-18 15:57:33 +00:00			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`#options [type="number"] {`
			`text-align: left; /* workaround the column flow bug in webkit */`
			`padding-left: 0.2rem;`
			`}`
			`#options #tabSize-label {`
			`position: relative;`
			`top: 0.2rem;`
			`}`
Added responsive design for editor Fixes #28 It's not perfect, but it should work well. Suggestions welcome. 2015-02-18 15:57:33 +00:00			`#sections {`
HTML fixes: close a tag, replace 0px with 0 2015-03-15 03:35:30 +00:00			`padding-left: 0;`
Updated responsive design Fixed everything that wasn't lined up properly and shrinked some paddings to make more space for the editor. It also cuts off earlier now. Not sure what to do with the section borders, they seem alright to me. 2015-02-19 17:29:57 +00:00			`}`
Made the CodeMirror area wider, more fixes Sorry, forgot some things. Now it should be right. 2015-02-19 17:42:34 +00:00			`#sections > div {`
HTML fixes: close a tag, replace 0px with 0 2015-03-15 03:35:30 +00:00			`padding: 0;`
Made the CodeMirror area wider, more fixes Sorry, forgot some things. Now it should be right. 2015-02-19 17:42:34 +00:00			`}`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`#sections > *:not(h2) {`
			`padding-left: 0.4rem;`
Updated responsive design Fixed everything that wasn't lined up properly and shrinked some paddings to make more space for the editor. It also cuts off earlier now. Not sure what to do with the section borders, they seem alright to me. 2015-02-19 17:29:57 +00:00			`}`
Add editor options (1) Add UI controls for `keyMap`, `tabSize`, `indentWithTabs`, and `lineWrapping`; `indentUnit` tracks `tabSize`. (2) Dispatch `change` events from `loadPrefs` to initialize CM options from the controls' event listener. (3) Move stock options from the `CM.fromTextArea` call into `CM.defaults`. Add `CM.setOption` method, analogous to the instance method, which updates `CM.defaults` and sets the option in all instances; add `CM.getOption` which simply returns `CM.defaults[option]`. (4) Move the new editor functions into `CM.commands` and replace the functions with commands. 2015-03-08 06:21:43 +00:00			`}`
Unix line endings 2015-02-09 03:32:06 +00:00			`</style>`
Add option for smart indentation in editor 2015-02-09 04:02:08 +00:00			`<script src="storage.js"></script>`
			`<script src="messaging.js"></script>`
Unix line endings 2015-02-09 03:32:06 +00:00			`<script src="localization.js"></script>`
Apply styles to Stylish pages 2015-02-09 04:25:35 +00:00			`<script src="apply.js"></script>`
Unix line endings 2015-02-09 03:32:06 +00:00			`</head>`
			`<body id="stylish-edit">`
			`<div id="header">`
			`<h1 id="heading"></h1>`
			`<section id="basic-info">`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`<div id="basic-info-name">`
			`<input id="name" class="style-contributor">`
			`</div>`
			`<div id="basic-info-enabled">`
			`<input type="checkbox" id="enabled" class="style-contributor">`
			`<label for="enabled" id="enabled-label"></label>`
			`</div>`
Unix line endings 2015-02-09 03:32:06 +00:00			`</section>`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`<section id="actions">`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`<div><button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"></div>`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`<a href="manage.html"><button id="cancel-button"></button></a>`
Editor: webkit columns bug workaround; better alignment; rem units 2015-03-24 02:55:16 +00:00			`<button id="save-button" title="Ctrl-S"></button>`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`</section>`
			`<section id="options">`
Add option for smart indentation in editor 2015-02-09 04:02:08 +00:00			`<h2 id="options-heading"></h2>`
Editor: de-tablify options, support for responsive layout 2015-03-20 09:28:00 +00:00			`<div class="option">`
			`<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">`
			`<label id="lineWrapping-label" for="editor.lineWrapping"></label>`
			`</div>`
			`<div class="option">`
			`<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">`
			`<label id="smartIndent-label" for="editor.smartIndent"></label>`
			`</div>`
			`<div class="option">`
			`<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">`
			`<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>`
			`</div>`
			`<div class="option aligned">`
			`<label id="tabSize-label" for="editor.tabSize"></label>`
			`<input data-option="tabSize" id="editor.tabSize" type="number" min="0">`
			`</div>`
			`<div class="option aligned">`
			`<label id="keyMap-label" for="editor.keyMap"></label>`
			`<select data-option="keyMap" id="editor.keyMap"></select>`
			`</div>`
			`</section>`
Unix line endings 2015-02-09 03:32:06 +00:00			`</div>`
			`<section id="sections">`
			`<h2><span id="sections-heading"></span> <img id="sections-help" src="help.png"></h2>`
			`</section>`
			`<script src="edit.js"></script>`
			`</body>`
			`</html>`