[TASK] Base FlashMessage CSS on Bootstrap 71/32771/3
authorFelix Kopp <felix-source@phorax.com>
Sun, 14 Sep 2014 18:58:16 +0000 (20:58 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sun, 14 Sep 2014 22:25:20 +0000 (00:25 +0200)
Use Bootstrap CSS for FlashMessages.
Also use TYPO3 standard status colors in Bootstrap.

Resolves: #61586
Releases: master
Change-Id: I8d5b98f71d83db3371c59838aefc031b12dbd278
Reviewed-on: http://review.typo3.org/32771
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_message.less [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_message.less [deleted file]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_element_message.less [deleted file]
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
typo3/sysext/t3skin/Resources/Private/Styles/t3kin.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css

diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_message.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_message.less
new file mode 100644 (file)
index 0000000..0df5d23
--- /dev/null
@@ -0,0 +1,108 @@
+/**
+ * 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!
+ */
+
+#typo3-messages {
+       margin-bottom: 10px;
+}
+
+.typo3-message {
+       .alert;
+
+       background-position: 10px 12px;
+       background-repeat: no-repeat;
+       padding: 12px 12px 12px 36px;
+
+       .message-header {
+               font-weight: bold;
+               margin-bottom: floor(@line-height-computed / 2);
+       }
+
+       ul,
+       ol {
+               padding-left: 16px;
+       }
+
+       .message-header {
+               display: block;
+       }
+
+       .t3-icon-actions-message-close {
+               cursor: pointer;
+               float: right;
+       }
+
+       li {
+               margin-bottom: 10px;
+               list-style: disc;
+       }
+
+       a {
+               text-decoration: underline;
+
+       }
+}
+
+
+.message-notice {
+       // Nothing to inherit from Bootstrap - there is no alert-notice
+
+       color: #777;
+       background-color: #f6f7fa;
+       background-image: url('../../../../icons/gfx/notice.png');
+       border-color: #c2cbcf;
+
+       a {
+               color: #777;
+       }
+}
+
+.message-information {
+       .alert-info;
+
+       background-image: url('../../../../icons/gfx/information.png');
+
+       a {
+               color: #4c73a1;
+       }
+}
+
+.message-ok {
+       .alert-success;
+
+       background-image: url('../../../../icons/gfx/ok.png');
+
+       a {
+               color: #3b7826;
+       }
+}
+
+.message-warning {
+       .alert-warning;
+
+       background-image: url("../../../../icons/gfx/warning.png");
+
+       a {
+               color: #9e7d4a;
+       }
+}
+
+.message-error {
+       .alert-danger;
+
+       background-image: url('../../../../icons/gfx/error.png');
+
+       a {
+               color: #aa0225;
+       }
+}
+
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_message.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_element_message.less
deleted file mode 100644 (file)
index aa7e7d0..0000000
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * 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!
- */
-
-/* - - - - - - - - - - - - - - - - - - - - -
-Flash Messages
-- - - - - - - - - - - - - - - - - - - - - */
-
-#typo3-messages {
-       margin-bottom: 10px;
-}
-
-.typo3-message {
-       margin-bottom: 4px;
-       padding: 12px;
-       padding-left: 36px;
-}
-
-.typo3-message ul,
-.typo3-message ol {
-       padding-left: 16px;
-}
-
-.typo3-message .message-header {
-       display: block;
-}
-
-.typo3-message .t3-icon-actions-message-close {
-       cursor: pointer;
-       float: right;
-}
\ No newline at end of file
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_element_message.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/visual/_element_message.less
deleted file mode 100644 (file)
index f875ea2..0000000
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * 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!
- */
-
-/* - - - - - - - - - - - - - - - - - - - - -
-Flash Messages
-- - - - - - - - - - - - - - - - - - - - - */
-
-.typo3-message {
-       border: 1px solid;
-       background-position: 10px 12px;
-       background-repeat: no-repeat;
-}
-
-.typo3-message a {
-       text-decoration: underline;
-}
-
-.typo3-message li {
-       margin-bottom: 10px;
-    list-style: disc;
-}
-
-.typo3-message .message-header {
-       font-weight: bold;
-}
-
-.message-notice {
-       color: #777;
-       background-color: #f6f7fa;
-       background-image: url('../../../../icons/gfx/notice.png');
-       border-color: #c2cbcf;
-}
-
-.message-notice a {
-       color: #777;
-}
-
-.message-information {
-       color: #4c73a1;
-       background-color: #eaf7ff;
-       background-image: url('../../../../icons/gfx/information.png');
-       border-color: #c5dbe6;
-}
-
-.message-information a {
-       color: #4c73a1;
-}
-
-.message-ok {
-       color: #3b7826;
-       background-color: #cdeaca;
-       background-image: url('../../../../icons/gfx/ok.png');
-       border-color: #58b548;
-}
-
-.message-ok a {
-       color: #3b7826;
-}
-
-.message-warning {
-       color: #9e7d4a;
-       background-color:#fbf6de;
-       background-image: url("../../../../icons/gfx/warning.png");
-       border-color: #b1905c;
-}
-
-.message-warning a {
-       color: #9e7d4a;
-}
-
-.message-error {
-       color: #aa0225;
-       background-color: #f6d3cf;
-       background-image: url('../../../../icons/gfx/error.png');
-       border-color: #d66c68;
-}
-
-.message-error a {
-       color: #aa0225;
-}
\ No newline at end of file
index 5b5637e..91db7d0 100644 (file)
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-@state-success-text:             #3c763d;
+@state-success-text:             #3b7826;
 @state-success-bg:               #dff0d8;
 @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
 
-@state-info-text:                #31708f;
+@state-info-text:                #4c73a1;
 @state-info-bg:                  #d9edf7;
 @state-info-border:              darken(spin(@state-info-bg, -10), 7%);
 
-@state-warning-text:             #8a6d3b;
+@state-warning-text:             #9e7d4a;
 @state-warning-bg:               #fcf8e3;
 @state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
 
-@state-danger-text:              #a94442;
+@state-danger-text:              #aa0225;
 @state-danger-bg:                #f2dede;
 @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
 
index 64d33eb..dfe9315 100644 (file)
@@ -90,6 +90,8 @@
  * TYPO3
  */
 
+@import "TYPO3/_element_message.less";
+
 @import "TYPO3/structure/_element_button_back.less";
 @import "TYPO3/structure/_element_clipboard.less";
 @import "TYPO3/structure/_element_csh.less";
@@ -97,7 +99,6 @@
 @import "TYPO3/structure/_element_docheader.less";
 @import "TYPO3/structure/_element_history.less";
 @import "TYPO3/structure/_element_infopopup.less";
-@import "TYPO3/structure/_element_message.less";
 @import "TYPO3/structure/_element_move_element.less";
 @import "TYPO3/structure/_element_pagetree.less";
 @import "TYPO3/structure/_element_recent_edited.less";
 @import "TYPO3/visual/_element_docheader.less";
 @import "TYPO3/visual/_element_extjs_icons.less";
 @import "TYPO3/visual/_element_history.less";
-@import "TYPO3/visual/_element_message.less";
 @import "TYPO3/visual/_element_pagetree.less";
 @import "TYPO3/visual/_element_recent_edited.less";
 @import "TYPO3/visual/_element_rte.less";
 @import "TYPO3/visual/_toolbar_shortcut.less";
 @import "TYPO3/visual/_toolbar_username.less";
 @import "TYPO3/visual/_toolbar_workspace.less";
-@import "TYPO3/visual/_topbar.less";
\ No newline at end of file
+@import "TYPO3/visual/_topbar.less";
index 607c5d6..e40088a 100644 (file)
@@ -981,28 +981,28 @@ a.text-primary:hover {
   color: #0088fe;
 }
 .text-success {
-  color: #3c763d;
+  color: #3b7826;
 }
 a.text-success:hover {
-  color: #2b542c;
+  color: #28511a;
 }
 .text-info {
-  color: #31708f;
+  color: #4c73a1;
 }
 a.text-info:hover {
-  color: #245269;
+  color: #3c5a7e;
 }
 .text-warning {
-  color: #8a6d3b;
+  color: #9e7d4a;
 }
 a.text-warning:hover {
-  color: #66512c;
+  color: #7b623a;
 }
 .text-danger {
-  color: #a94442;
+  color: #aa0225;
 }
 a.text-danger:hover {
-  color: #843534;
+  color: #78011a;
 }
 .bg-primary {
   color: #fff;
@@ -2375,25 +2375,25 @@ select[multiple].input-lg {
 .has-success .checkbox,
 .has-success .radio-inline,
 .has-success .checkbox-inline {
-  color: #3c763d;
+  color: #3b7826;
 }
 .has-success .form-control {
-  border-color: #3c763d;
+  border-color: #3b7826;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 .has-success .form-control:focus {
-  border-color: #2b542c;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+  border-color: #28511a;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #62c341;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #62c341;
 }
 .has-success .input-group-addon {
-  color: #3c763d;
-  border-color: #3c763d;
+  color: #3b7826;
+  border-color: #3b7826;
   background-color: #dff0d8;
 }
 .has-success .form-control-feedback {
-  color: #3c763d;
+  color: #3b7826;
 }
 .has-warning .help-block,
 .has-warning .control-label,
@@ -2401,25 +2401,25 @@ select[multiple].input-lg {
 .has-warning .checkbox,
 .has-warning .radio-inline,
 .has-warning .checkbox-inline {
-  color: #8a6d3b;
+  color: #9e7d4a;
 }
 .has-warning .form-control {
-  border-color: #8a6d3b;
+  border-color: #9e7d4a;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 .has-warning .form-control:focus {
-  border-color: #66512c;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
+  border-color: #7b623a;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c7ae87;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c7ae87;
 }
 .has-warning .input-group-addon {
-  color: #8a6d3b;
-  border-color: #8a6d3b;
+  color: #9e7d4a;
+  border-color: #9e7d4a;
   background-color: #fcf8e3;
 }
 .has-warning .form-control-feedback {
-  color: #8a6d3b;
+  color: #9e7d4a;
 }
 .has-error .help-block,
 .has-error .control-label,
@@ -2427,25 +2427,25 @@ select[multiple].input-lg {
 .has-error .checkbox,
 .has-error .radio-inline,
 .has-error .checkbox-inline {
-  color: #a94442;
+  color: #aa0225;
 }
 .has-error .form-control {
-  border-color: #a94442;
+  border-color: #aa0225;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 .has-error .form-control:focus {
-  border-color: #843534;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  border-color: #78011a;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #fc1646;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #fc1646;
 }
 .has-error .input-group-addon {
-  color: #a94442;
-  border-color: #a94442;
+  color: #aa0225;
+  border-color: #aa0225;
   background-color: #f2dede;
 }
 .has-error .form-control-feedback {
-  color: #a94442;
+  color: #aa0225;
 }
 .has-feedback label.sr-only ~ .form-control-feedback {
   top: 0;
@@ -4459,46 +4459,46 @@ a.thumbnail.active {
 .alert-success {
   background-color: #dff0d8;
   border-color: #d6e9c6;
-  color: #3c763d;
+  color: #3b7826;
 }
 .alert-success hr {
   border-top-color: #c9e2b3;
 }
 .alert-success .alert-link {
-  color: #2b542c;
+  color: #28511a;
 }
 .alert-info {
   background-color: #d9edf7;
   border-color: #bce8f1;
-  color: #31708f;
+  color: #4c73a1;
 }
 .alert-info hr {
   border-top-color: #a6e1ec;
 }
 .alert-info .alert-link {
-  color: #245269;
+  color: #3c5a7e;
 }
 .alert-warning {
   background-color: #fcf8e3;
   border-color: #faebcc;
-  color: #8a6d3b;
+  color: #9e7d4a;
 }
 .alert-warning hr {
   border-top-color: #f7e1b5;
 }
 .alert-warning .alert-link {
-  color: #66512c;
+  color: #7b623a;
 }
 .alert-danger {
   background-color: #f2dede;
   border-color: #ebccd1;
-  color: #a94442;
+  color: #aa0225;
 }
 .alert-danger hr {
   border-top-color: #e4b9c0;
 }
 .alert-danger .alert-link {
-  color: #843534;
+  color: #78011a;
 }
 @-webkit-keyframes progress-bar-stripes {
   from {
@@ -4704,92 +4704,92 @@ a.list-group-item:focus {
   color: #feffff;
 }
 .list-group-item-success {
-  color: #3c763d;
+  color: #3b7826;
   background-color: #dff0d8;
 }
 a.list-group-item-success {
-  color: #3c763d;
+  color: #3b7826;
 }
 a.list-group-item-success .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-success:hover,
 a.list-group-item-success:focus {
-  color: #3c763d;
+  color: #3b7826;
   background-color: #d0e9c6;
 }
 a.list-group-item-success.active,
 a.list-group-item-success.active:hover,
 a.list-group-item-success.active:focus {
   color: #fff;
-  background-color: #3c763d;
-  border-color: #3c763d;
+  background-color: #3b7826;
+  border-color: #3b7826;
 }
 .list-group-item-info {
-  color: #31708f;
+  color: #4c73a1;
   background-color: #d9edf7;
 }
 a.list-group-item-info {
-  color: #31708f;
+  color: #4c73a1;
 }
 a.list-group-item-info .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-info:hover,
 a.list-group-item-info:focus {
-  color: #31708f;
+  color: #4c73a1;
   background-color: #c4e3f3;
 }
 a.list-group-item-info.active,
 a.list-group-item-info.active:hover,
 a.list-group-item-info.active:focus {
   color: #fff;
-  background-color: #31708f;
-  border-color: #31708f;
+  background-color: #4c73a1;
+  border-color: #4c73a1;
 }
 .list-group-item-warning {
-  color: #8a6d3b;
+  color: #9e7d4a;
   background-color: #fcf8e3;
 }
 a.list-group-item-warning {
-  color: #8a6d3b;
+  color: #9e7d4a;
 }
 a.list-group-item-warning .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-warning:hover,
 a.list-group-item-warning:focus {
-  color: #8a6d3b;
+  color: #9e7d4a;
   background-color: #faf2cc;
 }
 a.list-group-item-warning.active,
 a.list-group-item-warning.active:hover,
 a.list-group-item-warning.active:focus {
   color: #fff;
-  background-color: #8a6d3b;
-  border-color: #8a6d3b;
+  background-color: #9e7d4a;
+  border-color: #9e7d4a;
 }
 .list-group-item-danger {
-  color: #a94442;
+  color: #aa0225;
   background-color: #f2dede;
 }
 a.list-group-item-danger {
-  color: #a94442;
+  color: #aa0225;
 }
 a.list-group-item-danger .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-danger:hover,
 a.list-group-item-danger:focus {
-  color: #a94442;
+  color: #aa0225;
   background-color: #ebcccc;
 }
 a.list-group-item-danger.active,
 a.list-group-item-danger.active:hover,
 a.list-group-item-danger.active:focus {
   color: #fff;
-  background-color: #a94442;
-  border-color: #a94442;
+  background-color: #aa0225;
+  border-color: #aa0225;
 }
 .list-group-item-heading {
   margin-top: 0;
@@ -5039,7 +5039,7 @@ a.list-group-item-danger.active:focus {
   border-color: #d6e9c6;
 }
 .panel-success > .panel-heading {
-  color: #3c763d;
+  color: #3b7826;
   background-color: #dff0d8;
   border-color: #d6e9c6;
 }
@@ -5048,7 +5048,7 @@ a.list-group-item-danger.active:focus {
 }
 .panel-success > .panel-heading .badge {
   color: #dff0d8;
-  background-color: #3c763d;
+  background-color: #3b7826;
 }
 .panel-success > .panel-footer + .panel-collapse > .panel-body {
   border-bottom-color: #d6e9c6;
@@ -5057,7 +5057,7 @@ a.list-group-item-danger.active:focus {
   border-color: #bce8f1;
 }
 .panel-info > .panel-heading {
-  color: #31708f;
+  color: #4c73a1;
   background-color: #d9edf7;
   border-color: #bce8f1;
 }
@@ -5066,7 +5066,7 @@ a.list-group-item-danger.active:focus {
 }
 .panel-info > .panel-heading .badge {
   color: #d9edf7;
-  background-color: #31708f;
+  background-color: #4c73a1;
 }
 .panel-info > .panel-footer + .panel-collapse > .panel-body {
   border-bottom-color: #bce8f1;
@@ -5075,7 +5075,7 @@ a.list-group-item-danger.active:focus {
   border-color: #faebcc;
 }
 .panel-warning > .panel-heading {
-  color: #8a6d3b;
+  color: #9e7d4a;
   background-color: #fcf8e3;
   border-color: #faebcc;
 }
@@ -5084,7 +5084,7 @@ a.list-group-item-danger.active:focus {
 }
 .panel-warning > .panel-heading .badge {
   color: #fcf8e3;
-  background-color: #8a6d3b;
+  background-color: #9e7d4a;
 }
 .panel-warning > .panel-footer + .panel-collapse > .panel-body {
   border-bottom-color: #faebcc;
@@ -5093,7 +5093,7 @@ a.list-group-item-danger.active:focus {
   border-color: #ebccd1;
 }
 .panel-danger > .panel-heading {
-  color: #a94442;
+  color: #aa0225;
   background-color: #f2dede;
   border-color: #ebccd1;
 }
@@ -5102,7 +5102,7 @@ a.list-group-item-danger.active:focus {
 }
 .panel-danger > .panel-heading .badge {
   color: #f2dede;
-  background-color: #a94442;
+  background-color: #aa0225;
 }
 .panel-danger > .panel-footer + .panel-collapse > .panel-body {
   border-bottom-color: #ebccd1;
@@ -7159,6 +7159,135 @@ button.close {
  *
  * The TYPO3 project - inspiring people to share!
  */
+#typo3-messages {
+  margin-bottom: 10px;
+}
+.typo3-message {
+  padding: 15px;
+  margin-bottom: 18px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background-position: 10px 12px;
+  background-repeat: no-repeat;
+  padding: 12px 12px 12px 36px;
+}
+.typo3-message h4 {
+  margin-top: 0;
+  color: inherit;
+}
+.typo3-message .alert-link {
+  font-weight: bold;
+}
+.typo3-message > p,
+.typo3-message > ul {
+  margin-bottom: 0;
+}
+.typo3-message > p + p {
+  margin-top: 5px;
+}
+.typo3-message .message-header {
+  font-weight: bold;
+  margin-bottom: 9px;
+}
+.typo3-message ul,
+.typo3-message ol {
+  padding-left: 16px;
+}
+.typo3-message .message-header {
+  display: block;
+}
+.typo3-message .t3-icon-actions-message-close {
+  cursor: pointer;
+  float: right;
+}
+.typo3-message li {
+  margin-bottom: 10px;
+  list-style: disc;
+}
+.typo3-message a {
+  text-decoration: underline;
+}
+.message-notice {
+  color: #777;
+  background-color: #f6f7fa;
+  background-image: url('../../../../icons/gfx/notice.png');
+  border-color: #c2cbcf;
+}
+.message-notice a {
+  color: #777;
+}
+.message-information {
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+  color: #4c73a1;
+  background-image: url('../../../../icons/gfx/information.png');
+}
+.message-information hr {
+  border-top-color: #a6e1ec;
+}
+.message-information .alert-link {
+  color: #3c5a7e;
+}
+.message-information a {
+  color: #4c73a1;
+}
+.message-ok {
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  color: #3b7826;
+  background-image: url('../../../../icons/gfx/ok.png');
+}
+.message-ok hr {
+  border-top-color: #c9e2b3;
+}
+.message-ok .alert-link {
+  color: #28511a;
+}
+.message-ok a {
+  color: #3b7826;
+}
+.message-warning {
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+  color: #9e7d4a;
+  background-image: url("../../../../icons/gfx/warning.png");
+}
+.message-warning hr {
+  border-top-color: #f7e1b5;
+}
+.message-warning .alert-link {
+  color: #7b623a;
+}
+.message-warning a {
+  color: #9e7d4a;
+}
+.message-error {
+  background-color: #f2dede;
+  border-color: #ebccd1;
+  color: #aa0225;
+  background-image: url('../../../../icons/gfx/error.png');
+}
+.message-error hr {
+  border-top-color: #e4b9c0;
+}
+.message-error .alert-link {
+  color: #78011a;
+}
+.message-error a {
+  color: #aa0225;
+}
+/**
+ * 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!
+ */
 /* - - - - - - - - - - - - - - - - - - - - -
 Go back A-tags
 - - - - - - - - - - - - - - - - - - - - - */
@@ -7532,40 +7661,6 @@ body#typo3-show-item-php {
  * The TYPO3 project - inspiring people to share!
  */
 /* - - - - - - - - - - - - - - - - - - - - -
-Flash Messages
-- - - - - - - - - - - - - - - - - - - - - */
-#typo3-messages {
-  margin-bottom: 10px;
-}
-.typo3-message {
-  margin-bottom: 4px;
-  padding: 12px;
-  padding-left: 36px;
-}
-.typo3-message ul,
-.typo3-message ol {
-  padding-left: 16px;
-}
-.typo3-message .message-header {
-  display: block;
-}
-.typo3-message .t3-icon-actions-message-close {
-  cursor: pointer;
-  float: right;
-}
-/**
- * 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!
- */
-/* - - - - - - - - - - - - - - - - - - - - -
 Move Element
 - - - - - - - - - - - - - - - - - - - - - */
 table#typo3-ttContentList {
@@ -10591,81 +10686,6 @@ table#typo3-history-item tr.c-head td {
  * The TYPO3 project - inspiring people to share!
  */
 /* - - - - - - - - - - - - - - - - - - - - -
-Flash Messages
-- - - - - - - - - - - - - - - - - - - - - */
-.typo3-message {
-  border: 1px solid;
-  background-position: 10px 12px;
-  background-repeat: no-repeat;
-}
-.typo3-message a {
-  text-decoration: underline;
-}
-.typo3-message li {
-  margin-bottom: 10px;
-  list-style: disc;
-}
-.typo3-message .message-header {
-  font-weight: bold;
-}
-.message-notice {
-  color: #777;
-  background-color: #f6f7fa;
-  background-image: url('../../../../icons/gfx/notice.png');
-  border-color: #c2cbcf;
-}
-.message-notice a {
-  color: #777;
-}
-.message-information {
-  color: #4c73a1;
-  background-color: #eaf7ff;
-  background-image: url('../../../../icons/gfx/information.png');
-  border-color: #c5dbe6;
-}
-.message-information a {
-  color: #4c73a1;
-}
-.message-ok {
-  color: #3b7826;
-  background-color: #cdeaca;
-  background-image: url('../../../../icons/gfx/ok.png');
-  border-color: #58b548;
-}
-.message-ok a {
-  color: #3b7826;
-}
-.message-warning {
-  color: #9e7d4a;
-  background-color: #fbf6de;
-  background-image: url("../../../../icons/gfx/warning.png");
-  border-color: #b1905c;
-}
-.message-warning a {
-  color: #9e7d4a;
-}
-.message-error {
-  color: #aa0225;
-  background-color: #f6d3cf;
-  background-image: url('../../../../icons/gfx/error.png');
-  border-color: #d66c68;
-}
-.message-error a {
-  color: #aa0225;
-}
-/**
- * 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!
- */
-/* - - - - - - - - - - - - - - - - - - - - -
 Pagetree
 - - - - - - - - - - - - - - - - - - - - - */
 #typo3-pagetree-treeContainer,