[TASK] Port t3editor CSS to LESS 08/49208/4
authorFlorian Steller <florian-steller@outlook.de>
Fri, 1 Jul 2016 15:03:01 +0000 (17:03 +0200)
committerBenni Mack <benni@typo3.org>
Thu, 28 Jul 2016 10:32:39 +0000 (12:32 +0200)
Resolves: #77215
Releases: master
Change-Id: Ide73ff1047a16450edf6a88ec062d05019209e58
Reviewed-on: https://review.typo3.org/49208
Tested-by: Bamboo TYPO3com <info@typo3.com>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
Build/Gruntfile.js
Build/Resources/Public/Less/Configuration/Variables/_colors.less [new file with mode: 0644]
typo3/sysext/t3editor/Classes/Form/Element/T3editorElement.php
typo3/sysext/t3editor/Classes/T3editor.php
typo3/sysext/t3editor/Resources/Private/Less/t3editor.less [new file with mode: 0644]
typo3/sysext/t3editor/Resources/Private/Less/t3editor_inner.less [new file with mode: 0644]
typo3/sysext/t3editor/Resources/Private/Less/t3editor_typoscript_colors.less [new file with mode: 0644]
typo3/sysext/t3editor/Resources/Public/Css/t3editor.css
typo3/sysext/t3editor/Resources/Public/Css/t3editor_inner.css
typo3/sysext/t3editor/Resources/Public/Css/t3editor_typoscript_colors.css [new file with mode: 0644]
typo3/sysext/t3editor/Resources/Public/Css/typoscriptcolors.css [deleted file]

index 7055ce9..746afd8 100644 (file)
@@ -38,6 +38,7 @@ module.exports = function(grunt) {
                        install   : '<%= paths.sysext %>install/Resources/',
                        linkvalidator : '<%= paths.sysext %>linkvalidator/Resources/',
                        backend   : '<%= paths.sysext %>backend/Resources/',
+                       t3editor  : '<%= paths.sysext %>t3editor/Resources/',
                        workspaces: '<%= paths.sysext %>workspaces/Resources/',
                        core      : '<%= paths.sysext %>core/Resources/',
                        flags     : 'bower_components/region-flags/svg/',
@@ -82,6 +83,13 @@ module.exports = function(grunt) {
                                files: {
                                        "<%= paths.workspaces %>Public/Css/preview.css": "<%= paths.workspaces %>Private/Less/preview.less"
                                }
+                       },
+                       t3editor: {
+                               files: {
+                                       '<%= paths.t3editor %>Public/Css/t3editor.css': '<%= paths.t3editor %>Private/Less/t3editor.less',
+                                       '<%= paths.t3editor %>Public/Css/t3editor_inner.css': '<%= paths.t3editor %>Private/Less/t3editor_inner.less',
+                                       '<%= paths.t3editor %>Public/Css/t3editor_typoscript_colors.css': '<%= paths.t3editor %>Private/Less/t3editor_typoscript_colors.less'
+                               }
                        }
                },
                postcss: {
@@ -115,6 +123,9 @@ module.exports = function(grunt) {
                        linkvalidator: {
                                src: '<%= paths.linkvalidator %>Public/Css/*.css'
                        },
+                       t3editor: {
+                               src: '<%= paths.t3editor %>Public/Css/*.css'
+                       },
                        workspaces: {
                                src: '<%= paths.workspaces %>Public/Css/*.css'
                        }
diff --git a/Build/Resources/Public/Less/Configuration/Variables/_colors.less b/Build/Resources/Public/Less/Configuration/Variables/_colors.less
new file mode 100644 (file)
index 0000000..9a1d2e3
--- /dev/null
@@ -0,0 +1,45 @@
+//
+// LESS Variables for Colors
+// -------------------------
+// Description: Styles for t3editor text area.
+// Requires:    -
+// Usage:       Include this file in your standalone LESS file like:
+//              [ @import '../Less/Configuration/Variables/_colors.less'; ]
+//
+
+
+// TYPO3 corporate design
+@color-t3-primary:                  #FF8700;
+@color-t3-gray-superlight:          #f4f4f4;
+@color-t3-gray-light:               #b9b9b9;
+@color-t3-gray:                     #8c8c8c;
+@color-t3-gray-dark:                #515151;
+@color-t3-green:                    #5abc55;
+@color-t3-yellow:                   #ffc800;
+@color-t3-red:                      #dd123d;
+@color-t3-blue:                     #0080ff;
+
+
+// Bootstrap
+@gray-darker:                       rgb(30, 30, 30);
+@gray-dark:                         rgb(90, 90, 90);
+@gray:                              rgb(115, 115, 115);
+@gray-light:                        rgb(215, 215, 215);
+@gray-lighter:                      rgb(245, 245, 245);
+@brand-primary:                     #0078e6;
+@brand-success:                     #79a548;
+@brand-info:                        #6daae0;
+@brand-warning:                     #e8a33d;
+@brand-danger:                      #c83c3c;
+@brand-notice:                      #333333;
+
+
+// Fonts
+@text-color:                        #000000;
+
+
+// Custom
+@color-white:                       #ffffff;
+@color-yellow-light:                #ffc857;
+@color-green-dark:                  darkgreen;
+@color-red-dark:                    maroon;
\ No newline at end of file
index d48a360..fac68d0 100644 (file)
@@ -262,7 +262,7 @@ class T3editorElement extends AbstractFormElement
     {
         switch ($mode) {
             case self::MODE_TYPOSCRIPT:
-                $stylesheet = array($this->relExtPath . 'Resources/Public/Css/typoscriptcolors.css');
+                $stylesheet = array($this->relExtPath . 'Resources/Public/Css/t3editor_typoscript_colors.css');
                 break;
             case self::MODE_JAVASCRIPT:
                 $stylesheet = array($this->codemirrorPath . '../css/jscolors.css');
index 7ca0aab..6b1d6ff 100755 (executable)
@@ -252,7 +252,7 @@ class T3editor implements \TYPO3\CMS\Core\SingletonInterface
     {
         switch ($mode) {
             case self::MODE_TYPOSCRIPT:
-                $stylesheet = array($this->relExtPath . 'Resources/Public/Css/typoscriptcolors.css');
+                $stylesheet = array($this->relExtPath . 'Resources/Public/Css/t3editor_typoscript_colors.css');
                 break;
             case self::MODE_JAVASCRIPT:
                 $stylesheet = array($this->codemirrorPath . '../css/jscolors.css');
diff --git a/typo3/sysext/t3editor/Resources/Private/Less/t3editor.less b/typo3/sysext/t3editor/Resources/Private/Less/t3editor.less
new file mode 100644 (file)
index 0000000..e778a95
--- /dev/null
@@ -0,0 +1,245 @@
+//
+// T3editor Styles
+// ---------------
+// Description: Global styles for t3editor wrapper.
+// Requires:    ../Less/Configuration/Variables/_colors.less
+// Usage:       This file is compiled to the standalone CSS file:
+//              ../typo3_src/typo3/sysext/t3editor/Resources/Public/Css/t3editor.css
+//
+
+
+// Include Color Variables
+@import '../../../../../../Build/Resources/Public/Less/Configuration/Variables/_colors.less';
+
+
+// T3editor styles
+.CodeMirror-wrapping {
+  position: relative;
+  min-width: 100%;
+
+  div {
+    line-height: 13px !important;
+  }
+}
+
+div.CodeMirror-line-numbers {
+  margin-right: 2px;
+  padding-right: 3px;
+  padding-left: 3px;
+  font-size: 10px;
+  text-align: right;
+  line-height: 13px !important;
+}
+
+.TSREF_type_label,
+.TSREF_description_label {
+  font-weight: bold;
+}
+
+#TSREF_description {
+  margin-bottom: 5px;
+}
+
+
+// Code complete box
+.t3e_codeCompleteBox {
+  border: 1px solid @color-t3-gray-light;
+  padding: 0;
+  background-color: @color-t3-gray-superlight;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+      padding-left: 2px;
+      padding-right: 2px;
+      cursor: pointer;
+
+      &.active{
+        padding-left: 2px;
+        padding-right: 2px;
+        background-color: @color-white;
+      }
+
+      span {
+        &.word_undefined,
+        &.word_definedTSREFProperty,
+        &.word_undefinedTSREFProperty {
+          font-family: monospace;
+        }
+
+        &.word_undefined,
+        &.word_definedTSREFProperty {
+          color: @color-t3-red;
+        }
+
+        &.word_undefinedTSREFProperty {
+          color: @color-t3-blue;
+        }
+
+        &.word_userProperty {
+          font-size: 12px;
+          color: @gray;
+        }
+      }
+    }
+  }
+}
+
+
+// Code description box
+.t3e_descriptionBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 190;
+  border: 1px solid @color-t3-gray-light;
+  padding: 2px 5px;
+  height: 220px;
+  width: 260px;
+  background-color: @color-t3-gray-superlight;
+}
+
+.t3e_toolbar {
+  position: absolute;
+  top: 0;
+  right: 50px;
+  width: 200px;
+}
+
+.t3e_toolbar_icon {
+  border: 1px solid @color-t3-gray-light;
+  float: left;
+  width: 20px;
+  height: 20px;
+}
+
+.t3e_codeCompleteWrap {
+  position: absolute;
+  top: 0; left: 0;
+  z-index:190;
+}
+
+
+// Around the editor
+.t3e_wrap {
+  position: relative;
+  border: 1px solid @color-t3-gray-light;
+  min-width: 100%;
+  background-color: @color-t3-gray-superlight;
+}
+
+.t3e_modalOverlay {
+  position: absolute;
+  top: 0; left: 0;
+  background-color: @color-t3-gray-superlight;
+  z-index:200;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.t3e_fullscreen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index:999;
+}
+
+.t3e_iframe_wrap {
+  margin: 0 0 0 3px;
+}
+
+.t3e_iframe {
+  display: block;
+  padding: 0;
+}
+
+.t3e_toolbar_wrap {
+  clear: both;
+  padding-right: 20px;
+  width: 100%;
+  font-size: 11px;
+}
+
+.t3e_statusbar_wrap {
+  position: absolute;
+  left: -1px;
+  bottom: -1px;
+  padding: 5px;
+  height: auto;
+  width: calc(~'100% + 2px');
+  font-size: 11px;
+  background-color: @color-t3-gray;
+}
+
+.t3e_statusbar_wrap {
+  span {
+    margin: 3px;
+    color: @color-white;
+  }
+}
+
+.t3e_statusbar_item {
+  float: right;
+  height: 16px;
+  border-left: 1px solid gray;
+  padding: 4px 14px 0 14px;
+}
+
+.t3e_clickable {
+  cursor: hand;
+}
+
+.t3e_statusbar_overlay {
+  position: absolute; bottom: 20px; right: 17px;
+  z-index: 100;
+  opacity: 0.85;
+  border-left: 1px solid gray;
+  border-right: 1px solid gray;
+  border-top: 1px solid gray;
+  padding: 5px 0 10px 0;
+  width: 180px;
+  height: 70%;
+  background-color: @color-t3-gray-superlight;
+
+  &#t3e_statusbar_overlay_options {
+    height: 8em;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+      cursor: hand;
+      padding: 2px 6px 2px 6px;
+      color: @text-color;
+
+      &:hover {
+        background-color: @color-t3-gray-superlight;
+      }
+
+      label {
+        cursor:pointer;
+      }
+    }
+  }
+}
+
+#t3e_modalOverlay_help {
+  top: 10%;
+  left: 5%;
+  height: 80%;
+  width: 90%;
+  border: 1px solid @gray;
+  padding: 10px;
+  background-image: none;
+}
+
+.t3e_footeritem_active {
+  background-color: @color-t3-gray-superlight;
+}
\ No newline at end of file
diff --git a/typo3/sysext/t3editor/Resources/Private/Less/t3editor_inner.less b/typo3/sysext/t3editor/Resources/Private/Less/t3editor_inner.less
new file mode 100644 (file)
index 0000000..cf8c102
--- /dev/null
@@ -0,0 +1,27 @@
+//
+// T3editor Inner Styles
+// ---------------------
+// Description: Styles for t3editor text area.
+// Requires:    ../Less/Configuration/Variables/_colors.less
+// Usage:       This file is compiled to the standalone CSS file:
+//              ../typo3_src/typo3/sysext/t3editor/Resources/Public/Css/t3editor_inner.css
+//              The compiled CSS file is included in T3editor.php & T3editorElement.php
+//
+
+
+// Include Color Variables
+@import '../../../../../../Build/Resources/Public/Less/Configuration/Variables/_colors.less';
+
+
+// T3editor inner styles
+.editbox {
+  border-width: 0;
+  margin: 1px 0 0 0.3em;
+  padding: 0;
+  font-family: monospace;
+  font-size: 12px;
+  color: @text-color;
+  line-height: 13px;
+  white-space: nowrap;
+  background-color: @color-white;
+}
\ No newline at end of file
diff --git a/typo3/sysext/t3editor/Resources/Private/Less/t3editor_typoscript_colors.less b/typo3/sysext/t3editor/Resources/Private/Less/t3editor_typoscript_colors.less
new file mode 100644 (file)
index 0000000..3cd5b9b
--- /dev/null
@@ -0,0 +1,80 @@
+//
+// T3editor TypoScript Font Styles
+// -------------------------------
+// Description: Syntax highlighting for TypoScript.
+// Requires:    ../Less/Configuration/Variables/_colors.less
+// Usage:       This file is compiled to the standalone CSS file:
+//              ../typo3_src/typo3/sysext/t3editor/Resources/Public/Css/t3editor_typoscript_colors.css
+//              The compiled CSS file is included in T3editor.php & T3editorElement.php
+//
+
+
+// Include Color Variables
+@import '../../../../../../Build/Resources/Public/Less/Configuration/Variables/_colors.less';
+
+
+// Text color styles
+.other {
+  color: @text-color;
+}
+
+.ts-value {
+  color: @color-t3-red;
+}
+
+.ts-operator,
+.ts-objstr,
+.keyword,
+.keyword2,
+.keyword3,
+.reserved {
+  color: @color-t3-blue;
+}
+
+.ts-operator {
+  font-weight: bold;
+}
+
+.ts-value_copy {
+  color: @color-green-dark;
+}
+
+.ts-value_unset,
+.ts-ignored,
+.ts-default {
+  background-color: @color-t3-green;
+}
+
+.ts-comment {
+  font-style: italic;
+  color: @gray;
+}
+
+.ts-condition {
+  font-weight: bold;
+  color: @color-white;
+  background-color: @color-red-dark;
+}
+
+.ts-error {
+  border: 1px @color-t3-red dashed;
+  font-weight: bold;
+  background-color: @color-t3-yellow;
+}
+
+.highlight-bracket {
+  color: @color-white;
+  background-color: @color-t3-green;
+}
+
+.error-bracket {
+  color: @color-white;
+  background-color: @color-t3-red;
+}
+
+
+// Unparsed code
+pre.code,
+.editbox {
+  color: @gray;
+}
\ No newline at end of file
index 10faa11..5443856 100644 (file)
+/*!
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
 .CodeMirror-wrapping {
-       position: relative;
-       min-width: 100%;
+  position: relative;
+  min-width: 100%;
 }
-
 .CodeMirror-wrapping div {
-       line-height: 13px !important;
+  line-height: 13px !important;
 }
-
 div.CodeMirror-line-numbers {
-       line-height: 13px !important;
-       font-size: 10px;
-       padding-right: 3px;
-       padding-left: 3px;
-       margin-right: 2px;
-       text-align: right;
-}
-
-.TSREF_type_label, .TSREF_description_label{
-       font-weight: bold;
-}
-
+  margin-right: 2px;
+  padding-right: 3px;
+  padding-left: 3px;
+  font-size: 10px;
+  text-align: right;
+  line-height: 13px !important;
+}
+.TSREF_type_label,
+.TSREF_description_label {
+  font-weight: bold;
+}
+#TSREF_description {
+  margin-bottom: 5px;
+}
+.t3e_codeCompleteBox {
+  border: 1px solid #b9b9b9;
+  padding: 0;
+  background-color: #f4f4f4;
+}
+.t3e_codeCompleteBox ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.t3e_codeCompleteBox ul li {
+  padding-left: 2px;
+  padding-right: 2px;
+  cursor: pointer;
+}
+.t3e_codeCompleteBox ul li.active {
+  padding-left: 2px;
+  padding-right: 2px;
+  background-color: #ffffff;
+}
+.t3e_codeCompleteBox ul li span.word_undefined,
+.t3e_codeCompleteBox ul li span.word_definedTSREFProperty,
+.t3e_codeCompleteBox ul li span.word_undefinedTSREFProperty {
+  font-family: monospace;
+}
+.t3e_codeCompleteBox ul li span.word_undefined,
 .t3e_codeCompleteBox ul li span.word_definedTSREFProperty {
-       color:#DF4E00;
-       font-size:0.95em;
-       font-weight:bold;
+  color: #dd123d;
 }
-
 .t3e_codeCompleteBox ul li span.word_undefinedTSREFProperty {
-       color:#FF8400;
-       font-size:0.95em;
-       font-weight:bold;
+  color: #0080ff;
 }
-
 .t3e_codeCompleteBox ul li span.word_userProperty {
-       color:#7c7c7c;
-       font-size:0.95em;
-       font-weight:bold;
-}
-
-.t3e_descriptionBox{
-       height: 160px;
-       width: 260px;
-       position: absolute;
-       top: 0; left: 0;
-       background-color: #EFEFF4;
-       z-index:190;
-       border:2px solid silver;
-       padding:0;
-}
-
-.t3e_toolbar{
-       position:absolute;
-       right:50px;
-       top:0;
-       width:200px;
-}
-
-.t3e_toolbar_icon{
-       border: 1px solid #CCCCCC;
-       width: 20px;
-       height: 20px;
-       float: left;
-}
-
+  font-size: 12px;
+  color: #737373;
+}
+.t3e_descriptionBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 190;
+  border: 1px solid #b9b9b9;
+  padding: 2px 5px;
+  height: 220px;
+  width: 260px;
+  background-color: #f4f4f4;
+}
+.t3e_toolbar {
+  position: absolute;
+  top: 0;
+  right: 50px;
+  width: 200px;
+}
+.t3e_toolbar_icon {
+  border: 1px solid #b9b9b9;
+  float: left;
+  width: 20px;
+  height: 20px;
+}
 .t3e_codeCompleteWrap {
-       position: absolute;
-       top: 0; left: 0;
-       z-index:190;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 190;
 }
-
-.t3e_codeCompleteBox {
-       background-color: #EFEFF4;
-       border:2px solid silver;
-       padding:0;
-}
-
-.t3e_codeCompleteBox ul{
-       list-style-type: none;
-       padding:0;
-       margin:0;
-
-}
-.t3e_codeCompleteBox ul li{
-       padding-left:2px;
-       padding-right:2px;
-       font-weight:bold;
-       cursor: pointer;
-}
-.t3e_codeCompleteBox ul li.active{
-       padding-left:2px;
-       padding-right:2px;
-       font-weight:bold;
-       background-color: #cfcfcf;
-}
-/* around the editor */
 .t3e_wrap {
-       border: 1px solid gray;
-       position: relative;
-       min-width: 100%;
-       background-color: #EFEFF4;
+  position: relative;
+  border: 1px solid #b9b9b9;
+  min-width: 100%;
+  background-color: #f4f4f4;
 }
-
 .t3e_modalOverlay {
-       position: absolute;
-       top: 0; left: 0;
-       background-color: #EFEFF4;
-       z-index:200;
-       width: 100%;
-       height: 100%;
-       text-align: center;
-}
-.t3e_autoCompleteBox {
-       position: absolute;
-       top: 0; left: 0;
-       background-color: #EFEFF4;
-       z-index:190;
-       border:2px solid silver;
-       padding:0;
-}
-.t3e_autoCompleteBox ul{
-       list-style-type: none;
-       padding:0;
-       margin:0;
-}
-.t3e_autoCompleteBox ul li{
-       padding-left:2px;
-       padding-right:2px;
-       font-weight:bold;
-       cursor: pointer;
-}
-.t3e_autoCompleteBox ul li.active{
-       padding-left:2px;
-       padding-right:2px;
-       font-weight:bold;
-       background-color: #cfcfcf;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #f4f4f4;
+  z-index: 200;
+  width: 100%;
+  height: 100%;
+  text-align: center;
 }
 .t3e_fullscreen {
-       position: absolute;
-       top: 0;
-       left: 0;
-       z-index:999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
 }
-
 .t3e_iframe_wrap {
-       margin: 0 0 0 3px;
+  margin: 0 0 0 3px;
 }
-
 .t3e_iframe {
-       display: block;
-       padding: 0;
+  display: block;
+  padding: 0;
 }
-
 .t3e_toolbar_wrap {
-       clear: both;
-       width: 100%;
-       font-size: 0.9em;
-       padding-right: 20px;
+  clear: both;
+  padding-right: 20px;
+  width: 100%;
+  font-size: 11px;
 }
-
 .t3e_statusbar_wrap {
-       clear: both;
-       font-size: 0.9em;
-       padding-left: 3px;
-       padding-top: 3px;
-       background-color:#B8BEC9;
-       height: 20px;
+  position: absolute;
+  left: -1px;
+  bottom: -1px;
+  padding: 5px;
+  height: auto;
+  width: calc(100% + 2px);
+  font-size: 11px;
+  background-color: #8c8c8c;
 }
 .t3e_statusbar_wrap span {
-       color:#FFFFFF;
-       margin: 3px;
+  margin: 3px;
+  color: #ffffff;
 }
 .t3e_statusbar_item {
-       float: right;
-       height: 16px;
-       border-left: 1px solid gray;
-       padding: 4px 14px 0 14px;
+  float: right;
+  height: 16px;
+  border-left: 1px solid gray;
+  padding: 4px 14px 0 14px;
 }
-
 .t3e_clickable {
-       cursor: hand;
+  cursor: hand;
 }
-
 .t3e_statusbar_overlay {
-       position: absolute; bottom: 20px; right: 17px;
-       opacity: 0.85;
-       background-color: #EFEFF4;
-       width: 180px;
-       height: 70%;
-       padding: 5px 0 10px 0;
-       border-left: 1px solid gray;
-       border-right: 1px solid gray;
-       border-top: 1px solid gray;
-       z-index: 100;
+  position: absolute;
+  bottom: 20px;
+  right: 17px;
+  z-index: 100;
+  opacity: 0.85;
+  border-left: 1px solid gray;
+  border-right: 1px solid gray;
+  border-top: 1px solid gray;
+  padding: 5px 0 10px 0;
+  width: 180px;
+  height: 70%;
+  background-color: #f4f4f4;
 }
 .t3e_statusbar_overlay#t3e_statusbar_overlay_options {
-       height: 8em;
+  height: 8em;
 }
 .t3e_statusbar_overlay ul {
-       list-style-type: none;
-       padding: 0;
-       margin: 0;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
 }
 .t3e_statusbar_overlay ul li {
-       color: #212121;
-       padding: 2px 6px 2px 6px;
-       cursor: hand;
-}
-.t3e_statusbar_overlay ul li label {
-       cursor:pointer;
+  cursor: hand;
+  padding: 2px 6px 2px 6px;
+  color: #000000;
 }
 .t3e_statusbar_overlay ul li:hover {
-       background-color: #cfcfcf;
+  background-color: #f4f4f4;
+}
+.t3e_statusbar_overlay ul li label {
+  cursor: pointer;
 }
-
 #t3e_modalOverlay_help {
-       background-image: none;
-       width: 90%;
-       height: 80%;
-       top: 10%;
-       left: 5%;
-       padding: 10px;
-       border: 1px solid gray;
-}
-
+  top: 10%;
+  left: 5%;
+  height: 80%;
+  width: 90%;
+  border: 1px solid #737373;
+  padding: 10px;
+  background-image: none;
+}
 .t3e_footeritem_active {
-       background-color: #cfcfcf;
+  background-color: #f4f4f4;
 }
index 3427a5a..aa83314 100644 (file)
@@ -1,11 +1,23 @@
+/*!
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
 .editbox {
-       line-height: 13px;
-       border-width: 0;
-       margin: 1px 0 0 0.3em;
-       padding: 0;
-       font-family: monospace;
-       font-size: 12px;
-       color: black;
-       background-color: #fff;
-       white-space: nowrap;
-}
\ No newline at end of file
+  border-width: 0;
+  margin: 1px 0 0 0.3em;
+  padding: 0;
+  font-family: monospace;
+  font-size: 12px;
+  color: #000000;
+  line-height: 13px;
+  white-space: nowrap;
+  background-color: #ffffff;
+}
diff --git a/typo3/sysext/t3editor/Resources/Public/Css/t3editor_typoscript_colors.css b/typo3/sysext/t3editor/Resources/Public/Css/t3editor_typoscript_colors.css
new file mode 100644 (file)
index 0000000..95ae216
--- /dev/null
@@ -0,0 +1,63 @@
+/*!
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+.other {
+  color: #000000;
+}
+.ts-value {
+  color: #dd123d;
+}
+.ts-operator,
+.ts-objstr,
+.keyword,
+.keyword2,
+.keyword3,
+.reserved {
+  color: #0080ff;
+}
+.ts-operator {
+  font-weight: bold;
+}
+.ts-value_copy {
+  color: darkgreen;
+}
+.ts-value_unset,
+.ts-ignored,
+.ts-default {
+  background-color: #5abc55;
+}
+.ts-comment {
+  font-style: italic;
+  color: #737373;
+}
+.ts-condition {
+  font-weight: bold;
+  color: #ffffff;
+  background-color: maroon;
+}
+.ts-error {
+  border: 1px #dd123d dashed;
+  font-weight: bold;
+  background-color: #ffc800;
+}
+.highlight-bracket {
+  color: #ffffff;
+  background-color: #5abc55;
+}
+.error-bracket {
+  color: #ffffff;
+  background-color: #dd123d;
+}
+pre.code,
+.editbox {
+  color: #737373;
+}
diff --git a/typo3/sysext/t3editor/Resources/Public/Css/typoscriptcolors.css b/typo3/sysext/t3editor/Resources/Public/Css/typoscriptcolors.css
deleted file mode 100644 (file)
index 8963510..0000000
+++ /dev/null
@@ -1,22 +0,0 @@
-/*********************************************
- * Syntax highlighting
- *********************************************/
-
-.other { color: black; }
-.ts-operator { color: #0000cc; font-weight: bold; }
-.ts-value { color: #cc0000; }
-.ts-objstr, .keyword, .keyword2, .keyword3, .reserved { color: #0000cc; }
-.ts-value_copy { color: #006600; }
-.ts-value_unset { background-color: #66cc66; }
-.ts-ignored { background-color: #66cc66; }
-.ts-default { background-color: #66cc66; }
-.ts-comment { color: #666; font-style: italic; }
-.ts-condition { background-color: maroon; color: #fff; font-weight: bold; }
-.ts-error { background-color: yellow; border: 1px red dashed; font-weight: bold; }
-.highlight-bracket {background-color: #0c0; color: #fff; }
-.error-bracket {background-color: #d00; color: #fff; }
-
-/* unparsed code */
-pre.code, .editbox {
-       color: #666;
-}
\ No newline at end of file