[FEATURE] Rebrush FlashMessage / state colors 66/33666/2
authorFelix Kopp <felix-source@phorax.com>
Fri, 31 Oct 2014 11:26:55 +0000 (12:26 +0100)
committerFrank Nägler <typo3@naegler.net>
Sat, 1 Nov 2014 10:09:49 +0000 (11:09 +0100)
Rebrushes the FlashMessage layout and output. Better
contrast of box and text. Prominent links. Lighter boxes.

Resolves: #62580
Releases: master
Change-Id: I7db1dbf8aa8ce8d626757c001c1f1a1621d1a303
Reviewed-on: http://review.typo3.org/33666
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_message.less
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css

index 4c03db4..123f57e 100644 (file)
  * The TYPO3 project - inspiring people to share!
  */
 
+.alert {
+       border-top: 0;
+       border-right: 0;
+       border-bottom: 0;
+       border-left-width: 6px;
+
+       a {
+               text-decoration: underline;
+       }
+
+       .alert-body {
+               p:last-child {
+                       margin-bottom: 0;
+               }
+       }
+}
+
 .alert-notice {
-  background-color: #f6f7fa;
-  border-color: #eef;
-  color: #777;
+       color: @state-notice-text;
+       background-color: @state-notice-bg;
+       border-color: @state-notice-border;
+
+       a {
+               color: darken(@state-notice-text, 5%);
+
+               &:hover {
+                       color: darken(@state-notice-text, 10%);
+               }
+       }
+}
+
+.alert-success {
+       a {
+               color: darken(@brand-success, 10%);
+
+               &:hover {
+                       color: darken(@brand-success, 15%);
+               }
+       }
+}
+
+.alert-info {
+       a {
+               color: darken(@brand-info, 5%);
+
+               &:hover {
+                       color: darken(@brand-info, 10%);
+               }
+       }
+}
+
+.alert-warning {
+       a {
+               color: @brand-warning;
+
+               &:hover {
+                       color: darken(@brand-warning, 5%)
+               }
+       }
+}
+
+.alert-danger {
+       a {
+               color: @brand-danger;
+
+               &:hover {
+                       color: darken(@brand-danger, 10%);
+               }
+       }
 }
\ No newline at end of file
index 0b657a0..399814d 100644 (file)
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-@state-success-text:             #3b7826;
-@state-success-bg:               #dff0d8;
-@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
+@state-success-text:             rgb(50, 50, 50);
+@state-success-bg:               lighten(@brand-success, 45%);
+@state-success-border:           @brand-success;
 
-@state-info-text:                #4c73a1;
-@state-info-bg:                  #d9edf7;
-@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+@state-info-text:                rgb(50, 50, 50);
+@state-info-bg:                  lighten(@brand-info, 35%);
+@state-info-border:              @brand-info;
 
-@state-warning-text:             #9e7d4a;
-@state-warning-bg:               #fcf8e3;
-@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
+@state-warning-text:             rgb(50, 50, 50);
+@state-warning-bg:               lighten(@brand-warning, 35%);
+@state-warning-border:           @brand-warning;
 
-@state-danger-text:              #aa0225;
-@state-danger-bg:                #f2dede;
-@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+@state-danger-text:              rgb(50, 50, 50);
+@state-danger-bg:                lighten(@brand-danger, 35%);
+@state-danger-border:            @brand-danger;
+
+// TYPO3
+@state-notice-text:              rgb(50, 50, 50);
+@state-notice-bg:                lighten(rgb(140, 140, 140), 40%);
+@state-notice-border:            rgb(140, 140, 140);
 
 
 //== Tooltips
 //## Define alert colors, border radius, and padding.
 
 @alert-padding:               15px;
-@alert-border-radius:         @border-radius-base;
+@alert-border-radius:         0;
 @alert-link-font-weight:      bold;
 
 @alert-success-bg:            @state-success-bg;
index c1bb653..095b3d6 100644 (file)
@@ -938,7 +938,7 @@ small,
 }
 mark,
 .mark {
-  background-color: #fcf8e3;
+  background-color: #fbd8bc;
   padding: .2em;
 }
 .text-left {
@@ -975,28 +975,28 @@ a.text-primary:hover {
   color: #005db3;
 }
 .text-success {
-  color: #3b7826;
+  color: #323232;
 }
 a.text-success:hover {
-  color: #28511a;
+  color: #181818;
 }
 .text-info {
-  color: #4c73a1;
+  color: #323232;
 }
 a.text-info:hover {
-  color: #3c5a7e;
+  color: #181818;
 }
 .text-warning {
-  color: #9e7d4a;
+  color: #323232;
 }
 a.text-warning:hover {
-  color: #7b623a;
+  color: #181818;
 }
 .text-danger {
-  color: #aa0225;
+  color: #323232;
 }
 a.text-danger:hover {
-  color: #78011a;
+  color: #181818;
 }
 .bg-primary {
   color: #fff;
@@ -1006,28 +1006,28 @@ a.bg-primary:hover {
   background-color: #005db3;
 }
 .bg-success {
-  background-color: #dff0d8;
+  background-color: #c7f6d1;
 }
 a.bg-success:hover {
-  background-color: #c1e2b3;
+  background-color: #9befae;
 }
 .bg-info {
-  background-color: #d9edf7;
+  background-color: #d8f0f8;
 }
 a.bg-info:hover {
-  background-color: #afd9ee;
+  background-color: #addff0;
 }
 .bg-warning {
-  background-color: #fcf8e3;
+  background-color: #fbd8bc;
 }
 a.bg-warning:hover {
-  background-color: #f7ecb5;
+  background-color: #f8bd8c;
 }
 .bg-danger {
-  background-color: #f2dede;
+  background-color: #efc7c7;
 }
 a.bg-danger:hover {
-  background-color: #e4b9b9;
+  background-color: #e49f9f;
 }
 .page-header {
   padding-bottom: 8px;
@@ -1987,14 +1987,14 @@ table th[class*="col-"] {
 .table > thead > tr.success > th,
 .table > tbody > tr.success > th,
 .table > tfoot > tr.success > th {
-  background-color: #dff0d8;
+  background-color: #c7f6d1;
 }
 .table-hover > tbody > tr > td.success:hover,
 .table-hover > tbody > tr > th.success:hover,
 .table-hover > tbody > tr.success:hover > td,
 .table-hover > tbody > tr:hover > .success,
 .table-hover > tbody > tr.success:hover > th {
-  background-color: #d0e9c6;
+  background-color: #b1f2c0;
 }
 .table > thead > tr > td.info,
 .table > tbody > tr > td.info,
@@ -2008,14 +2008,14 @@ table th[class*="col-"] {
 .table > thead > tr.info > th,
 .table > tbody > tr.info > th,
 .table > tfoot > tr.info > th {
-  background-color: #d9edf7;
+  background-color: #d8f0f8;
 }
 .table-hover > tbody > tr > td.info:hover,
 .table-hover > tbody > tr > th.info:hover,
 .table-hover > tbody > tr.info:hover > td,
 .table-hover > tbody > tr:hover > .info,
 .table-hover > tbody > tr.info:hover > th {
-  background-color: #c4e3f3;
+  background-color: #c2e7f4;
 }
 .table > thead > tr > td.warning,
 .table > tbody > tr > td.warning,
@@ -2029,14 +2029,14 @@ table th[class*="col-"] {
 .table > thead > tr.warning > th,
 .table > tbody > tr.warning > th,
 .table > tfoot > tr.warning > th {
-  background-color: #fcf8e3;
+  background-color: #fbd8bc;
 }
 .table-hover > tbody > tr > td.warning:hover,
 .table-hover > tbody > tr > th.warning:hover,
 .table-hover > tbody > tr.warning:hover > td,
 .table-hover > tbody > tr:hover > .warning,
 .table-hover > tbody > tr.warning:hover > th {
-  background-color: #faf2cc;
+  background-color: #f9cba4;
 }
 .table > thead > tr > td.danger,
 .table > tbody > tr > td.danger,
@@ -2050,14 +2050,14 @@ table th[class*="col-"] {
 .table > thead > tr.danger > th,
 .table > tbody > tr.danger > th,
 .table > tfoot > tr.danger > th {
-  background-color: #f2dede;
+  background-color: #efc7c7;
 }
 .table-hover > tbody > tr > td.danger:hover,
 .table-hover > tbody > tr > th.danger:hover,
 .table-hover > tbody > tr.danger:hover > td,
 .table-hover > tbody > tr:hover > .danger,
 .table-hover > tbody > tr.danger:hover > th {
-  background-color: #ebcccc;
+  background-color: #eab3b3;
 }
 .table-responsive {
   overflow-x: auto;
@@ -2415,25 +2415,25 @@ select[multiple].form-group-lg .form-control {
 .has-success.checkbox label,
 .has-success.radio-inline label,
 .has-success.checkbox-inline label {
-  color: #3b7826;
+  color: #323232;
 }
 .has-success .form-control {
-  border-color: #3b7826;
+  border-color: #323232;
   -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: #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;
+  border-color: #181818;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #656565;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #656565;
 }
 .has-success .input-group-addon {
-  color: #3b7826;
-  border-color: #3b7826;
-  background-color: #dff0d8;
+  color: #323232;
+  border-color: #323232;
+  background-color: #c7f6d1;
 }
 .has-success .form-control-feedback {
-  color: #3b7826;
+  color: #323232;
 }
 .has-warning .help-block,
 .has-warning .control-label,
@@ -2445,25 +2445,25 @@ select[multiple].form-group-lg .form-control {
 .has-warning.checkbox label,
 .has-warning.radio-inline label,
 .has-warning.checkbox-inline label {
-  color: #9e7d4a;
+  color: #323232;
 }
 .has-warning .form-control {
-  border-color: #9e7d4a;
+  border-color: #323232;
   -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: #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;
+  border-color: #181818;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #656565;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #656565;
 }
 .has-warning .input-group-addon {
-  color: #9e7d4a;
-  border-color: #9e7d4a;
-  background-color: #fcf8e3;
+  color: #323232;
+  border-color: #323232;
+  background-color: #fbd8bc;
 }
 .has-warning .form-control-feedback {
-  color: #9e7d4a;
+  color: #323232;
 }
 .has-error .help-block,
 .has-error .control-label,
@@ -2475,25 +2475,25 @@ select[multiple].form-group-lg .form-control {
 .has-error.checkbox label,
 .has-error.radio-inline label,
 .has-error.checkbox-inline label {
-  color: #aa0225;
+  color: #323232;
 }
 .has-error .form-control {
-  border-color: #aa0225;
+  border-color: #323232;
   -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: #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;
+  border-color: #181818;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #656565;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #656565;
 }
 .has-error .input-group-addon {
-  color: #aa0225;
-  border-color: #aa0225;
-  background-color: #f2dede;
+  color: #323232;
+  border-color: #323232;
+  background-color: #efc7c7;
 }
 .has-error .form-control-feedback {
-  color: #aa0225;
+  color: #323232;
 }
 .has-feedback label ~ .form-control-feedback {
   top: 23px;
@@ -4522,7 +4522,7 @@ a.thumbnail.active {
   padding: 15px;
   margin-bottom: 18px;
   border: 1px solid transparent;
-  border-radius: 2px;
+  border-radius: 0;
 }
 .alert h4 {
   margin-top: 0;
@@ -4550,48 +4550,48 @@ a.thumbnail.active {
   color: inherit;
 }
 .alert-success {
-  background-color: #dff0d8;
-  border-color: #d6e9c6;
-  color: #3b7826;
+  background-color: #c7f6d1;
+  border-color: #1eb941;
+  color: #323232;
 }
 .alert-success hr {
-  border-top-color: #c9e2b3;
+  border-top-color: #1aa339;
 }
 .alert-success .alert-link {
-  color: #28511a;
+  color: #181818;
 }
 .alert-info {
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-  color: #4c73a1;
+  background-color: #d8f0f8;
+  border-color: #41b4dc;
+  color: #323232;
 }
 .alert-info hr {
-  border-top-color: #a6e1ec;
+  border-top-color: #2bacd8;
 }
 .alert-info .alert-link {
-  color: #3c5a7e;
+  color: #181818;
 }
 .alert-warning {
-  background-color: #fcf8e3;
-  border-color: #faebcc;
-  color: #9e7d4a;
+  background-color: #fbd8bc;
+  border-color: #f07814;
+  color: #323232;
 }
 .alert-warning hr {
-  border-top-color: #f7e1b5;
+  border-top-color: #dc6c0e;
 }
 .alert-warning .alert-link {
-  color: #7b623a;
+  color: #181818;
 }
 .alert-danger {
-  background-color: #f2dede;
-  border-color: #ebccd1;
-  color: #aa0225;
+  background-color: #efc7c7;
+  border-color: #c83c3c;
+  color: #323232;
 }
 .alert-danger hr {
-  border-top-color: #e4b9c0;
+  border-top-color: #b73434;
 }
 .alert-danger .alert-link {
-  color: #78011a;
+  color: #181818;
 }
 @-webkit-keyframes progress-bar-stripes {
   from {
@@ -4793,92 +4793,92 @@ a.list-group-item:focus {
   color: #b3dbff;
 }
 .list-group-item-success {
-  color: #3b7826;
-  background-color: #dff0d8;
+  color: #323232;
+  background-color: #c7f6d1;
 }
 a.list-group-item-success {
-  color: #3b7826;
+  color: #323232;
 }
 a.list-group-item-success .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-success:hover,
 a.list-group-item-success:focus {
-  color: #3b7826;
-  background-color: #d0e9c6;
+  color: #323232;
+  background-color: #b1f2c0;
 }
 a.list-group-item-success.active,
 a.list-group-item-success.active:hover,
 a.list-group-item-success.active:focus {
   color: #fff;
-  background-color: #3b7826;
-  border-color: #3b7826;
+  background-color: #323232;
+  border-color: #323232;
 }
 .list-group-item-info {
-  color: #4c73a1;
-  background-color: #d9edf7;
+  color: #323232;
+  background-color: #d8f0f8;
 }
 a.list-group-item-info {
-  color: #4c73a1;
+  color: #323232;
 }
 a.list-group-item-info .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-info:hover,
 a.list-group-item-info:focus {
-  color: #4c73a1;
-  background-color: #c4e3f3;
+  color: #323232;
+  background-color: #c2e7f4;
 }
 a.list-group-item-info.active,
 a.list-group-item-info.active:hover,
 a.list-group-item-info.active:focus {
   color: #fff;
-  background-color: #4c73a1;
-  border-color: #4c73a1;
+  background-color: #323232;
+  border-color: #323232;
 }
 .list-group-item-warning {
-  color: #9e7d4a;
-  background-color: #fcf8e3;
+  color: #323232;
+  background-color: #fbd8bc;
 }
 a.list-group-item-warning {
-  color: #9e7d4a;
+  color: #323232;
 }
 a.list-group-item-warning .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-warning:hover,
 a.list-group-item-warning:focus {
-  color: #9e7d4a;
-  background-color: #faf2cc;
+  color: #323232;
+  background-color: #f9cba4;
 }
 a.list-group-item-warning.active,
 a.list-group-item-warning.active:hover,
 a.list-group-item-warning.active:focus {
   color: #fff;
-  background-color: #9e7d4a;
-  border-color: #9e7d4a;
+  background-color: #323232;
+  border-color: #323232;
 }
 .list-group-item-danger {
-  color: #aa0225;
-  background-color: #f2dede;
+  color: #323232;
+  background-color: #efc7c7;
 }
 a.list-group-item-danger {
-  color: #aa0225;
+  color: #323232;
 }
 a.list-group-item-danger .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-danger:hover,
 a.list-group-item-danger:focus {
-  color: #aa0225;
-  background-color: #ebcccc;
+  color: #323232;
+  background-color: #eab3b3;
 }
 a.list-group-item-danger.active,
 a.list-group-item-danger.active:hover,
 a.list-group-item-danger.active:focus {
   color: #fff;
-  background-color: #aa0225;
-  border-color: #aa0225;
+  background-color: #323232;
+  border-color: #323232;
 }
 .list-group-item-heading {
   margin-top: 0;
@@ -5152,76 +5152,76 @@ a.list-group-item-danger.active:focus {
   border-bottom-color: #0078e6;
 }
 .panel-success {
-  border-color: #d6e9c6;
+  border-color: #1eb941;
 }
 .panel-success > .panel-heading {
-  color: #3b7826;
-  background-color: #dff0d8;
-  border-color: #d6e9c6;
+  color: #323232;
+  background-color: #c7f6d1;
+  border-color: #1eb941;
 }
 .panel-success > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #d6e9c6;
+  border-top-color: #1eb941;
 }
 .panel-success > .panel-heading .badge {
-  color: #dff0d8;
-  background-color: #3b7826;
+  color: #c7f6d1;
+  background-color: #323232;
 }
 .panel-success > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #d6e9c6;
+  border-bottom-color: #1eb941;
 }
 .panel-info {
-  border-color: #bce8f1;
+  border-color: #41b4dc;
 }
 .panel-info > .panel-heading {
-  color: #4c73a1;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
+  color: #323232;
+  background-color: #d8f0f8;
+  border-color: #41b4dc;
 }
 .panel-info > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #bce8f1;
+  border-top-color: #41b4dc;
 }
 .panel-info > .panel-heading .badge {
-  color: #d9edf7;
-  background-color: #4c73a1;
+  color: #d8f0f8;
+  background-color: #323232;
 }
 .panel-info > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #bce8f1;
+  border-bottom-color: #41b4dc;
 }
 .panel-warning {
-  border-color: #faebcc;
+  border-color: #f07814;
 }
 .panel-warning > .panel-heading {
-  color: #9e7d4a;
-  background-color: #fcf8e3;
-  border-color: #faebcc;
+  color: #323232;
+  background-color: #fbd8bc;
+  border-color: #f07814;
 }
 .panel-warning > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #faebcc;
+  border-top-color: #f07814;
 }
 .panel-warning > .panel-heading .badge {
-  color: #fcf8e3;
-  background-color: #9e7d4a;
+  color: #fbd8bc;
+  background-color: #323232;
 }
 .panel-warning > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #faebcc;
+  border-bottom-color: #f07814;
 }
 .panel-danger {
-  border-color: #ebccd1;
+  border-color: #c83c3c;
 }
 .panel-danger > .panel-heading {
-  color: #aa0225;
-  background-color: #f2dede;
-  border-color: #ebccd1;
+  color: #323232;
+  background-color: #efc7c7;
+  border-color: #c83c3c;
 }
 .panel-danger > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #ebccd1;
+  border-top-color: #c83c3c;
 }
 .panel-danger > .panel-heading .badge {
-  color: #f2dede;
-  background-color: #aa0225;
+  color: #efc7c7;
+  background-color: #323232;
 }
 .panel-danger > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #ebccd1;
+  border-bottom-color: #c83c3c;
 }
 .embed-responsive {
   position: relative;
@@ -7360,7 +7360,11 @@ Background color classes
   padding: 15px;
   margin-bottom: 18px;
   border: 1px solid transparent;
-  border-radius: 2px;
+  border-radius: 0;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 0;
+  border-left-width: 6px;
   background-position: 10px 12px;
   background-repeat: no-repeat;
   padding: 12px 12px 12px 36px;
@@ -7379,6 +7383,12 @@ Background color classes
 .typo3-message > p + p {
   margin-top: 5px;
 }
+.typo3-message a {
+  text-decoration: underline;
+}
+.typo3-message .alert-body p:last-child {
+  margin-bottom: 0;
+}
 .typo3-message .message-header {
   font-weight: bold;
   margin-bottom: 9px;
@@ -7411,61 +7421,85 @@ Background color classes
   color: #777;
 }
 .message-information {
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-  color: #4c73a1;
+  background-color: #d8f0f8;
+  border-color: #41b4dc;
+  color: #323232;
   background-image: url('../../../../icons/gfx/information.png');
 }
 .message-information hr {
-  border-top-color: #a6e1ec;
+  border-top-color: #2bacd8;
 }
 .message-information .alert-link {
-  color: #3c5a7e;
+  color: #181818;
+}
+.message-information a {
+  color: #2bacd8;
+}
+.message-information a:hover {
+  color: #249cc6;
 }
 .message-information a {
   color: #4c73a1;
 }
 .message-ok {
-  background-color: #dff0d8;
-  border-color: #d6e9c6;
-  color: #3b7826;
+  background-color: #c7f6d1;
+  border-color: #1eb941;
+  color: #323232;
   background-image: url('../../../../icons/gfx/ok.png');
 }
 .message-ok hr {
-  border-top-color: #c9e2b3;
+  border-top-color: #1aa339;
 }
 .message-ok .alert-link {
-  color: #28511a;
+  color: #181818;
+}
+.message-ok a {
+  color: #178d32;
+}
+.message-ok a:hover {
+  color: #13772a;
 }
 .message-ok a {
   color: #3b7826;
 }
 .message-warning {
-  background-color: #fcf8e3;
-  border-color: #faebcc;
-  color: #9e7d4a;
+  background-color: #fbd8bc;
+  border-color: #f07814;
+  color: #323232;
   background-image: url("../../../../icons/gfx/warning.png");
 }
 .message-warning hr {
-  border-top-color: #f7e1b5;
+  border-top-color: #dc6c0e;
 }
 .message-warning .alert-link {
-  color: #7b623a;
+  color: #181818;
+}
+.message-warning a {
+  color: #f07814;
+}
+.message-warning a:hover {
+  color: #dc6c0e;
 }
 .message-warning a {
   color: #9e7d4a;
 }
 .message-error {
-  background-color: #f2dede;
-  border-color: #ebccd1;
-  color: #aa0225;
+  background-color: #efc7c7;
+  border-color: #c83c3c;
+  color: #323232;
   background-image: url('../../../../icons/gfx/error.png');
 }
 .message-error hr {
-  border-top-color: #e4b9c0;
+  border-top-color: #b73434;
 }
 .message-error .alert-link {
-  color: #78011a;
+  color: #181818;
+}
+.message-error a {
+  color: #c83c3c;
+}
+.message-error a:hover {
+  color: #a32e2e;
 }
 .message-error a {
   color: #aa0225;
@@ -7960,10 +7994,52 @@ table#typo3-history-item img {
  *
  * The TYPO3 project - inspiring people to share!
  */
+.alert {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 0;
+  border-left-width: 6px;
+}
+.alert a {
+  text-decoration: underline;
+}
+.alert .alert-body p:last-child {
+  margin-bottom: 0;
+}
 .alert-notice {
-  background-color: #f6f7fa;
-  border-color: #eef;
-  color: #777;
+  color: #323232;
+  background-color: #f2f2f2;
+  border-color: #8c8c8c;
+}
+.alert-notice a {
+  color: #252525;
+}
+.alert-notice a:hover {
+  color: #181818;
+}
+.alert-success a {
+  color: #178d32;
+}
+.alert-success a:hover {
+  color: #13772a;
+}
+.alert-info a {
+  color: #2bacd8;
+}
+.alert-info a:hover {
+  color: #249cc6;
+}
+.alert-warning a {
+  color: #f07814;
+}
+.alert-warning a:hover {
+  color: #dc6c0e;
+}
+.alert-danger a {
+  color: #c83c3c;
+}
+.alert-danger a:hover {
+  color: #a32e2e;
 }
 /**
  * This file is part of the TYPO3 CMS project.