Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
HTML Editor Proof of Concept
- Loading branch information
1 parent
a5fd563
commit 6dbcac6
Showing
165 changed files
with
21,506 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,389 @@ | ||
|
||
body { | ||
font-family: Lucida Grande, Lucida Sans, Arial, Helvetica, sans-serif; | ||
font-size: 100%; | ||
background-color: #EEE; | ||
} | ||
h1 { | ||
font-size: 2em; | ||
font-weight: normal; | ||
margin: 1em 0 0.75em; | ||
page-break-after: avoid; | ||
} | ||
h2 { | ||
color: navy; | ||
font-size: 1.2em; | ||
font-weight: bold; | ||
margin: 1.25em 0 0.75em; | ||
page-break-after: avoid; | ||
} | ||
h3 { | ||
font-size: 1.2em; | ||
font-weight: bold; | ||
margin: 0 0 1ex; | ||
white-space: nowrap; | ||
page-break-after: avoid; | ||
} | ||
p { | ||
margin: 1ex 0; | ||
} | ||
|
||
code { | ||
font-size: 1.1em; | ||
margin: 0; | ||
} | ||
pre { | ||
margin: 1em 0 1em 1em; | ||
} | ||
|
||
ul { | ||
padding: 0; | ||
padding-bottom: 20px; /* give whitespace at bottom for FF */ | ||
margin: 0; | ||
list-style-type: square; | ||
} | ||
li { | ||
padding: 0; | ||
margin: 0; | ||
margin: 0.5ex 0 0.5ex 1.2em; | ||
} | ||
|
||
table { | ||
border-color: #666; | ||
} | ||
th { | ||
background-color: #EEE; | ||
padding: 4px 7px 5px; | ||
border-color: #666; | ||
text-align: left; | ||
} | ||
td { | ||
padding: 2px 7px 3px; | ||
border-color: #666 #CCC; | ||
vertical-align: top; | ||
} | ||
|
||
|
||
/* | ||
* COMMON LAYOUT PANE FORMATTING | ||
*/ | ||
.pane , /* outer pane class */ | ||
.ui-layout-pane { /* inner pane class */ | ||
background-color: #FFF; | ||
border: 1px solid #777; | ||
padding: 0;/* alignment & padding is on the inner-divs */ | ||
overflow: auto; /* will be auto-set to 'hidden' for any pane with a 'scrolling content div' */ | ||
} | ||
|
||
|
||
/* | ||
* OUTER-LAYOUT PANE FORMATTING | ||
*/ | ||
.pane-north , | ||
.pane-south , | ||
.pane-west , | ||
.pane-east { | ||
overflow: hidden; | ||
} | ||
.pane-north { | ||
border-bottom: none; | ||
} | ||
.pane-north .content , | ||
.pane-south .content { | ||
text-align: center; | ||
} | ||
.pane-center { | ||
/* show off the inner-layout inside the outer-center-pane*/ | ||
background-color: #F6F6F6; | ||
padding: 15px; /* for outer layout */ | ||
} | ||
|
||
/* inner divs inside Outer East/West panes */ | ||
.header { | ||
background: #80ade5 url(../img/80ade5_40x100_textures_04_highlight_hard_100.png) 0 50% repeat-x; | ||
border-bottom: 1px solid #777; | ||
font-weight: bold; | ||
text-align: center; | ||
padding: 2px 0 4px; | ||
position: relative; | ||
overflow: hidden; | ||
} | ||
.subhead , | ||
.footer { | ||
background: #d6d6d6 url(../img/d6d6d6_40x100_textures_02_glass_80.png) 0 50% repeat-x; | ||
padding: 3px 10px; | ||
font-size: 0.85em; | ||
position: relative; | ||
overflow: hidden; | ||
white-space: nowrap; | ||
} | ||
.subhead { border-bottom: 1px solid #777; } | ||
.footer { border-top: 1px solid #777; } | ||
#mainContent .footer { border-top: 1px solid #BBB; } | ||
.content { | ||
padding: 10px; | ||
position: relative; | ||
overflow: auto; | ||
} | ||
|
||
|
||
/* | ||
* INNER-LAYOUT PANE FORMATTING | ||
*/ | ||
|
||
#mainContent .ui-layout-pane { | ||
padding: 10px; | ||
} | ||
#mainContent .ui-layout-north , | ||
#mainContent .ui-layout-south { | ||
text-align: center; | ||
} | ||
#mainContent .ui-layout-center { | ||
padding: 0 !important; /* inner divs have padding */ | ||
} | ||
#mainContent .ui-layout-content { | ||
padding: 10px; | ||
} | ||
#mainContent .ui-layout-center h3 { | ||
font-size: 1em; | ||
padding: 5px; | ||
margin: 0; | ||
} | ||
|
||
|
||
/* | ||
* OUTER LAYOUT RESIZERS & TOGGLERS | ||
*/ | ||
|
||
/* north-pane is not resizable | ||
.resizer-north-dragging , | ||
.resizer-north:hover { background: url(../img/resizable-n.gif) repeat-x center; }*/ | ||
.resizer-south-dragging , | ||
.resizer-south:hover { background: url(../img/resizable-s.gif) repeat-x center; } | ||
|
||
.resizer-west-dragging , | ||
.resizer-west-open:hover { background: url(../img/resizable-w.gif) repeat-y center; } | ||
.resizer-east-dragging , | ||
.resizer-east-open:hover { background: url(../img/resizable-e.gif) repeat-y center; } | ||
|
||
.resizer-west-open , | ||
.resizer-east-open { | ||
background-color: #999; | ||
opacity: 0.1; | ||
filter: alpha(opacity=10); | ||
} | ||
.resizer-west-open:hover , | ||
.resizer-east-open:hover { | ||
opacity: 1; | ||
filter: alpha(opacity=100); | ||
} | ||
.resizer-dragging { | ||
/* see draggable.opacity option | ||
opacity: 0.5; | ||
filter: alpha(opacity=50); | ||
*/ | ||
} | ||
.resizer-dragging-limit { background: #FF3300 !important; } | ||
|
||
/* IE6 * HACK - always show resizer graphics because IE6 cannot understand elem:hover */ | ||
/** html .resizer-north { background: url(../img/resizable-n.gif) repeat-x center !important; } */ | ||
* html .resizer-south { background: url(../img/resizable-s.gif) repeat-x center !important; } | ||
* html .resizer-west-open { background: url(../img/resizable-w.gif) repeat-y center !important; } | ||
* html .resizer-east-open { background: url(../img/resizable-e.gif) repeat-y center !important; } | ||
/** html .resizer-north , */ | ||
* html .resizer-south , | ||
* html .resizer-west-open , | ||
* html .resizer-east-open { | ||
opacity: 0.1 !important; | ||
filter: alpha(opacity=10) !important; | ||
} | ||
|
||
/* | ||
* SIMPLE TOGGLER BUTTONS (used on Outer Layout North/South only) | ||
*/ | ||
|
||
.toggler-north-open , | ||
.toggler-south-closed { background: url(../img/toggle-up.gif) no-repeat center bottom; } | ||
.toggler-north-closed , | ||
.toggler-south-open { background: url(../img/toggle-dn.gif) no-repeat center top; } | ||
/* | ||
.toggler-east-closed , | ||
.toggler-west-open { background: url(../img/toggle-lt.gif) no-repeat center right; } | ||
.toggler-west-closed , | ||
.toggler-east-open { background: url(../img/toggle-rt.gif) no-repeat center left; } | ||
*/ | ||
|
||
/* | ||
* extJS-STYLE RESIZER/SLIDER-BAR (CLOSED) | ||
*/ | ||
.resizer-west-closed , | ||
.resizer-east-closed { | ||
background: #D1E6FC url(../img/D1E6FC_40x100_textures_10_dots_medium_90.png) 0 0 repeat; | ||
border-top: 1px solid #777; | ||
border-bottom: 1px solid #777; | ||
} | ||
.resizer-west-closed:hover , | ||
.resizer-east-closed:hover { | ||
background: #D1E6FC; | ||
} | ||
|
||
/* | ||
* NORTH PANE TOOLBAR & BUTTONS | ||
*/ | ||
|
||
ul.toolbar { | ||
position: relative; | ||
overflow: hidden; /* required to CONTAINER 'floating li' in FF */ | ||
height: auto; | ||
margin: 0; | ||
padding: 2px; | ||
width: 100%; | ||
list-style: none; | ||
text-align: left; | ||
background: #D6D6D6 url(../img/d6d6d6_40x100_textures_02_glass_80.png) 0 50% repeat-x; | ||
border-top: 1px solid #BBB; | ||
} | ||
ul.toolbar li { | ||
font-size: 0.9em; | ||
margin: 0; | ||
padding: 2px 7px; | ||
float: left; | ||
color: #000; | ||
border: 1px solid transparent; | ||
border-right-color: #BBB; | ||
cursor: pointer; | ||
} | ||
ul.toolbar li:hover { | ||
color: #005; | ||
background: #EEE url(../img/eeeeee_40x100_textures_02_glass_90.png) 0 50% repeat-x; | ||
border-top-color: #BBB; | ||
border-bottom-color: #BBB; | ||
} | ||
ul.toolbar li.first:hover { | ||
border-left-color: #BBB; | ||
} | ||
ul.toolbar li span { | ||
/* icons in toolbar */ | ||
width: 15px; | ||
height: 15px; | ||
margin-left: -3px; | ||
margin-right: 0.75ex; | ||
vertical-align: middle; | ||
opacity: 0.6; | ||
filter: alpha(opacity=60); | ||
display: block; | ||
display: inline-block; | ||
} | ||
ul.toolbar li:hover span { | ||
opacity: 1; | ||
filter: alpha(opacity=100); | ||
} | ||
li.button-toggle-north span , | ||
li.button-open-south span { background: url(../img/go-up-on.gif) no-repeat center; } | ||
li.button-close-south span { background: url(../img/go-dn-on.gif) no-repeat center; } | ||
li.button-pin-up span { background: url(../img/pin-up-on.gif) no-repeat center; } | ||
li.button-pin-down span { background: url(../img/pin-dn-on.gif) no-repeat center; } | ||
|
||
/* | ||
* extJS-STYLE TOGGLE & PIN BUTTONS | ||
* | ||
* these 'extra buttons' are INSIDE the east/west panes | ||
*/ | ||
|
||
/* CUSTOM pin/close buttons */ | ||
span.button-pin , | ||
span.button-close { | ||
position: absolute; | ||
top: 0; | ||
width: 20px; | ||
height: 20px; | ||
z-index: 2; | ||
display: block; | ||
cursor: pointer; | ||
} | ||
span.button-close-west { left: 0; } | ||
span.button-close-east { right: 0; } | ||
span.button-pin-west { right: 1px; } | ||
span.button-pin-east { left: 1px; } | ||
|
||
/* CUSTOM pin-buttons */ | ||
span.button-pin-up { background: url(../img/pin-up-off.gif) no-repeat center; } | ||
span.button-pin-up:hover { background: url(../img/pin-up-on.gif) no-repeat center; } | ||
span.button-pin-down { background: url(../img/pin-dn-off.gif) no-repeat center; } | ||
span.button-pin-down:hover { background: url(../img/pin-dn-on.gif) no-repeat center; } | ||
|
||
/* CUSTOM close-buttons */ | ||
span.button-close-west { background: url(../img/go-lt-off.gif) no-repeat center; } | ||
span.button-close-west:hover { background: url(../img/go-lt-on.gif) no-repeat center; } | ||
span.button-close-east { background: url(../img/go-rt-off.gif) no-repeat center; } | ||
span.button-close-east:hover { background: url(../img/go-rt-on.gif) no-repeat center; } | ||
|
||
/* STANDARD toggler-buttons - when the east/west panes are 'closed' */ | ||
.toggler-west-closed { background: url(../img/go-rt-off.gif) no-repeat center; } | ||
.toggler-west-closed:hover { background: url(../img/go-rt-on.gif) no-repeat center; } | ||
.toggler-east-closed { background: url(../img/go-lt-off.gif) no-repeat center; } | ||
.toggler-east-closed:hover { background: url(../img/go-lt-on.gif) no-repeat center; } | ||
|
||
|
||
/* | ||
* INNER LAYOUT RESIZERS & TOGGLERS | ||
* | ||
* These styles target 'children of center pane', so only affect the Inner Layout | ||
* This layout has applyDefaultCSS=true, so use !important to override defaults | ||
*/ | ||
|
||
#mainContent .ui-layout-resizer-closed:hover { background: #FFEDCA !important; } | ||
#mainContent .ui-layout-resizer-open:hover , | ||
#mainContent .ui-layout-resizer-dragging { background: #C4E1A4 !important; } | ||
#mainContent .ui-layout-resizer-dragging-limit { background: #FF3300 !important; } | ||
|
||
#mainContent .ui-layout-resizer-north , | ||
#mainContent .ui-layout-resizer-south { border-left: 1px solid #BBB !important; | ||
border-right: 1px solid #BBB !important; } | ||
#mainContent .ui-layout-resizer-north-closed{ border-top: 1px solid #BBB !important; } | ||
#mainContent .ui-layout-resizer-south-closed{ border-bottom:1px solid #BBB !important; } | ||
#mainContent .ui-layout-resizer-west-closed { border-left: 1px solid #BBB !important; } | ||
#mainContent .ui-layout-resizer-east-closed { border-right: 1px solid #BBB !important; } | ||
|
||
#mainContent .ui-layout-resizer:hover .ui-layout-toggler { | ||
opacity: 0.4; | ||
filter: alpha(opacity=40); | ||
} | ||
#mainContent .ui-layout-resizer:hover .ui-layout-toggler:hover { | ||
opacity: 1; | ||
filter: alpha(opacity=100); | ||
background: #FD9 !important; | ||
border-color: #CB7 !important; | ||
} | ||
|
||
#mainContent .ui-layout-resizer-sliding { | ||
opacity: 0.3; | ||
filter: alpha(opacity=30); | ||
} | ||
#mainContent .ui-layout-resizer-sliding:hover { | ||
opacity: 1; | ||
filter: alpha(opacity=100); | ||
} | ||
#mainContent .ui-layout-resizer-sliding .ui-layout-toggler { | ||
display: none !important; | ||
} | ||
#mainContent .ui-layout-resizer-sliding:hover .ui-layout-toggler { | ||
display: block !important; | ||
} | ||
|
||
/* XERTE ADDITIONS */ | ||
div.ui-layout-north div.content { | ||
background-image:url(../img/TopBar.jpg); | ||
background-repeat:repeat-x; | ||
margin:0 auto; | ||
width:100%; | ||
padding:0; | ||
margin:0; | ||
} | ||
div.ui-layout-north div.content img { | ||
margin:0 15px 0 15px; | ||
} | ||
div.ui-layout-west div.header { | ||
padding: 0; | ||
margin: 0; | ||
} |
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.