From a0109c4933e0bfb5ed9dbcf94f932991ca689542 Mon Sep 17 00:00:00 2001 From: svncommit Date: Thu, 14 Sep 2006 03:49:28 +0000 Subject: Initial TinyMCE editor support (still need to work on spellcheck and skins) --- skins/default/editor_content.css | 58 +++++ skins/default/editor_popup.css | 327 ++++++++++++++++++++++++ skins/default/editor_ui.css | 353 ++++++++++++++++++++++++++ skins/default/templates/compose.html | 4 +- skins/default/templates/ldappublicsearch.html | 2 +- 5 files changed, 742 insertions(+), 2 deletions(-) create mode 100644 skins/default/editor_content.css create mode 100644 skins/default/editor_popup.css create mode 100644 skins/default/editor_ui.css (limited to 'skins/default') diff --git a/skins/default/editor_content.css b/skins/default/editor_content.css new file mode 100644 index 000000000..182e79121 --- /dev/null +++ b/skins/default/editor_content.css @@ -0,0 +1,58 @@ +/* This file contains the CSS data for the editable area(iframe) of TinyMCE */ +/* You can extend this CSS by adding your own CSS file with the the content_css option */ + +body, td, pre { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 10px; +} + +body { + background-color: #FFFFFF; +} + +.mceVisualAid { + border: 1px dashed #BBBBBB !important; +} + +div.mceVisualAid { + background-image:url('../images/spacer.gif'); + visibility: visible !important; +} + +.mceItemAnchor { + width: 12px; + line-height: 6px; + overflow: hidden; + padding-left: 12px; + background-image: url('../images/anchor_symbol.gif'); + background-position: bottom; + background-repeat: no-repeat; +} + +/* Important is needed in Gecko browsers inorder to style links */ +/* +a { + color: green !important; +} +*/ + +/* Style selection range colors in Gecko browsers */ +/* +::-moz-selection { + background-color: red; + color: green; +} +*/ + +/* MSIE specific */ + +* html body { + scrollbar-3dlight-color: #F0F0EE; + scrollbar-arrow-color: #676662; + scrollbar-base-color: #F0F0EE; + scrollbar-darkshadow-color: #DDDDDD; + scrollbar-face-color: #E0E0DD; + scrollbar-highlight-color: #F0F0EE; + scrollbar-shadow-color: #F0F0EE; + scrollbar-track-color: #F5F5F5; +} diff --git a/skins/default/editor_popup.css b/skins/default/editor_popup.css new file mode 100644 index 000000000..2bae9158a --- /dev/null +++ b/skins/default/editor_popup.css @@ -0,0 +1,327 @@ +/* This file contains the CSS data for all popups in TinyMCE */ + +body { + background-color: #F0F0EE; + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 11px; + scrollbar-3dlight-color: #F0F0EE; + scrollbar-arrow-color: #676662; + scrollbar-base-color: #F0F0EE; + scrollbar-darkshadow-color: #DDDDDD; + scrollbar-face-color: #E0E0DD; + scrollbar-highlight-color: #F0F0EE; + scrollbar-shadow-color: #F0F0EE; + scrollbar-track-color: #F5F5F5; + margin: 8px; +} + +td { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 11px; +} + +input { + background: #FFFFFF; + border: 1px solid #cccccc; +} + +td, input, select, textarea { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 10px; +} + +input, select, textarea { + border: 1px solid #808080; +} + +.input_noborder { + border: 0; +} + +#insert, .updateButton { + font-weight: bold; + width: 90px; + height: 21px; + border: 0; + background-image: url('../images/insert_button_bg.gif'); + cursor: pointer; +} + +#cancel { + font-weight: bold; + width: 90px; + height: 21px; + border: 0; + background-image: url('../images/cancel_button_bg.gif'); + cursor: pointer; +} + +/* Mozilla only style */ +html>body #insert, html>body #cancel { + padding-bottom: 2px; +} + +.title { + font-size: 12px; + font-weight: bold; + color: #2B6FB6; +} + +table.charmap { + border-style: solid; + border-width: 1px; + border-color: #AAAAAA; +} + +td.charmap, td.charmapOver { + color: #000000; + border-color: #AAAAAA; + border-style: solid; + border-width: 1px; + text-align: center; + font-size: 12px; +} + +td.charmapOver { + background-color: #CCCCCC; + cursor: default; +} + +a.charmap { + color: #000000; + text-decoration: none +} + +.wordWrapCode { + vertical-align: middle; + border: 1px none #000000; + background-color: transparent; +} + +input.radio { + border: 1px none #000000; + background-color: transparent; + vertical-align: middle; +} + +input.checkbox { + border: 1px none #000000; + background-color: transparent; + vertical-align: middle; +} + +.mceButtonNormal, .mceButtonOver, .mceButtonDown, .mceSeparator, .mceButtonDisabled, .mceButtonSelected { + margin-left: 1px; +} + +.mceButtonNormal { + border-top: 1px solid; + border-left: 1px solid; + border-bottom: 1px solid; + border-right: 1px solid; + border-color: #F0F0EE; + cursor: default; +} + +.mceButtonOver { + border: 1px solid #0A246A; + cursor: default; + background-color: #B6BDD2; +} + +.mceButtonDown { + cursor: default; + border: 1px solid #0A246A; + background-color: #8592B5; +} + +.mceButtonDisabled { + filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); + -moz-opacity:0.3; + opacity: 0.3; + border-top: 1px solid; + border-left: 1px solid; + border-bottom: 1px solid; + border-right: 1px solid; + border-color: #F0F0EE; + cursor: default; +} + +.mceActionPanel { + margin-top: 5px; +} + +/* Tabs classes */ + +.tabs { + float: left; + width: 100%; + line-height: normal; + background-image: url("../images/xp/tabs_bg.gif"); +} + +.tabs ul { + margin: 0; + padding: 0 0 0; + list-style: none; +} + +.tabs li { + float: left; + background: url("../images/xp/tab_bg.gif") no-repeat left top; + margin: 0; + margin-left: 0; + margin-right: 2px; + padding: 0 0 0 10px; + line-height: 18px; +} + +.tabs li.current { + background: url("../images/xp/tab_sel_bg.gif") no-repeat left top; + margin-right: 2px; +} + +.tabs span { + float: left; + display: block; + background: url("../images/xp/tab_end.gif") no-repeat right top; + padding: 0px 10px 0 0; +} + +.tabs .current span { + background: url("../images/xp/tab_sel_end.gif") no-repeat right top; +} + +.tabs a { + text-decoration: none; + font-family: Verdana, Arial; + font-size: 10px; +} + +.tabs a:link, .tabs a:visited, .tabs a:hover { + color: black; +} + +.tabs a:hover { +} + +.tabs .current { +} + +.tabs .current a, .tabs .current a:link, .tabs .current a:visited { +} + +.panel_wrapper div.panel { + display: none; +} + +.panel_wrapper div.current { + display: block; + width: 100%; + height: 300px; + overflow: visible; /* Should be auto but that breaks Safari */ +} + +.panel_wrapper { + border: 1px solid #919B9C; + border-top: 0px; + padding: 10px; + padding-top: 5px; + clear: both; + background-color: white; +} + +fieldset { + border: 1px solid #919B9C; + font-family: Verdana, Arial; + font-size: 10px; + padding: 0; + margin: 0; + padding: 4px; +} + +legend { + color: #2B6FB6; + font-weight: bold; +} + +.properties { + width: 100%; +} + +.properties .column1 { +} + +.properties .column2 { + text-align: left; +} + +a:link, a:visited { + color: black; +} + +a:hover { + color: #2B6FB6; +} + +#plugintable thead { + font-weight: bold; + background-color: #DDDDDD; +} + +#plugintable, #about #plugintable td { + border: 1px solid #919B9C; +} + +#plugintable { + width: 99%; + margin-top: 10px; +} + +#pluginscontainer { + height: 290px; + overflow: auto; +} + +/* MSIE Specific styles */ + +* html .panel_wrapper { + width: 100%; +} + +.column { + float: left; +} + +h1, h2, h3, h4 { + color: #2B6FB6; + margin: 0; + padding: 0; + padding-top: 5px; +} + +h3 { + font-size: 14px; +} + +#link .panel_wrapper, #link div.current { + height: 125px; +} + +#image .panel_wrapper, #image div.current { + height: 190px; +} + +/* Disables the advanced tab in the table plugin. */ +/* +#table #advanced_tab { + display: none; +} +*/ + +/* Disables the border input field and label in the table plugin. */ +/* +#table #border, #table #borderlabel { + display: none; +} +*/ diff --git a/skins/default/editor_ui.css b/skins/default/editor_ui.css new file mode 100644 index 000000000..c51be6c89 --- /dev/null +++ b/skins/default/editor_ui.css @@ -0,0 +1,353 @@ +/* This file contains the CSS data for the editor UI of TinyMCE instances */ + +.mceToolbarTop a, .mceToolbarTop a:visited, .mceToolbarTop a:hover, .mceToolbarBottom a, .mceToolbarBottom a:visited, .mceToolbarBottom a:hover { + border: 0; margin: 0; padding: 0; background: transparent; +} + +.mceSeparatorLine { + border: 0; + padding: 0; + margin-left: 4px; + margin-right: 2px; +} + +.mceSelectList { + font-family: 'MS Sans Serif', sans-serif, Verdana, Arial; + font-size: 7pt !important; + font-weight: normal; + margin-top: 3px; + padding: 0; + display: inline; + vertical-align: top; + background-color: #F0F0EE; +} + +.mceLabel, .mceLabelDisabled { + font-family: 'MS Sans Serif', sans-serif, Verdana, Arial; + font-size: 9pt; +} + +.mceLabel { + color: #000000; +} + +.mceLabelDisabled { + cursor: text; + color: #999999; +} + +.mceEditor { + background: #F0F0EE; + border: 1px solid #cccccc; + padding: 0; + margin: 0; +} + +.mceEditorArea { + font-family: 'MS Sans Serif', sans-serif, Verdana, Arial; + background: #FFFFFF; + padding: 0; + margin: 0; +} + +.mceToolbarTop, .mceToolbarBottom { + background: #F0F0EE; + line-height: 1px; + font-size: 1px; +} + +.mceToolbarTop { + border-bottom: 1px solid #cccccc; + padding-bottom: 1px; +} + +.mceToolbarBottom { + border-top: 1px solid #cccccc; +} + +.mceStatusbarTop, .mceStatusbarBottom, .mceStatusbar { + height: 20px; +} + +.mceStatusbarTop .mceStatusbarPathText, .mceStatusbarBottom .mceStatusbarPathText, .mceStatusbar .mceStatusbarPathText { + font-family: 'MS Sans Serif', sans-serif, Verdana, Arial; + font-size: 9pt; + padding: 2px; + line-height: 16px; + overflow: visible; +} + +.mceStatusbarTop { + border-bottom: 1px solid #cccccc; +} + +.mceStatusbarBottom { + border-top: 1px solid #cccccc; +} + +.mceStatusbar { + border-bottom: 1px solid #cccccc; +} + +.mcePathItem, .mcePathItem:link, .mcePathItem:visited, .mcePathItem:hover { + text-decoration: none; + font-family: 'MS Sans Serif', sans-serif, Verdana, Arial; + font-size: 9pt; + color: #000000; +} + +.mcePathItem:hover { + text-decoration: underline; +} + +.mceStatusbarPathText { + float: left; +} + +.mceStatusbarResize { + float: right; + background-image: url('../images/statusbar_resize.gif'); + background-repeat: no-repeat; + width: 11px; + height: 20px; + cursor: se-resize; +} + +.mceResizeBox { + width: 10px; + height: 10px; + display: none; + border: 1px dotted gray; + margin: 0; + padding: 0; +} + +.mceEditorIframe { + border: 0; +} + +/* Button CSS rules */ + +a.mceButtonDisabled img, a.mceButtonNormal img, a.mceButtonSelected img { + width: 20px; + height: 20px; + cursor: default; + margin-top: 1px; + margin-left: 1px; +} + +a.mceButtonDisabled img { + border: 0 !important; +} + +a.mceButtonNormal img, a.mceButtonSelected img { + border: 1px solid #F0F0EE !important; +} + +a.mceButtonSelected img { + border: 1px solid #6779AA !important; + background-color: #D4D5D8; +} + +a.mceButtonNormal img:hover, a.mceButtonSelected img:hover { + border: 1px solid #0A246A !important; + cursor: default; + background-color: #B6BDD2; +} + +a.mceButtonDisabled img { + -moz-opacity:0.3; + opacity: 0.3; + border: 1px solid #F0F0EE !important; + cursor: default; +} + +a.mceTiledButton img { + background-image: url('../images/buttons.gif'); + background-repeat: no-repeat; +} + +/* MSIE specific rules */ + +* html a.mceButtonNormal img, * html a.mceButtonSelected img, * html a.mceButtonDisabled img { + border: 0 !important; + margin-top: 2px; + margin-bottom: 1px; +} + +* html a.mceButtonDisabled img { + filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); + border: 0 !important; +} + +* html a.mceButtonDisabled { + border: 1px solid #F0F0EE !important; +} + +* html a.mceButtonNormal, * html a.mceButtonSelected { + border: 1px solid #F0F0EE !important; + cursor: default; +} + +* html a.mceButtonSelected { + border: 1px solid #6779AA !important; + background-color: #D4D5D8; +} + +* html a.mceButtonNormal:hover, * html a.mceButtonSelected:hover { + border: 1px solid #0A246A !important; + cursor: default; + background-color: #B6BDD2; +} + +* html .mceSelectList { + margin-top: 2px; +} + +/* Menu button CSS rules */ + +span.mceMenuButton img, span.mceMenuButtonSelected img { + border: 1px solid #F0F0EE; + margin-left: 1px; +} + +span.mceMenuButtonSelected img { + border: 1px solid #6779AA; + background-color: #B6BDD2; +} + +span.mceMenuButtonSelected img.mceMenuButton { + border: 1px solid #F0F0EE; + background-color: transparent; +} + +span.mceMenuButton img.mceMenuButton, span.mceMenuButtonSelected img.mceMenuButton { + border-left: 0; + margin-left: 0; +} + +span.mceMenuButton:hover img, span.mceMenuButtonSelected:hover img { + border: 1px solid #0A246A; + background-color: #B6BDD2; +} + +span.mceMenuButton:hover img.mceMenuButton, span.mceMenuButtonSelected:hover img.mceMenuButton { + border-left: 0; +} + +span.mceMenuButtonFocus img { + border: 1px solid gray; + border-right: 0; + margin-left: 1px; + background-color: #F5F4F2; +} + +span.mceMenuButtonFocus img.mceMenuButton { + border: 1px solid gray; + border-left: 1px solid #F5F4F2; + margin-left: 0; +} + +/* Menu button MSIE specific rules */ + +* html span.mceMenuButton, * html span.mceMenuButtonFocus { + position: relative; + left: 0; + top: 0; +} + +* html span.mceMenuButton img, * html span.mceMenuButtonSelected img, * html span.mceMenuButtonFocus img { + position: relative; + top: 1px; +} + +* html span.mceMenuHover img { + border: 1px solid #0A246A; + background-color: #B6BDD2; +} + +* html span.mceMenuButtonSelected.mceMenuHover img.mceMenuButton { + border: 1px solid #0A246A; + background-color: #B6BDD2; + border-left: 0; +} + +/* Menu */ + +.mceMenu { + position: absolute; + left: 0; + top: 0; + display: none; + z-index: 100; + background-color: white; + border: 1px solid gray; + font-weight: normal; +} + +.mceMenu a, .mceMenuTitle, .mceMenuDisabled { + display: block; + width: 100%; + text-decoration: none; + background-color: white; + font-family: Tahoma, Verdana, Arial, Helvetica; + font-size: 11px; + line-height: 20px; + color: black; +} + +.mceMenu a:hover { + background-color: #B6BDD2; + color: black; + text-decoration: none !important; +} + +.mceMenu span { + padding-left: 10px; + padding-right: 10px; + display: block; + line-height: 20px; +} + +.mceMenuSeparator { + border-bottom: 1px solid gray; + background-color: gray; + height: 1px; +} + +.mceMenuTitle span { + padding-left: 5px; +} + +.mceMenuTitle { + background-color: #DDDDDD; + font-weight: bold; +} + +.mceMenuDisabled { + color: gray; +} + +span.mceMenuSelectedItem { + background-image: url('../images/menu_check.gif'); + background-repeat: no-repeat; + background-position: 5px 8px; + padding-left: 20px; +} + +span.mceMenuCheckItem { + padding-left: 20px; +} + +span.mceMenuLine { + display: block; + position: absolute; + left: 0; + top: -1px; + background-color: #F5F4F2; + width: 30px; + height: 1px; + overflow: hidden; + padding-left: 0; + padding-right: 0; +} diff --git a/skins/default/templates/compose.html b/skins/default/templates/compose.html index ed44bb56c..2c11e0015 100644 --- a/skins/default/templates/compose.html +++ b/skins/default/templates/compose.html @@ -106,7 +106,9 @@ function rcmail_toggle_display(id) :  - + + :  + diff --git a/skins/default/templates/ldappublicsearch.html b/skins/default/templates/ldappublicsearch.html index 70570c06f..d9714cb85 100644 --- a/skins/default/templates/ldappublicsearch.html +++ b/skins/default/templates/ldappublicsearch.html @@ -22,7 +22,7 @@ + summary="LDAP email address list" /> -- cgit v1.2.3