GNOME.org
 

[epiphany/wip/exalm/dark: 3/3] error: Make error pages work in dark


commit c1e52c29913c728adf9e5fbf0240a22843c97354
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed Oct 6 13:19:34 2021 +0500

    error: Make error pages work in dark
    
    Same as the last commit, and a few more adjustments.
    
    Recoloring icons is easy when they are monochrome. Unfortunately, here we
    have red icons. So here we have to use complex and fragile filters, assume
    the source icon is #cc0000 and carefully manipulate it to get the precise
    color we want.
    
    We also have to move the style class for it to work. While it could be both
    on the icon and the title, it's easier to add it to the parent instead.
    
    Fix the details expander.

 embed/ephy-web-view.c    |  2 +-
 src/resources/error.css  | 37 ++++++++++++++++++++++++++++++-------
 src/resources/error.html | 12 +++---------
 3 files changed, 34 insertions(+), 17 deletions(-)
---
diff --git a/embed/ephy-web-view.c b/embed/ephy-web-view.c
index 22138d986..f53a6a734 100644
--- a/embed/ephy-web-view.c
+++ b/embed/ephy-web-view.c
@@ -2380,8 +2380,8 @@ ephy_web_view_load_error_page (EphyWebView          *view,
                    page_title,
                    style_sheet,
                    button_action, hidden_button_action,
-                   icon_name,
                    style,
+                   icon_name,
                    msg_title, msg_body,
                    msg_details ? "visible" : "hidden",
                    _("Technical information"),
diff --git a/src/resources/error.css b/src/resources/error.css
index 0f43c3af8..1e6a77866 100644
--- a/src/resources/error.css
+++ b/src/resources/error.css
@@ -7,11 +7,18 @@ html {
     --base-color: #fff;
     --text-color: #000;
     --borders: #d3d7cf;
+    --error-color: #c01c28;
+
+    --icon-invert: 0.2; /* average(0x2e, 0x34, 0x36) / 0xff */
+    /* turns #cc0000 into #c01c28 */
+    --error-filter: hue-rotate(-5.1deg) grayscale(45%) brightness(144%);
 
     /* Misc colors */
     --header-color: #999;
     --header-text-color: white;
     --row-hover-color: rgba(0, 0, 0, .1);
+
+    color-scheme: light dark;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -22,6 +29,11 @@ html {
         --base-color: #2d2d2d;
         --text-color: #fff;
         --borders: #1b1b1b;
+        --error-color: #f66151;
+
+        --icon-invert: 0.93; /* average(0xee, 0xee, 0xec) / 0xff */
+        /* turns #cc0000 into #f66151 */
+        --error-filter: grayscale(74%) brightness(295%) hue-rotate(6.2deg);
 
         /* Misc colors */
         --header-color: #666;
@@ -59,12 +71,12 @@ html {
 
 .error-body .clickable {
     cursor: pointer;
-    color: #888a85;
+    opacity: 0.6;
 }
 
 .error-body .clickable:hover,
 .error-body .clickable:focus {
-    color: #a6ad9c;
+    opacity: 0.8;
 }
 
 #msg-title {
@@ -73,12 +85,23 @@ html {
     font-weight: 300;
 }
 
-#msg-title.default {
-    color: #2e3436;
+#msg-icon {
+    margin-left: auto;
+    margin-right: auto;
+    width: 128px;
+    height: 128px;
+    background-size: cover;
+    opacity: 0.5;
+    filter: brightness(0) invert(var(--icon-invert));
+}
+
+.danger #msg-title {
+    color: var(--error-color);
 }
 
-#msg-title.danger {
-    color: #cc0000;
+.danger #msg-icon {
+    filter: var(--error-filter);
+    opacity: 1;
 }
 
 #msg-details {
@@ -150,5 +173,5 @@ html {
 }
 
 details > summary::-webkit-details-marker {
-  color: black;
+  color: var(--fg-color);
 }
diff --git a/src/resources/error.html b/src/resources/error.html
index 559e70468..6aa9f9ffa 100644
--- a/src/resources/error.html
+++ b/src/resources/error.html
@@ -37,16 +37,10 @@
     }
   </script>
 </head>
-<body class="error-body">
-  <span style="margin-left: auto;
-               margin-right: auto;
-               display: block;
-               width: 128px;
-               height: 128px;
-               background: url(ephy-resource:///org/gnome/epiphany/page-icons/%s) center no-repeat;
-               background-size: cover;"></span>
+<body class="error-body %s">
+  <span id="msg-icon" style="background-image: 
url(ephy-resource:///org/gnome/epiphany/page-icons/%s);"></span>
   <br>
-  <h1 id="msg-title" class="%s">%s</h1>
+  <h1 id="msg-title">%s</h1>
   %s
   <div id="msg-details" class="%s">
     <details>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]