sync both themes with toolkit windows theme changes in Mozilla 42-44 cycles
authorRobert Kaiser <kairo@kairo.at>
Mon, 25 Jan 2016 03:05:55 +0000 (04:05 +0100)
committerRobert Kaiser <kairo@kairo.at>
Mon, 25 Jan 2016 03:05:55 +0000 (04:05 +0100)
19 files changed:
EarlyBlue/global/alerts/alert-common.css [new file with mode: 0644]
EarlyBlue/global/alerts/alert.css
EarlyBlue/global/autocomplete.css
EarlyBlue/global/findBar.css
EarlyBlue/global/in-content/common.css
EarlyBlue/global/listbox.css
EarlyBlue/global/toolbarbutton.css
EarlyBlue/mozapps/extensions/extensions.css
EarlyBlue/mozapps/extensions/utilities.svg
LCARStrek/global/alerts/alert-common.css [new file with mode: 0644]
LCARStrek/global/alerts/alert.css
LCARStrek/global/autocomplete.css
LCARStrek/global/findBar.css
LCARStrek/global/in-content/common.css
LCARStrek/global/inContentUI.css [deleted file]
LCARStrek/global/listbox.css
LCARStrek/global/toolbarbutton.css
LCARStrek/mozapps/extensions/extensions.css
LCARStrek/mozapps/extensions/utilities.svg

diff --git a/EarlyBlue/global/alerts/alert-common.css b/EarlyBlue/global/alerts/alert-common.css
new file mode 100644 (file)
index 0000000..546534a
--- /dev/null
@@ -0,0 +1,138 @@
+/* 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/. */
+
+/* ===== alert.css =====================================================
+  == Shared styles specific to the alerts dialog.
+  ======================================================================= */
+
+@import url("chrome://global/skin/");
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+#alertBox[animate] {
+  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
+}
+
+#alertBox[animate][clicked] {
+  animation-duration: .6s;
+  animation-name: alert-zoom-animation;
+}
+
+/* This is used if the close button is clicked
+   before the animation has finished. */
+#alertBox[animate][closing] {
+  animation-duration: .6s;
+  animation-name: alert-fadeout-animation;
+}
+
+@keyframes alert-animation {
+  from {
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes alert-zoom-animation {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes alert-fadeout-animation {
+  to {
+    opacity: 0;
+  }
+}
+
+#alertImage {
+  width: 80px;
+  height: 80px;
+  max-width: 80px;
+  max-height: 80px;
+  object-fit: scale-down;
+  margin: 0 7px 7px;
+}
+
+.alertTextBox {
+  padding-top: 4px;
+  /* The text box width is increased to make up for the lack of image when one
+     is not provided. 349px is the text box width when a picture is present,
+     255px, plus the width of the image, 80px, and the margins, 7px each. */
+  width: 349px;
+}
+
+#alertBox[hasImage] > box > #alertTextBox {
+  width: 255px;
+}
+
+#alertBox:not([hasImage]) > box > #alertTextBox {
+  padding-inline-start: 8px;
+}
+
+#alertTextLabel {
+  padding-inline-end: 8px;
+}
+
+.alertTitle {
+  -moz-box-flex: 1;
+  font-weight: bold;
+  padding: 6px 8px 0;
+  width: 255px;
+}
+
+#alertFooter {
+  -moz-box-align: start;
+}
+
+#alertBox:not([hasOrigin]) > box > #alertTextBox,
+#alertFooter {
+  padding-bottom: 5px;
+}
+
+#alertSourceLabel {
+  -moz-box-flex: 1;
+  font-size: 83.334%;
+  color: #808080;
+}
+
+#alertSettings {
+  border-radius: 0px;
+  min-width: 0;
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale");
+  margin-inline-end: 0;
+  margin-bottom: 0;
+}
+
+#alertSettings > .button-box {
+  padding: 0;
+}
+
+#alertSettings:hover,
+#alertSettings[open] {
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted");
+}
+
+#alertSettings:hover {
+}
+
+#alertSettings[open],
+#alertSettings:hover:active {
+}
+
+#alertSettings[focusedViaMouse]:-moz-focusring > .button-box {
+  border-color: transparent;
+}
+
+#alertSettings > .button-box > .button-menu-dropmarker,
+#alertSettings > .button-box > .box-inherit > .button-text {
+  display: none;
+}
index e6d562c592851525ba14f76229fdffe3477f6182..db14f791e9ec799185fabdd4734fcabb5030e74b 100644 (file)
@@ -6,76 +6,15 @@
   == Styles specific to the alerts dialog.
   ======================================================================= */
 
-@import url("chrome://global/skin/");
+@import url("chrome://global/skin/alerts/alert-common.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-.alertBox {
+#alertBox {
   border: 1px solid #666699;
+  border-radius: 1px;
   background-color: #CCD0DD;
-}
-
-.alertImageBox {
-  padding: 8px 0;
-  width: 64px;
-  -moz-border-end: 1px solid #9999CC;
-}
-
-.alertTextBox {
-  padding: 8px;
-  -moz-padding-start: 16px;
-  width: 255px;
-}
-
-.alertTextBox,
-.alertCloseBox {
-}
-
-.alertBox[orient="horizontal"] > .alertImageBox {
-  -moz-margin-end: 8px;
-}
-
-.alertBox[orient="vertical"] > .alertImageBox {
-  margin-bottom: 8px;
-}
-
-#alertNotification[clickable="true"]:hover .alertTextBox,
-#alertNotification[clickable="true"]:hover .alertCloseBox {
-/*  background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.3)); */
-}
-
-.alertTitle {
-  font-weight: bold;
-  font-size: 110%;
-}
-
-#alertImage {
-  max-width: 48px;
-  max-height: 48px;
-  list-style-image: url("chrome://global/skin/alerts/notification-48.png");
-}
-
-#alertNotification[clickable="true"] {
-  cursor: pointer;
-}
-
-label {
-  cursor: inherit;
-}
-
-@keyframes alert-animation {
-  from {
-    opacity: 0;
-  }
-  6.25% {
-    opacity: 1;
-  }
-  93.75% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+  color: #000000;
 }
 
 .alertCloseButton {
index 6bd01046c758f321680f75961cd7ca1cf30b3062..4ca30ee01f0200b4d610d60fcf9c65ac48d92af5 100644 (file)
@@ -58,7 +58,8 @@ panel[type="autocomplete"],
 panel[type="autocomplete-richlistbox"],
 .autocomplete-history-popup {
   border: 1px solid #9999CC;
-  background-color: white;
+  background-color: #FFFFFF;
+  color: #000000;
   padding: 0;
 }
 
index 6eee423057abb8701459e60d863d47fcae3dc8e5..5b5d48f0ce904e52e5f3ce6e4efae48fbc4497c5 100644 (file)
@@ -22,6 +22,11 @@ findbar[hidden] {
   transition-delay: 0s, 0s, 150ms;
 }
 
+findbar[noanim] {
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+}
+
 findbar[position="top"][hidden] {
   margin-bottom: auto;
   margin-top: -1em;
index 4c3a2e27700b1357b9f6ef587ca6de092f69fa69..5bdb0b7776b4a9ebceb577ff491f68b426ba0fca 100644 (file)
@@ -45,7 +45,7 @@
   --in-content-disabled-text: #999999;
 }
 
-html|body,
+html|html,
 xul|page,
 xul|window {
   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
@@ -145,6 +145,8 @@ xul|tab {
   color: var(--in-content-tab-color);
   background-color: var(--in-content-page-background);
   border-width: 0;
+  / !important overrides tabbox.css RTL and visuallyselected rules /
+  border-radius: 0 !important;
   transition: background-color 50ms ease 0s;
 }
 
@@ -180,7 +182,7 @@ html|button {
 xul|colorpicker[type="button"],
 xul|menulist {
   -moz-appearance: none;
-  height: 30px;
+  min-height: 30px;
   color: var(--in-content-text-color);
   border: 1px solid var(--in-content-box-border-color);
   -moz-border-top-colors: none !important;
@@ -294,6 +296,7 @@ xul|*.help-button > xul|*.button-box > xul|*.button-text {
 }
 
 xul|*.spinbuttons-button {
+  min-height: initial;
   -moz-margin-start: 10px !important;
   -moz-margin-end: 2px !important;
 }
@@ -404,13 +407,11 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator {
 */
 /* textboxes */
 /*
-*|textbox {
+html|input[type="text"],
+html|textarea,
+xul|textbox {
   -moz-appearance: none;
-  height: 30px;
   color: var(--in-content-text-color);
-  line-height: 20px;
-  padding-right: 10px;
-  padding-left: 10px;
   border: 1px solid var(--in-content-box-border-color);
   -moz-border-top-colors: none !important;
   -moz-border-right-colors: none !important;
@@ -420,12 +421,27 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator {
   background-color: var(--in-content-box-background);
 }
 
-html|textbox:focus,
+xul|textbox {
+  min-height: 30px;
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+html|input[type="text"],
+html|textarea {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 5px 10px;
+}
+
+html|input[type="text"]:focus,
+html|textarea:focus,
 xul|textbox[focused] {
   border-color: var(--in-content-border-focus);
 }
 
-html|textbox:disabled,
+html|input[type="text"]:disabled,
+html|textarea:disabled,
 xul|textbox[disabled="true"] {
   opacity: 0.5;
 }
@@ -461,7 +477,7 @@ html|a:hover:active,
 /*
 / Hide the actual checkbox /
 html|input[type="checkbox"] {
-  opacity: 0;
+  visibility: hidden;
   position: absolute;
 }
 
@@ -561,7 +577,7 @@ xul|*.radio-label-box {
 */
 /* Category List */
 
-xul|*#categories {
+*|*#categories {
   -moz-appearance: none;
   background-color: var(--in-content-category-background);
   padding-top: 39px;
@@ -569,7 +585,7 @@ xul|*#categories {
   border-width: 0;
 }
 
-xul|*.category {
+*|*.category {
   -moz-appearance: none;
   color: var(--in-content-category-text);
   -moz-border-end-width: 0;
@@ -579,18 +595,18 @@ xul|*.category {
   transition: background-color 150ms;
 }
 
-xul|*.category:hover {
+*|*.category:hover {
   background-color: var(--in-content-category-background-hover);
 }
 
-xul|*.category[selected] {
+*|*.category[selected] {
   background-color: var(--in-content-category-background-active);
   color: var(--in-content-category-text-selected);
   -moz-padding-start: 11px; /* compensate the 4px border */
   -moz-border-start: solid 4px var(--in-content-border-highlight);
 }
 
-xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
+*|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
   border-top: var(--in-content-category-border-focus);
   border-bottom: var(--in-content-category-border-focus);
 }
index 4b801dde88c92f708083a262d79b3e010310de8b..d0d1e9f8b41bd9ef6e5fdfba646f34d5079a3e48 100644 (file)
@@ -26,24 +26,31 @@ listbox[disabled="true"] {
 
 listitem {
   border: 1px solid transparent;
+
+  --listitem-selectedColor: #FFFFFF;
+  --listitem-selectedBackground: #808080;
+  --listitem-selectedFocusColor: var(--listitem-selectedColor);
+  --listitem-selectedFocusBackground: #336699;
+  --listitem-focusCurrentBorder: #6666CC;
+  --listitem-selectedFocusCurrentBorder: #666699;
 }
 
 listbox:-moz-focusring > listitem[current="true"] {
-  border: 1px dotted #9999CC;
+  border: 1px dotted var(--listitem-focusCurrentBorder);
 }
 
 listbox:-moz-focusring > listitem[current="true"][selected="true"] {
-  border: 1px dotted #666699;
+  border: 1px dotted var(--listitem-selectedFocusCurrentBorder);
 }
 
 listitem[selected="true"] {
-  background-color: #808080;
-  color: #FFFFFF;
+  background-color: var(--listitem-selectedBackground);
+  color: var(--listitem-selectedColor);
 }
 
 listbox:focus > listitem[selected="true"] {
-  background-color: #336699;
-  color: #FFFFFF;
+  background-color: var(--listitem-selectedFocusBackground);
+  color: var(--listitem-selectedFocusColor);
 }
 
 /* ::::: listheader ::::: */
index 84c21f427cb2ba75e3eb01cbc0f8d8df3ed8e240..6e61c07160f0e49b827a6d7fa8ff135c4d293c83 100644 (file)
@@ -151,44 +151,27 @@ toolbarbutton[disabled="true"]:hover:active > toolbarbutton.toolbarbutton-menubu
 
 /* ::::: toolbarbutton badged ::::: */
 
-.toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
+.toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) {
   -moz-margin-end: 0;
 }
 
-.toolbarbutton-badge[badge=""] {
-  display: none;
-}
-
 .toolbarbutton-badge {
   background-color: #CCD0DD;
-}
-
-.toolbarbutton-badge::after {
-  /* The |content| property is set in the content stylesheet. */
   font-size: 10px;
   font-weight: bold;
-  padding: 1px 2px 2px;
+  padding: 0 2px 1px;
   color: #000000;
-  background-color: inherit;
   border-radius: 2px;
   box-shadow: 0 1px 0 #9999CC inset,
               0 -1px 0 #9999CC inset,
               0 1px 0 #9999CC;
-  position: absolute;
-  top: -4px;
-  right: -2px;
-  min-width: 10px;
+  margin: -6px 0 0 !important;
+  -moz-margin-end: -8px !important;
+  min-width: 14px;
+  max-width: 28px;
   line-height: 10px;
   text-align: center;
-}
-
-.toolbarbutton-badge:-moz-locale-dir(rtl)::after {
-  left: -2px;
-  right: auto;
-}
-
-.toolbarbutton-badge-container {
-  position: relative;
+  -moz-stack-sizing: ignore;
 }
 
 /* .......... dropmarker .......... */
index bf975b930b8e9d35a56a509f8db7841a771acd92..36c7fb71287f6bace79e4e892704a9488d4dc570 100644 (file)
@@ -980,7 +980,7 @@ button.button-link {
   color: #0000FF;
   cursor: pointer;
   min-width: 0;
-  height: 20px;
+  min-height: 20px;
   margin: 0 6px;
 }
 
index 9cac868056cc588d8f10066f1b4d8a8ed2ddd791..1c517ea4115d177b903db83cc417158f261b4a9b 100644 (file)
     use[id$="-native"] {
       fill: GrayText;
     }
+    use[id$="-grayscale"] {
+      fill: #808080;
+    }
+    use[id$="-inverted"] {
+      fill: #000000;
+    }
   </style>
   <defs>
     <path id="utilities-shape" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
@@ -20,4 +26,6 @@
   <use id="utilities" xlink:href="#utilities-shape"/>
   <use id="utilities-hover" xlink:href="#utilities-shape"/>
   <use id="utilities-native" xlink:href="#utilities-shape"/>
+  <use id="utilities-grayscale" xlink:href="#utilities-shape"/>
+  <use id="utilities-inverted" xlink:href="#utilities-shape"/>
 </svg>
diff --git a/LCARStrek/global/alerts/alert-common.css b/LCARStrek/global/alerts/alert-common.css
new file mode 100644 (file)
index 0000000..5bcdfcb
--- /dev/null
@@ -0,0 +1,138 @@
+/* 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/. */
+
+/* ===== alert.css =====================================================
+  == Shared styles specific to the alerts dialog.
+  ======================================================================= */
+
+@import url("chrome://global/skin/");
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+#alertBox[animate] {
+  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
+}
+
+#alertBox[animate][clicked] {
+  animation-duration: .6s;
+  animation-name: alert-zoom-animation;
+}
+
+/* This is used if the close button is clicked
+   before the animation has finished. */
+#alertBox[animate][closing] {
+  animation-duration: .6s;
+  animation-name: alert-fadeout-animation;
+}
+
+@keyframes alert-animation {
+  from {
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes alert-zoom-animation {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes alert-fadeout-animation {
+  to {
+    opacity: 0;
+  }
+}
+
+#alertImage {
+  width: 80px;
+  height: 80px;
+  max-width: 80px;
+  max-height: 80px;
+  object-fit: scale-down;
+  margin: 0 7px 7px;
+}
+
+.alertTextBox {
+  padding-top: 4px;
+  /* The text box width is increased to make up for the lack of image when one
+     is not provided. 349px is the text box width when a picture is present,
+     255px, plus the width of the image, 80px, and the margins, 7px each. */
+  width: 349px;
+}
+
+#alertBox[hasImage] > box > #alertTextBox {
+  width: 255px;
+}
+
+#alertBox:not([hasImage]) > box > #alertTextBox {
+  padding-inline-start: 8px;
+}
+
+#alertTextLabel {
+  padding-inline-end: 8px;
+}
+
+.alertTitle {
+  -moz-box-flex: 1;
+  font-weight: bold;
+  padding: 6px 8px 0;
+  width: 255px;
+}
+
+#alertFooter {
+  -moz-box-align: start;
+}
+
+#alertBox:not([hasOrigin]) > box > #alertTextBox,
+#alertFooter {
+  padding-bottom: 5px;
+}
+
+#alertSourceLabel {
+  -moz-box-flex: 1;
+  font-size: 83.334%;
+  color: #A09090;
+}
+
+#alertSettings {
+  border-radius: 20px;
+  min-width: 0;
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale");
+  margin-inline-end: 0;
+  margin-bottom: 0;
+}
+
+#alertSettings > .button-box {
+  padding: 0;
+}
+
+#alertSettings:hover,
+#alertSettings[open] {
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted");
+}
+
+#alertSettings:hover {
+}
+
+#alertSettings[open],
+#alertSettings:hover:active {
+}
+
+#alertSettings[focusedViaMouse]:-moz-focusring > .button-box {
+  border-color: transparent;
+}
+
+#alertSettings > .button-box > .button-menu-dropmarker,
+#alertSettings > .button-box > .box-inherit > .button-text {
+  display: none;
+}
index 876a6b1250c664017c72f763f830a26021ebb1c5..01af1cde35c0d50c898a9349c6f7ada544f1ba3f 100644 (file)
@@ -6,77 +6,15 @@
   == Styles specific to the alerts dialog.
   ======================================================================= */
 
-@import url("chrome://global/skin/");
+@import url("chrome://global/skin/alerts/alert-common.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-.alertBox {
+#alertBox {
   border: 1px solid #9C9CFF;
   border-radius: 3px;
   background-color: #000000;
-}
-
-.alertImageBox {
-  padding: 8px 0;
-  width: 64px;
-  -moz-border-end: 1px solid #9C9CFF;
-}
-
-.alertTextBox {
-  padding: 8px;
-  -moz-padding-start: 16px;
-  width: 255px;
-}
-
-.alertTextBox,
-.alertCloseBox {
-}
-
-.alertBox[orient="horizontal"] > .alertImageBox {
-  -moz-margin-end: 8px;
-}
-
-.alertBox[orient="vertical"] > .alertImageBox {
-  margin-bottom: 8px;
-}
-
-#alertNotification[clickable="true"]:hover .alertTextBox,
-#alertNotification[clickable="true"]:hover .alertCloseBox {
-/*  background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.3));*/
-}
-
-.alertTitle {
-  font-weight: bold;
-  font-size: 110%;
-}
-
-#alertImage {
-  max-width: 48px;
-  max-height: 48px;
-  list-style-image: url("chrome://global/skin/alerts/notification-48.png");
-}
-
-#alertNotification[clickable="true"] {
-  cursor: pointer;
-}
-
-label {
-  cursor: inherit;
-}
-
-@keyframes alert-animation {
-  from {
-    opacity: 0;
-  }
-  6.25% {
-    opacity: 1;
-  }
-  93.75% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+  color: #FF9F00;
 }
 
 .alertCloseButton {
index 7096b319b03627454d0629b5b0af0d87f7b6321d..a2ad582ca9d42378c4505f2005dadc0fcb89c21b 100644 (file)
@@ -69,6 +69,7 @@ panel[type="autocomplete-richlistbox"],
 .autocomplete-history-popup {
   border: 1px solid #FF9F00;
   background-color: #000000;
+  color: #FF9F00;
   padding: 0;
 }
 
index d7e963df91c2a97f7a263a4994c57d93c3527fc6..2912cc85c78ea05252e398726383854cb2914486 100644 (file)
@@ -21,6 +21,11 @@ findbar[hidden] {
   transition-delay: 0s, 0s, 150ms;
 }
 
+findbar[noanim] {
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+}
+
 findbar[position="top"][hidden] {
   margin-bottom: auto;
   margin-top: -1em;
index 9a2975f64ee72fb0da3beb38a761db6d163d2f0f..17aecf568d89f9eb1913521d3b845ff8d359fca6 100644 (file)
@@ -48,7 +48,7 @@
   ---in-content-help-button-background-active: #eaba00;
   --in-content-disabled-text: #8050B0;
 }
-html|body,
+html|html,
 xul|page,
 xul|window {
   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
@@ -148,6 +148,8 @@ xul|tab {
   color: var(--in-content-tab-color);
   background-color: var(--in-content-page-background);
   border-width: 0;
+  / !important overrides tabbox.css RTL and visuallyselected rules /
+  border-radius: 0 !important;
   transition: background-color 50ms ease 0s;
 }
 
@@ -183,7 +185,7 @@ html|button {
 xul|colorpicker[type="button"],
 xul|menulist {
   -moz-appearance: none;
-  height: 30px;
+  min-height: 30px;
   color: var(--in-content-text-color);
   border: 1px solid var(--in-content-box-border-color);
   -moz-border-top-colors: none !important;
@@ -301,6 +303,7 @@ xul|*.help-button > xul|*.button-box > xul|*.button-text {
 }
 /*
 xul|*.spinbuttons-button {
+  min-height: initial;
   -moz-margin-start: 10px !important;
   -moz-margin-end: 2px !important;
 }
@@ -411,7 +414,9 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator {
 */
 /* textboxes */
 /*
-*|textbox {
+html|input[type="text"],
+html|textarea,
+xul|textbox {
   -moz-appearance: none;
   height: 30px;
   color: var(--in-content-text-color);
@@ -427,12 +432,27 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator {
   background-color: var(--in-content-box-background);
 }
 
-html|textbox:focus,
+xul|textbox {
+  min-height: 30px;
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+html|input[type="text"],
+html|textarea {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 5px 10px;
+}
+
+html|input[type="text"]:focus,
+html|textarea:focus,
 xul|textbox[focused] {
   border-color: var(--in-content-border-focus);
 }
 
-html|textbox:disabled,
+html|input[type="text"]:disabled,
+html|textarea:disabled,
 xul|textbox[disabled="true"] {
   opacity: 0.5;
 }
@@ -467,7 +487,7 @@ html|a:hover:active,
 /* Checkboxes and radio buttons */
 /* Hide the actual checkbox */
 html|input[type="checkbox"] {
-  opacity: 0;
+  visibility: hidden;
   position: absolute;
 }
 
@@ -576,7 +596,7 @@ xul|*.radio-label-box {
 */
 /* Category List */
 
-xul|*#categories {
+*|*#categories {
   background-color: var(--in-content-categorylist-background);
   padding-top: 4em;
   margin: 0;
@@ -584,7 +604,7 @@ xul|*#categories {
   border: none;
 }
 
-xul|*.category {
+*|*.category {
   background-color: var(--in-content-category-background);
   color: var(--in-content-category-text);
   -moz-border-end-width: 0;
@@ -594,17 +614,17 @@ xul|*.category {
   transition: background-color 150ms;
 }
 
-xul|*.category:hover {
+*|*.category:hover {
   background-color: var(--in-content-category-background-hover);
   color: var(--in-content-category-text-selected);
 }
 
-xul|*.category[selected] {
+*|*.category[selected] {
   background-color: var(--in-content-category-background-active);
   color: var(--in-content-category-text-selected);
 }
 
-xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
+*|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
   border-top: var(--in-content-category-border-focus);
   border-bottom: var(--in-content-category-border-focus);
 }
diff --git a/LCARStrek/global/inContentUI.css b/LCARStrek/global/inContentUI.css
deleted file mode 100644 (file)
index 0e5971d..0000000
+++ /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/. */
-
-/* THIS FILE HAS BEEN DELETED IN THE ORIGINAL THEME.
- * We keep it only as long as some LCARStrek stuff still refers to it. */
-
-/*
- * The default namespace for this file is XUL. Be sure to prefix rules that
- * are applicable to both XUL and HTML with '*|'.
- */
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-@namespace html url("http://www.w3.org/1999/xhtml");
-
-/* Page background */
-*|*:root {
-  background-color: #000000;
-  color: #FF9F00;
-  margin: 20px;
-}
-
-html|html {
-  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
-}
-
-/* Use the new in-content colors for #contentAreaDownloadsView. After landing
-   of bug 989469 the colors can be moved to *|*:root */
-*|*#contentAreaDownloadsView {
-  background: #000000;
-  color: #FF9F00;
-}
-
-/* Content */
-*|*.main-content {
-  /* Needed to allow the radius to clip the inner content, see bug 595656 */
-  overflow: hidden;
-  border: 1px solid #9C9CFF;
-  border-radius: 5px;
-}
-
-colorpicker[type="button"] {
-  margin: 1px 5px 2px 5px;
-  padding: 3px;
-  height: 25px;
-}
index b8fe1d93836e73fa15bf8cbb314a868f524b7ac4..cbdf3133f87083a658279369688043265712c30b 100644 (file)
@@ -28,24 +28,31 @@ listbox[disabled="true"] {
 
 listitem {
   border: 1px solid transparent;
+
+  --listitem-selectedColor: #000000;
+  --listitem-selectedBackground: #008484;
+  --listitem-selectedFocusColor: #FFCF00;
+  --listitem-selectedFocusBackground: var(--listitem-selectedBackground);
+  --listitem-focusCurrentBorder: #FF9F00;
+  --listitem-selectedFocusCurrentBorder: var(--listitem-focusCurrentBorder);
 }
 
 listbox:-moz-focusring > listitem[current="true"] {
-  border: 1px dotted #FF9F00;
+  border: 1px dotted var(--listitem-focusCurrentBorder);
 }
 
 listbox:-moz-focusring > listitem[current="true"][selected="true"] {
-  border: 1px dotted #FF9F00;
+  border: 1px dotted var(--listitem-selectedFocusCurrentBorder);
 }
 
 listitem[selected="true"] {
-  background-color: #008484;
-  color: #000000;
+  background-color: var(--listitem-selectedBackground);
+  color: var(--listitem-selectedColor);
 }
 
 listbox:focus > listitem[selected="true"] {
-  background-color: #008484;
-  color: #FFCF00;
+  background-color: var(--listitem-selectedFocusBackground);
+  color: var(--listitem-selectedFocusColor);
 }
 
 /* ::::: listheader ::::: */
index 4b2caa16b48cf6547c3d3f22dc8cf0c9fcda84f8..32d41b2018a21465a4091848d626f11bb38b45e3 100644 (file)
@@ -177,44 +177,27 @@ toolbarbutton[disabled="true"]:hover:active > toolbarbutton.toolbarbutton-menubu
 
 /* ::::: toolbarbutton badged ::::: */
 
-.toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
+.toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) {
   -moz-margin-end: 0;
 }
 
-.toolbarbutton-badge[badge=""] {
-  display: none;
-}
-
 .toolbarbutton-badge {
   background-color: #000000;
-}
-
-.toolbarbutton-badge::after {
-  /* The |content| property is set in the content stylesheet. */
   font-size: 10px;
   font-weight: bold;
-  padding: 1px 2px 2px;
+  padding: 0 2px 1px;
   color: #FF9F00;
-  background-color: inherit;
   border-radius: 2px;
   box-shadow: 0 1px 0 #9C9CFF inset,
               0 -1px 0 #9C9CFF inset,
               0 1px 0 #9C9CFF;
-  position: absolute;
-  top: -4px;
-  right: -2px;
-  min-width: 10px;
+  margin: -6px 0 0 !important;
+  -moz-margin-end: -8px !important;
+  min-width: 14px;
+  max-width: 28px;
   line-height: 10px;
   text-align: center;
-}
-
-.toolbarbutton-badge:-moz-locale-dir(rtl)::after {
-  left: -2px;
-  right: auto;
-}
-
-.toolbarbutton-badge-container {
-  position: relative;
+  -moz-stack-sizing: ignore;
 }
 
 /* .......... dropmarker .......... */
index 1253434a96c9d4e64cfd46b0dee69b2ec7870be6..2be2700d94b90c414de4f3d49715fade4d91d6e5 100644 (file)
 
 #detail-screenshot-box {
   -moz-margin-end: 2em;
-  padding: 10px;
-/*  background-color: white;*/
 }
 
 
 #detail-screenshot {
   max-width: 300px;
   max-height: 300px;
+/*  background-color: white;*/
 }
 
 #detail-screenshot[loading] {
index cc55099a0528cdb5936919c2e43e22b04d28de5b..37c97e4a1578509f02219d8f4286b9f79492dcc7 100644 (file)
     use[id$="-native"] {
       fill: GrayText;
     }
+    use[id$="-grayscale"] {
+      fill: #A09090;
+    }
+    use[id$="-inverted"] {
+      fill: #000000;
+    }
   </style>
   <defs>
     <path id="utilities-shape" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
@@ -23,4 +29,6 @@
   <use id="utilities" xlink:href="#utilities-shape"/>
   <use id="utilities-hover" xlink:href="#utilities-shape"/>
   <use id="utilities-native" xlink:href="#utilities-shape"/>
+  <use id="utilities-grayscale" xlink:href="#utilities-shape"/>
+  <use id="utilities-inverted" xlink:href="#utilities-shape"/>
 </svg>