2015-02-09 03:32:06 +00:00
< html >
< head >
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 >
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 >
2015-05-27 18:01:05 +00:00
< script src = "codemirror/addon/selection/active-line.js" > < / script >
2015-02-25 04:05:00 +00:00
< 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 >
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 >
2015-03-05 06:39:09 +00:00
< script src = "codemirror/keymap/sublime.js" > < / script >
2015-04-23 01:53:30 +00:00
< script src = "codemirror/keymap/emacs.js" > < / script >
< script src = "codemirror/keymap/vim.js" > < / script >
2015-03-05 06:39:09 +00:00
2015-02-09 03:32:06 +00:00
< style type = "text/css" >
2015-02-25 04:05:00 +00:00
2015-02-09 03:32:06 +00:00
body {
2015-03-15 03:35:30 +00:00
margin: 0;
2015-03-24 02:55:16 +00:00
font: 9pt arial,sans-serif;
2015-02-09 03:32:06 +00:00
}
2015-03-24 02:55:16 +00:00
/************ header ************/
2015-02-09 03:32:06 +00:00
#header {
height: 100%;
2015-03-24 02:55:16 +00:00
width: 15rem;
2015-02-09 03:32:06 +00:00
position: fixed;
2015-03-15 03:35:30 +00:00
top: 0;
2015-03-24 02:55:16 +00:00
padding: 0.95rem;
2015-02-09 03:32:06 +00:00
border-right: 1px dashed #AAA;
2015-03-24 02:55:16 +00:00
-webkit-box-shadow: 0 0 3rem -1.2rem black;
2015-02-09 03:32:06 +00:00
}
2015-03-24 00:52:18 +00:00
#header h1 {
margin-top: 0;
}
2015-02-09 03:32:06 +00:00
#sections {
2015-03-24 02:55:16 +00:00
padding-left: 18rem;
2015-02-09 03:32:06 +00:00
}
2015-02-09 04:02:08 +00:00
#sections h2 {
2015-03-24 02:55:16 +00:00
margin-top: 0.5rem;
2015-02-09 03:32:06 +00:00
}
2015-03-24 02:55:16 +00:00
.aligned {
display: table-row;
}
2015-04-26 12:34:59 +00:00
.aligned > *:not(img) {
2015-03-24 02:55:16 +00:00
display: table-cell;
margin-top: 0.1rem;
min-height: 1.4rem;
}
2015-04-26 12:34:59 +00:00
img[src="help.png"] {
cursor: pointer;
vertical-align: middle;
margin-left: 0.2rem;
}
2015-03-24 02:55:16 +00:00
input[type="checkbox"] {
margin-left: 0.1rem;
}
/* basic info */
2015-02-09 03:32:06 +00:00
#basic-info {
2015-03-24 02:55:16 +00:00
margin-bottom: 1rem;
2015-02-09 03:32:06 +00:00
}
#name {
2015-03-24 02:55:16 +00:00
width: 100%;
}
2015-05-15 16:46:21 +00:00
#basic-info-name {
display: flex;
align-items: center;
}
#url {
margin-left: 0.25rem;
}
#url:not([href^="http"]) {
display: none;
}
2015-03-24 02:55:16 +00:00
#enabled {
margin-left: 0;
vertical-align: middle;
}
#enabled-label {
vertical-align: middle;
}
/* actions */
#actions > * {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
/* options */
#options [type="number"] {
max-width: 2.5rem;
text-align: right;
}
#options .option > * {
padding-right: 0.25rem;
}
/************ content ***********/
2015-02-09 03:32:06 +00:00
#sections > div {
2015-03-24 02:55:16 +00:00
margin: 0.7rem;
padding: 1rem;
2015-02-09 03:32:06 +00:00
}
2015-03-24 00:25:39 +00:00
#sections > div:not(:first-of-type) {
2015-02-09 03:32:06 +00:00
border-top: 2px solid black;
}
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;
}
2015-03-10 15:45:13 +00:00
.dirty > label::before {
content: "*";
font-weight: bold;
}
2015-03-24 02:55:16 +00:00
/* code */
2015-02-09 03:32:06 +00:00
.code {
2015-03-24 02:55:16 +00:00
height: 10rem;
width: 40rem;
2015-02-09 03:32:06 +00:00
}
2015-02-09 04:02:08 +00:00
.CodeMirror {
border: solid #CCC 1px;
}
2015-03-24 02:55:16 +00:00
.CodeMirror-lint-mark-warning {
background: none;
}
2015-03-25 13:08:28 +00:00
.CodeMirror-vscrollbar {
margin-bottom: 8px; /* make space for resize-grip */
}
2015-04-23 01:53:30 +00:00
.CodeMirror-search-field, .CodeMirror-jump-field {
2015-03-26 07:11:18 +00:00
-webkit-animation: highlight 3s ease-out;
}
2015-04-08 17:11:22 +00:00
.CodeMirror-focused {
outline: -webkit-focus-ring-color auto 5px;
outline-offset: -2px;
}
2015-03-26 07:11:18 +00:00
@-webkit-keyframes highlight {
from {
background-color: #ff9;
}
to {
background-color: transparent;
}
}
2015-03-25 13:08:28 +00:00
.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);
}
2015-03-24 02:55:16 +00:00
/* applies-to */
2015-02-28 18:40:05 +00:00
.applies-to {
display: flex;
}
.applies-to label {
flex: auto;
2015-03-24 02:55:16 +00:00
margin-top: 0.2rem;
2015-02-28 18:40:05 +00:00
}
2015-02-09 03:32:06 +00:00
.applies-to ul {
2015-02-28 18:40:05 +00:00
flex: auto;
flex-grow: 99;
2015-02-09 03:32:06 +00:00
margin: 0;
2015-02-28 18:40:05 +00:00
padding: 0;
2015-02-09 03:32:06 +00:00
}
.applies-to li {
2015-02-28 18:40:05 +00:00
display: flex;
2015-02-09 03:32:06 +00:00
list-style-type: none;
2015-02-28 18:40:05 +00:00
align-items: center;
2015-03-24 02:55:16 +00:00
margin-bottom: 0.35rem;
2015-02-28 18:40:05 +00:00
}
2015-03-23 19:38:03 +00:00
.applies-to li > *:not(button) {
2015-02-28 18:40:05 +00:00
flex: auto;
2015-03-24 02:55:16 +00:00
min-height: 1.4rem;
margin-left: 0.35rem;
2015-02-09 03:32:06 +00:00
}
.applies-to li .add-applies-to {
2015-02-28 18:40:05 +00:00
visibility: hidden;
text-align: left;
2015-02-09 03:32:06 +00:00
}
.applies-to li:last-child .add-applies-to {
2015-02-28 18:40:05 +00:00
visibility: visible
}
.applies-to li .add-applies-to:first-child {
2015-03-24 02:55:16 +00:00
margin-left: 1rem;
2015-02-28 18:40:05 +00:00
}
.applies-to li .applies-value {
flex-grow: 99;
2015-03-24 02:55:16 +00:00
padding-left: 0.2rem;
2015-02-09 03:32:06 +00:00
}
.applies-to img {
vertical-align: bottom;
}
2015-04-26 12:34:59 +00:00
/************ help popup ************/
#help-popup {
top: 3rem;
right: 3rem;
max-width: 50vw;
position: fixed;
display: none;
background-color: white;
box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
padding: 0.5rem;
z-index: 9999;
}
#help-popup .title {
font-weight: bold;
background-color: rgba(0,0,0,0.05);
margin: -0.5rem -0.5rem 0.5rem;
padding: 0.5rem;
}
#help-popup .contents {
max-height: calc(100vh - 8rem);
overflow-y: auto;
}
#help-popup .close-icon {
cursor: pointer;
width: 8px;
height: 8px;
position: absolute;
right: 0.5rem;
top: 0.75rem;
background: linear-gradient(-45deg, transparent 5px, black 5px, black 6px, transparent 6.5px), linear-gradient(45deg, transparent 5px, black 5px, black 6px, transparent 6.5px);
}
.keymap-list {
font-size: 85%;
line-height: 1.0;
border-spacing: 0;
word-break: break-all;
}
.keymap-list input {
width: 100%;
}
.keymap-list tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.07);
}
.keymap-list td:first-child {
white-space: nowrap;
font-family: monospace;
padding-right: 0.5rem;
}
2015-03-24 00:39:21 +00:00
2015-03-24 02:55:16 +00:00
/************ reponsive layouts ************/
2015-02-19 17:29:57 +00:00
@media(max-width:737px) {
2015-02-18 15:57:33 +00:00
#header {
2015-03-24 02:55:16 +00:00
width: auto;
2015-02-18 15:57:33 +00:00
height: auto;
position: inherit;
2015-02-19 17:29:57 +00:00
border-right: none;
2015-03-24 02:55:16 +00:00
border-bottom: 1px dashed #AAA;
2015-03-20 09:28:00 +00:00
}
2015-03-24 02:55:16 +00:00
#header section:not(:last-child) {
margin-bottom: 0.4rem;
2015-03-20 09:28:00 +00:00
}
#header input[type="checkbox"] {
vertical-align: middle;
}
2015-03-24 00:52:18 +00:00
h2 {
2015-03-20 09:28:00 +00:00
display: none;
}
2015-03-24 00:25:39 +00:00
#basic-info {
display: flex;
2015-03-24 02:55:16 +00:00
align-items: baseline;
2015-03-20 09:28:00 +00:00
}
2015-03-24 00:25:39 +00:00
#basic-info > * {
flex: auto;
}
#basic-info > *:first-child {
flex-grow: 99;
display: flex;
}
2015-03-24 02:55:16 +00:00
#basic-info > *:not(:last-child) {
margin-right: 0.8rem;
}
2015-03-24 00:25:39 +00:00
#basic-info #name {
width: auto;
flex-grow: 99;
}
#actions {
2015-03-24 02:55:16 +00:00
margin-top: 1rem;
2015-03-24 00:25:39 +00:00
}
2015-03-24 02:55:16 +00:00
#actions > * {
display: inline-block;
2015-03-20 09:28:00 +00:00
}
#options {
2015-03-24 00:39:21 +00:00
-webkit-column-count: 2;
2015-03-20 09:28:00 +00:00
}
2015-04-26 12:34:59 +00:00
#options .aligned > *:not(img) {
2015-03-24 02:55:16 +00:00
margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */
padding-right: 0.4rem;
vertical-align: baseline;
min-height: 1.4rem;
}
2015-03-24 00:39:21 +00:00
.option {
-webkit-column-break-inside: avoid;
2015-03-20 09:28:00 +00:00
}
2015-03-24 00:39:21 +00:00
.option label {
2015-03-24 02:55:16 +00:00
line-height: 1.25rem;
2015-03-24 00:39:21 +00:00
margin: 0;
2015-02-18 15:57:33 +00:00
}
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;
}
2015-02-18 15:57:33 +00:00
#sections {
2015-03-15 03:35:30 +00:00
padding-left: 0;
2015-02-19 17:29:57 +00:00
}
2015-02-19 17:42:34 +00:00
#sections > div {
2015-03-15 03:35:30 +00:00
padding: 0;
2015-02-19 17:42:34 +00:00
}
2015-03-24 02:55:16 +00:00
#sections > *:not(h2) {
padding-left: 0.4rem;
2015-02-19 17:29:57 +00:00
}
2015-04-11 10:28:25 +00:00
.applies-type {
width: 30%;
}
}
@media(max-width:500px) {
#options {
-webkit-column-count: 1;
}
#options #tabSize-label {
position: static;
}
2015-03-08 06:21:43 +00:00
}
2015-02-09 03:32:06 +00:00
< / style >
2015-04-11 10:28:25 +00:00
< link id = "cm-theme" rel = "stylesheet" >
2015-02-09 04:02:08 +00:00
< script src = "storage.js" > < / script >
< script src = "messaging.js" > < / script >
2015-02-09 03:32:06 +00:00
< script src = "localization.js" > < / script >
2015-02-09 04:25:35 +00:00
< script src = "apply.js" > < / script >
2015-04-11 10:28:25 +00:00
< script src = "edit.js" > < / script >
2015-02-09 03:32:06 +00:00
< / head >
< body id = "stylish-edit" >
< div id = "header" >
2015-03-27 10:30:07 +00:00
< h1 id = "heading" > < / h1 > <!-- nbsp allocates the actual height which prevents page shift -->
2015-02-09 03:32:06 +00:00
< section id = "basic-info" >
2015-03-24 02:55:16 +00:00
< div id = "basic-info-name" >
2015-03-27 10:30:07 +00:00
< input id = "name" class = "style-contributor" i18n-placeholder = "styleMissingName" >
2015-05-15 16:46:21 +00:00
< a id = "url" target = "_blank" > < img src = "world_go.png" > < / a >
2015-03-24 02:55:16 +00:00
< / div >
< div id = "basic-info-enabled" >
< input type = "checkbox" id = "enabled" class = "style-contributor" >
2015-03-27 10:30:07 +00:00
< label for = "enabled" id = "enabled-label" i18n-text = "styleEnabledLabel" > < / label >
2015-03-24 02:55:16 +00:00
< / div >
2015-02-09 03:32:06 +00:00
< / section >
2015-03-20 09:28:00 +00:00
< section id = "actions" >
2015-03-27 10:30:07 +00:00
< div > < button id = "to-mozilla" i18n-text = "styleToMozillaFormat" > < / button > < img id = "to-mozilla-help" src = "help.png" > < / div >
< div > < a href = "manage.html" > < button id = "cancel-button" i18n-text = "styleCancelEditLabel" > < / button > < / a > < / div >
< div > < button id = "save-button" title = "Ctrl-S" i18n-text = "styleSaveLabel" > < / button > < / div >
2015-03-20 09:28:00 +00:00
< / section >
< section id = "options" >
2015-03-27 10:30:07 +00:00
< h2 id = "options-heading" i18n-text = "optionsHeading" > < / h2 >
2015-03-20 09:28:00 +00:00
< div class = "option" >
< input data-option = "lineWrapping" id = "editor.lineWrapping" type = "checkbox" >
2015-03-27 10:30:07 +00:00
< label id = "lineWrapping-label" for = "editor.lineWrapping" i18n-text = "cm_lineWrapping" > < / label >
2015-03-20 09:28:00 +00:00
< / div >
< div class = "option" >
< input data-option = "smartIndent" id = "editor.smartIndent" type = "checkbox" >
2015-03-27 10:30:07 +00:00
< label id = "smartIndent-label" for = "editor.smartIndent" i18n-text = "cm_smartIndent" > < / label >
2015-03-20 09:28:00 +00:00
< / div >
< div class = "option" >
< input data-option = "indentWithTabs" id = "editor.indentWithTabs" type = "checkbox" >
2015-03-27 10:30:07 +00:00
< label id = "indentWithTabs-label" for = "editor.indentWithTabs" i18n-text = "cm_indentWithTabs" > < / label >
2015-03-20 09:28:00 +00:00
< / div >
< div class = "option aligned" >
2015-03-27 10:30:07 +00:00
< label id = "tabSize-label" for = "editor.tabSize" i18n-text = "cm_tabSize" > < / label >
2015-03-20 09:28:00 +00:00
< input data-option = "tabSize" id = "editor.tabSize" type = "number" min = "0" >
< / div >
< div class = "option aligned" >
2015-03-27 10:30:07 +00:00
< label id = "keyMap-label" for = "editor.keyMap" i18n-text = "cm_keyMap" > < / label >
2015-03-20 09:28:00 +00:00
< select data-option = "keyMap" id = "editor.keyMap" > < / select >
2015-04-26 12:34:59 +00:00
< img id = "keyMap-help" src = "help.png" i18n-alt = "helpAlt" >
2015-03-20 09:28:00 +00:00
< / div >
2015-04-11 10:28:25 +00:00
< div class = "option aligned" >
< label id = "theme-label" for = "editor.theme" i18n-text = "cm_theme" > < / label >
< select data-option = "theme" id = "editor.theme" > < / select >
< / div >
2015-03-20 09:28:00 +00:00
< / section >
2015-02-09 03:32:06 +00:00
< / div >
< section id = "sections" >
2015-03-27 10:30:07 +00:00
< h2 > < span id = "sections-heading" i18n-text = "styleSectionsTitle" > < / span > < img id = "sections-help" src = "help.png" i18n-alt = "helpAlt" > < / h2 >
2015-02-09 03:32:06 +00:00
< / section >
2015-04-26 12:34:59 +00:00
< div id = "help-popup" >
< div class = "title" > < / div > < div class = "close-icon" > < / div >
< div class = "contents" > < / div >
< / div >
2015-02-09 03:32:06 +00:00
< / body >
< / html >
