open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
7a72326f2f
stylus/edit.html

322 lines
8.0 KiB
HTML
Raw Normal View History

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;
}
Editor: add resize grip
2015-03-25 13:08:28 +00:00
.CodeMirror-vscrollbar {
margin-bottom: 8px; /* make space for resize-grip */
}
.resize-grip {
position: absolute;
display: block;
width: 8px;
height: 8px;
content: " ";
right: 0;
bottom: 0;
z-index: 99;
cursor: n-resize;
background: linear-gradient(-45deg, transparent 2px, rgba(0,0,0,0.5) 2px, transparent 3px, transparent 4.5px, rgba(0,0,0,0.5) 5px, transparent 5.5px);
}
Editor: webkit columns bug workaround; better alignment; rem units
2015-03-24 02:55:16 +00:00
/* 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>
Reference in New Issue Copy Permalink