summaryrefslogtreecommitdiff
path: root/skins/default
diff options
context:
space:
mode:
authorsvncommit <devs@roundcube.net>2006-09-14 03:49:28 +0000
committersvncommit <devs@roundcube.net>2006-09-14 03:49:28 +0000
commita0109c4933e0bfb5ed9dbcf94f932991ca689542 (patch)
tree955246969bf9da5d5335d1d7c483025fdbd50407 /skins/default
parentbb5ddfa0ade5fbd2ed9be16e51d4ce695252eece (diff)
Initial TinyMCE editor support (still need to work on spellcheck and skins)
Diffstat (limited to 'skins/default')
-rw-r--r--skins/default/editor_content.css58
-rw-r--r--skins/default/editor_popup.css327
-rw-r--r--skins/default/editor_ui.css353
-rw-r--r--skins/default/templates/compose.html4
-rw-r--r--skins/default/templates/ldappublicsearch.html2
5 files changed, 742 insertions, 2 deletions
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)
<td align="right">
<roundcube:label name="charset" />:&nbsp;<roundcube:object name="charsetSelector" tabindex="8" />
</td>
-
+<td align="right">
+ <roundcube:label name="editortype" />:&nbsp;<roundcube:object name="editorSelector" tabindex="9" />
+</td>
</tr></tbody></table>
</td>
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 @@
<roundcube:object name="ldappublicaddresslist"
id="ldappublicaddresslist"
cellspacing="0"
- summary="Ldap email address list" />
+ summary="LDAP email address list" />
</div>
<roundcube:include file="/includes/ldapscripts.html" />