[GV] Increase the height (48px) of the toolbar in order to fit the a1…

…1y recommendations (bug 1838602) and reorganize the toolbar css to use nested styles.
mozilla · Oct 2, 2024 · 0ce6f8b · 0ce6f8b
1 parent 567df42
commit 0ce6f8b
Showing 1 changed file with 47 additions and 44 deletions.
diff --git a/web/viewer-geckoview.css b/web/viewer-geckoview.css
@@ -37,6 +37,8 @@
   --toolbar-bg-color: #f9f9fb;
   --toolbar-divider-color: #e0e0e6;
   --toolbar-fg-color: #15141a;
+  --toolbar-height: 48px;
+  --toolbar-border-width: 1px;
 
   --toolbarButton-download-icon: url(images/gv-toolbarButton-download.svg);
 }
@@ -110,8 +112,7 @@ body {
 #viewerContainer {
   overflow: auto;
   position: absolute;
-  inset-block: 41px 0;
-  inset-inline: 0;
+  inset: var(--toolbar-height) 0 0;
   outline: none;
 }
 
@@ -176,61 +177,63 @@ body {
   align-items: center;
   position: absolute;
   width: 100%;
-  height: 40px;
+  height: calc(var(--toolbar-height) + var(--toolbar-border-width));
   top: 0;
   left: 0;
-  box-sizing: content-box;
-  border-block-end: solid 1px var(--toolbar-divider-color);
+  padding: 2px;
+  box-sizing: border-box;
+  border-block-end: solid var(--toolbar-border-width)
+    var(--toolbar-divider-color);
   background-color: var(--toolbar-bg-color);
-}
 
-#floatingToolbar.show {
-  z-index: 100000;
-  opacity: 1;
-}
+  &.show {
+    z-index: 100000;
+    opacity: 1;
+  }
 
-#floatingToolbar:not(show) {
-  z-index: -1;
-  opacity: 0;
-}
+  &:not(.show) {
+    z-index: -1;
+    opacity: 0;
+  }
 
-.toolbarButton {
-  display: flex;
-  align-items: center;
-  border-style: none;
-  user-select: none;
-  box-sizing: border-box;
-  background-color: transparent;
-  width: auto;
-  height: auto;
-  outline: none;
-  position: relative;
-}
+  .toolbarButton {
+    display: flex;
+    align-items: center;
+    border-style: none;
+    user-select: none;
+    box-sizing: border-box;
+    background-color: transparent;
+    width: auto;
+    height: 100%;
+    outline: none;
+    position: relative;
 
-.toolbarButton > span {
-  color: var(--toolbar-fg-color);
-  width: auto;
-  height: auto;
-  overflow: hidden;
+    &::before {
+      width: 24px;
+      height: 24px;
+      content: "";
+      background-color: var(--toolbar-fg-color);
+      mask-size: cover;
+      margin-inline: 12px 8px;
+    }
+
+    > span {
+      color: var(--toolbar-fg-color);
+      width: auto;
+      height: auto;
+      overflow: hidden;
+    }
+
+    &#download::before {
+      mask-image: var(--toolbarButton-download-icon);
+    }
+  }
 }
 
 :is(.toolbarButton .dialogButton)[disabled] {
   opacity: 0.5;
 }
 
-.toolbarButton::before {
-  width: 24px;
-  height: 24px;
-  content: "";
-  background-color: var(--toolbar-fg-color);
-  mask-size: cover;
-  margin-inline: 12px 8px;
-}
-
-#download::before {
-  mask-image: var(--toolbarButton-download-icon);
-}
-
 .dialogButton {
   width: auto;
   margin: 3px 4px 2px !important;