[TASK] Redesign TYPO3 error page 43/44243/12
authorMarkus Sommer <markus.sommer@in2code.de>
Fri, 23 Oct 2015 13:29:02 +0000 (15:29 +0200)
committerFrank Nägler <frank.naegler@typo3.org>
Wed, 23 Dec 2015 16:45:16 +0000 (17:45 +0100)
* Error page in global TYPO3 CMS style
* Error message in backend style
* CSS refactor and cleanup

Resolves: #65543
Releases: master
Change-Id: Ia24ada1e11f578ed5bedd71bdbdb63843d7aa5b7
Reviewed-on: https://review.typo3.org/44243
Reviewed-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Tested-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Reviewed-by: Harry Glatz <glatz@analog.de>
Tested-by: Harry Glatz <glatz@analog.de>
Reviewed-by: Markus Sommer <markussom@posteo.de>
Tested-by: Markus Sommer <markussom@posteo.de>
Reviewed-by: Frank Nägler <frank.naegler@typo3.org>
Tested-by: Frank Nägler <frank.naegler@typo3.org>
typo3/sysext/t3skin/stylesheets/standalone/errorpage-message.css
typo3/sysext/t3skin/templates/errorpage-message.html

index 5d6ca97..4af680c 100644 (file)
-* {
-       padding: 0;
-       margin: 0;
+/*!
+ *  Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+/* FONT PATH
+ * -------------------------- */
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('../../../../../../typo3/sysext/t3skin/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?v=4.4.0');
+  src: url('../../../../../../typo3/sysext/t3skin/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../../../../../../typo3/sysext/t3skin/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../../../../../../typo3/sysext/t3skin/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../../../../../../typo3/sysext/t3skin/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../../../../../../typo3/sysext/t3skin/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 body {
-       color: #000000;
-       font-family: Verdana,Arial,Helvetica,sans-serif;
-       font-size: 11px;
-       line-height: 14px;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #000;
+  background-color: #fff;
+  word-break: normal;
 }
 
-.t3-message-page {
-       background: url("../../images/backgrounds/gray-gradient.png") repeat-x fixed 0 0 #494949;
-       padding-bottom: 20px;
-       padding-top: 75px;
+* {
+  margin: 0;
+  padding: 0;
 }
 
-.t3-message-page .t3-message-page-logo {
-       margin: 0 0 30px;
+p {
+  margin-bottom: 10px;
 }
 
-.t3-errorpage-message .t3-message-page-logo {
-       background-image: url("../../images/login/typo3logo-white-greyback.gif");
-       background-position: right;
-       background-repeat: no-repeat;
-       height: auto;
-       padding: 0;
+.fa {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.t3-errorpage-message .t3-message-page-logo img {
-       visibility: hidden;
+.fa-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
 }
-
-.t3-message-page-container {
-       color: #606060;
-       font-size: 11px;
-       text-align: left;
-       margin: 30px 16% 10px;
-       width: 456px;
+.fa-stack-1x,
+.fa-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.fa-stack-1x {
+  line-height: inherit;
+}
+.fa-stack-2x {
+  font-size: 2em;
 }
 
-.t3-message-page .typo3-message {
-       background-position: 10px 12px;
-       background-repeat: no-repeat;
-       border: 1px solid;
-       padding: 12px 12px 12px 36px;
+.callout-danger .media .fa-stack {
+  color: #efc7c7;
+}
+.callout-danger .media .fa-stack > .fa:first-child {
+  color: #c83c3c;
 }
 
-.t3-message-page .message-error {
-       background-color: #f6d3cf;
-       background-image: url("../../images/icons/status/dialog-error.png");
-       border-color: #d66c68;
-       color: #aa0225;
+.fa-circle:before {
+  content: "\f111";
 }
 
-.t3-message-page .message-warning {
-       background-color: #fbf6de;
-       background-image: url("../../images/icons/status/dialog-warning.png");
-       border-color: #b1905c;
-       color: #9e7d4a;
+.fa-warning:before,
+.fa-exclamation-triangle:before {
+  content: "\f071";
 }
 
-.message-error a {
-       color: #aa0225;
+.media-right,
+.media > .pull-right {
+  padding-left: 10px;
+}
+.media-left,
+.media > .pull-left {
+  padding-right: 10px;
+}
+.media-left,
+.media-right,
+.media-body {
+  display: table-cell;
+  vertical-align: top;
 }
 
-.message-error a:hover {
-       color: #000000;
+.media-body {
+  vertical-align: middle;
 }
 
-.message-warning a {
-       color: #9e7d4a;
+.t3-message-page {
+  background-color: #eee;
+  display: table;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
-.message-warning a:hover {
-       color: #000000;
+.t3-message-page-container {
+  max-width: 600px;
+  margin: auto;
 }
 
-.t3-message-page .t3-message-page-message {
-       background-position: 20px 20px;
-       padding-left: 45px;
-       padding-bottom: 20px;
+.typo3-error-image {
+  max-width: 150px;
+  display: block;
+  height: auto;
 }
 
-.t3-message-page h1 {
-       font-size: 15px;
-       margin-top: 9px;
-       margin-bottom: 25px;
+.t3-error-wrap {
+  display: table-cell;
+  vertical-align: middle;
 }
 
-.t3-message-page p.t3-error-text {
-       font-weight: bold;
+.t3-message-page .t3-message-page-logo {
+  margin: 0 0 30px;
 }
 
-.t3-message-page p {
-       margin-bottom: 1em;
+#typo3-messages {
+  margin-bottom: 10px;
 }
 
 #t3-footer {
-       border-top: 1px solid #5c5c5c;
-       font-size: 10px;
-       margin: 40px 16% 10px;
-       width: 456px;
+  border-top: 1px solid #5c5c5c;
 }
 
 #t3-copyright-notice {
-       color: #797878;
-       margin-top: 15px;
+  text-align: justify;
+  word-break: normal;
+  color: #797878;
+  margin-top: 15px;
+  font-size: 10px;
 }
 
 #t3-copyright-notice a {
-       color: #797878;
-       text-decoration: underline;
+  color: #797878;
+  text-decoration: underline;
 }
 
 #t3-copyright-notice a:hover {
-       color: #b0b0b0;
+  color: #b0b0b0;
+}
+
+.callout {
+  background-color: #f0f0f0;
+  border-left: 3px solid #cccccc;
+  margin: 20px 0;
+  padding: 20px;
+  color: #333333;
 }
 
-.shadow-box-top-428 {
-       background-image: url("../../images/shadows/box-top-428.png");
-       background-position: center bottom;
-       background-repeat: no-repeat;
-       height: 4px;
+.callout a{
+    color: #c83c3c;
 }
 
-.shadow-box-bottom-424 {
-       background-image: url("../../images/shadows/box-bottom-424.png");
-       background-position: center top;
-       background-repeat: no-repeat;
-       height: 3px;
+.callout-danger {
+  background-color: #efc7c7;
+  border-color: #c83c3c;
+  color: #333333;
 }
index f3b3009..5e8ff1c 100644 (file)
 
 <body class="t3-message-page t3-###CSS_CLASS###page-message">
 
-<div class="t3-message-page-container">
-       <div class="t3-message-page-logo">
-               <img src="###TYPO3_mainDir###sysext/t3skin/images/login/typo3logo-white-greyback.gif" alt="TYPO3 logo" />
-       </div>
-       <div class="shadow-box-top-428"></div>
-       <div class="t3-message-page-message typo3-message message-###CSS_CLASS###">
-               <h1>###TITLE###</h1>
-               <p class="t3-###CSS_CLASS###-text">###MESSAGE###</p>
-       </div>
-       <div class="shadow-box-bottom-424"></div>
-</div>
+<div class="t3-error-wrap">
+       <div class="t3-message-page-container">
+               <div class="t3-message-page-logo">
+                       <img src="###TYPO3_mainDir###sysext/backend/Resources/Public/Images/typo3_orange.svg" class="typo3-error-image" alt="TYPO3 logo">
+               </div>
+               <div class="callout callout-danger">
+                       <div class="media">
+                               <div class="media-left">
+                    <span class="fa-stack fa-lg callout-icon">
+                        <i class="fa fa-circle fa-stack-2x"></i>
+                        <i class="fa fa-exclamation-triangle fa-stack-1x"></i>
+                    </span>
+                               </div>
+                               <div class="media-body">
+                                       <h4 class="alert-title">###TITLE###</h4>
 
-<div id="t3-footer">
-       <div id="t3-copyright-notice">
-               TYPO3 CMS is an open source content management system. To maintain the quality of the system and to improve it, please help us by donating.
-               TYPO3 CMS. Copyright &copy; ###TYPO3_copyright_year### Kasper Skårhøj. Extensions are copyright of their respective owners. Go to https://typo3.org/ for details.
-               TYPO3 CMS comes with ABSOLUTELY NO WARRANTY. This is free software, and you are welcome to redistribute it under certain conditions. Obstructing the appearance of this notice is prohibited by law.
+                                       <div class="callout-body">
+                                               ###MESSAGE###
+                                       </div>
+                               </div>
+                       </div>
+               </div>
+               <div id="t3-footer">
+                       <div id="t3-copyright-notice">
+                               TYPO3 CMS is an open source content management system. To maintain the quality of the system and to improve it, please help us by
+                               donating.
+                               TYPO3 CMS. Copyright &copy; ###TYPO3_copyright_year### Kasper Skårhøj. Extensions are copyright of their respective owners. Go to
+                               https:typo3.org/ for details.
+                               TYPO3 CMS comes with ABSOLUTELY NO WARRANTY. This is free software, and you are welcome to redistribute it under certain conditions.
+                               Obstructing the appearance of this notice is prohibited by law.
+                       </div>
+               </div>
        </div>
 </div>
 
 </body>
 </html>
+