Skip to content

UI refactoring #503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
drdla wants to merge 2 commits into from
Closed

UI refactoring #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f23e6a3
UI clean-up for pad and timeslider
Feb 25, 2012
443dd44
addendum to last commit
Feb 25, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added doc/photoshop_sources/editbar-sprite.psd
View file
Open in desktop
Binary file not shown.
Binary file added doc/photoshop_sources/timeslider-sprite.psd
View file
Open in desktop
Binary file not shown.
276 changes: 113 additions & 163 deletions static/css/iframe_editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,172 +1,122 @@

/* These CSS rules are included in both the outer and inner ACE iframe.
Also see inner.css, included only in the inner one.
/*
These CSS rules are included in both the outer and inner ACE iframe.
*/
html { cursor: text; } /* in Safari, produces text cursor for whole doc (inc. below body) */
span { cursor: auto; }

a { cursor: pointer !important; }

ul, ol, li {
padding: 0;
margin: 0;
}
ul { margin-left: 1.5em; }
ul ul { margin-left: 0 !important; }
ul.list-bullet1 { margin-left: 1.5em; }
ul.list-bullet2 { margin-left: 3em; }
ul.list-bullet3 { margin-left: 4.5em; }
ul.list-bullet4 { margin-left: 6em; }
ul.list-bullet5 { margin-left: 7.5em; }
ul.list-bullet6 { margin-left: 9em; }
ul.list-bullet7 { margin-left: 10.5em; }
ul.list-bullet8 { margin-left: 12em; }

ul { list-style-type: disc; }
ul.list-bullet1 { list-style-type: disc; }
ul.list-bullet2 { list-style-type: circle; }
ul.list-bullet3 { list-style-type: square; }
ul.list-bullet4 { list-style-type: disc; }
ul.list-bullet5 { list-style-type: circle; }
ul.list-bullet6 { list-style-type: square; }
ul.list-bullet7 { list-style-type: disc; }
ul.list-bullet8 { list-style-type: circle; }

ol.list-number1 { margin-left: 1.5em; }
ol.list-number2 { margin-left: 3em; }
ol.list-number3 { margin-left: 4.5em; }
ol.list-number4 { margin-left: 6em; }
ol.list-number5 { margin-left: 7.5em; }
ol.list-number6 { margin-left: 9em; }
ol.list-number7 { margin-left: 10.5em; }
ol.list-number8 { margin-left: 12em; }

ol { list-style-type: decimal; }
ol.list-number1 { list-style-type: decimal; }
ol.list-number2 { list-style-type: lower-latin; }
ol.list-number3 { list-style-type: lower-roman; }
ol.list-number4 { list-style-type: decimal; }
ol.list-number5 { list-style-type: lower-latin; }
ol.list-number6 { list-style-type: lower-roman; }
ol.list-number7 { list-style-type: decimal; }
ol.list-number8 { list-style-type: lower-latin; }

ul.list-indent1 { margin-left: 1.5em; }
ul.list-indent2 { margin-left: 3em; }
ul.list-indent3 { margin-left: 4.5em; }
ul.list-indent4 { margin-left: 6em; }
ul.list-indent5 { margin-left: 7.5em; }
ul.list-indent6 { margin-left: 9em; }
ul.list-indent7 { margin-left: 10.5em; }
ul.list-indent8 { margin-left: 12em; }

ul.list-indent1 { list-style-type: none; }
ul.list-indent2 { list-style-type: none; }
ul.list-indent3 { list-style-type: none; }
ul.list-indent4 { list-style-type: none; }
ul.list-indent5 { list-style-type: none; }
ul.list-indent6 { list-style-type: none; }
ul.list-indent7 { list-style-type: none; }
ul.list-indent8 { list-style-type: none; }

body {
margin: 0;
white-space: nowrap;
}

#outerdocbody {
background-color: #fff;
}
body.grayedout { background-color: #eee !important }
/* LAYOUT ##################################################################### */
HTML {cursor:text;} /* in Safari, produces text cursor for whole doc (inc. below body) */
BODY {margin:0; white-space:nowrap;}
BODY.doesWrap {display:block; white-space:normal;}
BODY.grayedout {background-color:#eee !important;}
BODY.mozilla, BODY.safari {display:table-cell;} /* cause BODY area (i.e. where clicks are listened to) to grow horizontally with text */

#outerdocbody {background-color:#fff;}
#outerdocbody IFRAME {
border:0 none;
display:block; /* codemirror says it suppresses bugs */
height:1px; /* changed programmatically */
left:32px; /* MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT */
position:relative;
top:7px; /* EDIT_BODY_PADDING_TOP - 1*/
width:1px; /* changed programmatically */
}
#outerdocbody .hotrect {border:1px solid #999; position:absolute;}

#innerdocbody {
font-size: 12px; /* overridden by body.style */
font-family: monospace; /* overridden by body.style */
line-height: 16px; /* overridden by body.style */
}

body.doesWrap {
white-space: normal;
}

#innerdocbody {
padding-top: 1px; /* important for some reason? */
padding-right: 10px;
padding-bottom: 8px;
padding-left: 1px /* prevents characters from looking chopped off in FF3 -- Removed because it added too much whitespace */;
overflow: hidden;
/* blank 1x1 gif, so that IE8 doesn't consider the body transparent */
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* blank 1x1 gif, so that IE8 doesn't consider the body transparent */
font-family:monospace; /* overridden by body.style */
font-size:12px; /* overridden by body.style */
line-height:16px; /* overridden by body.style */
overflow:hidden;
padding:1px 10px 8px 1px;
}

#sidediv {
font-size: 11px;
font-family: monospace;
line-height: 16px; /* overridden by sideDiv.style */
padding-top: 8px; /* EDIT_BODY_PADDING_TOP */
padding-right: 3px; /* LINE_NUMBER_PADDING_RIGHT - 1 */
position: absolute;
width: 20px; /* MIN_LINEDIV_WIDTH */
top: 0;
left: 0;
cursor: default;
color: white;
}

#sidedivinner {
text-align: right;
}

.sidedivdelayed { /* class set after sizes are set */
background-color: #eee;
color: #888 !important;
border-right: 1px solid #999;
}
.sidedivhidden {
display: none;
}

#outerdocbody iframe {
display: block; /* codemirror says it suppresses bugs */
position: relative;
left: 32px; /* MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT */
top: 7px; /* EDIT_BODY_PADDING_TOP - 1*/
border: 0;
width: 1px; /* changed programmatically */
height: 1px; /* changed programmatically */
}

#outerdocbody .hotrect {
border: 1px solid #999;
position: absolute;
}

/* cause "body" area (e.g. where clicks are heard) to grow horizontally with text */
body.mozilla, body.safari {
display: table-cell;
}

body.doesWrap {
display: block !important;
}

.safari div {
/* prevents the caret from disappearing on the longest line of the doc */
padding-right: 1px;
}

p {
margin: 0;
}
color:#fff;
cursor:default;
font-family:monospace;
font-size:11px;
left:0;
line-height:16px; /* overridden by sideDiv.style */
padding-right:4px; /* LINE_NUMBER_PADDING_RIGHT - 1 */
padding-top:8px; /* EDIT_BODY_PADDING_TOP */
position:absolute;
top:0;
width:20px; /* MIN_LINEDIV_WIDTH */
}
#sidedivinner {text-align:right;}
.sidedivdelayed {background-color:#eee; border-right:1px solid #d5d5d5; color:#aaa !important;}
.sidedivhidden {display:none;}

.safari DIV {padding-right:1px;} /* prevents the caret from disappearing on the longest line of the doc */

#linemetricsdiv {
position: absolute;
left: -1000px;
top: -1000px;
color: white;
z-index: -1;
font-size: 12px; /* overridden by lineMetricsDiv.style */
font-family: monospace; /* overridden by lineMetricsDiv.style */
}

#overlaysdiv { position: absolute; left: -1000px; top: -1000px; }
color:#fff;
font-family:monospace; /* overridden by lineMetricsDiv.style */
font-size:12px; /* overridden by lineMetricsDiv.style */
left:-1000px;
position:absolute;
top:-1000px;
z-index:-1;
}

#overlaysdiv {left:-1000px; position:absolute; top:-1000px;}


/* CONTENT STYLING ############################################################ */
P {margin:0;}

SPAN {cursor:auto;}

A {cursor:pointer !important;}

/* lists */
.list-bullet2, .list-indent2, .list-number2 {margin-left:3em;}
.list-bullet3, .list-indent3, .list-number3 {margin-left:4.5em;}
.list-bullet4, .list-indent4, .list-number4 {margin-left:6em;}
.list-bullet5, .list-indent5, .list-number5 {margin-left:7.5em;}
.list-bullet6, .list-indent6, .list-number6 {margin-left:9em;}
.list-bullet7, .list-indent7, .list-number7 {margin-left:10.5em;}
.list-bullet8, .list-indent8, .list-number8 {margin-left:12em;}

/* unordered lists */
UL {list-style-type:disc; margin-left:1.5em;}
UL UL {margin-left:0 !important;}

.list-bullet2, .list-bullet5, .list-bullet8 {list-style-type:circle;}
.list-bullet3, .list-bullet6 {list-style-type:square;}

.list-indent1, .list-indent2, .list-indent3, .list-indent5, .list-indent5, .list-indent6, .list-indent7, .list-indent8 {list-style-type:none;}

/* ordered lists */
OL {list-style-type:decimal; margin-left:1.5em;}
.list-number2, .list-number5, .list-number8 {list-style-type:lower-latin;}
.list-number3, .list-number6 {list-style-type:lower-roman;}

/* ---------- Used by JavaScript Lexer ---------- */
.syntax .c {color:#bd3f00; font-style:italic;} /* Comment */
.syntax .o {font-weight:700;} /* Operator */
.syntax .p {font-weight:700;} /* Punctuation */
.syntax .k {color:blue;} /* Keyword */
.syntax .kc {color:purple;} /* Keyword.Constant */
.syntax .nx {} /* Name.Other */
.syntax .mf {color:purple;} /* Literal.Number.Float */
.syntax .mh {color:purple;} /* Literal.Number.Hex */
.syntax .mi {color:purple;} /* Literal.Number.Integer */
.syntax .sr {color:purple;} /* Literal.String.Regex */
.syntax .s2 {color:purple;} /* Literal.String.Double */
.syntax .s1 {color:purple;} /* Literal.String.Single */
.syntax .sd {color:purple;} /* Literal.String.Doc */
.syntax .cs {color:#00aa33; font-weight:700; font-style:italic;} /* Comment.Special */
.syntax .err {color:#cc0000; font-weight:700; text-decoration:underline;} /* Error */

/* css syntax highlighting */
.syntax .nt {font-weight:700;} /* tag */
.syntax .nc {color:#336;} /* class */
.syntax .nf {color:#336;} /* id */
.syntax .nd {color:#999;} /* :foo */
.syntax .m {color:purple;} /* number */
.syntax .nb {color:purple;} /* built-in */
.syntax .cp {color:#bd3f00;} /* !important */

.syntax .flash {background-color:#adf !important;}
.syntax .flashbad {background-color:#f55 !important;}
Loading