new config for theme

goastian · Jan 4, 2025 · 8c01185 · 8c01185
1 parent 6de416f
commit 8c01185
Show file tree

Hide file tree

Showing 4 changed files with 307 additions and 32 deletions.
diff --git a/browser/themes/BuiltInThemeConfig.sys.mjs b/browser/themes/BuiltInThemeConfig.sys.mjs
@@ -18,7 +18,7 @@
  * @param {string} [collection]
  *  The collection id that the theme is a part of. Optional.
  */
-export const BuiltInThemeConfig = new Map([
+export const BuiltInThemeConfig = new Map() || new Map([
   [
     "firefox-compact-light@mozilla.org",
     {

diff --git a/toolkit/mozapps/extensions/default-theme/experiment13.css b/toolkit/mozapps/extensions/default-theme/experiment13.css
@@ -0,0 +1,296 @@
+/* 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/. */
+
+:root {
+  --tab-min-height: 34px !important;
+  --urlbar-height: 34px !important;
+  --urlbar-toolbar-height: 34px !important;
+  --urlbar-container-height: 34px !important;
+  --toolbarbutton-inner-padding: 9px !important;
+  --toolbarbutton-border-radius: 17px !important;
+  --toolbarbutton-outer-padding: 0px !important;
+  --tab-border-radius: 17px !important;
+  --toolbar-field-border-color: rgb(69, 72, 68) !important;
+  --toolbar-field-focus-border-color: rgb(69, 72, 68) !important;
+}
+
+#urlbar-container,
+#search-container {
+  border: 0 !important;
+  min-height: 34px !important;
+  padding-block: 0px !important;
+}
+
+#urlbar-background, #searchbar {
+  border: 2px solid var(--toolbar-field-background-color) !important;
+  border-radius: 17px !important;
+  padding: 0 !important;
+  background-clip: padding-box !important;
+  box-sizing: border-box !important;
+}
+
+#urlbar-background:before {
+  content: ' ' !important;
+  position: absolute !important;
+  top: 0; right: 0; bottom: 0; left: 0 !important;
+  z-index: -1 !important;
+  margin: -2px !important;
+  border-radius: inherit !important;
+  z-index: -1 !important;
+  box-shadow: none !important;
+}
+
+#urlbar:not([focused="true"]):hover > #urlbar-background,
+#searchbar:not(:focus-within):hover {
+  background-color: var(--toolbar-field-background-color) !important;
+}
+
+#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background {
+  border-color: #414d44 !important;
+}
+
+#urlbar:not([focused="true"]):-moz-lwtheme:hover > #urlbar-background, #navigator-toolbox #searchbar:not(:focus-within):-moz-lwtheme:hover {
+  border-color: #535b55 !important;
+}
+
+#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background, #searchbar:focus-within {
+  outline-color: #53565B !important;
+}
+
+#urlbar[focused="true"] > #urlbar-background {
+  border-radius: 17px !important;
+  border-color: transparent !important;
+}
+
+#urlbar[focused="true"] > #urlbar-background:before {
+  background: #535b54 !important;
+}
+
+/*
+  this should not be necessary but animation flashes the :before element background
+*/
+#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
+  animation-duration: 0ms !important;
+}
+
+.urlbarView-row:not([type="tip"]):not([type="dynamic"])[selected] > .urlbarView-row-inner {
+  background: #202521 !important;
+}
+
+.urlbarView-url {
+  background: linear-gradient(to right, #74F2B8, #00f094) !important;
+  background-clip: text !important;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+}
+
+#urlbar, #searchbar {
+  min-height: 34px !important;
+}
+
+:root[uidensity="compact"] #urlbar, :root[uidensity="compact"] #searchbar {
+  min-height: 28px !important;
+}
+
+#urlbar-container, #search-container {
+  padding-block: 0 !important;
+}
+
+:root:not([uidensity="compact"]) #back-button {
+  padding-block: 0 !important;
+}
+
+#urlbar[breakout] {
+  top: 0px !important;
+}
+
+#urlbar[breakout][breakout-extend] > .urlbar-input-container {
+  padding-block: 0 !important;
+  padding-inline: 0 !important;
+}
+
+#urlbar[breakout][breakout-extend] {
+  width: 100% !important;
+  left: unset !important;
+}
+
+#navigator-toolbox {
+  border-bottom: none !important;
+}
+
+#nav-bar.browser-toolbar {
+  box-shadow: none !important;
+}
+
+#TabsToolbar .toolbarbutton-1, #tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
+  margin: 1px 0 0 0 !important;
+  border-radius: 17px !important;
+}
+
+#tabbrowser-arrowscrollbox::part(scrollbutton-up), #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
+  border: 0 !important;
+  width: 34px !important;
+}
+
+toolbar .toolbarbutton-1 {
+  padding: 0 !important;
+}
+
+#PanelUI-menu-button {
+  margin-inline-start: var(--toolbar-start-start-padding) !important;
+  margin-inline-end: var(--toolbar-start-end-padding) !important;
+}
+
+:is(toolbarbutton.subviewbutton.webextension-browser-action):hover,
+:is(toolbarbutton.subviewbutton.webextension-browser-action):hover:active {
+  background-color: unset !important;
+}
+
+#nav-bar {
+  border-top: 0px !important;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.15) !important;
+}
+
+#urlbar-input {
+  margin-top: -1px !important;
+}
+
+.close-icon {
+  opacity: 0.5 !important;
+}
+
+.close-icon:hover {
+  opacity: 1 !important;
+}
+
+.tab-line {
+  height: 0 !important;
+}
+
+.urlbar-page-action, .urlbar-go-button, .search-go-button, #notification-popup-box {
+  width: var(--urlbar-height) !important;
+  height: var(--urlbar-height) !important;
+  padding: 9px !important;
+}
+
+:where(#reload-button, #stop-button) > .toolbarbutton-icon, :where(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
+  translate: none !important;
+}
+
+toolbarbutton toolbarbutton-badge-stack {
+  padding: 0 !important;
+}
+
+.urlbar-input-container {
+  border: 0px solid transparent !important;
+  padding: 0px !important;
+}
+
+.urlbar-input-container, #searchbar {
+  border-radius: 0 !important;
+  height: 34px !important;
+}
+
+#urlbar[breakout][breakout-extend] > .urlbar-input-container {
+  height: 34px !important;
+}
+
+.identity-box-button {
+  padding: 9px !important;
+}
+
+.tab-background {
+  border-radius: 0 !important;
+  margin-block: 0 !important;
+}
+
+.urlbarView {
+  margin-inline: 2px !important;
+  border-inline: unset !important;
+  width: calc(100% - 4px) !important;
+  padding-bottom: 17px !important;
+  margin-top: 17px !important;
+}
+
+
+.urlbarView-body-inner {
+  #urlbar[open] > .urlbarView > .urlbarView-body-outer > & {
+    border-top: unset !important;
+  }
+}
+
+.urlbarView-results {
+  padding-block: 2px !important;
+}
+
+.urlbarView-row-inner {
+  padding-inline: 40px !important;
+}
+
+.urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) {
+  padding-left: 30px !important;
+}
+
+.urlbarView-title {
+  margin-left: 4px !important;
+}
+
+.urlbarView-row, .urlbarView-row-inner {
+  border-radius: 0 !important;
+}
+
+#urlbar .search-one-offs:not([hidden]) {
+  display: none !important;
+}
+
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) {
+  background-color: #2A2A33 !important;
+}
+
+.tab-label {
+  margin: 0 !important;
+}
+
+.tab-close-button {
+  margin-top: 1px !important;
+}
+
+toolbar .toolbarbutton-1 {
+  border-radius: 17px !important;
+
+  & > .toolbarbutton-icon, & > .toolbarbutton-text, & > .toolbarbutton-badge-stack {
+    border-radius: 0px !important;
+  }
+}
+
+#TabsToolbar .toolbarbutton-1 {
+  & > .toolbarbutton-icon, & > .toolbarbutton-badge-stack {
+    border-radius: 17px !important;
+  }
+}
+
+toolbar#nav-bar .toolbarbutton-1 {
+  border-radius: 17px !important;
+  overflow: clip !important;
+}
+
+#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
+  margin-top: 1px !important;
+}
+
+:root:not([privatebrowsingmode="temporary"]) :is(toolbarbutton, toolbarpaletteitem)  #tabbrowser-tabs {
+  border-inline-start: unset !important;
+  padding-inline-start: unset !important;
+}
+
+#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child, #nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
+  padding-inline-start: unset !important;
+  margin-left: 8px !important;
+}
+
+.toolbarbutton-badge-stack .toolbarbutton-badge {
+  border-radius: 4px !important;
+  margin: -5px 0 0 !important;
+  margin-inline-end: -6px !important;
+}
diff --git a/toolkit/mozapps/extensions/default-theme/manifest.json b/toolkit/mozapps/extensions/default-theme/manifest.json
@@ -7,23 +7,21 @@
     }
   },
 
-  "name": "System theme — auto",
-  "description": "Follow the operating system setting for buttons, menus, and windows.",
-  "author": "Mozilla",
-  "version": "1.3",
+  "name": "Midori-UI",
+  "description": "",
+  "author": "Astian",
+  "version": "0.3",
 
   "icons": { "32": "icon.svg" },
 
-  "theme": {},
-
-  "dark_theme": {
+  "theme": {
     "colors": {
       "tab_background_text": "#fbfbfe",
-      "tab_selected": "rgb(66,65,77)",
+      "tab_selected": "#37473d",
       "tab_text": "rgb(251,251,254)",
       "icons": "rgb(251,251,254)",
       "frame": "#1c1b22",
-      "popup": "rgb(66,65,77)",
+      "popup": "#37473d",
       "popup_text": "rgb(251,251,254)",
       "popup_border": "rgb(82,82,94)",
       "popup_highlight": "rgb(43,42,51)",
@@ -51,7 +49,7 @@
       "input_background": "#42414D",
       "input_color": "rgb(251,251,254)",
       "urlbar_popup_separator": "rgb(82,82,94)",
-      "tab_icon_overlay_stroke": "rgb(66,65,77)",
+      "tab_icon_overlay_stroke": "#37473d",
       "tab_icon_overlay_fill": "rgb(251,251,254)"
     },
     "properties": {
@@ -64,26 +62,6 @@
   },
 
   "theme_experiment": {
-    "colors": {
-      "button": "--button-bgcolor",
-      "button_hover": "--button-hover-bgcolor",
-      "button_active": "--button-active-bgcolor",
-      "button_primary": "--button-primary-bgcolor",
-      "button_primary_hover": "--button-primary-hover-bgcolor",
-      "button_primary_active": "--button-primary-active-bgcolor",
-      "button_primary_color": "--button-primary-color",
-      "input_background": "--input-bgcolor",
-      "input_color": "--input-color",
-      "urlbar_popup_separator": "--urlbarView-separator-color",
-      "tab_icon_overlay_stroke": "--tab-icon-overlay-stroke",
-      "tab_icon_overlay_fill": "--tab-icon-overlay-fill"
-    },
-    "properties": {
-      "panel_hover": "--panel-item-hover-bgcolor",
-      "panel_active": "--arrowpanel-dimmed-further",
-      "panel_active_darker": "--panel-item-active-bgcolor",
-      "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity",
-      "zap_gradient": "--panel-separator-zap-gradient"
-    }
+      "stylesheet": "experiment13.css"
   }
 }
diff --git a/toolkit/mozapps/extensions/jar.mn b/toolkit/mozapps/extensions/jar.mn
@@ -19,4 +19,5 @@ toolkit.jar:
 % resource default-theme %content/mozapps/extensions/default-theme/
   content/mozapps/extensions/default-theme                      (default-theme/*.svg)
   content/mozapps/extensions/default-theme/manifest.json        (default-theme/manifest.json)
+  content/mozapps/extensions/default-theme/experiment13.css     (default-theme/experiment13.css)
 #endif