From a19e10aedacbe2496f532fbcca596762827b5154 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Tue, 4 Dec 2018 17:32:10 +0200 Subject: [PATCH] Add theme files and some compatbility rules --- chrome/navigation_buttons_inside_urlbar.css | 10 ++- chrome/page_action_buttons_on_hover.css | 3 +- chrome/status_inside_urlbar.css | 28 ++++--- chrome/theme_color_variables.css | 13 +++ ...d_menus.css => theme_popups_and_menus.css} | 9 +-- chrome/theme_sidebar.css | 37 +++++++++ chrome/theme_toolbars.css | 79 +++++++++++++++++++ 7 files changed, 157 insertions(+), 22 deletions(-) create mode 100644 chrome/theme_color_variables.css rename chrome/{dark_popups_and_menus.css => theme_popups_and_menus.css} (92%) create mode 100644 chrome/theme_sidebar.css create mode 100644 chrome/theme_toolbars.css diff --git a/chrome/navigation_buttons_inside_urlbar.css b/chrome/navigation_buttons_inside_urlbar.css index 9956a61..06fa4c5 100644 --- a/chrome/navigation_buttons_inside_urlbar.css +++ b/chrome/navigation_buttons_inside_urlbar.css @@ -21,6 +21,7 @@ opacity: 1 !important; background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)); } + #nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"] .toolbarbutton-icon{ border: none !important; border-radius: 0 !important; @@ -30,8 +31,15 @@ width: initial !important; } +#back-button{ --backbutton-background: transparent } + +#nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:hover .toolbarbutton-icon{ + background-color: transparent !important; + box-shadow: none !important; +} + #nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not([disabled]):hover{ - background-color: hsla(0,0%,70%,.35); + background-image: linear-gradient(to bottom, var(--uc-active-color,hsla(0,0%,70%,.2)), var(--uc-active-color,hsla(0,0%,70%,.2))) } #urlbar-container:focus-within ~ .chromeclass-toolbar-additional[overflows="false"]{ diff --git a/chrome/page_action_buttons_on_hover.css b/chrome/page_action_buttons_on_hover.css index 727e6e9..9414b2b 100644 --- a/chrome/page_action_buttons_on_hover.css +++ b/chrome/page_action_buttons_on_hover.css @@ -3,9 +3,10 @@ opacity: 0; transition: margin-inline-end 200ms linear, opacity 200ms linear; } +:root[uidensity="compact"] #page-action-buttons > *[class^=urlbar-icon]{ margin-inline-end: -22px; } #page-action-buttons:hover > *[class^=urlbar-icon], #page-action-buttons > *[class^=urlbar-icon][open], #page-action-buttons > *[class^=urlbar-icon][open] ~ *[class^=urlbar-icon]{ opacity: 1; - margin-inline-end: 0px; + margin-inline-end: 0px !important; } \ No newline at end of file diff --git a/chrome/status_inside_urlbar.css b/chrome/status_inside_urlbar.css index 0bfd19a..9b44dfc 100644 --- a/chrome/status_inside_urlbar.css +++ b/chrome/status_inside_urlbar.css @@ -6,9 +6,8 @@ content: ""; width: 100%; height: 100%; - display: none; pointer-events:none; - background: -moz-element(#statuspanel) 0 -11px no-repeat !important; + background: -moz-element(#statuspanel) left calc(90% - var(--toolbarbutton-outer-padding)) no-repeat !important; } #urlbar .urlbar-input-box::after{ @@ -16,14 +15,6 @@ } #statuspanel{ z-index: -1; } -/* Don't show common values to save space (useful for oneliner) - safe to delete these */ -#statuspanel-label[value^="http"]{ margin-left: -5.8ch !important; } -#statuspanel-label[value^="https"]{ margin-left: -6.6ch !important; } -#statuspanel-label[value^="www"]{ margin-left: -5.3ch !important; } -#statuspanel-label[value^="http://www"]{ margin-left: -10.6ch !important; } -#statuspanel-label[value^="https://www"]{ margin-left: -11.3ch !important; } - -.searchbar-textbox{ margin: 2px 0 !important; } #statuspanel-inner > #statuspanel-label{ height:23px; @@ -31,6 +22,17 @@ background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)) !important; border: none !important; color: var(--lwt-toolbar-field-color, black) !important; - font-weight: bold !important; - margin-left: -3px -} \ No newline at end of file + font-size: larger; +} + +/* Don't show common values to save space (useful for oneliner) - safe to delete these */ +/* If you change the font size of the label then you'll have to modify these too */ +/* non-https links get a slight red hue */ + +#statuspanel-inner > #statuspanel-label{ margin-left: -3px !important; color: lightpink !important;} +#statuspanel-inner > #statuspanel-label[value^="http"]{ margin-left: -3.7ch !important; } +#statuspanel-inner > #statuspanel-label[value^="https"]{ margin-left: -6.1ch !important; color: var(--lwt-toolbar-field-color, black) !important} +#statuspanel-inner > #statuspanel-label[value^="www"]{ margin-left: -4.5ch !important; } +#statuspanel-inner > #statuspanel-label[value^="http://www"]{ margin-left: -9.7ch !important; } +#statuspanel-inner > #statuspanel-label[value^="https://www"]{ margin-left: -10.1ch !important; } +#statuspanel-inner{ margin-left: -1px; } diff --git a/chrome/theme_color_variables.css b/chrome/theme_color_variables.css new file mode 100644 index 0000000..ba372b8 --- /dev/null +++ b/chrome/theme_color_variables.css @@ -0,0 +1,13 @@ +/* Color controls for theme_***.css files */ +:root{ + --uc-dark-bkgnd-color: rgb(12,16,32); + --uc-light-bkgnd-color: rgb(46,54,69); + --uc-active-color: rgb(26, 70, 102); + --uc-text-color: rgb(195, 198, 201); + --uc-border-color: rgb(43,130,191); +} +/* Override some default variables - stylesheet compatibility */ +:root{ + --lwt-toolbar-field-background-color: var(--uc-dark-bkgnd-color) !important; + --lwt-toolbar-field-border-color: transparent !important;) +} \ No newline at end of file diff --git a/chrome/dark_popups_and_menus.css b/chrome/theme_popups_and_menus.css similarity index 92% rename from chrome/dark_popups_and_menus.css rename to chrome/theme_popups_and_menus.css index 6403620..86d4873 100644 --- a/chrome/dark_popups_and_menus.css +++ b/chrome/theme_popups_and_menus.css @@ -1,11 +1,6 @@ +/*!!! IMPORT theme_color_variables.css !!!*/ /* Makes popups, menus and context menus dark */ -:root{ - --uc-dark-bkgnd-color: rgb(12,16,32); - --uc-light-bkgnd-color: rgb(46,54,69); - --uc-active-color: rgb(26, 70, 102); - --uc-text-color: rgb(195, 198, 201); - --uc-border-color: rgb(43,130,191); -} +@import url(theme_color_variables.css); .panel-arrowcontent, #alltabs-popup .arrowscrollbox-scrollbox, diff --git a/chrome/theme_sidebar.css b/chrome/theme_sidebar.css new file mode 100644 index 0000000..d1ffdb2 --- /dev/null +++ b/chrome/theme_sidebar.css @@ -0,0 +1,37 @@ +/*!!! IMPORT theme_color_variables.css !!!*/ +@import url(theme_color_variables.css); +#sidebar-search-container #search-box{ + -moz-appearance:none !important; + background-color: var(--uc-dark-bkgnd-color) !important; + border: none !important; + color: var(--uc-text-color) !important; +} + +#history-panel, +#bookmarksPanel, +#sidebar-header{ + background-color: var(--uc-light-bkgnd-color) !important; + color: var(--uc-text-color) !important; + border-top: none !important; + border-bottom:none !important; + scrollbar-color: rgb(210,210,210) var(--uc-light-bkgnd-color) !important; +} + +.sidebar-placesTreechildren, +#sidebar-header{ + color: var(--uc-text-color) !important; +} + +.sidebar-placesTreechildren::-moz-tree-cell{ + outline:none; + border-radius:0px; + background-image:none; +} + +.sidebar-placesTreechildren::-moz-tree-cell(selected){ + background-color: var(--uc-border-color) !important; +} + +.sidebar-placesTreechildren::-moz-tree-cell(hover){ + background-color: var(--uc-active-color) !important; +} \ No newline at end of file diff --git a/chrome/theme_toolbars.css b/chrome/theme_toolbars.css new file mode 100644 index 0000000..ea110d2 --- /dev/null +++ b/chrome/theme_toolbars.css @@ -0,0 +1,79 @@ +/*!!! IMPORT theme_color_variables.css !!!*/ +@import url(theme_color_variables.css); +#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar), +#browser-bottombox, +.browserContainer > findbar, +.searchbar-textbox{ + background-color: var(--uc-light-bkgnd-color) !important; + color: var(--uc-text-color) !important; +} + +.browserContainer > findbar{ background-image: none !important; } + +#TabsToolbar, +.searchbar-textbox, +.findbar-textbox, +.findbar-find-previous, +.findbar-find-next, +#urlbar{ + background-color: var(--uc-dark-bkgnd-color) !important; + color: var(--uc-text-color) !important; +} + +#urlbar{ border-color: transparent !important; } + +#urlbar[focused]{ + border-color: var(--uc-border-color) !important; +} + +#urlbar .urlbar-icon:hover{ + box-shadow: none !important; +} + +#tabbrowser-tabs, +.search-panel-input-value, +.titlebar-buttonbox-container, +.tab-close-button{ + color: var(--uc-text-color) !important; +} + +.toolbarbutton-icon, toolbarbutton stack{ border-radius: 0px !important; } +:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon{ border-radius: 10000px !important; } + +toolbar toolbarbutton:not([disabled]):hover > .toolbarbutton-icon, +toolbar toolbarbutton:not([disabled]):hover > stack, +toolbar toolbarbutton[open="true"] > .toolbarbutton-icon, +toolbar toolbarbutton[open="true"] > stack, +toolbar toolbarbutton[checked="true"] > .toolbarbutton-icon, +toolbar toolbarbutton[checked="true"] > stack, +toolbar .bookmark-item:hover, +#page-action-buttons image:hover, +.urlbar-icon:hover, +#TabsToolbar .scrollbutton-down:hover, +#TabsToolbar .scrollbutton-up:hover, +findbar toolbarbutton:not([disabled]):hover, +findbar toolbarbutton[checked="true"]{ + background-color: var(--uc-active-color) !important; + box-shadow: inset 0 0 0 1px var(--uc-border-color) !important; +} + +/* Override some special cases */ +#TabsToolbar .scrollbutton-down > .toolbarbutton-icon, +#TabsToolbar .scrollbutton-up > .toolbarbutton-icon, +#downloads-indicator-anchor, +#PersonalToolbar .bookmark-item > .toolbarbutton-icon, +#titlebar .titlebar-button > .toolbarbutton-icon{ + background-color: transparent !important; + box-shadow: none !important; +} + +.toolbarbutton-1{ fill: var(--uc-text-color) !important; } + +.tab-line[selected]{ height: 1px !important; } + +.tabbrowser-tab[selected] .tab-background{ + background-image: linear-gradient(var(--uc-active-color) 75%,var(--uc-light-bkgnd-color)) !important; + box-shadow:0 3px 1px -1px white inset, + 0 10px 4px -5px var(--uc-border-color) inset, + 0 -2px 0 rgba(0,0,0,.06) inset !important; +}