diff --git a/css/leptonContent.css b/css/leptonContent.css index d42e866..03b4729 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -513,11 +513,13 @@ { /* Illustrations Position */ #errorPageContainer, + .neterror > .container, .description-wrapper { min-height: 300px; background-position: left center; background-repeat: no-repeat; background-size: 38%; + background-image: var(--uc-error-llustration); } #errorPageContainer { @@ -545,36 +547,42 @@ } @-moz-document url-prefix("about:neterror?e=connectionFailure"), url-prefix("about:neterror?e=netInterrupt"), - url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netReset"), + url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netOffline"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") { - #errorPageContainer { - background-image: url("../icons/error-connection-failure.svg"); + :root { + --uc-error-llustration: url(../icons/error-connection-failure.svg); } } @-moz-document url-prefix("about:neterror?e=dnsNotFound") { - #errorPageContainer { - background-image: url("../icons/error-server-not-found.svg"); + :root { + --uc-error-llustration: url(../icons/error-server-not-found.svg); } } - @-moz-document url-prefix("about:neterror?e=malformedURI") { - #errorPageContainer { - background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg"); + @-moz-document url-prefix("about:neterror?e=blockedByPolicy"), + url-prefix("about:neterror?e=deniedPortAccess"), + url-prefix("about:neterror?e=malformedURI") { + :root { + --uc-error-llustration: url(chrome://browser/skin/illustrations/error-malformed-url.svg); } } @-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") { - #errorPageContainer { - background-image: url("../icons/blue-berror.svg"); + :root { + --uc-error-llustration: url(../icons/blue-berror.svg); + } + + #errorPageContainer, + .neterror > .container { background-size: 18.5em; } } @-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") { - .description-wrapper { - background-image: url("../icons/error-session-restore.svg"); + :root { + --uc-error-llustration: url(../icons/error-session-restore.svg); } } @-moz-document url-prefix("about:neterror?e=fileNotFound") { diff --git a/icons/error-malformed-url.svg b/icons/error-malformed-url.svg new file mode 100644 index 0000000..831328d --- /dev/null +++ b/icons/error-malformed-url.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/contents/_error_page.scss b/src/contents/_error_page.scss index aac860c..26283c9 100644 --- a/src/contents/_error_page.scss +++ b/src/contents/_error_page.scss @@ -4,11 +4,13 @@ { /* Illustrations Position */ #errorPageContainer, + .neterror > .container, .description-wrapper { min-height: 300px; background-position: left center; background-repeat: no-repeat; background-size: 38%; + background-image: var(--uc-error-llustration); } #errorPageContainer { @@ -34,33 +36,30 @@ //-- Mixin --------------------------------------------------------------------- -@mixin _backgroundImage($imgURL, $important: false) { - background-image: url($imgURL) if($important, !important, null); - @content; -} - @mixin _errorContainerImage($imgURL) { - #errorPageContainer { - @include _backgroundImage($imgURL) { - @content; - } + :root { + --uc-error-llustration: url(#{$imgURL}); + } + #errorPageContainer, + .neterror > .container { + @content; } } @mixin _errorDescriptionImage($imgURL) { + :root { + --uc-error-llustration: url(#{$imgURL}); + } .description-wrapper { - @include _backgroundImage($imgURL) { - @content; - } + @content; } } @mixin _errorTitleImage($imgURL) { @media (min-width: 970px) { .title { - @include _backgroundImage($imgURL, true) { - @content; - } + background-image: url($imgURL) !important; + @content; } } } @@ -69,8 +68,8 @@ @-moz-document url-prefix("about:neterror?e=connectionFailure"), url-prefix("about:neterror?e=netInterrupt"), - url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netReset"), + url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netOffline"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") { @@ -79,7 +78,9 @@ @-moz-document url-prefix("about:neterror?e=dnsNotFound") { @include _errorContainerImage("../icons/error-server-not-found.svg"); } -@-moz-document url-prefix("about:neterror?e=malformedURI") { +@-moz-document url-prefix("about:neterror?e=blockedByPolicy"), + url-prefix("about:neterror?e=deniedPortAccess"), + url-prefix("about:neterror?e=malformedURI") { @include _errorContainerImage("chrome://browser/skin/illustrations/error-malformed-url.svg"); } @-moz-document url-prefix("about:neterror?e=clockSkewError"),