This commit is contained in:
Vince 2024-12-03 12:40:37 +08:00
commit 3a26c37aca
71 changed files with 2412 additions and 852 deletions

View File

@ -91,6 +91,9 @@ OPTIONS:
-l, --libadwaita -l, --libadwaita
Install theme into gtk4.0 config for libadwaita. Default is dark version Install theme into gtk4.0 config for libadwaita. Default is dark version
-f, --fixed
Install fixed accent color version. Default is adaptive version
-HD, --highdefinition -HD, --highdefinition
Set to High Definition size. Default is laptop size Set to High Definition size. Default is laptop size
@ -237,7 +240,9 @@ OPTIONS:
4. darker Darker Firefox theme version Darker Firefox theme version 4. darker Darker Firefox theme version Darker Firefox theme version
5. adaptive Adaptive color version You need install adaptive-tab-bar-colour plugin first https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/ 5. nord Nord Firefox colorscheme version Nord Firefox colorscheme version
6. adaptive Adaptive color version You need install adaptive-tab-bar-colour plugin first https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/
-e, --edit-firefox [(monterey|flat)|alt|(darker|adaptive)] -e, --edit-firefox [(monterey|flat)|alt|(darker|adaptive)]
Edit 'WhiteSur' theme for Firefox settings and also connect the theme to the current Firefox profiles. Edit 'WhiteSur' theme for Firefox settings and also connect the theme to the current Firefox profiles.

View File

@ -35,6 +35,7 @@ usage() {
helpify "-m, --monterey" "" " Set to MacOS Monterey style" "" helpify "-m, --monterey" "" " Set to MacOS Monterey style" ""
helpify "-N, --nautilus" "[$(IFS='|'; echo "${NAUTILUS_STYLE_VARIANTS[*]}")]" " Set Nautilus style" "Default is BigSur-like style (stabled sidebar)" helpify "-N, --nautilus" "[$(IFS='|'; echo "${NAUTILUS_STYLE_VARIANTS[*]}")]" " Set Nautilus style" "Default is BigSur-like style (stabled sidebar)"
helpify "-l, --libadwaita" "" " Install theme into gtk4.0 config for libadwaita" "Default is dark version" helpify "-l, --libadwaita" "" " Install theme into gtk4.0 config for libadwaita" "Default is dark version"
helpify "-f, --fixed" "" " Install fixed accent color version" "Default is adaptive version"
helpify "-HD, --highdefinition" "" " Set to High Definition size" "Default is laptop size" helpify "-HD, --highdefinition" "" " Set to High Definition size" "Default is laptop size"
helpify "--shell, --gnomeshell" "" " Tweaks for gnome-shell" "Options:" helpify "--shell, --gnomeshell" "" " Tweaks for gnome-shell" "Options:"
@ -129,6 +130,8 @@ while [[ $# -gt 0 ]]; do
monterey="true"; shift ;; monterey="true"; shift ;;
-l|--libadwaita) -l|--libadwaita)
libadwaita="true"; shift ;; libadwaita="true"; shift ;;
-f|--fixed)
accent_type="fixed"; shift ;;
-r|--remove|-u|-uninstall) -r|--remove|-u|-uninstall)
uninstall='true'; shift ;; uninstall='true'; shift ;;
--silent-mode) --silent-mode)
@ -167,10 +170,11 @@ if [[ "${uninstall}" == 'true' ]]; then
fi fi
else else
if [[ "${interactive}" == 'true' ]]; then if [[ "${interactive}" == 'true' ]]; then
show_panel_opacity_dialog; show_sidebar_size_dialog; show_nautilus_style_dialog show_panel_opacity_dialog
echo; prompt -w "DIALOG: '--size' and '--panel' parameters are ignored if exist."; echo # show_sidebar_size_dialog
else show_nautilus_style_dialog
show_needed_dialogs # else
# show_needed_dialogs
fi fi
prompt -w "Removing the old '${name}' themes...\n" prompt -w "Removing the old '${name}' themes...\n"

View File

@ -608,7 +608,7 @@ install_gdm_theme() {
# Let's go! # Let's go!
install_theme_deps install_theme_deps
rm -rf "${WHITESUR_GS_DIR}"; install_beggy rm -rf "${WHITESUR_GS_DIR}"; install_beggy
gtk_base gtk_base && shell_base
if check_theme_file "${COMMON_CSS_FILE}"; then # CSS-based theme if check_theme_file "${COMMON_CSS_FILE}"; then # CSS-based theme
install_shelly "${colors[0]}" "${opacities[0]}" "${alts[0]}" "${themes[0]}" "${schemes[0]}" "${icon}" "${WHITESUR_GS_DIR}" install_shelly "${colors[0]}" "${opacities[0]}" "${alts[0]}" "${themes[0]}" "${schemes[0]}" "${icon}" "${WHITESUR_GS_DIR}"
@ -670,7 +670,10 @@ install_firefox_theme() {
local TARGET_DIR="${FIREFOX_THEME_DIR}" local TARGET_DIR="${FIREFOX_THEME_DIR}"
fi fi
local theme_type="${darker}${adaptive}${colorscheme}"
remove_firefox_theme remove_firefox_theme
udo mkdir -p "${TARGET_DIR}" udo mkdir -p "${TARGET_DIR}"
udo cp -rf "${FIREFOX_SRC_DIR}"/customChrome.css "${TARGET_DIR}" udo cp -rf "${FIREFOX_SRC_DIR}"/customChrome.css "${TARGET_DIR}"
@ -682,12 +685,12 @@ install_firefox_theme() {
cp -rf "${FIREFOX_SRC_DIR}"/common/*.css "${TARGET_DIR}/${theme_name}" cp -rf "${FIREFOX_SRC_DIR}"/common/*.css "${TARGET_DIR}/${theme_name}"
cp -rf "${FIREFOX_SRC_DIR}"/common/parts/*.css "${TARGET_DIR}/${theme_name}"/parts cp -rf "${FIREFOX_SRC_DIR}"/common/parts/*.css "${TARGET_DIR}/${theme_name}"/parts
[[ -f "${TARGET_DIR}"/userChrome.css ]] && mv "${TARGET_DIR}"/userChrome.css "${TARGET_DIR}"/userChrome.css.bak [[ -f "${TARGET_DIR}"/userChrome.css ]] && mv "${TARGET_DIR}"/userChrome.css "${TARGET_DIR}"/userChrome.css.bak
cp -rf "${FIREFOX_SRC_DIR}"/userChrome-"${theme_name}${darker}${adaptive}".css "${TARGET_DIR}"/userChrome.css cp -rf "${FIREFOX_SRC_DIR}"/userChrome-"${theme_name}${theme_type}".css "${TARGET_DIR}"/userChrome.css
[[ -f "${TARGET_DIR}"/userContent.css ]] && mv "${TARGET_DIR}"/userContent.css "${TARGET_DIR}"/userContent.css.bak [[ -f "${TARGET_DIR}"/userContent.css ]] && mv "${TARGET_DIR}"/userContent.css "${TARGET_DIR}"/userContent.css.bak
cp -rf "${FIREFOX_SRC_DIR}"/userContent-"${theme_name}${darker}${adaptive}".css "${TARGET_DIR}"/userContent.css cp -rf "${FIREFOX_SRC_DIR}"/userContent-"${theme_name}${theme_type}".css "${TARGET_DIR}"/userContent.css
if [[ "${firefoxtheme}" == 'Flat' && "${theme_name}" == 'Monterey' ]]; then if [[ "${firefoxtheme}" == 'Flat' && "${theme_name}" == 'Monterey' ]]; then
cp -rf "${FIREFOX_SRC_DIR}"/userChrome-Monterey-alt"${darker}${adaptive}".css "${TARGET_DIR}"/userChrome.css cp -rf "${FIREFOX_SRC_DIR}"/userChrome-Monterey-alt"${theme_type}".css "${TARGET_DIR}"/userChrome.css
cp -rf "${FIREFOX_SRC_DIR}"/WhiteSur/parts/headerbar-urlbar.css "${TARGET_DIR}"/Monterey/parts/headerbar-urlbar-alt.css cp -rf "${FIREFOX_SRC_DIR}"/WhiteSur/parts/headerbar-urlbar.css "${TARGET_DIR}"/Monterey/parts/headerbar-urlbar-alt.css
fi fi
@ -895,6 +898,10 @@ gtk_base() {
if [[ "${GNOME_VERSION}" -ge '47-0' && "${libadwaita}" == 'true' ]]; then if [[ "${GNOME_VERSION}" -ge '47-0' && "${libadwaita}" == 'true' ]]; then
sed $SED_OPT "/\$gnome_version/s/old/new/" "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss" sed $SED_OPT "/\$gnome_version/s/old/new/" "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss"
fi fi
if [[ "${accent_type}" == 'fixed' ]]; then
sed $SED_OPT "/\$accent_type/s/default/fixed/" "${THEME_SRC_DIR}/sass/_gtk-base-temp.scss"
fi
} }
shell_base() { shell_base() {

View File

@ -2,7 +2,8 @@ $variant: 'dark';
@import '../../sass/variables'; @import '../../sass/variables';
@import '../../sass/colors'; @import '../../sass/colors';
@import '../../sass/gtk/drawing'; @import '../../sass/gtk/drawing-3.0';
@import '../../sass/gtk/common-3.0'; @import '../../sass/gtk/common-3.0';
@import '../../sass/gtk/apps-3.0'; @import '../../sass/gtk/apps-3.0';
@import '../../sass/gtk/colors-public'; @import '../../sass/gtk/colors-public';
@import '../../sass/gtk/colors-other';

View File

@ -2,7 +2,8 @@ $variant: 'light';
@import '../../sass/variables'; @import '../../sass/variables';
@import '../../sass/colors'; @import '../../sass/colors';
@import '../../sass/gtk/drawing'; @import '../../sass/gtk/drawing-3.0';
@import '../../sass/gtk/common-3.0'; @import '../../sass/gtk/common-3.0';
@import '../../sass/gtk/apps-3.0'; @import '../../sass/gtk/apps-3.0';
@import '../../sass/gtk/colors-public'; @import '../../sass/gtk/colors-public';
@import '../../sass/gtk/colors-other';

View File

@ -3,7 +3,7 @@ $variant: 'dark';
@import '../../sass/variables'; @import '../../sass/variables';
@import '../../sass/colors'; @import '../../sass/colors';
@import '../../sass/gtk/colors-libadwaita'; @import '../../sass/gtk/colors-libadwaita';
@import '../../sass/gtk/drawing'; @import '../../sass/gtk/drawing-4.0';
@import '../../sass/gtk/common-4.0'; @import '../../sass/gtk/common-4.0';
@import '../../sass/gtk/apps-4.0'; @import '../../sass/gtk/apps-4.0';
@import '../../sass/gtk/colors-public'; @import '../../sass/gtk/colors-public';

View File

@ -3,7 +3,7 @@ $variant: 'light';
@import '../../sass/variables'; @import '../../sass/variables';
@import '../../sass/colors'; @import '../../sass/colors';
@import '../../sass/gtk/colors-libadwaita'; @import '../../sass/gtk/colors-libadwaita';
@import '../../sass/gtk/drawing'; @import '../../sass/gtk/drawing-4.0';
@import '../../sass/gtk/common-4.0'; @import '../../sass/gtk/common-4.0';
@import '../../sass/gtk/apps-4.0'; @import '../../sass/gtk/apps-4.0';
@import '../../sass/gtk/colors-public'; @import '../../sass/gtk/colors-public';

View File

@ -0,0 +1,172 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Variables that start with --gnome- are added by me and are assigned
* to elements somewhere in this code. The rest of the variables are
* built-in in Firefox, so you need to add an !important if you wanna
* override them. */
@media (prefers-color-scheme: dark) {
:root {
/* Browser area before a page starts loading */
--gnome-browser-before-load-background: #252932;
--gnome-content-page-dialog-background: #313742;
--gnome-content-page-background: #15181d;
--gnome-content-box-background: #20242b;
--gnome-content-page-color: #eef3fd;
--theme-primary-color: #5271ad;
--theme-primary-hover-color: #6085cc;
--theme-primary-active-color: #73a0f5;
/* Toolbars */
--gnome-toolbar-background: #2e3440;
--gnome-tabstoolbar-background: #191c23;
--gnome-findbar-background: #2b303b;
--gnome-toolbar-color: #fbfcfd;
--gnome-toolbar-icon-fill: #fbfcfd;
--gnome-toolbar-border-color: #0e0f0f;
--gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35);
--gnome-inactive-toolbar-background: #242931;
--gnome-inactive-toolbar-border-color: #0d0f12;
/* Sidebar */
--sidebar-background-color: #252932;
--gnome-sidebar-background: #2c313b;
--gnome-inactive-sidebar-background: #2f343f;
--gnome-sidebar-border-color: color-mix(in srgb, #000000 75%, var(--gnome-sidebar-background));
/* Popups */
--gnome-menu-background: rgba(43, 48, 59, 0.95);
--gnome-menu-border-color: rgba(0, 0, 0, 0.75);
--gnome-popover-background: rgba(43, 48, 59, 0.95);
--gnome-popover-border-color: rgba(0, 0, 0, 0.75);
--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
--gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1);
--gnome-popover-button-active-background: rgba(255, 255, 255, 0.15);
--gnome-popover-separator-color: rgba(255, 255, 255, 0.08);
/* Header bar */
--gnome-headerbar-background: #2e3440;
--gnome-headerbar-border-color: #0e0f0f;
--gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
--gnome-inactive-headerbar-background: #242931;
--gnome-inactive-headerbar-border-color: #0d0f12;
--gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08););
/* Buttons */
--gnome-button-background: linear-gradient(to top, #495263 0%, #4e5769 100%);
--gnome-button-border-color: rgba(0, 0, 0, 0.2);
--gnome-button-border-bottom-color: rgba(0, 0, 0, 0.25);
--gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
--gnome-button-hover-color: rgba(255, 255, 255, 0.1);
--gnome-button-active-color: rgba(255, 255, 255, 0.2);
--gnome-button-hover-background: linear-gradient(to top, #535d70 0%, #555f73 100%);
--gnome-button-active-background: linear-gradient(to top, #5f6a80 0%, #626e85 100%);
--gnome-button-active-border-color: rgba(0, 0, 0, 0.25);
--gnome-button-active-border-bottom-color: rgba(0, 0, 0, 0.25);
--gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
--gnome-button-disabled-background: linear-gradient(to top, #323743 0%, #363c49 100%);
--gnome-button-disabled-border-color: rgba(0, 0, 0, 0.2);
--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
--gnome-inactive-button-background: linear-gradient(#292e38, #292e38);
--gnome-inactive-button-border-color: rgba(0, 0, 0, 0.12);
--gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0);
--gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e);
--gnome-button-suggested-action-border-color: rgba(0, 0, 0, 0.2);
--gnome-button-suggested-action-border-bottom-color: rgba(0, 0, 0, 0.3);
--gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
--gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px);
--gnome-button-suggested-action-active-background: linear-gradient(to top, #103e75, #103e75 1px);
--gnome-button-suggested-action-active-border-color: rgba(0, 0, 0, 0.3);
--gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
--gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d);
--gnome-button-destructive-action-border-color: rgba(0, 0, 0, 0.2);
--gnome-button-destructive-action-border-bottom-color: rgba(0, 0, 0, 0.3);
--gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px);
--gnome-button-destructive-action-active-background: linear-gradient(to top, #8a1116, #8a1116 1px);
--gnome-button-destructive-action-active-border-color: rgba(0, 0, 0, 0.3);
--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
--gnome-headerbar-button-combined-background: rgba(255, 255, 255, 0.05);
--gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1);
--gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15);
/* URL bar */
--gnome-urlbar-background: #323946;
--gnome-urlbar-border-color: rgba(0, 0, 0, 0.2);
--gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75);
--gnome-urlbar-color: #f0f5ff;
--gnome-hover-urlbar-border-color: #414958;
--gnome-inactive-urlbar-background: #292e38;
--gnome-inactive-urlbar-border-color: #1e2128;
--gnome-inactive-urlbar-box-shadow: none;
--gnome-inactive-urlbar-color: #c9cdd6;
--gnome-focused-urlbar-border-color: #338CBE;
--gnome-focused-urlbar-highlight-color: #006EA0;
--gnome-private-urlbar-background: #25003e;
/* Tabs */
--gnome-tabbar-tab-background: rgba(255, 255, 255, 0.06);
--gnome-tabbar-tab-color: #828690;
--gnome-tabbar-tab-hover-background: rgba(255, 255, 255, 0.12);
--gnome-tabbar-tab-hover-color: #b4bbc8;
--gnome-tabbar-tab-active-background: rgba(255, 255, 255, 0.16);
--gnome-tabbar-tab-active-color: #fbfcfd;
--gnome-tabbar-tab-active-hover-background: rgba(255, 255, 255, 0.16);
--gnome-inactive-tabbar-tab-color: #5e6168;
--gnome-inactive-tabbar-tab-background: rgba(255, 255, 255, 0.03);
--gnome-inactive-tabbar-tab-active-background: rgba(255, 255, 255, 0.1);
--gnome-inactive-tabbar-tab-active-color: #7b8089;
--gnome-tab-attention-icon-color: #8694c4;
/* Switch */
--gnome-switch-background: #343a46;
--gnome-switch-hover-background: #3d4452;
--gnome-switch-active-background: #474f60;
--gnome-switch-border-color: transparent;
--gnome-switch-slider-background: #fbfcfd;
--gnome-switch-slider-border-color: transparent;
--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-pressed-background: var(--theme-primary-color);
--gnome-switch-pressed-hover-background: var(--theme-primary-hover-color);
--gnome-switch-pressed-active-background: var(--theme-primary-active-color);
--gnome-switch-active-border-color: transparent;
--gnome-switch-active-slider-border-color: transparent;
/* Dirty hacks for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be
* inverted, on others they don't, adjusts the filters below to your
* needs (you may also adjust icon brightness here). */
--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
--gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */
--gnome-window-icons-hack-filter: invert(90%); /* without invert: none */
/* Private window colors */
--gnome-private-accent: #78aeed;
/* Toolbars */
--gnome-private-toolbar-background: var(--gnome-headerbar-background);
--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
/* Menus */
--gnome-private-menu-background: #292e38;
/* Header bar */
--gnome-private-headerbar-background: #252F49;
--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
/* Tabs */
--gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */
--gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */
/* Text color for Firefox Logo in new private tab */
--gnome-private-wordmark: #FBFBFE;
/* New private tab background */
--gnome-private-in-content-page-background: #1b1e24;
/* Private browsing info box */
--gnome-private-text-primary-color: #FBFBFE;
}
}

View File

@ -9,7 +9,10 @@
:root { :root {
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: #242424; --gnome-browser-before-load-background: #242424;
--gnome-browser-content-box-background: #323232; --gnome-content-page-dialog-background: #424242;
--gnome-content-page-background: #1d1d1d;
--gnome-content-box-background: #2b2b2b;
--gnome-content-page-color: #fdfdfd;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1; --theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3; --theme-primary-active-color: #6584f3;
@ -102,20 +105,17 @@
--gnome-private-urlbar-background: #25003e; --gnome-private-urlbar-background: #25003e;
/* Tabs */ /* Tabs */
--gnome-tabbar-tab-background: #404040; --gnome-tabbar-tab-background: rgba(255, 255, 255, 0.06);
--gnome-tabbar-tab-color: rgb(141, 144, 145); --gnome-tabbar-tab-color: #909090;
--gnome-tabbar-tab-hover-background: #464646; --gnome-tabbar-tab-hover-background: rgba(255, 255, 255, 0.12);
--gnome-tabbar-tab-hover-border-bottom-color: #1b1b1b; --gnome-tabbar-tab-hover-color: #c8c8c8;
--gnome-tabbar-tab-hover-color: rgb(200, 200, 200); --gnome-tabbar-tab-active-background: rgba(255, 255, 255, 0.16);
--gnome-tabbar-tab-active-background: #505050;
--gnome-tabbar-tab-active-border-bottom-color: #15539e;
--gnome-tabbar-tab-active-color: #ffffff; --gnome-tabbar-tab-active-color: #ffffff;
--gnome-tabbar-tab-active-hover-background: #525252; --gnome-tabbar-tab-active-hover-background: rgba(255, 255, 255, 0.16);
--gnome-inactive-tabbar-tab-color: rgb(141, 144, 145); --gnome-inactive-tabbar-tab-color: #686868;
--gnome-inactive-tabbar-tab-background: #383838; --gnome-inactive-tabbar-tab-background: rgba(255, 255, 255, 0.03);
--gnome-inactive-tabbar-tab-active-background: #424242; --gnome-inactive-tabbar-tab-active-background: rgba(255, 255, 255, 0.1);
--gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color); --gnome-inactive-tabbar-tab-active-color: #898989;
--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
--gnome-tab-attention-icon-color: #718be8; --gnome-tab-attention-icon-color: #718be8;
/* Switch */ /* Switch */

View File

@ -9,7 +9,10 @@
:root { :root {
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: #1f1f1f; --gnome-browser-before-load-background: #1f1f1f;
--gnome-browser-content-box-background: #323232; --gnome-content-page-dialog-background: #242424;
--gnome-content-page-background: #101010;
--gnome-content-box-background: #1b1b1b;
--gnome-content-page-color: #dddddd;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1; --theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3; --theme-primary-active-color: #6584f3;

View File

@ -9,6 +9,10 @@
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: var(--lwt-accent-color, #ffffff); --gnome-browser-before-load-background: var(--lwt-accent-color, #ffffff);
--gnome-browser-content-box-background: var(--lwt-accent-color, #ffffff); --gnome-browser-content-box-background: var(--lwt-accent-color, #ffffff);
--gnome-content-page-dialog-background: #ffffff;
--gnome-content-page-background: #f2f2f2;
--gnome-content-box-background: #ffffff;
--gnome-content-page-color: #242424;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1; --theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3; --theme-primary-active-color: #6584f3;

View File

@ -0,0 +1,169 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Variables that start with --gnome- are added by me and are assigned
* to elements somewhere in this code. The rest of the variables are
* built-in in Firefox, so you need to add an !important if you wanna
* override them. */
:root {
/* Browser area before a page starts loading */
--gnome-browser-before-load-background: #f3f4f6;
--gnome-content-page-dialog-background: #fbfcfd;
--gnome-content-page-background: #e3e8f2;
--gnome-content-box-background: #fbfcfd;
--gnome-content-page-color: #1b1e24;
--theme-primary-color: #5271ad;
--theme-primary-hover-color: #6085cc;
--theme-primary-active-color: #73a0f5;
/* Toolbars */
--gnome-toolbar-background: #fbfcfd;
--gnome-tabstoolbar-background: #d7dce5;
--gnome-findbar-background: #f3f4f6;
--gnome-toolbar-color: #22262e;
--gnome-toolbar-icon-fill: #22262e;
--gnome-toolbar-border-color: #c3c7cf;
--gnome-inactive-toolbar-color: rgba(34, 38, 46, 0.45);
--gnome-inactive-toolbar-background: #f6f5f4;
--gnome-inactive-toolbar-border-color: #cdd1da;
/* Sidebar */
--gnome-sidebar-background: #f3f4f6;
--gnome-inactive-sidebar-background: #f2f4f9;
--gnome-sidebar-border-color: color-mix(in srgb, #000000 12%, var(--gnome-sidebar-background));
/* Popups */
--gnome-menu-background: rgba(255, 255, 255, 0.95);
--gnome-menu-border-color: rgba(0, 0, 0, 0.12);
--gnome-popover-background: rgba(255, 255, 255, 0.95);
--gnome-popover-border-color: rgba(0, 0, 0, 0.12);
--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
--gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1);
--gnome-popover-button-active-background: rgba(0, 0, 0, 0.2);
--gnome-popover-separator-color: rgba(0, 0, 0, 0.1);
/* Header bar */
--gnome-headerbar-background: #fbfcfd;
--gnome-headerbar-border-color: #c3c7cf;
--gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset;
--gnome-inactive-headerbar-background: #f3f4f6;
--gnome-inactive-headerbar-border-color: #cdd1da;
--gnome-inactive-headerbar-box-shadow: 0 1px #fff inset;
/* Buttons */
--gnome-button-background: linear-gradient(to top, #eaecf1 0%, #f5f8fd 95%, #f6f9fe 100%);
--gnome-button-border-color: #c3c7cf;
--gnome-button-border-bottom-color: #c3c7cf;
--gnome-button-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.03);
--gnome-button-hover-color: rgba(0, 0, 0, 0.1);
--gnome-button-active-color: rgba(0, 0, 0, 0.2);
--gnome-button-hover-background: linear-gradient(to top, #f5f8fd 0%, #eef3fd 100%);
--gnome-button-active-background: #c3c7cf;
--gnome-button-active-border-color: #a7abb2;
--gnome-button-active-border-bottom-color: #a7abb2;
--gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset;
--gnome-button-disabled-background: #faf9f8;
--gnome-button-disabled-border-color: #c3c7cf;
--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
--gnome-inactive-button-background: #f6f5f4;
--gnome-inactive-button-border-color: #cdd1da;
--gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0);
--gnome-button-suggested-action-background: linear-gradient(to top, #2379e2 2px, #3584e4);
--gnome-button-suggested-action-border-color: #1b6acb;
--gnome-button-suggested-action-border-bottom-color: #15539e;
--gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-button-suggested-action-hover-background: linear-gradient(to top, #3584e4, #3987e5 1px);
--gnome-button-suggested-action-active-background: linear-gradient(to top, #1961b9, #1961b9 1px);
--gnome-button-suggested-action-active-border-color: #1b6acb;
--gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
--gnome-button-destructive-action-background: linear-gradient(to top, #ce1921 2px, #e01b24);
--gnome-button-destructive-action-border-color: #b2161d;
--gnome-button-destructive-action-border-bottom-color: #851015;
--gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-button-destructive-action-hover-background: linear-gradient(to top, #e01b24, #e41c26 1px);
--gnome-button-destructive-action-active-background: linear-gradient(to top, #a0131a, #a0131a 1px);
--gnome-button-destructive-action-active-border-color: #b2161d;
--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
--gnome-headerbar-button-combined-background: rgba(0, 0, 0, 0.05);
--gnome-headerbar-button-hover-background: rgba(0, 0, 0, 0.1);
--gnome-headerbar-button-active-background: rgba(0, 0, 0, 0.15);
/* URL bar */
--gnome-urlbar-background: #f3f4f6;
--gnome-urlbar-border-color: #abafb6;
--gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0,0,0, 0.12);
--gnome-urlbar-color: #020202;
--gnome-hover-urlbar-border-color: #d7dce5;
--gnome-inactive-urlbar-background: #e9ebf0;
--gnome-inactive-urlbar-border-color: #cdd1da;
--gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
--gnome-inactive-urlbar-color: #252932;
--gnome-focused-urlbar-border-color: #5683DA;
--gnome-focused-urlbar-highlight-color: #6592E9;
--gnome-private-urlbar-background: #e6c2ff;
/* Tabs */
--gnome-tabbar-tab-background: #e6ebf5;
--gnome-tabbar-tab-color: rgb(141, 144, 145);
--gnome-tabbar-tab-hover-background: #f0f0f0;
--gnome-tabbar-tab-hover-color: rgb(93, 98, 99);
--gnome-tabbar-tab-active-background: #e8e8e8;
--gnome-tabbar-tab-active-color: rgb(46, 52, 54);
--gnome-tabbar-tab-active-hover-background: #f0f0f0;
--gnome-inactive-tabbar-tab-color: #8b8e8f;
--gnome-inactive-tabbar-tab-background: #f0f0f0;
--gnome-inactive-tabbar-tab-active-background: #eeeeee;
--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
--gnome-tab-attention-icon-color: #718be8;
/* Switch */
--gnome-switch-background: #a7abb2;
--gnome-switch-hover-background: #969aa0;
--gnome-switch-active-background: #7b8292;
--gnome-switch-border-color: transparent;
--gnome-switch-slider-background: #fbfcfd;
--gnome-switch-slider-border-color: transparent;
--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-border-color: transparent;
--gnome-switch-active-slider-border-color: transparent;
--gnome-switch-pressed-background: #315bef;
--gnome-switch-pressed-hover-background: #5073f1;
--gnome-switch-pressed-active-background: #6584f3;
/* Dirty hacks for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be
* inverted, on others they don't, adjusts the filters below to your
* needs (you may also adjust icon brightness here). */
--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%);
--gnome-icons-hack-filter: none;
--gnome-window-icons-hack-filter: invert(30%);
/* Private window colors */
--gnome-private-accent: #1c71d8;
/* Toolbars */
--gnome-private-toolbar-background: var(--gnome-headerbar-background);
--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
/* Menus */
--gnome-private-menu-background: #fbfcfd;
/* Header bar */
--gnome-private-headerbar-background: #D7E3F0;
--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
/* Tabs */
--gnome-private-tabbar-tab-hover-background: #cbd7e3; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background: #c6d1dd; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background-contrast: #a9b6c4; /* Hardcoded color */
--gnome-private-tabbar-tab-active-hover-background: #c0cbd7; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-hover-background: #e4e9f0; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-active-background: #e1e7ed; /* Hardcoded color */
/* Text color for Firefox Logo in new private tab */
--gnome-private-wordmark: #20123A;
/* New private tab background */
--gnome-private-in-content-page-background: #ebf0fa;
/* Private browsing info box */
--gnome-private-text-primary-color: #15141A;
}

View File

@ -8,7 +8,10 @@
:root { :root {
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: #f5f5f5; --gnome-browser-before-load-background: #f5f5f5;
--gnome-browser-content-box-background: #ffffff; --gnome-content-page-dialog-background: #ffffff;
--gnome-content-page-background: #f2f2f2;
--gnome-content-box-background: #ffffff;
--gnome-content-page-color: #242424;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1; --theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3; --theme-primary-active-color: #6584f3;

View File

@ -45,8 +45,6 @@ toolbarspring {
} }
#urlbar[breakout][breakout-extend] { #urlbar[breakout][breakout-extend] {
left: 0 !important;
top: 0 !important;
width: 360px !important; width: 360px !important;
z-index: 5 !important; z-index: 5 !important;
padding: 0 !important; padding: 0 !important;

View File

@ -12,12 +12,8 @@
min-height: 32px !important; min-height: 32px !important;
} }
#TabsToolbar-customization-target { #TabsToolbar #tabbrowser-tabs,
padding-bottom: 6px !important; #TabsToolbar #tabbrowser-tabs arrowscrollbox {
}
#tabbrowser-tabs,
#tabbrowser-tabs arrowscrollbox {
min-height: 32px !important; min-height: 32px !important;
--tab-min-height: 32px !important; --tab-min-height: 32px !important;
} }
@ -26,13 +22,14 @@
max-height: 32px !important; max-height: 32px !important;
} }
.tab-background, .tab-stack { #TabsToolbar .tab-background,
#TabsToolbar .tab-stack {
height: 32px !important; height: 32px !important;
min-height: 32px !important; min-height: 32px !important;
} }
tab > stack { #TabsToolbar tab > stack {
margin: 0 3px !important; margin: 6px 3px !important;
} }
:root:not([sizemode="normal"]) .titlebar-spacer[type="pre-tabs"], :root[gtktiledwindow="true"] .titlebar-spacer[type="pre-tabs"] { /* reset */ :root:not([sizemode="normal"]) .titlebar-spacer[type="pre-tabs"], :root[gtktiledwindow="true"] .titlebar-spacer[type="pre-tabs"] { /* reset */
@ -43,10 +40,13 @@ tab > stack {
width: 8px !important; width: 8px !important;
} }
.tabbrowser-tab,
.tab-background { .tab-background {
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
}
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tab-background {
border-radius: 8px !important; border-radius: 8px !important;
padding: 0 !important; padding: 0 !important;
background-image: none !important; background-image: none !important;
@ -60,7 +60,7 @@ tab > stack {
color: var(--gnome-tabbar-tab-active-color) !important; color: var(--gnome-tabbar-tab-active-color) !important;
} }
.tab-background { #TabsToolbar .tab-background {
margin: 0 !important; margin: 0 !important;
transition: none; transition: none;
margin-block: 0 !important; margin-block: 0 !important;
@ -71,16 +71,16 @@ tab > stack {
transition: background 200ms; transition: background 200ms;
} }
#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background { .tabbrowser-tab:not([selected=true]) .tab-background {
background: var(--gnome-tabbar-tab-background) !important; background: var(--gnome-tabbar-tab-background) !important;
} }
#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive { .tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive {
background: var(--gnome-inactive-tabbar-tab-background) !important; background: var(--gnome-inactive-tabbar-tab-background) !important;
} }
/* Tab hover */ /* Tab hover */
#TabsToolbar .tabbrowser-tab:not([selected=true]):hover > .tab-stack > .tab-background { .tabbrowser-tab:not([selected=true]):hover > .tab-stack > .tab-background {
background: var(--gnome-tabbar-tab-hover-background) !important; background: var(--gnome-tabbar-tab-hover-background) !important;
} }
@ -113,6 +113,7 @@ tab[selected]:-moz-window-inactive .tab-label {
} }
/* Center all inside tab */ /* Center all inside tab */
#TabsToolbar {
.tab-content { .tab-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -126,41 +127,6 @@ tab[selected]:-moz-window-inactive .tab-label {
margin-inline: 0 !important; margin-inline: 0 !important;
} }
/* Prevent tab icons size breaking */
.tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button {
min-width: 16px;
}
.tabbrowser-tab[soundplaying="true"] .tab-icon-image,
.tabbrowser-tab[muted="true"] .tab-icon-image {
margin-top: 3px !important;
margin-left: 2px !important;
}
.tab-icon-overlay {
height: 24px !important;
width: 24px !important;
padding: 4px !important;
border-radius: 100px !important;
}
.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
top: 0 !important;
inset-inline-end: 0 !important;
}
.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
background-color: var(--gnome-tabbar-tab-background) !important;
}
.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
background-color: var(--gnome-tabbar-tab-active-background) !important;
}
.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover {
background-color: var(--gnome-tabbar-tab-hover-background) !important;
}
/* Adjust tab label width */ /* Adjust tab label width */
.tab-label-container { .tab-label-container {
min-width: 0 !important; min-width: 0 !important;
@ -210,6 +176,29 @@ tab[selected]:-moz-window-inactive .tab-label {
margin-left: 0 !important margin-left: 0 !important
} }
/* Prevent tab icons size breaking */
.tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button {
min-width: 16px;
}
.tabbrowser-tab[soundplaying="true"] .tab-icon-image,
.tabbrowser-tab[muted="true"] .tab-icon-image {
margin-top: 3px !important;
margin-left: 2px !important;
}
.tab-icon-overlay {
height: 24px !important;
width: 24px !important;
padding: 4px !important;
border-radius: 100px !important;
}
.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) {
top: 0 !important;
inset-inline-end: 0 !important;
}
/*Align personal bookmarks v89 */ /*Align personal bookmarks v89 */
#personal-bookmarks { #personal-bookmarks {
-moz-box-align: center !important; -moz-box-align: center !important;
@ -219,6 +208,19 @@ tab[selected]:-moz-window-inactive .tab-label {
.tabbrowser-tab { .tabbrowser-tab {
padding-inline: 0px !important; padding-inline: 0px !important;
} }
}
.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
background-color: transparent !important;
}
.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
background-color: transparent !important;
}
.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
background-color: var(--gnome-tabbar-tab-hover-background) !important;
}
.close-icon { .close-icon {
height: 16px !important; height: 16px !important;
@ -274,6 +276,18 @@ tab[selected]:-moz-window-inactive .tab-label {
display: none; display: none;
} }
/* tab-context-line above tabs */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
height: 2px;
border-radius: 2px;
margin: 0 12px !important;
}
/* Remove alt colours references for multi tabs*/
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
display: none;
}
/* Remove tab separators */ /* Remove tab separators */
.tabbrowser-tab::after, .tabbrowser-tab::after,
.tabbrowser-tab::before { .tabbrowser-tab::before {
@ -300,11 +314,6 @@ tab[selected]:-moz-window-inactive .tab-label {
max-width: .1px !important; max-width: .1px !important;
} }
/* Remove alt colours references for multi tabs*/
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
display: none;
}
.tabbrowser-tab[class*="identity-color-"][pinned] { .tabbrowser-tab[class*="identity-color-"][pinned] {
display: flex; display: flex;
} }
@ -315,15 +324,16 @@ tab[selected]:-moz-window-inactive .tab-label {
} }
#TabsToolbar .toolbarbutton-1, #TabsToolbar .toolbarbutton-1,
#tabs-newtab-button, #TabsToolbar #new-tab-button { #TabsToolbar #tabs-newtab-button,
#TabsToolbar #new-tab-button {
min-height: 32px !important; min-height: 32px !important;
margin: 0 2px !important; margin: 6px 2px !important;
padding: 0 10px !important; padding: 0 10px !important;
border-radius: 8px !important; border-radius: 8px !important;
} }
#TabsToolbar .toolbarbutton-1 image, #TabsToolbar .toolbarbutton-1 image,
#tabs-newtab-button image, #TabsToolbar #tabs-newtab-button image,
#TabsToolbar #new-tab-button image { #TabsToolbar #new-tab-button image {
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;

View File

@ -7,27 +7,35 @@
-moz-window-dragging: drag; -moz-window-dragging: drag;
} }
tab > stack { #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]):not([orient="vertical"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
margin-inline-start: 6px !important;
}
#TabsToolbar tab > stack {
margin: 0 3px !important; margin: 0 3px !important;
} }
/* Tabs bar height */
#TabsToolbar #tabbrowser-tabs {
--tab-min-height: 32px !important;
--tabstrip-min-height: 32px !important;
}
#TabsToolbar .tab-background,
#TabsToolbar .tab-stack {
height: 32px !important;
min-height: 32px !important;
}
.tabbrowser-tab, .tabbrowser-tab,
.tab-background { .tab-background {
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
border-radius: 8px !important; border-radius: 8px !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 0 !important; padding: 0 !important;
background-image: none !important; background-image: none !important;
} }
.tab-content {
height: 32px !important;
min-height: 32px !important;
}
.tabbrowser-tab:not([visuallyselected="true"], [multiselected]), .tabbrowser-tab:-moz-lwtheme { .tabbrowser-tab:not([visuallyselected="true"], [multiselected]), .tabbrowser-tab:-moz-lwtheme {
color: var(--gnome-tabbar-tab-color) !important; color: var(--gnome-tabbar-tab-color) !important;
} }
@ -37,21 +45,24 @@ tab > stack {
} }
.tab-background { .tab-background {
margin: 0 !important; background: transparent !important;
background-color: transparent !important;
transition: background 200ms !important; transition: background 200ms !important;
} }
#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background { #TabsToolbar .tab-background {
margin: 0 !important;
}
.tabbrowser-tab:not([selected=true]) .tab-background {
background: var(--gnome-tabbar-tab-background) !important; background: var(--gnome-tabbar-tab-background) !important;
} }
#TabsToolbar .tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive { .tabbrowser-tab:not([selected=true]) .tab-background:-moz-window-inactive {
background: var(--gnome-inactive-tabbar-tab-background) !important; background: var(--gnome-inactive-tabbar-tab-background) !important;
} }
/* Tab hover */ /* Tab hover */
#TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background { .tabbrowser-tab:not([selected=true]):hover .tab-background {
background: var(--gnome-tabbar-tab-hover-background) !important; background: var(--gnome-tabbar-tab-hover-background) !important;
} }
@ -147,15 +158,15 @@ tab[selected]:-moz-window-inactive .tab-label {
inset-inline-end: 0 !important; inset-inline-end: 0 !important;
} }
.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { .tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
background-color: var(--gnome-tabbar-tab-background) !important; background-color: transparent !important;
} }
.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { .tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
background-color: var(--gnome-tabbar-tab-active-background) !important; background-color: transparent !important;
} }
.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover { .tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
background-color: var(--gnome-tabbar-tab-hover-background) !important; background-color: var(--gnome-tabbar-tab-hover-background) !important;
} }
@ -164,6 +175,18 @@ tab[selected]:-moz-window-inactive .tab-label {
display: none; display: none;
} }
/* tab-context-line above tabs */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
height: 2px;
border-radius: 2px;
margin: 0 12px !important;
}
/* Remove alt colours references for multi tabs*/
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
display: none;
}
/* Tab attention dot */ /* Tab attention dot */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] {
background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important; background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important;

View File

@ -14,13 +14,12 @@
#TabsToolbar, #TabsToolbar,
#navigator-toolbox, #navigator-toolbox,
.notificationbox-stack { .notificationbox-stack {
border: none !important;
color: var(--gnome-toolbar-color); color: var(--gnome-toolbar-color);
background: var(--gnome-toolbar-background) !important; background: var(--gnome-toolbar-background) !important;
transition: none !important; transition: none !important;
} }
#TabsToolbar { #navigator-toolbox {
border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; border-bottom: 1px solid var(--gnome-toolbar-border-color) !important;
} }
@ -35,7 +34,6 @@
/* Toolbox colors */ /* Toolbox colors */
#navigator-toolbox { #navigator-toolbox {
border: 0 !important;
background: none !important; background: none !important;
} }

View File

@ -10,10 +10,9 @@
#nav-bar, #PersonalToolbar, #toolbar-menubar, #titlebar { #nav-bar, #PersonalToolbar, #toolbar-menubar, #titlebar {
color: var(--gnome-toolbar-color); color: var(--gnome-toolbar-color);
background: var(--gnome-toolbar-background) !important; background: var(--gnome-toolbar-background) !important;
border: none !important;
} }
#PersonalToolbar { #navigator-toolbox {
border-bottom: 1px solid var(--gnome-toolbar-border-color) !important; border-bottom: 1px solid var(--gnome-toolbar-border-color) !important;
} }
@ -26,7 +25,6 @@
/* Toolbox colors */ /* Toolbox colors */
#navigator-toolbox { #navigator-toolbox {
border: none !important;
background: none !important; background: none !important;
} }

View File

@ -1,10 +1,10 @@
#TabsToolbar, #urlbar-container { #TabsToolbar, #urlbar-container {
margin-right: 14vw !important; margin-right: 16vw !important;
} }
/* Left window titlebuttons mode */ /* Left window titlebuttons mode */
@media (-moz-gtk-csd-reversed-placement) { @media (-moz-gtk-csd-reversed-placement) {
#TabsToolbar, #urlbar-container { #TabsToolbar, #urlbar-container {
margin-right: 10vw !important; margin-right: 12vw !important;
} }
} }

View File

@ -1,10 +1,10 @@
#TabsToolbar, #urlbar-container { #TabsToolbar, #urlbar-container {
margin-right: 16vw !important; margin-right: 18vw !important;
} }
/* Left window titlebuttons mode */ /* Left window titlebuttons mode */
@media (-moz-gtk-csd-reversed-placement) { @media (-moz-gtk-csd-reversed-placement) {
#TabsToolbar, #urlbar-container { #TabsToolbar, #urlbar-container {
margin-right: 12vw !important; margin-right: 14vw !important;
} }
} }

View File

@ -1,10 +1,10 @@
#TabsToolbar, #urlbar-container { #TabsToolbar, #urlbar-container {
margin-right: 18vw !important; margin-right: 20vw !important;
} }
/* Left window titlebuttons mode */ /* Left window titlebuttons mode */
@media (-moz-gtk-csd-reversed-placement) { @media (-moz-gtk-csd-reversed-placement) {
#TabsToolbar, #urlbar-container { #TabsToolbar, #urlbar-container {
margin-right: 14vw !important; margin-right: 16vw !important;
} }
} }

View File

@ -9,6 +9,10 @@
:root { :root {
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: var(--lwt-accent-color, #282828); --gnome-browser-before-load-background: var(--lwt-accent-color, #282828);
--gnome-content-page-dialog-background: #424242;
--gnome-content-page-background: #1d1d1d;
--gnome-content-box-background: #2b2b2b;
--gnome-content-page-color: #fdfdfd;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1; --theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3; --theme-primary-active-color: #6584f3;

View File

@ -0,0 +1,176 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Variables that start with --gnome- are added by me and are assigned
* to elements somewhere in this code. The rest of the variables are
* built-in in Firefox, so you need to add an !important if you wanna
* override them. */
@media (prefers-color-scheme: dark) {
:root {
/* Browser area before a page starts loading */
--gnome-browser-before-load-background: #252932;
--gnome-content-page-dialog-background: #313742;
--gnome-content-page-background: #15181d;
--gnome-content-box-background: #20242b;
--gnome-content-page-color: #eef3fd;
--theme-primary-color: #5271ad;
--theme-primary-hover-color: #6085cc;
--theme-primary-active-color: #73a0f5;
/* Toolbars */
--gnome-toolbar-background: #2e3440;
--gnome-tabstoolbar-background: #191c23;
--gnome-findbar-background: #2b303b;
--gnome-toolbar-color: #fbfcfd;
--gnome-toolbar-icon-fill: #fbfcfd;
--gnome-toolbar-border-color: #0e0f0f;
--gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35);
--gnome-inactive-toolbar-background: #242931;
--gnome-inactive-toolbar-border-color: #0d0f12;
/* Sidebar */
--sidebar-background-color: #252932;
--gnome-sidebar-background: #2c313b;
--gnome-inactive-sidebar-background: #2f343f;
--gnome-sidebar-border-color: color-mix(in srgb, #000000 75%, var(--gnome-sidebar-background));
/* Popups */
--gnome-menu-background: rgba(43, 48, 59, 0.95);
--gnome-menu-border-color: rgba(0, 0, 0, 0.75);
--gnome-popover-background: rgba(43, 48, 59, 0.95);
--gnome-popover-border-color: rgba(0, 0, 0, 0.75);
--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
--gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1);
--gnome-popover-button-active-background: rgba(255, 255, 255, 0.15);
--gnome-popover-separator-color: rgba(255, 255, 255, 0.08);
/* Header bar */
--gnome-headerbar-background: #2e3440;
--gnome-headerbar-border-color: #0e0f0f;
--gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
--gnome-inactive-headerbar-background: #242931;
--gnome-inactive-headerbar-border-color: #0d0f12;
--gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
/* Buttons */
--gnome-button-background: linear-gradient(to top, #495263 0%, #4e5769 100%);
--gnome-button-border-color: rgba(0, 0, 0, 0.2);
--gnome-button-border-bottom-color: rgba(0, 0, 0, 0.25);
--gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
--gnome-button-hover-color: rgba(255, 255, 255, 0.1);
--gnome-button-active-color: rgba(255, 255, 255, 0.2);
--gnome-button-hover-background: linear-gradient(to top, #535d70 0%, #555f73 100%);
--gnome-button-active-background: linear-gradient(to top, #5f6a80 0%, #626e85 100%);
--gnome-button-active-border-color: rgba(0, 0, 0, 0.25);
--gnome-button-active-border-bottom-color: rgba(0, 0, 0, 0.25);
--gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
--gnome-button-disabled-background: linear-gradient(to top, #323743 0%, #363c49 100%);
--gnome-button-disabled-border-color: rgba(0, 0, 0, 0.2);
--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
--gnome-inactive-button-background: linear-gradient(#292e38, #292e38);
--gnome-inactive-button-border-color: rgba(0, 0, 0, 0.12);
--gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0);
--gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e);
--gnome-button-suggested-action-border-color: rgba(0, 0, 0, 0.2);
--gnome-button-suggested-action-border-bottom-color: rgba(0, 0, 0, 0.3);
--gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
--gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px);
--gnome-button-suggested-action-active-background: linear-gradient(to top, #103e75, #103e75 1px);
--gnome-button-suggested-action-active-border-color: rgba(0, 0, 0, 0.3);
--gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
--gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d);
--gnome-button-destructive-action-border-color: rgba(0, 0, 0, 0.2);
--gnome-button-destructive-action-border-bottom-color: rgba(0, 0, 0, 0.3);
--gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px);
--gnome-button-destructive-action-active-background: linear-gradient(to top, #8a1116, #8a1116 1px);
--gnome-button-destructive-action-active-border-color: rgba(0, 0, 0, 0.3);
--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
--gnome-headerbar-button-combined-background: rgba(255, 255, 255, 0.05);
--gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1);
--gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15);
/* URL bar */
--gnome-urlbar-background: #323946;
--gnome-urlbar-border-color: rgba(0, 0, 0, 0.2);
--gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75);
--gnome-urlbar-color: #f0f5ff;
--gnome-hover-urlbar-border-color: #414958;
--gnome-inactive-urlbar-background: #292e38;
--gnome-inactive-urlbar-border-color: #1e2128;
--gnome-inactive-urlbar-box-shadow: none;
--gnome-inactive-urlbar-color: #c9cdd6;
--gnome-focused-urlbar-border-color: #338CBE;
--gnome-focused-urlbar-highlight-color: #006EA0;
--gnome-private-urlbar-background: #25003e;
/* Tabs */
--gnome-tabbar-tab-background: #1c1f26;
--gnome-tabbar-tab-color: #828690;
--gnome-tabbar-tab-border-color: #0b0c0f;
--gnome-tabbar-tab-hover-background: #20242b;
--gnome-tabbar-tab-hover-border-color: #0b0c0f;
--gnome-tabbar-tab-hover-color: #b4bbc8;
--gnome-tabbar-tab-active-background: #2e3440;
--gnome-tabbar-tab-active-border-color: #0e0f0f;
--gnome-tabbar-tab-active-color: #fbfcfd;
--gnome-tabbar-tab-active-hover-background: #242931;
--gnome-inactive-tabbar-tab-color: #5e6168;
--gnome-inactive-tabbar-tab-background: #181a20;
--gnome-inactive-tabbar-tab-active-background: #242931;
--gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color);
--gnome-inactive-tabbar-tab-active-color: #657189;
--gnome-tab-attention-icon-color: #8694c4;
/* Switch */
--gnome-switch-background: #343a46;
--gnome-switch-hover-background: #3d4452;
--gnome-switch-active-background: #474f60;
--gnome-switch-border-color: transparent;
--gnome-switch-slider-background: #fbfcfd;
--gnome-switch-slider-border-color: transparent;
--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-pressed-background: var(--theme-primary-color);
--gnome-switch-pressed-hover-background: var(--theme-primary-hover-color);
--gnome-switch-pressed-active-background: var(--theme-primary-active-color);
--gnome-switch-active-border-color: transparent;
--gnome-switch-active-slider-border-color: transparent;
/* Dirty hacks for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be
* inverted, on others they don't, adjusts the filters below to your
* needs (you may also adjust icon brightness here). */
--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
--gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */
--gnome-window-icons-hack-filter: invert(90%); /* without invert: none */
/* Private window colors */
--gnome-private-accent: #78aeed;
/* Toolbars */
--gnome-private-toolbar-background: var(--gnome-headerbar-background);
--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
/* Menus */
--gnome-private-menu-background: #292e38;
/* Header bar */
--gnome-private-headerbar-background: #252F49;
--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
/* Tabs */
--gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */
--gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */
/* Text color for Firefox Logo in new private tab */
--gnome-private-wordmark: #FBFBFE;
/* New private tab background */
--gnome-private-in-content-page-background: #1b1e24;
/* Private browsing info box */
--gnome-private-text-primary-color: #FBFBFE;
}
}

View File

@ -9,6 +9,10 @@
:root { :root {
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: #242424; --gnome-browser-before-load-background: #242424;
--gnome-content-page-dialog-background: #424242;
--gnome-content-page-background: #1d1d1d;
--gnome-content-box-background: #2b2b2b;
--gnome-content-page-color: #fdfdfd;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1; --theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3; --theme-primary-active-color: #6584f3;
@ -103,20 +107,20 @@
/* Tabs */ /* Tabs */
--gnome-tabbar-tab-background: #262626; --gnome-tabbar-tab-background: #262626;
--gnome-tabbar-tab-color: rgb(141, 144, 145); --gnome-tabbar-tab-color: #909090;
--gnome-tabbar-tab-border-color: #070707; --gnome-tabbar-tab-border-color: #070707;
--gnome-tabbar-tab-hover-background: #2b2b2b; --gnome-tabbar-tab-hover-background: #2b2b2b;
--gnome-tabbar-tab-hover-border-color: #1b1b1b; --gnome-tabbar-tab-hover-border-color: #070707;
--gnome-tabbar-tab-hover-color: rgb(200, 200, 200); --gnome-tabbar-tab-hover-color: #c8c8c8;
--gnome-tabbar-tab-active-background: #373737; --gnome-tabbar-tab-active-background: #373737;
--gnome-tabbar-tab-active-border-color: #070707; --gnome-tabbar-tab-active-border-color: #070707;
--gnome-tabbar-tab-active-color: #ffffff; --gnome-tabbar-tab-active-color: #ffffff;
--gnome-tabbar-tab-active-hover-background: #313131; --gnome-tabbar-tab-active-hover-background: #313131;
--gnome-inactive-tabbar-tab-color: rgb(141, 144, 145); --gnome-inactive-tabbar-tab-color: #686868;
--gnome-inactive-tabbar-tab-background: #202020; --gnome-inactive-tabbar-tab-background: #202020;
--gnome-inactive-tabbar-tab-active-background: #313131; --gnome-inactive-tabbar-tab-active-background: #313131;
--gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color); --gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color);
--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color); --gnome-inactive-tabbar-tab-active-color: #898989;
--gnome-tab-attention-icon-color: #718be8; --gnome-tab-attention-icon-color: #718be8;
/* Switch */ /* Switch */

View File

@ -9,6 +9,10 @@
:root { :root {
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: #1f1f1f; --gnome-browser-before-load-background: #1f1f1f;
--gnome-content-page-dialog-background: #242424;
--gnome-content-page-background: #101010;
--gnome-content-box-background: #1b1b1b;
--gnome-content-page-color: #dddddd;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1; --theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3; --theme-primary-active-color: #6584f3;

View File

@ -8,6 +8,10 @@
:root { :root {
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: var(--lwt-accent-color, #ffffff); --gnome-browser-before-load-background: var(--lwt-accent-color, #ffffff);
--gnome-content-page-dialog-background: #ffffff;
--gnome-content-page-background: #f2f2f2;
--gnome-content-box-background: #ffffff;
--gnome-content-page-color: #242424;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1; --theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3; --theme-primary-active-color: #6584f3;

View File

@ -0,0 +1,173 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Variables that start with --gnome- are added by me and are assigned
* to elements somewhere in this code. The rest of the variables are
* built-in in Firefox, so you need to add an !important if you wanna
* override them. */
:root {
/* Browser area before a page starts loading */
--gnome-browser-before-load-background: #f3f4f6;
--gnome-content-page-dialog-background: #fbfcfd;
--gnome-content-page-background: #e3e8f2;
--gnome-content-box-background: #fbfcfd;
--gnome-content-page-color: #1b1e24;
--theme-primary-color: #5271ad;
--theme-primary-hover-color: #6085cc;
--theme-primary-active-color: #73a0f5;
/* Toolbars */
--gnome-toolbar-background: #fbfcfd;
--gnome-tabstoolbar-background: #d7dce5;
--gnome-findbar-background: #f3f4f6;
--gnome-toolbar-color: #22262e;
--gnome-toolbar-icon-fill: #22262e;
--gnome-toolbar-border-color: #c3c7cf;
--gnome-inactive-toolbar-color: rgba(34, 38, 46, 0.45);
--gnome-inactive-toolbar-background: #f6f5f4;
--gnome-inactive-toolbar-border-color: #cdd1da;
/* Sidebar */
--gnome-sidebar-background: #f3f4f6;
--gnome-inactive-sidebar-background: #f2f4f9;
--gnome-sidebar-border-color: color-mix(in srgb, #000000 12%, var(--gnome-sidebar-background));
/* Popups */
--gnome-menu-background: rgba(255, 255, 255, 0.95);
--gnome-menu-border-color: rgba(0, 0, 0, 0.12);
--gnome-popover-background: rgba(255, 255, 255, 0.95);
--gnome-popover-border-color: rgba(0, 0, 0, 0.12);
--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
--gnome-popover-button-hover-background: rgba(0, 0, 0, 0.1);
--gnome-popover-button-active-background: rgba(0, 0, 0, 0.2);
--gnome-popover-separator-color: rgba(0, 0, 0, 0.1);
/* Header bar */
--gnome-headerbar-background: #fbfcfd;
--gnome-headerbar-border-color: #c3c7cf;
--gnome-headerbar-box-shadow: 0 1px rgba(255, 255, 255, 0.65) inset;
--gnome-inactive-headerbar-background: #f3f4f6;
--gnome-inactive-headerbar-border-color: #cdd1da;
--gnome-inactive-headerbar-box-shadow: 0 1px #fff inset;
/* Buttons */
--gnome-button-background: linear-gradient(to top, #eaecf1 0%, #f5f8fd 95%, #f6f9fe 100%);
--gnome-button-border-color: #c3c7cf;
--gnome-button-border-bottom-color: #c3c7cf;
--gnome-button-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.03);
--gnome-button-hover-color: rgba(0, 0, 0, 0.1);
--gnome-button-active-color: rgba(0, 0, 0, 0.2);
--gnome-button-hover-background: linear-gradient(to top, #f5f8fd 0%, #eef3fd 100%);
--gnome-button-active-background: #c3c7cf;
--gnome-button-active-border-color: #a7abb2;
--gnome-button-active-border-bottom-color: #a7abb2;
--gnome-button-active-box-shadow: 0 1px rgba(255, 255, 255, 0) inset;
--gnome-button-disabled-background: #faf9f8;
--gnome-button-disabled-border-color: #c3c7cf;
--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
--gnome-inactive-button-background: #f6f5f4;
--gnome-inactive-button-border-color: #cdd1da;
--gnome-inactive-button-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(255, 255, 255, 0);
--gnome-button-suggested-action-background: linear-gradient(to top, #2379e2 2px, #3584e4);
--gnome-button-suggested-action-border-color: #1b6acb;
--gnome-button-suggested-action-border-bottom-color: #15539e;
--gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-button-suggested-action-hover-background: linear-gradient(to top, #3584e4, #3987e5 1px);
--gnome-button-suggested-action-active-background: linear-gradient(to top, #1961b9, #1961b9 1px);
--gnome-button-suggested-action-active-border-color: #1b6acb;
--gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
--gnome-button-destructive-action-background: linear-gradient(to top, #ce1921 2px, #e01b24);
--gnome-button-destructive-action-border-color: #b2161d;
--gnome-button-destructive-action-border-bottom-color: #851015;
--gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-button-destructive-action-hover-background: linear-gradient(to top, #e01b24, #e41c26 1px);
--gnome-button-destructive-action-active-background: linear-gradient(to top, #a0131a, #a0131a 1px);
--gnome-button-destructive-action-active-border-color: #b2161d;
--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
--gnome-headerbar-button-combined-background: rgba(0, 0, 0, 0.05);
--gnome-headerbar-button-hover-background: rgba(0, 0, 0, 0.1);
--gnome-headerbar-button-active-background: rgba(0, 0, 0, 0.15);
/* URL bar */
--gnome-urlbar-background: #f3f4f6;
--gnome-urlbar-border-color: #abafb6;
--gnome-urlbar-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0,0,0, 0.12);
--gnome-urlbar-color: #020202;
--gnome-hover-urlbar-border-color: #d7dce5;
--gnome-inactive-urlbar-background: #e9ebf0;
--gnome-inactive-urlbar-border-color: #cdd1da;
--gnome-inactive-urlbar-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
--gnome-inactive-urlbar-color: #252932;
--gnome-focused-urlbar-border-color: #5683DA;
--gnome-focused-urlbar-highlight-color: #6592E9;
--gnome-private-urlbar-background: #e6c2ff;
/* Tabs */
--gnome-tabbar-tab-background: #d7dce5;
--gnome-tabbar-tab-color: rgb(141, 144, 145);
--gnome-tabbar-tab-border-color: #c3c7cf;
--gnome-tabbar-tab-hover-background: #c8ccd5;
--gnome-tabbar-tab-hover-border-color: #c3c7cf;
--gnome-tabbar-tab-hover-color: rgb(93, 98, 99);
--gnome-tabbar-tab-active-background: #fbfcfd;
--gnome-tabbar-tab-active-border-color: #c3c7cf;
--gnome-tabbar-tab-active-color: rgb(46, 52, 54);
--gnome-tabbar-tab-active-hover-background: #f3f4f6;
--gnome-inactive-tabbar-tab-color: #8b8c8f;
--gnome-inactive-tabbar-tab-background: #dfdfdf;
--gnome-inactive-tabbar-tab-active-background: #f3f4f6;
--gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color);
--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
--gnome-tab-attention-icon-color: #718be8;
/* Switch */
--gnome-switch-background: #a7abb2;
--gnome-switch-hover-background: #969aa0;
--gnome-switch-active-background: #7b8292;
--gnome-switch-border-color: transparent;
--gnome-switch-slider-background: #fbfcfd;
--gnome-switch-slider-border-color: transparent;
--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-border-color: transparent;
--gnome-switch-active-slider-border-color: transparent;
--gnome-switch-pressed-background: #315bef;
--gnome-switch-pressed-hover-background: #5073f1;
--gnome-switch-pressed-active-background: #6584f3;
/* Dirty hacks for replaced symbolic icons, they load from
* /usr/share/icons/<theme>/ and on some systems they need to be
* inverted, on others they don't, adjusts the filters below to your
* needs (you may also adjust icon brightness here). */
--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%) invert(100%);
--gnome-icons-hack-filter: none;
--gnome-window-icons-hack-filter: invert(30%);
/* Private window colors */
--gnome-private-accent: #1c71d8;
/* Toolbars */
--gnome-private-toolbar-background: var(--gnome-headerbar-background);
--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
/* Menus */
--gnome-private-menu-background: #fbfcfd;
/* Header bar */
--gnome-private-headerbar-background: #D7E3F0;
--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
/* Tabs */
--gnome-private-tabbar-tab-hover-background: #cbd7e3; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background: #c6d1dd; /* Hardcoded color */
--gnome-private-tabbar-tab-active-background-contrast: #a9b6c4; /* Hardcoded color */
--gnome-private-tabbar-tab-active-hover-background: #c0cbd7; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-hover-background: #e4e9f0; /* Hardcoded color */
--gnome-private-inactive-tabbar-tab-active-background: #e1e7ed; /* Hardcoded color */
/* Text color for Firefox Logo in new private tab */
--gnome-private-wordmark: #20123A;
/* New private tab background */
--gnome-private-in-content-page-background: #ebf0fa;
/* Private browsing info box */
--gnome-private-text-primary-color: #15141A;
}

View File

@ -8,6 +8,10 @@
:root { :root {
/* Browser area before a page starts loading */ /* Browser area before a page starts loading */
--gnome-browser-before-load-background: #f5f5f5; --gnome-browser-before-load-background: #f5f5f5;
--gnome-content-page-dialog-background: #ffffff;
--gnome-content-page-background: #f2f2f2;
--gnome-content-box-background: #ffffff;
--gnome-content-page-color: #242424;
--theme-primary-color: #315bef; --theme-primary-color: #315bef;
--theme-primary-hover-color: #5073f1; --theme-primary-hover-color: #5073f1;
--theme-primary-active-color: #6584f3; --theme-primary-active-color: #6584f3;

View File

@ -40,9 +40,7 @@ toolbarspring {
} }
#urlbar[breakout][breakout-extend] { #urlbar[breakout][breakout-extend] {
left: 0 !important; width: var(--urlbar-width) !important;
top: 0 !important;
width: 100% !important;
z-index: 5 !important; z-index: 5 !important;
padding: 0 !important; padding: 0 !important;
border-radius: 8px !important; border-radius: 8px !important;
@ -211,7 +209,7 @@ toolbarspring {
border-radius: 5px !important; border-radius: 5px !important;
} }
#star-button-box.urlbar-page-action { .urlbar-page-action {
padding: 5px 6px !important; padding: 5px 6px !important;
} }

View File

@ -6,6 +6,16 @@
--space-above-tabbar: 0 !important; --space-above-tabbar: 0 !important;
} }
.tab-background:is([selected]) {
box-shadow: none !important;
}
#TabsToolbar {
/* Remove hover effects on tab bar buttons */
--toolbarbutton-active-background: transparent !important;
--toolbarbutton-hover-background: transparent !important;
padding: 0 !important;
box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
/* Tabs bar height */ /* Tabs bar height */
#tabbrowser-tabs { #tabbrowser-tabs {
@ -16,28 +26,20 @@
max-height: 32px !important; max-height: 32px !important;
} }
#TabsToolbar .toolbar-items { .tab-background, .tab-stack {
min-height: 32px !important;
}
.toolbar-items {
margin-bottom: -1px !important; margin-bottom: -1px !important;
} }
:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items {
margin-bottom: 0 !important;
}
/* Remove hover effects on tab bar buttons */
#TabsToolbar {
--toolbarbutton-active-background: transparent !important;
--toolbarbutton-hover-background: transparent !important;
padding: 0 !important;
box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
/* New hover effect */ /* New hover effect */
#TabsToolbar toolbarbutton { toolbarbutton {
fill-opacity: .6 !important; fill-opacity: .6 !important;
} }
#TabsToolbar toolbarbutton:not([disabled]):hover, toolbarbutton:not([disabled]):hover,
#TabsToolbar toolbarbutton[open=true] { toolbarbutton[open=true] {
fill-opacity: 1 !important; fill-opacity: 1 !important;
} }
@ -77,23 +79,6 @@
margin: 0 !important; margin: 0 !important;
} }
/* Tab labels */
tab {
color: var(--gnome-tabbar-tab-color) !important;
}
tab:hover {
color: var(--gnome-tabbar-tab-hover-color) !important;
}
tab[selected] {
color: var(--gnome-tabbar-tab-active-color) !important;
}
tab:-moz-window-inactive {
color: var(--gnome-inactive-tabbar-tab-color) !important;
}
tab[selected]:-moz-window-inactive {
color: var(--gnome-inactive-tabbar-tab-active-color) !important;
}
/* Center all inside tab */ /* Center all inside tab */
.tab-content { .tab-content {
display: flex; display: flex;
@ -219,6 +204,107 @@ tab[selected]:-moz-window-inactive {
margin-right: auto !important margin-right: auto !important
} }
.tab-background {
background-color: transparent !important;
transition: background-color 200ms;
}
/* Tab hover */
.tabbrowser-tab:not([selected=true]):hover .tab-background {
background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
border-image: none !important;
box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 -1px var(--gnome-toolbar-border-color) !important;
}
/* Active tab */
.tab-background:is([selected]) {
background-color: var(--gnome-tabbar-tab-active-background) !important;
background-image: none !important;
border: none !important;
border-image: none !important;
transition: none !important;
margin-left: -1px !important;
margin-right: -1px !important;
border-radius: 0 !important;
box-shadow: 1px 0 var(--gnome-toolbar-border-color), 1px 0 3px rgba(0, 0, 0, 0.08),
-1px 0 var(--gnome-toolbar-border-color), -1px 0 3px rgba(0, 0, 0, 0.08),
inset 0 -1px var(--gnome-toolbar-border-color) !important;
}
.tab-background:is([selected]):-moz-window-inactive {
background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
border-image: none !important;
}
/* Tabs scroll buttons */
#scrollbutton-up:not([disabled]):hover,
#scrollbutton-down:not([disabled]):hover {
background: var(--gnome-tabbar-tab-active-hover-background) !important;
}
/* Full width tabs */
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
max-width: 100% !important;
}
.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
max-width: .1px !important;
}
/* Remove blank spaces on tabs start and end */
.titlebar-spacer {
display: none !important;
}
/* TabsToolbar buttons */
.toolbarbutton-1 {
margin: 0 !important;
border-radius: 0 !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
border: none !important;
}
.toolbarbutton-1 > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-text,
.toolbarbutton-1 > .toolbarbutton-badge-stack {
padding: 8px !important;
}
.toolbarbutton-1 > .toolbarbutton-icon {
width: 32px !important;
height: 32px !important;
}
#alltabs-button {
display: none !important;
}
}
:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items {
margin-bottom: 0 !important;
}
/* Tab labels */
tab {
color: var(--gnome-tabbar-tab-color) !important;
}
tab:hover {
color: var(--gnome-tabbar-tab-hover-color) !important;
}
tab[selected] {
color: var(--gnome-tabbar-tab-active-color) !important;
}
tab:-moz-window-inactive {
color: var(--gnome-inactive-tabbar-tab-color) !important;
}
tab[selected]:-moz-window-inactive {
color: var(--gnome-inactive-tabbar-tab-active-color) !important;
}
/* Close tab button */ /* Close tab button */
.close-icon { .close-icon {
height: 16px !important; height: 16px !important;
@ -297,15 +383,15 @@ tab[selected]:-moz-window-inactive {
display: none !important; display: none !important;
} }
.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { .tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
background-color: var(--gnome-tabbar-tab-background) !important; background-color: var(--gnome-tabbar-tab-background) !important;
} }
.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { .tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
background-color: var(--gnome-tabbar-tab-active-background) !important; background-color: var(--gnome-tabbar-tab-active-background) !important;
} }
.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover { .tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
background-color: var(--gnome-tabbar-tab-hover-background) !important; background-color: var(--gnome-tabbar-tab-hover-background) !important;
} }
@ -314,6 +400,18 @@ tab[selected]:-moz-window-inactive {
display: none; display: none;
} }
/* tab-context-line above tabs */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
height: 2px;
border-radius: 0 !important;
margin: 0 !important;
}
/* Remove alt colours references for multi tabs*/
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
display: none;
}
/* Tab attention dot */ /* Tab attention dot */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] {
background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important; background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important;
@ -322,98 +420,10 @@ tab[selected]:-moz-window-inactive {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* Remove alt colours references for multi tabs*/
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
display: none;
}
.tabbrowser-tab[class*="identity-color-"][pinned] { .tabbrowser-tab[class*="identity-color-"][pinned] {
display: flex; display: flex;
} }
.tab-background {
background-color: transparent !important;
transition: background-color 200ms;
}
.tab-background, .tab-stack {
min-height: 32px !important;
}
/* Tab hover */
#TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background {
background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
border-image: none !important;
box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 -1px var(--gnome-toolbar-border-color) !important;
}
/* Active tab */
.tab-background:is([selected]) {
background-color: var(--gnome-tabbar-tab-active-background) !important;
background-image: none !important;
border: none !important;
border-image: none !important;
transition: none !important;
margin-left: -1px !important;
margin-right: -1px !important;
border-radius: 0 !important;
box-shadow: 1px 0 var(--gnome-toolbar-border-color), 1px 0 3px rgba(0, 0, 0, 0.08),
-1px 0 var(--gnome-toolbar-border-color), -1px 0 3px rgba(0, 0, 0, 0.08),
inset 0 -1px var(--gnome-toolbar-border-color) !important;
}
.tab-background:is([selected]):-moz-window-inactive {
background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
border-image: none !important;
}
/* Tabs scroll buttons */
#TabsToolbar #scrollbutton-up:not([disabled]):hover,
#TabsToolbar #scrollbutton-down:not([disabled]):hover {
background: var(--gnome-tabbar-tab-active-hover-background) !important;
}
/* Full width tabs */
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
max-width: 100% !important;
}
.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
max-width: .1px !important;
}
/* Remove blank spaces on tabs start and end */
#TabsToolbar .titlebar-spacer {
display: none !important;
}
/* TabsToolbar buttons */
#TabsToolbar .toolbarbutton-1 {
margin: 0 !important;
border-radius: 0 !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
border: none !important;
}
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
padding: 8px !important;
}
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
width: 32px !important;
height: 32px !important;
}
#TabsToolbar #alltabs-button {
display: none !important;
}
/* firefox-view-button */ /* firefox-view-button */
:root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs, :root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs,
:root[privatebrowsingmode]:not([firefoxviewhidden]) :is( :root[privatebrowsingmode]:not([firefoxviewhidden]) :is(
@ -443,34 +453,6 @@ tab[selected]:-moz-window-inactive {
background-color: var(--gnome-inactive-tabbar-tab-active-background) !important; background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
} }
/* Create new container tab indicator */
.tabbrowser-tab[class*="identity-color-"] .tab-content::before {
content: "";
display: block;
background-image: var(#userContext-icons:--identity-icon);
background: var( --identity-tab-color);
-moz-context-properties: fill;
fill: var(--identity-icon-color);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
min-width: 10px;
height: 10px;
margin-right: 5px;
margin-left: auto !important;
border-radius: 100%;
}
.tabbrowser-tab[class*="identity-color-"][pinned] .tab-content::before,
.tabbrowser-tab[class*="identity-color-"][image] .tab-content::before,
.tabbrowser-tab[class*="identity-color-"][busy] .tab-content::before,
.tabbrowser-tab[class*="identity-color-"][progress] .tab-content::before {
right: -10px;
top: -8px;
position: relative;
margin-right: -10px;
}
/* fix pip on small displays */ /* fix pip on small displays */
.tab-icon-overlay[pictureinpicture] { .tab-icon-overlay[pictureinpicture] {
top: 3px !important; top: 3px !important;

View File

@ -6,40 +6,43 @@
--space-above-tabbar: 0 !important; --space-above-tabbar: 0 !important;
} }
.tab-background:is([selected]) {
box-shadow: none !important;
}
#TabsToolbar {
/* Remove hover effects on tab bar buttons */
--toolbarbutton-active-background: transparent !important;
--toolbarbutton-hover-background: transparent !important;
padding: 0 !important;
box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
/* New hover effect */
toolbarbutton {
fill-opacity: .6 !important;
}
toolbarbutton:not([disabled]):hover,
toolbarbutton[open=true] {
fill-opacity: 1 !important;
}
/* Tabs bar height */ /* Tabs bar height */
#tabbrowser-tabs { #tabbrowser-tabs {
--tab-min-height: 32px !important; --tab-min-height: 32px !important;
--tabstrip-min-height: 32px !important;
}
.tab-background, .tab-stack {
min-height: 32px !important;
} }
#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
max-height: 32px !important; max-height: 32px !important;
} }
#TabsToolbar .toolbar-items { .toolbar-items {
margin-bottom: -1px !important; margin-bottom: -1px !important;
} }
:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items {
margin-bottom: 0 !important;
}
/* Remove hover effects on tab bar buttons */
#TabsToolbar {
--toolbarbutton-active-background: transparent !important;
--toolbarbutton-hover-background: transparent !important;
padding: 0 !important;
box-shadow: inset 0 1px var(--gnome-toolbar-border-color), inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
/* New hover effect */
#TabsToolbar toolbarbutton {
fill-opacity: .6 !important;
}
#TabsToolbar toolbarbutton:not([disabled]):hover,
#TabsToolbar toolbarbutton[open=true] {
fill-opacity: 1 !important;
}
/* Remove shadow next to tab scroll buttons */ /* Remove shadow next to tab scroll buttons */
.arrowscrollbox-overflow-start-indicator, .arrowscrollbox-overflow-start-indicator,
.arrowscrollbox-overflow-end-indicator { .arrowscrollbox-overflow-end-indicator {
@ -76,23 +79,6 @@
margin: 0 !important; margin: 0 !important;
} }
/* Tab labels */
tab {
color: var(--gnome-tabbar-tab-color) !important;
}
tab:hover {
color: var(--gnome-tabbar-tab-hover-color) !important;
}
tab[selected] {
color: var(--gnome-tabbar-tab-active-color) !important;
}
tab:-moz-window-inactive {
color: var(--gnome-inactive-tabbar-tab-color) !important;
}
tab[selected]:-moz-window-inactive {
color: var(--gnome-inactive-tabbar-tab-active-color) !important;
}
/* Center all inside tab */ /* Center all inside tab */
.tab-content { .tab-content {
display: flex; display: flex;
@ -218,6 +204,102 @@ tab[selected]:-moz-window-inactive {
margin-right: auto !important margin-right: auto !important
} }
/* Tab hover */
.tabbrowser-tab:not([selected=true]):hover .tab-background {
background-color: var(--gnome-tabbar-tab-hover-background) !important;
border-image: none !important;
box-shadow: inset 0 1px var(--gnome-tabbar-tab-hover-border-color), inset 0 -1px var(--gnome-tabbar-tab-hover-border-color) !important;
}
/* Active tab */
.tab-background:is([selected]) {
background-color: var(--gnome-tabbar-tab-active-background) !important;
background-image: none !important;
border: none !important;
border-image: none !important;
transition: none !important;
margin-left: -1px !important;
margin-right: -1px !important;
border-radius: 0 !important;
box-shadow: 1px 0 var(--gnome-tabbar-tab-active-border-color), 1px 0 3px rgba(0, 0, 0, 0.08),
-1px 0 var(--gnome-tabbar-tab-active-border-color), -1px 0 3px rgba(0, 0, 0, 0.08),
inset 0 -1px var(--gnome-tabbar-tab-active-border-color) !important;
}
.tab-background:is([selected]):-moz-window-inactive {
background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
border-image: none !important;
}
/* Tabs scroll buttons */
#scrollbutton-up:not([disabled]):hover,
#scrollbutton-down:not([disabled]):hover {
background: var(--gnome-tabbar-tab-active-hover-background) !important;
}
/* Full width tabs */
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
max-width: 100% !important;
}
.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
max-width: .1px !important;
}
/* Remove blank spaces on tabs start and end */
.titlebar-spacer {
display: none !important;
}
/* TabsToolbar buttons */
.toolbarbutton-1 {
margin: 0 !important;
border-radius: 0 !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
border: none !important;
}
.toolbarbutton-1 > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-text,
.toolbarbutton-1 > .toolbarbutton-badge-stack {
padding: 8px !important;
}
.toolbarbutton-1 > .toolbarbutton-icon {
width: 32px !important;
height: 32px !important;
}
#alltabs-button {
display: none !important;
}
}
:root[tabsintitlebar][inFullscreen] #TabsToolbar .toolbar-items {
margin-bottom: 0 !important;
}
/* Tab labels */
tab {
color: var(--gnome-tabbar-tab-color) !important;
}
tab:hover {
color: var(--gnome-tabbar-tab-hover-color) !important;
}
tab[selected] {
color: var(--gnome-tabbar-tab-active-color) !important;
}
tab:-moz-window-inactive {
color: var(--gnome-inactive-tabbar-tab-color) !important;
}
tab[selected]:-moz-window-inactive {
color: var(--gnome-inactive-tabbar-tab-active-color) !important;
}
/* Close tab button */ /* Close tab button */
.close-icon { .close-icon {
height: 16px !important; height: 16px !important;
@ -290,15 +372,15 @@ tab[selected]:-moz-window-inactive {
display: none !important; display: none !important;
} }
.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { .tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
background-color: var(--gnome-tabbar-tab-background) !important; background-color: var(--gnome-tabbar-tab-background) !important;
} }
.tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { .tabbrowser-tab[selected=true] .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
background-color: var(--gnome-tabbar-tab-active-background) !important; background-color: var(--gnome-tabbar-tab-active-background) !important;
} }
.tabbrowser-tab .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):hover { .tabbrowser-tab .tab-icon-overlay:not([crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
background-color: var(--gnome-tabbar-tab-hover-background) !important; background-color: var(--gnome-tabbar-tab-hover-background) !important;
} }
@ -307,6 +389,18 @@ tab[selected]:-moz-window-inactive {
display: none; display: none;
} }
/* tab-context-line above tabs */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
height: 2px;
border-radius: 0 !important;
margin: 0 !important;
}
/* Remove alt colours references for multi tabs*/
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-bottom-line {
display: none;
}
/* Tab attention dot */ /* Tab attention dot */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention] {
background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important; background-image: radial-gradient(circle, var(--gnome-tab-attention-icon-color), var(--gnome-tab-attention-icon-color) 2px, transparent 2px) !important;
@ -315,96 +409,12 @@ tab[selected]:-moz-window-inactive {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* Remove alt colours references for multi tabs*/
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
display: none;
}
.tabbrowser-tab[class*="identity-color-"][pinned] { .tabbrowser-tab[class*="identity-color-"][pinned] {
display: flex; display: flex;
} }
.tab-background { .tab-background {
background-color: transparent !important; transition: background 200ms;
transition: background-color 200ms;
}
.tab-background, .tab-stack {
min-height: 32px !important;
}
/* Tab hover */
#TabsToolbar .tabbrowser-tab:not([selected=true]):hover .tab-background {
background-color: var(--gnome-tabbar-tab-hover-background) !important;
border-image: none !important;
box-shadow: inset 0 1px var(--gnome-tabbar-tab-hover-border-color), inset 0 -1px var(--gnome-tabbar-tab-hover-border-color) !important;
}
/* Active tab */
.tab-background:is([selected]) {
background-color: var(--gnome-tabbar-tab-active-background) !important;
background-image: none !important;
border: none !important;
border-image: none !important;
transition: none !important;
margin-left: -1px !important;
margin-right: -1px !important;
border-radius: 0 !important;
box-shadow: 1px 0 var(--gnome-tabbar-tab-active-border-color), 1px 0 3px rgba(0, 0, 0, 0.08),
-1px 0 var(--gnome-tabbar-tab-active-border-color), -1px 0 3px rgba(0, 0, 0, 0.08),
inset 0 -1px var(--gnome-tabbar-tab-active-border-color) !important;
}
.tab-background:is([selected]):-moz-window-inactive {
background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
border-image: none !important;
}
/* Tabs scroll buttons */
#TabsToolbar #scrollbutton-up:not([disabled]):hover,
#TabsToolbar #scrollbutton-down:not([disabled]):hover {
background: var(--gnome-tabbar-tab-active-hover-background) !important;
}
/* Full width tabs */
.tabbrowser-tab:not([style^="max-width"]):not([pinned]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
max-width: 100% !important;
}
.tabbrowser-tab:not([style^="max-width"]):not([pinned]):not([fadein]),
.tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
max-width: .1px !important;
}
/* Remove blank spaces on tabs start and end */
#TabsToolbar .titlebar-spacer {
display: none !important;
}
/* TabsToolbar buttons */
#TabsToolbar .toolbarbutton-1 {
margin: 0 !important;
border-radius: 0 !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
border: none !important;
}
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
padding: 8px !important;
}
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
width: 32px !important;
height: 32px !important;
}
#TabsToolbar #alltabs-button {
display: none !important;
} }
/* firefox-view-button */ /* firefox-view-button */
@ -436,34 +446,6 @@ tab[selected]:-moz-window-inactive {
background-color: var(--gnome-inactive-tabbar-tab-active-background) !important; background-color: var(--gnome-inactive-tabbar-tab-active-background) !important;
} }
/* Create new container tab indicator */
.tabbrowser-tab[class*="identity-color-"] .tab-content::before {
content: "";
display: block;
background-image: var(#userContext-icons:--identity-icon);
background: var( --identity-tab-color);
-moz-context-properties: fill;
fill: var(--identity-icon-color);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
min-width: 10px;
height: 10px;
margin-right: 5px;
margin-left: auto !important;
border-radius: 100%;
}
.tabbrowser-tab[class*="identity-color-"][pinned] .tab-content::before,
.tabbrowser-tab[class*="identity-color-"][image] .tab-content::before,
.tabbrowser-tab[class*="identity-color-"][busy] .tab-content::before,
.tabbrowser-tab[class*="identity-color-"][progress] .tab-content::before {
right: -10px;
top: -8px;
position: relative;
margin-right: -10px;
}
/* fix pip on small displays */ /* fix pip on small displays */
.tab-icon-overlay[pictureinpicture] { .tab-icon-overlay[pictureinpicture] {
top: 3px !important; top: 3px !important;

View File

@ -14,6 +14,10 @@
background: var(--gnome-toolbar-background) !important; background: var(--gnome-toolbar-background) !important;
} }
#navigator-toolbox {
border-bottom: 1px solid var(--gnome-toolbar-border-color) !important;
}
#nav-bar { #nav-bar {
border: none !important; border: none !important;
color: var(--gnome-toolbar-color); color: var(--gnome-toolbar-color);
@ -41,7 +45,6 @@ findbar:-moz-window-inactive label,
#TabsToolbar { #TabsToolbar {
border: none !important; border: none !important;
background: var(--gnome-tabstoolbar-background) !important; background: var(--gnome-tabstoolbar-background) !important;
border-bottom: 1px solid var(--gnome-toolbar-border-color) !important;
box-shadow: inset 0 1px var(--gnome-toolbar-border-color) !important; box-shadow: inset 0 1px var(--gnome-toolbar-border-color) !important;
} }

View File

@ -0,0 +1,36 @@
@import "parts/toolbox.css";
@import "parts/buttons.css";
@import "parts/entries.css";
@import "parts/controls.css";
@import "parts/headerbar-urlbar.css";
@import "parts/headerbar-private-urlbar.css";
@import "parts/headerbar.css";
@import "parts/csd.css";
@import "parts/titlebutton-light.css";
@import "parts/titlebutton-dark.css";
@import "parts/popups.css";
@import "parts/tabsbar.css";
@import "parts/findbar.css";
@import "parts/sidebar.css";
@import "parts/dialogs.css";
@import "parts/notification.css";
@import "parts/video-player.css";
@import "parts/remove-white-flash.css";
@import "parts/icons.css";
@import "colors/light-nord.css";
@import "colors/dark-nord.css";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
/* Set theme version text in customization panel */
#customization-footer::before {
background: url("icons/icon.svg") no-repeat;
background-size: contain;
content: "Firefox WhiteSur theme";
padding: 10px 10px 10px 50px;
}
#customization-container {
background-color: var(--gnome-browser-before-load-background) !important;
color: var(--gnome-toolbar-color) !important;
background-image: none !important;
}

View File

@ -1,20 +1,21 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#tabbrowser-tabs tab:only-of-type,
#TabsToolbar #alltabs-button {
display: none !important;
}
.tab-background, .tab-stack {
min-height: 0 !important;
}
#TabsToolbar { #TabsToolbar {
min-height: 0 !important; min-height: 0 !important;
}
#tabbrowser-tabs, #tabbrowser-tabs tab:only-of-type,
#tabbrowser-tabs arrowscrollbox { #alltabs-button {
display: none !important;
}
.tab-background,
.tab-stack {
min-height: 0 !important;
}
#tabbrowser-tabs,
#tabbrowser-tabs arrowscrollbox {
min-height: 0 !important; min-height: 0 !important;
--tab-min-height: 0 !important; --tab-min-height: 0 !important;
}
} }

View File

@ -1,5 +1,6 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-buttonbox-container,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container { :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container {
display: none !important; display: none !important;
} }

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="m6 1c-1.108 0-2 0.892-2 2v2h-2c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h12c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-2v-2c0-1.108-0.892-2-2-2h-4zm0 1h4c0.554 0 1 0.446 1 1v2h-6v-2c0-0.554 0.446-1 1-1zm-4 4h1v8h-1c-0.554 0-1-0.446-1-1v-6c0-0.554 0.446-1 1-1zm2 0h1 6 1v8h-8v-8zm9 0h1c0.554 0 1 0.446 1 1v6c0 0.554-0.446 1-1 1h-1v-8z"/>
</svg>

After

Width:  |  Height:  |  Size: 490 B

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="m0.5 1a0.5 0.5 0 0 0-0.5 0.5 0.5 0.5 0 0 0 0.5 0.5h1.6152l1.9023 7.1289a0.50005 0.50005 0 0 0 0.48242 0.37109h9a0.50005 0.50005 0 0 0 0.47461-0.3418l1.5-4.5a0.50005 0.50005 0 0 0-0.47461-0.6582h-11.316l-0.70117-2.6289a0.50005 0.50005 0 0 0-0.48242-0.37109h-2zm3.4512 4h10.355l-1.168 3.5h-8.2539l-0.93359-3.5zm0.54883 6c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h9c0.277 0 0.5-0.223 0.5-0.5s-0.223-0.5-0.5-0.5h-9zm1.75 1.5a1.25 1.25 0 0 0-1.25 1.25 1.25 1.25 0 0 0 1.25 1.25 1.25 1.25 0 0 0 1.25-1.25 1.25 1.25 0 0 0-1.25-1.25zm5.5 0a1.25 1.25 0 0 0-1.25 1.25 1.25 1.25 0 0 0 1.25 1.25 1.25 1.25 0 0 0 1.25-1.25 1.25 1.25 0 0 0-1.25-1.25zm-5.5 1a0.25 0.25 0 0 1 0.25 0.25 0.25 0.25 0 0 1-0.25 0.25 0.25 0.25 0 0 1-0.25-0.25 0.25 0.25 0 0 1 0.25-0.25zm5.5 0a0.25 0.25 0 0 1 0.25 0.25 0.25 0.25 0 0 1-0.25 0.25 0.25 0.25 0 0 1-0.25-0.25 0.25 0.25 0 0 1 0.25-0.25z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,3 @@
<svg data-name="icon" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="m2 1c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm7.5 0c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h3.791l-4.1445 4.1465c-0.19587 0.19587-0.19587 0.51116 0 0.70703s0.51116 0.19587 0.70703 0l4.1465-4.1445v3.791c0 0.277 0.223 0.5 0.5 0.5s0.5-0.223 0.5-0.5v-5c0-0.277-0.223-0.5-0.5-0.5h-5zm-7.5 1h4v4h-4v-4zm0 7c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm8 0c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm-8 1h4v4h-4v-4zm8 0h4v4h-4v-4z"/>
</svg>

After

Width:  |  Height:  |  Size: 744 B

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 1a7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 7-7zm0 1c-0.277 0-0.5 0.223-0.5 0.5v0.92188c-1.2706 0.16126-2.4004 0.9536-2.4004 2.3789 0 1.3329 0.77308 2.0292 2.4004 2.2656v3.4141c-0.91099-0.10544-1.2653-0.55323-1.4492-1.3809-0.1-0.25-0.30078-0.34961-0.55078-0.34961h-0.19922c-0.25 0-0.45117 0.19922-0.45117 0.44922v0.20117c0.24465 1.2232 1.1139 2.0136 2.6504 2.1406v0.95898c0 0.277 0.223 0.5 0.5 0.5s0.5-0.223 0.5-0.5v-0.95703c1.4181-0.068444 2.6504-0.871 2.6504-2.543 0-1.6641-1.1031-2.2249-2.6504-2.5762v-3.0098c0.82889 0.12188 1.2081 0.56323 1.4004 1.2363 0.1 0.25 0.24922 0.34961 0.44922 0.34961h0.20117c0.15-0.1 0.34961-0.19922 0.34961-0.44922v-0.20117c-0.29241-1.0234-1.1092-1.7121-2.4004-1.9316v-0.91797c0-0.277-0.223-0.5-0.5-0.5zm-0.5 2.3555v2.9336c-1.2073-0.25207-1.5508-0.6996-1.5508-1.4883-1e-7 -0.78559 0.62862-1.3313 1.5508-1.4453zm1 4.1289c0.93622 0.16145 1.5529 0.49238 1.5996 1.5664 0 0.94045-0.5746 1.4389-1.5996 1.5781v-3.1445z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path transform="matrix(-.46973 .46973 -.46973 -.46973 21.705 6.5082)" d="m6.8081 20.663c2.6543 2.6482 6.3446 3.8716 9.9604 3.4324a0.75267 0.75267 0 0 0 0.65696-0.83991 0.75267 0.75267 0 0 0-0.83991-0.65696c-3.1617 0.38403-6.3866-0.68021-8.7109-2.9979-2.1069-2.1192-3.2141-5.0329-3.0478-8.0165a0.75267 0.75267 0 0 0-0.71101-0.79417 0.75267 0.75267 0 0 0-0.79417 0.71101c-0.19 3.409 1.0771 6.7387 3.4844 9.16a0.75274 0.75274 0 0 0 0.002079 0.002079zm2.1684-2.1018c2.8534 2.693 7.4695 3.0316 10.522 0.33887 2.8395-2.5051 3.3354-7.0148 0.72764-9.9042-2.2328-2.474-6.2159-2.8926-8.7379-0.54677-2.1078 1.9605-2.4478 5.4209-0.35966 7.5737 1.6885 1.7408 4.6315 2.0041 6.4116 0.16632 1.3725-1.417 1.5583-3.8579-0.043659-5.2577-0.5738-0.50142-1.3132-0.76106-2.0644-0.74635-0.7512 0.0147-1.5447 0.34549-2.0436 1.0457-0.31848 0.44694-0.45717 0.98131-0.39501 1.5384s0.42442 1.1915 1.0748 1.4366c0.48444 0.18256 0.78262 0.095159 1.1601-0.099791 0.18872-0.09747 0.42044-0.25774 0.54053-0.58627 0.12009-0.32853 0.008268-0.73533-0.1684-0.97088-0.24939-0.33187-0.71962-0.39845-1.052-0.14969 0 0-0.008203-0.19035 0.066527-0.29521 0.20438-0.28681 0.48511-0.41081 0.84614-0.41787 0.36103-0.0071 0.76765 0.14109 1.0416 0.38045 0.88618 0.7744 0.77507 2.2296-0.043659 3.0748-1.1405 1.1774-3.12 1.0023-4.2515-0.16424-1.4606-1.5058-1.2155-4.0133 0.30353-5.4261 1.8706-1.7398 4.905-1.4232 6.5966 0.45114 2.017 2.2349 1.6244 5.7984-0.60706 7.7671-2.5989 2.2928-6.6866 1.829-8.9313-0.7609-2.5679-2.9628-2.0303-7.5838 0.91891-10.104 3.3265-2.8423 8.4754-2.2261 11.27 1.0831 3.1164 3.6901 2.4286 9.3652-1.2411 12.434-0.31945 0.26635-0.36224 0.74104-0.095633 1.0603 0.26635 0.31945 0.74104 0.36224 1.0603 0.095633 4.2979-3.5945 5.1007-10.214 1.4262-14.565-1.6611-1.9668-4.0132-3.1289-6.449-3.3763-2.4358-0.24736-4.9548 0.42167-6.9479 2.1247-3.5692 3.0498-4.2175 8.6094-1.079 12.231 0.17359 0.20028 0.35446 0.39011 0.54469 0.56964zm17.769-2.4553a0.75267 0.75267 0 0 0 0.26819 0.1185 0.75267 0.75267 0 0 0 0.90228-0.56964c0.91298-4.0285-0.30614-8.247-3.2245-11.17a0.75274 0.75274 0 0 0-0.002079-0.002079c-2.4214-2.4087-5.7519-3.6765-9.162-3.4864a0.75267 0.75267 0 0 0-0.71101 0.79417 0.75267 0.75267 0 0 0 0.79417 0.71101c2.9836-0.16629 5.8975 0.94101 8.0165 3.0478 2.5549 2.5592 3.6163 6.2465 2.817 9.7733a0.75267 0.75267 0 0 0 0.30145 0.78377z"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,3 @@
<svg fill="context-fill" fill-opacity="context-fill-opacity" data-name="icon" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="m2 1c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm10 0c-0.277 0-0.5 0.223-0.5 0.5v2h-2c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h2v2c0 0.277 0.223 0.5 0.5 0.5s0.5-0.223 0.5-0.5v-2h2c0.277 0 0.5-0.223 0.5-0.5s-0.223-0.5-0.5-0.5h-2v-2c0-0.277-0.223-0.5-0.5-0.5zm-10 1h4v4h-4v-4zm0 7c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm8 0c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h4c0.554 0 1-0.446 1-1v-4c0-0.554-0.446-1-1-1h-4zm-8 1h4v4h-4v-4zm8 0h4v4h-4v-4z"/>
</svg>

After

Width:  |  Height:  |  Size: 718 B

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="m3 1c-1.662 0-3 1.338-3 3v8c0 1.662 1.338 3 3 3h10c1.662 0 3-1.338 3-3v-8c0-1.662-1.338-3-3-3h-10zm0 1h4.5v5h1v-5h4.5c1.108 0 2 0.892 2 2v8c0 1.108-0.892 2-2 2h-4.5v-4h-1v4h-4.5c-1.108 0-2-0.892-2-2v-8c0-1.108 0.892-2 2-2zm2.4004 3.9492c-0.15 0-0.30039 0.050391-0.40039 0.15039l-1.9004 2c-0.2 0.2-0.2 0.60078 0 0.80078l1.9004 1.9004c0.2 0.2 0.60078 0.2 0.80078 0 0.2-0.2 0.2-0.60078 0-0.80078l-1-1h6.3984l-1 1.0996c-0.2 0.2-0.2 0.60078 0 0.80078 0.2 0.2 0.60078 0.2 0.80078 0l1.9004-1.9004c0.2-0.2 0.2-0.60078 0-0.80078l-1.9004-2.0996c-0.2-0.2-0.60078-0.2-0.80078 0-0.2 0.2-0.2 0.60078 0 0.80078l1 1.0996h-6.3984l1-1.0996c0.2-0.2 0.2-0.60078 0-0.80078-0.1-0.1-0.25039-0.15039-0.40039-0.15039z"/>
</svg>

After

Width:  |  Height:  |  Size: 847 B

View File

@ -0,0 +1,3 @@
<svg fill="context-fill" fill-opacity="context-fill-opacity" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="m5.4746 0c-0.26491 0.013342-0.47461 0.23166-0.47461 0.5v0.5h-2c-1.108 0-2 0.892-2 2v11c0 1.108 0.892 2 2 2h10c1.108 0 2-0.892 2-2v-11c0-1.108-0.892-2-2-2h-2v-0.5c0-0.277-0.223-0.5-0.5-0.5s-0.5 0.223-0.5 0.5v0.5h-4v-0.5c0-0.277-0.223-0.5-0.5-0.5-0.0086562 0-0.016845-4.3039e-4 -0.02539 0zm-2.4746 2h9.9999c0.554 0 1 0.446 1 1v11c0 0.554-0.446 1-1 1h-10c-0.554 0-1-0.446-1-1v-11c0-0.554 0.446-1 1-1zm1.4982 3c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h7.0017c0.277 0 0.5-0.223 0.5-0.5s-0.223-0.5-0.5-0.5zm0 3c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h7.0017c0.277 0 0.5-0.223 0.5-0.5s-0.223-0.5-0.5-0.5zm0 3c-0.277 0-0.5 0.223-0.5 0.5s0.223 0.5 0.5 0.5h7.0017c0.277 0 0.5-0.223 0.5-0.5s-0.223-0.5-0.5-0.5z"/>
</svg>

After

Width:  |  Height:  |  Size: 860 B

View File

@ -1,24 +1,26 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:host, :host,
:host(.anonymous-content-host),
:root { :root {
--in-content-page-background: rgb(29,29,29) !important; --color-accent-primary: var(--theme-primary-active-color) !important;
--in-content-page-color: rgb(253,253,253) !important; --in-content-page-color: var(--gnome-content-page-color) !important;
--in-content-page-background: var(--gnome-content-page-background) !important;
--in-content-box-background: rgb(36, 36, 36) !important; --in-content-box-background: var(--gnome-browser-before-load-background) !important;
--in-content-box-background-odd: rgba(250,250,250,0.05) !important; --in-content-box-background-odd: rgba(250,250,250,0.05) !important;
--in-content-box-info-background: rgba(250,250,250,0.15) !important; --in-content-box-info-background: rgba(250,250,250,0.15) !important;
--in-content-border-color: rgba(250,250,250,0.2) !important; --in-content-border-color: rgba(250,250,250,0.2) !important;
--in-content-border-hover: rgba(250,250,250,0.3) !important; --in-content-border-hover: rgba(250,250,250,0.3) !important;
--in-content-icon-color: rgb(252,252,252) !important; --in-content-icon-color: var(--gnome-content-page-color) !important;
--in-content-primary-button-text-color: rgb(255,255,255) !important; --in-content-primary-button-text-color: var(--gnome-toolbar-color) !important;
--in-content-primary-button-background: var(--theme-primary-color) !important; --in-content-primary-button-background: var(--theme-primary-color) !important;
--in-content-primary-button-background-hover: var(--theme-primary-hover-color) !important; --in-content-primary-button-background-hover: var(--theme-primary-hover-color) !important;
--in-content-primary-button-background-active: var(--theme-primary-active-color) !important; --in-content-primary-button-background-active: var(--theme-primary-active-color) !important;
--in-content-table-background: rgb(35, 35, 35) !important; --in-content-table-background: var(--gnome-browser-before-load-background) !important;
--newtab-background-color: var(--gnome-browser-before-load-background) !important; --newtab-background-color: var(--gnome-browser-before-load-background) !important;
--newtab-background-color-secondary: var(--gnome-menu-background) !important; --newtab-background-color-secondary: var(--gnome-menu-background) !important;
@ -26,12 +28,13 @@
--fxview-background-color: var(--gnome-browser-before-load-background) !important; --fxview-background-color: var(--gnome-browser-before-load-background) !important;
--fxview-background-color-secondary: var(--gnome-menu-background) !important; --fxview-background-color-secondary: var(--gnome-menu-background) !important;
scrollbar-color: rgba(250,250,250,.4) rgba(22,22,22,.3) !important; scrollbar-color: rgba(250,250,250,.4) rgba(22,22,22,.3) !important;
--background-color-box: var(--gnome-content-box-background) !important;
} }
@media not (prefers-contrast) { @media not (prefers-contrast) {
:root[dialogroot], :root[dialogroot],
:host(dialog) { :host(dialog) {
--in-content-page-background: #424242 !important; --in-content-page-background: var(--gnome-content-page-dialog-background) !important;
} }
} }
} }

View File

@ -5,8 +5,8 @@
/* Headerbar top border corners rounded */ /* Headerbar top border corners rounded */
:root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) { :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) {
#nav-bar { #nav-bar {
border-top-left-radius: 12px !important; border-top-left-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important;
border-top-right-radius: 12px !important; border-top-right-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important;
box-shadow: var(--gnome-headerbar-box-shadow) !important; box-shadow: var(--gnome-headerbar-box-shadow) !important;
} }
@ -21,12 +21,26 @@
body::backdrop, body::backdrop,
dialog::backdrop { dialog::backdrop {
/* Use an uniform clip to allow WebRender to optimize it better */ /* Use an uniform clip to allow WebRender to optimize it better */
border-radius: 12px !important; border-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important;
} }
window[role="dialog"] { window[role="dialog"] {
border-bottom-left-radius: 12px !important; border-bottom-left-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important;
border-bottom-right-radius: 12px !important; border-bottom-right-radius: env(-moz-gtk-csd-titlebar-radius, 12px) !important;
}
}
}
:root[tabsintitlebar] {
/* Always show nav bar window buttons*/
#nav-bar > .titlebar-buttonbox-container {
display: flex !important;
}
#toolbar-menubar, #TabsToolbar {
/* Always hide menu bar window buttons*/
& > .titlebar-buttonbox-container {
display: none !important;
} }
} }
} }
@ -58,6 +72,7 @@
} }
/* Window buttons box */ /* Window buttons box */
:root[tabsintitlebar] #nav-bar .titlebar-buttonbox-container,
:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container, :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container,
:root[tabsintitlebar] #titlebar-buttonbox-container, :root[tabsintitlebar] #titlebar-buttonbox-container,
:root[tabsintitlebar][inFullscreen] #window-controls { :root[tabsintitlebar][inFullscreen] #window-controls {
@ -68,11 +83,13 @@
top: 0; top: 0;
display: block !important; display: block !important;
} }
:root[tabsintitlebar] #nav-bar .titlebar-buttonbox,
:root[tabsintitlebar] #titlebar .titlebar-buttonbox { :root[tabsintitlebar] #titlebar .titlebar-buttonbox {
-moz-appearance: none !important; -moz-appearance: none !important;
} }
/* Window buttons style */ /* Window buttons style */
:root[tabsintitlebar] #nav-bar .titlebar-button,
:root[tabsintitlebar] #titlebar .titlebar-button, :root[tabsintitlebar] #titlebar .titlebar-button,
:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton {
-moz-appearance: none !important; -moz-appearance: none !important;
@ -82,7 +99,9 @@
margin: 16px 4px !important; margin: 16px 4px !important;
padding: 2px 0 !important; padding: 2px 0 !important;
width: 16px; width: 16px;
--inactive-titlebar-opacity: 1 !important;
} }
:root[tabsintitlebar][inFullscreen] #nav-bar .titlebar-button,
:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-button, :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-button,
:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton { :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton {
height: 24px !important; height: 24px !important;
@ -90,10 +109,10 @@
margin: 12px 4px !important; margin: 12px 4px !important;
padding: 0 !important; padding: 0 !important;
} }
:root[tabsintitlebar] #nav-bar .titlebar-button .toolbarbutton-icon,
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-button .toolbarbutton-icon,
:root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon, :root[tabsintitlebar] #titlebar .titlebar-button .toolbarbutton-icon,
:root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon { :root[tabsintitlebar][inFullscreen] #window-controls toolbarbutton .toolbarbutton-icon,
opacity: 0 !important;
}
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button .toolbarbutton-icon, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-button .toolbarbutton-icon,
:root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive toolbarbutton .toolbarbutton-icon { :root[tabsintitlebar][inFullscreen] #window-controls:-moz-window-inactive toolbarbutton .toolbarbutton-icon {
opacity: 0 !important; opacity: 0 !important;
@ -103,7 +122,9 @@
:root[tabsintitlebar][inFullscreen] #window-controls #close-button, :root[tabsintitlebar][inFullscreen] #window-controls #close-button,
:root[tabsintitlebar][inFullscreen] #window-controls #minimize-button, :root[tabsintitlebar][inFullscreen] #window-controls #minimize-button,
:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-close, :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-close,
:root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-min { :root[tabsintitlebar][inFullscreen] #titlebar .titlebar-buttonbox .titlebar-min,
:root[tabsintitlebar][inFullscreen] #nav-bar .titlebar-buttonbox .titlebar-close,
:root[tabsintitlebar][inFullscreen] #nav-bar .titlebar-buttonbox .titlebar-min {
display: none !important; display: none !important;
} }
@ -114,6 +135,7 @@
} }
/* Window buttons box */ /* Window buttons box */
:root[tabsintitlebar] #nav-bar .titlebar-buttonbox-container,
:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container { :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container {
padding: 0 3px 0 4px; padding: 0 3px 0 4px;
left: 8px; left: 8px;

View File

@ -6,13 +6,17 @@
padding: 8px !important; padding: 8px !important;
} }
.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {
width: 0 !important;
}
/* Headerbar CSD colors */ /* Headerbar CSD colors */
:root[tabsintitlebar] #nav-bar { :root[tabsintitlebar] #nav-bar {
border: none !important; border: none !important;
} }
/* Headerbar buttons */ /* Headerbar buttons */
#nav-bar toolbarbutton:not(#urlbar-zoom-button), #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.subviewbutton):not(.titlebar-button),
toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
@ -27,7 +31,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
transition: background 200ms; transition: background 200ms;
} }
:root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button) { :root:-moz-window-inactive #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button) {
background: none !important; background: none !important;
} }
@ -43,7 +47,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
} }
/* Hover headerbar buttons */ /* Hover headerbar buttons */
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([open]):not([disabled]):not([checked]):hover, #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([open]):not([disabled]):not([checked]):hover,
#TabsToolbar .toolbarbutton-1:hover, #TabsToolbar .toolbarbutton-1:hover,
#tabs-newtab-button:hover, #TabsToolbar #new-tab-button:hover { #tabs-newtab-button:hover, #TabsToolbar #new-tab-button:hover {
outline: 0 !important; outline: 0 !important;
@ -51,16 +55,16 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
} }
/* Active headerbar buttons */ /* Active headerbar buttons */
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled]):not(#hack):active, #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([disabled]):not(#hack):active,
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled])[open], #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([disabled])[open],
#nav-bar toolbarbutton:not(#urlbar-zoom-button):not([disabled])[checked], #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):not([disabled])[checked],
#TabsToolbar .toolbarbutton-1:active, #TabsToolbar .toolbarbutton-1[open], #TabsToolbar .toolbarbutton-1:active, #TabsToolbar .toolbarbutton-1[open],
#tabs-newtab-button:active, #TabsToolbar #new-tab-button:active { #tabs-newtab-button:active, #TabsToolbar #new-tab-button:active {
background: var(--gnome-headerbar-button-active-background) !important; background: var(--gnome-headerbar-button-active-background) !important;
} }
/* Disabled headerbar buttons */ /* Disabled headerbar buttons */
#nav-bar toolbarbutton:not(#urlbar-zoom-button)[disabled] { #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button)[disabled] {
background: transparent !important; background: transparent !important;
border-color: var(--gnome-button-disabled-border-color) !important; border-color: var(--gnome-button-disabled-border-color) !important;
box-shadow: none !important; box-shadow: none !important;
@ -68,7 +72,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
} }
/* Inactive window buttons */ /* Inactive window buttons */
#nav-bar toolbarbutton:not(#urlbar-zoom-button):-moz-window-inactive { #nav-bar toolbarbutton:not(#urlbar-zoom-button):not(.titlebar-button):-moz-window-inactive {
background: var(--gnome-inactive-button-background) !important; background: var(--gnome-inactive-button-background) !important;
box-shadow: var(--gnome-inactive-button-box-shadow) !important; box-shadow: var(--gnome-inactive-button-box-shadow) !important;
border-color: var(--gnome-inactive-button-border-color) !important; border-color: var(--gnome-inactive-button-border-color) !important;

View File

@ -266,16 +266,19 @@ menu[disabled] > .menu-right {
} }
/* Sound icons */ /* Sound icons */
.tab-icon-overlay[soundplaying] { .tab-icon-overlay:not([crashed])[soundplaying] {
list-style-image: url("../icons/audio-playing-symbolic.svg") !important; list-style-image: url("../icons/audio-playing-symbolic.svg") !important;
background-image: none !important;
} }
.tab-icon-overlay[muted] { .tab-icon-overlay:not([crashed])[muted] {
list-style-image: url("../icons/audio-muted-symbolic.svg") !important; list-style-image: url("../icons/audio-muted-symbolic.svg") !important;
background-image: none !important;
} }
.tab-icon-overlay[activemedia-blocked] { .tab-icon-overlay[activemedia-blocked] {
list-style-image: url("../icons/tab-audio-blocked-small.svg") !important; list-style-image: url("../icons/tab-audio-blocked-small.svg") !important;
background-image: none !important;
} }
.tab-icon-stack[activemedia-blocked="true"] .tab-icon-image { .tab-icon-stack[activemedia-blocked="true"] .tab-icon-image {
@ -357,7 +360,8 @@ menu[disabled] > .menu-right {
#add-ons-button, #add-ons-button,
#unified-extensions-button, #unified-extensions-button,
#addons-notification-icon, #addons-notification-icon,
.install-icon { .install-icon,
#identity-box[pageproxystate="valid"].extensionPage #identity-icon {
list-style-image: url("../icons/application-x-addon-symbolic.svg") !important; list-style-image: url("../icons/application-x-addon-symbolic.svg") !important;
} }
/* Find button */ /* Find button */
@ -665,6 +669,63 @@ toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme {
list-style-image: url("../icons/tool-profiler.svg") !important; list-style-image: url("../icons/tool-profiler.svg") !important;
} }
/* containers extension */
.urlbar-page-action > .urlbar-icon {
filter: none !important;
}
#pageAction-urlbar-_testpilot-containers {
list-style-image: url("../icons/container-openin.svg") !important;
}
#_testpilot-containers-BAP .toolbarbutton-icon {
list-style-image: url("../icons/multi-account-container.svg") !important;
}
.userContext-icon, .subviewbutton[usercontextid] > .toolbarbutton-icon, #userContext-indicator {
background-image: var(--identity-icon) !important;
-moz-context-properties: fill;
fill: var(--identity-icon-color) !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.identity-icon-briefcase {
--identity-icon: url("../icons/briefcase.svg") !important;
}
.identity-icon-fingerprint {
--identity-icon: url("../icons/fingerprint.svg") !important;
}
.identity-icon-cart {
--identity-icon: url("../icons/cart.svg") !important;
}
.identity-icon-dollar {
--identity-icon: url("../icons/dollar.svg") !important;
}
/* side view extension */
#pageAction-urlbar-side-view_mozilla_org,
#sidebarswitcher_menu_side-view_mozilla_org-sidebar-action,
#side-view_mozilla_org-BAP .toolbarbutton-icon,
#sidebar-box[sidebarcommand="side-view_mozilla_org-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
list-style-image: url("../icons/side-view.svg") !important;
}
#side-view_mozilla_org-menuitem-_open-in-sidebar .menu-iconic-icon {
background-image: url("../icons/side-view.svg") !important;
}
/* Firefox note extension */
#notes_mozilla_com-BAP .toolbarbutton-icon,
#sidebarswitcher_menu_notes_mozilla_com-sidebar-action,
#sidebar-box[sidebarcommand="notes_mozilla_com-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
list-style-image: url("../icons/universal-notepad.svg") !important;
}
/* Fix flat buttons icons aproach */ /* Fix flat buttons icons aproach */
button.close::before { button.close::before {
content: ""; content: "";

View File

@ -26,6 +26,10 @@ menupopup {
--panel-shadow: var(--gnome-popover-shadow), 0 0 0 1px var(--gnome-menu-border-color) !important; --panel-shadow: var(--gnome-popover-shadow), 0 0 0 1px var(--gnome-menu-border-color) !important;
} }
.cui-widget-panelview[id^="PanelUI-webext-"] {
border-radius: 6px !important;
}
.panel-arrowcontent { .panel-arrowcontent {
border: none !important; border: none !important;
} }
@ -179,8 +183,6 @@ panelview {
/* Style popovers menu buttons */ /* Style popovers menu buttons */
menuitem, menupopup menu, menuitem, menupopup menu,
.subviewbutton:not(#appMenu-fxa-label2, #downloadsHistory),
.toolbarbutton-1,
.protections-popup-footer-button, .protections-popup-footer-button,
.protections-popup-category, .protections-popup-category,
.identity-popup-content-blocking-category, .identity-popup-content-blocking-category,
@ -191,6 +193,18 @@ menuitem, menupopup menu,
font: menu !important; font: menu !important;
padding: 0 6px !important; padding: 0 6px !important;
min-height: 28px !important; min-height: 28px !important;
margin: 0 !important;
}
.subviewbutton,
panelview toolbarbutton {
-moz-appearance: none !important;
border-radius: 6px !important;
color: var(--gnome-toolbar-color) !important;
font: menu !important;
min-height: 28px !important;
padding: 3px 6px !important;
margin: 0 !important;
} }
#downloadsHistory { #downloadsHistory {
@ -209,14 +223,13 @@ menuitem, menupopup menu,
--button-active-bgcolor: var(--gnome-popover-button-active-background) !important; --button-active-bgcolor: var(--gnome-popover-button-active-background) !important;
} }
.subviewbutton,
.protections-popup-footer-button, .protections-popup-footer-button,
.protections-popup-category, .protections-popup-category,
.identity-popup-content-blocking-category, .identity-popup-content-blocking-category,
#PlacesToolbar menupopup[placespopup="true"] .bookmark-item, #PlacesToolbar menupopup[placespopup="true"] .bookmark-item,
.openintabs-menuitem, .openintabs-menuitem,
.widget-overflow-list .toolbarbutton-1 { .widget-overflow-list .toolbarbutton-1 {
padding: 5px !important; padding: 3px 6px !important;
margin: 0 !important; margin: 0 !important;
} }

View File

@ -1,10 +1,52 @@
/* Sidebar */ /* Sidebar */
#sidebar-main,
#sidebar-box, #sidebar, #sidebar-box, #sidebar,
.sidebar-panel[lwt-sidebar] { .sidebar-panel[lwt-sidebar] {
color: var(--gnome-toolbar-color) !important; color: var(--gnome-toolbar-color) !important;
background: var(--gnome-sidebar-background) !important; background: var(--gnome-sidebar-background) !important;
} }
#sidebar-main {
padding: 8px 0;
}
@media (-moz-bool-pref: "sidebar.revamp") {
#tabbrowser-tabbox {
outline: none !important;
box-shadow: none !important;
}
#sidebar {
border-radius: 12px !important;
box-shadow: var(--gnome-popover-shadow), 0 0 0 1px var(--gnome-popover-border-color) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
color: var(--gnome-toolbar-color) !important;
background: var(--gnome-menu-background) !important;
margin: 6px 6px 0 0 !important;
}
}
.search-container {
border-radius: 1000px;
background-color: var(--gnome-urlbar-background) !important;
border: 1px solid var(--gnome-urlbar-border-color) !important;
outline: 2px solid transparent !important;
box-shadow: none !important;
}
.search-container:focus-within {
border: 1px solid transparent !important;
outline: 2px solid var(--gnome-focused-urlbar-border-color) !important;
outline-offset: -2px;
transition: outline 100ms ease-out;
}
fxview-search-textbox {
&::part(input) {
border: var(--sidebar-box-border) !important;
}
}
#sidebar-header { #sidebar-header {
padding: 8px; padding: 8px;
border-bottom: 1px solid var(--gnome-sidebar-border-color) !important; border-bottom: 1px solid var(--gnome-sidebar-border-color) !important;
@ -13,7 +55,7 @@
.sidebar-splitter { .sidebar-splitter {
width: 1px !important; width: 1px !important;
background-color: var(--gnome-sidebar-border-color, var(--gnome-toolbar-background)) !important; background-color: var(--gnome-toolbar-border-color, var(--gnome-toolbar-background)) !important;
background-image: linear-gradient(to top, var(--sidebar-background-color) 0%, var(--sidebar-background-color) 100%); background-image: linear-gradient(to top, var(--sidebar-background-color) 0%, var(--sidebar-background-color) 100%);
border: none !important; border: none !important;
} }

View File

@ -1,116 +1,141 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root[tabsintitlebar] #nav-bar .titlebar-close,
:root[tabsintitlebar] #titlebar .titlebar-close, :root[tabsintitlebar] #titlebar .titlebar-close,
:root[tabsintitlebar] #titlebar #titlebar-close { :root[tabsintitlebar] #titlebar #titlebar-close {
background: url("../titlebuttons/titlebutton-close-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max,
:root[tabsintitlebar] #titlebar .titlebar-max, :root[tabsintitlebar] #titlebar .titlebar-max,
:root[tabsintitlebar] #titlebar #titlebar-max { :root[tabsintitlebar] #titlebar #titlebar-max {
background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min,
:root[tabsintitlebar] #titlebar .titlebar-min, :root[tabsintitlebar] #titlebar .titlebar-min,
:root[tabsintitlebar] #titlebar #titlebar-min { :root[tabsintitlebar] #titlebar #titlebar-min {
background: url("../titlebuttons/titlebutton-minimize-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore,
:root[tabsintitlebar] #titlebar .titlebar-restore, :root[tabsintitlebar] #titlebar .titlebar-restore,
:root[tabsintitlebar] #titlebar #titlebar-restore, :root[tabsintitlebar] #titlebar #titlebar-restore,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max {
background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-close:hover,
:root[tabsintitlebar] #titlebar .titlebar-close:hover, :root[tabsintitlebar] #titlebar .titlebar-close:hover,
:root[tabsintitlebar] #titlebar #titlebar-close:hover { :root[tabsintitlebar] #titlebar #titlebar-close:hover {
background: url("../titlebuttons/titlebutton-close-hover-dark-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-hover-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max:hover,
:root[tabsintitlebar] #titlebar .titlebar-max:hover, :root[tabsintitlebar] #titlebar .titlebar-max:hover,
:root[tabsintitlebar] #titlebar #titlebar-max:hover { :root[tabsintitlebar] #titlebar #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-maximize-hover-dark-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-hover-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min:hover,
:root[tabsintitlebar] #titlebar .titlebar-min:hover, :root[tabsintitlebar] #titlebar .titlebar-min:hover,
:root[tabsintitlebar] #titlebar #titlebar-min:hover { :root[tabsintitlebar] #titlebar #titlebar-min:hover {
background: url("../titlebuttons/titlebutton-minimize-hover-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-hover-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar #titlebar-restore:hover, :root[tabsintitlebar] #titlebar #titlebar-restore:hover,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-unmaximize-hover-dark-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-hover-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-close:active,
:root[tabsintitlebar] #titlebar .titlebar-close:active, :root[tabsintitlebar] #titlebar .titlebar-close:active,
:root[tabsintitlebar] #titlebar #titlebar-close:active { :root[tabsintitlebar] #titlebar #titlebar-close:active {
background: url("../titlebuttons/titlebutton-close-active-dark-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-active-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max:active,
:root[tabsintitlebar] #titlebar .titlebar-max:active, :root[tabsintitlebar] #titlebar .titlebar-max:active,
:root[tabsintitlebar] #titlebar #titlebar-max:active { :root[tabsintitlebar] #titlebar #titlebar-max:active {
background: url("../titlebuttons/titlebutton-maximize-active-dark-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-active-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min:active,
:root[tabsintitlebar] #titlebar .titlebar-min:active, :root[tabsintitlebar] #titlebar .titlebar-min:active,
:root[tabsintitlebar] #titlebar #titlebar-min:active { :root[tabsintitlebar] #titlebar #titlebar-min:active {
background: url("../titlebuttons/titlebutton-minimize-active-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-active-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore:active,
:root[tabsintitlebar] #titlebar .titlebar-restore:active, :root[tabsintitlebar] #titlebar .titlebar-restore:active,
:root[tabsintitlebar] #titlebar #titlebar-restore:active, :root[tabsintitlebar] #titlebar #titlebar-restore:active,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active {
background: url("../titlebuttons/titlebutton-unmaximize-active-dark-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-active-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close {
background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max {
background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min {
background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max { :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max {
background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover {
background: url("../titlebuttons/titlebutton-close-backdrop-dark-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-backdrop-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-maximize-backdrop-dark-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-backdrop-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover {
background: url("../titlebuttons/titlebutton-minimize-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover { :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-unmaximize-backdrop-dark-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-backdrop-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar][inFullscreen] #window-controls #restore-button { :root[tabsintitlebar][inFullscreen] #window-controls #restore-button {
background: url("../titlebuttons/titlebutton-unmaximize-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-dark-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar][inFullscreen] #window-controls #restore-button:hover { :root[tabsintitlebar][inFullscreen] #window-controls #restore-button:hover {

View File

@ -1,109 +1,134 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root[tabsintitlebar] #nav-bar .titlebar-close,
:root[tabsintitlebar] #titlebar .titlebar-close, :root[tabsintitlebar] #titlebar .titlebar-close,
:root[tabsintitlebar] #titlebar #titlebar-close { :root[tabsintitlebar] #titlebar #titlebar-close {
background: url("../titlebuttons/titlebutton-close-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max,
:root[tabsintitlebar] #titlebar .titlebar-max, :root[tabsintitlebar] #titlebar .titlebar-max,
:root[tabsintitlebar] #titlebar #titlebar-max { :root[tabsintitlebar] #titlebar #titlebar-max {
background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min,
:root[tabsintitlebar] #titlebar .titlebar-min, :root[tabsintitlebar] #titlebar .titlebar-min,
:root[tabsintitlebar] #titlebar #titlebar-min { :root[tabsintitlebar] #titlebar #titlebar-min {
background: url("../titlebuttons/titlebutton-minimize-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore,
:root[tabsintitlebar] #titlebar .titlebar-restore, :root[tabsintitlebar] #titlebar .titlebar-restore,
:root[tabsintitlebar] #titlebar #titlebar-restore, :root[tabsintitlebar] #titlebar #titlebar-restore,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max {
background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-close:hover,
:root[tabsintitlebar] #titlebar .titlebar-close:hover, :root[tabsintitlebar] #titlebar .titlebar-close:hover,
:root[tabsintitlebar] #titlebar #titlebar-close:hover { :root[tabsintitlebar] #titlebar #titlebar-close:hover {
background: url("../titlebuttons/titlebutton-close-hover-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-hover-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max:hover,
:root[tabsintitlebar] #titlebar .titlebar-max:hover, :root[tabsintitlebar] #titlebar .titlebar-max:hover,
:root[tabsintitlebar] #titlebar #titlebar-max:hover { :root[tabsintitlebar] #titlebar #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-maximize-hover-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-hover-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min:hover,
:root[tabsintitlebar] #titlebar .titlebar-min:hover, :root[tabsintitlebar] #titlebar .titlebar-min:hover,
:root[tabsintitlebar] #titlebar #titlebar-min:hover { :root[tabsintitlebar] #titlebar #titlebar-min:hover {
background: url("../titlebuttons/titlebutton-minimize-hover-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-hover-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar #titlebar-restore:hover, :root[tabsintitlebar] #titlebar #titlebar-restore:hover,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-unmaximize-hover-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-hover-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-close:active,
:root[tabsintitlebar] #titlebar .titlebar-close:active, :root[tabsintitlebar] #titlebar .titlebar-close:active,
:root[tabsintitlebar] #titlebar #titlebar-close:active { :root[tabsintitlebar] #titlebar #titlebar-close:active {
background: url("../titlebuttons/titlebutton-close-active-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-active-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max:active,
:root[tabsintitlebar] #titlebar .titlebar-max:active, :root[tabsintitlebar] #titlebar .titlebar-max:active,
:root[tabsintitlebar] #titlebar #titlebar-max:active { :root[tabsintitlebar] #titlebar #titlebar-max:active {
background: url("../titlebuttons/titlebutton-maximize-active-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-active-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min:active,
:root[tabsintitlebar] #titlebar .titlebar-min:active, :root[tabsintitlebar] #titlebar .titlebar-min:active,
:root[tabsintitlebar] #titlebar #titlebar-min:active { :root[tabsintitlebar] #titlebar #titlebar-min:active {
background: url("../titlebuttons/titlebutton-minimize-active-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-active-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore:active,
:root[tabsintitlebar] #titlebar .titlebar-restore:active, :root[tabsintitlebar] #titlebar .titlebar-restore:active,
:root[tabsintitlebar] #titlebar #titlebar-restore:active, :root[tabsintitlebar] #titlebar #titlebar-restore:active,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active {
background: url("../titlebuttons/titlebutton-unmaximize-active-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-active-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close {
background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max {
background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min {
background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max { :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max {
background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover {
background: url("../titlebuttons/titlebutton-close-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-maximize-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover {
background: url("../titlebuttons/titlebutton-minimize-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-backdrop-dark.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover { :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-unmaximize-backdrop-dark.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-backdrop-dark.svg") no-repeat;

View File

@ -1,118 +1,140 @@
:root[tabsintitlebar] #nav-bar .titlebar-close,
:root[tabsintitlebar] #titlebar .titlebar-close, :root[tabsintitlebar] #titlebar .titlebar-close,
:root[tabsintitlebar] #titlebar #titlebar-close { :root[tabsintitlebar] #titlebar #titlebar-close {
background: url("../titlebuttons/titlebutton-close.svg") no-repeat; background: url("../titlebuttons/titlebutton-close.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max,
:root[tabsintitlebar] #titlebar .titlebar-max, :root[tabsintitlebar] #titlebar .titlebar-max,
:root[tabsintitlebar] #titlebar #titlebar-max { :root[tabsintitlebar] #titlebar #titlebar-max {
background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min,
:root[tabsintitlebar] #titlebar .titlebar-min, :root[tabsintitlebar] #titlebar .titlebar-min,
:root[tabsintitlebar] #titlebar #titlebar-min { :root[tabsintitlebar] #titlebar #titlebar-min {
background: url("../titlebuttons/titlebutton-minimize.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore,
:root[tabsintitlebar] #titlebar .titlebar-restore, :root[tabsintitlebar] #titlebar .titlebar-restore,
:root[tabsintitlebar] #titlebar #titlebar-restore, :root[tabsintitlebar] #titlebar #titlebar-restore,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max {
background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-close:hover,
:root[tabsintitlebar] #titlebar .titlebar-close:hover, :root[tabsintitlebar] #titlebar .titlebar-close:hover,
:root[tabsintitlebar] #titlebar #titlebar-close:hover { :root[tabsintitlebar] #titlebar #titlebar-close:hover {
background: url("../titlebuttons/titlebutton-close-hover-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-hover-alt.svg") no-repeat;
background-color: transparent !important;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max:hover,
:root[tabsintitlebar] #titlebar .titlebar-max:hover, :root[tabsintitlebar] #titlebar .titlebar-max:hover,
:root[tabsintitlebar] #titlebar #titlebar-max:hover { :root[tabsintitlebar] #titlebar #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-maximize-hover-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-hover-alt.svg") no-repeat;
background-color: transparent !important;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min:hover,
:root[tabsintitlebar] #titlebar .titlebar-min:hover, :root[tabsintitlebar] #titlebar .titlebar-min:hover,
:root[tabsintitlebar] #titlebar #titlebar-min:hover { :root[tabsintitlebar] #titlebar #titlebar-min:hover {
background: url("../titlebuttons/titlebutton-minimize-hover.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-hover.svg") no-repeat;
background-color: transparent !important;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar #titlebar-restore:hover, :root[tabsintitlebar] #titlebar #titlebar-restore:hover,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-unmaximize-hover-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-hover-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-close:active,
:root[tabsintitlebar] #titlebar .titlebar-close:active, :root[tabsintitlebar] #titlebar .titlebar-close:active,
:root[tabsintitlebar] #titlebar #titlebar-close:active { :root[tabsintitlebar] #titlebar #titlebar-close:active {
background: url("../titlebuttons/titlebutton-close-active-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-active-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max:active,
:root[tabsintitlebar] #titlebar .titlebar-max:active, :root[tabsintitlebar] #titlebar .titlebar-max:active,
:root[tabsintitlebar] #titlebar #titlebar-max:active { :root[tabsintitlebar] #titlebar #titlebar-max:active {
background: url("../titlebuttons/titlebutton-maximize-active-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-active-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min:active,
:root[tabsintitlebar] #titlebar .titlebar-min:active, :root[tabsintitlebar] #titlebar .titlebar-min:active,
:root[tabsintitlebar] #titlebar #titlebar-min:active { :root[tabsintitlebar] #titlebar #titlebar-min:active {
background: url("../titlebuttons/titlebutton-minimize-active.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-active.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore:active,
:root[tabsintitlebar] #titlebar .titlebar-restore:active, :root[tabsintitlebar] #titlebar .titlebar-restore:active,
:root[tabsintitlebar] #titlebar #titlebar-restore:active, :root[tabsintitlebar] #titlebar #titlebar-restore:active,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active {
background: url("../titlebuttons/titlebutton-unmaximize-active-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-active-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close {
background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max {
background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min {
background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max { :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max {
background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover {
background: url("../titlebuttons/titlebutton-close-backdrop-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-backdrop-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-maximize-backdrop-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-backdrop-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover {
background: url("../titlebuttons/titlebutton-minimize-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover { :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-unmaximize-backdrop-alt.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-backdrop-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar][inFullscreen] #window-controls #restore-button { :root[tabsintitlebar][inFullscreen] #window-controls #restore-button {
background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-alt.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar][inFullscreen] #window-controls #restore-button:hover { :root[tabsintitlebar][inFullscreen] #window-controls #restore-button:hover {

View File

@ -1,111 +1,133 @@
:root[tabsintitlebar] #nav-bar .titlebar-close,
:root[tabsintitlebar] #titlebar .titlebar-close, :root[tabsintitlebar] #titlebar .titlebar-close,
:root[tabsintitlebar] #titlebar #titlebar-close { :root[tabsintitlebar] #titlebar #titlebar-close {
background: url("../titlebuttons/titlebutton-close.svg") no-repeat; background: url("../titlebuttons/titlebutton-close.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max,
:root[tabsintitlebar] #titlebar .titlebar-max, :root[tabsintitlebar] #titlebar .titlebar-max,
:root[tabsintitlebar] #titlebar #titlebar-max { :root[tabsintitlebar] #titlebar #titlebar-max {
background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min,
:root[tabsintitlebar] #titlebar .titlebar-min, :root[tabsintitlebar] #titlebar .titlebar-min,
:root[tabsintitlebar] #titlebar #titlebar-min { :root[tabsintitlebar] #titlebar #titlebar-min {
background: url("../titlebuttons/titlebutton-minimize.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore,
:root[tabsintitlebar] #titlebar .titlebar-restore, :root[tabsintitlebar] #titlebar .titlebar-restore,
:root[tabsintitlebar] #titlebar #titlebar-restore, :root[tabsintitlebar] #titlebar #titlebar-restore,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max {
background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-close:hover,
:root[tabsintitlebar] #titlebar .titlebar-close:hover, :root[tabsintitlebar] #titlebar .titlebar-close:hover,
:root[tabsintitlebar] #titlebar #titlebar-close:hover { :root[tabsintitlebar] #titlebar #titlebar-close:hover {
background: url("../titlebuttons/titlebutton-close-hover.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-hover.svg") no-repeat;
background-color: transparent !important;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max:hover,
:root[tabsintitlebar] #titlebar .titlebar-max:hover, :root[tabsintitlebar] #titlebar .titlebar-max:hover,
:root[tabsintitlebar] #titlebar #titlebar-max:hover { :root[tabsintitlebar] #titlebar #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-maximize-hover.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-hover.svg") no-repeat;
background-color: transparent !important;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min:hover,
:root[tabsintitlebar] #titlebar .titlebar-min:hover, :root[tabsintitlebar] #titlebar .titlebar-min:hover,
:root[tabsintitlebar] #titlebar #titlebar-min:hover { :root[tabsintitlebar] #titlebar #titlebar-min:hover {
background: url("../titlebuttons/titlebutton-minimize-hover.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-hover.svg") no-repeat;
background-color: transparent !important;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar .titlebar-restore:hover, :root[tabsintitlebar] #titlebar .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar #titlebar-restore:hover, :root[tabsintitlebar] #titlebar #titlebar-restore:hover,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-unmaximize-hover.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-hover.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-close:active,
:root[tabsintitlebar] #titlebar .titlebar-close:active, :root[tabsintitlebar] #titlebar .titlebar-close:active,
:root[tabsintitlebar] #titlebar #titlebar-close:active { :root[tabsintitlebar] #titlebar #titlebar-close:active {
background: url("../titlebuttons/titlebutton-close-active.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-active.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-max:active,
:root[tabsintitlebar] #titlebar .titlebar-max:active, :root[tabsintitlebar] #titlebar .titlebar-max:active,
:root[tabsintitlebar] #titlebar #titlebar-max:active { :root[tabsintitlebar] #titlebar #titlebar-max:active {
background: url("../titlebuttons/titlebutton-maximize-active.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-active.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-min:active,
:root[tabsintitlebar] #titlebar .titlebar-min:active, :root[tabsintitlebar] #titlebar .titlebar-min:active,
:root[tabsintitlebar] #titlebar #titlebar-min:active { :root[tabsintitlebar] #titlebar #titlebar-min:active {
background: url("../titlebuttons/titlebutton-minimize-active.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-active.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar .titlebar-restore:active,
:root[tabsintitlebar] #titlebar .titlebar-restore:active, :root[tabsintitlebar] #titlebar .titlebar-restore:active,
:root[tabsintitlebar] #titlebar #titlebar-restore:active, :root[tabsintitlebar] #titlebar #titlebar-restore:active,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar .titlebar-max:active,
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active, :root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-max:active,
:root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active { :root[tabsintitlebar][sizemode="maximized"] #titlebar #titlebar-max:active {
background: url("../titlebuttons/titlebutton-unmaximize-active.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-active.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close {
background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max {
background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min {
background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max { :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max {
background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-close:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-close:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-close:hover {
background: url("../titlebuttons/titlebutton-close-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-close-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-maximize-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-maximize-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-min:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-min:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover { :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-min:hover {
background: url("../titlebuttons/titlebutton-minimize-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-minimize-backdrop.svg") no-repeat;
background-size: contain; background-size: contain;
} }
:root[tabsintitlebar] #nav-bar:-moz-window-inactive .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive .titlebar-restore:hover,
:root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover, :root[tabsintitlebar] #titlebar:-moz-window-inactive #titlebar-restore:hover,
:root[tabsintitlebar][sizemode="maximized"] #nav-bar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover, :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive .titlebar-max:hover,
:root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover { :root[tabsintitlebar][sizemode="maximized"] #titlebar:-moz-window-inactive #titlebar-max:hover {
background: url("../titlebuttons/titlebutton-unmaximize-backdrop.svg") no-repeat; background: url("../titlebuttons/titlebutton-unmaximize-backdrop.svg") no-repeat;

View File

@ -0,0 +1,42 @@
/*------------------------USAGE----------------------------
* Remove "/*" at the begining of "@import" line to ENABLE.
* Add "/*" at the begining of "@import" line to DISABLE.
*/
@import "WhiteSur/theme-nord.css"; /**/
/*--------------Configure common theme features--------------*/
/* Move tab close button to left. */
/*@import "WhiteSur/left-tab-close-button.css"; /**/
/* Hide the tab bar when only one tab is open (GNOMISH)
* You should move the new tab button somewhere else for this to work, because by
* default it is on the tab bar too. */
/*@import "WhiteSur/hide-single-tab.css"; /**/
/* Limit the URL bar's autocompletion popup's width to the URL bar's width (GNOMISH)
* This feature is included by default for Firefox 70+ */
/*@import "WhiteSur/matching-autocomplete-width.css"; /**/
/* Rounded window even when it gets maximized */
/*@import "WhiteSur/rounded-window-maximized.css"; /**/
/* Active tab high contrast */
/*@import "WhiteSur/active-tab-contrast.css"; /**/
/* Use system theme icons instead of Adwaita icons included by theme [BUGGED] */
/*@import "WhiteSur/system-icons.css"; /**/
/* Allow drag window from headerbar buttons (GNOMISH) [BUGGED] */
/* It can activate button action, with unpleasant behavior. */
/*@import "WhiteSur/drag-window-headerbar-buttons.css"; /**/
/* Make all tab icons look kinda like symbolic icons */
/*@import "WhiteSur/symbolic-tab-icons.css"; /**/
/* Hide window buttons (close/min/max) in maximized windows */
/*@import "WhiteSur/hide-window-buttons.css"; /**/
/* Import your custom stylesheet */
@import "customChrome.css"; /**/

View File

@ -0,0 +1,7 @@
@import "WhiteSur/colors/light-nord.css";
@import "WhiteSur/colors/dark-nord.css";
@import "WhiteSur/pages/common.css";
@import "WhiteSur/pages/newtab.css";
@import "WhiteSur/pages/reader.css";
@import "WhiteSur/pages/privatebrowsing.css";

View File

@ -6,3 +6,6 @@ $scheme: 'standard';
// Gnome version // Gnome version
$gnome_version: 'old'; $gnome_version: 'old';
// Accent type
$accent_type: 'default';

View File

@ -23,7 +23,7 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
*/ */
@if $gnome_version == 'new' { @if $gnome_version == 'new' and $accent_type == 'default' {
$selected_bg_color: -st-accent-color; $selected_bg_color: -st-accent-color;
$primary_color: -st-accent-color; $primary_color: -st-accent-color;
} }

View File

@ -93,8 +93,8 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
border: none; border: none;
box-shadow: none !important; box-shadow: none !important;
background-color: transparent; background-color: transparent;
padding: $base_padding !important; padding: $base_padding;
margin: 0 !important; margin: 0 $base_padding;
text-shadow: none; text-shadow: none;
// border-radius: $base_border_radius; // border-radius: $base_border_radius;
@ -136,10 +136,10 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
.calendar-day, .calendar-day,
.calendar-day-base { .calendar-day-base {
@extend %numeric; @extend %numeric;
// @extend %smaller; @extend %smaller;
text-align: center; text-align: center;
width: if($font_size == 'normal', 2.8em, 2.4em); width: if($font_size == 'normal', 3em, 2.8em);
height: if($font_size == 'normal', 2.8em, 2.4em); height: if($font_size == 'normal', 3em, 2.8em);
padding: 0; padding: 0;
margin: 2px; margin: 2px;
border-radius: $circular_radius; border-radius: $circular_radius;
@ -360,7 +360,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
// Weather // Weather
.weather-button { .weather-button {
.weather-box { .weather-box {
spacing: $base_spacing + $base_margin; spacing: $base_spacing;
} }
.weather-header-box { .weather-header-box {
@ -384,15 +384,16 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas
.weather-forecast-time { .weather-forecast-time {
@extend %numeric; @extend %numeric;
@include fontsize(10pt); @extend %smaller;
color: $alt_fg_color; color: $alt_fg_color;
font-weight: normal; font-weight: normal;
padding-top: 0.2em; padding-top: $base_padding;
padding-bottom: 0.4em; padding-bottom: $base_padding;
} }
.weather-forecast-icon { .weather-forecast-icon {
icon-size: 32px; icon-size: 32px;
margin-bottom: $base_margin;
} }
.weather-forecast-temp { .weather-forecast-temp {

View File

@ -166,19 +166,6 @@
} }
} }
.prompt-dialog-password-grid {
spacing-rows: 8px;
spacing-columns: 4px;
.prompt-dialog-password-entry {
width: auto;
// 4px (spacing) + 16px (spinner-width)
&:ltr { margin-left: 20px; }
&:rtl { margin-right: 20px; }
}
}
.prompt-dialog-password-layout { .prompt-dialog-password-layout {
spacing: 8px; spacing: 8px;
} }

View File

@ -2,7 +2,7 @@
%theme_dialogs { %theme_dialogs {
background-color: $dialog_bg_color; background-color: $dialog_bg_color;
border-radius: $modal_radius; border-radius: $modal_radius + $base_padding;
border: solid rgba(black, 0.75); border: solid rgba(black, 0.75);
border-width: if($variant=='light', 0, 1px); border-width: if($variant=='light', 0, 1px);
box-shadow: 0 3px 6px 0 rgba(black, if($variant=='light', 0.25, 0.35)); box-shadow: 0 3px 6px 0 rgba(black, if($variant=='light', 0.25, 0.35));
@ -45,34 +45,32 @@
} }
} }
.headline {
@extend %title_4;
}
// modal dialog // modal dialog
.modal-dialog { .modal-dialog {
color: $fg_color; color: $fg_color;
padding: $base_padding * 3; padding: $base_padding * 3;
@extend %theme_dialogs !optional; @extend %theme_dialogs;
.modal-dialog-content-box { .modal-dialog-content-box {
margin: 32px 40px; padding: 16px 32px 6px;
spacing: 32px; spacing: $base_padding * 3;
max-width: 28em; max-width: 28em;
} }
.modal-dialog-button-box { .modal-dialog-button-box {
padding-top: $base_padding; padding-top: $base_padding;
spacing: 0; spacing: $base_padding;
}
.modal-dialog-button { .modal-dialog-button,
.modal-dialog-linked-button {
min-height: 40px; min-height: 40px;
padding: 0 16px; padding: 0 16px;
margin: 0 !important; margin: 0;
border: none !important; border: none !important;
border-radius: $modal_radius - $base_padding * 2; border-radius: $modal_radius - $base_padding * 2;
font-weight: bold;
@include font(button);
@include button(normal); @include button(normal);
&:hover { @include button(hover); } &:hover { @include button(hover); }
&:active { @include button(active); } &:active { @include button(active); }
@ -84,12 +82,11 @@
@extend %last_dialog_button; @extend %last_dialog_button;
} }
} }
}
} }
// End Session Dialog // End Session Dialog
.end-session-dialog { .end-session-dialog {
width: 30em; width: 28em;
// border: none; // border: none;
.end-session-dialog-battery-warning, .end-session-dialog-battery-warning,
@ -141,12 +138,12 @@
// Run Dialog // Run Dialog
.run-dialog { .run-dialog {
.modal-dialog-content-box { width: 24em;
margin-top: 24px;
margin-bottom: 14px; .run-dialog-entry {
padding: $base_padding * 2 $base_padding * 1.5;
} }
.run-dialog-entry { width: 20em; }
.run-dialog-description { .run-dialog-description {
text-align: center; text-align: center;
color: $alt_fg_color; color: $alt_fg_color;
@ -157,25 +154,8 @@
// Password or Authentication Dialog // Password or Authentication Dialog
.prompt-dialog { .prompt-dialog {
//this is the width of the entire modal popup //this is the width of the entire modal popup
width: 28em; width: 24em;
// border: none; // border: none;
.modal-dialog-content-box {
margin-bottom: 24px;
}
}
.prompt-dialog-password-grid {
spacing-rows: 8px;
spacing-columns: 4px;
.prompt-dialog-password-entry {
width: auto;
// 4px (spacing) + 16px (spinner-width)
&:ltr { margin-left: 20px; }
&:rtl { margin-right: 20px; }
}
} }
.prompt-dialog-password-grid { .prompt-dialog-password-grid {
@ -197,6 +177,7 @@
.prompt-dialog-password-entry { .prompt-dialog-password-entry {
width: 20em; width: 20em;
padding: $base_padding * 2 $base_padding * 1.5;
} }
.prompt-dialog-error-label, .prompt-dialog-error-label,
@ -221,6 +202,11 @@
spacing: 8px; spacing: 8px;
margin-bottom: 6px; margin-bottom: 6px;
.polkit-dialog-user-label,
.polkit-dialog-user-root-label {
@extend %title_4;
}
.polkit-dialog-user-root-label { .polkit-dialog-user-root-label {
color: $warning_color; color: $warning_color;
} }
@ -233,8 +219,10 @@
} }
.audio-selection-device { .audio-selection-device {
min-width: 24em;
border: 1px solid $borders_color; border: 1px solid $borders_color;
border-radius: $bt_radius; border-radius: $bt_radius;
&:hover, &:focus { background-color: $visit_color; } &:hover, &:focus { background-color: $visit_color; }
&:active { &:active {
background-color: $selected_bg_color; background-color: $selected_bg_color;
@ -243,8 +231,8 @@
} }
.audio-selection-device-box { .audio-selection-device-box {
padding: 20px; padding: $base_padding * 2;
spacing: 20px; spacing: $base_padding * 2;
} }
.audio-selection-device-icon { .audio-selection-device-icon {
@ -263,3 +251,8 @@
.access-dialog { .access-dialog {
text-align: center; text-align: center;
} }
// specific label style for restart message
.restart-message {
@extend %title_4;
}

View File

@ -3,6 +3,7 @@
.toggle-switch { .toggle-switch {
width: 40px; width: 40px;
height: 24px; height: 24px;
border-radius: $circular_radius;
background-gradient-direction: vertical; background-gradient-direction: vertical;
background-gradient-start: rgba($fg_color, 0.25); background-gradient-start: rgba($fg_color, 0.25);
background-gradient-end: rgba($fg_color, 0.35); background-gradient-end: rgba($fg_color, 0.35);
@ -23,6 +24,7 @@
width: 22px; width: 22px;
height: 22px; height: 22px;
background: white; background: white;
border-radius: $circular_radius;
box-shadow: 0 2px 4px transparentize(black, .9); box-shadow: 0 2px 4px transparentize(black, .9);
transition-duration: 100ms; transition-duration: 100ms;
} }

View File

@ -105,7 +105,7 @@ $dark_5: #000000;
// The main accent color and the matching text value // The main accent color and the matching text value
@if $gnome_version == 'old' { @if $gnome_version == 'old' or $accent_type == 'fixed' {
@define-color accent_bg_color #{$primary_color}; @define-color accent_bg_color #{$primary_color};
@define-color accent_fg_color #{$light_fg_color}; @define-color accent_fg_color #{$light_fg_color};
} }

View File

@ -0,0 +1,122 @@
//WM
$wm_borders_focused: if($variant == 'light', darken($header_bg, 15%), darken($header_bg, 20%));
$wm_borders_unfocused: if($variant == 'light', darken($header_bg, 10%), darken($header_bg, 15%));
@define-color wm_title alpha(#{"" + opacify($header_fg, 1)}, 0.8);
@define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5);
@define-color wm_bg #{"" + opacify($header_bg, 1)};
@define-color wm_bg_unfocused #{"" + opacify($header_bg_backdrop, 1)};
@define-color wm_border_focused #{"" + $wm_borders_focused};
@define-color wm_border_unfocused #{"" + $wm_borders_unfocused};
@define-color wm_highlight alpha(#{white}, 0.12);
@define-color wm_shadow alpha(#{black}, 0.75);
//WM Buttons
// Close
@define-color wm_button_close_bg #{"" + $wm_button_close_bg};
@define-color wm_button_close_hover_bg #{"" + $wm_button_close_hover_bg};
@define-color wm_button_close_active_bg #{"" + $wm_button_close_active_bg};
@define-color wm_icon_close_bg #{"" + $wm_icon_close_bg};
// Minimize, Maximize
@define-color wm_button_hover_bg #{"" + $bg_color};
@define-color wm_button_active_bg #{"" + $bg_color};
@define-color wm_button_hover_border #{"" + $solid_borders_color};
@define-color wm_icon_bg #{"" + $alt_fg_color};
@define-color wm_icon_unfocused_bg #{"" + $alt_disabled_fg_color};
@define-color wm_icon_hover_bg #{"" + $fg_color};
@define-color wm_icon_active_bg #{"" + $fg_color};
// Titlebar
@define-color titlebar_gradient_a #{"" + $header_bg};
@define-color titlebar_gradient_b #{"" + $header_bg};
//
// Budgie-desktop specific indicator colours
//
// unfocused window 'dot(s)'
@define-color budgie_tasklist_indicator_color #{"" + $fg_color};
// focused window 'line'
@define-color budgie_tasklist_indicator_color_active #{"" + $selected_bg_color};
// group-ed and unfocused window 'line(s)'
@define-color budgie_tasklist_indicator_color_active_window #{"" + mix($selected_bg_color, opacify($header_bg, 1), 35%)};
// attention 'dot'
// FIXME: we can't fill whole widget backgrounds with our suggestion colour
// because of lacking specific style-class on 'needs_attention' state,
// so use warning orange dot instead.
@define-color budgie_tasklist_indicator_color_attention #{"" + $warning_color};
//
// Color Palette Definitions for compatibility with Granite.
//
//* Strawberry *
@define-color STRAWBERRY_100 #{#FF9262};
@define-color STRAWBERRY_300 #{#FF793E};
@define-color STRAWBERRY_500 #{#F15D22};
@define-color STRAWBERRY_700 #{#CF3B00};
@define-color STRAWBERRY_900 #{#AC1800};
//* Orange *
@define-color ORANGE_100 #{#FFDB91};
@define-color ORANGE_300 #{#FFCA40};
@define-color ORANGE_500 #{#FAA41A};
@define-color ORANGE_700 #{#DE8800};
@define-color ORANGE_900 #{#C26C00};
//* Banana *
@define-color BANANA_100 #{#FFFFA8};
@define-color BANANA_300 #{#FFFA7D};
@define-color BANANA_500 #{#FFCE51};
@define-color BANANA_700 #{#D1A023};
@define-color BANANA_900 #{#A27100};
//* Lime *
@define-color LIME_100 #{#A2F3BE};
@define-color LIME_300 #{#8ADBA6};
@define-color LIME_500 #{#73C48F};
@define-color LIME_700 #{#479863};
@define-color LIME_900 #{#1C6D38};
//* Blueberry *
@define-color BLUEBERRY_100 #{#94A6FF};
@define-color BLUEBERRY_300 #{#6A7CE0};
@define-color BLUEBERRY_500 #{#3F51B5};
@define-color BLUEBERRY_700 #{#213397};
@define-color BLUEBERRY_900 #{#031579};
//* Grape *
@define-color GRAPE_100 #{#D25DE6};
@define-color GRAPE_300 #{#B84ACB};
@define-color GRAPE_500 #{#9C27B0};
@define-color GRAPE_700 #{#830E97};
@define-color GRAPE_900 #{#6A007E};
//* Cocoa *
@define-color COCOA_100 #{#9F9792};
@define-color COCOA_300 #{#7B736E};
@define-color COCOA_500 #{#574F4A};
@define-color COCOA_700 #{#463E39};
@define-color COCOA_900 #{#342C27};
//* Silver *
@define-color SILVER_100 #{#EEE};
@define-color SILVER_300 #{#CCC};
@define-color SILVER_500 #{#AAA};
@define-color SILVER_700 #{#888};
@define-color SILVER_900 #{#666};
//* Slate *
@define-color SLATE_100 #{#888};
@define-color SLATE_300 #{#666};
@define-color SLATE_500 #{#444};
@define-color SLATE_700 #{#222};
@define-color SLATE_900 #{#111};
//* Black *
@define-color BLACK_100 #{#474341};
@define-color BLACK_300 #{#403C3A};
@define-color BLACK_500 #{#393634};
@define-color BLACK_700 #{#33302F};
@define-color BLACK_900 #{#2B2928};

View File

@ -37,131 +37,3 @@ $theme_text: currentColor;
/* Very contrasty background for text views (@theme_text_color foreground) */ /* Very contrasty background for text views (@theme_text_color foreground) */
@define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color, 6%))}; @define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color, 6%))};
//WM
$wm_borders_focused: if($variant == 'light', darken($header_bg, 15%), darken($header_bg, 20%));
$wm_borders_unfocused: if($variant == 'light', darken($header_bg, 10%), darken($header_bg, 15%));
@define-color wm_title alpha(#{"" + opacify($header_fg, 1)}, 0.8);
@define-color wm_unfocused_title alpha(#{"" + opacify($header_fg, 1)}, 0.5);
@define-color wm_bg #{"" + opacify($header_bg, 1)};
@define-color wm_bg_unfocused #{"" + opacify($header_bg_backdrop, 1)};
@define-color wm_border_focused #{"" + $wm_borders_focused};
@define-color wm_border_unfocused #{"" + $wm_borders_unfocused};
@define-color wm_highlight alpha(#{white}, 0.12);
@define-color wm_shadow alpha(#{black}, 0.75);
//WM Buttons
// Close
@define-color wm_button_close_bg #{"" + $wm_button_close_bg};
@define-color wm_button_close_hover_bg #{"" + $wm_button_close_hover_bg};
@define-color wm_button_close_active_bg #{"" + $wm_button_close_active_bg};
@define-color wm_icon_close_bg #{"" + $wm_icon_close_bg};
// Minimize, Maximize
@define-color wm_button_hover_bg #{"" + $bg_color};
@define-color wm_button_active_bg #{"" + $bg_color};
@define-color wm_button_hover_border #{"" + $solid_borders_color};
@define-color wm_icon_bg #{"" + $alt_fg_color};
@define-color wm_icon_unfocused_bg #{"" + $alt_disabled_fg_color};
@define-color wm_icon_hover_bg #{"" + $fg_color};
@define-color wm_icon_active_bg #{"" + $fg_color};
// Titlebar
@define-color titlebar_gradient_a #{"" + $header_bg};
@define-color titlebar_gradient_b #{"" + $header_bg};
//
// Budgie-desktop specific indicator colours
//
// unfocused window 'dot(s)'
@define-color budgie_tasklist_indicator_color #{"" + $fg_color};
// focused window 'line'
@define-color budgie_tasklist_indicator_color_active #{"" + $selected_bg_color};
// group-ed and unfocused window 'line(s)'
@if $gnome_version == 'old' {
@define-color budgie_tasklist_indicator_color_active_window #{"" + mix($selected_bg_color, opacify($header_bg, 1), 35%)};
} @else {
@define-color budgie_tasklist_indicator_color_active_window #{"" + color-mix(in srgb, $selected_bg_color 35%, $header_bg)};
}
// attention 'dot'
// FIXME: we can't fill whole widget backgrounds with our suggestion colour
// because of lacking specific style-class on 'needs_attention' state,
// so use warning orange dot instead.
@define-color budgie_tasklist_indicator_color_attention #{"" + $warning_color};
//
// Color Palette Definitions for compatibility with Granite.
//
//* Strawberry *
@define-color STRAWBERRY_100 #{#FF9262};
@define-color STRAWBERRY_300 #{#FF793E};
@define-color STRAWBERRY_500 #{#F15D22};
@define-color STRAWBERRY_700 #{#CF3B00};
@define-color STRAWBERRY_900 #{#AC1800};
//* Orange *
@define-color ORANGE_100 #{#FFDB91};
@define-color ORANGE_300 #{#FFCA40};
@define-color ORANGE_500 #{#FAA41A};
@define-color ORANGE_700 #{#DE8800};
@define-color ORANGE_900 #{#C26C00};
//* Banana *
@define-color BANANA_100 #{#FFFFA8};
@define-color BANANA_300 #{#FFFA7D};
@define-color BANANA_500 #{#FFCE51};
@define-color BANANA_700 #{#D1A023};
@define-color BANANA_900 #{#A27100};
//* Lime *
@define-color LIME_100 #{#A2F3BE};
@define-color LIME_300 #{#8ADBA6};
@define-color LIME_500 #{#73C48F};
@define-color LIME_700 #{#479863};
@define-color LIME_900 #{#1C6D38};
//* Blueberry *
@define-color BLUEBERRY_100 #{#94A6FF};
@define-color BLUEBERRY_300 #{#6A7CE0};
@define-color BLUEBERRY_500 #{#3F51B5};
@define-color BLUEBERRY_700 #{#213397};
@define-color BLUEBERRY_900 #{#031579};
//* Grape *
@define-color GRAPE_100 #{#D25DE6};
@define-color GRAPE_300 #{#B84ACB};
@define-color GRAPE_500 #{#9C27B0};
@define-color GRAPE_700 #{#830E97};
@define-color GRAPE_900 #{#6A007E};
//* Cocoa *
@define-color COCOA_100 #{#9F9792};
@define-color COCOA_300 #{#7B736E};
@define-color COCOA_500 #{#574F4A};
@define-color COCOA_700 #{#463E39};
@define-color COCOA_900 #{#342C27};
//* Silver *
@define-color SILVER_100 #{#EEE};
@define-color SILVER_300 #{#CCC};
@define-color SILVER_500 #{#AAA};
@define-color SILVER_700 #{#888};
@define-color SILVER_900 #{#666};
//* Slate *
@define-color SLATE_100 #{#888};
@define-color SLATE_300 #{#666};
@define-color SLATE_500 #{#444};
@define-color SLATE_700 #{#222};
@define-color SLATE_900 #{#111};
//* Black *
@define-color BLACK_100 #{#474341};
@define-color BLACK_300 #{#403C3A};
@define-color BLACK_500 #{#393634};
@define-color BLACK_700 #{#33302F};
@define-color BLACK_900 #{#2B2928};

View File

@ -1531,7 +1531,7 @@ headerbar {
font-size: smaller; font-size: smaller;
padding-left: $container_padding * 2; padding-left: $container_padding * 2;
padding-right: $container_padding * 2; padding-right: $container_padding * 2;
margin-top: -3px; // margin-top: -3px;
@extend %dim-label; @extend %dim-label;
} }

View File

@ -1548,6 +1548,7 @@ button.link {
// //
spinbutton { spinbutton {
background: none; background: none;
min-height: $small_size;
&:drop(active) { box-shadow: none; } &:drop(active) { box-shadow: none; }
@ -1599,9 +1600,12 @@ spinbutton {
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
min-width: $menuitem_size; min-width: $menuitem_size;
min-height: $small_size - 4px;
} }
> button, > text { @extend %linked; min-height: $small_size; } > button { min-height: $small_size; }
> button, > text { @extend %linked; }
&:dir(ltr) > text, &:dir(ltr) > text,
&:dir(rtl) > button.up { border-radius: $bt_radius 0 0 $bt_radius; } &:dir(rtl) > button.up { border-radius: $bt_radius 0 0 $bt_radius; }
@ -1885,15 +1889,6 @@ searchbar {
> revealer > box { > revealer > box {
padding: $container_padding; padding: $container_padding;
border-spacing: $container_padding; border-spacing: $container_padding;
entry, button { margin: 0; }
.close {
min-width: 18px;
min-height: 18px;
padding: 4px;
border-radius: 50%;
}
} }
&:not(.inline) > revealer > box { &:not(.inline) > revealer > box {
@ -1906,8 +1901,11 @@ searchbar {
} }
// Close button on searchbar // Close button on searchbar
button.flat { button.flat, .close {
@extend %circular_button; min-width: 18px;
min-height: 18px;
padding: 4px;
border-radius: 50%;
} }
.top-bar &:not(.inline) > revealer > box, .top-bar &:not(.inline) > revealer > box,
@ -1924,11 +1922,34 @@ actionbar > revealer > box {
box-shadow: none; box-shadow: none;
color: $text_color; color: $text_color;
entry, button { margin: 0; }
&, > box.start, > box.end { &, > box.start, > box.end {
border-spacing: $container_padding; border-spacing: $container_padding;
} }
&:backdrop {
background-color: $bg_color;
> * {
filter: opacity(.5);
}
}
}
%actionbar-inline > revealer > box {
background-color: transparent;
color: inherit;
box-shadow: none;
padding-top: $container_padding;
&:backdrop {
background-color: transparent;
transition: none;
> * {
filter: none;
transition: none;
}
}
} }
// //
@ -2033,11 +2054,11 @@ actionbar > revealer > box {
headerbar { headerbar {
min-height: $headerbar_size; min-height: $headerbar_size;
padding: 0; padding: 0;
margin: 0;
color: $header_fg; color: $header_fg;
background-color: $header_bg; background-color: $header_bg;
border-bottom: 1px solid $header_border; border-bottom: 1px solid $header_border;
box-shadow: none; box-shadow: none;
margin: 0;
&:backdrop { &:backdrop {
opacity: 1; opacity: 1;
@ -2054,16 +2075,6 @@ headerbar {
background: none; background: none;
} }
> windowhandle > box {
padding: 0 8px;
&,
> box.start,
> box.end {
border-spacing: $container_padding;
}
}
windowcontrols { windowcontrols {
padding: 0 $container_padding / 2; padding: 0 $container_padding / 2;
} }
@ -2081,7 +2092,7 @@ headerbar {
} }
> windowhandle > box { > windowhandle > box {
padding: 0 8px; padding: 8px;
&, &,
> box.start, > box.start,
@ -2092,6 +2103,7 @@ headerbar {
entry { entry {
@extend %headerbar_entrys; @extend %headerbar_entrys;
border-spacing: 4px;
} }
button { button {
@ -2104,33 +2116,6 @@ headerbar {
} }
} }
entry,
spinbutton,
button,
menubutton,
splitbutton,
stackswitcher,
separator:not(.sidebar) {
margin-top: 8px;
margin-bottom: 8px;
}
menubutton > button,
spinbutton > button,
splitbutton > button,
splitbutton > menubutton,
entry > menubutton,
popover entry,
popover spinbutton,
popover button,
popover menubutton,
popover splitbutton,
popover stackswitcher,
popover separator:not(.sidebar) {
margin-top: 0;
margin-bottom: 0;
}
// Reset linked buttons // Reset linked buttons
.linked.raised > & { .linked.raised > & {
// min-width: 16px; // min-width: 16px;
@ -2142,7 +2127,6 @@ headerbar {
} }
stackswitcher.linked:not(.vertical) > button { stackswitcher.linked:not(.vertical) > button {
// min-height: $menuitem_size - 8px;
min-width: $menuitem_size - 4px; min-width: $menuitem_size - 4px;
border-radius: $bt_radius; border-radius: $bt_radius;
} }
@ -2150,18 +2134,14 @@ headerbar {
// Reset linking entrys // Reset linking entrys
.linked:not(.vertical) > entry { .linked:not(.vertical) > entry {
@include entry(header-normal); @include entry(header-normal);
// margin: 8px ($container_padding / 2 + 1px);
padding: 0 $container_padding * 2; padding: 0 $container_padding * 2;
// border-radius: $bt_radius;
border: none; border: none;
&:focus { &:focus {
// border-radius: $bt_radius;
@include entry(header-focus); @include entry(header-focus);
} }
&:disabled { &:disabled {
// border-radius: $bt_radius;
@include entry(header-insensitive); @include entry(header-insensitive);
} }
@ -2174,8 +2154,6 @@ headerbar {
padding: 0; padding: 0;
> button { > button {
// min-height: $menuitem_size - 8px;
margin: 0;
font-weight: 500; font-weight: 500;
&:not(:first-child) { &:not(:first-child) {
@ -2298,7 +2276,7 @@ headerbar {
// Titlebuttons // Titlebuttons
windowcontrols { windowcontrols {
border-spacing: 6px; border-spacing: $container_padding;
padding: 0 10px; padding: 0 10px;
&:not(.empty) { &:not(.empty) {
@ -2328,7 +2306,6 @@ headerbar {
&.close, &.maximize, &.minimize { &.close, &.maximize, &.minimize {
min-width: 16px; min-width: 16px;
min-height: 16px; min-height: 16px;
margin: 8px 0;
padding: ($menuitem_size - 20px) / 2 0; padding: ($menuitem_size - 20px) / 2 0;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -4024,10 +4001,10 @@ scrolledwindow {
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
// This draws a box on top of the content, the size changes programmatically. // This draws a box on top of the content, the size changes programmatically.
> overshoot { > overshoot {
&.top { @include overshoot_alt(top); } &.top { @include overshoot(top); }
&.bottom { @include overshoot_alt(bottom); } &.bottom { @include overshoot(bottom); }
&.left { @include overshoot_alt(left); } &.left { @include overshoot(left); }
&.right { @include overshoot_alt(right); } &.right { @include overshoot(right); }
} }
// Overflow indication, works similarly to the overshoot, the size if fixed tho. // Overflow indication, works similarly to the overshoot, the size if fixed tho.

View File

@ -0,0 +1,494 @@
// Solid color image
@function _solid($c) {
@return linear-gradient(to bottom, $c, $c);
}
// Entries
@mixin entry($t) {
//
// Entries drawing function
//
// $t: entry type
//
@if $t==normal {
//
// normal entry
//
color: $text_color;
background-color: $entry_bg;
box-shadow: inset 0 0 0 2px transparent;
}
@if $t==hover {
//
// hover entry
//
color: $text_color;
background-color: $entry_bg;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
transition-duration: $shorter_duration * 2;
}
@if $t==focus {
//
// focused entry
//
color: $text_color;
background-color: $entry_bg;
box-shadow: inset 0 0 0 2px $entry_highlight;
transition-duration: $longer_duration * 2;
}
@if $t==insensitive {
//
// insensitive entry
//
color: $disabled_fg_color;
background-color: rgba($entry_bg, 0.02);
}
@if $t==header-normal {
//
// normal header-bar entry
//
color: $header_fg;
background-color: $entry_bg;
box-shadow: inset 0 0 0 2px transparent;
image, image:hover { color: inherit; }
}
@if $t==header-hover {
//
// header-hover entry
//
color: $header_fg;
background-color: $entry_bg;
box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05), inset 0 0 0 2px transparent;
transition-duration: $shorter_duration * 2;
}
@if $t==header-focus {
//
// focused header-bar entry
//
// border-color: $selection_mode_bg;
background-image: none;
background-color: $entry_bg;
box-shadow: inset 0 0 0 2px $entry_highlight;
}
@if $t==header-insensitive {
//
// insensitive header-bar entry
//
color: rgba($header_fg, 0.35);
background-color: rgba($entry_bg, 0.02);
}
@else if $t==osd {
//
// normal osd entry
//
color: $osd_fg_color;
border-color: $osd_entry_border;
background-color: $osd_entry_bg;
image, image:hover { color: inherit; }
}
@else if $t==osd-focus {
//
// active osd entry
//
color: $selected_fg_color;
background-color: $selected_bg_color;
border-color: darken($selection_mode_bg, 5%);
}
@else if $t==osd-insensitive {
//
// insensitive osd entry
//
color: $osd_disabled_fg_color;
background-color: transparentize($osd_entry_bg, 0.15);
}
}
// Buttons
@mixin button($t, $actionb_bg: red, $actionb_fg: green) {
//
// Button drawing function
//
// $t: button type,
// $actionb_bg, $actionb_fg: used for destructive and suggested action buttons
@if $t==normal {
//
// normal button
//
color: $fg_color;
border-color: $button_borders;
background-color: $button_bg;
@if $variant=='light' { box-shadow: $shadow_3; }
@if $variant=='dark' {
box-shadow: inset 0 1px $button_highlight, inset 0 -1px rgba(white, 0.02), $shadow_3;
}
}
@else if $t==hover {
//
// hovered button
//
color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
border-color: $button_borders;
background-color: if($variant=='light', darken($button_bg, 3%), lighten($button_bg, 3%));
@if $variant=='light' { box-shadow: none; }
@if $variant=='dark' {
box-shadow: inset 0 1px rgba($button_highlight, 0.12), $shadow_3;
}
}
@else if $t==active {
//
// pushed button
//
color: $selected_fg_color;
background-color: $selected_bg_color;
border-color: if($variant=='light', $selected_bg_color, $dark_borders_color);
@if $variant=='light' { box-shadow: none; }
}
@else if $t==insensitive {
//
// insensitive button
//
label, & { color: $disabled_fg_color; }
border-color: if($variant == 'light', $button_border, $dark_borders_color);
background-color: rgba($button_bg, 0.55);
box-shadow: none;
}
@else if $t==insensitive-active {
//
// insensitive pushed button
//
label, & { color: transparentize($selected_fg_color, 0.45); }
border-color: if($variant == 'light', $selected_bg_color, $dark_borders_color);
background-color: rgba($selected_bg_color, 0.45);
@if $variant=='light' { box-shadow: none; }
opacity: 0.6;
}
@if $t==flat-normal {
//
// normal button
//
border: none;
background-color: transparent;
box-shadow: none;
background-clip: if($variant=='light', border-box, padding-box);
}
@else if $t==flat-hover {
//
// hovered button
//
color: darken($fg_color, 10%);
background-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
background-image: none;
box-shadow: none;
// border-color: if($variant=='light', rgba(black, 0.15), rgba(white, 0.15));
}
@else if $t==flat-active {
//
// pushed button
//
background-image: none;
color: $selected_fg_color;
background-color: if($variant=='light', rgba(black, 0.5), rgba(white, 0.25));
}
@else if $t==flat-checked {
//
// pushed button
//
background-image: none;
color: $selected_fg_color;
background-color: if($variant=='light', rgba(black, 0.65), rgba(white, 0.35));
}
@else if $t==flat-insensitive {
//
// insensitive button
//
label, & { color: $disabled_fg_color; }
background-color: transparent;
}
@else if $t==flat-insensitive-active {
//
// insensitive pushed button
//
label, & { color: transparentize($selected_fg_color, 0.35); }
background-color: if($variant=='light', rgba(black, 0.3), rgba(white, 0.15));
opacity: 0.6;
}
@if $t==header-normal {
//
// normal header-bar button
//
color: $header_fg;
background-color: transparent;
background-image: none;
border: none;
box-shadow: none;
}
@else if $t==header-hover {
//
// hovered header-bar button
//
color: darken($header_fg, 2%);
background-color: rgba($header_fg, 0.1);
background-image: none;
box-shadow: none;
}
@else if $t==header-active {
//
// pushed header-bar button
//
color: $header_fg;
background-color: rgba($header_fg, 0.25);
background-image: none;
box-shadow: none;
}
@else if $t==header-checked {
//
// pushed header-bar button
//
color: $header_fg;
background-color: rgba($header_fg, 0.12);
background-image: none;
box-shadow: none;
}
@else if $t==header-insensitive {
//
// insensitive header-bar button
//
label, & { color: rgba($header_fg, 0.35); }
background-image: none;
background-color: transparent;
box-shadow: none;
}
@else if $t==header-insensitive-active {
//
// header-bar insensitive pushed button
//
label, & { color: rgba($header_fg, 0.35); }
background-image: none;
background-color: transparent;
box-shadow: none;
}
@else if $t==osd {
//
// normal osd button
//
color: $osd_fg_color;
border-color: $osd_button_border;
background-color: rgba(white, 0.08);
box-shadow: none;
}
@else if $t==osd-hover {
//
// active osd button
//
color: $osd_fg_color;
border-color: $osd_button_border;
background-color: rgba(white, 0.16);
box-shadow: none;
}
@else if $t==osd-active {
//
// active osd button
//
color: $selected_fg_color;
border-color: $osd_button_border;
background-color: rgba(white, 0.25);
background-image: none;
box-shadow: none;
background-clip: padding-box;
}
@else if $t==osd-insensitive {
//
// insensitive osd button
//
color: $osd_disabled_fg_color;
border-color: $osd_button_border;
background-color: rgba(white, 0.03);
box-shadow: none;
}
@else if $t==suggested_destructive {
//
// suggested or destructive action buttons
//
@if $variant == 'light' { background-clip: border-box; }
color: $actionb_fg;
background-color: $actionb_bg;
background-image: none;
box-shadow: if($variant=='light', none, (inset 0 1px rgba(white, 0.15), inset 0 -1px rgba(white, 0.03)));
border-color: if($variant == 'light', darken($actionb_bg, 6%), $dark_borders_color);
}
@else if $t==undecorated {
//
// reset
//
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
}
}
//
// Overshoot
//
@mixin overshoot($p, $t:normal, $c:$fg_color) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
//
$_small_gradient_length: 5%;
$_big_gradient_length: 100%;
$_position: center top;
$_small_gradient_size: 100% $_small_gradient_length;
$_big_gradient_size: 100% $_big_gradient_length;
@if $p==bottom {
$_position: center bottom;
$_linear_gradient_direction: to top;
}
@else if $p==right {
$_position: right center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
@else if $p==left {
$_position: left center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
$_small_gradient_color: $c;
$_big_gradient_color: $c;
@if $c==$fg_color {
$_small_gradient_color: $borders_color;
$_big_gradient_color: $text_color;
@if $t==backdrop { $_small_gradient_color: $fill_color; }
}
$_small_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.5,
to($_small_gradient_color),
to(rgba($_small_gradient_color, 0)));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.6,
from(rgba($_big_gradient_color, 0.07)),
to(rgba($_big_gradient_color, 0)));
@if $t==normal {
background-image: $_small_gradient, $_big_gradient;
background-size: $_small_gradient_size, $_big_gradient_size;
}
@else if $t==backdrop {
background-image: $_small_gradient;
background-size: $_small_gradient_size;
}
background-repeat: no-repeat;
background-position: $_position;
background-color: transparent; // reset some properties to be sure to not inherit them somehow
border: none; //
box-shadow: none; //
}
@mixin undershoot($p, $c: $wm_shadow, $neighbor: false, $style: default) {
//
// undershoot
//
// $p: position
// $c: shade color
// $neighbor: use ~ instead of >
//
// possible $p values:
// top, bottom, right, left
//
$_border_pos: '';
$_direction: '';
$_selector: if($neighbor, '~', '>');
@if $p==top {
$_direction: bottom;
$_border_pos: 0 1px;
} @else if $p==bottom {
$_direction: top;
$_border_pos: 0 -1px;
} @else if $p==left {
$_direction: right;
$_border_pos: 1px 0;
} @else if $p==right {
$_direction: left;
$_border_pos: -1px 0;
} @else {
@error "Unknown position #{$p}"
}
#{$_selector} undershoot.#{$p} {
box-shadow: if($style == 'default', none, inset $_border_pos $borders_color);
background: linear-gradient(to $_direction, gtkalpha($c, .25), transparent 6px);
}
}

View File

@ -384,87 +384,9 @@
// //
// Overshoot // Overshoot
//
@mixin overshoot($p, $t:normal, $c:$fg_color) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
// //
$_small_gradient_length: 5%; @mixin overshoot($p) {
$_big_gradient_length: 100%;
$_position: center top;
$_small_gradient_size: 100% $_small_gradient_length;
$_big_gradient_size: 100% $_big_gradient_length;
@if $p==bottom {
$_position: center bottom;
$_linear_gradient_direction: to top;
}
@else if $p==right {
$_position: right center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
@else if $p==left {
$_position: left center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
$_small_gradient_color: $c;
$_big_gradient_color: $c;
@if $c==$fg_color {
$_small_gradient_color: $borders_color;
$_big_gradient_color: $text_color;
@if $t==backdrop { $_small_gradient_color: $fill_color; }
}
$_small_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.5,
to($_small_gradient_color),
to(rgba($_small_gradient_color, 0)));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.6,
from(rgba($_big_gradient_color, 0.07)),
to(rgba($_big_gradient_color, 0)));
@if $t==normal {
background-image: $_small_gradient, $_big_gradient;
background-size: $_small_gradient_size, $_big_gradient_size;
}
@else if $t==backdrop {
background-image: $_small_gradient;
background-size: $_small_gradient_size;
}
background-repeat: no-repeat;
background-position: $_position;
background-color: transparent; // reset some properties to be sure to not inherit them somehow
border: none; //
box-shadow: none; //
}
@mixin overshoot_alt($p) {
// //
// overshoot // overshoot
// //

View File

@ -84,8 +84,6 @@ $flap_sidebar_size: 240px;
} }
} }
headerbar > windowhandle > box { padding: 0 10px; }
flap.unfolded, flap.unfolded,
.sidebar-pane { .sidebar-pane {
&, &:backdrop { &, &:backdrop {
@ -211,9 +209,8 @@ $flap_sidebar_size: 240px;
} }
#NautilusQueryEditor { // search entry #NautilusQueryEditor { // search entry
padding: 0 $container_padding; padding: 2px $container_padding;
border-spacing: 0; border-spacing: 0;
margin: 9px 0 8px 0;
> image, > box, > text { > image, > box, > text {
margin: 0; margin: 0;
@ -239,7 +236,7 @@ $flap_sidebar_size: 240px;
#NautilusPathBar { #NautilusPathBar {
background-color: $fill_color; background-color: $fill_color;
border-radius: $bt_radius; border-radius: $bt_radius;
margin: 8px 0 8px $container_padding; margin: 0 0 0 $container_padding;
#NautilusPathButton { #NautilusPathButton {
margin: 0 $container_padding / 2; margin: 0 $container_padding / 2;

View File

@ -116,6 +116,10 @@ preferencesgroup > box {
> box.single-line { > box.single-line {
min-height: 34px; min-height: 34px;
} }
grid > box > switch {
margin: 14px 0;
}
} }
// //
@ -235,10 +239,6 @@ viewswitcher {
&.wide { &.wide {
border-spacing: 0; border-spacing: 0;
> button.toggle {
margin: 8px 0;
}
} }
&.narrow > button.toggle { &.narrow > button.toggle {
@ -357,7 +357,6 @@ headerbar > windowhandle > box viewswitcher {
box-shadow: inset 0 0 0 1px $light_borders_color; box-shadow: inset 0 0 0 1px $light_borders_color;
border-radius: $bt_radius; border-radius: $bt_radius;
padding: 0; padding: 0;
margin: 8px 0;
> button.toggle { > button.toggle {
margin: 0; margin: 0;
@ -851,6 +850,112 @@ dialog-host > dialog.osd:not(progressbar):not(button):not(menubutton):not(splitb
} }
} }
//
// AdwToolbarView
//
toolbarview {
> .top-bar,
> .bottom-bar {
searchbar,
actionbar {
> revealer > box {
background-color: transparent;
border: none;
box-shadow: none;
}
}
.toolbar {
background-color: transparent;
}
.collapse-spacing {
padding-top: 0;
padding-bottom: 0;
headerbar {
min-height: $headerbar_size;
> windowhandle > box {
padding-top: 8px;
padding-bottom: 8px;
}
&.default-decoration {
min-height: $medium_size;
> windowhandle > box {
padding-top: 0;
padding-bottom: 0;
}
}
}
searchbar,
actionbar {
> revealer > box {
padding-top: $container_padding;
padding-bottom: $container_padding;
}
}
.toolbar {
padding-top: $container_padding;
padding-bottom: $container_padding;
}
tabbar {
padding-top: 0;
padding-bottom: 0;
}
}
&.raised {
background-color: transparent;
color: $header_fg;
&:backdrop {
background-color: transparent;
}
}
&:backdrop > windowhandle {
filter: none;
}
}
> .bottom-bar {
padding: 0;
border-spacing: 0;
box-shadow: inset 0 1px $borders_color;
background-color: darken($bg_color, 3%);
color: $text_color;
&:backdrop {
background-color: $bg_color;
color: $disabled_fg_color;
}
actionbar { @extend %actionbar-inline; }
}
> .top-bar.raised {
box-shadow: none;
&.border {
box-shadow: none;
}
}
> .bottom-bar.raised {
box-shadow: none;
&.border {
box-shadow: none;
}
}
}
// ThemeSelector // ThemeSelector
themeselector, // Gnome text editor themeselector, // Gnome text editor
panelthemeselector { // Gnome builder panelthemeselector { // Gnome builder

View File

@ -51,7 +51,8 @@ usage() {
sec_helpify "2. flat" " Monterey alt version" "" " Flat round tabs..." sec_helpify "2. flat" " Monterey alt version" "" " Flat round tabs..."
sec_helpify "3. alt" " Alt windows button version" "" " Alt windows button style like gtk theme" sec_helpify "3. alt" " Alt windows button version" "" " Alt windows button style like gtk theme"
sec_helpify "4. darker" " Darker Firefox theme version" "" " Darker Firefox theme version" sec_helpify "4. darker" " Darker Firefox theme version" "" " Darker Firefox theme version"
sec_helpify "5. adaptive" " Adaptive color version" " You need install adaptive-tab-bar-colour plugin first" " https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/" sec_helpify "5. nord" " Nord Firefox colorscheme version" "" " Nord Firefox colorscheme version"
sec_helpify "6. adaptive" " Adaptive color version" " You need install adaptive-tab-bar-colour plugin first" " https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/"
helpify "-e, --edit-firefox" "[(monterey|flat)|alt|(darker|adaptive)]" " Edit '${THEME_NAME}' theme for Firefox settings and also connect the theme to the current Firefox profiles" "" helpify "-e, --edit-firefox" "[(monterey|flat)|alt|(darker|adaptive)]" " Edit '${THEME_NAME}' theme for Firefox settings and also connect the theme to the current Firefox profiles" ""
@ -174,6 +175,10 @@ while [[ $# -gt 0 ]]; do
darker="-darker" darker="-darker"
prompt -i "Darker Firefox theme version...\n" prompt -i "Darker Firefox theme version...\n"
shift ;; shift ;;
nord)
colorscheme="-nord"
prompt -i "Nord Firefox colorscheme version...\n"
shift ;;
adaptive) adaptive)
adaptive="-adaptive" adaptive="-adaptive"
prompt -i "Firefox adaptive color version...\n" prompt -i "Firefox adaptive color version...\n"