Break messageBar class out

Move .messageBar out of .dialog into its own standalone class in order to reuse as much of it for the upcoming feature for an undo message for annotations.
ryzokuken · Oct 8, 2024 · 0f0ecaa · 0f0ecaa
1 parent e25832c
commit 0f0ecaa
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 94 deletions.
diff --git a/web/dialog.css b/web/dialog.css
@@ -270,9 +270,6 @@
     }
 
     .messageBar {
-      --message-bar-warning-icon: url(images/messageBar_warning.svg);
-      --closing-button-icon: url(images/messageBar_closingButton.svg);
-
       --message-bar-bg-color: #ffebcd;
       --message-bar-fg-color: #15141a;
       --message-bar-border-color: rgb(0 0 0 / 0.08);
@@ -308,98 +305,7 @@
         --message-bar-close-button-color-hover: HighlightText;
       }
 
-      display: flex;
       position: relative;
-      padding: 12px 8px 12px 0;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 8px;
-      align-self: stretch;
-
-      border-radius: 4px;
-      border: 1px solid var(--message-bar-border-color);
-      background: var(--message-bar-bg-color);
-      color: var(--message-bar-fg-color);
-
-      > div {
-        display: flex;
-        padding-inline-start: 16px;
-        align-items: flex-start;
-        gap: 8px;
-        align-self: stretch;
-
-        &::before {
-          content: "";
-          display: inline-block;
-          width: 16px;
-          height: 16px;
-          mask-image: var(--message-bar-warning-icon);
-          mask-size: cover;
-          background-color: var(--message-bar-icon-color);
-        }
-
-        > div {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 8px;
-          flex: 1 0 0;
-
-          .title {
-            font-size: 13px;
-            font-weight: 590;
-          }
-
-          .description {
-            font-size: 13px;
-          }
-        }
-      }
-
-      .closeButton {
-        position: absolute;
-        width: 32px;
-        height: 32px;
-        inset-inline-end: 8px;
-        inset-block-start: 8px;
-        background: none;
-        border-radius: var(--message-bar-close-button-border-radius);
-        border: var(--message-bar-close-button-border);
-
-        &::before {
-          content: "";
-          display: inline-block;
-          width: 16px;
-          height: 16px;
-          mask-image: var(--closing-button-icon);
-          mask-size: cover;
-          background-color: var(--message-bar-close-button-color);
-        }
-
-        &:is(:hover, :active, :focus)::before {
-          background-color: var(--message-bar-close-button-color-hover);
-        }
-
-        &:hover {
-          background-color: var(--message-bar-close-button-hover-bg-color);
-        }
-
-        &:active {
-          background-color: var(--message-bar-close-button-active-bg-color);
-        }
-
-        &:focus {
-          background-color: var(--message-bar-close-button-focus-bg-color);
-        }
-
-        > span {
-          display: inline-block;
-          width: 0;
-          height: 0;
-          overflow: hidden;
-        }
-      }
     }
 
     .toggler {

diff --git a/web/message_bar.css b/web/message_bar.css
@@ -0,0 +1,119 @@
+.messageBar {
+  --message-bar-warning-icon: url(images/messageBar_warning.svg);
+  --closing-button-icon: url(images/messageBar_closingButton.svg);
+
+  display: flex;
+  position: relative;
+  padding: 12px 8px 12px 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+
+  border-radius: 4px;
+
+  border: 1px solid var(--message-bar-border-color);
+  background: var(--message-bar-bg-color);
+  color: var(--message-bar-fg-color);
+
+  > div {
+    display: flex;
+    padding-inline-start: 16px;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      mask-image: var(--message-bar-warning-icon);
+      mask-size: cover;
+      background-color: var(--message-bar-icon-color);
+    }
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+      flex: 1 0 0;
+
+      .title {
+        font-size: 13px;
+        font-weight: 590;
+      }
+
+      .description {
+        font-size: 13px;
+      }
+    }
+  }
+
+  .closeButton {
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    inset-inline-end: 8px;
+    inset-block-start: 8px;
+    background: none;
+    border-radius: var(--message-bar-close-button-border-radius);
+    border: var(--message-bar-close-button-border);
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      mask-image: var(--closing-button-icon);
+      mask-size: cover;
+      background-color: var(--message-bar-close-button-color);
+    }
+
+    &:is(:hover, :active, :focus)::before {
+      background-color: var(--message-bar-close-button-color-hover);
+    }
+
+    &:hover {
+      background-color: var(--message-bar-close-button-hover-bg-color);
+    }
+
+    &:active {
+      background-color: var(--message-bar-close-button-active-bg-color);
+    }
+
+    &:focus {
+      background-color: var(--message-bar-close-button-focus-bg-color);
+    }
+
+    > span {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
+  }
+}
+
+#undoAnnotationDeleteMessage {
+  --message-bar-bg-color: #DEEAFC;
+  --message-bar-fg-color: #15141a;
+  --message-bar-border-color: rgb(0 0 0 / 0.08);
+  --message-bar-icon-color: #cd411e;
+  --message-bar-close-button-border-radius: 4px;
+  --message-bar-close-button-border: none;
+  --message-bar-close-button-color: var(--text-primary-color);
+  --message-bar-close-button-hover-bg-color: rgb(21 20 26 / 0.14);
+  --message-bar-close-button-active-bg-color: rgb(21 20 26 / 0.21);
+  --message-bar-close-button-focus-bg-color: rgb(21 20 26 / 0.07);
+  --message-bar-close-button-color-hover: var(--text-primary-color);
+
+  /* hacks */
+  position: fixed;
+  bottom: 100px;
+  width: 400px;
+  left: 50%;
+  transform: translateX(-50%);
+}
diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
@@ -16,6 +16,7 @@
 @import url(text_layer_builder.css);
 @import url(annotation_layer_builder.css);
 @import url(xfa_layer_builder.css);
+@import url(message_bar.css);
 /* Ignored in GECKOVIEW builds: */
 @import url(annotation_editor_layer_builder.css);