third and last part of syncing LCARStrek with Firefox 52 browser windows theme changes

diff --git a/LCARStrek/browser/aboutNetError.css b/LCARStrek/browser/aboutNetError.css
index 2c5048435528e8c45a11ce9dfcee979f23d34ced..acb4e8a405581a46b694afa314b6ddd1b14b8851 100644 (file)
--- a/LCARStrek/browser/aboutNetError.css
+++ b/LCARStrek/browser/aboutNetError.css
@@ -16,6 +16,10 @@ body.certerror {
                                             #FFCF00 66%, #FFCF00);
 }
 
                                             #FFCF00 66%, #FFCF00);
 }
 

+body.captiveportal .title {
+  background-image: url("wifi.svg");
+}
+

 body.certerror .title {
   background-image: url("cert-error.svg");
 }
 body.certerror .title {
   background-image: url("cert-error.svg");
 }


@@ -39,15 +43,15 @@ button:disabled {
   display: none;
 }
 
   display: none;
 }
 

-#certErrorButtonContainer {
+#certErrorAndCaptivePortalButtonContainer {

   display: none;
 }
 
   display: none;
 }
 

-body.certerror #certErrorButtonContainer {
+body:not(.neterror) #certErrorAndCaptivePortalButtonContainer {

   display: flex;
 }
 
   display: flex;
 }
 

-body.certerror #netErrorButtonContainer {
+body:not(.neterror) #netErrorAndCaptivePortalButtonContainer {

   display: none;
 }
 
   display: none;
 }
 


@@ -64,7 +68,19 @@ body.certerror #netErrorButtonContainer {
   display: none;
 }
 
   display: none;
 }
 

-body.certerror #advancedButton {
+body.captiveportal #returnButton {
+  display: none;
+}
+
+body:not(.captiveportal) #openPortalLoginPageButton {
+  display: none;
+}
+
+#openPortalLoginPageButton {
+  margin-inline-start: 0;
+}
+
+body:not(.neterror) #advancedButton {

   display: block;
 }
 
   display: block;
 }
 

diff --git a/LCARStrek/browser/aboutPrivateBrowsing.css b/LCARStrek/browser/aboutPrivateBrowsing.css
deleted file mode 100644 (file)
index 541f18c..0000000
--- a/LCARStrek/browser/aboutPrivateBrowsing.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-body.private > #errorPageContainer {
-  background-image: url("chrome://browser/skin/Privacy-48.png");
-}
-
-body.normal > #errorPageContainer {
-  background-image: url("chrome://global/skin/icons/alert-question.gif");
-}
-
-#clearRecentHistoryDesc {
-  margin-top: 2em;
-}
-
-#clearRecentHistoryDesc > p {
-  font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
-}
-
-#startPrivateBrowsingDesc > button {
-  margin-inline-start: 0;
-}
-
-#footerDesc > p {
-  font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
-}
-
-#moreInfo {
-  font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */
-  padding-inline-start: 25px;
-  background: url("chrome://global/skin/icons/information-16.png") no-repeat top left;
-}
-
-#moreInfo:dir(rtl) {
-  background-position: top right;
-}
-
-#moreInfoText {
-  margin-bottom: 0;
-}
-
-#moreInfoLinkContainer {
-  margin-top: 0.5em;
-}

diff --git a/LCARStrek/browser/aboutTabCrashed.css b/LCARStrek/browser/aboutTabCrashed.css
index d8658ad346fdb923f5bdfa8b94595b570817224e..24e7677658882a8640f027a02c03f693887e78c1 100644 (file)
--- a/LCARStrek/browser/aboutTabCrashed.css
+++ b/LCARStrek/browser/aboutTabCrashed.css
@@ -2,15 +2,35 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 

+body {
+  font-size: 1.25rem;
+}
+

 .title {
   background-image: url("chrome://browser/skin/tab-crashed.svg");
 }
 
 .title {
   background-image: url("chrome://browser/skin/tab-crashed.svg");
 }
 

+.title > h1,
+.offers {
+  margin-left: 14px;
+}
+
+.title > h1 {
+  /**
+   * Add commentary?
+   */
+  padding-right: 14px;
+}
+
+.container {
+  width: 45%;
+}
+

 #reportSent {
   font-weight: bold;
 }
 
 #reportSent {
   font-weight: bold;
 }
 

-#crash-reporter-container {
+#reportBox {

   width: 80%;
   background-color: var(--in-content-box-background);
   margin: 24px 0;
   width: 80%;
   background-color: var(--in-content-box-background);
   margin: 24px 0;


@@ -19,6 +39,10 @@
   border-radius: 2px;
 }
 
   border-radius: 2px;
 }
 

+#reportBox > h2:first-child {
+  margin-top: 0;
+}
+

 #crash-reporter-title {
   font-weight: bold;
   margin: 0 0 14px 0;
 #crash-reporter-title {
   font-weight: bold;
   margin: 0 0 14px 0;


@@ -31,12 +55,48 @@ textarea {
   resize: none;
 }
 
   resize: none;
 }
 

+input[type="text"],
+input[type="checkbox"] {
+  -moz-margin-start: 0px;
+}
+

 #options {
   list-style: none;
   margin-inline-start: 0;
 }
 
 #options {
   list-style: none;
   margin-inline-start: 0;
 }
 

-input[type="text"],
-#options > li {
-  margin: 14px 0 0 0;
+#options > li,
+#email {
+  margin-top: 14px;
+}
+
+.checkbox-with-label {
+  display: flex;
+}
+
+.checkbox-with-label > label {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+/**
+ * Hack alert: the #autoSubmit checkbox has a long label, which means
+ * it often wraps, at least in en-US. Bug 418833 and bug 1317795 allows
+ * us to fix this properly, but bug 418833 didn't uplift in time for this
+ * release. We use some hackery here to make sure that this label wraps
+ * properly, and doesn't end up underneath the checkbox pseudoelement.
+ * We do this by setting a negative margin on the pseudoelement, and then
+ * a positive equivalent margin on the label itself.
+ *
+ * The magic number of 35px is derived from the total width of the checkbox.
+ * The checkbox width is explicitly set at 23px. This, plus the 1px border on either
+ * side gives us 25px. Then there's the 10px margin-inline-end, which gives us 35px.
+ */
+#autoSubmit + label:before {
+  margin-inline-start: -35px;
+}
+
+#autoSubmit + label {
+  margin-inline-start: 35px;
+  line-height: 1.75em;

 }
 }

diff --git a/LCARStrek/browser/addons/addon-install-anchor.svg b/LCARStrek/browser/addons/addon-install-anchor.svg
index 6d469c9a3eaa4c571ea37ad9b720294774bf37d6..e1fda049558a1a1574d30400258049c7f263daa8 100644 (file)
--- a/LCARStrek/browser/addons/addon-install-anchor.svg
+++ b/LCARStrek/browser/addons/addon-install-anchor.svg
@@ -3,9 +3,27 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

+     class="fieldtext"

      width="16" height="16" viewBox="0 0 16 16">
      width="16" height="16" viewBox="0 0 16 16">

+<style>
+.fieldtext {
+  fill: #A09090;
+}
+
+.highlighttext {
+  fill: #FFCF00;
+}
+
+.black {
+  fill: #FFCF00;
+}
+
+.white {
+  fill: #FFCF00;
+}
+</style>

   <defs>
     <path id="shape-notifications-addons" d="M10,15c0.5,0,1-0.4,1-1v-3c0,0,0-0.8,0.8-0.8c0.6,0,0.6,0.8,1.8,0.8c0.6,0,1.5-0.2,1.5-2c0-1.8-0.9-2-1.5-2 c-1.1,0-1.1,0.7-1.8,0.7C11,7.7,11,7,11,7V6c0-0.6-0.5-1-1-1H8c0,0-0.8,0-0.8-0.8C7.2,3.6,8,3.6,8,2.5C8,1.9,7.8,1,6,1 C4.2,1,4,1.9,4,2.5c0,1.1,0.8,1.1,0.8,1.8C4.8,5,4,5,4,5H2C1.5,5,1,5.4,1,6l0,1.5c0,0-0.1,1,1.1,1c0.8,0,0.9-1,1.9-1 C4.5,7.4,5,8,5,9c0,1-0.5,1.6-1,1.6c-1,0-1.1-1.1-1.9-1.1C0.9,9.5,1,10.8,1,10.8V14c0,0.6,0.5,1,1,1l2.6,0c0,0,1.1,0,1.1-1 c0-0.8-1-0.1-1-1.1c0-0.5,0.7-1.2,1.8-1.2s1.8,0.7,1.8,1.2c0,1-1.1,0.3-1.1,1.1c0,1,1.2,1,1.2,1H10z"/>
   </defs>
   <defs>
     <path id="shape-notifications-addons" d="M10,15c0.5,0,1-0.4,1-1v-3c0,0,0-0.8,0.8-0.8c0.6,0,0.6,0.8,1.8,0.8c0.6,0,1.5-0.2,1.5-2c0-1.8-0.9-2-1.5-2 c-1.1,0-1.1,0.7-1.8,0.7C11,7.7,11,7,11,7V6c0-0.6-0.5-1-1-1H8c0,0-0.8,0-0.8-0.8C7.2,3.6,8,3.6,8,2.5C8,1.9,7.8,1,6,1 C4.2,1,4,1.9,4,2.5c0,1.1,0.8,1.1,0.8,1.8C4.8,5,4,5,4,5H2C1.5,5,1,5.4,1,6l0,1.5c0,0-0.1,1,1.1,1c0.8,0,0.9-1,1.9-1 C4.5,7.4,5,8,5,9c0,1-0.5,1.6-1,1.6c-1,0-1.1-1.1-1.9-1.1C0.9,9.5,1,10.8,1,10.8V14c0,0.6,0.5,1,1,1l2.6,0c0,0,1.1,0,1.1-1 c0-0.8-1-0.1-1-1.1c0-0.5,0.7-1.2,1.8-1.2s1.8,0.7,1.8,1.2c0,1-1.1,0.3-1.1,1.1c0,1,1.2,1,1.2,1H10z"/>
   </defs>

-  <use id="default" xlink:href="#shape-notifications-addons"/>
+  <use xlink:href="#shape-notifications-addons"/>

 </svg>
 </svg>

diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index 6a07f64b55ba8e8477c3f1884ab750eb4206ed13..b7aa6fb82736b48685ab2484392fe47d9be88055 100644 (file)
--- a/LCARStrek/browser/browser.css
+++ b/LCARStrek/browser/browser.css
@@ -51,7 +51,7 @@ menubar {
   --arrowpanel-active: #FF9F00;
   --arrowpanel-dimmed: #402000;
   --arrowpanel-dimmed-further: #794900;
   --arrowpanel-active: #FF9F00;
   --arrowpanel-dimmed: #402000;
   --arrowpanel-dimmed-further: #794900;

-  --arrowpanel-dimmed-even-further: 603000;
+  --arrowpanel-dimmed-even-further: #603000;

 
   --urlbar-separator-color: #9C9CFF;
 }
 
   --urlbar-separator-color: #9C9CFF;
 }


@@ -1277,14 +1277,14 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
 
 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
 
 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,

-#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,

 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
 /*  padding-inline-end: 17px;*/
 }
 
 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
 /*  padding-inline-end: 17px;*/
 }
 
 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,

-#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
+#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {

   /* horizontal padding + border + icon width */
 /*  max-width: 43px;*/
 }
   /* horizontal padding + border + icon width */
 /*  max-width: 43px;*/
 }


@@ -2020,6 +2020,13 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
   height: 16px;
 }
 
   height: 16px;
 }
 

+#urlbar[actiontype="extension"] > #identity-box > #identity-icon {
+  -moz-image-region: inherit;
+  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
+  width: 16px;
+  height: 16px;
+}
+

 /* SHARING ICON */
 
 #sharing-icon {
 /* SHARING ICON */
 
 #sharing-icon {


@@ -2170,15 +2177,56 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box
   padding: 0px 1px 0px 1px;
 }
 
   padding: 0px 1px 0px 1px;
 }
 

+#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
+  margin-inline-start: 4px;
+  margin-inline-end: 0;
+}
+

 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
   font: icon;
 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
   font: icon;

-  margin-inline-start: 6px;
+  margin-inline-start: 4px;

 }
 
 #PopupAutoComplete > richlistbox {
   padding: 0;
 }
 
 }
 
 #PopupAutoComplete > richlistbox {
   padding: 0;
 }
 

+/* Login form autocompletion */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
+  display: initial;
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
+  list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
+}
+
+/* Insecure field warning */
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
+  background-color: var(--arrowpanel-dimmed);
+  border-bottom: 1px solid var(--panel-separator-color);
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
+  background-color: var(--arrowpanel-dimmed-further);
+  color: #FFCF00;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
+  color: #A09090;
+  font-size: 1em;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
+  color: inherit;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
+  list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
+}
+

 /* === END autocomplete.inc.css === */
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
 /* === END autocomplete.inc.css === */
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {


@@ -2912,8 +2960,8 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-
   padding: 0;
 }
 
   padding: 0;
 }
 

-.tab-icon-sound[soundplaying-scheduledremoval]:not(:hover),
-.tab-icon-overlay[soundplaying-scheduledremoval]:not(:hover) {
+.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
+.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {

   transition: opacity .3s linear var(--soundplaying-removal-delay);
   opacity: 0;
 }
   transition: opacity .3s linear var(--soundplaying-removal-delay);
   opacity: 0;
 }


@@ -3484,7 +3532,7 @@ html|*#webRTC-previewVideo {
 /* INSTALL ADDONS */
 
 .install-icon {
 /* INSTALL ADDONS */
 
 .install-icon {

-  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
+  list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);

 }
 
 .popup-notification-icon[popupid="xpinstall-disabled"],
 }
 
 .popup-notification-icon[popupid="xpinstall-disabled"],


@@ -5511,19 +5559,17 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
 
 #ContentSelectDropdown > menupopup > menucaption,
 #ContentSelectDropdown > menupopup > menuitem {
 
 #ContentSelectDropdown > menupopup > menucaption,
 #ContentSelectDropdown > menupopup > menuitem {

-  padding: 4px 6px;
+  padding: 0 6px;
+  border-width: 0;
+/*  font: -moz-list;*/

 }
 
 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
 }
 
 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {

-  font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
-  font-size: 11px;
-  /**
-   * Remove the extra vertical padding set by menu.css since
-   * the menuitem itself will include enough padding.
-   */
-  padding-top: 0px;
-  padding-bottom: 0px;
+  /* Padding should follow the 4/12 ratio, where 12px is the default font-size
+     with 4px being the preferred padding size. */
+  padding-top: .3333em;
+  padding-bottom: .3333em;

 }
 
 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
 }
 
 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {


@@ -5543,8 +5589,10 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
   color: #A09090;
 }
 
   color: #A09090;
 }
 

-#ContentSelectDropdown > .isOpenedViaTouch > menucaption,
-#ContentSelectDropdown > .isOpenedViaTouch > menuitem {
-  padding-top: 11px;
-  padding-bottom: 11px;
+#ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
+#ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
+  /* Touch padding should follow the 11/12 ratio, where 12px is the default
+     font-size with 11px being the preferred padding size. */
+  padding-top: .9167em;
+  padding-bottom: .9167em;

 }
 }

diff --git a/LCARStrek/browser/downloads/allDownloadsViewOverlay.css b/LCARStrek/browser/downloads/allDownloadsViewOverlay.css
index 1c945f232aadcc61aaf42439dfcb64bf5bea9aaa..4ac7d8e0d666992f44b4481a8fe077acec93e301 100644 (file)
--- a/LCARStrek/browser/downloads/allDownloadsViewOverlay.css
+++ b/LCARStrek/browser/downloads/allDownloadsViewOverlay.css
@@ -4,6 +4,9 @@
 
 /* === BEGIN allDownloadsViewOverlay.inc.css === */
 
 
 /* === BEGIN allDownloadsViewOverlay.inc.css === */
 

+/* In the original, this is at the end of the file as a preprocessor-include */
+@import url("progressmeter.inc.css");
+

 /*** View and outer controls ***/
 
 #downloadsRichListBox {
 /*** View and outer controls ***/
 
 #downloadsRichListBox {


@@ -21,16 +24,13 @@
 }
 
 .downloadTypeIcon {
 }
 
 .downloadTypeIcon {

-  margin-top: 8px;
-  margin-inline-end: 12px;
-  margin-bottom: 8px;
-  margin-inline-start: 0;
+  margin: 8px 13px;

   width: 32px;
   height: 32px;
 }
 
 .downloadBlockedBadge {
   width: 32px;
   height: 32px;
 }
 
 .downloadBlockedBadge {

-  margin: 0 4px;
+  margin: 0 5px;

   background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
 }
 
   background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
 }
 


@@ -51,14 +51,15 @@ richlistitem.download > toolbarseparator {
 }
 
 .downloadTarget {
 }
 
 .downloadTarget {

-  margin-bottom: 3px;
-  cursor: inherit;
+  margin: 0;

 }
 
 .downloadDetails {
   opacity: 0.7;
   font-size: 95%;
 }
 
 .downloadDetails {
   opacity: 0.7;
   font-size: 95%;

-  cursor: inherit;
+  /* Use calc() to keep the height consistent with .downloadTarget, so that the
+     progress bar can be vertically centered. */
+  margin: 4px 0 calc(1em / 0.95 - 1em);

 }
 
 .downloadButton {
 }
 
 .downloadButton {


@@ -66,9 +67,9 @@ richlistitem.download > toolbarseparator {
   background: transparent;
   min-width: 0;
   min-height: 0;
   background: transparent;
   min-width: 0;
   min-height: 0;

-  margin: 3px;
+  margin: 0;

   border: none;
   border: none;

-  padding: 5px;
+  padding: 0 18px;

   color: inherit;
 }
 
   color: inherit;
 }
 


@@ -76,7 +77,6 @@ richlistitem.download > toolbarseparator {
   -moz-appearance: none;
   padding: 2px !important;
   border-radius: 50%;
   -moz-appearance: none;
   padding: 2px !important;
   border-radius: 50%;

-  color: graytext;

 }
 
 .downloadButton > .button-box > .button-icon {
 }
 
 .downloadButton > .button-box > .button-icon {


@@ -100,10 +100,6 @@ richlistitem.download > toolbarseparator {
   background-color: #FF9F00;
 }
 
   background-color: #FF9F00;
 }
 

-richlistitem.download[selected] > .downloadButtonArea > .downloadButton > .button-box {
-  color: inherit;
-}
-

 richlistitem.download[selected] > .downloadButtonArea > .downloadButton:hover > .button-box {
   background-color: #FFCF00;
   color: #000000;
 richlistitem.download[selected] > .downloadButtonArea > .downloadButton:hover > .button-box {
   background-color: #FFCF00;
   color: #000000;


@@ -128,6 +124,9 @@ richlistitem.download[selected] > .downloadButtonArea > .downloadButton:hover:ac
   list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
 }
 
   list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
 }
 

+/*** Progressmeter ***/
+/* %include progressmeter.inc.css - this happens as @import at the start of the file */
+

 /* === END allDownloadsViewOverlay.inc.css === */
 
 /*** List items ***/
 /* === END allDownloadsViewOverlay.inc.css === */
 
 /*** List items ***/

diff --git a/LCARStrek/browser/downloads/downloads.css b/LCARStrek/browser/downloads/downloads.css
index a59e09757d7929f3a6593ae8a0073880450638c2..e1be297a0e59997febf4ad29dfb450a04393b674 100644 (file)
--- a/LCARStrek/browser/downloads/downloads.css
+++ b/LCARStrek/browser/downloads/downloads.css
@@ -4,6 +4,9 @@
 
 /* === BEGIN downloads.inc.css === */
 
 
 /* === BEGIN downloads.inc.css === */
 

+/* In the original, this is at the end of the file as a preprocessor-include */
+@import url("progressmeter.inc.css");
+

 /*** Panel and outer controls ***/
 
 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
 /*** Panel and outer controls ***/
 
 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {


@@ -18,10 +21,8 @@
 
 #downloadsListBox {
   background-color: transparent;
 
 #downloadsListBox {
   background-color: transparent;

-  padding: 0;

   color: inherit;
   margin: 0;
   color: inherit;
   margin: 0;

-  border: none;

 }
 
 #emptyDownloads {
 }
 
 #emptyDownloads {


@@ -128,8 +129,6 @@ richlistitem[type="download"]:hover > toolbarseparator,
 }
 
 #downloadsSummary {
 }
 
 #downloadsSummary {

-  padding: 0 12px;
-  cursor: pointer;

   -moz-user-focus: normal;
 }
 
   -moz-user-focus: normal;
 }
 


@@ -146,36 +145,26 @@ richlistitem[type="download"]:hover > toolbarseparator,
 #downloadsSummary,
 richlistitem[type="download"] {
   height: var(--downloads-item-height);
 #downloadsSummary,
 richlistitem[type="download"] {
   height: var(--downloads-item-height);

-  padding-inline-end: 0;
-  color: inherit;

 }
 
 richlistitem[type="download"] {
 }
 
 richlistitem[type="download"] {

-  margin: 0;

   border-bottom: 1px solid var(--panel-separator-color);
   background: transparent;
   border-bottom: 1px solid var(--panel-separator-color);
   background: transparent;

-  padding: 0;
+  color: inherit;

 }
 
 richlistitem[type="download"]:last-child {
   border-bottom: none;
 }
 
 }
 
 richlistitem[type="download"]:last-child {
   border-bottom: none;
 }
 

-richlistitem[type="download"] > .downloadMainArea {
-  padding: 8px;
-}
-

 .downloadTypeIcon {
 .downloadTypeIcon {

-  margin-top: 8px;
-  margin-inline-end: 12px;
-  margin-bottom: 8px;
-  margin-inline-start: 0;
+  margin: 8px 13px;

   width: 32px;
   height: 32px;
 }
 
 .downloadBlockedBadge {
   width: 32px;
   height: 32px;
 }
 
 .downloadBlockedBadge {

-  margin: 0 4px;
+  margin: 0 5px;

   background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
 }
 
   background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
 }
 


@@ -205,26 +194,23 @@ richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
    font-size of .downloadContainer's parent, we use calc to go from the
    smaller font-size back to the original font-size.
  */
    font-size of .downloadContainer's parent, we use calc to go from the
    smaller font-size back to the original font-size.
  */

-#downloadsSummaryDetails,

 .downloadContainer {
   font-size: calc(100% * var(--downloads-item-font-size-factor));
 .downloadContainer {
   font-size: calc(100% * var(--downloads-item-font-size-factor));

+  margin-inline-end: 13px;

 }
 
 #downloadsSummaryDescription,
 .downloadTarget {
 }
 
 #downloadsSummaryDescription,
 .downloadTarget {

-  margin-bottom: var(--downloads-item-target-margin-bottom);
-  cursor: inherit;
-}
-
-.downloadTarget {
+  margin: 0;

   font-size: calc(100% / var(--downloads-item-font-size-factor));
 }
 
 #downloadsSummaryDetails,
 .downloadDetails {
   font-size: calc(100% / var(--downloads-item-font-size-factor));
 }
 
 #downloadsSummaryDetails,
 .downloadDetails {

-  margin-top: var(--downloads-item-details-margin-top);

   opacity: var(--downloads-item-details-opacity);
   opacity: var(--downloads-item-details-opacity);

-  cursor: inherit;
+  /* Use calc() to keep the height consistent with .downloadTarget, so that the
+     progress bar can be vertically centered. */
+  margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);

 }
 
 richlistitem[type="download"][verdict] > toolbarseparator {
 }
 
 richlistitem[type="download"][verdict] > toolbarseparator {


@@ -236,8 +222,8 @@ richlistitem[type="download"][verdict] > toolbarseparator {
   margin: 0;
 /*  border: none; */
   background: transparent;
   margin: 0;
 /*  border: none; */
   background: transparent;

-  padding: 8px;
-  color: #A09090;
+  padding: 0;
+  color: inherit;

 }
 
 .downloadButton > .button-box > .button-icon {
 }
 
 .downloadButton > .button-box > .button-icon {


@@ -253,21 +239,16 @@ richlistitem[type="download"][verdict] > toolbarseparator {
   padding: 0;
 }
 
   padding: 0;
 }
 

-richlistitem[type="download"][state="1"][exists]:hover > .downloadMainArea,
-richlistitem[type="download"]:not([verdict]):hover > .downloadButtonArea {
-  background-color: var(--arrowpanel-dimmed);
-}
-

 richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
 richlistitem[type="download"][verdict]:hover {
 richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
 richlistitem[type="download"][verdict]:hover {

-  background-color: var(--arrowpanel-dimmed-further);
+  background-color: var(--arrowpanel-dimmed);

 }
 
 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active,
 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active,
 richlistitem[type="download"][verdict]:hover:active {
 }
 
 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active,
 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active,
 richlistitem[type="download"][verdict]:hover:active {

-  background-color: var(--arrowpanel-dimmed-even-further);
+  background-color: var(--arrowpanel-dimmed-further);

 }
 
 richlistitem[type="download"][showingsubview] {
 }
 
 richlistitem[type="download"][showingsubview] {


@@ -284,10 +265,6 @@ richlistitem[type="download"][verdict="Malware"][showingsubview] {
   color: #000000;
 }
 
   color: #000000;
 }
 

-richlistitem[type="download"][verdict="Malware"]:hover > .downloadButtonArea > .downloadButton {
-  color: inherit;
-}
-

 /*** Button icons ***/
 
 .downloadIconCancel > .button-box > .button-icon {
 /*** Button icons ***/
 
 .downloadIconCancel > .button-box > .button-icon {


@@ -367,19 +344,13 @@ richlistitem[type="download"][verdict="Malware"]:hover > .downloadButtonArea > .
   -moz-margin-end: 16px;
 }
 
   -moz-margin-end: 16px;
 }
 

+/*** Progressmeter ***/
+/* %include progressmeter.inc.css - this happens as @import at the start of the file */
+

 /* === END downloads.inc.css === */
 
 /*** Panel and outer controls ***/
 
 /* === END downloads.inc.css === */
 
 /*** Panel and outer controls ***/
 

-#downloadsSummary {
-}
-
-#downloadsSummary:hover {
-}
-
-#downloadsSummary:hover:active {
-}
-

 #downloadsPanel[keyfocus] #downloadsSummary:focus,
 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
   outline: 1px #008484 dotted;
 #downloadsPanel[keyfocus] #downloadsSummary:focus,
 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
   outline: 1px #008484 dotted;


@@ -408,10 +379,8 @@ richlistitem[type="download"][showingsubview][verdict="Malware"] {
 /*** List items and similar elements in the summary ***/
 
 :root {
 /*** List items and similar elements in the summary ***/
 
 :root {

-  --downloads-item-height: 7em;
+  --downloads-item-height: 5.5em;

   --downloads-item-font-size-factor: 0.9;
   --downloads-item-font-size-factor: 0.9;

-  --downloads-item-target-margin-bottom: 6px;
-  --downloads-item-details-margin-top: 0;

   --downloads-item-details-opacity: 0.6;
 }
 
   --downloads-item-details-opacity: 0.6;
 }
 

diff --git a/LCARStrek/browser/downloads/progressmeter.inc.css b/LCARStrek/browser/downloads/progressmeter.inc.css
new file mode 100644 (file)
index 0000000..d2c72b5
--- /dev/null
+++ b/LCARStrek/browser/downloads/progressmeter.inc.css
@@ -0,0 +1,70 @@
+/*** Common-styled progressmeter ***/
+.downloadProgress {
+  height: 8px;
+  border-radius: 1px;
+  margin: 4px 0 0;
+  margin-inline-end: 12px;
+
+  /* for overriding rules in progressmeter.css */
+  -moz-appearance: none;
+  border-style: none;
+  background-color: transparent;
+  min-width: initial;
+  min-height: initial;
+}
+
+.downloadProgress[mode="undetermined"] {
+  /* for overriding rules on global.css in Linux. */
+  -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter");
+}
+
+.downloadProgress > .progress-bar {
+  background-color: #008484;
+
+  /* for overriding rules in progressmeter.css */
+  -moz-appearance: none;
+}
+
+.downloadProgress[paused="true"] > .progress-bar {
+  background-color: #A09090;
+}
+
+.downloadProgress[mode="undetermined"] > .progress-bar {
+  /* Make a white reflecting animation.
+     Create a gradient with 2 identical pattern, and enlarge the size to 200%.
+     This allows us to animate background-position with percentage. */
+  background-image: linear-gradient(90deg, transparent 0%,
+                                           rgba(255,255,255,0.5) 25%,
+                                           transparent 50%,
+                                           rgba(255,255,255,0.5) 75%,
+                                           transparent 100%);
+  background-blend-mode: lighten;
+  background-size: 200% 100%;
+  animation: downloadProgressSlideX 1.5s linear infinite;
+}
+
+.downloadProgress > .progress-remainder {
+  border: solid #9C9CFF;
+  border-block-start-width: 1px;
+  border-block-end-width: 1px;
+  border-inline-start-width: 0;
+  border-inline-end-width: 1px;
+  background-color: #000000;
+}
+
+.downloadProgress[value="0"] > .progress-remainder {
+  border-width: 1px;
+}
+
+.downloadProgress > .progress-remainder[mode="undetermined"] {
+  border: none;
+}
+
+@keyframes downloadProgressSlideX {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}

diff --git a/LCARStrek/browser/newtab/newTab.css b/LCARStrek/browser/newtab/newTab.css
index 9cd341100eef5cd20a937128a3b7af4a06b1ebb3..202d13f3202bdf29caa625e015dc95c5774df69d 100644 (file)
--- a/LCARStrek/browser/newtab/newTab.css
+++ b/LCARStrek/browser/newtab/newTab.css
@@ -102,22 +102,41 @@ body {
   background-color: #FFCF00;
 }
 
   background-color: #FFCF00;
 }
 

+/* GRID */
+#topsites-heading {
+  color: #A09090;
+  font-size: 1em;
+  font-weight: normal;
+  /* Position the heading such that it doesn't affect how many cells we
+     can fit into the grid. */
+  position: absolute;
+  /* The top margin moves the heading away from the grid.
+     The horizontal margin aligns the heading with the cells. */
+  margin: -1em 10px 0;
+}
+

 /* CELLS */
 .newtab-cell {
 /* CELLS */
 .newtab-cell {

+  --cell-corner-radius: 10px;

   background-color: rgba(255,159,0,.2);
   border: 1px solid;
   border-color: #9C9CFF;
   background-color: rgba(255,159,0,.2);
   border: 1px solid;
   border-color: #9C9CFF;

-  border-radius: 10px;
+  border-radius: var(--cell-corner-radius);
+}
+
+body.compact .newtab-cell {
+  --cell-corner-radius: 3px;

 }
 
 .newtab-cell:empty {
   outline: 2px dashed #A09090;
 }
 
 .newtab-cell:empty {
   outline: 2px dashed #A09090;

-  -moz-outline-radius: 2px;
+  outline-offset: -2px;
+  -moz-outline-radius: var(--cell-corner-radius);

 }
 
 /* SITES */
 .newtab-site {
 }
 
 /* SITES */
 .newtab-site {

-  border-radius: inherit;
+  border-radius: var(--cell-corner-radius);

   text-decoration: none;
   transition-property: top, left, opacity, box-shadow, background-color;
 }
   text-decoration: none;
   transition-property: top, left, opacity, box-shadow, background-color;
 }


@@ -135,7 +154,7 @@ body {
 
 /* LINKS */
 .newtab-link {
 
 /* LINKS */
 .newtab-link {

-  border-radius: 10px;
+  border-radius: var(--cell-corner-radius);

   overflow: hidden;
 }
 
   overflow: hidden;
 }
 


@@ -151,11 +170,28 @@ body {
   background-clip: padding-box;
   background-repeat: no-repeat;
   background-size: cover;
   background-clip: padding-box;
   background-repeat: no-repeat;
   background-size: cover;

-  border-radius: 8px 8px 0px 0px;

   height: 180px;
   transition: opacity 100ms ease-out;
 }
 
   height: 180px;
   transition: opacity 100ms ease-out;
 }
 

+body.compact .newtab-thumbnail {
+  height: 100%;
+  border-radius: calc(var(--cell-corner-radius) + 1px);
+  outline: 1px solid hsla(0,0%,0%,.1);
+  -moz-outline-radius: var(--cell-corner-radius);
+  outline-offset: -1px;
+}
+
+.newtab-thumbnail.placeholder {
+  color: #FFCF00;
+  font-size: 85px;
+  line-height: 200%;
+}
+
+body.compact .newtab-thumbnail.placeholder {
+  font-size: 45px;
+}
+

 .newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
   opacity: 0;
 }
 .newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
   opacity: 0;
 }


@@ -165,22 +201,47 @@ body {
 .newtab-site[type=organic] .newtab-thumbnail,
 .newtab-site[type=sponsored] .newtab-thumbnail {
   background-position: center center;
 .newtab-site[type=organic] .newtab-thumbnail,
 .newtab-site[type=sponsored] .newtab-thumbnail {
   background-position: center center;

+}
+
+body.compact .newtab-site[type=affiliate] .newtab-thumbnail {
+  background-position: center 30%;
+}
+
+.newtab-site[type=affiliate] .newtab-thumbnail,
+body:not(.compact) .newtab-site[type=enhanced] .newtab-thumbnail,
+body:not(.compact) .newtab-site[type=organic] .newtab-thumbnail,
+body:not(.compact) .newtab-site[type=sponsored] .newtab-thumbnail {

   background-size: auto;
 }
 
 /* TITLES */
   background-size: auto;
 }
 
 /* TITLES */

-.newtab-sponsored,
+.newtab-title {
+  background-color: #FF9F00;
+  font-size: 13px;
+  line-height: 30px;
+  border: 1px solid #9C9CFF;
+  border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius);
+}
+
+body.compact .newtab-title {
+  background-color: rgba(255,159,0,.85);
+  font-size: 12px;
+  line-height: 21px;
+/*  border: 1px solid hsla(0,0%,80%,.8);
+  border-top-color: hsla(0,0%,0%,.1);*/
+  background-clip: padding-box;
+}
+

 .newtab-title,
 .newtab-suggested {
 .newtab-title,
 .newtab-suggested {

-  padding: 0 8px;
-  background-color: rgba(255,159,0,.8);

   color: #000000;
   color: #000000;

-  border: none;
-  line-height: 24px;
-  bottom: 0 !important;

 }
 
 }
 

-/*
+body.compact .newtab-title,
+body.compact .newtab-suggested {
+  color: #000000;
+}
+

 .newtab-suggested {
   background-color: #9C9CFF;
 }
 .newtab-suggested {
   background-color: #9C9CFF;
 }


@@ -194,9 +255,18 @@ body {
   background-color: #FF9F00;
   border: 0;
 }
   background-color: #FF9F00;
   border: 0;
 }

-*/
-.newtab-site:hover .newtab-title {
+
+body:not(.compact) .newtab-site:hover .newtab-title {

   background-color: #FFCF00;
   background-color: #FFCF00;

+/*  border-color: #333;
+  border-top-color: white;*/
+}
+
+body.compact .newtab-site:hover .newtab-title {
+/*  color: white;
+  background-color: hsla(0,0%,20%,.85);
+  border-color: hsla(0,0%,0%,.8);
+  border-top-color: white;*/

 }
 
 .newtab-site[pinned] .newtab-title {
 }
 
 .newtab-site[pinned] .newtab-title {


@@ -228,6 +298,31 @@ body {
   border: none;
   height: 24px;
   width: 24px;
   border: none;
   height: 24px;
   width: 24px;

+  top: 4px;
+}
+
+.newtab-control-pin:dir(ltr),
+.newtab-control-block:dir(rtl) {
+  left: 4px;
+}
+
+.newtab-control-block:dir(ltr),
+.newtab-control-pin:dir(rtl) {
+  right: 4px;
+}
+
+body.compact .newtab-control {
+  top: -8px;
+}
+
+body.compact .newtab-control-pin:dir(ltr),
+body.compact .newtab-control-block:dir(rtl) {
+  left: -8px;
+}
+
+body.compact .newtab-control-block:dir(ltr),
+body.compact .newtab-control-pin:dir(rtl) {
+  right: -8px;

 }
 
 .newtab-control-pin,
 }
 
 .newtab-control-pin,

diff --git a/LCARStrek/browser/notification-icons.svg b/LCARStrek/browser/notification-icons.svg
index e956160472b9dcd5b9aa5c0ac7e8b7c88a3c34c8..5923293e6a01e25067dc9ef950821640480ca596 100644 (file)
--- a/LCARStrek/browser/notification-icons.svg
+++ b/LCARStrek/browser/notification-icons.svg
@@ -36,6 +36,12 @@
     .blocked {
       clip-path: url(#clip);
     }
     .blocked {
       clip-path: url(#clip);
     }

+
+    #login-highlighted {
+      fill: #000000;
+      fill-opacity: 1;
+    }
+

     #plugin-blocked,
     #plugin-blocked:target ~ #strikeout {
       fill: #FF0000;
     #plugin-blocked,
     #plugin-blocked:target ~ #strikeout {
       fill: #FF0000;


@@ -88,6 +94,7 @@
   <use id="indexedDB" xlink:href="#indexedDB-icon" />
   <use id="indexedDB-blocked" class="blocked" xlink:href="#indexedDB-icon" />
   <use id="login" xlink:href="#login-icon" />
   <use id="indexedDB" xlink:href="#indexedDB-icon" />
   <use id="indexedDB-blocked" class="blocked" xlink:href="#indexedDB-icon" />
   <use id="login" xlink:href="#login-icon" />

+  <use id="login-highlighted" class="highlighted" xlink:href="#login-icon" />

   <use id="login-detailed" xlink:href="#login-detailed-icon" />
   <use id="microphone" xlink:href="#microphone-icon" />
   <use id="microphone-sharing" xlink:href="#microphone-icon"/>
   <use id="login-detailed" xlink:href="#login-detailed-icon" />
   <use id="microphone" xlink:href="#microphone-icon" />
   <use id="microphone-sharing" xlink:href="#microphone-icon"/>

diff --git a/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css b/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css
index 5dc085ea230b1cd2d73beda66d081c81fbf4898b..a617056961d8189fd640ba27e759776b42ea1aa3 100644 (file)
--- a/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css
+++ b/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css
@@ -144,6 +144,23 @@ a.button:active {
   background-color: #FF9F00;
 }
 
   background-color: #FF9F00;
 }
 

+/**
+ * We want to hide the checkbox in lieu of the toggle-btn
+ * "slider toggle". We need to make the toggle keyboard
+ * focusable, however, which is not possible if it's
+ * display:none. We work around this by making the toggle
+ * invisible but still present in the display list, allowing
+ * it to receive keyboard events. When it is focused by keyboard,
+ * we use the -moz-focusring selector on the invisible checkbox
+ * to show a focus ring around the slider toggle.
+ */
+.toggle-input {
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+  position: absolute;
+}
+

 .toggle + .toggle-btn {
   box-sizing: border-box;
   cursor: pointer;
 .toggle + .toggle-btn {
   box-sizing: border-box;
   cursor: pointer;

diff --git a/LCARStrek/browser/wifi.svg b/LCARStrek/browser/wifi.svg
new file mode 100644 (file)
index 0000000..bfaec46
--- /dev/null
+++ b/LCARStrek/browser/wifi.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     width="64"
+     height="64"
+     viewBox="0 0 64 64">
+
+  <style>
+    .gray {
+      fill: #A09090;
+    }
+  </style>
+
+  <defs>
+    <clipPath id="clip-path">
+      <polygon points="32 52.35 78.88 6.06 -14.88 6.06 32 52.35"/>
+    </clipPath>
+  </defs>
+
+  <circle class="gray" cx="32" cy="52" r="6"/>
+
+  <g clip-path="url('#clip-path')">
+    <path class="gray" d="M71.63,52A39.63,39.63,0,1,1,32,12.38,39.63,39.63,0,0,1,71.63,52ZM32,7.63A44.38,44.38,0,1,0,76.38,52,44.38,44.38,0,0,0,32,7.63Z"/>
+    <path class="gray" d="M47.75,52A15.75,15.75,0,1,1,32,36.25,15.75,15.75,0,0,1,47.75,52ZM32,31.65A20.35,20.35,0,1,0,52.35,52,20.35,20.35,0,0,0,32,31.65Z"/>
+    <path class="gray" d="M59.58,52A27.58,27.58,0,1,1,32,24.42,27.58,27.58,0,0,1,59.58,52ZM32,19.38A32.63,32.63,0,1,0,64.63,52,32.63,32.63,0,0,0,32,19.38Z"/>
+  </g>
+</svg>